@stackshift-ui/navigation 7.0.0-beta.0 → 7.0.0-beta.10

package/src/navigation_b.tsx

@@ -7,7 +7,7 @@ import { Section } from "@stackshift-ui/section";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { NavigationProps, ResponsiveNavLinksProps } from ".";
-import { ConditionalLink, logoLink } from "./helper";
+import { logoLink } from "./helper";
 import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
 
 export default function Navigation_B({
@@ -90,12 +90,11 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
     <li>
       <Button
         variant="unstyled"
-        asChild
+        as="link"
+        link={link}
         aria-label={link?.label}
         className="text-sm text-gray-500 no-underline hover:text-gray-900">
-        <ConditionalLink link={link} ariaLabel={link?.label || "Navigation link"}>
-          {link?.label}
-        </ConditionalLink>
+        {link?.label}
       </Button>
     </li>
   );
@@ -131,22 +130,20 @@ function Buttons({
     <Flex align="center" gap={4}>
       {primaryButton?.label && (
         <Button
-          asChild
+          as="link"
+          link={primaryButton}
           aria-label={primaryButton?.label}
           className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-secondary-foreground rounded-global bg-secondary hover:bg-secondary/50">
-          <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
-            {primaryButton?.label}
-          </ConditionalLink>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
-          asChild
+          as="link"
+          link={secondaryButton}
           aria-label={secondaryButton?.label}
           className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-primary-foreground bg-primary hover:bg-primary/50 rounded-global">
-          <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
-            {secondaryButton?.label}
-          </ConditionalLink>
+          {secondaryButton?.label}
         </Button>
       )}
     </Flex>
@@ -206,15 +203,11 @@ function ResponsiveNavLinks({
               {links?.map((link, index) => (
                 <li className="mb-1" key={index}>
                   <Button
-                    asChild
+                    as="link"
+                    link={link}
                     aria-label={link?.label}
                     className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
-                    <ConditionalLink
-                      link={link}
-                      ariaLabel={link?.label || "Navigation link"}
-                      className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
-                      {link?.label}
-                    </ConditionalLink>
+                    {link?.label}
                   </Button>
                 </li>
               ))}
@@ -224,28 +217,20 @@ function ResponsiveNavLinks({
             <div className="pt-6">
               {primaryButton?.label && (
                 <Button
-                  asChild
+                  as="link"
+                  link={primaryButton}
                   aria-label={primaryButton?.label}
                   className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-                  <ConditionalLink
-                    link={primaryButton}
-                    ariaLabel={primaryButton?.label}
-                    className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-                    {primaryButton?.label}
-                  </ConditionalLink>
+                  {primaryButton?.label}
                 </Button>
               )}
               {secondaryButton?.label && (
                 <Button
-                  asChild
+                  as="link"
+                  link={secondaryButton}
                   aria-label={secondaryButton?.label}
                   className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
-                  <ConditionalLink
-                    link={secondaryButton}
-                    ariaLabel={secondaryButton?.label}
-                    className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
-                    {secondaryButton?.label}
-                  </ConditionalLink>
+                  {secondaryButton?.label}
                 </Button>
               )}
             </div>

package/src/navigation_c.tsx

@@ -7,7 +7,7 @@ import { Section } from "@stackshift-ui/section";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { NavigationProps, ResponsiveNavLinksProps } from ".";
-import { ConditionalLink, logoLink } from "./helper";
+import { logoLink } from "./helper";
 import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
 
 export default function Navigation_C({
@@ -67,16 +67,12 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
   return (
     <li>
       <Button
+        as="link"
+        link={link}
         variant="unstyled"
-        asChild
         aria-label={link?.label}
         className="text-sm text-gray-500 no-underline hover:text-gray-900">
-        <ConditionalLink
-          link={link}
-          ariaLabel={link?.label || "Navigation link"}
-          className="text-sm text-gray-500 no-underline hover:text-gray-900">
-          {link?.label}
-        </ConditionalLink>
+        {link?.label}
       </Button>
     </li>
   );
@@ -134,22 +130,20 @@ function Buttons({
     <div className="hidden lg:text-right lg:block lg:w-1/3">
       {primaryButton?.label && (
         <Button
-          asChild
+          as="link"
+          link={primaryButton}
           aria-label={primaryButton?.label}
           className="px-4 py-3 text-secondary-foreground lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-          <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
-            {primaryButton?.label}
-          </ConditionalLink>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
-          asChild
+          as="link"
+          link={secondaryButton}
           aria-label={secondaryButton?.label}
           className="px-4 py-3 leading-loose text-center text-primary-foreground font-semibold bg-primary hover:bg-primary/50 rounded-global">
-          <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
-            {secondaryButton?.label}
-          </ConditionalLink>
+          {secondaryButton?.label}
         </Button>
       )}
     </div>
@@ -210,15 +204,11 @@ function ResponsiveNavLinks({
               links?.map((link, index) => (
                 <li className="mb-1" key={index}>
                   <Button
-                    asChild
+                    as="link"
+                    link={link}
                     aria-label={link?.label}
                     className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
-                    <ConditionalLink
-                      link={link}
-                      ariaLabel={link?.label || "Navigation link"}
-                      className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
-                      {link?.label}
-                    </ConditionalLink>
+                    {link?.label}
                   </Button>
                 </li>
               ))}
@@ -228,28 +218,20 @@ function ResponsiveNavLinks({
           <div className="pt-6">
             {primaryButton?.label && (
               <Button
-                asChild
+                as="link"
+                link={primaryButton}
                 aria-label={primaryButton?.label}
                 className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-                <ConditionalLink
-                  link={primaryButton}
-                  ariaLabel={primaryButton?.label}
-                  className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-                  {primaryButton?.label}
-                </ConditionalLink>
+                {primaryButton?.label}
               </Button>
             )}
             {secondaryButton?.label && (
               <Button
-                asChild
+                as="link"
+                link={secondaryButton}
                 aria-label={secondaryButton?.label}
                 className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
-                <ConditionalLink
-                  link={secondaryButton}
-                  ariaLabel={secondaryButton?.label}
-                  className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
-                  {secondaryButton?.label}
-                </ConditionalLink>
+                {secondaryButton?.label}
               </Button>
             )}
           </div>

package/src/navigation_d.tsx

@@ -7,7 +7,7 @@ import { Section } from "@stackshift-ui/section";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { NavigationProps, ResponsiveNavLinksProps } from ".";
-import { ConditionalLink, logoLink } from "./helper";
+import { logoLink } from "./helper";
 import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
 
 export default function Navigation_D({
@@ -65,16 +65,13 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
   return (
     <li>
       <Button
+        as="link"
+        link={link}
         variant="unstyled"
         asChild
         aria-label={link?.label}
         className="text-sm text-gray-500 no-underline hover:text-gray-900">
-        <ConditionalLink
-          link={link}
-          ariaLabel={link?.label || "Navigation link"}
-          className="text-sm text-gray-500 no-underline hover:text-gray-900">
-          {link?.label}
-        </ConditionalLink>
+        {link?.label}
       </Button>
     </li>
   );
@@ -132,24 +129,22 @@ function Buttons({
     <div className="hidden lg:flex lg:gap-4">
       {primaryButton?.label && (
         <Button
-          asChild
+          as="link"
+          link={primaryButton}
           variant="unstyled"
           aria-label={primaryButton?.label}
           className="px-4 py-3 leading-loose text-center text-secondary-foreground font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-          <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
-            {primaryButton?.label}
-          </ConditionalLink>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
-          asChild
+          as="link"
+          link={secondaryButton}
           variant="unstyled"
           aria-label={secondaryButton?.label}
           className="px-4 py-3 leading-loose text-center text-primary-foreground font-semibold bg-primary hover:bg-primary/50 rounded-global">
-          <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
-            {secondaryButton?.label}
-          </ConditionalLink>
+          {secondaryButton?.label}
         </Button>
       )}
     </div>
@@ -209,15 +204,11 @@ function ResponsiveNavLinks({
             links.map((link, index) => (
               <li className="mb-1" key={index}>
                 <Button
-                  asChild
+                  as="link"
+                  link={link}
                   aria-label={link.label}
                   className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
-                  <ConditionalLink
-                    link={link}
-                    ariaLabel={link.label || "Navigation link"}
-                    className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
-                    {link.label}
-                  </ConditionalLink>
+                  {link.label}
                 </Button>
               </li>
             ))}
@@ -225,28 +216,20 @@ function ResponsiveNavLinks({
         <div className="mt-auto pt-6">
           {primaryButton?.label && (
             <Button
-              asChild
+              as="link"
+              link={primaryButton}
               aria-label={primaryButton.label}
               className="block px-4 py-3 mb-2 text-center font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-              <ConditionalLink
-                link={primaryButton}
-                ariaLabel={primaryButton.label}
-                className="block px-4 py-3 mb-2 text-center font-semibold rounded-global bg-secondary hover:bg-secondary/50">
-                {primaryButton.label}
-              </ConditionalLink>
+              {primaryButton.label}
             </Button>
           )}
           {secondaryButton?.label && (
             <Button
-              asChild
+              as="link"
+              link={secondaryButton}
               aria-label={secondaryButton.label}
               className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
-              <ConditionalLink
-                link={secondaryButton}
-                ariaLabel={secondaryButton.label}
-                className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
-                {secondaryButton.label}
-              </ConditionalLink>
+              {secondaryButton.label}
             </Button>
           )}
         </div>

package/src/navigation_f.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@stackshift-ui/button";
 import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Image } from "@stackshift-ui/image";
@@ -47,10 +48,10 @@ const NavigationButton = ({ button, hasScrolled }: { button: any; hasScrolled: b
   if (!button?.label) return null;
 
   return (
-    <ConditionalLink
-      ariaLabel={button?.label}
+    <Button
+      as="link"
       link={button}
-      target={button?.linkTarget}
+      variant="unstyled"
       className={`font-body ml-auto p-2.5 md:p-3 transition duration-200 font-medium flex items-center space-x-2 text-left ${
         hasScrolled
           ? "text-white border border-white bg-transparent hover:bg-white hover:text-black"
@@ -66,7 +67,7 @@ const NavigationButton = ({ button, hasScrolled }: { button: any; hasScrolled: b
       <span className="text-sm md:text-base sm:block hidden whitespace-nowrap">
         {button?.label}
       </span>
-    </ConditionalLink>
+    </Button>
   );
 };
 
@@ -201,15 +202,15 @@ const NavigationLink = ({
 }) => {
   if (!link?.multipleRoutes) {
     return (
-      <ConditionalLink
-        ariaLabel={link?.label || ""}
+      <Button
+        as="link"
         link={link}
-        target={link?.linkTarget}
+        variant="unstyled"
         className={`hover:text-secondary font-body text-lg whitespace-nowrap ${
           hasScrolled ? "text-white" : "text-black"
         }`}>
         {link?.label}
-      </ConditionalLink>
+      </Button>
     );
   }
 
@@ -225,15 +226,15 @@ const NavigationLink = ({
             e.stopPropagation();
             handleDropdownChange(dropdown === index ? null : index);
           }}>
-          <ConditionalLink
-            ariaLabel={link?.label || ""}
+          <Button
+            as="link"
             link={link}
-            target={link?.linkTarget}
+            variant="unstyled"
             className={`hover:text-secondary font-body text-lg cursor-pointer ${
               hasScrolled ? "text-white" : "text-black"
             }`}>
             {link?.label}
-          </ConditionalLink>
+          </Button>
 
           <BiChevronDown
             size={24}
@@ -315,13 +316,13 @@ const DropdownMenuItem = ({
       <div className="relative group">
         {mLink?.internalLink || mLink?.externalLink ? (
           <Flex align="center">
-            <ConditionalLink
-              ariaLabel={mLink?.label || ""}
+            <Button
+              as="link"
               link={mLink}
-              target={mLink?.linkTarget}
+              variant="unstyled"
               className="font-body hover:text-secondary text-lg cursor-pointer py-2 pl-4 text-white">
               {mLink?.label}
-            </ConditionalLink>
+            </Button>
             <BiChevronDown
               size={24}
               className="font-bold mt-0.5 cursor-pointer group-hover:translate-y-0.5 transition group-hover:text-secondary text-white"
@@ -432,17 +433,17 @@ const Drawer = ({
               {link?.label}
             </p>
           ) : (
-            <ConditionalLink
-              ariaLabel={link?.label || ""}
+            <Button
+              as="link"
               link={link}
-              target={link?.linkTarget}
+              variant="unstyled"
               className={`text-xl font-body ${
                 hasScrolled ? "text-white" : "text-black"
               } hover:text-secondary`}>
               <p className="w-full h-full" onClick={showMenu}>
                 {link?.label}
               </p>
-            </ConditionalLink>
+            </Button>
           )
         ) : (
           <p

package/src/navigation_g.tsx

@@ -1,13 +1,11 @@
+import { animated, useSpring } from "@react-spring/web";
 import { Image } from "@stackshift-ui/image";
 import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
 import { SocialIcons } from "@stackshift-ui/social-icons";
+import { useWindowScroll } from "@uidotdev/usehooks";
 import React, { Fragment, useState } from "react";
 import { BsChevronDown } from "react-icons/bs";
-
-import { animated, useSpring } from "@react-spring/web";
-import { useWindowScroll } from "@uidotdev/usehooks";
-
 import { NavigationProps } from "./";
 import { logoLink } from "./helper";
 import { Socials } from "./types";

package/src/navigation_h.tsx

@@ -177,7 +177,9 @@ const MobileMenuContent = ({ data, showMobileMenu, setShowMobileMenu }: MobileMe
       ref={ref}
       className="fixed w-[75%] h-screen top-0 right-0 bg-white md:hidden z-50 py-10 px-5 overflow-y-auto">
       <Accordion>
-        {data?.map(item => <MobileMenuContentItem key={item._key} megaMenu={item} />)}
+        {data?.map(item => (
+          <MobileMenuContentItem key={item._key} megaMenu={item} />
+        ))}
       </Accordion>
     </div>
   );
@@ -222,14 +224,11 @@ const MobileMenuContentItem = React.memo(({ megaMenu }: MobileMenuContentItemPro
                   {groupedLinksItem.links?.map(link => (
                     <Button
                       key={`MobileMenuContent-Item-Group-Link-${link._key}`}
-                      asChild
+                      as="link"
                       variant="ghost"
+                      link={link}
                       className="text-black text-sm font-normal font-heading-kb leading-[30px] hover:underline block ml-4">
-                      <ConditionalLink link={link} ariaLabel={link.label ?? "Navigation link"}>
-                        <ConditionalLink link={link} ariaLabel={link.label ?? "Navigation link"}>
-                          {link.label}
-                        </ConditionalLink>
-                      </ConditionalLink>
+                      {link.label}
                     </Button>
                   ))}
                 </div>
@@ -241,24 +240,21 @@ const MobileMenuContentItem = React.memo(({ megaMenu }: MobileMenuContentItemPro
         {megaMenu.showcaseLink?.map((link, i) => (
           <div key={`MobileMenuContent-Item-Images-${link._key}-${i}`} className="mt-4 pl-4">
             <Button
-              asChild
+              as="link"
               variant="ghost"
+              link={link.primaryButton}
               className="text-black text-sm font-normal font-heading-kb leading-[30px]">
-              <ConditionalLink
-                link={link.primaryButton}
-                ariaLabel={link.primaryButton?.label ?? "Navigation link"}>
-                <Flex direction="col" gap={3}>
-                  <Image
-                    key={i}
-                    src={link.mainImage?.image}
-                    alt={link.mainImage?.alt ?? ""}
-                    width={200}
-                    height={150}
-                    className="w-[188px] h-[147px] object-cover object-center"
-                  />
-                  {link.primaryButton?.label}
-                </Flex>
-              </ConditionalLink>
+              <Flex direction="col" gap={3}>
+                <Image
+                  key={i}
+                  src={link.mainImage?.image}
+                  alt={link.mainImage?.alt ?? ""}
+                  width={200}
+                  height={150}
+                  className="w-[188px] h-[147px] object-cover object-center"
+                />
+                {link.primaryButton?.label}
+              </Flex>
             </Button>
           </div>
         ))}
@@ -418,10 +414,8 @@ const NavItem = ({ link, isIcon }: NavItemProps) => {
 
   return (
     <li>
-      <Button variant="unstyled" asChild className="text-sm font-label tracking-wide">
-        <ConditionalLink link={link} ariaLabel={link?.label ?? "Navigation link"}>
-          {!isIcon ? link?.label : icon}
-        </ConditionalLink>
+      <Button as="link" link={link} variant="unstyled" className="text-sm font-label tracking-wide">
+        {!isIcon ? link?.label : icon}
       </Button>
     </li>
   );
@@ -499,7 +493,6 @@ interface MegaMenuNavLinkProps {
 const MegaMenuNavLink = ({ link, className }: MegaMenuNavLinkProps) => {
   return (
     <Button
-      asChild
       variant="unstyled"
       className={cn(
         "relative text-black text-sm font-normal font-label uppercase tracking-widest group",
@@ -676,16 +669,14 @@ function MegaDropdownGroupedLinks({ groupedLinks }: { groupedLinks: LabeledRoute
                         {link.links?.map((link: any, i: number) => {
                           return (
                             <Button
+                              as="link"
+                              link={link}
                               key={`MegaDropdownContent-Item-Link-${link._key}-${i}`}
                               aria-label={link.label ?? ""}
                               variant="unstyled"
                               asChild
                               className="text-black text-sm font-normal font-heading-kb leading-[30px] hover:underline">
-                              <ConditionalLink
-                                link={link}
-                                ariaLabel={link.label ?? "Navigation link"}>
-                                {link?.label}
-                              </ConditionalLink>
+                              {link?.label}
                             </Button>
                           );
                         })}
@@ -717,25 +708,23 @@ function MegaDropdownShowcaseLinks({
 
         return (
           <Button
+            as="link"
+            link={link.primaryButton}
             key={`MegaDropdownContent-Item-Images-${link._key}-${i}`}
             aria-label={link.primaryButton?.label ?? ""}
             variant="unstyled"
             asChild
             className="text-center text-black text-sm font-normal font-heading-kb leading-[30px] hover:underline">
-            <ConditionalLink
-              link={link.primaryButton}
-              ariaLabel={link.primaryButton?.label ?? "Navigation link"}>
-              <Flex direction="col" align="center" justify="center" gap={3}>
-                <Image
-                  key={i}
-                  src={imageUrl}
-                  alt={link.mainImage?.alt ?? ""}
-                  width={500}
-                  height={500}
-                  className="w-[188px] h-[147px] object-cover object-center"></Image>
-                {link.primaryButton?.label}
-              </Flex>
-            </ConditionalLink>
+            <Flex direction="col" align="center" justify="center" gap={3}>
+              <Image
+                key={i}
+                src={imageUrl}
+                alt={link.mainImage?.alt ?? ""}
+                width={500}
+                height={500}
+                className="w-[188px] h-[147px] object-cover object-center"></Image>
+              {link.primaryButton?.label}
+            </Flex>
           </Button>
         );
       })}

package/dist/chunk-7PZN5XLN.mjs

@@ -1 +0,0 @@
-import{a as E,b as h}from"./chunk-S35O64PB.mjs";import{Container as K}from"@stackshift-ui/container";import{Flex as N}from"@stackshift-ui/flex";import{Image as W}from"@stackshift-ui/image";import{Link as z}from"@stackshift-ui/link";import{Section as I}from"@stackshift-ui/section";import{useEffect as D,useRef as T,useState as y}from"react";import{BiArrowBack as P,BiChevronDown as R,BiMenu as H}from"react-icons/bi";import{BsFillTelephoneFill as B,BsTelephone as O}from"react-icons/bs";import{MdClose as _}from"react-icons/md";import{Fragment as F,jsx as o,jsxs as c}from"react/jsx-runtime";var j=({logo:e,hasScrolled:a})=>{var s;return e!=null&&e.image?o(z,{"aria-label":`Go to ${E(e)==="/"?"home page":E(e)}`,className:"text-3xl",href:E(e),target:e==null?void 0:e.linkTarget,rel:(e==null?void 0:e.linkTarget)==="_blank"?"noopener noreferrer":"",children:o(W,{src:a?e==null?void 0:e.image:"https://cdn.sanity.io/images/9itgab5x/staging/7f9353c628ae4dd0bdd479d3b1407a3c242755e8-1963x833.png?fm=webp&w=96&q=75",width:500,height:500,alt:(s=e==null?void 0:e.alt)!=null?s:"navigation-logo",className:`transition-all duration-500 w-28 ${a?"md:w-40":"md:w-44"}`})}):null},Y=({button:e,hasScrolled:a})=>e!=null&&e.label?c(h,{ariaLabel:e==null?void 0:e.label,link:e,target:e==null?void 0:e.linkTarget,className:`font-body ml-auto p-2.5 md:p-3 transition duration-200 font-medium flex items-center space-x-2 text-left ${a?"text-white border border-white bg-transparent hover:bg-white hover:text-black":"text-white bg-secondary hover:text-secondary hover:border hover:border-black/40 hover:bg-white"}`,children:[o("span",{className:"flex-none text-3xl sm:text-xl",children:a?o(O,{className:"text-lg md:text-xl"}):o(B,{className:"text-lg md:text-xl"})}),o("span",{className:"text-sm md:text-base sm:block hidden whitespace-nowrap",children:e==null?void 0:e.label})]}):null,q=({hasScrolled:e,menu:a,showMenu:s})=>c("div",{children:[o(H,{color:e?"white":"black",size:40,onClick:s,className:`cursor-pointer hover:scale-105 transition lg:hidden block ${a?"hidden":"block"}`}),o(_,{color:e?"white":"black",size:40,onClick:s,className:`cursor-pointer hover:scale-105 transition lg:hidden block ${a?"block":"hidden"}`})]});function A({primaryButton:e,secondaryButton:a,logo:s,multipleLinks:r,title:u}){let[p,l]=y(null),n=T(null),[f,S]=y(!1),[i,C]=y(!1),M=d=>{n.current&&!n.current.contains(d.target)&&l(null)};D(()=>{let d=x=>{M(x)};return document.addEventListener("click",d),()=>{document.removeEventListener("click",d)}},[]);let w=d=>{d&&d.stopPropagation(),S(x=>!x)};return D(()=>{let d=()=>{C(window.scrollY>0)};return window.addEventListener("scroll",d),()=>window.removeEventListener("scroll",d)},[]),o(F,{children:c(I,{className:`fixed !z-[999999] w-full left-0 transition-all top-0 ${i?"bg-black/80":"bg-background"}`,children:[o(K,{children:c("div",{className:"flex justify-between space-x-5 py-2 items-center",children:[o(j,{logo:s,hasScrolled:i}),o(N,{direction:"row",align:"center",className:"hidden lg:flex gap-x-8",children:r==null?void 0:r.map((d,x)=>o(G,{link:d,index:x,dropdown:p,setDropdown:l,hasScrolled:i,dropdownRef:n},x))}),c(N,{direction:"row",align:"center",gap:2,children:[((e==null?void 0:e.label)||(a==null?void 0:a.label))&&o("div",{className:"flex space-x-4 sm:space-x-6 items-center",children:o(Y,{button:e,hasScrolled:i})}),o(q,{hasScrolled:i,menu:f,showMenu:w})]})]})}),o(U,{links:r,open:f,showMenu:w})]})})}var G=({link:e,index:a,dropdown:s,setDropdown:r,hasScrolled:u,dropdownRef:p})=>{if(!(e!=null&&e.multipleRoutes))return o(h,{ariaLabel:(e==null?void 0:e.label)||"",link:e,target:e==null?void 0:e.linkTarget,className:`hover:text-secondary font-body text-lg whitespace-nowrap ${u?"text-white":"text-black"}`,children:e==null?void 0:e.label});let l=n=>{r(n)};return c("div",{className:"relative",children:[e!=null&&e.internalLink||e!=null&&e.externalLink?c(N,{onMouseEnter:n=>{n.stopPropagation(),l(s===a?null:a)},children:[o(h,{ariaLabel:(e==null?void 0:e.label)||"",link:e,target:e==null?void 0:e.linkTarget,className:`hover:text-secondary font-body text-lg cursor-pointer ${u?"text-white":"text-black"}`,children:e==null?void 0:e.label}),o(R,{size:24,className:`font-bold mt-0.5 font-body cursor-pointer hover:text-secondary hover:translate-y-0.5 transition ${u?"text-white":"text-black"} ${s===a&&"translate-y-0.5 !text-secondary"}`,onClick:n=>{n.stopPropagation(),l(a)}})]}):c("p",{className:`hover:text-secondary font-body text-lg cursor-pointer flex items-center group ${u?"text-white":"text-black"}`,onClick:n=>{n.stopPropagation(),l(s===a?null:a)},onMouseEnter:n=>{n.stopPropagation(),l(s===a?null:a)},children:[e==null?void 0:e.label,o(R,{size:24,className:`font-bold mt-0.5 group-hover:translate-y-0.5 transition ${s===a&&"translate-y-0.5 text-secondary"}`})]}),s===a&&o(J,{link:e,dropdownRef:p,setDropdown:r,hasScrolled:u})]})},J=({link:e,dropdownRef:a,setDropdown:s,hasScrolled:r})=>{var u;return c("div",{ref:a,className:"absolute flex flex-col top-8 bg-primary rounded rounded-tl-none",onMouseLeave:()=>s(null),children:[o("span",{className:"absolute top-0 w-0 h-0 border-x-transparent border-t-transparent border-b-primary border-[6px] transform -translate-y-3"}),(u=e==null?void 0:e.multipleRoutes)==null?void 0:u.map((p,l)=>o(Q,{mLink:p,hasScrolled:r},l))]})},Q=({mLink:e,hasScrolled:a})=>{var s;return e!=null&&e.multipleInnerRoutes?c("div",{className:"relative group",children:[e!=null&&e.internalLink||e!=null&&e.externalLink?c(N,{align:"center",children:[o(h,{ariaLabel:(e==null?void 0:e.label)||"",link:e,target:e==null?void 0:e.linkTarget,className:"font-body hover:text-secondary text-lg cursor-pointer py-2 pl-4 text-white",children:e==null?void 0:e.label}),o(R,{size:24,className:"font-bold mt-0.5 cursor-pointer group-hover:translate-y-0.5 transition group-hover:text-secondary text-white"})]}):c("p",{className:"hover:text-secondary text-lg cursor-pointer flex items-center group py-2 px-4 text-white",children:[e==null?void 0:e.label,o(R,{size:24,className:"font-bold mt-0.5 group-hover:translate-y-0.5 transition"})]}),o("div",{className:"absolute hidden flex-col top-0 left-full bg-primary rounded-r rounded-r-b group-hover:flex hover:flex",children:(s=e==null?void 0:e.multipleInnerRoutes)==null?void 0:s.map((r,u)=>o(h,{ariaLabel:(r==null?void 0:r.label)||"",link:r,target:r==null?void 0:r.linkTarget,className:"hover:text-secondary font-body text-lg py-2 px-4 whitespace-nowrap text-white",children:r==null?void 0:r.label},u))})]}):o(h,{ariaLabel:(e==null?void 0:e.label)||"",link:e,target:e==null?void 0:e.linkTarget,className:"hover:text-secondary font-body text-lg py-2 px-4 whitespace-nowrap text-white",children:e==null?void 0:e.label})},U=({links:e,open:a,showMenu:s})=>{var M,w,d,x;let[r,u]=y(!1),p=T(null);D(()=>{let t=()=>u(window.scrollY>0);return window.addEventListener("scroll",t),()=>window.removeEventListener("scroll",t)},[]),D(()=>{let t=b=>{p.current&&!p.current.contains(b.target)&&!b.target.closest(".BiMenu")&&a&&s(b)};return document.addEventListener("click",t),()=>document.removeEventListener("click",t)},[a,s]);let[l,n]=y({previous:null,index:null}),f=(t,b)=>{n({previous:t,index:b})},S=(t,b,v=!1,m)=>{let g=(t==null?void 0:t.label)==="New Construction",$=(t==null?void 0:t.label)==="Renovations"||(t==null?void 0:t.label)==="Renovation";return c("div",{className:"flex items-center py-2 px-4",children:[t!=null&&t.internalLink||t!=null&&t.externalLink?g||$?o("p",{className:`text-xl font-body ${r?"text-white":"text-black"} hover:text-secondary cursor-pointer`,onClick:()=>window.location.href=`/projects/residential?filter=${g?"new_construction":"renovations"}`,children:t==null?void 0:t.label}):o(h,{ariaLabel:(t==null?void 0:t.label)||"",link:t,target:t==null?void 0:t.linkTarget,className:`text-xl font-body ${r?"text-white":"text-black"} hover:text-secondary`,children:o("p",{className:"w-full h-full",onClick:s,children:t==null?void 0:t.label})}):o("p",{className:`text-xl font-body peer cursor-pointer ${r?"text-white":"text-black"} hover:text-secondary`,onClick:m,children:t==null?void 0:t.label}),v&&o(R,{fontSize:24,className:`hover:-rotate-90 hover:text-secondary peer-hover:-rotate-90 peer-hover:text-secondary transition duration-200 cursor-pointer ${r?"text-white":"text-black"}`,onClick:m})]},b)},i=(t,b=!1)=>t.map((v,m)=>{let g=!!(v!=null&&v.multipleRoutes||v!=null&&v.multipleInnerRoutes);return S(v,m,g,g?()=>f(b?l.index:null,m):void 0)}),C=t=>c("p",{className:`hover:text-secondary text-xl font-body py-2 px-4 flex items-center gap-2 cursor-pointer group ${r?"text-white":"text-black"}`,onClick:t,children:[o(P,{}),"Back"]});return o(N,{className:`flex sm:block text-white overflow-hidden transition lg:hidden columns-2 ${a?"animate-curtain-down mt-5":"animate-curtain-up h-0"}`,children:o("div",{ref:p,onClick:t=>t.stopPropagation(),children:a&&c(F,{children:[e&&l.index===null&&i(e),l.previous===null&&l.index!==null&&c("div",{className:"flex flex-col",children:[C(()=>f(null,null)),i(((M=e[l.index])==null?void 0:M.multipleRoutes)||[],!0)]}),l.previous!==null&&l.index!==null&&c("div",{className:"flex flex-col",children:[C(()=>n({previous:null,index:l.previous})),i(((x=(d=(w=e[l.previous])==null?void 0:w.multipleRoutes)==null?void 0:d[l.index])==null?void 0:x.multipleInnerRoutes)||[])]})]})})})};export{A as a};

package/dist/chunk-AV6FXT56.mjs

@@ -1 +0,0 @@
-import{a as m}from"./chunk-S35O64PB.mjs";import{Button as o}from"@stackshift-ui/button";import{Flex as b}from"@stackshift-ui/flex";import{Image as f}from"@stackshift-ui/image";import{Link as x}from"@stackshift-ui/link";import{Section as d}from"@stackshift-ui/section";import{Text as u}from"@stackshift-ui/text";import g from"react";import{jsx as l,jsxs as n}from"react/jsx-runtime";function h({links:e,primaryButton:a,secondaryButton:t,logo:i}){let[s,r]=g.useState(!1),v=()=>{r(c=>!c)};return n(d,{className:"bg-background",children:[n(b,{align:"center",justify:"between",className:"px-6 py-6",gap:4,children:[l(w,{logo:i}),l(N,{links:e}),l(k,{primaryButton:a,secondaryButton:t}),l(R,{showMenu:v})]}),l(M,{menu:s,showMenu:v,links:e,primaryButton:a,secondaryButton:t})]})}function w({logo:e}){var a;return e?l("div",{className:"w-full lg:w-1/5",children:l(x,{className:"w-20 h-14 flex items-center","aria-label":m(e)==="/"?"Go to home page":`Go to ${m(e)}`,href:m(e),target:e==null?void 0:e.linkTarget,rel:(e==null?void 0:e.linkTarget)==="_blank"?"noopener noreferrer":"",children:l(f,{className:"w-fit h-full object-contain",src:`${e==null?void 0:e.image}`,sizes:"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",alt:(a=e==null?void 0:e.alt)!=null?a:"navigation-logo"})})}):null}function p(){return l("li",{className:"text-gray-500",children:l("svg",{className:"w-4 h-4 current-fill",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:l("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"})})})}function N({links:e}){return e?l(b,{children:l("ul",{className:"hidden lg:flex lg:items-center lg:gap-5 xl:gap-10",children:e==null?void 0:e.map((a,t)=>n(g.Fragment,{children:[l(L,{link:a},a._key),e.length!==t+1?l(p,{}):null]},t))})}):null}function L({link:e}){return e!=null&&e.label?l("li",{children:l(o,{as:"link",link:e,ariaLabel:e==null?void 0:e.label,className:"text-sm text-gray-500 no-underline hover:text-gray-900",children:e==null?void 0:e.label})}):null}function M({menu:e,showMenu:a,links:t,primaryButton:i,secondaryButton:s}){return n("div",{className:`${e?null:"hidden"} mobile-nav relative z-50`,children:[l("div",{className:"fixed inset-0 bg-gray-800 opacity-25 navbar-backdrop",onClick:a}),n(b,{as:"nav",direction:"col",className:"fixed top-0 bottom-0 left-0 w-5/6 max-w-sm px-6 py-6 overflow-y-auto bg-white border-r",children:[l(z,{showMenu:a}),l("div",{className:"w-full",children:t?l("ul",{children:t==null?void 0:t.map((r,v)=>l("li",{className:"mb-1",children:l(o,{as:"link",ariaLabel:r==null?void 0:r.label,className:"block w-full cursor-pointer p-4 text-sm font-semibold text-gray-900 no-underline rounded hover:bg-secondary-foreground hover:text-primary",link:r,children:r==null?void 0:r.label})},v))}):null}),n("div",{className:"w-full mt-auto",children:[n(b,{direction:"col",className:"pt-6",children:[i!=null&&i.label?l(o,{as:"link",link:i,ariaLabel:i==null?void 0:i.label,variant:"outline",className:"block w-full px-4 py-3 mb-3 text-xs cursor-pointer font-semibold leading-loose text-center text-gray-900 rounded-global bg-secondary hover:bg-secondary/50",children:i==null?void 0:i.label}):null,s!=null&&s.label?l(o,{as:"link",link:s,ariaLabel:s==null?void 0:s.label,variant:"solid",className:"block w-full px-4 py-3 mb-2 cursor-pointer leading-loose text-xs text-center font-semibold bg-primary hover:bg-primary-foreground rounded-global",children:s==null?void 0:s.label}):null]}),l(u,{fontSize:"xs",className:"my-4 text-center text-gray-900",children:l("span",{children:`\xA9 ${new Date().getFullYear()} All rights reserved.`})})]})]})]})}function R({showMenu:e}){return l("div",{className:"lg:hidden",children:l(o,{variant:"unstyled",as:"button",ariaLabel:"Navigation Menu",className:"flex items-center p-3 navbar-burger text-primary",onClick:e,children:n("svg",{className:"block w-4 h-4 fill-current",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[l("title",{children:"Mobile menu"}),l("path",{d:"M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"})]})})})}function k({primaryButton:e,secondaryButton:a}){return n(b,{align:"center",gap:4,children:[e!=null&&e.label?l(o,{as:"link",link:e,ariaLabel:e==null?void 0:e.label,variant:"outline",className:"hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-gray-900 rounded-global bg-secondary hover:bg-secondary/50",children:e==null?void 0:e.label}):null,a!=null&&a.label?l(o,{as:"link",link:a,ariaLabel:a==null?void 0:a.label,variant:"solid",className:"hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-white bg-primary hover:bg-primary-foreground rounded-global",children:a==null?void 0:a.label}):null]})}function z({showMenu:e}){return l("div",{className:"flex items-center mb-8",children:l(o,{variant:"unstyled",as:"button",ariaLabel:"Navigation Menu",className:"navbar-close",onClick:e,children:l("svg",{className:"w-6 h-6 text-gray-500 cursor-pointer hover:text-gray-500",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:l("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M6 18L18 6M6 6l12 12"})})})})}export{h as a};