@foodpilot/foods 2.7.16 → 2.7.18

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

@@ -2,13 +2,18 @@ import { ToggleButtonProps } from '@mui/material';
 import { IconMapping } from '../Icons';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 type ToggleButtonsPropsWithoutEnforcedKeys = Omit<ToggleButtonProps, "key" | "value" | "onClick" | "selected" | "unselectable">;
+type ButtonId = number | string;
 export type FoodsToggleButtonType = {
-    id: number | string;
+    id: ButtonId;
     label?: string;
     endIcon?: keyof IconMapping;
     startIcon?: keyof IconMapping;
     onClick?: () => void;
     disabled?: boolean;
+    nav?: {
+        url: string;
+        isExternal?: boolean;
+    };
 };
 export type FoodsToggleButtonProps = ToggleButtonsPropsWithoutEnforcedKeys & {
     buttons: FoodsToggleButtonType[];
@@ -18,5 +23,12 @@ export type FoodsToggleButtonProps = ToggleButtonsPropsWithoutEnforcedKeys & {
     unselectable?: boolean;
     className?: string;
 };
+/**
+ * This component needs to be refactored because this is used for NAVIGATION and we should use the TABS component
+ * instead.
+ * Because https://mui.com/material-ui/react-toggle-button/
+ * The ToggleButton is meant to be used as an INPUT.
+ * Not a Navigation Component, but we use it as a Navigation regardless.
+ */
 export declare const FoodsToggleButton: ForwardRefExoticComponent<Omit<FoodsToggleButtonProps, "ref"> & RefAttributes<unknown>>;
 export {};

package/dist/components/Button/FoodsToggleButton.js

@@ -30,14 +30,10 @@ const ToggleButtonStyled = styled(ToggleButton)(({ theme }) => ({
 }));
 const FoodsToggleButton = forwardRef((props, ref) => {
   const { buttons, initialSelected, ToggleButtonProps: ToggleButtonProps2, buttonGroup = false, unselectable = false, className } = props;
-  const [selected, setSelected] = useState(initialSelected || null);
-  const theme = useTheme();
+  const [selectedId, setSelectedId] = useState((initialSelected == null ? void 0 : initialSelected.id) ?? null);
   useEffect(() => {
-    setSelected(initialSelected ?? null);
+    setSelectedId((initialSelected == null ? void 0 : initialSelected.id) ?? null);
   }, [initialSelected]);
-  const isSelected = (button) => {
-    return (selected == null ? void 0 : selected.id) === button.id;
-  };
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -67,42 +63,61 @@ const FoodsToggleButton = forwardRef((props, ref) => {
       },
       className,
       children: buttons.map((button) => {
-        return /* @__PURE__ */ createElement(
-          ToggleButtonStyled,
+        const isSelected = button.id === selectedId;
+        return /* @__PURE__ */ jsx(
+          _ToggleButton,
           {
-            ...ToggleButtonProps2,
-            key: `${button.id}-button-toggle`,
-            value: button.id,
-            onClick: () => {
-              button.onClick && button.onClick();
-              if (unselectable && (selected == null ? void 0 : selected.id) === button.id) {
-                setSelected(null);
-                return;
-              }
-              setSelected(button);
-            },
-            selected: isSelected(button),
-            disabled: button.disabled
-          },
-          /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              flexDirection: "row",
-              justifyContent: "center",
-              alignItems: "center",
-              gap: theme.spacing(0.5),
-              children: [
-                button.startIcon && /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: button.startIcon }),
-                button.label,
-                button.endIcon && /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: button.endIcon })
-              ]
-            }
-          )
+            button,
+            unselectable,
+            isSelected,
+            setSelectedId,
+            ToggleButtonProps: ToggleButtonProps2
+          }
         );
       })
     }
   );
 });
+const _ToggleButton = (props) => {
+  const theme = useTheme();
+  const { button, ToggleButtonProps: ToggleButtonProps2 = {}, unselectable, isSelected, setSelectedId } = props;
+  const { url, isExternal = false } = button.nav || {};
+  return /* @__PURE__ */ createElement(
+    ToggleButtonStyled,
+    {
+      ...ToggleButtonProps2,
+      key: `${button.id}-button-toggle`,
+      value: button.id,
+      onClick: () => {
+        button.onClick && button.onClick();
+        if (unselectable && isSelected) {
+          setSelectedId(null);
+          return;
+        }
+        setSelectedId(button.id);
+      },
+      selected: isSelected,
+      disabled: button.disabled
+    },
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: theme.spacing(0.5),
+        component: "a",
+        href: url ? url : void 0,
+        target: isExternal ? "_blank" : void 0,
+        children: [
+          button.startIcon && /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: button.startIcon }),
+          button.label,
+          button.endIcon && /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: button.endIcon })
+        ]
+      }
+    )
+  );
+};
 export {
   FoodsToggleButton
 };

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/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/components/Tabs/ButtonTabs.d.ts

@@ -6,5 +6,8 @@ export type ButtonTabsProps = ToggleButtonsPropsWithoutEnforcedKeys & {
     onClick?: (index: number) => void;
     defaultIndex?: number;
 };
+/**
+ * @deprecated
+ */
 export declare const ButtonTabs: (props: ButtonTabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/SecondaryTabs.d.ts

@@ -1,22 +1,27 @@
 import { ReactElement, ReactNode, DetailedHTMLProps, HTMLAttributes, DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES, RefObject } from 'react';
-import { BoxProps, Theme } from '@mui/material';
+import { BoxProps, TabProps, TabsProps, Theme } from '@mui/material';
 import { StyledComponent } from '@emotion/styled';
 import { BoxOwnProps, MUIStyledCommonProps } from '@mui/system';
 export declare const BoxStyled: 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>, {}, {}>;
-export type SecondaryTab<T = Record<string, unknown>> = {
-    id: number;
+export type SecondaryTab = {
     name: string;
-    onClick: () => void;
+    onClick?: () => void;
     component?: ReactNode;
     disabled?: boolean | false;
     icon?: ReactElement;
-    props?: T;
+    tabProps?: {
+        href?: string;
+        hrefLang?: string;
+        isExternal?: boolean;
+    };
 };
-export type SecondaryTabsProps<T> = {
-    tabs: SecondaryTab<T>[];
-    selectedTab: (tab: SecondaryTab<T>) => boolean;
+export type SecondaryTabsProps = {
+    tabs: SecondaryTab[];
+    selectedTabIndex: number;
+    tabsProps?: TabsProps;
+    tabProps?: TabProps;
     boxProps?: BoxProps;
 };
-export declare const SecondaryTabs: <T>({ tabs, selectedTab, boxProps }: SecondaryTabsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryTabs: (props: SecondaryTabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/SecondaryTabs.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { styled, Box, Tabs, Tab } from "@mui/material";
 import { greyTheme } from "../../themes/common/colors.js";
 const BoxStyled = styled(Box)(({ theme }) => () => ({
@@ -67,13 +68,53 @@ const BoxStyled = styled(Box)(({ theme }) => () => ({
 const TabPanel = ({ children, value, index }) => {
   return /* @__PURE__ */ jsx(Box, { role: "tabpanel", hidden: value !== index, className: "secondary-tabs-tabpanel", children: value === index && /* @__PURE__ */ jsx(Box, { children }) });
 };
-const SecondaryTabs = ({ tabs, selectedTab, boxProps }) => {
-  const getIsSelected = () => {
-    return tabs.findIndex((tab) => selectedTab(tab));
-  };
+const SecondaryTabs = (props) => {
+  const {
+    tabs,
+    selectedTabIndex,
+    boxProps,
+    tabProps,
+    tabsProps
+  } = props;
+  const [value, setValue] = useState(selectedTabIndex);
+  useEffect(() => {
+    setValue(selectedTabIndex);
+  }, [selectedTabIndex]);
   return /* @__PURE__ */ jsxs(BoxStyled, { ...boxProps, className: "secondary-tabs-wrapper", children: [
-    /* @__PURE__ */ jsx(Tabs, { TabIndicatorProps: { hidden: true }, value: getIsSelected(), className: "secondary-tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(Tab, { label: tab.name, disabled: tab.disabled, icon: tab.icon, onClick: tab.onClick }, index)) }),
-    /* @__PURE__ */ jsx(Box, { className: "secondary-tabs-content", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabPanel, { value: getIsSelected(), index, children: tab.component }, index)) })
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value,
+        onChange: (_, value2) => {
+          setValue(value2);
+        },
+        className: "secondary-tabs",
+        role: "navigation",
+        ...tabsProps,
+        children: tabs.map((tab, index) => {
+          const { href, hrefLang, isExternal = false } = tab.tabProps || {};
+          return /* @__PURE__ */ jsx(
+            Tab,
+            {
+              label: tab.name,
+              disabled: tab.disabled,
+              icon: (
+                // <Box>{tab.icon}</Box>
+                tab.icon
+              ),
+              onClick: tab.onClick,
+              component: "a",
+              href,
+              hrefLang,
+              target: isExternal ? "_blank" : void 0,
+              ...tabProps
+            },
+            index
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { className: "secondary-tabs-content", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabPanel, { value, index, children: tab.component }, index)) })
   ] });
 };
 export {

package/dist/components/Tabs/{SectionTabs.d.ts → SectionTabs/SectionTabs.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BoxProps } from '@mui/material';
+import { BoxProps, TabsProps, TabProps } from '@mui/material';
 export type SectionTab = {
     name: string;
     onClick?: () => void;
@@ -7,6 +7,11 @@ export type SectionTab = {
     disabled?: boolean | false;
     icon?: ReactNode;
     tooltip?: ReactNode;
+    tabProps?: {
+        href?: string;
+        hrefLang?: string;
+        isExternal?: boolean;
+    };
 };
 export type SectionTabsProps = BoxProps & {
     tabs: SectionTab[];
@@ -17,6 +22,9 @@ export type SectionTabsProps = BoxProps & {
      * If not provided, scrollable will be automatically enabled on mobile devices.
      */
     scrollable?: boolean;
+    tabsProps?: TabsProps;
+    tabProps?: TabProps;
+    boxProps?: BoxProps;
 };
 export declare const SectionTabs: (props: SectionTabsProps) => import("react/jsx-runtime").JSX.Element;
 export type SectionTabPanelProps = {

package/dist/components/Tabs/SectionTabs/SectionTabs.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTheme, useMediaQuery, Box, Tabs, Tooltip, Tab, Typography } from "@mui/material";
+const SectionTabs = (props) => {
+  const {
+    tabs,
+    value: initialValue = 0,
+    renderComponents,
+    scrollable = false,
+    tabsProps,
+    tabProps,
+    boxProps,
+    ...remainingBoxProps
+  } = props;
+  const [value, setValue] = useState(initialValue);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isScrollable = isMobile ? true : scrollable;
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, ...boxProps, ...remainingBoxProps, children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value,
+        onChange: (_, value2) => {
+          setValue(value2);
+        },
+        role: "navigation",
+        "aria-label": "section-tabs",
+        variant: isScrollable ? "scrollable" : "standard",
+        scrollButtons: isScrollable ? "auto" : false,
+        allowScrollButtonsMobile: isScrollable,
+        sx: {
+          ...isScrollable && {
+            "& .MuiTabs-scrollButtons": {
+              "&.Mui-disabled": {
+                opacity: 0.3
+              }
+            }
+          }
+        },
+        ...tabsProps,
+        children: tabs.map((tab, tabIndex) => {
+          const isSelected = tabIndex === value;
+          const { href, hrefLang, isExternal = false } = tab.tabProps || {};
+          return /* @__PURE__ */ jsx(Tooltip, { title: tab.tooltip || "", arrow: true, children: /* @__PURE__ */ jsx(
+            Tab,
+            {
+              component: "a",
+              href,
+              hrefLang,
+              target: isExternal ? "_blank" : void 0,
+              icon: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    ...isSelected && { color: theme.palette.primary[600] }
+                  },
+                  children: tab == null ? void 0 : tab.icon
+                }
+              ),
+              label: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "h4",
+                  sx: {
+                    textTransform: "none",
+                    ...isSelected && {
+                      color: theme.palette.primary[600]
+                    }
+                  },
+                  children: tab.name
+                }
+              ),
+              disabled: tab.disabled,
+              sx: {
+                opacity: tab.disabled ? 0.36 : 1,
+                ...isScrollable && {
+                  minWidth: "auto",
+                  whiteSpace: "nowrap"
+                }
+              },
+              onClick: () => {
+                tab.onClick && tab.onClick();
+              },
+              iconPosition: "start",
+              ...a11yProps(tabIndex),
+              ...tabProps
+            }
+          ) }, tabIndex);
+        })
+      }
+    ) }),
+    renderComponents && (tabs == null ? void 0 : tabs.map((tab, i) => /* @__PURE__ */ jsx(SectionTabPanel, { value, index: i, children: tab.component }, i)))
+  ] });
+};
+const SectionTabPanel = (props) => {
+  const { children, value, index, ...otherProps } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `tabpanel-${index}`,
+      "aria-labelledby": `tab-${index}`,
+      ...otherProps,
+      children: value === index && /* @__PURE__ */ jsx(Box, { sx: { padding: 3 }, children })
+    }
+  );
+};
+const a11yProps = (index) => {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+};
+export {
+  SectionTabs
+};

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

@@ -1,3 +1,3 @@
 export * from './ButtonTabs';
-export * from './SectionTabs';
+export * from './SectionTabs/SectionTabs';
 export * from './SecondaryTabs';

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";
@@ -124,7 +122,7 @@ import { FoodsSearch } from "./components/Search/FoodsSearch.js";
 import { FoodsSelect, FoodsSelectServerPagination } from "./components/Select/FoodsSelect/FoodsSelect.js";
 import { SsqCard } from "./components/Ssq/SsqCard.js";
 import { ButtonTabs } from "./components/Tabs/ButtonTabs.js";
-import { SectionTabs } from "./components/Tabs/SectionTabs.js";
+import { SectionTabs } from "./components/Tabs/SectionTabs/SectionTabs.js";
 import { BoxStyled, SecondaryTabs } from "./components/Tabs/SecondaryTabs.js";
 import { FoodsTags } from "./components/Tags/FoodsTags.js";
 import { FoodsUserTags } from "./components/Tags/FoodsUserTags.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.16",
+  "version": "2.7.18",
   "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
-};

package/dist/components/Tabs/SectionTabs.js

@@ -1,108 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { useTheme, useMediaQuery, Box, Tabs, Tooltip, Tab, Typography } from "@mui/material";
-const SectionTabs = (props) => {
-  const { tabs, value: initialValue, renderComponents, scrollable, ...boxProps } = props;
-  const [value, setValue] = useState(0);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const isScrollable = scrollable !== void 0 ? scrollable : isMobile;
-  const handleChange = (_, value2) => {
-    setValue(value2);
-  };
-  useEffect(() => {
-    setValue(initialValue ?? 0);
-  }, [initialValue]);
-  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, ...boxProps, children: [
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-      Tabs,
-      {
-        TabIndicatorProps: {
-          sx: {
-            backgroundColor: theme.palette.primary[600],
-            color: theme.palette.primary[600]
-          }
-        },
-        value,
-        onChange: handleChange,
-        "aria-label": "section-tabs",
-        variant: isScrollable ? "scrollable" : "standard",
-        scrollButtons: isScrollable ? "auto" : false,
-        allowScrollButtonsMobile: isScrollable,
-        sx: {
-          ...isScrollable && {
-            "& .MuiTabs-scrollButtons": {
-              "&.Mui-disabled": {
-                opacity: 0.3
-              }
-            }
-          }
-        },
-        children: tabs.map((tab, i) => /* @__PURE__ */ jsx(Tooltip, { title: tab.tooltip || "", arrow: true, children: /* @__PURE__ */ jsx(
-          Tab,
-          {
-            icon: /* @__PURE__ */ jsx(
-              Box,
-              {
-                sx: {
-                  ...i === value && { fill: theme.palette.primary[600] }
-                },
-                children: tab == null ? void 0 : tab.icon
-              }
-            ),
-            label: /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "h4",
-                sx: {
-                  textTransform: "none",
-                  ...i === value && {
-                    color: theme.palette.primary[600]
-                  }
-                },
-                children: tab.name
-              }
-            ),
-            disabled: tab.disabled,
-            sx: {
-              opacity: tab.disabled ? 0.36 : 1,
-              ...isScrollable && {
-                minWidth: "auto",
-                whiteSpace: "nowrap"
-              }
-            },
-            onClick: () => {
-              tab.onClick && tab.onClick();
-            },
-            iconPosition: "start",
-            ...loadInnerComponents(i)
-          }
-        ) }, i))
-      }
-    ) }),
-    renderComponents && (tabs == null ? void 0 : tabs.map((tab, i) => /* @__PURE__ */ jsx(SectionTabPanel, { value, index: i, children: tab.component }, i)))
-  ] });
-};
-const SectionTabPanel = (props) => {
-  const { children, value, index, ...otherProps } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tabpanel",
-      hidden: value !== index,
-      id: `tabpanel-${index}`,
-      "aria-labelledby": `tab-${index}`,
-      ...otherProps,
-      children: value === index && /* @__PURE__ */ jsx(Box, { sx: { padding: 3 }, children })
-    }
-  );
-};
-const loadInnerComponents = (index) => {
-  return {
-    id: `tab-${index}`,
-    "aria-controls": `tabpanel-${index}`
-  };
-};
-export {
-  SectionTabs
-};