@m4l/components 0.0.33 → 0.0.36

package/dist/components/CompanyLogo/index.js

@@ -59,7 +59,7 @@ const CompanyLogo = (props) => {
   const width = size === "small" ? "50px" : "380px";
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const mdUp = useResponsive("up", "md");
   if (isSkeleton) {
@@ -72,7 +72,7 @@ const CompanyLogo = (props) => {
     });
   }
   return /* @__PURE__ */ jsx(Image, {
-    src: `${host_static_assets}/${environment}/frontend/commons/assets/icons/${size === "small" ? "isotipo_m4l.svg" : "logotipo_m4l.svg"}`,
+    src: `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/${size === "small" ? "isotipo_m4l.svg" : "logotipo_m4l.svg"}`,
     effect: "opacity",
     width,
     height,

package/dist/components/DataGrid/index.js

@@ -968,7 +968,7 @@ function Filter() {
   } = useFilters();
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
@@ -986,7 +986,7 @@ function Filter() {
     dictionaryTooltip: activeFilters ? "grid.filter_hide" : "grid.filter_show",
     onClick: toggleIcon,
     "aria-label": "filter",
-    src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/filter.svg`
+    src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/filter.svg`
   });
 }
 const WrapperColumnsConfig = styled("div")(({ theme }) => ({
@@ -1075,7 +1075,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
   const divRef = useRef(null);
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   useImperativeHandle(ref, () => ({
     onClickIntro: handleIntro,
@@ -1258,40 +1258,40 @@ const ColumnsConfig = forwardRef((props, ref) => {
         onClick: handleMoveFirst,
         "aria-label": "move first place",
         disabled: rowSelectedIndex < 1,
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/move_first_place.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/move_first_place.svg`
       }), /* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltip: "grid.settings_move_up",
         onClick: () => handleMoveUpDownd(-1),
         "aria-label": "move up place",
         disabled: rowSelectedIndex < 1,
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/move_up_place.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/move_up_place.svg`
       }), /* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltip: "grid.settings_move_last",
         onClick: handleMoveLast,
         "aria-label": "move last place",
         disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/move_last_place.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/move_last_place.svg`
       }), /* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltip: "grid.settings_move_down",
         onClick: () => handleMoveUpDownd(1),
         "aria-label": "move down place",
         disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/move_down_place.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/move_down_place.svg`
       }), /* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltip: "grid.settings_visible_all",
         onClick: checkAll,
         "aria-label": "check visible all",
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/check_all.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/check_all.svg`
       }), /* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltip: "grid.settings_no_visible_all",
         onClick: unCheckAll,
         "aria-label": "un check all",
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/uncheck_all.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/uncheck_all.svg`
       }), /* @__PURE__ */ jsx(IconButton, {
         dictionaryTooltip: "grid.settings_restore",
         onClick: restoreAll,
         "aria-label": "Restore columns",
-        src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/restore_columns.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/restore_columns.svg`
       })]
     })]
   });
@@ -1319,7 +1319,7 @@ function Settings() {
   } = useModuleDictionary();
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const ref = useRef(null);
   const onCloseSettings = useCallback(() => {
@@ -1362,7 +1362,7 @@ function Settings() {
     dictionaryTooltip: "grid.settings_tooltip",
     onClick: onClickSettings,
     "aria-label": "settings",
-    src: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/configuration.svg`
+    src: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/configuration.svg`
   });
 }
 const Container = styled("div")(() => ({
@@ -1429,7 +1429,7 @@ const SKTWrapperDensity = styled("div")(({ theme }) => ({
 function Density() {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     rowHeights,
@@ -1445,31 +1445,31 @@ function Density() {
       return [];
     }
     return [{
-      urlIcon: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/compact.svg`,
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/compact.svg`,
       onClick: () => setRowHeightVariant("compact"),
       disabled: currentRowHeightVariant === "compact",
       dictionaryField: "grid.density_compact"
     }, {
-      urlIcon: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/standard.svg`,
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/standard.svg`,
       onClick: () => setRowHeightVariant("standard"),
       disabled: currentRowHeightVariant === "standard",
       dictionaryField: "grid.density_standard"
     }, {
-      urlIcon: `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/confortable.svg`,
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/confortable.svg`,
       onClick: () => setRowHeightVariant("confortable"),
       disabled: currentRowHeightVariant === "confortable",
       dictionaryField: "grid.density_confortable"
     }];
-  }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment]);
+  }, [rowHeights, currentRowHeightVariant, setRowHeightVariant, host_static_assets, environment_assets]);
   const currenViewIcon = useMemo(() => {
     if (currentRowHeightVariant === "compact") {
-      return `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/compact.svg`;
+      return `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/compact.svg`;
     }
     if (currentRowHeightVariant === "standard") {
-      return `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/standard.svg`;
+      return `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/standard.svg`;
     }
-    return `${host_static_assets}/${environment}/frontend/components/grid/assets/icons/confortable.svg`;
-  }, [currentRowHeightVariant, host_static_assets, environment]);
+    return `${host_static_assets}/${environment_assets}/frontend/components/grid/assets/icons/confortable.svg`;
+  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
   if (menuActions.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }

package/dist/components/DynamicFilter/components/ApplyedFilters/styles.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const WrapperApplyedFilters: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerApplyedFilters: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/DynamicFilter/index.js

@@ -1,7 +1,7 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
 import { styled } from "@mui/material/styles";
 import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
-import { useModuleDictionary, voidFunction, useHostTools, useEnvironment, useFlagsPresent } from "@m4l/core";
+import { useModuleDictionary, useEnvironment, voidFunction, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
 import { useFormContext, useWatch } from "react-hook-form";
 import { F as FormProvider } from "../hook-form/FormProvider/index.js";
@@ -29,6 +29,12 @@ import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 const WrapperApplyedFilters = styled("div")(({
   theme
+}) => ({
+  width: "100%",
+  marginLeft: theme.spacing(1.5)
+}));
+const ContainerApplyedFilters = styled("div")(({
+  theme
 }) => ({
   width: "100%",
   display: "flex",
@@ -276,6 +282,11 @@ function DateTimeFilter() {
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    dfnsFormat: {
+      datetime_format
+    }
+  } = useEnvironment();
   const {
     popupData: {
       filter,
@@ -310,10 +321,10 @@ function DateTimeFilter() {
     };
     if (data.valueOperator.id === "b") {
       newFilter.operand2 = data.valueOperand2.toISOString();
-      newFilter.labelOperands = `${format(data.valueOperand1, "yyyy-MM-dd HH:mm:ss")} - ${format(data.valueOperand2, "yyyy-MM-dd HH:mm:ss")}`;
+      newFilter.labelOperands = `${format(data.valueOperand1, datetime_format)} - ${format(data.valueOperand2, datetime_format)}`;
     } else {
       newFilter.operand2 = newFilter.operand2 ? newFilter.operand2 : newFilter.operand1;
-      newFilter.labelOperands = format(data.valueOperand1, "yyyy-MM-dd HH:mm:ss");
+      newFilter.labelOperands = format(data.valueOperand1, datetime_format);
     }
     return newFilter;
   }, []);
@@ -614,12 +625,17 @@ function BaseProvider(props) {
   } = useModuleDictionary();
   const [popupValidationSchema, setInternalPopupValidationSchema] = useState(Yup.object().shape({}));
   const [fnTransformFormValuesIntoRawValues, setInternalfnTransormFormValuesIntoRawValues] = useState(() => void 0);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const all_fields = useMemo(() => {
     return {
       ...ALL_FIELDS,
-      label: getLabel("filter.all_fields")
+      label: getLabel("filter.all_fields"),
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/filter/assets/icons/all_fields.svg`
     };
-  }, [getLabel]);
+  }, [getLabel, host_static_assets, environment_assets]);
   const [inEdition, setInEdition] = useState(false);
   const [isDirty, setIsDirty] = useState(!automatic);
   const [isValid, setIsValid] = useState(false);
@@ -876,7 +892,7 @@ function ApplyedFilter(props) {
   } = useBase();
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   console.log("fieldName by ApplyedFilter 1", getFieldByName(fieldName));
   const field = useMemo(() => {
@@ -905,7 +921,7 @@ function ApplyedFilter(props) {
   return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
     id: "WrapperApplyedFilter",
     className: !isSetted ? "waf_no_setted" : "",
-    children: [/* @__PURE__ */ jsx(Icon, {
+    children: [urlIcon && /* @__PURE__ */ jsx(Icon, {
       src: urlIcon,
       onClick
     }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
@@ -918,7 +934,7 @@ function ApplyedFilter(props) {
         children: labelOperands
       })]
     }), !fixed && /* @__PURE__ */ jsx(IconButton, {
-      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/close.svg`,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`,
       onClick: onDelete
     })]
   });
@@ -933,12 +949,9 @@ function ApplyedFilters() {
       id: "WrapperApplyedFilters"
     });
   }
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      width: "100%"
-    },
+  return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
     children: /* @__PURE__ */ jsx(ScrollBar, {
-      children: /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+      children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
         id: "WrapperApplyedFilters",
         children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
           ...filter
@@ -968,11 +981,12 @@ const WrapperClearFilters = styled$1("div")(({
 const ClearFilters = () => {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     clearFilters,
-    isSkeleton
+    isSkeleton,
+    applyedFilters
   } = useBase();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTClearFilters, {
@@ -983,12 +997,16 @@ const ClearFilters = () => {
       })
     });
   }
-  return /* @__PURE__ */ jsx(WrapperClearFilters, {
-    children: /* @__PURE__ */ jsx(IconButton, {
-      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
-      onClick: clearFilters
-    })
-  });
+  console.log("Dynamic validation", applyedFilters.findIndex((f) => f.fixed == false) > -1);
+  if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
+    return /* @__PURE__ */ jsx(WrapperClearFilters, {
+      children: /* @__PURE__ */ jsx(IconButton, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+        onClick: clearFilters
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {});
 };
 const SKTWrapperFilterButton = styled("div")(({
   theme
@@ -1032,7 +1050,7 @@ function FilterButton() {
   } = useBase();
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   console.log("Render isDirty", isDirty, automatic);
   if (isSkeleton) {
@@ -1060,7 +1078,7 @@ function FilterButton() {
       dictionaryTooltip: "filter.filter_tooltip",
       onClick: () => fireOnChangeFilters(),
       "aria-label": "settings",
-      src: `${host_static_assets}/${environment}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
     })
   });
 }
@@ -1072,7 +1090,7 @@ const WrapperInputFilter = styled("div")(({
   alignItems: "center",
   width: "100%",
   height: theme.spacing(3.75),
-  margin: theme.spacing(0, 1.5),
+  marginLeft: theme.spacing(1.5),
   padding: theme.spacing(0, 1.5),
   borderRight: `1px solid ${theme.palette.divider}`,
   borderLeft: `1px solid ${theme.palette.divider}`,
@@ -1165,6 +1183,9 @@ function InputFilter() {
     }
   };
   console.log("Render InputFilter");
+  if (!withAllField && availableFields.length == 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
   return /* @__PURE__ */ jsxs(WrapperInputFilter, {
     id: "WrapperInputFilter",
     children: [/* @__PURE__ */ jsx(StyledInputFilter, {
@@ -1301,8 +1322,8 @@ const PopupEditFilter = () => {
         urlCancel: -1,
         children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
           children: [/* @__PURE__ */ jsxs(HeaderContainer, {
-            children: [/* @__PURE__ */ jsx(Icon, {
-              src: field?.urlIcon
+            children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
+              src: field.urlIcon
             }), /* @__PURE__ */ jsx(TitleContainer, {
               children: field?.label
             })]
@@ -1336,6 +1357,7 @@ const WrapperFilter = styled("div", {
   alignItems: "center",
   justifyContent: "flex-start",
   height: "auto",
+  width: "100%",
   padding: theme.spacing(1.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
@@ -1352,16 +1374,16 @@ const WrapperFilterMobile = styled("div", {
   justifyContent: "space-between",
   minWidth: theme.spacing(25),
   height: "auto",
+  width: "100%",
   padding: theme.spacing(1.5),
   borderRadius: theme.spacing(1),
   border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
   gap: theme.spacing(1.5)
 }));
-const ContainerFistRow = styled("div")(({
-  theme
-}) => ({
+const ContainerFistRow = styled("div")(() => ({
+  width: "100%",
   display: "flex",
-  width: "100%"
+  justifyContent: "space-between"
 }));
 const DynamicFilter = (props) => {
   const isDesktop = useResponsiveDesktop();

package/dist/components/Icon/index.js

@@ -1,4 +1,5 @@
 import { styled } from "@mui/material";
+import { useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 const MaskIcon = styled("div", {
   shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
@@ -7,22 +8,57 @@ const MaskIcon = styled("div", {
   mask: `url(${props.src}) no-repeat`,
   width: props.width === void 0 ? "20px" : props.width,
   height: props.height === void 0 ? "20px" : props.height,
-  backgroundColor: props.bgColor === "active" ? props.theme.palette.action.active : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor === "info" ? props.theme.palette.info.main : props.bgColor === "warning" ? props.theme.palette.warning.main : props.bgColor === "error" ? props.theme.palette.error.main : props.bgColor
+  backgroundColor: props.bgColor === "active" ? props.theme.palette.action.active : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor === "info" ? props.theme.palette.info.main : props.bgColor === "warning" ? props.theme.palette.warning.main : props.bgColor === "error" ? props.theme.palette.warning.main : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor
+}));
+const WrapperPlaceHolder = styled("div", {
+  shouldForwardProp: (props) => props !== "widht" && props !== "height"
+})((props) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: props.width,
+  height: props.height
 }));
 function Icon(props) {
+  const [resource, setResource] = useState(void 0);
   const {
-    src = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/commons/assets/icons/default.svg",
-    width = "20px",
-    height = "20px",
-    bgColor = "active",
-    onClick
-  } = props;
-  return /* @__PURE__ */ jsx(MaskIcon, {
     src,
+    width = "16px",
+    height = "16px",
+    bgColor = "active"
+  } = props;
+  useEffect(() => {
+    let mounted = true;
+    if (resource)
+      return;
+    (async function networkOperation() {
+      await fetch(src).then((response) => {
+        if (mounted) {
+          console.log("Icon***", response.body);
+          setResource(response.url);
+        }
+      }).catch((_err) => {
+      });
+    })();
+    return function clenUp() {
+      console.log("CleanUP", "Icon");
+      mounted = false;
+    };
+  }, []);
+  const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
+  return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
+    id: "IconReact",
     width,
     height,
-    bgColor,
-    onClick
+    children: resource ? /* @__PURE__ */ jsx(MaskIcon, {
+      src: resource,
+      width,
+      height,
+      bgColor
+    }) : /* @__PURE__ */ jsx("img", {
+      src: placeHolder,
+      alt: "icon_svg"
+    })
   });
 }
 export { Icon as I };

package/dist/components/Icon/styles.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
+import { WrapperPlaceHolderProps } from './types';
 export declare const MaskIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("./types").OwnProps & import("react").HTMLProps<HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperPlaceHolderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Icon/types.d.ts

@@ -1,8 +1,9 @@
 import { HTMLProps } from 'react';
 export interface OwnProps {
-    src: string | undefined;
+    src: string;
     width?: number | string;
     height?: number | string;
-    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'disabled';
+    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
 }
+export declare type WrapperPlaceHolderProps = Pick<OwnProps, 'width' | 'height'>;
 export declare type IconProps = OwnProps & HTMLProps<HTMLDivElement>;

package/dist/components/ModalDialog/index.js

@@ -6,7 +6,7 @@ import { a as getThemeVariantColor } from "../../vendor.js";
 import { R as Resizeable } from "../Resizeable/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
-import { B as BoxIcon } from "../mui_extended/BoxIcon/index.js";
+import { I as Icon } from "../Icon/index.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { F as FormActions, g as getActionnsComponentsDictionary } from "../FormActions/index.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
@@ -54,7 +54,7 @@ const ModalTitle = styled("div")(({ theme, variant }) => ({
 const Header = (props) => {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     variant,
@@ -63,17 +63,17 @@ const Header = (props) => {
     withClose,
     onCloseModal
   } = props;
-  const iconSrcWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/warning.svg`;
-  const iconSrcError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/error.svg`;
-  const iconSrcInfo = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/info.svg`;
-  const iconDefault = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/icon_bar_tittle.svg`;
+  const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
+  const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
+  const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
+  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_tittle.svg`;
   return /* @__PURE__ */ jsxs(Header$1, {
     id: "Header",
     children: [/* @__PURE__ */ jsxs(IconTitleContainer, {
       className: "draggable-dialog-title",
       children: [/* @__PURE__ */ jsx(IconHeader, {
         variant,
-        children: !iconComponent ? /* @__PURE__ */ jsx(BoxIcon, {
+        children: !iconComponent ? /* @__PURE__ */ jsx(Icon, {
           src: variant === "warning" ? iconSrcWarning : variant === "delete" ? iconSrcError : variant === "info" ? iconSrcInfo : iconDefault
         }) : iconComponent
       }), /* @__PURE__ */ jsx(ModalTitle, {
@@ -83,8 +83,8 @@ const Header = (props) => {
     }), withClose && /* @__PURE__ */ jsx(IconButton, {
       onClick: onCloseModal,
       "aria-label": "click",
-      children: /* @__PURE__ */ jsx(BoxIcon, {
-        src: `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/close.svg`
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`
       })
     })]
   });

package/dist/components/NoItemSelected/index.js

@@ -50,12 +50,12 @@ const Label = styled("span")(({
 function NoItemSelected() {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     getLabel
   } = useModuleDictionary();
-  const src = `${host_static_assets}/${environment}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
+  const src = `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
   return /* @__PURE__ */ jsxs(WrapperNoItemSelected, {
     id: "Wrapper",
     children: [/* @__PURE__ */ jsx(Image, {

package/dist/components/ObjectLogs/index.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
-import { useNetwork, useModuleDictionary, usePaginate } from "@m4l/core";
+import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
 import { D as DataGrid } from "../DataGrid/index.js";
 import { D as DateFormatter } from "../DataGrid/formatters/DateFormatter/index.js";
@@ -7,6 +7,7 @@ import { Tooltip, IconButton } from "@mui/material";
 import { R as ReactJson } from "../../react-json-view.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { u as useModal } from "../../hooks/useModal/index.js";
+import { I as Icon } from "../Icon/index.js";
 import { D as DynamicFilter } from "../DynamicFilter/index.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
@@ -19,7 +20,7 @@ const Actions = styled("div")(({
   theme
 }) => ({
   position: "relative",
-  height: "60px",
+  height: "auto",
   display: "flex",
   flexDirection: "row",
   justifyContent: "flex-start",
@@ -93,6 +94,10 @@ function DetailFormatter(props) {
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const onClickDetail = () => {
     openModal({
       onQueryClose: () => closeModal(),
@@ -110,8 +115,8 @@ function DetailFormatter(props) {
     children: /* @__PURE__ */ jsx(IconButton, {
       onClick: onClickDetail,
       "aria-label": "filter",
-      children: /* @__PURE__ */ jsx("div", {
-        children: "Sin icono"
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`
       })
     })
   });
@@ -120,6 +125,7 @@ function ObjectLogs(props) {
   const {
     getLabel
   } = useModuleDictionary();
+  useEnvironment();
   const {
     resource_id,
     object_id
@@ -190,7 +196,7 @@ function ObjectLogs(props) {
     children: [/* @__PURE__ */ jsx(Actions, {
       id: "objectLogsActions",
       children: /* @__PURE__ */ jsx(DynamicFilter, {
-        withAllField: false,
+        withAllField: true,
         onChangeFilter,
         automatic: false,
         fields: [{
@@ -200,6 +206,13 @@ function ObjectLogs(props) {
           multiple: false,
           fixed: true,
           urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
+        }, {
+          name: "user_logs.log_detail",
+          label: getLabel("object_logs.log_detail"),
+          type: "string",
+          multiple: false,
+          fixed: false,
+          urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
         }],
         initialFilters: []
       })

package/dist/components/PaperForm/index.js

@@ -1,7 +1,7 @@
 import { styled, useTheme } from "@mui/material/styles";
 import { Skeleton } from "@mui/material";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { B as BoxIcon } from "../mui_extended/BoxIcon/index.js";
+import { I as Icon } from "../Icon/index.js";
 const WrapperPaper = styled("div")(({
   theme
 }) => ({
@@ -93,7 +93,7 @@ function PaperForm(props) {
     children,
     isSkeleton = false
   } = props;
-  const theme = useTheme();
+  useTheme();
   return /* @__PURE__ */ jsx(WrapperPaper, {
     id: "ContainerPropertyValue",
     children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
@@ -102,11 +102,8 @@ function PaperForm(props) {
         children: /* @__PURE__ */ jsxs(IconTitleContainer, {
           className: "draggable-dialog-title",
           children: [/* @__PURE__ */ jsx(IconHeader, {
-            children: /* @__PURE__ */ jsx(BoxIcon, {
-              src: urlIcon,
-              sx: {
-                color: theme.palette.action.active
-              }
+            children: /* @__PURE__ */ jsx(Icon, {
+              src: urlIcon
             })
           }), tittle]
         })

package/dist/components/PropertyValue/index.js

@@ -1,6 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { Skeleton } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
 const WrapperPropertyValue = styled("div", {
   shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
@@ -12,7 +13,7 @@ const WrapperPropertyValue = styled("div", {
   alignItems: "flex-start",
   width: "100%",
   padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-  height: propertyHeight || "auto",
+  maxHeight: propertyHeight || "auto",
   ":hover": {
     backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
   },
@@ -44,8 +45,9 @@ const Property = styled("span", {
   overflowWrap: "break-word"
 }));
 const Value = styled("div", {
-  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight"
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "valueWidth"
 })(({
+  width,
   propertyHeight,
   theme
 }) => ({
@@ -54,9 +56,9 @@ const Value = styled("div", {
   color: theme.palette.text.secondary,
   position: "relative",
   padding: "1px",
-  height: propertyHeight ? propertyHeight - 24 : "auto",
+  width: width ? `${width}%` : "100%",
+  height: propertyHeight ? propertyHeight : "auto",
   marginTop: theme.spacing(1),
-  width: "100%",
   [theme.breakpoints.up("sm")]: {
     marginLeft: theme.spacing(2),
     marginTop: "0px"
@@ -83,9 +85,34 @@ function PropertyValue(props) {
     value,
     propertyWidth,
     propertyHeight,
+    valueWidth = "100",
     isForm,
     isSkeleton = false
   } = props;
+  const isDesktop = useResponsiveDesktop();
+  console.log("valueWidth", valueWidth);
+  const getValueW = () => {
+    if (valueWidth === "75" && isDesktop) {
+      return "75";
+    } else if (valueWidth === "75" && !isDesktop) {
+      return "100";
+    }
+    if (valueWidth === "50" && isDesktop) {
+      return "50";
+    } else if (valueWidth === "50" && !isDesktop) {
+      return "100";
+    }
+    if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
+      return parseFloat(valueWidth).toString(10);
+    } else if (valueWidth === "25" && !isDesktop || valueWidth === "12.5" && !isDesktop) {
+      return (parseFloat(valueWidth) * 2).toString(10);
+    }
+    console.log("valueWidth in function", valueWidth);
+    return "100";
+  };
+  const valueW = getValueW();
+  console.log("valueWidth in function", valueWidth);
+  console.log("getValueW", typeof getValueW(), getValueW());
   return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
     id: "ContainerPropertyValue",
     isForm,
@@ -99,7 +126,7 @@ function PropertyValue(props) {
       children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
     }), /* @__PURE__ */ jsx(Value, {
       id: "Value",
-      propertyWidth,
+      width: valueW,
       propertyHeight,
       children: value
     })]

package/dist/components/PropertyValue/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { PropertyProps } from './types';
+import { PropertyProps, ValueProps } from './types';
 export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SKTWrapperProperty: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/PropertyValue/types.d.ts

@@ -1,11 +1,18 @@
 import type { ReactNode } from 'react';
 export interface PropertyProps {
     propertyWidth?: number;
-    propertyHeight?: number;
+    propertyHeight?: number | string;
     isForm?: boolean;
 }
-export interface PropertyValueProps extends PropertyProps {
-    isSkeleton?: boolean;
+export interface ValueProps {
+    width: string;
+    propertyHeight?: number | string;
+}
+export interface PropertyValueProps extends PropertyProps, ValueTypeProps {
     property: string;
+    isSkeleton?: boolean;
     value: number | string | ReactNode;
 }
+export interface ValueTypeProps {
+    valueWidth?: '100' | '75' | '50' | '25' | '12.5';
+}

package/dist/components/hook-form/RHFDateTime.js

@@ -2,6 +2,7 @@ import { useFormContext, Controller } from "react-hook-form";
 import { Skeleton, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { DateTimePicker } from "@mui/x-date-pickers";
+import { useEnvironment } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
 const SKTRHFWrapperTextField = styled("div")(({
   theme
@@ -27,6 +28,12 @@ function RHFDateTime(props) {
   const {
     control
   } = useFormContext();
+  const {
+    dfnsFormat: {
+      datetime_format,
+      datetime_mask
+    }
+  } = useEnvironment();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SKTRHFWrapperTextField, {
       children: /* @__PURE__ */ jsx(Skeleton, {
@@ -47,8 +54,8 @@ function RHFDateTime(props) {
     }) => {
       return /* @__PURE__ */ jsx(DateTimePicker, {
         ampm: false,
-        inputFormat: "yyyy-MM-dd HH:mm:ss",
-        mask: "____-__-__ __:__:__",
+        inputFormat: datetime_format,
+        mask: datetime_mask,
         label: "",
         value: field.value,
         onChange: (value) => {

package/dist/components/hook-form/RHFUpload/RHFUploadImage/components/UploadImage/styles.d.ts

@@ -2,3 +2,10 @@
 export declare const RootStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DropZoneStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PlaceholderStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerUploadBody: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Containermessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerDescription: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerConditions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFUpload/RHFUploadImage/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperRHFUploadImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/hook-form/RHFUpload.js

@@ -1,18 +1,19 @@
-import { Typography, FormHelperText } from "@mui/material";
+import { styled as styled$1, FormHelperText } from "@mui/material";
 import { useCallback } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { i as isString_1 } from "../../lodash.js";
 import { u as useDropzone } from "../../node_modules.js";
+import { styled, alpha } from "@mui/material/styles";
 import { I as Image } from "../Image/index.js";
-import { useEnvironment } from "@m4l/core";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import "../../react-lazy-load-image-component.js";
-import { styled } from "@mui/material/styles";
 const RootStyle = styled("div")(({
   theme
 }) => ({
-  width: 144,
-  height: 144,
+  width: "inherit",
+  height: "100%",
+  minWidth: theme.spacing(20),
   margin: "auto",
   borderRadius: theme.spacing(1),
   padding: theme.spacing(1),
@@ -45,20 +46,74 @@ const DropZoneStyle = styled("div")(({
 const PlaceholderStyle = styled("div")(({
   theme
 }) => ({
+  "&:hover": {
+    opacity: 1
+  },
   display: "flex",
-  position: "absolute",
-  alignItems: "center",
-  flexDirection: "column",
   justifyContent: "center",
-  color: theme.palette.text.secondary,
-  backgroundColor: theme.palette.background.neutral,
+  position: "absolute",
+  zIndex: "2",
+  inset: "0",
   transition: theme.transitions.create("opacity", {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.shorter
   }),
-  "&:hover": {
-    opacity: 0.72
-  }
+  overflow: "auto"
+}));
+const ContainerUploadBody = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(3, 5),
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  gap: theme.spacing(3)
+}));
+const Containermessage = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: theme.spacing(3)
+}));
+const ContainerTitle = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2,
+  width: "fit-content"
+}));
+const ContainerDescription = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  minWidth: theme.spacing(20)
+}));
+const ContainerConditions = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  width: "fit-content"
+}));
+const WrapperImage = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  maxWidth: theme.spacing(20)
+}));
+styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  inset: "0",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
 }));
 function UploadImage({
   error,
@@ -78,10 +133,14 @@ function UploadImage({
   });
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(RootStyle, {
+      id: "RootStyle",
       sx: {
         ...(isDragReject || error) && {
           borderColor: "error.light"
@@ -89,6 +148,7 @@ function UploadImage({
         ...sx
       },
       children: /* @__PURE__ */ jsxs(DropZoneStyle, {
+        id: "DropZoneStyle",
         ...getRootProps(),
         sx: {
           ...isDragActive && {
@@ -103,36 +163,54 @@ function UploadImage({
           sx: {
             zIndex: 8
           }
-        }), /* @__PURE__ */ jsxs(PlaceholderStyle, {
+        }), /* @__PURE__ */ jsx(PlaceholderStyle, {
+          id: "PlaceholderStyle",
           className: "placeholder",
           sx: {
-            ...file && {
-              opacity: 0,
+            ...file ? {
+              bgcolor: alpha("#161C24", 0.72),
               color: "common.white",
-              bgcolor: "grey.900",
-              "&:hover": {
-                opacity: 0.72
-              }
+              opacity: 0
+            } : {
+              opacity: 1
             },
             ...(isDragReject || error) && {
-              bgcolor: "error.lighter"
+              backgroundColor: alpha("error.main", 0.72),
+              color: "common.white"
             }
           },
-          children: [/* @__PURE__ */ jsx(Image, {
-            src: `${host_static_assets}/${environment}/frontend/commons/assets/icons/more_vertical.svg`,
-            effect: "opacity",
-            width: "24",
-            height: "24",
-            mb: 1
-          }), /* @__PURE__ */ jsx(Typography, {
-            variant: "caption",
-            children: file ? "Update photo" : "Upload photo"
-          })]
+          children: /* @__PURE__ */ jsxs(ContainerUploadBody, {
+            className: "ContainerUploadBody",
+            children: [/* @__PURE__ */ jsx(WrapperImage, {
+              children: /* @__PURE__ */ jsx(Image, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+                effect: "opacity",
+                width: "100%",
+                height: "auto",
+                mb: 1
+              })
+            }), /* @__PURE__ */ jsxs(Containermessage, {
+              children: [/* @__PURE__ */ jsx(ContainerTitle, {
+                children: file ? getLabel("upload_image.title_update") : getLabel("upload_image.title_upload")
+              }), /* @__PURE__ */ jsx(ContainerDescription, {
+                children: getLabel("upload_image.description")
+              }), /* @__PURE__ */ jsx(ContainerConditions, {
+                children: getLabel("upload_image.conditions")
+              })]
+            })]
+          })
         })]
       })
     }), helperText && helperText]
   });
 }
+const WrapperRHFUploadImage = styled$1("div")(({
+  theme
+}) => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
 function RHFUploadImage({
   name,
   ...other
@@ -161,7 +239,7 @@ function RHFUploadImage({
       }
     }) => {
       const checkError = !!error && !field.value;
-      return /* @__PURE__ */ jsxs("div", {
+      return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, {
         children: [/* @__PURE__ */ jsx(UploadImage, {
           onDrop: handleDrop,
           error: checkError,

package/dist/components/mui_extended/Accordion/index.js

@@ -5,7 +5,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 function Accordion(props) {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     label,
@@ -29,7 +29,7 @@ function Accordion(props) {
       disableTouchRipple: false,
       expandIcon: /* @__PURE__ */ jsx(IconButton, {
         "aria-label": "settings",
-        src: `${host_static_assets}/${environment}/frontend/components/accordion/assets/icons/expanded.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`
       }),
       ...summaryProps,
       children: isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {

package/dist/components/mui_extended/IconButton/index.js

@@ -3,7 +3,7 @@ import { forwardRef, useMemo } from "react";
 import { IconButton as IconButton$1, Box, Tooltip } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
-import { B as BoxIcon } from "../BoxIcon/index.js";
+import { I as Icon } from "../../Icon/index.js";
 const varSmall = {
   hover: {
     scale: 1.1
@@ -69,13 +69,12 @@ function IconButton({
   const {
     getLabel
   } = useModuleDictionary();
-  const iconButton = useMemo(() => /* @__PURE__ */ jsx(IconButton$1, {
-    size,
-    ...other,
-    children: /* @__PURE__ */ jsx(BoxIcon, {
+  const iconMemo = useMemo(() => {
+    console.log("IconButton", size, other, src);
+    return /* @__PURE__ */ jsx(Icon, {
       src
-    })
-  }), [size, other, src]);
+    });
+  }, [src]);
   const finalTooltip = useMemo(() => {
     if (dictionaryTooltip && getLabel) {
       return getLabel(dictionaryTooltip);
@@ -85,9 +84,17 @@ function IconButton({
   if (finalTooltip && !other.disabled) {
     return /* @__PURE__ */ jsx(Tooltip, {
       title: finalTooltip,
-      children: iconButton
+      children: /* @__PURE__ */ jsx(IconButton$1, {
+        size,
+        ...other,
+        children: iconMemo
+      })
     });
   }
-  return iconButton;
+  return /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: iconMemo
+  });
 }
 export { IconButton as I, IconButtonAnimate as a };

package/dist/components/mui_extended/MenuActions/index.js

@@ -3,7 +3,7 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { IconButton, Tooltip, MenuItem } from "@mui/material";
 import { M as MenuPopover } from "../MenuPopover/index.js";
 import { styled } from "@mui/material/styles";
-import { B as BoxIcon } from "../BoxIcon/index.js";
+import { I as Icon } from "../../Icon/index.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 const WrapperMenuActions = styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
@@ -30,7 +30,7 @@ function MenuActions(props) {
   } = props;
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     getLabel
@@ -42,8 +42,8 @@ function MenuActions(props) {
   const urlFinalIcon = useMemo(() => {
     if (urlIcon)
       return urlIcon;
-    return `${host_static_assets}/${environment}/frontend/commons/assets/icons/more_vertical.svg`;
-  }, [urlIcon, host_static_assets, environment]);
+    return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
+  }, [urlIcon, host_static_assets, environment_assets]);
   const handleClose = () => {
     setOpen(null);
   };
@@ -67,12 +67,10 @@ function MenuActions(props) {
         id: "WrapperMenuActions",
         size: "small",
         onClick: handleOpen,
-        children: /* @__PURE__ */ jsx(BoxIcon, {
+        children: /* @__PURE__ */ jsx(Icon, {
           src: urlFinalIcon,
-          sx: {
-            width: 20,
-            height: 20
-          }
+          width: 16,
+          height: 16
         })
       })
     }), /* @__PURE__ */ jsx(MenuPopover, {
@@ -101,7 +99,7 @@ function MenuActions(props) {
           color: menuAction.color ? menuAction.color : "text.main"
         },
         disabled: menuAction.disabled,
-        children: [/* @__PURE__ */ jsx(BoxIcon, {
+        children: [/* @__PURE__ */ jsx(Icon, {
           src: menuAction.urlIcon
         }), /* @__PURE__ */ jsx(LabelMemuItem, {
           children: getLabel(menuAction.dictionaryField)

package/dist/components/mui_extended/Pager/index.js

@@ -24,7 +24,7 @@ function PagerActions(props) {
   } = props;
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
@@ -45,25 +45,25 @@ function PagerActions(props) {
       onClick: handleFirstPageButtonClick,
       disabled: page === 0,
       "aria-label": "first page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/first.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
     }), /* @__PURE__ */ jsx(IconButton, {
       dictionaryTooltip: "pager.previous",
       onClick: handleBackButtonClick,
       disabled: page === 0,
       "aria-label": "first page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/previous.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
     }), /* @__PURE__ */ jsx(IconButton, {
       dictionaryTooltip: "pager.next",
       onClick: handleNextButtonClick,
       disabled: page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": "next page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/next.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
     }), /* @__PURE__ */ jsx(IconButton, {
       dictionaryTooltip: "pager.last",
       onClick: handleLastPageButtonClick,
       disabled: page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": "last page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/last.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
     })]
   });
 }

package/dist/contexts/ModalContext/index.js

@@ -47,11 +47,11 @@ const ContentConfirm = (props) => {
   } = props;
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
-  const illustrationWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
-  const illustrationError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
-  const illustrationInfo = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
   return /* @__PURE__ */ jsx(WrapperContentConfirm, {
     children: /* @__PURE__ */ jsxs(ModalContent, {
       children: [/* @__PURE__ */ jsx(IllustrationContainer, {

package/dist/vendor.js

@@ -15,10 +15,11 @@ import "./components/hook-form/RHFDateTime.js";
 import "@mui/x-date-pickers";
 import "./components/hook-form/RHFTextField/index.js";
 import "./lodash.js";
-import "./react-lazy-load-image-component.js";
 import { styled } from "@mui/material/styles";
+import "./react-lazy-load-image-component.js";
 import "./components/Image/index.js";
 import "./components/hook-form/RHFUpload.js";
+import "./components/Icon/index.js";
 import "./components/mui_extended/LoadingButton/index.js";
 import "./components/mui_extended/MenuPopover/index.js";
 import "./components/mui_extended/MenuActions/index.js";
@@ -32,7 +33,6 @@ import "react-dnd-html5-backend";
 import "date-fns";
 import "./components/ScrollBar/index.js";
 import "./components/DynamicFilter/index.js";
-import "./components/Icon/index.js";
 import "./simplebar.js";
 import "yup";
 import "./components/FormActions/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.33",
+  "version": "0.0.36",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -14,14 +14,13 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
+    "@m4l/graphics": "^0.0.28",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^2.9.5",
-    "@m4l/core": "^0.0.32",
-    "@m4l/graphics": "^0.0.22",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",
@@ -42,8 +41,6 @@
   "devDependencies": {
     "@emotion/styled": "^11.9.3",
     "@hookform/resolvers": "^2.9.5",
-    "@m4l/core": "^0.0.32",
-    "@m4l/graphics": "^0.0.22",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",