@gympass/yoga 7.40.3 → 7.41.1

package/cjs/hooks/useKeyPress.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useKeyPress = void 0;
+
+var _react = require("react");
+
+var useKeyPress = function useKeyPress(targetKey) {
+  var _useState = (0, _react.useState)(false),
+      keyPressed = _useState[0],
+      setKeyPressed = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    function downHandler(_ref) {
+      var key = _ref.key;
+
+      if (key === targetKey) {
+        setKeyPressed(true);
+      }
+    }
+
+    function upHandler(_ref2) {
+      var key = _ref2.key;
+
+      if (key === targetKey) {
+        setKeyPressed(false);
+      }
+    }
+
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return function () {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [targetKey]);
+  return keyPressed;
+};
+
+exports.useKeyPress = useKeyPress;

package/cjs/index.js

@@ -115,6 +115,10 @@ var _Header = _interopRequireDefault(require("./Header"));
 
 exports.Header = _Header["default"];
 
+var _Menu = _interopRequireDefault(require("./Menu"));
+
+exports.Menu = _Menu["default"];
+
 var _Banner = _interopRequireDefault(require("./Banner"));
 
 exports.Banner = _Banner["default"];

package/esm/Dialog/web/Dialog.js

@@ -76,8 +76,6 @@ Dialog.propTypes = {
 
   /** Function to close the dialog. */
   onClose: func,
-
-  /** The children necessary */
   children: node.isRequired
 };
 Dialog.defaultProps = {

package/esm/Heading/Heading.theme.js

@@ -5,12 +5,14 @@ var Heading = function Heading(_ref) {
     background: colors.white,
     padding: {
       vertical: spacing.small,
-      horizontal: spacing.huge
+      horizontal: spacing.huge,
+      horizontalMobile: spacing.medium
     },
-    height: 48,
+    height: spacing.xxxlarge,
     button: {
-      width: 48,
-      height: spacing.xxlarge
+      width: spacing.large,
+      height: spacing.large,
+      marginRight: spacing.medium
     }
   };
 };

package/esm/Heading/web/BackButton.js

@@ -1,19 +1,28 @@
 var _excluded = ["onClick"];
 
+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 styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { ArrowLeft } from '@gympass/yoga-icons';
 import Button from '../../Button';
+var ButtonIcon = styled(Button.Icon)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var heading = _ref.theme.yoga.components.heading;
+  return "\n    width: " + heading.button.width + "px;\n    height: " + heading.button.height + "px;\n  ";
+});
 
-var BackButton = function BackButton(_ref) {
-  var onClick = _ref.onClick,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+var BackButton = function BackButton(_ref2) {
+  var onClick = _ref2.onClick,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button.Icon, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, props, {
     icon: ArrowLeft,
     inverted: true,
     onClick: onClick

package/esm/Heading/web/Heading.js

@@ -11,9 +11,9 @@ var Heading = function Heading(_ref) {
   var backButton = null;
   var title = null;
   var rightButtons = [];
-  if (!children) throw new Error('Heading needs at least one child');
 
   var defineComponent = function defineComponent(child) {
+    if (!child) return;
     if (child.type.displayName === Title.displayName) title = child;
     if (child.type.displayName === BackButton.displayName) backButton = child;
     if (child.type.displayName === RightButton.displayName) rightButtons.push(child);
@@ -37,7 +37,9 @@ var Heading = function Heading(_ref) {
 };
 
 Heading.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+Heading.defaultProps = {
+  children: undefined
 };
-Heading.defaultProps = {};
 export default Heading;

package/esm/Heading/web/RightButton.js

@@ -1,19 +1,28 @@
 var _excluded = ["onClick", "icon"];
 
+var _templateObject, _templateObject2;
+
 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 styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Button from '../../Button';
+var ButtonIcon = styled(Button.Icon)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+  var heading = _ref.theme.yoga.components.heading;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", "px;\n      height: ", "px;\n\n      :not(:last-of-type) {\n        margin-right: ", "px;\n      }\n    "])), heading.button.width, heading.button.height, heading.button.marginRight);
+});
 
-var RightButton = function RightButton(_ref) {
-  var onClick = _ref.onClick,
-      icon = _ref.icon,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+var RightButton = function RightButton(_ref2) {
+  var onClick = _ref2.onClick,
+      icon = _ref2.icon,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button.Icon, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, props, {
     icon: icon,
     inverted: true,
     onClick: onClick

package/esm/Heading/web/StyledHeading.js

@@ -5,7 +5,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import styled from 'styled-components';
 var StyledHeading = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var heading = _ref.theme.yoga.components.heading;
-  return "\n    background: " + heading.background + ";\n    padding: " + heading.padding.vertical + "px;\n    width: 100%;\n    min-height: " + heading.height + "px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    @media(min-width: 769px) {\n        padding: " + heading.padding.vertical + "px " + heading.padding.horizontal + "px;\n    }\n  ";
+  return "\n    background: " + heading.background + ";\n    padding: " + heading.padding.vertical + "px " + heading.padding.horizontalMobile + "px;\n    width: 100%;\n    min-height: " + heading.height + "px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    @media(min-width: 769px) {\n        padding: " + heading.padding.vertical + "px " + heading.padding.horizontal + "px;\n    }\n  ";
 });
 export var Button = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var heading = _ref2.theme.yoga.components.heading;

package/esm/Input/web/Field.js

@@ -21,6 +21,6 @@ var Field = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplate
       colors = _ref2$theme$yoga.colors,
       baseFont = _ref2$theme$yoga.baseFont,
       input = _ref2$theme$yoga.components.input;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-bottom: ", "px;\n    padding-left: ", "px;\n\n    color: ", ";\n    font-family: ", ", sans-serif;\n    font-size: ", "px;\n    font-weight: ", ";\n\n    &:focus {\n      color: ", ";\n\n      & ~ legend {\n        max-width: max-content;\n        transition-property: max-width;\n        transition-duration: ", "ms;\n      }\n\n      & ~ label {\n        ", "\n\n        font-weight: ", ";\n        color: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ", ";\n      text-fill-color: ", ";\n      opacity: 1;\n    }\n\n    ", "\n\n    ", "\n  "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, colors.text.disabled, placeholder && label ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: transparent;\n          }\n        "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: ", ";\n          }\n        "])), input.label.color["default"]), value && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      & ~ legend {\n        max-width: max-content;\n      }\n\n      & ~ label {\n        color: ", ";\n        ", "\n      }\n    "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    height: ", "px;\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-bottom: ", "px;\n    padding-left: ", "px;\n\n    color: ", ";\n    font-family: ", ", sans-serif;\n    font-size: ", "px;\n    font-weight: ", ";\n\n    &:focus {\n      color: ", ";\n\n      & ~ legend {\n        max-width: max-content;\n        transition-property: max-width;\n        transition-duration: ", "ms;\n      }\n\n      & ~ label {\n        ", "\n\n        font-weight: ", ";\n        color: ", ";\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      color: ", ";\n      -webkit-text-fill-color: ", ";\n      opacity: 1;\n    }\n\n    ", "\n\n    ", "\n  "])), input.height, input.padding.top, cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right, input.padding.bottom, input.padding.left, input.font.color.focus, baseFont.family, input.font.size, input.font.weight, input.font.color.focus, transition.duration[1], labelTransition, input.label.font.weight, error ? "" + colors.feedback.attention[1] : "" + colors.text.primary, input.label.color["default"], colors.text.disabled, colors.text.disabled, placeholder && label ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: transparent;\n          }\n        "]))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: ", ";\n          }\n        "])), input.label.color["default"]), value && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      & ~ legend {\n        max-width: max-content;\n      }\n\n      & ~ label {\n        color: ", ";\n        ", "\n      }\n    "])), error ? "" + colors.feedback.attention[1] : '', labelTransition));
 });
 export default Field;

package/esm/Menu/Menu.theme.js

@@ -0,0 +1,47 @@
+var Menu = function Menu(_ref) {
+  var spacing = _ref.spacing,
+      radii = _ref.radii,
+      colors = _ref.colors,
+      fontWeights = _ref.fontWeights;
+  return {
+    border: {
+      radius: radii.small
+    },
+    width: {
+      min: 176,
+      max: 280
+    },
+    margin: {
+      "default": spacing.small,
+      medium: spacing.medium,
+      xxsmall: spacing.xxsmall
+    },
+    padding: {
+      horizontal: spacing.small,
+      vertical: spacing.xxsmall
+    },
+    backgroundColor: {
+      white: colors.white,
+      disabled: colors.elements.backgroundAndDisabled
+    },
+    text: {
+      "default": {
+        color: colors.text.primary
+      },
+      active: {
+        color: colors.primary
+      },
+      disabled: {
+        color: colors.text.disabled
+      }
+    },
+    font: {
+      weight: fontWeights.medium
+    },
+    icon: {
+      disabled: colors.elements.selectionAndIcons
+    }
+  };
+};
+
+export default Menu;

package/esm/Menu/index.js

@@ -0,0 +1,8 @@
+import Menu from './web/Menu';
+import MenuAction from './web/MenuAction';
+import MenuList from './web/MenuList';
+import MenuItem from './web/MenuItem';
+Menu.Action = MenuAction;
+Menu.List = MenuList;
+Menu.Item = MenuItem;
+export default Menu;

package/esm/Menu/web/Menu.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Root as MenuRoot } from '@radix-ui/react-dropdown-menu';
+import { bool, node } from 'prop-types';
+
+var Menu = function Menu(_ref) {
+  var children = _ref.children,
+      onMouseHover = _ref.onMouseHover;
+
+  var _React$useState = React.useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  function handleOpenMenu() {
+    setIsOpen(!isOpen);
+  }
+
+  if (!onMouseHover) {
+    return /*#__PURE__*/React.createElement(MenuRoot, {
+      sideOffset: 5,
+      modal: false
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: handleOpenMenu,
+    onMouseLeave: handleOpenMenu
+  }, /*#__PURE__*/React.createElement(MenuRoot, {
+    sideOffset: 5,
+    modal: false,
+    defaultOpen: true,
+    open: isOpen
+  }, children));
+};
+
+Menu.propTypes = {
+  children: node.isRequired,
+
+  /** when mouse hover menu open as deafault is true */
+  onMouseHover: bool
+};
+Menu.defaultProps = {
+  onMouseHover: true
+};
+Menu.displayName = 'Menu';
+export default Menu;

package/esm/Menu/web/Menu.test.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FlagArgentina, FlagBrazil, FlagChile, HomeFilled, MenuList } from '@gympass/yoga-icons';
+import { ThemeProvider, Menu, Button } from '../..';
+describe('<Menu />', function () {
+  it('should match snapshot in default Menu', function () {
+    var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, null, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with icon', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: FlagBrazil
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: FlagArgentina
+    }, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: FlagChile
+    }, "Item 3"))))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with link', function () {
+    var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
+      href: "http://www.gympass.com",
+      target: "blank"
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, {
+      href: "http://www.gympass.com",
+      target: "blank"
+    }, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, {
+      href: "http://www.gympass.com",
+      target: "blank"
+    }, "Item 3"))))),
+        container = _render3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with active', function () {
+    var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
+      active: true
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with disabled', function () {
+    var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render5.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with disabled and icon', function () {
+    var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render6.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu with a onMouseHover props false', function () {
+    var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, {
+      onMouseHover: false
+    }, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render7.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu with an align props start', function () {
+    var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, {
+      align: "start"
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render8.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu with an align props end', function () {
+    var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
+      icon: MenuList
+    })), /*#__PURE__*/React.createElement(Menu.List, {
+      align: "end"
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      icon: HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
+        container = _render9.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/esm/Menu/web/MenuAction.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Trigger as MenuActionRoot } from '@radix-ui/react-dropdown-menu';
+import { node } from 'prop-types';
+
+var MenuAction = function MenuAction(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(MenuActionRoot, {
+    asChild: true
+  }, children);
+};
+
+MenuAction.propTypes = {
+  children: node.isRequired
+};
+MenuAction.displayName = 'Menu.Action';
+export default MenuAction;

package/esm/Menu/web/MenuItem.js

@@ -0,0 +1,63 @@
+var _excluded = ["icon", "href", "active", "disabled", "children"];
+
+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, { forwardRef } from 'react';
+import { Item as MenuItemRoot } from '@radix-ui/react-dropdown-menu';
+import { oneOfType, func, node, string, bool } from 'prop-types';
+import styled from 'styled-components';
+var StyledMenuItem = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (_ref) {
+  var active = _ref.active,
+      disabled = _ref.disabled,
+      menu = _ref.theme.yoga.components.menu;
+  return "\n    margin-right: auto;\n    padding: " + menu.padding.vertical + "px " + menu.padding.horizontal + "px;\n\n    width: 100%;\n    cursor: pointer;\n    text-decoration: none;\n    color: " + menu.text["default"].color + ";\n\n    " + (active ? "\n      font-weight: " + menu.font.weight + ";\n      color: " + menu.text.active.color + "\n      " : '') + "\n\n    " + (disabled ? "\n        color: " + menu.text.disabled.color + ";\n        pointer-events: none;\n\n        svg {\n          fill: " + menu.text.disabled.color + ";\n          opacity: 0.5;\n        }\n\n        cursor: not-allowed;\n    " : '') + "\n\n    svg {\n      margin-right: " + menu.margin["default"] + "px;\n      fill: " + menu.icon.disabled + ";\n    }\n\n    &:focus {\n      outline: none;\n      background: " + menu.backgroundColor.disabled + ";\n    }\n\n    &:hover {\n      background: " + menu.backgroundColor.disabled + ";\n    }\n\n    &:first-child {\n      margin-top: " + menu.margin.xxsmall + "px;\n    }\n\n    &:last-child {\n      margin-bottom: " + menu.margin.xxsmall + "px;\n    }\n  ";
+});
+var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var Icon = _ref2.icon,
+      href = _ref2.href,
+      active = _ref2.active,
+      disabled = _ref2.disabled,
+      children = _ref2.children,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var finalProps = _extends({}, rest);
+
+  if (href) {
+    finalProps.as = 'a';
+    finalProps.href = href;
+  }
+
+  return /*#__PURE__*/React.createElement(MenuItemRoot, {
+    disabled: disabled,
+    asChild: true
+  }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
+    active: active,
+    disabled: disabled,
+    ref: ref
+  }, finalProps), Icon && /*#__PURE__*/React.createElement(Icon, {
+    width: 20,
+    height: 20
+  }), children));
+});
+MenuItem.propTypes = {
+  /** The icon of menu item */
+  icon: oneOfType([node, func]),
+  children: node.isRequired,
+  href: string,
+  disabled: bool,
+  active: bool
+};
+MenuItem.defaultProps = {
+  icon: undefined,
+  href: undefined,
+  disabled: false,
+  active: false
+};
+MenuItem.displayName = 'Menu.Item';
+export default MenuItem;

package/esm/Menu/web/MenuList.js

@@ -0,0 +1,39 @@
+var _templateObject;
+
+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 { Content as MenuListRoot } from '@radix-ui/react-dropdown-menu';
+import { node, string } from 'prop-types';
+import Box from '../../Box';
+var StyledMenuList = styled(MenuListRoot)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", "\n"])), function (_ref) {
+  var _ref$theme$yoga = _ref.theme.yoga,
+      menu = _ref$theme$yoga.components.menu,
+      elevations = _ref$theme$yoga.elevations;
+  return "\n    margin: " + menu.margin["default"] + "px 0;\n    padding: 0;\n    min-width: " + menu.width.min + "px;\n    max-width: " + menu.width.max + "px;\n    border-radius: " + menu.border.radius + "px;\n\n    background-color: " + menu.backgroundColor.white + ";\n    box-shadow: " + elevations.small + "\n  ";
+});
+var MenuList = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      align = _ref2.align;
+  return /*#__PURE__*/React.createElement(StyledMenuList, {
+    asChild: true,
+    sideOffset: 2,
+    alignOffset: -5,
+    align: align
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "ul",
+    ref: ref
+  }, children));
+});
+MenuList.propTypes = {
+  children: node.isRequired,
+
+  /** Align Menu is a alignement that menu will appear on the screen | start | center | end   */
+  align: string
+};
+MenuList.defaultProps = {
+  align: 'start'
+};
+MenuList.displayName = 'Menu.List';
+export default MenuList;

package/esm/Theme/theme/theme.js

@@ -22,6 +22,7 @@ import _componentThemes_Heading$Heading from "./../../Heading/Heading.theme.js";
 import _componentThemes_Icon$Icon from "./../../Icon/Icon.theme.js";
 import _componentThemes_Input$Input from "./../../Input/Input.theme.js";
 import _componentThemes_List$List from "./../../List/List.theme.js";
+import _componentThemes_Menu$Menu from "./../../Menu/Menu.theme.js";
 import _componentThemes_Progress$Progress from "./../../Progress/Progress.theme.js";
 import _componentThemes_RadioGroup$RadioGroup from "./../../RadioGroup/RadioGroup.theme.js";
 import _componentThemes_Rating$Rating from "./../../Rating/Rating.theme.js";
@@ -53,6 +54,7 @@ var componentThemes = {
   Icon$Icon: _componentThemes_Icon$Icon,
   Input$Input: _componentThemes_Input$Input,
   List$List: _componentThemes_List$List,
+  Menu$Menu: _componentThemes_Menu$Menu,
   Progress$Progress: _componentThemes_Progress$Progress,
   RadioGroup$RadioGroup: _componentThemes_RadioGroup$RadioGroup,
   Rating$Rating: _componentThemes_Rating$Rating,

package/esm/hooks/index.js

@@ -1 +1,2 @@
-export * from './usePortal';
+export * from './usePortal';
+export * from './useKeyPress';

package/esm/hooks/useKeyPress.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+export var useKeyPress = function useKeyPress(targetKey) {
+  var _useState = useState(false),
+      keyPressed = _useState[0],
+      setKeyPressed = _useState[1];
+
+  useEffect(function () {
+    function downHandler(_ref) {
+      var key = _ref.key;
+
+      if (key === targetKey) {
+        setKeyPressed(true);
+      }
+    }
+
+    function upHandler(_ref2) {
+      var key = _ref2.key;
+
+      if (key === targetKey) {
+        setKeyPressed(false);
+      }
+    }
+
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return function () {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [targetKey]);
+  return keyPressed;
+};

package/esm/index.js

@@ -24,7 +24,8 @@ import BottomSheet from './BottomSheet';
 import Dialog from './Dialog';
 import Divider from './Divider';
 import Header from './Header';
+import Menu from './Menu';
 import Banner from './Banner';
 import Heading from './Heading';
 import Feedback from './Feedback';
-export { 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, Banner, Heading, Feedback };
+export { 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.40.3",
+  "version": "7.41.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -31,6 +31,7 @@
     "@gympass/yoga-system": "^0.10.2",
     "@gympass/yoga-tokens": "^3.1.4",
     "@ptomasroos/react-native-multi-slider": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^0.1.6",
     "downshift": "^5.0.0",
     "lodash.get": "^4.4.2",
     "prop-types": "^15.7.2",
@@ -49,7 +50,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "b9fdc0dd1a3fbd9c4b7083e74cde5fdd9862a907",
+  "gitHead": "bd1d2ba8103093c7e7179bacfb4448ce4bef60ab",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"