@gympass/yoga 7.51.0 → 7.52.0

package/cjs/ActionRequirement/ActionRequirement.theme.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var ActionRequirement = function ActionRequirement() {
+  return {};
+};
+
+var _default = ActionRequirement;
+exports["default"] = _default;

package/cjs/ActionRequirement/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _web = _interopRequireDefault(require("./web"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _web["default"];
+exports["default"] = _default;

package/cjs/ActionRequirement/index.native.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _native=_interopRequireDefault(require("./native"));var _default=_native["default"];exports["default"]=_default;

package/cjs/ActionRequirement/native/ActionRequirement.js

@@ -0,0 +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;

package/cjs/ActionRequirement/native/ActionRequirement.test.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _yoga=require("@gympass/yoga");var _yogaIllustrations=require("@gympass/yoga-illustrations");var _yogaIcons=require("@gympass/yoga-icons");var _=require("../..");var _ActionRequirement=_interopRequireDefault(require("./ActionRequirement"));function handleGetCheckableContent(){return _react["default"].createElement(_yoga.Box,{display:"flex",flexDirection:"row",alignItems:"center"},_react["default"].createElement(_yoga.Checkbox,null),_react["default"].createElement(_yoga.Text,null,"I have read and agree to the Terms of Use and Privacy Policy."));}function handleGetIllustration(){return _react["default"].createElement(_yogaIllustrations.Img2d01,{width:375,height:375});}function handleGetList(){return _react["default"].createElement(_react["default"].Fragment,null,_react["default"].createElement(_yoga.Text,null,_react["default"].createElement(_yogaIcons.Dumbbell,null)," 1x/day standard access"),_react["default"].createElement(_yoga.Text,{mt:"small"},_react["default"].createElement(_yogaIcons.User,null)," 4x/month 1-on-1 sessions"),_react["default"].createElement(_yoga.Text,{mt:"small"},_react["default"].createElement(_yogaIcons.Star,null)," 2x/month premium classes"));}describe('<ActionRequirement />',function(){it('should match snapshot',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_ActionRequirement["default"],{title:"Welcome to the world of feeling good!",description:"Lets make it a good day!",illustration:handleGetIllustration(),checkable:handleGetCheckableContent(),list:handleGetList()}))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});});

package/cjs/ActionRequirement/native/ActionRequirementStyles.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Title=exports.SecondaryButton=exports.PrimaryButton=exports.Actions=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _index=_interopRequireDefault(require("../../Text/index.native"));var _index2=_interopRequireDefault(require("../../Box/index.native"));var _index3=_interopRequireDefault(require("../../Button/index.native"));var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=(0,_styledComponents["default"])(_index["default"].H4)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var fontSizes=_ref.theme.yoga.fontSizes;return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n    @media (min-width: 769px) {\n      max-width: 700px;\n      font-size: ","px;\n      line-height: ","px;\n    }\n  "])),fontSizes.huge,fontSizes.huge);});exports.Title=Title;var Actions=(0,_styledComponents["default"])(_index2["default"])(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var spacing=_ref2.theme.yoga.spacing;return(0,_styledComponents.css)(_templateObject4||(_templateObject4=(0,_taggedTemplateLiteralLoose2["default"])(["\n    display: flex;\n    flex-direction: column;\n\n    @media (min-width: 769px) {\n      flex-direction: row;\n      margin-top: ","px;\n    }\n  "])),spacing.xlarge);});exports.Actions=Actions;var buttonsStyles=(0,_styledComponents.css)(_templateObject5||(_templateObject5=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref3){var spacing=_ref3.theme.yoga.spacing;return(0,_styledComponents.css)(_templateObject6||(_templateObject6=(0,_taggedTemplateLiteralLoose2["default"])(["\n    width: 100%;\n\n    :last-child(:not(:first-child)) {\n      margin-top: ","px;\n    }\n\n    @media (min-width: 769px) {\n      width: auto;\n\n      :last-child(:not(:first-child)) {\n        margin-top: 0;\n        margin-left: ","px;\n      }\n    }\n  "])),spacing.small,spacing.large);});var PrimaryButton=(0,_styledComponents["default"])(_index3["default"])(_templateObject7||(_templateObject7=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),buttonsStyles);exports.PrimaryButton=PrimaryButton;var SecondaryButton=(0,_styledComponents["default"])(_index3["default"].Text)(_templateObject8||(_templateObject8=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),buttonsStyles);exports.SecondaryButton=SecondaryButton;Title.displayName='ActionRequirement.Title';PrimaryButton.displayName='ActionRequirement.PrimaryButton';SecondaryButton.displayName='ActionRequirement.SecondaryButton';

package/cjs/ActionRequirement/native/index.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _ActionRequirement=_interopRequireDefault(require("./ActionRequirement"));var _ActionRequirementStyles=require("./ActionRequirementStyles");_ActionRequirement["default"].Title=_ActionRequirementStyles.Title;_ActionRequirement["default"].PrimaryButton=_ActionRequirementStyles.PrimaryButton;_ActionRequirement["default"].SecondaryButton=_ActionRequirementStyles.SecondaryButton;var _default=_ActionRequirement["default"];exports["default"]=_default;

package/cjs/ActionRequirement/web/ActionRequirement.js

@@ -0,0 +1,78 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ActionRequirementStyles = require("./ActionRequirementStyles");
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var StyledActionRequirement = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+
+function isChildFromComponent(child, component) {
+  return child.type.displayName === component.displayName;
+}
+
+function ActionRequirement(props) {
+  var title = props.title,
+      description = props.description,
+      children = props.children,
+      checkable = props.checkable,
+      illustration = props.illustration,
+      list = props.list;
+  var primaryButton;
+  var secondaryButton;
+
+  function defineCompoundComponents() {
+    _react["default"].Children.forEach(children, function (child) {
+      if (isChildFromComponent(child, _ActionRequirementStyles.PrimaryButton)) primaryButton = child;
+      if (isChildFromComponent(child, _ActionRequirementStyles.SecondaryButton)) secondaryButton = child;
+    });
+  }
+
+  defineCompoundComponents();
+  return /*#__PURE__*/_react["default"].createElement(StyledActionRequirement, props, illustration && /*#__PURE__*/_react["default"].createElement(_Box["default"], null, illustration), /*#__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"], {
+    mt: "small",
+    color: "deep"
+  }, list && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    mt: "xxxlarge"
+  }, list)), checkable && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    mt: "xxxlarge"
+  }, checkable), /*#__PURE__*/_react["default"].createElement(_ActionRequirementStyles.Actions, {
+    mt: "xlarge"
+  }, primaryButton, secondaryButton));
+}
+
+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.test.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = require("../..");
+
+var _ActionRequirement = _interopRequireDefault(require("./ActionRequirement"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<ActionRequirement />', function () {
+  it('should 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();
+  });
+});

package/cjs/ActionRequirement/web/ActionRequirementStyles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Title = exports.SecondaryButton = exports.PrimaryButton = exports.Actions = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var Title = (0, _styledComponents["default"])(_Text["default"].H4).attrs({
+  as: 'p'
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var fontSizes = _ref.theme.yoga.fontSizes;
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    @media (min-width: 769px) {\n      max-width: 700px;\n      font-size: ", "px;\n      line-height: ", "px;\n    }\n  "])), fontSizes.huge, fontSizes.huge);
+});
+exports.Title = Title;
+var Actions = (0, _styledComponents["default"])(_Box["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var spacing = _ref2.theme.yoga.spacing;
+  return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: column;\n\n    @media (min-width: 769px) {\n      flex-direction: row;\n      margin-top: ", "px;\n    }\n  "])), spacing.xlarge);
+});
+exports.Actions = Actions;
+var buttonsStyles = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var spacing = _ref3.theme.yoga.spacing;
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n\n    :last-child(:not(:first-child)) {\n      margin-top: ", "px;\n    }\n\n    @media (min-width: 769px) {\n      width: auto;\n\n      :last-child(:not(:first-child)) {\n        margin-top: 0;\n        margin-left: ", "px;\n      }\n    }\n  "])), spacing.small, spacing.large);
+});
+var PrimaryButton = (0, _styledComponents["default"])(_Button["default"])(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+exports.PrimaryButton = PrimaryButton;
+var SecondaryButton = (0, _styledComponents["default"])(_Button["default"].Text)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+exports.SecondaryButton = SecondaryButton;
+Title.displayName = 'ActionRequirement.Title';
+PrimaryButton.displayName = 'ActionRequirement.PrimaryButton';
+SecondaryButton.displayName = 'ActionRequirement.SecondaryButton';

package/cjs/ActionRequirement/web/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ActionRequirement = _interopRequireDefault(require("./ActionRequirement"));
+
+var _ActionRequirementStyles = require("./ActionRequirementStyles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_ActionRequirement["default"].Title = _ActionRequirementStyles.Title;
+_ActionRequirement["default"].PrimaryButton = _ActionRequirementStyles.PrimaryButton;
+_ActionRequirement["default"].SecondaryButton = _ActionRequirementStyles.SecondaryButton;
+var _default = _ActionRequirement["default"];
+exports["default"] = _default;

package/cjs/Datepicker/web/Datepicker.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = require("prop-types");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dateFns = require("date-fns");
 
 var _Theme = require("../../Theme");
 
@@ -125,8 +125,8 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      startDate = _ref8.startDate,
-      endDate = _ref8.endDate,
+      initialDate = _ref8.startDate,
+      finishDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
@@ -139,12 +139,12 @@ function Datepicker(_ref8) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = (0, _react.useState)(startDate),
-      startD = _useState2[0],
+  var _useState2 = (0, _react.useState)(initialDate),
+      startDate = _useState2[0],
       setStartDate = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(endDate),
-      endD = _useState3[0],
+  var _useState3 = (0, _react.useState)(finishDate),
+      endDate = _useState3[0],
       setEndDate = _useState3[1];
 
   var ref = (0, _react.useRef)(null);
@@ -164,14 +164,14 @@ function Datepicker(_ref8) {
 
   (0, _react.useEffect)(function () {
     if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startD);
+      onSelectSingle(startDate);
       setOpen(false.toString());
     } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startD, endD);
+      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startD);
-  }, [startD, endD]);
+    setInputFilled(!!startDate);
+  }, [startDate, endDate]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
     setStartDate(startLocal);
@@ -182,10 +182,10 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endD) {
-      if (!startD) {
+    if (!endDate) {
+      if (!startDate) {
         setStartDate(selectedDate);
-      } else if (selectedDate < startD) {
+      } else if (selectedDate < startDate) {
         setStartDate(selectedDate);
         setEndDate(undefined);
       } else setEndDate(selectedDate);
@@ -196,16 +196,16 @@ function Datepicker(_ref8) {
   };
 
   var renderInput = function renderInput() {
-    if (!startD && !endD) {
+    if (!startDate && !endDate) {
       return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
-    var dateFormat = 'MMM D, YYYY';
-    return startD && /*#__PURE__*/_react["default"].createElement(Input, {
+    var dateFormat = 'MMM d, yyyy';
+    return startDate && /*#__PURE__*/_react["default"].createElement(Input, {
       disabled: disabled
-    }, (0, _moment["default"])(startD).format(dateFormat), endD && " - " + (0, _moment["default"])(endD).format(dateFormat));
+    }, (0, _dateFns.format)(startDate, dateFormat), endDate && " - " + (0, _dateFns.format)(endDate, dateFormat));
   };
 
   return /*#__PURE__*/_react["default"].createElement(Wrapper, {
@@ -232,8 +232,8 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
     type: type,
-    startDate: startD,
-    endDate: endD,
+    startDate: startDate,
+    endDate: endDate,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,

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

@@ -4,7 +4,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dateFns = require("date-fns");
 
 var _ = require("../..");
 
@@ -30,6 +30,9 @@ 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);
+
       var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "single",
         startDate: testDate
@@ -100,7 +103,7 @@ describe('<Datepicker />', function () {
     });
   });
   describe('Unit', function () {
-    var dateFormat = 'MMM D, YYYY';
+    var dateFormat = 'MMM d, yyyy';
     it('should call onSelectSingle function on single Datepicker', function () {
       var onSelectSingle = jest.fn();
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
@@ -145,15 +148,15 @@ describe('<Datepicker />', function () {
         type: "single",
         startDate: currentDate
       })));
-      var formattedDate = (0, _moment["default"])(currentDate).format(dateFormat);
+      var formattedDate = (0, _dateFns.format)(currentDate, dateFormat);
       expect(_react2.screen.getByText(formattedDate)).toBeVisible();
     });
     it('should display default date range on range Datepicker', function () {
       var currentDate = new Date();
       var end = new Date();
       end.setDate(currentDate.getDate() + 15);
-      var formattedStartDate = (0, _moment["default"])(currentDate).format(dateFormat);
-      var formattedEndDate = (0, _moment["default"])(end).format(dateFormat);
+      var formattedStartDate = (0, _dateFns.format)(currentDate, dateFormat);
+      var formattedEndDate = (0, _dateFns.format)(end, dateFormat);
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "range",
         startDate: currentDate,
@@ -213,7 +216,7 @@ describe('<Datepicker />', function () {
         startDate: testDate,
         disabled: true
       })));
-      var formattedDate = (0, _moment["default"])(testDate).format(dateFormat);
+      var formattedDate = (0, _dateFns.format)(testDate, dateFormat);
 
       var datepickerInput = _react2.screen.getByText(formattedDate);
 

package/cjs/Theme/theme/theme.js

@@ -5,6 +5,8 @@ exports["default"] = void 0;
 
 var _yogaCommon = require("@gympass/yoga-common");
 
+var _ActionRequirementTheme = _interopRequireDefault(require("./../../ActionRequirement/ActionRequirement.theme.js"));
+
 var _AutoCompleteTheme = _interopRequireDefault(require("./../../AutoComplete/AutoComplete.theme.js"));
 
 var _AvatarTheme = _interopRequireDefault(require("./../../Avatar/Avatar.theme.js"));
@@ -78,6 +80,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var componentThemes = {
+  ActionRequirement$ActionRequirement: _ActionRequirementTheme["default"],
   AutoComplete$AutoComplete: _AutoCompleteTheme["default"],
   Avatar$Avatar: _AvatarTheme["default"],
   Banner$Banner: _BannerTheme["default"],

package/cjs/index.js

@@ -143,6 +143,10 @@ var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 
 exports.Skeleton = _Skeleton["default"];
 
+var _ActionRequirement = _interopRequireDefault(require("./ActionRequirement"));
+
+exports.ActionRequirement = _ActionRequirement["default"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/cjs/index.native.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar["default"];}});Object.defineProperty(exports,"Banner",{enumerable:true,get:function get(){return _Banner["default"];}});Object.defineProperty(exports,"Box",{enumerable:true,get:function get(){return _Box["default"];}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button["default"];}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _native.Card;}});Object.defineProperty(exports,"Checkbox",{enumerable:true,get:function get(){return _Checkbox["default"];}});Object.defineProperty(exports,"Chips",{enumerable:true,get:function get(){return _Chips["default"];}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider["default"];}});Object.defineProperty(exports,"Dropdown",{enumerable:true,get:function get(){return _Dropdown["default"];}});Object.defineProperty(exports,"EventCard",{enumerable:true,get:function get(){return _native.EventCard;}});Object.defineProperty(exports,"GymCard",{enumerable:true,get:function get(){return _native.GymCard;}});Object.defineProperty(exports,"Icon",{enumerable:true,get:function get(){return _Icon["default"];}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input["default"];}});Object.defineProperty(exports,"List",{enumerable:true,get:function get(){return _List["default"];}});Object.defineProperty(exports,"PlanCard",{enumerable:true,get:function get(){return _native.PlanCard;}});Object.defineProperty(exports,"Progress",{enumerable:true,get:function get(){return _Progress["default"];}});Object.defineProperty(exports,"RadioGroup",{enumerable:true,get:function get(){return _RadioGroup["default"];}});Object.defineProperty(exports,"Rating",{enumerable:true,get:function get(){return _Rating["default"];}});Object.defineProperty(exports,"Result",{enumerable:true,get:function get(){return _Result["default"];}});Object.defineProperty(exports,"Skeleton",{enumerable:true,get:function get(){return _Skeleton["default"];}});Object.defineProperty(exports,"Slider",{enumerable:true,get:function get(){return _Slider["default"];}});Object.defineProperty(exports,"Snackbar",{enumerable:true,get:function get(){return _Snackbar["default"];}});Object.defineProperty(exports,"Stepper",{enumerable:true,get:function get(){return _Stepper["default"];}});Object.defineProperty(exports,"Tag",{enumerable:true,get:function get(){return _Tag["default"];}});Object.defineProperty(exports,"Text",{enumerable:true,get:function get(){return _Text["default"];}});Object.defineProperty(exports,"TextArea",{enumerable:true,get:function get(){return _TextArea["default"];}});Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function get(){return _Theme["default"];}});Object.defineProperty(exports,"createTheme",{enumerable:true,get:function get(){return _Theme.createTheme;}});Object.defineProperty(exports,"theme",{enumerable:true,get:function get(){return _Theme.theme;}});Object.defineProperty(exports,"yogaTheme",{enumerable:true,get:function get(){return _Theme.yogaTheme;}});var _Theme=_interopRequireWildcard(require("./Theme"));var _Button=_interopRequireDefault(require("./Button"));var _List=_interopRequireDefault(require("./List"));var _Checkbox=_interopRequireDefault(require("./Checkbox"));var _Slider=_interopRequireDefault(require("./Slider"));var _RadioGroup=_interopRequireDefault(require("./RadioGroup"));var _native=require("./Card/native");var _Stepper=_interopRequireDefault(require("./Stepper"));var _Text=_interopRequireDefault(require("./Text"));var _Rating=_interopRequireDefault(require("./Rating"));var _Tag=_interopRequireDefault(require("./Tag"));var _Input=_interopRequireDefault(require("./Input"));var _Progress=_interopRequireDefault(require("./Progress"));var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _TextArea=_interopRequireDefault(require("./TextArea"));var _Icon=_interopRequireDefault(require("./Icon"));var _Chips=_interopRequireDefault(require("./Chips"));var _Box=_interopRequireDefault(require("./Box"));var _Avatar=_interopRequireDefault(require("./Avatar"));var _Result=_interopRequireDefault(require("./Result"));var _Divider=_interopRequireDefault(require("./Divider"));var _Snackbar=_interopRequireDefault(require("./Snackbar"));var _Banner=_interopRequireDefault(require("./Banner"));var _Skeleton=_interopRequireDefault(require("./Skeleton"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ActionRequirement",{enumerable:true,get:function get(){return _ActionRequirement["default"];}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar["default"];}});Object.defineProperty(exports,"Banner",{enumerable:true,get:function get(){return _Banner["default"];}});Object.defineProperty(exports,"Box",{enumerable:true,get:function get(){return _Box["default"];}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button["default"];}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _native.Card;}});Object.defineProperty(exports,"Checkbox",{enumerable:true,get:function get(){return _Checkbox["default"];}});Object.defineProperty(exports,"Chips",{enumerable:true,get:function get(){return _Chips["default"];}});Object.defineProperty(exports,"Divider",{enumerable:true,get:function get(){return _Divider["default"];}});Object.defineProperty(exports,"Dropdown",{enumerable:true,get:function get(){return _Dropdown["default"];}});Object.defineProperty(exports,"EventCard",{enumerable:true,get:function get(){return _native.EventCard;}});Object.defineProperty(exports,"GymCard",{enumerable:true,get:function get(){return _native.GymCard;}});Object.defineProperty(exports,"Icon",{enumerable:true,get:function get(){return _Icon["default"];}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input["default"];}});Object.defineProperty(exports,"List",{enumerable:true,get:function get(){return _List["default"];}});Object.defineProperty(exports,"PlanCard",{enumerable:true,get:function get(){return _native.PlanCard;}});Object.defineProperty(exports,"Progress",{enumerable:true,get:function get(){return _Progress["default"];}});Object.defineProperty(exports,"RadioGroup",{enumerable:true,get:function get(){return _RadioGroup["default"];}});Object.defineProperty(exports,"Rating",{enumerable:true,get:function get(){return _Rating["default"];}});Object.defineProperty(exports,"Result",{enumerable:true,get:function get(){return _Result["default"];}});Object.defineProperty(exports,"Skeleton",{enumerable:true,get:function get(){return _Skeleton["default"];}});Object.defineProperty(exports,"Slider",{enumerable:true,get:function get(){return _Slider["default"];}});Object.defineProperty(exports,"Snackbar",{enumerable:true,get:function get(){return _Snackbar["default"];}});Object.defineProperty(exports,"Stepper",{enumerable:true,get:function get(){return _Stepper["default"];}});Object.defineProperty(exports,"Tag",{enumerable:true,get:function get(){return _Tag["default"];}});Object.defineProperty(exports,"Text",{enumerable:true,get:function get(){return _Text["default"];}});Object.defineProperty(exports,"TextArea",{enumerable:true,get:function get(){return _TextArea["default"];}});Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function get(){return _Theme["default"];}});Object.defineProperty(exports,"createTheme",{enumerable:true,get:function get(){return _Theme.createTheme;}});Object.defineProperty(exports,"theme",{enumerable:true,get:function get(){return _Theme.theme;}});Object.defineProperty(exports,"yogaTheme",{enumerable:true,get:function get(){return _Theme.yogaTheme;}});var _Theme=_interopRequireWildcard(require("./Theme"));var _Button=_interopRequireDefault(require("./Button"));var _List=_interopRequireDefault(require("./List"));var _Checkbox=_interopRequireDefault(require("./Checkbox"));var _Slider=_interopRequireDefault(require("./Slider"));var _RadioGroup=_interopRequireDefault(require("./RadioGroup"));var _native=require("./Card/native");var _Stepper=_interopRequireDefault(require("./Stepper"));var _Text=_interopRequireDefault(require("./Text"));var _Rating=_interopRequireDefault(require("./Rating"));var _Tag=_interopRequireDefault(require("./Tag"));var _Input=_interopRequireDefault(require("./Input"));var _Progress=_interopRequireDefault(require("./Progress"));var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _TextArea=_interopRequireDefault(require("./TextArea"));var _Icon=_interopRequireDefault(require("./Icon"));var _Chips=_interopRequireDefault(require("./Chips"));var _Box=_interopRequireDefault(require("./Box"));var _Avatar=_interopRequireDefault(require("./Avatar"));var _Result=_interopRequireDefault(require("./Result"));var _Divider=_interopRequireDefault(require("./Divider"));var _Snackbar=_interopRequireDefault(require("./Snackbar"));var _Banner=_interopRequireDefault(require("./Banner"));var _Skeleton=_interopRequireDefault(require("./Skeleton"));var _ActionRequirement=_interopRequireDefault(require("./ActionRequirement"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}

package/esm/ActionRequirement/ActionRequirement.theme.js

@@ -0,0 +1,5 @@
+var ActionRequirement = function ActionRequirement() {
+  return {};
+};
+
+export default ActionRequirement;

package/esm/ActionRequirement/index.js

@@ -0,0 +1,2 @@
+import ActionRequirement from './web';
+export default ActionRequirement;

package/esm/ActionRequirement/index.native.js

@@ -0,0 +1,2 @@
+import ActionRequirement from './native';
+export default ActionRequirement;

package/esm/ActionRequirement/native/ActionRequirement.js

@@ -0,0 +1,48 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import { arrayOf, node, oneOfType, string } from 'prop-types';
+import styled from 'styled-components/native';
+import { View } from 'react-native';
+import Box from '../../Box';
+import { Title } from './ActionRequirementStyles';
+import Text from '../../Text';
+var StyledActionRequirement = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+
+function ActionRequirement(props) {
+  var title = props.title,
+      description = props.description,
+      children = props.children,
+      checkable = props.checkable,
+      illustration = props.illustration,
+      list = props.list;
+  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, {
+    mt: "small",
+    color: "deep"
+  }, list && /*#__PURE__*/React.createElement(Box, {
+    mt: "xxxlarge"
+  }, list)), checkable && /*#__PURE__*/React.createElement(Box, {
+    mt: "xxxlarge"
+  }, checkable), /*#__PURE__*/React.createElement(View, null, children));
+}
+
+ActionRequirement.propTypes = {
+  title: string.isRequired,
+  children: oneOfType([arrayOf(node), node]),
+  description: string.isRequired,
+  checkable: oneOfType([arrayOf(node), node]),
+  illustration: oneOfType([arrayOf(node), node]),
+  list: oneOfType([arrayOf(node), node])
+};
+ActionRequirement.defaultProps = {
+  children: undefined,
+  checkable: undefined,
+  illustration: undefined,
+  list: undefined
+};
+export default ActionRequirement;

package/esm/ActionRequirement/native/ActionRequirement.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Box, Checkbox, Text } from '@gympass/yoga';
+import { Img2d01 } from '@gympass/yoga-illustrations';
+import { Dumbbell, User, Star } from '@gympass/yoga-icons';
+import { ThemeProvider } from '../..';
+import ActionRequirement from './ActionRequirement';
+
+function handleGetCheckableContent() {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Checkbox, null), /*#__PURE__*/React.createElement(Text, null, "I have read and agree to the Terms of Use and Privacy Policy."));
+}
+
+function handleGetIllustration() {
+  return /*#__PURE__*/React.createElement(Img2d01, {
+    width: 375,
+    height: 375
+  });
+}
+
+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 () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, {
+      title: "Welcome to the world of feeling good!",
+      description: "Lets make it a good day!",
+      illustration: handleGetIllustration(),
+      checkable: handleGetCheckableContent(),
+      list: handleGetList()
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/ActionRequirement/native/ActionRequirementStyles.js

@@ -0,0 +1,25 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { css } from 'styled-components';
+import Text from '../../Text/index.native';
+import Box from '../../Box/index.native';
+import Button from '../../Button/index.native';
+export var Title = styled(Text.H4)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var fontSizes = _ref.theme.yoga.fontSizes;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    @media (min-width: 769px) {\n      max-width: 700px;\n      font-size: ", "px;\n      line-height: ", "px;\n    }\n  "])), fontSizes.huge, fontSizes.huge);
+});
+export var Actions = styled(Box)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var spacing = _ref2.theme.yoga.spacing;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: column;\n\n    @media (min-width: 769px) {\n      flex-direction: row;\n      margin-top: ", "px;\n    }\n  "])), spacing.xlarge);
+});
+var buttonsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var spacing = _ref3.theme.yoga.spacing;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n\n    :last-child(:not(:first-child)) {\n      margin-top: ", "px;\n    }\n\n    @media (min-width: 769px) {\n      width: auto;\n\n      :last-child(:not(:first-child)) {\n        margin-top: 0;\n        margin-left: ", "px;\n      }\n    }\n  "])), spacing.small, spacing.large);
+});
+export var PrimaryButton = styled(Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+export var SecondaryButton = styled(Button.Text)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+Title.displayName = 'ActionRequirement.Title';
+PrimaryButton.displayName = 'ActionRequirement.PrimaryButton';
+SecondaryButton.displayName = 'ActionRequirement.SecondaryButton';

package/esm/ActionRequirement/native/index.js

@@ -0,0 +1,6 @@
+import ActionRequirement from './ActionRequirement';
+import { Title, PrimaryButton, SecondaryButton } from './ActionRequirementStyles';
+ActionRequirement.Title = Title;
+ActionRequirement.PrimaryButton = PrimaryButton;
+ActionRequirement.SecondaryButton = SecondaryButton;
+export default ActionRequirement;

package/esm/ActionRequirement/web/ActionRequirement.js

@@ -0,0 +1,64 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import { arrayOf, node, oneOfType, string } from 'prop-types';
+import styled from 'styled-components';
+import { Actions, Title, PrimaryButton, SecondaryButton } from './ActionRequirementStyles';
+import Text from '../../Text';
+import Box from '../../Box';
+var StyledActionRequirement = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+
+function isChildFromComponent(child, component) {
+  return child.type.displayName === component.displayName;
+}
+
+function ActionRequirement(props) {
+  var title = props.title,
+      description = props.description,
+      children = props.children,
+      checkable = props.checkable,
+      illustration = props.illustration,
+      list = props.list;
+  var primaryButton;
+  var secondaryButton;
+
+  function defineCompoundComponents() {
+    React.Children.forEach(children, function (child) {
+      if (isChildFromComponent(child, PrimaryButton)) primaryButton = child;
+      if (isChildFromComponent(child, SecondaryButton)) secondaryButton = child;
+    });
+  }
+
+  defineCompoundComponents();
+  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, {
+    mt: "small",
+    color: "deep"
+  }, list && /*#__PURE__*/React.createElement(Box, {
+    mt: "xxxlarge"
+  }, list)), checkable && /*#__PURE__*/React.createElement(Box, {
+    mt: "xxxlarge"
+  }, checkable), /*#__PURE__*/React.createElement(Actions, {
+    mt: "xlarge"
+  }, primaryButton, secondaryButton));
+}
+
+ActionRequirement.propTypes = {
+  title: string.isRequired,
+  children: oneOfType([arrayOf(node), node]),
+  description: string.isRequired,
+  checkable: oneOfType([arrayOf(node), node]),
+  illustration: oneOfType([arrayOf(node), node]),
+  list: oneOfType([arrayOf(node), node])
+};
+ActionRequirement.defaultProps = {
+  children: undefined,
+  checkable: undefined,
+  illustration: undefined,
+  list: undefined
+};
+export default ActionRequirement;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../..';
+import ActionRequirement from './ActionRequirement';
+describe('<ActionRequirement />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, null))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/ActionRequirement/web/ActionRequirementStyles.js

@@ -0,0 +1,27 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { css } from 'styled-components';
+import Text from '../../Text';
+import Box from '../../Box';
+import Button from '../../Button';
+export var Title = styled(Text.H4).attrs({
+  as: 'p'
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var fontSizes = _ref.theme.yoga.fontSizes;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    @media (min-width: 769px) {\n      max-width: 700px;\n      font-size: ", "px;\n      line-height: ", "px;\n    }\n  "])), fontSizes.huge, fontSizes.huge);
+});
+export var Actions = styled(Box)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var spacing = _ref2.theme.yoga.spacing;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: column;\n\n    @media (min-width: 769px) {\n      flex-direction: row;\n      margin-top: ", "px;\n    }\n  "])), spacing.xlarge);
+});
+var buttonsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var spacing = _ref3.theme.yoga.spacing;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n\n    :last-child(:not(:first-child)) {\n      margin-top: ", "px;\n    }\n\n    @media (min-width: 769px) {\n      width: auto;\n\n      :last-child(:not(:first-child)) {\n        margin-top: 0;\n        margin-left: ", "px;\n      }\n    }\n  "])), spacing.small, spacing.large);
+});
+export var PrimaryButton = styled(Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+export var SecondaryButton = styled(Button.Text)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), buttonsStyles);
+Title.displayName = 'ActionRequirement.Title';
+PrimaryButton.displayName = 'ActionRequirement.PrimaryButton';
+SecondaryButton.displayName = 'ActionRequirement.SecondaryButton';

package/esm/ActionRequirement/web/index.js

@@ -0,0 +1,6 @@
+import ActionRequirement from './ActionRequirement';
+import { Title, PrimaryButton, SecondaryButton } from './ActionRequirementStyles';
+ActionRequirement.Title = Title;
+ActionRequirement.PrimaryButton = PrimaryButton;
+ActionRequirement.SecondaryButton = SecondaryButton;
+export default ActionRequirement;

package/esm/Datepicker/web/Datepicker.js

@@ -14,7 +14,7 @@ import { Booking, BookingFilled } from '@gympass/yoga-icons';
 import { Text } from '@gympass/yoga';
 import styled, { css } from 'styled-components';
 import { bool, oneOf, func, instanceOf, string } from 'prop-types';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { theme } from '../../Theme';
 import Calendar from './Calendar';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: ", ";\n"])), function (props) {
@@ -100,8 +100,8 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      startDate = _ref8.startDate,
-      endDate = _ref8.endDate,
+      initialDate = _ref8.startDate,
+      finishDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
@@ -114,12 +114,12 @@ function Datepicker(_ref8) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = useState(startDate),
-      startD = _useState2[0],
+  var _useState2 = useState(initialDate),
+      startDate = _useState2[0],
       setStartDate = _useState2[1];
 
-  var _useState3 = useState(endDate),
-      endD = _useState3[0],
+  var _useState3 = useState(finishDate),
+      endDate = _useState3[0],
       setEndDate = _useState3[1];
 
   var ref = useRef(null);
@@ -139,14 +139,14 @@ function Datepicker(_ref8) {
 
   useEffect(function () {
     if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startD);
+      onSelectSingle(startDate);
       setOpen(false.toString());
     } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startD, endD);
+      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startD);
-  }, [startD, endD]);
+    setInputFilled(!!startDate);
+  }, [startDate, endDate]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
     setStartDate(startLocal);
@@ -157,10 +157,10 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endD) {
-      if (!startD) {
+    if (!endDate) {
+      if (!startDate) {
         setStartDate(selectedDate);
-      } else if (selectedDate < startD) {
+      } else if (selectedDate < startDate) {
         setStartDate(selectedDate);
         setEndDate(undefined);
       } else setEndDate(selectedDate);
@@ -171,16 +171,16 @@ function Datepicker(_ref8) {
   };
 
   var renderInput = function renderInput() {
-    if (!startD && !endD) {
+    if (!startDate && !endDate) {
       return /*#__PURE__*/React.createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
-    var dateFormat = 'MMM D, YYYY';
-    return startD && /*#__PURE__*/React.createElement(Input, {
+    var dateFormat = 'MMM d, yyyy';
+    return startDate && /*#__PURE__*/React.createElement(Input, {
       disabled: disabled
-    }, moment(startD).format(dateFormat), endD && " - " + moment(endD).format(dateFormat));
+    }, format(startDate, dateFormat), endDate && " - " + format(endDate, dateFormat));
   };
 
   return /*#__PURE__*/React.createElement(Wrapper, {
@@ -207,8 +207,8 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/React.createElement(Calendar, {
     type: type,
-    startDate: startD,
-    endDate: endD,
+    startDate: startDate,
+    endDate: endDate,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { ThemeProvider, Datepicker } from '../..';
 describe('<Datepicker />', function () {
   var testDate = new Date(2022, 7, 3);
@@ -22,6 +22,9 @@ 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);
+
       var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "single",
         startDate: testDate
@@ -92,7 +95,7 @@ describe('<Datepicker />', function () {
     });
   });
   describe('Unit', function () {
-    var dateFormat = 'MMM D, YYYY';
+    var dateFormat = 'MMM d, yyyy';
     it('should call onSelectSingle function on single Datepicker', function () {
       var onSelectSingle = jest.fn();
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
@@ -126,15 +129,15 @@ describe('<Datepicker />', function () {
         type: "single",
         startDate: currentDate
       })));
-      var formattedDate = moment(currentDate).format(dateFormat);
+      var formattedDate = format(currentDate, dateFormat);
       expect(screen.getByText(formattedDate)).toBeVisible();
     });
     it('should display default date range on range Datepicker', function () {
       var currentDate = new Date();
       var end = new Date();
       end.setDate(currentDate.getDate() + 15);
-      var formattedStartDate = moment(currentDate).format(dateFormat);
-      var formattedEndDate = moment(end).format(dateFormat);
+      var formattedStartDate = format(currentDate, dateFormat);
+      var formattedEndDate = format(end, dateFormat);
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "range",
         startDate: currentDate,
@@ -186,7 +189,7 @@ describe('<Datepicker />', function () {
         startDate: testDate,
         disabled: true
       })));
-      var formattedDate = moment(testDate).format(dateFormat);
+      var formattedDate = format(testDate, dateFormat);
       var datepickerInput = screen.getByText(formattedDate);
       expect(datepickerInput).toHaveAttribute('disabled');
       expect(datepickerInput.closest('div')).toHaveAttribute('disabled');

package/esm/Theme/theme/theme.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint-disable prefer-destructuring */
 import { merge } from '@gympass/yoga-common';
+import _componentThemes_ActionRequirement$ActionRequirement from "./../../ActionRequirement/ActionRequirement.theme.js";
 import _componentThemes_AutoComplete$AutoComplete from "./../../AutoComplete/AutoComplete.theme.js";
 import _componentThemes_Avatar$Avatar from "./../../Avatar/Avatar.theme.js";
 import _componentThemes_Banner$Banner from "./../../Banner/Banner.theme.js";
@@ -37,6 +38,7 @@ import _componentThemes_Tag$Tag from "./../../Tag/Tag.theme.js";
 import _componentThemes_Text$Text from "./../../Text/Text.theme.js";
 import _componentThemes_TextArea$TextArea from "./../../TextArea/TextArea.theme.js";
 var componentThemes = {
+  ActionRequirement$ActionRequirement: _componentThemes_ActionRequirement$ActionRequirement,
   AutoComplete$AutoComplete: _componentThemes_AutoComplete$AutoComplete,
   Avatar$Avatar: _componentThemes_Avatar$Avatar,
   Banner$Banner: _componentThemes_Banner$Banner,

package/esm/index.js

@@ -31,4 +31,5 @@ import Feedback from './Feedback';
 import Datepicker from './Datepicker';
 import Drawer from './Drawer';
 import Skeleton from './Skeleton';
-export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Datepicker, Drawer, Skeleton };
+import ActionRequirement from './ActionRequirement';
+export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Datepicker, Drawer, Skeleton, ActionRequirement };

package/esm/index.native.js

@@ -22,4 +22,5 @@ import Divider from './Divider';
 import Snackbar from './Snackbar';
 import Banner from './Banner';
 import Skeleton from './Skeleton';
-export { ThemeProvider, yogaTheme, createTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, EventCard, GymCard, Stepper, Text, Rating, Tag, Input, Progress, Dropdown, TextArea, Icon, Chips, Box, Avatar, Result, Divider, Snackbar, Banner, Skeleton };
+import ActionRequirement from './ActionRequirement';
+export { ThemeProvider, yogaTheme, createTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, EventCard, GymCard, Stepper, Text, Rating, Tag, Input, Progress, Dropdown, TextArea, Icon, Chips, Box, Avatar, Result, Divider, Snackbar, Banner, Skeleton, ActionRequirement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.51.0",
+  "version": "7.52.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -33,9 +33,9 @@
     "@gympass/yoga-tokens": "^3.1.4",
     "@ptomasroos/react-native-multi-slider": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "date-fns": "^2.29.2",
     "downshift": "^5.0.0",
     "lodash.get": "^4.4.2",
-    "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "proxy-polyfill": "^0.3.1",
     "rc-slider": "^8.7.1",
@@ -52,7 +52,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "30d96b249244d7139ac23501159fdcd60cab96b9",
+  "gitHead": "5de153fc4eccd7bb5a8f4f74f727523110645426",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"