@bigbinary/neeto-site-blocks 2.0.8 → 2.0.10

package/dist/index.cjs.js

@@ -61,293 +61,6 @@ var ArrowButton = function ArrowButton(_ref) {
   });
 };
 
-var COMPONENTS = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  p: "p",
-  span: "span",
-  b: "b",
-  strong: "strong",
-  i: "i",
-  em: "em",
-  mark: "mark",
-  del: "del",
-  s: "s",
-  ins: "ins",
-  sub: "sub",
-  sup: "sup",
-  u: "u",
-  code: "code",
-  blockquote: "blockquote",
-  div: "div"
-};
-var SPACING_VALUES = {
-  none: 0,
-  "2xs": 8,
-  xs: 12,
-  sm: 16,
-  md: 20,
-  lg: 24,
-  xl: 32,
-  "2xl": 36,
-  "3xl": 40,
-  "4xl": 48,
-  "5xl": 64,
-  "6xl": 80,
-  "7xl": 96,
-  "8xl": 112,
-  "9xl": 128,
-  "10xl": 144,
-  "11xl": 160,
-  "12xl": 176,
-  "13xl": 192
-};
-var BACKGROUND_IMAGE_SIZE_VALUES = {
-  auto: "auto",
-  cover: "cover",
-  contain: "contain",
-  inherit: "inherit",
-  initial: "initial",
-  revert: "revert",
-  unset: "unset"
-};
-var BACKGROUND_IMAGE_POSITION_VALUES = {
-  "top-left": "top-left",
-  "top-center": "top-center",
-  "top-right": "top-right",
-  "center-left": "center-left",
-  center: "center",
-  "center-right": "center-right",
-  "bottom-left": "bottom-left",
-  "bottom-center": "bottom-center",
-  "bottom-right": "bottom-right"
-};
-var BACKGROUND_IMAGE_REPEAT_VALUES = {
-  repeat: "repeat",
-  "no-repeat": "no-repeat",
-  "repeat-x": "repeat-x",
-  "repeat-y": "repeat-y"
-};
-var TEXT_ALIGN_VALUES = {
-  left: "left",
-  center: "center",
-  right: "right",
-  justify: "justify"
-};
-var ICON_SIZE_VALUES = {
-  "4xs": 16,
-  "3xs": 20,
-  "2xs": 24,
-  xs: 28,
-  sm: 32,
-  md: 36,
-  lg: 40,
-  xl: 44
-};
-var LOGO_WIDTH_VALUES = {
-  xs: 10,
-  sm: 14,
-  md: 20,
-  lg: 24,
-  xl: 28,
-  "2xl": 32,
-  "3xl": 36,
-  "4xl": 40,
-  "5xl": 44,
-  "6xl": 48,
-  "7xl": 52,
-  "8xl": 56,
-  "9xl": 60,
-  "10xl": 64
-};
-var IMAGE_WIDTH_VALUES = {
-  "3xs": 15,
-  "2xs": 20,
-  xs: 25,
-  sm: 33,
-  md: 40,
-  lg: 50,
-  xl: 66,
-  "2xl": 75,
-  "3xl": 80,
-  full: 100
-};
-var BORDER_STYLE_VALUES = {
-  none: "none",
-  solid: "solid",
-  dashed: "dashed"
-};
-var BORDER_WIDTH_VALUES = {
-  none: 0,
-  "3xs": 0.5,
-  "2xs": 1,
-  xs: 2,
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16
-};
-var BORDER_RADIUS_VALUES = {
-  none: 0,
-  xs: 1,
-  sm: 2,
-  md: 6,
-  lg: 8,
-  xl: 12,
-  "2xl": 16,
-  full: 9999
-};
-var FONT_SIZE_VALUES = {
-  xs: "0.75em",
-  sm: "0.875em",
-  base: "1em",
-  lg: "1.125em",
-  xl: "1.25em",
-  "2xl": "1.5em",
-  "3xl": "1.75em",
-  "4xl": "2em",
-  "5xl": "2.25em",
-  "6xl": "2.5em",
-  "7xl": "3em",
-  "8xl": "3.75em",
-  "9xl": "4.5em"
-};
-var FONT_FAMILY_VALUES = {
-  Inter: "Inter",
-  Roboto: "Roboto",
-  OpenSans: "Open Sans",
-  Lato: "Lato",
-  Monsterrat: "Montserrat",
-  NotoSerif: "Noto Serif",
-  EBGaramond: "EB Garamond"
-};
-var FONT_WEIGHT_VALUES = {
-  300: 300,
-  400: 400,
-  500: 500,
-  600: 600,
-  700: 700,
-  800: 800
-};
-var LINE_HEIGHT_VALUES = {
-  none: 1,
-  tight: 1.25,
-  snug: 1.375,
-  normal: 1.5,
-  relaxed: 1.625,
-  loose: 2
-};
-var LETTER_SPACING_VALUES = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: 0,
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-};
-var PRICING_PLANS = {
-  monthly: "monthly",
-  yearly: "yearly",
-  monthly_and_yearly: "monthly_and_yearly"
-};
-var DEFAULT_BUTTON_STYLES = {
-  fontSize: FONT_SIZE_VALUES.sm,
-  fontWeight: FONT_WEIGHT_VALUES[500],
-  border: {
-    borderWidth: 0,
-    borderStyle: "solid"
-  },
-  borderRadius: BORDER_RADIUS_VALUES.sm,
-  paddingHorizontal: SPACING_VALUES["sm"],
-  paddingVertical: SPACING_VALUES["2xs"],
-  letterSpacing: "wide"
-};
-var DEFAULT_TYPOGRAPHY_STYLES = {
-  fontSize: FONT_SIZE_VALUES.md,
-  fontWeight: FONT_WEIGHT_VALUES[400],
-  marginTop: SPACING_VALUES.none,
-  marginBottom: SPACING_VALUES.none,
-  marginLeft: SPACING_VALUES.none,
-  marginRight: SPACING_VALUES.none,
-  lineHeight: LINE_HEIGHT_VALUES.none,
-  letterSpacing: LETTER_SPACING_VALUES.normal,
-  textAlign: "left"
-};
-var DEFAULT_LINK_STYLES = {
-  fontSize: FONT_SIZE_VALUES.sm,
-  fontWeight: FONT_WEIGHT_VALUES.normal,
-  letterSpacing: LETTER_SPACING_VALUES.normal,
-  marginBottom: 0,
-  marginTop: 0
-};
-var IMAGE_POSITIONS = {
-  top: "top",
-  bottom: "bottom",
-  left: "left",
-  right: "right",
-  center: "center"
-};
-var LOGO_SIZE_VALUES = {
-  xs: 10,
-  sm: 14,
-  md: 20,
-  lg: 24,
-  xl: 28,
-  "2xl": 32,
-  "3xl": 36,
-  "4xl": 40,
-  "5xl": 44,
-  "6xl": 48,
-  "7xl": 52,
-  "8xl": 56,
-  "9xl": 62,
-  "10xl": 70,
-  "11xl": 80
-};
-var IMAGE_FIT_VALUES = {
-  auto: "auto",
-  cover: "cover",
-  contain: "contain"
-};
-var BUTTON_ALIGN_VALUES = {
-  left: "left",
-  center: "center",
-  right: "right"
-};
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  COMPONENTS: COMPONENTS,
-  SPACING_VALUES: SPACING_VALUES,
-  BACKGROUND_IMAGE_SIZE_VALUES: BACKGROUND_IMAGE_SIZE_VALUES,
-  BACKGROUND_IMAGE_POSITION_VALUES: BACKGROUND_IMAGE_POSITION_VALUES,
-  BACKGROUND_IMAGE_REPEAT_VALUES: BACKGROUND_IMAGE_REPEAT_VALUES,
-  TEXT_ALIGN_VALUES: TEXT_ALIGN_VALUES,
-  ICON_SIZE_VALUES: ICON_SIZE_VALUES,
-  LOGO_WIDTH_VALUES: LOGO_WIDTH_VALUES,
-  IMAGE_WIDTH_VALUES: IMAGE_WIDTH_VALUES,
-  BORDER_STYLE_VALUES: BORDER_STYLE_VALUES,
-  BORDER_WIDTH_VALUES: BORDER_WIDTH_VALUES,
-  BORDER_RADIUS_VALUES: BORDER_RADIUS_VALUES,
-  FONT_SIZE_VALUES: FONT_SIZE_VALUES,
-  FONT_FAMILY_VALUES: FONT_FAMILY_VALUES,
-  FONT_WEIGHT_VALUES: FONT_WEIGHT_VALUES,
-  LINE_HEIGHT_VALUES: LINE_HEIGHT_VALUES,
-  LETTER_SPACING_VALUES: LETTER_SPACING_VALUES,
-  PRICING_PLANS: PRICING_PLANS,
-  DEFAULT_BUTTON_STYLES: DEFAULT_BUTTON_STYLES,
-  DEFAULT_TYPOGRAPHY_STYLES: DEFAULT_TYPOGRAPHY_STYLES,
-  DEFAULT_LINK_STYLES: DEFAULT_LINK_STYLES,
-  IMAGE_POSITIONS: IMAGE_POSITIONS,
-  LOGO_SIZE_VALUES: LOGO_SIZE_VALUES,
-  IMAGE_FIT_VALUES: IMAGE_FIT_VALUES,
-  BUTTON_ALIGN_VALUES: BUTTON_ALIGN_VALUES
-});
-
 var _excluded$3M = ["size"];
 function ownKeys$3Q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3Q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3Q(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3Q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2861,6 +2574,293 @@ var OutlineIcons = /*#__PURE__*/Object.freeze({
   Zcool: Zcool$1
 });
 
+var COMPONENTS = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  p: "p",
+  span: "span",
+  b: "b",
+  strong: "strong",
+  i: "i",
+  em: "em",
+  mark: "mark",
+  del: "del",
+  s: "s",
+  ins: "ins",
+  sub: "sub",
+  sup: "sup",
+  u: "u",
+  code: "code",
+  blockquote: "blockquote",
+  div: "div"
+};
+var SPACING_VALUES = {
+  none: 0,
+  "2xs": 8,
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+  "2xl": 36,
+  "3xl": 40,
+  "4xl": 48,
+  "5xl": 64,
+  "6xl": 80,
+  "7xl": 96,
+  "8xl": 112,
+  "9xl": 128,
+  "10xl": 144,
+  "11xl": 160,
+  "12xl": 176,
+  "13xl": 192
+};
+var BACKGROUND_IMAGE_SIZE_VALUES = {
+  auto: "auto",
+  cover: "cover",
+  contain: "contain",
+  inherit: "inherit",
+  initial: "initial",
+  revert: "revert",
+  unset: "unset"
+};
+var BACKGROUND_IMAGE_POSITION_VALUES = {
+  "top-left": "top-left",
+  "top-center": "top-center",
+  "top-right": "top-right",
+  "center-left": "center-left",
+  center: "center",
+  "center-right": "center-right",
+  "bottom-left": "bottom-left",
+  "bottom-center": "bottom-center",
+  "bottom-right": "bottom-right"
+};
+var BACKGROUND_IMAGE_REPEAT_VALUES = {
+  repeat: "repeat",
+  "no-repeat": "no-repeat",
+  "repeat-x": "repeat-x",
+  "repeat-y": "repeat-y"
+};
+var TEXT_ALIGN_VALUES = {
+  left: "left",
+  center: "center",
+  right: "right",
+  justify: "justify"
+};
+var ICON_SIZE_VALUES = {
+  "4xs": 16,
+  "3xs": 20,
+  "2xs": 24,
+  xs: 28,
+  sm: 32,
+  md: 36,
+  lg: 40,
+  xl: 44
+};
+var LOGO_WIDTH_VALUES = {
+  xs: 10,
+  sm: 14,
+  md: 20,
+  lg: 24,
+  xl: 28,
+  "2xl": 32,
+  "3xl": 36,
+  "4xl": 40,
+  "5xl": 44,
+  "6xl": 48,
+  "7xl": 52,
+  "8xl": 56,
+  "9xl": 60,
+  "10xl": 64
+};
+var IMAGE_WIDTH_VALUES = {
+  "3xs": 15,
+  "2xs": 20,
+  xs: 25,
+  sm: 33,
+  md: 40,
+  lg: 50,
+  xl: 66,
+  "2xl": 75,
+  "3xl": 80,
+  full: 100
+};
+var BORDER_STYLE_VALUES = {
+  none: "none",
+  solid: "solid",
+  dashed: "dashed"
+};
+var BORDER_WIDTH_VALUES = {
+  none: 0,
+  "3xs": 0.5,
+  "2xs": 1,
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16
+};
+var BORDER_RADIUS_VALUES = {
+  none: 0,
+  xs: 1,
+  sm: 2,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  "2xl": 16,
+  full: 9999
+};
+var FONT_SIZE_VALUES = {
+  xs: "0.75em",
+  sm: "0.875em",
+  base: "1em",
+  lg: "1.125em",
+  xl: "1.25em",
+  "2xl": "1.5em",
+  "3xl": "1.75em",
+  "4xl": "2em",
+  "5xl": "2.25em",
+  "6xl": "2.5em",
+  "7xl": "3em",
+  "8xl": "3.75em",
+  "9xl": "4.5em"
+};
+var FONT_FAMILY_VALUES = {
+  Inter: "Inter",
+  Roboto: "Roboto",
+  OpenSans: "Open Sans",
+  Lato: "Lato",
+  Monsterrat: "Montserrat",
+  NotoSerif: "Noto Serif",
+  EBGaramond: "EB Garamond"
+};
+var FONT_WEIGHT_VALUES = {
+  300: 300,
+  400: 400,
+  500: 500,
+  600: 600,
+  700: 700,
+  800: 800
+};
+var LINE_HEIGHT_VALUES = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2
+};
+var LETTER_SPACING_VALUES = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: 0,
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+var PRICING_PLANS = {
+  monthly: "monthly",
+  yearly: "yearly",
+  monthly_and_yearly: "monthly_and_yearly"
+};
+var DEFAULT_BUTTON_STYLES = {
+  fontSize: FONT_SIZE_VALUES.sm,
+  fontWeight: FONT_WEIGHT_VALUES[500],
+  border: {
+    borderWidth: 0,
+    borderStyle: "solid"
+  },
+  borderRadius: BORDER_RADIUS_VALUES.sm,
+  paddingHorizontal: SPACING_VALUES["sm"],
+  paddingVertical: SPACING_VALUES["2xs"],
+  letterSpacing: "wide"
+};
+var DEFAULT_TYPOGRAPHY_STYLES = {
+  fontSize: FONT_SIZE_VALUES.md,
+  fontWeight: FONT_WEIGHT_VALUES[400],
+  marginTop: SPACING_VALUES.none,
+  marginBottom: SPACING_VALUES.none,
+  marginLeft: SPACING_VALUES.none,
+  marginRight: SPACING_VALUES.none,
+  lineHeight: LINE_HEIGHT_VALUES.none,
+  letterSpacing: LETTER_SPACING_VALUES.normal,
+  textAlign: "left"
+};
+var DEFAULT_LINK_STYLES = {
+  fontSize: FONT_SIZE_VALUES.sm,
+  fontWeight: FONT_WEIGHT_VALUES.normal,
+  letterSpacing: LETTER_SPACING_VALUES.normal,
+  marginBottom: 0,
+  marginTop: 0
+};
+var IMAGE_POSITIONS = {
+  top: "top",
+  bottom: "bottom",
+  left: "left",
+  right: "right",
+  center: "center"
+};
+var LOGO_SIZE_VALUES = {
+  xs: 10,
+  sm: 14,
+  md: 20,
+  lg: 24,
+  xl: 28,
+  "2xl": 32,
+  "3xl": 36,
+  "4xl": 40,
+  "5xl": 44,
+  "6xl": 48,
+  "7xl": 52,
+  "8xl": 56,
+  "9xl": 62,
+  "10xl": 70,
+  "11xl": 80
+};
+var IMAGE_FIT_VALUES = {
+  auto: "auto",
+  cover: "cover",
+  contain: "contain"
+};
+var BUTTON_ALIGN_VALUES = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  COMPONENTS: COMPONENTS,
+  SPACING_VALUES: SPACING_VALUES,
+  BACKGROUND_IMAGE_SIZE_VALUES: BACKGROUND_IMAGE_SIZE_VALUES,
+  BACKGROUND_IMAGE_POSITION_VALUES: BACKGROUND_IMAGE_POSITION_VALUES,
+  BACKGROUND_IMAGE_REPEAT_VALUES: BACKGROUND_IMAGE_REPEAT_VALUES,
+  TEXT_ALIGN_VALUES: TEXT_ALIGN_VALUES,
+  ICON_SIZE_VALUES: ICON_SIZE_VALUES,
+  LOGO_WIDTH_VALUES: LOGO_WIDTH_VALUES,
+  IMAGE_WIDTH_VALUES: IMAGE_WIDTH_VALUES,
+  BORDER_STYLE_VALUES: BORDER_STYLE_VALUES,
+  BORDER_WIDTH_VALUES: BORDER_WIDTH_VALUES,
+  BORDER_RADIUS_VALUES: BORDER_RADIUS_VALUES,
+  FONT_SIZE_VALUES: FONT_SIZE_VALUES,
+  FONT_FAMILY_VALUES: FONT_FAMILY_VALUES,
+  FONT_WEIGHT_VALUES: FONT_WEIGHT_VALUES,
+  LINE_HEIGHT_VALUES: LINE_HEIGHT_VALUES,
+  LETTER_SPACING_VALUES: LETTER_SPACING_VALUES,
+  PRICING_PLANS: PRICING_PLANS,
+  DEFAULT_BUTTON_STYLES: DEFAULT_BUTTON_STYLES,
+  DEFAULT_TYPOGRAPHY_STYLES: DEFAULT_TYPOGRAPHY_STYLES,
+  DEFAULT_LINK_STYLES: DEFAULT_LINK_STYLES,
+  IMAGE_POSITIONS: IMAGE_POSITIONS,
+  LOGO_SIZE_VALUES: LOGO_SIZE_VALUES,
+  IMAGE_FIT_VALUES: IMAGE_FIT_VALUES,
+  BUTTON_ALIGN_VALUES: BUTTON_ALIGN_VALUES
+});
+
 var _excluded$2b = ["size"];
 function ownKeys$2f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2f(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -5543,6 +5543,9 @@ var isLinkHighlighted = function isLinkHighlighted(to, currentPath) {
   if (!(to && currentPath)) return false;
   return currentPath.pathName === to && ramda.isEmpty(currentPath.hash) || currentPath.hash === to;
 };
+var normalizeExternalLink = function normalizeExternalLink(href) {
+  return /^(https?:\/\/|\/)/i.test(href) ? href : "http://".concat(href);
+};
 
 function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -7365,6 +7368,7 @@ var LinkElement = function LinkElement(_ref) {
   }, otherProps);
   if (action === "external") {
     return /*#__PURE__*/jsxRuntime.jsxs(StyledAnchor, _objectSpread$z(_objectSpread$z({}, commonProps), {}, {
+      href: normalizeExternalLink(commonProps.href),
       target: "_blank",
       children: [label, Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {}), children]
     }));
@@ -7440,7 +7444,7 @@ var Dropdown = function Dropdown(_ref) {
     paddingHorizontal: paddingHorizontal,
     totalLength: totalLength,
     children: [/*#__PURE__*/jsxRuntime.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);
@@ -7456,6 +7460,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__*/jsxRuntime.jsx(framerMotion.motion.div, {
@@ -7488,7 +7493,9 @@ var Dropdown = function Dropdown(_ref) {
       },
       children: renderDropdownItems("px-4 py-2 hover:bg-gray-100 last:rounded-b-md")
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "block lg:hidden lg:pr-8",
+      className: classnames__default["default"]({
+        "mt-4 block bg-gray-100/70 p-2 lg:hidden": isOpen
+      }),
       children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
         children: isOpen && /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div, {
           animate: {
@@ -7507,7 +7514,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")
         })
       })
     })]
@@ -16269,6 +16276,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__*/jsxRuntime.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({
@@ -16276,33 +16284,68 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
           }, button), otherProps)), getUniqueKey(button.label, index));
         })
       }), /*#__PURE__*/jsxRuntime.jsx("button", {
-        className: classnames__default["default"]("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__*/jsxRuntime.jsx(Menu, {
-          className: "fadeIn",
-          fill: design.hamburgerMenu.color,
-          size: 32
-        }) : /*#__PURE__*/jsxRuntime.jsx(Close, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
           className: "fadeIn",
           fill: design.hamburgerMenu.color,
           size: 32
         })
-      }), isMenuOpen && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "fadeIn col-span-12 col-start-1 my-6 flex flex-col gap-y-6 lg:hidden",
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "button",
+      tabIndex: isMenuOpen ? 0 : -1,
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Link, _objectSpread$9(_objectSpread$9({
+          action: properties.logo.action,
+          to: properties.logo.to
+        }, otherProps), {}, {
+          children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsMenuOpen(false);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Close, {
+            className: "fadeIn",
+            fill: design.hamburgerMenu.color,
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("nav", {
+        className: classnames__default["default"]("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__*/jsxRuntime.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: ramda.mergeRight(design.links, {
               fontSize: "1em",
-              fontWeight: "500"
+              fontWeight: "600"
             })
           }, _objectSpread$9(_objectSpread$9({
             index: index,
@@ -16404,39 +16447,87 @@ var HeaderWithDropdownLinks = function HeaderWithDropdownLinks(_ref) {
             }, otherProps)), getUniqueKey(dropdownLink.label, dropdownLink.to, index));
           })
         }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          className: classnames__default["default"]("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__*/jsxRuntime.jsx(Menu, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
             className: "fadeIn",
             fill: design.hamburgerMenu.color,
             size: 32
-          }) : /*#__PURE__*/jsxRuntime.jsx(Close, {
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "button",
+      tabIndex: isMenuOpen ? 0 : -1,
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(Link, _objectSpread$8(_objectSpread$8({
+          action: properties.logo.action,
+          className: "flex w-full gap-x-2",
+          to: properties.logo.to
+        }, otherProps), {}, {
+          children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography$1, _objectSpread$8(_objectSpread$8({
+            component: "p",
+            id: "header-with-dropdown-links-logo-title",
+            style: design.logoTitle,
+            className: classnames__default["default"]({
+              "hidden sm:flex": properties.logo.src
+            })
+          }, otherProps), {}, {
+            children: properties.logo.title
+          }))]
+        })), /*#__PURE__*/jsxRuntime.jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsMenuOpen(false);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Close, {
             className: "fadeIn",
             fill: design.hamburgerMenu.color,
             size: 32
           })
-        }), isMenuOpen && /*#__PURE__*/jsxRuntime.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__*/React.createElement(Dropdown, {
-              index: index,
-              className: "w-fit ",
-              dropdownLink: link,
-              key: getUniqueKey(link.label, link.to, index),
-              design: ramda.mergeRight(design.links, {
-                fontSize: "1em",
-                fontWeight: "500"
-              })
-            });
-          })
         })]
-      })
+      }), /*#__PURE__*/jsxRuntime.jsx("nav", {
+        className: classnames__default["default"]("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__*/React.createElement(Dropdown, {
+            index: index,
+            className: "w-full border-b border-gray-200 py-4",
+            dropdownLink: link,
+            key: getUniqueKey(link.label, link.to, index),
+            design: ramda.mergeRight(design.links, {
+              fontSize: "1em",
+              fontWeight: "600"
+            })
+          });
+        })
+      })]
     })]
   });
 };
@@ -16528,53 +16619,90 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
           }, _icon), otherProps)), getUniqueKey(_icon.to, index));
         })
       }), /*#__PURE__*/jsxRuntime.jsx("button", {
-        className: classnames__default["default"]("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__*/jsxRuntime.jsx(Menu, {
-          className: "fadeIn",
-          fill: design.hamburgerMenu.color,
-          size: 32
-        }) : /*#__PURE__*/jsxRuntime.jsx(Close, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
           className: "fadeIn",
           fill: design.hamburgerMenu.color,
           size: 32
         })
-      }), isLinksOpen && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      role: "button",
+      tabIndex: isLinksOpen ? 0 : -1,
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Link, _objectSpread$7(_objectSpread$7({
+          action: logo.action,
+          to: logo.to
+        }, otherProps), {}, {
+          children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsLinksOpen(false);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Close, {
+            className: "fadeIn",
+            fill: design.hamburgerMenu.color,
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("nav", {
+        className: classnames__default["default"]("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__*/jsxRuntime.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: ramda.mergeRight(design.links, {
               fontSize: "1em",
-              fontWeight: "500"
+              fontWeight: "600"
             })
           }, icon), getUniqueKey(icon.url, icon.label, index));
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "mt-2 flex items-center gap-x-3 md:hidden",
-          children: properties.icons.map(function (_icon2, index) {
-            return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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));
+        })
       })]
     })]
   });
@@ -16664,25 +16792,72 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
           }, button), otherProps)), getUniqueKey(button.label, button.url, index));
         })]
       }), /*#__PURE__*/jsxRuntime.jsx("button", {
-        className: classnames__default["default"]("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__*/jsxRuntime.jsx(Menu, {
-          className: "fadeIn",
-          fill: design.hamburgerMenu.color,
-          size: 32
-        }) : /*#__PURE__*/jsxRuntime.jsx(Close, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
           className: "fadeIn",
           fill: design.hamburgerMenu.color,
           size: 32
         })
-      }), isMenuOpen && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "fadeIn col-span-12 col-start-1 my-6 flex flex-col gap-y-6 lg:hidden",
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "button",
+      tabIndex: isMenuOpen ? 0 : -1,
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+      style: {
+        backgroundColor: design.body.backgroundColor
+      },
+      className: classnames__default["default"]("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__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-6 px-6 py-6",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(Link, _objectSpread$6(_objectSpread$6({
+          action: properties.logo.action,
+          className: "flex w-full gap-x-2",
+          to: properties.logo.to
+        }, otherProps), {}, {
+          children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography$1, {
+            component: "p",
+            id: "header-with-logo-title-logo-title",
+            style: design.logoTitle,
+            className: classnames__default["default"]({
+              "hidden sm:flex": properties.logo.src
+            }),
+            children: properties.logo.title
+          })]
+        })), /*#__PURE__*/jsxRuntime.jsx("button", {
+          className: "flex items-center transition-opacity duration-300 lg:hidden",
+          onClick: function onClick() {
+            return setIsMenuOpen(false);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Close, {
+            className: "fadeIn",
+            fill: design.hamburgerMenu.color,
+            size: 32
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("nav", {
+        className: classnames__default["default"]("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,
@@ -16693,13 +16868,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: ramda.mergeRight(design.links, {
               fontSize: "1em",
-              fontWeight: "500"
+              fontWeight: "600"
             })
           }, otherProps));
         })