@foodpilot/foods 2.7.17 → 2.8.0

package/dist/components/Button/TertiaryToggleButton.d.ts

@@ -5,7 +5,7 @@ import { DetailedHTMLProps, ButtonHTMLAttributes, DO_NOT_USE_OR_YOU_WILL_BE_FIRE
 import { MUIStyledCommonProps } from '@mui/system';
 export declare const CustomToggleButton: StyledComponent< ToggleButtonOwnProps & Omit< ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "sx" | "size" | "disabled" | "value" | "action" | "selected" | "disableFocusRipple" | "disableRipple" | "fullWidth" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & MUIStyledCommonProps<Theme>, {}, {}>;
+}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "sx" | "size" | "disabled" | "value" | "action" | "selected" | "fullWidth" | "disableFocusRipple" | "disableRipple" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & MUIStyledCommonProps<Theme>, {}, {}>;
 type ToggleButtonsPropsWithoutEnforcedKeys = Omit<ToggleButtonProps, "value" | "onClick" | "selected">;
 export type TertiaryToggleButtonProps = ToggleButtonsPropsWithoutEnforcedKeys & {
     choices: string[];

package/dist/components/Button/TertiaryToggleButtonNodeTitle.d.ts

@@ -5,7 +5,7 @@ import { CommonProps } from '@mui/material/OverridableComponent';
 import { MUIStyledCommonProps } from '@mui/system';
 export declare const CustomToggleButtonNodeTitle: StyledComponent< ToggleButtonOwnProps & Omit< ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "sx" | "size" | "disabled" | "value" | "action" | "selected" | "disableFocusRipple" | "disableRipple" | "fullWidth" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & MUIStyledCommonProps<Theme>, {}, {}>;
+}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "onChange" | "onClick" | "sx" | "size" | "disabled" | "value" | "action" | "selected" | "fullWidth" | "disableFocusRipple" | "disableRipple" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & MUIStyledCommonProps<Theme>, {}, {}>;
 type ToggleButtonsPropsWithoutEnforcedKeys = Omit<ToggleButtonProps, "value" | "onClick" | "selected">;
 export type TertiaryToggleButtonPropsNodeTitle = ToggleButtonsPropsWithoutEnforcedKeys & {
     choices: ReactNode[];

package/dist/components/Chart/PolymorphicChart/PolymorphicChart.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { TypographyProps } from '@mui/material';
 import { Property } from 'csstype';
 import { ChartLegend } from '../Legend';
-export type ChartType = "donut" | "bar" | "line" | "pie" | "radar" | "table" | "raw";
+export type ChartType = "donut" | "bar" | "line" | "cumulative" | "pie" | "radar" | "table" | "raw";
 export type AggregationOptions = {
     showAggregateToggle?: boolean;
     aggregateToggleLabel?: string;
@@ -35,5 +35,6 @@ export type PolymorphicChartProps = {
     maxScore?: number | number[];
     separator?: string;
     aggregation?: AggregationOptions;
+    cumulativeDescriptions?: string[];
 };
 export declare const PolymorphicChart: (props: PolymorphicChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/PolymorphicChart/PolymorphicChart.js

@@ -22,7 +22,7 @@ const LEGEND_GAP_SPACING_BOTTOM = 2;
 const HOVER_ANIMATION_DURATION = "0.2s";
 const SCALE_NORMAL = 1;
 const HOVER_OFFSET_DIVISOR = 100;
-const CHART_TYPES_WITHOUT_LEGEND = ["table"];
+const CHART_TYPES_WITHOUT_LEGEND = ["table", "cumulative"];
 const PolymorphicChart = (props) => {
   const theme = useTheme();
   const {
@@ -50,7 +50,8 @@ const PolymorphicChart = (props) => {
     height = DEFAULT_HEIGHT,
     maxScore,
     separator,
-    aggregation
+    aggregation,
+    cumulativeDescriptions
   } = props;
   const {
     showAggregateToggle = false,
@@ -225,7 +226,8 @@ const PolymorphicChart = (props) => {
                       }
                     },
                     maxScore,
-                    separator
+                    separator,
+                    cumulativeDescriptions
                   }
                 ),
                 showCenterContent && !isLoading && /* @__PURE__ */ jsx(

package/dist/components/Chart/PolymorphicChart/PolymorphicChartRenderer.d.ts

@@ -27,6 +27,7 @@ type PolymorphicChartRendererProps = {
     onLegendAction?: (index: number) => void;
     maxScore?: number | number[];
     separator?: string;
+    cumulativeDescriptions?: string[];
 };
 export declare const PolymorphicChartRenderer: (props: PolymorphicChartRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Chart/PolymorphicChart/PolymorphicChartRenderer.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { PolymorphicBarChart } from "./charts/PolymorphicBarChart.js";
 import { PolymorphicLineChart } from "./charts/PolymorphicLineChart.js";
+import { PolymorphicCumulativeChart } from "./charts/PolymorphicCumulativeChart.js";
 import { PolymorphicPieChart } from "./charts/PolymorphicPieChart.js";
 import { PolymorphicRadarChart } from "./charts/PolymorphicRadarChart.js";
 import { PolymorphicTable } from "./charts/PolymorphicTable.js";
@@ -59,27 +60,27 @@ const PolymorphicChartRenderer = (props) => {
           onMouseEnter: indexOnlyMouseEnter
         }
       );
-    case "radar":
+    case "cumulative":
       return /* @__PURE__ */ jsx(
-        PolymorphicRadarChart,
+        PolymorphicCumulativeChart,
         {
           ...restProps,
           isLoading,
-          height,
-          onMouseEnter: indexOnlyMouseEnter
+          descriptions: props.cumulativeDescriptions
         }
       );
-    case "table":
+    case "radar":
       return /* @__PURE__ */ jsx(
-        PolymorphicTable,
+        PolymorphicRadarChart,
         {
           ...restProps,
           isLoading,
           height,
-          tooltipPos,
-          onMouseEnter: simpleMouseEnter
+          onMouseEnter: indexOnlyMouseEnter
         }
       );
+    case "table":
+      return /* @__PURE__ */ jsx(PolymorphicTable, { ...restProps, isLoading });
     case "raw":
       return /* @__PURE__ */ jsx(
         PolymorphicRawChart,

package/dist/components/Chart/PolymorphicChart/charts/PolymorphicCumulativeChart.d.ts

@@ -0,0 +1,10 @@
+import { DoughnutChartData } from '../../DoughnutChart/utils';
+export type PolymorphicCumulativeChartProps = {
+    data: DoughnutChartData[];
+    valuesFormatterFn?: (value: number, precision?: number) => string;
+    isLoading?: boolean;
+    showTooltip?: boolean;
+    onLegendAction?: (index: number) => void;
+    descriptions?: string[];
+};
+export declare const PolymorphicCumulativeChart: (props: PolymorphicCumulativeChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/PolymorphicChart/charts/PolymorphicCumulativeChart.js

@@ -0,0 +1,267 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme, Box, TableContainer, Table, TableBody, TableRow, TableCell, Skeleton, Stack, Typography } from "@mui/material";
+import { LegendValueBadge } from "../../Legend/LegendValueBadge.js";
+import { FoodsIcon } from "../../../Icons/FoodsIcon.js";
+import { FoodsBadge } from "../../../Badge/FoodsBadge.js";
+import { FoodsTooltip } from "../../../Tooltip/FoodsTooltip.js";
+const CHIP_MIN_WIDTH = 56;
+const PolymorphicCumulativeChart = (props) => {
+  const theme = useTheme();
+  const {
+    data,
+    valuesFormatterFn = (value, precision) => theme.numbers.valueFormatterFn(value, precision),
+    showTooltip,
+    isLoading,
+    onLegendAction
+  } = props;
+  if (isLoading) {
+    const rows = Math.max(8, (data == null ? void 0 : data.length) || 12);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "relative",
+        width: "100%",
+        sx: { border: `1px solid ${theme.palette.divider}`, borderRadius: theme.shape.borderRadius },
+        children: /* @__PURE__ */ jsx(
+          TableContainer,
+          {
+            sx: { borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.background.paper },
+            children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(
+              TableRow,
+              {
+                sx: { "&:last-child td, &:last-child th": { borderBottom: 0 } },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      width: "50%",
+                      sx: {
+                        padding: theme.spacing(2),
+                        borderBottom: `1px solid ${theme.palette.divider}`
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Skeleton,
+                        {
+                          variant: "rounded",
+                          sx: { maxWidth: "300px" },
+                          width: "100%",
+                          height: 18
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      align: "right",
+                      sx: {
+                        padding: theme.spacing(2),
+                        borderBottom: `1px solid ${theme.palette.divider}`
+                      },
+                      children: /* @__PURE__ */ jsxs(
+                        Stack,
+                        {
+                          width: "50%",
+                          direction: "row",
+                          alignItems: "center",
+                          spacing: 3,
+                          justifyContent: "flex-end",
+                          sx: { width: "100%" },
+                          children: [
+                            /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: CHIP_MIN_WIDTH, height: 27 }),
+                            /* @__PURE__ */ jsx(
+                              Skeleton,
+                              {
+                                variant: "rounded",
+                                width: "100%",
+                                sx: { maxWidth: "215px" },
+                                height: 12
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 16, height: 16 })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              `sk-row-${i}`
+            )) }) })
+          }
+        )
+      }
+    );
+  }
+  const isEmpty = ((data == null ? void 0 : data.length) ?? 0) === 0 || data.every((d) => Number(d.value) === 0);
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "relative",
+        width: "100%",
+        sx: {
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.background.paper
+        },
+        children: /* @__PURE__ */ jsx(TableContainer, { sx: { borderRadius: theme.shape.borderRadius }, children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            sx: {
+              backgroundColor: theme.palette.background.paper,
+              "&:last-child td, &:last-child th": { borderBottom: 0 }
+            },
+            children: [
+              /* @__PURE__ */ jsx(TableCell, { sx: { padding: theme.spacing(2), borderBottom: 0 }, children: /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(
+                FoodsBadge,
+                {
+                  size: 4,
+                  icon: "empty",
+                  boxProps: {
+                    sx: {
+                      borderRadius: "3px",
+                      backgroundColor: theme.custom.grey[400],
+                      color: theme.custom.grey[1400]
+                    }
+                  }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  align: "right",
+                  sx: {
+                    padding: theme.spacing(2),
+                    color: theme.palette.text.secondary,
+                    borderBottom: 0
+                  },
+                  children: "—"
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    );
+  }
+  const maxVal = data.reduce((acc, d) => Math.max(acc, Number(d.value) || 0), 0);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      position: "relative",
+      width: "100%",
+      sx: {
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.paper
+      },
+      children: /* @__PURE__ */ jsx(TableContainer, { sx: { borderRadius: theme.shape.borderRadius }, children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: data.map((entry, index) => {
+        var _a;
+        const rawVal = Number(entry.value) || 0;
+        const scale = maxVal > 0 ? rawVal / maxVal * 100 : 0;
+        const percentText = `${valuesFormatterFn(rawVal, 1)} %`;
+        const description = (_a = props.descriptions) == null ? void 0 : _a[index];
+        return /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            sx: {
+              backgroundColor: "transparent",
+              "&:last-child td, &:last-child th": { borderBottom: 0 }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  sx: {
+                    padding: theme.spacing(2),
+                    borderBottom: `1px solid ${theme.palette.divider}`
+                  },
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600 }, children: entry.name || `Item ${index + 1}` })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  align: "right",
+                  sx: {
+                    padding: theme.spacing(2),
+                    borderBottom: `1px solid ${theme.palette.divider}`
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      direction: "row",
+                      alignItems: "center",
+                      spacing: 3,
+                      justifyContent: "flex-end",
+                      sx: { width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsx(LegendValueBadge, { children: percentText }),
+                        /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            onClick: () => onLegendAction == null ? void 0 : onLegendAction(index),
+                            sx: {
+                              position: "relative",
+                              flex: 1,
+                              minWidth: 120,
+                              height: 12,
+                              borderRadius: 1.5,
+                              cursor: onLegendAction ? "pointer" : "default"
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                sx: {
+                                  position: "absolute",
+                                  top: 0,
+                                  left: 0,
+                                  height: "100%",
+                                  width: `${Math.max(0, Math.min(scale, 100))}%`,
+                                  borderRadius: 1.5,
+                                  backgroundColor: theme.palette.primary.main
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        description && showTooltip && /* @__PURE__ */ jsx(
+                          FoodsTooltip,
+                          {
+                            title: description,
+                            placement: "top",
+                            popperZIndex: 2e3,
+                            width: "unset",
+                            children: /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                sx: {
+                                  width: 16,
+                                  height: 16,
+                                  color: theme.palette.text.secondary,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center"
+                                },
+                                children: /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: "information" })
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          `row-${entry.index ?? index}`
+        );
+      }) }) }) })
+    }
+  );
+};
+export {
+  PolymorphicCumulativeChart
+};

package/dist/components/Chart/PolymorphicChart/charts/PolymorphicTable.d.ts

@@ -1,27 +1,11 @@
 import { ReactNode } from 'react';
-import { Property } from 'csstype';
 import { DoughnutChartData } from '../../DoughnutChart/utils';
-import { RechartsMouseEventHandler } from '../../DoughnutChart/useDoughnutChartInteractions';
 type PolymorphicTableProps = {
     data: DoughnutChartData[];
-    HoveredChartElementIndex: number | null;
-    spacing?: number;
-    borderWidth?: number;
-    borderColor?: Property.Color;
-    showTooltip?: boolean;
-    tooltipPos?: {
-        x: number;
-        y: number;
-        angle?: number;
-    } | undefined;
     valuesFormatterFn?: (value: number, precision?: number) => string;
-    language?: string;
     valuesUnit?: string;
     icons?: ReactNode[];
     isLoading?: boolean;
-    height?: number;
-    onMouseEnter?: (event: RechartsMouseEventHandler, index: number) => void;
-    onMouseLeave?: () => void;
     onLegendAction?: (index: number) => void;
 };
 export declare const PolymorphicTable: (props: PolymorphicTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FoodsFormFields/FoodsTextInput.d.ts

@@ -1,4 +1,4 @@
-import { InputBaseProps } from '@mui/material';
+import { InputBaseProps, StackProps } from '@mui/material';
 import { FoodsIconButtonProps } from '../../Button/FoodsIconButton';
 type DefaultOption = {
     label: string;
@@ -17,6 +17,7 @@ type FoodsInputBase = Omit<InputBaseProps, keyof OverridenProps>;
 export type FoodsTextInputProps = OverridenProps & {
     ExtraInputProps?: FoodsInputBase;
     Tooltip?: FoodsIconButtonProps["tooltip"];
+    StackProps?: StackProps;
 };
 export declare const FoodsTextInput: (props: FoodsTextInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Form/FoodsFormFields/FoodsTextInput.js

@@ -10,11 +10,12 @@ const FoodsTextInput = (props) => {
     error = false,
     disabled = false,
     ExtraInputProps = {},
-    Tooltip = {}
+    Tooltip = {},
+    StackProps: StackProps2 = {}
   } = props;
   const theme = useTheme();
   const { text, props: propsTooltip } = Tooltip;
-  return /* @__PURE__ */ jsxs(Stack, { gap: theme.spacing(1), children: [
+  return /* @__PURE__ */ jsxs(Stack, { gap: theme.spacing(1), ...StackProps2, children: [
     /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", gap: theme.spacing(1.5), alignItems: "center", children: [
       /* @__PURE__ */ jsx(
         TextInput,
@@ -70,7 +71,8 @@ const TextInput = styled(InputBase)(({ theme }) => ({
   "&.MuiInputBase-root": {
     backgroundColor: "white",
     height: "40px",
-    borderRadius: "24px",
+    // borderRadius: "24px",
+    borderRadius: theme.spacing(1),
     paddingRight: "12px",
     paddingLeft: "20px",
     border: `1px solid ${theme.custom.grey[500]}`,
@@ -100,6 +102,9 @@ const TextInput = styled(InputBase)(({ theme }) => ({
     ":hover": {
       backgroundColor: theme.custom.red[200]
     }
+  },
+  "&.Mui-error.Mui-focused": {
+    border: `2px solid ${theme.custom.red[600]}`
   }
 }));
 export {

package/dist/components/Input/SearchBox.d.ts

@@ -2,6 +2,6 @@ export interface ISearchBoxProps {
     placeholder?: string;
     value: string | null;
     onChange: (value: string) => void;
-    variant: "standalone" | "inline";
+    variant?: "standalone";
 }
 export declare function SearchBox(props: ISearchBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/SearchBox.js

@@ -1,68 +1,19 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { SearchOutlined } from "@mui/icons-material";
-import { useTheme, Stack, TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { FoodsTextInput } from "../Form/FoodsFormFields/FoodsTextInput.js";
+import { FoodsIcon } from "../Icons/FoodsIcon.js";
 function SearchBox(props) {
-  const theme = useTheme();
-  const stackStyleStandalone = {
-    height: "40px",
-    padding: "0px 6px 0px 20px",
-    ...theme.custom.searchBox,
-    minWidth: "350px"
-  };
-  const buttonStyleStandalone = {
-    height: "20px",
-    padding: "0px",
-    width: "100%",
-    "&>.MuiInputBase-root>fieldset": {
-      border: "none"
-    },
-    "&>.MuiInputBase-root>input": {
-      padding: "0"
-    }
-  };
-  const stackStyleInline = {
-    height: "48px",
-    padding: "0px 16px 0px 24px",
-    borderTop: "1px solid " + theme.custom.grey[500],
-    borderBottom: "1px solid " + theme.custom.grey[500],
-    background: theme.custom.grey[200]
-  };
-  const buttonStyleInline = {
-    "&>.MuiInputBase-root>fieldset": {
-      border: "none"
-    },
-    "&>.MuiInputBase-root>input": {
-      width: "100%",
-      height: "48px",
-      padding: "0",
-      border: "none"
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Stack,
+  return /* @__PURE__ */ jsx(
+    FoodsTextInput,
     {
-      direction: "row",
-      useFlexGap: true,
-      gap: "10px",
-      justifyContent: "space-between",
-      alignItems: "center",
-      sx: props.variant === "standalone" ? stackStyleStandalone : stackStyleInline,
-      children: [
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            label: "",
-            type: "search",
-            placeholder: props.placeholder,
-            value: props.value,
-            onChange: (e) => {
-              props.onChange(e.target.value);
-            },
-            sx: props.variant === "standalone" ? buttonStyleStandalone : buttonStyleInline
-          }
-        ),
-        /* @__PURE__ */ jsx(SearchOutlined, {})
-      ]
+      value: props.value ?? "",
+      onChange: (e) => {
+        props.onChange(e);
+      },
+      ExtraInputProps: {
+        type: "search",
+        placeholder: props.placeholder,
+        endAdornment: /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: "search" })
+      }
     }
   );
 }

package/dist/components/Layout/BlockList/Blocks/InnerInputBlocks/index.d.ts

@@ -1,5 +1,3 @@
 export * from './CheckboxBlock';
-export * from './NumericalBlock';
 export * from './RadioBlock';
 export * from './SelectBlock';
-export * from './TextBlock';

package/dist/components/RichTextEditor/components/ColorInput/style/index.d.ts

@@ -22,12 +22,12 @@ export declare const ColorInputContainer: StyledComponent< BoxOwnProps<Theme> &
 }, keyof BoxOwnProps<Theme>> & MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const ColorButton: StyledComponent< ButtonOwnProps & Omit< ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "sx" | "size" | "variant" | "href" | "disabled" | "action" | "loading" | "disableElevation" | "disableFocusRipple" | "disableRipple" | "fullWidth" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & MUIStyledCommonProps<Theme> & {
+}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "sx" | "size" | "variant" | "href" | "disabled" | "action" | "loading" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "disableRipple" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & MUIStyledCommonProps<Theme> & {
     currentColor?: string;
 }, {}, {}>;
 export declare const ColorButtonBackground: StyledComponent< ButtonOwnProps & Omit< ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "sx" | "size" | "variant" | "href" | "disabled" | "action" | "loading" | "disableElevation" | "disableFocusRipple" | "disableRipple" | "fullWidth" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & MUIStyledCommonProps<Theme> & {
+}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "sx" | "size" | "variant" | "href" | "disabled" | "action" | "loading" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "disableRipple" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & MUIStyledCommonProps<Theme> & {
     currentColor?: string;
 }, {}, {}>;
 export declare const HiddenInput: StyledComponent<MUIStyledCommonProps<Theme>, DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/dist/components/RichTextEditor/components/Toolbar/style/index.d.ts

@@ -5,7 +5,7 @@ import { DetailedHTMLProps, ButtonHTMLAttributes, DO_NOT_USE_OR_YOU_WILL_BE_FIRE
 import { MUIStyledCommonProps, BoxOwnProps } from '@mui/system';
 export declare const ToolbarButton: StyledComponent< ButtonOwnProps & Omit< ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit< DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "sx" | "size" | "variant" | "href" | "disabled" | "action" | "loading" | "disableElevation" | "disableFocusRipple" | "disableRipple" | "fullWidth" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & MUIStyledCommonProps<Theme>, {}, {}>;
+}, "className" | "classes" | "style" | "tabIndex" | "color" | "children" | "sx" | "size" | "variant" | "href" | "disabled" | "action" | "loading" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "disableRipple" | "centerRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const TextCommandsContainer: StyledComponent< BoxOwnProps<Theme> & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
 }, keyof BoxOwnProps<Theme>> & MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/components/Search/FoodsSearch.js

@@ -1,64 +1,20 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme, Box, TextField } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
 import { FoodsIcon } from "../Icons/FoodsIcon.js";
 import { useFoodsSelectContext } from "../Select/FoodsSelect/Context/useSelect.js";
+import { FoodsTextInput } from "../Form/FoodsFormFields/FoodsTextInput.js";
 const FoodsSearch = () => {
   const { search, setSearch, textOptions } = useFoodsSelectContext();
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
+  return /* @__PURE__ */ jsx(
+    FoodsTextInput,
     {
-      sx: {
-        display: "flex",
-        gap: "8px",
-        justifyContent: "space-between",
-        alignItems: "center",
-        width: "100%",
-        height: "40px",
-        padding: "0px 20px 0px 20px",
-        borderRadius: "24px",
-        border: `1px solid ${theme.custom.grey[500]}`,
-        background: "white",
-        boxShadow: "0px 2px 8px 0px " + theme.custom.grey[500]
+      value: search,
+      onChange: (newValue) => {
+        setSearch(newValue);
       },
-      children: [
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            label: "",
-            placeholder: textOptions.searchPlaceholder,
-            value: search,
-            onChange: (e) => {
-              setSearch(e.target.value);
-            },
-            sx: {
-              width: "100%",
-              "&>.MuiInputBase-root": {
-                ">fieldset": {
-                  border: "none"
-                },
-                ">input": {
-                  padding: 0
-                }
-              }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              gap: "8px",
-              alignItems: "center"
-            },
-            children: [
-              search !== "" && /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, onClick: () => setSearch(""), children: /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: "close" }) }),
-              /* @__PURE__ */ jsx(FoodsIcon, { size: 3, icon: "search" })
-            ]
-          }
-        )
-      ]
+      ExtraInputProps: {
+        placeholder: textOptions.searchPlaceholder,
+        endAdornment: /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: "search" })
+      }
     }
   );
 };

package/dist/main.js

@@ -89,10 +89,8 @@ import { BlockItemInner } from "./components/Layout/BlockList/Blocks/Container/B
 import { EmptyForm } from "./components/Layout/BlockList/Blocks/InnerInfoBlocks/EmptyForm.js";
 import { SuggestionBlock } from "./components/Layout/BlockList/Blocks/InnerInfoBlocks/SuggestionBlock.js";
 import { CheckboxBlock } from "./components/Layout/BlockList/Blocks/InnerInputBlocks/CheckboxBlock.js";
-import { NumericalBlock } from "./components/Layout/BlockList/Blocks/InnerInputBlocks/NumericalBlock.js";
 import { RadioBlock } from "./components/Layout/BlockList/Blocks/InnerInputBlocks/RadioBlock.js";
 import { SelectBlock } from "./components/Layout/BlockList/Blocks/InnerInputBlocks/SelectBlock.js";
-import { TextBlock } from "./components/Layout/BlockList/Blocks/InnerInputBlocks/TextBlock.js";
 import { ListHeader } from "./components/Layout/BlockList/Headers/ListHeader.js";
 import { EditHeader } from "./components/Layout/BlockList/Headers/EditHeader.js";
 import { InitHeader } from "./components/Layout/BlockList/Headers/InitHeader.js";
@@ -240,7 +238,6 @@ export {
   Navbar,
   NumberField,
   NumberWithUnit,
-  NumericalBlock,
   OptionsPopover,
   FoodsPills as Pills,
   PointsCell,
@@ -276,7 +273,6 @@ export {
   TertiaryToggleButton,
   TertiaryToggleButtonNodeTitle,
   TextArrowList,
-  TextBlock,
   TextField,
   TextTitle,
   TextTitleGreyIcon,

package/dist/themes/common/components.js

@@ -7,6 +7,13 @@ const components = {
       }
     }
   },
+  MuiAutocomplete: {
+    styleOverrides: {
+      root: () => {
+        return {};
+      }
+    }
+  },
   MuiAvatar: {
     defaultProps: {
       children: []
@@ -169,7 +176,7 @@ const components = {
           },
           ...ownerState.variant === "select" && {
             backgroundColor: theme.custom.grey[100],
-            borderRadius: "24px",
+            borderRadius: theme.spacing(1),
             border: `1px solid ${theme.custom.grey[500]}`
           },
           ...ownerState.variant === "validate" && {
@@ -633,9 +640,48 @@ const components = {
       })
     }
   },
-  MuiInputBase: {
-    styleOverrides: {}
-  },
+  // This should be activated, but there is too many ripple effect on the codebase right now
+  // MuiInputBase: {
+  //     styleOverrides: {
+  //         root: ({ theme }) => ({
+  //             backgroundColor: "white",
+  //             height: "40px",
+  //             borderRadius: theme.spacing(1),
+  //             paddingRight: "12px",
+  //             paddingLeft: "20px",
+  //             border: `1px solid ${theme.custom.grey[500]}`,
+  //             "&:hover": {
+  //                 backgroundColor: theme.custom.grey[300],
+  //             },
+  //             color: theme.custom.grey[2800],
+  //             ...theme.typography["body-medium"],
+  //             "& ::placeholder": {
+  //                 ...theme.typography["body-medium"],
+  //                 color: theme.custom.grey[1400],
+  //             },
+  //             "&.Mui-disabled": {
+  //                 backgroundColor: theme.custom.grey[500],
+  //                 "&:hover": {
+  //                     backgroundColor: theme.custom.grey[500],
+  //                 },
+  //             },
+  //             "&.Mui-focused": {
+  //                 border: `2px solid ${theme.custom.grey[2800]}`,
+  //             },
+  //             "&.Mui-error": {
+  //                 border: `1px solid ${theme.custom.red[600]}`,
+  //                 backgroundColor: theme.custom.red[100],
+  //                 color: theme.custom.red[600],
+  //                 "&:hover": {
+  //                     backgroundColor: theme.custom.red[200],
+  //                 },
+  //             },
+  //             "&.Mui-error.Mui-focused": {
+  //                 border: `2px solid ${theme.custom.red[600]}`,
+  //             },
+  //         }),
+  //     },
+  // },
   MuiChip: {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.7.17",
+  "version": "2.8.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",

package/dist/components/Layout/BlockList/Blocks/InnerInputBlocks/NumericalBlock.d.ts

@@ -1,7 +0,0 @@
-import { BlockOptions } from '../Container/BlockItemInner';
-import { RoundInputProps } from '../../../../Input';
-type NumericalBlockProps = RoundInputProps & {
-    blockOptions: BlockOptions;
-};
-export declare const NumericalBlock: (props: NumericalBlockProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Layout/BlockList/Blocks/InnerInputBlocks/NumericalBlock.js

@@ -1,10 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { BlockItemInner } from "../Container/BlockItemInner.js";
-import { RoundInput } from "../../../../Input/RoundInput.js";
-const NumericalBlock = (props) => {
-  const { blockOptions, ...FoodsRoundInputProps } = props;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BlockItemInner, { blockOptions, children: /* @__PURE__ */ jsx(RoundInput, { ...FoodsRoundInputProps, type: "number" }) }) });
-};
-export {
-  NumericalBlock
-};

package/dist/components/Layout/BlockList/Blocks/InnerInputBlocks/TextBlock.d.ts

@@ -1,7 +0,0 @@
-import { BlockOptions } from '../Container/BlockItemInner';
-import { RoundInputProps } from '../../../../Input';
-type TextBlockProps = RoundInputProps & {
-    blockOptions: BlockOptions;
-};
-export declare const TextBlock: (props: TextBlockProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Layout/BlockList/Blocks/InnerInputBlocks/TextBlock.js

@@ -1,10 +0,0 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { BlockItemInner } from "../Container/BlockItemInner.js";
-import { RoundInput } from "../../../../Input/RoundInput.js";
-const TextBlock = (props) => {
-  const { blockOptions, ...FoodsRoundInputProps } = props;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(BlockItemInner, { blockOptions, children: /* @__PURE__ */ jsx(RoundInput, { ...FoodsRoundInputProps }) }) });
-};
-export {
-  TextBlock
-};