@gympass/yoga 7.66.0 → 7.66.1

package/esm/Rating/native/Rating.js

@@ -0,0 +1,186 @@
+var _excluded = ["value", "max", "readOnly", "onRate", "theme", "icon"];
+
+var _templateObject;
+
+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, { useState, useEffect } from 'react';
+import { PanResponder } from 'react-native';
+import styled, { withTheme } from 'styled-components';
+import { number, func, bool, shape } from 'prop-types';
+import { StarFilled } from '@gympass/yoga-icons';
+import { max as maxPropType } from '../../shared';
+var SVG_DEFAULT_SIZE = 12;
+var RatingWrapper = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return "\n    width: " + width + "px;\n    height: " + height + "px;\n  ";
+});
+/** Use the Rating component to view other people's opinions and experiences. */
+
+var Rating = function Rating(_ref2) {
+  var value = _ref2.value,
+      max = _ref2.max,
+      readOnly = _ref2.readOnly,
+      onRate = _ref2.onRate,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      colors = _ref2$theme$yoga.colors,
+      rating = _ref2$theme$yoga.components.rating,
+      _ref2$icon = _ref2.icon,
+      _ref2$icon$type = _ref2$icon.type,
+      Icon = _ref2$icon$type === void 0 ? StarFilled : _ref2$icon$type,
+      _ref2$icon$size = _ref2$icon.size,
+      iconSize = _ref2$icon$size === void 0 ? 24 : _ref2$icon$size,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var _useState = useState({}),
+      panResponder = _useState[0],
+      setPanResponder = _useState[1];
+
+  var _useState2 = useState({}),
+      wrapperLayout = _useState2[0],
+      setWrapperLayout = _useState2[1];
+
+  var _useState3 = useState(0),
+      swipeRating = _useState3[0],
+      setSwipeRating = _useState3[1];
+
+  var _useState4 = useState(false),
+      swipping = _useState4[0],
+      toggleSwipping = _useState4[1];
+
+  function getCurrentRating(swipeValue) {
+    var currentRating = 1;
+
+    if (swipeValue > wrapperLayout.width) {
+      currentRating = max;
+    } else if (swipeValue <= 0) {
+      currentRating = 0;
+    } else {
+      currentRating = Math.round(swipeValue / (wrapperLayout.width / max));
+    }
+
+    return currentRating || 1;
+  }
+
+  useEffect(function () {
+    var responder = PanResponder.create({
+      onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
+        return true;
+      },
+      onStartShouldSetPanResponderCapture: function onStartShouldSetPanResponderCapture() {
+        return true;
+      },
+      onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
+        return true;
+      },
+      onMoveShouldSetPanResponderCapture: function onMoveShouldSetPanResponderCapture() {
+        return true;
+      },
+      onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
+        return true;
+      },
+      onPanResponderGrant: function onPanResponderGrant(_ref3) {
+        var pageX = _ref3.nativeEvent.pageX;
+        toggleSwipping(true);
+        setSwipeRating(getCurrentRating(pageX - wrapperLayout.x));
+      },
+      onPanResponderMove: function onPanResponderMove(_ref4) {
+        var pageX = _ref4.nativeEvent.pageX;
+        setSwipeRating(getCurrentRating(pageX - wrapperLayout.x));
+      },
+      onPanResponderRelease: function onPanResponderRelease(_ref5) {
+        var pageX = _ref5.nativeEvent.pageX;
+        setSwipeRating(0);
+        toggleSwipping(false);
+        onRate(getCurrentRating(pageX - wrapperLayout.x));
+      }
+    });
+    setPanResponder(responder);
+  }, [wrapperLayout]);
+  return /*#__PURE__*/React.createElement(RatingWrapper, _extends({
+    height: iconSize,
+    width: iconSize * max,
+    pointerEvents: readOnly ? 'none' : 'auto'
+  }, rest, panResponder.panHandlers, {
+    onLayout: function onLayout(_ref6) {
+      var layout = _ref6.nativeEvent.layout;
+      return setWrapperLayout(layout);
+    }
+  }), Array.from({
+    length: max
+  }, function (_, i) {
+    var diff = i + 1 - value;
+
+    if (swipeRating >= i + 1 || !swipping && diff <= 0) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        key: "filled-" + i,
+        fill: rating.backgroundColor,
+        width: iconSize,
+        height: iconSize
+      });
+    }
+
+    if (diff > 0 && diff < 1) {
+      var width = (1 - diff) * iconSize;
+      var dWidth = diff * iconSize;
+      var wViewBox = SVG_DEFAULT_SIZE * (1 - diff);
+      var dViewBox = SVG_DEFAULT_SIZE * diff;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: "half-" + i
+      }, /*#__PURE__*/React.createElement(Icon, {
+        fill: rating.backgroundColor,
+        width: width,
+        height: iconSize,
+        viewBox: "0 0 " + wViewBox + " " + SVG_DEFAULT_SIZE
+      }), /*#__PURE__*/React.createElement(Icon, {
+        fill: colors.elements.lineAndBorders,
+        width: dWidth,
+        height: iconSize,
+        viewBox: wViewBox + " 0 " + dViewBox + " " + SVG_DEFAULT_SIZE
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, {
+      key: "unfilled-" + i,
+      fill: colors.elements.lineAndBorders,
+      width: iconSize,
+      height: iconSize
+    });
+  }));
+};
+
+Rating.propTypes = {
+  value: number,
+
+  /** The icon to display */
+  icon: shape({
+    type: func,
+    size: maxPropType(24)
+  }),
+
+  /** Maximum rating */
+  max: number,
+
+  /** false to make it interactable */
+  readOnly: bool,
+
+  /** Event to be fired on click */
+  onRate: func
+};
+Rating.defaultProps = {
+  value: undefined,
+  icon: {
+    type: StarFilled,
+    size: 24
+  },
+  max: 5,
+  readOnly: true,
+  onRate: function onRate(rating) {} // eslint-disable-line no-unused-vars
+
+};
+export default withTheme(Rating);

package/esm/Rating/native/Rating.test.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { ThemeProvider } from '../..';
+import Rating from '.';
+describe('<Rating />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with Rating', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, null))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot when it is not readOnly', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        readOnly: false
+      }))),
+          toJSON = _render2.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot with different values', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        value: 0
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 0.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.2
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.3
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.4
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.6
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.7
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.8
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.9
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 2
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 2.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 3
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 3.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 4
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 4.5
+      }))),
+          toJSON = _render3.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot with different icon quantity', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 0
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 0.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 1.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 2
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 2.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 3
+      }))),
+          toJSON = _render4.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match snapshot with different icon', function () {
+      var CircleIcon = function CircleIcon(props) {
+        return /*#__PURE__*/React.createElement(Svg, props, /*#__PURE__*/React.createElement(Circle, {
+          cx: 12,
+          cy: 12,
+          r: 12
+        }));
+      };
+
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        icon: {
+          type: CircleIcon
+        },
+        value: 0
+      }), /*#__PURE__*/React.createElement(Rating, {
+        icon: {
+          type: CircleIcon
+        },
+        value: 1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        icon: {
+          type: CircleIcon
+        },
+        value: 2
+      }))),
+          toJSON = _render5.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Rating/native/index.js

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

package/esm/Rating/web/Rating.test.js

@@ -0,0 +1,184 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../..';
+import Rating from '.';
+describe('<Rating />', function () {
+  var originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
+  beforeAll(function () {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 76 // 5 stars (5 * 12px + 4 * 4px gutter)
+
+    });
+  });
+  afterAll(function () {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
+  });
+  describe('Snapshots', function () {
+    it('should match snapshot with Rating', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different values', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        value: 0
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 0.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.2
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.3
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.4
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.6
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.7
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.8
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 1.9
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 2
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 2.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 3
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 3.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 4
+      }), /*#__PURE__*/React.createElement(Rating, {
+        value: 4.5
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different icon quantity', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 0
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 0.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 1.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 2
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 2.5
+      }), /*#__PURE__*/React.createElement(Rating, {
+        max: 3,
+        value: 3
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with different icon', function () {
+      var Circle = function Circle(props) {
+        return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("circle", {
+          cx: "12",
+          cy: "12",
+          r: "12"
+        }));
+      };
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        icon: {
+          type: Circle
+        },
+        value: 0
+      }), /*#__PURE__*/React.createElement(Rating, {
+        icon: {
+          type: Circle
+        },
+        value: 1
+      }), /*#__PURE__*/React.createElement(Rating, {
+        icon: {
+          type: Circle
+        },
+        value: 2
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot when mouse over', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        readOnly: false
+      }))),
+          container = _render5.container;
+
+      var firstChild = container.firstChild;
+      fireEvent.mouseMove(firstChild, {
+        /** Each star has 12px. Gutter is 4px.
+         * For the third star, we should set clentX > 32px and < 48px */
+        clientX: 40
+      });
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onRate when clicking', function () {
+      var onRateMock = jest.fn();
+
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        onRate: onRateMock,
+        readOnly: false
+      }))),
+          container = _render6.container;
+
+      var firstChild = container.firstChild;
+      fireEvent.mouseMove(firstChild, {
+        clientX: 40 // third star position
+
+      });
+      fireEvent.click(firstChild);
+      expect(onRateMock).toHaveBeenCalled();
+      expect(onRateMock).toHaveBeenCalledWith(3);
+    });
+    it('should call onMouseOver callback', function () {
+      var onMouseOverMock = jest.fn();
+
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        onMouseOver: onMouseOverMock,
+        readOnly: false
+      }))),
+          container = _render7.container;
+
+      var firstChild = container.firstChild;
+      fireEvent.mouseOver(firstChild);
+      expect(onMouseOverMock).toHaveBeenCalled();
+    });
+    it('should call onMouseLeave callback', function () {
+      var onMouseLeaveMock = jest.fn();
+
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Rating, {
+        onMouseLeave: onMouseLeaveMock,
+        readOnly: false
+      }))),
+          container = _render8.container;
+
+      var firstChild = container.firstChild;
+      fireEvent.mouseLeave(firstChild);
+      expect(onMouseLeaveMock).toHaveBeenCalled();
+    });
+  });
+});

package/esm/Result/index.native.js

@@ -0,0 +1,8 @@
+import Result from './native';
+import ResultDetails from './native/Details';
+import ResultButton from './native/ResultButton';
+import ResultTags from './native/Tags';
+Result.Details = ResultDetails;
+Result.Button = ResultButton;
+Result.Tags = ResultTags;
+export default Result;

package/esm/Result/native/Attendances.js

@@ -0,0 +1,55 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import { arrayOf, func, shape, string } from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import Box from '../../Box';
+import Text from '../../Text';
+import Rate from './Rate';
+import TinyTextIcon from './TinyTextIcon';
+var List = styled(Text.Tiny).attrs({
+  numberOfLines: 1,
+  variant: 'deep'
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
+var ItemSeparator = styled(Box).attrs({
+  width: 'xxxsmall',
+  height: 'zero'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
+
+var Attendances = function Attendances(_ref) {
+  var attendances = _ref.attendances,
+      rate = _ref.rate;
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    mb: "xxxsmall"
+  }, /*#__PURE__*/React.createElement(List, null, attendances.map(function (_ref2) {
+    var description = _ref2.description,
+        icon = _ref2.icon;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: description
+    }, /*#__PURE__*/React.createElement(TinyTextIcon, {
+      as: icon,
+      fill: "deep"
+    }), /*#__PURE__*/React.createElement(ItemSeparator, null), description, /*#__PURE__*/React.createElement(ItemSeparator, null));
+  })), rate && /*#__PURE__*/React.createElement(Rate, {
+    rate: rate
+  }));
+};
+
+Attendances.propTypes = {
+  attendances: arrayOf(shape({
+    description: string,
+    icon: func
+  })).isRequired,
+  rate: string
+};
+Attendances.defaultProps = {
+  rate: undefined
+};
+export default Attendances;

package/esm/Result/native/Details.js

@@ -0,0 +1,97 @@
+var _excluded = ["icon", "variant"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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 { arrayOf, number, shape, bool, func, oneOfType, node, string } from 'prop-types';
+import styled from 'styled-components';
+import Text from '../../Text';
+import Box from '../../Box';
+import TinyTextIcon from './TinyTextIcon';
+var Container = styled(Text.Tiny)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: ", "px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.yoga.spacing.small;
+});
+var Separator = styled(Box).attrs({
+  width: 'xxxsmall',
+  height: 'xxxsmall'
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
+var StyledText = styled(Text.Tiny)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
+  var xxxsmall = _ref2.theme.yoga.spacing.xxxsmall;
+  return "\n    margin-left: " + xxxsmall + "px;\n    margin-right: " + xxxsmall + "px;\n  ";
+});
+
+var ResultDetails = function ResultDetails(_ref3) {
+  var items = _ref3.items,
+      limit = _ref3.limit,
+      limitLabel = _ref3.limitLabel,
+      dots = _ref3.dots,
+      Item = _ref3.renderItem;
+  var refinedList = limit !== 0 ? items.slice(0, limit) : items;
+  var numberOfItemsLeft = items.length - limit;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: "row",
+    alignItems: "center",
+    mt: "xxxsmall"
+  }, /*#__PURE__*/React.createElement(Container, {
+    numberOfLines: 1
+  }, refinedList == null ? void 0 : refinedList.map(function (_ref4, index) {
+    var IconComponent = _ref4.icon,
+        variant = _ref4.variant,
+        props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+    var isLastItem = index === refinedList.length - 1;
+    var showNumbersOfItemsLeft = isLastItem && limit !== 0 && limit < items.length;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement(React.Fragment, {
+        key: index
+      }, IconComponent && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TinyTextIcon, {
+        as: IconComponent,
+        fill: variant
+      }), /*#__PURE__*/React.createElement(Separator, null)), /*#__PURE__*/React.createElement(Item, _extends({
+        variant: variant
+      }, props)), !isLastItem && (dots ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(StyledText, {
+        variant: variant
+      }, "\u2022"), /*#__PURE__*/React.createElement(Separator, null)) : /*#__PURE__*/React.createElement(Separator, null)), showNumbersOfItemsLeft && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(StyledText, {
+        variant: variant
+      }, "+ ", numberOfItemsLeft, !!limitLabel && " " + limitLabel), /*#__PURE__*/React.createElement(Separator, null)))
+    );
+  })));
+};
+
+ResultDetails.displayName = 'Result.Details';
+ResultDetails.propTypes = {
+  /** Props to be passed to each component at `renderItem` */
+  items: arrayOf(shape({})).isRequired,
+
+  /** If has limit of items to show in component.Other with show with + 4 for
+   * example
+   * */
+  limit: number,
+
+  /** If is necessary show a label after the limit.Example + 4 activities */
+  limitLabel: string,
+
+  /** If shows the dot separator between the itens */
+  dots: bool,
+
+  /** The component to render as the item of the list. */
+  renderItem: oneOfType([node, func, shape({
+    render: func.isRequired
+  })])
+};
+ResultDetails.defaultProps = {
+  limit: undefined,
+  limitLabel: '',
+  dots: false,
+  renderItem: Text.Tiny
+};
+export default ResultDetails;

package/esm/Result/native/Rate.js

@@ -0,0 +1,35 @@
+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 { string } from 'prop-types';
+import { StarFilled } from '@gympass/yoga-icons';
+import Icon from '../../Icon';
+import Text from '../../Text';
+var Content = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  margin-left: 10px;\n  align-items: center;\n"])));
+var RateValue = styled(Text.Medium)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var _ref$theme$yoga = _ref.theme.yoga,
+      xxxsmall = _ref$theme$yoga.spacing.xxxsmall,
+      xsmall = _ref$theme$yoga.lineHeights.xsmall;
+  return "\n      margin-left: " + xxxsmall + "px;\n      line-height: " + xsmall + "px;\n    ";
+});
+
+var Rate = function Rate(_ref2) {
+  var rate = _ref2.rate;
+  return /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Icon, {
+    as: StarFilled,
+    fill: "deep",
+    width: "xsmall",
+    height: "xsmall"
+  }), /*#__PURE__*/React.createElement(RateValue, {
+    variant: "deep",
+    size: "xsmall"
+  }, rate));
+};
+
+Rate.propTypes = {
+  rate: string.isRequired
+};
+export default Rate;