@gympass/yoga 7.40.3 → 7.41.1

package/cjs/Dialog/web/Dialog.js

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

package/cjs/Heading/Heading.theme.js

@@ -10,12 +10,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/cjs/Heading/web/BackButton.js

@@ -5,6 +5,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _yogaIcons = require("@gympass/yoga-icons");
@@ -13,17 +15,26 @@ var _Button = _interopRequireDefault(require("../../Button"));
 
 var _excluded = ["onClick"];
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _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 BackButton = function BackButton(_ref) {
-  var onClick = _ref.onClick,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var ButtonIcon = (0, _styledComponents["default"])(_Button["default"].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(_ref2) {
+  var onClick = _ref2.onClick,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"].Icon, _extends({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonIcon, _extends({}, props, {
     icon: _yogaIcons.ArrowLeft,
     inverted: true,
     onClick: onClick

package/cjs/Heading/web/Heading.js

@@ -28,9 +28,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["default"].displayName) title = child;
     if (child.type.displayName === _BackButton["default"].displayName) backButton = child;
     if (child.type.displayName === _RightButton["default"].displayName) rightButtons.push(child);
@@ -54,8 +54,10 @@ var Heading = function Heading(_ref) {
 };
 
 Heading.propTypes = {
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node])
+};
+Heading.defaultProps = {
+  children: undefined
 };
-Heading.defaultProps = {};
 var _default = Heading;
 exports["default"] = _default;

package/cjs/Heading/web/RightButton.js

@@ -5,24 +5,39 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("../../Button"));
 
 var _excluded = ["onClick", "icon"];
 
+var _templateObject, _templateObject2;
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _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 RightButton = function RightButton(_ref) {
-  var onClick = _ref.onClick,
-      icon = _ref.icon,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var ButtonIcon = (0, _styledComponents["default"])(_Button["default"].Icon)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
+  var heading = _ref.theme.yoga.components.heading;
+  return (0, _styledComponents.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(_ref2) {
+  var onClick = _ref2.onClick,
+      icon = _ref2.icon,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
 
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"].Icon, _extends({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonIcon, _extends({}, props, {
     icon: icon,
     inverted: true,
     onClick: onClick

package/cjs/Heading/web/StyledHeading.js

@@ -13,7 +13,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 var StyledHeading = _styledComponents["default"].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  ";
 });
 
 var Button = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {

package/cjs/Input/web/Field.js

@@ -32,7 +32,7 @@ var Field = _styledComponents["default"].input(_templateObject2 || (_templateObj
       colors = _ref2$theme$yoga.colors,
       baseFont = _ref2$theme$yoga.baseFont,
       input = _ref2$theme$yoga.components.input;
-  return (0, _styledComponents.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 ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: transparent;\n          }\n        "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: ", ";\n          }\n        "])), input.label.color["default"]), value && (0, _styledComponents.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 (0, _styledComponents.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 ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: transparent;\n          }\n        "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          &::placeholder {\n            color: ", ";\n          }\n        "])), input.label.color["default"]), value && (0, _styledComponents.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));
 });
 
 var _default = Field;

package/cjs/Menu/Menu.theme.js

@@ -0,0 +1,53 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+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
+    }
+  };
+};
+
+var _default = Menu;
+exports["default"] = _default;

package/cjs/Menu/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Menu = _interopRequireDefault(require("./web/Menu"));
+
+var _MenuAction = _interopRequireDefault(require("./web/MenuAction"));
+
+var _MenuList = _interopRequireDefault(require("./web/MenuList"));
+
+var _MenuItem = _interopRequireDefault(require("./web/MenuItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_Menu["default"].Action = _MenuAction["default"];
+_Menu["default"].List = _MenuList["default"];
+_Menu["default"].Item = _MenuItem["default"];
+var _default = _Menu["default"];
+exports["default"] = _default;

package/cjs/Menu/web/Menu.js

@@ -0,0 +1,55 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
+
+var _propTypes = require("prop-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Menu = function Menu(_ref) {
+  var children = _ref.children,
+      onMouseHover = _ref.onMouseHover;
+
+  var _React$useState = _react["default"].useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  function handleOpenMenu() {
+    setIsOpen(!isOpen);
+  }
+
+  if (!onMouseHover) {
+    return /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Root, {
+      sideOffset: 5,
+      modal: false
+    }, children);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    onMouseEnter: handleOpenMenu,
+    onMouseLeave: handleOpenMenu
+  }, /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Root, {
+    sideOffset: 5,
+    modal: false,
+    defaultOpen: true,
+    open: isOpen
+  }, children));
+};
+
+Menu.propTypes = {
+  children: _propTypes.node.isRequired,
+
+  /** when mouse hover menu open as deafault is true */
+  onMouseHover: _propTypes.bool
+};
+Menu.defaultProps = {
+  onMouseHover: true
+};
+Menu.displayName = 'Menu';
+var _default = Menu;
+exports["default"] = _default;

package/cjs/Menu/web/Menu.test.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _yogaIcons = require("@gympass/yoga-icons");
+
+var _ = require("../..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('<Menu />', function () {
+  it('should match snapshot in default Menu', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
+        container = _render.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with icon', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.FlagBrazil
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.FlagArgentina
+    }, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.FlagChile
+    }, "Item 3"))))),
+        container = _render2.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with link', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      href: "http://www.gympass.com",
+      target: "blank"
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      href: "http://www.gympass.com",
+      target: "blank"
+    }, "Item 2"), /*#__PURE__*/_react["default"].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 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      active: true
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
+        container = _render4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot Menu.Item with disabled', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].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 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].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 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, {
+      onMouseHover: false
+    }, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].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 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, {
+      align: "start"
+    }, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].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 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
+      icon: _yogaIcons.MenuList
+    })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, {
+      align: "end"
+    }, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
+      icon: _yogaIcons.HomeFilled,
+      disabled: true
+    }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
+        container = _render9.container;
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/cjs/Menu/web/MenuAction.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
+
+var _propTypes = require("prop-types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var MenuAction = function MenuAction(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Trigger, {
+    asChild: true
+  }, children);
+};
+
+MenuAction.propTypes = {
+  children: _propTypes.node.isRequired
+};
+MenuAction.displayName = 'Menu.Action';
+var _default = MenuAction;
+exports["default"] = _default;

package/cjs/Menu/web/MenuItem.js

@@ -0,0 +1,80 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
+
+var _propTypes = require("prop-types");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _excluded = ["icon", "href", "active", "disabled", "children"];
+
+var _templateObject;
+
+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 _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; }
+
+var StyledMenuItem = _styledComponents["default"].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__*/(0, _react.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["default"].createElement(_reactDropdownMenu.Item, {
+    disabled: disabled,
+    asChild: true
+  }, /*#__PURE__*/_react["default"].createElement(StyledMenuItem, _extends({
+    active: active,
+    disabled: disabled,
+    ref: ref
+  }, finalProps), Icon && /*#__PURE__*/_react["default"].createElement(Icon, {
+    width: 20,
+    height: 20
+  }), children));
+});
+MenuItem.propTypes = {
+  /** The icon of menu item */
+  icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func]),
+  children: _propTypes.node.isRequired,
+  href: _propTypes.string,
+  disabled: _propTypes.bool,
+  active: _propTypes.bool
+};
+MenuItem.defaultProps = {
+  icon: undefined,
+  href: undefined,
+  disabled: false,
+  active: false
+};
+MenuItem.displayName = 'Menu.Item';
+var _default = MenuItem;
+exports["default"] = _default;

package/cjs/Menu/web/MenuList.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
+
+var _propTypes = require("prop-types");
+
+var _Box = _interopRequireDefault(require("../../Box"));
+
+var _templateObject;
+
+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; }
+
+var StyledMenuList = (0, _styledComponents["default"])(_reactDropdownMenu.Content)(_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__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var children = _ref2.children,
+      align = _ref2.align;
+  return /*#__PURE__*/_react["default"].createElement(StyledMenuList, {
+    asChild: true,
+    sideOffset: 2,
+    alignOffset: -5,
+    align: align
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    as: "ul",
+    ref: ref
+  }, children));
+});
+MenuList.propTypes = {
+  children: _propTypes.node.isRequired,
+
+  /** Align Menu is a alignement that menu will appear on the screen | start | center | end   */
+  align: _propTypes.string
+};
+MenuList.defaultProps = {
+  align: 'start'
+};
+MenuList.displayName = 'Menu.List';
+var _default = MenuList;
+exports["default"] = _default;

package/cjs/Theme/theme/theme.js

@@ -45,6 +45,8 @@ var _InputTheme = _interopRequireDefault(require("./../../Input/Input.theme.js")
 
 var _ListTheme = _interopRequireDefault(require("./../../List/List.theme.js"));
 
+var _MenuTheme = _interopRequireDefault(require("./../../Menu/Menu.theme.js"));
+
 var _ProgressTheme = _interopRequireDefault(require("./../../Progress/Progress.theme.js"));
 
 var _RadioGroupTheme = _interopRequireDefault(require("./../../RadioGroup/RadioGroup.theme.js"));
@@ -90,6 +92,7 @@ var componentThemes = {
   Icon$Icon: _IconTheme["default"],
   Input$Input: _InputTheme["default"],
   List$List: _ListTheme["default"],
+  Menu$Menu: _MenuTheme["default"],
   Progress$Progress: _ProgressTheme["default"],
   RadioGroup$RadioGroup: _RadioGroupTheme["default"],
   Rating$Rating: _RatingTheme["default"],

package/cjs/hooks/index.js

@@ -8,4 +8,12 @@ Object.keys(_usePortal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _usePortal[key]) return;
   exports[key] = _usePortal[key];
+});
+
+var _useKeyPress = require("./useKeyPress");
+
+Object.keys(_useKeyPress).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useKeyPress[key]) return;
+  exports[key] = _useKeyPress[key];
 });