@harshit-wander/component-lib 1.1.12 → 1.1.14

package/dist/index.cjs

@@ -14,7 +14,16 @@ var containerClass = "inline-flex flex-col items-center justify-center gap-sm p-
 var BrandLogo = react.forwardRef(
   ({ logo, name, href, className, ...rest }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: name, className: "h-[50px] w-auto max-w-full object-contain" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: logo,
+          alt: name,
+          loading: "lazy",
+          decoding: "async",
+          className: "h-[50px] w-auto max-w-full object-contain"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium leading-button text-text", children: name })
     ] });
     if (href) {
@@ -251,6 +260,8 @@ var DestinationCard = react.forwardRef(
         {
           src: image,
           alt,
+          loading: "lazy",
+          decoding: "async",
           className: "w-[66px] h-[66px] rounded-full object-cover bg-border"
         }
       ),
@@ -538,6 +549,8 @@ var FeatureCard = react.forwardRef(
             src: imageUrl,
             alt: "",
             "aria-hidden": "true",
+            loading: "lazy",
+            decoding: "async",
             className: "absolute bottom-0 left-0 w-full pointer-events-none"
           }
         ) : null
@@ -609,7 +622,7 @@ var LocationCard = react.forwardRef(
           {
             "aria-hidden": "true",
             className: "flex items-center h-[50px] [&>img]:h-full [&>img]:w-auto [&>img]:max-w-full [&>img]:object-contain [&>svg]:h-full [&>svg]:w-auto [&>svg]:max-w-full [&>svg]:object-contain",
-            children: typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "" }) : logo
+            children: typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "", loading: "lazy", decoding: "async" }) : logo
           }
         ) : null,
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-card-title", children: location }),
@@ -706,12 +719,13 @@ var PackageCard = react.forwardRef(
   }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
+        "img",
         {
-          role: "img",
-          "aria-label": alt,
-          className: "absolute inset-0 bg-cover bg-center pointer-events-none",
-          style: { backgroundImage: `url(${image})` }
+          src: image,
+          alt,
+          loading: "lazy",
+          decoding: "async",
+          className: "absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -791,6 +805,8 @@ var TeamInfoCard = react.forwardRef(
             {
               src: image,
               alt: name,
+              loading: "lazy",
+              decoding: "async",
               className: "w-[140px] h-[140px] rounded-full object-cover shadow-card-lg"
             }
           ),
@@ -813,7 +829,7 @@ var TeamInfoCard = react.forwardRef(
                 target: "_blank",
                 rel: "noopener noreferrer",
                 className: "inline-flex items-center justify-center w-8 h-8 text-primary no-underline text-sm transition-opacity duration-150 ease-in [&>img]:w-full [&>img]:h-full [&>img]:object-contain [&>svg]:w-full [&>svg]:h-full [&>svg]:object-contain hover:opacity-70 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-sm",
-                children: typeof link.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: link.icon, alt: "" }) : link.icon ?? link.label
+                children: typeof link.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: link.icon, alt: "", loading: "lazy", decoding: "async" }) : link.icon ?? link.label
               }
             ) }, link.href)) })
           ] }) : null
@@ -1569,29 +1585,39 @@ var CtaBanner = react.forwardRef(
       }
       cta.onClick?.();
     };
-    return /* @__PURE__ */ jsxRuntime.jsx("section", { ref, className: cn("flex justify-center bg-surface", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { ref, className: cn("flex justify-center bg-surface", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md bg-cover bg-center overflow-hidden max-md:px-lg",
-        style: {
-          backgroundColor: backgroundColor ?? "var(--color-primary)",
-          backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xl max-w-[550px]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
-            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+        className: "relative flex items-center w-full min-h-[300px] pl-[50px] rounded-md overflow-hidden max-md:px-lg",
+        style: { backgroundColor: backgroundColor ?? "var(--color-primary)" },
+        children: [
+          backgroundImage ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
             {
-              type: "button",
-              onClick: handleCtaClick,
-              className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
-              children: cta.label
+              src: backgroundImage,
+              alt: "",
+              "aria-hidden": "true",
+              loading: "lazy",
+              decoding: "async",
+              className: "absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
             }
-          )
-        ] })
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-xl max-w-[550px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs text-white", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold leading-button", children: title }),
+              subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm font-medium leading-body", children: subtitle }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCtaClick,
+                className: "inline-flex items-center justify-center self-start h-11 px-xl bg-accent text-secondary border-none rounded-md font-[inherit] text-button cursor-pointer shadow-[inset_0_0_6px_rgba(0,0,0,0.14)] transition-colors duration-150 ease-in hover:bg-accent-hover focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2",
+                children: cta.label
+              }
+            )
+          ] })
+        ]
       }
     ) });
   }
@@ -2161,7 +2187,8 @@ var RatingBadge = ({ logo, alt, rating, reviewCount }) => /* @__PURE__ */ jsxRun
     ] })
   ] })
 ] });
-var sectionBase = "relative flex flex-col justify-center gap-md min-h-[420px] py-xl px-xl text-white bg-cover bg-center before:content-[''] before:absolute before:inset-0 before:pointer-events-none [&>*]:relative max-md:items-center max-md:text-center max-md:min-h-[360px] max-md:pt-xl max-md:px-md max-md:pb-0 max-md:gap-lg";
+var sectionBase = "relative isolate flex flex-col justify-center gap-md min-h-[420px] py-xl px-xl text-white overflow-hidden before:content-[''] before:absolute before:inset-0 before:pointer-events-none [&>:not(img)]:relative max-md:items-center max-md:text-center max-md:min-h-[360px] max-md:pt-xl max-md:px-md max-md:pb-0 max-md:gap-lg";
+var backgroundImageClass = "absolute inset-0 w-full h-full object-cover object-center pointer-events-none -z-10";
 var Hero = react.forwardRef((props, ref) => {
   const variant = props.variant ?? "centered";
   if (variant === "reviews") {
@@ -2186,12 +2213,20 @@ var Hero = react.forwardRef((props, ref) => {
           backgroundImage2 ? "before:bg-black/45" : "before:bg-transparent",
           className2
         ),
-        style: {
-          backgroundColor: backgroundColor2 ?? "var(--color-primary)",
-          backgroundImage: backgroundImage2 ? `url(${backgroundImage2})` : void 0
-        },
+        style: { backgroundColor: backgroundColor2 ?? "var(--color-primary)" },
         ...rest2,
         children: [
+          backgroundImage2 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: backgroundImage2,
+              alt: "",
+              "aria-hidden": "true",
+              loading: "lazy",
+              decoding: "async",
+              className: backgroundImageClass
+            }
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-[3px] bg-primary" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-stretch gap-md before:content-[''] before:w-1 before:bg-accent before:rounded-sm max-md:justify-center max-md:gap-0 max-md:before:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "m-0 text-2xl font-bold leading-heading max-w-[760px] max-md:text-xl", children: title2 }) }),
           subtitle2 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "inline-block m-0 py-sm px-md bg-accent text-secondary text-md font-semibold leading-button max-md:bg-transparent max-md:text-accent max-md:p-0 max-md:self-center", children: subtitle2 }) : null,
@@ -2220,12 +2255,20 @@ var Hero = react.forwardRef((props, ref) => {
         backgroundImage ? "before:bg-black/45" : "before:bg-transparent",
         className
       ),
-      style: {
-        backgroundColor: backgroundColor ?? "var(--color-primary)",
-        backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0
-      },
+      style: { backgroundColor: backgroundColor ?? "var(--color-primary)" },
       ...rest,
       children: [
+        backgroundImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: backgroundImage,
+            alt: "",
+            "aria-hidden": "true",
+            loading: "lazy",
+            decoding: "async",
+            className: backgroundImageClass
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "m-0 text-2xl font-bold leading-heading max-w-[760px] max-md:text-xl", children: title }),
         subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 max-w-[640px] text-lg font-normal leading-body opacity-95", children: subtitle }) : null
       ]
@@ -3043,6 +3086,12 @@ var UctMobileBanner = react.forwardRef(
     ...rest
   }, ref) => {
     const Link = LinkComponent ?? "a";
+    const videoRef = react.useRef(null);
+    react.useEffect(() => {
+      const video = videoRef.current;
+      if (!video || !videoUrl) return;
+      video.src = videoUrl;
+    }, [videoUrl]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Link,
       {
@@ -3057,12 +3106,13 @@ var UctMobileBanner = react.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[-15px] left-[10px] w-[51px] h-[50px] rounded-full z-[6] [box-shadow:0px_4px_10px_0px_rgba(254,230,11,0.2)]", children: /* @__PURE__ */ jsxRuntime.jsx(
             "video",
             {
-              src: videoUrl,
+              ref: videoRef,
               poster: posterUrl,
               muted: true,
               loop: true,
               autoPlay: true,
               playsInline: true,
+              preload: "metadata",
               className: "w-full h-full object-cover rounded-full"
             }
           ) }),