{
 "name": "wizard",
 "whenToUse": "a sequential flow with numbered steps and Next/Back (onboarding, checkout, application)",
 "draft": {
  "settings": {
   "columnsNumber": 12,
   "xGap": "16px",
   "yGap": "12px",
   "showSubmitButton": false
  },
  "variables": [],
  "schema": [
   {
    "id": "tpl-steps",
    "type": "steps",
    "name": "wizardSteps",
    "validateSteps": true,
    "finishBtnPurpose": "submit",
    "layout": {
     "lg": {
      "parentId": null,
      "containerType": "grid",
      "x": 1,
      "y": 1,
      "width": 12,
      "height": 12
     }
    }
   },
   {
    "id": "tpl-step1",
    "type": "stepsContainer",
    "name": "stepBasics",
    "label": {
     "en": "Basics"
    },
    "columnsNumber": 12,
    "layout": {
     "lg": {
      "parentId": "tpl-steps",
      "containerType": "grid",
      "x": 1,
      "y": 1,
      "width": 12,
      "height": 4
     }
    }
   },
   {
    "id": "tpl-s1-name",
    "type": "input",
    "name": "fullName",
    "inputType": "text",
    "label": {
     "en": "Full name"
    },
    "required": true,
    "layout": {
     "lg": {
      "parentId": "tpl-step1",
      "containerType": "grid",
      "x": 1,
      "y": 1,
      "width": 12,
      "height": 1
     }
    }
   },
   {
    "id": "tpl-s1-email",
    "type": "input",
    "name": "email",
    "inputType": "email",
    "label": {
     "en": "Email"
    },
    "required": true,
    "layout": {
     "lg": {
      "parentId": "tpl-step1",
      "containerType": "grid",
      "x": 1,
      "y": 2,
      "width": 12,
      "height": 1
     }
    }
   },
   {
    "id": "tpl-step2",
    "type": "stepsContainer",
    "name": "stepDetails",
    "label": {
     "en": "Details"
    },
    "columnsNumber": 12,
    "layout": {
     "lg": {
      "parentId": "tpl-steps",
      "containerType": "grid",
      "x": 1,
      "y": 5,
      "width": 12,
      "height": 4
     }
    }
   },
   {
    "id": "tpl-s2-notes",
    "type": "textarea",
    "name": "notes",
    "label": {
     "en": "Notes"
    },
    "layout": {
     "lg": {
      "parentId": "tpl-step2",
      "containerType": "grid",
      "x": 1,
      "y": 1,
      "width": 12,
      "height": 3
     }
    }
   },
   {
    "id": "tpl-step3",
    "type": "stepsContainer",
    "name": "stepConfirm",
    "label": {
     "en": "Confirm"
    },
    "columnsNumber": 12,
    "layout": {
     "lg": {
      "parentId": "tpl-steps",
      "containerType": "grid",
      "x": 1,
      "y": 9,
      "width": 12,
      "height": 3
     }
    }
   },
   {
    "id": "tpl-s3-agree",
    "type": "checkbox",
    "name": "agree",
    "label": {
     "en": "I confirm the details are correct"
    },
    "required": true,
    "layout": {
     "lg": {
      "parentId": "tpl-step3",
      "containerType": "grid",
      "x": 1,
      "y": 1,
      "width": 12,
      "height": 1
     }
    }
   },
   {
    "id": "tpl-footer",
    "type": "flexContainer",
    "name": "wizardFooter",
    "slot": "stepsFooter",
    "direction": "row",
    "justifyContent": "space-between",
    "gap": "8px",
    "layout": {
     "lg": {
      "parentId": "tpl-steps",
      "containerType": "grid",
      "x": 1,
      "y": 12,
      "width": 12,
      "height": 1
     }
    }
   },
   {
    "id": "tpl-btn-prev",
    "type": "stepButton",
    "name": "prevStepBtn",
    "stepAction": "prev",
    "buttonLabel": {
     "en": "Back"
    },
    "variant": "outlined",
    "styleIntent": "secondaryButton",
    "layout": {
     "lg": {
      "parentId": "tpl-footer",
      "containerType": "flex",
      "order": 1
     }
    }
   },
   {
    "id": "tpl-btn-next",
    "type": "stepButton",
    "name": "nextStepBtn",
    "stepAction": "next",
    "buttonLabel": {
     "en": "Next"
    },
    "styleIntent": "primaryButton",
    "layout": {
     "lg": {
      "parentId": "tpl-footer",
      "containerType": "flex",
      "order": 2
     }
    }
   },
   {
    "id": "tpl-btn-finish",
    "type": "stepButton",
    "name": "finishStepBtn",
    "stepAction": "finish",
    "buttonLabel": {
     "en": "Submit"
    },
    "styleIntent": "primaryButton",
    "layout": {
     "lg": {
      "parentId": "tpl-footer",
      "containerType": "flex",
      "order": 3
     }
    }
   }
  ]
 }
}