@gympass/yoga 7.61.2 → 7.62.1

package/cjs/Accordion/Accordion.theme.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var Accordion = function Accordion(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    padding: {
+      standard: spacing.medium,
+      large: spacing.large
+    },
+    paddingArrow: {
+      total: spacing.xxsmall
+    },
+    gap: {
+      header: spacing.xxxsmall
+    }
+  };
+};
+
+var _default = Accordion;
+exports["default"] = _default;

package/cjs/Accordion/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _web = _interopRequireDefault(require("./web"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _web["default"];
+exports["default"] = _default;

package/cjs/Accordion/web/Accordion.js

@@ -0,0 +1,105 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _propTypes = require("prop-types");
+
+var _yogaIcons = require("@gympass/yoga-icons");
+
+var _yoga = require("@gympass/yoga");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+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 Accordion = function Accordion(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      children = _ref.children,
+      disabled = _ref.disabled;
+
+  var _useState = (0, _react.useState)(false),
+      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 (_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 = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n\n    ", "\n\n    &:focus-visible {\n      ", "\n    }\n\n    ", "\n  "])), function (_ref3) {
+    var accordion = _ref3.theme.yoga.components.accordion;
+    return "\n      padding: " + (subtitle ? accordion.padding.standard + "px" : accordion.padding.large + "px " + accordion.padding.standard + "px") + ";\n    ";
+  }, 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  "])), function (_ref7) {
+    var isOpen = _ref7.isOpen;
+    return isOpen ? '9999px' : '0';
+  });
+
+  var ArrowWrapper = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    svg {\n      transform: ", ";\n      transition: all 200ms ease-out 0s;\n\n      ", "\n    }\n\n    ", "\n  "])), function (_ref8) {
+    var isOpen = _ref8.isOpen;
+    return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+  }, function (_ref9) {
+    var _ref9$theme$yoga$colo = _ref9.theme.yoga.colors,
+        primary = _ref9$theme$yoga$colo.primary,
+        text = _ref9$theme$yoga$colo.text;
+    return "\n          fill: " + (disabled ? text.secondary : primary) + ";\n        ";
+  }, function (_ref10) {
+    var accordion = _ref10.theme.yoga.components.accordion;
+    return "\n      padding: " + accordion.paddingArrow.total + "px;\n    ";
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, null, /*#__PURE__*/_react["default"].createElement(Header, {
+    disabled: disabled,
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Title, null, /*#__PURE__*/_react["default"].createElement(_yoga.Text, {
+    color: disabled ? 'deep' : undefined
+  }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
+    color: "deep"
+  }, subtitle)), /*#__PURE__*/_react["default"].createElement(ArrowWrapper, {
+    isOpen: open
+  }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.ChevronDown, {
+    width: 24,
+    height: 24
+  }))), /*#__PURE__*/_react["default"].createElement(AccordionContent, {
+    isOpen: open
+  }, children), /*#__PURE__*/_react["default"].createElement(_yoga.Divider, null));
+};
+
+Accordion.propTypes = {
+  title: _propTypes.string.isRequired,
+  subtitle: _propTypes.string,
+  children: _propTypes.node.isRequired,
+  disabled: _propTypes.bool
+};
+Accordion.defaultProps = {
+  subtitle: undefined,
+  disabled: false
+};
+var _default = Accordion;
+exports["default"] = _default;

package/cjs/Accordion/web/Content.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _propTypes = require("prop-types");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var Content = function Content(_ref) {
+  var children = _ref.children;
+
+  var ContentWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), function (_ref2) {
+    var accordion = _ref2.theme.yoga.components.accordion;
+    return "\n      padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n    ";
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(ContentWrapper, null, children);
+};
+
+Content.propTypes = {
+  children: _propTypes.node.isRequired
+};
+var _default = Content;
+exports["default"] = _default;

package/cjs/Accordion/web/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+var _Content = _interopRequireDefault(require("./Content"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+_Accordion["default"].Content = _Content["default"];
+var _default = _Accordion["default"];
+exports["default"] = _default;

package/cjs/Menu/web/MenuList.js

@@ -67,7 +67,7 @@ MenuList.propTypes = {
   sideOffset: _propTypes.number,
 
   /** Add z-index value to Menu.List. Set to 'auto' by default */
-  zIndex: _propTypes.number
+  zIndex: _propTypes.string || _propTypes.number
 };
 MenuList.defaultProps = {
   align: 'start',

package/cjs/Theme/theme/theme.js

@@ -5,6 +5,8 @@ exports["default"] = void 0;
 
 var _yogaCommon = require("@gympass/yoga-common");
 
+var _AccordionTheme = _interopRequireDefault(require("./../../Accordion/Accordion.theme.js"));
+
 var _ActionRequirementTheme = _interopRequireDefault(require("./../../ActionRequirement/ActionRequirement.theme.js"));
 
 var _AutoCompleteTheme = _interopRequireDefault(require("./../../AutoComplete/AutoComplete.theme.js"));
@@ -82,6 +84,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 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); }
 
 var componentThemes = {
+  Accordion$Accordion: _AccordionTheme["default"],
   ActionRequirement$ActionRequirement: _ActionRequirementTheme["default"],
   AutoComplete$AutoComplete: _AutoCompleteTheme["default"],
   Avatar$Avatar: _AvatarTheme["default"],

package/cjs/index.js

@@ -10,6 +10,10 @@ exports.yogaTheme = _Theme.yogaTheme;
 exports.theme = _Theme.theme;
 exports.createTheme = _Theme.createTheme;
 
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+exports.Accordion = _Accordion["default"];
+
 var _Button = _interopRequireDefault(require("./Button"));
 
 exports.Button = _Button["default"];

package/esm/Accordion/Accordion.theme.js

@@ -0,0 +1,17 @@
+var Accordion = function Accordion(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    padding: {
+      standard: spacing.medium,
+      large: spacing.large
+    },
+    paddingArrow: {
+      total: spacing.xxsmall
+    },
+    gap: {
+      header: spacing.xxxsmall
+    }
+  };
+};
+
+export default Accordion;

package/esm/Accordion/index.js

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

package/esm/Accordion/web/Accordion.js

@@ -0,0 +1,86 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+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';
+
+var Accordion = function Accordion(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      children = _ref.children,
+      disabled = _ref.disabled;
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  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: " + (subtitle ? accordion.padding.standard + "px" : accordion.padding.large + "px " + accordion.padding.standard + "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  "])), function (_ref7) {
+    var isOpen = _ref7.isOpen;
+    return isOpen ? '9999px' : '0';
+  });
+  var ArrowWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    svg {\n      transform: ", ";\n      transition: all 200ms ease-out 0s;\n\n      ", "\n    }\n\n    ", "\n  "])), function (_ref8) {
+    var isOpen = _ref8.isOpen;
+    return isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
+  }, function (_ref9) {
+    var _ref9$theme$yoga$colo = _ref9.theme.yoga.colors,
+        primary = _ref9$theme$yoga$colo.primary,
+        text = _ref9$theme$yoga$colo.text;
+    return "\n          fill: " + (disabled ? text.secondary : primary) + ";\n        ";
+  }, function (_ref10) {
+    var accordion = _ref10.theme.yoga.components.accordion;
+    return "\n      padding: " + accordion.paddingArrow.total + "px;\n    ";
+  });
+  return /*#__PURE__*/React.createElement(AccordionWrapper, null, /*#__PURE__*/React.createElement(Header, {
+    disabled: disabled,
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(Text, {
+    color: disabled ? 'deep' : undefined
+  }, title), /*#__PURE__*/React.createElement(Text.Small, {
+    color: "deep"
+  }, subtitle)), /*#__PURE__*/React.createElement(ArrowWrapper, {
+    isOpen: open
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    width: 24,
+    height: 24
+  }))), /*#__PURE__*/React.createElement(AccordionContent, {
+    isOpen: open
+  }, children), /*#__PURE__*/React.createElement(Divider, null));
+};
+
+Accordion.propTypes = {
+  title: string.isRequired,
+  subtitle: string,
+  children: node.isRequired,
+  disabled: bool
+};
+Accordion.defaultProps = {
+  subtitle: undefined,
+  disabled: false
+};
+export default Accordion;

package/esm/Accordion/web/Content.js

@@ -0,0 +1,21 @@
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import { node } from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+var Content = function Content(_ref) {
+  var children = _ref.children;
+  var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), function (_ref2) {
+    var accordion = _ref2.theme.yoga.components.accordion;
+    return "\n      padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n    ";
+  });
+  return /*#__PURE__*/React.createElement(ContentWrapper, null, children);
+};
+
+Content.propTypes = {
+  children: node.isRequired
+};
+export default Content;

package/esm/Accordion/web/index.js

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

package/esm/Menu/web/MenuList.js

@@ -5,7 +5,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Content as MenuListRoot, Portal } from '@radix-ui/react-dropdown-menu';
-import { node, number, oneOf } from 'prop-types';
+import { node, number, oneOf, 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 zIndex = _ref.zIndex,
@@ -51,7 +51,7 @@ MenuList.propTypes = {
   sideOffset: number,
 
   /** Add z-index value to Menu.List. Set to 'auto' by default */
-  zIndex: number
+  zIndex: string || number
 };
 MenuList.defaultProps = {
   align: 'start',

package/esm/Theme/theme/theme.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint-disable prefer-destructuring */
 import { merge } from '@gympass/yoga-common';
+import _componentThemes_Accordion$Accordion from "./../../Accordion/Accordion.theme.js";
 import _componentThemes_ActionRequirement$ActionRequirement from "./../../ActionRequirement/ActionRequirement.theme.js";
 import _componentThemes_AutoComplete$AutoComplete from "./../../AutoComplete/AutoComplete.theme.js";
 import _componentThemes_Avatar$Avatar from "./../../Avatar/Avatar.theme.js";
@@ -39,6 +40,7 @@ import _componentThemes_Tag$Tag from "./../../Tag/Tag.theme.js";
 import _componentThemes_Text$Text from "./../../Text/Text.theme.js";
 import _componentThemes_TextArea$TextArea from "./../../TextArea/TextArea.theme.js";
 var componentThemes = {
+  Accordion$Accordion: _componentThemes_Accordion$Accordion,
   ActionRequirement$ActionRequirement: _componentThemes_ActionRequirement$ActionRequirement,
   AutoComplete$AutoComplete: _componentThemes_AutoComplete$AutoComplete,
   Avatar$Avatar: _componentThemes_Avatar$Avatar,

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.61.2",
+  "version": "7.62.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -52,7 +52,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "0755cce3b6a06252ca8e24d6aa48d289a0e82eda",
+  "gitHead": "1d4b022729ad6c6b8f73a58a3c3fe8261a40b5c0",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"