@gympass/yoga 7.47.0 → 7.49.0

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/Dialog/web/Dialog.js

@@ -42,7 +42,7 @@ exports.StyledDialog = StyledDialog;
 
 var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var dialog = _ref2.theme.yoga.components.dialog;
-  return "\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
+  return "\n  display: flex;\n  z-index: 3;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
 
 var Dialog = function Dialog(_ref3) {

package/cjs/Drawer/Drawer.theme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Drawer = function Drawer(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    padding: {
+      top: spacing.small,
+      right: spacing.xxxlarge,
+      bottom: spacing.xxlarge,
+      left: spacing.xxxlarge
+    },
+    width: {
+      "default": 600
+    }
+  };
+};
+
+var _default = Drawer;
+exports["default"] = _default;

package/cjs/Drawer/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/Drawer/web/Drawer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = require("prop-types");
+
+var _Dialog = _interopRequireDefault(require("../../Dialog"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var StyledDrawer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  border-radius: 0!important;\n  height: 100%;\n  align-self: flex-end;\n  position: absolute;\n  right: 0;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  transition: 0.25s ease-in-out;\n  @keyframes content {\n    0% {\n      transform: translate3d(100%, 0, 0);\n    }\n  }\n"])), function (_ref) {
+  var drawer = _ref.theme.yoga.components.drawer;
+  return "\n  padding: " + drawer.padding.top + "px " + drawer.padding.right + "px " + drawer.padding.bottom + "px " + drawer.padding.left + "px;\n  width: " + drawer.width["default"] + "px;\n  ";
+});
+
+function Drawer(props) {
+  return /*#__PURE__*/_react["default"].createElement(StyledDrawer, props);
+}
+
+Drawer.propTypes = {
+  children: _propTypes.node.isRequired
+};
+var _default = Drawer;
+exports["default"] = _default;

package/cjs/Drawer/web/Drawer.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = require("../..");
+
+var _2 = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<Drawer />', function () {
+  afterEach(_react2.cleanup);
+  it('should match snapshot', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, null, "Subtitle"), /*#__PURE__*/_react["default"].createElement(_2["default"].Footer, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal drawer', function () {
+    var onActionMock = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_2["default"], {
+      isOpen: true
+    }, /*#__PURE__*/_react["default"].createElement(_2["default"].Header, null, "Title"), /*#__PURE__*/_react["default"].createElement(_2["default"].Content, null, "Subtitle"), /*#__PURE__*/_react["default"].createElement(_2["default"].Footer, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+
+    _react2.screen.getByText('Title');
+
+    _react2.screen.getByText('Subtitle');
+
+    var button = _react2.screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+
+    _react2.fireEvent.click(button);
+
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+});

package/cjs/Drawer/web/Footer.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function Footer(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
+    as: "footer",
+    width: "100%",
+    d: "flex"
+  }, props));
+}
+
+Footer.displayName = 'Drawer.Footer';
+var _default = Footer;
+exports["default"] = _default;

package/cjs/Drawer/web/Header.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var Header = function Header(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
+    as: "header",
+    width: "100%",
+    color: "text.primary"
+  }, props));
+};
+
+Header.displayName = 'Drawer.Header';
+var _default = Header;
+exports["default"] = _default;

package/cjs/Drawer/web/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _Content = _interopRequireDefault(require("./Content"));
+
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_Drawer["default"].Header = _Header["default"];
+_Drawer["default"].Content = _Content["default"];
+_Drawer["default"].Footer = _Footer["default"];
+var _default = _Drawer["default"];
+exports["default"] = _default;

package/cjs/Theme/theme/theme.js

@@ -29,6 +29,8 @@ var _DialogTheme = _interopRequireDefault(require("./../../Dialog/Dialog.theme.j
 
 var _DividerTheme = _interopRequireDefault(require("./../../Divider/Divider.theme.js"));
 
+var _DrawerTheme = _interopRequireDefault(require("./../../Drawer/Drawer.theme.js"));
+
 var _DropdownTheme = _interopRequireDefault(require("./../../Dropdown/Dropdown.theme.js"));
 
 var _FeedbackTheme = _interopRequireDefault(require("./../../Feedback/Feedback.theme.js"));
@@ -86,6 +88,7 @@ var componentThemes = {
   Checkbox$CheckboxSwitch: _CheckboxSwitchTheme["default"],
   Dialog$Dialog: _DialogTheme["default"],
   Divider$Divider: _DividerTheme["default"],
+  Drawer$Drawer: _DrawerTheme["default"],
   Dropdown$Dropdown: _DropdownTheme["default"],
   Feedback$Feedback: _FeedbackTheme["default"],
   Grid$Grid: _GridTheme["default"],

package/cjs/index.js

@@ -131,6 +131,10 @@ var _Feedback = _interopRequireDefault(require("./Feedback"));
 
 exports.Feedback = _Feedback["default"];
 
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
+exports.Drawer = _Drawer["default"];
+
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 
 exports.Skeleton = _Skeleton["default"];

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/Dialog/web/Dialog.js

@@ -22,7 +22,7 @@ export var StyledDialog = styled(Card)(_templateObject || (_templateObject = _ta
 });
 var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var dialog = _ref2.theme.yoga.components.dialog;
-  return "\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
+  return "\n  display: flex;\n  z-index: 3;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
 
 var Dialog = function Dialog(_ref3) {

package/esm/Drawer/Drawer.theme.js

@@ -0,0 +1,16 @@
+var Drawer = function Drawer(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    padding: {
+      top: spacing.small,
+      right: spacing.xxxlarge,
+      bottom: spacing.xxlarge,
+      left: spacing.xxxlarge
+    },
+    width: {
+      "default": 600
+    }
+  };
+};
+
+export default Drawer;

package/esm/Drawer/index.js

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

package/esm/Drawer/web/Drawer.js

@@ -0,0 +1,21 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled from 'styled-components';
+import { node } from 'prop-types';
+import Dialog from '../../Dialog';
+var StyledDrawer = styled(Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  border-radius: 0!important;\n  height: 100%;\n  align-self: flex-end;\n  position: absolute;\n  right: 0;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  transition: 0.25s ease-in-out;\n  @keyframes content {\n    0% {\n      transform: translate3d(100%, 0, 0);\n    }\n  }\n"])), function (_ref) {
+  var drawer = _ref.theme.yoga.components.drawer;
+  return "\n  padding: " + drawer.padding.top + "px " + drawer.padding.right + "px " + drawer.padding.bottom + "px " + drawer.padding.left + "px;\n  width: " + drawer.width["default"] + "px;\n  ";
+});
+
+function Drawer(props) {
+  return /*#__PURE__*/React.createElement(StyledDrawer, props);
+}
+
+Drawer.propTypes = {
+  children: node.isRequired
+};
+export default Drawer;

package/esm/Drawer/web/Drawer.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeProvider, Button } from '../..';
+import Drawer from '.';
+describe('<Drawer />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal drawer', function () {
+    var onActionMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Drawer, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Drawer.Header, null, "Title"), /*#__PURE__*/React.createElement(Drawer.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Drawer.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+    screen.getByText('Title');
+    screen.getByText('Subtitle');
+    var button = screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+    fireEvent.click(button);
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+});

package/esm/Drawer/web/Footer.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Box from '../../Box';
+
+function Footer(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "footer",
+    width: "100%",
+    d: "flex"
+  }, props));
+}
+
+Footer.displayName = 'Drawer.Footer';
+export default Footer;

package/esm/Drawer/web/Header.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Box from '../../Box';
+
+var Header = function Header(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "header",
+    width: "100%",
+    color: "text.primary"
+  }, props));
+};
+
+Header.displayName = 'Drawer.Header';
+export default Header;

package/esm/Drawer/web/index.js

@@ -0,0 +1,8 @@
+import Drawer from './Drawer';
+import Header from './Header';
+import Content from './Content';
+import Footer from './Footer';
+Drawer.Header = Header;
+Drawer.Content = Content;
+Drawer.Footer = Footer;
+export default Drawer;

package/esm/Theme/theme/theme.js

@@ -14,6 +14,7 @@ import _componentThemes_Checkbox$Checkbox from "./../../Checkbox/Checkbox.theme.
 import _componentThemes_Checkbox$CheckboxSwitch from "./../../Checkbox/CheckboxSwitch.theme.js";
 import _componentThemes_Dialog$Dialog from "./../../Dialog/Dialog.theme.js";
 import _componentThemes_Divider$Divider from "./../../Divider/Divider.theme.js";
+import _componentThemes_Drawer$Drawer from "./../../Drawer/Drawer.theme.js";
 import _componentThemes_Dropdown$Dropdown from "./../../Dropdown/Dropdown.theme.js";
 import _componentThemes_Feedback$Feedback from "./../../Feedback/Feedback.theme.js";
 import _componentThemes_Grid$Grid from "./../../Grid/Grid.theme.js";
@@ -47,6 +48,7 @@ var componentThemes = {
   Checkbox$CheckboxSwitch: _componentThemes_Checkbox$CheckboxSwitch,
   Dialog$Dialog: _componentThemes_Dialog$Dialog,
   Divider$Divider: _componentThemes_Divider$Divider,
+  Drawer$Drawer: _componentThemes_Drawer$Drawer,
   Dropdown$Dropdown: _componentThemes_Dropdown$Dropdown,
   Feedback$Feedback: _componentThemes_Feedback$Feedback,
   Grid$Grid: _componentThemes_Grid$Grid,

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.47.0",
+  "version": "7.49.0",
   "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": "9c58e2b894600bb70deab02ded7614310df1d9a1",
+  "gitHead": "3862cde61ad643c9eb46ae601081f376e9d76196",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"