@gympass/yoga 7.88.1 → 7.89.0

package/cjs/NavigationMenu/web/Item/styles.js

@@ -0,0 +1,188 @@
+"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 styles_exports = {};
+__export(styles_exports, {
+  StyledItem: () => StyledItem,
+  StyledTag: () => StyledTag,
+  StyledText: () => StyledText,
+  StyledTextContainer: () => StyledTextContainer
+});
+module.exports = __toCommonJS(styles_exports);
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_helpers = require("@gympass/yoga-helpers");
+var import_Box = __toESM(require("../../../Box"));
+var import_Tag = __toESM(require("../../../Tag"));
+var import_Text = __toESM(require("../../../Text"));
+const StyledTextContainer = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  isSubItem,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { border, gap, padding }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: ${gap.xxsmall}px;
+    padding: 10px ${padding.xxsmall}px 10px ${isSubItem ? 44 : padding.small}px;
+    border-radius: ${border.radius.default}px;
+  `}
+`;
+const StyledTag = (0, import_styled_components.default)(import_Tag.default)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, tag }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    text-transform: uppercase;
+    background-color: ${backgroundColor.stamina};
+    color: ${tag.color.default};
+    border-radius: ${border.radius.circle}px;
+  `}
+`;
+const StyledText = (0, import_styled_components.default)(import_Text.default)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    color: ${font.color.default};
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `}
+`;
+const Active = import_styled_components.css`
+  ${({
+  isResponsive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, icon, font }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    cursor: auto;
+
+    > ${StyledTextContainer} {
+      background-color: ${backgroundColor.default};
+
+      ${isResponsive ? import_yoga_helpers.media.lg`background-color: ${backgroundColor.yoga}` : import_styled_components.css`
+            background-color: ${backgroundColor.yoga};
+          `}
+
+      ${StyledText} {
+        color: ${font.color.active};
+
+        ${isResponsive ? import_yoga_helpers.media.lg`font-weight: ${font.weight.medium}` : import_styled_components.css`
+              font-weight: ${font.weight.medium};
+            `}
+      }
+
+      svg {
+        fill: ${icon.fill.active};
+      }
+
+      > ${StyledTag} {
+        background-color: ${backgroundColor.stamina};
+      }
+    }
+  `}
+`;
+const StyledItem = import_styled_components.default.li`
+  ${({
+  isActive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, icon, font }
+      }
+    }
+  }
+}) => import_styled_components.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;
+    }
+
+    &:hover,
+    &:focus {
+      ${!isActive && import_styled_components.css`
+        background-color: ${backgroundColor.hover};
+
+        ${StyledText} {
+          color: ${font.color.hover};
+        }
+
+        svg {
+          fill: ${icon.fill.hover};
+        }
+      `};
+    }
+
+    a {
+      text-decoration: none;
+
+      &.active {
+        ${Active}
+      }
+
+      ${isActive && Active};
+    }
+  `}
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyledItem,
+  StyledTag,
+  StyledText,
+  StyledTextContainer
+});

package/cjs/NavigationMenu/web/Menu/Menu.js

@@ -0,0 +1,109 @@
+"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 Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+module.exports = __toCommonJS(Menu_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_Box = __toESM(require("../../../Box"));
+var import_Icon = __toESM(require("../../../Icon"));
+const StyledMenu = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  hasAction,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { avatar, backgroundColor, border, gap, padding }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      transition: background-color 300ms ease-in-out;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: ${gap.xxsmall}px;
+      padding: ${padding.xsmall}px;
+      background-color: ${backgroundColor.white};
+      border-radius: ${border.radius.circle}px;
+      border: 1px solid ${border.color.white};
+
+      > div:first-child {
+        height: ${avatar.height}px;
+        width: ${avatar.width}px;
+      }
+
+      ${hasAction && import_styled_components.css`
+        :hover,
+        &:focus {
+          cursor: pointer;
+          border: 1px solid ${border.color.default};
+        }
+      `}
+    `}
+`;
+const StyledTextContainer = (0, import_styled_components.default)(import_Box.default)`
+  flex: 1;
+  overflow: hidden;
+`;
+const StyledText = (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 Menu = ({ avatar: Avatar, subtitle, title, onClick }) => {
+  const hasAction = Boolean(onClick);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledMenu, { hasAction, onClick, children: [
+    Avatar,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTextContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { 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.Small, { color: "deep", children: subtitle })
+    ] }),
+    hasAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.ArrowRight, size: "large", fill: "vibin" })
+  ] });
+};
+var Menu_default = Menu;

package/cjs/NavigationMenu/web/Menu/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 Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_Menu = __toESM(require("./Menu"));
+var Menu_default = import_Menu.default;

package/cjs/NavigationMenu/web/NavigationMenu.js

@@ -0,0 +1,155 @@
+"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 NavigationMenu_exports = {};
+__export(NavigationMenu_exports, {
+  default: () => NavigationMenu_default
+});
+module.exports = __toCommonJS(NavigationMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_styled_components = __toESM(require("styled-components"));
+var import_yoga_helpers = require("@gympass/yoga-helpers");
+var import_Menu = __toESM(require("./Menu"));
+var import_Switcher = __toESM(require("./Switcher"));
+var import_Item = require("./Item");
+var import_BottomItems = require("./BottomItems");
+var import_Box = __toESM(require("../../Box"));
+const StyledNavigationMenu = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  isOpenOnMobile,
+  isResponsive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, gap, padding }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    display: flex;
+    flex-direction: column;
+    gap: ${gap.medium}px;
+    padding: ${padding.small}px ${padding.xsmall}px;
+    background-color: ${backgroundColor.default};
+
+    width: 280px;
+    height: 100%;
+    right: 0;
+
+    transition: width 300ms ease-in-out;
+
+    ${isResponsive && import_yoga_helpers.media.max("lg")`
+          position: absolute;
+          width: 100%;
+          height: calc(100% - 74px);
+          z-index: 10;
+          Top: 0;
+          right: ${isOpenOnMobile ? "0" : "-100%"};
+
+          transition: right 300ms ease-in-out;
+        `}
+  `}
+`;
+const StyledHeader = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => import_styled_components.css`
+      display: flex;
+      flex-direction: column;
+      gap: ${gap.xxxsmall}px;
+    `}
+`;
+const StyledItems = import_styled_components.default.nav`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: auto;
+`;
+const StyledItemsGroup = import_styled_components.default.ul`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap, padding }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0 ${padding.small}px 0;
+    gap: ${gap.xxxsmall}px;
+  `}
+`;
+const StyledFooter = (0, import_styled_components.default)(import_Box.default)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => import_styled_components.css`
+    display: flex;
+    flex-direction: column;
+    gap: ${gap.xxxsmall}px;
+  `}
+`;
+const NavigationMenu = ({
+  children,
+  openOnMobile = false,
+  responsive = true
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledNavigationMenu,
+    {
+      isOpenOnMobile: openOnMobile,
+      isResponsive: responsive,
+      children
+    }
+  );
+};
+NavigationMenu.Header = StyledHeader;
+NavigationMenu.Menu = import_Menu.default;
+NavigationMenu.Switcher = import_Switcher.default;
+NavigationMenu.Items = StyledItems;
+NavigationMenu.ItemsGroup = StyledItemsGroup;
+NavigationMenu.Item = import_Item.Item;
+NavigationMenu.Subitem = import_Item.Subitem;
+NavigationMenu.BottomItems = import_BottomItems.BottomItems;
+NavigationMenu.BottomItem = import_BottomItems.BottomItem;
+NavigationMenu.Footer = StyledFooter;
+var NavigationMenu_default = NavigationMenu;

package/cjs/NavigationMenu/web/NavigationMenu.test.js

@@ -0,0 +1,178 @@
+"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 __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 import_jsx_runtime = require("react/jsx-runtime");
+var import_react2 = require("@testing-library/react");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_Theme = __toESM(require("../../Theme"));
+var import_AvatarCircle = __toESM(require("../../Avatar/web/AvatarCircle"));
+var import_Icon = __toESM(require("../../Icon"));
+var import_NavigationMenu = __toESM(require("./NavigationMenu"));
+describe("<NavigationMenu />", () => {
+  describe("Snapshots", () => {
+    it("should match NavigationMenu", () => {
+      const renderWrapper = ({ children }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: "https://www.gympass.com", children });
+      };
+      const IconComponent = ({ icon }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: icon });
+      };
+      const itemMainGroup = [
+        {
+          expanded: true,
+          icon: import_yoga_icons.Doc,
+          label: "Subscription",
+          tag: "new",
+          subitems: [{ label: "Details" }]
+        },
+        {
+          active: true,
+          icon: import_yoga_icons.Doc,
+          label: "Billing"
+        }
+      ];
+      const itemGroups = [
+        [...itemMainGroup],
+        [
+          {
+            icon: import_yoga_icons.Help,
+            label: "Help"
+          }
+        ]
+      ];
+      const bottomItems = [
+        ...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({
+          active,
+          icon,
+          label,
+          wrapper: renderWrapper
+        })),
+        {
+          active: false,
+          icon: import_yoga_icons.MenuMore,
+          label: "More",
+          wrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+        }
+      ];
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Theme.default, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_NavigationMenu.default,
+            {
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_NavigationMenu.default.Menu,
+                  {
+                    avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarCircle.default, {}),
+                    title: "Company",
+                    subtitle: "Reseller"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.Items, { children: itemGroups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.ItemsGroup, { children: group.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_NavigationMenu.default.Item,
+                  {
+                    active: item.active,
+                    expanded: item.expanded,
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { icon: item.icon }),
+                    label: item.label,
+                    wrapper: renderWrapper,
+                    tag: item.tag,
+                    children: item.subitems && item.subitems.map(({ label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_NavigationMenu.default.Subitem,
+                      {
+                        label,
+                        wrapper: renderWrapper
+                      },
+                      label
+                    ))
+                  },
+                  item.label
+                )) }, index)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_NavigationMenu.default.Switcher,
+                  {
+                    avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarCircle.default, {}),
+                    title: "User",
+                    subtitle: "Admin, Supervisor"
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.BottomItems, { children: bottomItems.map(({ active, icon, label, wrapper }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_NavigationMenu.default.BottomItem,
+            {
+              active,
+              icon,
+              label,
+              wrapper
+            },
+            label
+          )) })
+        ] })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match NavigationMenu.Menu with an action", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default, { responsive: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_NavigationMenu.default.Menu,
+          {
+            avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarCircle.default, {}),
+            title: "Company",
+            subtitle: "Reseller",
+            onClick: () => null
+          }
+        ) }) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match NavigationMenu.Switcher with actions", () => {
+      const actions = [
+        {
+          id: "Action 1",
+          label: "Action 1",
+          onClick: () => null
+        },
+        {
+          id: "Action 2",
+          label: "Action 2",
+          onClick: () => null
+        }
+      ];
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default, { responsive: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_NavigationMenu.default.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_NavigationMenu.default.Switcher,
+          {
+            actions,
+            avatar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarCircle.default, {}),
+            sideOffset: 36,
+            subtitle: "Admin, Supervisor",
+            title: "User"
+          }
+        ) }) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+});