@gympass/yoga 7.37.0 → 7.38.0

package/esm/Chips/native/Chips.js

@@ -0,0 +1,104 @@
+var _excluded = ["children", "selected", "counter", "icons", "disabled", "onToggle", "onPress", "theme"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 from 'react';
+import { number, arrayOf, bool, func, node } from 'prop-types';
+import styled, { css, withTheme } from 'styled-components';
+import { TouchableWithoutFeedback } from 'react-native';
+import Counter from './Counter';
+import { theme } from '../../Theme';
+import Text from '../../Text';
+import Icon from '../../Icon';
+var Wrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 32px;\n  max-width: 216px;\n\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n\n  margin-right: ", "px;\n  padding: ", "px;\n\n  border-style: solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  border-width: ", "px;\n\n  background-color: ", ";\n\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), theme.spacing.xxsmall, theme.spacing.xxsmall, theme.colors.elements.lineAndBorders, theme.radii.small, theme.borders.small, theme.colors.white, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n          color: ", ";\n\n          border-color: ", ";\n        "])), theme.colors.elements.backgroundAndDisabled, theme.colors.elements.selectionAndIcons, theme.colors.elements.lineAndBorders) : '';
+}, function (_ref2) {
+  var selected = _ref2.selected;
+  return selected ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n          border-color: transparent;\n        "])), theme.colors.yoga) : '';
+});
+var StyledChips = styled(Text)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-size: ", "px;\n  line-height: ", "px;\n\n  flex-shrink: 1;\n\n  ", "\n"])), theme.fontSizes.xsmall, theme.lineHeights.xsmall, function (_ref3) {
+  var selected = _ref3.selected;
+  return selected ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.colors.primary) : '';
+});
+var Chips = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+      selected = _ref4.selected,
+      counter = _ref4.counter,
+      icons = _ref4.icons,
+      disabled = _ref4.disabled,
+      onToggle = _ref4.onToggle,
+      _ref4$onPress = _ref4.onPress,
+      onPress = _ref4$onPress === void 0 ? onToggle : _ref4$onPress,
+      spacing = _ref4.theme.yoga.spacing,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+  var FirstIcon = icons[0],
+      SecondIcon = icons[1];
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({
+    onPress: onPress,
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(Wrapper, {
+    disabled: disabled,
+    selected: selected
+  }, SecondIcon && /*#__PURE__*/React.createElement(Icon, {
+    as: SecondIcon,
+    fill: selected ? 'primary' : 'secondary',
+    width: "small",
+    height: "small",
+    style: {
+      marginRight: children ? spacing.xxxsmall : undefined
+    }
+  }), /*#__PURE__*/React.createElement(StyledChips, {
+    as: selected ? Text.Medium : Text,
+    selected: selected,
+    numberOfLines: 1
+  }, children), selected && counter && !disabled && /*#__PURE__*/React.createElement(Counter, {
+    value: counter
+  }), FirstIcon && /*#__PURE__*/React.createElement(Icon, {
+    as: FirstIcon,
+    fill: selected ? 'primary' : 'secondary',
+    width: "small",
+    height: "small",
+    style: {
+      marginLeft: children ? spacing.xxxsmall : undefined
+    }
+  })));
+});
+Chips.propTypes = {
+  /** text to be displayed */
+  children: node,
+
+  /** if the chip is selected */
+  selected: bool,
+
+  /** will display a three digit number, if the value is greater than 999 a plus
+   * sign will be displayed instead. ex: "+999" */
+  counter: number,
+
+  /** disable chip */
+  disabled: bool,
+
+  /** a list of max two icons from @gympass/yoga-icons package */
+  icons: arrayOf(func),
+
+  /** onPress event */
+  onToggle: func,
+  onPress: func
+};
+Chips.defaultProps = {
+  children: undefined,
+  selected: false,
+  disabled: false,
+  counter: undefined,
+  icons: [],
+  onToggle: undefined,
+  onPress: undefined
+};
+export default withTheme(Chips);

package/esm/Chips/native/Chips.test.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { render, toJSON, fireEvent } from '@testing-library/react-native';
+import { MapPin, ChevronDown } from '@gympass/yoga-icons';
+import { ThemeProvider, Chips } from '../..';
+describe('<Chips />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"))),
+          container = _render.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled prop', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        disabled: true
+      }, "Classes"))),
+          container = _render2.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with more than one Chip', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, null, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, null, "Personal trainers"))),
+          container = _render3.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    it('should match snapshot with a long text', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes with a very long text"))),
+          container = _render4.container;
+
+      expect(toJSON(container)).toMatchSnapshot();
+    });
+    describe('selected', function () {
+      it('should match snapshot', function () {
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Classes"))),
+            container = _render5.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Personal trainers"))),
+            container = _render6.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+    });
+    describe('counter', function () {
+      it('should match snapshot', function () {
+        var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"))),
+            container = _render7.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 52,
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 1732,
+          selected: true
+        }, "Personal trainers"))),
+            container = _render8.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+    });
+    describe('icon', function () {
+      it('should match selected snapshot', function () {
+        var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin]
+        }, "Location"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin, ChevronDown]
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin, ChevronDown]
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin]
+        }, "Personal trainers"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin]
+        }, "Activities"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Language"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Categories"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin]
+        }, "Availability"))),
+            container = _render9.container;
+
+        expect(toJSON(container)).toMatchSnapshot();
+      });
+    });
+  });
+  describe('Events', function () {
+    it('should toggle using onPress', function () {
+      var toggleMock = jest.fn();
+
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onPress: toggleMock
+      }, "Classes"))),
+          getByText = _render10.getByText;
+
+      fireEvent.press(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+    it('should toggle using onToggle', function () {
+      var toggleMock = jest.fn();
+
+      var _render11 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onToggle: toggleMock
+      }, "Classes"))),
+          getByText = _render11.getByText;
+
+      fireEvent.press(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Chips/native/Counter.js

@@ -0,0 +1,20 @@
+var _templateObject;
+
+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 { number, oneOfType, string } from 'prop-types';
+import { theme } from '../../Theme';
+import Text from '../../Text';
+var Wrapper = styled(Text.Medium)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  height: 16px;\n  min-width: 16px;\n\n  padding-right: 5px;\n  padding-left: 5px;\n  margin-left: ", "px;\n\n  color: ", ";\n  font-size: ", "px;\n  line-height: ", "px;\n\n  border-radius: ", "px;\n  background-color: ", ";\n\n  overflow: hidden;\n"])), theme.spacing.xxxsmall, theme.colors.white, theme.fontSizes.xsmall, theme.lineHeights.xsmall, theme.radii.small, theme.colors.primary);
+
+var Counter = function Counter(_ref) {
+  var value = _ref.value;
+  return /*#__PURE__*/React.createElement(Wrapper, null, Number(value) > 999 ? '+999' : value);
+};
+
+Counter.propTypes = {
+  value: oneOfType([number, string]).isRequired
+};
+export default Counter;

package/esm/Chips/native/index.js

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

package/esm/Chips/web/Chips.test.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { MapPin, ChevronDown } from '@gympass/yoga-icons';
+import { ThemeProvider, Chips } from '../..';
+describe('<Chips />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with disabled prop', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        disabled: true
+      }, "Classes"))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with more than one Chip', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, null, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, null, "Personal trainers"))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    describe('selected', function () {
+      it('should match snapshot', function () {
+        var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Classes"))),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, null, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true
+        }, "Personal trainers"))),
+            container = _render5.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('counter', function () {
+      it('should match snapshot', function () {
+        var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"))),
+            container = _render6.container;
+
+        expect(container).toMatchSnapshot();
+      });
+      it('should match snapshot with more than one Chip', function () {
+        var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 52,
+          selected: true
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 1732,
+          selected: true
+        }, "Personal trainers"))),
+            container = _render7.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+    describe('icon', function () {
+      it('should match selected snapshot', function () {
+        var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin]
+        }, "Location"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          icon: [MapPin, ChevronDown]
+        }, "Classes"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin, ChevronDown]
+        }, "Gyms and studios"), /*#__PURE__*/React.createElement(Chips, {
+          icon: [MapPin]
+        }, "Personal trainers"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin]
+        }, "Activities"), /*#__PURE__*/React.createElement(Chips, {
+          counter: 8,
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Language"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin, ChevronDown]
+        }, "Categories"), /*#__PURE__*/React.createElement(Chips, {
+          selected: true,
+          icon: [MapPin]
+        }, "Availability"))),
+            container = _render8.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
+  describe('Events', function () {
+    it('should toggle', function () {
+      var toggleMock = jest.fn();
+
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onClick: toggleMock
+      }, "Classes"))),
+          getByText = _render9.getByText;
+
+      fireEvent.click(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+    it('should toggle using onToggle', function () {
+      var toggleMock = jest.fn();
+
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Chips, {
+        onToggle: toggleMock
+      }, "Classes"))),
+          getByText = _render10.getByText;
+
+      fireEvent.click(getByText('Classes'));
+      expect(toggleMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Dialog/web/Dialog.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { screen, render, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeProvider, Button } from '../..';
+import Dialog from '.';
+describe('<Dialog />', function () {
+  afterEach(cleanup);
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should match snapshot with close button', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      onClose: jest.fn()
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+    }, "Ok, got it"))))),
+        baseElement = _render2.baseElement;
+
+    expect(baseElement).toMatchSnapshot();
+  });
+  it('should render a minimal dialog', function () {
+    var onActionMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"), /*#__PURE__*/React.createElement(Dialog.Content, null, "Subtitle"), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: onActionMock,
+      secondary: true
+    }, "Ok, got it")))));
+    screen.getByText('Title');
+    screen.getByText('Subtitle');
+    var button = screen.getByRole('button', {
+      name: /Ok, got it/i
+    });
+    fireEvent.click(button);
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+  it('should render with close button', function () {
+    var onCloseMock = jest.fn();
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      onClose: onCloseMock
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
+    var button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+});

package/esm/Divider/index.native.js

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

package/esm/Divider/native/Divider.js

@@ -0,0 +1,29 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import { bool } from 'prop-types';
+import React from 'react';
+import styled, { css, withTheme } from 'styled-components';
+var StyledDivider = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var _ref$theme$yoga = _ref.theme.yoga,
+      borders = _ref$theme$yoga.borders,
+      colors = _ref$theme$yoga.colors,
+      vertical = _ref.vertical;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n\n      border-color: ", ";\n    "])), vertical ? 'height: auto' : 'width: auto', vertical ? "border-left-width: " + borders.small : "border-bottom-width: " + borders.small, colors.text.disabled);
+});
+var Divider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var vertical = _ref2.vertical;
+  return /*#__PURE__*/React.createElement(StyledDivider, {
+    vertical: vertical,
+    ref: ref
+  });
+});
+Divider.propTypes = {
+  /** If this value is defined, the divider will be in vertical when the flexDirection is row type */
+  vertical: bool
+};
+Divider.defaultProps = {
+  vertical: false
+};
+export default withTheme(Divider);

package/esm/Divider/native/Divider.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Divider, Box, Text } from '../..';
+describe('<Divider />', function () {
+  it('should create a divider component', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "column",
+      minWidth: 300,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Text.H4, null, "First Content"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text.H4, null, "Second Content")))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should create vertical divider component', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      display: "flex",
+      flexDirection: "row",
+      minWidth: 300,
+      justifyContent: "space-between"
+    }, /*#__PURE__*/React.createElement(Text.H4, null, "First Content"), /*#__PURE__*/React.createElement(Divider, {
+      vertical: true
+    }), /*#__PURE__*/React.createElement(Text.H4, null, "Second Content")))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Divider/native/index.js

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

package/esm/Divider/web/Divider.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Divider, Box, Text } from '../..';
+describe('<Divider />', function () {
+  it('should create a divider component', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 50
+    }, /*#__PURE__*/React.createElement(Text.Regular, null, "First Content"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text.Regular, null, "Second Content")))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should create a vertical divider component', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Box, {
+      flex: 1,
+      display: "flex",
+      flexDirection: "row",
+      minHeight: 50
+    }, /*#__PURE__*/React.createElement(Text.Regular, null, "First Content"), /*#__PURE__*/React.createElement(Divider, {
+      vertical: true
+    }), /*#__PURE__*/React.createElement(Text.Regular, null, "Second Content")))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Dropdown/index.native.js

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

package/esm/Dropdown/native/Backdrop.js

@@ -0,0 +1,93 @@
+var _excluded = ["visible", "title", "children", "onClose", "theme"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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, { useEffect, useState } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { node, string, func, bool } from 'prop-types';
+import { Animated, TouchableWithoutFeedback, Easing, Modal } from 'react-native';
+import Text from '../../Text';
+var ClosableArea = styled(Animated.View)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var colors = _ref.theme.yoga.colors;
+  return "\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    background-color: " + colors.text.primary + ";\n  ";
+});
+var ContentWrapper = styled(Animated.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  justify-content: flex-end;\n\n  width: 100%;\n"])));
+var Content = styled.View(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var dropdown = _ref2.theme.yoga.components.dropdown;
+  return "\n    justify-content: center;\n    width: 100%;\n\n    background-color: " + dropdown.backdrop.content.backgroundColor + ";\n    border-top-left-radius: " + dropdown.backdrop.content.border.radius.topLeft + "px;\n    border-top-right-radius: " + dropdown.backdrop.content.border.radius.topRight + "px;\n  ";
+});
+var Title = styled(Text.Bold)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
+  var dropdown = _ref3.theme.yoga.components.dropdown;
+  return "\n    width: 100%;\n    padding:\n      " + dropdown.backdrop.content.title.padding.top + "px\n      " + dropdown.backdrop.content.title.padding.right + "px\n      " + dropdown.backdrop.content.title.padding.bottom + "px\n      " + dropdown.backdrop.content.title.padding.left + "px;\n\n    font-size: " + dropdown.backdrop.content.title.font.size + "px;\n\n    text-align: center;\n  ";
+});
+
+var Backdrop = function Backdrop(_ref4) {
+  var visible = _ref4.visible,
+      title = _ref4.title,
+      children = _ref4.children,
+      onClose = _ref4.onClose,
+      _ref4$theme$yoga = _ref4.theme.yoga,
+      transition = _ref4$theme$yoga.transition,
+      dropdown = _ref4$theme$yoga.components.dropdown,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+  var _useState = useState(visible),
+      isOpen = _useState[0],
+      toggleIsOpen = _useState[1];
+
+  var _useState2 = useState(new Animated.Value(0)),
+      backgroundAnimation = _useState2[0];
+
+  var _useState3 = useState(new Animated.Value(-dropdown.backdrop.content.height)),
+      contentAnimation = _useState3[0];
+
+  var animate = function animate(animation, toValue) {
+    return Animated.timing(animation, {
+      toValue: toValue,
+      duration: transition.duration[0],
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start(function () {
+      return !visible && toggleIsOpen(false);
+    });
+  };
+
+  useEffect(function () {
+    if (visible) toggleIsOpen(true);
+    animate(backgroundAnimation, visible ? 0.5 : 0);
+    animate(contentAnimation, visible ? 0 : -dropdown.backdrop.content.height);
+  }, [visible]);
+  return isOpen && /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    transparent: true,
+    animationType: "none"
+  }), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(ClosableArea, {
+    style: {
+      opacity: backgroundAnimation
+    }
+  })), /*#__PURE__*/React.createElement(ContentWrapper, {
+    style: {
+      bottom: contentAnimation
+    }
+  }, /*#__PURE__*/React.createElement(Content, null, title && /*#__PURE__*/React.createElement(Title, null, title), children)));
+};
+
+Backdrop.propTypes = {
+  visible: bool,
+  title: string,
+  children: node.isRequired,
+  onClose: func
+};
+Backdrop.defaultProps = {
+  visible: false,
+  title: null,
+  onClose: function onClose() {}
+};
+export default withTheme(Backdrop);