bhl-forms 0.7.2 → 0.7.4

package/dist/forms/testRedirects.es.js

@@ -10,32 +10,64 @@ const radio = (updates) => {
   if (updates.name && !updates.id) {
     updates.id = updates.name;
   }
-  return merge({
-    $formkit: 'radio',
-    validation: 'required',
-    validationMessages: {
-      required: 'Field is required'
+  return merge(
+    {
+      $formkit: "radio",
+      validation: "required",
+      validationMessages: {
+        required: "Field is required",
+      },
+      optionsClass: "t-pt-3 t-pl-1",
+      legendClass: "required",
     },
-    optionsClass: 't-pt-3 t-pl-1',
-    legendClass: 'required'
-  }, updates)
+    updates
+  )
 };
 
 const col2Radio = (updates) => {
-  updates.legendClass = 'required';
-  updates.fieldsetClass = '$reset';
-  updates.optionsClass = 't-pl-2 t-pt-3 t-grid t-grid-cols-1 md:t-grid-cols-2';
-  updates.innerClass = 't-items-start';
-  updates.wrapperClass = '$reset t-flex t-cursor-pointer t-mb-3';
+  updates.legendClass = "required";
+  updates.fieldsetClass = "$reset";
+  updates.optionsClass = "t-pl-2 t-pt-3 t-grid t-grid-cols-1 md:t-grid-cols-2";
+  updates.innerClass = "t-items-start";
+  updates.wrapperClass = "$reset t-flex t-cursor-pointer t-mb-3";
+  return radio(updates)
+};
+
+const col2RadioCenter = (updates) => {
+  updates.legendClass = "required t-w-[100%] t-text-center";
+  if (typeof updates.fieldsetClass === "undefined") {
+    updates.fieldsetClass = "$reset t-flex t-justify-center";
+  }
+  updates.optionsClass = "t-pl-4 t-pt-3 t-grid t-grid-cols-1 md:t-grid-cols-2";
+  updates.innerClass = "t-items-start";
+  updates.wrapperClass = "$reset t-flex t-cursor-pointer t-mb-3";
+  updates.optionClass = "t-pl-4 md:t-pl-8 md:t-min-w-[200px]";
+  updates.messagesClass = "t-flex t-justify-center";
+  updates.helpClass = "t-mt-0 t-mb-4 !t-text-sm t-text-center";
   return radio(updates)
 };
 
 const sbs2ItemRadio = (updates) => {
-  updates.legendClass = 'legend-left t-pb-1 required';
-  updates.fieldsetClass = '$reset side-by-side t-items-center';
-  updates.optionsClass = 't-mt-1 t-grid t-grid-cols-1 md:t-grid-cols-2-125 t-items-center';
-  updates.innerClass = 't-flex t-items-center';
-  updates.optionClass = 't-pr-1';
+  updates.legendClass = "legend-left t-pb-1 required";
+  updates.fieldsetClass = "$reset side-by-side t-items-center";
+  updates.optionsClass = "t-mt-1 t-grid t-grid-cols-1 md:t-grid-cols-2-125 t-items-center";
+  updates.innerClass = "t-flex t-items-center";
+  updates.optionClass = "t-pr-1";
+  return radio(updates)
+};
+
+const verticalButtonRadio = (updates) => {
+  updates.legendClass = "legend-left";
+  updates.fieldsetClass = "$reset t-flex t-justify-center t-flex-col-reverse t-items-center";
+  if (typeof updates.optionsClass === "undefined") {
+    updates.optionsClass = "t-flex t-flex-col sm:t-flex-row t-justify-center t-my-3";
+  }
+  updates.optionClass = "radiobtn t-my-2 sm:t-my-0 t-mx-2 md:t-mx-5";
+  updates.wrapperClass = "$reset formkit-wrapper t-mb-0 t-flex t-items-center t-h-[100%]";
+  updates.labelClass = "t-font-semibold t-text-[#1e448f] t-w-[100%]";
+  updates.decoratorIcon = false;
+  updates.messagesClass = "t-flex t-justify-center";
+  updates.helpClass = "t-mt-2.5 !t-text-sm t-text-center";
   return radio(updates)
 };
 
@@ -43,23 +75,35 @@ const select = (updates) => {
   if (updates.name && !updates.id) {
     updates.id = updates.name;
   }
-  return merge({
-    $formkit: 'select',
-    placeholder: "Please Select",
-    validation: 'required',
-    validationMessages: {
-      required: 'Field is required'
+  return merge(
+    {
+      $formkit: "select",
+      placeholder: "Please Select",
+      validation: "required",
+      validationMessages: {
+        required: "Field is required",
+      },
+      inputClass: "t-bg-white",
+      labelClass: "required",
     },
-    inputClass: 't-bg-white',
-    labelClass: 'required'
-  }, updates)
+    updates
+  )
 };
 
 const sbsSelect = (updates) => {
-  updates.labelClass = 'required';
-  updates.wrapperClass = 'side-by-side t-items-center';
-  updates.innerClass = 'select-height-content';
-  updates.helpClass = 't-mt-2.5 md:t-text-right md:t-mt-[-5px]';
+  updates.labelClass = "required";
+  updates.wrapperClass = "side-by-side t-items-center";
+  updates.innerClass = "select-height-content";
+  updates.helpClass = "t-mt-2.5 md:t-text-right md:t-mt-[-5px]";
+  return select(updates)
+};
+
+const verticalSelect = (updates) => {
+  updates.labelClass = "required";
+  updates.wrapperClass = "t-flex t-justify-center";
+  updates.messagesClass = "t-flex t-justify-center";
+  updates.inputClass = "t-min-w-[150px] t-bg-white";
+  updates.helpClass = "t-mt-2.5 t-text-center";
   return select(updates)
 };
 
@@ -67,221 +111,290 @@ const text = (updates) => {
   if (updates.name && !updates.id) {
     updates.id = updates.name;
   }
-  return merge({
-    $formkit: 'text',
-    validation: 'required',
-    validationMessages: {
-      required: 'Field is required'
+  return merge(
+    {
+      $formkit: "text",
+      validation: "required",
+      validationMessages: {
+        required: "Field is required",
+      },
+      labelClass: "required",
     },
-    labelClass: 'required'
-  }, updates)
+    updates
+  )
 };
 
 const sbsText = (updates) => {
-  updates.wrapperClass = 'side-by-side t-items-center';
+  updates.wrapperClass = "side-by-side t-items-center";
   return text(updates)
 };
 
 const verticalText = (updates) => {
-  updates.wrapperClass = 't-flex t-justify-center';
-  updates.messagesClass = 't-flex t-justify-center';
-  updates.inputClass = 't-text-center';
-  updates.helpClass = 't-mt-2.5 !t-text-sm t-text-center';
+  updates.wrapperClass = "t-flex t-justify-center";
+  updates.messagesClass = "t-flex t-justify-center";
+  updates.inputClass = "t-text-center";
+  updates.helpClass = "t-mt-2.5 !t-text-sm t-text-center";
   return text(updates)
 };
 
-
 const zipcode = (scope, vertical, updates = {}) => {
   const func = vertical ? verticalText : sbsText;
-  const label = vertical ? (updates.label) : 'Zip Code:';
-  const help = vertical ? (updates.help ?? "We try to match you with local help") : null;  
+  const label = vertical ? updates.label : "Zip Code:";
+  const help = vertical ? updates.help ?? "We try to match you with local help" : null;
   return func({
     label,
     help,
-    placeholder: '#####',
-    name: scope ? scope + ':' + 'Zip' : 'Zip',
+    placeholder: "#####",
+    name: scope ? scope + ":" + "Zip" : "Zip",
     maxlength: 5,
     inputmode: "numeric",
-    autocomplete: 'postal-code',
-    validation: 'required|matches:/^[0-9]{5}$/',
+    autocomplete: "postal-code",
+    validation: "required|matches:/^[0-9]{5}$/",
     validationMessages: {
-      required: 'Zip Code is required',
-      matches: 'Invalid Zip Code'
+      required: "Zip Code is required",
+      matches: "Invalid Zip Code",
     },
-    ...updates
+    ...updates,
   })
 };
 
-const civilDefense = (updates) => sbs2ItemRadio(merge({
-  name: 'Civil_Defense',
-  id: 'Civil_Defense',
-  if: '$get(Type_Of_Legal_Problem).value == "Civil Lawsuit"',
-  label: 'Do You Need Representation to File a Lawsuit or Defend One?',
-  options: {
-    Yes: 'Defend a Lawsuit',
-    No: 'File a Lawsuit'
-  }
-}, updates));
-
-const civilLawsuitTOLPDisplay = (updates) => col2Radio(merge({
-  name: 'Type_Of_Legal_Problem_Display',
-  if: '$get(Type_Of_Legal_Problem).value == "Civil Lawsuit" && $get(Civil_Defense).value == "No"',
-  label: 'Select The Type of Lawsuit You Would Like to File:',
-  options: [
-    'Automobile Accident',
-    'Contract Disputes',
-    'Defamation and Slander',
-    'Dog Bite',
-    'Employment and Workplace',
-    'Fraud',
-    'Medical Malpractice',
-    'Personal Injury',
-    'Property Damage',
-    'Small Claims',
-    'Real Estate',
-    'Not Sure or Other'
-  ]
-}, updates));
-
-const employmentAndWorkplaceTOLPDisplay = (updates) => col2Radio(merge({
-  name: 'Type_Of_Legal_Problem_Display',
-  if: '$get(Type_Of_Legal_Problem).value == "Employment and Workplace"',
-  label: 'Select The Workplace Issue:',
-  options: [
-    'Workplace Harassment',
-    'Workplace Discrimination',
-    'Wrongful Termination',
-    'Payment Disputes',
-    'Workers Compensation',
-    'Personal Injury',
-    'Unemployment',
-    'Other Workplace Issues'
-  ]
-}, updates));
+const civilDefense = (scope, vertical, updates = {}) => {
+  const func = vertical ? verticalButtonRadio : sbs2ItemRadio;
+  const label = vertical ? updates.label : "Do You Need Representation to File a Lawsuit or Defend One?";
+  const _if = vertical ? updates.if : '$get(Type_Of_Legal_Problem).value == "Civil Lawsuit"';
+  return func(
+    merge(
+      {
+        label,
+        if: _if,
+        name: scope ? scope + ":" + "Civil_Defense" : "Civil_Defense",
+        options: ["Defend a Lawsuit", "File a Lawsuit"],
+      },
+      updates
+    )
+  )
+};
 
+const civilLawsuitTOLPDisplay = (scope, vertical, updates = {}) => {
+  const func = vertical ? col2RadioCenter : col2Radio;
+  const label = vertical ? updates.label : "Select The Type of Lawsuit You Would Like to File:";
+  const _if = vertical
+    ? null
+    : '$get(Type_Of_Legal_Problem).value == "Civil Lawsuit" && $get(Civil_Defense).value == "File a Lawsuit"';
+  return func(
+    merge(
+      {
+        label,
+        if: _if,
+        name: scope ? scope + ":" + "Type_Of_Legal_Problem_Display" : "Type_Of_Legal_Problem_Display",
+        options: [
+          "Automobile Accident",
+          "Contract Disputes",
+          "Defamation and Slander",
+          "Dog Bite",
+          "Employment and Workplace",
+          "Fraud",
+          "Medical Malpractice",
+          "Personal Injury",
+          "Property Damage",
+          "Small Claims",
+          "Real Estate",
+          "Not Sure or Other",
+        ],
+      },
+      updates
+    )
+  )
+};
+
+const employmentAndWorkplaceTOLPDisplay = (scope, vertical, updates = {}) => {
+  const func = vertical ? col2RadioCenter : col2Radio;
+  const label = vertical ? updates.label : "Select The Workplace Issue:";
+  return func(
+    merge(
+      {
+        label,
+        if: '$get(Type_Of_Legal_Problem).value == "Employment and Workplace"',
+        name: scope ? scope + ":" + "Type_Of_Legal_Problem_Display" : "Type_Of_Legal_Problem_Display",
+        options: [
+          "Workplace Harassment",
+          "Workplace Discrimination",
+          "Wrongful Termination",
+          "Payment Disputes",
+          "Workers Compensation",
+          "Personal Injury",
+          "Unemployment",
+          "Other Workplace Issues",
+        ],
+      },
+      updates
+    )
+  )
+};
 
 const TOLPOptions = [
-  'Adoption',
-  'Asbestos and Mesothelioma',
-  'Auto and Car Accidents',
-  'Bankruptcy',
-  'Birth Certificate and Name Change',
-  'Business Lawyers',
-  'Child Custody',
-  'Child Support',
-  'Civil Rights and Discrimination',
-  'Consumer Lawyers',
-  'Copyrights and Trademarks',
-  'Criminal and Felony',
-  'Debt and Collections',
-  'Defend a Lawsuit',
-  'Divorce and Separation',
-  'DUI and DWI',
-  'Elder Law',
-  'Employment and Workplace',
-  'Expungement',
-  'Family Issues',
-  'File a Lawsuit',
-  'Foreclosure',
-  'Guardianship',
-  'Harassment and Discrimination',
-  'Identity Theft',
-  'Immigration and Visas',
-  'Insurance',
-  'Landlord and Tenant',
-  'Lemon Law',
-  'Long Term Disability',
-  'Medical Malpractice',
-  'Non-Workplace Discrimination',
-  'Non-Workplace Harassment',
-  'Patents and Intellectual Property',
-  'Personal Injury',
-  'Power of Attorney',
-  'Probate and Estates',
-  'Product Liability',
-  'Property Damage',
-  'Real Estate',
-  'Sexual Harassment',
-  'Social Security Disability and Insurance',
-  'Tax and IRS',
-  'Traffic and Tickets',
-  'Unemployment',
-  'Victim of a Crime',
-  'Wills and Trusts',
-  'Workers Compensation',
-  'Workplace Discrimination',
-  'Workplace Harassment',
-  'Wrongful Death',
-  'Wrongful Termination',
-  'Not Sure or Other'
+  "Adoption",
+  "Asbestos and Mesothelioma",
+  "Auto and Car Accidents",
+  "Bankruptcy",
+  "Birth Certificate and Name Change",
+  "Business Lawyers",
+  "Child Custody",
+  "Child Support",
+  "Civil Rights and Discrimination",
+  "Consumer Lawyers",
+  "Copyrights and Trademarks",
+  "Criminal and Felony",
+  "Debt and Collections",
+  "Defend a Lawsuit",
+  "Divorce and Separation",
+  "DUI and DWI",
+  "Elder Law",
+  "Employment and Workplace",
+  "Expungement",
+  "Family Issues",
+  "File a Lawsuit",
+  "Foreclosure",
+  "Guardianship",
+  "Harassment and Discrimination",
+  "Identity Theft",
+  "Immigration and Visas",
+  "Insurance",
+  "Landlord and Tenant",
+  "Lemon Law",
+  "Long Term Disability",
+  "Medical Malpractice",
+  "Non-Workplace Discrimination",
+  "Non-Workplace Harassment",
+  "Patents and Intellectual Property",
+  "Personal Injury",
+  "Power of Attorney",
+  "Probate and Estates",
+  "Product Liability",
+  "Property Damage",
+  "Real Estate",
+  "Sexual Harassment",
+  "Social Security Disability and Insurance",
+  "Tax and IRS",
+  "Traffic and Tickets",
+  "Unemployment",
+  "Victim of a Crime",
+  "Wills and Trusts",
+  "Workers Compensation",
+  "Workplace Discrimination",
+  "Workplace Harassment",
+  "Wrongful Death",
+  "Wrongful Termination",
+  "Not Sure or Other",
 ];
 
-const generalTOLP = (updates) => sbsSelect(merge({
-  label: 'Type of Help Needed:',
-  name: 'Type_Of_Legal_Problem',
-  id: 'Type_Of_Legal_Problem',
-  options: TOLPOptions,
-}, updates));
-
-const landlordTenantIssueRadio = () => col2Radio({
-  label: 'What is the Landlord / Tenant Issue?',
-  if: '$get(Type_Of_Legal_Problem).value == "Landlord and Tenant"',
-  id: 'Landlord_Tenant_Issue',
-  name: 'Landlord_Tenant_Issue',
-  options: [
-    "Eviction",
-    "Repairs and Maintenance",
-    "Lease and Rental Agreements",
-    "Discrimination",
-    "Right of Entry and Privacy",
-    "Screening and Applications",
-    "Environmental Hazards",
-    "Other Dispute"
-  ]
-});
+const generalTOLP = (scope, vertical, updates = {}) => {
+  const func = vertical ? verticalSelect : sbsSelect;
+  const label = vertical ? updates.label : "Type of Help Needed:";
+  return func(
+    merge(
+      {
+        label,
+        name: scope ? scope + ":" + "Type_Of_Legal_Problem" : "Type_Of_Legal_Problem",
+        id: scope ? scope + ":" + "Type_Of_Legal_Problem" : "Type_Of_Legal_Problem",
+        options: TOLPOptions,
+      },
+      updates
+    )
+  )
+};
+
+const landlordTenantIssueRadio = (scope, vertical, updates = {}) => {
+  const func = vertical ? col2RadioCenter : col2Radio;
+  const label = vertical ? updates.label : "What is the Landlord / Tenant Issue?";
+  const _if = vertical ? updates.if : '$get(Type_Of_Legal_Problem).value == "Landlord and Tenant"';
+  return func(
+    merge(
+      {
+        label,
+        if: _if,
+        id: scope ? scope + ":" + "Landlord_Tenant_Issue" : "Landlord_Tenant_Issue",
+        name: scope ? scope + ":" + "Landlord_Tenant_Issue" : "Landlord_Tenant_Issue",
+        options: [
+          "Eviction",
+          "Repairs and Maintenance",
+          "Lease and Rental Agreements",
+          "Discrimination",
+          "Right of Entry and Privacy",
+          "Screening and Applications",
+          "Environmental Hazards",
+          "Other Dispute",
+        ],
+      },
+      updates
+    )
+  )
+};
+
+const realEstateTOLPDisplay = (scope, vertical, updates = {}) => {
+  const func = vertical ? col2RadioCenter : col2Radio;
+  const label = vertical ? updates.label : "Select The Real Estate Issue:";
+  const _if = vertical ? updates.if : '$get(Type_Of_Legal_Problem).value == "Real Estate"';
+  return func(
+    merge(
+      {
+        label,
+        if: _if,
+        name: scope ? scope + ":" + "Type_Of_Legal_Problem_Display" : "Type_Of_Legal_Problem_Display",
+        options: [
+          "Contracts and Agreements",
+          "Deeds, Liens, and Titles",
+          "Foreclosure",
+          "Insurance",
+          "Landlord and Tenant",
+          "Loans and Mortgages",
+          "Wills, Trusts, and Estates",
+          "Property Damage",
+          "Not Sure or Other",
+        ],
+      },
+      updates
+    )
+  )
+};
+
+const criminalTOLPDisplay = (scope, vertical, updates = {}) => {
+  const func = vertical ? col2RadioCenter : col2Radio;
+  const label = vertical ? updates.label : "Select The Criminal Issue:";
+  const _if = vertical ? updates.if : '$get(Type_Of_Legal_Problem).value == "Criminal and Felony"';
+  return func(
+    merge(
+      {
+        label,
+        if: _if,
+        name: scope ? scope + ":" + "Type_Of_Legal_Problem_Display" : "Type_Of_Legal_Problem_Display",
+        options: [
+          "Criminal Defense",
+          "Victim of a Crime",
+          "DUI and DWI",
+          "Expungement",
+          "Harassment",
+          "Not Sure or Other",
+        ],
+      },
+      updates
+    )
+  )
+};
+
+const NEXT_ON_ENTER = "$onEnter($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))";
+const NEXT_ON_INPUT = "$onInput($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))";
 
-const realEstateTOLPDisplay = (updates) => col2Radio(merge({
-  name: 'Type_Of_Legal_Problem_Display',
-  if: '$get(Type_Of_Legal_Problem).value == "Real Estate"',
-  label: 'Select The Type of Real Estate Issue:',
-  options: [
-    'Contracts and Agreements',
-    'Deeds, Liens, and Titles',
-    'Foreclosure',
-    'Insurance',
-    'Landlord and Tenant',
-    'Loans and Mortgages',
-    'Wills, Trusts, and Estates',
-    'Property Damage',
-    'Not Sure or Other'
-  ]
-}, updates));
-
-const criminalTOLPDisplay = (updates) => col2Radio(merge({
-  name: 'Type_Of_Legal_Problem_Display',
-  if: '$get(Type_Of_Legal_Problem).value == "Criminal and Felony"',
-  label: 'Which Type of Criminal Issue?',
-  options: [
-    'Criminal Defense',
-    'Victim of a Crime',
-    'DUI and DWI',
-    'Expungement',
-    'Harassment',
-    'Not Sure or Other',
-  ]
-}, updates));
-
-const NEXT_ON_ENTER = '$onEnter($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))';
-const NEXT_ON_INPUT = '$onInput($setNextStep($fireStepEvent($get(form)), $preStepFunc($get(form))))';
-
-const isInput = (n) => { return (n.type !== 'group' && n.type !== 'section' && n.type !== 'form' && n.$formkit !== 'hidden' && !n.children) };
+const isInput = (n) => {
+  return n.type !== "group" && n.type !== "section" && n.type !== "form" && n.$formkit !== "hidden" && !n.children
+};
 
 const findLastInput = (n) => {
   if (isInput(n)) {
     return n
   }
   for (var i = n.children.length - 1; i >= 0; i--) {
-    if (typeof n.children === 'string') {
+    if (typeof n.children === "string") {
       continue
     }
     const child = n.children[i];
@@ -297,12 +410,12 @@ const findLastInput = (n) => {
 };
 
 const stepDefaults = (step, stepKey) => ({
-  $el: 'section',
+  $el: "section",
   if: '$stepEnabled("' + step + '")',
   attrs: {
     hidden: '$activeStep !== "' + step + '"',
-    key: stepKey ? stepKey : step
-  }
+    key: stepKey ? stepKey : step,
+  },
 });
 
 function step(name, inputs, updates = {}) {
@@ -325,27 +438,24 @@ function step(name, inputs, updates = {}) {
     }
   }
 
-  return merge(
-    stepDefaults(name, stepKey),
-    {
-      children: [
-        {
-          $formkit: 'group',
-          id: name,
-          name: name,
-          nextStepMap: nextStepMap,
-          triggerRedirectMap: triggerRedirectMap,
-          autoFocus: autoFocus,
-          children: inputs
-        }
-      ]
-    }
-  )
+  return merge(stepDefaults(name, stepKey), {
+    children: [
+      {
+        $formkit: "group",
+        id: name,
+        name: name,
+        nextStepMap: nextStepMap,
+        triggerRedirectMap: triggerRedirectMap,
+        autoFocus: autoFocus,
+        children: inputs,
+      },
+    ],
+  })
 }
 
 function generalLegalTOLPAndZip(updates = {}) {
   return step(
-    'generalLegalTOLPAndZip',
+    "generalLegalTOLPAndZip",
     [
       generalTOLP(),
       civilDefense(),
@@ -354,7 +464,7 @@ function generalLegalTOLPAndZip(updates = {}) {
       employmentAndWorkplaceTOLPDisplay(),
       landlordTenantIssueRadio(),
       realEstateTOLPDisplay(),
-      zipcode()
+      zipcode(),
     ],
     updates
   )
@@ -362,87 +472,87 @@ function generalLegalTOLPAndZip(updates = {}) {
 
 function formNavigationOnlySubmit(updates = {}) {
   return {
-    $el: 'div',
+    $el: "div",
     attrs: {
-      class: 'step-nav'
+      class: "step-nav",
     },
     children: [
       {
-        $formkit: 'button',
-        name: 'hidden_button',
-        children: 'Hidden',
+        $formkit: "button",
+        name: "hidden_button",
+        children: "Hidden",
         style: {
-          if: '$activeStep === $firstStep()',
-          then: 'visibility: hidden;'
-        }
+          if: "$activeStep === $firstStep()",
+          then: "visibility: hidden;",
+        },
       },
       {
-        $formkit: 'submit',
-        name: 'submit_button',
-        label: updates.submitLabel || 'Chat Now'
-      }
-    ]
+        $formkit: "submit",
+        name: "submit_button",
+        label: updates.submitLabel || "Chat Now",
+      },
+    ],
   }
 }
 
 const formDetails = () => ({
-  $el: 'pre',
+  $el: "pre",
   if: '$urlParam("fdbg", "") == 1',
   children: [
     {
-      $el: 'pre',
-      children: '$stringify( $get(form).value )',
+      $el: "pre",
+      children: "$stringify( $get(form).value )",
       attrs: {
-        class: 't-text-xs',
-        style: 'overflow: scroll'
-      }
+        class: "t-text-xs",
+        style: "overflow: scroll",
+      },
     },
     {
-      $el: 'pre',
-      children: ['activeStep: ', '$activeStep'],
+      $el: "pre",
+      children: ["activeStep: ", "$activeStep"],
       attrs: {
-        class: 't-text-xs',
-        style: 'overflow: scroll'
-      }
+        class: "t-text-xs",
+        style: "overflow: scroll",
+      },
     },
     {
-      $el: 'pre',
-      children: ['stepHistory: ', '$stepHistory'],
+      $el: "pre",
+      children: ["stepHistory: ", "$stepHistory"],
       attrs: {
-        class: 't-text-xs',
-        style: 'overflow: scroll'
-      }
+        class: "t-text-xs",
+        style: "overflow: scroll",
+      },
     },
     {
-      $el: 'pre',
-      children: ['stepQueue: ', '$stepQueue'],
+      $el: "pre",
+      children: ["stepQueue: ", "$stepQueue"],
       attrs: {
-        class: 't-text-xs',
-        style: 'overflow: scroll'
-      }
+        class: "t-text-xs",
+        style: "overflow: scroll",
+      },
     },
     {
-      $el: 'pre',
-      children: ['steps: ', '$stepKeys()'],
+      $el: "pre",
+      children: ["steps: ", "$stepKeys()"],
       attrs: {
-        class: 't-text-xs',
-        style: 'overflow: scroll'
-      }
-    }
-  ]
+        class: "t-text-xs",
+        style: "overflow: scroll",
+      },
+    },
+  ],
 });
 
 const formPropDefaults = {
-  type: 'form',
-  id: 'form',
-  config: { validationVisibility: 'submit' },
+  type: "form",
+  id: "form",
+  config: { validationVisibility: "submit" },
   onSubmit: '$submit($submitUrl, $prepData, $handleRedirect, "text/plain; charset=UTF-8")',
-  plugins: '$plugins',
+  plugins: "$plugins",
   actions: false,
-  anchorElement: 'form-anchor',
+  anchorElement: "form-anchor",
   useLocalStorage: true,
   prepop: {
-    fromURL: true
+    fromURL: true,
   },
   errorCodes: {
     403: { message: "An Error Occurred", abort: false },
@@ -450,7 +560,7 @@ const formPropDefaults = {
     429: "An Error Occurred",
     504: { message: "An Error Occurred", abort: false },
   },
-  formClass: '!t-max-w-[40rem]'
+  formClass: "!t-max-w-[40rem]",
 };
 
 // export function filteredNextStepsMapLegal(keyList) {
@@ -460,10 +570,7 @@ const formPropDefaults = {
 // }
 
 function formProps(updates) {
-  const props = merge(
-    formPropDefaults,
-    updates
-  );
+  const props = merge(formPropDefaults, updates);
   if (props.formId && !props.name) {
     props.name = props.formId;
   }
@@ -471,76 +578,73 @@ function formProps(updates) {
 }
 
 const formAnchorDefaults = {
-  $el: 'div',
+  $el: "div",
   children: [
     {
-      $el: 'div',
+      $el: "div",
       attrs: {
-        id: 'form-anchor',
-        class: 't-absolute',
-        style: { top: '-30px', left: 0 }
-      }
-    }
+        id: "form-anchor",
+        class: "t-absolute",
+        style: { top: "-30px", left: 0 },
+      },
+    },
   ],
   attrs: {
-    class: 't-relative'
-  }
+    class: "t-relative",
+  },
 };
 
 function formAnchor(updates) {
-  return merge(
-    formAnchorDefaults,
-    updates
-  )
+  return merge(formAnchorDefaults, updates)
 }
 
 function headlineDefaults(updates = {}) {
   return {
-    $el: 'h1',
+    $el: "h1",
     attrs: {
-      class: 't-flex t-justify-center t-text-center !t-text-[2rem] t-font-semibold t-pt-5 t-px-7 md:t-px-3' + ' ' + (updates.headlineClass || '')
-    }
+      class:
+        "t-flex t-justify-center t-text-center !t-text-[2rem] t-font-semibold t-pt-5 t-px-7 md:t-px-3" +
+        " " +
+        (updates.headlineClass || ""),
+    },
   }
 }
 
 function headline(updates = {}) {
-  return merge(
-    headlineDefaults(updates),
-    updates
-  )
+  return merge(headlineDefaults(updates), updates)
 }
 
 const hiddenInputsBase = [
   {
-    $formkit: 'hidden',
+    $formkit: "hidden",
     name: "gclid",
-    value: null
+    value: null,
   },
   {
-    $formkit: 'hidden',
+    $formkit: "hidden",
     name: "campaignid",
-    value: null
+    value: null,
   },
   {
-    $formkit: 'hidden',
+    $formkit: "hidden",
     name: "s",
-    value: null
-  }
+    value: null,
+  },
 ];
 
 const hiddenInputsMechanics = [
   {
-    $formkit: 'hidden',
+    $formkit: "hidden",
     name: "vertical",
-    value: "AutoRepair"
+    value: "AutoRepair",
   },
   {
-    $formkit: 'hidden',
+    $formkit: "hidden",
     name: "Category",
     id: "Category",
-    value: "Mechanics"
+    value: "Mechanics",
   },
-  ...hiddenInputsBase
+  ...hiddenInputsBase,
 ];
 
 const schema = [