@gympass/yoga 7.34.0 → 7.36.0

package/cjs/Checkbox/web/Checkbox.js

@@ -187,7 +187,7 @@ var Checkbox = function Checkbox(_ref8) {
 };
 
 Checkbox.propTypes = {
-  label: _propTypes.string,
+  label: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.node]),
 
   /** short helper text under checkbox */
   helper: _propTypes.string,

package/cjs/Dialog/web/Footer.js

@@ -15,8 +15,8 @@ var Footer = function Footer(props) {
   return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
     as: "footer",
     d: "flex",
-    gap: "large",
-    ml: "auto"
+    justifyContent: "center",
+    gap: "large"
   }, props));
 };
 

package/cjs/Feedback/Feedback.theme.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Feedback = function Feedback() {
+  return {
+    text: {
+      maxWidth: 520
+    }
+  };
+};
+
+var _default = Feedback;
+exports["default"] = _default;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _propTypes = require("prop-types");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _yogaIcons = require("@gympass/yoga-icons");
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _StyledFeedback = require("./StyledFeedback");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || 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 ICON_SIZE = 64;
+var VARIANT_ICONS = {
+  success: {
+    as: _yogaIcons.CheckedFull,
+    fill: 'hope'
+  },
+  informative: {
+    as: _yogaIcons.AlertCircle,
+    fill: 'relax'
+  },
+  attention: {
+    as: _yogaIcons.AlertTriangle,
+    fill: 'brandingVerve'
+  }
+};
+
+function isChildFromComponent(child, component) {
+  return child.type.displayName === component.displayName;
+}
+
+function Feedback(_ref) {
+  var variant = _ref.variant,
+      title = _ref.title,
+      description = _ref.description,
+      children = _ref.children;
+  var iconProps = VARIANT_ICONS[variant];
+  var primaryButton;
+  var secondaryButton;
+
+  var titleElement = /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Title, null, title);
+
+  function defineCompoundComponents() {
+    _react["default"].Children.forEach(children, function (child) {
+      if (isChildFromComponent(child, _StyledFeedback.PrimaryButton)) primaryButton = child;
+      if (isChildFromComponent(child, _StyledFeedback.SecondaryButton)) secondaryButton = child;
+      if (isChildFromComponent(child, _StyledFeedback.Title)) titleElement = child;
+    });
+  }
+
+  defineCompoundComponents();
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    ph: "medium",
+    pv: "xxlarge",
+    minHeight: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-end",
+    bg: "white"
+  }, /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Content, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+    size: ICON_SIZE,
+    mb: "large",
+    "data-testid": "feedback-icon"
+  })), /*#__PURE__*/_react["default"].createElement(_StyledFeedback.TextContainer, null, titleElement, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    mt: "small",
+    color: "deep"
+  }, description)), /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Actions, {
+    mt: "xxxlarge"
+  }, primaryButton, secondaryButton)));
+}
+
+Feedback.propTypes = {
+  variant: (0, _propTypes.oneOf)(Object.keys(VARIANT_ICONS)).isRequired,
+  title: _propTypes.string,
+  description: _propTypes.string.isRequired,
+  children: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)(_propTypes.node), _propTypes.node])
+};
+Feedback.defaultProps = {
+  title: undefined,
+  children: undefined
+};
+var _default = Feedback;
+exports["default"] = _default;

package/cjs/Feedback/web/StyledFeedback.js

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

package/cjs/Feedback/web/index.js

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

package/cjs/Header/web/Header.js

@@ -11,10 +11,10 @@ var _propTypes = require("prop-types");
 
 var _yogaHelpers = require("@gympass/yoga-helpers");
 
-var _GympassLogo = _interopRequireDefault(require("./GympassLogo"));
-
 var _Box = _interopRequireDefault(require("../../Box"));
 
+var _Logo = _interopRequireDefault(require("./Logo"));
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -32,7 +32,8 @@ var StyledHeader = (0, _styledComponents["default"])(_Box["default"])(_templateO
 
 var Header = function Header(_ref2) {
   var link = _ref2.link,
-      children = _ref2.children;
+      children = _ref2.children,
+      logo = _ref2.logo;
   return /*#__PURE__*/_react["default"].createElement(StyledHeader, {
     as: "header",
     d: "flex",
@@ -42,7 +43,11 @@ var Header = function Header(_ref2) {
     w: "100%"
   }, link ? /*#__PURE__*/_react["default"].createElement("a", {
     href: link
-  }, /*#__PURE__*/_react["default"].createElement(_GympassLogo["default"], null)) : /*#__PURE__*/_react["default"].createElement(_GympassLogo["default"], null), children);
+  }, /*#__PURE__*/_react["default"].createElement(_Logo["default"], {
+    customLogo: logo
+  })) : /*#__PURE__*/_react["default"].createElement(_Logo["default"], {
+    customLogo: logo
+  }), children);
 };
 
 Header.propTypes = {
@@ -50,11 +55,15 @@ Header.propTypes = {
   link: _propTypes.string,
 
   /** Use children to add whatever you want inside the header */
-  children: _propTypes.node
+  children: _propTypes.node,
+
+  /** Use logo to change headers image */
+  logo: _propTypes.elementType
 };
 Header.defaultProps = {
   link: null,
-  children: null
+  children: null,
+  logo: null
 };
 var _default = Header;
 exports["default"] = _default;

package/cjs/Header/web/Logo.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _GympassLogo = _interopRequireDefault(require("./GympassLogo"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Logo = function Logo(_ref) {
+  var CustomLogo = _ref.customLogo;
+  return CustomLogo ? /*#__PURE__*/_react["default"].createElement(CustomLogo, null) : /*#__PURE__*/_react["default"].createElement(_GympassLogo["default"], null);
+};
+
+Logo.propTypes = {
+  customLogo: _propTypes.elementType
+};
+Logo.defaultProps = {
+  customLogo: null
+};
+var _default = Logo;
+exports["default"] = _default;

package/cjs/Theme/theme/theme.js

@@ -31,6 +31,8 @@ var _DividerTheme = _interopRequireDefault(require("./../../Divider/Divider.them
 
 var _DropdownTheme = _interopRequireDefault(require("./../../Dropdown/Dropdown.theme.js"));
 
+var _FeedbackTheme = _interopRequireDefault(require("./../../Feedback/Feedback.theme.js"));
+
 var _GridTheme = _interopRequireDefault(require("./../../Grid/Grid.theme.js"));
 
 var _HeaderTheme = _interopRequireDefault(require("./../../Header/Header.theme.js"));
@@ -81,6 +83,7 @@ var componentThemes = {
   Dialog$Dialog: _DialogTheme["default"],
   Divider$Divider: _DividerTheme["default"],
   Dropdown$Dropdown: _DropdownTheme["default"],
+  Feedback$Feedback: _FeedbackTheme["default"],
   Grid$Grid: _GridTheme["default"],
   Header$Header: _HeaderTheme["default"],
   Heading$Heading: _HeadingTheme["default"],

package/cjs/index.js

@@ -123,6 +123,10 @@ var _Heading = _interopRequireDefault(require("./Heading"));
 
 exports.Heading = _Heading["default"];
 
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+exports.Feedback = _Feedback["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/esm/Checkbox/web/Checkbox.js

@@ -9,7 +9,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React, { useEffect, useRef } from 'react';
-import { bool, string, shape } from 'prop-types';
+import { bool, string, shape, oneOfType, node } from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
 import { Check, Rectangle } from '@gympass/yoga-icons';
@@ -165,7 +165,7 @@ var Checkbox = function Checkbox(_ref8) {
 };
 
 Checkbox.propTypes = {
-  label: string,
+  label: oneOfType([string, node]),
 
   /** short helper text under checkbox */
   helper: string,

package/esm/Dialog/web/Footer.js

@@ -7,8 +7,8 @@ var Footer = function Footer(props) {
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "footer",
     d: "flex",
-    gap: "large",
-    ml: "auto"
+    justifyContent: "center",
+    gap: "large"
   }, props));
 };
 

package/esm/Feedback/Feedback.theme.js

@@ -0,0 +1,9 @@
+var Feedback = function Feedback() {
+  return {
+    text: {
+      maxWidth: 520
+    }
+  };
+};
+
+export default Feedback;

package/esm/Feedback/index.js

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

package/esm/Feedback/web/Feedback.js

@@ -0,0 +1,79 @@
+function _extends() { _extends = Object.assign || 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 { arrayOf, node, oneOf, oneOfType, string } from 'prop-types';
+import React from 'react';
+import { CheckedFull, AlertCircle, AlertTriangle } from '@gympass/yoga-icons';
+import Icon from '../../Icon';
+import Box from '../../Box';
+import Text from '../../Text';
+import { Actions, Content, Title, PrimaryButton, SecondaryButton, TextContainer } from './StyledFeedback';
+var ICON_SIZE = 64;
+var VARIANT_ICONS = {
+  success: {
+    as: CheckedFull,
+    fill: 'hope'
+  },
+  informative: {
+    as: AlertCircle,
+    fill: 'relax'
+  },
+  attention: {
+    as: AlertTriangle,
+    fill: 'brandingVerve'
+  }
+};
+
+function isChildFromComponent(child, component) {
+  return child.type.displayName === component.displayName;
+}
+
+function Feedback(_ref) {
+  var variant = _ref.variant,
+      title = _ref.title,
+      description = _ref.description,
+      children = _ref.children;
+  var iconProps = VARIANT_ICONS[variant];
+  var primaryButton;
+  var secondaryButton;
+  var titleElement = /*#__PURE__*/React.createElement(Title, null, title);
+
+  function defineCompoundComponents() {
+    React.Children.forEach(children, function (child) {
+      if (isChildFromComponent(child, PrimaryButton)) primaryButton = child;
+      if (isChildFromComponent(child, SecondaryButton)) secondaryButton = child;
+      if (isChildFromComponent(child, Title)) titleElement = child;
+    });
+  }
+
+  defineCompoundComponents();
+  return /*#__PURE__*/React.createElement(Box, {
+    ph: "medium",
+    pv: "xxlarge",
+    minHeight: "100%",
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-end",
+    bg: "white"
+  }, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+    size: ICON_SIZE,
+    mb: "large",
+    "data-testid": "feedback-icon"
+  })), /*#__PURE__*/React.createElement(TextContainer, null, titleElement, /*#__PURE__*/React.createElement(Text, {
+    mt: "small",
+    color: "deep"
+  }, description)), /*#__PURE__*/React.createElement(Actions, {
+    mt: "xxxlarge"
+  }, primaryButton, secondaryButton)));
+}
+
+Feedback.propTypes = {
+  variant: oneOf(Object.keys(VARIANT_ICONS)).isRequired,
+  title: string,
+  description: string.isRequired,
+  children: oneOfType([arrayOf(node), node])
+};
+Feedback.defaultProps = {
+  title: undefined,
+  children: undefined
+};
+export default Feedback;

package/esm/Feedback/web/StyledFeedback.js

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

package/esm/Feedback/web/index.js

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

package/esm/Header/web/Header.js

@@ -4,10 +4,10 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { string, node } from 'prop-types';
+import { string, node, elementType } from 'prop-types';
 import { media } from '@gympass/yoga-helpers';
-import GympassLogo from './GympassLogo';
 import Box from '../../Box';
+import Logo from './Logo';
 var StyledHeader = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var header = _ref.theme.yoga.components.header;
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", "\n  "])), header.padding.xxs, header.height.xxs, media.lg(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", "px;\n      height: ", "px;\n    "])), header.padding.lg, header.height.lg));
@@ -15,7 +15,8 @@ var StyledHeader = styled(Box)(_templateObject || (_templateObject = _taggedTemp
 
 var Header = function Header(_ref2) {
   var link = _ref2.link,
-      children = _ref2.children;
+      children = _ref2.children,
+      logo = _ref2.logo;
   return /*#__PURE__*/React.createElement(StyledHeader, {
     as: "header",
     d: "flex",
@@ -25,7 +26,11 @@ var Header = function Header(_ref2) {
     w: "100%"
   }, link ? /*#__PURE__*/React.createElement("a", {
     href: link
-  }, /*#__PURE__*/React.createElement(GympassLogo, null)) : /*#__PURE__*/React.createElement(GympassLogo, null), children);
+  }, /*#__PURE__*/React.createElement(Logo, {
+    customLogo: logo
+  })) : /*#__PURE__*/React.createElement(Logo, {
+    customLogo: logo
+  }), children);
 };
 
 Header.propTypes = {
@@ -33,10 +38,14 @@ Header.propTypes = {
   link: string,
 
   /** Use children to add whatever you want inside the header */
-  children: node
+  children: node,
+
+  /** Use logo to change headers image */
+  logo: elementType
 };
 Header.defaultProps = {
   link: null,
-  children: null
+  children: null,
+  logo: null
 };
 export default Header;

package/esm/Header/web/Logo.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { elementType } from 'prop-types';
+import GympassLogo from './GympassLogo';
+
+var Logo = function Logo(_ref) {
+  var CustomLogo = _ref.customLogo;
+  return CustomLogo ? /*#__PURE__*/React.createElement(CustomLogo, null) : /*#__PURE__*/React.createElement(GympassLogo, null);
+};
+
+Logo.propTypes = {
+  customLogo: elementType
+};
+Logo.defaultProps = {
+  customLogo: null
+};
+export default Logo;

package/esm/Theme/theme/theme.js

@@ -15,6 +15,7 @@ import _componentThemes_Checkbox$CheckboxSwitch from "./../../Checkbox/CheckboxS
 import _componentThemes_Dialog$Dialog from "./../../Dialog/Dialog.theme.js";
 import _componentThemes_Divider$Divider from "./../../Divider/Divider.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";
 import _componentThemes_Header$Header from "./../../Header/Header.theme.js";
 import _componentThemes_Heading$Heading from "./../../Heading/Heading.theme.js";
@@ -45,6 +46,7 @@ var componentThemes = {
   Dialog$Dialog: _componentThemes_Dialog$Dialog,
   Divider$Divider: _componentThemes_Divider$Divider,
   Dropdown$Dropdown: _componentThemes_Dropdown$Dropdown,
+  Feedback$Feedback: _componentThemes_Feedback$Feedback,
   Grid$Grid: _componentThemes_Grid$Grid,
   Header$Header: _componentThemes_Header$Header,
   Heading$Heading: _componentThemes_Heading$Heading,

package/esm/index.js

@@ -26,4 +26,5 @@ import Divider from './Divider';
 import Header from './Header';
 import Banner from './Banner';
 import Heading from './Heading';
-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, Banner, 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, Banner, Heading, Feedback };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.34.0",
+  "version": "7.36.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -49,7 +49,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "4ae69799109ce02a4036fef8ca8a8974dfdad93b",
+  "gitHead": "a0e72e8e9d72ab13d5c02db0e4c37bd5b719aad1",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"