@gympass/yoga 7.54.1 → 7.55.0

package/cjs/Datepicker/web/Datepicker.js

@@ -117,7 +117,7 @@ var ErrorWrapper = (0, _styledComponents["default"])(_yoga.Text.Small)(_template
 });
 
 var toUTC = function toUTC(date) {
-  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
 
 exports.toUTC = toUTC;
@@ -213,8 +213,8 @@ function Datepicker(_ref8) {
     }
   };
 
-  var renderInput = function renderInput() {
-    if (!startDate && !endDate || displayEndDateOnly && !endDate) {
+  var renderInput = function renderInput(start, end) {
+    if (!start && !end || displayEndDateOnly && !end) {
       return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
@@ -223,10 +223,10 @@ function Datepicker(_ref8) {
     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, {
+    }, end && (0, _dateFns.format)(toUTC(end), dateFormat));
+    return start && /*#__PURE__*/_react["default"].createElement(Input, {
       disabled: disabled
-    }, (0, _dateFns.format)(startDate, dateFormat), endDate && " - " + (0, _dateFns.format)(endDate, dateFormat));
+    }, (0, _dateFns.format)(toUTC(start), dateFormat), end && " - " + (0, _dateFns.format)(toUTC(end), dateFormat));
   };
 
   return /*#__PURE__*/_react["default"].createElement(Wrapper, {
@@ -237,7 +237,7 @@ function Datepicker(_ref8) {
     disabled: disabled,
     error: error,
     inputFilled: inputFilled
-  }, renderInput(), /*#__PURE__*/_react["default"].createElement(TButton, {
+  }, renderInput(type === 'range' && !customOnSelectRange ? startDateLocal : startDate, type === 'range' && !customOnSelectRange ? endDateLocal : endDate), /*#__PURE__*/_react["default"].createElement(TButton, {
     onClick: function onClick() {
       if (!disabled) {
         setOpen((open !== 'true').toString());

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

@@ -8,10 +8,12 @@ var _dateFns = require("date-fns");
 
 var _ = require("../..");
 
+var _Datepicker = require("./Datepicker");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('<Datepicker />', function () {
-  var testDate = new Date(2022, 7, 3);
+  var testDate = new Date(2022, 7, 3, 14, 0, 0);
   describe('Snapshots', function () {
     it('should match with single Datepicker', function () {
       var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
@@ -168,15 +170,15 @@ describe('<Datepicker />', function () {
         type: "single",
         startDate: currentDate
       })));
-      var formattedDate = (0, _dateFns.format)(currentDate, dateFormat);
+      var formattedDate = (0, _dateFns.format)((0, _Datepicker.toUTC)(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, _dateFns.format)(currentDate, dateFormat);
-      var formattedEndDate = (0, _dateFns.format)(end, dateFormat);
+      var formattedStartDate = (0, _dateFns.format)((0, _Datepicker.toUTC)(currentDate), dateFormat);
+      var formattedEndDate = (0, _dateFns.format)((0, _Datepicker.toUTC)(end), dateFormat);
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "range",
         startDate: currentDate,
@@ -266,7 +268,7 @@ describe('<Datepicker />', function () {
         startDate: testDate,
         disabled: true
       })));
-      var formattedDate = (0, _dateFns.format)(testDate, dateFormat);
+      var formattedDate = (0, _dateFns.format)((0, _Datepicker.toUTC)(testDate), dateFormat);
 
       var datepickerInput = _react2.screen.getByText(formattedDate);
 

package/cjs/Skeleton/Skeleton.theme.js

@@ -3,8 +3,27 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var Skeleton = function Skeleton() {
-  return {};
+var Skeleton = function Skeleton(_ref) {
+  var lineHeights = _ref.lineHeights,
+      radii = _ref.radii;
+  return {
+    border: {
+      circular: radii.circle
+    },
+    height: {
+      text: {
+        h1: lineHeights.huge,
+        h2: lineHeights.xxxlarge,
+        h3: lineHeights.xxlarge,
+        h4: lineHeights.xlarge,
+        h5: lineHeights.large,
+        body1: lineHeights.medium,
+        body2: lineHeights.small,
+        overline: lineHeights.xsmall,
+        exception: lineHeights.xxsmall
+      }
+    }
+  };
 };
 
 var _default = Skeleton;

package/cjs/Skeleton/native/Skeleton.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _propTypes=require("prop-types");var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledComponents=_interopRequireWildcard(require("styled-components"));var _excluded=["animation"];var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14;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 textVariantsModifier={h1:function h1(theme){return(0,_styledComponents.css)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.spacing.xxxlarge);},h2:function h2(theme){return(0,_styledComponents.css)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.huge);},h3:function h3(theme){return(0,_styledComponents.css)(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.xxxlarge);},h4:function h4(theme){return(0,_styledComponents.css)(_templateObject4||(_templateObject4=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.xxlarge);},h5:function h5(){return(0,_styledComponents.css)(_templateObject5||(_templateObject5=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: 28px;\n  "])));},body1:function body1(theme){return(0,_styledComponents.css)(_templateObject6||(_templateObject6=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.xlarge);},body2:function body2(theme){return(0,_styledComponents.css)(_templateObject7||(_templateObject7=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.large);},overline:function overline(theme){return(0,_styledComponents.css)(_templateObject8||(_templateObject8=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.medium);},exception:function exception(theme){return(0,_styledComponents.css)(_templateObject9||(_templateObject9=(0,_taggedTemplateLiteralLoose2["default"])(["\n    height: ","px;\n  "])),theme.fontSizes.xsmall);}};var skeletonTypesModifier={circular:function circular(){return(0,_styledComponents.css)(_templateObject10||(_templateObject10=(0,_taggedTemplateLiteralLoose2["default"])(["\n    border-radius: 1000;\n  "])));},rectangular:function rectangular(){return(0,_styledComponents.css)(_templateObject11||(_templateObject11=(0,_taggedTemplateLiteralLoose2["default"])([""])));},text:function text(theme,variant){return(0,_styledComponents.css)(_templateObject12||(_templateObject12=(0,_taggedTemplateLiteralLoose2["default"])(["\n    ",";\n  "])),textVariantsModifier[variant](theme));}};var StyledSkeleton=_styledComponents["default"].View(_templateObject13||(_templateObject13=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var yoga=_ref.theme.yoga,type=_ref.type,width=_ref.width,height=_ref.height,variant=_ref.variant;return(0,_styledComponents.css)(_templateObject14||(_templateObject14=(0,_taggedTemplateLiteralLoose2["default"])(["\n    display: flex;\n    align-items: center;\n\n    width: ","px;\n    height: ","px;\n\n    background: ",";\n\n    ",";\n  "])),width,height,yoga.colors.light,skeletonTypesModifier[type](yoga,variant));});function Skeleton(_ref2){var _ref2$animation=_ref2.animation,animation=_ref2$animation===void 0?'pulse':_ref2$animation,props=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);var _useState=(0,_react.useState)(new _reactNative.Animated.Value(0.1)),_useState2=(0,_slicedToArray2["default"])(_useState,1),opacity=_useState2[0];(0,_react.useEffect)(function(){if(animation){_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(opacity,{toValue:0.3,duration:1000,useNativeDriver:true}),_reactNative.Animated.timing(opacity,{toValue:0.1,duration:1000,useNativeDriver:true})])).start();}},[opacity]);return _react["default"].createElement(_reactNative.Animated.View,{style:{opacity:opacity}},_react["default"].createElement(StyledSkeleton,props));}Skeleton.propTypes={type:(0,_propTypes.oneOf)(['circular','rectangular','text']).isRequired,width:_propTypes.number.isRequired,height:_propTypes.number.isRequired,animation:(0,_propTypes.oneOf)(['pulse',false])};Skeleton.defaultProps={animation:'pulse'};var _default=Skeleton;exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _propTypes=require("prop-types");var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledComponents=_interopRequireDefault(require("styled-components"));var _yogaSystem=require("@gympass/yoga-system");var _excluded=["animation"];var _templateObject;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 StyledSkeleton=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  align-items: center;\n\n  ","\n\n  ","\n\n  ","\n\n   ","\n"])),_yogaSystem.margins,_yogaSystem.widths,_yogaSystem.heights,function(_ref){var type=_ref.type,variant=_ref.variant,_ref$theme$yoga=_ref.theme.yoga,colors=_ref$theme$yoga.colors,_ref$theme$yoga$compo=_ref$theme$yoga.components.skeleton,borderRadius=_ref$theme$yoga$compo.border[type],_ref$theme$yoga$compo2=_ref$theme$yoga$compo.height[type];_ref$theme$yoga$compo2=_ref$theme$yoga$compo2===void 0?{}:_ref$theme$yoga$compo2;var height=_ref$theme$yoga$compo2[variant];return"\n    background-color: "+colors.elements.backgroundAndDisabled+";\n    "+(borderRadius?"border-radius: "+borderRadius+"px;":'')+"\n    "+(height?"height: "+height+"px;":'')+"\n  ";});function Skeleton(_ref2){var _ref2$animation=_ref2.animation,animation=_ref2$animation===void 0?'pulse':_ref2$animation,props=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);var _useState=(0,_react.useState)(new _reactNative.Animated.Value(0.1)),_useState2=(0,_slicedToArray2["default"])(_useState,1),opacity=_useState2[0];(0,_react.useEffect)(function(){if(animation){_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(opacity,{toValue:0.3,duration:1000,useNativeDriver:true}),_reactNative.Animated.timing(opacity,{toValue:0.1,duration:1000,useNativeDriver:true})])).start();}},[opacity]);return _react["default"].createElement(_reactNative.Animated.View,{style:{opacity:opacity}},_react["default"].createElement(StyledSkeleton,props));}Skeleton.propTypes={type:(0,_propTypes.oneOf)(['circular','rectangular','text']).isRequired,variant:function variant(props,propName,componentName){var type=props.type;if(type!=='text'&&!!props[propName]){return new Error("The "+propName+" prop must only be used when the type is equal to \"text\".");}if(type==='text'){return(0,_propTypes.checkPropTypes)((0,_defineProperty2["default"])({},propName,(0,_propTypes.oneOf)(['h1','h2','h3','h4','h5','body1','body2','overline','exception']).isRequired),props,'prop',componentName);}return null;},animation:(0,_propTypes.oneOf)(['pulse',false])};Skeleton.defaultProps={variant:undefined,animation:'pulse'};var _default=Skeleton;exports["default"]=_default;

package/cjs/Skeleton/native/Skeleton.test.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=require("../..");describe('<Skeleton />',function(){it('should render the circular skeleton',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"circular",width:64,height:64}))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the rectangular skeleton',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"rectangular",width:400,height:200}))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the text skeleton',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:61,height:32}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=require("../..");describe('<Skeleton />',function(){it('should render the circular skeleton',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"circular",width:64,height:64}))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the rectangular skeleton',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"rectangular",width:400,height:200}))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the text skeleton',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:61,height:32}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render all text skeleton variants correctly',function(){var _render4=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"h1",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h2",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h3",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h4",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"h5",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"body2",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"overline",width:"100"}),_react["default"].createElement(_.Skeleton,{type:"text",variant:"exception",width:"100"}))),toJSON=_render4.toJSON;expect(toJSON()).toMatchSnapshot();});});

package/cjs/Skeleton/web/Skeleton.js

@@ -3,13 +3,15 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _propTypes = require("prop-types");
-
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = require("prop-types");
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _yogaSystem = require("@gympass/yoga-system");
+
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -19,56 +21,19 @@ 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 textVariantsModifier = {
-  h1: function h1(theme) {
-    return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.spacing.xxxlarge);
-  },
-  h2: function h2(theme) {
-    return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.huge);
-  },
-  h3: function h3(theme) {
-    return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xxxlarge);
-  },
-  h4: function h4(theme) {
-    return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xxlarge);
-  },
-  h5: function h5() {
-    return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    height: 28px;\n  "])));
-  },
-  body1: function body1(theme) {
-    return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xlarge);
-  },
-  body2: function body2(theme) {
-    return (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.large);
-  },
-  overline: function overline(theme) {
-    return (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.medium);
-  },
-  exception: function exception(theme) {
-    return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xsmall);
-  }
-};
-var skeletonTypesModifier = {
-  circular: function circular() {
-    return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n    border-radius: 50%;\n  "])));
-  },
-  rectangular: function rectangular() {
-    return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
-  },
-  text: function text(theme, variant) {
-    return (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), textVariantsModifier[variant](theme));
-  }
-};
-
-var StyledSkeleton = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var yoga = _ref.theme.yoga,
-      type = _ref.type,
-      width = _ref.width,
-      height = _ref.height,
+var StyledSkeleton = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _yogaSystem.margins, _yogaSystem.widths, _yogaSystem.heights, function (_ref) {
+  var type = _ref.type,
       variant = _ref.variant,
       _ref$animation = _ref.animation,
-      animation = _ref$animation === void 0 ? 'pulse' : _ref$animation;
-  return (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n\n    width: ", "px;\n    height: ", "px;\n\n    background: ", ";\n\n    ", "\n\n    @keyframes placeholderShimmer {\n      0% {\n        opacity: 0;\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n\n    ", ";\n  "])), width, height, yoga.colors.clear, animation && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      animation: placeholderShimmer 1s linear infinite;\n    "]))), skeletonTypesModifier[type](yoga, variant));
+      animation = _ref$animation === void 0 ? 'pulse' : _ref$animation,
+      _ref$theme$yoga = _ref.theme.yoga,
+      colors = _ref$theme$yoga.colors,
+      _ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
+      borderRadius = _ref$theme$yoga$compo.border[type],
+      _ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
+  _ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
+  var height = _ref$theme$yoga$compo2[variant];
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    ", "\n    ", "\n\n    ", "\n\n    @keyframes placeholderShimmer {\n      0% {\n        opacity: 0;\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n  "])), colors.elements.backgroundAndDisabled, borderRadius ? "border-radius: " + borderRadius + "px;" : '', height ? "height: " + height + "px;" : '', animation && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      animation: placeholderShimmer 1s linear infinite;\n    "]))));
 });
 
 function Skeleton(props) {
@@ -83,16 +48,24 @@ Skeleton.propTypes = {
   type: (0, _propTypes.oneOf)(['circular', 'rectangular', 'text']).isRequired,
 
   /**
-   * Determine the width of the skeleton.
-   * Applicable to all variants.
+   * style the skeleton following the theme (the variant prop can only be used assemble to type "text").
+   * It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
    */
-  width: _propTypes.number.isRequired,
+  variant: function variant(props, propName, componentName) {
+    var type = props.type;
 
-  /**
-   * Determine the height of the skeleton.
-   * Applicable only to circular and rectangular variants.
-   */
-  height: _propTypes.number.isRequired,
+    if (type !== 'text' && !!props[propName]) {
+      return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
+    }
+
+    if (type === 'text') {
+      var _checkPropTypes;
+
+      return (0, _propTypes.checkPropTypes)((_checkPropTypes = {}, _checkPropTypes[propName] = (0, _propTypes.oneOf)(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
+    }
+
+    return null;
+  },
 
   /**
    * Determine if the animation will 'pulse' or false;
@@ -100,6 +73,7 @@ Skeleton.propTypes = {
   animation: (0, _propTypes.oneOf)(['pulse', false])
 };
 Skeleton.defaultProps = {
+  variant: undefined,
   animation: 'pulse'
 };
 var _default = Skeleton;

package/cjs/Skeleton/web/Skeleton.test.js

@@ -39,4 +39,46 @@ describe('<Skeleton />', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('should render all text skeleton variants correctly', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "h1",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "h2",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "h3",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "h4",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "h5",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "body1",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "body2",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "overline",
+      width: "100"
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "exception",
+      width: "100"
+    }))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/esm/Datepicker/web/Datepicker.js

@@ -94,7 +94,7 @@ var ErrorWrapper = styled(Text.Small)(_templateObject9 || (_templateObject9 = _t
   return "\n    margin-top: " + components.input.helper.margin.top + "px;\n    font-size: " + components.input.helper.font.size + "px;\n    color: " + colors.feedback.attention[1] + ";\n    position: absolute;\n  ";
 });
 export var toUTC = function toUTC(date) {
-  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
 };
 
 function Datepicker(_ref8) {
@@ -188,8 +188,8 @@ function Datepicker(_ref8) {
     }
   };
 
-  var renderInput = function renderInput() {
-    if (!startDate && !endDate || displayEndDateOnly && !endDate) {
+  var renderInput = function renderInput(start, end) {
+    if (!start && !end || displayEndDateOnly && !end) {
       return /*#__PURE__*/React.createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
@@ -198,10 +198,10 @@ function Datepicker(_ref8) {
     var dateFormat = 'MMM d, yyyy';
     if (displayEndDateOnly) return /*#__PURE__*/React.createElement(Input, {
       disabled: disabled
-    }, endDate && format(endDate, dateFormat));
-    return startDate && /*#__PURE__*/React.createElement(Input, {
+    }, end && format(toUTC(end), dateFormat));
+    return start && /*#__PURE__*/React.createElement(Input, {
       disabled: disabled
-    }, format(startDate, dateFormat), endDate && " - " + format(endDate, dateFormat));
+    }, format(toUTC(start), dateFormat), end && " - " + format(toUTC(end), dateFormat));
   };
 
   return /*#__PURE__*/React.createElement(Wrapper, {
@@ -212,7 +212,7 @@ function Datepicker(_ref8) {
     disabled: disabled,
     error: error,
     inputFilled: inputFilled
-  }, renderInput(), /*#__PURE__*/React.createElement(TButton, {
+  }, renderInput(type === 'range' && !customOnSelectRange ? startDateLocal : startDate, type === 'range' && !customOnSelectRange ? endDateLocal : endDate), /*#__PURE__*/React.createElement(TButton, {
     onClick: function onClick() {
       if (!disabled) {
         setOpen((open !== 'true').toString());

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { format } from 'date-fns';
 import { ThemeProvider, Datepicker } from '../..';
+import { toUTC } from './Datepicker';
 describe('<Datepicker />', function () {
-  var testDate = new Date(2022, 7, 3);
+  var testDate = new Date(2022, 7, 3, 14, 0, 0);
   describe('Snapshots', function () {
     it('should match with single Datepicker', function () {
       var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
@@ -142,15 +143,15 @@ describe('<Datepicker />', function () {
         type: "single",
         startDate: currentDate
       })));
-      var formattedDate = format(currentDate, dateFormat);
+      var formattedDate = format(toUTC(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 = format(currentDate, dateFormat);
-      var formattedEndDate = format(end, dateFormat);
+      var formattedStartDate = format(toUTC(currentDate), dateFormat);
+      var formattedEndDate = format(toUTC(end), dateFormat);
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "range",
         startDate: currentDate,
@@ -230,7 +231,7 @@ describe('<Datepicker />', function () {
         startDate: testDate,
         disabled: true
       })));
-      var formattedDate = format(testDate, dateFormat);
+      var formattedDate = format(toUTC(testDate), dateFormat);
       var datepickerInput = screen.getByText(formattedDate);
       expect(datepickerInput).toHaveAttribute('disabled');
       expect(datepickerInput.closest('div')).toHaveAttribute('disabled');

package/esm/Skeleton/Skeleton.theme.js

@@ -1,5 +1,24 @@
-var Skeleton = function Skeleton() {
-  return {};
+var Skeleton = function Skeleton(_ref) {
+  var lineHeights = _ref.lineHeights,
+      radii = _ref.radii;
+  return {
+    border: {
+      circular: radii.circle
+    },
+    height: {
+      text: {
+        h1: lineHeights.huge,
+        h2: lineHeights.xxxlarge,
+        h3: lineHeights.xxlarge,
+        h4: lineHeights.xlarge,
+        h5: lineHeights.large,
+        body1: lineHeights.medium,
+        body2: lineHeights.small,
+        overline: lineHeights.xsmall,
+        exception: lineHeights.xxsmall
+      }
+    }
+  };
 };
 
 export default Skeleton;

package/esm/Skeleton/native/Skeleton.js

@@ -1,62 +1,27 @@
 var _excluded = ["animation"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject;
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-import { number, oneOf } from 'prop-types';
+import { checkPropTypes, oneOf } from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { Animated } from 'react-native';
-import styled, { css } from 'styled-components';
-var textVariantsModifier = {
-  h1: function h1(theme) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.spacing.xxxlarge);
-  },
-  h2: function h2(theme) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.huge);
-  },
-  h3: function h3(theme) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xxxlarge);
-  },
-  h4: function h4(theme) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xxlarge);
-  },
-  h5: function h5() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    height: 28px;\n  "])));
-  },
-  body1: function body1(theme) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xlarge);
-  },
-  body2: function body2(theme) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.large);
-  },
-  overline: function overline(theme) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.medium);
-  },
-  exception: function exception(theme) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xsmall);
-  }
-};
-var skeletonTypesModifier = {
-  circular: function circular() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n    border-radius: 1000;\n  "])));
-  },
-  rectangular: function rectangular() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
-  },
-  text: function text(theme, variant) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), textVariantsModifier[variant](theme));
-  }
-};
-var StyledSkeleton = styled.View(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var yoga = _ref.theme.yoga,
-      type = _ref.type,
-      width = _ref.width,
-      height = _ref.height,
-      variant = _ref.variant;
-  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n\n    width: ", "px;\n    height: ", "px;\n\n    background: ", ";\n\n    ", ";\n  "])), width, height, yoga.colors.light, skeletonTypesModifier[type](yoga, variant));
+import styled from 'styled-components';
+import { margins, widths, heights } from '@gympass/yoga-system';
+var StyledSkeleton = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  ", "\n\n   ", "\n"])), margins, widths, heights, function (_ref) {
+  var type = _ref.type,
+      variant = _ref.variant,
+      _ref$theme$yoga = _ref.theme.yoga,
+      colors = _ref$theme$yoga.colors,
+      _ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
+      borderRadius = _ref$theme$yoga$compo.border[type],
+      _ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
+  _ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
+  var height = _ref$theme$yoga$compo2[variant];
+  return "\n    background-color: " + colors.elements.backgroundAndDisabled + ";\n    " + (borderRadius ? "border-radius: " + borderRadius + "px;" : '') + "\n    " + (height ? "height: " + height + "px;" : '') + "\n  ";
 });
 
 function Skeleton(_ref2) {
@@ -95,16 +60,24 @@ Skeleton.propTypes = {
   type: oneOf(['circular', 'rectangular', 'text']).isRequired,
 
   /**
-   * Determine the width of the skeleton.
-   * Applicable to all variants.
+   * style the skeleton following the theme (the variant prop can only be used assemble to type "text").
+   * It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
    */
-  width: number.isRequired,
+  variant: function variant(props, propName, componentName) {
+    var type = props.type;
 
-  /**
-   * Determine the height of the skeleton.
-   * Applicable only to circular and rectangular variants.
-   */
-  height: number.isRequired,
+    if (type !== 'text' && !!props[propName]) {
+      return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
+    }
+
+    if (type === 'text') {
+      var _checkPropTypes;
+
+      return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
+    }
+
+    return null;
+  },
 
   /**
    * Determine if the animation will 'pulse' or false;
@@ -112,6 +85,7 @@ Skeleton.propTypes = {
   animation: oneOf(['pulse', false])
 };
 Skeleton.defaultProps = {
+  variant: undefined,
   animation: 'pulse'
 };
 export default Skeleton;

package/esm/Skeleton/native/Skeleton.test.js

@@ -33,4 +33,46 @@ describe('<Skeleton />', function () {
 
     expect(toJSON()).toMatchSnapshot();
   });
+  it('should render all text skeleton variants correctly', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h1",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h2",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h3",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h4",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h5",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "body1",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "body2",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "overline",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "exception",
+      width: "100"
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/esm/Skeleton/web/Skeleton.js

@@ -1,59 +1,24 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-import { number, oneOf } from 'prop-types';
 import React from 'react';
+import { checkPropTypes, oneOf } from 'prop-types';
 import styled, { css } from 'styled-components';
-var textVariantsModifier = {
-  h1: function h1(theme) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.spacing.xxxlarge);
-  },
-  h2: function h2(theme) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.huge);
-  },
-  h3: function h3(theme) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xxxlarge);
-  },
-  h4: function h4(theme) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xxlarge);
-  },
-  h5: function h5() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    height: 28px;\n  "])));
-  },
-  body1: function body1(theme) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xlarge);
-  },
-  body2: function body2(theme) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.large);
-  },
-  overline: function overline(theme) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.medium);
-  },
-  exception: function exception(theme) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n  "])), theme.fontSizes.xsmall);
-  }
-};
-var skeletonTypesModifier = {
-  circular: function circular() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n    border-radius: 50%;\n  "])));
-  },
-  rectangular: function rectangular() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
-  },
-  text: function text(theme, variant) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), textVariantsModifier[variant](theme));
-  }
-};
-var StyledSkeleton = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var yoga = _ref.theme.yoga,
-      type = _ref.type,
-      width = _ref.width,
-      height = _ref.height,
+import { margins, widths, heights } from '@gympass/yoga-system';
+var StyledSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), margins, widths, heights, function (_ref) {
+  var type = _ref.type,
       variant = _ref.variant,
       _ref$animation = _ref.animation,
-      animation = _ref$animation === void 0 ? 'pulse' : _ref$animation;
-  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n\n    width: ", "px;\n    height: ", "px;\n\n    background: ", ";\n\n    ", "\n\n    @keyframes placeholderShimmer {\n      0% {\n        opacity: 0;\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n\n    ", ";\n  "])), width, height, yoga.colors.clear, animation && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      animation: placeholderShimmer 1s linear infinite;\n    "]))), skeletonTypesModifier[type](yoga, variant));
+      animation = _ref$animation === void 0 ? 'pulse' : _ref$animation,
+      _ref$theme$yoga = _ref.theme.yoga,
+      colors = _ref$theme$yoga.colors,
+      _ref$theme$yoga$compo = _ref$theme$yoga.components.skeleton,
+      borderRadius = _ref$theme$yoga$compo.border[type],
+      _ref$theme$yoga$compo2 = _ref$theme$yoga$compo.height[type];
+  _ref$theme$yoga$compo2 = _ref$theme$yoga$compo2 === void 0 ? {} : _ref$theme$yoga$compo2;
+  var height = _ref$theme$yoga$compo2[variant];
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    ", "\n    ", "\n\n    ", "\n\n    @keyframes placeholderShimmer {\n      0% {\n        opacity: 0;\n      }\n      50% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n  "])), colors.elements.backgroundAndDisabled, borderRadius ? "border-radius: " + borderRadius + "px;" : '', height ? "height: " + height + "px;" : '', animation && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      animation: placeholderShimmer 1s linear infinite;\n    "]))));
 });
 
 function Skeleton(props) {
@@ -68,16 +33,24 @@ Skeleton.propTypes = {
   type: oneOf(['circular', 'rectangular', 'text']).isRequired,
 
   /**
-   * Determine the width of the skeleton.
-   * Applicable to all variants.
+   * style the skeleton following the theme (the variant prop can only be used assemble to type "text").
+   * It can be 'h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', or 'exception'
    */
-  width: number.isRequired,
+  variant: function variant(props, propName, componentName) {
+    var type = props.type;
 
-  /**
-   * Determine the height of the skeleton.
-   * Applicable only to circular and rectangular variants.
-   */
-  height: number.isRequired,
+    if (type !== 'text' && !!props[propName]) {
+      return new Error("The " + propName + " prop must only be used when the type is equal to \"text\".");
+    }
+
+    if (type === 'text') {
+      var _checkPropTypes;
+
+      return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'overline', 'exception']).isRequired, _checkPropTypes), props, 'prop', componentName);
+    }
+
+    return null;
+  },
 
   /**
    * Determine if the animation will 'pulse' or false;
@@ -85,6 +58,7 @@ Skeleton.propTypes = {
   animation: oneOf(['pulse', false])
 };
 Skeleton.defaultProps = {
+  variant: undefined,
   animation: 'pulse'
 };
 export default Skeleton;

package/esm/Skeleton/web/Skeleton.test.js

@@ -32,4 +32,46 @@ describe('<Skeleton />', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('should render all text skeleton variants correctly', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h1",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h2",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h3",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h4",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "h5",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "body1",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "body2",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "overline",
+      width: "100"
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "exception",
+      width: "100"
+    }))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/package.json

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