@opensite/ui 0.3.3 → 0.4.0

package/dist/timeline-horizontal-phases.js

@@ -351,6 +351,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -414,36 +415,10 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultPhases = [
-  {
-    id: 0,
-    date: "January 15, 2024",
-    title: "Phase I",
-    description: "Initial data collection and model architecture design for the AI system."
-  },
-  {
-    id: 1,
-    date: "March 30, 2024",
-    title: "Phase II",
-    description: "Model training and validation with core dataset implementation."
-  },
-  {
-    id: 2,
-    date: "June 15, 2024",
-    title: "Phase III",
-    description: "Integration of advanced features and performance optimization."
-  },
-  {
-    id: 3,
-    date: "September 1, 2024",
-    title: "Phase IV",
-    description: "Final testing, deployment, and continuous improvement system launch."
-  }
-];
 function TimelineHorizontalPhases({
-  heading = "Timeline",
+  heading,
   currentPhase = 2,
-  phases = defaultPhases,
+  phases,
   className,
   containerClassName,
   headingClassName,
@@ -461,8 +436,8 @@ function TimelineHorizontalPhases({
   id,
   style
 }) {
-  const safeCurrentPhase = phases.length > 0 ? Math.max(0, Math.min(currentPhase, phases.length - 1)) : 0;
-  if (phases.length === 0) {
+  const safeCurrentPhase = (phases?.length ?? 0) > 0 ? Math.max(0, Math.min(currentPhase, (phases?.length ?? 1) - 1)) : 0;
+  if (!phases || phases.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {

package/dist/timeline-product-launch.cjs

@@ -774,6 +774,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -837,42 +838,16 @@ var Section = React__namespace.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,
@@ -935,7 +910,7 @@ function TimelineProductLaunch({
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-2xl font-semibold tracking-tight", cardHeadingClassName), children: cardHeading }),
               renderCta()
             ] }),
-            steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex gap-4 sm:flex-col", children: [
+            steps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex gap-4 sm:flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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-product-launch.d.cts

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig } from './blocks-BfXV7q25.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineProductLaunchStep {

package/dist/timeline-product-launch.d.ts

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig } from './blocks-BYytGxbF.js';
 import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface TimelineProductLaunchStep {

package/dist/timeline-product-launch.js

@@ -752,6 +752,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -815,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,
@@ -913,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

@@ -433,6 +433,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -496,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,
@@ -547,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,
     {
@@ -566,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.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-DP3Vofl4.cjs';
+import './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineProductivityItem {

package/dist/timeline-productivity-list.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-XLPGq8A5.js';
+import './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 
 interface TimelineProductivityItem {

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) {
@@ -412,6 +412,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -475,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,
@@ -526,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,
     {
@@ -545,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",
@@ -320,6 +313,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -383,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,
@@ -432,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",
@@ -464,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,
       {
@@ -482,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 }) })
       }
     );
   }
@@ -498,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-DP3Vofl4.cjs';
+import './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.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-XLPGq8A5.js';
+import './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.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",
@@ -314,6 +307,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -377,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,
@@ -426,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",
@@ -458,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,
       {
@@ -476,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 }) })
       }
     );
   }
@@ -492,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") }),