@gympass/yoga 7.66.0 → 7.67.0

package/esm/Dropdown/native/Options.android.js

@@ -0,0 +1,66 @@
+var _templateObject, _templateObject2;
+
+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 { func, arrayOf, string, shape, number, oneOfType } from 'prop-types';
+import { TouchableWithoutFeedback } from 'react-native';
+import Text from '../../Text';
+import List from '../../List';
+var Option = styled(List.Item)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var isSelected = _ref.isSelected,
+      dropdown = _ref.theme.yoga.components.dropdown;
+  return "\n    padding:\n      " + dropdown.backdrop.content.option.padding.top + "px\n      " + dropdown.backdrop.content.option.padding.right + "px\n      " + dropdown.backdrop.content.option.padding.bottom + "px\n      " + dropdown.backdrop.content.option.padding.left + "px;\n\n    border-bottom-width: " + dropdown.option.border.width + "px;\n    background-color: " + (isSelected ? "" + dropdown.hover.option.backgroundColor : 'transparent') + ";\n  ";
+});
+var OptionText = styled.Text(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var isSelected = _ref2.isSelected,
+      dropdown = _ref2.theme.yoga.components.dropdown;
+  return "\n    font-size: " + dropdown.option.font.size + "px;\n    line-height: " + dropdown.option.font.lineHeight + "px;\n    color: " + (isSelected ? "" + dropdown.selected.option.font.color : "" + dropdown.option.font.color) + ";\n  ";
+});
+
+var Options = function Options(_ref3) {
+  var options = _ref3.options,
+      selectedOption = _ref3.selectedOption,
+      onSelect = _ref3.onSelect;
+  return /*#__PURE__*/React.createElement(List, {
+    style: {
+      height: 60 * 3.6
+    },
+    data: options.map(function (item) {
+      return item;
+    }),
+    keyExtractor: function keyExtractor(_, index) {
+      return index.toString();
+    },
+    renderItem: function renderItem(_ref4) {
+      var item = _ref4.item;
+      return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: function onPress() {
+          return onSelect(item);
+        }
+      }, /*#__PURE__*/React.createElement(Option, {
+        key: item.value,
+        isSelected: selectedOption && selectedOption.value === item.value
+      }, /*#__PURE__*/React.createElement(OptionText, {
+        isSelected: selectedOption && selectedOption.value === item.value,
+        as: selectedOption && selectedOption.value === item.value ? Text.Bold : Text.Regular
+      }, item.label)));
+    }
+  });
+};
+
+var optionShape = {
+  label: string,
+  value: oneOfType([string, number])
+};
+Options.propTypes = {
+  options: arrayOf(shape(optionShape)).isRequired,
+  selectedOption: shape(optionShape),
+  onSelect: func
+};
+Options.defaultProps = {
+  selectedOption: null,
+  onSelect: function onSelect() {}
+};
+export default Options;

package/esm/Dropdown/native/Options.ios.js

@@ -0,0 +1,71 @@
+var _templateObject, _templateObject2;
+
+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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React, { useState } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { func, arrayOf, string, shape, oneOfType, number } from 'prop-types';
+import { Picker } from '@react-native-picker/picker';
+import Button from '../../Button';
+var PickerStyled = styled(Picker)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 190px;\n"])));
+var PickerActions = styled.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var dropdown = _ref.theme.yoga.components.dropdown;
+  return "\n    flex-direction: row;\n    justify-content: space-between;\n\n    padding:\n      " + dropdown.backdrop.content.actions.padding.top + "px\n      " + dropdown.backdrop.content.actions.padding.right + "px\n      " + dropdown.backdrop.content.actions.padding.bottom + "px\n      " + dropdown.backdrop.content.actions.padding.left + "px;\n  ";
+});
+
+var Options = function Options(_ref2) {
+  var options = _ref2.options,
+      selectedOption = _ref2.selectedOption,
+      cancelActionLabel = _ref2.cancelActionLabel,
+      confirmActionLabel = _ref2.confirmActionLabel,
+      onSelect = _ref2.onSelect,
+      onClose = _ref2.onClose,
+      baseFont = _ref2.theme.yoga.baseFont;
+
+  var _useState = useState(selectedOption),
+      selected = _useState[0],
+      setSelected = _useState[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PickerStyled, {
+    selectedValue: selected && selected.value,
+    onValueChange: function onValueChange(itemValue) {
+      return setSelected(options.find(function (option) {
+        return option.value === itemValue;
+      }));
+    },
+    itemStyle: {
+      fontFamily: baseFont.family
+    }
+  }, options.map(function (item) {
+    return /*#__PURE__*/React.createElement(Picker.Item, _extends({
+      key: item
+    }, item));
+  })), /*#__PURE__*/React.createElement(PickerActions, null, /*#__PURE__*/React.createElement(Button.Link, {
+    onPress: onClose
+  }, cancelActionLabel), /*#__PURE__*/React.createElement(Button.Link, {
+    onPress: function onPress() {
+      return onSelect(selected);
+    }
+  }, confirmActionLabel)));
+};
+
+var optionShape = {
+  label: string,
+  value: oneOfType([string, number])
+};
+Options.propTypes = {
+  options: arrayOf(shape(optionShape)).isRequired,
+  selectedOption: shape(optionShape),
+  cancelActionLabel: string.isRequired,
+  confirmActionLabel: string.isRequired,
+  onSelect: func,
+  onClose: func
+};
+Options.defaultProps = {
+  selectedOption: null,
+  onSelect: function onSelect() {},
+  onClose: function onClose() {}
+};
+export default withTheme(Options);

package/esm/Dropdown/native/index.js

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

package/esm/Dropdown/web/Dropdown.test.js

@@ -0,0 +1,93 @@
+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, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider, Dropdown } from '../..';
+var dropdownProps = {
+  label: 'Find an activity to love',
+  options: [{
+    label: 'Yoga',
+    value: 'yoga'
+  }, {
+    label: 'Crossfit',
+    value: 'crossfit'
+  }, {
+    label: 'Tenis',
+    value: 'tenis'
+  }, {
+    label: 'Soccer',
+    value: 'soccer'
+  }, {
+    label: 'Pilates',
+    value: 'pilates'
+  }, {
+    label: 'Run',
+    value: 'running'
+  }]
+};
+describe('<Dropdown />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, dropdownProps))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot when disabled', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
+      disabled: true
+    })))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot when full', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
+      full: true
+    })))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot when has a selected value', function () {
+    var selectedOption = {
+      label: 'Swimming',
+      value: 'swimming',
+      selected: true
+    };
+    var props = dropdownProps;
+    props.options.push(selectedOption);
+
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
+      disabled: true
+    })))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with error', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
+      error: "Please, select one activity"
+    })))),
+        container = _render5.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should make label visible when open dropdown', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, dropdownProps))),
+        getByRole = _render6.getByRole;
+
+    fireEvent.click(getByRole('button'));
+    screen.getAllByText('Find an activity to love');
+  });
+  it('should make label visible when has a selected option', function () {
+    var selectedOption = {
+      label: 'Swimming',
+      value: 'swimming',
+      selected: true
+    };
+    var props = dropdownProps;
+    props.options.push(selectedOption);
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dropdown, props)));
+    screen.getAllByText('Find an activity to love');
+  });
+});

package/esm/Feedback/web/Feedback.js

@@ -1,10 +1,10 @@
-var _excluded = ["variant", "title", "description", "children"];
+var _excluded = ["variant", "title", "description", "children", "center"];
 
 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 { arrayOf, node, oneOf, oneOfType, string } from 'prop-types';
+import { arrayOf, node, oneOf, oneOfType, string, bool } from 'prop-types';
 import React from 'react';
 import { CheckedFull, AlertCircle, AlertTriangle } from '@gympass/yoga-icons';
 import Icon from '../../Icon';
@@ -36,6 +36,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];
@@ -52,15 +53,16 @@ function Feedback(_ref) {
   }
 
   defineCompoundComponents();
-  return /*#__PURE__*/React.createElement(Box, {
-    ph: "medium",
-    pv: "xxlarge",
-    minHeight: "100%",
-    width: "100%",
+  return /*#__PURE__*/React.createElement(Box, _extends({
     display: "flex",
     alignItems: "flex-end",
-    bg: "white"
-  }, /*#__PURE__*/React.createElement(Content, props, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+    bg: "white",
+    width: "100%"
+  }, center && {
+    ph: 'medium',
+    pv: 'xxlarge',
+    minHeight: '100%'
+  }), /*#__PURE__*/React.createElement(Content, props, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
     size: ICON_SIZE,
     mb: "large",
     "data-testid": "feedback-icon"
@@ -76,10 +78,14 @@ Feedback.propTypes = {
   variant: oneOf(Object.keys(VARIANT_ICONS)).isRequired,
   title: string,
   description: string.isRequired,
-  children: oneOfType([arrayOf(node), node])
+  children: oneOfType([arrayOf(node), node]),
+
+  /** Center the component vertically */
+  center: bool
 };
 Feedback.defaultProps = {
   title: undefined,
-  children: undefined
+  children: undefined,
+  center: true
 };
 export default Feedback;

package/esm/Feedback/web/Feedback.test.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Feedback } from '../..';
+
+function renderWithTheme(ui) {
+  return render(ui, {
+    wrapper: ThemeProvider
+  });
+}
+
+var title = 'Welcome to Yoga';
+var description = 'Enjoy your membership!';
+describe('<Feedback />', function () {
+  it('should render the title and description', function () {
+    var _renderWithTheme = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "success",
+      title: title,
+      description: description
+    })),
+        getByText = _renderWithTheme.getByText;
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+  });
+  it('should render the title children', function () {
+    var _renderWithTheme2 = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "success",
+      description: "Enjoy your membership!"
+    }, /*#__PURE__*/React.createElement(Feedback.Title, {
+      as: "h1"
+    }, title))),
+        getByRole = _renderWithTheme2.getByRole;
+
+    expect(getByRole('heading', {
+      name: title
+    })).toBeTruthy();
+  });
+  it('should render the buttons', function () {
+    var _renderWithTheme3 = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "success",
+      title: title,
+      description: description
+    }, /*#__PURE__*/React.createElement(Feedback.PrimaryButton, null, "Ok"), /*#__PURE__*/React.createElement(Feedback.SecondaryButton, null, "Cancel"))),
+        getByRole = _renderWithTheme3.getByRole;
+
+    expect(getByRole('button', {
+      name: 'Ok'
+    })).toBeTruthy();
+    expect(getByRole('button', {
+      name: 'Cancel'
+    })).toBeTruthy();
+  });
+  it('should render correctly when not centered vertically', function () {
+    var _renderWithTheme4 = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "success",
+      title: title,
+      description: description,
+      center: false
+    })),
+        baseElement = _renderWithTheme4.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render the icon for success variant', function () {
+    var _renderWithTheme5 = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "success",
+      title: title,
+      description: description
+    })),
+        getByTestId = _renderWithTheme5.getByTestId;
+
+    expect(getByTestId('feedback-icon')).toMatchSnapshot();
+  });
+  it('should render the icon for informative variant', function () {
+    var _renderWithTheme6 = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "informative",
+      title: title,
+      description: description
+    })),
+        getByTestId = _renderWithTheme6.getByTestId;
+
+    expect(getByTestId('feedback-icon')).toMatchSnapshot();
+  });
+  it('should render the icon for attention variant', function () {
+    var _renderWithTheme7 = renderWithTheme( /*#__PURE__*/React.createElement(Feedback, {
+      variant: "attention",
+      title: title,
+      description: description
+    })),
+        getByTestId = _renderWithTheme7.getByTestId;
+
+    expect(getByTestId('feedback-icon')).toMatchSnapshot();
+  });
+});

package/esm/Grid/web/Col.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../..';
+import { Col } from '.';
+describe('<Col />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default Col', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different Col size', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
+        xxs: 6
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should be the same column size from medium to xxxl', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
+        md: 6
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should set column offsets', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
+        "md-start": 3,
+        md: 6
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should hide Col in a xs and xm breakpoints', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Col, {
+        hide: ['xs', 'sm'],
+        md: 6
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Grid/web/Container.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../..';
+import { Container } from '.';
+describe('<Container />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default Container', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Container, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Grid/web/Hide.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../..';
+import { Hide } from '.';
+describe('<Hide />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Hide, {
+        xxs: true,
+        xs: true,
+        sm: true,
+        md: true,
+        lg: true,
+        xl: true,
+        xxl: true,
+        xxxl: true
+      }, /*#__PURE__*/React.createElement("div", null, "foo")))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should hide starting from md breakpoint', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Hide, {
+        "md-start": true
+      }, /*#__PURE__*/React.createElement("div", null, "foo")))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Grid/web/Row.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../..';
+import { Row } from '.';
+describe('<Row />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default Row', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Row, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Header/web/Header.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { ThemeProvider, Header } from '../..';
+describe('<Header />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, null))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should have link', function () {
+    var gympassLink = 'https://site.gympass.com/br';
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, {
+      link: gympassLink
+    })));
+    screen.getByRole('link', {
+      href: gympassLink
+    });
+  });
+  it('should show gympass logo', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, null)));
+    screen.getByTitle('Gympass Logo');
+  });
+  it('should show custom logo', function () {
+    var CustomLogo = function CustomLogo() {
+      return /*#__PURE__*/React.createElement("div", null, "Custom logo");
+    };
+
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, {
+      logo: CustomLogo
+    })));
+    screen.getByText('Custom logo');
+  });
+  it('should show children', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("p", null, "Make wellbeing universal"))));
+    screen.getByText('Make wellbeing universal');
+  });
+});

package/esm/Heading/web/Heading.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Upload2 } from '@gympass/yoga-icons/src';
+import { ThemeProvider, Heading } from '../..';
+import Title from './Title';
+import BackButton from './BackButton';
+import RightButton from './RightButton';
+
+var onClick = function onClick() {};
+
+describe('<Heading />', function () {
+  it('should match snapshot with title', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Title, null, "Gympass")))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with title and back button', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Title, null, "Gympass"), /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    })))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with all components', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Title, null, "Gympass"), /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    }), /*#__PURE__*/React.createElement(RightButton, {
+      icon: Upload2,
+      onClick: onClick
+    })))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with back button', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    })))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot no padding', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Heading, {
+      noPadding: true
+    }, /*#__PURE__*/React.createElement(Title, null, "Gympass"), /*#__PURE__*/React.createElement(BackButton, {
+      onClick: onClick
+    }), /*#__PURE__*/React.createElement(RightButton, {
+      icon: Upload2,
+      onClick: onClick
+    })))),
+        container = _render5.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Icon/index.native.js

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

package/esm/Icon/native/Icon.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Icon } from '../..';
+
+var Circle = function Circle(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "16",
+    r: "16"
+  }));
+};
+
+describe('Snapshots', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      width: "small",
+      height: "small",
+      fill: "stamina"
+    }))),
+        toJSON = _render.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with size prop', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina"
+    }))),
+        toJSON = _render2.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('should match snapshot with system props', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Icon, {
+      as: Circle,
+      size: "small",
+      fill: "stamina",
+      margin: "medium",
+      elevation: "medium"
+    }))),
+        toJSON = _render3.toJSON;
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/esm/Icon/native/index.js

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