@opensite/ui 0.3.4 → 0.4.0

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.d.cts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineScrollItem {

package/dist/timeline-scroll-highlight.d.ts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import './patternSvgs-c5ZNVoTT.js';
-import './blocks-k17uluAz.js';
+import './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface TimelineScrollItem {

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.d.cts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineSection {

package/dist/timeline-scroll-sticky-image.d.ts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import './patternSvgs-c5ZNVoTT.js';
-import './blocks-k17uluAz.js';
+import './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface TimelineSection {

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,
       {

package/dist/timeline-stepper-animated.d.cts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineStep {

package/dist/timeline-stepper-animated.d.ts

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import './patternSvgs-c5ZNVoTT.js';
-import './blocks-k17uluAz.js';
+import './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface TimelineStep {

package/dist/timeline-stepper-animated.js

@@ -535,13 +535,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",
@@ -904,28 +897,6 @@ var Section = React__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__ */ jsx("div", { className: "relative w-full scale-75", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: steps.map((step, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
   /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsx(
     motion.div,
@@ -1006,8 +977,8 @@ var NavButtons = ({ handlePrev, handleNext }) => /* @__PURE__ */ jsxs("div", { c
   )
 ] });
 function TimelineStepperAnimated({
-  heading = "Stepper",
-  steps = defaultSteps,
+  heading,
+  steps,
   initialStep = 1,
   className,
   containerClassName,
@@ -1026,16 +997,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] = 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__ */ jsx(
       Section,
       {

package/dist/timeline-tabbed-phases.cjs

@@ -639,13 +639,6 @@ function TabsContent({
     }
   );
 }
-
-// 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",
@@ -1008,51 +1001,9 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultPhases = [
-  {
-    id: "phase1",
-    phase: "1",
-    title: "Initialize",
-    date: "02/03/2025",
-    heading: "How to Initialize",
-    description: "This phase covers the basics of getting started. Learn how to set up, configure, and prepare for the next steps. This phase covers the basics of getting started. Learn how to set up, configure, and prepare for the next steps.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder1,
-    imageAlt: "Phase 1 illustration"
-  },
-  {
-    id: "phase2",
-    phase: "2",
-    title: "Build",
-    date: "21/03/2025",
-    heading: "How to Build",
-    description: "In this phase, focus on structuring and building the core components. Understand best practices for development. In this phase, focus on structuring and building the core components. Understand best practices for development.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder2,
-    imageAlt: "Phase 2 illustration"
-  },
-  {
-    id: "phase3",
-    phase: "3",
-    title: "Test",
-    date: "06/04/2025",
-    heading: "How to Test",
-    description: "Testing ensures quality and reliability. Learn about debugging, fixing issues, and refining the project. Testing ensures quality and reliability. Learn about debugging, fixing issues, and refining the project.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder3,
-    imageAlt: "Phase 3 illustration"
-  },
-  {
-    id: "phase4",
-    phase: "4",
-    title: "Launch",
-    date: "14/04/2025",
-    heading: "How to Launch",
-    description: "The final phase focuses on optimization, deployment, and ensuring everything runs smoothly for release. The final phase focuses on optimization, deployment, and ensuring everything runs smoothly for release.",
-    imageSrc: blockBrandedIconsAndPlaceholders.placeholder4,
-    imageAlt: "Phase 4 illustration"
-  }
-];
 function TimelineTabbedPhases({
-  heading = "Just Four Phases",
-  phases = defaultPhases,
+  heading,
+  phases,
   downloadAction = {
     label: "Download the app",
     href: "#"
@@ -1105,7 +1056,7 @@ function TimelineTabbedPhases({
     }
     return null;
   };
-  if (phases.length === 0) {
+  if (!phases || phases.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {