@gympass/yoga 7.31.0 → 7.32.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/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"));
@@ -66,6 +68,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"],

package/cjs/index.js

@@ -115,6 +115,10 @@ var _Header = _interopRequireDefault(require("./Header"));
 
 exports.Header = _Header["default"];
 
+var _Banner = _interopRequireDefault(require("./Banner"));
+
+exports.Banner = _Banner["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/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";
@@ -32,6 +33,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,

package/esm/index.js

@@ -24,4 +24,5 @@ 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';
+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 };

package/package.json

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