@gympass/yoga 7.65.0 → 7.66.1

package/esm/RadioGroup/web/RadioGroup.test.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RadioGroup from '..';
+import ThemeProvider from '../../Theme';
+describe('<RadioGroup />', function () {
+  describe('Snapshots', function () {
+    it('should match snapshot with default radiogroup', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with full radiogroup', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
+        full: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match snapshot with radios as children', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
+          container = _render3.container,
+          getAllByText = _render3.getAllByText;
+
+      expect(container).toMatchSnapshot();
+      expect(getAllByText(/^Option/)).toHaveLength(3);
+    });
+    it('should match snapshot with small radios', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
+        small: true
+      }, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should has setted the selected value', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
+        selectedValue: "Option 2"
+      }, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
+          container = _render5.container,
+          getByText = _render5.getByText;
+
+      expect(container).toMatchSnapshot();
+      expect(getByText('Option 2').checked).toBe(true);
+    });
+    it('should set the name for all children', function () {
+      var groupName = 'test';
+
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
+        name: groupName
+      }, /*#__PURE__*/React.createElement(RadioGroup.Button, {
+        "data-testid": "Option 1"
+      }, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
+        "data-testid": "Option 2"
+      }, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
+        "data-testid": "Option 3"
+      }, "Option 3")))),
+          container = _render6.container,
+          getAllByTestId = _render6.getAllByTestId;
+
+      expect(container).toMatchSnapshot(); // use testid to get the input[type=radio] instead of label
+
+      getAllByTestId(/^Option/).map(function (radio) {
+        return expect(radio.name).toBe(groupName);
+      });
+    });
+  });
+});
+describe('Events', function () {
+  it('should set the onchange for its children', function () {
+    var onChangeMock = jest.fn();
+
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
+      onChange: onChangeMock
+    }, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
+        getByText = _render7.getByText;
+
+    var firstOption = getByText('Option 1');
+    fireEvent.click(firstOption);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});

package/esm/Rating/index.native.js

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

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;