@gympass/yoga 7.94.0 → 7.96.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/cjs/Heading/Heading.theme.js +8 -6
  2. package/cjs/Heading/web/BackButton.js +57 -7
  3. package/cjs/Heading/web/RightButton.js +55 -7
  4. package/cjs/Heading/web/StyledHeading.js +1 -3
  5. package/cjs/NavigationMenu/web/BottomItems/BottomItem.js +5 -10
  6. package/cjs/NavigationMenu/web/BottomItems/BottomItems.js +8 -4
  7. package/cjs/NavigationMenu/web/Item/styles.js +20 -0
  8. package/cjs/NavigationMenu/web/NavigationMenu.js +19 -12
  9. package/esm/Heading/Heading.theme.js +8 -6
  10. package/esm/Heading/web/BackButton.js +58 -8
  11. package/esm/Heading/web/RightButton.js +55 -7
  12. package/esm/Heading/web/StyledHeading.js +1 -3
  13. package/esm/NavigationMenu/web/BottomItems/BottomItem.js +5 -10
  14. package/esm/NavigationMenu/web/BottomItems/BottomItems.js +8 -4
  15. package/esm/NavigationMenu/web/Item/styles.js +20 -0
  16. package/esm/NavigationMenu/web/NavigationMenu.js +19 -12
  17. package/package.json +2 -2
package/cjs/Heading/Heading.theme.js CHANGED
@@ -24,15 +24,17 @@ module.exports = __toCommonJS(Heading_theme_exports);
24
24
  const Heading = ({ spacing, colors }) => ({
25
25
  background: colors.white,
26
26
  padding: {
27
- vertical: spacing.small,
28
- horizontal: spacing.huge,
29
- horizontalMobile: spacing.medium
27
+ vertical: spacing.xxxsmall,
28
+ horizontal: spacing.small
30
29
  },
31
30
  height: spacing.xxxlarge,
32
31
  button: {
33
- width: spacing.large,
34
- height: spacing.large,
35
- marginRight: spacing.medium
32
+ color: colors.secondary,
33
+ width: spacing.xxlarge + spacing.xxxsmall,
34
+ height: spacing.xxlarge + spacing.xxxsmall,
35
+ backgroundWidth: spacing.xxlarge,
36
+ backgroundHeight: spacing.xxlarge,
37
+ background: colors.elements.lineAndBorders
36
38
  }
37
39
  });
38
40
  var Heading_theme_default = Heading;
package/cjs/Heading/web/BackButton.js CHANGED
@@ -66,23 +66,73 @@ var import_styled_components = __toESM(require("styled-components"));
66
66
  var import_prop_types = __toESM(require("prop-types"));
67
67
  var import_yoga_icons = require("@gympass/yoga-icons");
68
68
  var import_Button = __toESM(require("../../Button"));
69
- const ButtonIcon = (0, import_styled_components.default)(import_Button.default.Icon)`
69
+ var import_Box = __toESM(require("../../Box"));
70
+ var import_Icon = __toESM(require("../../Icon"));
71
+ const ButtonIcon = (0, import_styled_components.default)(import_Button.default)`
70
72
  ${({
73
+ secondary,
71
74
  theme: {
72
75
  yoga: {
73
76
  components: { heading }
74
77
  }
75
78
  }
76
79
  }) => {
77
- return `
78
- width: ${heading.button.width}px;
79
- height: ${heading.button.height}px;
80
- `;
81
- }}
80
+ return import_styled_components.css`
81
+ background-color: transparent;
82
+ box-shadow: none;
83
+ max-width: ${heading.button.width}px;
84
+ min-width: ${heading.button.width}px;
85
+ height: ${heading.button.height}px;
86
+
87
+ &:active {
88
+ background-color: transparent;
89
+ & svg {
90
+ fill: ${heading.button.color};
91
+ }
92
+ }
93
+
94
+ &:not([disabled]):hover {
95
+ background-color: transparent;
96
+ box-shadow: none;
97
+ }
98
+
99
+ &:not([disabled]):hover {
100
+ background-color: transparent;
101
+ box-shadow: none;
102
+ }
103
+ :not([disabled]):focus {
104
+ box-shadow: none;
105
+ }
106
+
107
+ & div {
108
+ min-width: ${heading.button.backgroundWidth}px;
109
+ max-width: ${heading.button.backgroundWidth}px;
110
+ height: ${heading.button.backgroundHeight}px;
111
+ background-color: ${secondary ? "transparent" : heading.button.background};
112
+ }
113
+
114
+ & svg {
115
+ fill: ${heading.button.color};
116
+ margin: 0;
117
+ }
118
+ `;
119
+ }};
82
120
  `;
83
121
  const BackButton = (_a) => {
84
122
  var _b = _a, { onClick } = _b, props = __objRest(_b, ["onClick"]);
85
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({}, props), { icon: import_yoga_icons.ArrowLeft, inverted: true, onClick }));
123
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({ onClick, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
124
+ import_Box.default,
125
+ {
126
+ flex: 1,
127
+ display: "flex",
128
+ justifyContent: "center",
129
+ alignItems: "center",
130
+ borderRadius: "50%",
131
+ width: "xxlarge",
132
+ height: "xxlarge",
133
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.ArrowLeft, role: "img" })
134
+ }
135
+ ) }));
86
136
  };
87
137
  BackButton.propTypes = {
88
138
  onClick: import_prop_types.default.func.isRequired
package/cjs/Heading/web/RightButton.js CHANGED
@@ -65,25 +65,73 @@ var import_react = __toESM(require("react"));
65
65
  var import_styled_components = __toESM(require("styled-components"));
66
66
  var import_prop_types = __toESM(require("prop-types"));
67
67
  var import_Button = __toESM(require("../../Button"));
68
- const ButtonIcon = (0, import_styled_components.default)(import_Button.default.Icon)`
68
+ var import_Icon = __toESM(require("../../Icon"));
69
+ var import_Box = __toESM(require("../../Box"));
70
+ const ButtonIcon = (0, import_styled_components.default)(import_Button.default)`
69
71
  ${({
72
+ secondary,
70
73
  theme: {
71
74
  yoga: {
72
75
  components: { heading }
73
76
  }
74
77
  }
75
- }) => import_styled_components.css`
76
- width: ${heading.button.width}px;
78
+ }) => {
79
+ return import_styled_components.css`
80
+ background-color: transparent;
81
+ box-shadow: none;
82
+ max-width: ${heading.button.width}px;
83
+ min-width: ${heading.button.width}px;
77
84
  height: ${heading.button.height}px;
78
85
 
79
- :not(:last-of-type) {
80
- margin-right: ${heading.button.marginRight}px;
86
+ &:active {
87
+ background-color: transparent;
88
+ & svg {
89
+ fill: ${heading.button.color};
90
+ }
81
91
  }
82
- `};
92
+
93
+ &:not([disabled]):hover {
94
+ background-color: transparent;
95
+ box-shadow: none;
96
+ }
97
+
98
+ &:not([disabled]):hover {
99
+ background-color: transparent;
100
+ box-shadow: none;
101
+ }
102
+ :not([disabled]):focus {
103
+ box-shadow: none;
104
+ }
105
+
106
+ & div {
107
+ min-width: ${heading.button.backgroundWidth}px;
108
+ max-width: ${heading.button.backgroundWidth}px;
109
+ height: ${heading.button.backgroundHeight}px;
110
+ background-color: ${secondary ? "transparent" : heading.button.background};
111
+ }
112
+
113
+ & svg {
114
+ fill: ${heading.button.color};
115
+ margin: 0;
116
+ }
117
+ `;
118
+ }};
83
119
  `;
84
120
  const RightButton = (_a) => {
85
121
  var _b = _a, { onClick, icon } = _b, props = __objRest(_b, ["onClick", "icon"]);
86
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({}, props), { icon, inverted: true, onClick }));
122
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIcon, __spreadProps(__spreadValues({ onClick, secondary: true, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
+ import_Box.default,
124
+ {
125
+ flex: 1,
126
+ display: "flex",
127
+ justifyContent: "center",
128
+ alignItems: "center",
129
+ borderRadius: "50%",
130
+ width: "xxlarge",
131
+ height: "xxlarge",
132
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: icon, role: "img" })
133
+ }
134
+ ) }));
87
135
  };
88
136
  RightButton.propTypes = {
89
137
  onClick: import_prop_types.default.func.isRequired,
package/cjs/Heading/web/StyledHeading.js CHANGED
@@ -44,10 +44,8 @@ const StyledHeading = import_styled_components.default.header`
44
44
  }) => {
45
45
  return import_styled_components.css`
46
46
  background: ${heading.background};
47
- padding: ${heading.padding.vertical}px
48
- ${heading.padding.horizontalMobile}px;
47
+ padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
49
48
  width: 100%;
50
- min-height: ${heading.height}px;
51
49
  display: flex;
52
50
  justify-content: space-between;
53
51
  align-items: center;
package/cjs/NavigationMenu/web/BottomItems/BottomItem.js CHANGED
@@ -33,10 +33,10 @@ __export(BottomItem_exports, {
33
33
  module.exports = __toCommonJS(BottomItem_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
+ var import_yoga = require("@gympass/yoga");
36
37
  var import_Icon = __toESM(require("../../../Icon"));
37
38
  var import_Box = __toESM(require("../../../Box"));
38
- var import_Text = __toESM(require("../../../Text"));
39
- const StyledText = (0, import_styled_components.default)(import_Text.default)`
39
+ const StyledText = (0, import_styled_components.default)(import_yoga.Text.SmallestException)`
40
40
  ${({
41
41
  theme: {
42
42
  yoga: {
@@ -58,7 +58,7 @@ const Active = import_styled_components.css`
58
58
  theme: {
59
59
  yoga: {
60
60
  components: {
61
- navigationmenu: { backgroundColor, icon, font }
61
+ navigationmenu: { icon, font }
62
62
  }
63
63
  }
64
64
  }
@@ -68,8 +68,6 @@ const Active = import_styled_components.css`
68
68
  }
69
69
 
70
70
  div {
71
- background-color: ${backgroundColor.default};
72
-
73
71
  ${StyledText} {
74
72
  color: ${font.color.active};
75
73
  }
@@ -86,14 +84,13 @@ const StyledItem = import_styled_components.default.li`
86
84
  theme: {
87
85
  yoga: {
88
86
  components: {
89
- navigationmenu: { backgroundColor, border, icon, font }
87
+ navigationmenu: { border, icon, font }
90
88
  }
91
89
  }
92
90
  }
93
91
  }) => import_styled_components.css`
94
92
  transition: background-color 300ms ease-in-out;
95
93
 
96
- background-color: transparent;
97
94
  border-radius: ${border.radius.default}px;
98
95
  list-style-type: none;
99
96
  cursor: pointer;
@@ -107,8 +104,6 @@ const StyledItem = import_styled_components.default.li`
107
104
  &:hover,
108
105
  &:focus {
109
106
  ${!isActive && import_styled_components.css`
110
- background-color: ${backgroundColor.hover};
111
-
112
107
  ${StyledText} {
113
108
  color: ${font.color.hover};
114
109
  }
@@ -147,7 +142,7 @@ const StyledTextContainer = (0, import_styled_components.default)(import_Box.def
147
142
  align-items: center;
148
143
  justify-content: center;
149
144
  gap: ${gap.xxxsmall}px;
150
- padding: ${padding.xxsmall}px ${padding.xxxsmall}px;
145
+ padding: ${padding.xxxsmall}px;
151
146
  border-radius: ${border.radius.default}px;
152
147
  `}
153
148
  `;
package/cjs/NavigationMenu/web/BottomItems/BottomItems.js CHANGED
@@ -35,6 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
35
35
  var import_styled_components = __toESM(require("styled-components"));
36
36
  var import_yoga_helpers = require("@gympass/yoga-helpers");
37
37
  const StyledItemsContainer = import_styled_components.default.nav`
38
+ position: relative;
38
39
  ${import_yoga_helpers.media.lg`display: none`}
39
40
  `;
40
41
  const StyledItems = import_styled_components.default.ul`
@@ -42,22 +43,25 @@ const StyledItems = import_styled_components.default.ul`
42
43
  theme: {
43
44
  yoga: {
44
45
  components: {
45
- navigationmenu: { backgroundColor, border, gap, padding }
46
+ navigationmenu: { backgroundColor, border, gap }
46
47
  }
47
48
  }
48
49
  }
49
50
  }) => import_styled_components.css`
51
+ position: absolute;
52
+ bottom: 0;
50
53
  display: grid;
51
54
  grid-auto-columns: minmax(0, 1fr);
52
55
  grid-auto-flow: column;
53
56
  align-items: center;
54
57
  width: 100%;
55
- height: 74px;
56
- background-color: ${backgroundColor.default};
58
+ height: 56px;
59
+ background-color: ${backgroundColor.white};;
57
60
  margin: 0;
58
- padding: ${padding.xxxsmall}px;
61
+ padding: 0;
59
62
  border: 1px solid ${border.color.default};
60
63
  gap: ${gap.xxxsmall}px;
64
+ z-index: 15;
61
65
  `}
62
66
  `;
63
67
  const BottomItems = ({ children }) => {
package/cjs/NavigationMenu/web/Item/styles.js CHANGED
@@ -135,6 +135,7 @@ const StyledItem = import_styled_components.default.li`
135
135
  isActive,
136
136
  theme: {
137
137
  yoga: {
138
+ spacing,
138
139
  components: {
139
140
  navigationmenu: { backgroundColor, border, icon, font }
140
141
  }
@@ -147,6 +148,7 @@ const StyledItem = import_styled_components.default.li`
147
148
  border-radius: ${border.radius.default}px;
148
149
  list-style-type: none;
149
150
  cursor: pointer;
151
+ margin-right: ${spacing.xxsmall}px;
150
152
 
151
153
  svg {
152
154
  height: ${icon.height}px;
@@ -171,6 +173,24 @@ const StyledItem = import_styled_components.default.li`
171
173
  a {
172
174
  text-decoration: none;
173
175
 
176
+ &:hover,
177
+ &:focus {
178
+ outline: none;
179
+
180
+ ${StyledTextContainer} {
181
+ background-color: ${backgroundColor.hover};
182
+ color: ${font.color.hover};
183
+ }
184
+
185
+ ${StyledText} {
186
+ color: ${font.color.hover};
187
+ }
188
+
189
+ svg {
190
+ fill: ${icon.fill.hover};
191
+ }
192
+ }
193
+
174
194
  &.active {
175
195
  ${Active}
176
196
  }
package/cjs/NavigationMenu/web/NavigationMenu.js CHANGED
@@ -39,10 +39,8 @@ var import_Switcher = __toESM(require("./Switcher"));
39
39
  var import_Item = require("./Item");
40
40
  var import_BottomItems = require("./BottomItems");
41
41
  var import_Box = __toESM(require("../../Box"));
42
- const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.default)`
42
+ const DeskTopContainer = import_styled_components.css`
43
43
  ${({
44
- isOpenOnMobile,
45
- isResponsive,
46
44
  theme: {
47
45
  yoga: {
48
46
  components: {
@@ -51,8 +49,10 @@ const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.de
51
49
  }
52
50
  }
53
51
  }) => import_styled_components.css`
52
+ position: relative;
54
53
  display: flex;
55
54
  flex-direction: column;
55
+ flex-shrink: 0;
56
56
  gap: ${gap.medium}px;
57
57
  padding: ${padding.small}px ${padding.xsmall}px;
58
58
  background-color: ${backgroundColor.default};
@@ -62,17 +62,24 @@ const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.de
62
62
  right: 0;
63
63
 
64
64
  transition: width 300ms ease-in-out;
65
+ `}
66
+ `;
67
+ const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.default)`
68
+ ${({ isOpenOnMobile, isResponsive }) => import_styled_components.css`
69
+ ${DeskTopContainer};
70
+
71
+ ${isResponsive && import_styled_components.css`
72
+ position: fixed;
73
+ width: 100%;
74
+ height: calc(100% - 56px);
75
+ z-index: 10;
76
+ top: 0;
77
+ right: ${isOpenOnMobile ? "0" : "-100%"};
65
78
 
66
- ${isResponsive && import_yoga_helpers.media.max("lg")`
67
- position: absolute;
68
- width: 100%;
69
- height: calc(100% - 74px);
70
- z-index: 10;
71
- Top: 0;
72
- right: ${isOpenOnMobile ? "0" : "-100%"};
79
+ transition: right 300ms ease-in-out;
73
80
 
74
- transition: right 300ms ease-in-out;
75
- `}
81
+ ${import_yoga_helpers.media.lg`${DeskTopContainer}`}
82
+ `}
76
83
  `}
77
84
  `;
78
85
  const StyledHeader = (0, import_styled_components.default)(import_Box.default)`
package/esm/Heading/Heading.theme.js CHANGED
@@ -1,15 +1,17 @@
1
1
  const Heading = ({ spacing, colors }) => ({
2
2
  background: colors.white,
3
3
  padding: {
4
- vertical: spacing.small,
5
- horizontal: spacing.huge,
6
- horizontalMobile: spacing.medium
4
+ vertical: spacing.xxxsmall,
5
+ horizontal: spacing.small
7
6
  },
8
7
  height: spacing.xxxlarge,
9
8
  button: {
10
- width: spacing.large,
11
- height: spacing.large,
12
- marginRight: spacing.medium
9
+ color: colors.secondary,
10
+ width: spacing.xxlarge + spacing.xxxsmall,
11
+ height: spacing.xxlarge + spacing.xxxsmall,
12
+ backgroundWidth: spacing.xxlarge,
13
+ backgroundHeight: spacing.xxlarge,
14
+ background: colors.elements.lineAndBorders
13
15
  }
14
16
  });
15
17
  var Heading_theme_default = Heading;
package/esm/Heading/web/BackButton.js CHANGED
@@ -31,27 +31,77 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import { jsx } from "react/jsx-runtime";
33
33
  import React from "react";
34
- import styled from "styled-components";
34
+ import styled, { css } from "styled-components";
35
35
  import PropTypes from "prop-types";
36
36
  import { ArrowLeft } from "@gympass/yoga-icons";
37
37
  import Button from "../../Button";
38
- const ButtonIcon = styled(Button.Icon)`
38
+ import Box from "../../Box";
39
+ import Icon from "../../Icon";
40
+ const ButtonIcon = styled(Button)`
39
41
  ${({
42
+ secondary,
40
43
  theme: {
41
44
  yoga: {
42
45
  components: { heading }
43
46
  }
44
47
  }
45
48
  }) => {
46
- return `
47
- width: ${heading.button.width}px;
48
- height: ${heading.button.height}px;
49
- `;
50
- }}
49
+ return css`
50
+ background-color: transparent;
51
+ box-shadow: none;
52
+ max-width: ${heading.button.width}px;
53
+ min-width: ${heading.button.width}px;
54
+ height: ${heading.button.height}px;
55
+
56
+ &:active {
57
+ background-color: transparent;
58
+ & svg {
59
+ fill: ${heading.button.color};
60
+ }
61
+ }
62
+
63
+ &:not([disabled]):hover {
64
+ background-color: transparent;
65
+ box-shadow: none;
66
+ }
67
+
68
+ &:not([disabled]):hover {
69
+ background-color: transparent;
70
+ box-shadow: none;
71
+ }
72
+ :not([disabled]):focus {
73
+ box-shadow: none;
74
+ }
75
+
76
+ & div {
77
+ min-width: ${heading.button.backgroundWidth}px;
78
+ max-width: ${heading.button.backgroundWidth}px;
79
+ height: ${heading.button.backgroundHeight}px;
80
+ background-color: ${secondary ? "transparent" : heading.button.background};
81
+ }
82
+
83
+ & svg {
84
+ fill: ${heading.button.color};
85
+ margin: 0;
86
+ }
87
+ `;
88
+ }};
51
89
  `;
52
90
  const BackButton = (_a) => {
53
91
  var _b = _a, { onClick } = _b, props = __objRest(_b, ["onClick"]);
54
- return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({}, props), { icon: ArrowLeft, inverted: true, onClick }));
92
+ return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({ onClick, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ jsx(
93
+ Box,
94
+ {
95
+ flex: 1,
96
+ display: "flex",
97
+ justifyContent: "center",
98
+ alignItems: "center",
99
+ borderRadius: "50%",
100
+ width: "xxlarge",
101
+ height: "xxlarge",
102
+ children: /* @__PURE__ */ jsx(Icon, { as: ArrowLeft, role: "img" })
103
+ }
104
+ ) }));
55
105
  };
56
106
  BackButton.propTypes = {
57
107
  onClick: PropTypes.func.isRequired
package/esm/Heading/web/RightButton.js CHANGED
@@ -34,25 +34,73 @@ import React from "react";
34
34
  import styled, { css } from "styled-components";
35
35
  import PropTypes from "prop-types";
36
36
  import Button from "../../Button";
37
- const ButtonIcon = styled(Button.Icon)`
37
+ import Icon from "../../Icon";
38
+ import Box from "../../Box";
39
+ const ButtonIcon = styled(Button)`
38
40
  ${({
41
+ secondary,
39
42
  theme: {
40
43
  yoga: {
41
44
  components: { heading }
42
45
  }
43
46
  }
44
- }) => css`
45
- width: ${heading.button.width}px;
47
+ }) => {
48
+ return css`
49
+ background-color: transparent;
50
+ box-shadow: none;
51
+ max-width: ${heading.button.width}px;
52
+ min-width: ${heading.button.width}px;
46
53
  height: ${heading.button.height}px;
47
54
 
48
- :not(:last-of-type) {
49
- margin-right: ${heading.button.marginRight}px;
55
+ &:active {
56
+ background-color: transparent;
57
+ & svg {
58
+ fill: ${heading.button.color};
59
+ }
50
60
  }
51
- `};
61
+
62
+ &:not([disabled]):hover {
63
+ background-color: transparent;
64
+ box-shadow: none;
65
+ }
66
+
67
+ &:not([disabled]):hover {
68
+ background-color: transparent;
69
+ box-shadow: none;
70
+ }
71
+ :not([disabled]):focus {
72
+ box-shadow: none;
73
+ }
74
+
75
+ & div {
76
+ min-width: ${heading.button.backgroundWidth}px;
77
+ max-width: ${heading.button.backgroundWidth}px;
78
+ height: ${heading.button.backgroundHeight}px;
79
+ background-color: ${secondary ? "transparent" : heading.button.background};
80
+ }
81
+
82
+ & svg {
83
+ fill: ${heading.button.color};
84
+ margin: 0;
85
+ }
86
+ `;
87
+ }};
52
88
  `;
53
89
  const RightButton = (_a) => {
54
90
  var _b = _a, { onClick, icon } = _b, props = __objRest(_b, ["onClick", "icon"]);
55
- return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({}, props), { icon, inverted: true, onClick }));
91
+ return /* @__PURE__ */ jsx(ButtonIcon, __spreadProps(__spreadValues({ onClick, secondary: true, padding: "xxxsmall" }, props), { children: /* @__PURE__ */ jsx(
92
+ Box,
93
+ {
94
+ flex: 1,
95
+ display: "flex",
96
+ justifyContent: "center",
97
+ alignItems: "center",
98
+ borderRadius: "50%",
99
+ width: "xxlarge",
100
+ height: "xxlarge",
101
+ children: /* @__PURE__ */ jsx(Icon, { as: icon, role: "img" })
102
+ }
103
+ ) }));
56
104
  };
57
105
  RightButton.propTypes = {
58
106
  onClick: PropTypes.func.isRequired,
package/esm/Heading/web/StyledHeading.js CHANGED
@@ -10,10 +10,8 @@ const StyledHeading = styled.header`
10
10
  }) => {
11
11
  return css`
12
12
  background: ${heading.background};
13
- padding: ${heading.padding.vertical}px
14
- ${heading.padding.horizontalMobile}px;
13
+ padding: ${heading.padding.vertical}px ${heading.padding.horizontal}px;
15
14
  width: 100%;
16
- min-height: ${heading.height}px;
17
15
  display: flex;
18
16
  justify-content: space-between;
19
17
  align-items: center;
package/esm/NavigationMenu/web/BottomItems/BottomItem.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import styled, { css } from "styled-components";
3
+ import { Text } from "@gympass/yoga";
3
4
  import Icon from "../../../Icon";
4
5
  import Box from "../../../Box";
5
- import Text from "../../../Text";
6
- const StyledText = styled(Text)`
6
+ const StyledText = styled(Text.SmallestException)`
7
7
  ${({
8
8
  theme: {
9
9
  yoga: {
@@ -25,7 +25,7 @@ const Active = css`
25
25
  theme: {
26
26
  yoga: {
27
27
  components: {
28
- navigationmenu: { backgroundColor, icon, font }
28
+ navigationmenu: { icon, font }
29
29
  }
30
30
  }
31
31
  }
@@ -35,8 +35,6 @@ const Active = css`
35
35
  }
36
36
 
37
37
  div {
38
- background-color: ${backgroundColor.default};
39
-
40
38
  ${StyledText} {
41
39
  color: ${font.color.active};
42
40
  }
@@ -53,14 +51,13 @@ const StyledItem = styled.li`
53
51
  theme: {
54
52
  yoga: {
55
53
  components: {
56
- navigationmenu: { backgroundColor, border, icon, font }
54
+ navigationmenu: { border, icon, font }
57
55
  }
58
56
  }
59
57
  }
60
58
  }) => css`
61
59
  transition: background-color 300ms ease-in-out;
62
60
 
63
- background-color: transparent;
64
61
  border-radius: ${border.radius.default}px;
65
62
  list-style-type: none;
66
63
  cursor: pointer;
@@ -74,8 +71,6 @@ const StyledItem = styled.li`
74
71
  &:hover,
75
72
  &:focus {
76
73
  ${!isActive && css`
77
- background-color: ${backgroundColor.hover};
78
-
79
74
  ${StyledText} {
80
75
  color: ${font.color.hover};
81
76
  }
@@ -114,7 +109,7 @@ const StyledTextContainer = styled(Box)`
114
109
  align-items: center;
115
110
  justify-content: center;
116
111
  gap: ${gap.xxxsmall}px;
117
- padding: ${padding.xxsmall}px ${padding.xxxsmall}px;
112
+ padding: ${padding.xxxsmall}px;
118
113
  border-radius: ${border.radius.default}px;
119
114
  `}
120
115
  `;
package/esm/NavigationMenu/web/BottomItems/BottomItems.js CHANGED
@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import styled, { css } from "styled-components";
3
3
  import { media } from "@gympass/yoga-helpers";
4
4
  const StyledItemsContainer = styled.nav`
5
+ position: relative;
5
6
  ${media.lg`display: none`}
6
7
  `;
7
8
  const StyledItems = styled.ul`
@@ -9,22 +10,25 @@ const StyledItems = styled.ul`
9
10
  theme: {
10
11
  yoga: {
11
12
  components: {
12
- navigationmenu: { backgroundColor, border, gap, padding }
13
+ navigationmenu: { backgroundColor, border, gap }
13
14
  }
14
15
  }
15
16
  }
16
17
  }) => css`
18
+ position: absolute;
19
+ bottom: 0;
17
20
  display: grid;
18
21
  grid-auto-columns: minmax(0, 1fr);
19
22
  grid-auto-flow: column;
20
23
  align-items: center;
21
24
  width: 100%;
22
- height: 74px;
23
- background-color: ${backgroundColor.default};
25
+ height: 56px;
26
+ background-color: ${backgroundColor.white};;
24
27
  margin: 0;
25
- padding: ${padding.xxxsmall}px;
28
+ padding: 0;
26
29
  border: 1px solid ${border.color.default};
27
30
  gap: ${gap.xxxsmall}px;
31
+ z-index: 15;
28
32
  `}
29
33
  `;
30
34
  const BottomItems = ({ children }) => {
package/esm/NavigationMenu/web/Item/styles.js CHANGED
@@ -99,6 +99,7 @@ const StyledItem = styled.li`
99
99
  isActive,
100
100
  theme: {
101
101
  yoga: {
102
+ spacing,
102
103
  components: {
103
104
  navigationmenu: { backgroundColor, border, icon, font }
104
105
  }
@@ -111,6 +112,7 @@ const StyledItem = styled.li`
111
112
  border-radius: ${border.radius.default}px;
112
113
  list-style-type: none;
113
114
  cursor: pointer;
115
+ margin-right: ${spacing.xxsmall}px;
114
116
 
115
117
  svg {
116
118
  height: ${icon.height}px;
@@ -135,6 +137,24 @@ const StyledItem = styled.li`
135
137
  a {
136
138
  text-decoration: none;
137
139
 
140
+ &:hover,
141
+ &:focus {
142
+ outline: none;
143
+
144
+ ${StyledTextContainer} {
145
+ background-color: ${backgroundColor.hover};
146
+ color: ${font.color.hover};
147
+ }
148
+
149
+ ${StyledText} {
150
+ color: ${font.color.hover};
151
+ }
152
+
153
+ svg {
154
+ fill: ${icon.fill.hover};
155
+ }
156
+ }
157
+
138
158
  &.active {
139
159
  ${Active}
140
160
  }
package/esm/NavigationMenu/web/NavigationMenu.js CHANGED
@@ -6,10 +6,8 @@ import Switcher from "./Switcher";
6
6
  import { Item, Subitem } from "./Item";
7
7
  import { BottomItems, BottomItem } from "./BottomItems";
8
8
  import Box from "../../Box";
9
- const StyledNavigationMenu = styled(Box)`
9
+ const DeskTopContainer = css`
10
10
  ${({
11
- isOpenOnMobile,
12
- isResponsive,
13
11
  theme: {
14
12
  yoga: {
15
13
  components: {
@@ -18,8 +16,10 @@ const StyledNavigationMenu = styled(Box)`
18
16
  }
19
17
  }
20
18
  }) => css`
19
+ position: relative;
21
20
  display: flex;
22
21
  flex-direction: column;
22
+ flex-shrink: 0;
23
23
  gap: ${gap.medium}px;
24
24
  padding: ${padding.small}px ${padding.xsmall}px;
25
25
  background-color: ${backgroundColor.default};
@@ -29,17 +29,24 @@ const StyledNavigationMenu = styled(Box)`
29
29
  right: 0;
30
30
 
31
31
  transition: width 300ms ease-in-out;
32
+ `}
33
+ `;
34
+ const StyledNavigationMenu = styled(Box)`
35
+ ${({ isOpenOnMobile, isResponsive }) => css`
36
+ ${DeskTopContainer};
37
+
38
+ ${isResponsive && css`
39
+ position: fixed;
40
+ width: 100%;
41
+ height: calc(100% - 56px);
42
+ z-index: 10;
43
+ top: 0;
44
+ right: ${isOpenOnMobile ? "0" : "-100%"};
32
45
 
33
- ${isResponsive && media.max("lg")`
34
- position: absolute;
35
- width: 100%;
36
- height: calc(100% - 74px);
37
- z-index: 10;
38
- Top: 0;
39
- right: ${isOpenOnMobile ? "0" : "-100%"};
46
+ transition: right 300ms ease-in-out;
40
47
 
41
- transition: right 300ms ease-in-out;
42
- `}
48
+ ${media.lg`${DeskTopContainer}`}
49
+ `}
43
50
  `}
44
51
  `;
45
52
  const StyledHeader = styled(Box)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.94.0",
3
+ "version": "7.96.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
57
57
  "react-native": "0.72.3",
58
58
  "styled-components": "^4.4.0"
59
59
  },
60
- "gitHead": "7fef30f21874f0b48665a6a47fd9edc47f69a9c0",
60
+ "gitHead": "d1537d3671135330e2c56c847105d5a86ff38515",
61
61
  "module": "./esm",
62
62
  "private": false,
63
63
  "react-native": "./cjs/index.native.js"