@levo-so/blocks 0.1.59 → 0.1.61

package/src/blocks/navbar/navbar-1.schema.ts

@@ -1,4 +1,5 @@
 import type { IBlock } from "@levo-so/studio";
+
 const DUMMY_ICON = {
   kind: "icon",
   data: {
@@ -17,20 +18,13 @@ const MEDIA = {
     kind: "image",
     mimetype: "image/png",
     srcset: {
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
       path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
     },
   },
@@ -366,12 +360,10 @@ export const Navbar1: IBlock = {
           width: "100%",
           "max-width": "1200px",
           "border-radius": "base",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "background-color": "rgba(255,255,255,0.8)",
           "backdrop-filter": "blur(20px)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
           "padding-top": "sm",
           "padding-bottom": "sm",
           tablet: {
@@ -534,10 +526,8 @@ export const Navbar1: IBlock = {
           top: "70px",
           left: "50%",
           width: "98%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
         },
         "mobile-nav-menu_levoGroup": {
           display: "flex",
@@ -671,8 +661,7 @@ export const Navbar1: IBlock = {
           right: "0",
           "z-index": 30,
           width: "100%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "background-color": "rgba(255,255,255,0.8)",
           "backdrop-filter": "blur(20px)",
           "padding-top": "lg",
@@ -830,10 +819,8 @@ export const Navbar1: IBlock = {
           top: "85px",
           left: "50%",
           width: "98%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
         },
         "mobile-nav-menu_levoGroup": {
           display: "flex",

package/src/blocks/navbar/navbar-1.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
 import { cn } from "@levo-so/react";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
   Button,
+  Container,
+  Icon,
   Image,
-  PopoverRoot,
   PopoverContent,
+  PopoverRoot,
   PopoverTrigger,
-  Typography,
   Section,
-  Container,
-  Icon,
+  Typography,
   UserMenu,
 } from "@levo-so/studio";
 import { ChevronDown, Menu, X } from "lucide-react";
+import React, { useEffect, useState } from "react";
 
 import type { INavbar1Content } from "./navbar-1.schema";
 
@@ -24,8 +24,7 @@ const DropdownNavigationItem: React.FC<{
   navItem: any;
   index: number;
 }> = ({ navItem, index }) => {
-  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] =
-    useState<boolean>(false);
+  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState<boolean>(false);
 
   const subItems = navItem?.["sub-items"] as Array<any>;
 
@@ -40,9 +39,7 @@ const DropdownNavigationItem: React.FC<{
         onMouseEnter={() => setIsDropdownPopoverOpen(true)}
         data-levo_group_item
       >
-        <Typography
-          elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`}
-        />
+        <Typography elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
         <ChevronDown
           aria-hidden="true"
           style={{
@@ -78,11 +75,9 @@ const DropdownNavigationItem: React.FC<{
                 {subItem?.["sub-item-icon"] && (
                   <Box
                     elementKey={`desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`}
-                    className="group-hover:bg-opacity-80 group-hover:bg-slate-200"
+                    className="group-hover:bg-slate-200 group-hover:bg-opacity-80"
                   >
-                    <Icon
-                      elementKey={`desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon`}
-                    />
+                    <Icon elementKey={`desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon`} />
                   </Box>
                 )}
                 <Box
@@ -108,19 +103,13 @@ const DesktopNavItem: React.FC<{
   index: number;
 }> = ({ index, navItem }) => {
   const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown =
-    navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
 
   return (
     <>
-      {isNavItemDropdown && (
-        <DropdownNavigationItem navItem={navItem} index={index} />
-      )}
+      {isNavItemDropdown && <DropdownNavigationItem navItem={navItem} index={index} />}
       {!isNavItemDropdown && (
-        <Typography
-          data-levo_group_item
-          elementKey={`desktop-nav-menu.${index}.nav-item-title`}
-        />
+        <Typography data-levo_group_item elementKey={`desktop-nav-menu.${index}.nav-item-title`} />
       )}
     </>
   );
@@ -132,13 +121,7 @@ const DesktopNavigationMenu: React.FC<{
   return (
     <Box elementKey="desktop-nav-menu_levoGroup" data-levo_group>
       {navItems?.map((item: any, index: number) => {
-        return (
-          <DesktopNavItem
-            navItem={item}
-            index={index}
-            key={`desktop-nav-menu.${index}`}
-          />
-        );
+        return <DesktopNavItem navItem={item} index={index} key={`desktop-nav-menu.${index}`} />;
       })}
     </Box>
   );
@@ -159,9 +142,7 @@ const DropdownNavigationItemMobile: React.FC<{
         elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
         onClick={() => setIsDropdownOpen((prev) => !prev)}
       >
-        <Typography
-          elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`}
-        />
+        <Typography elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
         <ChevronDown
           aria-hidden="true"
           style={{
@@ -179,25 +160,20 @@ const DropdownNavigationItemMobile: React.FC<{
         />
       </Box>
       {isDropdownOpen && (
-        <Box
-          elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`}
-          data-levo_group
-        >
+        <Box elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`} data-levo_group>
           {subItems && Array?.isArray(subItems)
             ? subItems?.map((subItem: any, idx: number) => {
                 return (
                   <Box
                     key={`subItem_${index}`}
                     elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
-                    className={cn(
-                      "group hover:bg-opacity-50 hover:bg-slate-100",
-                    )}
+                    className={cn("group hover:bg-slate-100 hover:bg-opacity-50")}
                     data-levo_group_item
                   >
                     {subItem?.["sub-item-icon"] && (
                       <Box
                         elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`}
-                        className="bg-opacity-60 group-hover:bg-opacity-80 group-hover:bg-slate-200"
+                        className="bg-opacity-60 group-hover:bg-slate-200 group-hover:bg-opacity-80"
                       >
                         <Icon
                           elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon`}
@@ -237,17 +213,12 @@ const MobileNavItem: React.FC<{
   setIsOpen: (value: boolean) => void;
 }> = ({ navItem, index, setIsOpen }) => {
   const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown =
-    navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
 
   return (
     <React.Fragment>
       {isNavItemDropdown && (
-        <DropdownNavigationItemMobile
-          navItem={navItem}
-          setIsOpen={setIsOpen}
-          index={index}
-        />
+        <DropdownNavigationItemMobile navItem={navItem} setIsOpen={setIsOpen} index={index} />
       )}
       {!isNavItemDropdown && (
         <Box
@@ -310,9 +281,7 @@ const MobileNavigationSheet: React.FC<{
   );
 };
 
-const Navbar1: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({
-  content,
-}) => {
+const Navbar1: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({ content }) => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -344,17 +313,12 @@ const Navbar1: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({
           className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black/20"
         />
       )}
-      <Section
-        elementKey="layout"
-        className={cn(isScrolled ? "top-2" : "top-8")}
-      >
+      <Section elementKey="layout" className={cn(isScrolled ? "top-2" : "top-8")}>
         <Container elementKey="nav-container">
           <Image elementKey="nav-logo" alt="Logo" />
-          {desktopNavLinks &&
-            Array?.isArray(desktopNavLinks) &&
-            desktopNavLinks?.length > 0 && (
-              <DesktopNavigationMenu navItems={desktopNavLinks} />
-            )}
+          {desktopNavLinks && Array?.isArray(desktopNavLinks) && desktopNavLinks?.length > 0 && (
+            <DesktopNavigationMenu navItems={desktopNavLinks} />
+          )}
           <MobileNavigationSheet
             navItems={mobileNavLinks || []}
             content={content}

package/src/blocks/navbar/navbar-2.schema.ts

@@ -18,20 +18,13 @@ const MEDIA = {
     kind: "image",
     mimetype: "image/png",
     srcset: {
-      "1080w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
-      "1200w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
-      "1920w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
-      "320w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
-      "640w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
-      "750w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
-      "828w":
-        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      "1080w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w": "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
       path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
     },
   },
@@ -456,12 +449,10 @@ export const Navbar2: IBlock = {
           width: "100%",
           "max-width": "1200px",
           "border-radius": "base",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "background-color": "rgba(255,255,255,0.8)",
           "backdrop-filter": "blur(20px)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
           "padding-top": "sm",
           "padding-bottom": "sm",
           tablet: {
@@ -718,10 +709,8 @@ export const Navbar2: IBlock = {
           top: "70px",
           left: "50%",
           width: "98%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
         },
         "mobile-nav-menu_levoGroup": {
           display: "flex",
@@ -848,8 +837,7 @@ export const Navbar2: IBlock = {
           right: "0",
           "z-index": 30,
           width: "100%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "background-color": "rgba(255,255,255,0.8)",
           "backdrop-filter": "blur(20px)",
           "padding-top": "lg",
@@ -1101,10 +1089,8 @@ export const Navbar2: IBlock = {
           top: "70px",
           left: "50%",
           width: "98%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
         },
         "mobile-nav-menu_levoGroup": {
           display: "flex",

package/src/blocks/navbar/navbar-2.tsx

@@ -1,21 +1,21 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
 import { cn } from "@levo-so/react";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
   Button,
-  Typography,
+  Container,
+  Icon,
   Image,
-  PopoverRoot,
   PopoverContent,
+  PopoverRoot,
   PopoverTrigger,
-  Container,
   Section,
-  Icon,
+  Typography,
 } from "@levo-so/studio";
 import { ChevronDown, Menu, X } from "lucide-react";
+import React, { useEffect, useState } from "react";
 
 import type { INavbar1Content } from "./navbar-1.schema";
 
@@ -24,8 +24,7 @@ const DropdownNavigationItem: React.FC<{
   index: number;
   prefixKey: string;
 }> = ({ navItem, index, prefixKey }) => {
-  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] =
-    useState<boolean>(false);
+  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState<boolean>(false);
 
   const subItems = navItem?.["sub-items"] as Array<any>;
 
@@ -39,9 +38,7 @@ const DropdownNavigationItem: React.FC<{
         onMouseEnter={() => setIsDropdownPopoverOpen(true)}
         data-levo_group_item
       >
-        <Typography
-          elementKey={`${prefixKey}.${index}.nav-item-dropdown-trigger-title`}
-        />
+        <Typography elementKey={`${prefixKey}.${index}.nav-item-dropdown-trigger-title`} />
         <ChevronDown
           aria-hidden="true"
           style={{
@@ -75,7 +72,7 @@ const DropdownNavigationItem: React.FC<{
                 {subItem?.["sub-item-icon"] && (
                   <Box
                     elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`}
-                    className="group-hover:bg-opacity-80 group-hover:bg-slate-200"
+                    className="group-hover:bg-slate-200 group-hover:bg-opacity-80"
                   >
                     <Icon
                       elementKey={`left-desktop-nav-menu.${index}.sub-items.${idx}.sub-item-icon`}
@@ -106,23 +103,15 @@ const DesktopNavItem: React.FC<{
   prefixKey: string;
 }> = ({ index, navItem, prefixKey }) => {
   const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown =
-    navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
 
   return (
     <>
       {isNavItemDropdown && (
-        <DropdownNavigationItem
-          navItem={navItem}
-          index={index}
-          prefixKey={prefixKey}
-        />
+        <DropdownNavigationItem navItem={navItem} index={index} prefixKey={prefixKey} />
       )}
       {!isNavItemDropdown && (
-        <Typography
-          data-levo_group_item
-          elementKey={`${prefixKey}.${index}.nav-item-title`}
-        />
+        <Typography data-levo_group_item elementKey={`${prefixKey}.${index}.nav-item-title`} />
       )}
     </>
   );
@@ -163,9 +152,7 @@ const DropdownNavigationItemMobile: React.FC<{
         elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
         onClick={() => setIsDropdownOpen((prev) => !prev)}
       >
-        <Typography
-          elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`}
-        />
+        <Typography elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
         <ChevronDown
           aria-hidden="true"
           style={{
@@ -183,25 +170,20 @@ const DropdownNavigationItemMobile: React.FC<{
         />
       </Box>
       {isDropdownOpen && (
-        <Box
-          elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`}
-          data-levo_group
-        >
+        <Box elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`} data-levo_group>
           {subItems && Array?.isArray(subItems)
             ? subItems?.map((subItem: any, idx: number) => {
                 return (
                   <Box
                     key={`subItem_${index}`}
                     elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
-                    className={cn(
-                      "group hover:bg-opacity-50 hover:bg-slate-100",
-                    )}
+                    className={cn("group hover:bg-slate-100 hover:bg-opacity-50")}
                     data-levo_group_item
                   >
                     {subItem?.["sub-item-icon"] && (
                       <Box
                         elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon-container`}
-                        className="bg-opacity-60 group-hover:bg-opacity-80 group-hover:bg-slate-200"
+                        className="bg-opacity-60 group-hover:bg-slate-200 group-hover:bg-opacity-80"
                       >
                         <Icon
                           elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-icon`}
@@ -241,17 +223,12 @@ const MobileNavItem: React.FC<{
   setIsOpen: (value: boolean) => void;
 }> = ({ navItem, index, setIsOpen }) => {
   const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown =
-    navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
 
   return (
     <React.Fragment>
       {isNavItemDropdown && (
-        <DropdownNavigationItemMobile
-          navItem={navItem}
-          setIsOpen={setIsOpen}
-          index={index}
-        />
+        <DropdownNavigationItemMobile navItem={navItem} setIsOpen={setIsOpen} index={index} />
       )}
       {!isNavItemDropdown && (
         <Box
@@ -314,9 +291,7 @@ const MobileNavigationSheet: React.FC<{
   );
 };
 
-const Navbar2: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({
-  content,
-}) => {
+const Navbar2: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({ content }) => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -349,10 +324,7 @@ const Navbar2: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({
           className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black/20"
         />
       )}
-      <Section
-        elementKey="layout"
-        className={cn(isScrolled ? "top-2" : "top-8")}
-      >
+      <Section elementKey="layout" className={cn(isScrolled ? "top-2" : "top-8")}>
         <Container elementKey="nav-container">
           {leftDesktopNavLinks &&
             Array?.isArray(leftDesktopNavLinks) &&
@@ -374,15 +346,13 @@ const Navbar2: React.FC<ILevoBlockBaseProps<INavbar1Content>> = ({
               )}
             {content?.["desktop-cta-group"]?.length > 0 && (
               <Box elementKey="desktop-cta-group_levoGroup" data-levo_group>
-                {content?.["desktop-cta-group"]?.map(
-                  (_: any, index: number) => (
-                    <Button
-                      key={`desktop-cta-group.${index}.cta`}
-                      elementKey={`desktop-cta-group.${index}.cta`}
-                      data-levo_group_item
-                    />
-                  ),
-                )}
+                {content?.["desktop-cta-group"]?.map((_: any, index: number) => (
+                  <Button
+                    key={`desktop-cta-group.${index}.cta`}
+                    elementKey={`desktop-cta-group.${index}.cta`}
+                    data-levo_group_item
+                  />
+                ))}
               </Box>
             )}
           </Box>

package/src/blocks/navbar/navbar-3.schema.ts

@@ -9,20 +9,13 @@ const DEFAULT_CONTENT = {
     kind: "image",
     location: "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t.png",
     srcset: {
-      "1080w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1080w.webp",
-      "1200w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1200w.webp",
-      "1920w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1920w.webp",
-      "320w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-320w.webp",
-      "640w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-640w.webp",
-      "750w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-750w.webp",
-      "828w":
-        "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-828w.webp",
+      "1080w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1080w.webp",
+      "1200w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1200w.webp",
+      "1920w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1920w.webp",
+      "320w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-320w.webp",
+      "640w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-640w.webp",
+      "750w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-750w.webp",
+      "828w": "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-828w.webp",
       path: "https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-320w.webp 320w, https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-750w.webp 750w, https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-828w.webp 828w, https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-640w.webp 640w, https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1080w.webp 1080w, https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1200w.webp 1200w, https://static.levostg.online/W6OEVMW8/image-oiljyrpB6IN9t-1920w.webp 1920w",
     },
     mimetype: "image/png",
@@ -808,12 +801,10 @@ export const Navbar3: IBlock = {
           top: "0",
           "z-index": 30,
           width: "100%",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "background-color": "rgba(255,255,255,0.8)",
           "backdrop-filter": "blur(20px)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
         },
         "nav-container": {
           display: "flex",
@@ -3940,10 +3931,8 @@ export const Navbar3: IBlock = {
           "border-radius": "xl",
           width: "95%",
           "background-color": "#ffffff",
-          "box-shadow":
-            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-          transform:
-            "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          transform: "translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",
           mobile: {
             width: "100%",
             "border-radius": "none",