@gympass/yoga 7.66.0 → 7.67.0

package/esm/Card/index.native.js

@@ -0,0 +1,2 @@
+import { Card, PlanCard, EventCard, GymCard } from './native';
+export { Card, PlanCard, EventCard, GymCard };

package/esm/Card/native/Card/Actions.js

@@ -0,0 +1,12 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+import { node } from 'prop-types';
+var Actions = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+Actions.propTypes = {
+  children: node.isRequired
+};
+Actions.displayName = 'Card.Actions';
+export default Actions;

package/esm/Card/native/Card/Card.js

@@ -0,0 +1,92 @@
+var _excluded = ["ribbon", "children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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 from 'react';
+import styled from 'styled-components';
+import { string, shape, oneOf, node } from 'prop-types';
+import Text from '../../../Text';
+import Box from '../../../Box';
+var CardShadow = styled(Box).attrs(function (_ref) {
+  var elevation = _ref.theme.yoga.components.card.elevation;
+  return {
+    elevation: elevation
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+var CardStyled = styled(Box).attrs(function (_ref2) {
+  var variant = _ref2.variant,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      color = _ref2$theme$yoga.colors[variant],
+      card = _ref2$theme$yoga.components.card;
+  return {
+    elevation: card.elevation,
+    pt: card.padding.top,
+    pr: card.padding.right,
+    pb: card.padding.bottom,
+    pl: card.padding.left,
+    bRadius: card.radii,
+    bgColor: variant ? color : card.backgroundColor,
+    overflow: 'hidden'
+  };
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
+var Ribbon = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var variant = _ref3.variant,
+      _ref3$theme$yoga = _ref3.theme.yoga,
+      card = _ref3$theme$yoga.components.card,
+      spacing = _ref3$theme$yoga.spacing,
+      _ref3$theme$yoga$colo = _ref3$theme$yoga.colors,
+      elements = _ref3$theme$yoga$colo.elements,
+      color = _ref3$theme$yoga$colo[variant],
+      white = _ref3$theme$yoga$colo.white,
+      dark = _ref3$theme$yoga$colo.dark;
+  return "\n    align-self: flex-start;\n\n    margin-bottom: " + card.padding.bottom + "px;\n    margin-left: -" + card.padding.left + "px;\n\n    padding:\n      " + spacing.xxxsmall + "px\n      " + spacing.xsmall + "px\n      " + spacing.xxxsmall + "px\n      " + spacing.small + "px;\n\n    border-top-right-radius: " + card.ribbon.radius + "px;\n    border-bottom-right-radius: " + card.ribbon.radius + "px;\n    background-color: " + (variant ? color : elements.backgroundAndDisabled) + ";\n\n    color: " + (variant ? white : dark) + ";\n  ";
+});
+var RibbonText = styled(Text.Tiny)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref4) {
+  var variant = _ref4.variant,
+      _ref4$theme$yoga$colo = _ref4.theme.yoga.colors,
+      white = _ref4$theme$yoga$colo.white,
+      dark = _ref4$theme$yoga$colo.dark;
+  return "\n    color: " + (variant ? white : dark) + ";\n  ";
+});
+var Card = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var ribbon = _ref5.ribbon,
+      children = _ref5.children,
+      rest = _objectWithoutPropertiesLoose(_ref5, _excluded);
+
+  return /*#__PURE__*/React.createElement(CardShadow, null, /*#__PURE__*/React.createElement(CardStyled, _extends({
+    ref: ref
+  }, rest), Object.keys(ribbon).length > 0 && /*#__PURE__*/React.createElement(Ribbon, {
+    variant: ribbon.variant
+  }, /*#__PURE__*/React.createElement(RibbonText, {
+    variant: ribbon.variant
+  }, ribbon.text)), children));
+});
+Card.propTypes = {
+  /** text: the content inside the Card Ribbon
+   * variant: style the card following the theme (primary, secondary, vibin,
+   * hope, energy, relax, peace, verve, uplift, deepPurple, deep, stamina, dark,
+   * medium, light, clear, white) */
+  ribbon: shape({
+    text: string,
+    variant: oneOf(['', 'primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+  }),
+  children: node,
+
+  /** style the card following the theme (primary, secondary, vibin, hope,
+   * energy, relax, peace, verve, uplift, deepPurple, deep, stamina, dark,
+   * medium, light, clear, white) */
+  variant: oneOf(['', 'primary', 'secondary', 'vibin', 'hope', 'energy', 'relax', 'peace', 'verve', 'uplift', 'deepPurple', 'stamina', 'dark', 'medium', 'deep', 'light', 'clear', 'white'])
+};
+Card.defaultProps = {
+  ribbon: {},
+  children: null,
+  variant: ''
+};
+Card.displayName = 'Card';
+export default Card;

package/esm/Card/native/Card/Card.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { ThemeProvider, Button } from '../../..';
+import Card from '.';
+describe('<Card />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default Card', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Header, null, /*#__PURE__*/React.createElement(Text, null, "Hello World")), /*#__PURE__*/React.createElement(Card.Content, null, /*#__PURE__*/React.createElement(Text, null, "It's fine here")), /*#__PURE__*/React.createElement(Card.Actions, null, /*#__PURE__*/React.createElement(Button, null, "Action's children must be Button"))))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/native/Card/Content.js

@@ -0,0 +1,8 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+var Content = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+Content.displayName = 'Card.Content';
+export default Content;

package/esm/Card/native/Card/Header.js

@@ -0,0 +1,8 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+var Header = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+Header.displayName = 'Card.Header';
+export default Header;

package/esm/Card/native/Card/index.js

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

package/esm/Card/native/EventCard/EventCard.js

@@ -0,0 +1,169 @@
+var _excluded = ["onPress", "small"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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 from 'react';
+import styled, { withTheme, css } from 'styled-components';
+import { shape, string, bool, oneOfType, func } from 'prop-types';
+import { Time } from '@gympass/yoga-icons';
+import { TouchableWithoutFeedback } from 'react-native';
+import theme from '../../../Theme/helpers/themeReader';
+import Card from '../Card';
+import Text from '../../../Text';
+import Box from '../../../Box';
+import Button from '../../../Button';
+var spacing = theme.spacing,
+    radii = theme.radii,
+    lineHeights = theme.lineHeights;
+var Event = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  height: 104px;\n  border-radius: ", "px;\n  padding: ", ";\n  width: 280px;\n  margin-right: ", ";\n  ", "\n"])), radii.regular, spacing.zero, spacing.xxsmall, function (_ref) {
+  var small = _ref.small;
+  return small ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          width: ", "px;\n        "])), spacing.xxxlarge) : '';
+});
+var DateInfo = styled(Box)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  justify-content: center;\n  align-items: center;\n  width: 56px;\n"])));
+var EventInfo = styled(Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
+var Top = styled(Box)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  justify-content: center;\n  align-items: center;\n  height: ", "px;\n"])), spacing.small);
+var Name = styled(Text.Medium)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  margin-bottom: ", "px;\n  line-height: ", "px;\n"])), spacing.xxxsmall, lineHeights.small);
+var Place = styled(Text.Tiny)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  width: 180px;\n  margin-bottom: ", "px;\n"])), spacing.xsmall);
+var Day = styled(Text.H5)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"])), spacing.xxxsmall, spacing.xxxsmall);
+
+var getIndicatorColor = function getIndicatorColor(active, event) {
+  if (active) return 'white';
+  return event ? 'primary' : 'light';
+};
+
+var Indicator = styled(Box)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n"])), spacing.xxsmall, spacing.xxsmall);
+var Row = styled(Box)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var EventTime = styled(Box)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  align-items: center;\n"])));
+var ButtonLink = styled(Button.Link)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  align-self: flex-end;\n"])));
+
+var SmallCard = function SmallCard(_ref2) {
+  var _ref2$date = _ref2.date,
+      month = _ref2$date.month,
+      day = _ref2$date.day,
+      dayOfWeek = _ref2$date.dayOfWeek,
+      active = _ref2.active,
+      event = _ref2.event,
+      onPress = _ref2.onPress;
+  return /*#__PURE__*/React.createElement(DateInfo, {
+    small: true,
+    pv: "medium",
+    bg: active ? 'primary' : 'white'
+  }, /*#__PURE__*/React.createElement(Top, null, onPress ? /*#__PURE__*/React.createElement(Indicator, {
+    borderRadius: "small",
+    bgColor: getIndicatorColor(active, Boolean(event))
+  }) : /*#__PURE__*/React.createElement(Text.Tiny, {
+    variant: active ? 'white' : 'deep'
+  }, month)), /*#__PURE__*/React.createElement(Day, {
+    variant: active ? 'white' : 'secondary'
+  }, day), /*#__PURE__*/React.createElement(Text.Tiny, {
+    variant: active ? 'white' : 'deep'
+  }, String(dayOfWeek).toUpperCase()));
+};
+
+var FullCard = withTheme(function (_ref3) {
+  var event = _ref3.event,
+      _ref3$date = _ref3.date,
+      month = _ref3$date.month,
+      day = _ref3$date.day,
+      dayOfWeek = _ref3$date.dayOfWeek,
+      link = _ref3.link,
+      onLinkPress = _ref3.onLinkPress,
+      icon = _ref3.theme.yoga.components.card.event.icon;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateInfo, {
+    bg: "primary"
+  }, /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Text.Tiny, {
+    inverted: true
+  }, month)), /*#__PURE__*/React.createElement(Day, {
+    inverted: true
+  }, day), /*#__PURE__*/React.createElement(Text.Tiny, {
+    inverted: true
+  }, String(dayOfWeek).toUpperCase())), /*#__PURE__*/React.createElement(EventInfo, {
+    p: "small",
+    pl: "xsmall"
+  }, /*#__PURE__*/React.createElement(Name, {
+    numberOfLines: 1,
+    size: "small"
+  }, event.name), /*#__PURE__*/React.createElement(Place, {
+    variant: "deep",
+    numberOfLines: 1
+  }, event.place), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(EventTime, null, /*#__PURE__*/React.createElement(Time, {
+    fill: icon.fill,
+    style: {
+      marginRight: 5
+    }
+  }), /*#__PURE__*/React.createElement(Text.Tiny, null, event.time)), !!link && /*#__PURE__*/React.createElement(ButtonLink, {
+    onPress: onLinkPress,
+    small: true
+  }, link))));
+});
+
+var EventCard = function EventCard(_ref4) {
+  var onPress = _ref4.onPress,
+      small = _ref4.small,
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(Event, _extends({
+    small: small
+  }, rest), small ? /*#__PURE__*/React.createElement(SmallCard, _extends({
+    onPress: onPress
+  }, rest)) : /*#__PURE__*/React.createElement(FullCard, rest)));
+};
+
+EventCard.propTypes = {
+  /** event information: { name (string), place (string), time (string) } */
+  event: oneOfType([shape({
+    name: string,
+    place: string,
+    time: string
+  }), bool]),
+
+  /** date information: { day (string), dayOfWeek (string), month (string) } */
+  date: shape({
+    day: string,
+    dayOfWeek: string,
+    month: string
+  }).isRequired,
+  small: bool,
+  active: bool,
+  link: string,
+  onLinkPress: func,
+  onPress: func
+};
+EventCard.defaultProps = {
+  small: false,
+  active: false,
+  event: undefined,
+  link: '',
+  onLinkPress: undefined,
+  onPress: undefined
+};
+SmallCard.propTypes = {
+  date: shape({
+    day: string,
+    dayOfWeek: string,
+    month: string
+  }).isRequired,
+  active: bool,
+  event: oneOfType([shape({
+    name: string,
+    place: string,
+    time: string
+  }), bool]),
+  onPress: func
+};
+SmallCard.defaultProps = {
+  active: false,
+  event: undefined,
+  onPress: undefined
+};
+FullCard.propTypes = EventCard.propTypes;
+EventCard.displayName = 'EventCard';
+export default EventCard;

package/esm/Card/native/EventCard/EventCard.test.js

@@ -0,0 +1,65 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '../../..';
+import EventCard from '.';
+var defaultProps = {
+  event: {
+    name: 'Yoga Class',
+    place: 'Gympass',
+    time: '19 am'
+  },
+  date: {
+    day: '19',
+    dayOfWeek: 'thu',
+    month: 'dec'
+  }
+};
+describe('<EventCard />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with full EventCard', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, defaultProps))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot of small EventCard with event indicator disabled', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, _extends({}, defaultProps, {
+        event: false,
+        small: true,
+        onPress: function onPress() {}
+      })))),
+          toJSON = _render2.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot of small EventCard with event indicator enabled', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, _extends({}, defaultProps, {
+        small: true,
+        onPress: function onPress() {}
+      })))),
+          toJSON = _render3.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot of small EventCard active', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, _extends({}, defaultProps, {
+        small: true,
+        active: true,
+        onPress: function onPress() {}
+      })))),
+          toJSON = _render4.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot of small EventCard with day of week and without indicator', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(EventCard, _extends({}, defaultProps, {
+        small: true
+      })))),
+          toJSON = _render5.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/native/EventCard/index.js

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

package/esm/Card/native/GymCard/CheckIn/Avatar.js

@@ -0,0 +1,17 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+var Avatar = styled.Image(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 48px;\n  height: 48px;\n\n  ", "\n"])), function (_ref) {
+  var checkIn = _ref.theme.yoga.components.card.gym.checkIn;
+  return "\n    border-radius: " + checkIn.avatar.border.radius + "px;\n  ";
+});
+Avatar.displayName = 'Avatar';
+var Placeholder = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var _ref2$theme$yoga = _ref2.theme.yoga,
+      elements = _ref2$theme$yoga.colors.elements,
+      checkIn = _ref2$theme$yoga.components.card.gym.checkIn;
+  return "\n    width: 48px;\n    height: 48px;\n\n    align-items: center;\n    justify-content: center;\n\n    border: " + checkIn.avatar.border.width + "px solid " + elements.lineAndBorders + ";\n    border-radius: " + checkIn.avatar.border.radius + "px;\n  ";
+});
+export { Avatar, Placeholder };

package/esm/Card/native/GymCard/CheckIn/CheckIn.js

@@ -0,0 +1,66 @@
+var _excluded = ["name", "address", "avatar", "distance", "rating", "theme"];
+
+var _templateObject, _templateObject2;
+
+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 from 'react';
+import styled, { withTheme } from 'styled-components';
+import { ImagePropTypes } from 'deprecated-react-native-prop-types';
+import { string, number } from 'prop-types';
+import { Building } from '@gympass/yoga-icons';
+import Card from '../../Card';
+import Rating from '../../../../Rating';
+import Text from '../../../../Text';
+import Header from './Header';
+import { Avatar, Placeholder } from './Avatar';
+import Content from './Content';
+var Wrapper = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 160px;\n  min-height: 204px;\n"])));
+var Title = styled(Text)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  min-height: 40px;\n\n  ", "\n"])), function (_ref) {
+  var checkIn = _ref.theme.yoga.components.card.gym.checkIn;
+  return "\n    margin-bottom: " + checkIn.title.margin.bottom + "px;\n    font-weight: " + checkIn.title.font.weight + ";\n  ";
+});
+
+var CheckIn = function CheckIn(_ref2) {
+  var name = _ref2.name,
+      address = _ref2.address,
+      avatar = _ref2.avatar,
+      distance = _ref2.distance,
+      rating = _ref2.rating,
+      elements = _ref2.theme.yoga.colors.elements,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Wrapper, rest, /*#__PURE__*/React.createElement(Header, null, avatar ? /*#__PURE__*/React.createElement(Avatar, {
+    source: avatar
+  }) : /*#__PURE__*/React.createElement(Placeholder, null, /*#__PURE__*/React.createElement(Building, {
+    width: 24,
+    height: 26,
+    fill: elements.selectionAndIcons
+  })), /*#__PURE__*/React.createElement(Text.Tiny, null, distance)), /*#__PURE__*/React.createElement(Rating, {
+    value: rating,
+    icon: {
+      size: 18
+    }
+  }), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, {
+    numberOfLines: 2
+  }, name), /*#__PURE__*/React.createElement(Text.Tiny, {
+    numberOfLines: 2
+  }, address)));
+};
+
+CheckIn.propTypes = {
+  name: string.isRequired,
+  address: string.isRequired,
+
+  /** The same as in source prop of Image react-native component */
+  avatar: ImagePropTypes.source,
+  distance: string.isRequired,
+  rating: number.isRequired
+};
+CheckIn.defaultProps = {
+  avatar: undefined
+};
+CheckIn.displayName = 'GymCard.CheckIn';
+export default withTheme(CheckIn);

package/esm/Card/native/GymCard/CheckIn/CheckIn.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import ThemeProvider from '../../../../Theme';
+import GymCard from '..';
+describe('<GymCard.CheckIn />', function () {
+  describe('Snapshots', function () {
+    var data = {
+      name: 'Foo',
+      distance: '100 m',
+      rating: 5,
+      address: 'Bar'
+    };
+    it('should match snapshot without avatar', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(GymCard.CheckIn, {
+        name: data.name,
+        distance: data.distance,
+        rating: data.rating,
+        address: data.address
+      }))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot with avatar', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(GymCard.CheckIn, {
+        avatar: {
+          uri: 'data:image/png;base64,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'
+        },
+        name: data.name,
+        distance: data.distance,
+        rating: data.rating,
+        address: data.address
+      }))),
+          toJSON = _render2.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Card/native/GymCard/CheckIn/Content.js

@@ -0,0 +1,11 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+import Card from '../../Card';
+var Content = styled(Card.Content)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var checkIn = _ref.theme.yoga.components.card.gym.checkIn;
+  return "\n    margin-top: " + checkIn.content.margin.top + "px;\n  ";
+});
+export default Content;

package/esm/Card/native/GymCard/CheckIn/Header.js

@@ -0,0 +1,11 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+import Card from '../../Card';
+var Header = styled(Card.Header)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref) {
+  var checkIn = _ref.theme.yoga.components.card.gym.checkIn;
+  return "\n    margin-bottom: " + checkIn.header.margin.bottom + "px;\n  ";
+});
+export default Header;

package/esm/Card/native/GymCard/CheckIn/index.js

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

package/esm/Card/native/GymCard/index.js

@@ -0,0 +1,5 @@
+import CheckIn from './CheckIn';
+var GymCard = {
+  CheckIn: CheckIn
+};
+export default GymCard;

package/esm/Card/native/PlanCard/Actions.js

@@ -0,0 +1,22 @@
+var _templateObject, _templateObject2, _templateObject3;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled from 'styled-components';
+import Actions from '../Card/Actions';
+import Button from '../../../Button';
+import theme from '../../../Theme/helpers/themeReader';
+var _theme$components = theme.components,
+    cardnative = _theme$components.cardnative,
+    card = _theme$components.card;
+var PlanCardButton = styled(Button).attrs({
+  full: true
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+var PlanCardButtonText = styled(Button.Text).attrs({
+  full: true
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"])), cardnative.plan.actions.buttonText.margin.top, card.plan.actions.buttonText.margin.bottom);
+var PlanCardActions = styled(Actions)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  margin-top: ", "px;\n"])), cardnative.plan.actions.margin.top);
+PlanCardActions.displayName = 'PlanCard.Actions';
+PlanCardButton.displayName = 'PlanCard.Button';
+PlanCardButtonText.displayName = 'PlanCard.ButtonText';
+export { PlanCardActions as Actions, PlanCardButton as Button, PlanCardButtonText as ButtonText };