@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTDatePicker/versions/V0/theme.js

@@ -1 +1,225 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../../../scss/variables/colors.module.scss";import{withImportant}from"../../../../utils/classesUtils";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{openerIcon:{fill:getIn(theme,["UTDatePicker","openerIcon","fill"],Colors.orangeIcon)},disabledOpenerIcon:{fill:getIn(theme,["UTDatePicker","disabledOpenerIcon","fill"],Colors.gray)},day:{fontFamily:getIn(theme,["UTDatePicker","day","fontFamily"],getIn(theme,["Fonts","fontFamily"])),fontSize:getIn(theme,["UTDatePicker","day","fontSize"],"14px"),height:getIn(theme,["UTDatePicker","day","height"],"34px"),margin:getIn(theme,["UTDatePicker","day","margin"],"0 1px"),fontWeight:getIn(theme,["UTDatePicker","day","fontWeight"],500),width:getIn(theme,["UTDatePicker","day","width"],"35px"),color:getIn(theme,["UTDatePicker","day","color"],Colors.gray4)},otherMonthDay:{visibility:getIn(theme,["UTDatePicker","otherMonthDay","visibility"],"hidden")},selectedDay:{backgroundColor:getIn(theme,["UTDatePicker","selectedDay","backgroundColor"],Colors.lightBlue),"&:hover":{backgroundColor:getIn(theme,["UTDatePicker","selectedDay","backgroundColor"],Colors.blue)},color:getIn(theme,["UTDatePicker","selectedDay","color"],Colors.white),padding:getIn(theme,["UTDatePicker","selectedDay","padding"],"1px 1px"),backgroundClip:getIn(theme,["UTDatePicker","selectedDay","backgroundClip"],"contentBox")},upperTitle:{color:getIn(theme,["UTDatePicker","upperTitle","color"],Colors.black),fontWeight:getIn(theme,["UTDatePicker","upperTitle","fontWeight"]),marginBottom:getIn(theme,["UTDatePicker","upperTitle","marginBottom"])},errorLabel:{marginTop:4,textAlign:"left"}}};export const materialTheme=theme=>{var _theme$UTDatePicker,_theme$UTDatePicker2,_theme$UTDatePicker3,_theme$UTDatePicker4;return createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{MuiTypography:{body1:{fontFamily:getIn(theme,["UTDatePicker","input","fontFamily"],getIn(theme,["Fonts","fontFamily"]))}},MuiToolbar:{regular:{minHeight:getIn(theme,["UTDatePicker","toolbar","minHeight"],"0px !important")}},MuiPickersToolbar:{toolbar:{height:getIn(theme,["UTDatePicker","toolbar","height"],"fit-content"),padding:getIn(theme,["UTDatePicker","toolbar","padding"],"8px 12px 8px 12px"),borderRadius:getIn(theme,["UTDatePicker","toolbar","borderRadious"],"4px"),margin:getIn(theme,["UTDatePicker","toolbar","margin"],"16px 16px 0px 16px"),backgroundColor:getIn(theme,["UTDatePicker","toolbar","backgroundColor"],Colors.gray3)}},MuiPickersToolbarButton:{toolbarBtn:{alignSelf:getIn(theme,["UTDatePicker","toolbar","alignSelf"],"center"),"&:not(:first-child)":{display:getIn(theme,["UTDatePicker","toolbar","displayDate"],"none")}}},MuiPickersToolbarText:{toolbarTxt:{fontWeight:getIn(theme,["UTDatePicker","toolbar","text","fontWeight"],"500"),fontSize:getIn(theme,["UTDatePicker","toolbar","text","fontSize"],"16px"),lineHeight:getIn(theme,["UTDatePicker","toolbar","text","lineHeight"],"22px"),color:getIn(theme,["UTDatePicker","toolbar","text","textColor"],Colors.black)},toolbarBtnSelected:{color:getIn(theme,["UTDatePicker","toolbar","text","textColor"],Colors.black)}},MuiPickersYear:{yearSelected:{color:getIn(theme,["UTDatePicker","toolbar","text","textColor"],Colors.black),marginLeft:getIn(theme,["UTDatePicker","year","marginLeft"],"10px")},root:{color:getIn(theme,["UTDatePicker","year","color"],Colors.black),marginLeft:getIn(theme,["UTDatePicker","year","marginLeft"],"10px")}},MuiPickersCalendarHeader:{switchHeader:{color:getIn(theme,["UTDatePicker","switchHeader","color"],Colors.gray4),textTransform:withImportant((null==theme||null===(_theme$UTDatePicker=theme.UTDatePicker)||void 0===_theme$UTDatePicker||null===(_theme$UTDatePicker=_theme$UTDatePicker.switchHeader)||void 0===_theme$UTDatePicker?void 0:_theme$UTDatePicker.textTransform)||"capitalize"),fontWeight:withImportant((null==theme||null===(_theme$UTDatePicker2=theme.UTDatePicker)||void 0===_theme$UTDatePicker2||null===(_theme$UTDatePicker2=_theme$UTDatePicker2.switchHeader)||void 0===_theme$UTDatePicker2?void 0:_theme$UTDatePicker2.fontWeight)||500),margin:getIn(theme,["UTDatePicker","switchHeader","margin"],"8px 17px"),padding:getIn(theme,["UTDatePicker","switchHeader","padding"],"15px 0 0")},dayLabel:{color:getIn(theme,["UTDatePicker","dayLabel","color"],Colors.gray4),width:getIn(theme,["UTDatePicker","dayLabel","width"],"33px"),fontWeight:withImportant((null==theme||null===(_theme$UTDatePicker3=theme.UTDatePicker)||void 0===_theme$UTDatePicker3||null===(_theme$UTDatePicker3=_theme$UTDatePicker3.dayLabel)||void 0===_theme$UTDatePicker3?void 0:_theme$UTDatePicker3.fontWeight)||500),fontFamily:getIn(theme,["UTDatePicker","dayLabel","fontFamily"],getIn(theme,["Fonts","fontFamily"]))},daysHeader:{marginTop:getIn(theme,["UTDatePicker","daysHeader","marginTop"],"15px")}},MuiOutlinedInput:{root:{fontFamily:getIn(theme,["UTDatePicker","outlinedInput","root","fontFamily"],getIn(theme,["Fonts","fontFamily"])),backgroundColor:getIn(theme,["UTDatePicker","outlinedInput","root","backgroundColor"],Colors.white),fontWeight:getIn(theme,["UTDatePicker","outlinedInput","root","fontWeight"],500),fontSize:getIn(theme,["UTDatePicker","outlinedInput","root","fontSize"],"14px"),borderRadius:getIn(theme,["UTDatePicker","outlinedInput","root","borderRadius"],"30px"),height:getIn(theme,["UTDatePicker","outlinedInput","root","height"],"40px"),width:getIn(theme,["UTDatePicker","outlinedInput","root","width"],"250px"),color:getIn(theme,["UTDatePicker","outlinedInput","root","color"],Colors.gray4),paddingLeft:getIn(theme,["UTDatePicker","outlinedInput","root","paddingLeft"],"6px"),paddingRight:withImportant((null==theme||null===(_theme$UTDatePicker4=theme.UTDatePicker)||void 0===_theme$UTDatePicker4||null===(_theme$UTDatePicker4=_theme$UTDatePicker4.outlinedInput)||void 0===_theme$UTDatePicker4||null===(_theme$UTDatePicker4=_theme$UTDatePicker4.root)||void 0===_theme$UTDatePicker4?void 0:_theme$UTDatePicker4.paddingRight)||"12px"),"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{borderColor:getIn(theme,["UTDatePicker","outlinedInput","notchedOutline","hover","borderColor"],Colors.gray3)},"&$focused $notchedOutline":{borderColor:getIn(theme,["UTDatePicker","outlinedInput","notchedOutline","focused","borderColor"],Colors.gray3),borderWidth:getIn(theme,["UTDatePicker","outlinedInput","notchedOutline","focused","borderWidth"],1)}},notchedOutline:{borderColor:getIn(theme,["UTDatePicker","outlinedInput","notchedOutline","borderColor"],Colors.gray3)}},MuiInput:{input:{border:getIn(theme,["UTDatePicker","standardInput","input","border"]),borderRadius:getIn(theme,["UTDatePicker","input","borderRadius"]),fontFamily:getIn(theme,["UTDatePicker","standardInput","input","fontFamily"],getIn(theme,["Fonts","fontFamily"])),fontSize:getIn(theme,["UTDatePicker","standardInput","input","fontSize"],getIn(theme,["Fonts","medium"],14)),color:getIn(theme,["UTDatePicker","standardInput","input","color"]),padding:getIn(theme,["UTDatePicker","standardInput","input","padding"])},underline:{"&:hover:not($disabled):not($focused):not($error):before":{borderBottom:getIn(theme,["UTDatePicker","standardInput","underline","hover","borderBottom"],"1px solid ".concat(Colors.gray))},"&:hover:not($disabled):before":{borderBottom:getIn(theme,["UTDatePicker","standardInput","underline","hover","borderBottom"],"1px solid ".concat(Colors.gray))},"&$disabled:before":{borderBottom:getIn(theme,["UTDatePicker","standardInput","underline","disabled","borderBottom"],"1px solid ".concat(Colors.gray))},"&:before":{borderBottom:getIn(theme,["UTDatePicker","standardInput","underline","unfocused","borderBottom"],"1px solid ".concat(Colors.gray))},"&$focused:after":{borderBottom:getIn(theme,["UTDatePicker","standardInput","underline","focused","borderBottom"],"2px solid ".concat(Colors.primary))},"&:after":{borderBottom:getIn(theme,["UTDatePicker","standardInput","underline","base","borderBottom"],"2px solid ".concat(Colors.primary))},"&$error:after":{borderBottom:"2px solid ".concat(theme.Palette.error["05"]),borderBottomColor:theme.Palette.error["05"]}}},MuiFormLabel:{root:{color:getIn(theme,["UTDatePicker","standardInput","formLabel","color"]),"&$error":{color:getIn(theme,["UTDatePicker","standardInput","formLabel","errorColor"],theme.Palette.error["05"])},"&$focused":{color:getIn(theme,["UTDatePicker","standardInput","formLabel","focusedColor"],Colors.primary),"&$error":{color:getIn(theme,["UTDatePicker","standardInput","formLabel","focusedErrorColor"],theme.Palette.error["05"])}},fontFamily:getIn(theme,["Fonts","fontFamily"]),fontSize:getIn(theme,["UTDatePicker","standardInput","fontSize"],getIn(theme,["Fonts","medium"],14)),fontWeight:getIn(theme,["UTDatePicker","standardInput","formLabel","fontWeight"])}},MuiPopover:{paper:{borderRadius:getIn(theme,["UTDatePicker","calendarPaper","borderRadius"],"10px"),boxShadow:getIn(theme,["UTDatePicker","calendarPaper","boxShadow"],"none"),border:getIn(theme,["UTDatePicker","calendarPaper","border"],"1px solid ".concat(Colors.gray3)),color:getIn(theme,["UTDatePicker","calendarPaper","color"],Colors.gray3)}},MuiIconButton:{root:{padding:getIn(theme,["UTDatePicker","openerIcon","padding"],"5px")}},MuiPickersBasePicker:{pickerView:{minWidth:getIn(theme,["UTDatePicker","pickerView","minWidth"],"290px")}},MuiFormHelperText:{root:{fontSize:getIn(theme,["UTDatePicker","helperText","fontSize"],12),color:theme.Palette.error["05"]},contained:{marginLeft:0}}}})};
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+import { withImportant } from '../../../../utils/classesUtils';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    openerIcon: {
+      fill: getIn(theme, ['UTDatePicker', 'openerIcon', 'fill'], Colors.orangeIcon)
+    },
+    disabledOpenerIcon: {
+      fill: getIn(theme, ['UTDatePicker', 'disabledOpenerIcon', 'fill'], Colors.gray)
+    },
+    day: {
+      fontFamily: getIn(theme, ['UTDatePicker', 'day', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily'])),
+      fontSize: getIn(theme, ['UTDatePicker', 'day', 'fontSize'], '14px'),
+      height: getIn(theme, ['UTDatePicker', 'day', 'height'], '34px'),
+      margin: getIn(theme, ['UTDatePicker', 'day', 'margin'], '0 1px'),
+      fontWeight: getIn(theme, ['UTDatePicker', 'day', 'fontWeight'], 500),
+      width: getIn(theme, ['UTDatePicker', 'day', 'width'], '35px'),
+      color: getIn(theme, ['UTDatePicker', 'day', 'color'], Colors.gray4)
+    },
+    otherMonthDay: {
+      visibility: getIn(theme, ['UTDatePicker', 'otherMonthDay', 'visibility'], 'hidden')
+    },
+    selectedDay: {
+      backgroundColor: getIn(theme, ['UTDatePicker', 'selectedDay', 'backgroundColor'], Colors.lightBlue),
+      '&:hover': {
+        backgroundColor: getIn(theme, ['UTDatePicker', 'selectedDay', 'backgroundColor'], Colors.blue)
+      },
+      color: getIn(theme, ['UTDatePicker', 'selectedDay', 'color'], Colors.white),
+      padding: getIn(theme, ['UTDatePicker', 'selectedDay', 'padding'], '1px 1px'),
+      backgroundClip: getIn(theme, ['UTDatePicker', 'selectedDay', 'backgroundClip'], 'contentBox')
+    },
+    upperTitle: {
+      color: getIn(theme, ['UTDatePicker', 'upperTitle', 'color'], Colors.black),
+      fontWeight: getIn(theme, ['UTDatePicker', 'upperTitle', 'fontWeight']),
+      marginBottom: getIn(theme, ['UTDatePicker', 'upperTitle', 'marginBottom'])
+    },
+    errorLabel: {
+      marginTop: 4,
+      textAlign: 'left'
+    }
+  };
+};
+export const materialTheme = theme => {
+  var _theme$UTDatePicker, _theme$UTDatePicker2, _theme$UTDatePicker3, _theme$UTDatePicker4;
+  return createTheme({
+    typography: {
+      fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+    },
+    overrides: {
+      MuiTypography: {
+        body1: {
+          fontFamily: getIn(theme, ['UTDatePicker', 'input', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily']))
+        }
+      },
+      MuiToolbar: {
+        regular: {
+          minHeight: getIn(theme, ['UTDatePicker', 'toolbar', 'minHeight'], '0px !important')
+        }
+      },
+      MuiPickersToolbar: {
+        toolbar: {
+          height: getIn(theme, ['UTDatePicker', 'toolbar', 'height'], 'fit-content'),
+          padding: getIn(theme, ['UTDatePicker', 'toolbar', 'padding'], '8px 12px 8px 12px'),
+          borderRadius: getIn(theme, ['UTDatePicker', 'toolbar', 'borderRadious'], '4px'),
+          margin: getIn(theme, ['UTDatePicker', 'toolbar', 'margin'], '16px 16px 0px 16px'),
+          backgroundColor: getIn(theme, ['UTDatePicker', 'toolbar', 'backgroundColor'], Colors.gray3)
+        }
+      },
+      MuiPickersToolbarButton: {
+        toolbarBtn: {
+          alignSelf: getIn(theme, ['UTDatePicker', 'toolbar', 'alignSelf'], 'center'),
+          '&:not(:first-child)': {
+            display: getIn(theme, ['UTDatePicker', 'toolbar', 'displayDate'], 'none')
+          }
+        }
+      },
+      MuiPickersToolbarText: {
+        toolbarTxt: {
+          fontWeight: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'fontWeight'], '500'),
+          fontSize: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'fontSize'], '16px'),
+          lineHeight: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'lineHeight'], '22px'),
+          color: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], Colors.black)
+        },
+        toolbarBtnSelected: {
+          color: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], Colors.black)
+        }
+      },
+      MuiPickersYear: {
+        yearSelected: {
+          color: getIn(theme, ['UTDatePicker', 'toolbar', 'text', 'textColor'], Colors.black),
+          marginLeft: getIn(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
+        },
+        root: {
+          color: getIn(theme, ['UTDatePicker', 'year', 'color'], Colors.black),
+          marginLeft: getIn(theme, ['UTDatePicker', 'year', 'marginLeft'], '10px')
+        }
+      },
+      MuiPickersCalendarHeader: {
+        switchHeader: {
+          color: getIn(theme, ['UTDatePicker', 'switchHeader', 'color'], Colors.gray4),
+          textTransform: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker = theme.UTDatePicker) === null || _theme$UTDatePicker === void 0 || (_theme$UTDatePicker = _theme$UTDatePicker.switchHeader) === null || _theme$UTDatePicker === void 0 ? void 0 : _theme$UTDatePicker.textTransform) || 'capitalize'),
+          fontWeight: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker2 = theme.UTDatePicker) === null || _theme$UTDatePicker2 === void 0 || (_theme$UTDatePicker2 = _theme$UTDatePicker2.switchHeader) === null || _theme$UTDatePicker2 === void 0 ? void 0 : _theme$UTDatePicker2.fontWeight) || 500),
+          margin: getIn(theme, ['UTDatePicker', 'switchHeader', 'margin'], '8px 17px'),
+          padding: getIn(theme, ['UTDatePicker', 'switchHeader', 'padding'], '15px 0 0')
+        },
+        dayLabel: {
+          color: getIn(theme, ['UTDatePicker', 'dayLabel', 'color'], Colors.gray4),
+          width: getIn(theme, ['UTDatePicker', 'dayLabel', 'width'], '33px'),
+          fontWeight: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker3 = theme.UTDatePicker) === null || _theme$UTDatePicker3 === void 0 || (_theme$UTDatePicker3 = _theme$UTDatePicker3.dayLabel) === null || _theme$UTDatePicker3 === void 0 ? void 0 : _theme$UTDatePicker3.fontWeight) || 500),
+          fontFamily: getIn(theme, ['UTDatePicker', 'dayLabel', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily']))
+        },
+        daysHeader: {
+          marginTop: getIn(theme, ['UTDatePicker', 'daysHeader', 'marginTop'], '15px')
+        }
+      },
+      MuiOutlinedInput: {
+        root: {
+          fontFamily: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily'])),
+          backgroundColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'backgroundColor'], Colors.white),
+          fontWeight: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontWeight'], 500),
+          fontSize: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'fontSize'], '14px'),
+          borderRadius: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'borderRadius'], '30px'),
+          height: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'height'], '40px'),
+          width: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'width'], '250px'),
+          color: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'color'], Colors.gray4),
+          paddingLeft: getIn(theme, ['UTDatePicker', 'outlinedInput', 'root', 'paddingLeft'], '6px'),
+          paddingRight: withImportant((theme === null || theme === void 0 || (_theme$UTDatePicker4 = theme.UTDatePicker) === null || _theme$UTDatePicker4 === void 0 || (_theme$UTDatePicker4 = _theme$UTDatePicker4.outlinedInput) === null || _theme$UTDatePicker4 === void 0 || (_theme$UTDatePicker4 = _theme$UTDatePicker4.root) === null || _theme$UTDatePicker4 === void 0 ? void 0 : _theme$UTDatePicker4.paddingRight) || '12px'),
+          '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+            borderColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'hover', 'borderColor'], Colors.gray3)
+          },
+          '&$focused $notchedOutline': {
+            borderColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderColor'], Colors.gray3),
+            borderWidth: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'focused', 'borderWidth'], 1)
+          }
+        },
+        notchedOutline: {
+          borderColor: getIn(theme, ['UTDatePicker', 'outlinedInput', 'notchedOutline', 'borderColor'], Colors.gray3)
+        }
+      },
+      MuiInput: {
+        input: {
+          border: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'border']),
+          borderRadius: getIn(theme, ['UTDatePicker', 'input', 'borderRadius']),
+          fontFamily: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'fontFamily'], getIn(theme, ['Fonts', 'fontFamily'])),
+          fontSize: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          color: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'color']),
+          padding: getIn(theme, ['UTDatePicker', 'standardInput', 'input', 'padding'])
+        },
+        underline: {
+          '&:hover:not($disabled):not($focused):not($error):before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:hover:not($disabled):before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$disabled:before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&:before': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(Colors.gray))
+          },
+          '&$focused:after': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(Colors.primary))
+          },
+          '&:after': {
+            borderBottom: getIn(theme, ['UTDatePicker', 'standardInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(Colors.primary))
+          },
+          '&$error:after': {
+            borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+            borderBottomColor: theme.Palette.error['05']
+          }
+        }
+      },
+      MuiFormLabel: {
+        root: {
+          color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'color']),
+          '&$error': {
+            color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'errorColor'], theme.Palette.error['05'])
+          },
+          '&$focused': {
+            color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedColor'], Colors.primary),
+            '&$error': {
+              color: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'focusedErrorColor'], theme.Palette.error['05'])
+            }
+          },
+          fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+          fontSize: getIn(theme, ['UTDatePicker', 'standardInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+          fontWeight: getIn(theme, ['UTDatePicker', 'standardInput', 'formLabel', 'fontWeight'])
+        }
+      },
+      MuiPopover: {
+        paper: {
+          borderRadius: getIn(theme, ['UTDatePicker', 'calendarPaper', 'borderRadius'], '10px'),
+          boxShadow: getIn(theme, ['UTDatePicker', 'calendarPaper', 'boxShadow'], 'none'),
+          border: getIn(theme, ['UTDatePicker', 'calendarPaper', 'border'], "1px solid ".concat(Colors.gray3)),
+          color: getIn(theme, ['UTDatePicker', 'calendarPaper', 'color'], Colors.gray3)
+        }
+      },
+      MuiIconButton: {
+        root: {
+          padding: getIn(theme, ['UTDatePicker', 'openerIcon', 'padding'], '5px')
+        }
+      },
+      MuiPickersBasePicker: {
+        pickerView: {
+          minWidth: getIn(theme, ['UTDatePicker', 'pickerView', 'minWidth'], '290px')
+        }
+      },
+      MuiFormHelperText: {
+        root: {
+          fontSize: getIn(theme, ['UTDatePicker', 'helperText', 'fontSize'], 12),
+          color: theme.Palette.error['05']
+        },
+        contained: {
+          marginLeft: 0
+        }
+      }
+    }
+  });
+};

package/dist/esm/components/UTDatePicker/versions/V0/types.js

@@ -1 +1,11 @@
-import{string,shape}from"prop-types";export const classesPropTypes=shape({content:string,container:string,root:string,closeButton:string,mainTitle:string,closeIcon:string,warning:string,dialogActions:string});
+import { string, shape } from 'prop-types';
+export const classesPropTypes = shape({
+  content: string,
+  container: string,
+  root: string,
+  closeButton: string,
+  mainTitle: string,
+  closeIcon: string,
+  warning: string,
+  dialogActions: string
+});

package/dist/esm/components/UTDatePicker/versions/V0/utils.js

@@ -1 +1,29 @@
-import dayjs from"dayjs";export const isSelected=(date,selectedDate)=>selectedDate&&date.isSame(selectedDate,"day");export const dateMatchesFormat=(date,targetFormat)=>dayjs(date,targetFormat).format(targetFormat)===date;export const getPastMonthDates=()=>{const date=new Date,currentYear=date.getFullYear(),currentMonth=date.getMonth();return{minDate:new Date(currentYear,currentMonth-1,1),maxDate:new Date(currentYear,currentMonth,0)}};export const getMaxDate=()=>({maxDate:new Date});export const getFinalDate=_ref=>{let{date:date,maxDate:maxDate,minDate:minDate}=_ref;const formattedDate=dayjs(date);return maxDate&&null!=formattedDate&&formattedDate.isAfter(maxDate)?dayjs(maxDate):minDate&&null!=formattedDate&&formattedDate.isBefore(minDate)?dayjs(minDate):formattedDate};
+import dayjs from 'dayjs';
+export const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
+export const dateMatchesFormat = (date, targetFormat) => dayjs(date, targetFormat).format(targetFormat) === date;
+export const getPastMonthDates = () => {
+  const date = new Date();
+  const currentYear = date.getFullYear();
+  const currentMonth = date.getMonth();
+  return {
+    minDate: new Date(currentYear, currentMonth - 1, 1),
+    maxDate: new Date(currentYear, currentMonth, 0)
+  };
+};
+export const getMaxDate = () => {
+  const currentDate = new Date();
+  return {
+    maxDate: currentDate
+  };
+};
+export const getFinalDate = _ref => {
+  let {
+    date,
+    maxDate,
+    minDate
+  } = _ref;
+  const formattedDate = dayjs(date);
+  if (maxDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isAfter(maxDate)) return dayjs(maxDate);
+  if (minDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isBefore(minDate)) return dayjs(minDate);
+  return formattedDate;
+};

package/dist/esm/components/UTDatePicker/versions/V1/README.md

@@ -0,0 +1,89 @@
+# UTDatePicker V1
+
+Selector de fecha con input custom y calendario popup. Implementa los 5 estados visuales del design system mediante dos variantes de apariencia (`select` y `picker`).
+
+---
+
+## Diferencias con V0
+
+| Aspecto | V0 | V1 |
+|---------|----|----|
+| Input | `KeyboardDatePicker` de MUI Pickers | Input custom con estados visuales |
+| Calendario | MUI Pickers (popup nativo) | Grid custom con `dayjs` |
+| Estilos | `materialTheme` overrides | CSS Modules + design tokens |
+| Estado visual | Sin distinción de estados | 5 estados: default, selected, focus, error, readOnly |
+| Prop nueva | — | `readOnly`, `variant` |
+
+---
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `classNames` | `object` | — | Clases CSS para sobreescribir estilos internos |
+| `CustomIcon` | `elementType` | — | Reemplaza el ícono de calendario |
+| `disabled` | `bool` | — | Deshabilita toda interacción |
+| `error` | `string` | `''` | Mensaje de error externo |
+| `helpText` | `string` | — | Texto de ayuda debajo del input |
+| `onChange` | `func` | `() => {}` | Callback al confirmar fecha. Recibe string `'DD/MM/YYYY'` |
+| `placeholder` | `string` | `'DD/MM/AAAA'` | Texto cuando no hay fecha seleccionada |
+| `popoverProps` | `object` | — | Props adicionales para el `Popover` de MUI Core |
+| `range` | `{ minDate: string, maxDate: string }` | — | Limita el rango de fechas seleccionables. Formato `'DD/MM/YYYY'` |
+| `readOnly` | `bool` | `false` | Muestra solo texto sin chrome ni interacción |
+| `required` | `bool` | — | Marca el título como requerido |
+| `size` | `'sm' \| 'md'` | `'sm'` | Tamaño del input |
+| `title` | `string` | — | Etiqueta superior del campo |
+| `value` | `string` | `''` | Fecha seleccionada en formato `'DD/MM/YYYY'` |
+| `variant` | `'select' \| 'picker'` | `'select'` | Apariencia del campo. `select` muestra borde estándar con mensaje de error debajo; `picker` usa fondos de color por estado sin borde ni mensaje |
+
+---
+
+## Estados visuales
+
+### `variant='select'` (default)
+
+| Estado | Condición | Fondo | Borde | Íconos |
+|--------|-----------|-------|-------|--------|
+| **default** | Sin valor, sin foco, sin error | blanco | `1px` gris | calendario (derecha) |
+| **selected** | Tiene fecha seleccionada | blanco | `1px` gris | X/clear (derecha) |
+| **focus** | Calendario abierto | blanco | `2px` azul | X (si hay valor) + calendario (derecha) |
+| **error** | `error` prop o fecha inválida | rojo claro | `1px` rojo | alerta (izquierda) + calendario rojo + mensaje debajo |
+| **readOnly/disabled** | `readOnly` o `disabled` | — | ninguno | sin íconos |
+
+### `variant='picker'`
+
+| Estado | Condición | Fondo | Borde | Íconos |
+|--------|-----------|-------|-------|--------|
+| **default** | Sin valor, sin foco, sin error | transparente | ninguno | calendario (derecha) |
+| **selected** | Tiene fecha seleccionada, sin foco | azul claro | ninguno | X/clear (derecha) |
+| **focus** | Calendario abierto, sin error | blanco | `2px` azul | X (si hay valor) + calendario (derecha) |
+| **error** | `error` prop o fecha inválida | rojo claro | ninguno | alerta (izquierda) + calendario rojo |
+| **readOnly/disabled** | `readOnly` o `disabled` | transparente | ninguno | sin íconos |
+
+Prioridad cuando hay múltiples condiciones activas: `readOnly → disabled → error → focus → selected → default`
+
+---
+
+## Ejemplos de uso
+
+```jsx
+// Básico
+<UTDatePicker version="V1" onChange={setValue} value={value} />
+
+// Variante picker
+<UTDatePicker version="V1" onChange={setValue} value={value} variant="picker" />
+
+// Con rango de fechas
+<UTDatePicker
+  version="V1"
+  onChange={setValue}
+  value={value}
+  range={{ minDate: '01/01/2024', maxDate: '31/12/2024' }}
+/>
+
+// Solo lectura con valor
+<UTDatePicker version="V1" onChange={() => {}} value="15/06/2024" readOnly />
+
+// Con error externo
+<UTDatePicker version="V1" onChange={setValue} value={value} error="La fecha ingresada no es válida." />
+```

package/dist/esm/components/UTDatePicker/versions/V1/components/Calendar/index.js

@@ -1 +1,89 @@
-import React,{useState,useEffect}from"react";import dayjs from"dayjs";import"dayjs/locale/es";import{func,object}from"prop-types";import{TEST_IDS}from"../../../../../../constants/testIds";import UTButton from"../../../../../UTButton";import UTLabel from"../../../../../UTLabel";import Day from"../Day";import{WEEKDAYS_LABELS,MONTH_YEAR_FORMAT,OUTPUT_LABEL_MASK}from"../../constants";import styles from"../../styles.module.scss";import{getWeeks}from"../../utils";const{UTDatePickerV1TestID:UTDatePickerV1TestID}=TEST_IDS,Calendar=_ref=>{let{maxDate:maxDate,minDate:minDate,onDaySelect:onDaySelect,pickedDate:pickedDate}=_ref;const[currentMonth,setCurrentMonth]=useState(pickedDate||dayjs());useEffect(()=>{null!=pickedDate&&pickedDate.isValid()&&setCurrentMonth(pickedDate)},[pickedDate]);const weeks=getWeeks(currentMonth),isDisabled=date=>!(!minDate||!date.isBefore(dayjs(minDate,OUTPUT_LABEL_MASK),"day"))||!(!maxDate||!date.isAfter(dayjs(maxDate,OUTPUT_LABEL_MASK),"day"));return React.createElement("div",{className:styles.calendarContainer,"data-testid":UTDatePickerV1TestID.calendar},React.createElement("div",{className:styles.nav},React.createElement(UTButton,{colorTheme:"secondary",dataTestId:UTDatePickerV1TestID.calendarPrevBtn,Icon:"IconChevronLeft",onClick:()=>setCurrentMonth(prev=>prev.subtract(1,"month")),size:"small",variant:"text"}),React.createElement(UTLabel,{align:"center",className:styles.navLabel,dataTestId:UTDatePickerV1TestID.calendarMonthYear,variant:"body",weight:"medium"},currentMonth.locale("es").format(MONTH_YEAR_FORMAT)),React.createElement(UTButton,{colorTheme:"secondary",dataTestId:UTDatePickerV1TestID.calendarNextBtn,Icon:"IconChevronRight",onClick:()=>setCurrentMonth(prev=>prev.add(1,"month")),size:"small",variant:"text"})),React.createElement("div",{className:styles.month},React.createElement("div",{className:styles.week},WEEKDAYS_LABELS.map(label=>React.createElement(UTLabel,{className:"".concat(styles.dayCell," ").concat(styles.dayHeader),key:label,variant:"body",weight:"medium"},label))),weeks.map(week=>React.createElement("div",{className:styles.week,key:week[0].format("YYYY-MM-DD")},week.map(date=>{const dayInCurrentMonth=date.month()===currentMonth.month();return React.createElement(Day,{date:date,dayInCurrentMonth:dayInCurrentMonth,isDisabled:isDisabled(date),key:date.format("YYYY-MM-DD"),onClick:onDaySelect,pickedDate:pickedDate})})))))};Calendar.propTypes={maxDate:object,minDate:object,onDaySelect:func,pickedDate:object};export default Calendar;
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import { func, object } from 'prop-types';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import UTButton from '../../../../../UTButton';
+import UTLabel from '../../../../../UTLabel';
+import Day from '../Day';
+import { WEEKDAYS_LABELS, MONTH_YEAR_FORMAT, OUTPUT_LABEL_MASK } from '../../constants';
+import styles from '../../styles.module.scss';
+import { getWeeks } from '../../utils';
+const {
+  UTDatePickerV1TestID
+} = TEST_IDS;
+const Calendar = _ref => {
+  let {
+    maxDate,
+    minDate,
+    onDaySelect,
+    pickedDate
+  } = _ref;
+  const [currentMonth, setCurrentMonth] = useState(pickedDate || dayjs());
+  useEffect(() => {
+    if (pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setCurrentMonth(pickedDate);
+  }, [pickedDate]);
+  const weeks = getWeeks(currentMonth);
+  const handlePrevMonth = () => setCurrentMonth(prev => prev.subtract(1, 'month'));
+  const handleNextMonth = () => setCurrentMonth(prev => prev.add(1, 'month'));
+  const isDisabled = date => {
+    if (minDate && date.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK), 'day')) return true;
+    if (maxDate && date.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK), 'day')) return true;
+    return false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarContainer,
+    "data-testid": UTDatePickerV1TestID.calendar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.nav
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarPrevBtn,
+    Icon: "IconChevronLeft",
+    onClick: handlePrevMonth,
+    size: "small",
+    variant: "text"
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    className: styles.navLabel,
+    dataTestId: UTDatePickerV1TestID.calendarMonthYear,
+    variant: "body",
+    weight: "medium"
+  }, currentMonth.locale('es').format(MONTH_YEAR_FORMAT)), /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarNextBtn,
+    Icon: "IconChevronRight",
+    onClick: handleNextMonth,
+    size: "small",
+    variant: "text"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.month
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.week
+  }, WEEKDAYS_LABELS.map(label => /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.dayCell, " ").concat(styles.dayHeader),
+    key: label,
+    variant: "body",
+    weight: "medium"
+  }, label))), weeks.map(week => /*#__PURE__*/React.createElement("div", {
+    className: styles.week,
+    key: week[0].format('YYYY-MM-DD')
+  }, week.map(date => {
+    const dayInCurrentMonth = date.month() === currentMonth.month();
+    return /*#__PURE__*/React.createElement(Day, {
+      date: date,
+      dayInCurrentMonth: dayInCurrentMonth,
+      isDisabled: isDisabled(date),
+      key: date.format('YYYY-MM-DD'),
+      onClick: onDaySelect,
+      pickedDate: pickedDate
+    });
+  })))));
+};
+Calendar.propTypes = {
+  maxDate: object,
+  minDate: object,
+  onDaySelect: func,
+  pickedDate: object
+};
+export default Calendar;

package/dist/esm/components/UTDatePicker/versions/V1/components/Day/index.js

@@ -1 +1,38 @@
-import React,{memo}from"react";import dayjs from"dayjs";import{bool,func,object}from"prop-types";import UTButton from"../../../../../UTButton";import{isSelected}from"../../utils";import{DAY_NUMBER_FORMAT}from"../../constants";import styles from"../../styles.module.scss";const Day=_ref=>{let{date:date,dayInCurrentMonth:dayInCurrentMonth,isDisabled:isDisabled,onClick:onClick,pickedDate:pickedDate}=_ref;const selected=isSelected(date,pickedDate),rootClass=[styles.dayCell,selected&&styles.daySelected,!dayInCurrentMonth&&styles.otherMonthDay].filter(Boolean).join(" ");return React.createElement(UTButton,{classNames:{root:rootClass},colorTheme:selected?"negative":void 0,disabled:isDisabled&&dayInCurrentMonth,onClick:()=>{isDisabled||onClick(date)},size:"medium",variant:"text"},dayjs(date).format(DAY_NUMBER_FORMAT))};Day.propTypes={date:object,dayInCurrentMonth:bool,isDisabled:bool,onClick:func,pickedDate:object};export default memo(Day);
+import React, { memo } from 'react';
+import dayjs from 'dayjs';
+import { bool, func, object } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import { isSelected } from '../../utils';
+import { DAY_NUMBER_FORMAT } from '../../constants';
+import styles from '../../styles.module.scss';
+const Day = _ref => {
+  let {
+    date,
+    dayInCurrentMonth,
+    isDisabled,
+    onClick,
+    pickedDate
+  } = _ref;
+  const selected = isSelected(date, pickedDate);
+  const rootClass = [styles.dayCell, selected && styles.daySelected, !dayInCurrentMonth && styles.otherMonthDay].filter(Boolean).join(' ');
+  return /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: rootClass
+    },
+    colorTheme: selected ? 'negative' : undefined,
+    disabled: isDisabled && dayInCurrentMonth,
+    onClick: () => {
+      if (!isDisabled) onClick(date);
+    },
+    size: "medium",
+    variant: "text"
+  }, dayjs(date).format(DAY_NUMBER_FORMAT));
+};
+Day.propTypes = {
+  date: object,
+  dayInCurrentMonth: bool,
+  isDisabled: bool,
+  onClick: func,
+  pickedDate: object
+};
+export default /*#__PURE__*/memo(Day);

package/dist/esm/components/UTDatePicker/versions/V1/constants.js

@@ -1 +1,10 @@
-export const OUTPUT_LABEL_MASK="DD/MM/YYYY";export const WEEKDAYS_LABELS=["Dom","Lun","Mar","Mie","Jue","Vie","Sab"];export const MONTH_YEAR_FORMAT="MMMM YYYY";export const DAY_NUMBER_FORMAT="DD";export const DEFAULT_PLACEHOLDER="DD/MM/AAAA";export const TYPING_ERROR_MESSAGE="Fecha inválida";export const DEFAULT_PROPS={variant:"select",size:"sm"};
+export const OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+export const WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+export const MONTH_YEAR_FORMAT = 'MMMM YYYY';
+export const DAY_NUMBER_FORMAT = 'DD';
+export const DEFAULT_PLACEHOLDER = 'DD/MM/AAAA';
+export const TYPING_ERROR_MESSAGE = 'Fecha inválida';
+export const DEFAULT_PROPS = {
+  variant: 'select',
+  size: 'sm'
+};