@gympass/yoga 7.53.7 → 7.54.0

package/cjs/ActionRequirement/native/ActionRequirement.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _propTypes=require("prop-types");var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _Box=_interopRequireDefault(require("../../Box"));var _ActionRequirementStyles=require("./ActionRequirementStyles");var _Text=_interopRequireDefault(require("../../Text"));var _templateObject;var StyledActionRequirement=_native["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])([""])));function ActionRequirement(props){var title=props.title,description=props.description,children=props.children,checkable=props.checkable,illustration=props.illustration,list=props.list;return _react["default"].createElement(StyledActionRequirement,props,illustration&&_react["default"].createElement(_Box["default"],null,illustration),_react["default"].createElement(_ActionRequirementStyles.Title,null,title),_react["default"].createElement(_Text["default"],{mt:"small",color:"deep"},description),_react["default"].createElement(_Text["default"],{mt:"small",color:"deep"},list&&_react["default"].createElement(_Box["default"],{mt:"xxxlarge"},list)),checkable&&_react["default"].createElement(_Box["default"],{mt:"xxxlarge"},checkable),_react["default"].createElement(_reactNative.View,null,children));}ActionRequirement.propTypes={title:_propTypes.string.isRequired,children:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node]),description:_propTypes.string.isRequired,checkable:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node]),illustration:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node]),list:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node])};ActionRequirement.defaultProps={children:undefined,checkable:undefined,illustration:undefined,list:undefined};var _default=ActionRequirement;exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _propTypes=require("prop-types");var _native=_interopRequireDefault(require("styled-components/native"));var _reactNative=require("react-native");var _Box=_interopRequireDefault(require("../../Box"));var _ActionRequirementStyles=require("./ActionRequirementStyles");var _Text=_interopRequireDefault(require("../../Text"));var _templateObject;var StyledActionRequirement=_native["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])([""])));function ActionRequirement(props){var title=props.title,description=props.description,children=props.children,checkable=props.checkable,illustration=props.illustration,list=props.list;return _react["default"].createElement(StyledActionRequirement,props,illustration&&_react["default"].createElement(_Box["default"],null,illustration),_react["default"].createElement(_ActionRequirementStyles.Title,null,title),_react["default"].createElement(_Text["default"],{mt:"small",color:"deep"},description),list&&_react["default"].createElement(_Text["default"],{mt:"small",color:"deep"},_react["default"].createElement(_Box["default"],{mt:"xxxlarge"},list)),checkable&&_react["default"].createElement(_Box["default"],{mt:"xxxlarge"},checkable),_react["default"].createElement(_reactNative.View,null,children));}ActionRequirement.propTypes={title:_propTypes.string.isRequired,children:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node]),description:_propTypes.string.isRequired,checkable:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node]),illustration:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node]),list:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)(_propTypes.node),_propTypes.node])};ActionRequirement.defaultProps={children:undefined,checkable:undefined,illustration:undefined,list:undefined};var _default=ActionRequirement;exports["default"]=_default;

package/cjs/ActionRequirement/web/ActionRequirement.js

@@ -23,11 +23,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-var StyledActionRequirement = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  ", "\n  ", "\n"])), _yogaHelpers.media.xxs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n  "]))), _yogaHelpers.media.lg(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    flex-direction: row-reverse;\n  "]))));
+var StyledActionRequirement = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  ", "\n  ", "\n"])), _yogaHelpers.media.xxs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n  "]))), _yogaHelpers.media.lg(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    flex-direction: row-reverse;\n  "]))));
 
 var Content = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ", "\n\n  ", "\n"])), _yogaHelpers.media.xxs(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    width: auto;\n    margin-right: 0;\n  "]))), _yogaHelpers.media.lg(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    width: 520px;\n    margin-right: 120px;\n  "]))));
 
-var BoxIllustration = (0, _styledComponents["default"])(_Box["default"])(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"])));
+var BoxIllustration = (0, _styledComponents["default"])(_Box["default"])(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 
 function isChildFromComponent(child, component) {
   return child.type.displayName === component.displayName;
@@ -54,10 +54,10 @@ function ActionRequirement(props) {
   return /*#__PURE__*/_react["default"].createElement(StyledActionRequirement, props, illustration && /*#__PURE__*/_react["default"].createElement(BoxIllustration, null, illustration), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(_ActionRequirementStyles.Title, null, title), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     mt: "small",
     color: "deep"
-  }, description), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+  }, description), list && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     mt: "large",
     color: "deep"
-  }, list && /*#__PURE__*/_react["default"].createElement(_Box["default"], null, list)), checkable && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], null, list)), checkable && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     mt: "xxlarge"
   }, checkable), /*#__PURE__*/_react["default"].createElement(_ActionRequirementStyles.Actions, {
     mt: "xlarge"

package/cjs/ActionRequirement/web/ActionRequirement.test.js

@@ -4,17 +4,37 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ = require("../..");
+var _yoga = require("@gympass/yoga");
+
+var _yogaIcons = require("@gympass/yoga-icons");
 
 var _ActionRequirement = _interopRequireDefault(require("./ActionRequirement"));
 
+var _ = require("../..");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function handleGetList() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_yoga.Text, null, /*#__PURE__*/_react["default"].createElement(_yogaIcons.Dumbbell, null), " 1x/day standard access"), /*#__PURE__*/_react["default"].createElement(_yoga.Text, {
+    mt: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.User, null), " 4x/month 1-on-1 sessions"), /*#__PURE__*/_react["default"].createElement(_yoga.Text, {
+    mt: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.Star, null), " 2x/month premium classes"));
+}
+
 describe('<ActionRequirement />', function () {
-  it('should match snapshot', function () {
+  it('should default match snapshot', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_ActionRequirement["default"], null))),
         container = _render.container;
 
     expect(container).toMatchSnapshot();
   });
+  it('should match snapshot with list', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_ActionRequirement["default"], {
+      list: handleGetList()
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/cjs/Datepicker/web/Calendar.js

@@ -97,7 +97,7 @@ var DayField = _styledComponents["default"].div(_templateObject4 || (_templateOb
       radii = _ref4$theme$yoga.radii,
       spacing = _ref4$theme$yoga.spacing,
       datepicker = _ref4$theme$yoga.components.datepicker;
-  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        }" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          }" : "") + "\n";
+  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) + ";" : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        };" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          };" : "") + "\n";
 });
 
 var Row = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
@@ -114,7 +114,9 @@ function Calendar(_ref6) {
       onSelectSingle = _ref6.onSelectSingle,
       onSelectRange = _ref6.onSelectRange,
       disablePastDates = _ref6.disablePastDates,
-      disableFutureDates = _ref6.disableFutureDates;
+      disableFutureDates = _ref6.disableFutureDates,
+      disablePastFrom = _ref6.disablePastFrom,
+      disableFutureFrom = _ref6.disableFutureFrom;
 
   var _useState = (0, _react.useState)(new Date().getUTCMonth()),
       month = _useState[0],
@@ -125,11 +127,14 @@ function Calendar(_ref6) {
       setYear = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    if (startDate) {
+    if (endDate) {
+      setMonth(endDate.getUTCMonth());
+      setYear(endDate.getUTCFullYear());
+    } else if (startDate) {
       setMonth(startDate.getUTCMonth());
       setYear(startDate.getUTCFullYear());
     }
-  }, [startDate]);
+  }, [startDate, endDate]);
 
   var getDayOfWeek = function getDayOfWeek(day) {
     return new Date(Date.UTC(year, month, day)).getUTCDay();
@@ -159,8 +164,8 @@ function Calendar(_ref6) {
     var local = new Date(Date.UTC(year, month, day));
     var now = new Date();
     var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
-    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC;
-    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC;
+    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC || disablePastFrom && local.getTime() < new Date(Date.UTC(disablePastFrom.getFullYear(), disablePastFrom.getMonth(), disablePastFrom.getDate()));
+    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC || disableFutureFrom && local.getTime() > new Date(Date.UTC(disableFutureFrom.getFullYear(), disableFutureFrom.getMonth(), disableFutureFrom.getDate()));
     return pastDatesDisabled || futureDateDisabled;
   };
 
@@ -341,7 +346,9 @@ Calendar.propTypes = {
   onSelectSingle: _propTypes.func,
   onSelectRange: _propTypes.func,
   disablePastDates: _propTypes.bool,
-  disableFutureDates: _propTypes.bool
+  disableFutureDates: _propTypes.bool,
+  disablePastFrom: (0, _propTypes.instanceOf)(Date),
+  disableFutureFrom: (0, _propTypes.instanceOf)(Date)
 };
 Calendar.defaultProps = {
   startDate: undefined,
@@ -349,7 +356,9 @@ Calendar.defaultProps = {
   onSelectSingle: null,
   onSelectRange: null,
   disablePastDates: false,
-  disableFutureDates: false
+  disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined
 };
 var _default = Calendar;
 exports["default"] = _default;

package/cjs/Datepicker/web/Datepicker.js

@@ -39,7 +39,7 @@ var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObje
   return props.fullWidth ? '100%' : (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), _Theme.theme.components.input.width);
 });
 
-var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, colors, input) {
+var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, inputFilled, colors) {
   if (error) {
     return colors.feedback.attention[1];
   }
@@ -48,22 +48,23 @@ var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabl
     return colors.elements.backgroundAndDisabled;
   }
 
-  if (open) {
-    return colors.deep;
+  if (open || inputFilled) {
+    return colors.secondary;
   }
 
-  return input.border.color["default"];
+  return colors.elements.lineAndBorders;
 };
 
 var Selector = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var open = _ref.open,
       error = _ref.error,
       disabled = _ref.disabled,
+      inputFilled = _ref.inputFilled,
       _ref$theme$yoga = _ref.theme.yoga,
       components = _ref$theme$yoga.components,
       colors = _ref$theme$yoga.colors,
       spacing = _ref$theme$yoga.spacing;
-  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, colors, components.input) + "\n    color: " + components.input.font.color.focus + ";\n  ";
+  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, inputFilled, colors) + ";\n    &:hover {\n      border-color: " + colors.secondary + ";\n    }\n  ";
 });
 
 var Input = (0, _styledComponents["default"])(_yoga.Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
@@ -125,27 +126,31 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      initialDate = _ref8.startDate,
-      finishDate = _ref8.endDate,
+      startDate = _ref8.startDate,
+      endDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
+      customOnSelectRange = _ref8.customOnSelectRange,
       disablePastDates = _ref8.disablePastDates,
       disableFutureDates = _ref8.disableFutureDates,
+      disablePastFrom = _ref8.disablePastFrom,
+      disableFutureFrom = _ref8.disableFutureFrom,
       error = _ref8.error,
-      onOpen = _ref8.onOpen;
+      onOpen = _ref8.onOpen,
+      displayEndDateOnly = _ref8.displayEndDateOnly;
 
   var _useState = (0, _react.useState)(),
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = (0, _react.useState)(initialDate),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
+  var _useState2 = (0, _react.useState)(startDate),
+      startDateLocal = _useState2[0],
+      setStartDateLocal = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(finishDate),
-      endDate = _useState3[0],
-      setEndDate = _useState3[1];
+  var _useState3 = (0, _react.useState)(endDate),
+      endDateLocal = _useState3[0],
+      setEndDateLocal = _useState3[1];
 
   var ref = (0, _react.useRef)(null);
 
@@ -163,18 +168,23 @@ function Datepicker(_ref8) {
   };
 
   (0, _react.useEffect)(function () {
-    if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startDate);
+    setInputFilled(startDate || endDate);
+  }, [startDate, endDate]);
+  (0, _react.useEffect)(function () {
+    setInputFilled(startDate || endDate);
+    setStartDateLocal(startDate);
+    setEndDateLocal(endDate);
+
+    if (type === 'single' && startDate) {
       setOpen(false.toString());
-    } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startDate);
-  }, [startDate, endDate]);
+    if ((startDate || endDate) && onSelectRange) onSelectRange(startDate, endDate);
+    if (displayEndDateOnly && !endDate) setInputFilled(false);
+  }, [startDate, endDate, type]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
-    setStartDate(startLocal);
+    onSelectSingle(startLocal);
   };
 
   (0, _react.useEffect)(function () {
@@ -182,27 +192,38 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endDate) {
-      if (!startDate) {
-        setStartDate(selectedDate);
-      } else if (selectedDate < startDate) {
-        setStartDate(selectedDate);
-        setEndDate(undefined);
-      } else setEndDate(selectedDate);
+    if (customOnSelectRange) {
+      customOnSelectRange(selectedDate);
+      return;
+    }
+
+    var onSelectRangeCallback = function onSelectRangeCallback(start, end) {
+      if (onSelectRange) {
+        onSelectRange(start, end);
+      }
+    };
+
+    if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
+      setStartDateLocal(selectedDate);
+      if (endDateLocal) setEndDateLocal(undefined);
+      onSelectRangeCallback(selectedDate, undefined);
     } else {
-      setStartDate(selectedDate);
-      setEndDate(undefined);
+      setEndDateLocal(selectedDate);
+      onSelectRangeCallback(startDateLocal, selectedDate);
     }
   };
 
   var renderInput = function renderInput() {
-    if (!startDate && !endDate) {
+    if (!startDate && !endDate || displayEndDateOnly && !endDate) {
       return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
     var dateFormat = 'MMM d, yyyy';
+    if (displayEndDateOnly) return /*#__PURE__*/_react["default"].createElement(Input, {
+      disabled: disabled
+    }, endDate && (0, _dateFns.format)(endDate, dateFormat));
     return startDate && /*#__PURE__*/_react["default"].createElement(Input, {
       disabled: disabled
     }, (0, _dateFns.format)(startDate, dateFormat), endDate && " - " + (0, _dateFns.format)(endDate, dateFormat));
@@ -214,7 +235,8 @@ function Datepicker(_ref8) {
   }, /*#__PURE__*/_react["default"].createElement(Selector, {
     open: open === 'true',
     disabled: disabled,
-    error: error
+    error: error,
+    inputFilled: inputFilled
   }, renderInput(), /*#__PURE__*/_react["default"].createElement(TButton, {
     onClick: function onClick() {
       if (!disabled) {
@@ -232,12 +254,14 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
     type: type,
-    startDate: startDate,
-    endDate: endDate,
+    startDate: startDateLocal,
+    endDate: endDateLocal,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,
-    disableFutureDates: disableFutureDates
+    disableFutureDates: disableFutureDates,
+    disablePastFrom: disablePastFrom,
+    disableFutureFrom: disableFutureFrom
   })));
 }
 
@@ -250,10 +274,14 @@ Datepicker.propTypes = {
   disabled: _propTypes.bool,
   onSelectSingle: _propTypes.func,
   onSelectRange: _propTypes.func,
+  customOnSelectRange: _propTypes.func,
   disablePastDates: _propTypes.bool,
   disableFutureDates: _propTypes.bool,
+  disablePastFrom: (0, _propTypes.instanceOf)(Date),
+  disableFutureFrom: (0, _propTypes.instanceOf)(Date),
   error: _propTypes.string,
-  onOpen: _propTypes.func
+  onOpen: _propTypes.func,
+  displayEndDateOnly: _propTypes.bool
 };
 Datepicker.defaultProps = {
   fullWidth: false,
@@ -263,10 +291,14 @@ Datepicker.defaultProps = {
   disabled: false,
   onSelectSingle: undefined,
   onSelectRange: undefined,
+  customOnSelectRange: undefined,
   disablePastDates: false,
   disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined,
   error: undefined,
-  onOpen: undefined
+  onOpen: undefined,
+  displayEndDateOnly: false
 };
 var _default = Datepicker;
 exports["default"] = _default;

package/cjs/Datepicker/web/Datepicker.test.js

@@ -30,8 +30,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected date single Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
 
       var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "single",
@@ -42,8 +41,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected dates range Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
       var endDate = new Date();
       endDate.setDate(testDate.getDate() + 15);
 
@@ -110,7 +108,7 @@ describe('<Datepicker />', function () {
         type: "single",
         onSelectSingle: onSelectSingle
       })));
-      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+      expect(onSelectSingle).not.toHaveBeenCalled();
 
       _react2.fireEvent.click(_react2.screen.getByRole('button'));
 
@@ -118,7 +116,7 @@ describe('<Datepicker />', function () {
 
       _react2.fireEvent.click(day10);
 
-      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
     });
     it('should call onSelectRange function on range Datepicker', function () {
       var onSelectRange = jest.fn();
@@ -126,7 +124,7 @@ describe('<Datepicker />', function () {
         type: "range",
         onSelectRange: onSelectRange
       })));
-      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      expect(onSelectRange).not.toHaveBeenCalled();
 
       _react2.fireEvent.click(_react2.screen.getByRole('button'));
 
@@ -136,11 +134,33 @@ describe('<Datepicker />', function () {
 
       _react2.fireEvent.click(day10);
 
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+
+      _react2.fireEvent.click(day20);
+
       expect(onSelectRange).toHaveBeenCalledTimes(2);
+    });
+    it('should call onCustomSelectRange function on range Datepicker', function () {
+      var onCustomSelectRange = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "range",
+        onSelectRange: onCustomSelectRange
+      })));
+      expect(onCustomSelectRange).not.toHaveBeenCalled();
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      var day10 = _react2.screen.queryAllByText('10')[0];
+
+      var day20 = _react2.screen.queryAllByText('20')[0];
+
+      _react2.fireEvent.click(day10);
+
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(1);
 
       _react2.fireEvent.click(day20);
 
-      expect(onSelectRange).toHaveBeenCalledTimes(3);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(2);
     });
     it('should display default date on single Datepicker', function () {
       var currentDate = new Date();
@@ -210,6 +230,36 @@ describe('<Datepicker />', function () {
         return expect(_react2.screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
       });
     });
+    it('should disable past dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disablePastFrom: date
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      for (var i = 1; i <= 17; i++) {
+        expect(_react2.screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
+    it('should disable future dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
+        type: "single",
+        disableFutureFrom: date
+      })));
+
+      _react2.fireEvent.click(_react2.screen.getByRole('button'));
+
+      for (var i = 19; i <= 31; i++) {
+        expect(_react2.screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
     it('should be disabled', function () {
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "single",

package/esm/ActionRequirement/native/ActionRequirement.js

@@ -21,10 +21,10 @@ function ActionRequirement(props) {
   return /*#__PURE__*/React.createElement(StyledActionRequirement, props, illustration && /*#__PURE__*/React.createElement(Box, null, illustration), /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Text, {
     mt: "small",
     color: "deep"
-  }, description), /*#__PURE__*/React.createElement(Text, {
+  }, description), list && /*#__PURE__*/React.createElement(Text, {
     mt: "small",
     color: "deep"
-  }, list && /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     mt: "xxxlarge"
   }, list)), checkable && /*#__PURE__*/React.createElement(Box, {
     mt: "xxxlarge"

package/esm/ActionRequirement/web/ActionRequirement.js

@@ -9,9 +9,9 @@ import { media } from '@gympass/yoga-helpers';
 import { Actions, Title, PrimaryButton, SecondaryButton } from './ActionRequirementStyles';
 import Text from '../../Text';
 import Box from '../../Box';
-var StyledActionRequirement = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  ", "\n  ", "\n"])), media.xxs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n  "]))), media.lg(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    flex-direction: row-reverse;\n  "]))));
+var StyledActionRequirement = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 100%;\n  ", "\n  ", "\n"])), media.xxs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n  "]))), media.lg(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    flex-direction: row-reverse;\n  "]))));
 var Content = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ", "\n\n  ", "\n"])), media.xxs(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    width: auto;\n    margin-right: 0;\n  "]))), media.lg(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    width: 520px;\n    margin-right: 120px;\n  "]))));
-var BoxIllustration = styled(Box)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"])));
+var BoxIllustration = styled(Box)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 
 function isChildFromComponent(child, component) {
   return child.type.displayName === component.displayName;
@@ -38,10 +38,10 @@ function ActionRequirement(props) {
   return /*#__PURE__*/React.createElement(StyledActionRequirement, props, illustration && /*#__PURE__*/React.createElement(BoxIllustration, null, illustration), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Text, {
     mt: "small",
     color: "deep"
-  }, description), /*#__PURE__*/React.createElement(Text, {
+  }, description), list && /*#__PURE__*/React.createElement(Text, {
     mt: "large",
     color: "deep"
-  }, list && /*#__PURE__*/React.createElement(Box, null, list)), checkable && /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, null, list)), checkable && /*#__PURE__*/React.createElement(Box, {
     mt: "xxlarge"
   }, checkable), /*#__PURE__*/React.createElement(Actions, {
     mt: "xlarge"

package/esm/ActionRequirement/web/ActionRequirement.test.js

@@ -1,12 +1,31 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { ThemeProvider } from '../..';
+import { Text } from '@gympass/yoga';
+import { Dumbbell, User, Star } from '@gympass/yoga-icons';
 import ActionRequirement from './ActionRequirement';
+import { ThemeProvider } from '../..';
+
+function handleGetList() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Dumbbell, null), " 1x/day standard access"), /*#__PURE__*/React.createElement(Text, {
+    mt: "small"
+  }, /*#__PURE__*/React.createElement(User, null), " 4x/month 1-on-1 sessions"), /*#__PURE__*/React.createElement(Text, {
+    mt: "small"
+  }, /*#__PURE__*/React.createElement(Star, null), " 2x/month premium classes"));
+}
+
 describe('<ActionRequirement />', function () {
-  it('should match snapshot', function () {
+  it('should default match snapshot', function () {
     var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, null))),
         container = _render.container;
 
     expect(container).toMatchSnapshot();
   });
+  it('should match snapshot with list', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, {
+      list: handleGetList()
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/esm/Datepicker/web/Calendar.js

@@ -78,7 +78,7 @@ var DayField = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplat
       radii = _ref4$theme$yoga.radii,
       spacing = _ref4$theme$yoga.spacing,
       datepicker = _ref4$theme$yoga.components.datepicker;
-  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        }" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          }" : "") + "\n";
+  return "\n    p {\n        color: " + getDayFieldColor(selected, disabled, colors, aux) + ";\n        z-index: 1;\n    }\n    width: " + datepicker.width.day + "px;\n    height: " + datepicker.width.day + "px;\n    padding: " + spacing.zero + "px 21.3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: " + (inRange ? colors.clear : colors.white) + ";\n    position: relative;\n    cursor: pointer;\n    " + (selected && inRange ? "border-radius: " + getDayFieldRadius(aux, radii) + ";" : "") + "\n    " + (selected && !disabled ? "&:before {\n            content: '';\n            position: absolute;\n            background: " + colors.vibin + ";\n            width: " + datepicker.width.day + "px;\n            height: " + datepicker.width.day + "px;\n            border-radius: " + radii.circle + "px;\n        };" : "") + "\n    " + (!disabled ? "&:hover {\n            &:before {\n              content: '';\n              position: absolute;\n              border: 1px solid " + colors.secondary + ";\n              width: " + datepicker.width.day + "px;\n              height: " + datepicker.width.day + "px;\n              border-radius: " + radii.circle + "px;\n            }\n          };" : "") + "\n";
 });
 var Row = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref5) {
   var _ref5$theme$yoga = _ref5.theme.yoga,
@@ -94,7 +94,9 @@ function Calendar(_ref6) {
       onSelectSingle = _ref6.onSelectSingle,
       onSelectRange = _ref6.onSelectRange,
       disablePastDates = _ref6.disablePastDates,
-      disableFutureDates = _ref6.disableFutureDates;
+      disableFutureDates = _ref6.disableFutureDates,
+      disablePastFrom = _ref6.disablePastFrom,
+      disableFutureFrom = _ref6.disableFutureFrom;
 
   var _useState = useState(new Date().getUTCMonth()),
       month = _useState[0],
@@ -105,11 +107,14 @@ function Calendar(_ref6) {
       setYear = _useState2[1];
 
   useEffect(function () {
-    if (startDate) {
+    if (endDate) {
+      setMonth(endDate.getUTCMonth());
+      setYear(endDate.getUTCFullYear());
+    } else if (startDate) {
       setMonth(startDate.getUTCMonth());
       setYear(startDate.getUTCFullYear());
     }
-  }, [startDate]);
+  }, [startDate, endDate]);
 
   var getDayOfWeek = function getDayOfWeek(day) {
     return new Date(Date.UTC(year, month, day)).getUTCDay();
@@ -139,8 +144,8 @@ function Calendar(_ref6) {
     var local = new Date(Date.UTC(year, month, day));
     var now = new Date();
     var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate());
-    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC;
-    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC;
+    var pastDatesDisabled = disablePastDates && local.getTime() < nowUTC || disablePastFrom && local.getTime() < new Date(Date.UTC(disablePastFrom.getFullYear(), disablePastFrom.getMonth(), disablePastFrom.getDate()));
+    var futureDateDisabled = disableFutureDates && local.getTime() > nowUTC || disableFutureFrom && local.getTime() > new Date(Date.UTC(disableFutureFrom.getFullYear(), disableFutureFrom.getMonth(), disableFutureFrom.getDate()));
     return pastDatesDisabled || futureDateDisabled;
   };
 
@@ -321,7 +326,9 @@ Calendar.propTypes = {
   onSelectSingle: func,
   onSelectRange: func,
   disablePastDates: bool,
-  disableFutureDates: bool
+  disableFutureDates: bool,
+  disablePastFrom: instanceOf(Date),
+  disableFutureFrom: instanceOf(Date)
 };
 Calendar.defaultProps = {
   startDate: undefined,
@@ -329,6 +336,8 @@ Calendar.defaultProps = {
   onSelectSingle: null,
   onSelectRange: null,
   disablePastDates: false,
-  disableFutureDates: false
+  disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined
 };
 export default Calendar;

package/esm/Datepicker/web/Datepicker.js

@@ -21,7 +21,7 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
   return props.fullWidth ? '100%' : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), theme.components.input.width);
 });
 
-var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, colors, input) {
+var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabled, inputFilled, colors) {
   if (error) {
     return colors.feedback.attention[1];
   }
@@ -30,22 +30,23 @@ var getSelectorBorderColor = function getSelectorBorderColor(open, error, disabl
     return colors.elements.backgroundAndDisabled;
   }
 
-  if (open) {
-    return colors.deep;
+  if (open || inputFilled) {
+    return colors.secondary;
   }
 
-  return input.border.color["default"];
+  return colors.elements.lineAndBorders;
 };
 
 var Selector = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var open = _ref.open,
       error = _ref.error,
       disabled = _ref.disabled,
+      inputFilled = _ref.inputFilled,
       _ref$theme$yoga = _ref.theme.yoga,
       components = _ref$theme$yoga.components,
       colors = _ref$theme$yoga.colors,
       spacing = _ref$theme$yoga.spacing;
-  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, colors, components.input) + "\n    color: " + components.input.font.color.focus + ";\n  ";
+  return "\n    position: relative;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    box-sizing: border-box;\n    height: " + components.input.height + "px;\n    width: 100%;\n    padding: " + spacing.small + "px;\n    background-color: " + colors.white + ";\n    border-radius: " + components.input.border.radius + "px;\n    border-width: " + components.input.border.width + "px;\n    border-style: solid;\n    border-color: " + getSelectorBorderColor(open, error, disabled, inputFilled, colors) + ";\n    &:hover {\n      border-color: " + colors.secondary + ";\n    }\n  ";
 });
 var Input = styled(Text.Small)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled,
@@ -100,27 +101,31 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      initialDate = _ref8.startDate,
-      finishDate = _ref8.endDate,
+      startDate = _ref8.startDate,
+      endDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
+      customOnSelectRange = _ref8.customOnSelectRange,
       disablePastDates = _ref8.disablePastDates,
       disableFutureDates = _ref8.disableFutureDates,
+      disablePastFrom = _ref8.disablePastFrom,
+      disableFutureFrom = _ref8.disableFutureFrom,
       error = _ref8.error,
-      onOpen = _ref8.onOpen;
+      onOpen = _ref8.onOpen,
+      displayEndDateOnly = _ref8.displayEndDateOnly;
 
   var _useState = useState(),
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = useState(initialDate),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
+  var _useState2 = useState(startDate),
+      startDateLocal = _useState2[0],
+      setStartDateLocal = _useState2[1];
 
-  var _useState3 = useState(finishDate),
-      endDate = _useState3[0],
-      setEndDate = _useState3[1];
+  var _useState3 = useState(endDate),
+      endDateLocal = _useState3[0],
+      setEndDateLocal = _useState3[1];
 
   var ref = useRef(null);
 
@@ -138,18 +143,23 @@ function Datepicker(_ref8) {
   };
 
   useEffect(function () {
-    if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startDate);
+    setInputFilled(startDate || endDate);
+  }, [startDate, endDate]);
+  useEffect(function () {
+    setInputFilled(startDate || endDate);
+    setStartDateLocal(startDate);
+    setEndDateLocal(endDate);
+
+    if (type === 'single' && startDate) {
       setOpen(false.toString());
-    } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startDate);
-  }, [startDate, endDate]);
+    if ((startDate || endDate) && onSelectRange) onSelectRange(startDate, endDate);
+    if (displayEndDateOnly && !endDate) setInputFilled(false);
+  }, [startDate, endDate, type]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
-    setStartDate(startLocal);
+    onSelectSingle(startLocal);
   };
 
   useEffect(function () {
@@ -157,27 +167,38 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endDate) {
-      if (!startDate) {
-        setStartDate(selectedDate);
-      } else if (selectedDate < startDate) {
-        setStartDate(selectedDate);
-        setEndDate(undefined);
-      } else setEndDate(selectedDate);
+    if (customOnSelectRange) {
+      customOnSelectRange(selectedDate);
+      return;
+    }
+
+    var onSelectRangeCallback = function onSelectRangeCallback(start, end) {
+      if (onSelectRange) {
+        onSelectRange(start, end);
+      }
+    };
+
+    if (!startDateLocal || startDateLocal > selectedDate && !endDateLocal || endDateLocal) {
+      setStartDateLocal(selectedDate);
+      if (endDateLocal) setEndDateLocal(undefined);
+      onSelectRangeCallback(selectedDate, undefined);
     } else {
-      setStartDate(selectedDate);
-      setEndDate(undefined);
+      setEndDateLocal(selectedDate);
+      onSelectRangeCallback(startDateLocal, selectedDate);
     }
   };
 
   var renderInput = function renderInput() {
-    if (!startDate && !endDate) {
+    if (!startDate && !endDate || displayEndDateOnly && !endDate) {
       return /*#__PURE__*/React.createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
     var dateFormat = 'MMM d, yyyy';
+    if (displayEndDateOnly) return /*#__PURE__*/React.createElement(Input, {
+      disabled: disabled
+    }, endDate && format(endDate, dateFormat));
     return startDate && /*#__PURE__*/React.createElement(Input, {
       disabled: disabled
     }, format(startDate, dateFormat), endDate && " - " + format(endDate, dateFormat));
@@ -189,7 +210,8 @@ function Datepicker(_ref8) {
   }, /*#__PURE__*/React.createElement(Selector, {
     open: open === 'true',
     disabled: disabled,
-    error: error
+    error: error,
+    inputFilled: inputFilled
   }, renderInput(), /*#__PURE__*/React.createElement(TButton, {
     onClick: function onClick() {
       if (!disabled) {
@@ -207,12 +229,14 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/React.createElement(Calendar, {
     type: type,
-    startDate: startDate,
-    endDate: endDate,
+    startDate: startDateLocal,
+    endDate: endDateLocal,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,
-    disableFutureDates: disableFutureDates
+    disableFutureDates: disableFutureDates,
+    disablePastFrom: disablePastFrom,
+    disableFutureFrom: disableFutureFrom
   })));
 }
 
@@ -225,10 +249,14 @@ Datepicker.propTypes = {
   disabled: bool,
   onSelectSingle: func,
   onSelectRange: func,
+  customOnSelectRange: func,
   disablePastDates: bool,
   disableFutureDates: bool,
+  disablePastFrom: instanceOf(Date),
+  disableFutureFrom: instanceOf(Date),
   error: string,
-  onOpen: func
+  onOpen: func,
+  displayEndDateOnly: bool
 };
 Datepicker.defaultProps = {
   fullWidth: false,
@@ -238,9 +266,13 @@ Datepicker.defaultProps = {
   disabled: false,
   onSelectSingle: undefined,
   onSelectRange: undefined,
+  customOnSelectRange: undefined,
   disablePastDates: false,
   disableFutureDates: false,
+  disablePastFrom: undefined,
+  disableFutureFrom: undefined,
   error: undefined,
-  onOpen: undefined
+  onOpen: undefined,
+  displayEndDateOnly: false
 };
 export default Datepicker;

package/esm/Datepicker/web/Datepicker.test.js

@@ -22,8 +22,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected date single Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
 
       var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "single",
@@ -34,8 +33,7 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected dates range Datepicker', function () {
-      var mockedDate = new Date(2022, 7, 3);
-      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+      jest.useFakeTimers('modern').setSystemTime(testDate);
       var endDate = new Date();
       endDate.setDate(testDate.getDate() + 15);
 
@@ -102,11 +100,11 @@ describe('<Datepicker />', function () {
         type: "single",
         onSelectSingle: onSelectSingle
       })));
-      expect(onSelectSingle).toHaveBeenCalledTimes(1);
+      expect(onSelectSingle).not.toHaveBeenCalled();
       fireEvent.click(screen.getByRole('button'));
       var day10 = screen.queryAllByText('10')[0];
       fireEvent.click(day10);
-      expect(onSelectSingle).toHaveBeenCalledTimes(2);
+      expect(onSelectSingle).toHaveBeenCalledTimes(1);
     });
     it('should call onSelectRange function on range Datepicker', function () {
       var onSelectRange = jest.fn();
@@ -114,14 +112,29 @@ describe('<Datepicker />', function () {
         type: "range",
         onSelectRange: onSelectRange
       })));
-      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      expect(onSelectRange).not.toHaveBeenCalled();
       fireEvent.click(screen.getByRole('button'));
       var day10 = screen.queryAllByText('10')[0];
       var day20 = screen.queryAllByText('20')[0];
       fireEvent.click(day10);
+      expect(onSelectRange).toHaveBeenCalledTimes(1);
+      fireEvent.click(day20);
       expect(onSelectRange).toHaveBeenCalledTimes(2);
+    });
+    it('should call onCustomSelectRange function on range Datepicker', function () {
+      var onCustomSelectRange = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "range",
+        onSelectRange: onCustomSelectRange
+      })));
+      expect(onCustomSelectRange).not.toHaveBeenCalled();
+      fireEvent.click(screen.getByRole('button'));
+      var day10 = screen.queryAllByText('10')[0];
+      var day20 = screen.queryAllByText('20')[0];
+      fireEvent.click(day10);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(1);
       fireEvent.click(day20);
-      expect(onSelectRange).toHaveBeenCalledTimes(3);
+      expect(onCustomSelectRange).toHaveBeenCalledTimes(2);
     });
     it('should display default date on single Datepicker', function () {
       var currentDate = new Date();
@@ -183,6 +196,34 @@ describe('<Datepicker />', function () {
         return expect(screen.getAllByText("" + (i + 1))[0].closest('div')).toHaveAttribute('disabled');
       });
     });
+    it('should disable past dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disablePastFrom: date
+      })));
+      fireEvent.click(screen.getByRole('button'));
+
+      for (var i = 1; i <= 17; i++) {
+        expect(screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
+    it('should disable future dates from specific date', function () {
+      jest.useFakeTimers('modern').setSystemTime(testDate);
+      var date = new Date();
+      date.setDate(testDate.getDate() + 15);
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
+        type: "single",
+        disableFutureFrom: date
+      })));
+      fireEvent.click(screen.getByRole('button'));
+
+      for (var i = 19; i <= 31; i++) {
+        expect(screen.getAllByText("" + i)[0].closest('div')).toHaveAttribute('disabled');
+      }
+    });
     it('should be disabled', function () {
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "single",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.53.7",
+  "version": "7.54.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -52,7 +52,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "a56e42732554c6991c4337a3d9eef1a34ce14808",
+  "gitHead": "5ca2f69dd7404186a908a6a69141243ae4242285",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"