@opensite/ui 0.3.3 → 0.4.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",
@@ -319,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",
@@ -382,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,
@@ -432,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;
@@ -456,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-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 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-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 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",
@@ -313,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",
@@ -376,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,
@@ -426,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;
@@ -450,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",
@@ -861,6 +854,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",
@@ -924,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,
@@ -1026,8 +998,8 @@ var NavButtons = ({ handlePrev, handleNext }) => /* @__PURE__ */ jsxRuntime.jsxs
   )
 ] });
 function TimelineStepperAnimated({
-  heading = "Stepper",
-  steps = defaultSteps,
+  heading,
+  steps,
   initialStep = 1,
   className,
   containerClassName,
@@ -1046,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-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 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-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 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",
@@ -840,6 +833,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",
@@ -903,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,
@@ -1005,8 +977,8 @@ var NavButtons = ({ handlePrev, handleNext }) => /* @__PURE__ */ jsxs("div", { c
   )
 ] });
 function TimelineStepperAnimated({
-  heading = "Stepper",
-  steps = defaultSteps,
+  heading,
+  steps,
   initialStep = 1,
   className,
   containerClassName,
@@ -1025,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",
@@ -944,6 +937,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",
@@ -1007,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: "#"
@@ -1104,7 +1056,7 @@ function TimelineTabbedPhases({
     }
     return null;
   };
-  if (phases.length === 0) {
+  if (!phases || phases.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {

package/dist/timeline-tabbed-phases.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 TimelineTabbedPhase {

package/dist/timeline-tabbed-phases.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 TimelineTabbedPhase {

package/dist/timeline-tabbed-phases.js

@@ -617,13 +617,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",
@@ -922,6 +915,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",
@@ -985,51 +979,9 @@ var Section = React__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: "#"
@@ -1082,7 +1034,7 @@ function TimelineTabbedPhases({
     }
     return null;
   };
-  if (phases.length === 0) {
+  if (!phases || phases.length === 0) {
     return /* @__PURE__ */ jsx(
       Section,
       {

package/dist/timeline-two-column-featured.cjs

@@ -450,11 +450,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  placeholder4: "https://cdn.ing/assets/files/record/286204/7rhj7uvcnozjm6c2q4txtptfcmpx",
-  placeholder5: "https://cdn.ing/assets/files/record/286205/e0az5aimgxvqa11grxzaok7fbsvr"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -753,6 +748,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",
@@ -816,49 +812,13 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultFeatures = [
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder4,
-    imageAlt: "Dedicated Support",
-    title: "Dedicated Support",
-    description: "Expanded operations to 5 new countries, reaching millions of new users."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Series B Funding",
-    title: "Series B Funding",
-    description: "Secured $50M in Series B funding to accelerate product development."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Product Launch",
-    title: "Product Launch",
-    description: "Successfully launched our flagship product to market."
-  },
-  {
-    image: blockBrandedIconsAndPlaceholders.placeholder5,
-    imageAlt: "Company Founded",
-    title: "Company Founded",
-    description: "Started with a vision to revolutionize the industry."
-  }
-];
-var defaultPrimaryAction = {
-  label: "Start Now",
-  href: "#",
-  variant: "default"
-};
-var defaultSecondaryAction = {
-  label: "Book a demo",
-  href: "#",
-  variant: "outline"
-};
 function TimelineTwoColumnFeatured({
-  heading = "Experience the difference with us",
-  description = "We believe in creating lasting partnerships with our clients, focusing on long-term success through collaborative innovation and dedicated support.",
-  primaryAction = defaultPrimaryAction,
-  secondaryAction = defaultSecondaryAction,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
   actionsSlot,
-  features = defaultFeatures,
+  features,
   className,
   containerClassName,
   headingClassName,
@@ -926,7 +886,7 @@ function TimelineTwoColumnFeatured({
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground md:text-xl", descriptionClassName), children: description }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-col gap-4 lg:flex-row", actionsClassName), children: renderActions() })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-12 md:gap-20", featuresClassName), children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border p-2", featureClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {