@bigbinary/neeto-site-blocks 1.2.5 → 1.2.7

package/dist/index.cjs.js

@@ -14168,7 +14168,7 @@ stepsOrder.reduce((acc, key) => {
 
 var StyledAnchor = styled__default["default"].a.attrs(function (props) {
   return {
-    className: classnames(props.className, generateResponsiveStyles(props.design))
+    className: generateResponsiveStyles(props.design)
   };
 })(function (_ref) {
   var _design$border, _design$border2, _design$border3;
@@ -14176,14 +14176,20 @@ var StyledAnchor = styled__default["default"].a.attrs(function (props) {
     _ref$percentage = _ref.percentage,
     percentage = _ref$percentage === void 0 ? 0.08 : _ref$percentage,
     _ref$isButton = _ref.isButton,
-    isButton = _ref$isButton === void 0 ? false : _ref$isButton;
+    isButton = _ref$isButton === void 0 ? false : _ref$isButton,
+    isHighlighted = _ref.isHighlighted;
   var borderColors = {
     borderColor: (_design$border = design.border) === null || _design$border === void 0 ? void 0 : _design$border.borderColor,
     borderStyle: (_design$border2 = design.border) === null || _design$border2 === void 0 ? void 0 : _design$border2.borderStyle,
     borderWidth: (_design$border3 = design.border) === null || _design$border3 === void 0 ? void 0 : _design$border3.borderWidth
   };
   var borderColorStyles = pickBy(identity, borderColors);
-  var hoverStyles = {
+  var anchorStyles = {
+    color: isHighlighted ? blendColors({
+      color0: design.color,
+      color1: "#0e19e8",
+      percentage: 0.4
+    }) : design.color,
     "&:hover": {
       transitionDuration: "0.3s",
       borderColor: isButton && blendColors({
@@ -14200,7 +14206,7 @@ var StyledAnchor = styled__default["default"].a.attrs(function (props) {
       })
     }
   };
-  return mergeAll([design, borderColorStyles, hoverStyles]);
+  return mergeAll([design, borderColorStyles, anchorStyles]);
 });
 
 var withConditionalRender = function withConditionalRender(Component, condition) {
@@ -15469,6 +15475,8 @@ var LinkElement = function LinkElement(_ref) {
     _ref$draftMode = _ref.draftMode,
     draftMode = _ref$draftMode === void 0 ? false : _ref$draftMode,
     Link = _ref.link,
+    _ref$isHighlighted = _ref.isHighlighted,
+    isHighlighted = _ref$isHighlighted === void 0 ? false : _ref$isHighlighted,
     _ref$disableButtonAnd = _ref.disableButtonAndLinks,
     disableButtonAndLinks = _ref$disableButtonAnd === void 0 ? false : _ref$disableButtonAnd;
   var baseClass = classnames("inline-flex items-center transition-all duration-300 ease-in-out", {
@@ -15479,7 +15487,8 @@ var LinkElement = function LinkElement(_ref) {
     design: style,
     href: to !== null && to !== void 0 ? to : "",
     rel: "noreferrer",
-    percentage: 0.1
+    percentage: 0.1,
+    isHighlighted: isHighlighted
   };
   if (action === "external") {
     return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
@@ -15493,7 +15502,9 @@ var LinkElement = function LinkElement(_ref) {
       to: draftMode ? "".concat(baseUrl).concat(to) : to
     }), label, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null));
   }
-  return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, commonProps, label, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null));
+  return /*#__PURE__*/React__default["default"].createElement(StyledAnchor, _extends__default["default"]({
+    as: !draftMode && Link
+  }, commonProps), label, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null));
 };
 var Link = withConditionalRender(LinkElement, function () {
   return !!(prop("label") || prop("icon"));
@@ -40577,11 +40588,12 @@ var useElementVisible = function useElementVisible(ref) {
   return isIntersecting;
 };
 
-var _excluded$7 = ["configurations", "className", "id"];
+var _excluded$7 = ["configurations", "className", "currentPath", "id"];
 var HeaderWithButtons = function HeaderWithButtons(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    currentPath = _ref.currentPath,
     id = _ref.id,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$7);
   var _useState = React.useState(false),
@@ -40619,6 +40631,7 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
     })
   }, properties.links.map(function (link, index) {
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
+      isHighlighted: currentPath === link.to,
       key: getUniqueKey(link.label, index),
       style: design.links
     }, link, otherProps));
@@ -40642,19 +40655,21 @@ var HeaderWithButtons = function HeaderWithButtons(_ref) {
     className: "fadeIn col-span-2 col-start-1 ml-2 mt-3 block space-y-2 lg:hidden"
   }, properties.links.map(function (button, index) {
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
-      key: getUniqueKey(button.url, button.label, index),
+      isHighlighted: currentPath === button.to,
+      key: getUniqueKey(button.to, button.label, index),
       style: design.links
     }, button, otherProps));
   }))));
 };
 
-var _excluded$6 = ["configurations", "className", "id"];
+var _excluded$6 = ["configurations", "className", "currentPath", "id"];
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderWithIcons = function HeaderWithIcons(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    currentPath = _ref.currentPath,
     id = _ref.id,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$6);
   var _useState = React.useState(false),
@@ -40686,6 +40701,7 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
     className: "col-span-4 col-start-1 hidden items-center gap-6 lg:flex"
   }, properties.links.map(function (link, index) {
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
+      isHighlighted: currentPath === link.to,
       key: getUniqueKey(link.label, index),
       style: design.links
     }, link, otherProps));
@@ -40729,6 +40745,7 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
   }, properties.links.map(function (icon, index) {
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
       className: "w-full",
+      isHighlighted: currentPath === icon.to,
       key: getUniqueKey(icon.url, icon.label, index),
       style: design.links
     }, icon));
@@ -40749,12 +40766,13 @@ var HeaderWithIcons = function HeaderWithIcons(_ref) {
   }))));
 };
 
-var _excluded$5 = ["configurations", "className", "id"];
+var _excluded$5 = ["configurations", "className", "id", "currentPath"];
 var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
   var configurations = _ref.configurations,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     id = _ref.id,
+    currentPath = _ref.currentPath,
     otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$5);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -40798,7 +40816,8 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
   }, properties.links.map(function (link, index) {
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
       className: "hidden lg:inline",
-      key: getUniqueKey(link.label, link.url, index),
+      isHighlighted: currentPath === link.to,
+      key: getUniqueKey(link.label, link.to, index),
       style: design.links
     }, link, otherProps));
   }), buttons.map(function (button, index) {
@@ -40819,14 +40838,15 @@ var HeaderWithLogoTitle = function HeaderWithLogoTitle(_ref) {
     className: "fadeIn col-span-2 col-start-1 space-y-2 lg:hidden"
   }, properties.links.map(function (_ref2, index) {
     var label = _ref2.label,
-      url = _ref2.url,
+      to = _ref2.to,
       action = _ref2.action;
     return /*#__PURE__*/React__default["default"].createElement(Link, _extends__default["default"]({
       action: action,
       label: label,
-      key: getUniqueKey(url, label, index),
-      style: design.links,
-      to: url
+      to: to,
+      isHighlighted: currentPath === to,
+      key: getUniqueKey(to, label, index),
+      style: design.links
     }, otherProps));
   }))));
 };
@@ -40931,9 +40951,10 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
     var src = _ref2.src,
       position = _ref2.position;
     return classnames("sm:col-span-6 col-span-12", {
-      "sm:col-start-1": src && position === POSITIONS.RIGHT.label && src,
-      "sm:col-span-8 sm:col-start-3": src && position === POSITIONS.CENTER.label && src,
-      "sm:col-start-7": src && position === POSITIONS.LEFT.label && src,
+      "sm:col-start-1": src && position === POSITIONS.RIGHT.label,
+      "sm:col-span-8 sm:col-start-3": src && position === POSITIONS.BOTTOM.label,
+      "sm:col-span-12 sm:col-start-1 flex flex-col justify-center order-2": src && position === POSITIONS.TOP.label,
+      "sm:col-start-7": src && position === POSITIONS.LEFT.label,
       "flex flex-col justify-center sm:col-span-12": !src
     });
   };
@@ -40943,7 +40964,8 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
     return classnames("sm:col-span-5 col-span-12 flex justify-center", {
       "sm:col-start-1": src && position === POSITIONS.LEFT.label,
       "sm:col-start-8": src && position === POSITIONS.RIGHT.label,
-      "sm:col-span-8 sm:col-start-3": src && position === POSITIONS.CENTER.label,
+      "sm:col-span-8 sm:col-start-3": src && position === POSITIONS.BOTTOM.label,
+      "sm:col-span-8 sm:col-start-3 flex justify-center order-1": src && position === POSITIONS.TOP.label,
       hidden: !src
     });
   };
@@ -40951,24 +40973,24 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
     var src = _ref4.src,
       position = _ref4.position;
     return classnames("flex w-full gap-x-4", {
-      "justify-center": !src || position === POSITIONS.CENTER.label
+      "justify-center": !src || position === POSITIONS.BOTTOM.label || position === POSITIONS.TOP.label
     });
   };
   var textClasses = function textClasses(_ref5) {
     var src = _ref5.src,
       position = _ref5.position;
     return classnames({
-      "text-center": !src || position === POSITIONS.CENTER.label
+      "text-center": !src || position === POSITIONS.BOTTOM.label || position === POSITIONS.TOP.label
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(MotionWrapper, {
+    enableAnimation: enableAnimation,
+    id: id,
     backgroundImage: mergeLeft({
       src: src
     }, design.backgroundImage),
     className: "flex items-center justify-between gap-x-2",
-    design: mergeDesign(design.body, 24),
-    enableAnimation: enableAnimation,
-    id: id
+    design: mergeDesign(design.body, 24)
   }, /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
     isStart: true,
     Icon: ArrowLeftS$1,
@@ -41034,7 +41056,7 @@ var HeroWithMultipleLayouts = function HeroWithMultipleLayouts(_ref) {
       lgImageSize: design.media.width,
       src: media.src,
       className: classnames({
-        "slider-image": media.position !== POSITIONS.CENTER.label
+        "slider-image": media.position !== POSITIONS.BOTTOM.label || media.position !== POSITIONS.TOP.label
       })
     }))));
   })), /*#__PURE__*/React__default["default"].createElement(ArrowButton, {