@bigbinary/neeto-site-blocks 2.0.9 → 2.0.10

package/dist/index.js

@@ -7425,7 +7425,7 @@ var Dropdown = function Dropdown(_ref) {
     paddingHorizontal: paddingHorizontal,
     totalLength: totalLength,
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex cursor-pointer items-center gap-x-2 lg:h-full lg:justify-center lg:gap-x-0",
+      className: "flex cursor-pointer items-center justify-between gap-x-2 lg:h-full lg:justify-center lg:gap-x-0",
       id: "dropdown-".concat(index),
       onClick: function onClick() {
         return isSmallerScreen && setIsOpen(!isOpen);
@@ -7441,6 +7441,7 @@ var Dropdown = function Dropdown(_ref) {
         label: label,
         action: isLargerScreen ? "external" : "",
         as: "h6",
+        className: "[&::before]:hidden md:[&::before]:block",
         id: "header-with-dropdown-links-link-".concat(index, "-link"),
         style: design
       }, otherProps)), /*#__PURE__*/jsx(motion.div, {
@@ -7473,7 +7474,9 @@ var Dropdown = function Dropdown(_ref) {
       },
       children: renderDropdownItems("px-4 py-2 hover:bg-gray-100 last:rounded-b-md")
     }), /*#__PURE__*/jsx("div", {
-      className: "block lg:hidden lg:pr-8",
+      className: classnames({
+        "mt-4 block bg-gray-100/70 p-2 lg:hidden": isOpen
+      }),
       children: /*#__PURE__*/jsx(AnimatePresence, {
         children: isOpen && /*#__PURE__*/jsx(motion.div, {
           animate: {
@@ -7492,7 +7495,7 @@ var Dropdown = function Dropdown(_ref) {
           transition: {
             duration: 0.3
           },
-          children: renderDropdownItems("rounded-md px-4 py-2 hover:bg-gray-100")
+          children: renderDropdownItems("rounded-md p-2 hover:bg-white text-sm")
         })
       })
     })]
@@ -16254,6 +16257,7 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
         className: "col-span-8 col-start-5 flex justify-end gap-x-2 sm:col-span-4 sm:col-start-9 lg:col-span-3 lg:col-start-10",
         children: buttons.map(function (button, index) {
           return /*#__PURE__*/jsx(Button$1, _objectSpread$9({
+            className: "flex-shrink-0",
             id: "header-with-buttons-buttons-".concat(index, "-button"),
             style: button.type === "primary" ? design.primaryButtons : design.secondaryButtons
           }, _objectSpread$9(_objectSpread$9({
@@ -16261,33 +16265,68 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
           }, button), otherProps)), getUniqueKey(button.label, index));
         })
       }), /*#__PURE__*/jsx("button", {
-        className: classnames("col-span-1 col-start-1 flex items-center transition-all lg:hidden", {
-          "rotate-90 transform": isMenuOpen
-        }),
+        className: "col-span-1 col-start-1 flex items-center transition-all lg:hidden",
         onClick: function onClick() {
           return setIsMenuOpen(function (open) {
             return !open;
           });
         },
-        children: !isMenuOpen ? /*#__PURE__*/jsx(Menu, {
-          className: "fadeIn",
-          fill: design.hamburgerMenu.color,
-          size: 32
-        }) : /*#__PURE__*/jsx(Close, {
+        children: /*#__PURE__*/jsx(Menu, {
           className: "fadeIn",
           fill: design.hamburgerMenu.color,
           size: 32
         })
-      }), isMenuOpen && /*#__PURE__*/jsx("div", {
-        className: "fadeIn col-span-12 col-start-1 my-6 flex flex-col gap-y-6 lg:hidden",
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      role: "button",
+      tabIndex: isMenuOpen ? 0 : -1,
+      className: classnames("fixed inset-0 z-[999] bg-black/60 transition-opacity duration-300 lg:hidden", isMenuOpen ? "opacity-70" : "pointer-events-none opacity-0"),
+      onClick: function onClick() {
+        return setIsMenuOpen(false);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames("fixed inset-y-0 start-0 z-[999] flex flex-col overflow-x-hidden shadow-md transition-all duration-500 ease-in-out lg:hidden", isMenuOpen ? "w-[80%]" : "w-0"),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsx(Link, _objectSpread$9(_objectSpread$9({
+          action: properties.logo.action,
+          to: properties.logo.to
+        }, otherProps), {}, {
+          children: /*#__PURE__*/jsx(StyledImage$1, {
+            image: image,
+            priority: true,
+            alt: properties.logo.alt,
+            className: "sm:max-h-18 max-h-16 lg:max-h-20",
+            design: design.logo,
+            src: properties.logo.src
+          })
+        })), /*#__PURE__*/jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsMenuOpen(false);
+          },
+          children: /*#__PURE__*/jsx(Close, {
+            className: "fadeIn",
+            fill: design.hamburgerMenu.color,
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/jsx("nav", {
+        className: classnames("flex flex-grow flex-col overflow-y-auto px-6 pb-6 transition-opacity delay-200 duration-300", isMenuOpen ? "opacity-100" : "opacity-0"),
         children: properties.links.map(function (button, index) {
           return /*#__PURE__*/jsx(Link, _objectSpread$9({
-            className: "w-fit",
+            className: "w-full py-4 hover:opacity-80 [&::before]:!bottom-0 [&::before]:!w-full [&::before]:!opacity-40",
             id: "header-with-buttons-".concat(index, "-link"),
             isHighlighted: isLinkHighlighted(button.to, currentPath),
             style: mergeRight(design.links, {
               fontSize: "1em",
-              fontWeight: "500"
+              fontWeight: "600"
             })
           }, _objectSpread$9(_objectSpread$9({
             index: index,
@@ -16389,39 +16428,87 @@ var HeaderWithDropdownLinks = function HeaderWithDropdownLinks(_ref) {
             }, otherProps)), getUniqueKey(dropdownLink.label, dropdownLink.to, index));
           })
         }), /*#__PURE__*/jsx("button", {
-          className: classnames("col-span-1 col-start-1 flex items-center transition-all lg:hidden", {
-            "rotate-90 transform": isMenuOpen
-          }),
+          className: "col-span-1 col-start-1 flex items-center transition-all lg:hidden",
           onClick: function onClick() {
             return setIsMenuOpen(function (open) {
               return !open;
             });
           },
-          children: !isMenuOpen ? /*#__PURE__*/jsx(Menu, {
+          children: /*#__PURE__*/jsx(Menu, {
             className: "fadeIn",
             fill: design.hamburgerMenu.color,
             size: 32
-          }) : /*#__PURE__*/jsx(Close, {
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx("div", {
+      role: "button",
+      tabIndex: isMenuOpen ? 0 : -1,
+      className: classnames("fixed inset-0 z-[999] bg-black/60 transition-opacity duration-300 lg:hidden", isMenuOpen ? "opacity-70" : "pointer-events-none opacity-0"),
+      onClick: function onClick() {
+        return setIsMenuOpen(false);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames("fixed inset-y-0 start-0 z-[999] flex flex-col overflow-x-hidden shadow-md transition-all duration-500 ease-in-out lg:hidden", isMenuOpen ? "w-[80%]" : "w-0"),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsxs(Link, _objectSpread$8(_objectSpread$8({
+          action: properties.logo.action,
+          className: "flex w-full gap-x-2",
+          to: properties.logo.to
+        }, otherProps), {}, {
+          children: [/*#__PURE__*/jsx(StyledImage$1, {
+            image: image,
+            priority: true,
+            alt: properties.logo.alt,
+            className: "sm:max-h-18 max-h-16 lg:max-h-20",
+            design: design.logo,
+            disableButtonAndLinks: otherProps.disableButtonAndLinks,
+            id: "header-with-dropdown-links-logo",
+            isAddNewPane: otherProps.isAddNewPane,
+            src: properties.logo.src
+          }), /*#__PURE__*/jsx(Typography$1, _objectSpread$8(_objectSpread$8({
+            component: "p",
+            id: "header-with-dropdown-links-logo-title",
+            style: design.logoTitle,
+            className: classnames({
+              "hidden sm:flex": properties.logo.src
+            })
+          }, otherProps), {}, {
+            children: properties.logo.title
+          }))]
+        })), /*#__PURE__*/jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsMenuOpen(false);
+          },
+          children: /*#__PURE__*/jsx(Close, {
             className: "fadeIn",
             fill: design.hamburgerMenu.color,
             size: 32
           })
-        }), isMenuOpen && /*#__PURE__*/jsx("div", {
-          className: "fadeIn col-span-12 col-start-1 my-6 flex flex-col gap-y-6 lg:hidden",
-          children: properties.links.map(function (link, index) {
-            return /*#__PURE__*/createElement$1(Dropdown, {
-              index: index,
-              className: "w-fit ",
-              dropdownLink: link,
-              key: getUniqueKey(link.label, link.to, index),
-              design: mergeRight(design.links, {
-                fontSize: "1em",
-                fontWeight: "500"
-              })
-            });
-          })
         })]
-      })
+      }), /*#__PURE__*/jsx("nav", {
+        className: classnames("flex flex-grow flex-col overflow-y-auto px-6 pb-6 transition-opacity delay-200 duration-300", isMenuOpen ? "opacity-100" : "opacity-0"),
+        children: properties.links.map(function (link, index) {
+          return /*#__PURE__*/createElement$1(Dropdown, {
+            index: index,
+            className: "w-full border-b border-gray-200 py-4",
+            dropdownLink: link,
+            key: getUniqueKey(link.label, link.to, index),
+            design: mergeRight(design.links, {
+              fontSize: "1em",
+              fontWeight: "600"
+            })
+          });
+        })
+      })]
     })]
   });
 };
@@ -16513,53 +16600,90 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
           }, _icon), otherProps)), getUniqueKey(_icon.to, index));
         })
       }), /*#__PURE__*/jsx("button", {
-        className: classnames("col-span-1 col-start-1 flex items-center transition-all lg:hidden", {
-          "rotate-90 transform": isLinksOpen
-        }),
+        className: "col-span-1 col-start-1 flex items-center transition-all lg:hidden",
         onClick: function onClick() {
           return setIsLinksOpen(function (open) {
             return !open;
           });
         },
-        children: !isLinksOpen ? /*#__PURE__*/jsx(Menu, {
-          className: "fadeIn",
-          fill: design.hamburgerMenu.color,
-          size: 32
-        }) : /*#__PURE__*/jsx(Close, {
+        children: /*#__PURE__*/jsx(Menu, {
           className: "fadeIn",
           fill: design.hamburgerMenu.color,
           size: 32
         })
-      }), isLinksOpen && /*#__PURE__*/jsxs("div", {
-        className: "fadeIn col-span-12 col-start-1 my-6 flex flex-col gap-y-6 lg:hidden",
-        children: [links.map(function (icon, index) {
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      role: "button",
+      tabIndex: isLinksOpen ? 0 : -1,
+      className: classnames("fixed inset-0 z-[999] bg-black/60 transition-opacity duration-300 lg:hidden", isLinksOpen ? "opacity-70" : "pointer-events-none opacity-0"),
+      onClick: function onClick() {
+        return setIsLinksOpen(false);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames("fixed inset-y-0 start-0 z-[999] flex flex-col overflow-x-hidden shadow-md transition-all duration-500 ease-in-out lg:hidden", isLinksOpen ? "w-[80%]" : "w-0"),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsx(Link, _objectSpread$7(_objectSpread$7({
+          action: logo.action,
+          to: logo.to
+        }, otherProps), {}, {
+          children: /*#__PURE__*/jsx(StyledImage$1, {
+            image: image,
+            priority: true,
+            alt: logo.alt,
+            design: design.logo,
+            disableButtonAndLinks: otherProps.disableButtonAndLinks,
+            id: "header-with-icons-logo",
+            isAddNewPane: otherProps.isAddNewPane,
+            src: logo.src
+          })
+        })), /*#__PURE__*/jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsLinksOpen(false);
+          },
+          children: /*#__PURE__*/jsx(Close, {
+            className: "fadeIn",
+            fill: design.hamburgerMenu.color,
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/jsx("nav", {
+        className: classnames("flex flex-grow flex-col overflow-y-auto px-6 pb-6 transition-opacity delay-200 duration-300", isLinksOpen ? "opacity-100" : "opacity-0"),
+        children: links.map(function (icon, index) {
           return /*#__PURE__*/jsx(Link, _objectSpread$7({
-            className: "w-fit",
+            className: "w-full py-4 hover:opacity-80 [&::before]:!bottom-0 [&::before]:!w-full [&::before]:!opacity-40",
             id: "header-with-icons-links-".concat(index, "-link"),
             isHighlighted: isLinkHighlighted(icon.to, currentPath),
             setIsMenuOpen: setIsLinksOpen,
             style: mergeRight(design.links, {
               fontSize: "1em",
-              fontWeight: "500"
+              fontWeight: "600"
             })
           }, icon), getUniqueKey(icon.url, icon.label, index));
-        }), /*#__PURE__*/jsx("div", {
-          className: "mt-2 flex items-center gap-x-3 md:hidden",
-          children: properties.icons.map(function (_icon2, index) {
-            return /*#__PURE__*/jsx(Link, _objectSpread$7(_objectSpread$7({
-              disableHovering: true,
-              className: "hover:no-underline",
-              id: "header-with-icons-icons-".concat(index, "-icon"),
-              style: design.icons,
-              icon: function icon() {
-                return renderIcon(_objectSpread$7({
-                  name: _icon2.name,
-                  type: _icon2.type
-                }, design.icons));
-              }
-            }, _icon2), otherProps), getUniqueKey(_icon2.to, index));
-          })
-        })]
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex flex-shrink-0 items-center justify-center gap-x-2 p-6 md:hidden",
+        children: properties.icons.map(function (_icon2, index) {
+          return /*#__PURE__*/jsx(Link, _objectSpread$7(_objectSpread$7({
+            disableHovering: true,
+            className: "hover:no-underline",
+            id: "header-with-icons-icons-".concat(index, "-icon"),
+            style: design.icons,
+            icon: function icon() {
+              return renderIcon(_objectSpread$7({
+                name: _icon2.name,
+                type: _icon2.type
+              }, design.icons));
+            }
+          }, _icon2), otherProps), getUniqueKey(_icon2.to, index));
+        })
       })]
     })]
   });
@@ -16649,25 +16773,72 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
           }, button), otherProps)), getUniqueKey(button.label, button.url, index));
         })]
       }), /*#__PURE__*/jsx("button", {
-        className: classnames("col-span-1 col-start-1 flex items-center transition-all lg:hidden", {
-          "rotate-90 transform": isMenuOpen
-        }),
+        className: "col-span-1 col-start-1 flex items-center transition-all lg:hidden",
         onClick: function onClick() {
           return setIsMenuOpen(function (open) {
             return !open;
           });
         },
-        children: !isMenuOpen ? /*#__PURE__*/jsx(Menu, {
-          className: "fadeIn",
-          fill: design.hamburgerMenu.color,
-          size: 32
-        }) : /*#__PURE__*/jsx(Close, {
+        children: /*#__PURE__*/jsx(Menu, {
           className: "fadeIn",
           fill: design.hamburgerMenu.color,
           size: 32
         })
-      }), isMenuOpen && /*#__PURE__*/jsx("div", {
-        className: "fadeIn col-span-12 col-start-1 my-6 flex flex-col gap-y-6 lg:hidden",
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      role: "button",
+      tabIndex: isMenuOpen ? 0 : -1,
+      className: classnames("fixed inset-0 z-[999] bg-black/60 transition-opacity duration-300 lg:hidden", isMenuOpen ? "opacity-70" : "pointer-events-none opacity-0"),
+      onClick: function onClick() {
+        return setIsMenuOpen(false);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames("fixed inset-y-0 start-0 z-[999] flex flex-col overflow-x-hidden shadow-md transition-all duration-500 ease-in-out lg:hidden", isMenuOpen ? "w-[80%]" : "w-0"),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsxs(Link, _objectSpread$6(_objectSpread$6({
+          action: properties.logo.action,
+          className: "flex w-full gap-x-2",
+          to: properties.logo.to
+        }, otherProps), {}, {
+          children: [/*#__PURE__*/jsx(StyledImage$1, {
+            image: image,
+            priority: true,
+            alt: properties.logo.alt,
+            className: "sm:max-h-18 max-h-16 lg:max-h-20",
+            design: design.logo,
+            disableButtonAndLinks: otherProps.disableButtonAndLinks,
+            id: "header-with-logo-title-logo",
+            isAddNewPane: otherProps.isAddNewPane,
+            src: properties.logo.src
+          }), /*#__PURE__*/jsx(Typography$1, {
+            component: "p",
+            id: "header-with-logo-title-logo-title",
+            style: design.logoTitle,
+            className: classnames({
+              "hidden sm:flex": properties.logo.src
+            }),
+            children: properties.logo.title
+          })]
+        })), /*#__PURE__*/jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsMenuOpen(false);
+          },
+          children: /*#__PURE__*/jsx(Close, {
+            className: "fadeIn",
+            fill: design.hamburgerMenu.color,
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/jsx("nav", {
+        className: classnames("flex flex-grow flex-col overflow-y-auto px-6 pb-6 transition-opacity delay-200 duration-300", isMenuOpen ? "opacity-100" : "opacity-0"),
         children: properties.links.map(function (_ref2, index) {
           var label = _ref2.label,
             to = _ref2.to,
@@ -16678,13 +16849,13 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
             label: label,
             setIsMenuOpen: setIsMenuOpen,
             to: to,
-            className: "w-fit",
+            className: "w-full py-4 hover:opacity-80 [&::before]:!bottom-0 [&::before]:!w-full [&::before]:!opacity-40",
             id: "header-with-logo-title-links-".concat(index, "-link"),
             isHighlighted: isLinkHighlighted(to, currentPath),
             key: getUniqueKey(to, label, index),
             style: mergeRight(design.links, {
               fontSize: "1em",
-              fontWeight: "500"
+              fontWeight: "600"
             })
           }, otherProps));
         })