@gympass/yoga 7.46.0 → 7.48.1

package/cjs/Button/Button.theme.js

@@ -64,7 +64,7 @@ var Button = function Button(_ref) {
             color: colors.white
           },
           disabled: {
-            color: colors.text.disabled
+            color: colors.deep
           },
           pressed: {
             color: colors.white
@@ -94,7 +94,7 @@ var Button = function Button(_ref) {
             }
           },
           disabled: {
-            color: colors.text.disabled
+            color: colors.deep
           },
           hover: {
             color: colors.white
@@ -110,7 +110,8 @@ var Button = function Button(_ref) {
         }
       },
       text: {
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
+        disabled: colors.deep
       },
       link: {
         font: {
@@ -121,7 +122,7 @@ var Button = function Button(_ref) {
             color: colors.secondary
           },
           disabled: {
-            color: colors.text.disabled
+            color: colors.deep
           }
         },
         margin: {

package/cjs/Button/native/Text.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _yogaCommon=require("@gympass/yoga-common");var _withTouchable=_interopRequireDefault(require("./withTouchable"));var _Button=require("./Button");var _excluded=["children","disabled","pressed","small","secondary","inverted","icon","theme"];var _templateObject,_templateObject2;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 LabelText=(0,_styledComponents["default"])(_Button.Label)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var color=_ref.color;return"color: "+color+";";});var ButtonContainerText=(0,_styledComponents["default"])(_Button.ButtonContainer)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var button=_ref2.theme.yoga.components.button;return"\n    background-color: "+button.types.text.backgroundColor+";\n  ";});var ButtonText=(0,_react.forwardRef)(function(_ref3,ref){var children=_ref3.children,disabled=_ref3.disabled,pressed=_ref3.pressed,small=_ref3.small,secondary=_ref3.secondary,inverted=_ref3.inverted,Icon=_ref3.icon,_ref3$theme$yoga=_ref3.theme.yoga,colors=_ref3$theme$yoga.colors,button=_ref3$theme$yoga.components.button,rest=(0,_objectWithoutProperties2["default"])(_ref3,_excluded);var state=secondary?'secondary':'primary';var textColor=colors[state];if(disabled){textColor=colors.text.disabled;}else if(inverted){textColor=colors.white;if(pressed){textColor=(0,_yogaCommon.hexToRgb)(colors.white,0.75);}}else if(pressed){textColor=(0,_yogaCommon.hexToRgb)(colors[state],0.75);}return _react["default"].createElement(ButtonContainerText,(0,_extends2["default"])({},rest,{disabled:disabled,pressed:pressed,small:small,ref:ref}),Icon&&_react["default"].createElement(Icon,{width:small?button.icon.size.small:button.icon.size["default"],height:small?button.icon.size.small:button.icon.size["default"],fill:textColor,style:{marginRight:button.icon.margin.right}}),_react["default"].createElement(LabelText,{disabled:disabled,pressed:pressed,small:small,secondary:secondary,color:textColor},children));});ButtonText.propTypes=_Button.ButtonContainer.propTypes;ButtonText.defaultProps=_Button.ButtonContainer.defaultProps;var _default=(0,_withTouchable["default"])((0,_styledComponents.withTheme)(ButtonText));exports["default"]=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _yogaCommon=require("@gympass/yoga-common");var _withTouchable=_interopRequireDefault(require("./withTouchable"));var _Button=require("./Button");var _excluded=["children","disabled","pressed","small","secondary","inverted","icon","theme"];var _templateObject,_templateObject2;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 LabelText=(0,_styledComponents["default"])(_Button.Label)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var color=_ref.color;return"color: "+color+";";});var ButtonContainerText=(0,_styledComponents["default"])(_Button.ButtonContainer)(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var button=_ref2.theme.yoga.components.button;return"\n    background-color: "+button.types.text.backgroundColor+";\n  ";});var ButtonText=(0,_react.forwardRef)(function(_ref3,ref){var children=_ref3.children,disabled=_ref3.disabled,pressed=_ref3.pressed,small=_ref3.small,secondary=_ref3.secondary,inverted=_ref3.inverted,Icon=_ref3.icon,_ref3$theme$yoga=_ref3.theme.yoga,colors=_ref3$theme$yoga.colors,button=_ref3$theme$yoga.components.button,rest=(0,_objectWithoutProperties2["default"])(_ref3,_excluded);var state=secondary?'secondary':'primary';var textColor=colors[state];if(disabled){textColor=button.types.text.disabled;}else if(inverted){textColor=colors.white;if(pressed){textColor=(0,_yogaCommon.hexToRgb)(colors.white,0.75);}}else if(pressed){textColor=(0,_yogaCommon.hexToRgb)(colors[state],0.75);}return _react["default"].createElement(ButtonContainerText,(0,_extends2["default"])({},rest,{disabled:disabled,pressed:pressed,small:small,ref:ref}),Icon&&_react["default"].createElement(Icon,{width:small?button.icon.size.small:button.icon.size["default"],height:small?button.icon.size.small:button.icon.size["default"],fill:textColor,style:{marginRight:button.icon.margin.right}}),_react["default"].createElement(LabelText,{disabled:disabled,pressed:pressed,small:small,secondary:secondary,color:textColor},children));});ButtonText.propTypes=_Button.ButtonContainer.propTypes;ButtonText.defaultProps=_Button.ButtonContainer.defaultProps;var _default=(0,_withTouchable["default"])((0,_styledComponents.withTheme)(ButtonText));exports["default"]=_default;

package/cjs/Button/web/Text.js

@@ -22,7 +22,7 @@ var ButtonText = (0, _styledComponents["default"])(_Button["default"])(_template
       colors = _ref$theme$yoga.colors,
       button = _ref$theme$yoga.components.button;
   var state = secondary ? 'secondary' : 'primary';
-  return "\n      background-color: " + button.types.text.backgroundColor + ";\n      border-color: " + button.types.text.backgroundColor + ";\n      color: " + colors[state] + ";\n\n      svg {\n        fill: " + colors[state] + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {\n        background-color: " + button.types.text.backgroundColor + ";\n        box-shadow: none;\n      }\n\n      &:not([disabled]):hover {\n        color: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.5) + ";\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.75) + ";\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.75) + ";\n        }\n      }\n\n      " + (inverted ? "\n          color: " + colors.white + ";\n          svg {\n            fill: " + colors.white + ";\n          }\n\n          &:not([disabled]):hover {\n            color: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.5) + ";\n            svg {\n              fill: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.5) + ";\n            }\n          }\n\n          &:not([disabled]):focus, &:not([disabled]):active {\n            color: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.75) + ";\n            svg {\n              fill: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.75) + ";\n            }\n          }\n        " : '') + "\n\n      &:disabled {\n        background-color: " + button.types.text.backgroundColor + ";\n        border-color: " + button.types.text.backgroundColor + ";\n        color: " + colors.text.disabled + ";\n        svg {\n          fill: " + colors.text.disabled + ";\n        }\n      }\n    ";
+  return "\n      background-color: " + button.types.text.backgroundColor + ";\n      border-color: " + button.types.text.backgroundColor + ";\n      color: " + colors[state] + ";\n\n      svg {\n        fill: " + colors[state] + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {\n        background-color: " + button.types.text.backgroundColor + ";\n        box-shadow: none;\n      }\n\n      &:not([disabled]):hover {\n        color: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.5) + ";\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.75) + ";\n        svg {\n          fill: " + (0, _yogaCommon.hexToRgb)(colors[state], 0.75) + ";\n        }\n      }\n\n      " + (inverted ? "\n          color: " + colors.white + ";\n          svg {\n            fill: " + colors.white + ";\n          }\n\n          &:not([disabled]):hover {\n            color: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.5) + ";\n            svg {\n              fill: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.5) + ";\n            }\n          }\n\n          &:not([disabled]):focus, &:not([disabled]):active {\n            color: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.75) + ";\n            svg {\n              fill: " + (0, _yogaCommon.hexToRgb)(colors.white, 0.75) + ";\n            }\n          }\n        " : '') + "\n\n      &:disabled {\n        background-color: " + button.types.text.backgroundColor + ";\n        border-color: " + button.types.text.backgroundColor + ";\n        color: " + button.types.text.disabled + ";\n        svg {\n          fill: " + button.types.text.disabled + ";\n        }\n      }\n    ";
 });
 ButtonText.displayName = 'Button.Text';
 var _default = ButtonText;

package/cjs/Skeleton/Skeleton.theme.js

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

package/cjs/Skeleton/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/Skeleton/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/Skeleton/native/Skeleton.js

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

package/cjs/Skeleton/native/Skeleton.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 _=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}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});});

package/cjs/Skeleton/native/index.js

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

package/cjs/Skeleton/web/Skeleton.js

@@ -0,0 +1,106 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _propTypes = require("prop-types");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+
+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 _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 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,
+      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));
+});
+
+function Skeleton(props) {
+  return /*#__PURE__*/_react["default"].createElement(StyledSkeleton, props);
+}
+
+Skeleton.propTypes = {
+  /**
+   * Determines which type will be rendered. It can be
+   * 'circular', 'rectangular' or 'text'.
+   */
+  type: (0, _propTypes.oneOf)(['circular', 'rectangular', 'text']).isRequired,
+
+  /**
+   * Determine the width of the skeleton.
+   * Applicable to all variants.
+   */
+  width: _propTypes.number.isRequired,
+
+  /**
+   * Determine the height of the skeleton.
+   * Applicable only to circular and rectangular variants.
+   */
+  height: _propTypes.number.isRequired,
+
+  /**
+   * Determine if the animation will 'pulse' or false;
+   */
+  animation: (0, _propTypes.oneOf)(['pulse', false])
+};
+Skeleton.defaultProps = {
+  animation: 'pulse'
+};
+var _default = Skeleton;
+exports["default"] = _default;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<Skeleton />', function () {
+  it('should render the circular skeleton', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "circular",
+      width: 64,
+      height: 64
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should render the rectangular skeleton', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "rectangular",
+      width: 400,
+      height: 200
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should render the text skeleton', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      type: "text",
+      variant: "body1",
+      width: 61
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/cjs/Skeleton/web/index.js

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

package/cjs/Theme/theme/theme.js

@@ -55,6 +55,8 @@ var _RatingTheme = _interopRequireDefault(require("./../../Rating/Rating.theme.j
 
 var _ResultTheme = _interopRequireDefault(require("./../../Result/Result.theme.js"));
 
+var _SkeletonTheme = _interopRequireDefault(require("./../../Skeleton/Skeleton.theme.js"));
+
 var _SliderTheme = _interopRequireDefault(require("./../../Slider/Slider.theme.js"));
 
 var _SnackbarTheme = _interopRequireDefault(require("./../../Snackbar/Snackbar.theme.js"));
@@ -97,6 +99,7 @@ var componentThemes = {
   RadioGroup$RadioGroup: _RadioGroupTheme["default"],
   Rating$Rating: _RatingTheme["default"],
   Result$Result: _ResultTheme["default"],
+  Skeleton$Skeleton: _SkeletonTheme["default"],
   Slider$Slider: _SliderTheme["default"],
   Snackbar$Snackbar: _SnackbarTheme["default"],
   Stepper$Stepper: _StepperTheme["default"],

package/cjs/index.js

@@ -131,6 +131,10 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
 
 exports.Feedback = _Feedback["default"];
 
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.Skeleton = _Skeleton["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,"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"));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,"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;}

package/esm/Button/Button.theme.js

@@ -59,7 +59,7 @@ var Button = function Button(_ref) {
             color: colors.white
           },
           disabled: {
-            color: colors.text.disabled
+            color: colors.deep
           },
           pressed: {
             color: colors.white
@@ -89,7 +89,7 @@ var Button = function Button(_ref) {
             }
           },
           disabled: {
-            color: colors.text.disabled
+            color: colors.deep
           },
           hover: {
             color: colors.white
@@ -105,7 +105,8 @@ var Button = function Button(_ref) {
         }
       },
       text: {
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
+        disabled: colors.deep
       },
       link: {
         font: {
@@ -116,7 +117,7 @@ var Button = function Button(_ref) {
             color: colors.secondary
           },
           disabled: {
-            color: colors.text.disabled
+            color: colors.deep
           }
         },
         margin: {

package/esm/Button/native/Text.js

@@ -38,7 +38,7 @@ var ButtonText = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var textColor = colors[state];
 
   if (disabled) {
-    textColor = colors.text.disabled;
+    textColor = button.types.text.disabled;
   } else if (inverted) {
     textColor = colors.white;
 

package/esm/Button/web/Text.js

@@ -12,7 +12,7 @@ var ButtonText = styled(Button)(_templateObject || (_templateObject = _taggedTem
       colors = _ref$theme$yoga.colors,
       button = _ref$theme$yoga.components.button;
   var state = secondary ? 'secondary' : 'primary';
-  return "\n      background-color: " + button.types.text.backgroundColor + ";\n      border-color: " + button.types.text.backgroundColor + ";\n      color: " + colors[state] + ";\n\n      svg {\n        fill: " + colors[state] + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {\n        background-color: " + button.types.text.backgroundColor + ";\n        box-shadow: none;\n      }\n\n      &:not([disabled]):hover {\n        color: " + hexToRgb(colors[state], 0.5) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(colors[state], 0.75) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.75) + ";\n        }\n      }\n\n      " + (inverted ? "\n          color: " + colors.white + ";\n          svg {\n            fill: " + colors.white + ";\n          }\n\n          &:not([disabled]):hover {\n            color: " + hexToRgb(colors.white, 0.5) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.5) + ";\n            }\n          }\n\n          &:not([disabled]):focus, &:not([disabled]):active {\n            color: " + hexToRgb(colors.white, 0.75) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.75) + ";\n            }\n          }\n        " : '') + "\n\n      &:disabled {\n        background-color: " + button.types.text.backgroundColor + ";\n        border-color: " + button.types.text.backgroundColor + ";\n        color: " + colors.text.disabled + ";\n        svg {\n          fill: " + colors.text.disabled + ";\n        }\n      }\n    ";
+  return "\n      background-color: " + button.types.text.backgroundColor + ";\n      border-color: " + button.types.text.backgroundColor + ";\n      color: " + colors[state] + ";\n\n      svg {\n        fill: " + colors[state] + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {\n        background-color: " + button.types.text.backgroundColor + ";\n        box-shadow: none;\n      }\n\n      &:not([disabled]):hover {\n        color: " + hexToRgb(colors[state], 0.5) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(colors[state], 0.75) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.75) + ";\n        }\n      }\n\n      " + (inverted ? "\n          color: " + colors.white + ";\n          svg {\n            fill: " + colors.white + ";\n          }\n\n          &:not([disabled]):hover {\n            color: " + hexToRgb(colors.white, 0.5) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.5) + ";\n            }\n          }\n\n          &:not([disabled]):focus, &:not([disabled]):active {\n            color: " + hexToRgb(colors.white, 0.75) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.75) + ";\n            }\n          }\n        " : '') + "\n\n      &:disabled {\n        background-color: " + button.types.text.backgroundColor + ";\n        border-color: " + button.types.text.backgroundColor + ";\n        color: " + button.types.text.disabled + ";\n        svg {\n          fill: " + button.types.text.disabled + ";\n        }\n      }\n    ";
 });
 ButtonText.displayName = 'Button.Text';
 export default ButtonText;

package/esm/Skeleton/Skeleton.theme.js

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

package/esm/Skeleton/index.js

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

package/esm/Skeleton/index.native.js

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

package/esm/Skeleton/native/Skeleton.js

@@ -0,0 +1,117 @@
+var _excluded = ["animation"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+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 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));
+});
+
+function Skeleton(_ref2) {
+  var _ref2$animation = _ref2.animation,
+      animation = _ref2$animation === void 0 ? 'pulse' : _ref2$animation,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var _useState = useState(new Animated.Value(0.1)),
+      opacity = _useState[0];
+
+  useEffect(function () {
+    if (animation) {
+      Animated.loop(Animated.sequence([Animated.timing(opacity, {
+        toValue: 0.3,
+        duration: 1000,
+        useNativeDriver: true
+      }), Animated.timing(opacity, {
+        toValue: 0.1,
+        duration: 1000,
+        useNativeDriver: true
+      })])).start();
+    }
+  }, [opacity]);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/React.createElement(StyledSkeleton, props));
+}
+
+Skeleton.propTypes = {
+  /**
+   * Determines which type will be rendered. It can be
+   * 'circular', 'rectangular' or 'text'.
+   */
+  type: oneOf(['circular', 'rectangular', 'text']).isRequired,
+
+  /**
+   * Determine the width of the skeleton.
+   * Applicable to all variants.
+   */
+  width: number.isRequired,
+
+  /**
+   * Determine the height of the skeleton.
+   * Applicable only to circular and rectangular variants.
+   */
+  height: number.isRequired,
+
+  /**
+   * Determine if the animation will 'pulse' or false;
+   */
+  animation: oneOf(['pulse', false])
+};
+Skeleton.defaultProps = {
+  animation: 'pulse'
+};
+export default Skeleton;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Skeleton } from '../..';
+describe('<Skeleton />', function () {
+  it('should render the circular skeleton', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "circular",
+      width: 64,
+      height: 64
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should render the rectangular skeleton', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "rectangular",
+      width: 400,
+      height: 200
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should render the text skeleton', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "body1",
+      width: 61
+    }))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Skeleton/native/index.js

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

package/esm/Skeleton/web/Skeleton.js

@@ -0,0 +1,90 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+
+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 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,
+      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));
+});
+
+function Skeleton(props) {
+  return /*#__PURE__*/React.createElement(StyledSkeleton, props);
+}
+
+Skeleton.propTypes = {
+  /**
+   * Determines which type will be rendered. It can be
+   * 'circular', 'rectangular' or 'text'.
+   */
+  type: oneOf(['circular', 'rectangular', 'text']).isRequired,
+
+  /**
+   * Determine the width of the skeleton.
+   * Applicable to all variants.
+   */
+  width: number.isRequired,
+
+  /**
+   * Determine the height of the skeleton.
+   * Applicable only to circular and rectangular variants.
+   */
+  height: number.isRequired,
+
+  /**
+   * Determine if the animation will 'pulse' or false;
+   */
+  animation: oneOf(['pulse', false])
+};
+Skeleton.defaultProps = {
+  animation: 'pulse'
+};
+export default Skeleton;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Skeleton } from '../..';
+describe('<Skeleton />', function () {
+  it('should render the circular skeleton', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "circular",
+      width: 64,
+      height: 64
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should render the rectangular skeleton', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "rectangular",
+      width: 400,
+      height: 200
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should render the text skeleton', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
+      type: "text",
+      variant: "body1",
+      width: 61
+    }))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Skeleton/web/index.js

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

package/esm/Theme/theme/theme.js

@@ -27,6 +27,7 @@ import _componentThemes_Progress$Progress from "./../../Progress/Progress.theme.
 import _componentThemes_RadioGroup$RadioGroup from "./../../RadioGroup/RadioGroup.theme.js";
 import _componentThemes_Rating$Rating from "./../../Rating/Rating.theme.js";
 import _componentThemes_Result$Result from "./../../Result/Result.theme.js";
+import _componentThemes_Skeleton$Skeleton from "./../../Skeleton/Skeleton.theme.js";
 import _componentThemes_Slider$Slider from "./../../Slider/Slider.theme.js";
 import _componentThemes_Snackbar$Snackbar from "./../../Snackbar/Snackbar.theme.js";
 import _componentThemes_Stepper$Stepper from "./../../Stepper/Stepper.theme.js";
@@ -59,6 +60,7 @@ var componentThemes = {
   RadioGroup$RadioGroup: _componentThemes_RadioGroup$RadioGroup,
   Rating$Rating: _componentThemes_Rating$Rating,
   Result$Result: _componentThemes_Result$Result,
+  Skeleton$Skeleton: _componentThemes_Skeleton$Skeleton,
   Slider$Slider: _componentThemes_Slider$Slider,
   Snackbar$Snackbar: _componentThemes_Snackbar$Snackbar,
   Stepper$Stepper: _componentThemes_Stepper$Stepper,

package/esm/index.js

@@ -28,4 +28,5 @@ import Menu from './Menu';
 import Banner from './Banner';
 import Heading from './Heading';
 import Feedback from './Feedback';
-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 };
+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, Skeleton };

package/esm/index.native.js

@@ -21,4 +21,5 @@ import Result from './Result';
 import Divider from './Divider';
 import Snackbar from './Snackbar';
 import Banner from './Banner';
-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 };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.46.0",
+  "version": "7.48.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -28,7 +28,7 @@
     "@gympass/yoga-common": "^1.1.1",
     "@gympass/yoga-helpers": "^1.0.3",
     "@gympass/yoga-icons": "^1.5.0",
-    "@gympass/yoga-illustrations": "^0.5.0",
+    "@gympass/yoga-illustrations": "^0.5.1",
     "@gympass/yoga-system": "^0.10.2",
     "@gympass/yoga-tokens": "^3.1.4",
     "@ptomasroos/react-native-multi-slider": "^1.0.0",
@@ -51,7 +51,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "2bdf788e27df157afdb419bb89e78145ac147f07",
+  "gitHead": "cd0637336ba6ba72f4bde25b53ab66092317c328",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"