@producteca/producteca-ui-kit 1.72.1 → 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,7 +57587,7 @@ const datePickerDayStyles = {
   fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
   fontSize: "12px",
   backgroundColor: "white",
-  color: "#252525",
+  color: "var(--grey-900)",
   borderRadius: "4px",
   "&.MuiPickerDay-root": {
     fontSize: "14px",
@@ -57588,25 +57595,25 @@ const datePickerDayStyles = {
   },
   "&.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,25 +57627,25 @@ 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)"
       }
     }
   }
@@ -57651,28 +57658,28 @@ const datePickerYearStyles = {
       fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
       fontSize: "14px",
       backgroundColor: "white",
-      color: "#252525",
+      color: "var(--grey-900)",
       borderRadius: "4px",
       "&.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)": {
-        backgroundColor: "#EDEDED",
-        color: "#252525"
+        backgroundColor: "var(--primary-500)",
+        color: "var(--grey-900)"
       }
     }
   }
 };
 const datePickerPopperStyles = {
   "& .MuiPickerPopper-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%)"
+    boxShadow: "var(--elevation-shadow)"
   }
 };
 const lg$8 = "datePicker-module_lg_lvvw6";
@@ -67422,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",
@@ -67431,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"
@@ -68313,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`
   }
 });
@@ -72965,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"
     },