@ttoss/landing-pages 0.12.49 → 0.12.51

package/dist/esm/index.js

@@ -1,9 +1,14 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
 
 // src/Hero/Hero.tsx
 import { Button, Flex, Heading, Image, Text } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Hero = ({
+var Hero = /* @__PURE__ */__name(({
   alignment,
   headerText,
   subHeaderText,
@@ -12,69 +17,61 @@ var Hero = ({
   ctaLabel
 }) => {
   const isCentered = alignment === "center";
-  return /* @__PURE__ */jsxs(Flex, {
+  return /* @__PURE__ */React.createElement(Flex, {
     sx: {
       justifyContent: "space-between",
       paddingY: "10vh",
       paddingX: "186px"
+    }
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      alignItems: isCentered ? "center" : "start",
+      backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
+      width: isCentered ? "100%" : void 0,
+      minHeight: isCentered ? "80vh" : void 0,
+      justifyContent: isCentered ? "center" : void 0
+    }
+  }, /* @__PURE__ */React.createElement(Heading, {
+    sx: {
+      fontSize: "48px",
+      color: isCentered ? "white" : void 0
     },
-    children: [/* @__PURE__ */jsxs(Flex, {
-      sx: {
-        flexDirection: "column",
-        alignItems: isCentered ? "center" : "start",
-        backgroundImage: isCentered ? `url(${imageSrc})` : void 0,
-        width: isCentered ? "100%" : void 0,
-        minHeight: isCentered ? "80vh" : void 0,
-        justifyContent: isCentered ? "center" : void 0
-      },
-      children: [/* @__PURE__ */jsx(Heading, {
-        sx: {
-          fontSize: "48px",
-          color: isCentered ? "white" : void 0
-        },
-        as: "h1",
-        children: headerText
-      }), /* @__PURE__ */jsx(Text, {
-        sx: {
-          fontSize: "24px",
-          color: isCentered ? "white" : void 0,
-          marginTop: "54px",
-          marginBottom: "71px"
-        },
-        as: "h2",
-        children: subHeaderText
-      }), /* @__PURE__ */jsx(Button, {
-        sx: {
-          background: isCentered ? "white" : "black",
-          color: isCentered ? "black" : void 0,
-          borderRadius: "10px",
-          fontSize: "16px"
-        },
-        children: ctaLabel
-      })]
-    }), !isCentered && /* @__PURE__ */jsx(Flex, {
-      children: /* @__PURE__ */jsx(Image, {
-        sx: {
-          maxWidth: "60vw",
-          maxHeight: "623px"
-        },
-        src: imageSrc,
-        alt: imageAlt
-      })
-    })]
-  });
-};
+    as: "h1"
+  }, headerText), /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "24px",
+      color: isCentered ? "white" : void 0,
+      marginTop: "54px",
+      marginBottom: "71px"
+    },
+    as: "h2"
+  }, subHeaderText), /* @__PURE__ */React.createElement(Button, {
+    sx: {
+      background: isCentered ? "white" : "black",
+      color: isCentered ? "black" : void 0,
+      borderRadius: "10px",
+      fontSize: "16px"
+    }
+  }, ctaLabel)), !isCentered && /* @__PURE__ */React.createElement(Flex, null, /* @__PURE__ */React.createElement(Image, {
+    sx: {
+      maxWidth: "60vw",
+      maxHeight: "623px"
+    },
+    src: imageSrc,
+    alt: imageAlt
+  })));
+}, "Hero");
 
 // src/HeroCarousel/HeroCarousel.tsx
-import * as React from "react";
+import * as React2 from "react";
 import { Box, Flex as Flex2, Image as Image2 } from "@ttoss/ui";
 import { Icon } from "@ttoss/react-icons";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var HeroCarousel = ({
+var HeroCarousel = /* @__PURE__ */__name(({
   images = []
 }) => {
-  const [selectedImage, setSelectedImage] = React.useState(images[0].id);
-  const handleRight = () => {
+  const [selectedImage, setSelectedImage] = React2.useState(images[0].id);
+  const handleRight = /* @__PURE__ */__name(() => {
     const currentIndex = images.findIndex(item => {
       return item.id === selectedImage;
     });
@@ -83,8 +80,8 @@ var HeroCarousel = ({
       return setSelectedImage(images[0].id);
     }
     setSelectedImage(images[currentIndex + 1].id);
-  };
-  const handleLeft = () => {
+  }, "handleRight");
+  const handleLeft = /* @__PURE__ */__name(() => {
     const currentIndex = images.findIndex(item => {
       return item.id === selectedImage;
     });
@@ -93,178 +90,166 @@ var HeroCarousel = ({
       return setSelectedImage(images[images.length - 1].id);
     }
     setSelectedImage(images[currentIndex - 1].id);
-  };
-  const image = React.useMemo(() => {
+  }, "handleLeft");
+  const image = React2.useMemo(() => {
     const result = images.find(item => {
       return item.id === selectedImage;
     });
     return result;
   }, [selectedImage, images]);
-  return /* @__PURE__ */jsx2(Flex2, {
+  return /* @__PURE__ */React2.createElement(Flex2, {
     sx: {
       width: "100%",
       height: "100%",
       maxHeight: "70vh",
       paddingX: 5
+    }
+  }, /* @__PURE__ */React2.createElement(Flex2, {
+    sx: {
+      width: "100%",
+      height: "50vw",
+      position: "relative",
+      flexDirection: "column"
+    }
+  }, /* @__PURE__ */React2.createElement(Flex2, {
+    sx: {
+      height: "100%",
+      alignItems: "center",
+      gap: 3
+    }
+  }, /* @__PURE__ */React2.createElement(Flex2, {
+    sx: {
+      cursor: "pointer",
+      height: "100%",
+      alignItems: "center"
+    },
+    onClick: handleLeft
+  }, /* @__PURE__ */React2.createElement(Icon, {
+    icon: "akar-icons:chevron-left"
+  })), image && /* @__PURE__ */React2.createElement(Image2, {
+    sx: {
+      height: "100%",
+      width: "100%"
     },
-    children: /* @__PURE__ */jsxs2(Flex2, {
+    src: image.src
+  }), /* @__PURE__ */React2.createElement(Flex2, {
+    sx: {
+      cursor: "pointer",
+      height: "100%",
+      alignItems: "center"
+    },
+    onClick: handleRight
+  }, /* @__PURE__ */React2.createElement(Icon, {
+    icon: "akar-icons:chevron-right"
+  }))), /* @__PURE__ */React2.createElement(Flex2, {
+    sx: {
+      marginTop: 2,
+      alignSelf: "center",
+      gap: 3
+    }
+  }, images.map(image2 => {
+    return /* @__PURE__ */React2.createElement(Box, {
+      key: image2.id,
+      role: "button",
+      onClick: /* @__PURE__ */__name(() => {
+        return setSelectedImage(image2.id);
+      }, "onClick"),
       sx: {
-        width: "100%",
-        height: "50vw",
-        position: "relative",
-        flexDirection: "column"
-      },
-      children: [/* @__PURE__ */jsxs2(Flex2, {
-        sx: {
-          height: "100%",
-          alignItems: "center",
-          gap: 3
-        },
-        children: [/* @__PURE__ */jsx2(Flex2, {
-          sx: {
-            cursor: "pointer",
-            height: "100%",
-            alignItems: "center"
-          },
-          onClick: handleLeft,
-          children: /* @__PURE__ */jsx2(Icon, {
-            icon: "akar-icons:chevron-left"
-          })
-        }), image && /* @__PURE__ */jsx2(Image2, {
-          sx: {
-            height: "100%",
-            width: "100%"
-          },
-          src: image.src
-        }), /* @__PURE__ */jsx2(Flex2, {
-          sx: {
-            cursor: "pointer",
-            height: "100%",
-            alignItems: "center"
-          },
-          onClick: handleRight,
-          children: /* @__PURE__ */jsx2(Icon, {
-            icon: "akar-icons:chevron-right"
-          })
-        })]
-      }), /* @__PURE__ */jsx2(Flex2, {
-        sx: {
-          marginTop: 2,
-          alignSelf: "center",
-          gap: 3
-        },
-        children: images.map(image2 => {
-          return /* @__PURE__ */jsx2(Box, {
-            role: "button",
-            onClick: () => {
-              return setSelectedImage(image2.id);
-            },
-            sx: {
-              background: image2.id === selectedImage ? "gray" : "black",
-              width: 10,
-              height: 10,
-              borderRadius: "50%",
-              cursor: "pointer"
-            }
-          }, image2.id);
-        })
-      })]
-    })
-  });
-};
+        background: image2.id === selectedImage ? "gray" : "black",
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        cursor: "pointer"
+      }
+    });
+  }))));
+}, "HeroCarousel");
 
 // src/Footer/Footer.tsx
 import { Flex as Flex3, Grid, Image as Image3, Link, Text as Text2 } from "@ttoss/ui";
 import { Icon as Icon2 } from "@ttoss/react-icons";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Footer = ({
+var Footer = /* @__PURE__ */__name(({
   links,
   logo,
   socialMedia,
   reserved
 }) => {
-  return /* @__PURE__ */jsxs3(Flex3, {
+  return /* @__PURE__ */React.createElement(Flex3, {
     sx: {
       flexDirection: "column",
       paddingY: "40px"
+    }
+  }, /* @__PURE__ */React.createElement(Image3, {
+    sx: {
+      maxWidth: ["90px", "212px"],
+      alignSelf: "center",
+      marginBottom: [3, 4]
     },
-    children: [/* @__PURE__ */jsx3(Image3, {
-      sx: {
-        maxWidth: ["90px", "212px"],
-        alignSelf: "center",
-        marginBottom: [3, 4]
-      },
-      src: logo
-    }), /* @__PURE__ */jsxs3(Flex3, {
-      sx: {
-        flexDirection: ["column", "row"],
-        justifyContent: ["unset", "center"],
-        paddingX: 3
-      },
-      children: [/* @__PURE__ */jsx3(Grid, {
-        sx: {
-          justifyContent: "center",
-          gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
-        },
-        children: links.map((link, idx) => {
-          return /* @__PURE__ */jsx3(Link, {
-            sx: {
-              fontSize: "xs",
-              fontFamily: "body",
-              textDecorationLine: "none"
-            },
-            href: link.href,
-            children: link.label
-          }, `link-${link.label}-${idx}`);
-        })
-      }), /* @__PURE__ */jsx3(Flex3, {
-        sx: {
-          marginTop: [3],
-          gap: [4],
-          justifyContent: "center"
-        },
-        children: socialMedia.map(social => {
-          return /* @__PURE__ */jsx3(Link, {
-            href: social.href,
-            children: /* @__PURE__ */jsx3(Icon2, {
-              icon: social.icon
-            })
-          }, `social-media-${social.icon}`);
-        })
-      })]
-    }), /* @__PURE__ */jsx3(Text2, {
+    src: logo
+  }), /* @__PURE__ */React.createElement(Flex3, {
+    sx: {
+      flexDirection: ["column", "row"],
+      justifyContent: ["unset", "center"],
+      paddingX: 3
+    }
+  }, /* @__PURE__ */React.createElement(Grid, {
+    sx: {
+      justifyContent: "center",
+      gridTemplateColumns: ["6fr 3fr 3fr", "1fr 1fr 1fr"]
+    }
+  }, links.map((link, idx) => {
+    return /* @__PURE__ */React.createElement(Link, {
       sx: {
-        fontSize: "xxs",
-        color: "gray",
-        fontFamily: "heading",
-        textAlign: "center",
-        lineHeight: "1.5",
-        marginTop: [3, 4]
+        fontSize: "xs",
+        fontFamily: "body",
+        textDecorationLine: "none"
       },
-      children: reserved
-    })]
-  });
-};
+      key: `link-${link.label}-${idx}`,
+      href: link.href
+    }, link.label);
+  })), /* @__PURE__ */React.createElement(Flex3, {
+    sx: {
+      marginTop: [3],
+      gap: [4],
+      justifyContent: "center"
+    }
+  }, socialMedia.map(social => {
+    return /* @__PURE__ */React.createElement(Link, {
+      href: social.href,
+      key: `social-media-${social.icon}`
+    }, /* @__PURE__ */React.createElement(Icon2, {
+      icon: social.icon
+    }));
+  }))), /* @__PURE__ */React.createElement(Text2, {
+    sx: {
+      fontSize: "xxs",
+      color: "gray",
+      fontFamily: "heading",
+      textAlign: "center",
+      lineHeight: "1.5",
+      marginTop: [3, 4]
+    }
+  }, reserved));
+}, "Footer");
 
 // src/Navbar/Navbar.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { Collapse } from "react-collapse";
 import { Flex as Flex4, Grid as Grid2, Image as Image4, Link as Link2, Text as Text3 } from "@ttoss/ui";
 import { Icon as Icon3 } from "@ttoss/react-icons";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var Navbar = ({
+var Navbar = /* @__PURE__ */__name(({
   links,
   logo,
   cta,
   type = "1"
 }) => {
-  const [isMenuOpen, setIsMenuOpen] = React2.useState(false);
+  const [isMenuOpen, setIsMenuOpen] = React3.useState(false);
   const {
     gridTemplateAreas,
     heightLogo,
     gridTemplateColumns,
     justifySelfLogo
-  } = React2.useMemo(() => {
+  } = React3.useMemo(() => {
     if (type === "1") {
       return {
         gridTemplateAreas: '"logo links cta"',
@@ -280,128 +265,115 @@ var Navbar = ({
       justifySelfLogo: "center"
     };
   }, [type]);
-  return /* @__PURE__ */jsxs4(Fragment, {
-    children: [/* @__PURE__ */jsxs4(Flex4, {
+  return /* @__PURE__ */React3.createElement(React3.Fragment, null, /* @__PURE__ */React3.createElement(Flex4, {
+    sx: {
+      flexDirection: "column",
+      display: ["flex", "none"]
+    }
+  }, /* @__PURE__ */React3.createElement(Grid2, {
+    sx: {
+      justifyContent: "space-between",
+      alignItems: "center",
+      gridTemplateColumns: "1fr 1fr 1fr"
+    }
+  }, /* @__PURE__ */React3.createElement(Text3, {
+    sx: {
+      cursor: "pointer",
+      justifySelf: "start",
+      fontSize: "3xl"
+    }
+  }, /* @__PURE__ */React3.createElement(Icon3, {
+    onClick: /* @__PURE__ */__name(() => {
+      setIsMenuOpen(prev => {
+        return !prev;
+      });
+    }, "onClick"),
+    icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
+  })), /* @__PURE__ */React3.createElement(Image4, {
+    src: logo,
+    sx: {
+      maxWidth: "112px"
+    }
+  }), /* @__PURE__ */React3.createElement(Flex4, {
+    sx: {
+      justifyContent: "end",
+      width: "100%",
+      alignItems: "center"
+    }
+  }, cta && /* @__PURE__ */React3.createElement(Link2, {
+    sx: {
+      fontSize: "xs"
+    },
+    href: cta.href
+  }, cta.label))), /* @__PURE__ */React3.createElement(Collapse, {
+    isOpened: isMenuOpen,
+    initialStyle: {
+      height: 0,
+      overflow: "hidden"
+    }
+  }, /* @__PURE__ */React3.createElement(Flex4, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      gap: 3,
+      paddingY: 3,
+      paddingLeft: 3
+    }
+  }, links.map(link => {
+    return /* @__PURE__ */React3.createElement(Link2, {
       sx: {
-        flexDirection: "column",
-        display: ["flex", "none"]
+        fontSize: "xs"
       },
-      children: [/* @__PURE__ */jsxs4(Grid2, {
-        sx: {
-          justifyContent: "space-between",
-          alignItems: "center",
-          gridTemplateColumns: "1fr 1fr 1fr"
-        },
-        children: [/* @__PURE__ */jsx4(Text3, {
-          sx: {
-            cursor: "pointer",
-            justifySelf: "start",
-            fontSize: "3xl"
-          },
-          children: /* @__PURE__ */jsx4(Icon3, {
-            onClick: () => {
-              setIsMenuOpen(prev => {
-                return !prev;
-              });
-            },
-            icon: isMenuOpen ? "ic:outline-menu-open" : "ic:outline-menu"
-          })
-        }), /* @__PURE__ */jsx4(Image4, {
-          src: logo,
-          sx: {
-            maxWidth: "112px"
-          }
-        }), /* @__PURE__ */jsx4(Flex4, {
-          sx: {
-            justifyContent: "end",
-            width: "100%",
-            alignItems: "center"
-          },
-          children: cta && /* @__PURE__ */jsx4(Link2, {
-            sx: {
-              fontSize: "xs"
-            },
-            href: cta.href,
-            children: cta.label
-          })
-        })]
-      }), /* @__PURE__ */jsx4(Collapse, {
-        isOpened: isMenuOpen,
-        initialStyle: {
-          height: 0,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */jsx4(Flex4, {
-          sx: {
-            flexDirection: "column",
-            width: "100%",
-            gap: 3,
-            paddingY: 3,
-            paddingLeft: 3
-          },
-          children: links.map(link => {
-            return /* @__PURE__ */jsx4(Link2, {
-              sx: {
-                fontSize: "xs"
-              },
-              href: link.href,
-              children: link.label
-            }, link.label);
-          })
-        })
-      })]
-    }), /* @__PURE__ */jsxs4(Grid2, {
+      key: link.label,
+      href: link.href
+    }, link.label);
+  })))), /* @__PURE__ */React3.createElement(Grid2, {
+    sx: {
+      display: ["none", "grid"],
+      gridTemplateAreas,
+      gridTemplateColumns,
+      alignItems: "center",
+      paddingX: 6,
+      paddingY: 4
+    }
+  }, /* @__PURE__ */React3.createElement(Image4, {
+    sx: {
+      gridArea: "logo",
+      height: heightLogo,
+      justifySelf: justifySelfLogo
+    },
+    src: logo
+  }), /* @__PURE__ */React3.createElement(Flex4, {
+    sx: {
+      gridArea: "links",
+      justifyContent: "space-around"
+    }
+  }, links.map(link => {
+    return /* @__PURE__ */React3.createElement(Link2, {
       sx: {
-        display: ["none", "grid"],
-        gridTemplateAreas,
-        gridTemplateColumns,
-        alignItems: "center",
-        paddingX: 6,
-        paddingY: 4
+        fontSize: "2xl"
       },
-      children: [/* @__PURE__ */jsx4(Image4, {
-        sx: {
-          gridArea: "logo",
-          height: heightLogo,
-          justifySelf: justifySelfLogo
-        },
-        src: logo
-      }), /* @__PURE__ */jsx4(Flex4, {
-        sx: {
-          gridArea: "links",
-          justifyContent: "space-around"
-        },
-        children: links.map(link => {
-          return /* @__PURE__ */jsx4(Link2, {
-            sx: {
-              fontSize: "2xl"
-            },
-            href: link.href,
-            children: link.label
-          }, link.label);
-        })
-      }), /* @__PURE__ */jsx4(Flex4, {
-        sx: {
-          gridArea: "cta",
-          justifyContent: "end"
-        },
-        children: cta && /* @__PURE__ */jsx4(Link2, {
-          href: cta.href,
-          sx: {
-            backgroundColor: "background",
-            borderColor: "text",
-            color: "text",
-            borderRadius: "10px",
-            fontSize: "base",
-            textDecorationLine: "none",
-            paddingX: 3,
-            paddingY: 2
-          },
-          as: "button",
-          children: cta.label
-        })
-      })]
-    })]
-  });
-};
+      key: link.label,
+      href: link.href
+    }, link.label);
+  })), /* @__PURE__ */React3.createElement(Flex4, {
+    sx: {
+      gridArea: "cta",
+      justifyContent: "end"
+    }
+  }, cta && /* @__PURE__ */React3.createElement(Link2, {
+    href: cta.href,
+    sx: {
+      backgroundColor: "background",
+      borderColor: "text",
+      color: "text",
+      borderRadius: "10px",
+      fontSize: "base",
+      textDecorationLine: "none",
+      paddingX: 3,
+      paddingY: 2
+    },
+    as: "button"
+  }, cta.label))));
+}, "Navbar");
 export { Footer, Hero, HeroCarousel, Navbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/landing-pages",
-  "version": "0.12.49",
+  "version": "0.12.51",
   "description": "Package for creating landing pages.",
   "license": "MIT",
   "author": "ttoss",
@@ -28,8 +28,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.4.15",
-    "@ttoss/ui": "^5.10.0"
+    "@ttoss/react-icons": "^0.4.17",
+    "@ttoss/ui": "^5.10.2"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -37,10 +37,10 @@
     "@types/react-collapse": "^5.0.4",
     "jest": "^30.0.4",
     "tsup": "^8.5.0",
-    "@ttoss/config": "^1.35.6",
-    "@ttoss/test-utils": "^2.1.26",
-    "@ttoss/ui": "^5.10.0",
-    "@ttoss/react-icons": "^0.4.15"
+    "@ttoss/config": "^1.35.8",
+    "@ttoss/test-utils": "^2.1.28",
+    "@ttoss/react-icons": "^0.4.17",
+    "@ttoss/ui": "^5.10.2"
   },
   "keywords": [
     "React",