{"success":true,"data":{"category":{"slug":"contact","name":"Contact","description":"Collection of contact components"},"blocks":[{"id":"contact-callback","name":"Contact Callback Request","title":"Contact Callback Request","category":"Contact","categorySlug":"contact","description":"A comprehensive callback scheduling form with date/time selection, timezone, topic selection, and detailed information fields. Ideal for professional services requiring scheduled consultations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290559/jnd4ewh1tdfcgo3zkywtrtq0yya5/contact-callback-desktop.png","mobile":"https://cdn.ing/assets/i/r/290560/lli5o7npquru6vbgfeb1frpv73qi/contact-callback-mobile.png"},"componentPath":"blocks/contact/contact-callback.tsx","code":"\"use client\";\n\nimport { ContactCallback } from \"@opensite/ui/blocks/contact/contact-callback\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"callback_time\",\n    type: \"radio\",\n    label: \"Preferred Callback Time\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"morning\",\n        label: \"Morning\",\n        description: \"8 AM - 12 PM\",\n      },\n      {\n        value: \"afternoon\",\n        label: \"Afternoon\",\n        description: \"12 PM - 5 PM\",\n      },\n      {\n        value: \"evening\",\n        label: \"Evening\",\n        description: \"5 PM - 8 PM\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"What can we help you with?\",\n    placeholder: \"Briefly describe what you'd like to discuss...\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactCallback\n      heading=\"Request a Callback\"\n      description=\"Prefer to talk? Leave your number and our team will call you back at your preferred time. We typically respond within 2-4 hours during business hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you! We'll call you back during your preferred time window.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Request Callback\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"callbackProcessLabel":{"type":"string","description":"Label for the callback process info box heading","required":false},"callbackProcessDescription":{"type":"string","description":"Description for the callback process info box","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","callback","scheduling","form","appointment","consultation","professional-services"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a callback request use case — full name, phone (required), email (optional), preferred callback time radio (morning/afternoon/evening), and optional message textarea — do not change the field set unless the site has clearly different requirements. Preserve the 'callbackProcessLabel' and 'callbackProcessDescription' props to explain the callback process to users. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-card","name":"Contact Card Form","title":"Contact Card Form","category":"Contact","categorySlug":"contact","description":"A simple contact form with card layout featuring form fields on one side and contact information with multiple contact methods on the other. Clean, professional design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290620/vn3rjfng8wj0ww1hnx452ql9m13q/cleanshot-2026-02-21-at-15-33-47.png","mobile":"https://cdn.ing/assets/i/r/290619/zhv93wdajasesuhmsvieqziesyo7/cleanshot-2026-02-21-at-15-34-02.png"},"componentPath":"blocks/contact/contact-card.tsx","code":"\"use client\";\n\nimport { ContactCard } from \"@opensite/ui/blocks/contact/contact-card\";\nimport { demoFormConfig, demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Message\",\n    placeholder: \"How can we help you today?\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactCard\n      heading=\"Get In Touch\"\n      description=\"We'd love to hear from you. Send us a message and we'll respond as soon as possible.\"\n      contactOptions={[\n        {\n          icon: \"lucide/phone\",\n          info: \"+1 (555) 987-6543\",\n          href: \"tel:+15559876543\",\n        },\n        {\n          icon: \"lucide/mail\",\n          info: \"support@example.com\",\n          href: \"mailto:support@example.com\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          info: \"456 Business Ave, New York, NY 10001\",\n          href: \"https://maps.google.com\",\n        },\n        {\n          icon: \"lucide/clock\",\n          info: \"Mon-Fri: 9 AM - 6 PM EST\",\n          href: \"#\",\n        },\n      ]}\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thanks for reaching out! We'll be in touch soon.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"contactOptions":{"type":"array","description":"Contact options to display with icons","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the contact option","required":true},"info":{"type":"string","description":"Contact information text","required":true},"href":{"type":"string","description":"Optional href for the contact option","required":false}},"typeLabel":"ContactOption"},"typeLabel":"ContactOption[]","required":false},"contactOptionsSlot":{"type":"object","description":"Custom slot for rendering contact options (overrides contactOptions array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Social media links to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the social platform","required":true},"href":{"type":"string","description":"Link href","required":true},"label":{"type":"string","description":"Accessible label for the link","required":true}},"typeLabel":"ContactDarkSocialLink"},"typeLabel":"ContactDarkSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"infoPanelClassName":{"type":"string","description":"Additional CSS classes for the info panel","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"contactOptionsClassName":{"type":"string","description":"Additional CSS classes for the contact options container","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the two-column grid wrapper","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","form","card","split-layout","contact-info","simple"],"performance":{},"importantUsageNotes":"Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data, if the brand/location hasn't supplied the contact data points, don't generate/guess, just skip over that data point(s) and only use ones stored in the system."},{"id":"contact-careers","name":"Contact Careers Application","title":"Contact Careers Application","category":"Contact","categorySlug":"contact","description":"A comprehensive job application form with position selection, resume upload, LinkedIn/portfolio links, availability options, and personal information. Perfect for career pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/292525/366yn7bn0o0wiqlzdlhiqiaekuv1/cleanshot-2026-02-27-at-21-12-43.png","mobile":"https://cdn.ing/assets/i/r/292525/366yn7bn0o0wiqlzdlhiqiaekuv1/cleanshot-2026-02-27-at-21-12-43.png"},"componentPath":"blocks/contact/contact-careers.tsx","code":"\"use client\";\n\nimport { ContactCareers } from \"@opensite/ui/blocks/contact/contact-careers\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"position\",\n    type: \"select\",\n    label: \"Position of Interest\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"engineering\",\n        label: \"Software Engineer\",\n        description: \"Full-stack or specialized roles.\",\n      },\n      {\n        value: \"design\",\n        label: \"Product Designer\",\n        description: \"UI/UX and product design.\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Marketing Manager\",\n        description: \"Digital marketing and content.\",\n      },\n      {\n        value: \"sales\",\n        label: \"Sales Representative\",\n        description: \"B2B or B2C sales roles.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other Position\",\n        description: \"Something else not listed.\",\n      },\n    ],\n  },\n  {\n    name: \"linkedin\",\n    type: \"text\",\n    label: \"LinkedIn Profile\",\n    placeholder: \"https://linkedin.com/in/yourprofile\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"resume\",\n    type: \"file\",\n    label: \"Resume/CV\",\n    placeholder: \"Upload your resume or CV...\",\n    required: true,\n    accept: \".pdf,.doc,.docx\",\n    maxSize: 5 * 1024 * 1024,\n    maxFiles: 1,\n    columnSpan: 12,\n  },\n  {\n    name: \"portfolio\",\n    type: \"text\",\n    label: \"Portfolio URL (Optional)\",\n    placeholder: \"https://yourportfolio.com\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Cover Letter / Why You're Interested\",\n    placeholder: \"Tell us why you'd like to join our team...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactCareers\n      heading=\"Join Our Team\"\n      description=\"We're always looking for talented individuals to join our growing team. Submit your application below and we'll review it within 5-7 business days.\"\n      sidebarTitle=\"Why Work With Us?\"\n      sidebarDescription=\"At our company, we value innovation, collaboration, and growth. We offer competitive salaries, comprehensive benefits, and opportunities for professional development. If you're passionate about making an impact and working with a dynamic team, we'd love to hear from you!\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for applying! We'll review your application and get back to you within 5-7 business days if there's a match.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Application\",\n          },\n        },\n      }}\n      jobListings={[\n        {\n          id: \"1\",\n          title: \"Rust Deveeloper\",\n          description: (\n            <div className=\"flex flex-col gap-4 py-4 pr-4 text-balance\">\n              <h4 className=\"text-xl opacity-75\">\n                Join our team as a Rust Developer and work on cutting-edge\n                projects.\n              </h4>\n\n              <p className=\"text-sm leading-relaxed\">\n                We're looking for a passionate Rust Developer to join our team.\n                You'll work on innovative projects and contribute to our growing\n                codebase.\n              </p>\n            </div>\n          ),\n        },\n        {\n          id: \"2\",\n          title: \"Senior Product Designer\",\n          description: (\n            <div className=\"flex flex-col gap-4 py-4 pr-4 text-balance\">\n              <h4 className=\"text-xl opacity-75\">\n                We're seeking a Senior Product Designer to lead our design\n                efforts and create exceptional user experiences.\n              </h4>\n\n              <p className=\"text-sm leading-relaxed\">\n                As a Senior Product Designer, you'll play a key role in shaping\n                our products and ensuring they meet the needs of our users. Your\n                expertise will help us create intuitive and engaging designs.\n              </p>\n            </div>\n          ),\n        },\n        {\n          id: \"3\",\n          title: \"Marketing Manager\",\n          description: (\n            <div className=\"flex flex-col gap-4 py-4 pr-4 text-balance\">\n              <h4 className=\"text-xl opacity-75\">\n                We're hiring a Marketing Manager to drive our marketing strategy\n                and grow our brand presence.\n              </h4>\n\n              <p className=\"text-sm leading-relaxed\">\n                As a Marketing Manager, you'll be responsible for developing and\n                executing marketing campaigns, managing our online presence, and\n                analyzing performance metrics to optimize our marketing efforts.\n              </p>\n            </div>\n          ),\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"jobListings":{"type":"array","description":"Array of job listings to display in the sidebar accordion.\nEach item will render as an expandable card showing job details.","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the job listing","required":true},"title":{"type":"object","description":"Job title (displayed as accordion trigger)","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Job description/details (displayed in accordion content)","typeLabel":"React.ReactNode","required":true}},"typeLabel":"JobListingItem"},"typeLabel":"JobListingItem[]","required":false},"sidebarComponent":{"type":"object","description":"Custom sidebar component that replaces the default job listings accordion.\nUse this for fully custom sidebar content.","typeLabel":"React.ReactNode","required":false},"sidebarTitle":{"type":"string","description":"Title for the sidebar section","required":false},"sidebarDescription":{"type":"string","description":"Description for the sidebar section","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar wrapper","required":false},"sidebarStickyClassName":{"type":"string","description":"Additional CSS classes for the sticky container inside the sidebar","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"accordionItemClassName":{"type":"string","description":"Additional CSS classes for accordion items","required":false},"accordionTriggerClassName":{"type":"string","description":"Additional CSS classes for accordion triggers","required":false},"accordionContentClassName":{"type":"string","description":"Additional CSS classes for accordion content","required":false},"formCardTitle":{"type":"string","description":"Title for the form card","required":false},"formCardDescription":{"type":"string","description":"Description for the form card","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","careers","jobs","application","form","resume","upload","hiring"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is actively hiring — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a job application use case — first/last name, email, phone, position of interest select, LinkedIn profile, resume file upload, portfolio URL, and cover letter textarea — do not change the field set unless the site has clearly different requirements. Supply real open positions in the 'jobListings' accordion sidebar; do not fabricate job listings — if the site has no real open positions, omit 'jobListings' or leave the sidebar with a descriptive 'sidebarDescription' only. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-catering","name":"Contact Catering Inquiry","title":"Contact Catering Inquiry","category":"Contact","categorySlug":"contact","description":"A catering inquiry form with event type selection, guest count, date picker, dietary restrictions checkboxes, and venue information. Ideal for catering and event planning businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290563/zj1h6nmh50psa4rbiic0mjdv2a3b/contact-catering-desktop.png","mobile":"https://cdn.ing/assets/i/r/290564/hwril66be59ssgr01f0w51b16t6a/contact-catering-mobile.png"},"componentPath":"blocks/contact/contact-catering.tsx","code":"\"use client\";\n\nimport { ContactCatering } from \"@opensite/ui/blocks/contact/contact-catering\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company/Organization\",\n    placeholder: \"Company name (optional)\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"event_type\",\n    type: \"radio\",\n    label: \"Event Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"wedding\",\n        label: \"Wedding\",\n        description: \"Wedding reception or ceremony.\",\n      },\n      {\n        value: \"corporate\",\n        label: \"Corporate Event\",\n        description: \"Business meeting, conference, or party.\",\n      },\n      {\n        value: \"birthday\",\n        label: \"Birthday Party\",\n        description: \"Birthday celebration.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other Event\",\n        description: \"Something else not listed.\",\n      },\n    ],\n  },\n  {\n    name: \"event_date\",\n    type: \"date-picker\",\n    label: \"Event Date\",\n    placeholder: \"Select event date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"guest_count\",\n    type: \"select\",\n    label: \"Number of Guests\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"10-25\",\n        label: \"10-25 guests\",\n      },\n      {\n        value: \"25-50\",\n        label: \"25-50 guests\",\n      },\n      {\n        value: \"50-100\",\n        label: \"50-100 guests\",\n      },\n      {\n        value: \"100-200\",\n        label: \"100-200 guests\",\n      },\n      {\n        value: \"200+\",\n        label: \"200+ guests\",\n      },\n    ],\n  },\n  {\n    name: \"menu_type\",\n    type: \"checkbox-group\",\n    label: \"Menu Preferences\",\n    placeholder: \"Select menu types\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"appetizers\",\n        label: \"Appetizers\",\n        description: \"Hors d'oeuvres and starters.\",\n      },\n      {\n        value: \"buffet\",\n        label: \"Buffet\",\n        description: \"Self-serve buffet style.\",\n      },\n      {\n        value: \"plated\",\n        label: \"Plated Dinner\",\n        description: \"Formal plated service.\",\n      },\n      {\n        value: \"dessert\",\n        label: \"Dessert\",\n        description: \"Desserts and sweets.\",\n      },\n      {\n        value: \"bar\",\n        label: \"Bar Service\",\n        description: \"Beverage and bar services.\",\n      },\n    ],\n  },\n  {\n    name: \"dietary_restrictions\",\n    type: \"text\",\n    label: \"Dietary Restrictions\",\n    placeholder: \"Vegetarian, vegan, gluten-free, etc.\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Additional Details\",\n    placeholder: \"Tell us more about your event, special requests, venue location, etc...\",\n    required: false,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactCatering\n      heading=\"Request a Catering Quote\"\n      description=\"Planning an event? Let us handle the food! Fill out the form below and we'll provide you with a custom quote within 24 hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your catering inquiry! We'll review your event details and send you a custom quote within 24 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Get Quote\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"dashedGridFadeTopLeft\"\n      patternOpacity={0.3}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","catering","events","form","inquiry","dietary","event-planning"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a catering quote request use case — name, company (optional), email, phone, event type radio, event date picker, guest count select, menu preferences checkbox-group, dietary restrictions, and additional details textarea — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-consultation","name":"Contact Consultation Booking","title":"Contact Consultation Booking","category":"Contact","categorySlug":"contact","description":"A consultation booking form with service selection, duration preferences, budget range, and detailed information fields. Perfect for professional services and consulting businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290565/poh0jfqdqhy96hf5lr8ho9nijrrn/contact-consultation-desktop.png","mobile":"https://cdn.ing/assets/i/r/290566/mksngqmna22t3zwkj7r83zychnec/contact-consultation-mobile.png"},"componentPath":"blocks/contact/contact-consultation.tsx","code":"\"use client\";\n\nimport { ContactConsultation } from \"@opensite/ui/blocks/contact/contact-consultation\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"industry\",\n    type: \"select\",\n    label: \"Industry\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"technology\",\n        label: \"Technology\",\n      },\n      {\n        value: \"healthcare\",\n        label: \"Healthcare\",\n      },\n      {\n        value: \"finance\",\n        label: \"Finance\",\n      },\n      {\n        value: \"retail\",\n        label: \"Retail\",\n      },\n      {\n        value: \"manufacturing\",\n        label: \"Manufacturing\",\n      },\n      {\n        value: \"education\",\n        label: \"Education\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n      },\n    ],\n  },\n  {\n    name: \"consultation_type\",\n    type: \"radio\",\n    label: \"Consultation Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"strategy\",\n        label: \"Strategy Session\",\n        description: \"Long-term planning and roadmap.\",\n      },\n      {\n        value: \"technical\",\n        label: \"Technical Consultation\",\n        description: \"Architecture and implementation review.\",\n      },\n      {\n        value: \"discovery\",\n        label: \"Discovery Call\",\n        description: \"Initial project exploration.\",\n      },\n      {\n        value: \"followup\",\n        label: \"Follow-up Session\",\n        description: \"Continue previous discussion.\",\n      },\n    ],\n  },\n  {\n    name: \"preferred_date\",\n    type: \"date-picker\",\n    label: \"Preferred Date\",\n    placeholder: \"Select a date\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"time_preference\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"morning\",\n        label: \"Morning (9 AM - 12 PM)\",\n      },\n      {\n        value: \"afternoon\",\n        label: \"Afternoon (12 PM - 5 PM)\",\n      },\n      {\n        value: \"evening\",\n        label: \"Evening (5 PM - 7 PM)\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"What would you like to discuss?\",\n    placeholder: \"Tell us about your goals, challenges, and what you hope to achieve from this consultation...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactConsultation\n      heading=\"Schedule a Free Consultation\"\n      description=\"Book a 30-minute strategy session with our experts. We'll discuss your goals, challenges, and how we can help you succeed.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for booking! We'll confirm your consultation time within 24 hours and send you a calendar invite.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Book Consultation\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","consultation","booking","form","services","professional","advisory"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a free consultation booking use case — first/last name, email, phone, company, industry select, consultation type radio (strategy/technical/discovery/follow-up), preferred date picker, preferred time select, and goals textarea — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-dark","name":"Contact Dark Theme","title":"Contact Dark","category":"Contact","categorySlug":"contact","description":"A dark-themed contact form with split layout featuring form fields on one side and contact information with social links on a dark background. Modern, high-contrast design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290610/bq7ydik61cg7ijixrctyvsviam26/cleanshot-2026-02-21-at-02-33-04.png","mobile":"https://cdn.ing/assets/i/r/290609/6cqflyybhpfng2dw4g3rji3b6xax/cleanshot-2026-02-21-at-02-33-26.png"},"componentPath":"blocks/contact/contact-dark.tsx","code":"\"use client\";\n\nimport { ContactDark } from \"@opensite/ui/blocks/contact/contact-dark\";\nimport { demoFormConfig, demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    // type: \"radio\",\n    type: \"select\",\n    label: \"Inquiry Type\",\n    required: true,\n    columnSpan: 12,\n    // layout: \"grid\",\n    options: [\n      {\n        value: \"general\",\n        label: \"General Inquiry\",\n        description: \"Question about our services.\",\n      },\n      {\n        value: \"support\",\n        label: \"Support\",\n        description: \"Assistance from our support team.\",\n      },\n      {\n        value: \"sales\",\n        label: \"Sales Question\",\n        description: \"Question about our pricing or products.\",\n      },\n      {\n        value: \"partnership\",\n        label: \"Partnership Opportunity\",\n        description: \"Opportunity to collaborate with us.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Message\",\n    placeholder: \"Tell us more about your inquiry...\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactDark\n      heading=\"Get In Touch\"\n      description=\"Have a question or want to work together? Fill out the form below and we'll get back to you within 24 hours.\"\n      contactHeading=\"Contact Information\"\n      contactDescription=\"Reach out to us directly using any of the methods below, or fill out the form and we'll respond within 24 hours.\"\n      contactOptions={[\n        {\n          icon: \"lucide/phone\",\n          info: \"+1 (555) 123-4567\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/mail\",\n          info: \"hello@example.com\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          info: \"123 Main Street, San Francisco, CA 94105\",\n          href: \"#\",\n        },\n      ]}\n      socialLinks={[\n        {\n          icon: \"lucide/twitter\",\n          href: \"https://twitter.com\",\n          label: \"Follow us on Twitter\",\n        },\n        {\n          icon: \"lucide/facebook\",\n          href: \"https://facebook.com\",\n          label: \"Like us on Facebook\",\n        },\n        {\n          icon: \"lucide/linkedin\",\n          href: \"https://linkedin.com\",\n          label: \"Connect on LinkedIn\",\n        },\n        {\n          icon: \"lucide/instagram\",\n          href: \"https://instagram.com\",\n          label: \"Follow us on Instagram\",\n        },\n      ]}\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for contacting us! We'll get back to you shortly.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the heading","typeLabel":"React.ReactNode","required":false},"contactHeading":{"type":"object","description":"Contact information heading","typeLabel":"React.ReactNode","required":false},"contactDescription":{"type":"object","description":"Contact information description","typeLabel":"React.ReactNode","required":false},"contactOptions":{"type":"array","description":"Contact options to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the contact option","required":true},"info":{"type":"string","description":"Contact information text","required":true},"href":{"type":"string","description":"Optional href for the contact option","required":false}},"typeLabel":"ContactDarkOption"},"typeLabel":"ContactDarkOption[]","required":false},"contactOptionsSlot":{"type":"object","description":"Custom slot for rendering contact options (overrides contactOptions array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Social media links to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the social platform","required":true},"href":{"type":"string","description":"Link href","required":true},"label":{"type":"string","description":"Accessible label for the link","required":true}},"typeLabel":"ContactDarkSocialLink"},"typeLabel":"ContactDarkSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"formPanelClassName":{"type":"string","description":"Additional CSS classes for the form panel","required":false},"infoPanelClassName":{"type":"string","description":"Additional CSS classes for the info panel","required":false},"contactOptionsClassName":{"type":"string","description":"Additional CSS classes for the contact options container","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","form","dark","theme","split-layout","social","modern"],"performance":{},"importantUsageNotes":"Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data, if the brand/location hasn't supplied the contact data points, don't generate/guess, just skip over that data point(s) and only use ones stored in the system."},{"id":"contact-demo","name":"Contact Demo Request","title":"Contact Demo Request","category":"Contact","categorySlug":"contact","description":"A demo request form with use case selection, team size, timeline, and company information. Perfect for SaaS products and B2B services requiring product demonstrations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290624/f7jhma9pk839b8lj6ffa0ir2o27j/cleanshot-2026-02-21-at-15-35-46.png","mobile":"https://cdn.ing/assets/i/r/290623/o3etnz78zbf46y7q053abjck9d95/cleanshot-2026-02-21-at-15-36-06.png"},"componentPath":"blocks/contact/contact-demo.tsx","code":"\"use client\";\n\nimport { ContactDemo } from \"@opensite/ui/blocks/contact/contact-demo\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"work_email\",\n    type: \"email\",\n    label: \"Work Email\",\n    placeholder: \"you@company.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"company_size\",\n    type: \"select\",\n    label: \"Company Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"1-10\",\n        label: \"1-10 employees\",\n      },\n      {\n        value: \"11-50\",\n        label: \"11-50 employees\",\n      },\n      {\n        value: \"51-200\",\n        label: \"51-200 employees\",\n      },\n      {\n        value: \"201-1000\",\n        label: \"201-1000 employees\",\n      },\n      {\n        value: \"1000+\",\n        label: \"1000+ employees\",\n      },\n    ],\n  },\n  {\n    name: \"role\",\n    type: \"select\",\n    label: \"Your Role\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"executive\",\n        label: \"Executive/C-Level\",\n      },\n      {\n        value: \"manager\",\n        label: \"Manager/Director\",\n      },\n      {\n        value: \"individual\",\n        label: \"Individual Contributor\",\n      },\n      {\n        value: \"consultant\",\n        label: \"Consultant\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n      },\n    ],\n  },\n  {\n    name: \"use_case\",\n    type: \"checkbox-group\",\n    label: \"What are you interested in?\",\n    placeholder: \"Select features\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"analytics\",\n        label: \"Analytics\",\n        description: \"Data insights and reporting.\",\n      },\n      {\n        value: \"automation\",\n        label: \"Automation\",\n        description: \"Workflow automation tools.\",\n      },\n      {\n        value: \"integration\",\n        label: \"Integrations\",\n        description: \"Connect with existing tools.\",\n      },\n      {\n        value: \"collaboration\",\n        label: \"Collaboration\",\n        description: \"Team communication features.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your needs\",\n    placeholder:\n      \"What challenges are you trying to solve? What would you like to see in the demo?\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactDemo\n      heading=\"See It In Action\"\n      description=\"Schedule a personalized demo and discover how our platform can transform your workflow. Our team will walk you through key features tailored to your needs.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for requesting a demo! Our team will reach out within 24 hours to schedule a time that works for you.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Request Demo\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"gradientGlowTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","demo","request","form","saas","b2b","product","trial"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a product demo booking use case — first/last name, work email, phone, company name, company size select, role select, and additional details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-emergency","name":"Contact Emergency","title":"Contact Emergency","category":"Contact","categorySlug":"contact","description":"An urgent contact form with priority level selection and immediate response options. Features visual priority indicators and streamlined fields for critical situations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290626/98256jfd8ucmaiq2dsxkkzwe0ljs/cleanshot-2026-02-21-at-15-37-25.png","mobile":"https://cdn.ing/assets/i/r/290625/3m1i7o8xaxx3xv2q5neamfm542lu/cleanshot-2026-02-21-at-15-37-50.png"},"componentPath":"blocks/contact/contact-emergency.tsx","code":"\"use client\";\n\nimport { ContactEmergency } from \"@opensite/ui/blocks/contact/contact-emergency\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"urgency\",\n    type: \"radio\",\n    label: \"Urgency Level\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"critical\",\n        label: \"Critical\",\n        description: \"Immediate attention required.\",\n      },\n      {\n        value: \"urgent\",\n        label: \"Urgent\",\n        description: \"Within 1 hour.\",\n      },\n      {\n        value: \"high\",\n        label: \"High Priority\",\n        description: \"Within 4 hours.\",\n      },\n      {\n        value: \"medium\",\n        label: \"Medium Priority\",\n        description: \"Within 8 hours.\",\n      },\n    ],\n  },\n  {\n    name: \"location\",\n    type: \"text\",\n    label: \"Location/Address\",\n    placeholder: \"Where is the emergency?\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe the Emergency\",\n    placeholder:\n      \"Please provide as much detail as possible about the situation...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nconst contactItems = [\n  {\n    icon: \"lucide/mail\",\n    title: \"Email\",\n    subtitle: \"support@moderncommerce.com\",\n    href: \"mailto:support@moderncommerce.com\",\n  },\n  {\n    icon: \"lucide/phone\",\n    title: \"Phone\",\n    subtitle: \"+1 (888) 555-7890\",\n    href: \"tel:+18885557890\",\n  },\n  {\n    icon: \"lucide/map-pin\",\n    title: \"Address\",\n    subtitle: \"123 Commerce Street, New York, NY 10001\",\n    href: \"https://maps.google.com\",\n  },\n]\n\nexport default function Demo() {\n  return (\n    <ContactEmergency\n      heading=\"Emergency Support\"\n      description=\"If you're experiencing an urgent issue, submit this form and our emergency response team will contact you immediately. For life-threatening emergencies, call 911.\"\n      contactItems={contactItems}\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Emergency request received! Our team has been notified and will contact you immediately.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Emergency Request\",\n          },\n        },\n      }}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"contactItems":{"type":"array","description":"Array of emergency contact info items to display in the grid","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for DynamicIcon (e.g., \"lucide/phone\")","required":true},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"title":{"type":"string","description":"Primary label/title for the item","required":true},"subtitle":{"type":"string","description":"Secondary text (e.g., phone number, email)","required":true},"href":{"type":"string","description":"Link URL (e.g., \"tel:+15551234567\", \"mailto:support@example.com\")","required":true},"className":{"type":"string","description":"Additional CSS classes for the item container","required":false}},"typeLabel":"ContactInfoItem"},"typeLabel":"ContactInfoItem[]","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","emergency","urgent","priority","support","critical","form"],"performance":{},"importantUsageNotes":"Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data, if the brand/location hasn't supplied the contact data points, don't generate/guess, just skip over that data point(s) and only use ones stored in the system."},{"id":"contact-event","name":"Contact Event Registration","title":"Contact Event Registration","category":"Contact","categorySlug":"contact","description":"Event registration form with attendee information and event-specific fields. Perfect for conferences, workshops, and community events.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290569/l9kpnostypmjjwt7wwoxsel93asd/contact-event-desktop.png","mobile":"https://cdn.ing/assets/i/r/290570/4nqc4d08u9pb5ovosd9bhrz1p9ox/contact-event-mobile.png"},"componentPath":"blocks/contact/contact-event.tsx","code":"\"use client\";\n\nimport { ContactEvent } from \"@opensite/ui/blocks/contact/contact-event\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"organization\",\n    type: \"text\",\n    label: \"Organization (Optional)\",\n    placeholder: \"Company or organization name\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"event_name\",\n    type: \"text\",\n    label: \"Event Name\",\n    placeholder: \"What's the name of your event?\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"event_type\",\n    type: \"select\",\n    label: \"Event Type\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"conference\",\n        label: \"Conference\",\n      },\n      {\n        value: \"workshop\",\n        label: \"Workshop\",\n      },\n      {\n        value: \"seminar\",\n        label: \"Seminar\",\n      },\n      {\n        value: \"networking\",\n        label: \"Networking Event\",\n      },\n      {\n        value: \"fundraiser\",\n        label: \"Fundraiser\",\n      },\n      {\n        value: \"celebration\",\n        label: \"Celebration\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n      },\n    ],\n  },\n  {\n    name: \"attendee_count\",\n    type: \"select\",\n    label: \"Expected Attendees\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"1-25\",\n        label: \"1-25 people\",\n      },\n      {\n        value: \"26-50\",\n        label: \"26-50 people\",\n      },\n      {\n        value: \"51-100\",\n        label: \"51-100 people\",\n      },\n      {\n        value: \"101-250\",\n        label: \"101-250 people\",\n      },\n      {\n        value: \"250+\",\n        label: \"250+ people\",\n      },\n    ],\n  },\n  {\n    name: \"event_date\",\n    type: \"date-picker\",\n    label: \"Event Date\",\n    placeholder: \"Select date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"venue\",\n    type: \"text\",\n    label: \"Venue/Location\",\n    placeholder: \"Venue name or address\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"services_needed\",\n    type: \"checkbox-group\",\n    label: \"Services Needed\",\n    placeholder: \"Select services\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"venue\",\n        label: \"Venue\",\n        description: \"Space rental.\",\n      },\n      {\n        value: \"catering\",\n        label: \"Catering\",\n        description: \"Food and beverage.\",\n      },\n      {\n        value: \"av\",\n        label: \"A/V Equipment\",\n        description: \"Audio/visual setup.\",\n      },\n      {\n        value: \"decor\",\n        label: \"Decoration\",\n        description: \"Event decoration.\",\n      },\n      {\n        value: \"entertainment\",\n        label: \"Entertainment\",\n        description: \"Music, performers, etc.\",\n      },\n      {\n        value: \"staff\",\n        label: \"Staff\",\n        description: \"Event staff and coordination.\",\n      },\n    ],\n  },\n  {\n    name: \"budget\",\n    type: \"select\",\n    label: \"Estimated Budget\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"under-5k\",\n        label: \"Under $5,000\",\n      },\n      {\n        value: \"5k-10k\",\n        label: \"$5,000 - $10,000\",\n      },\n      {\n        value: \"10k-25k\",\n        label: \"$10,000 - $25,000\",\n      },\n      {\n        value: \"25k-50k\",\n        label: \"$25,000 - $50,000\",\n      },\n      {\n        value: \"50k+\",\n        label: \"$50,000+\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Event Details\",\n    placeholder: \"Tell us more about your event vision, special requirements, theme, etc...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactEvent\n      heading=\"Plan Your Event With Us\"\n      description=\"Let us help you create an unforgettable event. Fill out the form below and our event planning team will contact you within 48 hours with ideas and a quote.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your event inquiry! Our planning team will review your details and reach out within 48 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Event Inquiry\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"dots\"\n      patternOpacity={0.35}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","event","registration","form","rsvp","attendee"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is for an event organizer or event management service — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for an event inquiry use case — full name, organization, email, phone, event name, event type select, expected attendees select, and details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-faq","name":"Contact FAQ","title":"Contact FAQ","category":"Contact","categorySlug":"contact","description":"A two-column contact form with an FAQ accordion sidebar. Displays frequently asked questions alongside a contact form so visitors can find answers before submitting inquiries. Falls back to a single-column centered layout when no FAQ items are provided.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290628/syz0j5igv48uywm52380gbk8yrz0/cleanshot-2026-02-21-at-15-39-10.png","mobile":"https://cdn.ing/assets/i/r/290627/bp3k3s0l1cczzifti4l6j7n6qwhq/cleanshot-2026-02-21-at-15-39-27.png"},"componentPath":"blocks/contact/contact-faq.tsx","code":"\"use client\";\n\nimport { ContactFaq } from \"@opensite/ui/blocks/contact/contact-faq\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full Name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    type: \"checkbox-group\",\n    label: \"Subject\",\n    placeholder: \"What is this regarding?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"analytics\",\n        label: \"Analytics\",\n        description: \"Data insights and reporting.\",\n      },\n      {\n        value: \"automation\",\n        label: \"Automation\",\n        description: \"Workflow automation tools.\",\n      },\n      {\n        value: \"integration\",\n        label: \"Integrations\",\n        description: \"Connect with existing tools.\",\n      },\n      {\n        value: \"collaboration\",\n        label: \"Collaboration\",\n        description: \"Team communication features.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Message\",\n    placeholder: \"Please describe your question in detail...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactFaq\n      heading=\"Have Questions?\"\n      description=\"Can't find what you're looking for in our FAQ? Send us a message and our team will get back to you within 24 hours.\"\n      formHeading=\"Send Us a Message\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={1}\n      faqHeading=\"Frequently Asked Questions\"\n      items={[\n        {\n          id: \"billing-cycle\",\n          question: \"When will I be charged?\",\n          answer:\n            \"Billing occurs on the same day each month or year, depending on your plan. You'll receive an invoice via email 3 days before each billing cycle.\",\n        },\n        {\n          id: \"refunds\",\n          question: \"What is your refund policy?\",\n          answer:\n            \"We offer a 30-day money-back guarantee. If you're not satisfied, contact us within 30 days of your initial purchase for a full refund.\",\n        },\n        {\n          id: \"upgrades\",\n          question: \"How do plan upgrades work?\",\n          answer:\n            \"Upgrades take effect immediately. You'll be charged a prorated amount for the remainder of your billing cycle at the new plan rate.\",\n        },\n        {\n          id: \"downgrade\",\n          question: \"Can I downgrade my plan?\",\n          answer:\n            \"Yes, downgrades take effect at the end of your current billing cycle. You'll continue to have access to your current plan features until then.\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"formHeading":{"type":"object","description":"Form section heading","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of FAQ items to display alongside the contact form","items":{"type":"object","description":"","fields":{"question":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"answer":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"FaqItem"},"typeLabel":"FaqItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering FAQ items (overrides items array)","typeLabel":"React.ReactNode","required":false},"faqHeading":{"type":"object","description":"Heading for the FAQ section","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"formHeadingClassName":{"type":"string","description":"Additional CSS classes for the form heading","required":false},"faqHeadingClassName":{"type":"string","description":"Additional CSS classes for the FAQ heading","required":false},"faqContainerClassName":{"type":"string","description":"Additional CSS classes for the FAQ container","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"accordionItemClassName":{"type":"string","description":"Additional CSS classes for accordion items","required":false},"accordionTriggerClassName":{"type":"string","description":"Additional CSS classes for accordion triggers","required":false},"accordionContentClassName":{"type":"string","description":"Additional CSS classes for accordion content","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the two-column grid wrapper","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","faq","questions","inquiry","form","support","accordion","two-column"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a general contact use case with a subject checkbox-group — do not change the field set unless the site has clearly different requirements. Generate exactly 4 'items' for the FAQ accordion — the demo uses 4 items and the two-column layout (FAQ beside form) is calibrated for that count; use 3-6 items maximum. Only use real FAQ content from the system; do not fabricate questions or answers. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-feedback","name":"Contact Feedback","title":"Contact Feedback","category":"Contact","categorySlug":"contact","description":"A simple feedback form with email and feedback message fields. Ideal for collecting customer feedback and suggestions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290811/nt3s30ijlt7ogzbmkkz5tqpr99xj/cleanshot-2026-02-25-at-02-02-57.png","mobile":"https://cdn.ing/assets/i/r/290810/7khdr7eo2qgq7qcd4zpdixjei4cr/cleanshot-2026-02-25-at-02-03-12.png"},"componentPath":"blocks/contact/contact-feedback.tsx","code":"\"use client\";\n\nimport { ContactFeedback } from \"@opensite/ui/blocks/contact/contact-feedback\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Your Name\",\n    placeholder: \"Full Name (optional)\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com (optional)\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"rating\",\n    type: \"radio\",\n    label: \"Overall Experience\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"5\",\n        label: \"Excellent\",\n        description: \"Exceeded expectations.\",\n      },\n      {\n        value: \"4\",\n        label: \"Good\",\n        description: \"Met expectations.\",\n      },\n      {\n        value: \"3\",\n        label: \"Average\",\n        description: \"Satisfactory.\",\n      },\n      {\n        value: \"2\",\n        label: \"Below Average\",\n        description: \"Needs improvement.\",\n      },\n    ],\n  },\n  {\n    name: \"feedback_type\",\n    type: \"checkbox-group\",\n    label: \"What would you like to provide feedback on?\",\n    placeholder: \"Select areas\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"product\",\n        label: \"Product Quality\",\n        description: \"Quality of our product/service.\",\n      },\n      {\n        value: \"service\",\n        label: \"Customer Service\",\n        description: \"Support team interaction.\",\n      },\n      {\n        value: \"website\",\n        label: \"Website/App\",\n        description: \"User experience and design.\",\n      },\n      {\n        value: \"pricing\",\n        label: \"Pricing\",\n        description: \"Value for money.\",\n      },\n      {\n        value: \"delivery\",\n        label: \"Delivery/Speed\",\n        description: \"Timeliness and delivery.\",\n      },\n    ],\n  },\n  {\n    name: \"would_recommend\",\n    type: \"radio\",\n    label: \"Would you recommend us to others?\",\n    required: false,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      {\n        value: \"yes\",\n        label: \"Yes, definitely\",\n      },\n      {\n        value: \"maybe\",\n        label: \"Maybe\",\n      },\n      {\n        value: \"no\",\n        label: \"No\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Feedback\",\n    placeholder:\n      \"Tell us what you liked, what could be improved, or any other thoughts...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactFeedback\n      heading=\"We Value Your Feedback\"\n      description=\"Your opinion matters to us! Share your experience and help us improve. All feedback is reviewed by our team and used to enhance our products and services.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your valuable feedback! We appreciate you taking the time to help us improve.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Feedback\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.16}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","feedback","survey","form","customer-feedback"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a customer feedback use case — name (optional), email (optional), overall experience rating radio, feedback category checkbox-group, and detailed feedback textarea — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-fitness","name":"Contact Fitness Consultation","title":"Contact Fitness Consultation","category":"Contact","categorySlug":"contact","description":"Fitness consultation form with goals, experience level, and health information. Perfect for gyms, personal trainers, and wellness centers.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290813/2t99w34wsrx5oi4jgoygjanmlj1q/cleanshot-2026-02-25-at-02-05-41.png","mobile":"https://cdn.ing/assets/i/r/290812/jhjvh0nuok3am3xz8b13hpdunv0i/cleanshot-2026-02-25-at-02-05-54.png"},"componentPath":"blocks/contact/contact-fitness.tsx","code":"\"use client\";\n\nimport { ContactFitness } from \"@opensite/ui/blocks/contact/contact-fitness\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"fitness_level\",\n    type: \"radio\",\n    label: \"Current Fitness Level\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"beginner\",\n        label: \"Beginner\",\n        description: \"Just starting out\",\n      },\n      {\n        value: \"intermediate\",\n        label: \"Intermediate\",\n        description: \"Some experience\",\n      },\n      {\n        value: \"experienced\",\n        label: \"Experienced\",\n        description: \"Consistent training\",\n      },\n      {\n        value: \"advanced\",\n        label: \"Advanced\",\n        description: \"Very experienced\",\n      },\n    ],\n  },\n  {\n    name: \"goals\",\n    type: \"checkbox-group\",\n    label: \"Fitness Goals\",\n    placeholder: \"Select your goals\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"weight-loss\",\n        label: \"Weight Loss\",\n        description: \"Lose weight and body fat.\",\n      },\n      {\n        value: \"muscle-gain\",\n        label: \"Muscle Gain\",\n        description: \"Build strength and muscle.\",\n      },\n      {\n        value: \"endurance\",\n        label: \"Endurance\",\n        description: \"Improve cardiovascular fitness.\",\n      },\n      {\n        value: \"flexibility\",\n        label: \"Flexibility\",\n        description: \"Increase range of motion.\",\n      },\n      {\n        value: \"general-health\",\n        label: \"General Health\",\n        description: \"Overall wellness and health.\",\n      },\n      {\n        value: \"sports-performance\",\n        label: \"Sports Performance\",\n        description: \"Train for specific sport.\",\n      },\n    ],\n  },\n  {\n    name: \"program_interest\",\n    type: \"select\",\n    label: \"Program Interest\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"personal-training\",\n        label: \"Personal Training (1-on-1)\",\n      },\n      {\n        value: \"group-classes\",\n        label: \"Group Fitness Classes\",\n      },\n      {\n        value: \"online-coaching\",\n        label: \"Online Coaching\",\n      },\n      {\n        value: \"nutrition\",\n        label: \"Nutrition Coaching\",\n      },\n      {\n        value: \"membership\",\n        label: \"Gym Membership\",\n      },\n    ],\n  },\n  {\n    name: \"start_date\",\n    type: \"date-picker\",\n    label: \"Preferred Start Date\",\n    placeholder: \"When would you like to start?\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"availability\",\n    type: \"select\",\n    label: \"Preferred Training Time\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"morning\",\n        label: \"Morning (6 AM - 10 AM)\",\n      },\n      {\n        value: \"midday\",\n        label: \"Midday (10 AM - 2 PM)\",\n      },\n      {\n        value: \"afternoon\",\n        label: \"Afternoon (2 PM - 6 PM)\",\n      },\n      {\n        value: \"evening\",\n        label: \"Evening (6 PM - 9 PM)\",\n      },\n      {\n        value: \"flexible\",\n        label: \"Flexible\",\n      },\n    ],\n  },\n  {\n    name: \"medical_conditions\",\n    type: \"text\",\n    label: \"Medical Conditions or Injuries (Optional)\",\n    placeholder: \"Any conditions we should know about?\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell Us More About Your Goals\",\n    placeholder:\n      \"What motivates you? What challenges have you faced? What do you hope to achieve?\",\n    required: false,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactFitness\n      heading=\"Start Your Fitness Journey\"\n      description=\"Ready to transform your health and fitness? Schedule a free consultation with one of our certified trainers and let's create a personalized plan for you.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for reaching out! One of our trainers will contact you within 24 hours to schedule your free consultation.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Get Started\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"architect\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","fitness","consultation","form","health","wellness"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a fitness inquiry use case — first/last name, email, phone, current fitness level radio, fitness goals checkbox-group, and additional details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-guest","name":"Contact Guest Information","title":"Contact Guest Information","category":"Contact","categorySlug":"contact","description":"Guest information form for hospitality and event management. Collects detailed guest preferences and requirements.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290815/ibwvax0jd8936tvo2iyn639p84i4/cleanshot-2026-02-25-at-02-08-14.png","mobile":"https://cdn.ing/assets/i/r/290814/t2wlqpx23i9i9xp1ax41njvfc888/cleanshot-2026-02-25-at-02-08-24.png"},"componentPath":"blocks/contact/contact-guest.tsx","code":"\"use client\";\n\nimport { ContactGuest } from \"@opensite/ui/blocks/contact/contact-guest\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"guest@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"check_in\",\n    type: \"date-picker\",\n    label: \"Check-In Date\",\n    placeholder: \"Select arrival date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"check_out\",\n    type: \"date-picker\",\n    label: \"Check-Out Date\",\n    placeholder: \"Select departure date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"guests\",\n    type: \"select\",\n    label: \"Number of Guests\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"1\", label: \"1 Guest\" },\n      { value: \"2\", label: \"2 Guests\" },\n      { value: \"3\", label: \"3 Guests\" },\n      { value: \"4\", label: \"4 Guests\" },\n      { value: \"5\", label: \"5 Guests\" },\n      { value: \"6+\", label: \"6+ Guests\" },\n    ],\n  },\n  {\n    name: \"room_type\",\n    type: \"radio\",\n    label: \"Room Preference\",\n    required: true,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      {\n        value: \"standard\",\n        label: \"Standard Room\",\n        description: \"Queen bed, city view.\",\n      },\n      {\n        value: \"deluxe\",\n        label: \"Deluxe Room\",\n        description: \"King bed, premium amenities.\",\n      },\n      {\n        value: \"suite\",\n        label: \"Suite\",\n        description: \"Separate living area, luxury features.\",\n      },\n    ],\n  },\n  {\n    name: \"special_requests\",\n    type: \"textarea\",\n    label: \"Special Requests\",\n    placeholder:\n      \"Any dietary restrictions, accessibility needs, or special occasions?\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactGuest\n      heading=\"Book Your Stay\"\n      description=\"Experience comfort and luxury at our hotel. Complete the form below to inquire about availability or make a reservation.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your reservation inquiry! Our team will confirm availability and reach out within 4 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Reservation Inquiry\",\n          },\n        },\n      }}\n      pattern=\"waves\"\n      patternOpacity={0.15}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","guest","hospitality","form","booking","accommodation"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a hotel/hospitality guest inquiry use case — first/last name, email, phone, check-in and check-out date pickers, number of guests select, room preference radio, and special requests — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-image","name":"Contact Image","title":"Contact Image","category":"Contact","categorySlug":"contact","description":"Split-layout contact form with an image panel featuring overlay contact items (phone, email, etc.) on the left and a form with heading on the right. Modern, professional design with motion animations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290618/1mcu6me3f3rsshm2q7zz7aa027ub/cleanshot-2026-02-21-at-15-31-03.png","mobile":"https://cdn.ing/assets/i/r/290617/ft5shvx5h71lk9cjyn3yjg96eu65/cleanshot-2026-02-21-at-15-31-19.png"},"componentPath":"blocks/contact/contact-image.tsx","code":"\"use client\";\n\nimport { ContactImage } from \"@opensite/ui/blocks/contact/contact-image\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Enter your name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"service\",\n    type: \"checkbox-group\",\n    label: \"Services Needed\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"web-design\",\n        label: \"Web Design\",\n        description: \"Site design + development\",\n      },\n      {\n        value: \"branding\",\n        label: \"Branding\",\n        description: \"Logo design + brand identity\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Digital Marketing\",\n        description: \"SEO + social media\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Strategy business consulting\",\n      },\n    ],\n  },\n\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Project Details\",\n    placeholder:\n      \"Tell us about your project goals, target audience, and any specific requirements...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactImage\n      image={{\n        src: imagePlaceholders[103],\n        alt: \"A person working at a desk\"\n      }}\n      eyebrow=\"Ready to Start?\"\n      heading=\"Let's Build Something Amazing\"\n      description=\"Ready to take your business to the next level? Share your project details with us and we'll craft a custom proposal tailored to your needs.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for reaching out! We'll review your project details and get back to you with a custom proposal within 2-3 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Start Your Project\",\n          },\n        },\n      }}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.9}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label above the heading","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Image configuration for the left panel","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"contactOverlays":{"type":"array","description":"Contact overlay items displayed over the image","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for DynamicIcon (e.g., \"lucide/phone\")","required":true},"label":{"type":"string","description":"Eyebrow label above the title (e.g., \"PHONE\", \"EMAIL\")","required":true},"title":{"type":"string","description":"Main title text (e.g., phone number, email address)","required":true},"description":{"type":"string","description":"Optional description text","required":false},"href":{"type":"string","description":"Optional link URL (e.g., \"tel:+15551234567\", \"mailto:support@example.com\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the item container","required":false}},"typeLabel":"ContactOverlayItem"},"typeLabel":"ContactOverlayItem[]","required":false},"contactOverlaysSlot":{"type":"object","description":"Custom slot for rendering contact overlays (overrides contactOverlays array)","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow text","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"contactOverlaysClassName":{"type":"string","description":"Additional CSS classes for the contact overlays container","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","form","image","split-layout","overlay","modern"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a general project inquiry use case — name, email, phone, services needed checkbox-group, and project details textarea — do not change the field set unless the site has clearly different requirements. DO NOT USE this block if you don't have a real image from the media library — the 'image' prop is required for the split-panel layout. Only use a real image from the media library. For 'contactOverlays', only supply real contact data points (phone, email, address) from the system; do not fabricate overlay items — if no real contact data exists, omit 'contactOverlays'. Ensure to only supply a valid set of contact data points, DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-insurance","name":"Contact Insurance Quote","title":"Contact Insurance Quote","category":"Contact","categorySlug":"contact","description":"Insurance quote request form with coverage type, policy details, and personal information. Ideal for insurance agencies and brokers.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290817/ij0jea218e4zf2nynaa1qw6afsl2/cleanshot-2026-02-25-at-02-09-53.png","mobile":"https://cdn.ing/assets/i/r/290816/6godc5ytd2wyg5j8sndakmbw9q26/cleanshot-2026-02-25-at-02-10-07.png"},"componentPath":"blocks/contact/contact-insurance.tsx","code":"\"use client\";\n\nimport { ContactInsurance } from \"@opensite/ui/blocks/contact/contact-insurance\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"dob\",\n    type: \"date-picker\",\n    label: \"Date of Birth\",\n    placeholder: \"Select date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"zip\",\n    type: \"text\",\n    label: \"ZIP Code\",\n    placeholder: \"12345\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"insurance_type\",\n    type: \"radio\",\n    label: \"Type of Insurance\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"auto\",\n        label: \"Auto Insurance\",\n        description: \"Coverage for your vehicle.\",\n      },\n      {\n        value: \"home\",\n        label: \"Home Insurance\",\n        description: \"Protection for your property.\",\n      },\n      {\n        value: \"life\",\n        label: \"Life Insurance\",\n        description: \"Security for your loved ones.\",\n      },\n      {\n        value: \"health\",\n        label: \"Health Insurance\",\n        description: \"Medical coverage plans.\",\n      },\n      {\n        value: \"business\",\n        label: \"Business Insurance\",\n        description: \"Commercial coverage options.\",\n      },\n    ],\n  },\n  {\n    name: \"coverage_amount\",\n    type: \"select\",\n    label: \"Desired Coverage Amount\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"100k\", label: \"$100,000\" },\n      { value: \"250k\", label: \"$250,000\" },\n      { value: \"500k\", label: \"$500,000\" },\n      { value: \"1m\", label: \"$1,000,000\" },\n      { value: \"custom\", label: \"Custom Amount\" },\n    ],\n  },\n  {\n    name: \"currently_insured\",\n    type: \"radio\",\n    label: \"Currently Insured?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes\" },\n      { value: \"no\", label: \"No\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Additional Information\",\n    placeholder:\n      \"Tell us about your insurance needs, any claims history, or specific coverage requirements...\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactInsurance\n      heading=\"Get Your Free Quote\"\n      description=\"Find the right insurance coverage to protect what matters most. Fill out the form below and receive a personalized quote within 24 hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you! We're preparing your personalized quote and will contact you within 24 hours with your options.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Get Free Quote\",\n          },\n        },\n      }}\n      background=\"gradient\"\n      pattern=\"gridBasic\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","insurance","quote","form","coverage","policy"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for an insurance quote request use case — first/last name, email, phone, date of birth picker, ZIP code, insurance type radio (auto/home/life/health/business), and coverage amount select — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-interview","name":"Contact Interview Scheduling","title":"Contact Interview Scheduling","category":"Contact","categorySlug":"contact","description":"Interview scheduling form with position, availability, and candidate information. Perfect for HR and recruitment teams.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290819/xh2lnayz5r3qx1qq9yxqwwvb3wyu/cleanshot-2026-02-25-at-02-11-07.png","mobile":"https://cdn.ing/assets/i/r/290818/43wvdxtxob5rracqvjyg2vvyf8jr/cleanshot-2026-02-25-at-02-11-20.png"},"componentPath":"blocks/contact/contact-interview.tsx","code":"\"use client\";\n\nimport { ContactInterview } from \"@opensite/ui/blocks/contact/contact-interview\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"linkedin\",\n    type: \"text\",\n    label: \"LinkedIn Profile\",\n    placeholder: \"https://linkedin.com/in/yourname\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"position\",\n    type: \"select\",\n    label: \"Position Applying For\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"senior-engineer\",\n        label: \"Senior Software Engineer\",\n        description: \"Full-stack development role.\",\n      },\n      {\n        value: \"product-manager\",\n        label: \"Product Manager\",\n        description: \"Lead product strategy and development.\",\n      },\n      {\n        value: \"ux-designer\",\n        label: \"UX/UI Designer\",\n        description: \"Design user experiences and interfaces.\",\n      },\n      {\n        value: \"marketing-manager\",\n        label: \"Marketing Manager\",\n        description: \"Drive marketing campaigns and growth.\",\n      },\n      {\n        value: \"sales-executive\",\n        label: \"Sales Executive\",\n        description: \"Build relationships and close deals.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other Position\",\n        description: \"Specify in additional details below.\",\n      },\n    ],\n  },\n  {\n    name: \"experience_years\",\n    type: \"select\",\n    label: \"Years of Relevant Experience\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"0-2\", label: \"0-2 years\" },\n      { value: \"3-5\", label: \"3-5 years\" },\n      { value: \"6-10\", label: \"6-10 years\" },\n      { value: \"10+\", label: \"10+ years\" },\n    ],\n  },\n  {\n    name: \"location\",\n    type: \"select\",\n    label: \"Work Location Preference\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"remote\", label: \"Remote\" },\n      { value: \"hybrid\", label: \"Hybrid\" },\n      { value: \"onsite\", label: \"On-site\" },\n    ],\n  },\n  {\n    name: \"resume\",\n    type: \"file\",\n    label: \"Resume/CV\",\n    placeholder: \"Upload your resume...\",\n    required: true,\n    accept: \".pdf,.doc,.docx\",\n    maxSize: 5 * 1024 * 1024,\n    maxFiles: 1,\n    columnSpan: 6,\n  },\n  {\n    name: \"portfolio\",\n    type: \"file\",\n    label: \"Portfolio/Work Samples\",\n    placeholder: \"Upload work samples (optional)...\",\n    required: false,\n    accept: \".pdf,.doc,.docx,.zip\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 3,\n    multiple: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"salary_expectations\",\n    type: \"text\",\n    label: \"Salary Expectations\",\n    placeholder: \"e.g., $80,000 - $100,000\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Cover Letter / Additional Information\",\n    placeholder:\n      \"Tell us why you're interested in this position and what makes you a great fit...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactInterview\n      heading=\"Join Our Team\"\n      description=\"We're always looking for talented individuals who are passionate about what they do. Apply now and take the next step in your career.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for applying! We've received your application and will review it carefully. If your qualifications match our needs, we'll reach out within 1-2 weeks to schedule an interview.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Application\",\n          },\n        },\n      }}\n      pattern=\"circles\"\n      patternOpacity={0.9}\n      background=\"muted\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","interview","scheduling","form","recruitment","hr"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is conducting interviews or hiring — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for an interview scheduling use case — first/last name, email, phone, LinkedIn profile, position applying for select, and additional details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-locations","name":"Contact Locations","title":"Contact Locations","category":"Contact","categorySlug":"contact","description":"Multi-location contact form with location selection and contact information. Ideal for businesses with multiple offices or stores.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290571/xrkgiyv104axb1boedaytia8g9wa/contact-locations-desktop.png","mobile":"https://cdn.ing/assets/i/r/290572/6aej3lh7likzx89badz2596nrnlu/contact-locations-mobile.png"},"componentPath":"blocks/contact/contact-locations.tsx","code":"\"use client\";\n\nimport { ContactLocations } from \"@opensite/ui/blocks/contact/contact-locations\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Enter your name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"location\",\n    type: \"select\",\n    label: \"Preferred Location\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"new-york\",\n        label: \"New York, NY\",\n        description: \"Our flagship location.\",\n      },\n      {\n        value: \"san-francisco\",\n        label: \"San Francisco, CA\",\n        description: \"West coast headquarters.\",\n      },\n      {\n        value: \"chicago\",\n        label: \"Chicago, IL\",\n        description: \"Midwest regional office.\",\n      },\n      {\n        value: \"austin\",\n        label: \"Austin, TX\",\n        description: \"Southern regional office.\",\n      },\n      {\n        value: \"remote\",\n        label: \"Remote / Virtual\",\n        description: \"Connect with us online.\",\n      },\n    ],\n  },\n  {\n    name: \"inquiry_type\",\n    type: \"radio\",\n    label: \"How Can We Help?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"sales\",\n        label: \"Sales Inquiry\",\n        description: \"Learn about our products and services.\",\n      },\n      {\n        value: \"support\",\n        label: \"Customer Support\",\n        description: \"Get help with an existing account.\",\n      },\n      {\n        value: \"partnership\",\n        label: \"Partnership\",\n        description: \"Explore collaboration opportunities.\",\n      },\n      {\n        value: \"visit\",\n        label: \"Schedule a Visit\",\n        description: \"Plan an in-person meeting.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Message\",\n    placeholder: \"Tell us more about your inquiry...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactLocations\n      heading=\"Visit Us\"\n      description=\"We have offices across the country. Find the location nearest you or schedule a virtual meeting with our team.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for reaching out! We'll get back to you within 1 business day.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dots\"\n      patternOpacity={0.3}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","locations","multi-location","form","offices"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a multi-location contact use case — name, email, phone, preferred location select, inquiry type radio, and message textarea — do not change the field set unless the site has clearly different requirements. Only populate the location select options with real locations from the system; do not invent office addresses or city names. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-maintenance","name":"Contact Maintenance Request","title":"Contact Maintenance Request","category":"Contact","categorySlug":"contact","description":"Maintenance request form with issue type, priority, and detailed description. Perfect for property management and facility services.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290573/o5csj58d27d9dd1morzucfiokj1p/contact-maintenance-desktop.png","mobile":"https://cdn.ing/assets/i/r/290574/5m4pgcjwucjlxoavkolvat26jevg/contact-maintenance-mobile.png"},"componentPath":"blocks/contact/contact-maintenance.tsx","code":"\"use client\";\n\nimport { ContactMaintenance } from \"@opensite/ui/blocks/contact/contact-maintenance\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Your full name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"property_address\",\n    type: \"text\",\n    label: \"Property Address\",\n    placeholder: \"Street address\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"city\",\n    type: \"text\",\n    label: \"City\",\n    placeholder: \"City\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"zip\",\n    type: \"text\",\n    label: \"ZIP Code\",\n    placeholder: \"12345\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"service_type\",\n    type: \"checkbox-group\",\n    label: \"Services Needed\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"plumbing\",\n        label: \"Plumbing\",\n        description: \"Leaks, drains, fixtures.\",\n      },\n      {\n        value: \"electrical\",\n        label: \"Electrical\",\n        description: \"Wiring, outlets, lighting.\",\n      },\n      {\n        value: \"hvac\",\n        label: \"HVAC\",\n        description: \"Heating and cooling systems.\",\n      },\n      {\n        value: \"carpentry\",\n        label: \"Carpentry\",\n        description: \"Doors, cabinets, trim.\",\n      },\n      {\n        value: \"painting\",\n        label: \"Painting\",\n        description: \"Interior and exterior painting.\",\n      },\n      {\n        value: \"landscaping\",\n        label: \"Landscaping\",\n        description: \"Lawn care, trees, gardens.\",\n      },\n    ],\n  },\n  {\n    name: \"urgency\",\n    type: \"radio\",\n    label: \"Urgency Level\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"emergency\",\n        label: \"Emergency\",\n        description: \"Needs immediate attention.\",\n      },\n      {\n        value: \"urgent\",\n        label: \"Urgent\",\n        description: \"Within 24-48 hours.\",\n      },\n      {\n        value: \"routine\",\n        label: \"Routine\",\n        description: \"Can wait a few days.\",\n      },\n    ],\n  },\n  {\n    name: \"preferred_date\",\n    type: \"date-picker\",\n    label: \"Preferred Service Date\",\n    placeholder: \"Select a date\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"preferred_time\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"morning\", label: \"Morning (8am-12pm)\" },\n      { value: \"afternoon\", label: \"Afternoon (12pm-5pm)\" },\n      { value: \"evening\", label: \"Evening (5pm-8pm)\" },\n    ],\n  },\n  {\n    name: \"photos\",\n    type: \"file\",\n    label: \"Upload Photos\",\n    placeholder: \"Upload photos of the issue (optional)...\",\n    required: false,\n    accept: \"image/*\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe the Issue\",\n    placeholder: \"Please provide details about the maintenance issue, including any relevant history or specific concerns...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactMaintenance\n      heading=\"Request Maintenance Service\"\n      description=\"Our experienced team is ready to help with all your property maintenance needs. Fill out the form and we'll get back to you promptly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your maintenance request has been submitted successfully. We'll contact you within 2 hours to confirm the service appointment.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Request\",\n          },\n        },\n      }}\n      background=\"gradient\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.5}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","maintenance","request","form","property","facility"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a maintenance request use case — name, email, phone, property address, city, ZIP, services needed checkbox-group (plumbing/electrical/HVAC/carpentry/painting/landscaping), urgency, and description — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-map","name":"Contact Map","title":"Contact Map","category":"Contact","categorySlug":"contact","description":"Contact form with integrated map display. Shows location information alongside contact form fields.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306767/j15p7ibisfp2ta6bunl3d1ondmu5/contact-map-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306768/9oobx5aup7bsdks8fn77o1jz3qrt/contact-map-mobile.jpg"},"componentPath":"blocks/contact/contact-map.tsx","code":"\"use client\";\n\nimport { ContactMap } from \"@opensite/ui/blocks/contact/contact-map\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { stadiaApiKey } from \"@/lib/tools\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\nimport type { GeoMapMarker, GeoMapProps } from \"@page-speed/maps\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"full_name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Your name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    type: \"text\",\n    label: \"Subject\",\n    placeholder: \"Brief subject line\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Message\",\n    placeholder: \"Your message...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nconst downtownPhoenixMarker: GeoMapMarker = {\n  id: \"downtown-phx-craft\",\n  latitude: 33.4585232,\n  longitude: -112.0715382,\n  pinColor: \"#f97316\",\n  eyebrow: \"Phoenix Flagship\",\n  title: \"Downtown PHX Craft\",\n  summary:\n    \"A central downtown gathering space with elevated craft cocktails, chef-driven small plates, and late-night service.\",\n  locationLine: \"128 E Roosevelt St, Phoenix, AZ 85004\",\n  locationUrl: \"https://maps.app.goo.gl/D8XXe5tt7av4GFEh8\",\n  hoursLine: \"Mon-Sun: 11:00 AM - 12:00 AM\",\n  mediaItems: [\n    {\n      id: \"downtown-media-1\",\n      src: imagePlaceholders[113],\n      alt: \"Downtown PHX Craft signature espresso martini\",\n    },\n  ],\n  markerContentComponent: (\n    <div className=\"mt-2 space-y-1.5 text-xs text-muted-foreground\">\n      <p className=\"font-medium text-foreground\">Highlights</p>\n      <ul className=\"list-disc space-y-1 pl-4\">\n        <li>Happy hour daily from 4 PM - 6 PM</li>\n        <li>Private event lounge available</li>\n        <li>Chef tasting menu on Fridays and Saturdays</li>\n      </ul>\n    </div>\n  ),\n  actions: [\n    {\n      label: \"Directions\",\n      href: \"https://maps.app.goo.gl/D8XXe5tt7av4GFEh8\",\n      icon: <DynamicIcon name=\"lucide/navigation\" size={14} />,\n      variant: \"default\",\n      className: \"shrink-0 flex-1 rounded-md\",\n      size: \"md\",\n    },\n    {\n      href: \"#\",\n      iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={14} />,\n      variant: \"outline\",\n      size: \"icon\",\n      className: \"rounded-md\",\n    },\n  ],\n};\n\nconst northScottsdaleMarker: GeoMapMarker = {\n  id: \"north-scottsdale\",\n  latitude: 33.6510546,\n  longitude: -111.924473,\n  pinColor: \"#0ea5e9\",\n  eyebrow: \"Scottsdale Location\",\n  title: \"North Scottsdale\",\n  summary:\n    \"A modern North Scottsdale location designed for group dining, premium cocktails, and weekend experiences.\",\n  locationLine: \"17797 N Scottsdale Rd, Scottsdale, AZ 85255\",\n  hoursLine: \"Mon-Sun: 10:00 AM - 11:00 PM\",\n  mediaItems: [\n    {\n      id: \"scottsdale-media-1\",\n      src: imagePlaceholders[112],\n      alt: \"North Scottsdale venue interior\",\n    },\n    {\n      id: \"scottsdale-media-2\",\n      src: imagePlaceholders[119],\n      alt: \"Fine dining and cocktails at North Scottsdale\",\n    },\n    {\n      id: \"scottsdale-media-3\",\n      src: imagePlaceholders[123],\n      alt: \"Guests dining at North Scottsdale\",\n    },\n  ],\n  actions: [\n    {\n      label: \"Directions\",\n      href: \"https://maps.app.goo.gl/d1h87KXhi9gBPAJj9\",\n      icon: <DynamicIcon name=\"lucide/navigation\" size={14} />,\n      className: \"shrink-0 flex-1 rounded-md\",\n      size: \"md\",\n    },\n    {\n      href: \"#\",\n      iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={14} />,\n      variant: \"outline\",\n      size: \"icon\",\n      className: \"rounded-md\",\n    },\n  ],\n};\n\nconst mapProps: GeoMapProps = {\n  stadiaApiKey,\n  panelPosition: \"bottom-left\",\n  mapWrapperClassName: \"rounded-lg border border-border\",\n  showNavigationControl: true,\n  showGeolocateControl: true,\n  mapSize: {\n    desktop: 700,\n    mobile: 600,\n  },\n  markers: [downtownPhoenixMarker, northScottsdaleMarker],\n  // clusters: [\n  //   {\n  //     id: \"north-east-valley-cluster\",\n  //     label: \"Clustered Region Example\",\n  //     title: \"North Scottsdale Region\",\n  //     summary:\n  //       \"This demonstrates the optional clustered format used when multiple locations should be grouped under a region.\",\n  //     pinColor: \"#0284c7\",\n  //     markers: [northScottsdaleMarker],\n  //   },\n  // ],\n};\n\nexport default function Demo() {\n  return (\n    <ContactMap\n      heading=\"Contact Us\"\n      description=\"We're here to help! Send us a message and we'll respond within 24 hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for contacting us! We'll get back to you within 24 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.9}\n      mapProps={mapProps}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"contentGridClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"mapColumnClassName":{"type":"string","description":"Additional CSS classes for the map column wrapper","required":false},"mapClassName":{"type":"string","description":"Additional CSS classes for the map component wrapper","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"mapProps":{"type":"object","description":"Geo map configuration and marker data","typeLabel":"GeoMapProps","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","map","location","form","address"],"performance":{},"importantUsageNotes":"Only use locations assigned to the website (if this is a general contact block), if it's region specific, only use locations assigned to that region, if this is a single location specific pages, only use the location data for the single location."},{"id":"contact-minimal","name":"Contact Minimal","title":"Contact Minimal","category":"Contact","categorySlug":"contact","description":"Minimal contact form with just name, email, and message fields. Clean and simple design for basic contact needs.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290577/u87v3n4m0h4gdfa9pv0xq3lq5tsm/contact-minimal-desktop.png","mobile":"https://cdn.ing/assets/i/r/290578/wpvaetsvqhx9rbgrc3jjp095aglm/contact-minimal-mobile.png"},"componentPath":"blocks/contact/contact-minimal.tsx","code":"\"use client\";\n\nimport { ContactMinimal } from \"@opensite/ui/blocks/contact/contact-minimal\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Name\",\n    placeholder: \"Your name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"subject\",\n    type: \"text\",\n    label: \"Subject\",\n    placeholder: \"What is this regarding?\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Message\",\n    placeholder: \"Your message...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactMinimal\n      heading=\"Get in Touch\"\n      description=\"Have a question or want to work together? We'd love to hear from you.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your message! We'll get back to you soon.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","minimal","simple","form","basic"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a minimal general contact use case — name, email, subject, and message textarea — do not add complexity or change the field set unless the site has clearly different requirements. This is the simplest contact form; use it when no specialized inquiry type applies. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-moving","name":"Contact Moving Services","title":"Contact Moving Services","category":"Contact","categorySlug":"contact","description":"Moving services request form with move details, inventory, and scheduling. Perfect for moving companies and relocation services.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290579/iouducv44k8om6carflwwmwgnp8u/contact-moving-desktop.png","mobile":"https://cdn.ing/assets/i/r/290580/tetx39hd837pu2h36r0wli30oghm/contact-moving-mobile.png"},"componentPath":"blocks/contact/contact-moving.tsx","code":"\"use client\";\n\nimport { ContactMoving } from \"@opensite/ui/blocks/contact/contact-moving\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"move_type\",\n    type: \"radio\",\n    label: \"Type of Move\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"local\",\n        label: \"Local Move\",\n        description: \"Moving within the same city or area.\",\n      },\n      {\n        value: \"long_distance\",\n        label: \"Long Distance\",\n        description: \"Moving to another city or state.\",\n      },\n      {\n        value: \"international\",\n        label: \"International\",\n        description: \"Moving to another country.\",\n      },\n      {\n        value: \"office\",\n        label: \"Office/Commercial\",\n        description: \"Business or commercial relocation.\",\n      },\n    ],\n  },\n  {\n    name: \"current_address\",\n    type: \"text\",\n    label: \"Current Address\",\n    placeholder: \"Street address, city, state, zip\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"destination_address\",\n    type: \"text\",\n    label: \"Destination Address\",\n    placeholder: \"Street address, city, state, zip\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"move_date\",\n    type: \"date-picker\",\n    label: \"Preferred Move Date\",\n    placeholder: \"Select a date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"home_size\",\n    type: \"select\",\n    label: \"Home/Office Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"studio\",\n        label: \"Studio/1BR\",\n      },\n      {\n        value: \"2br\",\n        label: \"2 Bedroom\",\n      },\n      {\n        value: \"3br\",\n        label: \"3 Bedroom\",\n      },\n      {\n        value: \"4br\",\n        label: \"4+ Bedroom\",\n      },\n      {\n        value: \"small_office\",\n        label: \"Small Office (1-10 people)\",\n      },\n      {\n        value: \"large_office\",\n        label: \"Large Office (10+ people)\",\n      },\n    ],\n  },\n  {\n    name: \"services\",\n    type: \"checkbox-group\",\n    label: \"Additional Services\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"packing\",\n        label: \"Packing Service\",\n        description: \"Professional packing of all items.\",\n      },\n      {\n        value: \"unpacking\",\n        label: \"Unpacking Service\",\n        description: \"Unpack and organize at destination.\",\n      },\n      {\n        value: \"storage\",\n        label: \"Storage\",\n        description: \"Short or long-term storage options.\",\n      },\n      {\n        value: \"specialty\",\n        label: \"Specialty Items\",\n        description: \"Piano, art, antiques, etc.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Additional Details\",\n    placeholder: \"Any special requirements, items of concern, access issues, etc...\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactMoving\n      heading=\"Get Your Free Moving Quote\"\n      description=\"Fill out the form below and receive a detailed moving estimate within 24 hours. Our team is ready to make your move stress-free.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you! We'll review your moving requirements and send you a detailed quote within 24 hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Get Free Quote\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.8}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","moving","relocation","form","services","logistics"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a moving quote request use case — first/last name, email, phone, move type radio (local/long-distance/international/office), current address, destination address, preferred move date picker, and additional details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-partnership","name":"Contact Partnership Inquiry","title":"Contact Partnership Inquiry","category":"Contact","categorySlug":"contact","description":"Partnership inquiry form with company information and collaboration details. Ideal for B2B partnerships and strategic alliances.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290821/782b9fx35gp04j1a95313qw63t3n/cleanshot-2026-02-25-at-02-12-52.png","mobile":"https://cdn.ing/assets/i/r/290820/cc7yzflwvsdv67vh0gn48lts4yfd/cleanshot-2026-02-25-at-02-13-02.png"},"componentPath":"blocks/contact/contact-partnership.tsx","code":"\"use client\";\n\nimport { ContactPartnership } from \"@opensite/ui/blocks/contact/contact-partnership\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Work Email\",\n    placeholder: \"your@company.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"title\",\n    type: \"text\",\n    label: \"Job Title\",\n    placeholder: \"Your position\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"website\",\n    type: \"url\",\n    label: \"Company Website\",\n    placeholder: \"https://example.com\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"partnership_type\",\n    type: \"radio\",\n    label: \"Partnership Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"reseller\",\n        label: \"Reseller/Channel Partner\",\n        description: \"Sell our products to your customers.\",\n      },\n      {\n        value: \"technology\",\n        label: \"Technology Partner\",\n        description: \"Integrate our solutions with yours.\",\n      },\n      {\n        value: \"referral\",\n        label: \"Referral Partner\",\n        description: \"Refer clients and earn commissions.\",\n      },\n      {\n        value: \"strategic\",\n        label: \"Strategic Alliance\",\n        description: \"Long-term strategic partnership.\",\n      },\n    ],\n  },\n  {\n    name: \"company_size\",\n    type: \"select\",\n    label: \"Company Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"1-10\", label: \"1-10 employees\" },\n      { value: \"11-50\", label: \"11-50 employees\" },\n      { value: \"51-200\", label: \"51-200 employees\" },\n      { value: \"201-500\", label: \"201-500 employees\" },\n      { value: \"501-1000\", label: \"501-1000 employees\" },\n      { value: \"1001+\", label: \"1001+ employees\" },\n    ],\n  },\n  {\n    name: \"annual_revenue\",\n    type: \"select\",\n    label: \"Annual Revenue\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"0-1m\", label: \"Under $1M\" },\n      { value: \"1m-10m\", label: \"$1M - $10M\" },\n      { value: \"10m-50m\", label: \"$10M - $50M\" },\n      { value: \"50m-100m\", label: \"$50M - $100M\" },\n      { value: \"100m+\", label: \"$100M+\" },\n    ],\n  },\n  {\n    name: \"territories\",\n    type: \"checkbox-group\",\n    label: \"Target Markets/Territories\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"north_america\", label: \"North America\" },\n      { value: \"south_america\", label: \"South America\" },\n      { value: \"europe\", label: \"Europe\" },\n      { value: \"asia\", label: \"Asia Pacific\" },\n      { value: \"middle_east\", label: \"Middle East\" },\n      { value: \"africa\", label: \"Africa\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Partnership Proposal\",\n    placeholder: \"Describe your partnership vision, target market, resources, and how we can work together...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n  {\n    name: \"pitch_deck\",\n    type: \"file\",\n    label: \"Company Deck or Proposal\",\n    placeholder: \"Upload your company profile or partnership proposal...\",\n    required: false,\n    accept: \".pdf,.ppt,.pptx\",\n    maxSize: 20 * 1024 * 1024,\n    maxFiles: 2,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactPartnership\n      heading=\"Become a Partner\"\n      description=\"Join our growing network of partners and unlock new revenue opportunities. Fill out the form below to start the conversation.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your interest in partnering with us! Our partnerships team will review your application and reach out within 3-5 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Partnership Inquiry\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","partnership","collaboration","form","b2b","alliance"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is actively seeking business partnerships — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a partnership inquiry use case — first/last name, work email, phone, company name, job title, website URL, partnership type radio (reseller/technology/referral/strategic), and message — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-photography","name":"Contact Photography Services","title":"Contact Photography","category":"Contact","categorySlug":"contact","description":"Full-width split-screen contact form with edge-to-edge design, featuring heading, description and form on one side and a large full-height image on the other. Pattern background support, configurable media placement. Perfect for photographers, studios, and creative services.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306281/2ulmrnlqv2jt6iuc22gdr92l4rlp/contact-photography-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306282/dhpjt9j5fxq48abbbzx09c9z1vpr/contact-photography-mobile.jpg"},"componentPath":"blocks/contact/contact-photography.tsx","code":"\"use client\";\n\nimport { ContactPhotography } from \"@opensite/ui/blocks/contact/contact-photography\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    type: \"checkbox-group\",\n    label: \"Project Type(s)\",\n    placeholder: \"Select 1 or more project types\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"wedding\",\n        label: \"Wedding\",\n        description: \"Ceremony, reception, and bridal portraits.\",\n      },\n      {\n        value: \"portrait\",\n        label: \"Portrait\",\n        description: \"Individual, couple, or family sessions.\",\n      },\n      {\n        value: \"corporate\",\n        label: \"Corporate\",\n        description: \"Headshots, team photos, and events.\",\n      },\n      {\n        value: \"product\",\n        label: \"Product\",\n        description: \"E-commerce and catalog photography.\",\n      },\n      {\n        value: \"real_estate\",\n        label: \"Real Estate\",\n        description: \"Interior, exterior, and aerial shots.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"Something else not listed above.\",\n      },\n    ],\n  },\n  {\n    name: \"event_date\",\n    type: \"date-picker\",\n    label: \"Preferred Date\",\n    placeholder: \"Select a date\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"reference_images\",\n    type: \"file\",\n    label: \"Reference Images\",\n    placeholder: \"Upload reference photos or mood boards...\",\n    required: false,\n    accept: \"image/*,.pdf\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Project Details\",\n    placeholder:\n      \"Tell us about your vision, location, special requests, etc...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactPhotography\n      image={{\n        src: imagePlaceholders[108],\n        alt: \"A person working at a desk\",\n      }}\n      heading=\"Ready to Get Started?\"\n      description=\"Tell us about your project and we'll put together a custom quote for you. We typically respond within 1-2 business days.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your inquiry! We'll review your project details and get back to you within 1-2 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Inquiry\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopLeft\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"image":{"type":"object","description":"Image configuration for the left panel","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","photography","split-screen","form","image","creative","edge-to-edge"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a photography inquiry use case — first/last name, email, phone, project type checkbox-group, preferred date picker, reference image file upload, and project details textarea — do not change the field set unless the site has clearly different requirements. DO NOT USE this block if you don't have a real image from the media library — the 'image' prop is required for the left-panel split layout. Only use a real image from the media library. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-press","name":"Contact Press Inquiries","title":"Contact Press Inquiries","category":"Contact","categorySlug":"contact","description":"Press and media inquiry form with publication details and story information. Designed for PR teams and media relations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290581/m30n3j4r01ue61jvt7bw53nr8fjx/contact-press-desktop.png","mobile":"https://cdn.ing/assets/i/r/290582/tragwwn58ljk6dpqlaq80l3hkmht/contact-press-mobile.png"},"componentPath":"blocks/contact/contact-press.tsx","code":"\"use client\";\n\nimport { ContactPress } from \"@opensite/ui/blocks/contact/contact-press\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@publication.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"publication\",\n    type: \"text\",\n    label: \"Publication/Outlet\",\n    placeholder: \"Name of your publication or media outlet\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"title\",\n    type: \"text\",\n    label: \"Job Title\",\n    placeholder: \"e.g., Journalist, Editor, Producer\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"website\",\n    type: \"url\",\n    label: \"Publication Website\",\n    placeholder: \"https://example.com\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"inquiry_type\",\n    type: \"select\",\n    label: \"Type of Inquiry\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"interview\", label: \"Interview Request\" },\n      { value: \"quote\", label: \"Quote/Statement Request\" },\n      { value: \"story\", label: \"Story Pitch\" },\n      { value: \"event\", label: \"Event Coverage\" },\n      { value: \"press_kit\", label: \"Press Kit Request\" },\n      { value: \"fact_check\", label: \"Fact Checking\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"deadline\",\n    type: \"date-picker\",\n    label: \"Deadline\",\n    placeholder: \"Select deadline date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"urgency\",\n    type: \"select\",\n    label: \"Urgency Level\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"immediate\", label: \"Immediate (same day)\" },\n      { value: \"24hrs\", label: \"Within 24 hours\" },\n      { value: \"48hrs\", label: \"Within 48 hours\" },\n      { value: \"week\", label: \"Within a week\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  {\n    name: \"topics\",\n    type: \"checkbox-group\",\n    label: \"Topics of Interest\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"company_news\",\n        label: \"Company News\",\n        description: \"Latest announcements and updates.\",\n      },\n      {\n        value: \"products\",\n        label: \"Products & Services\",\n        description: \"Product launches and features.\",\n      },\n      {\n        value: \"leadership\",\n        label: \"Leadership\",\n        description: \"Executive interviews and insights.\",\n      },\n      {\n        value: \"industry\",\n        label: \"Industry Trends\",\n        description: \"Market analysis and commentary.\",\n      },\n      {\n        value: \"research\",\n        label: \"Research & Data\",\n        description: \"Studies and reports.\",\n      },\n      {\n        value: \"social_impact\",\n        label: \"Social Impact\",\n        description: \"CSR and community initiatives.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Inquiry Details\",\n    placeholder: \"Please provide details about your inquiry, questions you'd like answered, angle of the story, etc...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n  {\n    name: \"previous_work\",\n    type: \"url\",\n    label: \"Link to Previous Work\",\n    placeholder: \"https://example.com/your-article\",\n    required: false,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactPress\n      heading=\"Press & Media Inquiries\"\n      description=\"Thank you for your interest in covering our story. Complete the form below and our communications team will respond as quickly as possible.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for reaching out! Our media relations team will review your inquiry and respond according to your deadline.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Media Inquiry\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.5}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","press","media","form","pr","journalism"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site has a press/media relations function — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a press/media inquiry use case — first/last name, email, phone, publication/outlet name, job title, publication website, inquiry type select (interview/quote/story pitch/event coverage/press kit/fact check), deadline date picker, and details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-quote","name":"Contact Quote Request","title":"Contact Quote Request","category":"Contact","categorySlug":"contact","description":"Quote request form with project details, budget, and timeline. Ideal for service providers and contractors.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290823/nq0u0rcma7n0lfl9clhtvnpecu9c/cleanshot-2026-02-25-at-02-17-50.png","mobile":"https://cdn.ing/assets/i/r/290822/n7n0i5jk26u72yag8sexi0zgqism/cleanshot-2026-02-25-at-02-18-00.png"},"componentPath":"blocks/contact/contact-quote.tsx","code":"\"use client\";\n\nimport { ContactQuote } from \"@opensite/ui/blocks/contact/contact-quote\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company (optional)\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"service_type\",\n    type: \"radio\",\n    label: \"Service Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"web_design\",\n        label: \"Web Design\",\n        description: \"Custom website design and development.\",\n      },\n      {\n        value: \"mobile_app\",\n        label: \"Mobile App\",\n        description: \"iOS and Android app development.\",\n      },\n      {\n        value: \"branding\",\n        label: \"Branding\",\n        description: \"Logo, identity, and brand guidelines.\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Digital Marketing\",\n        description: \"SEO, PPC, and content marketing.\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Strategy and technical consulting.\",\n      },\n      {\n        value: \"maintenance\",\n        label: \"Maintenance\",\n        description: \"Ongoing support and updates.\",\n      },\n    ],\n  },\n  {\n    name: \"budget_range\",\n    type: \"select\",\n    label: \"Budget Range\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"5k-10k\", label: \"$5,000 - $10,000\" },\n      { value: \"10k-25k\", label: \"$10,000 - $25,000\" },\n      { value: \"25k-50k\", label: \"$25,000 - $50,000\" },\n      { value: \"50k-100k\", label: \"$50,000 - $100,000\" },\n      { value: \"100k+\", label: \"$100,000+\" },\n      { value: \"not_sure\", label: \"Not sure yet\" },\n    ],\n  },\n  {\n    name: \"timeline\",\n    type: \"select\",\n    label: \"Project Timeline\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"asap\", label: \"ASAP\" },\n      { value: \"1-2\", label: \"1-2 months\" },\n      { value: \"3-4\", label: \"3-4 months\" },\n      { value: \"5-6\", label: \"5-6 months\" },\n      { value: \"6+\", label: \"6+ months\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  {\n    name: \"project_status\",\n    type: \"radio\",\n    label: \"Project Status\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"new\", label: \"New Project\" },\n      { value: \"redesign\", label: \"Redesign/Update\" },\n      { value: \"migration\", label: \"Platform Migration\" },\n      { value: \"expansion\", label: \"Expansion/Addition\" },\n    ],\n  },\n  {\n    name: \"features\",\n    type: \"checkbox-group\",\n    label: \"Required Features\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"ecommerce\",\n        label: \"E-commerce\",\n        description: \"Online store and payments.\",\n      },\n      { value: \"cms\", label: \"CMS\", description: \"Content management system.\" },\n      {\n        value: \"booking\",\n        label: \"Booking System\",\n        description: \"Appointments and reservations.\",\n      },\n      {\n        value: \"crm\",\n        label: \"CRM\",\n        description: \"Customer relationship management.\",\n      },\n      {\n        value: \"analytics\",\n        label: \"Analytics\",\n        description: \"Custom tracking and reporting.\",\n      },\n      {\n        value: \"integrations\",\n        label: \"Third-party Integrations\",\n        description: \"API connections.\",\n      },\n    ],\n  },\n  {\n    name: \"reference_urls\",\n    type: \"textarea\",\n    label: \"Reference Websites\",\n    placeholder: \"List any websites you like (one per line)\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Project Description\",\n    placeholder:\n      \"Tell us about your project goals, challenges, and requirements...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"attachments\",\n    type: \"file\",\n    label: \"Project Documents\",\n    placeholder: \"Upload RFP, requirements, wireframes, etc...\",\n    required: false,\n    accept: \".pdf,.doc,.docx,.png,.jpg,.jpeg\",\n    maxSize: 15 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactQuote\n      heading=\"Request a Custom Quote\"\n      description=\"Tell us about your project and we'll provide a detailed proposal with pricing, timeline, and deliverables. Most quotes are delivered within 2-3 business days.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your quote request! We'll review your project requirements and send you a detailed proposal within 2-3 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Get Custom Quote\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"architect\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","quote","request","form","pricing","estimate"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a quote request use case — first/last name, email, phone, company (optional), service type radio, budget range select, and project description — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-referral","name":"Contact Referral","title":"Contact Referral","category":"Contact","categorySlug":"contact","description":"Referral form for recommending friends or colleagues. Includes referrer and referee information with incentive details.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290825/fng6evy4t7eigg4auwiqmd8qtw8z/cleanshot-2026-02-25-at-02-19-07.png","mobile":"https://cdn.ing/assets/i/r/290824/ilzuibpc3yz7brcfiee8wjkwp27h/cleanshot-2026-02-25-at-02-19-19.png"},"componentPath":"blocks/contact/contact-referral.tsx","code":"\"use client\";\n\nimport { ContactReferral } from \"@opensite/ui/blocks/contact/contact-referral\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"your_first_name\",\n    type: \"text\",\n    label: \"Your First Name\",\n    placeholder: \"Your first name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"your_last_name\",\n    type: \"text\",\n    label: \"Your Last Name\",\n    placeholder: \"Your last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"your_email\",\n    type: \"email\",\n    label: \"Your Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"your_phone\",\n    type: \"tel\",\n    label: \"Your Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_first_name\",\n    type: \"text\",\n    label: \"Referral's First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_last_name\",\n    type: \"text\",\n    label: \"Referral's Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_email\",\n    type: \"email\",\n    label: \"Referral's Email\",\n    placeholder: \"their@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_phone\",\n    type: \"tel\",\n    label: \"Referral's Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_company\",\n    type: \"text\",\n    label: \"Referral's Company\",\n    placeholder: \"Company name\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"service_interest\",\n    type: \"checkbox-group\",\n    label: \"Which Services Might They Need?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"web_design\",\n        label: \"Web Design\",\n        description: \"Website design and development.\",\n      },\n      {\n        value: \"seo\",\n        label: \"SEO/Marketing\",\n        description: \"Search optimization and digital marketing.\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Strategy and business consulting.\",\n      },\n      {\n        value: \"branding\",\n        label: \"Branding\",\n        description: \"Logo and brand identity.\",\n      },\n      {\n        value: \"content\",\n        label: \"Content Creation\",\n        description: \"Copywriting and content strategy.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"Something else.\",\n      },\n    ],\n  },\n  {\n    name: \"relationship\",\n    type: \"select\",\n    label: \"Your Relationship\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"friend\", label: \"Friend\" },\n      { value: \"colleague\", label: \"Colleague\" },\n      { value: \"family\", label: \"Family Member\" },\n      { value: \"business\", label: \"Business Partner\" },\n      { value: \"client\", label: \"Client/Customer\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"urgency\",\n    type: \"select\",\n    label: \"How Soon Do They Need Help?\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"immediate\", label: \"Immediately\" },\n      { value: \"week\", label: \"Within a week\" },\n      { value: \"month\", label: \"Within a month\" },\n      { value: \"exploring\", label: \"Just exploring options\" },\n      { value: \"not_sure\", label: \"Not sure\" },\n    ],\n  },\n  {\n    name: \"contacted\",\n    type: \"radio\",\n    label: \"Have They Given Permission to Be Contacted?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes, they're expecting a call\" },\n      { value: \"no\", label: \"No, please reach out carefully\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Additional Details\",\n    placeholder: \"Tell us why you think they'd be a good fit, what challenges they're facing, or anything else that would help us serve them better...\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactReferral\n      heading=\"Refer a Friend & Earn Rewards\"\n      description=\"Know someone who could benefit from our services? Refer them and you'll both receive exclusive rewards when they become a client.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for the referral! We'll reach out to them soon and keep you updated on the status. Your rewards will be processed once they become a client.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Referral\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","referral","recommendation","form","rewards","incentive"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a referral submission use case — the referring person's name/email/phone AND the referral's name/email/phone/company, plus a service interest checkbox-group and optional notes — do not change the dual-person field structure unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-report","name":"Contact Report Issue","title":"Contact Report Issue","category":"Contact","categorySlug":"contact","description":"Issue reporting form with category, severity, and detailed description. Perfect for bug reports and problem tracking.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290827/fsmot5i5v0ic69ltqct1cd9xza8o/cleanshot-2026-02-25-at-02-21-46.png","mobile":"https://cdn.ing/assets/i/r/290826/0olq31rdmt49h96pcpkvqydrqgh7/cleanshot-2026-02-25-at-02-21-56.png"},"componentPath":"blocks/contact/contact-report.tsx","code":"\"use client\";\n\nimport { ContactReport } from \"@opensite/ui/blocks/contact/contact-report\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"reporter_name\",\n    type: \"text\",\n    label: \"Your Name (optional)\",\n    placeholder: \"Your name\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address (optional)\",\n    placeholder: \"your@email.com\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number (optional)\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"issue_type\",\n    type: \"select\",\n    label: \"Type of Issue\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"bug\", label: \"Technical Bug/Error\" },\n      { value: \"security\", label: \"Security Vulnerability\" },\n      { value: \"abuse\", label: \"Abuse or Harassment\" },\n      { value: \"spam\", label: \"Spam Content\" },\n      { value: \"copyright\", label: \"Copyright Violation\" },\n      { value: \"inappropriate\", label: \"Inappropriate Content\" },\n      { value: \"privacy\", label: \"Privacy Concern\" },\n      { value: \"accessibility\", label: \"Accessibility Issue\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"severity\",\n    type: \"radio\",\n    label: \"Severity Level\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"low\",\n        label: \"Low\",\n        description: \"Minor issue, no immediate impact.\",\n      },\n      {\n        value: \"medium\",\n        label: \"Medium\",\n        description: \"Moderate impact, affects some users.\",\n      },\n      {\n        value: \"high\",\n        label: \"High\",\n        description: \"Major impact, affects many users.\",\n      },\n      {\n        value: \"critical\",\n        label: \"Critical\",\n        description: \"Severe issue requiring immediate attention.\",\n      },\n    ],\n  },\n  {\n    name: \"url\",\n    type: \"url\",\n    label: \"URL Where Issue Occurs\",\n    placeholder: \"https://example.com/page\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"device_info\",\n    type: \"checkbox-group\",\n    label: \"Device/Platform\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"desktop_windows\", label: \"Desktop - Windows\" },\n      { value: \"desktop_mac\", label: \"Desktop - Mac\" },\n      { value: \"desktop_linux\", label: \"Desktop - Linux\" },\n      { value: \"mobile_ios\", label: \"Mobile - iOS\" },\n      { value: \"mobile_android\", label: \"Mobile - Android\" },\n      { value: \"tablet\", label: \"Tablet\" },\n    ],\n  },\n  {\n    name: \"browser\",\n    type: \"select\",\n    label: \"Browser\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"chrome\", label: \"Chrome\" },\n      { value: \"firefox\", label: \"Firefox\" },\n      { value: \"safari\", label: \"Safari\" },\n      { value: \"edge\", label: \"Edge\" },\n      { value: \"opera\", label: \"Opera\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"when_occurred\",\n    type: \"date-picker\",\n    label: \"When Did This Occur?\",\n    placeholder: \"Select date\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"can_reproduce\",\n    type: \"radio\",\n    label: \"Can You Reproduce the Issue?\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"yes\", label: \"Yes, consistently\" },\n      { value: \"sometimes\", label: \"Sometimes\" },\n      { value: \"no\", label: \"No, it was one-time\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Issue Description\",\n    placeholder:\n      \"Please provide detailed information about the issue, including steps to reproduce, expected behavior, actual behavior, and any error messages...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n  {\n    name: \"screenshots\",\n    type: \"file\",\n    label: \"Screenshots or Evidence\",\n    placeholder: \"Upload screenshots, error logs, or other supporting files...\",\n    required: false,\n    accept: \"image/*,.pdf,.txt,.log\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"follow_up\",\n    type: \"radio\",\n    label: \"Would You Like Follow-up Updates?\",\n    required: false,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes, keep me informed\" },\n      { value: \"no\", label: \"No, anonymous report\" },\n    ],\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactReport\n      heading=\"Report an Issue\"\n      description=\"Help us improve by reporting bugs, security vulnerabilities, or inappropriate content. We review all reports carefully and take action quickly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your report! We take all issues seriously and will investigate this matter promptly. If you requested follow-up, we'll keep you updated on our progress.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Report\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","report","issue","form","bug","problem","support"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for an issue/abuse report use case — reporter name (optional), email (optional), phone (optional), issue type select, severity radio (low/medium/high/critical), description, and steps to reproduce — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-reservation","name":"Contact Reservation","title":"Contact Reservation","category":"Contact","categorySlug":"contact","description":"Reservation form with date, time, party size, and special requests. Ideal for restaurants, hotels, and event venues.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290583/kr73b03ve8ubtbqq8dpr1a4nrxip/contact-reservation-desktop.png","mobile":"https://cdn.ing/assets/i/r/290584/7ffivx00iau4ak7tsak46tdeza92/contact-reservation-mobile.png"},"componentPath":"blocks/contact/contact-reservation.tsx","code":"\"use client\";\n\nimport { ContactReservation } from \"@opensite/ui/blocks/contact/contact-reservation\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"reservation_date\",\n    type: \"date-picker\",\n    label: \"Reservation Date\",\n    placeholder: \"Select date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"reservation_time\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"12:00\", label: \"12:00 PM\" },\n      { value: \"12:30\", label: \"12:30 PM\" },\n      { value: \"13:00\", label: \"1:00 PM\" },\n      { value: \"13:30\", label: \"1:30 PM\" },\n      { value: \"14:00\", label: \"2:00 PM\" },\n      { value: \"14:30\", label: \"2:30 PM\" },\n      { value: \"17:00\", label: \"5:00 PM\" },\n      { value: \"17:30\", label: \"5:30 PM\" },\n      { value: \"18:00\", label: \"6:00 PM\" },\n      { value: \"18:30\", label: \"6:30 PM\" },\n      { value: \"19:00\", label: \"7:00 PM\" },\n      { value: \"19:30\", label: \"7:30 PM\" },\n      { value: \"20:00\", label: \"8:00 PM\" },\n      { value: \"20:30\", label: \"8:30 PM\" },\n      { value: \"21:00\", label: \"9:00 PM\" },\n    ],\n  },\n  {\n    name: \"party_size\",\n    type: \"select\",\n    label: \"Party Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"1\", label: \"1 person\" },\n      { value: \"2\", label: \"2 people\" },\n      { value: \"3\", label: \"3 people\" },\n      { value: \"4\", label: \"4 people\" },\n      { value: \"5\", label: \"5 people\" },\n      { value: \"6\", label: \"6 people\" },\n      { value: \"7\", label: \"7 people\" },\n      { value: \"8\", label: \"8 people\" },\n      { value: \"9+\", label: \"9+ people (large party)\" },\n    ],\n  },\n  {\n    name: \"seating_preference\",\n    type: \"select\",\n    label: \"Seating Preference\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"indoor\", label: \"Indoor\" },\n      { value: \"outdoor\", label: \"Outdoor/Patio\" },\n      { value: \"bar\", label: \"Bar Seating\" },\n      { value: \"booth\", label: \"Booth\" },\n      { value: \"no_preference\", label: \"No Preference\" },\n    ],\n  },\n  {\n    name: \"occasion\",\n    type: \"select\",\n    label: \"Special Occasion\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      { value: \"none\", label: \"No special occasion\" },\n      { value: \"birthday\", label: \"Birthday\" },\n      { value: \"anniversary\", label: \"Anniversary\" },\n      { value: \"business\", label: \"Business Meeting\" },\n      { value: \"date\", label: \"Date Night\" },\n      { value: \"engagement\", label: \"Engagement\" },\n      { value: \"other\", label: \"Other Celebration\" },\n    ],\n  },\n  {\n    name: \"dietary_restrictions\",\n    type: \"checkbox-group\",\n    label: \"Dietary Restrictions or Allergies\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"vegetarian\", label: \"Vegetarian\" },\n      { value: \"vegan\", label: \"Vegan\" },\n      { value: \"gluten_free\", label: \"Gluten-Free\" },\n      { value: \"dairy_free\", label: \"Dairy-Free\" },\n      { value: \"nut_allergy\", label: \"Nut Allergy\" },\n      { value: \"shellfish_allergy\", label: \"Shellfish Allergy\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Special Requests\",\n    placeholder: \"Any special requests, accessibility needs, or additional information...\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"marketing_consent\",\n    type: \"checkbox\",\n    label: \"Send me exclusive offers and updates\",\n    required: false,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactReservation\n      heading=\"Make a Reservation\"\n      description=\"Reserve your table today for an unforgettable dining experience. We'll confirm your reservation within 1 hour during business hours.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your reservation request has been received! We'll send you a confirmation email within the hour. See you soon!\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Reserve Table\",\n          },\n        },\n      }}\n      background=\"muted\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.6}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","reservation","booking","form","hospitality","restaurant"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a dining/venue reservation use case — first/last name, email, phone, reservation date picker, preferred time select, party size select, and special requests — preserve the time slot options that match the business's actual operating hours. Do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-retreat","name":"Contact Retreat Registration","title":"Contact Retreat Registration","category":"Contact","categorySlug":"contact","description":"Retreat registration form with accommodation preferences, dietary requirements, and participant information. Perfect for wellness retreats and corporate events.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290585/n89hg5mgbs2clzzbmpatqud3d3pp/contact-retreat-desktop.png","mobile":"https://cdn.ing/assets/i/r/290586/gxsvw2cqtlo0o7t0tftb58ipdbh6/contact-retreat-mobile.png"},"componentPath":"blocks/contact/contact-retreat.tsx","code":"\"use client\";\n\nimport { ContactRetreat } from \"@opensite/ui/blocks/contact/contact-retreat\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company/Organization\",\n    placeholder: \"Your organization\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"retreat_type\",\n    type: \"radio\",\n    label: \"Type of Retreat\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"corporate\",\n        label: \"Corporate Team Building\",\n        description: \"Company retreats and team bonding.\",\n      },\n      {\n        value: \"wellness\",\n        label: \"Wellness Retreat\",\n        description: \"Yoga, meditation, and mindfulness.\",\n      },\n      {\n        value: \"creative\",\n        label: \"Creative Workshop\",\n        description: \"Artists, writers, and creatives.\",\n      },\n      {\n        value: \"leadership\",\n        label: \"Leadership Training\",\n        description: \"Executive development programs.\",\n      },\n      {\n        value: \"spiritual\",\n        label: \"Spiritual Retreat\",\n        description: \"Religious or spiritual gatherings.\",\n      },\n      {\n        value: \"special_event\",\n        label: \"Special Event\",\n        description: \"Weddings, reunions, celebrations.\",\n      },\n    ],\n  },\n  {\n    name: \"check_in\",\n    type: \"date-picker\",\n    label: \"Preferred Check-in Date\",\n    placeholder: \"Select check-in date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"check_out\",\n    type: \"date-picker\",\n    label: \"Preferred Check-out Date\",\n    placeholder: \"Select check-out date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"number_of_guests\",\n    type: \"select\",\n    label: \"Number of Guests\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"1-10\", label: \"1-10 guests\" },\n      { value: \"11-20\", label: \"11-20 guests\" },\n      { value: \"21-30\", label: \"21-30 guests\" },\n      { value: \"31-40\", label: \"31-40 guests\" },\n      { value: \"41-50\", label: \"41-50 guests\" },\n      { value: \"51+\", label: \"51+ guests\" },\n    ],\n  },\n  {\n    name: \"accommodation_type\",\n    type: \"select\",\n    label: \"Accommodation Preference\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"shared\", label: \"Shared Rooms\" },\n      { value: \"private\", label: \"Private Rooms\" },\n      { value: \"suites\", label: \"Suites\" },\n      { value: \"cabins\", label: \"Private Cabins\" },\n      { value: \"mixed\", label: \"Mix of Options\" },\n    ],\n  },\n  {\n    name: \"catering_needs\",\n    type: \"checkbox-group\",\n    label: \"Catering Requirements\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"breakfast\", label: \"Breakfast\", description: \"Daily breakfast service.\" },\n      { value: \"lunch\", label: \"Lunch\", description: \"Daily lunch service.\" },\n      { value: \"dinner\", label: \"Dinner\", description: \"Daily dinner service.\" },\n      { value: \"snacks\", label: \"Snacks & Beverages\", description: \"All-day refreshments.\" },\n      { value: \"special_diet\", label: \"Special Dietary Needs\", description: \"Accommodations required.\" },\n    ],\n  },\n  {\n    name: \"facilities_needed\",\n    type: \"checkbox-group\",\n    label: \"Facilities & Services Needed\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      { value: \"meeting_rooms\", label: \"Meeting Rooms\", description: \"Conference spaces.\" },\n      { value: \"av_equipment\", label: \"A/V Equipment\", description: \"Projectors, sound systems.\" },\n      { value: \"outdoor_space\", label: \"Outdoor Spaces\", description: \"Gardens, patios, fire pits.\" },\n      { value: \"yoga_studio\", label: \"Yoga/Meditation Studio\", description: \"Wellness facilities.\" },\n      { value: \"recreation\", label: \"Recreation\", description: \"Pool, gym, spa.\" },\n      { value: \"transportation\", label: \"Transportation\", description: \"Airport/local shuttles.\" },\n    ],\n  },\n  {\n    name: \"activities\",\n    type: \"textarea\",\n    label: \"Planned Activities\",\n    placeholder: \"Describe any workshops, activities, or programming you're planning...\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"budget_range\",\n    type: \"select\",\n    label: \"Budget Range (per person)\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"500-1000\", label: \"$500 - $1,000\" },\n      { value: \"1000-2000\", label: \"$1,000 - $2,000\" },\n      { value: \"2000-3000\", label: \"$2,000 - $3,000\" },\n      { value: \"3000-5000\", label: \"$3,000 - $5,000\" },\n      { value: \"5000+\", label: \"$5,000+\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  {\n    name: \"flexible_dates\",\n    type: \"radio\",\n    label: \"Are Your Dates Flexible?\",\n    required: false,\n    columnSpan: 6,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes\" },\n      { value: \"no\", label: \"No\" },\n      { value: \"somewhat\", label: \"Somewhat\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Additional Details\",\n    placeholder: \"Tell us more about your retreat vision, goals, special requirements, accessibility needs, etc...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"proposal_docs\",\n    type: \"file\",\n    label: \"Retreat Proposal or Agenda\",\n    placeholder: \"Upload any planning documents...\",\n    required: false,\n    accept: \".pdf,.doc,.docx,.xls,.xlsx\",\n    maxSize: 15 * 1024 * 1024,\n    maxFiles: 3,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactRetreat\n      heading=\"Plan Your Perfect Retreat\"\n      description=\"Create an unforgettable retreat experience at our peaceful sanctuary. Complete the form below and our event specialists will create a custom proposal for you.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your retreat inquiry! Our event team will review your requirements and send you a detailed proposal within 2-3 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Request Retreat Proposal\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.4}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","retreat","registration","form","wellness","event"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a retreat booking inquiry use case — first/last name, email, phone, company/organization (optional), retreat type radio (corporate/wellness/creative/leadership/spiritual/special event), group size, preferred dates, and additional details — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-rsvp","name":"Contact RSVP","title":"Contact RSVP","category":"Contact","categorySlug":"contact","description":"RSVP form for event attendance confirmation with guest count and dietary preferences. Simple and elegant design for invitations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290587/082ptd2rzt5n82n0pjf26vsfy3bx/contact-rsvp-desktop.png","mobile":"https://cdn.ing/assets/i/r/290588/02kk0b99d5r1g1v8t1odlxkfpecm/contact-rsvp-mobile.png"},"componentPath":"blocks/contact/contact-rsvp.tsx","code":"\"use client\";\n\nimport { ContactRsvp } from \"@opensite/ui/blocks/contact/contact-rsvp\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"attendance\",\n    type: \"radio\",\n    label: \"Will You Be Attending?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"yes\",\n        label: \"Joyfully Accepts\",\n        description: \"Can't wait to celebrate with you!\",\n      },\n      {\n        value: \"no\",\n        label: \"Regretfully Declines\",\n        description: \"Sorry to miss the celebration.\",\n      },\n    ],\n  },\n  {\n    name: \"plus_one\",\n    type: \"radio\",\n    label: \"Will You Bring a Guest?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes, bringing a guest (+1)\" },\n      { value: \"no\", label: \"No, just me\" },\n    ],\n  },\n  {\n    name: \"guest_name\",\n    type: \"text\",\n    label: \"Guest's Full Name\",\n    placeholder: \"Guest's name (if bringing +1)\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"total_attending\",\n    type: \"select\",\n    label: \"Total Number Attending\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"0\", label: \"0 (Not attending)\" },\n      { value: \"1\", label: \"1 person\" },\n      { value: \"2\", label: \"2 people\" },\n      { value: \"3\", label: \"3 people\" },\n      { value: \"4\", label: \"4 people\" },\n    ],\n  },\n  {\n    name: \"meal_preference\",\n    type: \"radio\",\n    label: \"Meal Preference (Primary Guest)\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"beef\",\n        label: \"Filet Mignon\",\n        description: \"Beef tenderloin with herb butter.\",\n      },\n      {\n        value: \"chicken\",\n        label: \"Herb-Roasted Chicken\",\n        description: \"Free-range chicken with seasonal vegetables.\",\n      },\n      {\n        value: \"fish\",\n        label: \"Pan-Seared Salmon\",\n        description: \"Atlantic salmon with lemon dill sauce.\",\n      },\n      {\n        value: \"vegetarian\",\n        label: \"Vegetarian\",\n        description: \"Seasonal vegetable Wellington.\",\n      },\n      {\n        value: \"vegan\",\n        label: \"Vegan\",\n        description: \"Plant-based entree options.\",\n      },\n    ],\n  },\n  {\n    name: \"guest_meal\",\n    type: \"radio\",\n    label: \"Meal Preference (Guest)\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"beef\",\n        label: \"Filet Mignon\",\n        description: \"Beef tenderloin with herb butter.\",\n      },\n      {\n        value: \"chicken\",\n        label: \"Herb-Roasted Chicken\",\n        description: \"Free-range chicken with seasonal vegetables.\",\n      },\n      {\n        value: \"fish\",\n        label: \"Pan-Seared Salmon\",\n        description: \"Atlantic salmon with lemon dill sauce.\",\n      },\n      {\n        value: \"vegetarian\",\n        label: \"Vegetarian\",\n        description: \"Seasonal vegetable Wellington.\",\n      },\n      {\n        value: \"vegan\",\n        label: \"Vegan\",\n        description: \"Plant-based entree options.\",\n      },\n    ],\n  },\n  {\n    name: \"dietary_restrictions\",\n    type: \"textarea\",\n    label: \"Dietary Restrictions or Allergies\",\n    placeholder: \"Please list any food allergies, intolerances, or special dietary needs...\",\n    required: false,\n    rows: 2,\n    columnSpan: 12,\n  },\n  {\n    name: \"song_request\",\n    type: \"text\",\n    label: \"Song Request\",\n    placeholder: \"Request a song to dance to!\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Special Message or Notes\",\n    placeholder: \"Any special message for the hosts, accessibility needs, or other information...\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactRsvp\n      heading=\"RSVP\"\n      description=\"We can't wait to celebrate with you! Please respond by March 15th, 2026.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your RSVP! We're excited to celebrate with you. You'll receive a confirmation email shortly with additional event details.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit RSVP\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","rsvp","event","form","invitation","attendance"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is for a specific event that requires RSVP responses — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for an RSVP use case — first/last name, email, phone, attendance radio (accepts/declines), plus-one radio, guest name (if applicable), and total attending select — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-sales","name":"Contact Sales","title":"Contact Sales","category":"Contact","categorySlug":"contact","description":"Sales inquiry form with company information and product interest. Designed for B2B sales teams and lead generation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290589/wfwbxp231gqnv2dmyf2wfse854ue/contact-sales-desktop.png","mobile":"https://cdn.ing/assets/i/r/290590/u66smng6mkvwih8pnfqn7t5vchnq/contact-sales-mobile.png"},"componentPath":"blocks/contact/contact-sales.tsx","code":"\"use client\";\n\nimport { ContactSales } from \"@opensite/ui/blocks/contact/contact-sales\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Business Email\",\n    placeholder: \"you@company.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company_size\",\n    type: \"select\",\n    label: \"Company Size\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"1-10\", label: \"1-10 employees\" },\n      { value: \"11-50\", label: \"11-50 employees\" },\n      { value: \"51-200\", label: \"51-200 employees\" },\n      { value: \"201-500\", label: \"201-500 employees\" },\n      { value: \"501-1000\", label: \"501-1,000 employees\" },\n      { value: \"1000+\", label: \"1,000+ employees\" },\n    ],\n  },\n  {\n    name: \"industry\",\n    type: \"select\",\n    label: \"Industry\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"technology\", label: \"Technology\" },\n      { value: \"healthcare\", label: \"Healthcare\" },\n      { value: \"finance\", label: \"Financial Services\" },\n      { value: \"retail\", label: \"Retail & E-commerce\" },\n      { value: \"manufacturing\", label: \"Manufacturing\" },\n      { value: \"education\", label: \"Education\" },\n      { value: \"real_estate\", label: \"Real Estate\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"interest\",\n    type: \"radio\",\n    label: \"What are you interested in?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"demo\",\n        label: \"Schedule a Demo\",\n        description: \"See our product in action with a personalized demo.\",\n      },\n      {\n        value: \"pricing\",\n        label: \"Pricing Information\",\n        description: \"Learn about our plans and find the right fit.\",\n      },\n      {\n        value: \"trial\",\n        label: \"Start a Free Trial\",\n        description: \"Try our platform risk-free for 14 days.\",\n      },\n      {\n        value: \"enterprise\",\n        label: \"Enterprise Solutions\",\n        description: \"Custom solutions for large organizations.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your needs\",\n    placeholder: \"What challenges are you looking to solve? What goals do you have?\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactSales\n      heading=\"Let's Talk About Your Business\"\n      description=\"Connect with our sales team to learn how our solutions can help you achieve your goals. We'll work with you to find the perfect plan for your needs.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your interest! A sales representative will reach out to you within 24 hours to discuss your needs.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Contact Sales\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","sales","inquiry","form","b2b","leads"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a B2B sales inquiry use case — first/last name, business email, phone, company name, company size select, industry select, and message — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-schedule","name":"Contact Schedule Meeting","title":"Contact Schedule Meeting","category":"Contact","categorySlug":"contact","description":"Meeting scheduling form with calendar integration and time slot selection. Streamlined booking for consultations and appointments.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290591/vc78la2z54i13wkzqe4gam1wr3rd/contact-schedule-desktop.png","mobile":"https://cdn.ing/assets/i/r/290592/1zq9cc1ix3htamr00fnrg7zfq2un/contact-schedule-mobile.png"},"componentPath":"blocks/contact/contact-schedule.tsx","code":"\"use client\";\n\nimport { ContactSchedule } from \"@opensite/ui/blocks/contact/contact-schedule\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"appointment_type\",\n    type: \"radio\",\n    label: \"Type of Appointment\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"consultation\",\n        label: \"Initial Consultation\",\n        description: \"30-minute discovery call to discuss your needs.\",\n      },\n      {\n        value: \"demo\",\n        label: \"Product Demo\",\n        description: \"60-minute walkthrough of our platform.\",\n      },\n      {\n        value: \"followup\",\n        label: \"Follow-up Meeting\",\n        description: \"Continue the conversation from a previous call.\",\n      },\n      {\n        value: \"training\",\n        label: \"Training Session\",\n        description: \"Hands-on training for you and your team.\",\n      },\n    ],\n  },\n  {\n    name: \"preferred_date\",\n    type: \"date-picker\",\n    label: \"Preferred Date\",\n    placeholder: \"Select a date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"preferred_time\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"morning\", label: \"Morning (9am - 12pm)\" },\n      { value: \"afternoon\", label: \"Afternoon (12pm - 5pm)\" },\n      { value: \"evening\", label: \"Evening (5pm - 7pm)\" },\n    ],\n  },\n  {\n    name: \"timezone\",\n    type: \"select\",\n    label: \"Timezone\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"EST\", label: \"Eastern Time (EST)\" },\n      { value: \"CST\", label: \"Central Time (CST)\" },\n      { value: \"MST\", label: \"Mountain Time (MST)\" },\n      { value: \"PST\", label: \"Pacific Time (PST)\" },\n      { value: \"GMT\", label: \"Greenwich Mean Time (GMT)\" },\n      { value: \"CET\", label: \"Central European Time (CET)\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"What would you like to discuss?\",\n    placeholder: \"Tell us what you'd like to cover during the meeting...\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactSchedule\n      heading=\"Schedule a Meeting\"\n      description=\"Book time with our team to discuss your needs. Choose a date and time that works best for you, and we'll send you a calendar invitation with all the details.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your appointment request has been received! We'll send you a calendar invitation shortly with meeting details and a video conferencing link.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Schedule Appointment\",\n          },\n        },\n      }}\n      background=\"gradient\"\n      pattern=\"architect\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","schedule","meeting","form","booking","calendar"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for an appointment scheduling use case — full name, email, phone, appointment type radio (consultation/demo/follow-up/training), preferred date picker, preferred time select, timezone select, and optional notes — preserve the appointment type options that match the business's actual service offerings. Do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-sponsorship","name":"Contact Sponsorship","title":"Contact Sponsorship","category":"Contact","categorySlug":"contact","description":"Sponsorship inquiry form with organization details and sponsorship level preferences. Perfect for events and non-profits.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290593/znnriqm45da2suh0p32k7dmcrl14/contact-sponsorship-desktop.png","mobile":"https://cdn.ing/assets/i/r/290594/zmct4f3px8dmcdfieolxrp2lb0zs/contact-sponsorship-mobile.png"},"componentPath":"blocks/contact/contact-sponsorship.tsx","code":"\"use client\";\n\nimport { ContactSponsorship } from \"@opensite/ui/blocks/contact/contact-sponsorship\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"organization_name\",\n    type: \"text\",\n    label: \"Organization Name\",\n    placeholder: \"Your organization\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"contact_name\",\n    type: \"text\",\n    label: \"Contact Person\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"title\",\n    type: \"text\",\n    label: \"Job Title\",\n    placeholder: \"Your title\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"contact@organization.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"sponsorship_type\",\n    type: \"radio\",\n    label: \"Type of Sponsorship\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"event\",\n        label: \"Event Sponsorship\",\n        description: \"Sponsor our upcoming conferences or events.\",\n      },\n      {\n        value: \"program\",\n        label: \"Program Sponsorship\",\n        description: \"Support our ongoing programs and initiatives.\",\n      },\n      {\n        value: \"scholarship\",\n        label: \"Scholarship Fund\",\n        description: \"Contribute to educational scholarships.\",\n      },\n      {\n        value: \"general\",\n        label: \"General Support\",\n        description: \"General organizational support and operations.\",\n      },\n    ],\n  },\n  {\n    name: \"sponsorship_level\",\n    type: \"select\",\n    label: \"Preferred Sponsorship Level\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"platinum\", label: \"Platinum - $50,000+\" },\n      { value: \"gold\", label: \"Gold - $25,000 - $49,999\" },\n      { value: \"silver\", label: \"Silver - $10,000 - $24,999\" },\n      { value: \"bronze\", label: \"Bronze - $5,000 - $9,999\" },\n      { value: \"supporter\", label: \"Supporter - Under $5,000\" },\n      { value: \"discuss\", label: \"Prefer to discuss\" },\n    ],\n  },\n  {\n    name: \"organization_website\",\n    type: \"url\",\n    label: \"Organization Website\",\n    placeholder: \"https://yourorganization.com\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your sponsorship goals\",\n    placeholder: \"What are you hoping to achieve through this sponsorship? Do you have any specific requirements or requests?\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"sponsorship_deck\",\n    type: \"file\",\n    label: \"Upload Company Information (Optional)\",\n    placeholder: \"Upload company deck, brochure, or other materials...\",\n    required: false,\n    accept: \".pdf,.doc,.docx,.ppt,.pptx\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 3,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactSponsorship\n      heading=\"Become a Sponsor\"\n      description=\"Join leading organizations in supporting our mission. Your sponsorship helps us create meaningful impact and reach more people in our community.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for your interest in sponsoring us! Our partnerships team will review your inquiry and reach out within 2-3 business days to discuss opportunities.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Sponsorship Inquiry\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","sponsorship","partnership","form","funding","event"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is actively seeking sponsors — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a sponsorship inquiry use case — organization name, contact person, job title, email, phone, sponsorship type radio (event/program/scholarship/general), preferred sponsorship level select, and message — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-support","name":"Contact Support","title":"Contact Support","category":"Contact","categorySlug":"contact","description":"Customer support form with name, email, and message fields. Simple and effective for general support inquiries.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290595/w0z3gqaep69jncp8xy2fej1qw42r/contact-support-desktop.png","mobile":"https://cdn.ing/assets/i/r/290596/uvxgo9tc6k93kn50lk2em6clzq6j/contact-support-mobile.png"},"componentPath":"blocks/contact/contact-support.tsx","code":"\"use client\";\n\nimport { ContactSupport } from \"@opensite/ui/blocks/contact/contact-support\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"account_id\",\n    type: \"text\",\n    label: \"Account ID or Username\",\n    placeholder: \"Your account identifier\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"issue_type\",\n    type: \"select\",\n    label: \"Issue Type\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"technical\", label: \"Technical Issue\" },\n      { value: \"billing\", label: \"Billing Question\" },\n      { value: \"account\", label: \"Account Access\" },\n      { value: \"feature\", label: \"Feature Request\" },\n      { value: \"bug\", label: \"Report a Bug\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"priority\",\n    type: \"select\",\n    label: \"Priority Level\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"low\", label: \"Low - General question\" },\n      { value: \"medium\", label: \"Medium - Issue affecting work\" },\n      { value: \"high\", label: \"High - Critical issue\" },\n      { value: \"urgent\", label: \"Urgent - Service down\" },\n    ],\n  },\n  {\n    name: \"subject\",\n    type: \"text\",\n    label: \"Subject\",\n    placeholder: \"Brief description of your issue\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe your issue\",\n    placeholder: \"Please provide as much detail as possible including steps to reproduce the issue, error messages, and what you expected to happen...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n  {\n    name: \"attachments\",\n    type: \"file\",\n    label: \"Attachments (Optional)\",\n    placeholder: \"Upload screenshots, logs, or other helpful files...\",\n    required: false,\n    accept: \"image/*,.pdf,.txt,.log\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactSupport\n      heading=\"We're Here to Help\"\n      description=\"Having trouble? Our support team is standing by to assist you. Describe your issue below and we'll get back to you as soon as possible.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your support ticket has been created! You'll receive a confirmation email with your ticket number. We typically respond within 2-4 hours during business hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Support Ticket\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","support","help","form","customer-service"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a customer support ticket use case — full name, email, account ID/username (optional), issue type select, priority level select, subject, detailed description textarea, and optional screenshot file upload — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-help-center","name":"Help Center Contact Cards","title":"Help Center Contact Cards","category":"Contact","categorySlug":"contact","description":"A split layout with support copy on the left and a stacked set of contact action cards on the right. Ideal for help centers, service hubs, or onboarding touchpoints that need multiple contact paths.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290834/b580zf517cjkkdzbtvuwkra2ygel/cleanshot-2026-02-25-at-04-40-23.png","mobile":"https://cdn.ing/assets/i/r/290835/bs6wlzfzeqy2le0bludrob6831xv/cleanshot-2026-02-25-at-04-40-42.png"},"componentPath":"blocks/contact/contact-help-center.tsx","code":"\"use client\";\n\nimport { ContactHelpCenter } from \"@opensite/ui/blocks/contact/contact-help-center\";\n\nexport default function Demo() {\n  return (\n    <ContactHelpCenter\n      heading=\"How Can We Help?\"\n      description=\"Can't find the answer you're looking for? Our support team is here to help.\"\n      background=\"gradient\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={0.15}\n      cardTitle=\"Quick Actions\"\n      contactItems={[\n        {\n          icon: \"lucide/book-open\",\n          title: \"Documentation\",\n          subtitle: \"Browse our comprehensive guides and tutorials.\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/youtube\",\n          title: \"Video Tutorials\",\n          subtitle: \"Watch step-by-step video walkthroughs.\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/message-circle\",\n          title: \"Community Forum\",\n          subtitle: \"Connect with other users and share tips.\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/zap\",\n          title: \"Status Page\",\n          subtitle: \"Check system status and uptime.\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/headphones\",\n          title: \"Live Chat\",\n          subtitle: \"Available Mon-Fri, 9am-6pm EST\",\n          href: \"#\",\n        },\n        {\n          icon: \"lucide/phone\",\n          title: \"Phone Support\",\n          subtitle: \"+1 (555) 123-4567\",\n          href: \"tel:+15551234567\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label above the heading","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Heading text for the left column","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text for the left column","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"Title for the contact card list Background style variant for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing/margin variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"cardTitle":{"type":"object","description":"Additional CSS classes for the heading","typeLabel":"React.ReactNode","required":false},"contactItems":{"type":"array","description":"Contact items to display","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Card title","required":true},"subtitle":{"type":"string","description":"Supporting description text","required":false},"icon":{"type":"string","description":"","required":true},"href":{"type":"string","description":"Optional link destination","required":false}},"typeLabel":"ContactHelpCenterItem"},"typeLabel":"ContactHelpCenterItem[]","required":false},"contactItemsSlot":{"type":"object","description":"Custom slot for rendering contact items (overrides contactItems array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"leftColumnClassName":{"type":"string","description":"Additional CSS classes for the left column","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow text","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardPanelClassName":{"type":"string","description":"Additional CSS classes for the card panel","required":false},"cardTitleClassName":{"type":"string","description":"Additional CSS classes for the card title","required":false},"contactItemsClassName":{"type":"string","description":"Additional CSS classes for the contact items container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","help","support","cards","split","service-center","cta","links","support-hub"],"performance":{},"importantUsageNotes":"This is a contact block that doesn't have a form element, only use this to render contact information. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data, if the brand/location hasn't supplied the contact data points, don't generate/guess, just skip over that data point(s) and only use ones stored in the system."},{"id":"contact-tenant","name":"Contact Tenant Application","title":"Contact Tenant Application","category":"Contact","categorySlug":"contact","description":"Tenant application form with rental history, employment, and references. Comprehensive form for property management.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290829/6qmttkpm9qor6ouqjvk032q5r1rh/cleanshot-2026-02-25-at-02-38-23.png","mobile":"https://cdn.ing/assets/i/r/290828/505o0grjqmw2ek2gz7z1829pb7w9/cleanshot-2026-02-25-at-02-38-33.png"},"componentPath":"blocks/contact/contact-tenant.tsx","code":"\"use client\";\n\nimport { ContactTenant } from \"@opensite/ui/blocks/contact/contact-tenant\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"unit_number\",\n    type: \"text\",\n    label: \"Unit Number (If Current Tenant)\",\n    placeholder: \"e.g., Apt 204\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"request_type\",\n    type: \"radio\",\n    label: \"Request Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"maintenance\",\n        label: \"Maintenance Request\",\n        description: \"Report an issue that needs repair or service.\",\n      },\n      {\n        value: \"lease\",\n        label: \"Lease Inquiry\",\n        description: \"Questions about your lease or rental agreement.\",\n      },\n      {\n        value: \"payment\",\n        label: \"Payment Issue\",\n        description: \"Billing or payment related questions.\",\n      },\n      {\n        value: \"noise\",\n        label: \"Noise Complaint\",\n        description: \"Report a noise disturbance.\",\n      },\n      {\n        value: \"access\",\n        label: \"Access Request\",\n        description: \"Request for property access or keys.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"General inquiry or other concern.\",\n      },\n    ],\n  },\n  {\n    name: \"urgency\",\n    type: \"select\",\n    label: \"Urgency Level\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"emergency\", label: \"Emergency - Immediate attention needed\" },\n      { value: \"urgent\", label: \"Urgent - Within 24 hours\" },\n      { value: \"normal\", label: \"Normal - Within 3-5 business days\" },\n      { value: \"low\", label: \"Low Priority - When convenient\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe your request or concern\",\n    placeholder:\n      \"Please provide detailed information about your request, including location if applicable, what happened, and when...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"photos\",\n    type: \"file\",\n    label: \"Upload Photos (Optional)\",\n    placeholder: \"Upload photos if they help illustrate the issue...\",\n    required: false,\n    accept: \"image/*\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"preferred_contact_time\",\n    type: \"select\",\n    label: \"Best Time to Contact You\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      { value: \"morning\", label: \"Morning (8am - 12pm)\" },\n      { value: \"afternoon\", label: \"Afternoon (12pm - 5pm)\" },\n      { value: \"evening\", label: \"Evening (5pm - 8pm)\" },\n      { value: \"anytime\", label: \"Anytime\" },\n    ],\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactTenant\n      heading=\"Tenant Services\"\n      description=\"We're here to make your living experience as comfortable as possible. Submit your request below and our property management team will respond promptly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Your request has been received! Our property management team will review it and contact you shortly. Emergency requests are prioritized and handled immediately.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Request\",\n          },\n        },\n      }}\n      background=\"gray\"\n      pattern=\"architect\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","tenant","application","form","rental","property"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a tenant/property management inquiry use case — first/last name, email, phone, unit number (optional), request type radio (maintenance/lease/payment/noise/access/other), urgency, and description — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-vendor","name":"Contact Vendor Application","title":"Contact Vendor Application","category":"Contact","categorySlug":"contact","description":"Vendor application form with business information, products/services, and certification details. Perfect for marketplace platforms.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290467/xf02j5wf2h3veskdmo64tja6zzje/cleanshot-2026-02-19-at-06-13-19-2x.png","mobile":"https://cdn.ing/assets/i/r/290466/4mrv0wfwc6e6cutz6zbgeae35ixp/cleanshot-2026-02-19-at-06-14-16-2x.png"},"componentPath":"blocks/contact/contact-vendor.tsx","code":"\"use client\";\n\nimport { ContactVendor } from \"@opensite/ui/blocks/contact/contact-vendor\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"company_name\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"contact_name\",\n    type: \"text\",\n    label: \"Contact Person\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"title\",\n    type: \"text\",\n    label: \"Job Title\",\n    placeholder: \"Your title\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Business Email\",\n    placeholder: \"contact@company.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company_website\",\n    type: \"url\",\n    label: \"Company Website\",\n    placeholder: \"https://yourcompany.com\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"vendor_category\",\n    type: \"checkbox-group\",\n    label: \"Product/Service Categories\",\n    placeholder: \"Select all that apply\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"materials\",\n        label: \"Raw Materials\",\n        description: \"Supply of raw materials and components.\",\n      },\n      {\n        value: \"manufacturing\",\n        label: \"Manufacturing\",\n        description: \"Contract manufacturing services.\",\n      },\n      {\n        value: \"logistics\",\n        label: \"Logistics & Shipping\",\n        description: \"Transportation and delivery services.\",\n      },\n      {\n        value: \"technology\",\n        label: \"Technology Services\",\n        description: \"IT, software, and technical solutions.\",\n      },\n      {\n        value: \"marketing\",\n        label: \"Marketing Services\",\n        description: \"Advertising, design, and promotional services.\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Business consulting and advisory services.\",\n      },\n      {\n        value: \"facilities\",\n        label: \"Facilities & Maintenance\",\n        description: \"Building maintenance and facility services.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"Other products or services.\",\n      },\n    ],\n  },\n  {\n    name: \"partnership_type\",\n    type: \"radio\",\n    label: \"Type of Partnership\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"new\",\n        label: \"New Vendor\",\n        description: \"First time working with us.\",\n      },\n      {\n        value: \"existing\",\n        label: \"Existing Vendor\",\n        description: \"Already in our vendor network.\",\n      },\n      {\n        value: \"renewal\",\n        label: \"Contract Renewal\",\n        description: \"Renew existing contract.\",\n      },\n    ],\n  },\n  {\n    name: \"annual_capacity\",\n    type: \"select\",\n    label: \"Annual Business Capacity\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"under50k\", label: \"Under $50,000\" },\n      { value: \"50k-250k\", label: \"$50,000 - $250,000\" },\n      { value: \"250k-1m\", label: \"$250,000 - $1M\" },\n      { value: \"1m-5m\", label: \"$1M - $5M\" },\n      { value: \"over5m\", label: \"Over $5M\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your company and offerings\",\n    placeholder:\n      \"Describe your products/services, experience, key differentiators, and why you'd like to work with us...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"certifications\",\n    type: \"textarea\",\n    label: \"Certifications and Compliance\",\n    placeholder:\n      \"List any relevant certifications (ISO, minority-owned, women-owned, veteran-owned, etc.)\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n  {\n    name: \"company_docs\",\n    type: \"file\",\n    label: \"Upload Company Documents\",\n    placeholder: \"Upload company profile, certifications, insurance, etc...\",\n    required: false,\n    accept: \".pdf,.doc,.docx\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactVendor\n      heading=\"Become a Vendor Partner\"\n      description=\"We're always looking for reliable vendors to join our supply chain. Tell us about your company and how we can work together to create mutual success.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your interest in becoming a vendor partner! Our procurement team will review your application and reach out within 5-7 business days to discuss next steps.\",\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","vendor","application","form","supplier","marketplace"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is actively seeking vendors or suppliers — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a vendor application use case — company name, contact person, job title, business email, phone, company website, product/service categories checkbox-group, partnership type radio, annual capacity select, and description/certifications textareas — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-volunteer","name":"Contact Volunteer","title":"Contact Volunteer","category":"Contact","categorySlug":"contact","description":"Volunteer registration form with availability, skills, and interests. Ideal for non-profits and community organizations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290831/99pnmteeidpqgf04muqgivygnnbs/cleanshot-2026-02-25-at-02-43-42.png","mobile":"https://cdn.ing/assets/i/r/290830/ah7l0m5hsv2ohoyhtfzj8kly55wh/cleanshot-2026-02-25-at-02-43-52.png"},"componentPath":"blocks/contact/contact-volunteer.tsx","code":"\"use client\";\n\nimport { ContactVolunteer } from \"@opensite/ui/blocks/contact/contact-volunteer\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"age_range\",\n    type: \"select\",\n    label: \"Age Range\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"under18\", label: \"Under 18\" },\n      { value: \"18-24\", label: \"18-24\" },\n      { value: \"25-34\", label: \"25-34\" },\n      { value: \"35-44\", label: \"35-44\" },\n      { value: \"45-54\", label: \"45-54\" },\n      { value: \"55-64\", label: \"55-64\" },\n      { value: \"65plus\", label: \"65+\" },\n    ],\n  },\n  {\n    name: \"availability\",\n    type: \"select\",\n    label: \"General Availability\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"weekdays\", label: \"Weekdays\" },\n      { value: \"weekends\", label: \"Weekends\" },\n      { value: \"both\", label: \"Both weekdays and weekends\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  {\n    name: \"interest_areas\",\n    type: \"checkbox-group\",\n    label: \"Areas of Interest\",\n    placeholder: \"Select all that apply\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"events\",\n        label: \"Event Support\",\n        description: \"Help organize and run community events.\",\n      },\n      {\n        value: \"fundraising\",\n        label: \"Fundraising\",\n        description: \"Assist with fundraising campaigns and activities.\",\n      },\n      {\n        value: \"mentoring\",\n        label: \"Mentoring\",\n        description: \"Mentor youth or adults in the community.\",\n      },\n      {\n        value: \"admin\",\n        label: \"Administrative\",\n        description: \"Office support, data entry, and coordination.\",\n      },\n      {\n        value: \"outreach\",\n        label: \"Community Outreach\",\n        description: \"Engage with community members and spread awareness.\",\n      },\n      {\n        value: \"education\",\n        label: \"Education & Tutoring\",\n        description: \"Teach classes or provide tutoring services.\",\n      },\n      {\n        value: \"construction\",\n        label: \"Construction & Maintenance\",\n        description: \"Help with building projects and property maintenance.\",\n      },\n      {\n        value: \"creative\",\n        label: \"Creative Services\",\n        description: \"Graphic design, photography, video, or writing.\",\n      },\n    ],\n  },\n  {\n    name: \"commitment\",\n    type: \"radio\",\n    label: \"Time Commitment\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"one-time\",\n        label: \"One-Time Event\",\n        description: \"Single event or project.\",\n      },\n      {\n        value: \"occasional\",\n        label: \"Occasional\",\n        description: \"A few times per month.\",\n      },\n      {\n        value: \"regular\",\n        label: \"Regular\",\n        description: \"Weekly or bi-weekly commitment.\",\n      },\n      {\n        value: \"ongoing\",\n        label: \"Ongoing\",\n        description: \"Long-term commitment (6+ months).\",\n      },\n    ],\n  },\n  {\n    name: \"skills\",\n    type: \"textarea\",\n    label: \"Relevant Skills and Experience\",\n    placeholder:\n      \"Tell us about skills, experience, or qualifications that would help you as a volunteer...\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Why do you want to volunteer with us?\",\n    placeholder:\n      \"Share what motivates you and what you hope to gain from volunteering...\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n  {\n    name: \"background_check\",\n    type: \"checkbox\",\n    label: \"I consent to a background check if required for my volunteer role\",\n    required: false,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactVolunteer\n      heading=\"Join Our Volunteer Team\"\n      description=\"Make a difference in your community! Whether you have a few hours to spare or want to make a long-term commitment, we have opportunities that match your skills and interests.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your interest in volunteering! We'll review your application and reach out within a week to discuss available opportunities and next steps.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Volunteer Application\",\n          },\n        },\n      }}\n      pattern=\"dotPattern2\"\n      patternOpacity={1}\n      background=\"secondary\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","volunteer","registration","form","non-profit","community"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a volunteer sign-up use case — first/last name, email, phone, age range select, general availability select, areas of interest checkbox-group, skills/experience, and motivation textarea — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-warranty","name":"Contact Warranty Claim","title":"Contact Warranty Claim","category":"Contact","categorySlug":"contact","description":"Warranty claim form with product information, purchase details, and issue description. Essential for product support teams.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290597/gtxtxytai44nnacz35n0efr1v9a3/contact-warranty-desktop.png","mobile":"https://cdn.ing/assets/i/r/290598/qh1v295r6rac1wr9gvlh0yo4muz2/contact-warranty-mobile.png"},"componentPath":"blocks/contact/contact-warranty.tsx","code":"\"use client\";\n\nimport { ContactWarranty } from \"@opensite/ui/blocks/contact/contact-warranty\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"order_number\",\n    type: \"text\",\n    label: \"Order Number\",\n    placeholder: \"e.g., ORD-123456\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"purchase_date\",\n    type: \"date-picker\",\n    label: \"Purchase Date\",\n    placeholder: \"Select date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"product_name\",\n    type: \"text\",\n    label: \"Product Name\",\n    placeholder: \"Name or model of the product\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"serial_number\",\n    type: \"text\",\n    label: \"Serial Number (if applicable)\",\n    placeholder: \"Product serial number\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"claim_type\",\n    type: \"radio\",\n    label: \"Type of Claim\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"defect\",\n        label: \"Manufacturing Defect\",\n        description: \"Product has a manufacturing defect.\",\n      },\n      {\n        value: \"malfunction\",\n        label: \"Product Malfunction\",\n        description: \"Product stopped working or not working properly.\",\n      },\n      {\n        value: \"damage\",\n        label: \"Damage in Transit\",\n        description: \"Product arrived damaged.\",\n      },\n      {\n        value: \"missing\",\n        label: \"Missing Parts\",\n        description: \"Product is missing components or parts.\",\n      },\n    ],\n  },\n  {\n    name: \"issue_description\",\n    type: \"textarea\",\n    label: \"Describe the Issue\",\n    placeholder: \"Please provide detailed information about the problem, including when it started, what you've tried, and any error messages...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"preferred_resolution\",\n    type: \"select\",\n    label: \"Preferred Resolution\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      { value: \"repair\", label: \"Repair the product\" },\n      { value: \"replacement\", label: \"Replace with new product\" },\n      { value: \"refund\", label: \"Full refund\" },\n      { value: \"discuss\", label: \"Discuss options with support\" },\n    ],\n  },\n  {\n    name: \"receipt\",\n    type: \"file\",\n    label: \"Upload Proof of Purchase\",\n    placeholder: \"Upload receipt or order confirmation...\",\n    required: true,\n    accept: \"image/*,.pdf\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 1,\n    columnSpan: 12,\n  },\n  {\n    name: \"photos\",\n    type: \"file\",\n    label: \"Upload Photos of the Issue\",\n    placeholder: \"Upload photos showing the defect or damage...\",\n    required: true,\n    accept: \"image/*\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"additional_notes\",\n    type: \"textarea\",\n    label: \"Additional Notes (Optional)\",\n    placeholder: \"Any other information that might be helpful...\",\n    required: false,\n    rows: 3,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactWarranty\n      heading=\"Warranty Claim\"\n      description=\"We stand behind the quality of our products. If you're experiencing an issue covered under warranty, submit your claim below and our support team will process it promptly.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your warranty claim has been submitted successfully! You'll receive a confirmation email with your claim number. Our team will review your claim and respond within 2-3 business days.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Warranty Claim\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","warranty","claim","form","support","product"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a warranty claim use case — first/last name, email, phone, order number, purchase date picker, product name, serial number (optional), claim type radio (defect/malfunction/damage), issue description, and optional photo upload — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."},{"id":"contact-wedding","name":"Contact Wedding Inquiry","title":"Contact Wedding Inquiry","category":"Contact","categorySlug":"contact","description":"Wedding planning inquiry form with event details, guest count, and service preferences. Perfect for wedding venues and planners.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290599/37bhkxb9lsf21slo5mhusk55os6l/contact-wedding-desktop.png","mobile":"https://cdn.ing/assets/i/r/290600/od7z7zeuou40sfg9jpc8h4of2q6j/contact-wedding-mobile.png"},"componentPath":"blocks/contact/contact-wedding.tsx","code":"\"use client\";\n\nimport { ContactWedding } from \"@opensite/ui/blocks/contact/contact-wedding\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"partner1_name\",\n    type: \"text\",\n    label: \"Partner 1 Name\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"partner2_name\",\n    type: \"text\",\n    label: \"Partner 2 Name\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"wedding_date\",\n    type: \"date-picker\",\n    label: \"Wedding Date\",\n    placeholder: \"Select your wedding date\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"venue\",\n    type: \"text\",\n    label: \"Venue Name (if known)\",\n    placeholder: \"Wedding venue\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"location\",\n    type: \"text\",\n    label: \"Wedding Location\",\n    placeholder: \"City, State\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"guest_count\",\n    type: \"select\",\n    label: \"Expected Guest Count\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"under50\", label: \"Under 50 guests\" },\n      { value: \"50-100\", label: \"50-100 guests\" },\n      { value: \"100-150\", label: \"100-150 guests\" },\n      { value: \"150-200\", label: \"150-200 guests\" },\n      { value: \"200-300\", label: \"200-300 guests\" },\n      { value: \"over300\", label: \"Over 300 guests\" },\n    ],\n  },\n  {\n    name: \"budget_range\",\n    type: \"select\",\n    label: \"Estimated Budget Range\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"under25k\", label: \"Under $25,000\" },\n      { value: \"25k-50k\", label: \"$25,000 - $50,000\" },\n      { value: \"50k-75k\", label: \"$50,000 - $75,000\" },\n      { value: \"75k-100k\", label: \"$75,000 - $100,000\" },\n      { value: \"over100k\", label: \"Over $100,000\" },\n      { value: \"flexible\", label: \"Flexible/To be discussed\" },\n    ],\n  },\n  {\n    name: \"services_needed\",\n    type: \"checkbox-group\",\n    label: \"Services You're Interested In\",\n    placeholder: \"Select all that apply\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"planning\",\n        label: \"Full Planning\",\n        description: \"Complete wedding planning from start to finish.\",\n      },\n      {\n        value: \"partial\",\n        label: \"Partial Planning\",\n        description: \"Help with specific aspects of planning.\",\n      },\n      {\n        value: \"coordination\",\n        label: \"Day-of Coordination\",\n        description: \"Coordination on the wedding day only.\",\n      },\n      {\n        value: \"venue\",\n        label: \"Venue Selection\",\n        description: \"Help finding and securing the perfect venue.\",\n      },\n      {\n        value: \"catering\",\n        label: \"Catering Services\",\n        description: \"Food and beverage for your reception.\",\n      },\n      {\n        value: \"photography\",\n        label: \"Photography\",\n        description: \"Professional wedding photography.\",\n      },\n      {\n        value: \"videography\",\n        label: \"Videography\",\n        description: \"Wedding video and cinematography.\",\n      },\n      {\n        value: \"florals\",\n        label: \"Floral Design\",\n        description: \"Bouquets, centerpieces, and decor.\",\n      },\n      {\n        value: \"music\",\n        label: \"Music & Entertainment\",\n        description: \"DJ, band, or live entertainment.\",\n      },\n      {\n        value: \"decor\",\n        label: \"Decor & Styling\",\n        description: \"Event design and decoration.\",\n      },\n    ],\n  },\n  {\n    name: \"wedding_style\",\n    type: \"select\",\n    label: \"Wedding Style/Theme\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      { value: \"classic\", label: \"Classic & Elegant\" },\n      { value: \"romantic\", label: \"Romantic\" },\n      { value: \"rustic\", label: \"Rustic & Country\" },\n      { value: \"modern\", label: \"Modern & Contemporary\" },\n      { value: \"bohemian\", label: \"Bohemian\" },\n      { value: \"beachside\", label: \"Beachside\" },\n      { value: \"vintage\", label: \"Vintage\" },\n      { value: \"glamorous\", label: \"Glamorous\" },\n      { value: \"other\", label: \"Other/Still deciding\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Tell us about your vision\",\n    placeholder: \"Share your wedding vision, any special requests, must-haves, or questions you'd like us to address...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n  {\n    name: \"inspiration_images\",\n    type: \"file\",\n    label: \"Upload Inspiration Photos (Optional)\",\n    placeholder: \"Share photos that inspire your vision...\",\n    required: false,\n    accept: \"image/*\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 10,\n    multiple: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"how_did_you_hear\",\n    type: \"select\",\n    label: \"How did you hear about us?\",\n    required: false,\n    columnSpan: 12,\n    options: [\n      { value: \"google\", label: \"Google Search\" },\n      { value: \"instagram\", label: \"Instagram\" },\n      { value: \"facebook\", label: \"Facebook\" },\n      { value: \"pinterest\", label: \"Pinterest\" },\n      { value: \"wedding_website\", label: \"Wedding planning website\" },\n      { value: \"referral\", label: \"Referral from friend/family\" },\n      { value: \"venue\", label: \"Referred by venue\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactWedding\n      heading=\"Let's Plan Your Perfect Day\"\n      description=\"Congratulations on your engagement! We're honored that you're considering us for your special day. Tell us about your vision and we'll create a custom proposal tailored to your dream wedding.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for reaching out! We're excited to learn about your wedding plans. We'll review your inquiry and get back to you within 24-48 hours to schedule a consultation.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Wedding Inquiry\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","wedding","inquiry","form","event","planning"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is specifically for a wedding vendor, planner, or wedding-related service — this is a highly contextual block. Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a wedding inquiry use case — partner 1 name, partner 2 name, email, phone, wedding date picker, venue name (optional), wedding location, expected guest count select, and estimated budget range select — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:12:12.998Z"}