@gympass/yoga 7.31.0 → 7.33.0

package/cjs/Banner/Banner.theme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Banner = function Banner(_ref) {
+  var colors = _ref.colors,
+      radii = _ref.radii;
+  return {
+    defaultBackgroundColor: colors.feedback.informative.light,
+    border: {
+      radius: radii.small
+    }
+  };
+};
+
+var _default = Banner;
+exports["default"] = _default;

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

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _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=_interopRequireDefault(require("styled-components"));var _yogaSystem=require("@gympass/yoga-system");var _propTypes=require("prop-types");var _Box=_interopRequireDefault(require("../../Box"));var _Button=_interopRequireDefault(require("../../Button"));var _Icon=_interopRequireDefault(require("../../Icon"));var _Text=_interopRequireDefault(require("../../Text"));var _excluded=["button"],_excluded2=["icon","variant","message","primaryButton","secondaryButton"];var _templateObject;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var StyledBanner=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  ","\n\n  ","\n  \n  ","\n"])),function(_ref){var variant=_ref.variant,_ref$theme$yoga=_ref.theme.yoga,banner=_ref$theme$yoga.components.banner,spacing=_ref$theme$yoga.spacing,_ref$theme$yoga$color=_ref$theme$yoga.colors.feedback[variant],backgroundColor=_ref$theme$yoga$color===void 0?{light:banner.defaultBackgroundColor}:_ref$theme$yoga$color;return"\n    background-color: "+backgroundColor.light+";\n    padding: "+spacing.xxsmall+"px\n      "+spacing.small+"px;\n    border-radius: "+banner.border.radius+"px;\n  ";},_yogaSystem.margins,_yogaSystem.borders);var BannerActionButton=function BannerActionButton(_ref2){var _ref2$button=_ref2.button,label=_ref2$button.label,action=_ref2$button.action,props=(0,_objectWithoutProperties2["default"])(_ref2,_excluded);return _react["default"].createElement(_Box["default"],(0,_extends2["default"])({as:_Button["default"].Text,small:true,secondary:true,onPress:action},props),label);};BannerActionButton.propTypes={button:(0,_propTypes.shape)({label:_propTypes.string.isRequired,action:_propTypes.func.isRequired}).isRequired};var Banner=(0,_react.forwardRef)(function(props,ref){var icon=props.icon,variant=props.variant,message=props.message,primaryButton=props.primaryButton,secondaryButton=props.secondaryButton,rest=(0,_objectWithoutProperties2["default"])(props,_excluded2);return _react["default"].createElement(StyledBanner,(0,_extends2["default"])({ref:ref,variant:variant},rest),_react["default"].createElement(_Box["default"],{flexDirection:"row",flex:1,alignItems:"center"},icon&&_react["default"].createElement(_Icon["default"],{as:icon,size:"medium",fill:"secondary",marginRight:"xxsmall"}),_react["default"].createElement(_Text["default"].Small,{flex:1,marginVertical:"xxsmall"},message),primaryButton&&!secondaryButton&&_react["default"].createElement(BannerActionButton,{button:primaryButton,marginLeft:"xxsmall"})),primaryButton&&secondaryButton&&_react["default"].createElement(_Box["default"],{display:"flex",flex:1,justifyContent:"flex-end",flexDirection:"row",marginBottom:"xxsmall"},_react["default"].createElement(BannerActionButton,{button:primaryButton,marginRight:"xxxsmall"}),_react["default"].createElement(BannerActionButton,{button:secondaryButton})));});var BannerActionButtonType=(0,_propTypes.shape)({label:_propTypes.string.isRequired,action:_propTypes.func.isRequired});Banner.propTypes={icon:_propTypes.elementType,variant:(0,_propTypes.oneOf)(['success','informative','attention']),message:_propTypes.string.isRequired,primaryButton:BannerActionButtonType,secondaryButton:function secondaryButton(props,propName,componentName){var primaryButton=props.primaryButton;if(!primaryButton&&!!props[propName]){return new Error("The "+propName+" must only be used ensemble with the primaryButton.");}return(0,_propTypes.checkPropTypes)((0,_defineProperty2["default"])({},propName,BannerActionButtonType),props,'prop',componentName);}};Banner.defaultProps={icon:undefined,variant:'informative',primaryButton:undefined,secondaryButton:undefined};var _default=Banner;exports["default"]=_default;

package/cjs/Banner/native/index.js

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

package/cjs/Banner/web/Banner.js

@@ -0,0 +1,148 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _yogaSystem = require("@gympass/yoga-system");
+
+var _propTypes = require("prop-types");
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _excluded = ["button"],
+    _excluded2 = ["icon", "variant", "message", "primaryButton", "secondaryButton"];
+
+var _templateObject;
+
+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 _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); }
+
+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; }
+
+var StyledBanner = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var variant = _ref.variant,
+      _ref$theme$yoga = _ref.theme.yoga,
+      banner = _ref$theme$yoga.components.banner,
+      spacing = _ref$theme$yoga.spacing,
+      _ref$theme$yoga$color = _ref$theme$yoga.colors.feedback[variant],
+      backgroundColor = _ref$theme$yoga$color === void 0 ? {
+    light: banner.defaultBackgroundColor
+  } : _ref$theme$yoga$color;
+  return "\n    background-color: " + backgroundColor.light + ";\n    padding: " + spacing.xxsmall + "px\n      " + spacing.small + "px;\n    border-radius: " + banner.border.radius + "px;\n  ";
+}, _yogaSystem.margins, _yogaSystem.paddings, _yogaSystem.borders);
+
+var BannerActionButton = function BannerActionButton(_ref2) {
+  var _ref2$button = _ref2.button,
+      label = _ref2$button.label,
+      action = _ref2$button.action,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
+    as: _Button["default"].Text,
+    small: true,
+    secondary: true,
+    onClick: action
+  }, props), label);
+};
+
+BannerActionButton.propTypes = {
+  button: (0, _propTypes.shape)({
+    label: _propTypes.string.isRequired,
+    action: _propTypes.func.isRequired
+  }).isRequired
+};
+/** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
+
+var Banner = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var icon = props.icon,
+      variant = props.variant,
+      message = props.message,
+      primaryButton = props.primaryButton,
+      secondaryButton = props.secondaryButton,
+      rest = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  return /*#__PURE__*/_react["default"].createElement(StyledBanner, _extends({
+    ref: ref,
+    variant: variant
+  }, rest), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    display: "flex",
+    flex: 1,
+    alignItems: "center"
+  }, icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    as: icon,
+    size: "medium",
+    fill: "secondary",
+    marginRight: "xxsmall"
+  }), /*#__PURE__*/_react["default"].createElement(_Text["default"].Small, {
+    flex: 1,
+    marginVertical: "xxsmall"
+  }, message), primaryButton && !secondaryButton && /*#__PURE__*/_react["default"].createElement(BannerActionButton, {
+    button: primaryButton,
+    marginLeft: "xxsmall"
+  })), primaryButton && secondaryButton && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    display: "flex",
+    flex: 1,
+    justifyContent: "flex-end",
+    marginBottom: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(BannerActionButton, {
+    button: primaryButton,
+    marginRight: "xxxsmall"
+  }), /*#__PURE__*/_react["default"].createElement(BannerActionButton, {
+    button: secondaryButton
+  })));
+});
+var BannerActionButtonType = (0, _propTypes.shape)({
+  label: _propTypes.string.isRequired,
+  action: _propTypes.func.isRequired
+});
+Banner.propTypes = {
+  /** SVG to be rendered. */
+  icon: _propTypes.elementType,
+
+  /** style the banner following the theme (success, informative, attention) */
+  variant: (0, _propTypes.oneOf)(['success', 'informative', 'attention']),
+
+  /** the message to display */
+  message: _propTypes.string.isRequired,
+
+  /** the label and action fuction are required for banner action buttons  */
+  primaryButton: BannerActionButtonType,
+
+  /** the secondary button should only be used assemble the primary button (the label and action fuction are required for banner action buttons).  */
+  secondaryButton: function secondaryButton(props, propName, componentName) {
+    var _checkPropTypes;
+
+    var primaryButton = props.primaryButton;
+
+    if (!primaryButton && !!props[propName]) {
+      return new Error("The " + propName + " must only be used ensemble with the primaryButton.");
+    }
+
+    return (0, _propTypes.checkPropTypes)((_checkPropTypes = {}, _checkPropTypes[propName] = BannerActionButtonType, _checkPropTypes), props, 'prop', componentName);
+  }
+};
+Banner.defaultProps = {
+  icon: undefined,
+  variant: 'informative',
+  primaryButton: undefined,
+  secondaryButton: undefined
+};
+var _default = Banner;
+exports["default"] = _default;

package/cjs/Banner/web/index.js

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

package/cjs/Heading/Heading.theme.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Heading = function Heading(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    background: colors.white,
+    padding: {
+      vertical: spacing.small,
+      horizontal: spacing.huge
+    },
+    height: 48,
+    button: {
+      width: 48,
+      height: spacing.xxlarge
+    }
+  };
+};
+
+var _default = Heading;
+exports["default"] = _default;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _yogaIcons = require("@gympass/yoga-icons");
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+var _excluded = ["onClick"];
+
+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); }
+
+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; }
+
+var BackButton = function BackButton(_ref) {
+  var onClick = _ref.onClick,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"].Icon, _extends({}, props, {
+    icon: _yogaIcons.ArrowLeft,
+    inverted: true,
+    onClick: onClick
+  }));
+};
+
+BackButton.propTypes = {
+  onClick: _propTypes["default"].func.isRequired
+};
+var _default = BackButton;
+exports["default"] = _default;

package/cjs/Heading/web/Heading.js

@@ -0,0 +1,55 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StyledHeading = _interopRequireWildcard(require("./StyledHeading"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+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 }; }
+
+var Heading = function Heading(_ref) {
+  var children = _ref.children;
+  var backButton = null;
+  var title = null;
+  var rightButtons = [];
+  if (!children) throw new Error('Heading needs at least one child');
+
+  var defineComponent = function defineComponent(child) {
+    if (child.type.name === 'Title') title = child;
+    if (child.type.name === 'BackButton') backButton = child;
+    if (child.type.name === 'RightButton') rightButtons.push(child);
+  };
+
+  if (Array.isArray(children)) {
+    children.forEach(function (child) {
+      return defineComponent(child);
+    });
+  } else {
+    defineComponent(children);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_StyledHeading["default"], null, backButton || /*#__PURE__*/_react["default"].createElement(_StyledHeading.Button, null), title || /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    w: "100%"
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    display: "flex",
+    "justify-content": "space-between",
+    alignItems: "center"
+  }, rightButtons.length > 0 ? rightButtons : /*#__PURE__*/_react["default"].createElement(_StyledHeading.Button, null)));
+};
+
+Heading.propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
+};
+Heading.defaultProps = {};
+var _default = Heading;
+exports["default"] = _default;

package/cjs/Heading/web/RightButton.js

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
+
+var _excluded = ["onClick", "icon"];
+
+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); }
+
+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; }
+
+var RightButton = function RightButton(_ref) {
+  var onClick = _ref.onClick,
+      icon = _ref.icon,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"].Icon, _extends({}, props, {
+    icon: icon,
+    inverted: true,
+    onClick: onClick
+  }));
+};
+
+RightButton.propTypes = {
+  onClick: _propTypes["default"].func.isRequired,
+  icon: _propTypes["default"].node.isRequired
+};
+var _default = RightButton;
+exports["default"] = _default;

package/cjs/Heading/web/StyledHeading.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Button = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+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 StyledHeading = _styledComponents["default"].header(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var heading = _ref.theme.yoga.components.heading;
+  return "\n    background: " + heading.background + ";\n    padding: " + heading.padding.vertical + "px;\n    width: 100%;\n    min-height: " + heading.height + "px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    @media(min-width: 769px) {\n        padding: " + heading.padding.vertical + "px " + heading.padding.horizontal + "px;\n    }\n  ";
+});
+
+var Button = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var heading = _ref2.theme.yoga.components.heading;
+  return "\n    width: " + heading.button.width + "px;\n    height: " + heading.button.height + "px;\n  ";
+});
+
+exports.Button = Button;
+var _default = StyledHeading;
+exports["default"] = _default;

package/cjs/Heading/web/Title.js

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Text = _interopRequireDefault(require("../../Text"));
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _excluded = ["children"];
+
+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); }
+
+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; }
+
+var Title = function Title(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    w: "100%",
+    textAlign: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_Text["default"].Medium, _extends({}, props, {
+    size: "small",
+    as: "h1"
+  }), children));
+};
+
+Title.propTypes = {
+  children: _propTypes["default"].string.isRequired
+};
+var _default = Title;
+exports["default"] = _default;

package/cjs/Heading/web/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Heading = _interopRequireDefault(require("./Heading"));
+
+var _Title = _interopRequireDefault(require("./Title"));
+
+var _BackButton = _interopRequireDefault(require("./BackButton"));
+
+var _RightButton = _interopRequireDefault(require("./RightButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_Heading["default"].Title = _Title["default"];
+_Heading["default"].BackButton = _BackButton["default"];
+_Heading["default"].RightButton = _RightButton["default"];
+var _default = _Heading["default"];
+exports["default"] = _default;

package/cjs/Input/web/Fieldset.js

@@ -19,7 +19,7 @@ var Fieldset = _styledComponents["default"].fieldset(_templateObject || (_templa
       _ref$theme$yoga = _ref.theme.yoga,
       colors = _ref$theme$yoga.colors,
       input = _ref$theme$yoga.components.input;
-  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n    height: " + input.height + "px;\n\n    padding-left: " + (input.label.padding.left + input.border.radius) + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border-width: " + input.border.width + "px;\n    border-style: solid;\n    border-color: " + (error ? colors.feedback.attention[1] : input.border.color["default"]) + ";\n\n    " + (value && !error ? "border-color: " + input.border.color.typed + ";" : '') + "\n\n    &:hover, &:focus-within {\n      border-color: " + (error ? colors.feedback.attention[1] : input.border.color.typed) + ";\n\n      " + (disabled ? "border-color: " + colors.elements.lineAndBorders + ";" : '') + "\n    }\n\n    \n  ";
+  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n    height: " + input.height + "px;\n\n    padding-left: " + (input.label.padding.left + input.border.radius) + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border-width: " + input.border.width + "px;\n    border-style: solid;\n    border-color: " + (error ? colors.feedback.attention[1] : input.border.color["default"]) + ";\n\n    " + (value && !error ? "border-color: " + input.border.color.typed + ";" : '') + "\n\n    " + (disabled ? "border-color: " + colors.elements.lineAndBorders + ";" : '') + "\n\n    &:hover, &:focus-within { \n      &:not(:disabled) {\n        border-color: " + (error ? colors.feedback.attention[1] : input.border.color.typed) + ";\n      } \n    }\n\n    \n  ";
 });
 
 var _default = Fieldset;

package/cjs/Theme/theme/theme.js

@@ -9,6 +9,8 @@ var _AutoCompleteTheme = _interopRequireDefault(require("./../../AutoComplete/Au
 
 var _AvatarTheme = _interopRequireDefault(require("./../../Avatar/Avatar.theme.js"));
 
+var _BannerTheme = _interopRequireDefault(require("./../../Banner/Banner.theme.js"));
+
 var _BottomSheetTheme = _interopRequireDefault(require("./../../BottomSheet/BottomSheet.theme.js"));
 
 var _ButtonTheme = _interopRequireDefault(require("./../../Button/Button.theme.js"));
@@ -33,6 +35,8 @@ var _GridTheme = _interopRequireDefault(require("./../../Grid/Grid.theme.js"));
 
 var _HeaderTheme = _interopRequireDefault(require("./../../Header/Header.theme.js"));
 
+var _HeadingTheme = _interopRequireDefault(require("./../../Heading/Heading.theme.js"));
+
 var _IconTheme = _interopRequireDefault(require("./../../Icon/Icon.theme.js"));
 
 var _InputTheme = _interopRequireDefault(require("./../../Input/Input.theme.js"));
@@ -66,6 +70,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var componentThemes = {
   AutoComplete$AutoComplete: _AutoCompleteTheme["default"],
   Avatar$Avatar: _AvatarTheme["default"],
+  Banner$Banner: _BannerTheme["default"],
   BottomSheet$BottomSheet: _BottomSheetTheme["default"],
   Button$Button: _ButtonTheme["default"],
   Card$CardNative: _CardNativeTheme["default"],
@@ -78,6 +83,7 @@ var componentThemes = {
   Dropdown$Dropdown: _DropdownTheme["default"],
   Grid$Grid: _GridTheme["default"],
   Header$Header: _HeaderTheme["default"],
+  Heading$Heading: _HeadingTheme["default"],
   Icon$Icon: _IconTheme["default"],
   Input$Input: _InputTheme["default"],
   List$List: _ListTheme["default"],

package/cjs/index.js

@@ -115,6 +115,14 @@ var _Header = _interopRequireDefault(require("./Header"));
 
 exports.Header = _Header["default"];
 
+var _Banner = _interopRequireDefault(require("./Banner"));
+
+exports.Banner = _Banner["default"];
+
+var _Heading = _interopRequireDefault(require("./Heading"));
+
+exports.Heading = _Heading["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,"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,"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"));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,"Slider",{enumerable:true,get:function get(){return _Slider["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 _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;}

package/esm/Banner/Banner.theme.js

@@ -0,0 +1,12 @@
+var Banner = function Banner(_ref) {
+  var colors = _ref.colors,
+      radii = _ref.radii;
+  return {
+    defaultBackgroundColor: colors.feedback.informative.light,
+    border: {
+      radius: radii.small
+    }
+  };
+};
+
+export default Banner;

package/esm/Banner/index.js

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

package/esm/Banner/web/Banner.js

@@ -0,0 +1,128 @@
+var _excluded = ["button"],
+    _excluded2 = ["icon", "variant", "message", "primaryButton", "secondaryButton"];
+
+var _templateObject;
+
+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); }
+
+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 React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { borders, margins, paddings } from '@gympass/yoga-system';
+import { checkPropTypes, elementType, func, oneOf, shape, string } from 'prop-types';
+import Box from '../../Box';
+import Button from '../../Button';
+import Icon from '../../Icon';
+import Text from '../../Text';
+var StyledBanner = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var variant = _ref.variant,
+      _ref$theme$yoga = _ref.theme.yoga,
+      banner = _ref$theme$yoga.components.banner,
+      spacing = _ref$theme$yoga.spacing,
+      _ref$theme$yoga$color = _ref$theme$yoga.colors.feedback[variant],
+      backgroundColor = _ref$theme$yoga$color === void 0 ? {
+    light: banner.defaultBackgroundColor
+  } : _ref$theme$yoga$color;
+  return "\n    background-color: " + backgroundColor.light + ";\n    padding: " + spacing.xxsmall + "px\n      " + spacing.small + "px;\n    border-radius: " + banner.border.radius + "px;\n  ";
+}, margins, paddings, borders);
+
+var BannerActionButton = function BannerActionButton(_ref2) {
+  var _ref2$button = _ref2.button,
+      label = _ref2$button.label,
+      action = _ref2$button.action,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: Button.Text,
+    small: true,
+    secondary: true,
+    onClick: action
+  }, props), label);
+};
+
+BannerActionButton.propTypes = {
+  button: shape({
+    label: string.isRequired,
+    action: func.isRequired
+  }).isRequired
+};
+/** A banner is a component that displays a prominent message. It can have related action buttons on it or not. */
+
+var Banner = /*#__PURE__*/forwardRef(function (props, ref) {
+  var icon = props.icon,
+      variant = props.variant,
+      message = props.message,
+      primaryButton = props.primaryButton,
+      secondaryButton = props.secondaryButton,
+      rest = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  return /*#__PURE__*/React.createElement(StyledBanner, _extends({
+    ref: ref,
+    variant: variant
+  }, rest), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flex: 1,
+    alignItems: "center"
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    as: icon,
+    size: "medium",
+    fill: "secondary",
+    marginRight: "xxsmall"
+  }), /*#__PURE__*/React.createElement(Text.Small, {
+    flex: 1,
+    marginVertical: "xxsmall"
+  }, message), primaryButton && !secondaryButton && /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: primaryButton,
+    marginLeft: "xxsmall"
+  })), primaryButton && secondaryButton && /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flex: 1,
+    justifyContent: "flex-end",
+    marginBottom: "xxsmall"
+  }, /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: primaryButton,
+    marginRight: "xxxsmall"
+  }), /*#__PURE__*/React.createElement(BannerActionButton, {
+    button: secondaryButton
+  })));
+});
+var BannerActionButtonType = shape({
+  label: string.isRequired,
+  action: func.isRequired
+});
+Banner.propTypes = {
+  /** SVG to be rendered. */
+  icon: elementType,
+
+  /** style the banner following the theme (success, informative, attention) */
+  variant: oneOf(['success', 'informative', 'attention']),
+
+  /** the message to display */
+  message: string.isRequired,
+
+  /** the label and action fuction are required for banner action buttons  */
+  primaryButton: BannerActionButtonType,
+
+  /** the secondary button should only be used assemble the primary button (the label and action fuction are required for banner action buttons).  */
+  secondaryButton: function secondaryButton(props, propName, componentName) {
+    var _checkPropTypes;
+
+    var primaryButton = props.primaryButton;
+
+    if (!primaryButton && !!props[propName]) {
+      return new Error("The " + propName + " must only be used ensemble with the primaryButton.");
+    }
+
+    return checkPropTypes((_checkPropTypes = {}, _checkPropTypes[propName] = BannerActionButtonType, _checkPropTypes), props, 'prop', componentName);
+  }
+};
+Banner.defaultProps = {
+  icon: undefined,
+  variant: 'informative',
+  primaryButton: undefined,
+  secondaryButton: undefined
+};
+export default Banner;

package/esm/Banner/web/index.js

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

package/esm/Heading/Heading.theme.js

@@ -0,0 +1,18 @@
+var Heading = function Heading(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    background: colors.white,
+    padding: {
+      vertical: spacing.small,
+      horizontal: spacing.huge
+    },
+    height: 48,
+    button: {
+      width: 48,
+      height: spacing.xxlarge
+    }
+  };
+};
+
+export default Heading;

package/esm/Heading/index.js

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

package/esm/Heading/web/BackButton.js

@@ -0,0 +1,26 @@
+var _excluded = ["onClick"];
+
+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); }
+
+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; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ArrowLeft } from '@gympass/yoga-icons';
+import Button from '../../Button';
+
+var BackButton = function BackButton(_ref) {
+  var onClick = _ref.onClick,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button.Icon, _extends({}, props, {
+    icon: ArrowLeft,
+    inverted: true,
+    onClick: onClick
+  }));
+};
+
+BackButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+};
+export default BackButton;

package/esm/Heading/web/Heading.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyledHeading, { Button } from './StyledHeading';
+import Box from '../../Box';
+
+var Heading = function Heading(_ref) {
+  var children = _ref.children;
+  var backButton = null;
+  var title = null;
+  var rightButtons = [];
+  if (!children) throw new Error('Heading needs at least one child');
+
+  var defineComponent = function defineComponent(child) {
+    if (child.type.name === 'Title') title = child;
+    if (child.type.name === 'BackButton') backButton = child;
+    if (child.type.name === 'RightButton') rightButtons.push(child);
+  };
+
+  if (Array.isArray(children)) {
+    children.forEach(function (child) {
+      return defineComponent(child);
+    });
+  } else {
+    defineComponent(children);
+  }
+
+  return /*#__PURE__*/React.createElement(StyledHeading, null, backButton || /*#__PURE__*/React.createElement(Button, null), title || /*#__PURE__*/React.createElement(Box, {
+    w: "100%"
+  }), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    "justify-content": "space-between",
+    alignItems: "center"
+  }, rightButtons.length > 0 ? rightButtons : /*#__PURE__*/React.createElement(Button, null)));
+};
+
+Heading.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+};
+Heading.defaultProps = {};
+export default Heading;

package/esm/Heading/web/RightButton.js

@@ -0,0 +1,27 @@
+var _excluded = ["onClick", "icon"];
+
+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); }
+
+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; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../Button';
+
+var RightButton = function RightButton(_ref) {
+  var onClick = _ref.onClick,
+      icon = _ref.icon,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button.Icon, _extends({}, props, {
+    icon: icon,
+    inverted: true,
+    onClick: onClick
+  }));
+};
+
+RightButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  icon: PropTypes.node.isRequired
+};
+export default RightButton;

package/esm/Heading/web/StyledHeading.js

@@ -0,0 +1,14 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+var StyledHeading = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var heading = _ref.theme.yoga.components.heading;
+  return "\n    background: " + heading.background + ";\n    padding: " + heading.padding.vertical + "px;\n    width: 100%;\n    min-height: " + heading.height + "px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    @media(min-width: 769px) {\n        padding: " + heading.padding.vertical + "px " + heading.padding.horizontal + "px;\n    }\n  ";
+});
+export var Button = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var heading = _ref2.theme.yoga.components.heading;
+  return "\n    width: " + heading.button.width + "px;\n    height: " + heading.button.height + "px;\n  ";
+});
+export default StyledHeading;

package/esm/Heading/web/Title.js

@@ -0,0 +1,28 @@
+var _excluded = ["children"];
+
+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); }
+
+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; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from '../../Text';
+import Box from '../../Box';
+
+var Title = function Title(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, {
+    w: "100%",
+    textAlign: "center"
+  }, /*#__PURE__*/React.createElement(Text.Medium, _extends({}, props, {
+    size: "small",
+    as: "h1"
+  }), children));
+};
+
+Title.propTypes = {
+  children: PropTypes.string.isRequired
+};
+export default Title;

package/esm/Heading/web/index.js

@@ -0,0 +1,8 @@
+import Heading from './Heading';
+import Title from './Title';
+import BackButton from './BackButton';
+import RightButton from './RightButton';
+Heading.Title = Title;
+Heading.BackButton = BackButton;
+Heading.RightButton = RightButton;
+export default Heading;

package/esm/Input/web/Fieldset.js

@@ -11,6 +11,6 @@ var Fieldset = styled.fieldset(_templateObject || (_templateObject = _taggedTemp
       _ref$theme$yoga = _ref.theme.yoga,
       colors = _ref$theme$yoga.colors,
       input = _ref$theme$yoga.components.input;
-  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n    height: " + input.height + "px;\n\n    padding-left: " + (input.label.padding.left + input.border.radius) + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border-width: " + input.border.width + "px;\n    border-style: solid;\n    border-color: " + (error ? colors.feedback.attention[1] : input.border.color["default"]) + ";\n\n    " + (value && !error ? "border-color: " + input.border.color.typed + ";" : '') + "\n\n    &:hover, &:focus-within {\n      border-color: " + (error ? colors.feedback.attention[1] : input.border.color.typed) + ";\n\n      " + (disabled ? "border-color: " + colors.elements.lineAndBorders + ";" : '') + "\n    }\n\n    \n  ";
+  return "\n    width: " + (full ? '100%' : input.width + "px") + ";\n    height: " + input.height + "px;\n\n    padding-left: " + (input.label.padding.left + input.border.radius) + "px;\n\n    border-radius: " + input.border.radius + "px;\n    border-width: " + input.border.width + "px;\n    border-style: solid;\n    border-color: " + (error ? colors.feedback.attention[1] : input.border.color["default"]) + ";\n\n    " + (value && !error ? "border-color: " + input.border.color.typed + ";" : '') + "\n\n    " + (disabled ? "border-color: " + colors.elements.lineAndBorders + ";" : '') + "\n\n    &:hover, &:focus-within { \n      &:not(:disabled) {\n        border-color: " + (error ? colors.feedback.attention[1] : input.border.color.typed) + ";\n      } \n    }\n\n    \n  ";
 });
 export default Fieldset;

package/esm/Theme/theme/theme.js

@@ -4,6 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import { merge } from '@gympass/yoga-common';
 import _componentThemes_AutoComplete$AutoComplete from "./../../AutoComplete/AutoComplete.theme.js";
 import _componentThemes_Avatar$Avatar from "./../../Avatar/Avatar.theme.js";
+import _componentThemes_Banner$Banner from "./../../Banner/Banner.theme.js";
 import _componentThemes_BottomSheet$BottomSheet from "./../../BottomSheet/BottomSheet.theme.js";
 import _componentThemes_Button$Button from "./../../Button/Button.theme.js";
 import _componentThemes_Card$CardNative from "./../../Card/Card.native.theme.js";
@@ -16,6 +17,7 @@ import _componentThemes_Divider$Divider from "./../../Divider/Divider.theme.js";
 import _componentThemes_Dropdown$Dropdown from "./../../Dropdown/Dropdown.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";
 import _componentThemes_Icon$Icon from "./../../Icon/Icon.theme.js";
 import _componentThemes_Input$Input from "./../../Input/Input.theme.js";
 import _componentThemes_List$List from "./../../List/List.theme.js";
@@ -32,6 +34,7 @@ import _componentThemes_TextArea$TextArea from "./../../TextArea/TextArea.theme.
 var componentThemes = {
   AutoComplete$AutoComplete: _componentThemes_AutoComplete$AutoComplete,
   Avatar$Avatar: _componentThemes_Avatar$Avatar,
+  Banner$Banner: _componentThemes_Banner$Banner,
   BottomSheet$BottomSheet: _componentThemes_BottomSheet$BottomSheet,
   Button$Button: _componentThemes_Button$Button,
   Card$CardNative: _componentThemes_Card$CardNative,
@@ -44,6 +47,7 @@ var componentThemes = {
   Dropdown$Dropdown: _componentThemes_Dropdown$Dropdown,
   Grid$Grid: _componentThemes_Grid$Grid,
   Header$Header: _componentThemes_Header$Header,
+  Heading$Heading: _componentThemes_Heading$Heading,
   Icon$Icon: _componentThemes_Icon$Icon,
   Input$Input: _componentThemes_Input$Input,
   List$List: _componentThemes_List$List,

package/esm/index.js

@@ -24,4 +24,6 @@ import BottomSheet from './BottomSheet';
 import Dialog from './Dialog';
 import Divider from './Divider';
 import Header from './Header';
-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 };
+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 };

package/package.json

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