@intlayer/design-system 3.0.3 → 3.2.0

package/dist/components/Modal/Modal.mjs

@@ -8,31 +8,36 @@ import "react";
 import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Auth/AuthProvider/index.mjs";
 import "../../libs/intlayer-api/auth.mjs";
 import "../../libs/intlayer-api/dictionary.mjs";
 import "../../libs/intlayer-api/organization.mjs";
 import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/stripe.mjs";
 import "../../libs/intlayer-api/user.mjs";
+import "@intlayer/config/client";
+import "../Toaster/Toast.mjs";
 import "@intlayer/dictionaries-entry";
 import "deepmerge";
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
 import { H3 } from "../Headers/index.mjs";
-const modalVariants = cva("cursor-default overflow-auto p-3 shadow", {
-  variants: {
-    variant: {
-      sm: "w-full max-h-[30vh] max-w-[30vw]",
-      md: "w-full max-h-[50vh] max-w-[50vw]",
-      lg: "w-full max-h-[70vh] max-w-[70vw]",
-      xl: "w-full max-h-[95vh] max-w-[95vw]",
-      unset: "max-h-[95vh] max-w-[95vw]"
+const modalVariants = cva(
+  "cursor-default overflow-auto p-3 shadow justify-center",
+  {
+    variants: {
+      variant: {
+        sm: "w-full max-h-[30vh] max-w-[30vw]",
+        md: "w-full max-h-[50vh] max-w-[50vw]",
+        lg: "w-full max-h-[70vh] max-w-[70vw]",
+        xl: "w-full max-h-[95vh] max-w-[95vw]",
+        unset: "max-h-[95vh] max-w-[95vw]"
+      }
+    },
+    defaultVariants: {
+      variant: "unset"
     }
-  },
-  defaultVariants: {
-    variant: "unset"
   }
-});
+);
 const MotionModal = motion.create(Container);
 const Modal = ({
   children,
@@ -42,7 +47,8 @@ const Modal = ({
   onClose,
   hasCloseButton = false,
   title,
-  size = "unset"
+  size = "unset",
+  ...props
 }) => {
   const containerElement = useGetElementOrWindow(container);
   useScrollBlockage({ key: "modal", disableScroll: isOpen && disableScroll });
@@ -79,7 +85,7 @@ const Modal = ({
             role: "dialog",
             "aria-modal": true,
             roundedSize: "2xl",
-            transparency: "sm",
+            ...props,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "div",
@@ -104,7 +110,7 @@ const Modal = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-2 my-4 flex flex-1 flex-col items-center justify-center overflow-auto", children })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-2 my-4 flex flex-1 flex-col items-center overflow-auto", children })
             ]
           }
         )

package/dist/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { H3 } from '../Headers';\n\ninterface ModalProps {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n}\n\nconst modalVariants = cva('cursor-default overflow-auto p-3 shadow', {\n  variants: {\n    variant: {\n      sm: 'w-full max-h-[30vh] max-w-[30vw]',\n      md: 'w-full max-h-[50vh] max-w-[50vw]',\n      lg: 'w-full max-h-[70vh] max-w-[70vw]',\n      xl: 'w-full max-h-[95vh] max-w-[95vw]',\n      unset: 'max-h-[95vh] max-w-[95vw]',\n    },\n  },\n  defaultVariants: {\n    variant: 'unset',\n  },\n});\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'unset',\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={cn(\n          modalVariants({\n            variant: size,\n          })\n        )}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        transparency=\"sm\"\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center justify-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB,IAAI,2CAA2C;AAAA,EACnE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAID,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AACT,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV;QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW;AAAA,cACT,cAAc;AAAA,gBACZ,SAAS;AAAA,cAAA,CACV;AAAA,YACH;AAAA,YACA,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACZ,cAAa;AAAA,YAEb,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV;wBACV;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,4EACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<ContainerProps, 'transparency'>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'w-full max-h-[30vh] max-w-[30vw]',\n        md: 'w-full max-h-[50vh] max-w-[50vw]',\n        lg: 'w-full max-h-[70vh] max-w-[70vw]',\n        xl: 'w-full max-h-[95vh] max-w-[95vw]',\n        unset: 'max-h-[95vh] max-w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'unset',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={cn(\n          modalVariants({\n            variant: size,\n          })\n        )}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAIA,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EAEA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV;QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW;AAAA,cACT,cAAc;AAAA,gBACZ,SAAS;AAAA,cAAA,CACV;AAAA,YACH;AAAA,YACA,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV;wBACV;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,6DACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/components/Navbar/Burger.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'react';
-
 interface BurgerProps extends HTMLAttributes<HTMLDivElement> {
     isActive?: boolean;
 }

package/dist/components/Navbar/DesktopNavbar.cjs

@@ -2,42 +2,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
-const components_Button_Button = require("../Button/Button.cjs");
-const components_Navbar_useNavigation = require("./useNavigation.cjs");
+const components_TabSelector_TabSelector = require("../TabSelector/TabSelector.cjs");
 const DesktopNavbar = ({
   logo,
   sections,
-  rightItems
+  rightItems,
+  selectedChoice
 }) => {
-  const { activeSection, onClickSection } = components_Navbar_useNavigation.useNavActions();
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
     logo,
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-      "div",
+      components_TabSelector_TabSelector.TabSelector,
       {
-        className: "text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide",
-        role: "tablist",
-        "aria-orientation": "horizontal",
-        "aria-multiselectable": "false",
-        children: sections?.map(({ id, url, label, title, onClick }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          components_Button_Button.Button,
-          {
-            role: "tab",
-            variant: "invisible-link",
-            color: "text",
-            "aria-selected": activeSection === id,
-            label,
-            onClick: (e) => {
-              onClickSection(id, url);
-              onClick(e);
-            },
-            children: title
-          },
-          id
-        ))
+        selectedChoice,
+        className: "text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6",
+        tabs: sections,
+        hoverable: true,
+        color: "text"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mr-4 flex w-full items-center justify-end gap-2 md:gap-4", children: rightItems })
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mr-4 flex items-center justify-end gap-2 md:gap-4", children: rightItems })
   ] });
 };
 exports.DesktopNavbar = DesktopNavbar;

package/dist/components/Navbar/DesktopNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.cjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\n\nimport { Button } from '../Button';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype DesktopNavbarProps = {\n  logo: ReactNode;\n  sections: NavSection[];\n  rightItems?: ReactNode;\n};\n\nexport const DesktopNavbar: FC<DesktopNavbarProps> = ({\n  logo,\n  sections,\n  rightItems,\n}) => {\n  const { activeSection, onClickSection } = useNavActions();\n\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n      <div\n        className=\"text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        aria-multiselectable=\"false\"\n      >\n        {sections?.map(({ id, url, label, title, onClick }) => (\n          <Button\n            key={id}\n            role=\"tab\"\n            variant=\"invisible-link\"\n            color=\"text\"\n            aria-selected={activeSection === id}\n            label={label}\n            onClick={(e) => {\n              onClickSection(id, url);\n              onClick(e);\n            }}\n          >\n            {title}\n          </Button>\n        ))}\n      </div>\n      <div className=\"mr-4 flex w-full items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["useNavActions","jsxs","jsx","Button"],"mappings":";;;;;;AAcO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,eAAe,eAAe,IAAIA,gCAAc,cAAA;AAGtD,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IACDC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,wBAAqB;AAAA,QAEpB,UAAA,UAAU,IAAI,CAAC,EAAE,IAAI,KAAK,OAAO,OAAO,QAAA,MACvCA,2BAAA,kBAAA;AAAA,UAACC,yBAAA;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,iBAAe,kBAAkB;AAAA,YACjC;AAAA,YACA,SAAS,CAAC,MAAM;AACd,6BAAe,IAAI,GAAG;AACtB,sBAAQ,CAAC;AAAA,YACX;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,UAXI;AAAA,QAAA,CAaR;AAAA,MAAA;AAAA,IACH;AAAA,IACCD,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,4DACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"DesktopNavbar.cjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx","TabSelector"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,2BAAA,kBAAA;AAAA,MAACC,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECD,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/components/Navbar/DesktopNavbar.d.ts

@@ -1,11 +1,11 @@
-import { FC, ReactNode } from 'react';
-import { NavSection } from '.';
-
-type DesktopNavbarProps = {
+import { ReactElement, ReactNode } from 'react';
+import { TabProps } from '../TabSelector';
+type DesktopNavbarProps<T extends TabProps> = {
     logo: ReactNode;
-    sections: NavSection[];
+    sections: ReactElement<T>[];
     rightItems?: ReactNode;
+    selectedChoice: T['key'];
 };
-export declare const DesktopNavbar: FC<DesktopNavbarProps>;
+export declare const DesktopNavbar: <T extends TabProps>({ logo, sections, rightItems, selectedChoice, }: DesktopNavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DesktopNavbar.d.ts.map

package/dist/components/Navbar/DesktopNavbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAEpC,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAsChD,CAAC"}
+{"version":3,"file":"DesktopNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAe,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,kBAAkB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,mDAK7C,kBAAkB,CAAC,CAAC,CAAC,4CAkBvB,CAAC"}

package/dist/components/Navbar/DesktopNavbar.mjs

@@ -1,41 +1,25 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
-import { Button } from "../Button/Button.mjs";
-import { useNavActions } from "./useNavigation.mjs";
+import { TabSelector } from "../TabSelector/TabSelector.mjs";
 const DesktopNavbar = ({
   logo,
   sections,
-  rightItems
+  rightItems,
+  selectedChoice
 }) => {
-  const { activeSection, onClickSection } = useNavActions();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: [
     logo,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+      TabSelector,
       {
-        className: "text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide",
-        role: "tablist",
-        "aria-orientation": "horizontal",
-        "aria-multiselectable": "false",
-        children: sections?.map(({ id, url, label, title, onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            role: "tab",
-            variant: "invisible-link",
-            color: "text",
-            "aria-selected": activeSection === id,
-            label,
-            onClick: (e) => {
-              onClickSection(id, url);
-              onClick(e);
-            },
-            children: title
-          },
-          id
-        ))
+        selectedChoice,
+        className: "text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6",
+        tabs: sections,
+        hoverable: true,
+        color: "text"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-4 flex w-full items-center justify-end gap-2 md:gap-4", children: rightItems })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-4 flex items-center justify-end gap-2 md:gap-4", children: rightItems })
   ] });
 };
 export {

package/dist/components/Navbar/DesktopNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, ReactNode } from 'react';\n\nimport { Button } from '../Button';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype DesktopNavbarProps = {\n  logo: ReactNode;\n  sections: NavSection[];\n  rightItems?: ReactNode;\n};\n\nexport const DesktopNavbar: FC<DesktopNavbarProps> = ({\n  logo,\n  sections,\n  rightItems,\n}) => {\n  const { activeSection, onClickSection } = useNavActions();\n\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n      <div\n        className=\"text-neutral dark:text-neutral-dark ml-[10vw] flex flex-row gap-6 tracking-wide\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        aria-multiselectable=\"false\"\n      >\n        {sections?.map(({ id, url, label, title, onClick }) => (\n          <Button\n            key={id}\n            role=\"tab\"\n            variant=\"invisible-link\"\n            color=\"text\"\n            aria-selected={activeSection === id}\n            label={label}\n            onClick={(e) => {\n              onClickSection(id, url);\n              onClick(e);\n            }}\n          >\n            {title}\n          </Button>\n        ))}\n      </div>\n      <div className=\"mr-4 flex w-full items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;AAcO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,eAAe,eAAe,IAAI,cAAc;AAGtD,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IACDC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,wBAAqB;AAAA,QAEpB,UAAA,UAAU,IAAI,CAAC,EAAE,IAAI,KAAK,OAAO,OAAO,QAAA,MACvCA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,iBAAe,kBAAkB;AAAA,YACjC;AAAA,YACA,SAAS,CAAC,MAAM;AACd,6BAAe,IAAI,GAAG;AACtB,sBAAQ,CAAC;AAAA,YACX;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,UAXI;AAAA,QAAA,CAaR;AAAA,MAAA;AAAA,IACH;AAAA,IACCA,kCAAA,IAAA,OAAA,EAAI,WAAU,4DACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { TabSelector, TabProps } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => {\n  return (\n    <nav className=\"bg-card/80 dark:bg-card-dark/80 sticky top-0 z-50 flex w-screen items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n      {logo}\n\n      <TabSelector\n        selectedChoice={selectedChoice}\n        className=\"text-neutral dark:text-neutral-dark ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[10vw] lg:gap-6\"\n        tabs={sections}\n        hoverable\n        color=\"text\"\n      />\n\n      <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n        {rightItems}\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6B;AAEzB,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,gJACZ,UAAA;AAAA,IAAA;AAAA,IAEDC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN,WAAS;AAAA,QACT,OAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAECA,kCAAA,IAAA,OAAA,EAAI,WAAU,qDACZ,UACH,YAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/Navbar/MobileNavbar.cjs

@@ -7,34 +7,19 @@ const require$$0 = require("react");
 const hooks_useScrollBlockage_index = require("../../hooks/useScrollBlockage/index.cjs");
 const hooks_useScrollDetection = require("../../hooks/useScrollDetection.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("../Auth/AuthProvider/index.cjs");
 require("../../libs/intlayer-api/auth.cjs");
 require("../../libs/intlayer-api/dictionary.cjs");
 require("../../libs/intlayer-api/organization.cjs");
 require("../../libs/intlayer-api/project.cjs");
+require("../../libs/intlayer-api/stripe.cjs");
 require("../../libs/intlayer-api/user.cjs");
+require("@intlayer/config/client");
+require("../Toaster/Toast.cjs");
 require("@intlayer/dictionaries-entry");
 require("deepmerge");
 const utils_cn = require("../../utils/cn.cjs");
 const components_MaxHeightSmoother_index = require("../MaxHeightSmoother/index.cjs");
 const components_Navbar_Burger = require("./Burger.cjs");
-const components_Navbar_useNavigation = require("./useNavigation.cjs");
-const sectionListItemVariants = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1e3, velocity: -100 }
-    }
-  },
-  closed: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1e3 }
-    }
-  }
-};
 const navVariants = {
   open: {
     transition: { staggerChildren: 0.07, delayChildren: 0.2 }
@@ -43,28 +28,6 @@ const navVariants = {
     transition: { staggerChildren: 0.05, staggerDirection: -1 }
   }
 };
-const MotionSection = framerMotion.m.div;
-const SectionList = ({
-  sections,
-  activeSection,
-  onClickSection
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-multiselectable": "false", children: sections?.map(({ id, label, url, title, onClick }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  MotionSection,
-  {
-    className: "hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition",
-    role: "tab",
-    id,
-    "aria-label": label,
-    onClick: (e) => {
-      onClickSection(id, url);
-      onClick?.(e);
-    },
-    variants: sectionListItemVariants,
-    "aria-selected": activeSection === id,
-    children: title
-  },
-  id
-)) });
 const bgStyle = "bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur";
 const MobileNavbar = ({
   logo,
@@ -77,7 +40,6 @@ const MobileNavbar = ({
   const [isHidden, setIsHidden] = require$$0.useState(false);
   const [isUnrolled, setIsUnrolled] = require$$0.useState(false);
   const navRef = require$$0.useRef(null);
-  const { activeSection, onClickSection } = components_Navbar_useNavigation.useNavActions();
   hooks_useScrollBlockage_index.useScrollBlockage({
     disableScroll: isUnrolled,
     key: "mobile_nav"
@@ -138,23 +100,9 @@ const MobileNavbar = ({
                 },
                 children: [
                   topChildren,
-                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: topSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: bottomSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    )
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-center", children: [
+                    topSections,
+                    bottomSections
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3", children: bottomChildren })
                 ]

package/dist/components/Navbar/MobileNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.cjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type FC, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { Burger } from './Burger';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype MobileNavbarProps = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: NavSection[];\n  bottomChildren?: ReactNode;\n  bottomSections?: NavSection[];\n  rightItems?: ReactNode;\n};\n\ntype SectionListProps = {\n  sections: NavSection[];\n  activeSection: string | null;\n  onClickSection: (id: string, url?: string) => void;\n};\n\nconst sectionListItemVariants: Variants = {\n  open: {\n    y: 0,\n    opacity: 1,\n    transition: {\n      y: { stiffness: 1000, velocity: -100 },\n    },\n  },\n  closed: {\n    y: 50,\n    opacity: 0,\n    transition: {\n      y: { stiffness: 1000 },\n    },\n  },\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst MotionSection = m.div;\n\nconst SectionList: FC<SectionListProps> = ({\n  sections,\n  activeSection,\n  onClickSection,\n}) => (\n  <div role=\"tablist\" aria-orientation=\"vertical\" aria-multiselectable=\"false\">\n    {sections?.map(({ id, label, url, title, onClick }) => (\n      <MotionSection\n        className=\"hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition\"\n        role=\"tab\"\n        key={id}\n        id={id}\n        aria-label={label}\n        onClick={(e) => {\n          onClickSection(id, url);\n          onClick?.(e);\n        }}\n        variants={sectionListItemVariants}\n        aria-selected={activeSection === id}\n      >\n        {title}\n      </MotionSection>\n    ))}\n  </div>\n);\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n// css`\n//   -webkit-backdrop-filter: var(--tw-backdrop-blur)\n//     var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)\n//     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)\n//     var(--tw-backdrop-invert) var(--tw-backdrop-opacity)\n//     var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n// `,\n\nexport const MobileNavbar: FC<MobileNavbarProps> = ({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  const { activeSection, onClickSection } = useNavActions();\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-between\">\n              <SectionList\n                sections={topSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n              <SectionList\n                sections={bottomSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["m","jsx","useState","useRef","useNavActions","useScrollBlockage","useScrollDetection","jsxs","cn","Burger","isUnrolled","MaxHeightSmoother"],"mappings":"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"}
+{"version":3,"file":"MobileNavbar.cjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\ntype MobileNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: ReactElement<T>[];\n  bottomChildren?: ReactNode;\n  bottomSections?: ReactElement<T>[];\n  rightItems?: ReactNode;\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["useState","useRef","useScrollBlockage","useScrollDetection","jsxs","cn","jsx","Burger","isUnrolled","MaxHeightSmoother","m"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAI;AAAA,EAC1D;AAAA,EACA,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAG;AAAA,EAC5D;AACF;AAEA,MAAM,UACJ;AAEK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAIA,oBAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAIA,oBAAkB,KAAK;AAErD,QAAA,SAASC,kBAAuB,IAAI;AAExBC,kDAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEkBC,8CAAA;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAGlE,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MACnC;AAAA,MACA,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAD,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,gBAACE,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,8CACZ,UACH,YAAA;AAAA,gBAEC,kBACCA,2BAAA,kBAAA;AAAA,kBAACC,yBAAA;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAC1D;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAF,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAA;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEA,UAACC,2BAAA,kBAAA,IAAAG,sDAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAL,2BAAA,kBAAA;AAAA,cAACM,aAAAA,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBACvC;AAAA,gBAEC,UAAA;AAAA,kBAAA;AAAA,kBACDN,2BAAAA,kBAAAA,KAAC,OAAI,EAAA,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAECE,2BAAA,kBAAA,IAAA,OAAA,EAAI,WAAU,gFACZ,UACH,gBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/Navbar/MobileNavbar.d.ts

@@ -1,14 +1,13 @@
-import { FC, ReactNode } from 'react';
-import { NavSection } from '.';
-
-type MobileNavbarProps = {
+import { ReactElement, ReactNode } from 'react';
+import { TabProps } from '../TabSelector';
+type MobileNavbarProps<T extends TabProps> = {
     logo: ReactNode;
     topChildren?: ReactNode;
-    topSections?: NavSection[];
+    topSections?: ReactElement<T>[];
     bottomChildren?: ReactNode;
-    bottomSections?: NavSection[];
+    bottomSections?: ReactElement<T>[];
     rightItems?: ReactNode;
 };
-export declare const MobileNavbar: FC<MobileNavbarProps>;
+export declare const MobileNavbar: <T extends TabProps>({ logo, topChildren, topSections, bottomChildren, bottomSections, rightItems, }: MobileNavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MobileNavbar.d.ts.map

package/dist/components/Navbar/MobileNavbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,UAAU,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAwEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAgG9C,CAAC"}
+{"version":3,"file":"MobileNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,KAAK,iBAAiB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC3C,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAcF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,QAAQ,mFAO5C,iBAAiB,CAAC,CAAC,CAAC,4CAgFtB,CAAC"}

package/dist/components/Navbar/MobileNavbar.mjs

@@ -5,34 +5,19 @@ import { useState, useRef } from "react";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
 import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "../Auth/AuthProvider/index.mjs";
 import "../../libs/intlayer-api/auth.mjs";
 import "../../libs/intlayer-api/dictionary.mjs";
 import "../../libs/intlayer-api/organization.mjs";
 import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/stripe.mjs";
 import "../../libs/intlayer-api/user.mjs";
+import "@intlayer/config/client";
+import "../Toaster/Toast.mjs";
 import "@intlayer/dictionaries-entry";
 import "deepmerge";
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
-import { useNavActions } from "./useNavigation.mjs";
-const sectionListItemVariants = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1e3, velocity: -100 }
-    }
-  },
-  closed: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1e3 }
-    }
-  }
-};
 const navVariants = {
   open: {
     transition: { staggerChildren: 0.07, delayChildren: 0.2 }
@@ -41,28 +26,6 @@ const navVariants = {
     transition: { staggerChildren: 0.05, staggerDirection: -1 }
   }
 };
-const MotionSection = m.div;
-const SectionList = ({
-  sections,
-  activeSection,
-  onClickSection
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-multiselectable": "false", children: sections?.map(({ id, label, url, title, onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  MotionSection,
-  {
-    className: "hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition",
-    role: "tab",
-    id,
-    "aria-label": label,
-    onClick: (e) => {
-      onClickSection(id, url);
-      onClick?.(e);
-    },
-    variants: sectionListItemVariants,
-    "aria-selected": activeSection === id,
-    children: title
-  },
-  id
-)) });
 const bgStyle = "bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur";
 const MobileNavbar = ({
   logo,
@@ -75,7 +38,6 @@ const MobileNavbar = ({
   const [isHidden, setIsHidden] = useState(false);
   const [isUnrolled, setIsUnrolled] = useState(false);
   const navRef = useRef(null);
-  const { activeSection, onClickSection } = useNavActions();
   useScrollBlockage({
     disableScroll: isUnrolled,
     key: "mobile_nav"
@@ -136,23 +98,9 @@ const MobileNavbar = ({
                 },
                 children: [
                   topChildren,
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: topSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      SectionList,
-                      {
-                        sections: bottomSections,
-                        activeSection,
-                        onClickSection
-                      }
-                    )
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-center", children: [
+                    topSections,
+                    bottomSections
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3", children: bottomChildren })
                 ]

package/dist/components/Navbar/MobileNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type FC, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { Burger } from './Burger';\nimport { useNavActions } from './useNavigation';\nimport type { NavSection } from '.';\n\ntype MobileNavbarProps = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: NavSection[];\n  bottomChildren?: ReactNode;\n  bottomSections?: NavSection[];\n  rightItems?: ReactNode;\n};\n\ntype SectionListProps = {\n  sections: NavSection[];\n  activeSection: string | null;\n  onClickSection: (id: string, url?: string) => void;\n};\n\nconst sectionListItemVariants: Variants = {\n  open: {\n    y: 0,\n    opacity: 1,\n    transition: {\n      y: { stiffness: 1000, velocity: -100 },\n    },\n  },\n  closed: {\n    y: 50,\n    opacity: 0,\n    transition: {\n      y: { stiffness: 1000 },\n    },\n  },\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst MotionSection = m.div;\n\nconst SectionList: FC<SectionListProps> = ({\n  sections,\n  activeSection,\n  onClickSection,\n}) => (\n  <div role=\"tablist\" aria-orientation=\"vertical\" aria-multiselectable=\"false\">\n    {sections?.map(({ id, label, url, title, onClick }) => (\n      <MotionSection\n        className=\"hover:text-primary aria-selected:text-primary w-full cursor-pointer p-3 text-center transition\"\n        role=\"tab\"\n        key={id}\n        id={id}\n        aria-label={label}\n        onClick={(e) => {\n          onClickSection(id, url);\n          onClick?.(e);\n        }}\n        variants={sectionListItemVariants}\n        aria-selected={activeSection === id}\n      >\n        {title}\n      </MotionSection>\n    ))}\n  </div>\n);\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n// css`\n//   -webkit-backdrop-filter: var(--tw-backdrop-blur)\n//     var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)\n//     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)\n//     var(--tw-backdrop-invert) var(--tw-backdrop-opacity)\n//     var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n// `,\n\nexport const MobileNavbar: FC<MobileNavbarProps> = ({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  const { activeSection, onClickSection } = useNavActions();\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-between\">\n              <SectionList\n                sections={topSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n              <SectionList\n                sections={bottomSections}\n                activeSection={activeSection}\n                onClickSection={onClickSection}\n              />\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsx","jsxs","isUnrolled"],"mappings":"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"}
+{"version":3,"file":"MobileNavbar.mjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\ntype MobileNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: ReactElement<T>[];\n  bottomChildren?: ReactNode;\n  bottomSections?: ReactElement<T>[];\n  rightItems?: ReactNode;\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst bgStyle =\n  'bg-card/95 dark:bg-card-dark/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col  transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-[10vw] px-4 py-3\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text dark:text-text-dark flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["jsxs","jsx","isUnrolled"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAI;AAAA,EAC1D;AAAA,EACA,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAG;AAAA,EAC5D;AACF;AAEA,MAAM,UACJ;AAEK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAErD,QAAA,SAAS,OAAuB,IAAI;AAExB,oBAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEkB,qBAAA;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAGlE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MACnC;AAAA,MACA,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,kCAAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,gBAACC,kCAAA,IAAA,OAAA,EAAI,WAAU,8CACZ,UACH,YAAA;AAAA,gBAEC,kBACCA,kCAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAC1D;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEAD,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEA,UAACA,kCAAA,IAAA,mBAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAD,kCAAA;AAAA,cAAC,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBACvC;AAAA,gBAEC,UAAA;AAAA,kBAAA;AAAA,kBACDA,kCAAAA,KAAC,OAAI,EAAA,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAECC,kCAAA,IAAA,OAAA,EAAI,WAAU,gFACZ,UACH,gBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAEJ;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Navbar/index.cjs

@@ -7,12 +7,14 @@ require("react");
 require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 const hooks_useIsMounted = require("../../hooks/useIsMounted.cjs");
 require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("../Auth/AuthProvider/index.cjs");
 require("../../libs/intlayer-api/auth.cjs");
 require("../../libs/intlayer-api/dictionary.cjs");
 require("../../libs/intlayer-api/organization.cjs");
 require("../../libs/intlayer-api/project.cjs");
+require("../../libs/intlayer-api/stripe.cjs");
 require("../../libs/intlayer-api/user.cjs");
+require("@intlayer/config/client");
+require("../Toaster/Toast.cjs");
 require("@intlayer/dictionaries-entry");
 require("deepmerge");
 const components_Navbar_DesktopNavbar = require("./DesktopNavbar.cjs");
@@ -25,7 +27,8 @@ const Navbar = ({
   mobileBottomChildren,
   mobileBottomSections = [],
   rightItemsDesktop,
-  rightItemsMobile
+  rightItemsMobile,
+  selectedChoice
 }) => {
   const { isMobile } = hooks_useDevice.useDevice();
   const isMoUnted = hooks_useIsMounted.useIsMounted();
@@ -45,7 +48,8 @@ const Navbar = ({
     {
       sections: desktopSections,
       rightItems: rightItemsDesktop,
-      logo
+      logo,
+      selectedChoice
     }
   );
 };