@gympass/yoga 7.88.1 → 7.89.0

package/cjs/NavigationMenu/web/Switcher/Actions.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Actions_exports = {};
+__export(Actions_exports, {
+  default: () => Actions_default
+});
+module.exports = __toCommonJS(Actions_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_yoga = require("@gympass/yoga");
+var import_Icon = __toESM(require("../../../Icon"));
+var import_Box = __toESM(require("../../../Box"));
+const StyledAction = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, height, width }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      transition: background-color 300ms ease-in-out;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: ${width.xxlarge}px;
+      height: ${height.xxlarge}px;
+      border-radius: ${border.radius.circle}px;
+
+      :hover,
+      &:focus {
+        cursor: pointer;
+        background-color: ${backgroundColor.hover};
+      }
+    `}
+`;
+const Actions = ({ actions, sideOffset }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_yoga.Menu, { onMouseHover: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Menu.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledAction, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.MenuMore, size: "medium", fill: "vibin" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Menu.List, { side: "right", sideOffset, zIndex: "10", children: actions.map(({ id, label, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Menu.Item, { onClick, children: label }, id)) })
+  ] });
+};
+var Actions_default = Actions;

package/cjs/NavigationMenu/web/Switcher/Switcher.js

@@ -0,0 +1,105 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Switcher_exports = {};
+__export(Switcher_exports, {
+  default: () => Switcher_default
+});
+module.exports = __toCommonJS(Switcher_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga = require("@gympass/yoga");
+var import_Actions = __toESM(require("./Actions"));
+var import_Box = __toESM(require("../../../Box"));
+const StyledSwitcher = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  fill,
+  theme: {
+    yoga: {
+      colors,
+      components: {
+        navigationmenu: { border, gap, height, padding, width }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: ${gap.xxsmall}px;
+      padding: ${padding.xsmall}px;
+      background-color: ${colors[fill]};
+      border-radius: ${border.radius.default}px;
+
+      > div:first-child {
+        height: ${height.xlarge}px;
+        width: ${width.xlarge}px;
+      }
+    `}
+`;
+const StyledTextContainer = (0, import_styled_components.default)(import_Box.default)`
+  flex: 1;
+  overflow: hidden;
+`;
+const StyledTitle = (0, import_styled_components.default)(import_yoga.Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      font-weight: ${font.weight.medium};
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    `}
+`;
+const Switcher = ({
+  actions,
+  avatar: Avatar,
+  fill = "transparent",
+  sideOffset = 36,
+  subtitle,
+  title
+}) => {
+  const hasActions = actions == null ? void 0 : actions.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSwitcher, { fill, children: [
+    Avatar,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTextContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { children: title || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Text.Tiny, { color: "deep", children: subtitle })
+    ] }),
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Actions.default, { actions, sideOffset })
+  ] });
+};
+var Switcher_default = Switcher;

package/cjs/NavigationMenu/web/Switcher/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Switcher_exports = {};
+__export(Switcher_exports, {
+  default: () => Switcher_default
+});
+module.exports = __toCommonJS(Switcher_exports);
+var import_Switcher = __toESM(require("./Switcher"));
+var Switcher_default = import_Switcher.default;

package/cjs/NavigationMenu/web/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var web_exports = {};
+__export(web_exports, {
+  default: () => web_default
+});
+module.exports = __toCommonJS(web_exports);
+var import_NavigationMenu = __toESM(require("./NavigationMenu"));
+var web_default = import_NavigationMenu.default;

package/cjs/Theme/theme/componentThemes.js

@@ -0,0 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var componentThemes_exports = {};
+__export(componentThemes_exports, {
+  default: () => componentThemes_default
+});
+module.exports = __toCommonJS(componentThemes_exports);
+var import_Accordion_theme = __toESM(require("../../Accordion/Accordion.theme.js"));
+var import_ActionRequirement_theme = __toESM(require("../../ActionRequirement/ActionRequirement.theme.js"));
+var import_AutoComplete_theme = __toESM(require("../../AutoComplete/AutoComplete.theme.js"));
+var import_Avatar_theme = __toESM(require("../../Avatar/Avatar.theme.js"));
+var import_Banner_theme = __toESM(require("../../Banner/Banner.theme.js"));
+var import_BottomSheet_theme = __toESM(require("../../BottomSheet/BottomSheet.theme.js"));
+var import_Button_theme = __toESM(require("../../Button/Button.theme.js"));
+var import_Card_theme = __toESM(require("../../Card/Card.theme.js"));
+var import_Card_native_theme = __toESM(require("../../Card/Card.native.theme.js"));
+var import_Card_web_theme = __toESM(require("../../Card/Card.web.theme.js"));
+var import_Checkbox_theme = __toESM(require("../../Checkbox/Checkbox.theme.js"));
+var import_CheckboxSwitch_theme = __toESM(require("../../Checkbox/CheckboxSwitch.theme.js"));
+var import_Datepicker_theme = __toESM(require("../../Datepicker/Datepicker.theme.js"));
+var import_Dialog_theme = __toESM(require("../../Dialog/Dialog.theme.js"));
+var import_Divider_theme = __toESM(require("../../Divider/Divider.theme.js"));
+var import_Drawer_theme = __toESM(require("../../Drawer/Drawer.theme.js"));
+var import_Dropdown_theme = __toESM(require("../../Dropdown/Dropdown.theme.js"));
+var import_Feedback_theme = __toESM(require("../../Feedback/Feedback.theme.js"));
+var import_Grid_theme = __toESM(require("../../Grid/Grid.theme.js"));
+var import_Header_theme = __toESM(require("../../Header/Header.theme.js"));
+var import_Heading_theme = __toESM(require("../../Heading/Heading.theme.js"));
+var import_Icon_theme = __toESM(require("../../Icon/Icon.theme.js"));
+var import_Input_theme = __toESM(require("../../Input/Input.theme.js"));
+var import_List_theme = __toESM(require("../../List/List.theme.js"));
+var import_Menu_theme = __toESM(require("../../Menu/Menu.theme.js"));
+var import_Popover_theme = __toESM(require("../../Popover/Popover.theme.js"));
+var import_Progress_theme = __toESM(require("../../Progress/Progress.theme.js"));
+var import_RadioGroup_theme = __toESM(require("../../RadioGroup/RadioGroup.theme.js"));
+var import_Rating_theme = __toESM(require("../../Rating/Rating.theme.js"));
+var import_Result_theme = __toESM(require("../../Result/Result.theme.js"));
+var import_Skeleton_theme = __toESM(require("../../Skeleton/Skeleton.theme.js"));
+var import_Slider_theme = __toESM(require("../../Slider/Slider.theme.js"));
+var import_Snackbar_theme = __toESM(require("../../Snackbar/Snackbar.theme.js"));
+var import_Spinner_theme = __toESM(require("../../Spinner/Spinner.theme.js"));
+var import_Stepper_theme = __toESM(require("../../Stepper/Stepper.theme.js"));
+var import_Tag_theme = __toESM(require("../../Tag/Tag.theme.js"));
+var import_Text_theme = __toESM(require("../../Text/Text.theme.js"));
+var import_TextArea_theme = __toESM(require("../../TextArea/TextArea.theme.js"));
+var import_NavigationMenu = __toESM(require("../../NavigationMenu/NavigationMenu.theme"));
+const componentThemes = {
+  Accordion: import_Accordion_theme.default,
+  ActionRequirement: import_ActionRequirement_theme.default,
+  AutoComplete: import_AutoComplete_theme.default,
+  Avatar: import_Avatar_theme.default,
+  Banner: import_Banner_theme.default,
+  BottomSheet: import_BottomSheet_theme.default,
+  Button: import_Button_theme.default,
+  Card: import_Card_theme.default,
+  CardNative: import_Card_native_theme.default,
+  CardWeb: import_Card_web_theme.default,
+  Checkbox: import_Checkbox_theme.default,
+  CheckboxSwitch: import_CheckboxSwitch_theme.default,
+  Datepicker: import_Datepicker_theme.default,
+  Dialog: import_Dialog_theme.default,
+  Divider: import_Divider_theme.default,
+  Drawer: import_Drawer_theme.default,
+  Dropdown: import_Dropdown_theme.default,
+  Feedback: import_Feedback_theme.default,
+  Grid: import_Grid_theme.default,
+  Header: import_Header_theme.default,
+  Heading: import_Heading_theme.default,
+  Icon: import_Icon_theme.default,
+  Input: import_Input_theme.default,
+  List: import_List_theme.default,
+  Menu: import_Menu_theme.default,
+  Popover: import_Popover_theme.default,
+  Progress: import_Progress_theme.default,
+  RadioGroup: import_RadioGroup_theme.default,
+  Rating: import_Rating_theme.default,
+  Result: import_Result_theme.default,
+  Skeleton: import_Skeleton_theme.default,
+  Slider: import_Slider_theme.default,
+  Snackbar: import_Snackbar_theme.default,
+  Spinner: import_Spinner_theme.default,
+  Stepper: import_Stepper_theme.default,
+  Tag: import_Tag_theme.default,
+  Text: import_Text_theme.default,
+  TextArea: import_TextArea_theme.default,
+  NavigationMenu: import_NavigationMenu.default
+};
+var componentThemes_default = componentThemes;

package/cjs/Theme/theme/theme.js

@@ -49,12 +49,12 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var import_yoga_common = require("@gympass/yoga-common");
-var componentThemes = __toESM(require("../../**/*.theme.js"));
+var import_componentThemes = __toESM(require("./componentThemes"));
 const getComponentThemes = (tokens) => {
   const { colors, baseFont, baseFontSize } = tokens;
-  const components = Object.entries(componentThemes).reduce(
+  const components = Object.entries(import_componentThemes.default).reduce(
     (componentsStyles, [names, themed]) => {
-      const [, name] = names.toLowerCase().split("$");
+      const name = names.toLowerCase();
       return __spreadProps(__spreadValues({}, componentsStyles), {
         [name]: themed(__spreadProps(__spreadValues({}, tokens), {
           colors,

package/cjs/index.js

@@ -56,6 +56,7 @@ __export(src_exports, {
   Input: () => import_Input.default,
   List: () => import_List.default,
   Menu: () => import_Menu.default,
+  NavigationMenu: () => import_NavigationMenu.default,
   PlanCard: () => import_Card.PlanCard,
   Popover: () => import_Popover.default,
   Progress: () => import_Progress.default,
@@ -113,6 +114,7 @@ var import_Skeleton = __toESM(require("./Skeleton"));
 var import_ActionRequirement = __toESM(require("./ActionRequirement"));
 var import_Popover = __toESM(require("./Popover"));
 var import_Spinner = __toESM(require("./Spinner"));
+var import_NavigationMenu = __toESM(require("./NavigationMenu"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -143,6 +145,7 @@ var import_Spinner = __toESM(require("./Spinner"));
   Input,
   List,
   Menu,
+  NavigationMenu,
   PlanCard,
   Popover,
   Progress,

package/cjs/yoga.d.js

@@ -0,0 +1 @@
+"use strict";

package/esm/NavigationMenu/NavigationMenu.theme.js

@@ -0,0 +1,60 @@
+const NavigationMenu = ({ colors, fontWeights, radii, spacing }) => ({
+  avatar: {
+    height: spacing.xlarge,
+    width: spacing.xlarge
+  },
+  backgroundColor: {
+    default: colors.clear,
+    hover: colors.light,
+    stamina: colors.stamina,
+    yoga: colors.yoga,
+    white: colors.white
+  },
+  border: {
+    color: {
+      default: colors.light,
+      white: colors.white
+    },
+    radius: {
+      default: radii.small,
+      circle: radii.circle
+    }
+  },
+  font: {
+    color: {
+      default: colors.deep,
+      active: colors.vibin,
+      hover: colors.stamina
+    },
+    weight: { medium: fontWeights.medium }
+  },
+  gap: {
+    xxxsmall: spacing.xxxsmall,
+    xxsmall: spacing.xxsmall,
+    medium: spacing.medium
+  },
+  height: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge },
+  icon: {
+    height: spacing.medium,
+    width: spacing.medium,
+    fill: {
+      default: colors.deep,
+      active: colors.vibin,
+      hover: colors.stamina
+    }
+  },
+  padding: {
+    xxxsmall: spacing.xxxsmall,
+    xxsmall: spacing.xxsmall,
+    xsmall: spacing.xsmall,
+    small: spacing.small
+  },
+  tag: {
+    color: { default: colors.white }
+  },
+  width: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge }
+});
+var NavigationMenu_theme_default = NavigationMenu;
+export {
+  NavigationMenu_theme_default as default
+};

package/esm/NavigationMenu/index.js

@@ -0,0 +1,5 @@
+import WebNavigationMenu from "./web";
+var NavigationMenu_default = WebNavigationMenu;
+export {
+  NavigationMenu_default as default
+};

package/esm/NavigationMenu/web/BottomItems/BottomItem.js

@@ -0,0 +1,135 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import Icon from "../../../Icon";
+import Box from "../../../Box";
+import Text from "../../../Text";
+const StyledText = styled(Text)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => css`
+      color: ${font.color.default};
+      max-width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    `}
+`;
+const Active = css`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, icon, font }
+      }
+    }
+  }
+}) => css`
+      :not(:last-child) {
+        pointer-events: none;
+      }
+
+      div {
+        background-color: ${backgroundColor.default};
+
+        ${StyledText} {
+          color: ${font.color.active};
+        }
+
+        svg {
+          fill: ${icon.fill.active};
+        }
+      }
+    `}
+`;
+const StyledItem = styled.li`
+  ${({
+  isActive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, icon, font }
+      }
+    }
+  }
+}) => css`
+      transition: background-color 300ms ease-in-out;
+
+      background-color: transparent;
+      border-radius: ${border.radius.default}px;
+      list-style-type: none;
+      cursor: pointer;
+
+      svg {
+        height: ${icon.height}px;
+        width: ${icon.width}px;
+        fill: ${icon.fill.default};
+      }
+
+      &:hover,
+      &:focus {
+        ${!isActive && css`
+          background-color: ${backgroundColor.hover};
+
+          ${StyledText} {
+            color: ${font.color.hover};
+          }
+
+          svg {
+            fill: ${icon.fill.hover};
+          }
+        `};
+      }
+
+      a {
+        text-decoration: none;
+
+        &.active {
+          cursor: auto;
+
+          ${Active}
+        }
+      }
+
+      ${isActive && Active};
+    `}
+`;
+const StyledTextContainer = styled(Box)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { border, gap, padding }
+      }
+    }
+  }
+}) => css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: ${gap.xxxsmall}px;
+      padding: ${padding.xxsmall}px ${padding.xxxsmall}px;
+      border-radius: ${border.radius.default}px;
+    `}
+`;
+const BottomItem = ({
+  active = false,
+  icon,
+  label,
+  wrapper: Wrapper
+}) => {
+  return /* @__PURE__ */ jsx(StyledItem, { isActive: active, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
+    /* @__PURE__ */ jsx(Icon, { as: icon }),
+    /* @__PURE__ */ jsx(StyledText, { children: label })
+  ] }) }) });
+};
+var BottomItem_default = BottomItem;
+export {
+  BottomItem_default as default
+};

package/esm/NavigationMenu/web/BottomItems/BottomItems.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { media } from "@gympass/yoga-helpers";
+const StyledItemsContainer = styled.nav`
+  ${media.lg`display: none`}
+`;
+const StyledItems = styled.ul`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, gap, padding }
+      }
+    }
+  }
+}) => css`
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    align-items: center;
+    width: 100%;
+    height: 74px;
+    background-color: ${backgroundColor.default};
+    margin: 0;
+    padding: ${padding.xxxsmall}px;
+    border: 1px solid ${border.color.default};
+    gap: ${gap.xxxsmall}px;
+  `}
+`;
+const BottomItems = ({ children }) => {
+  return /* @__PURE__ */ jsx(StyledItemsContainer, { children: /* @__PURE__ */ jsx(StyledItems, { children }) });
+};
+var BottomItems_default = BottomItems;
+export {
+  BottomItems_default as default
+};

package/esm/NavigationMenu/web/BottomItems/index.js

@@ -0,0 +1,6 @@
+import BottomItems from "./BottomItems";
+import BottomItem from "./BottomItem";
+export {
+  BottomItem,
+  BottomItems
+};

package/esm/NavigationMenu/web/Item/Item.js

@@ -0,0 +1,25 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Styles from "./styles";
+const Item = ({
+  active = false,
+  children,
+  expanded = false,
+  icon: Icon2,
+  label,
+  responsive = true,
+  tag,
+  wrapper: Wrapper
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Styles.StyledItem, { isActive: active, isResponsive: responsive, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Styles.StyledTextContainer, { children: [
+      Icon2,
+      /* @__PURE__ */ jsx(Styles.StyledText, { children: label }),
+      tag && /* @__PURE__ */ jsx(Styles.StyledTag, { children: tag })
+    ] }) }) }),
+    expanded && children
+  ] });
+};
+var Item_default = Item;
+export {
+  Item_default as default
+};