From 3ecdb67c506e36f2d4a10460d5647bc0fc9e0635 Mon Sep 17 00:00:00 2001
From: Rob Dekker <rob-ajax@live.nl>
Date: Wed, 25 Oct 2023 14:38:26 +0200
Subject: [PATCH 1/5] fix: improve visibility of delete icon in chip

---
 src/components/multiAutoCompleteInput.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/multiAutoCompleteInput.js b/src/components/multiAutoCompleteInput.js
index 502b4a1ec..993da9200 100644
--- a/src/components/multiAutoCompleteInput.js
+++ b/src/components/multiAutoCompleteInput.js
@@ -1055,6 +1055,13 @@
               style.getColor(backgroundColorChip),
               '!important',
             ],
+            '& .MuiSvgIcon-root': {
+              color: ({ options: { backgroundColorChip, textColorChip } }) =>
+                backgroundColorChip !== 'Light' && [
+                  style.getColor(textColorChip),
+                  '!important',
+                ],
+            },
           },
         },
         '& .MuiIconButton-root': {

From f69a63d46152a4b17cba8f55d2d5a6a16dfda32c Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 1 Nov 2023 07:41:22 +0000
Subject: [PATCH 2/5] chore(release): 2.165.1 [skip ci]

## [2.165.1](https://github.com/bettyblocks/material-ui-component-set/compare/v2.165.0...v2.165.1) (2023-11-01)

### Bug Fixes

* improve visibility of delete icon in chip ([3ecdb67](https://github.com/bettyblocks/material-ui-component-set/commit/3ecdb67c506e36f2d4a10460d5647bc0fc9e0635))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49dfcd842..1f60ab1ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [2.165.1](https://github.com/bettyblocks/material-ui-component-set/compare/v2.165.0...v2.165.1) (2023-11-01)
+
+
+### Bug Fixes
+
+* improve visibility of delete icon in chip ([3ecdb67](https://github.com/bettyblocks/material-ui-component-set/commit/3ecdb67c506e36f2d4a10460d5647bc0fc9e0635))
+
 # [2.165.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.164.0...v2.165.0) (2023-10-17)
 
 
diff --git a/package.json b/package.json
index 0ecb41bda..e2d988909 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "component-set",
-  "version": "2.165.0",
+  "version": "2.165.1",
   "main": "dist/templates.json",
   "license": "UNLICENSED",
   "private": false,

From 81925ad28c15c153aee7a2ba5f228fb263afff55 Mon Sep 17 00:00:00 2001
From: ingmar-stipriaan <ingmar.stipriaan@bettyblocks.com>
Date: Wed, 1 Nov 2023 11:10:16 +0100
Subject: [PATCH 3/5] feat: add questionnaire page templates

---
 src/prefabs/pageWithQuestionnaire.tsx        | 2289 ++++++++++++++++++
 src/prefabs/pageWithQuestionnaireStart.tsx   | 1073 ++++++++
 src/prefabs/questionnaire/checkboxWidget.ts  |  241 ++
 src/prefabs/questionnaire/dateWidget.ts      |  237 ++
 src/prefabs/questionnaire/dropdownWidget.ts  |  255 ++
 src/prefabs/questionnaire/index.ts           |   17 +
 src/prefabs/questionnaire/multilineWidget.ts |  225 ++
 src/prefabs/questionnaire/numberWidget.ts    |  225 ++
 src/prefabs/questionnaire/radioWidget.ts     |  241 ++
 src/prefabs/questionnaire/textWidget.ts      |  221 ++
 10 files changed, 5024 insertions(+)
 create mode 100644 src/prefabs/pageWithQuestionnaire.tsx
 create mode 100644 src/prefabs/pageWithQuestionnaireStart.tsx
 create mode 100644 src/prefabs/questionnaire/checkboxWidget.ts
 create mode 100644 src/prefabs/questionnaire/dateWidget.ts
 create mode 100644 src/prefabs/questionnaire/dropdownWidget.ts
 create mode 100644 src/prefabs/questionnaire/index.ts
 create mode 100644 src/prefabs/questionnaire/multilineWidget.ts
 create mode 100644 src/prefabs/questionnaire/numberWidget.ts
 create mode 100644 src/prefabs/questionnaire/radioWidget.ts
 create mode 100644 src/prefabs/questionnaire/textWidget.ts

diff --git a/src/prefabs/pageWithQuestionnaire.tsx b/src/prefabs/pageWithQuestionnaire.tsx
new file mode 100644
index 000000000..0b85997d9
--- /dev/null
+++ b/src/prefabs/pageWithQuestionnaire.tsx
@@ -0,0 +1,2289 @@
+import * as React from 'react';
+import {
+  BeforeCreateArgs,
+  Icon,
+  PrefabComponent,
+  PrefabComponentOption,
+  ThemeColor,
+  addChild,
+  childSelector,
+  color,
+  font,
+  linked,
+  option,
+  prefab as makePrefab,
+  reconfigure,
+  showIf,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+  InteractionType,
+} from '@betty-blocks/component-sdk';
+import {
+  Box,
+  Column,
+  DataContainer,
+  Drawer,
+  DrawerBar,
+  DrawerContainer,
+  Grid,
+  List,
+  ListItem,
+  Media,
+  Row,
+  Tab,
+  Tabs,
+  Text as TextComp,
+  boxOptions,
+  columnOptions,
+  drawerBarOptions,
+  drawerContainerOptions,
+  drawerOptions,
+  gridOptions,
+  listItemOptions,
+  mediaOptions,
+  rowOptions,
+  tabOptions,
+  tabsOptions,
+  textOptions,
+} from './structures';
+import { ModelProps, ModelQuery } from './types';
+import {
+  checkboxWidget,
+  dateWidget,
+  dropdownWidget,
+  multilineWidget,
+  numberWidget,
+  textWidget,
+  radioWidget,
+} from './questionnaire';
+
+const beforeCreate = ({
+  components: {
+    Box: BoxComp,
+    Button: ButtonComp,
+    Content,
+    Field,
+    Footer,
+    Header,
+    ModelSelector,
+    Text,
+    TextArea,
+    TextInput,
+  },
+  prefab,
+  save,
+  close,
+  helpers: {
+    addModelAndProperties,
+    addSchemaModel,
+    camelToSnakeCase,
+    setOption,
+    useCurrentPageId,
+    useCurrentPartialId,
+    useModelQuery,
+  },
+}: BeforeCreateArgs) => {
+  const [model, setModel] = React.useState<ModelProps>();
+  const [modelId, setModelId] = React.useState('');
+  const [title, setTitle] = React.useState('');
+  const [description, setDescription] = React.useState('');
+  const [sectionTitle, setSectionTitle] = React.useState('Basic information');
+  const [sectionDescription, setSectionDescription] = React.useState('');
+  const [validation, setValidation] = React.useState(false);
+  const [validationMessage, setValidationMessage] = React.useState('');
+  const [stepNumber, setStepNumber] = React.useState(1);
+  const [createNewQuestionnaire, setCreateNewQuestionnaire] =
+    React.useState(true);
+  // regex to only support the following characters A-Z a-z 0-9 . _ -
+  const nameRegExp = /^[\w\-\s.]+$/g;
+
+  const pageId = useCurrentPageId();
+  const partialId = useCurrentPartialId();
+
+  useModelQuery({
+    variables: { id: modelId },
+    onCompleted: (result: ModelQuery) => {
+      setModel(result.model);
+    },
+    skip: !modelId,
+  });
+
+  const treeSearch = (refValue: string, structure: any) =>
+    structure.reduce((acc: string, component: PrefabComponent) => {
+      if (acc) return acc;
+      if (
+        component.ref &&
+        Object.values(component.ref).indexOf(refValue) > -1
+      ) {
+        return component;
+      }
+      return treeSearch(refValue, component.descendants);
+    }, null);
+
+  const stepper = {
+    setStep: (step: number) => {
+      if (step === 1) {
+        return (
+          <>
+            <Field pad={{ bottom: '15px' }}>
+              <Text>Add a title and a description to the questionnaire</Text>
+            </Field>
+            <Field
+              pad={{ bottom: '15px' }}
+              label="Questionnaire title"
+              error={
+                <>
+                  {validation && (
+                    <Text color="#E9004C" size=".75rem">
+                      {validationMessage}
+                      <br />
+                    </Text>
+                  )}
+                  <Text color="#666D85">or </Text>
+                  {createNewQuestionnaire ? (
+                    <Text
+                      color="purple"
+                      onClick={() => {
+                        setCreateNewQuestionnaire(false);
+                        setValidation(false);
+                        setValidationMessage('');
+                      }}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      use an existing questionnaire model
+                    </Text>
+                  ) : (
+                    <Text
+                      color="purple"
+                      onClick={() => {
+                        setCreateNewQuestionnaire(true);
+                        setValidation(false);
+                        setValidationMessage('');
+                      }}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      create a new questionnaire
+                    </Text>
+                  )}
+                </>
+              }
+            >
+              {createNewQuestionnaire ? (
+                <TextInput
+                  onChange={({
+                    target: { value },
+                  }: {
+                    target: { value: string };
+                  }) => {
+                    if (typeof value !== 'string') {
+                      throw new Error('expected string');
+                    }
+                    setTitle(value);
+                    if (value.length >= 50) {
+                      setValidationMessage(
+                        'Name should be at most 50 character(s)',
+                      );
+                      setValidation(true);
+                    } else if (
+                      value.trim().length > 0 &&
+                      !nameRegExp.test(value)
+                    ) {
+                      setValidationMessage(
+                        'Only use alphanumeric characters (A-Z a-z 0-9 . _ -) and spaces here.',
+                      );
+                      setValidation(true);
+                    } else {
+                      setValidation(false);
+                      setValidationMessage('');
+                    }
+                  }}
+                  value={title}
+                  color={validation && 'pink'}
+                />
+              ) : (
+                <ModelSelector
+                  onChange={(value: string) => {
+                    setModelId(value);
+                    setValidationMessage('');
+                    setValidation(false);
+                  }}
+                  required
+                  modelId={modelId}
+                  value={modelId}
+                />
+              )}
+            </Field>
+            <Field pad={{ bottom: '15px' }} label="Questionnaire description">
+              <TextArea
+                resize={false}
+                style={{ minHeight: '150px' }}
+                onChange={({
+                  target: { value },
+                }: {
+                  target: { value: string };
+                }) => {
+                  if (typeof value !== 'string') {
+                    throw new Error('expected string');
+                  }
+                  setDescription(value);
+                }}
+                value={description}
+              />
+            </Field>
+          </>
+        );
+      }
+      return (
+        <>
+          <Field pad={{ bottom: '15px' }}>
+            <Text>
+              Add a title and a description to the first section of the
+              questionnaire
+            </Text>
+          </Field>
+          <Field pad={{ bottom: '15px' }} label="Section title">
+            <TextInput
+              onChange={({
+                target: { value },
+              }: {
+                target: { value: string };
+              }) => {
+                if (typeof value !== 'string') {
+                  throw new Error('expected string');
+                }
+                setSectionTitle(value);
+              }}
+              value={sectionTitle}
+            />
+          </Field>
+          <Field pad={{ bottom: '15px' }} label="Section description">
+            <TextArea
+              resize={false}
+              style={{ minHeight: '150px' }}
+              onChange={({
+                target: { value },
+              }: {
+                target: { value: string };
+              }) => {
+                if (typeof value !== 'string') {
+                  throw new Error('expected string');
+                }
+                setSectionDescription(value);
+              }}
+              value={sectionDescription}
+            />
+          </Field>
+        </>
+      );
+    },
+    onSave: async () => {
+      const newPrefab = { ...prefab };
+      const titleText = treeSearch('#Title', newPrefab.structure);
+      const descriptionText = treeSearch('#Description', newPrefab.structure);
+      const primaryTab = treeSearch('#PrimaryTab', newPrefab.structure);
+      const questionnaireDataContainer = treeSearch(
+        '#questionnaireDataContainer',
+        newPrefab.structure,
+      );
+      let idProperty = '';
+      let modelName = '';
+      let modelid = '';
+      const context = pageId ? { pageId } : { partialId };
+
+      if (createNewQuestionnaire) {
+        try {
+          const newModel = await addModelAndProperties(title, [
+            {
+              label: 'UUID',
+              kind: 'STRING',
+            },
+          ]);
+          if (newModel.id && newModel.label) {
+            modelName = newModel.label;
+            modelid = newModel.id;
+            idProperty =
+              newModel.properties.find(({ name }) => name === 'id')?.id || '';
+          }
+        } catch (e) {
+          switch (e.message) {
+            case 'has already been taken':
+              setValidationMessage('Name already exists.');
+              break;
+            case 'should be at most 50 character(s)':
+              setValidationMessage('Name should be at most 50 character(s)');
+              break;
+            case 'should start with a letter':
+              setValidationMessage('Name should start with a letter');
+              break;
+            default:
+              setValidationMessage('Creating new model failed');
+          }
+          setValidation(true);
+          setStepNumber(1);
+          return;
+        }
+      } else if (model && modelId) {
+        modelName = model.label;
+        modelid = modelId;
+        idProperty =
+          model.properties.find(({ name }) => name === 'id')?.id || '';
+      } else {
+        setValidationMessage('Selecting a model is required');
+        setValidation(true);
+        return;
+      }
+
+      setOption(
+        questionnaireDataContainer,
+        'filter',
+        (opt: PrefabComponentOption) => ({
+          ...opt,
+          value: {
+            [idProperty]: {
+              eq: {
+                ref: { id: '#idVariable' },
+                name: `${camelToSnakeCase(modelName)}_id`,
+                type: 'VARIABLE',
+              },
+            },
+          },
+        }),
+      );
+      setOption(
+        questionnaireDataContainer,
+        'model',
+        (opt: PrefabComponentOption) => ({
+          ...opt,
+          value: `${modelid}`,
+        }),
+      );
+      setOption(primaryTab, 'label', (opt: PrefabComponentOption) => ({
+        ...opt,
+        value: [`${sectionTitle}`],
+      }));
+      setOption(titleText, 'content', (opt: PrefabComponentOption) => ({
+        ...opt,
+        value: [modelName],
+        configuration: { as: 'MULTILINE' },
+      }));
+      primaryTab.label = sectionTitle;
+
+      const schemaName = 'Questionnaire object';
+      const jsonSchema = {
+        $id: 'https://bettyblocks.com/questionnaire.schema.json',
+        $schema: 'https://json-schema.org/draft/2020-12/schema',
+        description: 'Question description',
+        title: 'Question',
+        type: 'object',
+        properties: {
+          answer: { type: 'string' },
+          score: { type: 'number' },
+        },
+      };
+
+      addSchemaModel(schemaName, JSON.stringify(jsonSchema));
+
+      newPrefab.variables = [];
+      newPrefab.variables.push({
+        ...context,
+        kind: 'integer',
+        name: `${camelToSnakeCase(modelName)}_id`,
+        ref: {
+          id: '#idVariable',
+        },
+      });
+
+      if (description) {
+        setOption(descriptionText, 'content', (opt: PrefabComponentOption) => ({
+          ...opt,
+          value: [description],
+          configuration: { as: 'MULTILINE' },
+        }));
+      }
+
+      if (sectionTitle !== '') {
+        const sectionTitleText = treeSearch(
+          '#sectionTitle',
+          newPrefab.structure,
+        );
+        if (sectionTitleText.type === 'COMPONENT') {
+          setOption(
+            sectionTitleText,
+            'content',
+            (originalOption: PrefabComponentOption) => ({
+              ...originalOption,
+              value: [sectionTitle],
+            }),
+          );
+        }
+      }
+
+      if (sectionDescription !== '') {
+        const sectionDescriptionText = treeSearch(
+          '#sectionDescription',
+          newPrefab.structure,
+        );
+        if (sectionDescriptionText.type === 'COMPONENT') {
+          setOption(
+            sectionDescriptionText,
+            'content',
+            (originalOption: PrefabComponentOption) => ({
+              ...originalOption,
+              value: [sectionDescription],
+            }),
+          );
+        }
+      }
+
+      save(newPrefab);
+    },
+    buttons: () => (
+      <BoxComp direction="row" justify="between">
+        <BoxComp direction="row" margin="2rem">
+          <ButtonComp
+            label="Previous"
+            size="large"
+            background={{ color: '#f0f1f5' }}
+            onClick={() => {
+              if (stepNumber === 1) {
+                return;
+              }
+              const newStepnumber = stepNumber - 1;
+              setStepNumber(newStepnumber);
+            }}
+            margin={{ right: '5px' }}
+            disabled={stepNumber === 1}
+          />
+          <ButtonComp
+            label="Next"
+            size="large"
+            disabled={stepNumber === stepper.stepAmount || validation}
+            onClick={() => {
+              if (modelId === '' && !createNewQuestionnaire) {
+                setValidationMessage('Selecting a model is required');
+                setValidation(true);
+                return;
+              }
+              const newStepnumber = stepNumber + 1;
+              setStepNumber(newStepnumber);
+            }}
+            primary
+          />
+        </BoxComp>
+        <BoxComp>
+          <Footer
+            onClose={close}
+            onSave={stepper.onSave}
+            canSave={
+              stepNumber === stepper.stepAmount &&
+              (createNewQuestionnaire ? title.trim() !== '' : modelId !== '')
+            }
+          />
+        </BoxComp>
+      </BoxComp>
+    ),
+    progressBar: () => {
+      return (
+        <BoxComp
+          justify="center"
+          margin={{ left: '2rem', top: '-1rem', bottom: '-1rem' }}
+        >
+          <Text
+            size="medium"
+            weight="bold"
+          >{`Step: ${stepNumber} / ${stepper.stepAmount}`}</Text>
+        </BoxComp>
+      );
+    },
+    stepAmount: 2,
+  };
+  return (
+    <>
+      <Header onClose={close} title="Configure your questionnaire" />
+      {stepper.progressBar()}
+      <Content>{stepper.setStep(stepNumber)}</Content>
+      {stepper.buttons()}
+    </>
+  );
+};
+
+const attributes = {
+  category: 'WIDGETS',
+  icon: Icon.UpdateFormIcon,
+  type: 'page',
+  detail:
+    'Easily build a questionnaire with or without sections, weighted scoring, logic and more with this template.',
+  description:
+    'Easily build a questionnaire with or without sections, weighted scoring, logic and more with this template.',
+  previewImage:
+    'https://assets.bettyblocks.com/63b1c6ccc6874e0796e5cc5b7e41b3da_assets/files/56b89343f4ef499393e162173777c9ec',
+};
+
+const questionTypes = [
+  {
+    label: 'Text question',
+    structure: textWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onBlur',
+        ref: {
+          targetComponentId: '#textQuestionForm',
+          sourceComponentId: '#textInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+  {
+    label: 'Multiple choice question',
+    structure: radioWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onChange',
+        ref: {
+          targetComponentId: '#radioQuestionForm',
+          sourceComponentId: '#radioInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+  {
+    label: 'Number question',
+    structure: numberWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onBlur',
+        ref: {
+          targetComponentId: '#numberQuestionForm',
+          sourceComponentId: '#numberInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+  {
+    label: 'Date question',
+    structure: dateWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onChange',
+        ref: {
+          targetComponentId: '#dateQuestionForm',
+          sourceComponentId: '#dateInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+  {
+    label: 'Checkbox question',
+    structure: checkboxWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onChange',
+        ref: {
+          targetComponentId: '#checkboxQuestionForm',
+          sourceComponentId: '#checkboxInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+  {
+    label: 'Dropdown question',
+    structure: dropdownWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onChange',
+        ref: {
+          targetComponentId: '#dropdownQuestionForm',
+          sourceComponentId: '#dropdownInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+  {
+    label: 'Multiline question',
+    structure: multilineWidget,
+    interactions: [
+      {
+        name: 'Submit',
+        sourceEvent: 'onBlur',
+        ref: {
+          targetComponentId: '#multilineQuestionForm',
+          sourceComponentId: '#textInput',
+        },
+        type: InteractionType.Custom,
+      },
+    ],
+  },
+];
+
+const children = [
+  Tab(
+    {
+      label: 'Section',
+      ref: { id: '#newSection' },
+      options: {
+        ...tabOptions,
+        label: variable('Section label', {
+          value: ['Section label'],
+          showInAddChild: true,
+          showInReconfigure: true,
+          configuration: {
+            pushToWrapper: {
+              name: 'Questionnaire',
+              condition: {
+                type: 'SHOW',
+                option: 'questionnaireSections',
+                comparator: 'EQ_COMPONENT_ID',
+                value: '#newSection',
+              },
+            },
+          },
+        }),
+        width: size('Width', {
+          value: '100%',
+          configuration: {
+            as: 'UNIT',
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          options: {
+            ...boxOptions,
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', '0rem', 'XL'],
+            }),
+            innerSpacing: sizes('Inner space', {
+              value: ['0rem', '0rem', '0rem', 'XL'],
+            }),
+          },
+        },
+        [
+          TextComp(
+            {
+              options: {
+                ...textOptions,
+                content: variable('Section title', {
+                  value: ['Section title'],
+                  configuration: {
+                    as: 'MULTILINE',
+                    pushToWrapper: {
+                      name: 'Questionnaire',
+                      condition: {
+                        type: 'SHOW',
+                        option: 'questionnaireSections',
+                        comparator: 'EQ_COMPONENT_ID',
+                        value: '#newSection',
+                      },
+                    },
+                  },
+                  showInAddChild: true,
+                }),
+                type: font('Font', {
+                  value: ['Title5'],
+                }),
+                fontWeight: option('CUSTOM', {
+                  label: 'Font weight',
+                  value: '500',
+                  configuration: {
+                    as: 'DROPDOWN',
+                    dataType: 'string',
+                    allowedInput: [
+                      {
+                        name: '100',
+                        value: '100',
+                      },
+                      {
+                        name: '200',
+                        value: '200',
+                      },
+                      {
+                        name: '300',
+                        value: '300',
+                      },
+                      {
+                        name: '400',
+                        value: '400',
+                      },
+                      {
+                        name: '500',
+                        value: '500',
+                      },
+                      {
+                        name: '600',
+                        value: '600',
+                      },
+                      {
+                        name: '700',
+                        value: '700',
+                      },
+                      {
+                        name: '800',
+                        value: '800',
+                      },
+                      {
+                        name: '900',
+                        value: '900',
+                      },
+                    ],
+                  },
+                }),
+              },
+            },
+            [],
+          ),
+          TextComp(
+            {
+              options: {
+                ...textOptions,
+                content: variable('Section description', {
+                  value: [`Section description`],
+                  configuration: {
+                    as: 'MULTILINE',
+                    pushToWrapper: {
+                      name: 'Questionnaire',
+                      condition: {
+                        type: 'SHOW',
+                        option: 'questionnaireSections',
+                        comparator: 'EQ_COMPONENT_ID',
+                        value: '#newSection',
+                      },
+                    },
+                  },
+                  showInAddChild: true,
+                }),
+                type: font('Font', {
+                  value: ['Body1'],
+                }),
+              },
+            },
+            [],
+          ),
+          Box(
+            {
+              label: 'Question drop area',
+              options: {
+                ...boxOptions,
+                reconfigure: reconfigure('Reconfigure questions', {
+                  value: {
+                    children: questionTypes,
+                    reconfigureWizardType: 'ChildrenSelector',
+                  },
+                  ref: {
+                    id: '#QuestionsReconfigure',
+                  },
+                  configuration: {
+                    pushToWrapper: {
+                      name: 'Questionnaire',
+                      condition: {
+                        type: 'SHOW',
+                        option: 'questionnaireSections',
+                        comparator: 'EQ_COMPONENT_ID',
+                        value: '#newSection',
+                      },
+                    },
+                  },
+                }),
+                addChild: addChild('Add question', {
+                  value: {
+                    children: questionTypes,
+                    addChildWizardType: 'ChildSelector',
+                  },
+                  configuration: {
+                    pushToWrapper: {
+                      name: 'Questionnaire',
+                      condition: {
+                        type: 'SHOW',
+                        option: 'questionnaireSections',
+                        comparator: 'EQ_COMPONENT_ID',
+                        value: '#newSection',
+                      },
+                    },
+                  },
+                }),
+                innerSpacing: sizes('Inner space', {
+                  value: ['L', '0rem', '0rem', '0rem'],
+                }),
+                emptyPlaceHolderText: variable('Empty placeholder text', {
+                  value: ['Drop your questionnaire widgets here'],
+                }),
+              },
+            },
+            [],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
+
+const prefabStructure = [
+  wrapper(
+    {
+      label: 'Questionnaire',
+      options: {
+        questionnaireTitle: linked({
+          label: 'Questionnaire title',
+          value: {
+            ref: {
+              componentId: '#Title',
+              optionId: '#TitleText',
+            },
+          },
+        }),
+        questionnaireDescription: linked({
+          label: 'Questionnaire description',
+          value: {
+            ref: {
+              componentId: '#Description',
+              optionId: '#DescriptionText',
+            },
+          },
+        }),
+        questionnaireReconfigure: linked({
+          label: 'Reconfigure sections',
+          value: {
+            ref: {
+              componentId: '#Tabs',
+              optionId: '#TabsReconfigure',
+            },
+          },
+        }),
+        questionnaireAddChild: linked({
+          label: 'Add section',
+          value: {
+            ref: {
+              componentId: '#Tabs',
+              optionId: '#TabsAddChild',
+            },
+          },
+        }),
+        questionnaireSections: linked({
+          label: 'Selected section',
+          value: {
+            ref: {
+              componentId: '#Tabs',
+              optionId: '#TabsSelectedTab',
+            },
+          },
+        }),
+        sectionLabel: linked({
+          label: 'Section Label',
+          value: {
+            ref: {
+              componentId: '#PrimaryTab',
+              optionId: '#PrimaryTabLabel',
+            },
+          },
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'questionnaireSections',
+              comparator: 'EQ_COMPONENT_ID',
+              value: { ref: { componentId: '#PrimaryTab' } },
+            },
+          },
+        }),
+        sectionTitle: linked({
+          label: 'Section Title',
+          value: {
+            ref: {
+              componentId: '#sectionTitle',
+              optionId: '#sectionTitleContent',
+            },
+          },
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'questionnaireSections',
+              comparator: 'EQ_COMPONENT_ID',
+              value: { ref: { componentId: '#PrimaryTab' } },
+            },
+          },
+        }),
+        sectionDescription: linked({
+          label: 'Section Description',
+          value: {
+            ref: {
+              componentId: '#sectionDescription',
+              optionId: '#sectionDescriptionContent',
+            },
+          },
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'questionnaireSections',
+              comparator: 'EQ_COMPONENT_ID',
+              value: { ref: { componentId: '#PrimaryTab' } },
+            },
+          },
+        }),
+        reconfigureQuestion: linked({
+          label: 'Reconfigure questions',
+          value: {
+            ref: {
+              componentId: '#DropArea',
+              optionId: '#QuestionsReconfigure',
+            },
+          },
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'questionnaireSections',
+              comparator: 'EQ_COMPONENT_ID',
+              value: { ref: { componentId: '#PrimaryTab' } },
+            },
+          },
+        }),
+        addQuestion: linked({
+          label: 'Add question',
+          value: {
+            ref: {
+              componentId: '#DropArea',
+              optionId: '#AddQuestion',
+            },
+          },
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'questionnaireSections',
+              comparator: 'EQ_COMPONENT_ID',
+              value: { ref: { componentId: '#PrimaryTab' } },
+            },
+          },
+        }),
+      },
+    },
+    [
+      Drawer(
+        {
+          options: {
+            ...drawerOptions,
+            runTimeVisibility: option('CUSTOM', {
+              label: 'Initial State (RUNTIME)',
+              value: 'true',
+              configuration: {
+                as: 'DROPDOWN',
+                allowedInput: [
+                  { name: 'Visible', value: 'true' },
+                  { name: 'Hidden', value: 'false' },
+                ],
+              },
+            }),
+          },
+        },
+        [
+          DrawerBar(
+            {
+              options: {
+                ...drawerBarOptions,
+                innerSpacing: sizes('Inner space', {
+                  value: ['0rem', '0rem', '0rem', '0rem'],
+                }),
+                themeBgColor: color('Theme background color', {
+                  value: ThemeColor.PRIMARY,
+                }),
+              },
+            },
+            [
+              Box(
+                {
+                  options: {
+                    ...boxOptions,
+                    innerSpacing: sizes('Inner space', {
+                      value: ['0rem', '0rem', '0rem', '0rem'],
+                    }),
+                    stretch: toggle('Stretch (when in flex container)', {
+                      value: true,
+                    }),
+                    backgroundColor: color('Background color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    backgroundColorAlpha: option('NUMBER', {
+                      label: 'Background color opacity',
+                      value: 60,
+                    }),
+                  },
+                },
+                [
+                  Box({}, [
+                    Media(
+                      {
+                        options: {
+                          ...mediaOptions,
+                          type: option('CUSTOM', {
+                            label: 'Media type',
+                            value: 'url',
+                            configuration: {
+                              as: 'BUTTONGROUP',
+                              dataType: 'string',
+                              allowedInput: [
+                                { name: 'Image', value: 'img' },
+                                { name: 'Data/URL', value: 'url' },
+                                { name: 'Video', value: 'video' },
+                                { name: 'I-frame', value: 'iframe' },
+                              ],
+                            },
+                          }),
+                          urlFileSource: variable('Source', {
+                            value: [
+                              'https://assets.bettyblocks.com/efaf005f4d3041e5bdfdd0643d1f190d_assets/files/Your_Logo_-_W.svg',
+                            ],
+                            configuration: {
+                              placeholder: 'Starts with https:// or http://',
+                              as: 'MULTILINE',
+                              condition: showIf('type', 'EQ', 'url'),
+                            },
+                          }),
+                        },
+                      },
+                      [],
+                    ),
+                  ]),
+                  Box(
+                    {
+                      options: {
+                        ...boxOptions,
+                        innerSpacing: sizes('Inner space', {
+                          value: ['0rem', '0rem', '0rem', '0rem'],
+                        }),
+                      },
+                    },
+                    [
+                      List({}, [
+                        ListItem(
+                          {
+                            options: {
+                              ...listItemOptions,
+                              primaryText: variable('Primary text', {
+                                value: ['Overview'],
+                              }),
+                              titleColor: color('Title color', {
+                                value: ThemeColor.WHITE,
+                              }),
+                            },
+                          },
+                          [],
+                        ),
+                        ListItem(
+                          {
+                            options: {
+                              ...listItemOptions,
+                              primaryText: variable('Primary text', {
+                                value: ['My profile'],
+                              }),
+                              titleColor: color('Title color', {
+                                value: ThemeColor.WHITE,
+                              }),
+                            },
+                          },
+                          [],
+                        ),
+                        ListItem(
+                          {
+                            options: {
+                              ...listItemOptions,
+                              primaryText: variable('Primary text', {
+                                value: ['Sign out'],
+                              }),
+                              titleColor: color('Title color', {
+                                value: ThemeColor.WHITE,
+                              }),
+                            },
+                          },
+                          [],
+                        ),
+                      ]),
+                    ],
+                  ),
+                ],
+              ),
+            ],
+          ),
+          DrawerContainer(
+            {
+              options: {
+                ...drawerContainerOptions,
+                innerSpacing: sizes('Inner space', {
+                  value: ['0rem', '0rem', '0rem', '0rem'],
+                }),
+              },
+            },
+            [
+              Row(
+                {
+                  options: {
+                    ...rowOptions,
+                    maxRowWidth: option('CUSTOM', {
+                      label: 'Width',
+                      value: 'Full',
+                      configuration: {
+                        as: 'BUTTONGROUP',
+                        dataType: 'string',
+                        allowedInput: [
+                          { name: 'S', value: 'S' },
+                          { name: 'M', value: 'M' },
+                          { name: 'L', value: 'L' },
+                          { name: 'XL', value: 'XL' },
+                          { name: 'Full', value: 'Full' },
+                        ],
+                      },
+                    }),
+                  },
+                },
+                [
+                  Column(
+                    {
+                      options: {
+                        ...columnOptions,
+                        innerSpacing: sizes('Inner space', {
+                          value: ['0rem', '0rem', '0rem', '0rem'],
+                        }),
+                      },
+                    },
+                    [
+                      Grid(
+                        {
+                          options: {
+                            ...gridOptions,
+                            height: size('Height', {
+                              value: '100%',
+                              configuration: {
+                                as: 'UNIT',
+                              },
+                            }),
+                          },
+                        },
+                        [
+                          Grid(
+                            {
+                              options: {
+                                ...gridOptions,
+                                direction: option('CUSTOM', {
+                                  value: 'column',
+                                  label: 'Direction',
+                                  configuration: {
+                                    as: 'BUTTONGROUP',
+                                    dataType: 'string',
+                                    allowedInput: [
+                                      { name: 'Horizontal', value: 'row' },
+                                      { name: 'Vertical', value: 'column' },
+                                    ],
+                                    condition: showIf(
+                                      'type',
+                                      'EQ',
+                                      'container',
+                                    ),
+                                  },
+                                }),
+                              },
+                            },
+                            [
+                              Box(
+                                {
+                                  options: {
+                                    ...boxOptions,
+                                    innerSpacing: sizes('Inner space', {
+                                      value: ['0rem', '0rem', '0rem', '0rem'],
+                                    }),
+                                    stretch: toggle(
+                                      'Stretch (when in flex container)',
+                                      {
+                                        value: true,
+                                      },
+                                    ),
+                                    backgroundColor: color('Background color', {
+                                      value: ThemeColor.WHITE,
+                                    }),
+                                  },
+                                },
+                                [
+                                  Row(
+                                    {
+                                      options: {
+                                        ...rowOptions,
+                                        maxRowWidth: option('CUSTOM', {
+                                          label: 'Width',
+                                          value: 'Full',
+                                          configuration: {
+                                            as: 'BUTTONGROUP',
+                                            dataType: 'string',
+                                            allowedInput: [
+                                              { name: 'S', value: 'S' },
+                                              { name: 'M', value: 'M' },
+                                              { name: 'L', value: 'L' },
+                                              { name: 'XL', value: 'XL' },
+                                              { name: 'Full', value: 'Full' },
+                                            ],
+                                          },
+                                        }),
+                                      },
+                                    },
+                                    [
+                                      Column(
+                                        {
+                                          options: {
+                                            ...columnOptions,
+                                            innerSpacing: sizes('Inner space', {
+                                              value: [
+                                                '0rem',
+                                                '0rem',
+                                                '0rem',
+                                                '0rem',
+                                              ],
+                                            }),
+                                          },
+                                        },
+                                        [
+                                          Box(
+                                            {
+                                              options: {
+                                                ...boxOptions,
+                                                innerSpacing: sizes(
+                                                  'Inner space',
+                                                  {
+                                                    value: [
+                                                      'L',
+                                                      'XL',
+                                                      'XL',
+                                                      'XL',
+                                                    ],
+                                                  },
+                                                ),
+                                                backgroundColor: color(
+                                                  'Background color',
+                                                  {
+                                                    value: ThemeColor.PRIMARY,
+                                                  },
+                                                ),
+                                                backgroundColorAlpha: option(
+                                                  'NUMBER',
+                                                  {
+                                                    label:
+                                                      'Background color opacity',
+                                                    value: 10,
+                                                  },
+                                                ),
+                                              },
+                                            },
+                                            [
+                                              TextComp(
+                                                {
+                                                  ref: {
+                                                    id: '#Title',
+                                                  },
+                                                  options: {
+                                                    ...textOptions,
+                                                    content: variable(
+                                                      'Content',
+                                                      {
+                                                        ref: {
+                                                          id: '#TitleText',
+                                                        },
+                                                        value: ['Title'],
+                                                        configuration: {
+                                                          as: 'MULTILINE',
+                                                        },
+                                                      },
+                                                    ),
+                                                    type: font('Font', {
+                                                      value: ['Title4'],
+                                                    }),
+                                                    outerSpacing: sizes(
+                                                      'Outer space',
+                                                      {
+                                                        value: [
+                                                          '0rem',
+                                                          '0rem',
+                                                          'S',
+                                                          '0rem',
+                                                        ],
+                                                      },
+                                                    ),
+                                                    fontWeight: option(
+                                                      'CUSTOM',
+                                                      {
+                                                        label: 'Font weight',
+                                                        value: '500',
+                                                        configuration: {
+                                                          as: 'DROPDOWN',
+                                                          dataType: 'string',
+                                                          allowedInput: [
+                                                            {
+                                                              name: '100',
+                                                              value: '100',
+                                                            },
+                                                            {
+                                                              name: '200',
+                                                              value: '200',
+                                                            },
+                                                            {
+                                                              name: '300',
+                                                              value: '300',
+                                                            },
+                                                            {
+                                                              name: '400',
+                                                              value: '400',
+                                                            },
+                                                            {
+                                                              name: '500',
+                                                              value: '500',
+                                                            },
+                                                            {
+                                                              name: '600',
+                                                              value: '600',
+                                                            },
+                                                            {
+                                                              name: '700',
+                                                              value: '700',
+                                                            },
+                                                            {
+                                                              name: '800',
+                                                              value: '800',
+                                                            },
+                                                            {
+                                                              name: '900',
+                                                              value: '900',
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                    ),
+                                                  },
+                                                },
+                                                [],
+                                              ),
+                                              TextComp(
+                                                {
+                                                  ref: {
+                                                    id: '#Description',
+                                                  },
+                                                  options: {
+                                                    ...textOptions,
+                                                    content: variable(
+                                                      'Content',
+                                                      {
+                                                        ref: {
+                                                          id: '#DescriptionText',
+                                                        },
+                                                        value: ['Description'],
+                                                        configuration: {
+                                                          as: 'MULTILINE',
+                                                        },
+                                                      },
+                                                    ),
+                                                    type: font('Font', {
+                                                      value: ['Body1'],
+                                                    }),
+                                                  },
+                                                },
+                                                [],
+                                              ),
+                                            ],
+                                          ),
+                                          Box(
+                                            {
+                                              options: {
+                                                ...boxOptions,
+                                                innerSpacing: sizes(
+                                                  'Inner space',
+                                                  {
+                                                    value: [
+                                                      '0rem',
+                                                      '0rem',
+                                                      '0rem',
+                                                      '0rem',
+                                                    ],
+                                                  },
+                                                ),
+                                              },
+                                            },
+                                            [
+                                              Row(
+                                                {
+                                                  ref: {
+                                                    id: '#hasSectionsRow',
+                                                  },
+
+                                                  options: {
+                                                    ...rowOptions,
+                                                    maxRowWidth: option(
+                                                      'CUSTOM',
+                                                      {
+                                                        label: 'Width',
+                                                        value: 'Full',
+                                                        configuration: {
+                                                          as: 'BUTTONGROUP',
+                                                          dataType: 'string',
+                                                          allowedInput: [
+                                                            {
+                                                              name: 'S',
+                                                              value: 'S',
+                                                            },
+                                                            {
+                                                              name: 'M',
+                                                              value: 'M',
+                                                            },
+                                                            {
+                                                              name: 'L',
+                                                              value: 'L',
+                                                            },
+                                                            {
+                                                              name: 'XL',
+                                                              value: 'XL',
+                                                            },
+                                                            {
+                                                              name: 'Full',
+                                                              value: 'Full',
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                    ),
+                                                  },
+                                                },
+                                                [
+                                                  Column(
+                                                    {
+                                                      ref: {
+                                                        id: '#questionsColumn',
+                                                      },
+                                                      options: {
+                                                        ...columnOptions,
+                                                        innerSpacing: sizes(
+                                                          'Inner space',
+                                                          {
+                                                            value: [
+                                                              'XL',
+                                                              'XL',
+                                                              'XL',
+                                                              'XL',
+                                                            ],
+                                                          },
+                                                        ),
+                                                        columnWidth: option(
+                                                          'CUSTOM',
+                                                          {
+                                                            label:
+                                                              'Column width',
+                                                            value: '12',
+                                                            configuration: {
+                                                              as: 'DROPDOWN',
+                                                              dataType:
+                                                                'string',
+                                                              allowedInput: [
+                                                                {
+                                                                  name: 'Fit content',
+                                                                  value:
+                                                                    'fitContent',
+                                                                },
+                                                                {
+                                                                  name: 'Flexible',
+                                                                  value:
+                                                                    'flexible',
+                                                                },
+                                                                {
+                                                                  name: 'Hidden',
+                                                                  value:
+                                                                    'hidden',
+                                                                },
+                                                                {
+                                                                  name: '1',
+                                                                  value: '1',
+                                                                },
+                                                                {
+                                                                  name: '2',
+                                                                  value: '2',
+                                                                },
+                                                                {
+                                                                  name: '3',
+                                                                  value: '3',
+                                                                },
+                                                                {
+                                                                  name: '4',
+                                                                  value: '4',
+                                                                },
+                                                                {
+                                                                  name: '5',
+                                                                  value: '5',
+                                                                },
+                                                                {
+                                                                  name: '6',
+                                                                  value: '6',
+                                                                },
+                                                                {
+                                                                  name: '7',
+                                                                  value: '7',
+                                                                },
+                                                                {
+                                                                  name: '8',
+                                                                  value: '8',
+                                                                },
+                                                                {
+                                                                  name: '9',
+                                                                  value: '9',
+                                                                },
+                                                                {
+                                                                  name: '10',
+                                                                  value: '10',
+                                                                },
+                                                                {
+                                                                  name: '11',
+                                                                  value: '11',
+                                                                },
+                                                                {
+                                                                  name: '12',
+                                                                  value: '12',
+                                                                },
+                                                              ],
+                                                            },
+                                                          },
+                                                        ),
+                                                        columnWidthTabletLandscape:
+                                                          option('CUSTOM', {
+                                                            label:
+                                                              'Column width (tablet landscape)',
+                                                            value: '12',
+                                                            configuration: {
+                                                              as: 'DROPDOWN',
+                                                              dataType:
+                                                                'string',
+                                                              allowedInput: [
+                                                                {
+                                                                  name: 'Fit content',
+                                                                  value:
+                                                                    'fitContent',
+                                                                },
+                                                                {
+                                                                  name: 'Flexible',
+                                                                  value:
+                                                                    'flexible',
+                                                                },
+                                                                {
+                                                                  name: 'Hidden',
+                                                                  value:
+                                                                    'hidden',
+                                                                },
+                                                                {
+                                                                  name: '1',
+                                                                  value: '1',
+                                                                },
+                                                                {
+                                                                  name: '2',
+                                                                  value: '2',
+                                                                },
+                                                                {
+                                                                  name: '3',
+                                                                  value: '3',
+                                                                },
+                                                                {
+                                                                  name: '4',
+                                                                  value: '4',
+                                                                },
+                                                                {
+                                                                  name: '5',
+                                                                  value: '5',
+                                                                },
+                                                                {
+                                                                  name: '6',
+                                                                  value: '6',
+                                                                },
+                                                                {
+                                                                  name: '7',
+                                                                  value: '7',
+                                                                },
+                                                                {
+                                                                  name: '8',
+                                                                  value: '8',
+                                                                },
+                                                                {
+                                                                  name: '9',
+                                                                  value: '9',
+                                                                },
+                                                                {
+                                                                  name: '10',
+                                                                  value: '10',
+                                                                },
+                                                                {
+                                                                  name: '11',
+                                                                  value: '11',
+                                                                },
+                                                                {
+                                                                  name: '12',
+                                                                  value: '12',
+                                                                },
+                                                              ],
+                                                            },
+                                                          }),
+                                                        columnWidthTabletPortrait:
+                                                          option('CUSTOM', {
+                                                            value: '12',
+                                                            label:
+                                                              'Column width (tablet portrait)',
+                                                            configuration: {
+                                                              as: 'DROPDOWN',
+                                                              dataType:
+                                                                'string',
+                                                              allowedInput: [
+                                                                {
+                                                                  name: 'Fit content',
+                                                                  value:
+                                                                    'fitContent',
+                                                                },
+                                                                {
+                                                                  name: 'Flexible',
+                                                                  value:
+                                                                    'flexible',
+                                                                },
+                                                                {
+                                                                  name: 'Hidden',
+                                                                  value:
+                                                                    'hidden',
+                                                                },
+                                                                {
+                                                                  name: '1',
+                                                                  value: '1',
+                                                                },
+                                                                {
+                                                                  name: '2',
+                                                                  value: '2',
+                                                                },
+                                                                {
+                                                                  name: '3',
+                                                                  value: '3',
+                                                                },
+                                                                {
+                                                                  name: '4',
+                                                                  value: '4',
+                                                                },
+                                                                {
+                                                                  name: '5',
+                                                                  value: '5',
+                                                                },
+                                                                {
+                                                                  name: '6',
+                                                                  value: '6',
+                                                                },
+                                                                {
+                                                                  name: '7',
+                                                                  value: '7',
+                                                                },
+                                                                {
+                                                                  name: '8',
+                                                                  value: '8',
+                                                                },
+                                                                {
+                                                                  name: '9',
+                                                                  value: '9',
+                                                                },
+                                                                {
+                                                                  name: '10',
+                                                                  value: '10',
+                                                                },
+                                                                {
+                                                                  name: '11',
+                                                                  value: '11',
+                                                                },
+                                                                {
+                                                                  name: '12',
+                                                                  value: '12',
+                                                                },
+                                                              ],
+                                                            },
+                                                          }),
+                                                        columnWidthMobile:
+                                                          option('CUSTOM', {
+                                                            value: '12',
+                                                            label:
+                                                              'Column width (mobile)',
+                                                            configuration: {
+                                                              as: 'DROPDOWN',
+                                                              dataType:
+                                                                'string',
+                                                              allowedInput: [
+                                                                {
+                                                                  name: 'Fit content',
+                                                                  value:
+                                                                    'fitContent',
+                                                                },
+                                                                {
+                                                                  name: 'Flexible',
+                                                                  value:
+                                                                    'flexible',
+                                                                },
+                                                                {
+                                                                  name: 'Hidden',
+                                                                  value:
+                                                                    'hidden',
+                                                                },
+                                                                {
+                                                                  name: '1',
+                                                                  value: '1',
+                                                                },
+                                                                {
+                                                                  name: '2',
+                                                                  value: '2',
+                                                                },
+                                                                {
+                                                                  name: '3',
+                                                                  value: '3',
+                                                                },
+                                                                {
+                                                                  name: '4',
+                                                                  value: '4',
+                                                                },
+                                                                {
+                                                                  name: '5',
+                                                                  value: '5',
+                                                                },
+                                                                {
+                                                                  name: '6',
+                                                                  value: '6',
+                                                                },
+                                                                {
+                                                                  name: '7',
+                                                                  value: '7',
+                                                                },
+                                                                {
+                                                                  name: '8',
+                                                                  value: '8',
+                                                                },
+                                                                {
+                                                                  name: '9',
+                                                                  value: '9',
+                                                                },
+                                                                {
+                                                                  name: '10',
+                                                                  value: '10',
+                                                                },
+                                                                {
+                                                                  name: '11',
+                                                                  value: '11',
+                                                                },
+                                                                {
+                                                                  name: '12',
+                                                                  value: '12',
+                                                                },
+                                                              ],
+                                                            },
+                                                          }),
+                                                      },
+                                                    },
+                                                    [
+                                                      TextComp(
+                                                        {
+                                                          options: {
+                                                            ...textOptions,
+                                                            content: variable(
+                                                              'Content',
+                                                              {
+                                                                value: [
+                                                                  'Sections',
+                                                                ],
+                                                                configuration: {
+                                                                  as: 'MULTILINE',
+                                                                },
+                                                              },
+                                                            ),
+                                                            type: font('Font', {
+                                                              value: ['Title5'],
+                                                            }),
+                                                          },
+                                                        },
+                                                        [],
+                                                      ),
+                                                      DataContainer(
+                                                        {
+                                                          ref: {
+                                                            id: '#questionnaireDataContainer',
+                                                          },
+                                                        },
+                                                        [
+                                                          Tabs(
+                                                            {
+                                                              ref: {
+                                                                id: '#Tabs',
+                                                              },
+                                                              options: {
+                                                                ...tabsOptions,
+                                                                reconfigure:
+                                                                  reconfigure(
+                                                                    'Reconfigure',
+                                                                    {
+                                                                      value: {
+                                                                        children,
+                                                                        reconfigureWizardType:
+                                                                          'ChildrenSelector',
+                                                                      },
+                                                                      ref: {
+                                                                        id: '#TabsReconfigure',
+                                                                      },
+                                                                    },
+                                                                  ),
+                                                                addChild:
+                                                                  addChild(
+                                                                    'Add Tab',
+                                                                    {
+                                                                      value: {
+                                                                        children,
+                                                                        addChildWizardType:
+                                                                          'ChildSelector',
+                                                                      },
+                                                                      ref: {
+                                                                        id: '#TabsAddChild',
+                                                                      },
+                                                                    },
+                                                                  ),
+                                                                selectedDesignTabIndex:
+                                                                  childSelector(
+                                                                    'Selected tab (design)',
+                                                                    {
+                                                                      value: 1,
+                                                                      configuration:
+                                                                        {
+                                                                          as: 'DROPDOWN',
+                                                                        },
+                                                                      ref: {
+                                                                        id: '#TabsSelectedTab',
+                                                                      },
+                                                                    },
+                                                                  ),
+                                                                layout: option(
+                                                                  'CUSTOM',
+                                                                  {
+                                                                    label:
+                                                                      'Layout',
+                                                                    value:
+                                                                      'circle',
+                                                                    configuration:
+                                                                      {
+                                                                        as: 'BUTTONGROUP',
+                                                                        dataType:
+                                                                          'string',
+                                                                        allowedInput:
+                                                                          [
+                                                                            {
+                                                                              name: 'Default',
+                                                                              value:
+                                                                                'default',
+                                                                            },
+                                                                            {
+                                                                              name: 'Circle',
+                                                                              value:
+                                                                                'circle',
+                                                                            },
+                                                                          ],
+                                                                      },
+                                                                  },
+                                                                ),
+                                                                alignment:
+                                                                  option(
+                                                                    'CUSTOM',
+                                                                    {
+                                                                      value:
+                                                                        'left',
+                                                                      label:
+                                                                        'Alignment',
+                                                                      configuration:
+                                                                        {
+                                                                          as: 'BUTTONGROUP',
+                                                                          dataType:
+                                                                            'string',
+                                                                          allowedInput:
+                                                                            [
+                                                                              {
+                                                                                name: 'Left',
+                                                                                value:
+                                                                                  'left',
+                                                                              },
+                                                                              {
+                                                                                name: 'Top',
+                                                                                value:
+                                                                                  'top',
+                                                                              },
+                                                                              {
+                                                                                name: 'Right',
+                                                                                value:
+                                                                                  'right',
+                                                                              },
+                                                                              {
+                                                                                name: 'Bottom',
+                                                                                value:
+                                                                                  'bottom',
+                                                                              },
+                                                                            ],
+                                                                        },
+                                                                    },
+                                                                  ),
+                                                                disableMenuClick:
+                                                                  toggle(
+                                                                    'Disable navigation buttons',
+                                                                    {
+                                                                      value:
+                                                                        true,
+                                                                      configuration:
+                                                                        {
+                                                                          condition:
+                                                                            showIf(
+                                                                              'layout',
+                                                                              'EQ',
+                                                                              'circle',
+                                                                            ),
+                                                                        },
+                                                                    },
+                                                                  ),
+                                                                circleSideBarWidth:
+                                                                  size(
+                                                                    'Circle Sidebar Width',
+                                                                    {
+                                                                      value:
+                                                                        '200px',
+                                                                      configuration:
+                                                                        {
+                                                                          as: 'UNIT',
+                                                                          condition:
+                                                                            showIf(
+                                                                              'layout',
+                                                                              'EQ',
+                                                                              'circle',
+                                                                            ),
+                                                                        },
+                                                                    },
+                                                                  ),
+                                                              },
+                                                            },
+                                                            [
+                                                              Tab(
+                                                                {
+                                                                  ref: {
+                                                                    id: '#PrimaryTab',
+                                                                  },
+                                                                  options: {
+                                                                    ...tabOptions,
+                                                                    label:
+                                                                      variable(
+                                                                        'Tab label',
+                                                                        {
+                                                                          value:
+                                                                            [
+                                                                              'Tab',
+                                                                            ],
+                                                                          ref: {
+                                                                            id: '#PrimaryTabLabel',
+                                                                          },
+                                                                        },
+                                                                      ),
+                                                                    width: size(
+                                                                      'Width',
+                                                                      {
+                                                                        value:
+                                                                          '100%',
+                                                                        configuration:
+                                                                          {
+                                                                            as: 'UNIT',
+                                                                          },
+                                                                      },
+                                                                    ),
+                                                                  },
+                                                                },
+                                                                [
+                                                                  Box(
+                                                                    {
+                                                                      options: {
+                                                                        ...boxOptions,
+                                                                        outerSpacing:
+                                                                          sizes(
+                                                                            'Outer space',
+                                                                            {
+                                                                              value:
+                                                                                [
+                                                                                  '0rem',
+                                                                                  '0rem',
+                                                                                  '0rem',
+                                                                                  'XL',
+                                                                                ],
+                                                                            },
+                                                                          ),
+                                                                        innerSpacing:
+                                                                          sizes(
+                                                                            'Inner space',
+                                                                            {
+                                                                              value:
+                                                                                [
+                                                                                  '0rem',
+                                                                                  '0rem',
+                                                                                  '0rem',
+                                                                                  'XL',
+                                                                                ],
+                                                                            },
+                                                                          ),
+                                                                      },
+                                                                    },
+                                                                    [
+                                                                      TextComp(
+                                                                        {
+                                                                          ref: {
+                                                                            id: '#sectionTitle',
+                                                                          },
+                                                                          options:
+                                                                            {
+                                                                              ...textOptions,
+                                                                              content:
+                                                                                variable(
+                                                                                  'Content',
+                                                                                  {
+                                                                                    value:
+                                                                                      [
+                                                                                        'Basic information',
+                                                                                      ],
+                                                                                    configuration:
+                                                                                      {
+                                                                                        as: 'MULTILINE',
+                                                                                      },
+                                                                                    ref: {
+                                                                                      id: '#sectionTitleContent',
+                                                                                    },
+                                                                                  },
+                                                                                ),
+                                                                              type: font(
+                                                                                'Font',
+                                                                                {
+                                                                                  value:
+                                                                                    [
+                                                                                      'Title5',
+                                                                                    ],
+                                                                                },
+                                                                              ),
+                                                                              fontWeight:
+                                                                                option(
+                                                                                  'CUSTOM',
+                                                                                  {
+                                                                                    label:
+                                                                                      'Font weight',
+                                                                                    value:
+                                                                                      '500',
+                                                                                    configuration:
+                                                                                      {
+                                                                                        as: 'DROPDOWN',
+                                                                                        dataType:
+                                                                                          'string',
+                                                                                        allowedInput:
+                                                                                          [
+                                                                                            {
+                                                                                              name: '100',
+                                                                                              value:
+                                                                                                '100',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '200',
+                                                                                              value:
+                                                                                                '200',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '300',
+                                                                                              value:
+                                                                                                '300',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '400',
+                                                                                              value:
+                                                                                                '400',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '500',
+                                                                                              value:
+                                                                                                '500',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '600',
+                                                                                              value:
+                                                                                                '600',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '700',
+                                                                                              value:
+                                                                                                '700',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '800',
+                                                                                              value:
+                                                                                                '800',
+                                                                                            },
+                                                                                            {
+                                                                                              name: '900',
+                                                                                              value:
+                                                                                                '900',
+                                                                                            },
+                                                                                          ],
+                                                                                      },
+                                                                                  },
+                                                                                ),
+                                                                            },
+                                                                        },
+                                                                        [],
+                                                                      ),
+                                                                      TextComp(
+                                                                        {
+                                                                          ref: {
+                                                                            id: '#sectionDescription',
+                                                                          },
+                                                                          options:
+                                                                            {
+                                                                              ...textOptions,
+                                                                              content:
+                                                                                variable(
+                                                                                  'Content',
+                                                                                  {
+                                                                                    value:
+                                                                                      [
+                                                                                        `We'll start with some basic questions before we dive into details.`,
+                                                                                      ],
+                                                                                    configuration:
+                                                                                      {
+                                                                                        as: 'MULTILINE',
+                                                                                      },
+                                                                                    ref: {
+                                                                                      id: '#sectionDescriptionContent',
+                                                                                    },
+                                                                                  },
+                                                                                ),
+                                                                              type: font(
+                                                                                'Font',
+                                                                                {
+                                                                                  value:
+                                                                                    [
+                                                                                      'Body1',
+                                                                                    ],
+                                                                                },
+                                                                              ),
+                                                                            },
+                                                                        },
+                                                                        [],
+                                                                      ),
+                                                                      Box(
+                                                                        {
+                                                                          label:
+                                                                            'Question drop area',
+                                                                          ref: {
+                                                                            id: '#DropArea',
+                                                                          },
+                                                                          options:
+                                                                            {
+                                                                              ...boxOptions,
+                                                                              innerSpacing:
+                                                                                sizes(
+                                                                                  'Inner space',
+                                                                                  {
+                                                                                    value:
+                                                                                      [
+                                                                                        'L',
+                                                                                        '0rem',
+                                                                                        '0rem',
+                                                                                        '0rem',
+                                                                                      ],
+                                                                                  },
+                                                                                ),
+                                                                              reconfigure:
+                                                                                reconfigure(
+                                                                                  'Reconfigure questions',
+                                                                                  {
+                                                                                    value:
+                                                                                      {
+                                                                                        children:
+                                                                                          questionTypes,
+                                                                                        reconfigureWizardType:
+                                                                                          'ChildrenSelector',
+                                                                                      },
+                                                                                    ref: {
+                                                                                      id: '#QuestionsReconfigure',
+                                                                                    },
+                                                                                  },
+                                                                                ),
+                                                                              addChild:
+                                                                                addChild(
+                                                                                  'Add question',
+                                                                                  {
+                                                                                    value:
+                                                                                      {
+                                                                                        children:
+                                                                                          questionTypes,
+                                                                                        addChildWizardType:
+                                                                                          'ChildSelector',
+                                                                                      },
+                                                                                    ref: {
+                                                                                      id: '#AddQuestion',
+                                                                                    },
+                                                                                  },
+                                                                                ),
+                                                                              emptyPlaceHolderText:
+                                                                                variable(
+                                                                                  'Empty placeholder text',
+                                                                                  {
+                                                                                    value:
+                                                                                      [
+                                                                                        'Drop your questionnaire widgets here',
+                                                                                      ],
+                                                                                  },
+                                                                                ),
+                                                                            },
+                                                                        },
+                                                                        [],
+                                                                      ),
+                                                                    ],
+                                                                  ),
+                                                                ],
+                                                              ),
+                                                            ],
+                                                          ),
+                                                        ],
+                                                      ),
+                                                    ],
+                                                  ),
+                                                ],
+                                              ),
+                                            ],
+                                          ),
+                                        ],
+                                      ),
+                                    ],
+                                  ),
+                                ],
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
+
+export default makePrefab(
+  'Questionnaire',
+  attributes,
+  beforeCreate,
+  prefabStructure,
+);
diff --git a/src/prefabs/pageWithQuestionnaireStart.tsx b/src/prefabs/pageWithQuestionnaireStart.tsx
new file mode 100644
index 000000000..3754878ae
--- /dev/null
+++ b/src/prefabs/pageWithQuestionnaireStart.tsx
@@ -0,0 +1,1073 @@
+import * as React from 'react';
+import {
+  prefab as makePrefab,
+  Icon,
+  option,
+  text,
+  sizes,
+  size,
+  showIf,
+  toggle,
+  BeforeCreateArgs,
+  variable,
+  buttongroup,
+  ThemeColor,
+  color,
+  font,
+  PrefabReference,
+  PrefabComponent,
+  PrefabComponentOption,
+  wrapper,
+  linked,
+} from '@betty-blocks/component-sdk';
+import {
+  Box as prefabBox,
+  boxOptions,
+  Text as prefabText,
+  textOptions,
+  Column,
+  columnOptions,
+  Grid,
+  gridOptions,
+  Row,
+  rowOptions,
+  DataContainer,
+  dataContainerOptions,
+  Media,
+  mediaOptions,
+  ActionJSButton,
+  actionJSButtonOptions,
+  Divider,
+  dividerOptions,
+} from './structures';
+import {
+  Property,
+  PropertyStateProps,
+  Properties,
+  IdPropertyProps,
+  ModelProps,
+  ModelQuery,
+} from './types';
+
+const attrs = {
+  name: 'Questionnaire Startpage',
+  icon: Icon.SubmitButtonIcon,
+  type: 'page',
+  description:
+    "Use this page as the start of your questionnaire flow. This template is best used in combination with the 'Questionnaire' template.",
+  detail:
+    "Use this page as the start of your questionnaire flow. This template is best used in combination with the 'Questionnaire' template.",
+  previewUrl: 'https://preview.betty.app/questionnaire-startpage',
+  previewImage:
+    'https://assets.bettyblocks.com/63b1c6ccc6874e0796e5cc5b7e41b3da_assets/files/b520d74dff324c5f8e06b319d02c4c6e',
+  category: 'FORMV2',
+};
+
+const beforeCreate = ({
+  save,
+  close,
+  prefab,
+  components: {
+    Header,
+    Content,
+    ModelSelector,
+    PropertySelector,
+    Footer,
+    Field,
+    Text,
+  },
+  helpers: { useModelQuery, setOption, prepareAction, createUuid },
+}: BeforeCreateArgs) => {
+  const [model, setModel] = React.useState<ModelProps>();
+  const [modelId, setModelId] = React.useState('');
+  const [showModelValidation, setShowModelValidation] = React.useState(false);
+  const [idProperty, setIdProperty] = React.useState<IdPropertyProps>();
+  const [titleProperty, setTitleProperty] = React.useState<PropertyStateProps>({
+    id: '',
+  });
+  const [showTitleValidation, setShowTitleValidation] = React.useState(false);
+  const [descriptionProperty, setDescriptionProperty] =
+    React.useState<PropertyStateProps>({
+      id: '',
+    });
+  const [showDescriptionValidation, setShowDescriptionValidation] =
+    React.useState(false);
+  const { data } = useModelQuery({
+    variables: { id: modelId },
+    skip: !modelId,
+  });
+
+  const createActionId = createUuid();
+
+  function treeSearch(
+    dirName: string,
+    array: PrefabReference[],
+  ): PrefabComponent | undefined {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < array.length; i++) {
+      const q = array[i];
+      if (q.type === 'COMPONENT') {
+        if (q.ref && q.ref.id === dirName) {
+          return q;
+        }
+      }
+      if (q.type !== 'PARTIAL' && q.descendants && q.descendants.length) {
+        const result = treeSearch(dirName, q.descendants);
+        if (result) return result;
+      }
+    }
+    return undefined;
+  }
+
+  const enrichVarObj = (obj: any) => {
+    const returnObject = obj;
+    if (data && data.model) {
+      const property = data.model.properties.find(
+        (prop: any) => prop.id === obj.id[0],
+      );
+      if (property) {
+        returnObject.name = `{{ ${data.model.name}.${property.name} }}`;
+      }
+    }
+    return returnObject;
+  };
+
+  useModelQuery({
+    variables: { id: modelId },
+    onCompleted: ({ model: dataModel }: ModelQuery) => {
+      setModel(dataModel);
+      setIdProperty(dataModel.properties.find(({ name }) => name === 'id'));
+    },
+  });
+
+  return (
+    <>
+      <Header
+        onClose={close}
+        title="Configure Questionnaire initialization page"
+      />
+      <Content>
+        <Field
+          label="Select a model for saving the questionnaire data"
+          error={
+            showModelValidation && (
+              <Text color="#e82600">Selecting a model is required</Text>
+            )
+          }
+        >
+          <ModelSelector
+            onChange={(value: string) => {
+              setShowModelValidation(false);
+              setModelId(value);
+              setTitleProperty({ id: '' });
+              setDescriptionProperty({ id: '' });
+            }}
+            value={modelId}
+          />
+        </Field>
+        <Field
+          label="Title property"
+          error={
+            showTitleValidation && (
+              <Text color="#e82600">Selecting a title is required</Text>
+            )
+          }
+        >
+          <PropertySelector
+            modelId={modelId}
+            onChange={(value: Property) => {
+              setTitleProperty(value);
+              setShowTitleValidation(false);
+            }}
+            value={titleProperty}
+            disabled={!modelId}
+          />
+        </Field>
+        <Field
+          label="Description property"
+          error={
+            showDescriptionValidation && (
+              <Text color="#e82600">Selecting a description is required</Text>
+            )
+          }
+        >
+          <PropertySelector
+            modelId={modelId}
+            onChange={(value: Property) => {
+              setDescriptionProperty(value);
+              setShowDescriptionValidation(false);
+            }}
+            value={descriptionProperty}
+            disabled={!modelId}
+          />
+        </Field>
+      </Content>
+      <Footer
+        onSave={async () => {
+          if (!modelId) {
+            setShowModelValidation(true);
+            return;
+          }
+          if (!titleProperty.id) {
+            setShowTitleValidation(true);
+            return;
+          }
+          if (!descriptionProperty.id) {
+            setShowDescriptionValidation(true);
+            return;
+          }
+          const newPrefab = { ...prefab };
+
+          const datacontainer = treeSearch(
+            '#datacontainer',
+            newPrefab.structure,
+          );
+          if (!datacontainer) throw new Error('No data container found');
+          setOption(datacontainer, 'model', (opts: PrefabComponentOption) => ({
+            ...opts,
+            value: modelId,
+          }));
+
+          const titleText = treeSearch('#titleText', newPrefab.structure);
+          if (!titleText) throw new Error('No questionnaire title found');
+          setOption(titleText, 'content', (opts: PrefabComponentOption) => ({
+            ...opts,
+            value: [enrichVarObj(titleProperty)],
+          }));
+          const descriptionText = treeSearch(
+            '#descriptionText',
+            newPrefab.structure,
+          );
+          if (!descriptionText)
+            throw new Error('No questionnaire description found');
+          setOption(
+            descriptionText,
+            'content',
+            (opts: PrefabComponentOption) => ({
+              ...opts,
+              value: [enrichVarObj(descriptionProperty)],
+            }),
+          );
+
+          if (idProperty && model) {
+            const createAction = treeSearch(
+              '#createAction',
+              newPrefab.structure,
+            );
+            if (!createAction) throw new Error('No action button found');
+            createAction.id = createActionId;
+            const properties: Properties[] = [];
+
+            const result = await prepareAction(
+              createActionId,
+              idProperty,
+              properties,
+              'create',
+              undefined,
+              `Start Questionnaire - Create ${model.label}`,
+              'public',
+            );
+            setOption(
+              createAction,
+              'actionId',
+              (opt: PrefabComponentOption) => ({
+                ...opt,
+                value: result.action.actionId,
+                configuration: { disabled: true },
+                ref: { id: '#createActionOption' },
+              }),
+            );
+            setOption(createAction, 'model', (opt: PrefabComponentOption) => ({
+              ...opt,
+              value: modelId,
+              configuration: {
+                disabled: true,
+              },
+            }));
+          }
+
+          save(newPrefab);
+        }}
+      />
+    </>
+  );
+};
+
+export default makePrefab('Questionnaire Startpage', attrs, beforeCreate, [
+  wrapper(
+    {
+      label: 'Start Questionnaire',
+      options: {
+        title: linked({
+          label: 'Questionnaire title',
+          value: {
+            ref: {
+              componentId: '#titleText',
+              optionId: '#questionnaireTitle',
+            },
+          },
+        }),
+        description: linked({
+          label: 'Questionnaire description',
+          value: {
+            ref: {
+              componentId: '#descriptionText',
+              optionId: '#questionnaireDescription',
+            },
+          },
+        }),
+        createAction: linked({
+          label: 'Start questionnaire action',
+          value: {
+            ref: {
+              componentId: '#createAction',
+              optionId: '#createActionOption',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Row(
+        {
+          options: {
+            ...rowOptions,
+            maxRowWidth: option('CUSTOM', {
+              label: 'Width',
+              value: 'Full',
+              configuration: {
+                as: 'BUTTONGROUP',
+                dataType: 'string',
+                allowedInput: [
+                  { name: 'S', value: 'S' },
+                  { name: 'M', value: 'M' },
+                  { name: 'L', value: 'L' },
+                  { name: 'XL', value: 'XL' },
+                  { name: 'Full', value: 'Full' },
+                ],
+              },
+            }),
+            rowHeight: text('Height', {
+              value: '100%',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+          },
+        },
+        [
+          Column(
+            {
+              options: {
+                ...columnOptions,
+                columnHeight: text('Height', {
+                  value: '100%',
+                  configuration: {
+                    as: 'UNIT',
+                  },
+                }),
+                innerSpacing: sizes('Inner space', {
+                  value: ['0rem', '0rem', '0rem', '0rem'],
+                }),
+              },
+            },
+            [
+              prefabBox(
+                {
+                  options: {
+                    ...boxOptions,
+                    innerSpacing: sizes('Inner space', {
+                      value: ['0rem', '0rem', '0rem', '0rem'],
+                    }),
+                    stretch: toggle('Stretch (when in flex container)', {
+                      value: true,
+                    }),
+                    height: size('Height', {
+                      value: '100vh',
+                      configuration: {
+                        as: 'UNIT',
+                      },
+                    }),
+                    backgroundUrl: variable('Background url', {
+                      value: [
+                        'https://assets.bettyblocks.com/63b1c6ccc6874e0796e5cc5b7e41b3da_assets/files/7da5d896b3194eddb22f92cf89781ab3',
+                      ],
+                    }),
+                    backgroundSize: buttongroup(
+                      'Background size',
+                      [
+                        ['Initial', 'initial'],
+                        ['Contain', 'contain'],
+                        ['Cover', 'cover'],
+                      ],
+                      {
+                        value: 'cover',
+                        configuration: {
+                          dataType: 'string',
+                        },
+                      },
+                    ),
+                  },
+                },
+                [
+                  Row(
+                    {
+                      options: {
+                        ...rowOptions,
+                        maxRowWidth: option('CUSTOM', {
+                          label: 'Width',
+                          value: 'Full',
+                          configuration: {
+                            as: 'BUTTONGROUP',
+                            dataType: 'string',
+                            allowedInput: [
+                              { name: 'S', value: 'S' },
+                              { name: 'M', value: 'M' },
+                              { name: 'L', value: 'L' },
+                              { name: 'XL', value: 'XL' },
+                              { name: 'Full', value: 'Full' },
+                            ],
+                          },
+                        }),
+                        rowHeight: text('Height', {
+                          value: '100%',
+                          configuration: {
+                            as: 'UNIT',
+                          },
+                        }),
+                      },
+                    },
+                    [
+                      Column(
+                        {
+                          options: {
+                            ...columnOptions,
+                            columnWidth: option('CUSTOM', {
+                              label: 'Column width',
+                              value: '4',
+                              configuration: {
+                                as: 'DROPDOWN',
+                                dataType: 'string',
+                                allowedInput: [
+                                  {
+                                    name: 'Fit content',
+                                    value: 'fitContent',
+                                  },
+                                  { name: 'Flexible', value: 'flexible' },
+                                  { name: 'Hidden', value: 'hidden' },
+                                  { name: '1', value: '1' },
+                                  { name: '2', value: '2' },
+                                  { name: '3', value: '3' },
+                                  { name: '4', value: '4' },
+                                  { name: '5', value: '5' },
+                                  { name: '6', value: '6' },
+                                  { name: '7', value: '7' },
+                                  { name: '8', value: '8' },
+                                  { name: '9', value: '9' },
+                                  { name: '10', value: '10' },
+                                  { name: '11', value: '11' },
+                                  { name: '12', value: '12' },
+                                ],
+                              },
+                            }),
+                            columnWidthTabletLandscape: option('CUSTOM', {
+                              label: 'Column width (tablet landscape)',
+                              value: '4',
+                              configuration: {
+                                as: 'DROPDOWN',
+                                dataType: 'string',
+                                allowedInput: [
+                                  {
+                                    name: 'Fit content',
+                                    value: 'fitContent',
+                                  },
+                                  { name: 'Flexible', value: 'flexible' },
+                                  { name: 'Hidden', value: 'hidden' },
+                                  { name: '1', value: '1' },
+                                  { name: '2', value: '2' },
+                                  { name: '3', value: '3' },
+                                  { name: '4', value: '4' },
+                                  { name: '5', value: '5' },
+                                  { name: '6', value: '6' },
+                                  { name: '7', value: '7' },
+                                  { name: '8', value: '8' },
+                                  { name: '9', value: '9' },
+                                  { name: '10', value: '10' },
+                                  { name: '11', value: '11' },
+                                  { name: '12', value: '12' },
+                                ],
+                              },
+                            }),
+                            columnWidthTabletPortrait: option('CUSTOM', {
+                              value: '6',
+                              label: 'Column width (tablet portrait)',
+                              configuration: {
+                                as: 'DROPDOWN',
+                                dataType: 'string',
+                                allowedInput: [
+                                  {
+                                    name: 'Fit content',
+                                    value: 'fitContent',
+                                  },
+                                  { name: 'Flexible', value: 'flexible' },
+                                  { name: 'Hidden', value: 'hidden' },
+                                  { name: '1', value: '1' },
+                                  { name: '2', value: '2' },
+                                  { name: '3', value: '3' },
+                                  { name: '4', value: '4' },
+                                  { name: '5', value: '5' },
+                                  { name: '6', value: '6' },
+                                  { name: '7', value: '7' },
+                                  { name: '8', value: '8' },
+                                  { name: '9', value: '9' },
+                                  { name: '10', value: '10' },
+                                  { name: '11', value: '11' },
+                                  { name: '12', value: '12' },
+                                ],
+                              },
+                            }),
+                            columnWidthMobile: option('CUSTOM', {
+                              value: '12',
+                              label: 'Column width (mobile)',
+                              configuration: {
+                                as: 'DROPDOWN',
+                                dataType: 'string',
+                                allowedInput: [
+                                  {
+                                    name: 'Fit content',
+                                    value: 'fitContent',
+                                  },
+                                  { name: 'Flexible', value: 'flexible' },
+                                  { name: 'Hidden', value: 'hidden' },
+                                  { name: '1', value: '1' },
+                                  { name: '2', value: '2' },
+                                  { name: '3', value: '3' },
+                                  { name: '4', value: '4' },
+                                  { name: '5', value: '5' },
+                                  { name: '6', value: '6' },
+                                  { name: '7', value: '7' },
+                                  { name: '8', value: '8' },
+                                  { name: '9', value: '9' },
+                                  { name: '10', value: '10' },
+                                  { name: '11', value: '11' },
+                                  { name: '12', value: '12' },
+                                ],
+                              },
+                            }),
+                            backgroundColor: color('Background color', {
+                              value: ThemeColor.WHITE,
+                            }),
+                            verticalAlignment: option('CUSTOM', {
+                              label: 'Vertical Alignment',
+                              value: 'center',
+                              configuration: {
+                                as: 'BUTTONGROUP',
+                                dataType: 'string',
+                                allowedInput: [
+                                  { name: 'None', value: 'inherit' },
+                                  { name: 'Top', value: 'flex-start' },
+                                  { name: 'Center', value: 'center' },
+                                  { name: 'Bottom', value: 'flex-end' },
+                                ],
+                              },
+                            }),
+                            innerSpacing: sizes('Inner space', {
+                              value: ['0rem', '0rem', '0rem', '0rem'],
+                            }),
+                          },
+                        },
+                        [
+                          Grid(
+                            {
+                              options: {
+                                ...gridOptions,
+                                height: size('Height', {
+                                  value: '100%',
+                                  configuration: {
+                                    as: 'UNIT',
+                                  },
+                                }),
+                              },
+                            },
+                            [
+                              Grid(
+                                {
+                                  options: {
+                                    ...gridOptions,
+                                    direction: option('CUSTOM', {
+                                      value: 'column',
+                                      label: 'Direction',
+                                      configuration: {
+                                        as: 'BUTTONGROUP',
+                                        dataType: 'string',
+                                        allowedInput: [
+                                          { name: 'Horizontal', value: 'row' },
+                                          { name: 'Vertical', value: 'column' },
+                                        ],
+                                        condition: showIf(
+                                          'type',
+                                          'EQ',
+                                          'container',
+                                        ),
+                                      },
+                                    }),
+                                  },
+                                },
+                                [
+                                  prefabBox(
+                                    {
+                                      options: {
+                                        ...boxOptions,
+                                        valignment: buttongroup(
+                                          'Vertical alignment',
+                                          [
+                                            ['None', 'none'],
+                                            ['Top', 'flex-start'],
+                                            ['Center', 'center'],
+                                            ['Bottom', 'flex-end'],
+                                          ],
+                                          {
+                                            value: 'center',
+                                            configuration: {
+                                              dataType: 'string',
+                                            },
+                                          },
+                                        ),
+                                        stretch: toggle(
+                                          'Stretch (when in flex container)',
+                                          {
+                                            value: true,
+                                          },
+                                        ),
+                                        innerSpacing: sizes('Inner space', {
+                                          value: ['0rem', 'XL', '0rem', 'XL'],
+                                        }),
+                                      },
+                                    },
+                                    [
+                                      Row(
+                                        {
+                                          options: {
+                                            ...rowOptions,
+                                            maxRowWidth: option('CUSTOM', {
+                                              label: 'Width',
+                                              value: 'Full',
+                                              configuration: {
+                                                as: 'BUTTONGROUP',
+                                                dataType: 'string',
+                                                allowedInput: [
+                                                  { name: 'S', value: 'S' },
+                                                  { name: 'M', value: 'M' },
+                                                  { name: 'L', value: 'L' },
+                                                  { name: 'XL', value: 'XL' },
+                                                  {
+                                                    name: 'Full',
+                                                    value: 'Full',
+                                                  },
+                                                ],
+                                              },
+                                            }),
+                                          },
+                                        },
+                                        [
+                                          Column(
+                                            {
+                                              options: {
+                                                ...columnOptions,
+                                                verticalAlignment: option(
+                                                  'CUSTOM',
+                                                  {
+                                                    label: 'Vertical Alignment',
+                                                    value: 'center',
+                                                    configuration: {
+                                                      as: 'BUTTONGROUP',
+                                                      dataType: 'string',
+                                                      allowedInput: [
+                                                        {
+                                                          name: 'None',
+                                                          value: 'inherit',
+                                                        },
+                                                        {
+                                                          name: 'Top',
+                                                          value: 'flex-start',
+                                                        },
+                                                        {
+                                                          name: 'Center',
+                                                          value: 'center',
+                                                        },
+                                                        {
+                                                          name: 'Bottom',
+                                                          value: 'flex-end',
+                                                        },
+                                                      ],
+                                                    },
+                                                  },
+                                                ),
+                                                innerSpacing: sizes(
+                                                  'Inner space',
+                                                  {
+                                                    value: [
+                                                      '0rem',
+                                                      '0rem',
+                                                      '0rem',
+                                                      '0rem',
+                                                    ],
+                                                  },
+                                                ),
+                                              },
+                                            },
+                                            [
+                                              Media({
+                                                options: {
+                                                  ...mediaOptions,
+                                                  type: option('CUSTOM', {
+                                                    label: 'Media type',
+                                                    value: 'url',
+                                                    configuration: {
+                                                      as: 'BUTTONGROUP',
+                                                      dataType: 'string',
+                                                      allowedInput: [
+                                                        {
+                                                          name: 'Image',
+                                                          value: 'img',
+                                                        },
+                                                        {
+                                                          name: 'Data/URL',
+                                                          value: 'url',
+                                                        },
+                                                        {
+                                                          name: 'Video',
+                                                          value: 'video',
+                                                        },
+                                                        {
+                                                          name: 'I-frame',
+                                                          value: 'iframe',
+                                                        },
+                                                      ],
+                                                    },
+                                                  }),
+                                                  urlFileSource: variable(
+                                                    'Source',
+                                                    {
+                                                      value: [
+                                                        'https://assets.bettyblocks.com/373317d12bf04d5496079adc02aab34a_assets/files/Your_Logo_-_B.svg',
+                                                      ],
+                                                      configuration: {
+                                                        placeholder:
+                                                          'Starts with https:// or http://',
+                                                        as: 'MULTILINE',
+                                                        condition: showIf(
+                                                          'type',
+                                                          'EQ',
+                                                          'url',
+                                                        ),
+                                                      },
+                                                    },
+                                                  ),
+                                                  width: size('Width', {
+                                                    value: '',
+                                                    configuration: {
+                                                      as: 'UNIT',
+                                                    },
+                                                  }),
+                                                  outerSpacing: sizes(
+                                                    'Outer space',
+                                                    {
+                                                      value: [
+                                                        '0rem',
+                                                        '0rem',
+                                                        'XL',
+                                                        '0rem',
+                                                      ],
+                                                    },
+                                                  ),
+                                                },
+                                              }),
+                                              DataContainer(
+                                                {
+                                                  ref: {
+                                                    id: '#datacontainer',
+                                                  },
+                                                  options: {
+                                                    ...dataContainerOptions,
+                                                    loadingType: option(
+                                                      'CUSTOM',
+                                                      {
+                                                        value: 'showChildren',
+                                                        label: 'Show on load',
+                                                        configuration: {
+                                                          as: 'BUTTONGROUP',
+                                                          dataType: 'string',
+                                                          allowedInput: [
+                                                            {
+                                                              name: 'Message',
+                                                              value: 'default',
+                                                            },
+                                                            {
+                                                              name: 'Content',
+                                                              value:
+                                                                'showChildren',
+                                                            },
+                                                          ],
+                                                        },
+                                                      },
+                                                    ),
+                                                  },
+                                                },
+                                                [
+                                                  prefabText({
+                                                    ref: {
+                                                      id: '#titleText',
+                                                    },
+                                                    options: {
+                                                      ...textOptions,
+                                                      content: variable(
+                                                        'Content',
+                                                        {
+                                                          ref: {
+                                                            id: '#questionnaireTitle',
+                                                          },
+                                                          value: [''],
+                                                          configuration: {
+                                                            as: 'MULTILINE',
+                                                          },
+                                                        },
+                                                      ),
+                                                      type: font('Font', {
+                                                        value: ['Title4'],
+                                                      }),
+                                                      outerSpacing: sizes(
+                                                        'Outer space',
+                                                        {
+                                                          value: [
+                                                            'L',
+                                                            '0rem',
+                                                            '0rem',
+                                                            '0rem',
+                                                          ],
+                                                        },
+                                                      ),
+                                                    },
+                                                  }),
+                                                  prefabText({
+                                                    ref: {
+                                                      id: '#descriptionText',
+                                                    },
+                                                    options: {
+                                                      ...textOptions,
+                                                      content: variable(
+                                                        'Content',
+                                                        {
+                                                          ref: {
+                                                            id: '#questionnaireDescription',
+                                                          },
+                                                          value: [''],
+                                                          configuration: {
+                                                            as: 'MULTILINE',
+                                                          },
+                                                        },
+                                                      ),
+                                                      type: font('Font', {
+                                                        value: ['Body1'],
+                                                      }),
+                                                      outerSpacing: sizes(
+                                                        'Outer space',
+                                                        {
+                                                          value: [
+                                                            'M',
+                                                            '0rem',
+                                                            '0rem',
+                                                            '0rem',
+                                                          ],
+                                                        },
+                                                      ),
+                                                    },
+                                                  }),
+                                                  prefabBox(
+                                                    {
+                                                      options: {
+                                                        ...boxOptions,
+                                                        innerSpacing: sizes(
+                                                          'Inner space',
+                                                          {
+                                                            value: [
+                                                              '0rem',
+                                                              '0rem',
+                                                              '0rem',
+                                                              '0rem',
+                                                            ],
+                                                          },
+                                                        ),
+                                                      },
+                                                    },
+                                                    [
+                                                      ActionJSButton({
+                                                        ref: {
+                                                          id: '#createAction',
+                                                        },
+                                                        style: {
+                                                          overwrite: {
+                                                            backgroundColor: {
+                                                              type: 'THEME_COLOR',
+                                                              value: 'primary',
+                                                            },
+                                                            borderColor: {
+                                                              type: 'THEME_COLOR',
+                                                              value: 'primary',
+                                                            },
+                                                            borderRadius: [
+                                                              '0.25rem',
+                                                            ],
+                                                            borderStyle:
+                                                              'solid',
+                                                            borderWidth: [
+                                                              '0.0625rem',
+                                                            ],
+                                                            boxShadow: 'none',
+                                                            color: {
+                                                              type: 'THEME_COLOR',
+                                                              value: 'white',
+                                                            },
+                                                            fontFamily:
+                                                              'Roboto',
+                                                            fontSize:
+                                                              '0.875rem',
+                                                            fontStyle: 'none',
+                                                            fontWeight: '400',
+                                                            padding: [
+                                                              '0.625rem',
+                                                              '1.3125rem',
+                                                            ],
+                                                            textDecoration:
+                                                              'none',
+                                                            textTransform:
+                                                              'none',
+                                                          },
+                                                        },
+                                                        options: {
+                                                          ...actionJSButtonOptions,
+                                                          actionId: option(
+                                                            'ACTION_JS',
+                                                            {
+                                                              label: 'Action',
+                                                              value: '',
+                                                              configuration: {
+                                                                disabled: true,
+                                                              },
+                                                            },
+                                                          ),
+                                                          buttonText: variable(
+                                                            'Button text',
+                                                            {
+                                                              value: [
+                                                                'Start questionnaire',
+                                                              ],
+                                                            },
+                                                          ),
+                                                          outerSpacing: sizes(
+                                                            'Outer space',
+                                                            {
+                                                              value: [
+                                                                'M',
+                                                                '0rem',
+                                                                '0rem',
+                                                                '0rem',
+                                                              ],
+                                                            },
+                                                          ),
+                                                        },
+                                                      }),
+                                                    ],
+                                                  ),
+                                                ],
+                                              ),
+                                            ],
+                                          ),
+                                        ],
+                                      ),
+                                    ],
+                                  ),
+                                  prefabBox(
+                                    {
+                                      options: {
+                                        ...boxOptions,
+                                        innerSpacing: sizes('Inner space', {
+                                          value: [
+                                            '0rem',
+                                            '0rem',
+                                            '0rem',
+                                            '0rem',
+                                          ],
+                                        }),
+                                      },
+                                    },
+                                    [
+                                      Divider({
+                                        options: {
+                                          ...dividerOptions,
+                                          outerSpacing: sizes('Outer space', {
+                                            value: [
+                                              '0rem',
+                                              '0rem',
+                                              '0rem',
+                                              '0rem',
+                                            ],
+                                          }),
+                                        },
+                                      }),
+                                      prefabText({
+                                        options: {
+                                          ...textOptions,
+                                          content: variable('Content', {
+                                            value: ['Powered by Betty Blocks'],
+                                            configuration: { as: 'MULTILINE' },
+                                          }),
+                                          type: font('Font', {
+                                            value: ['Body1'],
+                                          }),
+                                          textAlignment: option('CUSTOM', {
+                                            label: 'Text Alignment',
+                                            value: 'center',
+                                            configuration: {
+                                              as: 'BUTTONGROUP',
+                                              dataType: 'string',
+                                              allowedInput: [
+                                                { name: 'Left', value: 'left' },
+                                                {
+                                                  name: 'Center',
+                                                  value: 'center',
+                                                },
+                                                {
+                                                  name: 'Right',
+                                                  value: 'right',
+                                                },
+                                              ],
+                                            },
+                                          }),
+                                          outerSpacing: sizes('Outer space', {
+                                            value: ['L', '0rem', 'L', '0rem'],
+                                          }),
+                                          textColor: color('Text color', {
+                                            value: ThemeColor.LIGHT,
+                                          }),
+                                        },
+                                      }),
+                                    ],
+                                  ),
+                                ],
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+]);
diff --git a/src/prefabs/questionnaire/checkboxWidget.ts b/src/prefabs/questionnaire/checkboxWidget.ts
new file mode 100644
index 000000000..1a24d24d7
--- /dev/null
+++ b/src/prefabs/questionnaire/checkboxWidget.ts
@@ -0,0 +1,241 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  color,
+  component,
+  displayLogic,
+  font,
+  linked,
+  option,
+  property,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+} from '@betty-blocks/component-sdk';
+import {
+  Box,
+  CheckboxInput,
+  Text,
+  boxOptions,
+  checkboxInputOptions,
+  textOptions,
+} from '../structures';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+
+export const checkboxWidget = [
+  wrapper(
+    {
+      label: 'Checkbox question',
+      optionCategories: [],
+      options: {
+        property: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#checkboxInput',
+              optionId: '#checkboxInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#checkboxInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        questionText: linked({
+          label: 'Question text',
+          value: {
+            ref: {
+              componentId: '#questionText',
+              optionId: '#questionTextContent',
+            },
+          },
+        }),
+        questionContent: linked({
+          label: 'Checkbox label',
+          value: {
+            ref: {
+              componentId: '#checkboxInput',
+              optionId: '#checkboxInputLabel',
+            },
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#checkboxInput',
+              optionId: '#checkboxInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: {
+            id: '#questionBox',
+          },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: {
+                id: '#questionBoxOuterSpacing',
+              },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#checkboxQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              Text(
+                {
+                  ref: {
+                    id: '#questionText',
+                  },
+                  options: {
+                    ...textOptions,
+                    content: variable('Question text', {
+                      value: [''],
+                      configuration: {
+                        as: 'MULTILINE',
+                        allowPropertyName: true,
+                      },
+                      ref: {
+                        id: '#questionTextContent',
+                      },
+                      optionRef: {
+                        sourceId: '#checkboxInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                        ],
+                      },
+                    }),
+                    type: font('Font', { value: ['Body1'] }),
+                  },
+                },
+                [],
+              ),
+              CheckboxInput(
+                {
+                  ref: { id: '#checkboxInput' },
+                  options: {
+                    ...checkboxInputOptions,
+                    property: property('Question', {
+                      value: '',
+                      ref: {
+                        id: '#checkboxInputProperty',
+                      },
+                      configuration: {
+                        allowedKinds: ['BOOLEAN', 'BOOLEAN_EXPRESSION'],
+                        createProperty: {
+                          type: CreatePropertyKind.BOOLEAN,
+                        },
+                        disabled: true,
+                      },
+                      showInAddChild: true,
+                    }),
+                    label: variable('Checkbox label', {
+                      value: [''],
+                      ref: { id: '#checkboxInputLabel' },
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                      showInAddChild: true,
+                    }),
+                    value: variable('Value', {
+                      value: [],
+                      optionRef: {
+                        sourceId: '#checkboxInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY' },
+                        ],
+                      },
+                    }),
+                    labelColor: color('Label color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    required: toggle('Required', {
+                      ref: {
+                        id: '#checkboxInputRequired',
+                      },
+                    }),
+                  },
+                },
+                [],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
diff --git a/src/prefabs/questionnaire/dateWidget.ts b/src/prefabs/questionnaire/dateWidget.ts
new file mode 100644
index 000000000..b1e1ec12f
--- /dev/null
+++ b/src/prefabs/questionnaire/dateWidget.ts
@@ -0,0 +1,237 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  buttongroup,
+  color,
+  component,
+  displayLogic,
+  linked,
+  option,
+  property,
+  showIf,
+  size,
+  sizes,
+  text,
+  toggle,
+  variable,
+  wrapper,
+} from '@betty-blocks/component-sdk';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+import {
+  Box,
+  DateTimePicker,
+  boxOptions,
+  dateTimePickerOptions,
+} from '../structures';
+
+export const dateWidget = [
+  wrapper(
+    {
+      label: 'Date question',
+      optionCategories: [],
+      options: {
+        question: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#dateInput',
+              optionId: '#dateInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#dateInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        label: linked({
+          label: 'Label',
+          value: {
+            ref: { componentId: '#dateInput', optionId: '#dateInputLabel' },
+          },
+        }),
+        placeholder: linked({
+          label: 'Placeholder',
+          value: {
+            ref: {
+              componentId: '#dateInput',
+              optionId: '#dateInputPlaceholder',
+            },
+          },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#dateInput',
+              optionId: '#dateInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: {
+            id: '#questionBox',
+          },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: {
+                id: '#questionBoxOuterSpacing',
+              },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#dateQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              DateTimePicker(
+                {
+                  ref: { id: '#dateInput' },
+                  label: 'Date picker',
+                  options: {
+                    ...dateTimePickerOptions,
+                    property: property('Question', {
+                      value: '',
+                      ref: {
+                        id: '#dateInputProperty',
+                      },
+                      configuration: {
+                        allowedKinds: ['DATE'],
+                        createProperty: {
+                          type: CreatePropertyKind.DATE,
+                        },
+                        disabled: true,
+                        allowFormatting: false,
+                      },
+                      showInAddChild: true,
+                    }),
+                    label: variable('Label', {
+                      value: [''],
+                      ref: { id: '#dateInputLabel' },
+                      optionRef: {
+                        sourceId: '#dateInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                        ],
+                      },
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    value: variable('Value', {
+                      value: [''],
+                      optionRef: {
+                        sourceId: '#dateInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY' },
+                        ],
+                      },
+                    }),
+                    floatLabel: toggle('Place label above input', {
+                      value: true,
+                    }),
+                    labelColor: color('Label color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    placeholder: variable('Placeholder', {
+                      ref: { id: '#dateInputPlaceholder' },
+                      value: [''],
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    required: toggle('Required', {
+                      ref: { id: '#dateInputRequired' },
+                    }),
+                    margin: buttongroup(
+                      'Margin',
+                      [
+                        ['None', 'none'],
+                        ['Dense', 'dense'],
+                        ['Normal', 'normal'],
+                      ],
+                      { value: 'none' },
+                    ),
+                    type: text('Type', {
+                      value: 'date',
+                      configuration: {
+                        condition: showIf('type', 'EQ', false),
+                      },
+                    }),
+                  },
+                },
+                [],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
diff --git a/src/prefabs/questionnaire/dropdownWidget.ts b/src/prefabs/questionnaire/dropdownWidget.ts
new file mode 100644
index 000000000..9fa691e84
--- /dev/null
+++ b/src/prefabs/questionnaire/dropdownWidget.ts
@@ -0,0 +1,255 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  buttongroup,
+  color,
+  component,
+  displayLogic,
+  linked,
+  option,
+  property,
+  showIf,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+} from '@betty-blocks/component-sdk';
+import {
+  Box,
+  SelectInput,
+  boxOptions,
+  selectInputOptions,
+} from '../structures';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+
+export const dropdownWidget = [
+  wrapper(
+    {
+      label: 'Dropdown question',
+      optionCategories: [],
+      options: {
+        property: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#dropdownInput',
+              optionId: '#dropdownInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#dropdownInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        label: linked({
+          label: 'Label',
+          value: {
+            ref: {
+              componentId: '#dropdownInput',
+              optionId: '#dropdownInputLabel',
+            },
+          },
+        }),
+        optionLabel: linked({
+          label: 'Label for options',
+          value: {
+            ref: {
+              componentId: '#dropdownInput',
+              optionId: '#dropdownInputLabelProperty',
+            },
+          },
+          // configuration: {
+          //   showOnDrop: true,
+          // },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#dropdownInput',
+              optionId: '#dropdownInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: { id: '#questionBox' },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: { id: '#questionBoxOuterSpacing' },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#dropdownQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              SelectInput({
+                ref: { id: '#dropdownInput' },
+                options: {
+                  ...selectInputOptions,
+                  property: property('Question', {
+                    value: '',
+                    ref: {
+                      id: '#dropdownInputProperty',
+                    },
+                    configuration: {
+                      allowedKinds: ['OBJECT'],
+                      createProperty: {
+                        type: CreatePropertyKind.OBJECT,
+                      },
+                      disabled: true,
+                      manageObjectValues: {
+                        selectableObjectKey: false,
+                        buttonLabel: 'Manage answer options',
+                        label: 'Manage answer options',
+                        value: [],
+                      },
+                    },
+                    showInAddChild: true,
+                  }),
+                  label: variable('Label', {
+                    value: [''],
+                    ref: { id: '#dropdownInputLabel' },
+                    optionRef: {
+                      sourceId: '#dropdownInputPropertyRef',
+                      inherit: [
+                        { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                      ],
+                    },
+                    configuration: {
+                      allowPropertyName: true,
+                    },
+                  }),
+                  labelProperty: property('Label for options', {
+                    value: '',
+                    ref: { id: '#dropdownInputLabelProperty' },
+                    optionRef: {
+                      sourceId: '#dropdownInputPropertyRef',
+                      inherit: {
+                        id: '$id',
+                        type: 'PROPERTY',
+                        useKey: 'answer',
+                      },
+                    },
+                    configuration: {
+                      allowedKinds: ['OBJECT'],
+                    },
+                  }),
+                  value: variable('Value', {
+                    value: [''],
+                    optionRef: {
+                      sourceId: '#dropdownInputPropertyRef',
+                      inherit: [{ name: '$name', id: '$id', type: 'PROPERTY' }],
+                    },
+                  }),
+                  floatLabel: toggle('Place label above input', {
+                    value: true,
+                  }),
+                  labelColor: color('Label color', {
+                    value: ThemeColor.BLACK,
+                  }),
+                  optionType: buttongroup(
+                    'Option type',
+                    [
+                      ['Model', 'model'],
+                      ['Property', 'property'],
+                      ['Variable', 'variable'],
+                    ],
+                    {
+                      value: 'property',
+                      configuration: {
+                        condition: showIf('optionType', 'EQ', 'never'),
+                      },
+                    },
+                  ),
+                  required: toggle('Required', {
+                    ref: {
+                      id: '#dropdownInputRequired',
+                    },
+                  }),
+                  margin: buttongroup(
+                    'Margin',
+                    [
+                      ['None', 'none'],
+                      ['Dense', 'dense'],
+                      ['Normal', 'normal'],
+                    ],
+                    { value: 'none' },
+                  ),
+                },
+              }),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
diff --git a/src/prefabs/questionnaire/index.ts b/src/prefabs/questionnaire/index.ts
new file mode 100644
index 000000000..6ec64c44f
--- /dev/null
+++ b/src/prefabs/questionnaire/index.ts
@@ -0,0 +1,17 @@
+import { textWidget } from './textWidget';
+import { dateWidget } from './dateWidget';
+import { radioWidget } from './radioWidget';
+import { numberWidget } from './numberWidget';
+import { checkboxWidget } from './checkboxWidget';
+import { dropdownWidget } from './dropdownWidget';
+import { multilineWidget } from './multilineWidget';
+
+export {
+  textWidget,
+  dateWidget,
+  radioWidget,
+  numberWidget,
+  checkboxWidget,
+  dropdownWidget,
+  multilineWidget,
+};
diff --git a/src/prefabs/questionnaire/multilineWidget.ts b/src/prefabs/questionnaire/multilineWidget.ts
new file mode 100644
index 000000000..c5a90bd2f
--- /dev/null
+++ b/src/prefabs/questionnaire/multilineWidget.ts
@@ -0,0 +1,225 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  buttongroup,
+  color,
+  component,
+  displayLogic,
+  linked,
+  number,
+  option,
+  property,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+} from '@betty-blocks/component-sdk';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+import { Box, TextArea, boxOptions, textAreaOptions } from '../structures';
+
+export const multilineWidget = [
+  wrapper(
+    {
+      label: 'Multiline question',
+      optionCategories: [],
+      options: {
+        property: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#textInput',
+              optionId: '#textInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#textInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        label: linked({
+          label: 'Label',
+          value: {
+            ref: { componentId: '#textInput', optionId: '#textInputLabel' },
+          },
+        }),
+        placeholder: linked({
+          label: 'Placeholder',
+          value: {
+            ref: {
+              componentId: '#textInput',
+              optionId: '#textInputPlaceholder',
+            },
+          },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#textInput',
+              optionId: '#textInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: {
+            id: '#questionBox',
+          },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: {
+                id: '#questionBoxOuterSpacing',
+              },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#multilineQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              TextArea(
+                {
+                  label: 'Text area',
+                  ref: { id: '#textInput' },
+                  options: {
+                    ...textAreaOptions,
+                    property: property('Question', {
+                      value: '',
+                      ref: { id: '#textInputProperty' },
+                      configuration: {
+                        createProperty: {
+                          type: CreatePropertyKind.TEXT,
+                        },
+                        allowedKinds: ['TEXT'],
+                        disabled: true,
+                      },
+                      showInAddChild: true,
+                    }),
+                    label: variable('Label', {
+                      value: [''],
+                      ref: { id: '#textInputLabel' },
+                      optionRef: {
+                        sourceId: '#textInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                        ],
+                      },
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    value: variable('Value', {
+                      value: [''],
+                      optionRef: {
+                        sourceId: '#textInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY' },
+                        ],
+                      },
+                    }),
+                    floatLabel: toggle('Place label above input', {
+                      value: true,
+                    }),
+                    labelColor: color('Label color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    placeholder: variable('Placeholder', {
+                      ref: { id: '#textInputPlaceholder' },
+                      value: [''],
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    required: toggle('Required', {
+                      ref: { id: '#textInputRequired' },
+                    }),
+                    rows: number('Rows', {
+                      value: 4,
+                    }),
+                    margin: buttongroup(
+                      'Margin',
+                      [
+                        ['None', 'none'],
+                        ['Dense', 'dense'],
+                        ['Normal', 'normal'],
+                      ],
+                      { value: 'none' },
+                    ),
+                  },
+                },
+                [],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
diff --git a/src/prefabs/questionnaire/numberWidget.ts b/src/prefabs/questionnaire/numberWidget.ts
new file mode 100644
index 000000000..15cb0b69b
--- /dev/null
+++ b/src/prefabs/questionnaire/numberWidget.ts
@@ -0,0 +1,225 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  buttongroup,
+  color,
+  component,
+  displayLogic,
+  linked,
+  option,
+  property,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+} from '@betty-blocks/component-sdk';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+import { Box, TextInput, boxOptions, textInputOptions } from '../structures';
+
+export const numberWidget = [
+  wrapper(
+    {
+      label: 'Number question',
+      optionCategories: [],
+      options: {
+        property: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#numberInput',
+              optionId: '#numberInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#numberInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        label: linked({
+          label: 'Label',
+          value: {
+            ref: { componentId: '#numberInput', optionId: '#numberInputLabel' },
+          },
+        }),
+        placeholder: linked({
+          label: 'Placeholder',
+          value: {
+            ref: {
+              componentId: '#numberInput',
+              optionId: '#numberInputPlaceholder',
+            },
+          },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#numberInput',
+              optionId: '#numberInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: {
+            id: '#questionBox',
+          },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: {
+                id: '#questionBoxOuterSpacing',
+              },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#numberQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              TextInput(
+                {
+                  label: 'Number field',
+                  inputLabel: 'Number',
+                  type: 'number',
+                  pattern: '^[0-9]*$',
+                  ref: { id: '#numberInput' },
+                  options: {
+                    ...textInputOptions,
+                    property: property('Question', {
+                      value: '',
+                      ref: { id: '#numberInputProperty' },
+                      configuration: {
+                        createProperty: {
+                          type: CreatePropertyKind.INTEGER,
+                        },
+                        allowedKinds: ['INTEGER', 'PRICE'],
+                        disabled: true,
+                        allowFormatting: false,
+                      },
+                      showInAddChild: true,
+                    }),
+                    label: variable('Label', {
+                      value: [''],
+                      ref: { id: '#numberInputLabel' },
+                      optionRef: {
+                        sourceId: '#numberInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                        ],
+                      },
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    value: variable('Value', {
+                      value: [''],
+                      optionRef: {
+                        sourceId: '#numberInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY' },
+                        ],
+                      },
+                    }),
+                    floatLabel: toggle('Place label above input', {
+                      value: true,
+                    }),
+                    labelColor: color('Label color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    placeholder: variable('Placeholder', {
+                      ref: { id: '#numberInputPlaceholder' },
+                      value: [''],
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    required: toggle('Required', {
+                      ref: { id: '#numberInputRequired' },
+                    }),
+                    margin: buttongroup(
+                      'Margin',
+                      [
+                        ['None', 'none'],
+                        ['Dense', 'dense'],
+                        ['Normal', 'normal'],
+                      ],
+                      { value: 'none' },
+                    ),
+                  },
+                },
+                [],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
diff --git a/src/prefabs/questionnaire/radioWidget.ts b/src/prefabs/questionnaire/radioWidget.ts
new file mode 100644
index 000000000..c720a02c2
--- /dev/null
+++ b/src/prefabs/questionnaire/radioWidget.ts
@@ -0,0 +1,241 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  color,
+  component,
+  linked,
+  option,
+  property,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+  displayLogic,
+  buttongroup,
+  showIf,
+} from '@betty-blocks/component-sdk';
+import { Box, RadioInput, boxOptions, radioInputOptions } from '../structures';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+
+export const radioWidget = [
+  wrapper(
+    {
+      label: 'Multiple choice question',
+      optionCategories: [],
+      options: {
+        property: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#radioInput',
+              optionId: '#radioInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#radioInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        label: linked({
+          label: 'Label',
+          value: {
+            ref: { componentId: '#radioInput', optionId: '#radioInputLabel' },
+          },
+        }),
+        optionLabel: linked({
+          label: 'Label for options',
+          value: {
+            ref: {
+              componentId: '#radioInput',
+              optionId: '#radioInputLabelProperty',
+            },
+          },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#radioInput',
+              optionId: '#radioInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: {
+            id: '#questionBox',
+          },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: {
+                id: '#questionBoxOuterSpacing',
+              },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#radioQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              RadioInput(
+                {
+                  ref: { id: '#radioInput' },
+                  options: {
+                    ...radioInputOptions,
+                    property: property('Question', {
+                      value: '',
+                      ref: {
+                        id: '#radioInputProperty',
+                      },
+                      configuration: {
+                        allowedKinds: ['OBJECT'],
+                        createProperty: {
+                          type: CreatePropertyKind.OBJECT,
+                        },
+                        disabled: true,
+                        manageObjectValues: {
+                          selectableObjectKey: false,
+                          buttonLabel: 'Manage answer options',
+                          label: 'Manage answer options',
+                          value: [],
+                        },
+                      },
+                      showInAddChild: true,
+                    }),
+                    label: variable('Label', {
+                      value: [''],
+                      ref: { id: '#radioInputLabel' },
+                      optionRef: {
+                        sourceId: '#radioInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                        ],
+                      },
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    labelProperty: property('Label for options', {
+                      value: '',
+                      ref: { id: '#radioInputLabelProperty' },
+                      optionRef: {
+                        sourceId: '#radioInputPropertyRef',
+                        inherit: {
+                          id: '$id',
+                          type: 'PROPERTY',
+                          useKey: 'answer',
+                        },
+                      },
+                      configuration: {
+                        allowedKinds: ['OBJECT'],
+                      },
+                    }),
+                    value: variable('Value', {
+                      value: [''],
+                      optionRef: {
+                        sourceId: '#radioInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY' },
+                        ],
+                      },
+                    }),
+                    labelColor: color('Label color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    required: toggle('Required', {
+                      ref: {
+                        id: '#questionRequired',
+                      },
+                    }),
+                    optionType: buttongroup(
+                      'Option type',
+                      [
+                        ['Model', 'model'],
+                        ['Property', 'property'],
+                        ['Variable', 'variable'],
+                      ],
+                      {
+                        value: 'property',
+                        configuration: {
+                          condition: showIf('optionType', 'EQ', 'never'),
+                        },
+                      },
+                    ),
+                  },
+                },
+                [],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];
diff --git a/src/prefabs/questionnaire/textWidget.ts b/src/prefabs/questionnaire/textWidget.ts
new file mode 100644
index 000000000..1e2f7dc54
--- /dev/null
+++ b/src/prefabs/questionnaire/textWidget.ts
@@ -0,0 +1,221 @@
+import {
+  CreatePropertyKind,
+  ThemeColor,
+  buttongroup,
+  color,
+  component,
+  displayLogic,
+  linked,
+  option,
+  property,
+  size,
+  sizes,
+  toggle,
+  variable,
+  wrapper,
+} from '@betty-blocks/component-sdk';
+import { options as formOptions } from '../structures/ActionJSForm/options';
+import { Box, TextInput, boxOptions, textInputOptions } from '../structures';
+
+export const textWidget = [
+  wrapper(
+    {
+      label: 'Text question',
+      optionCategories: [],
+      options: {
+        property: linked({
+          label: 'Question',
+          value: {
+            ref: {
+              componentId: '#textInput',
+              optionId: '#textInputProperty',
+            },
+          },
+          optionRef: {
+            id: '#textInputPropertyRef',
+          },
+          configuration: {
+            showOnDrop: true,
+          },
+          showInReconfigure: true,
+        }),
+        label: linked({
+          label: 'Label',
+          value: {
+            ref: { componentId: '#textInput', optionId: '#textInputLabel' },
+          },
+        }),
+        placeholder: linked({
+          label: 'Placeholder',
+          value: {
+            ref: {
+              componentId: '#textInput',
+              optionId: '#textInputPlaceholder',
+            },
+          },
+        }),
+        required: linked({
+          label: 'Required to answer',
+          value: {
+            ref: {
+              componentId: '#textInput',
+              optionId: '#textInputRequired',
+            },
+          },
+        }),
+        questionSpacing: linked({
+          label: 'Question spacing',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxOuterSpacing',
+            },
+          },
+        }),
+        displayLogic: linked({
+          label: 'Display logic',
+          value: {
+            ref: {
+              componentId: '#questionBox',
+              optionId: '#questionBoxDisplayLogic',
+            },
+          },
+        }),
+      },
+    },
+    [
+      Box(
+        {
+          ref: {
+            id: '#questionBox',
+          },
+          options: {
+            ...boxOptions,
+            backgroundColor: color('Background color', {
+              value: ThemeColor.WHITE,
+            }),
+            borderColor: color('Border color', {
+              value: ThemeColor.MEDIUM,
+            }),
+            borderWidth: size('Border thickness', {
+              value: '1px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            borderRadius: size('Border radius', {
+              value: '5px',
+              configuration: {
+                as: 'UNIT',
+              },
+            }),
+            outerSpacing: sizes('Outer space', {
+              value: ['0rem', '0rem', 'M', '0rem'],
+              ref: {
+                id: '#questionBoxOuterSpacing',
+              },
+            }),
+            displayLogic: displayLogic('Display logic', {
+              value: {},
+              ref: {
+                id: '#questionBoxDisplayLogic',
+              },
+            }),
+          },
+        },
+        [
+          component(
+            'Form',
+            {
+              ref: { id: '#textQuestionForm' },
+              options: {
+                ...formOptions,
+                actionId: option('ACTION_JS', {
+                  label: 'Action',
+                  value: '',
+                  configuration: {
+                    createAction: {
+                      template: 'update',
+                      permissions: 'inherit',
+                    },
+                  },
+                }),
+              },
+            },
+            [
+              TextInput(
+                {
+                  label: 'Text field',
+                  ref: { id: '#textInput' },
+                  options: {
+                    ...textInputOptions,
+                    property: property('Question', {
+                      value: '',
+                      ref: { id: '#textInputProperty' },
+                      configuration: {
+                        allowedKinds: ['URL', 'IBAN', 'STRING'],
+                        disabled: true,
+                        createProperty: {
+                          type: CreatePropertyKind.STRING,
+                        },
+                      },
+                      showInAddChild: true,
+                    }),
+                    label: variable('Label', {
+                      value: [''],
+                      ref: { id: '#textInputLabel' },
+                      optionRef: {
+                        sourceId: '#textInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY_LABEL' },
+                        ],
+                      },
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    value: variable('Value', {
+                      value: [''],
+                      optionRef: {
+                        sourceId: '#textInputPropertyRef',
+                        inherit: [
+                          { name: '$name', id: '$id', type: 'PROPERTY' },
+                        ],
+                      },
+                    }),
+                    floatLabel: toggle('Place label above input', {
+                      value: true,
+                    }),
+                    labelColor: color('Label color', {
+                      value: ThemeColor.BLACK,
+                    }),
+                    placeholder: variable('Placeholder', {
+                      ref: { id: '#textInputPlaceholder' },
+                      value: [''],
+                      configuration: {
+                        allowPropertyName: true,
+                      },
+                    }),
+                    required: toggle('Required', {
+                      ref: { id: '#textInputRequired' },
+                    }),
+                    margin: buttongroup(
+                      'Margin',
+                      [
+                        ['None', 'none'],
+                        ['Dense', 'dense'],
+                        ['Normal', 'normal'],
+                      ],
+                      { value: 'none' },
+                    ),
+                  },
+                },
+                [],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  ),
+];

From 5daad5cabc9a7e2a295673f090f02f46c0964a8e Mon Sep 17 00:00:00 2001
From: ingmar-stipriaan <ingmar.stipriaan@bettyblocks.com>
Date: Wed, 1 Nov 2023 11:13:48 +0100
Subject: [PATCH 4/5] chore: remove comment

---
 src/prefabs/questionnaire/dropdownWidget.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/prefabs/questionnaire/dropdownWidget.ts b/src/prefabs/questionnaire/dropdownWidget.ts
index 9fa691e84..15cf8ad78 100644
--- a/src/prefabs/questionnaire/dropdownWidget.ts
+++ b/src/prefabs/questionnaire/dropdownWidget.ts
@@ -62,9 +62,6 @@ export const dropdownWidget = [
               optionId: '#dropdownInputLabelProperty',
             },
           },
-          // configuration: {
-          //   showOnDrop: true,
-          // },
         }),
         required: linked({
           label: 'Required to answer',

From 3dbdb0e5fa643a955818a9cfd1e0af72556264f5 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 1 Nov 2023 12:03:12 +0000
Subject: [PATCH 5/5] chore(release): 2.166.0 [skip ci]

# [2.166.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.165.1...v2.166.0) (2023-11-01)

### Features

* add questionnaire page templates ([81925ad](https://github.com/bettyblocks/material-ui-component-set/commit/81925ad28c15c153aee7a2ba5f228fb263afff55))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f60ab1ae..80e1b9672 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [2.166.0](https://github.com/bettyblocks/material-ui-component-set/compare/v2.165.1...v2.166.0) (2023-11-01)
+
+
+### Features
+
+* add questionnaire page templates ([81925ad](https://github.com/bettyblocks/material-ui-component-set/commit/81925ad28c15c153aee7a2ba5f228fb263afff55))
+
 ## [2.165.1](https://github.com/bettyblocks/material-ui-component-set/compare/v2.165.0...v2.165.1) (2023-11-01)
 
 
diff --git a/package.json b/package.json
index e2d988909..2718dd6a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "component-set",
-  "version": "2.165.1",
+  "version": "2.166.0",
   "main": "dist/templates.json",
   "license": "UNLICENSED",
   "private": false,