From 3ac427679afff41ce3be183b501aa587477494a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Thu, 17 Aug 2023 15:57:25 +0200
Subject: [PATCH] fix(Forms): fix circular imports issue (#2566)

Co-authored-by: Henrik Haugberg <henrik.haugberg@gmail.com>
---
 .../src/docs/uilib/extensions/forms/info.mdx  |  4 +
 packages/dnb-eufemia/package.json             |  1 +
 packages/dnb-eufemia/rollup.config.js         |  4 +-
 .../src/extensions/forms/DataContext/At.tsx   |  5 +-
 .../forms/DataContext/SubmitButton.tsx        |  5 +-
 .../extensions/forms/Field/ArraySelection.tsx |  7 +-
 .../forms/Field/BankAccountNumber.tsx         |  5 +-
 .../src/extensions/forms/Field/Boolean.tsx    |  5 +-
 .../src/extensions/forms/Field/Currency.tsx   |  5 +-
 .../src/extensions/forms/Field/Date.tsx       |  5 +-
 .../src/extensions/forms/Field/Email.tsx      |  5 +-
 .../src/extensions/forms/Field/FirstName.tsx  |  5 +-
 .../src/extensions/forms/Field/LastName.tsx   |  5 +-
 .../forms/Field/NationalIdentityNumber.tsx    |  5 +-
 .../src/extensions/forms/Field/Number.tsx     |  5 +-
 .../forms/Field/OrganizationNumber.tsx        |  5 +-
 .../extensions/forms/Field/PhoneNumber.tsx    |  5 +-
 .../forms/Field/PostalCodeAndCity.tsx         |  5 +-
 .../extensions/forms/Field/SelectCountry.tsx  |  5 +-
 .../src/extensions/forms/Field/Selection.tsx  |  5 +-
 .../src/extensions/forms/Field/String.tsx     |  5 +-
 .../src/extensions/forms/Field/Toggle.tsx     |  5 +-
 .../forms/FieldBlock/FieldBlock.tsx           |  5 +-
 .../forms/FieldGroup/FieldGroup.tsx           |  5 +-
 .../src/extensions/forms/Layout/ButtonRow.tsx |  5 +-
 .../src/extensions/forms/Layout/Card.tsx      |  5 +-
 .../src/extensions/forms/Layout/Column.tsx    |  5 +-
 .../extensions/forms/Layout/FlexContainer.tsx | 73 ++++---------------
 .../src/extensions/forms/Layout/FlexItem.tsx  |  5 +-
 .../forms/Layout/InfoCardSection.tsx          |  5 +-
 .../extensions/forms/Layout/MainHeading.tsx   |  5 +-
 .../src/extensions/forms/Layout/Row.tsx       |  5 +-
 .../src/extensions/forms/Layout/Section.tsx   |  5 +-
 .../extensions/forms/Layout/SubHeading.tsx    |  5 +-
 .../extensions/forms/StepsLayout/Buttons.tsx  |  5 +-
 .../forms/StepsLayout/NextButton.tsx          |  5 +-
 .../forms/StepsLayout/PreviousButton.tsx      |  5 +-
 .../src/extensions/forms/StepsLayout/Step.tsx |  5 +-
 .../forms/StepsLayout/StepsLayout.tsx         |  2 +
 .../forms/Value/BankAccountNumber.tsx         |  5 +-
 .../src/extensions/forms/Value/Boolean.tsx    |  5 +-
 .../src/extensions/forms/Value/Currency.tsx   |  5 +-
 .../src/extensions/forms/Value/Date.tsx       |  5 +-
 .../src/extensions/forms/Value/Email.tsx      |  5 +-
 .../src/extensions/forms/Value/FirstName.tsx  |  5 +-
 .../src/extensions/forms/Value/LastName.tsx   |  5 +-
 .../forms/Value/NationalIdentityNumber.tsx    |  5 +-
 .../src/extensions/forms/Value/Number.tsx     |  5 +-
 .../extensions/forms/Value/PhoneNumber.tsx    |  5 +-
 .../src/extensions/forms/Value/String.tsx     |  5 +-
 .../forms/ValueBlock/ValueBlock.tsx           |  5 +-
 .../forms/Visibility/Visibility.tsx           |  5 +-
 yarn.lock                                     | 15 ++++
 53 files changed, 230 insertions(+), 106 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/info.mdx
index daa6b713db4..8e8994d666d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/info.mdx
@@ -29,3 +29,7 @@ import {
   ...
 } from '@dnb/eufemia/extensions/forms'
 ```
+
+#### JSON support
+
+Some of the internal logic requires support for importing JSON files. Meta frameworks do often support this by default.
diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json
index 61489e7cd2f..2b95091c3e5 100644
--- a/packages/dnb-eufemia/package.json
+++ b/packages/dnb-eufemia/package.json
@@ -141,6 +141,7 @@
     "@emotion/styled": "11.11.0",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@rollup/plugin-replace": "5.0.2",
     "@semantic-release/changelog": "6.0.2",
diff --git a/packages/dnb-eufemia/rollup.config.js b/packages/dnb-eufemia/rollup.config.js
index 6fa4eab0077..86f6af7895c 100644
--- a/packages/dnb-eufemia/rollup.config.js
+++ b/packages/dnb-eufemia/rollup.config.js
@@ -7,6 +7,7 @@ import path from 'path'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import { babel } from '@rollup/plugin-babel'
+import json from '@rollup/plugin-json'
 import replace from '@rollup/plugin-replace'
 import nodeGlobals from 'rollup-plugin-node-globals'
 import { terser } from 'rollup-plugin-terser'
@@ -26,7 +27,7 @@ const excludes = [
 ]
 
 const currentBranch = branchName()
-export default !/^(release|beta|alpha|next)$/.test(currentBranch)
+export default !/^(release|beta|alpha|next|main)$/.test(currentBranch)
   ? [
       // NB: rollup needs at least one config
       makeRollupConfig(
@@ -221,6 +222,7 @@ function makeRollupConfig(
       nodeResolve({
         extensions,
       }),
+      json(),
       babel(babelOptions),
       commonjs(commonjsOptions),
       nodeGlobals(),
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/At.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/At.tsx
index c5f3484daa3..2b6c7453363 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/At.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/At.tsx
@@ -10,7 +10,7 @@ export type Props = ComponentProps & {
   children?: React.ReactNode
 }
 
-export default function At(props: Props) {
+function At(props: Props) {
   const { path = '/', iterate, children } = props
   const dataContext = useContext(Context)
   const { data: contextData, handlePathChange: contextHandlePathChange } =
@@ -73,3 +73,6 @@ export default function At(props: Props) {
     </Context.Provider>
   )
 }
+
+At._supportsEufemiaSpacingProps = true
+export default At
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/SubmitButton.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/SubmitButton.tsx
index 2636a4ba0d5..85b0d19bed7 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/SubmitButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/SubmitButton.tsx
@@ -9,7 +9,7 @@ export type Props = ComponentProps & {
   children?: string
 }
 
-export default function SubmitDataContextButton(props: Props) {
+function SubmitButton(props: Props) {
   const sharedContext = useContext(SharedContext)
   const {
     className,
@@ -26,3 +26,6 @@ export default function SubmitDataContextButton(props: Props) {
     </Button>
   )
 }
+
+SubmitButton._supportsEufemiaSpacingProps = true
+export default SubmitButton
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection.tsx
index 5192a65b927..0ae739cd5c9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection.tsx
@@ -3,7 +3,7 @@ import { Checkbox } from '../../../components'
 import classnames from 'classnames'
 import { forwardSpaceProps } from '../utils'
 import Option from './Option'
-import { FieldBlock } from '../Forms'
+import FieldBlock from '../FieldBlock'
 import { useField } from './hooks'
 import type { ComponentProps } from '../component-types'
 import type { FieldProps } from '../field-types'
@@ -14,7 +14,7 @@ export type Props = ComponentProps &
     variant?: 'checkbox'
   }
 
-export default function ArraySelection(props: Props) {
+function ArraySelection(props: Props) {
   const {
     className,
     variant,
@@ -81,3 +81,6 @@ export default function ArraySelection(props: Props) {
       )
   }
 }
+
+ArraySelection._supportsEufemiaSpacingProps = true
+export default ArraySelection
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber.tsx
index 78d1dd90481..badbbad0c6c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber.tsx
@@ -7,7 +7,7 @@ export type Props = StringComponentProps & {
   omitMask?: boolean
 }
 
-export default function FieldBankAccountNumber(props: Props) {
+function BankAccountNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
   const { validate = true, omitMask } = props
 
@@ -47,3 +47,6 @@ export default function FieldBankAccountNumber(props: Props) {
 
   return <StringComponent {...stringComponentProps} />
 }
+
+BankAccountNumber._supportsEufemiaSpacingProps = true
+export default BankAccountNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean.tsx
index 2b952f0760f..2b0acebe7df 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean.tsx
@@ -10,7 +10,7 @@ export type Props = Omit<
   falseText?: string
 }
 
-export default function BooleanField(props: Props) {
+function BooleanComponent(props: Props) {
   const sharedContext = useContext(SharedContext)
   const { trueText, falseText, ...restProps } = props
   return (
@@ -23,3 +23,6 @@ export default function BooleanField(props: Props) {
     />
   )
 }
+
+BooleanComponent._supportsEufemiaSpacingProps = true
+export default BooleanComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Currency.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Currency.tsx
index 46f1016eef4..b8f59071e71 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Currency.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Currency.tsx
@@ -11,7 +11,7 @@ export type Props = ComponentProps &
     currency?: string
   }
 
-export default function FieldCurrency(props: Props) {
+function Currency(props: Props) {
   const preparedProps: Props = {
     ...props,
     fromInput: ({
@@ -57,3 +57,6 @@ export default function FieldCurrency(props: Props) {
     />
   )
 }
+
+Currency._supportsEufemiaSpacingProps = true
+export default Currency
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date.tsx
index a8d786f82f3..fc176ea0a6f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Date.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date.tsx
@@ -8,7 +8,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = ComponentProps & FieldProps<string>
 
-export default function FieldDate(props: Props) {
+function DateComponent(props: Props) {
   const sharedContext = useContext(SharedContext)
   const preparedProps: Props = {
     ...props,
@@ -46,3 +46,6 @@ export default function FieldDate(props: Props) {
     />
   )
 }
+
+DateComponent._supportsEufemiaSpacingProps = true
+export default DateComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Email.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Email.tsx
index 3b8c4635f07..ffeec142b0b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Email.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Email.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function FieldEmail(props: Props) {
+function Email(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringComponentProps: Props = {
@@ -23,3 +23,6 @@ export default function FieldEmail(props: Props) {
 
   return <StringComponent {...stringComponentProps} />
 }
+
+Email._supportsEufemiaSpacingProps = true
+export default Email
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/FirstName.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/FirstName.tsx
index 87a86b9bae6..e18f3f56dea 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/FirstName.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/FirstName.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function FieldFirstName(props: Props) {
+function FirstName(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringComponentProps: Props = {
@@ -18,3 +18,6 @@ export default function FieldFirstName(props: Props) {
 
   return <StringComponent {...stringComponentProps} />
 }
+
+FirstName._supportsEufemiaSpacingProps = true
+export default FirstName
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/LastName.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/LastName.tsx
index d136ff1b23f..6b6c93f75bc 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/LastName.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/LastName.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function FieldLastName(props: Props) {
+function LastName(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringComponentProps: Props = {
@@ -18,3 +18,6 @@ export default function FieldLastName(props: Props) {
 
   return <StringComponent {...stringComponentProps} />
 }
+
+LastName._supportsEufemiaSpacingProps = true
+export default LastName
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber.tsx
index 41cf6dcaf1f..3dae3d2c65f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber.tsx
@@ -7,7 +7,7 @@ export type Props = StringComponentProps & {
   validate?: boolean
 }
 
-export default function FieldNationalIdentityNumber(props: Props) {
+function NationalIdentityNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
   const { validate = true, omitMask } = props
 
@@ -47,3 +47,6 @@ export default function FieldNationalIdentityNumber(props: Props) {
 
   return <StringComponent {...stringComponentProps} />
 }
+
+NationalIdentityNumber._supportsEufemiaSpacingProps = true
+export default NationalIdentityNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
index 3a37ea06d44..94657d22d44 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
@@ -37,7 +37,7 @@ export type Props = ComponentProps &
     rightAligned?: boolean
   }
 
-export default function FieldNumber(props: Props) {
+function NumberComponent(props: Props) {
   const {
     thousandSeparator,
     decimalSymbol = ',',
@@ -143,3 +143,6 @@ export default function FieldNumber(props: Props) {
     </FieldBlock>
   )
 }
+
+NumberComponent._supportsEufemiaSpacingProps = true
+export default NumberComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber.tsx
index a51330e52d7..872f092ef66 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber.tsx
@@ -7,7 +7,7 @@ export type Props = StringComponentProps & {
   omitMask?: boolean
 }
 
-export default function FieldOrganizationNumber(props: Props) {
+function OrganizationNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
   const { validate = true, omitMask } = props
 
@@ -33,3 +33,6 @@ export default function FieldOrganizationNumber(props: Props) {
 
   return <StringComponent {...stringComponentProps} />
 }
+
+OrganizationNumber._supportsEufemiaSpacingProps = true
+export default OrganizationNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
index 4d5b3d531d3..d5570d73f57 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
@@ -17,7 +17,7 @@ export type Props = ComponentProps &
     width?: false | 'medium' | 'large'
   }
 
-export default function FieldPhoneNumber(props: Props) {
+function PhoneNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
   const preparedProps: Props = {
     ...props,
@@ -126,3 +126,6 @@ export default function FieldPhoneNumber(props: Props) {
     </Div>
   )
 }
+
+PhoneNumber._supportsEufemiaSpacingProps = true
+export default PhoneNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity.tsx
index 0c3a93fc81f..663a4d1c9b4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity.tsx
@@ -9,7 +9,7 @@ export type Props = Omit<FieldGroupProps, 'children'> &
     width?: false | 'medium' | 'large'
   }
 
-export default function FieldPostalCodeAndCity(props: Props) {
+function PostalCodeAndCity(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const {
@@ -73,3 +73,6 @@ export default function FieldPostalCodeAndCity(props: Props) {
     </FieldGroup>
   )
 }
+
+PostalCodeAndCity._supportsEufemiaSpacingProps = true
+export default PostalCodeAndCity
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry.tsx
index 4d21d5d1127..16d32468283 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry.tsx
@@ -6,7 +6,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = SelectionProps
 
-export default function FieldSelectCountry(props: Props) {
+function SelectCountry(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const selectComponentProps: Props = {
@@ -35,3 +35,6 @@ export default function FieldSelectCountry(props: Props) {
     </Selection>
   )
 }
+
+SelectCountry._supportsEufemiaSpacingProps = true
+export default SelectCountry
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx
index 2f0e1f045b8..6ad6d6329c7 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx
@@ -16,7 +16,7 @@ export type Props = ComponentProps &
     width?: false | 'medium' | 'large' | 'stretch'
   }
 
-export default function Select(props: Props) {
+function Selection(props: Props) {
   const {
     className,
     variant,
@@ -156,3 +156,6 @@ export default function Select(props: Props) {
     }
   }
 }
+
+Selection._supportsEufemiaSpacingProps = true
+export default Selection
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
index efdd552aaed..1ded231d911 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
@@ -39,7 +39,7 @@ export type Props = ComponentProps &
     width?: false | 'medium' | 'large' | 'stretch'
   }
 
-export default function FieldString(props: Props) {
+function StringComponent(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const preparedProps: Props = {
@@ -183,3 +183,6 @@ export default function FieldString(props: Props) {
     </FieldBlock>
   )
 }
+
+StringComponent._supportsEufemiaSpacingProps = true
+export default StringComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
index 47102252f9d..24e3de26ba4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
@@ -18,7 +18,7 @@ export type Props = ComponentProps &
     textOff?: string
   }
 
-export default function ToggleField(props: Props) {
+function Toggle(props: Props) {
   const sharedContext = useContext(SharedContext)
   const {
     id,
@@ -155,3 +155,6 @@ export default function ToggleField(props: Props) {
       )
   }
 }
+
+Toggle._supportsEufemiaSpacingProps = true
+export default Toggle
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
index a23aedc0939..50e9609f38a 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -22,7 +22,7 @@ export type Props = ComponentProps &
     children: React.ReactNode
   }
 
-export default function FieldBlock(props: Props) {
+function FieldBlock(props: Props) {
   const {
     className,
     forId,
@@ -117,3 +117,6 @@ export default function FieldBlock(props: Props) {
     </Div>
   )
 }
+
+FieldBlock._supportsEufemiaSpacingProps = true
+export default FieldBlock
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldGroup/FieldGroup.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldGroup/FieldGroup.tsx
index 238683eef3b..6546344cd2d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldGroup/FieldGroup.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldGroup/FieldGroup.tsx
@@ -28,7 +28,7 @@ export type Props = ComponentProps &
     children: React.ReactNode
   }
 
-export default function FieldGroup(props: Props) {
+function FieldGroup(props: Props) {
   const {
     className,
     label,
@@ -107,3 +107,6 @@ export default function FieldGroup(props: Props) {
     </FieldGroupContext.Provider>
   )
 }
+
+FieldGroup._supportsEufemiaSpacingProps = true
+export default FieldGroup
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/ButtonRow.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/ButtonRow.tsx
index 63d202b3a53..523962a310e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/ButtonRow.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/ButtonRow.tsx
@@ -8,7 +8,7 @@ export type Props = ComponentProps & {
   children?: React.ReactNode
 }
 
-export default function ButtonRow(props: Props) {
+function ButtonRow(props: Props) {
   const { className, children } = props
   return (
     <Div
@@ -19,3 +19,6 @@ export default function ButtonRow(props: Props) {
     </Div>
   )
 }
+
+ButtonRow._supportsEufemiaSpacingProps = true
+export default ButtonRow
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx
index e75f71abf44..c3b3892a459 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/Card.tsx
@@ -14,7 +14,7 @@ export type Props = ComponentProps & {
   children: React.ReactNode
 }
 
-export default function Card(props: Props) {
+function Card(props: Props) {
   const { className, stack, direction, spacing, children } = props
 
   if (stack) {
@@ -51,3 +51,6 @@ export default function Card(props: Props) {
     </FlexItem>
   )
 }
+
+Card._supportsEufemiaSpacingProps = true
+export default Card
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/Column.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/Column.tsx
index 5eda676fc99..08e092cfb6d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/Column.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/Column.tsx
@@ -5,10 +5,13 @@ import FlexContainer, {
 
 export type Props = Omit<FlexContainerProps, 'direction'>
 
-export default function Column({ children, ...props }: Props) {
+function Column({ children, ...props }: Props) {
   return (
     <FlexContainer direction="column" {...props}>
       {children}
     </FlexContainer>
   )
 }
+
+Column._supportsEufemiaSpacingProps = true
+export default Column
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx
index f877577cc5b..2d2090b794c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexContainer.tsx
@@ -3,18 +3,9 @@ import classnames from 'classnames'
 import { Space } from '../../../components'
 import { Div } from '../../../elements'
 import * as EufemiaElements from '../../../elements'
-import { SpaceType, SpacingProps } from '../../../components/space/types'
+import { SpaceType } from '../../../components/space/types'
 import { forwardSpaceProps } from '../utils'
 import type { ComponentProps } from '../component-types'
-import {
-  Field,
-  Value,
-  Layout,
-  FieldBlock,
-  ValueBlock,
-  StepsLayout,
-  Visibility,
-} from '../index'
 import MainHeading from './MainHeading'
 import SubHeading from './SubHeading'
 
@@ -50,42 +41,6 @@ const getSpaceBottom = (
   )
 }
 
-export const isFieldComponent = (element): boolean => {
-  return Object.values(Field).some(
-    (fieldComponent) => element?.type === fieldComponent
-  )
-}
-
-export const isValueComponent = (element): boolean => {
-  return Object.values(Value).some(
-    (valueComponent) => element?.type === valueComponent
-  )
-}
-
-export const isLayoutComponent = (element): boolean => {
-  return Object.values(Layout).some(
-    (layoutComponent) => element?.type === layoutComponent
-  )
-}
-
-export const isEufemiaFormComponent = (element): boolean => {
-  return (
-    isFieldComponent(element) ||
-    isValueComponent(element) ||
-    isLayoutComponent(element) ||
-    [
-      FieldBlock,
-      ValueBlock,
-      StepsLayout,
-      StepsLayout.Step,
-      StepsLayout.NextButton,
-      StepsLayout.PreviousButton,
-      StepsLayout.Buttons,
-      Visibility,
-    ].some((Component) => element?.type === Component)
-  )
-}
-
 export const isEufemiaElement = (element): boolean => {
   return Object.values(EufemiaElements).some(
     (eufemiaElement) => element?.type === eufemiaElement
@@ -98,22 +53,22 @@ export const isEufemiaElement = (element): boolean => {
 export const isSpacePropsComponent = (
   element: React.ReactNode
 ): boolean => {
-  return isEufemiaFormComponent(element) || isEufemiaElement(element)
+  return (
+    (React.isValidElement(element) &&
+      typeof element.type === 'object' &&
+      '_supportsEufemiaSpacingProps' in
+        (element.type as React.JSXElementConstructor<unknown>)) ||
+    isEufemiaElement(element)
+  )
 }
 
-const renderWithSpacing = (
-  element: React.ReactNode,
-  spacingProps: SpacingProps
-) => {
+const renderWithSpacing = (element: React.ReactNode, props) => {
   const takesSpaceProps = isSpacePropsComponent(element)
 
   return takesSpaceProps ? (
-    React.cloneElement(
-      element as React.ReactElement<SpacingProps>,
-      spacingProps
-    )
+    React.cloneElement(element as React.ReactElement<unknown>, props)
   ) : (
-    <Div {...spacingProps}>{element}</Div>
+    <Div {...props}>{element}</Div>
   )
 }
 
@@ -142,7 +97,7 @@ export type Props = ComponentProps & {
   children: React.ReactNode
 }
 
-export default function FlexContainer(props: Props) {
+function FlexContainer(props: Props) {
   const {
     className,
     children,
@@ -218,6 +173,7 @@ export default function FlexContainer(props: Props) {
                   spacing
 
             return renderWithSpacing(child, {
+              key: `element-${i}`,
               space: { top, bottom },
               top,
               bottom,
@@ -228,3 +184,6 @@ export default function FlexContainer(props: Props) {
     </Div>
   )
 }
+
+FlexContainer._supportsEufemiaSpacingProps = true
+export default FlexContainer
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx
index b2ed3e963fb..14f23116634 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/FlexItem.tsx
@@ -10,7 +10,7 @@ export type Props = ComponentProps & {
   children: React.ReactNode
 }
 
-export default function FlexItem(props: Props) {
+function FlexItem(props: Props) {
   const { className, grow, shrink, children } = props
   const cn = classnames(
     'dnb-forms-flex-item',
@@ -25,3 +25,6 @@ export default function FlexItem(props: Props) {
     </Div>
   )
 }
+
+FlexItem._supportsEufemiaSpacingProps = true
+export default FlexItem
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/InfoCardSection.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/InfoCardSection.tsx
index fe4d17e928d..2f5b4b59aaa 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/InfoCardSection.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/InfoCardSection.tsx
@@ -8,7 +8,7 @@ import Section from './Section'
 
 export type Props = ComponentProps & InfoCardProps
 
-export default function InfoCardSection(props: Props) {
+function InfoCardSection(props: Props) {
   const { className } = props
   return (
     <Section
@@ -19,3 +19,6 @@ export default function InfoCardSection(props: Props) {
     </Section>
   )
 }
+
+InfoCardSection._supportsEufemiaSpacingProps = true
+export default InfoCardSection
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/MainHeading.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/MainHeading.tsx
index 4646c01a6cb..6d92793576b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/MainHeading.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/MainHeading.tsx
@@ -8,7 +8,7 @@ export type Props = ComponentProps & {
   children?: React.ReactNode
 }
 
-export default function MainHeading(props: Props) {
+function MainHeading(props: Props) {
   const { className, children } = props
   return (
     <Heading
@@ -21,3 +21,6 @@ export default function MainHeading(props: Props) {
     </Heading>
   )
 }
+
+MainHeading._supportsEufemiaSpacingProps = true
+export default MainHeading
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/Row.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/Row.tsx
index deb771d1726..dd519fc574c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/Row.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/Row.tsx
@@ -5,10 +5,13 @@ import FlexContainer, {
 
 export type Props = Omit<FlexContainerProps, 'direction'>
 
-export default function Row({ children, ...props }: Props) {
+function Row({ children, ...props }: Props) {
   return (
     <FlexContainer direction="row" {...props}>
       {children}
     </FlexContainer>
   )
 }
+
+Row._supportsEufemiaSpacingProps = true
+export default Row
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx
index 02f31e2cc81..79a1b60c629 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/Section.tsx
@@ -12,7 +12,7 @@ export type Props = ComponentProps & {
   children: React.ReactNode
 }
 
-export default function Section(props: Props) {
+function Section(props: Props) {
   const { className, direction, spacing, children } = props
   return (
     <FlexContainer
@@ -25,3 +25,6 @@ export default function Section(props: Props) {
     </FlexContainer>
   )
 }
+
+Section._supportsEufemiaSpacingProps = true
+export default Section
diff --git a/packages/dnb-eufemia/src/extensions/forms/Layout/SubHeading.tsx b/packages/dnb-eufemia/src/extensions/forms/Layout/SubHeading.tsx
index 7802b02bd8a..ec29f6024f4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Layout/SubHeading.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Layout/SubHeading.tsx
@@ -8,7 +8,7 @@ export type Props = ComponentProps & {
   children?: React.ReactNode
 }
 
-export default function SubHeading(props: Props) {
+function SubHeading(props: Props) {
   const { className, children } = props
   return (
     <Heading
@@ -20,3 +20,6 @@ export default function SubHeading(props: Props) {
     </Heading>
   )
 }
+
+SubHeading._supportsEufemiaSpacingProps = true
+export default SubHeading
diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Buttons.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Buttons.tsx
index 00ab98559b1..3f301b3e402 100644
--- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Buttons.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Buttons.tsx
@@ -10,7 +10,7 @@ export type Props = ComponentProps & {
   children?: string
 }
 
-export default function Buttons(props: Props) {
+function Buttons(props: Props) {
   const { className } = props
   return (
     <ButtonRow
@@ -22,3 +22,6 @@ export default function Buttons(props: Props) {
     </ButtonRow>
   )
 }
+
+Buttons._supportsEufemiaSpacingProps = true
+export default Buttons
diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/NextButton.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/NextButton.tsx
index 763718b92be..c076322e32d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/NextButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/NextButton.tsx
@@ -11,7 +11,7 @@ export type Props = ComponentProps &
     children?: string
   }
 
-export default function NextStepButton(props: Props) {
+function NextButton(props: Props) {
   const sharedContext = useContext(SharedContext)
   const {
     className,
@@ -35,3 +35,6 @@ export default function NextStepButton(props: Props) {
     </Button>
   )
 }
+
+NextButton._supportsEufemiaSpacingProps = true
+export default NextButton
diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/PreviousButton.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/PreviousButton.tsx
index 260ae7f1d58..5b34a2f7b22 100644
--- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/PreviousButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/PreviousButton.tsx
@@ -11,7 +11,7 @@ export type Props = ComponentProps &
     children?: string
   }
 
-export default function PreviousStepButton(props: Props) {
+function PreviousButton(props: Props) {
   const sharedContext = useContext(SharedContext)
   const {
     className,
@@ -35,3 +35,6 @@ export default function PreviousStepButton(props: Props) {
     </Button>
   )
 }
+
+PreviousButton._supportsEufemiaSpacingProps = true
+export default PreviousButton
diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx
index 8558e8eb275..f5ccfbbd038 100644
--- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/Step.tsx
@@ -15,7 +15,7 @@ export type Props = ComponentProps & {
   children: React.ReactNode
 }
 
-export default function Step(props: Props) {
+function Step(props: Props) {
   const {
     className,
     index,
@@ -41,3 +41,6 @@ export default function Step(props: Props) {
     </FlexContainer>
   )
 }
+
+Step._supportsEufemiaSpacingProps = true
+export default Step
diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/StepsLayout.tsx b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/StepsLayout.tsx
index 2e6bed96279..422203eea57 100644
--- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/StepsLayout.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/StepsLayout.tsx
@@ -113,6 +113,8 @@ function StepsLayout(props: Props) {
   )
 }
 
+StepsLayout._supportsEufemiaSpacingProps = true
+
 StepsLayout.Step = Step
 StepsLayout.NextButton = NextButton
 StepsLayout.PreviousButton = PreviousButton
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/BankAccountNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/BankAccountNumber.tsx
index 4251aa11a34..b006871a426 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/BankAccountNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/BankAccountNumber.tsx
@@ -8,7 +8,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function ValueBankAccountNumber(props: Props) {
+function BankAccountNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringValueProps: Props = {
@@ -25,3 +25,6 @@ export default function ValueBankAccountNumber(props: Props) {
   }
   return <StringComponent {...stringValueProps} />
 }
+
+BankAccountNumber._supportsEufemiaSpacingProps = true
+export default BankAccountNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Boolean.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Boolean.tsx
index a8562a93eac..82bb9d08e94 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Boolean.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Boolean.tsx
@@ -8,7 +8,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = ComponentProps & ValueProps<boolean>
 
-export default function ValueBoolean(props: Props) {
+function BooleanComponent(props: Props) {
   const sharedContext = useContext(SharedContext)
   const { className, label, placeholder, showEmpty, value, inline } =
     useValue(props)
@@ -30,3 +30,6 @@ export default function ValueBoolean(props: Props) {
     </ValueBlock>
   )
 }
+
+BooleanComponent._supportsEufemiaSpacingProps = true
+export default BooleanComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Currency.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Currency.tsx
index a8dd77a4f04..3f328b4a555 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Currency.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Currency.tsx
@@ -3,7 +3,7 @@ import NumberComponent, { Props as NumberComponentProps } from './Number'
 
 export type Props = NumberComponentProps
 
-export default function ValueCurrency(props: Props) {
+function Currency(props: Props) {
   const numberProps: Props = {
     ...props,
     label: props.label,
@@ -12,3 +12,6 @@ export default function ValueCurrency(props: Props) {
   }
   return <NumberComponent {...numberProps} />
 }
+
+Currency._supportsEufemiaSpacingProps = true
+export default Currency
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Date.tsx
index c0e5c033ccf..36d3ab98720 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Date.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Date.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function ValueDate(props: Props) {
+function DateComponent(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringProps: Props = {
@@ -13,3 +13,6 @@ export default function ValueDate(props: Props) {
   }
   return <StringComponent {...stringProps} />
 }
+
+DateComponent._supportsEufemiaSpacingProps = true
+export default DateComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Email.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Email.tsx
index fb9ea459fff..4586f31e653 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Email.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Email.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function ValueEmail(props: Props) {
+function Email(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringProps: Props = {
@@ -13,3 +13,6 @@ export default function ValueEmail(props: Props) {
   }
   return <StringComponent {...stringProps} />
 }
+
+Email._supportsEufemiaSpacingProps = true
+export default Email
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/FirstName.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/FirstName.tsx
index 7780a810134..3889bf33c26 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/FirstName.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/FirstName.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function ValueFirstName(props: Props) {
+function FirstName(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringValueProps: Props = {
@@ -13,3 +13,6 @@ export default function ValueFirstName(props: Props) {
   }
   return <StringComponent {...stringValueProps} />
 }
+
+FirstName._supportsEufemiaSpacingProps = true
+export default FirstName
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/LastName.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/LastName.tsx
index f0b9344eb81..7bf0169202d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/LastName.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/LastName.tsx
@@ -4,7 +4,7 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps
 
-export default function ValueLastName(props: Props) {
+function LastName(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringValueProps: Props = {
@@ -13,3 +13,6 @@ export default function ValueLastName(props: Props) {
   }
   return <StringComponent {...stringValueProps} />
 }
+
+LastName._supportsEufemiaSpacingProps = true
+export default LastName
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/NationalIdentityNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/NationalIdentityNumber.tsx
index 1bb7a0f10bb..1981fac1402 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/NationalIdentityNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/NationalIdentityNumber.tsx
@@ -8,7 +8,7 @@ import {
 
 export type Props = StringComponentProps
 
-export default function ValueNationalIdentityNumber(props: Props) {
+function NationalIdentityNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringValueProps: Props = {
@@ -25,3 +25,6 @@ export default function ValueNationalIdentityNumber(props: Props) {
   }
   return <StringComponent {...stringValueProps} />
 }
+
+NationalIdentityNumber._supportsEufemiaSpacingProps = true
+export default NationalIdentityNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Number.tsx
index 29b4b9767c7..99774d88360 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Number.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Number.tsx
@@ -15,7 +15,7 @@ export type Props = ComponentProps &
     suffix?: string
   }
 
-export default function ValueNumber(props: Props) {
+function NumberComponent(props: Props) {
   const {
     className,
     label,
@@ -52,3 +52,6 @@ export default function ValueNumber(props: Props) {
     </ValueBlock>
   )
 }
+
+NumberComponent._supportsEufemiaSpacingProps = true
+export default NumberComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber.tsx
index ed2a7278e52..6cc0b36344f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/PhoneNumber.tsx
@@ -8,7 +8,7 @@ import {
 
 export type Props = StringComponentProps
 
-export default function ValuePhoneNumber(props: Props) {
+function PhoneNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
 
   const stringValueProps: Props = {
@@ -25,3 +25,6 @@ export default function ValuePhoneNumber(props: Props) {
   }
   return <StringComponent {...stringValueProps} />
 }
+
+PhoneNumber._supportsEufemiaSpacingProps = true
+export default PhoneNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/String.tsx
index 39b829a7a55..0deb0d8fbaf 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/String.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/String.tsx
@@ -7,7 +7,7 @@ import type { ValueProps } from '../value-types'
 
 export type Props = ComponentProps & ValueProps<string>
 
-export default function ValueString(props: Props) {
+function StringComponent(props: Props) {
   const {
     className,
     label,
@@ -31,3 +31,6 @@ export default function ValueString(props: Props) {
     </ValueBlock>
   )
 }
+
+StringComponent._supportsEufemiaSpacingProps = true
+export default StringComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
index 262e7f82787..945d9e231b4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
@@ -11,7 +11,7 @@ export type Props = ComponentProps &
     children?: React.ReactNode
   }
 
-export default function StringValue(props: Props) {
+function ValueBlock(props: Props) {
   const { className, label, inline, placeholder, showEmpty, children } =
     props
   if (
@@ -47,3 +47,6 @@ export default function StringValue(props: Props) {
     </Span>
   )
 }
+
+ValueBlock._supportsEufemiaSpacingProps = true
+export default ValueBlock
diff --git a/packages/dnb-eufemia/src/extensions/forms/Visibility/Visibility.tsx b/packages/dnb-eufemia/src/extensions/forms/Visibility/Visibility.tsx
index 3d921669665..c5b57ab6ab5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Visibility/Visibility.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Visibility/Visibility.tsx
@@ -21,7 +21,7 @@ export type Props = {
   children: React.ReactNode
 }
 
-export default function Visibility({
+function Visibility({
   visible,
   pathDefined,
   pathUndefined,
@@ -81,3 +81,6 @@ export default function Visibility({
 
   return <>{children}</>
 }
+
+Visibility._supportsEufemiaSpacingProps = true
+export default Visibility
diff --git a/yarn.lock b/yarn.lock
index cad09372504..23797b2ae64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2574,6 +2574,7 @@ __metadata:
     "@emotion/styled": 11.11.0
     "@rollup/plugin-babel": 6.0.3
     "@rollup/plugin-commonjs": 24.0.1
+    "@rollup/plugin-json": 6.0.0
     "@rollup/plugin-node-resolve": 15.0.1
     "@rollup/plugin-replace": 5.0.2
     "@semantic-release/changelog": 6.0.2
@@ -5153,6 +5154,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-json@npm:6.0.0":
+  version: 6.0.0
+  resolution: "@rollup/plugin-json@npm:6.0.0"
+  dependencies:
+    "@rollup/pluginutils": ^5.0.1
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 77cfc941edaf77a5307977704ffaba706d83bea66f265b2b68f14be2a0af6d08b0fb1b04fdd773146c84cc70938ff64b00ae946808fd6ac057058af824d78128
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-node-resolve@npm:15.0.1":
   version: 15.0.1
   resolution: "@rollup/plugin-node-resolve@npm:15.0.1"