diff --git a/.github/workflows/TASKLIST_CARBONISATION.yml b/.github/workflows/TASKLIST_CARBONISATION.yml
index be0b17ffc..f0857ae45 100644
--- a/.github/workflows/TASKLIST_CARBONISATION.yml
+++ b/.github/workflows/TASKLIST_CARBONISATION.yml
@@ -15,11 +15,11 @@ jobs:
       options: --user 1001:1000
     steps:
       - name: Checkout form-js
-        uses: actions/checkout@b80ff79f1755d06ba70441c368a6fe801f5f3a62
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b
         with:
           path: form-js
       - name: Checkout Tasklist
-        uses: actions/checkout@b80ff79f1755d06ba70441c368a6fe801f5f3a62
+        uses: actions/checkout@44c2b7a8a4ea60a981eaca3cf939b5f4305c123b
         with:
           repository: camunda/zeebe
           token: ${{ secrets.ADD_TO_HTO_PROJECT_PAT }}
diff --git a/packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js b/packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js
index a905aacfa..507fc00d2 100644
--- a/packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js
+++ b/packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js
@@ -6,18 +6,16 @@ import { reduce, isArray } from 'min-dash';
 
 import { FormPropertiesPanelContext } from './context';
 
-import { getPropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
+import { PropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
 import { PropertiesPanelPlaceholderProvider } from './PropertiesPanelPlaceholderProvider';
 
-const EMPTY = {};
-
 export function PropertiesPanel(props) {
   const { eventBus, getProviders, injector } = props;
 
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
   const selectionModule = injector.get('selection');
-  const propertiesPanelConfig = injector.get('config.propertiesPanel') || EMPTY;
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
 
   const { feelPopupContainer } = propertiesPanelConfig;
 
@@ -85,17 +83,6 @@ export function PropertiesPanel(props) {
     );
   }, [providers, selectedFormField, editField]);
 
-  const formFields = getService('formFields');
-
-  const PropertiesPanelHeaderProvider = useMemo(
-    () =>
-      getPropertiesPanelHeaderProvider({
-        getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
-        formFields,
-      }),
-    [formFields, propertiesPanelConfig],
-  );
-
   return (
     <div
       class="fjs-properties-panel"
diff --git a/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js b/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js
index ba38b0cf6..2ef6593c6 100644
--- a/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js
+++ b/packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js
@@ -1,50 +1,65 @@
 import { textToLabel } from './Util';
+
 import { iconsByType } from '../../render/components/icons';
+
 import { getPaletteIcon } from '../palette/components/Palette';
 
+import { useService } from './hooks';
+
 const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 
-export function getPropertiesPanelHeaderProvider(options = {}) {
-  const { getDocumentationRef, formFields } = options;
-
-  return {
-    getElementLabel: (field) => {
-      const { type } = field;
-      if (headerlessTypes.includes(type)) {
-        return '';
-      }
-      if (type === 'text') {
-        return textToLabel(field.text);
-      }
-      if (type === 'image') {
-        return field.alt;
-      }
-      if (type === 'default') {
-        return field.id;
-      }
-      return field.label;
-    },
-
-    getElementIcon: (field) => {
-      const { type } = field;
-      const fieldDefinition = formFields.get(type).config;
-      const Icon = fieldDefinition.icon || iconsByType(type);
-      if (Icon) {
-        return () => <Icon width="36" height="36" viewBox="0 0 54 54" />;
-      } else if (fieldDefinition.iconUrl) {
-        return getPaletteIcon({ iconUrl: fieldDefinition.iconUrl, label: fieldDefinition.label });
-      }
-    },
-
-    getTypeLabel: (field) => {
-      const { type } = field;
-      if (type === 'default') {
-        return 'Form';
-      }
-      const fieldDefinition = formFields.get(type).config;
-      return fieldDefinition.label || type;
-    },
-
-    getDocumentationRef,
-  };
-}
+export const PropertiesPanelHeaderProvider = {
+  getElementLabel: (field) => {
+    const { type } = field;
+
+    if (headerlessTypes.includes(type)) {
+      return '';
+    }
+
+    if (type === 'text') {
+      return textToLabel(field.text);
+    }
+
+    if (type === 'image') {
+      return field.alt;
+    }
+
+    if (type === 'default') {
+      return field.id;
+    }
+
+    return field.label;
+  },
+
+  getElementIcon: (field) => {
+    const { type } = field;
+
+    // @Note: We know that we are inside the properties panel context,
+    // so we can savely use the hook here.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const fieldDefinition = useService('formFields').get(type).config;
+
+    const Icon = fieldDefinition.icon || iconsByType(type);
+
+    if (Icon) {
+      return () => <Icon width="36" height="36" viewBox="0 0 54 54" />;
+    } else if (fieldDefinition.iconUrl) {
+      return getPaletteIcon({ iconUrl: fieldDefinition.iconUrl, label: fieldDefinition.label });
+    }
+  },
+
+  getTypeLabel: (field) => {
+    const { type } = field;
+
+    if (type === 'default') {
+      return 'Form';
+    }
+
+    // @Note: We know that we are inside the properties panel context,
+    // so we can savely use the hook here.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const fieldDefinition = useService('formFields').get(type).config;
+
+    return fieldDefinition.label || type;
+  },
+};
diff --git a/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js b/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js
index 4a519f30e..453ecbcfb 100644
--- a/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js
+++ b/packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js
@@ -2,7 +2,7 @@ import { cleanup, render } from '@testing-library/preact/pure';
 
 import { FormFields } from '@bpmn-io/form-js-viewer';
 
-import { getPropertiesPanelHeaderProvider } from '../../../../src/features/properties-panel/PropertiesPanelHeaderProvider';
+import { PropertiesPanelHeaderProvider } from '../../../../src/features/properties-panel/PropertiesPanelHeaderProvider';
 
 import { MockPropertiesPanelContext, TestPropertiesPanel } from './helper';
 
@@ -50,22 +50,6 @@ describe('PropertiesPanelHeaderProvider', function () {
     expect(label.innerText).to.eql(field.label);
   });
 
-  it('should render documentation link', function () {
-    // given
-    const field = { type: 'textfield' };
-
-    const getDocumentationRef = () => 'https://example.com/';
-
-    // when
-    const { container } = renderHeader({ field, getDocumentationRef });
-
-    // then
-    const documentationLink = container.querySelector('.bio-properties-panel-header-link');
-
-    expect(documentationLink).to.exist;
-    expect(documentationLink.href).to.eql(getDocumentationRef());
-  });
-
   describe('extension support', function () {
     it('should render type label from config', function () {
       // given
@@ -146,7 +130,7 @@ describe('PropertiesPanelHeaderProvider', function () {
 
 // helpers /////////
 
-function renderHeader({ services = {}, getDocumentationRef, ...restOptions }) {
+function renderHeader({ services, ...restOptions }) {
   const defaultField = { type: 'textfield' };
 
   const options = {
@@ -156,13 +140,7 @@ function renderHeader({ services = {}, getDocumentationRef, ...restOptions }) {
 
   return render(
     <MockPropertiesPanelContext options={options} services={services}>
-      <TestPropertiesPanel
-        field={options.field}
-        headerProvider={getPropertiesPanelHeaderProvider({
-          formFields: services.formFields || new FormFields(),
-          getDocumentationRef,
-        })}
-      />
+      <TestPropertiesPanel field={options.field} headerProvider={PropertiesPanelHeaderProvider} />
     </MockPropertiesPanelContext>,
   );
 }
diff --git a/packages/form-js-playground/test/spec/Playground.spec.js b/packages/form-js-playground/test/spec/Playground.spec.js
index 45a426811..62003c2cd 100644
--- a/packages/form-js-playground/test/spec/Playground.spec.js
+++ b/packages/form-js-playground/test/spec/Playground.spec.js
@@ -144,47 +144,6 @@ describe('playground', function () {
     expect(playground).to.exist;
   });
 
-  it('should render with documentation links', async function () {
-    // given
-    const data = {};
-
-    const getDocumentationRef = (field) => {
-      if (field.type === 'default') {
-        return 'https://example.com/default';
-      }
-
-      return 'https://example.com/other';
-    };
-
-    // when
-    await act(() => {
-      playground = new Playground({
-        container,
-        schema,
-        data,
-        propertiesPanel: {
-          getDocumentationRef,
-        },
-      });
-    });
-
-    // then
-    expect(playground).to.exist;
-
-    const documentationLink = domQuery('.bio-properties-panel-header-link', container);
-    expect(documentationLink).to.exist;
-    expect(documentationLink.href).to.eql('https://example.com/default');
-
-    // when
-    const formField = domQuery('.fjs-form-field', container);
-    await act(() => formField.click());
-
-    // then
-    const documentationLinkSelected = domQuery('.bio-properties-panel-header-link', container);
-    expect(documentationLinkSelected).to.exist;
-    expect(documentationLinkSelected.href).to.eql('https://example.com/other');
-  });
-
   it('should append sample data', async function () {
     // given
     const attrs = {