@producteca/producteca-ui-kit 1.72.0 → 1.73.0

package/dist/locales/es.d.ts

@@ -492,6 +492,7 @@ declare const _default: {
         borderHover: string;
         borderFocus: string;
         borderDark: string;
+        borderDarkHover: string;
         borderDisabled: string;
         fontFamily: string;
         fontSizesDisplay: string;

package/dist/producteca-ui-kit.es.js

@@ -9975,15 +9975,14 @@ var includes_1 = includes;
 const includes$1 = /* @__PURE__ */ getDefaultExportFromCjs(includes_1);
 const Colors = {
   grey: {
-    "900": "#252525",
-    "800": "#404040",
-    "733": "#666666",
-    "700": "#797979",
-    "500": "#ACACAC",
-    "400": "#D7D7D7",
-    "200": "#EDEDED",
-    "100": "#F5F5F5",
-    "50": "#FAFAFA"
+    "900": "#0A1230",
+    "800": "#2F3758",
+    "700": "#5A6285",
+    "500": "#8A90AE",
+    "400": "#DCDEE9",
+    "200": "#EAECF3",
+    "100": "#F2F3F7",
+    "50": "#F7F8FB"
   },
   error: {
     "900": "#9A1414",
@@ -10010,12 +10009,19 @@ const Colors = {
     "50": "#FFF3D1"
   },
   primary: {
-    "900": "#0045AD",
-    "700": "#0058DB",
-    "500": "#0066FF",
-    "300": "#76ADFF",
-    "100": "#A7CAFF",
-    "50": "#E6F1FF"
+    "900": "#002E77",
+    "700": "#003FA0",
+    "500": "#0056D8",
+    "300": "#5A8BEA",
+    "100": "#BFD4F5",
+    "50": "#E6EEFB"
+  },
+  lila: {
+    "900": "#342879",
+    "700": "#6F5FC9",
+    "500": "#B79BD9",
+    "100": "#E0D0F0",
+    "50": "#F4EEFA"
   }
 };
 const getColor = (category, shade) => {
@@ -20424,6 +20430,7 @@ const es$3 = {
     borderHover: "Borde en hover",
     borderFocus: "Borde en focus",
     borderDark: "Borde oscuro",
+    borderDarkHover: "Borde oscuro en hover",
     borderDisabled: "Borde deshabilitado",
     fontFamily: "Familia de fuentes",
     fontSizesDisplay: "Tamaños de fuente - Display",
@@ -57546,14 +57553,14 @@ const datePickerLayoutStyles = {
   "& .MuiPickersCalendarHeader-label": {
     fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
     fontSize: "14px",
-    color: "#797979",
+    color: "var(--grey-700)",
     fontWeight: 600,
     textTransform: "capitalize"
   },
   "& .MuiDayCalendar-weekDayLabel": {
     fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
     fontSize: "12px",
-    color: "#797979",
+    color: "var(--grey-700)",
     fontWeight: 600
   }
 };
@@ -57561,17 +57568,17 @@ const datePickerInputStyles = {
   "& .MuiOutlinedInput-root": {
     "&:hover": {
       "& .MuiOutlinedInput-notchedOutline": {
-        borderColor: "#ACACAC"
+        borderColor: "var(--grey-500)"
       }
     },
     "&.Mui-focused": {
       "& .MuiOutlinedInput-notchedOutline": {
-        borderColor: "#252525"
+        borderColor: "var(--grey-900)"
       }
     },
     "&.Mui-disabled": {
       "& .MuiOutlinedInput-notchedOutline": {
-        borderColor: "#D7D7D7"
+        borderColor: "var(--grey-400)"
       }
     }
   }
@@ -57580,33 +57587,33 @@ const datePickerDayStyles = {
   fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
   fontSize: "12px",
   backgroundColor: "white",
-  color: "#252525",
+  color: "var(--grey-900)",
   borderRadius: "4px",
-  "&.MuiPickersDay-root": {
+  "&.MuiPickerDay-root": {
     fontSize: "14px",
     textTransform: "capitalize"
   },
-  "&.MuiPickersDay-today": {
+  "&.MuiPickerDay-today": {
     backgroundColor: "white",
-    color: "#252525",
-    border: "1px solid #252525"
+    color: "var(--grey-900)",
+    border: "1px solid var(--grey-900)"
   },
   "&.Mui-selected": {
-    backgroundColor: "#0066ff",
+    backgroundColor: "var(--primary-500)",
     color: "white",
     border: "none",
     "&:hover": {
-      backgroundColor: "#0066ff",
+      backgroundColor: "var(--primary-500)",
       borderColor: "none"
     },
     "&:focus": {
-      backgroundColor: "#0066ff",
+      backgroundColor: "var(--primary-500)",
       borderColor: "none"
     }
   },
   "&:hover:not(.Mui-selected)": {
-    color: "#252525",
-    backgroundColor: "#EDEDED",
+    color: "var(--grey-900)",
+    backgroundColor: "var(--grey-200)",
     borderColor: "none"
   }
 };
@@ -57620,59 +57627,59 @@ const datePickerDigitalClockStyles = {
     "& .MuiButtonBase-root.MuiMenuItem-root.MuiMenuItem-gutters": {
       fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
       backgroundColor: "white",
-      color: "#252525",
+      color: "var(--grey-900)",
       borderRadius: "4px",
       width: "32px",
       height: "32px",
       margin: "4px 0 0 4px",
       fontSize: " 14px",
       "&.Mui-selected": {
-        backgroundColor: "#0066ff",
+        backgroundColor: "var(--primary-500)",
         color: "white",
         "&:hover": {
-          backgroundColor: "#0066ff"
+          backgroundColor: "var(--primary-500)"
         },
         "&:focus": {
-          backgroundColor: "#0066ff"
+          backgroundColor: "var(--primary-500)"
         }
       },
       "&:hover:not(.Mui-selected)": {
-        color: "#252525",
-        backgroundColor: "#EDEDED"
+        color: "var(--grey-900)",
+        backgroundColor: "var(--grey-200)"
       }
     }
   }
 };
 const datePickerYearStyles = {
+  // MUI X v9 dropped the MuiPickersYear wrapper: year buttons are now
+  // .MuiYearCalendar-button rendered directly inside .MuiYearCalendar-root
   "& .MuiYearCalendar-root": {
-    "& .MuiPickersYear-root": {
-      "& .MuiPickersYear-yearButton": {
-        fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
-        fontSize: "14px",
-        backgroundColor: "white",
-        color: "#252525",
-        borderRadius: "4px",
-        "&.Mui-selected": {
-          backgroundColor: "#0066ff",
-          color: "white",
-          "&:hover": {
-            backgroundColor: "#0066ff"
-          },
-          "&:focus": {
-            backgroundColor: "#0066ff"
-          }
+    "& .MuiYearCalendar-button": {
+      fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+      fontSize: "14px",
+      backgroundColor: "white",
+      color: "var(--grey-900)",
+      borderRadius: "4px",
+      "&.Mui-selected": {
+        backgroundColor: "var(--primary-500)",
+        color: "white",
+        "&:hover": {
+          backgroundColor: "var(--primary-500)"
         },
-        "&:hover:not(.Mui-selected)": {
-          backgroundColor: "#EDEDED",
-          color: "#252525"
+        "&:focus": {
+          backgroundColor: "var(--primary-500)"
         }
+      },
+      "&:hover:not(.Mui-selected)": {
+        backgroundColor: "var(--primary-500)",
+        color: "var(--grey-900)"
       }
     }
   }
 };
 const datePickerPopperStyles = {
-  "& .MuiPickersPopper-paper": {
-    boxShadow: "0px 5px 5px -3px rgb(205 205 205 / 20%), 0px 8px 14px 1px rgb(165 165 165 / 14%), 0px 3px 14px 2px rgb(219 219 219 / 6%)"
+  "& .MuiPickerPopper-paper": {
+    boxShadow: "var(--elevation-shadow)"
   }
 };
 const lg$8 = "datePicker-module_lg_lvvw6";
@@ -57691,7 +57698,17 @@ const styles$w = {
 };
 dayjs.extend(customParseFormat);
 const ActionComponent = ({ showClearIcon, onClear, onOpen }) => /* @__PURE__ */ jsxs("div", { className: styles$w["calendar-icon-container"], "data-testid": "action-component", children: [
-  showClearIcon && /* @__PURE__ */ jsx$1("div", { onClick: onClear, className: styles$w["clear-icon"], children: /* @__PURE__ */ jsx$1(CustomIcon, { children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) }) }),
+  showClearIcon && /* @__PURE__ */ jsx$1(
+    "div",
+    {
+      onClick: (event) => {
+        event.stopPropagation();
+        onClear?.();
+      },
+      className: styles$w["clear-icon"],
+      children: /* @__PURE__ */ jsx$1(CustomIcon, { children: /* @__PURE__ */ jsx$1(CloseRoundedIcon, {}) })
+    }
+  ),
   /* @__PURE__ */ jsx$1("div", { className: styles$w["divider-line"] }),
   /* @__PURE__ */ jsx$1("div", { onClick: onOpen, className: styles$w["calendar-icon"], children: /* @__PURE__ */ jsx$1(CustomIcon, { size: "12", children: /* @__PURE__ */ jsx$1(CalendarTodayIcon, {}) }) })
 ] });
@@ -57712,7 +57729,7 @@ const ReadOnlyDateField = ({
   return /* @__PURE__ */ jsx$1(
     TextField,
     {
-      ref: (element) => triggerRef(element),
+      ref: triggerRef,
       value: displayValue,
       placeholder,
       name,
@@ -67412,7 +67429,7 @@ const WithTooltip = ({
             ...customSlotProps?.popper?.sx || {},
             [`&.${tooltipClasses.popper} .${tooltipClasses.tooltip}`]: {
               fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
-              background: "rgba(102, 102, 102, 1)",
+              background: "var(--grey-800)",
               padding: "9px 9px 8px 12px",
               fontSize: "12px",
               fontWeight: "400",
@@ -67421,7 +67438,7 @@ const WithTooltip = ({
               maxWidth: maxWidth2
             },
             [`&.${tooltipClasses.popper} .${tooltipClasses.arrow}`]: {
-              color: "rgba(102, 102, 102, 1)"
+              color: "var(--grey-800)"
             },
             [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: {
               marginBottom: "8px"
@@ -68303,8 +68320,8 @@ const MoreVertIcon = createSvgIcon(/* @__PURE__ */ jsx$1("path", {
 }), "MoreVert");
 const menuPaperSx = (size2, maxItemsVisible) => ({
   "& .MuiPopover-paper": {
-    boxShadow: "0px 5px 5px -3px rgb(205 205 205 / 20%), 0px 8px 14px 1px rgb(165 165 165 / 14%), 0px 3px 14px 2px rgb(219 219 219 / 6%)",
-    border: "1px solid #D7D7D7",
+    boxShadow: "var(--elevation-shadow)",
+    border: "1px solid var(--border-default)",
     maxHeight: `${maxHeight(size2, maxItemsVisible)}px`
   }
 });
@@ -68446,8 +68463,7 @@ const MenuAction = ({
         onClose: handleClose,
         disableScrollLock: true,
         slotProps: {
-          list: { "aria-labelledby": id },
-          transition: Grow
+          list: { "aria-labelledby": id }
         },
         anchorOrigin: {
           vertical: "bottom",
@@ -72956,8 +72972,8 @@ const StyledMenu = styled(Menu$1, {
   "& .MuiPaper-root": {
     borderRadius: 4,
     marginTop: 1,
-    boxShadow: "0px 5px 5px -3px rgb(205 205 205 / 20%), 0px 8px 14px 1px rgb(165 165 165 / 14%), 0px 3px 14px 2px rgb(219 219 219 / 6%)",
-    border: "1px solid #D7D7D7",
+    boxShadow: "var(--elevation-shadow)",
+    border: "1px solid var(--border-default)",
     "& .MuiMenu-list": {
       padding: "4px 0"
     },