@gympass/yoga 7.85.1 → 7.87.0

package/esm/Button/web/Icon.js

@@ -1,4 +1,4 @@
-var _excluded = ["icon", "theme", "small", "disabled"];
+var _excluded = ["icon", "theme", "small", "disabled", "isLoading"];
 
 var _templateObject;
 
@@ -13,6 +13,7 @@ import { oneOfType, func, node, bool } from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 import StyledButton from './StyledButton';
 import Icon from '../../Icon';
+import Spinner from '../../Spinner';
 var IconStyled = styled(StyledButton)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  padding: 0;\n\n  svg {\n    width: unset;\n    height: unset;\n    margin-right: unset;\n\n    transition: fill 0.2s;\n  }\n\n  ", "\n"])), function (_ref) {
   var small = _ref.small,
       button = _ref.theme.yoga.components.button;
@@ -23,16 +24,22 @@ var ButtonIcon = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       button = _ref2.theme.yoga.components.button,
       small = _ref2.small,
       disabled = _ref2.disabled,
+      isLoading = _ref2.isLoading,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(IconStyled, _extends({}, props, {
     ref: ref,
     small: small,
-    disabled: disabled,
-    "aria-disabled": disabled
-  }), /*#__PURE__*/React.createElement(Icon, {
+    disabled: disabled || isLoading,
+    "aria-disabled": disabled,
+    isLoading: isLoading
+  }), isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+    color: "deep",
+    size: small ? 'small' : 'medium'
+  }) : /*#__PURE__*/React.createElement(Icon, {
     as: icon,
-    size: small ? button.icon.size.small : button.icon.size["default"]
+    size: small ? button.icon.size.small : button.icon.size["default"],
+    role: "img"
   }));
 });
 ButtonIcon.propTypes = {
@@ -40,14 +47,16 @@ ButtonIcon.propTypes = {
   disabled: bool,
   secondary: bool,
   inverted: bool,
-  icon: oneOfType([node, func])
+  icon: oneOfType([node, func]),
+  isLoading: bool
 };
 ButtonIcon.defaultProps = {
   small: false,
   disabled: undefined,
   secondary: false,
   inverted: false,
-  icon: undefined
+  icon: undefined,
+  isLoading: false
 };
 ButtonIcon.displayName = 'Button.Icon';
 export default withTheme(ButtonIcon);

package/esm/Button/web/Link.js

@@ -1,14 +1,10 @@
-var _excluded = ["disabled"];
-
 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 from 'react';
+import React, { forwardRef } from 'react';
 import { bool, string, oneOfType, node, func } from 'prop-types';
 import styled from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
@@ -20,17 +16,20 @@ var Link = styled(Button)(_templateObject || (_templateObject = _taggedTemplateL
   var state = secondary ? 'secondary' : 'primary';
   return "\n      height: unset;\n      padding: 0;\n      background-color: unset;\n      border: none;\n      border-radius: 0;\n      color: " + button.types.link.font[state].color + ";\n\n      svg {\n        margin-right: " + button.types.link.icon.margin.right + "px;\n        fill: " + button.types.link.font[state].color + ";\n      }\n\n      &:disabled,\n      &:not([disabled]):hover,\n      &:not([disabled]):focus,\n      &:not([disabled]):active {\n        box-shadow: unset;\n        background-color: unset;\n      }\n\n      &:not([disabled]):hover  {\n        color: " + hexToRgb(button.types.link.font[state].color, 0.5) + ";\n\n        svg {\n          fill: " + hexToRgb(button.types.link.font[state].color, 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(button.types.link.font[state].color, 0.75) + ";\n\n        svg {\n          fill: " + hexToRgb(button.types.link.font[state].color, 0.75) + ";\n        }\n      }\n\n      &:disabled {\n        color: " + button.types.link.font.disabled.color + ";\n\n        svg {\n          fill: " + button.types.link.font.disabled.color + ";\n        }\n      }\n\n      " + (full ? 'width: 100%' : '') + "\n    ";
 });
+var ButtonLink = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var rest = _extends({}, _ref2);
 
-var ButtonLink = function ButtonLink(_ref2) {
-  var disabled = _ref2.disabled,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
+  var props = Object.fromEntries(Object.entries(rest).filter(function (_ref3) {
+    var key = _ref3[0];
+    return key !== 'isLoading';
+  }));
+  var disabled = props.disabled;
   return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled,
+    ref: ref
   }));
-};
-
+});
 ButtonLink.propTypes = {
   disabled: bool,
   secondary: bool,

package/esm/Button/web/Outline.js

@@ -8,11 +8,12 @@ import Button from './Button';
 var ButtonOutline = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var inverted = _ref.inverted,
       secondary = _ref.secondary,
+      isLoading = _ref.isLoading,
       _ref$theme$yoga = _ref.theme.yoga,
       white = _ref$theme$yoga.colors.white,
       outline = _ref$theme$yoga.components.button.types.outline;
   var state = secondary ? 'secondary' : 'primary';
-  return "\n      background-color: " + outline.backgroundColor["default"] + ";\n      border: " + outline.border.width + "px solid;\n      border-color: " + outline.font["default"][state].color + ";\n      color: " + outline.font["default"][state].color + ";\n\n      svg {\n        fill: " + outline.font["default"][state].color + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus {\n        background-color: " + outline.backgroundColor[state].hover + ";\n        color: " + outline.font.hover.color + ";\n\n        svg {\n          fill: " + outline.font.hover.color + ";\n        }\n      }\n\n      &:not([disabled]):active {\n        background-color: " + outline.backgroundColor["default"] + ";\n        border-color: " + outline.font.pressed[state].color + ";\n        color: " + outline.font.pressed[state].color + ";\n        box-shadow: none;\n\n        svg {\n          fill: " + outline.font.pressed[state].color + ";\n        }\n      }\n\n      &:disabled {\n        background-color: " + outline.backgroundColor["default"] + ";\n        border-color: " + outline.font.disabled.color + ";\n        color: " + outline.font.disabled.color + ";\n\n        svg {\n          fill: " + outline.font.disabled.color + ";\n        }\n      }\n\n      " + (inverted ? "\n            border-color: " + white + ";\n            color: " + white + ";\n\n            svg {\n              fill: " + white + ";\n            }\n\n            &:not([disabled]):hover, &:not([disabled]):focus {\n              background-color: " + white + ";\n              color: " + outline.font["default"][state].color + ";\n\n              svg {\n                fill: " + outline.font["default"][state].color + ";\n              }\n            }\n\n            &:not([disabled]):active {\n              background-color: " + outline.backgroundColor["default"] + ";\n              border-color: " + hexToRgb(white, 0.75) + ";\n              color: " + hexToRgb(white, 0.75) + ";\n\n              svg {\n                fill: " + hexToRgb(white, 0.75) + ";\n              }\n            }\n\n            &:disabled {\n              border-color: " + outline.font.disabled.color + ";\n              color: " + outline.font.disabled.color + ";\n              svg {\n                fill: " + outline.font.disabled.color + ";\n              }\n            }\n          " : '') + "\n    ";
+  return "\n      background-color: " + outline.backgroundColor["default"] + ";\n      border: " + outline.border.width + "px solid;\n      border-color: " + outline.font["default"][state].color + ";\n      color: " + outline.font["default"][state].color + ";\n\n      svg {\n        fill: " + outline.font["default"][state].color + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus {\n        background-color: " + outline.backgroundColor[state].hover + ";\n        color: " + outline.font.hover.color + ";\n\n        svg {\n          fill: " + outline.font.hover.color + ";\n        }\n      }\n\n      &:not([disabled]):active {\n        background-color: " + outline.backgroundColor["default"] + ";\n        border-color: " + outline.font.pressed[state].color + ";\n        color: " + outline.font.pressed[state].color + ";\n        box-shadow: none;\n\n        svg {\n          fill: " + outline.font.pressed[state].color + ";\n        }\n      }\n\n      &:disabled {\n        background-color: " + outline.backgroundColor["default"] + ";\n        border-color: " + outline.font.disabled.color + ";\n        color: " + outline.font.disabled.color + ";\n\n         svg {\n          fill: " + outline.font.disabled.color + ";\n        }\n      }\n\n      " + (inverted ? "\n            border-color: " + white + ";\n            color: " + white + ";\n\n            svg {\n              fill: " + white + ";\n            }\n\n            &:not([disabled]):hover, &:not([disabled]):focus {\n              background-color: " + white + ";\n              color: " + outline.font["default"][state].color + ";\n\n              svg {\n                fill: " + outline.font["default"][state].color + ";\n              }\n            }\n\n            &:not([disabled]):active {\n              background-color: " + outline.backgroundColor["default"] + ";\n              border-color: " + hexToRgb(white, 0.75) + ";\n              color: " + hexToRgb(white, 0.75) + ";\n\n              svg {\n                fill: " + hexToRgb(white, 0.75) + ";\n              }\n            }\n\n            &:disabled {\n              border-color: " + outline.font.disabled.color + ";\n              color: " + outline.font.disabled.color + ";\n              svg {\n                fill: " + outline.font.disabled.color + ";\n              }\n            }\n          " : '') + "\n\n      " + (isLoading ? "\n            &:disabled {\n              color: transparent;\n\n              svg {\n                fill: transparent;\n              }\n            }\n            " : '') + "\n    ";
 });
 ButtonOutline.displayName = 'Button.Outline';
 export default ButtonOutline;

package/esm/Button/web/StyledButton.js

@@ -10,10 +10,11 @@ var StyledButton = styled.button(_templateObject || (_templateObject = _taggedTe
       inverted = _ref.inverted,
       secondary = _ref.secondary,
       disabled = _ref.disabled,
+      isLoading = _ref.isLoading,
       _ref$theme$yoga = _ref.theme.yoga,
       baseFont = _ref$theme$yoga.baseFont,
       button = _ref$theme$yoga.components.button;
   var state = secondary ? 'secondary' : 'primary';
-  return "\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: " + (full ? '100%' : 'auto') + ";\n      height: " + (small ? button.height.small : button.height["default"]) + "px;\n      padding-left: " + (small ? button.padding.small.left : button.padding["default"].left) + "px;\n      padding-right: " + (small ? button.padding.small.right : button.padding["default"].right) + "px;\n\n      background-color: " + button.types.contained.backgroundColor[state]["default"] + ";\n      border: none;\n      border-radius: " + button.border.radius + "px;\n      color: " + button.types.contained.font["default"].color + ";\n\n      font-size: " + (small ? button.font.size.small : button.font.size["default"]) + "px;\n      font-weight: " + button.font.weight + ";\n      font-family: " + baseFont.family + ";\n      letter-spacing: normal;\n      line-height: 1;\n      text-decoration: none;\n\n      svg {\n        width: " + (small ? button.icon.size.small : button.icon.size["default"]) + "px;\n        height: " + (small ? button.icon.size.small : button.icon.size["default"]) + "px;\n        fill: " + button.types.contained.font["default"].color + ";\n        margin-right: " + button.icon.margin.right + "px;\n\n        transition: fill 0.2s;\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus {\n        box-shadow: 0 4px 8px " + hexToRgb(button.types.contained.backgroundColor[state]["default"], 0.45) + ";\n      }\n\n      &:active {\n        background-color: " + button.types.contained.backgroundColor[state].pressed + ";\n        color: " + button.types.contained.font.pressed.color + ";\n\n        svg {\n          fill: " + button.types.contained.font.pressed.color + ";\n        }\n      }\n\n      " + (disabled ? "\n      \n        background-color " + button.types.contained.backgroundColor.disabled + ";\n        color: " + button.types.contained.font.disabled.color + ";\n        pointer-events: none;\n\n        svg {\n          fill: " + button.types.contained.font.disabled.color + ";\n        }\n\n        cursor: not-allowed;\n      \n      " : '') + "\n      \n\n      " + (inverted ? "\n        background-color: " + button.types.contained.font["default"].color + ";\n        color: " + button.types.contained.backgroundColor[state]["default"] + ";\n\n        svg {\n          fill: " + button.types.contained.backgroundColor[state]["default"] + ";\n        }\n\n        &:active {\n          background-color: " + hexToRgb(button.types.contained.font["default"].color, 0.75) + ";\n          color: " + button.types.contained.backgroundColor[state].pressed + ";\n\n          svg {\n            fill: " + button.types.contained.backgroundColor[state].pressed + ";\n          }\n        }\n\n        &:not([disabled]):hover, &:not([disabled]):focus {\n          box-shadow: 0 4px 8px " + hexToRgb(button.types.contained.font["default"].color, 0.45) + ";\n        }\n      " : '') + "\n    ";
+  return "\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: " + (full ? '100%' : 'auto') + ";\n      height: " + (small ? button.height.small : button.height["default"]) + "px;\n      padding-left: " + (small ? button.padding.small.left : button.padding["default"].left) + "px;\n      padding-right: " + (small ? button.padding.small.right : button.padding["default"].right) + "px;\n\n      background-color: " + button.types.contained.backgroundColor[state]["default"] + ";\n      border: none;\n      border-radius: " + button.border.radius + "px;\n      color: " + button.types.contained.font["default"].color + ";\n\n      font-size: " + (small ? button.font.size.small : button.font.size["default"]) + "px;\n      font-weight: " + button.font.weight + ";\n      font-family: " + baseFont.family + ";\n      letter-spacing: normal;\n      line-height: 1;\n      text-decoration: none;\n\n      svg {\n        width: " + (small ? button.icon.size.small : button.icon.size["default"]) + "px;\n        height: " + (small ? button.icon.size.small : button.icon.size["default"]) + "px;\n        fill: " + button.types.contained.font["default"].color + ";\n        margin-right: " + button.icon.margin.right + "px;\n\n        transition: fill 0.2s;\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus {\n        box-shadow: 0 4px 8px " + hexToRgb(button.types.contained.backgroundColor[state]["default"], 0.45) + ";\n      }\n\n      &:active {\n        background-color: " + button.types.contained.backgroundColor[state].pressed + ";\n        color: " + button.types.contained.font.pressed.color + ";\n\n        svg {\n          fill: " + button.types.contained.font.pressed.color + ";\n        }\n      }\n\n      " + (disabled ? "\n      \n        background-color " + button.types.contained.backgroundColor.disabled + ";\n        color: " + button.types.contained.font.disabled.color + ";\n        pointer-events: none;\n\n        svg {\n          fill: " + button.types.contained.font.disabled.color + ";\n        }\n\n        cursor: not-allowed;\n      \n      " : '') + "\n\n      " + (inverted ? "\n        background-color: " + button.types.contained.font["default"].color + ";\n        color: " + button.types.contained.backgroundColor[state]["default"] + ";\n\n        svg {\n          fill: " + button.types.contained.backgroundColor[state]["default"] + ";\n        }\n\n        &:active {\n          background-color: " + hexToRgb(button.types.contained.font["default"].color, 0.75) + ";\n          color: " + button.types.contained.backgroundColor[state].pressed + ";\n\n          svg {\n            fill: " + button.types.contained.backgroundColor[state].pressed + ";\n          }\n        }\n\n        &:not([disabled]):hover, &:not([disabled]):focus {\n          box-shadow: 0 4px 8px " + hexToRgb(button.types.contained.font["default"].color, 0.45) + ";\n        }\n      " : '') + "\n\n      " + (isLoading ? "\n            position: relative;\n            color: transparent;\n            " : '') + "\n\n      " + (isLoading && inverted || isLoading && disabled ? "\n          svg {\n            fill: transparent;\n          }\n            " : '') + "\n    ";
 });
 export default StyledButton;

package/esm/Button/web/Text.js

@@ -1,11 +1,15 @@
 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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
+import { bool } from 'prop-types';
 import Button from './Button';
-var ButtonText = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var StyledButton = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var secondary = _ref.secondary,
       inverted = _ref.inverted,
       _ref$theme$yoga = _ref.theme.yoga,
@@ -14,5 +18,28 @@ var ButtonText = styled(Button)(_templateObject || (_templateObject = _taggedTem
   var state = secondary ? 'secondary' : 'primary';
   return "\n      background-color: " + button.types.text.backgroundColor + ";\n      border-color: " + button.types.text.backgroundColor + ";\n      color: " + colors[state] + ";\n\n      svg {\n        fill: " + colors[state] + ";\n      }\n\n      &:not([disabled]):hover, &:not([disabled]):focus, &:not([disabled]):active {\n        background-color: " + button.types.text.backgroundColor + ";\n        box-shadow: none;\n      }\n\n      &:not([disabled]):hover {\n        color: " + hexToRgb(colors[state], 0.5) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.5) + ";\n        }\n      }\n\n      &:not([disabled]):focus, &:not([disabled]):active {\n        color: " + hexToRgb(colors[state], 0.75) + ";\n        svg {\n          fill: " + hexToRgb(colors[state], 0.75) + ";\n        }\n      }\n\n      " + (inverted ? "\n          color: " + colors.white + ";\n          svg {\n            fill: " + colors.white + ";\n          }\n\n          &:not([disabled]):hover {\n            color: " + hexToRgb(colors.white, 0.5) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.5) + ";\n            }\n          }\n\n          &:not([disabled]):focus, &:not([disabled]):active {\n            color: " + hexToRgb(colors.white, 0.75) + ";\n            svg {\n              fill: " + hexToRgb(colors.white, 0.75) + ";\n            }\n          }\n        " : '') + "\n\n      &:disabled {\n        background-color: " + button.types.text.backgroundColor + ";\n        border-color: " + button.types.text.backgroundColor + ";\n        color: " + button.types.text.disabled + ";\n        svg {\n          fill: " + button.types.text.disabled + ";\n        }\n      }\n    ";
 });
+var ButtonText = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var rest = _extends({}, _ref2);
+
+  var props = Object.fromEntries(Object.entries(rest).filter(function (_ref3) {
+    var key = _ref3[0];
+    return key !== 'isLoading';
+  }));
+  var secondary = props.secondary,
+      inverted = props.inverted;
+  return /*#__PURE__*/React.createElement(StyledButton, _extends({}, props, {
+    secondary: secondary,
+    inverted: inverted,
+    ref: ref
+  }));
+});
+ButtonText.propTypes = {
+  inverted: bool,
+  secondary: bool
+};
+ButtonText.defaultProps = {
+  inverted: false,
+  secondary: false
+};
 ButtonText.displayName = 'Button.Text';
 export default ButtonText;

package/esm/Spinner/Spinner.theme.js

@@ -0,0 +1,5 @@
+var Spinner = function Spinner() {
+  return {};
+};
+
+export default Spinner;

package/esm/Spinner/index.js

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

package/esm/Spinner/web/Spinner.js

@@ -0,0 +1,46 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import React from 'react';
+import styled, { withTheme } from 'styled-components';
+import { oneOf, string, oneOfType, number } from 'prop-types';
+import get from 'lodash.get';
+var StyledSpinner = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var color = _ref.color,
+      size = _ref.size;
+  return "\n    .spinner {\n      display: inline-block;\n      width: " + size + "px;\n      height: " + size + "px;\n      color: " + color + ";\n      animation: 1.4s linear 0s infinite normal none running rotation;\n    }\n    .circular {\n      display: block;\n      height: 100%;\n      width: 100%;\n    }\n    .path {\n      stroke-dasharray: 80px, 200px;\n      stroke-dashoffset: 0;\n      -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;\n      animation: 1.6s ease-in-out 0s infinite normal none running dash;\n      stroke-linecap: round;\n      stroke: " + color + ";\n    }\n    @keyframes rotation {\n      0% {\n          transform: rotate(0deg);\n      }\n      100% {\n          transform: rotate(360deg);\n      }\n    }\n    @keyframes dash {\n      0% {\n        stroke-dasharray: 1px, 200px;\n        stroke-dashoffset: 0;\n      }\n      50% {\n        stroke-dasharray: 100px, 200px;\n        stroke-dashoffset: -15px;\n      }\n      100% {\n        stroke-dasharray: 100px, 200px;\n        stroke-dashoffset: -125px;\n      }\n    }\n  ";
+});
+var Spinner = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var size = _ref2.size,
+      color = _ref2.color,
+      theme = _ref2.theme;
+  return /*#__PURE__*/React.createElement(StyledSpinner, {
+    color: get(theme.yoga.colors, color, color),
+    size: get(theme.yoga.spacing, size, size),
+    ref: ref,
+    "aria-label": "loading-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "spinner"
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "circular",
+    viewBox: "22 22 44 44"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "path",
+    fill: "none",
+    strokeWidth: "3.6",
+    cx: "44",
+    cy: "44",
+    r: "20.2"
+  }))));
+});
+var commonSizes = ['xxxsmall', 'xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge', 'huge', 'xhuge'];
+Spinner.propTypes = {
+  size: oneOfType([oneOf(commonSizes), string, number]),
+  color: string
+};
+Spinner.defaultProps = {
+  size: 'medium',
+  color: 'primary'
+};
+export default withTheme(Spinner);

package/esm/Spinner/web/Spinner.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Spinner } from '../..';
+describe('<Spinner />', function () {
+  it('should match snapshot', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Spinner, {
+      size: "xxxlarge",
+      color: "light"
+    }))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Spinner/web/index.js

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

package/esm/Theme/theme/theme.js

@@ -35,6 +35,7 @@ import _componentThemes_Result$Result from "./../../Result/Result.theme.js";
 import _componentThemes_Skeleton$Skeleton from "./../../Skeleton/Skeleton.theme.js";
 import _componentThemes_Slider$Slider from "./../../Slider/Slider.theme.js";
 import _componentThemes_Snackbar$Snackbar from "./../../Snackbar/Snackbar.theme.js";
+import _componentThemes_Spinner$Spinner from "./../../Spinner/Spinner.theme.js";
 import _componentThemes_Stepper$Stepper from "./../../Stepper/Stepper.theme.js";
 import _componentThemes_Tag$Tag from "./../../Tag/Tag.theme.js";
 import _componentThemes_Text$Text from "./../../Text/Text.theme.js";
@@ -73,6 +74,7 @@ var componentThemes = {
   Skeleton$Skeleton: _componentThemes_Skeleton$Skeleton,
   Slider$Slider: _componentThemes_Slider$Slider,
   Snackbar$Snackbar: _componentThemes_Snackbar$Snackbar,
+  Spinner$Spinner: _componentThemes_Spinner$Spinner,
   Stepper$Stepper: _componentThemes_Stepper$Stepper,
   Tag$Tag: _componentThemes_Tag$Tag,
   Text$Text: _componentThemes_Text$Text,

package/esm/index.js

@@ -34,4 +34,5 @@ import Drawer from './Drawer';
 import Skeleton from './Skeleton';
 import ActionRequirement from './ActionRequirement';
 import Popover from './Popover';
-export { Accordion, ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Datepicker, Drawer, Skeleton, ActionRequirement, Popover };
+import Spinner from './Spinner';
+export { Accordion, ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback, Datepicker, Drawer, Skeleton, ActionRequirement, Popover, Spinner };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.85.1",
+  "version": "7.87.0",
   "description": "Gympass component library",
-  "main": "./cjs/index.js",
+  "main": "./cjs",
   "sideEffects": false,
   "keywords": [
     "Gympass",
@@ -55,15 +55,9 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "1a50326ecfc9f46daaea45a46c6adcce3d98431a",
-  "module": "./esm/index.js",
+  "gitHead": "fd59f2e9607ad89446ceea5c6bde96143f0a57d3",
+  "module": "./esm",
   "types": "./typings/index.d.ts",
   "private": false,
-  "exports": {
-    ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js"
-    }
-  },
   "react-native": "./cjs/index.native.js"
 }