@widergy/energy-ui 3.172.3 → 3.173.0

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

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

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

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.classesPropTypes=void 0;var _propTypes=require("prop-types");const classesPropTypes=exports.classesPropTypes=(0,_propTypes.shape)({content:_propTypes.string,container:_propTypes.string,root:_propTypes.string,closeButton:_propTypes.string,mainTitle:_propTypes.string,closeIcon:_propTypes.string,warning:_propTypes.string,dialogActions:_propTypes.string});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.classesPropTypes = void 0;
+var _propTypes = require("prop-types");
+const classesPropTypes = exports.classesPropTypes = (0, _propTypes.shape)({
+  content: _propTypes.string,
+  container: _propTypes.string,
+  root: _propTypes.string,
+  closeButton: _propTypes.string,
+  mainTitle: _propTypes.string,
+  closeIcon: _propTypes.string,
+  warning: _propTypes.string,
+  dialogActions: _propTypes.string
+});

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

@@ -1 +1,41 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isSelected=exports.getPastMonthDates=exports.getMaxDate=exports.getFinalDate=exports.dateMatchesFormat=void 0;var _dayjs=_interopRequireDefault(require("dayjs"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const isSelected=(date,selectedDate)=>selectedDate&&date.isSame(selectedDate,"day");exports.isSelected=isSelected;const dateMatchesFormat=(date,targetFormat)=>(0,_dayjs.default)(date,targetFormat).format(targetFormat)===date;exports.dateMatchesFormat=dateMatchesFormat;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)}};exports.getPastMonthDates=getPastMonthDates;const getMaxDate=()=>({maxDate:new Date});exports.getMaxDate=getMaxDate;const getFinalDate=_ref=>{let{date:date,maxDate:maxDate,minDate:minDate}=_ref;const formattedDate=(0,_dayjs.default)(date);return maxDate&&null!=formattedDate&&formattedDate.isAfter(maxDate)?(0,_dayjs.default)(maxDate):minDate&&null!=formattedDate&&formattedDate.isBefore(minDate)?(0,_dayjs.default)(minDate):formattedDate};exports.getFinalDate=getFinalDate;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelected = exports.getPastMonthDates = exports.getMaxDate = exports.getFinalDate = exports.dateMatchesFormat = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
+exports.isSelected = isSelected;
+const dateMatchesFormat = (date, targetFormat) => (0, _dayjs.default)(date, targetFormat).format(targetFormat) === date;
+exports.dateMatchesFormat = dateMatchesFormat;
+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)
+  };
+};
+exports.getPastMonthDates = getPastMonthDates;
+const getMaxDate = () => {
+  const currentDate = new Date();
+  return {
+    maxDate: currentDate
+  };
+};
+exports.getMaxDate = getMaxDate;
+const getFinalDate = _ref => {
+  let {
+    date,
+    maxDate,
+    minDate
+  } = _ref;
+  const formattedDate = (0, _dayjs.default)(date);
+  if (maxDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isAfter(maxDate)) return (0, _dayjs.default)(maxDate);
+  if (minDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isBefore(minDate)) return (0, _dayjs.default)(minDate);
+  return formattedDate;
+};
+exports.getFinalDate = getFinalDate;

package/dist/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/components/UTDatePicker/versions/V1/components/Calendar/index.js

@@ -1 +1,97 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_dayjs=_interopRequireDefault(require("dayjs"));require("dayjs/locale/es");var _propTypes=require("prop-types"),_testIds=require("../../../../../../constants/testIds"),_UTButton=_interopRequireDefault(require("../../../../../UTButton")),_UTLabel=_interopRequireDefault(require("../../../../../UTLabel")),_Day=_interopRequireDefault(require("../Day")),_constants=require("../../constants"),_stylesModule=_interopRequireDefault(require("../../styles.module.scss")),_utils=require("../../utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const{UTDatePickerV1TestID:UTDatePickerV1TestID}=_testIds.TEST_IDS,Calendar=_ref=>{let{maxDate:maxDate,minDate:minDate,onDaySelect:onDaySelect,pickedDate:pickedDate}=_ref;const[currentMonth,setCurrentMonth]=(0,_react.useState)(pickedDate||(0,_dayjs.default)());(0,_react.useEffect)(()=>{null!=pickedDate&&pickedDate.isValid()&&setCurrentMonth(pickedDate)},[pickedDate]);const weeks=(0,_utils.getWeeks)(currentMonth),isDisabled=date=>!(!minDate||!date.isBefore((0,_dayjs.default)(minDate,_constants.OUTPUT_LABEL_MASK),"day"))||!(!maxDate||!date.isAfter((0,_dayjs.default)(maxDate,_constants.OUTPUT_LABEL_MASK),"day"));return _react.default.createElement("div",{className:_stylesModule.default.calendarContainer,"data-testid":UTDatePickerV1TestID.calendar},_react.default.createElement("div",{className:_stylesModule.default.nav},_react.default.createElement(_UTButton.default,{colorTheme:"secondary",dataTestId:UTDatePickerV1TestID.calendarPrevBtn,Icon:"IconChevronLeft",onClick:()=>setCurrentMonth(prev=>prev.subtract(1,"month")),size:"small",variant:"text"}),_react.default.createElement(_UTLabel.default,{align:"center",className:_stylesModule.default.navLabel,dataTestId:UTDatePickerV1TestID.calendarMonthYear,variant:"body",weight:"medium"},currentMonth.locale("es").format(_constants.MONTH_YEAR_FORMAT)),_react.default.createElement(_UTButton.default,{colorTheme:"secondary",dataTestId:UTDatePickerV1TestID.calendarNextBtn,Icon:"IconChevronRight",onClick:()=>setCurrentMonth(prev=>prev.add(1,"month")),size:"small",variant:"text"})),_react.default.createElement("div",{className:_stylesModule.default.month},_react.default.createElement("div",{className:_stylesModule.default.week},_constants.WEEKDAYS_LABELS.map(label=>_react.default.createElement(_UTLabel.default,{className:"".concat(_stylesModule.default.dayCell," ").concat(_stylesModule.default.dayHeader),key:label,variant:"body",weight:"medium"},label))),weeks.map(week=>_react.default.createElement("div",{className:_stylesModule.default.week,key:week[0].format("YYYY-MM-DD")},week.map(date=>{const dayInCurrentMonth=date.month()===currentMonth.month();return _react.default.createElement(_Day.default,{date:date,dayInCurrentMonth:dayInCurrentMonth,isDisabled:isDisabled(date),key:date.format("YYYY-MM-DD"),onClick:onDaySelect,pickedDate:pickedDate})})))))};Calendar.propTypes={maxDate:_propTypes.object,minDate:_propTypes.object,onDaySelect:_propTypes.func,pickedDate:_propTypes.object};var _default=exports.default=Calendar;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+var _propTypes = require("prop-types");
+var _testIds = require("../../../../../../constants/testIds");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+var _Day = _interopRequireDefault(require("../Day"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
+var _utils = require("../../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  UTDatePickerV1TestID
+} = _testIds.TEST_IDS;
+const Calendar = _ref => {
+  let {
+    maxDate,
+    minDate,
+    onDaySelect,
+    pickedDate
+  } = _ref;
+  const [currentMonth, setCurrentMonth] = (0, _react.useState)(pickedDate || (0, _dayjs.default)());
+  (0, _react.useEffect)(() => {
+    if (pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setCurrentMonth(pickedDate);
+  }, [pickedDate]);
+  const weeks = (0, _utils.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((0, _dayjs.default)(minDate, _constants.OUTPUT_LABEL_MASK), 'day')) return true;
+    if (maxDate && date.isAfter((0, _dayjs.default)(maxDate, _constants.OUTPUT_LABEL_MASK), 'day')) return true;
+    return false;
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.calendarContainer,
+    "data-testid": UTDatePickerV1TestID.calendar
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.nav
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarPrevBtn,
+    Icon: "IconChevronLeft",
+    onClick: handlePrevMonth,
+    size: "small",
+    variant: "text"
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    align: "center",
+    className: _stylesModule.default.navLabel,
+    dataTestId: UTDatePickerV1TestID.calendarMonthYear,
+    variant: "body",
+    weight: "medium"
+  }, currentMonth.locale('es').format(_constants.MONTH_YEAR_FORMAT)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarNextBtn,
+    Icon: "IconChevronRight",
+    onClick: handleNextMonth,
+    size: "small",
+    variant: "text"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.month
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.week
+  }, _constants.WEEKDAYS_LABELS.map(label => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.dayCell, " ").concat(_stylesModule.default.dayHeader),
+    key: label,
+    variant: "body",
+    weight: "medium"
+  }, label))), weeks.map(week => /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.week,
+    key: week[0].format('YYYY-MM-DD')
+  }, week.map(date => {
+    const dayInCurrentMonth = date.month() === currentMonth.month();
+    return /*#__PURE__*/_react.default.createElement(_Day.default, {
+      date: date,
+      dayInCurrentMonth: dayInCurrentMonth,
+      isDisabled: isDisabled(date),
+      key: date.format('YYYY-MM-DD'),
+      onClick: onDaySelect,
+      pickedDate: pickedDate
+    });
+  })))));
+};
+Calendar.propTypes = {
+  maxDate: _propTypes.object,
+  minDate: _propTypes.object,
+  onDaySelect: _propTypes.func,
+  pickedDate: _propTypes.object
+};
+var _default = exports.default = Calendar;

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

@@ -1 +1,46 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_dayjs=_interopRequireDefault(require("dayjs")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../../../UTButton")),_utils=require("../../utils"),_constants=require("../../constants"),_stylesModule=_interopRequireDefault(require("../../styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const Day=_ref=>{let{date:date,dayInCurrentMonth:dayInCurrentMonth,isDisabled:isDisabled,onClick:onClick,pickedDate:pickedDate}=_ref;const selected=(0,_utils.isSelected)(date,pickedDate),rootClass=[_stylesModule.default.dayCell,selected&&_stylesModule.default.daySelected,!dayInCurrentMonth&&_stylesModule.default.otherMonthDay].filter(Boolean).join(" ");return _react.default.createElement(_UTButton.default,{classNames:{root:rootClass},colorTheme:selected?"negative":void 0,disabled:isDisabled&&dayInCurrentMonth,onClick:()=>{isDisabled||onClick(date)},size:"medium",variant:"text"},(0,_dayjs.default)(date).format(_constants.DAY_NUMBER_FORMAT))};Day.propTypes={date:_propTypes.object,dayInCurrentMonth:_propTypes.bool,isDisabled:_propTypes.bool,onClick:_propTypes.func,pickedDate:_propTypes.object};var _default=exports.default=(0,_react.memo)(Day);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Day = _ref => {
+  let {
+    date,
+    dayInCurrentMonth,
+    isDisabled,
+    onClick,
+    pickedDate
+  } = _ref;
+  const selected = (0, _utils.isSelected)(date, pickedDate);
+  const rootClass = [_stylesModule.default.dayCell, selected && _stylesModule.default.daySelected, !dayInCurrentMonth && _stylesModule.default.otherMonthDay].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: rootClass
+    },
+    colorTheme: selected ? 'negative' : undefined,
+    disabled: isDisabled && dayInCurrentMonth,
+    onClick: () => {
+      if (!isDisabled) onClick(date);
+    },
+    size: "medium",
+    variant: "text"
+  }, (0, _dayjs.default)(date).format(_constants.DAY_NUMBER_FORMAT));
+};
+Day.propTypes = {
+  date: _propTypes.object,
+  dayInCurrentMonth: _propTypes.bool,
+  isDisabled: _propTypes.bool,
+  onClick: _propTypes.func,
+  pickedDate: _propTypes.object
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Day);

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

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WEEKDAYS_LABELS=exports.TYPING_ERROR_MESSAGE=exports.OUTPUT_LABEL_MASK=exports.MONTH_YEAR_FORMAT=exports.DEFAULT_PROPS=exports.DEFAULT_PLACEHOLDER=exports.DAY_NUMBER_FORMAT=void 0;const OUTPUT_LABEL_MASK=exports.OUTPUT_LABEL_MASK="DD/MM/YYYY",WEEKDAYS_LABELS=exports.WEEKDAYS_LABELS=["Dom","Lun","Mar","Mie","Jue","Vie","Sab"],MONTH_YEAR_FORMAT=exports.MONTH_YEAR_FORMAT="MMMM YYYY",DAY_NUMBER_FORMAT=exports.DAY_NUMBER_FORMAT="DD",DEFAULT_PLACEHOLDER=exports.DEFAULT_PLACEHOLDER="DD/MM/AAAA",TYPING_ERROR_MESSAGE=exports.TYPING_ERROR_MESSAGE="Fecha inválida",DEFAULT_PROPS=exports.DEFAULT_PROPS={variant:"select",size:"sm"};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WEEKDAYS_LABELS = exports.TYPING_ERROR_MESSAGE = exports.OUTPUT_LABEL_MASK = exports.MONTH_YEAR_FORMAT = exports.DEFAULT_PROPS = exports.DEFAULT_PLACEHOLDER = exports.DAY_NUMBER_FORMAT = void 0;
+const OUTPUT_LABEL_MASK = exports.OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+const WEEKDAYS_LABELS = exports.WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+const MONTH_YEAR_FORMAT = exports.MONTH_YEAR_FORMAT = 'MMMM YYYY';
+const DAY_NUMBER_FORMAT = exports.DAY_NUMBER_FORMAT = 'DD';
+const DEFAULT_PLACEHOLDER = exports.DEFAULT_PLACEHOLDER = 'DD/MM/AAAA';
+const TYPING_ERROR_MESSAGE = exports.TYPING_ERROR_MESSAGE = 'Fecha inválida';
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'select',
+  size: 'sm'
+};