@gympass/yoga 7.69.2 → 7.70.0

package/cjs/Accordion/Accordion.theme.js

@@ -5,9 +5,12 @@ exports["default"] = void 0;
 
 var Accordion = function Accordion(_ref) {
   var spacing = _ref.spacing,
-      fontWeights = _ref.fontWeights;
+      fontWeights = _ref.fontWeights,
+      fontSizes = _ref.fontSizes;
   return {
     padding: {
+      zero: spacing.zero,
+      small: spacing.small,
       standard: spacing.medium,
       large: spacing.large
     },
@@ -18,7 +21,12 @@ var Accordion = function Accordion(_ref) {
       header: spacing.xxxsmall
     },
     fontWeight: {
-      title: fontWeights.medium
+      medium: fontWeights.medium,
+      regular: fontWeights.regular
+    },
+    fontSize: {
+      medium: fontSizes.medium,
+      small: fontSizes.small
     }
   };
 };

package/cjs/Accordion/web/Accordion.js

@@ -13,9 +13,13 @@ var _yogaIcons = require("@gympass/yoga-icons");
 
 var _yoga = require("@gympass/yoga");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _Content = _interopRequireDefault(require("./Content"));
 
-var _excluded = ["title", "subtitle", "children", "disabled", "expanded"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,12 +35,24 @@ var Accordion = function Accordion(_ref) {
       children = _ref.children,
       disabled = _ref.disabled,
       expanded = _ref.expanded,
+      small = _ref.small,
+      hasHorizontalPadding = _ref.hasHorizontalPadding,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useState = (0, _react.useState)(expanded),
       open = _useState[0],
       setOpen = _useState[1];
 
+  var getVerticalPadding = function getVerticalPadding(accordion) {
+    if (small) return accordion.padding.small;
+    return accordion.padding.large;
+  };
+
+  var getHorizontalPadding = function getHorizontalPadding(accordion) {
+    if (hasHorizontalPadding) return accordion.padding.standard;
+    return accordion.padding.zero;
+  };
+
   var AccordionWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    border: none;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    z-index: 1;\n\n    ", "\n\n    hr {\n      bottom: 0;\n      left: 0;\n      margin: 0;\n      position: absolute;\n      z-index: -1;\n    }\n  "])), function (_ref2) {
     var _ref2$theme$yoga$colo = _ref2.theme.yoga.colors,
         white = _ref2$theme$yoga$colo.white,
@@ -46,7 +62,7 @@ var Accordion = function Accordion(_ref) {
 
   var Header = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n\n    ", "\n\n    &:focus-visible {\n      ", "\n    }\n\n    ", "\n  "])), function (_ref3) {
     var accordion = _ref3.theme.yoga.components.accordion;
-    return "\n      padding: " + (subtitle ? accordion.padding.standard + "px" : accordion.padding.large + "px " + accordion.padding.standard + "px") + ";\n    ";
+    return "\n      padding:" + getVerticalPadding(accordion) + "px " + getHorizontalPadding(accordion) + "px;\n    ";
   }, function (_ref4) {
     var elements = _ref4.theme.yoga.colors.elements;
     return "\n        background: " + elements.backgroundAndDisabled + ";\n\n      ";
@@ -54,27 +70,30 @@ var Accordion = function Accordion(_ref) {
 
   var Title = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    align-items: flex-start;\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n\n    ", "\n\n    ", "\n  "])), function (_ref5) {
     var accordion = _ref5.theme.yoga.components.accordion;
-    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n\n      p {\n        font-weight: " + accordion.fontWeight.title + ";\n      }\n    ";
+    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n    ";
   }, disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref6) {
     var text = _ref6.theme.yoga.colors.text;
     return "\n          color: " + text.secundary + ";\n        ";
   }));
 
-  var AccordionContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: auto;\n    max-height: ", ";\n    overflow: hidden;\n    transition: max-height 200ms ease-in-out;\n  "])), function (_ref7) {
+  var AccordionContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: auto;\n    max-height: ", ";\n    overflow: hidden;\n    transition: max-height 200ms ease-in-out;\n\n    ", "\n\n    ", "\n  "])), function (_ref7) {
     var isOpen = _ref7.isOpen;
     return isOpen ? '9999px' : '0';
-  });
+  }, function (_ref8) {
+    var accordion = _ref8.theme.yoga.components.accordion;
+    return small && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding-bottom: ", "px;\n        }\n      "])), _Content["default"], accordion.padding.small);
+  }, !hasHorizontalPadding && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    "])), _Content["default"]));
 
-  var ArrowWrapper = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    svg {\n      transform: ", ";\n      transition: all 200ms ease-out 0s;\n\n      ", "\n    }\n\n    ", "\n  "])), function (_ref8) {
-    var isOpen = _ref8.isOpen;
+  var ArrowWrapper = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    svg {\n      transform: ", ";\n      transition: all 200ms ease-out 0s;\n\n      ", "\n    }\n\n    ", "\n  "])), function (_ref9) {
+    var isOpen = _ref9.isOpen;
     return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
-  }, function (_ref9) {
-    var _ref9$theme$yoga$colo = _ref9.theme.yoga.colors,
-        primary = _ref9$theme$yoga$colo.primary,
-        text = _ref9$theme$yoga$colo.text;
-    return "\n          fill: " + (disabled ? text.secondary : primary) + ";\n        ";
   }, function (_ref10) {
-    var accordion = _ref10.theme.yoga.components.accordion;
+    var _ref10$theme$yoga$col = _ref10.theme.yoga.colors,
+        primary = _ref10$theme$yoga$col.primary,
+        text = _ref10$theme$yoga$col.text;
+    return "\n          fill: " + (disabled ? text.secondary : primary) + ";\n        ";
+  }, function (_ref11) {
+    var accordion = _ref11.theme.yoga.components.accordion;
     return "\n      padding: " + accordion.paddingArrow.total + "px;\n    ";
   });
 
@@ -83,8 +102,11 @@ var Accordion = function Accordion(_ref) {
     onClick: function onClick() {
       setOpen(!open);
     }
-  }, /*#__PURE__*/_react["default"].createElement(Title, null, /*#__PURE__*/_react["default"].createElement(_yoga.Text, {
+  }, /*#__PURE__*/_react["default"].createElement(Title, null, small ? /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
     color: disabled ? 'deep' : undefined
+  }, title) : /*#__PURE__*/_react["default"].createElement(_yoga.Text.Medium, {
+    color: disabled ? 'deep' : undefined,
+    lineHeight: "medium"
   }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
     color: "deep"
   }, subtitle)), /*#__PURE__*/_react["default"].createElement(ArrowWrapper, {
@@ -102,12 +124,16 @@ Accordion.propTypes = {
   subtitle: _propTypes.string,
   children: _propTypes.node.isRequired,
   disabled: _propTypes.bool,
-  expanded: _propTypes.bool
+  expanded: _propTypes.bool,
+  small: _propTypes.bool,
+  hasHorizontalPadding: _propTypes.bool
 };
 Accordion.defaultProps = {
   subtitle: undefined,
   disabled: false,
-  expanded: false
+  expanded: false,
+  small: false,
+  hasHorizontalPadding: true
 };
 var _default = Accordion;
 exports["default"] = _default;

package/cjs/Accordion/web/Small.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 AccordionSmall(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], _extends({}, props, {
+    small: true
+  }));
+}
+
+AccordionSmall.propTypes = _Accordion["default"].propTypes;
+AccordionSmall.defaultProps = _Accordion["default"].defaultProps;
+var _default = AccordionSmall;
+exports["default"] = _default;

package/cjs/Accordion/web/index.js

@@ -7,8 +7,11 @@ var _Accordion = _interopRequireDefault(require("./Accordion"));
 
 var _Content = _interopRequireDefault(require("./Content"));
 
+var _Small = _interopRequireDefault(require("./Small"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 _Accordion["default"].Content = _Content["default"];
+_Accordion["default"].Small = _Small["default"];
 var _default = _Accordion["default"];
 exports["default"] = _default;

package/esm/Accordion/Accordion.theme.js

@@ -1,8 +1,11 @@
 var Accordion = function Accordion(_ref) {
   var spacing = _ref.spacing,
-      fontWeights = _ref.fontWeights;
+      fontWeights = _ref.fontWeights,
+      fontSizes = _ref.fontSizes;
   return {
     padding: {
+      zero: spacing.zero,
+      small: spacing.small,
       standard: spacing.medium,
       large: spacing.large
     },
@@ -13,7 +16,12 @@ var Accordion = function Accordion(_ref) {
       header: spacing.xxxsmall
     },
     fontWeight: {
-      title: fontWeights.medium
+      medium: fontWeights.medium,
+      regular: fontWeights.regular
+    },
+    fontSize: {
+      medium: fontSizes.medium,
+      small: fontSizes.small
     }
   };
 };

package/esm/Accordion/web/Accordion.js

@@ -1,6 +1,6 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-var _excluded = ["title", "subtitle", "children", "disabled", "expanded"];
+var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
@@ -11,6 +11,7 @@ import styled, { css } from 'styled-components';
 import { string, node, bool } from 'prop-types';
 import { ChevronDown } from '@gympass/yoga-icons';
 import { Text, Divider } from '@gympass/yoga';
+import Content from './Content';
 
 var Accordion = function Accordion(_ref) {
   var title = _ref.title,
@@ -18,12 +19,24 @@ var Accordion = function Accordion(_ref) {
       children = _ref.children,
       disabled = _ref.disabled,
       expanded = _ref.expanded,
+      small = _ref.small,
+      hasHorizontalPadding = _ref.hasHorizontalPadding,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useState = useState(expanded),
       open = _useState[0],
       setOpen = _useState[1];
 
+  var getVerticalPadding = function getVerticalPadding(accordion) {
+    if (small) return accordion.padding.small;
+    return accordion.padding.large;
+  };
+
+  var getHorizontalPadding = function getHorizontalPadding(accordion) {
+    if (hasHorizontalPadding) return accordion.padding.standard;
+    return accordion.padding.zero;
+  };
+
   var AccordionWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    border: none;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    z-index: 1;\n\n    ", "\n\n    hr {\n      bottom: 0;\n      left: 0;\n      margin: 0;\n      position: absolute;\n      z-index: -1;\n    }\n  "])), function (_ref2) {
     var _ref2$theme$yoga$colo = _ref2.theme.yoga.colors,
         white = _ref2$theme$yoga$colo.white,
@@ -32,32 +45,35 @@ var Accordion = function Accordion(_ref) {
   });
   var Header = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n\n    ", "\n\n    &:focus-visible {\n      ", "\n    }\n\n    ", "\n  "])), function (_ref3) {
     var accordion = _ref3.theme.yoga.components.accordion;
-    return "\n      padding: " + (subtitle ? accordion.padding.standard + "px" : accordion.padding.large + "px " + accordion.padding.standard + "px") + ";\n    ";
+    return "\n      padding:" + getVerticalPadding(accordion) + "px " + getHorizontalPadding(accordion) + "px;\n    ";
   }, function (_ref4) {
     var elements = _ref4.theme.yoga.colors.elements;
     return "\n        background: " + elements.backgroundAndDisabled + ";\n\n      ";
   }, disabled && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))));
   var Title = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    align-items: flex-start;\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n\n    ", "\n\n    ", "\n  "])), function (_ref5) {
     var accordion = _ref5.theme.yoga.components.accordion;
-    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n\n      p {\n        font-weight: " + accordion.fontWeight.title + ";\n      }\n    ";
+    return "\n      gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n      margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n    ";
   }, disabled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref6) {
     var text = _ref6.theme.yoga.colors.text;
     return "\n          color: " + text.secundary + ";\n        ";
   }));
-  var AccordionContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: auto;\n    max-height: ", ";\n    overflow: hidden;\n    transition: max-height 200ms ease-in-out;\n  "])), function (_ref7) {
+  var AccordionContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    height: auto;\n    max-height: ", ";\n    overflow: hidden;\n    transition: max-height 200ms ease-in-out;\n\n    ", "\n\n    ", "\n  "])), function (_ref7) {
     var isOpen = _ref7.isOpen;
     return isOpen ? '9999px' : '0';
-  });
-  var ArrowWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    svg {\n      transform: ", ";\n      transition: all 200ms ease-out 0s;\n\n      ", "\n    }\n\n    ", "\n  "])), function (_ref8) {
-    var isOpen = _ref8.isOpen;
+  }, function (_ref8) {
+    var accordion = _ref8.theme.yoga.components.accordion;
+    return small && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        ", " {\n          padding-bottom: ", "px;\n        }\n      "])), Content, accordion.padding.small);
+  }, !hasHorizontalPadding && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    "])), Content));
+  var ArrowWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    svg {\n      transform: ", ";\n      transition: all 200ms ease-out 0s;\n\n      ", "\n    }\n\n    ", "\n  "])), function (_ref9) {
+    var isOpen = _ref9.isOpen;
     return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
-  }, function (_ref9) {
-    var _ref9$theme$yoga$colo = _ref9.theme.yoga.colors,
-        primary = _ref9$theme$yoga$colo.primary,
-        text = _ref9$theme$yoga$colo.text;
-    return "\n          fill: " + (disabled ? text.secondary : primary) + ";\n        ";
   }, function (_ref10) {
-    var accordion = _ref10.theme.yoga.components.accordion;
+    var _ref10$theme$yoga$col = _ref10.theme.yoga.colors,
+        primary = _ref10$theme$yoga$col.primary,
+        text = _ref10$theme$yoga$col.text;
+    return "\n          fill: " + (disabled ? text.secondary : primary) + ";\n        ";
+  }, function (_ref11) {
+    var accordion = _ref11.theme.yoga.components.accordion;
     return "\n      padding: " + accordion.paddingArrow.total + "px;\n    ";
   });
   return /*#__PURE__*/React.createElement(AccordionWrapper, props, /*#__PURE__*/React.createElement(Header, {
@@ -65,8 +81,11 @@ var Accordion = function Accordion(_ref) {
     onClick: function onClick() {
       setOpen(!open);
     }
-  }, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Title, null, small ? /*#__PURE__*/React.createElement(Text.Small, {
     color: disabled ? 'deep' : undefined
+  }, title) : /*#__PURE__*/React.createElement(Text.Medium, {
+    color: disabled ? 'deep' : undefined,
+    lineHeight: "medium"
   }, title), /*#__PURE__*/React.createElement(Text.Small, {
     color: "deep"
   }, subtitle)), /*#__PURE__*/React.createElement(ArrowWrapper, {
@@ -84,11 +103,15 @@ Accordion.propTypes = {
   subtitle: string,
   children: node.isRequired,
   disabled: bool,
-  expanded: bool
+  expanded: bool,
+  small: bool,
+  hasHorizontalPadding: bool
 };
 Accordion.defaultProps = {
   subtitle: undefined,
   disabled: false,
-  expanded: false
+  expanded: false,
+  small: false,
+  hasHorizontalPadding: true
 };
 export default Accordion;

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

@@ -1,20 +1,106 @@
 import React from 'react';
 import { render, cleanup, screen } from '@testing-library/react';
+import { fontSizes, fontWeights, spacing } from '@gympass/yoga-tokens/src/global';
 import { Text, Button } from '@gympass/yoga';
 import { ThemeProvider } from '../..';
 import Accordion from '.';
 describe('<Accordion />', function () {
   afterEach(cleanup);
-  it('should match snapshot', function () {
-    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
-      title: "Title"
-    }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"), /*#__PURE__*/React.createElement(Button, {
-      small: true,
-      inverted: true
-    }, "Small button"))))),
-        baseElement = _render.baseElement;
+  describe('should correctly render', function () {
+    it('the default version', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
+        title: "Default",
+        expanded: true
+      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
+          container = _render.container;
+
+      expect(screen.getByText('Default')).toBeInTheDocument();
+      expect(screen.getByText('Default')).toHaveStyle({
+        fontSize: fontSizes.medium + "px",
+        fontWeight: fontWeights.medium
+      });
+      expect(screen.getByRole('button')).toHaveStyle({
+        padding: spacing.large + "px " + spacing.medium + "px"
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it('the small version', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion.Small, {
+        title: "Small"
+      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
+          container = _render2.container;
+
+      expect(screen.getByText('Small')).toBeInTheDocument();
+      expect(screen.getByText('Small')).toHaveStyle({
+        fontSize: fontSizes.small + "px",
+        fontWeight: fontWeights.regular
+      });
+      expect(screen.getByRole('button')).toHaveStyle({
+        padding: spacing.small + "px " + spacing.medium + "px"
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it('the default version with subtitle', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
+        title: "Default",
+        subtitle: "default with subtitle"
+      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
+          container = _render3.container;
+
+      expect(screen.getByText('Default')).toBeInTheDocument();
+      expect(screen.getByText('default with subtitle')).toBeInTheDocument();
+      expect(screen.getByText('Default')).toHaveStyle({
+        fontSize: fontSizes.medium + "px",
+        fontWeight: fontWeights.medium
+      });
+      expect(screen.getByRole('button')).toHaveStyle({
+        padding: spacing.large + "px " + spacing.medium + "px"
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it('the small version with subtitle', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion.Small, {
+        title: "Small",
+        subtitle: "small with subtitle"
+      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
+          container = _render4.container;
+
+      expect(screen.getByText('Small')).toBeInTheDocument();
+      expect(screen.getByText('small with subtitle')).toBeInTheDocument();
+      expect(screen.getByText('Small')).toHaveStyle({
+        fontSize: fontSizes.small + "px",
+        fontWeight: fontWeights.regular
+      });
+      expect(screen.getByRole('button')).toHaveStyle({
+        padding: spacing.small + "px " + spacing.medium + "px"
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it('the default version without side padding', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
+        title: "Default",
+        expanded: true,
+        hasHorizontalPadding: false
+      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
+          container = _render5.container;
+
+      expect(screen.getByRole('button')).toHaveStyle({
+        padding: spacing.large + "px " + spacing.zero + "px"
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
+    it('the small version without side padding', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion.Small, {
+        title: "Small",
+        hasHorizontalPadding: false
+      }, /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content"))))),
+          container = _render6.container;
 
-    expect(baseElement).toMatchSnapshot();
+      expect(screen.getByRole('button')).toHaveStyle({
+        padding: spacing.small + "px " + spacing.zero + "px"
+      });
+      expect(container.firstChild).toMatchSnapshot();
+    });
   });
   it('should have className when passed as props', function () {
     render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {

package/esm/Accordion/web/Small.js

@@ -0,0 +1,14 @@
+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 Accordion from './Accordion';
+
+function AccordionSmall(props) {
+  return /*#__PURE__*/React.createElement(Accordion, _extends({}, props, {
+    small: true
+  }));
+}
+
+AccordionSmall.propTypes = Accordion.propTypes;
+AccordionSmall.defaultProps = Accordion.defaultProps;
+export default AccordionSmall;

package/esm/Accordion/web/index.js

@@ -1,4 +1,6 @@
 import Accordion from './Accordion';
 import Content from './Content';
+import AccordionSmall from './Small';
 Accordion.Content = Content;
+Accordion.Small = AccordionSmall;
 export default Accordion;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.69.2",
+  "version": "7.70.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -53,7 +53,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "ef314aea8ebfe8e77cf8f2b46acaa4a3001924f5",
+  "gitHead": "d89f7691d7465a308a6fd5192ee5544f0d738942",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"