@opensite/ui 0.3.4 → 0.4.1

package/dist/timeline-product-launch.js

@@ -816,42 +816,16 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSteps = [
-  {
-    number: "01",
-    title: "Ideation",
-    heading: "Brainstorm and validate your concept",
-    description: "Gather insights from market research, customer interviews, and competitor analysis to refine your product idea.",
-    progress: 15,
-    duration: "~2 weeks"
-  },
-  {
-    number: "02",
-    title: "Development",
-    heading: "Build your MVP",
-    description: "Design, prototype, and develop the minimum viable product. Iterate quickly based on early feedback and testing.",
-    progress: 85,
-    duration: "~6 weeks"
-  },
-  {
-    number: "03",
-    title: "Launch",
-    heading: "Go to market",
-    description: "Execute your launch plan with marketing campaigns, outreach, and customer support to maximize impact and adoption.",
-    progress: 100,
-    duration: "Launch complete"
-  }
-];
 function TimelineProductLaunch({
-  heading = "Journey to Product Launch",
-  description = "Follow the essential steps to bring your innovative idea to market and ensure a successful product debut.",
+  heading,
+  description,
   cardHeading = "Guidance from industry leaders",
   ctaAction = {
     label: "Request a demo",
     href: "#"
   },
   ctaSlot,
-  steps = defaultSteps,
+  steps,
   className,
   containerClassName,
   headingClassName,
@@ -914,7 +888,7 @@ function TimelineProductLaunch({
               /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-semibold tracking-tight", cardHeadingClassName), children: cardHeading }),
               renderCta()
             ] }),
-            steps.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-4 sm:flex-col", children: [
+            steps && steps.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex gap-4 sm:flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsxs("div", { className: cn("grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:items-center", `sm:grid-cols-${steps.length}`), children: [
                   /* @__PURE__ */ jsx("div", { className: "absolute inset-0 left-1/2 w-px -translate-x-1/2 bg-ring sm:inset-auto sm:left-auto sm:h-px sm:w-full sm:translate-x-0" }),

package/dist/timeline-productivity-list.cjs

@@ -497,41 +497,9 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    icon: "lucide/cloud",
-    title: "Boost Productivity",
-    description: "Streamline your workflows and eliminate inefficiencies with our advanced task management tools."
-  },
-  {
-    icon: "lucide/x-circle",
-    title: "Minimize Errors",
-    description: "Automate repetitive tasks to reduce human error and ensure consistent results."
-  },
-  {
-    icon: "lucide/users",
-    title: "Enhance Collaboration",
-    description: "Improve team communication and collaboration with real-time updates and shared workspaces."
-  },
-  {
-    icon: "lucide/scale",
-    title: "Scale Seamlessly",
-    description: "Grow your team and projects without hassle, thanks to flexible and scalable solutions."
-  },
-  {
-    icon: "lucide/file-check",
-    title: "Track Progress",
-    description: "Stay on top of your goals with detailed progress tracking and actionable insights."
-  },
-  {
-    icon: "lucide/clock",
-    title: "Save Time",
-    description: "Focus on what matters most by automating time-consuming tasks and processes."
-  }
-];
 function TimelineProductivityList({
   heading,
-  items = defaultItems,
+  items,
   className,
   containerClassName,
   headingClassName,
@@ -548,13 +516,6 @@ function TimelineProductivityList({
   id,
   style
 }) {
-  const defaultHeading = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    "Our tools make",
-    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-    "productivity your",
-    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "superpower" })
-  ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -567,8 +528,8 @@ function TimelineProductivityList({
       patternClassName,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl", headingClassName), children: heading || defaultHeading }) }) }),
-        items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("-mt-8 sm:-mt-12", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-lg", children: heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl", headingClassName), children: heading }) }) }),
+        items && items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("-mt-8 sm:-mt-12", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn("relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12", itemClassName),

package/dist/timeline-productivity-list.js

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
 import React__default from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // lib/utils.ts
 function cn(...inputs) {
@@ -476,41 +476,9 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    icon: "lucide/cloud",
-    title: "Boost Productivity",
-    description: "Streamline your workflows and eliminate inefficiencies with our advanced task management tools."
-  },
-  {
-    icon: "lucide/x-circle",
-    title: "Minimize Errors",
-    description: "Automate repetitive tasks to reduce human error and ensure consistent results."
-  },
-  {
-    icon: "lucide/users",
-    title: "Enhance Collaboration",
-    description: "Improve team communication and collaboration with real-time updates and shared workspaces."
-  },
-  {
-    icon: "lucide/scale",
-    title: "Scale Seamlessly",
-    description: "Grow your team and projects without hassle, thanks to flexible and scalable solutions."
-  },
-  {
-    icon: "lucide/file-check",
-    title: "Track Progress",
-    description: "Stay on top of your goals with detailed progress tracking and actionable insights."
-  },
-  {
-    icon: "lucide/clock",
-    title: "Save Time",
-    description: "Focus on what matters most by automating time-consuming tasks and processes."
-  }
-];
 function TimelineProductivityList({
   heading,
-  items = defaultItems,
+  items,
   className,
   containerClassName,
   headingClassName,
@@ -527,13 +495,6 @@ function TimelineProductivityList({
   id,
   style
 }) {
-  const defaultHeading = /* @__PURE__ */ jsxs(Fragment, { children: [
-    "Our tools make",
-    /* @__PURE__ */ jsx("br", {}),
-    "productivity your",
-    /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "superpower" })
-  ] });
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -546,8 +507,8 @@ function TimelineProductivityList({
       patternClassName,
       style,
       children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 sm:gap-12 lg:grid-cols-2 lg:gap-16", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl", headingClassName), children: heading || defaultHeading }) }) }),
-        items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("-mt-8 sm:-mt-12", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: heading && /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight text-primary sm:text-4xl lg:text-5xl", headingClassName), children: heading }) }) }),
+        items && items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("-mt-8 sm:-mt-12", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cn("relative flex flex-col justify-center overflow-hidden border-b py-8 shadow-none sm:py-12", itemClassName),

package/dist/timeline-scroll-highlight.cjs

@@ -15,13 +15,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
-  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -384,35 +377,9 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    title: "Company Foundation",
-    description: "Started our journey with a simple idea: make technology accessible to everyone. What began as a small team of three developers in a garage has now become the foundation of our mission to democratize software development.",
-    date: "2020",
-    image: blockBrandedIconsAndPlaceholders.placeholder1
-  },
-  {
-    title: "First Product Launch",
-    description: "After months of development, we launched our first product to the public. The response was overwhelming - 10,000 users signed up in the first week, validating our vision and giving us the confidence to scale further.",
-    date: "2021",
-    image: blockBrandedIconsAndPlaceholders.placeholder2
-  },
-  {
-    title: "Series A Funding",
-    description: "Secured our Series A round led by prominent VCs who believed in our mission. This funding allowed us to expand our team, invest in R&D, and prepare for international expansion.",
-    date: "2022",
-    image: blockBrandedIconsAndPlaceholders.placeholder3
-  },
-  {
-    title: "Global Expansion",
-    description: "Opened offices in London, Tokyo, and S\xE3o Paulo, marking our transition from a local startup to a global technology company. Our platform now serves over 500,000 users across 50 countries.",
-    date: "2023",
-    image: blockBrandedIconsAndPlaceholders.placeholder4
-  }
-];
 function TimelineScrollHighlight({
   heading,
-  items = defaultItems,
+  items,
   className,
   containerClassName,
   headingClassName,
@@ -433,9 +400,9 @@ function TimelineScrollHighlight({
 }) {
   const [activeIndex, setActiveIndex] = React.useState(0);
   const itemRefs = React.useRef([]);
-  const safeActiveIndex = items.length > 0 ? Math.max(0, Math.min(activeIndex, items.length - 1)) : 0;
+  const safeActiveIndex = (items?.length ?? 0) > 0 ? Math.max(0, Math.min(activeIndex, (items?.length ?? 1) - 1)) : 0;
   React.useEffect(() => {
-    if (items.length === 0) return;
+    if (!items || items.length === 0) return;
     const observerOptions = {
       root: null,
       rootMargin: "-50% 0px -50% 0px",
@@ -465,13 +432,8 @@ function TimelineScrollHighlight({
     return () => {
       observer.disconnect();
     };
-  }, [items.length]);
-  const defaultHeading = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "From Startup to Global Platform" }),
-    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: " Our Journey" })
-  ] });
-  if (items.length === 0) {
+  }, [items?.length]);
+  if (!items || items.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
@@ -483,7 +445,7 @@ function TimelineScrollHighlight({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading || defaultHeading }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) })
       }
     );
   }
@@ -499,7 +461,7 @@ function TimelineScrollHighlight({
       patternClassName,
       style,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading || defaultHeading }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mt-16 lg:mt-28", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 z-10 border-y bg-background py-3.5", stickyHeaderClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-muted-foreground", children: String(safeActiveIndex + 1).padStart(2, "0") }),

package/dist/timeline-scroll-highlight.js

@@ -3,19 +3,12 @@ import React, { useState, useRef, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // components/blocks/timeline/timeline-scroll-highlight.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
-  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -378,35 +371,9 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultItems = [
-  {
-    title: "Company Foundation",
-    description: "Started our journey with a simple idea: make technology accessible to everyone. What began as a small team of three developers in a garage has now become the foundation of our mission to democratize software development.",
-    date: "2020",
-    image: blockBrandedIconsAndPlaceholders.placeholder1
-  },
-  {
-    title: "First Product Launch",
-    description: "After months of development, we launched our first product to the public. The response was overwhelming - 10,000 users signed up in the first week, validating our vision and giving us the confidence to scale further.",
-    date: "2021",
-    image: blockBrandedIconsAndPlaceholders.placeholder2
-  },
-  {
-    title: "Series A Funding",
-    description: "Secured our Series A round led by prominent VCs who believed in our mission. This funding allowed us to expand our team, invest in R&D, and prepare for international expansion.",
-    date: "2022",
-    image: blockBrandedIconsAndPlaceholders.placeholder3
-  },
-  {
-    title: "Global Expansion",
-    description: "Opened offices in London, Tokyo, and S\xE3o Paulo, marking our transition from a local startup to a global technology company. Our platform now serves over 500,000 users across 50 countries.",
-    date: "2023",
-    image: blockBrandedIconsAndPlaceholders.placeholder4
-  }
-];
 function TimelineScrollHighlight({
   heading,
-  items = defaultItems,
+  items,
   className,
   containerClassName,
   headingClassName,
@@ -427,9 +394,9 @@ function TimelineScrollHighlight({
 }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const itemRefs = useRef([]);
-  const safeActiveIndex = items.length > 0 ? Math.max(0, Math.min(activeIndex, items.length - 1)) : 0;
+  const safeActiveIndex = (items?.length ?? 0) > 0 ? Math.max(0, Math.min(activeIndex, (items?.length ?? 1) - 1)) : 0;
   useEffect(() => {
-    if (items.length === 0) return;
+    if (!items || items.length === 0) return;
     const observerOptions = {
       root: null,
       rootMargin: "-50% 0px -50% 0px",
@@ -459,13 +426,8 @@ function TimelineScrollHighlight({
     return () => {
       observer.disconnect();
     };
-  }, [items.length]);
-  const defaultHeading = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "font-medium", children: "From Startup to Global Platform" }),
-    /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " Our Journey" })
-  ] });
-  if (items.length === 0) {
+  }, [items?.length]);
+  if (!items || items.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {
@@ -477,7 +439,7 @@ function TimelineScrollHighlight({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading || defaultHeading }) })
+        children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) })
       }
     );
   }
@@ -493,7 +455,7 @@ function TimelineScrollHighlight({
       patternClassName,
       style,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading || defaultHeading }) }),
+        /* @__PURE__ */ jsx("div", { className: containerClassName, children: heading && /* @__PURE__ */ jsx("h1", { className: cn("max-w-4xl text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) }),
         /* @__PURE__ */ jsxs("div", { className: "relative mt-16 lg:mt-28", children: [
           /* @__PURE__ */ jsx("div", { className: cn("sticky top-0 z-10 border-y bg-background py-3.5", stickyHeaderClassName), children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 text-2xl md:text-4xl", children: [
             /* @__PURE__ */ jsx("p", { className: "font-mono text-muted-foreground", children: String(safeActiveIndex + 1).padStart(2, "0") }),

package/dist/timeline-scroll-sticky-image.cjs

@@ -15,12 +15,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholderDark1: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholderDark2: "https://cdn.ing/assets/files/record/286210/jdwpoe6le13i7l4hn0er8ay9t5n9",
-  placeholderDark3: "https://cdn.ing/assets/files/record/286211/1d12hqfn5zpsfloai89gqq98kht0"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -383,35 +377,9 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSections = [
-  {
-    subTitle: "Smart Dashboard",
-    title: "Streamline Your Workflow Process",
-    description: "Leverage our intuitive interface to streamline your workflow. Access powerful tools and features designed to enhance productivity and efficiency.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark1
-  },
-  {
-    subTitle: "Team Management",
-    title: "Collaborate Seamlessly with Teams",
-    description: "Enable smooth collaboration across your organization. Share resources efficiently with customizable access controls and permission settings.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark2
-  },
-  {
-    subTitle: "Advanced Analytics",
-    title: "Flexible Configuration Options",
-    description: "Customize your experience with advanced configuration options. Adapt the platform to your specific needs with our versatile solution.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark3
-  },
-  {
-    subTitle: "Automation Tools",
-    title: "Simplified User Experience",
-    description: "Experience a user-friendly interface designed for efficiency. Our intuitive building blocks make complex tasks simple and accessible.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark1
-  }
-];
 function TimelineScrollStickyImage({
-  heading = "Transform your workflow with our solution",
-  sections = defaultSections,
+  heading,
+  sections,
   className,
   containerClassName,
   headingClassName,
@@ -433,9 +401,9 @@ function TimelineScrollStickyImage({
 }) {
   const [activeIndex, setActiveIndex] = React.useState(0);
   const sectionRefs = React.useRef([]);
-  const safeActiveIndex = sections.length > 0 ? Math.max(0, Math.min(activeIndex, sections.length - 1)) : 0;
+  const safeActiveIndex = (sections?.length ?? 0) > 0 ? Math.max(0, Math.min(activeIndex, (sections?.length ?? 1) - 1)) : 0;
   React.useEffect(() => {
-    if (sections.length === 0) return;
+    if (!sections || sections.length === 0) return;
     const handleScroll = () => {
       const viewportHeight = window.innerHeight;
       const viewportCenter = viewportHeight / 2;
@@ -457,8 +425,8 @@ function TimelineScrollStickyImage({
     window.addEventListener("scroll", handleScroll);
     handleScroll();
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [sections.length]);
-  if (sections.length === 0) {
+  }, [sections?.length]);
+  if (!sections || sections.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {

package/dist/timeline-scroll-sticky-image.js

@@ -9,12 +9,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholderDark1: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholderDark2: "https://cdn.ing/assets/files/record/286210/jdwpoe6le13i7l4hn0er8ay9t5n9",
-  placeholderDark3: "https://cdn.ing/assets/files/record/286211/1d12hqfn5zpsfloai89gqq98kht0"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -377,35 +371,9 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSections = [
-  {
-    subTitle: "Smart Dashboard",
-    title: "Streamline Your Workflow Process",
-    description: "Leverage our intuitive interface to streamline your workflow. Access powerful tools and features designed to enhance productivity and efficiency.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark1
-  },
-  {
-    subTitle: "Team Management",
-    title: "Collaborate Seamlessly with Teams",
-    description: "Enable smooth collaboration across your organization. Share resources efficiently with customizable access controls and permission settings.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark2
-  },
-  {
-    subTitle: "Advanced Analytics",
-    title: "Flexible Configuration Options",
-    description: "Customize your experience with advanced configuration options. Adapt the platform to your specific needs with our versatile solution.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark3
-  },
-  {
-    subTitle: "Automation Tools",
-    title: "Simplified User Experience",
-    description: "Experience a user-friendly interface designed for efficiency. Our intuitive building blocks make complex tasks simple and accessible.",
-    image: blockBrandedIconsAndPlaceholders.placeholderDark1
-  }
-];
 function TimelineScrollStickyImage({
-  heading = "Transform your workflow with our solution",
-  sections = defaultSections,
+  heading,
+  sections,
   className,
   containerClassName,
   headingClassName,
@@ -427,9 +395,9 @@ function TimelineScrollStickyImage({
 }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const sectionRefs = useRef([]);
-  const safeActiveIndex = sections.length > 0 ? Math.max(0, Math.min(activeIndex, sections.length - 1)) : 0;
+  const safeActiveIndex = (sections?.length ?? 0) > 0 ? Math.max(0, Math.min(activeIndex, (sections?.length ?? 1) - 1)) : 0;
   useEffect(() => {
-    if (sections.length === 0) return;
+    if (!sections || sections.length === 0) return;
     const handleScroll = () => {
       const viewportHeight = window.innerHeight;
       const viewportCenter = viewportHeight / 2;
@@ -451,8 +419,8 @@ function TimelineScrollStickyImage({
     window.addEventListener("scroll", handleScroll);
     handleScroll();
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [sections.length]);
-  if (sections.length === 0) {
+  }, [sections?.length]);
+  if (!sections || sections.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {

package/dist/timeline-stepper-animated.cjs

@@ -556,13 +556,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder1: "https://cdn.ing/assets/files/record/286200/io0rg4wv8jd2o792q4uouxg4d5k8",
-  placeholder2: "https://cdn.ing/assets/files/record/286201/l8f27khqrs9eumdi9r0ihvbe886u",
-  placeholder3: "https://cdn.ing/assets/files/record/286203/itwrx0hqshkompfxvikdmj77xoh4",
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -925,28 +918,6 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultSteps = [
-  {
-    title: "Introduction",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder1,
-    description: "Welcome to our step-by-step guide. This introduction will help you get started with the process and understand what to expect."
-  },
-  {
-    title: "Personal Information",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder2,
-    description: "In this section, we'll collect some basic information about you to personalize your experience and provide better recommendations."
-  },
-  {
-    title: "Address Details",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder3,
-    description: "Please provide your address details so we can deliver your products to the right location and calculate shipping costs."
-  },
-  {
-    title: "Review & Submit",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder4,
-    description: "Take a moment to review all the information you've provided before finalizing your submission. You can go back to any step."
-  }
-];
 var ProcessBar = ({ currentStep, steps }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full scale-75", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
@@ -1027,8 +998,8 @@ var NavButtons = ({ handlePrev, handleNext }) => /* @__PURE__ */ jsxRuntime.jsxs
   )
 ] });
 function TimelineStepperAnimated({
-  heading = "Stepper",
-  steps = defaultSteps,
+  heading,
+  steps,
   initialStep = 1,
   className,
   containerClassName,
@@ -1047,16 +1018,16 @@ function TimelineStepperAnimated({
   style,
   optixFlowConfig
 }) {
-  const safeInitialStep = steps.length > 0 ? Math.max(0, Math.min(initialStep, steps.length - 1)) : 0;
+  const safeInitialStep = (steps?.length ?? 0) > 0 ? Math.max(0, Math.min(initialStep, (steps?.length ?? 1) - 1)) : 0;
   const [currentStep, setCurrentStep] = React.useState(safeInitialStep);
   const handleNext = () => {
-    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
+    setCurrentStep((prev) => Math.min(prev + 1, (steps?.length ?? 1) - 1));
   };
   const handlePrev = () => {
     setCurrentStep((prev) => Math.max(prev - 1, 0));
   };
-  const safeCurrentStep = steps.length > 0 ? Math.max(0, Math.min(currentStep, steps.length - 1)) : 0;
-  if (steps.length === 0) {
+  const safeCurrentStep = (steps?.length ?? 0) > 0 ? Math.max(0, Math.min(currentStep, (steps?.length ?? 1) - 1)) : 0;
+  if (!steps || steps.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {