@gympass/yoga 7.72.3 → 7.73.0

package/cjs/Accordion/web/Accordion.js

@@ -15,94 +15,119 @@ var _yoga = require("@gympass/yoga");
 
 var _Content = _interopRequireDefault(require("./Content"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+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; }
 
-var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
-      subtitle = _ref.subtitle,
-      children = _ref.children,
-      disabled = _ref.disabled,
-      expanded = _ref.expanded,
-      small = _ref.small,
-      hasHorizontalPadding = _ref.hasHorizontalPadding,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-  var _useState = (0, _react.useState)(expanded),
-      open = _useState[0],
-      setOpen = _useState[1];
+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 (_ref) {
+  var _ref$theme$yoga$color = _ref.theme.yoga.colors,
+      white = _ref$theme$yoga$color.white,
+      elements = _ref$theme$yoga$color.elements,
+      disabled = _ref.disabled;
+  return "\n  background: " + (disabled ? elements.backgroundAndDisabled : white) + "\n";
+});
+
+var getVerticalPadding = function getVerticalPadding(accordion, small) {
+  if (small) return accordion.padding.small;
+  return accordion.padding.large;
+};
 
-  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,
-        elements = _ref2$theme$yoga$colo.elements;
-    return "\n      background: " + (disabled ? elements.backgroundAndDisabled : white) + "\n    ";
-  });
+var getHorizontalPadding = function getHorizontalPadding(accordion, hasHorizontalPadding) {
+  if (hasHorizontalPadding) return accordion.padding.standard;
+  return accordion.padding.zero;
+};
 
-  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:" + getVerticalPadding(accordion) + "px " + getHorizontalPadding(accordion) + "px;\n    ";
-  }, function (_ref4) {
-    var elements = _ref4.theme.yoga.colors.elements;
-    return "\n        background: " + elements.backgroundAndDisabled + ";\n\n      ";
-  }, disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "]))));
-
-  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    ";
-  }, 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\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(_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 (_ref10) {
-    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    ";
+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 (_ref2) {
+  var accordion = _ref2.theme.yoga.components.accordion,
+      small = _ref2.small,
+      hasHorizontalPadding = _ref2.hasHorizontalPadding;
+  return "\n  padding:" + getVerticalPadding(accordion, small) + "px " + getHorizontalPadding(accordion, hasHorizontalPadding) + "px;\n";
+}, function (_ref3) {
+  var elements = _ref3.theme.yoga.colors.elements;
+  return "\n    background: " + elements.backgroundAndDisabled + ";\n\n  ";
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      cursor: not-allowed;\n    "])));
+});
+
+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,
+      subtitle = _ref5.subtitle;
+  return "\n  gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n  margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n";
+}, function (_ref6) {
+  var disabled = _ref6.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref7) {
+    var text = _ref7.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\n  ", "\n\n  ", "\n"])), function (_ref8) {
+  var isOpen = _ref8.isOpen;
+  return isOpen ? '9999px' : '0';
+}, function (_ref9) {
+  var accordion = _ref9.theme.yoga.components.accordion,
+      small = _ref9.small;
+  return small && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-bottom: ", "px;\n      }\n    "])), _Content["default"], accordion.padding.small);
+}, function (_ref10) {
+  var hasHorizontalPadding = _ref10.hasHorizontalPadding;
+  return !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(_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 (_ref11) {
+  var isOpen = _ref11.isOpen;
+  return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+}, function (_ref12) {
+  var _ref12$theme$yoga$col = _ref12.theme.yoga.colors,
+      primary = _ref12$theme$yoga$col.primary,
+      text = _ref12$theme$yoga$col.text,
+      disabled = _ref12.disabled;
+  return "\n      fill: " + (disabled ? text.secondary : primary) + ";\n    ";
+}, function (_ref13) {
+  var accordion = _ref13.theme.yoga.components.accordion;
+  return "\n  padding: " + accordion.paddingArrow.total + "px;\n";
+});
+
+var Accordion = function Accordion(_ref14) {
+  var title = _ref14.title,
+      subtitle = _ref14.subtitle,
+      children = _ref14.children,
+      disabled = _ref14.disabled,
+      expanded = _ref14.expanded,
+      small = _ref14.small,
+      hasHorizontalPadding = _ref14.hasHorizontalPadding,
+      props = _objectWithoutPropertiesLoose(_ref14, _excluded);
+
+  var _useState = (0, _react.useState)(expanded),
+      open = _useState[0],
+      setOpen = _useState[1];
 
-  return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, props, /*#__PURE__*/_react["default"].createElement(Header, {
+  return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, _extends({
+    disabled: disabled
+  }, props), /*#__PURE__*/_react["default"].createElement(Header, {
     disabled: disabled,
     onClick: function onClick() {
-      setOpen(!open);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(Title, null, small ? /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
+      setOpen(function (o) {
+        return !o;
+      });
+    },
+    small: small,
+    hasHorizontalPadding: hasHorizontalPadding
+  }, /*#__PURE__*/_react["default"].createElement(Title, {
+    subtitle: subtitle
+  }, small ? /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
     color: disabled ? 'deep' : undefined
   }, title) : /*#__PURE__*/_react["default"].createElement(_yoga.Text.Medium, {
     color: disabled ? 'deep' : undefined,
@@ -110,12 +135,15 @@ var Accordion = function Accordion(_ref) {
   }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
     color: "deep"
   }, subtitle)), /*#__PURE__*/_react["default"].createElement(ArrowWrapper, {
-    isOpen: open
+    isOpen: open,
+    disabled: disabled
   }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.ChevronDown, {
     width: 24,
     height: 24
   }))), /*#__PURE__*/_react["default"].createElement(AccordionContent, {
-    isOpen: open
+    isOpen: open,
+    small: small,
+    hasHorizontalPadding: hasHorizontalPadding
   }, children), /*#__PURE__*/_react["default"].createElement(_yoga.Divider, null));
 };
 

package/cjs/Popover/web/Popover.js

@@ -52,9 +52,18 @@ function Popover(_ref) {
   }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
     m: "zero",
     color: "white"
-  }, description)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, description)), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    style: {
+      all: 'unset'
+    },
     onMouseEnter: handleShowPopover,
-    onMouseLeave: handleHidePopover
+    onMouseLeave: handleHidePopover,
+    onTouchStart: handleShowPopover,
+    onTouchEnd: handleHidePopover,
+    onClick: function onClick(event) {
+      return event.preventDefault();
+    }
   }, children));
 }
 

package/cjs/Tag/web/Informative.js

@@ -15,7 +15,7 @@ var _Tag = _interopRequireDefault(require("./Tag"));
 
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _excluded = ["children", "icon", "theme", "small"];
+var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
 
 var _templateObject;
 
@@ -52,10 +52,12 @@ var TagInformative = function TagInformative(_ref2) {
       text = _ref2$theme$yoga.colors.text,
       tag = _ref2$theme$yoga.components.tag,
       small = _ref2.small,
+      ellipsis = _ref2.ellipsis,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(Informative, _extends({
-    small: small
+    small: small,
+    ellipsis: ellipsis
   }, props), icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     as: icon,
     size: small ? tag.icon.size.small : tag.icon.size["default"],
@@ -75,12 +77,16 @@ TagInformative.propTypes = {
   children: _propTypes.node.isRequired,
 
   /** The tag's size */
-  small: _propTypes.bool
+  small: _propTypes.bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: _propTypes.bool
 };
 TagInformative.defaultProps = {
   icon: undefined,
   small: false,
-  variant: 'neutral'
+  variant: 'neutral',
+  ellipsis: false
 };
 TagInformative.displayName = 'Tag.Informative';
 

package/cjs/Tag/web/Tag.js

@@ -17,9 +17,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-var StyledTag = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var StyledTag = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
   var variant = _ref.variant,
       small = _ref.small,
+      ellipsis = _ref.ellipsis,
       _ref$theme$yoga = _ref.theme.yoga,
       _ref$theme$yoga$color = _ref$theme$yoga.colors,
       text = _ref$theme$yoga$color.text,
@@ -34,8 +35,8 @@ var StyledTag = _styledComponents["default"].div(_templateObject || (_templateOb
     dark: elements.selectionAndIcons
   } : _ref$theme$yoga$color4,
       tag = _ref$theme$yoga.components.tag;
-  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n   \n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
-}, _yogaSystem.margins);
+  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n\n    " + (ellipsis ? "\n      display: block;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    " : "") + "\n\n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
+}, _yogaSystem.margins, _yogaSystem.maxWidth);
 /** Tags should be keywords to categorize or organize an item. */
 
 
@@ -49,11 +50,15 @@ Tag.propTypes = {
   children: _propTypes.node.isRequired,
 
   /** Can send small to use this variant */
-  small: _propTypes.bool
+  small: _propTypes.bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: _propTypes.bool
 };
 Tag.defaultProps = {
   variant: '',
-  small: false
+  small: false,
+  ellipsis: false
 };
 var _default = Tag;
 exports["default"] = _default;

package/esm/Accordion/web/Accordion.js

@@ -1,87 +1,113 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 var _excluded = ["title", "subtitle", "children", "disabled", "expanded", "small", "hasHorizontalPadding"];
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+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 } from 'react';
 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 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 (_ref) {
+  var _ref$theme$yoga$color = _ref.theme.yoga.colors,
+      white = _ref$theme$yoga$color.white,
+      elements = _ref$theme$yoga$color.elements,
+      disabled = _ref.disabled;
+  return "\n  background: " + (disabled ? elements.backgroundAndDisabled : white) + "\n";
+});
 
-var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
-      subtitle = _ref.subtitle,
-      children = _ref.children,
-      disabled = _ref.disabled,
-      expanded = _ref.expanded,
-      small = _ref.small,
-      hasHorizontalPadding = _ref.hasHorizontalPadding,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+var getVerticalPadding = function getVerticalPadding(accordion, small) {
+  if (small) return accordion.padding.small;
+  return accordion.padding.large;
+};
+
+var getHorizontalPadding = function getHorizontalPadding(accordion, hasHorizontalPadding) {
+  if (hasHorizontalPadding) return accordion.padding.standard;
+  return accordion.padding.zero;
+};
+
+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 (_ref2) {
+  var accordion = _ref2.theme.yoga.components.accordion,
+      small = _ref2.small,
+      hasHorizontalPadding = _ref2.hasHorizontalPadding;
+  return "\n  padding:" + getVerticalPadding(accordion, small) + "px " + getHorizontalPadding(accordion, hasHorizontalPadding) + "px;\n";
+}, function (_ref3) {
+  var elements = _ref3.theme.yoga.colors.elements;
+  return "\n    background: " + elements.backgroundAndDisabled + ";\n\n  ";
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return 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,
+      subtitle = _ref5.subtitle;
+  return "\n  gap: " + (subtitle ? accordion.gap.header : 0) + "px;\n  margin: " + (subtitle ? 0 : accordion.paddingArrow.total + "px 0") + ";\n";
+}, function (_ref6) {
+  var disabled = _ref6.disabled;
+  return disabled && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), function (_ref7) {
+    var text = _ref7.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\n  ", "\n\n  ", "\n"])), function (_ref8) {
+  var isOpen = _ref8.isOpen;
+  return isOpen ? '9999px' : '0';
+}, function (_ref9) {
+  var accordion = _ref9.theme.yoga.components.accordion,
+      small = _ref9.small;
+  return small && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", " {\n        padding-bottom: ", "px;\n      }\n    "])), Content, accordion.padding.small);
+}, function (_ref10) {
+  var hasHorizontalPadding = _ref10.hasHorizontalPadding;
+  return !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 (_ref11) {
+  var isOpen = _ref11.isOpen;
+  return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+}, function (_ref12) {
+  var _ref12$theme$yoga$col = _ref12.theme.yoga.colors,
+      primary = _ref12$theme$yoga$col.primary,
+      text = _ref12$theme$yoga$col.text,
+      disabled = _ref12.disabled;
+  return "\n      fill: " + (disabled ? text.secondary : primary) + ";\n    ";
+}, function (_ref13) {
+  var accordion = _ref13.theme.yoga.components.accordion;
+  return "\n  padding: " + accordion.paddingArrow.total + "px;\n";
+});
+
+var Accordion = function Accordion(_ref14) {
+  var title = _ref14.title,
+      subtitle = _ref14.subtitle,
+      children = _ref14.children,
+      disabled = _ref14.disabled,
+      expanded = _ref14.expanded,
+      small = _ref14.small,
+      hasHorizontalPadding = _ref14.hasHorizontalPadding,
+      props = _objectWithoutPropertiesLoose(_ref14, _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,
-        elements = _ref2$theme$yoga$colo.elements;
-    return "\n      background: " + (disabled ? elements.backgroundAndDisabled : white) + "\n    ";
-  });
-  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:" + 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    ";
-  }, 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\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 && 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 (_ref10) {
-    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, {
+  return /*#__PURE__*/React.createElement(AccordionWrapper, _extends({
+    disabled: disabled
+  }, props), /*#__PURE__*/React.createElement(Header, {
     disabled: disabled,
     onClick: function onClick() {
-      setOpen(!open);
-    }
-  }, /*#__PURE__*/React.createElement(Title, null, small ? /*#__PURE__*/React.createElement(Text.Small, {
+      setOpen(function (o) {
+        return !o;
+      });
+    },
+    small: small,
+    hasHorizontalPadding: hasHorizontalPadding
+  }, /*#__PURE__*/React.createElement(Title, {
+    subtitle: subtitle
+  }, small ? /*#__PURE__*/React.createElement(Text.Small, {
     color: disabled ? 'deep' : undefined
   }, title) : /*#__PURE__*/React.createElement(Text.Medium, {
     color: disabled ? 'deep' : undefined,
@@ -89,12 +115,15 @@ var Accordion = function Accordion(_ref) {
   }, title), /*#__PURE__*/React.createElement(Text.Small, {
     color: "deep"
   }, subtitle)), /*#__PURE__*/React.createElement(ArrowWrapper, {
-    isOpen: open
+    isOpen: open,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(ChevronDown, {
     width: 24,
     height: 24
   }))), /*#__PURE__*/React.createElement(AccordionContent, {
-    isOpen: open
+    isOpen: open,
+    small: small,
+    hasHorizontalPadding: hasHorizontalPadding
   }, children), /*#__PURE__*/React.createElement(Divider, null));
 };
 

package/esm/Popover/web/Popover.js

@@ -40,9 +40,18 @@ function Popover(_ref) {
   }, title), /*#__PURE__*/React.createElement(Text.Small, {
     m: "zero",
     color: "white"
-  }, description)), /*#__PURE__*/React.createElement("div", {
+  }, description)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    style: {
+      all: 'unset'
+    },
     onMouseEnter: handleShowPopover,
-    onMouseLeave: handleHidePopover
+    onMouseLeave: handleHidePopover,
+    onTouchStart: handleShowPopover,
+    onTouchEnd: handleHidePopover,
+    onClick: function onClick(event) {
+      return event.preventDefault();
+    }
   }, children));
 }
 

package/esm/Tag/web/Informative.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "icon", "theme", "small"];
+var _excluded = ["children", "icon", "theme", "small", "ellipsis"];
 
 var _templateObject;
 
@@ -35,10 +35,12 @@ var TagInformative = function TagInformative(_ref2) {
       text = _ref2$theme$yoga.colors.text,
       tag = _ref2$theme$yoga.components.tag,
       small = _ref2.small,
+      ellipsis = _ref2.ellipsis,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
   return /*#__PURE__*/React.createElement(Informative, _extends({
-    small: small
+    small: small,
+    ellipsis: ellipsis
   }, props), icon && /*#__PURE__*/React.createElement(Icon, {
     as: icon,
     size: small ? tag.icon.size.small : tag.icon.size["default"],
@@ -58,12 +60,16 @@ TagInformative.propTypes = {
   children: node.isRequired,
 
   /** The tag's size */
-  small: bool
+  small: bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: bool
 };
 TagInformative.defaultProps = {
   icon: undefined,
   small: false,
-  variant: 'neutral'
+  variant: 'neutral',
+  ellipsis: false
 };
 TagInformative.displayName = 'Tag.Informative';
 export default withTheme(TagInformative);

package/esm/Tag/web/Tag.js

@@ -5,10 +5,11 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import React from 'react';
 import styled from 'styled-components';
 import { oneOf, node, bool } from 'prop-types';
-import { margins } from '@gympass/yoga-system';
-var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+import { margins, maxWidth } from '@gympass/yoga-system';
+var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  border-style: solid;\n\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
   var variant = _ref.variant,
       small = _ref.small,
+      ellipsis = _ref.ellipsis,
       _ref$theme$yoga = _ref.theme.yoga,
       _ref$theme$yoga$color = _ref$theme$yoga.colors,
       text = _ref$theme$yoga$color.text,
@@ -23,8 +24,8 @@ var StyledTag = styled.div(_templateObject || (_templateObject = _taggedTemplate
     dark: elements.selectionAndIcons
   } : _ref$theme$yoga$color4,
       tag = _ref$theme$yoga.components.tag;
-  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n   \n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
-}, margins);
+  return "\n    " + (small ? "\n            padding:\n              " + tag.padding.small.top + "\n              " + tag.padding.small.right + "px\n              " + tag.padding.small.bottom + "\n              " + tag.padding.small.left + "px;\n          " : "\n            padding:\n              " + tag.padding["default"].top + "px\n              " + tag.padding["default"].right + "px\n              " + tag.padding["default"].bottom + "px\n              " + tag.padding["default"].left + "px;\n          ") + "\n\n    " + (ellipsis ? "\n      display: block;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    " : "") + "\n\n    color: " + color.dark + ";\n    border-radius: " + tag.border.radius + "px;\n    border-width: " + tag.border.width + "px;\n    border-color: " + borderColor.dark + ";\n\n    font-size: " + tag.font.size + "px;\n    line-height: " + tag.font.lineHeight + "px;\n    font-weight: " + tag.font.weight + ";\n  ";
+}, margins, maxWidth);
 /** Tags should be keywords to categorize or organize an item. */
 
 var Tag = function Tag(props) {
@@ -37,10 +38,14 @@ Tag.propTypes = {
   children: node.isRequired,
 
   /** Can send small to use this variant */
-  small: bool
+  small: bool,
+
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: bool
 };
 Tag.defaultProps = {
   variant: '',
-  small: false
+  small: false,
+  ellipsis: false
 };
 export default Tag;

package/esm/Tag/web/Tag.test.js

@@ -76,4 +76,31 @@ describe('<Tag />', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('should match snapshot with ellipsis prop', function () {
+    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag, {
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Default with ellipsis"))),
+        container = _render8.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot with variant, informative type and ellipsis prop', function () {
+    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "success",
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Success with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "attention",
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Attention with ellipsis"), /*#__PURE__*/React.createElement(Tag.Informative, {
+      variant: "informative",
+      maxWidth: "10px",
+      ellipsis: true
+    }, "Informative with ellipsis"))),
+        container = _render9.container;
+
+    expect(container).toMatchSnapshot();
+  });
 });

package/package.json

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