@gympass/yoga 7.66.0 → 7.67.0

package/cjs/Dialog/web/Dialog.js

@@ -17,7 +17,7 @@ var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
-var _excluded = ["isOpen", "hideCloseButton", "children", "onClose"];
+var _excluded = ["isOpen", "hideCloseButton", "children", "onClose", "zIndex"];
 
 var _templateObject, _templateObject2;
 
@@ -41,15 +41,17 @@ var StyledDialog = (0, _styledComponents["default"])(_.Card)(_templateObject ||
 exports.StyledDialog = StyledDialog;
 
 var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var dialog = _ref2.theme.yoga.components.dialog;
-  return "\n  display: flex;\n  z-index: 3;\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
+  var zIndex = _ref2.zIndex,
+      dialog = _ref2.theme.yoga.components.dialog;
+  return "\n  display: flex;\n  z-index: " + zIndex + ";\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
 
-var Dialog = function Dialog(_ref3) {
+function Dialog(_ref3) {
   var isOpen = _ref3.isOpen,
       hideCloseButton = _ref3.hideCloseButton,
       children = _ref3.children,
       onClose = _ref3.onClose,
+      zIndex = _ref3.zIndex,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
   var dialogRef = (0, _react.useRef)(null);
@@ -78,7 +80,8 @@ var Dialog = function Dialog(_ref3) {
   return isOpen ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(Overlay, {
     onClick: closeDialog,
     onClose: onClose,
-    ref: dialogRef
+    ref: dialogRef,
+    zIndex: zIndex
   }, /*#__PURE__*/_react["default"].createElement(StyledDialog, _extends({
     onClose: onClose
   }, props), isCloseButtonVisible && /*#__PURE__*/_react["default"].createElement(_.Box, {
@@ -90,7 +93,7 @@ var Dialog = function Dialog(_ref3) {
     inverted: true,
     onClick: onClose
   })), children)), dialogElement) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
-};
+}
 
 Dialog.propTypes = {
   /** Control the dialog visibility. */
@@ -101,12 +104,14 @@ Dialog.propTypes = {
 
   /** Function to close the dialog. */
   onClose: _propTypes.func,
+  zIndex: _propTypes.number,
   children: _propTypes.node.isRequired
 };
 Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
-  onClose: undefined
+  onClose: undefined,
+  zIndex: 3
 };
 Dialog.displayName = 'Dialog';
 var _default = Dialog;

package/cjs/Drawer/web/Drawer.js

@@ -27,7 +27,11 @@ function Drawer(props) {
 }
 
 Drawer.propTypes = {
-  children: _propTypes.node.isRequired
+  children: _propTypes.node.isRequired,
+  zIndex: _propTypes.number
+};
+Drawer.defaultProps = {
+  zIndex: 3
 };
 var _default = Drawer;
 exports["default"] = _default;

package/cjs/Feedback/web/Feedback.js

@@ -17,7 +17,7 @@ var _Text = _interopRequireDefault(require("../../Text"));
 
 var _StyledFeedback = require("./StyledFeedback");
 
-var _excluded = ["variant", "title", "description", "children"];
+var _excluded = ["variant", "title", "description", "children", "center"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -50,6 +50,7 @@ function Feedback(_ref) {
       title = _ref.title,
       description = _ref.description,
       children = _ref.children,
+      center = _ref.center,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var iconProps = VARIANT_ICONS[variant];
@@ -67,15 +68,16 @@ function Feedback(_ref) {
   }
 
   defineCompoundComponents();
-  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    ph: "medium",
-    pv: "xxlarge",
-    minHeight: "100%",
-    width: "100%",
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
     display: "flex",
     alignItems: "flex-end",
-    bg: "white"
-  }, /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Content, props, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+    bg: "white",
+    width: "100%"
+  }, center && {
+    ph: 'medium',
+    pv: 'xxlarge',
+    minHeight: '100%'
+  }), /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Content, props, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
     size: ICON_SIZE,
     mb: "large",
     "data-testid": "feedback-icon"
@@ -91,11 +93,15 @@ Feedback.propTypes = {
   variant: (0, _propTypes.oneOf)(Object.keys(VARIANT_ICONS)).isRequired,
   title: _propTypes.string,
   description: _propTypes.string.isRequired,
-  children: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)(_propTypes.node), _propTypes.node])
+  children: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)(_propTypes.node), _propTypes.node]),
+
+  /** Center the component vertically */
+  center: _propTypes.bool
 };
 Feedback.defaultProps = {
   title: undefined,
-  children: undefined
+  children: undefined,
+  center: true
 };
 var _default = Feedback;
 exports["default"] = _default;

package/esm/Accordion/web/Accordion.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { Text, Button } from '@gympass/yoga';
+import { ThemeProvider } from '../..';
+import Accordion from '.';
+describe('<Accordion />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
+      title: "Title"
+    }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"), /*#__PURE__*/React.createElement(Button, {
+      small: true,
+      inverted: true
+    }, "Small button"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+});

package/esm/ActionRequirement/index.native.js

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

package/esm/ActionRequirement/native/ActionRequirement.js

@@ -0,0 +1,48 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import { arrayOf, node, oneOfType, string } from 'prop-types';
+import styled from 'styled-components/native';
+import { View } from 'react-native';
+import Box from '../../Box';
+import { Title } from './ActionRequirementStyles';
+import Text from '../../Text';
+var StyledActionRequirement = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
+
+function ActionRequirement(props) {
+  var title = props.title,
+      description = props.description,
+      children = props.children,
+      checkable = props.checkable,
+      illustration = props.illustration,
+      list = props.list;
+  return /*#__PURE__*/React.createElement(StyledActionRequirement, props, illustration && /*#__PURE__*/React.createElement(Box, null, illustration), /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Text, {
+    mt: "small",
+    color: "deep"
+  }, description), list && /*#__PURE__*/React.createElement(Text, {
+    mt: "small",
+    color: "deep"
+  }, /*#__PURE__*/React.createElement(Box, {
+    mt: "xxxlarge"
+  }, list)), checkable && /*#__PURE__*/React.createElement(Box, {
+    mt: "xxxlarge"
+  }, checkable), /*#__PURE__*/React.createElement(View, null, children));
+}
+
+ActionRequirement.propTypes = {
+  title: string.isRequired,
+  children: oneOfType([arrayOf(node), node]),
+  description: string.isRequired,
+  checkable: oneOfType([arrayOf(node), node]),
+  illustration: oneOfType([arrayOf(node), node]),
+  list: oneOfType([arrayOf(node), node])
+};
+ActionRequirement.defaultProps = {
+  children: undefined,
+  checkable: undefined,
+  illustration: undefined,
+  list: undefined
+};
+export default ActionRequirement;

package/esm/ActionRequirement/native/ActionRequirement.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Box, Checkbox, Text } from '@gympass/yoga';
+import { Img2d01 } from '@gympass/yoga-illustrations';
+import { Dumbbell, User, Star } from '@gympass/yoga-icons';
+import { ThemeProvider } from '../..';
+import ActionRequirement from './ActionRequirement';
+
+function handleGetCheckableContent() {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Checkbox, null), /*#__PURE__*/React.createElement(Text, null, "I have read and agree to the Terms of Use and Privacy Policy."));
+}
+
+function handleGetIllustration() {
+  return /*#__PURE__*/React.createElement(Img2d01, {
+    width: 375,
+    height: 375
+  });
+}
+
+function handleGetList() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Dumbbell, null), " 1x/day standard access"), /*#__PURE__*/React.createElement(Text, {
+    mt: "small"
+  }, /*#__PURE__*/React.createElement(User, null), " 4x/month 1-on-1 sessions"), /*#__PURE__*/React.createElement(Text, {
+    mt: "small"
+  }, /*#__PURE__*/React.createElement(Star, null), " 2x/month premium classes"));
+}
+
+describe('<ActionRequirement />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, {
+      title: "Welcome to the world of feeling good!",
+      description: "Lets make it a good day!",
+      illustration: handleGetIllustration(),
+      checkable: handleGetCheckableContent(),
+      list: handleGetList()
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/ActionRequirement/native/ActionRequirementStyles.js

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

package/esm/ActionRequirement/native/index.js

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

package/esm/ActionRequirement/web/ActionRequirement.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Text } from '@gympass/yoga';
+import { Dumbbell, User, Star } from '@gympass/yoga-icons';
+import ActionRequirement from './ActionRequirement';
+import { ThemeProvider } from '../..';
+
+function handleGetList() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Dumbbell, null), " 1x/day standard access"), /*#__PURE__*/React.createElement(Text, {
+    mt: "small"
+  }, /*#__PURE__*/React.createElement(User, null), " 4x/month 1-on-1 sessions"), /*#__PURE__*/React.createElement(Text, {
+    mt: "small"
+  }, /*#__PURE__*/React.createElement(Star, null), " 2x/month premium classes"));
+}
+
+describe('<ActionRequirement />', function () {
+  it('should default match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, {
+      title: "title",
+      description: "description"
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with list', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(ActionRequirement, {
+      title: "title",
+      description: "description",
+      list: handleGetList()
+    }))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/AutoComplete/web/AutoComplete.test.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider, AutoComplete } from '../..';
+describe('<AutoComplete />', function () {
+  describe('Snapshots', function () {
+    it('should match with default component', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with a full width component', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        full: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with options list', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "s",
+        options: ['first', 'second']
+      }))),
+          getByDisplayValue = _render3.getByDisplayValue,
+          container = _render3.container;
+
+      fireEvent.focus(getByDisplayValue('s'));
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width options list', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "s",
+        full: true,
+        options: ['first', 'second']
+      }))),
+          getByDisplayValue = _render4.getByDisplayValue,
+          container = _render4.container;
+
+      fireEvent.focus(getByDisplayValue('s'));
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Options list', function () {
+    it('should filter the options', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "secon",
+        options: ['first', 'second', 'third']
+      }))),
+          container = _render5.container,
+          getByDisplayValue = _render5.getByDisplayValue;
+
+      fireEvent.focus(getByDisplayValue('secon'));
+      expect(container.querySelector('ul').firstChild.textContent).toBe('second');
+    });
+    it('should close options list when clean button is clicked', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "secon",
+        options: ['first', 'second', 'third']
+      }))),
+          container = _render6.container,
+          getByDisplayValue = _render6.getByDisplayValue,
+          getByRole = _render6.getByRole;
+
+      fireEvent.focus(getByDisplayValue('secon'));
+      fireEvent.click(getByRole('button', {
+        name: /clear/i
+      }));
+      expect(container.querySelector('ul')).toBe(null);
+    });
+  });
+  describe('Event listeners', function () {
+    it('should call onChangeMock', function () {
+      var onChangeMock = jest.fn();
+      var onCleanMock = jest.fn();
+      var onSelectMock = jest.fn();
+
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "New",
+        options: ['New York'],
+        onChange: onChangeMock
+      }))),
+          getByDisplayValue = _render7.getByDisplayValue;
+
+      fireEvent.change(getByDisplayValue('New'), {
+        target: {
+          value: 'a'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalledWith('a');
+      expect(onSelectMock).not.toHaveBeenCalled();
+      expect(onCleanMock).not.toHaveBeenCalled();
+    });
+    it('should call onCleanMock', function () {
+      var onCleanMock = jest.fn();
+      var onSelectMock = jest.fn();
+      var onChangeMock = jest.fn();
+
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "New",
+        options: ['New York'],
+        onClean: onCleanMock,
+        onSelect: onSelectMock,
+        onChange: onChangeMock
+      }))),
+          getByDisplayValue = _render8.getByDisplayValue,
+          getByRole = _render8.getByRole;
+
+      fireEvent.focus(getByDisplayValue('New'));
+      fireEvent.click(getByRole('button', {
+        name: /clear/i
+      }));
+      expect(onCleanMock).toHaveBeenCalledWith('');
+      expect(onSelectMock).not.toHaveBeenCalled();
+      expect(onChangeMock).toHaveBeenCalledWith('');
+    });
+    it('should call onSelectMock', function () {
+      var onSelectMock = jest.fn();
+      var onCleanMock = jest.fn();
+      var onChangeMock = jest.fn();
+
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(AutoComplete, {
+        value: "New",
+        options: ['New York'],
+        onSelect: onSelectMock,
+        onClean: onCleanMock,
+        onChange: onChangeMock
+      }))),
+          getByDisplayValue = _render9.getByDisplayValue,
+          getByRole = _render9.getByRole;
+
+      fireEvent.focus(getByDisplayValue('New'));
+      fireEvent.click(getByRole('option'));
+      expect(onSelectMock).toHaveBeenCalledWith('New York');
+      expect(onChangeMock).toHaveBeenCalledWith('New York');
+      expect(onCleanMock).not.toHaveBeenCalled();
+    });
+  });
+});

package/esm/Avatar/index.native.js

@@ -0,0 +1,4 @@
+import Avatar from './native/Avatar';
+import AvatarCircle from './native/AvatarCircle';
+Avatar.Circle = AvatarCircle;
+export default Avatar;

package/esm/Avatar/native/Avatar.js

@@ -0,0 +1,96 @@
+var _excluded = ["icon", "src", "children", "fill", "stroke"];
+
+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; }
+
+import React, { forwardRef } from 'react';
+import { BuildingFilled } from '@gympass/yoga-icons';
+import { string, func } from 'prop-types';
+import { Image } from 'react-native';
+import Box from '../../Box';
+import Icon from '../../Icon';
+
+var Content = function Content(_ref) {
+  var icon = _ref.icon,
+      src = _ref.src,
+      fill = _ref.fill,
+      content = _ref.content,
+      stroke = _ref.stroke;
+
+  if (src) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: Image,
+      width: "100%",
+      height: "100%",
+      source: src
+    });
+  }
+
+  if (content) {
+    return content;
+  }
+
+  return /*#__PURE__*/React.createElement(Icon, {
+    as: icon,
+    width: "50%",
+    height: "50%",
+    fill: fill,
+    stroke: stroke
+  });
+};
+/**
+ * The Avatar component is used to display the image.
+ * It has two shapes: default and circle
+ */
+
+
+var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$icon = _ref2.icon,
+      icon = _ref2$icon === void 0 ? BuildingFilled : _ref2$icon,
+      src = _ref2.src,
+      children = _ref2.children,
+      fill = _ref2.fill,
+      stroke = _ref2.stroke,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
+    bgColor: "elements.selectionAndIcons",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 48,
+    height: 48,
+    borderRadius: "small",
+    elevation: "small",
+    overflow: "hidden"
+  }, props), /*#__PURE__*/React.createElement(Content, {
+    icon: icon,
+    src: src,
+    fill: fill,
+    stroke: stroke,
+    content: children
+  }));
+});
+Content.propTypes = _extends({
+  src: Image.propTypes.source,
+  icon: func,
+  fill: string
+}, Box.propTypes);
+Content.defaultProps = {
+  src: undefined,
+  fill: 'white',
+  icon: BuildingFilled
+};
+Avatar.propTypes = _extends({
+  src: Image.propTypes.source,
+  icon: func,
+  fill: string
+}, Box.propTypes);
+Avatar.defaultProps = _extends({
+  src: undefined,
+  fill: 'white'
+}, Box.defaultProps);
+Avatar.displayName = 'Avatar';
+export default Avatar;

package/esm/Avatar/native/Avatar.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { UserFilled } from '@gympass/yoga-icons';
+import { ThemeProvider } from '../..';
+import Avatar from './Avatar';
+import Text from '../../Text';
+describe('<Avatar />', function () {
+  it('should match snapshot in default avatar', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      width: 78,
+      height: 78,
+      fill: "black"
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in default avatar with placeholder prop', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, {
+      placeholder: UserFilled
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, null))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in circle avatar with placeholder prop', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar.Circle, {
+      placeholder: UserFilled
+    }))),
+        toJSON = _render4.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot in avatar with children prop', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement(Text, null, "AL")))),
+        toJSON = _render5.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Avatar/native/AvatarCircle.js

@@ -0,0 +1,24 @@
+var _excluded = ["src"];
+
+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; }
+
+import React, { forwardRef } from 'react';
+import { UserFilled } from '@gympass/yoga-icons';
+import Avatar from './Avatar';
+var AvatarCircle = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Avatar, _extends({}, props, {
+    src: src,
+    borderRadius: "circle",
+    icon: !src ? UserFilled : undefined,
+    ref: ref
+  }));
+});
+AvatarCircle.propTypes = Avatar.propTypes;
+AvatarCircle.defaultProps = Avatar.defaultProps;
+AvatarCircle.displayName = 'Avatar.Circle';
+export default AvatarCircle;