diff --git a/packages/desktop/components/filter/FilterItem.svelte b/packages/desktop/components/filter/FilterItem.svelte
index 9d8acd5d2f1..57a0bd42304 100644
--- a/packages/desktop/components/filter/FilterItem.svelte
+++ b/packages/desktop/components/filter/FilterItem.svelte
@@ -66,7 +66,7 @@
 
 <style lang="scss">
     filter-item {
-        :global(box) {
+        :global(box-content) {
             @apply p-2;
         }
 
diff --git a/packages/desktop/components/popups/MintNftConfirmationPopup.svelte b/packages/desktop/components/popups/MintNftConfirmationPopup.svelte
index bab7511570c..74d5ce8647e 100644
--- a/packages/desktop/components/popups/MintNftConfirmationPopup.svelte
+++ b/packages/desktop/components/popups/MintNftConfirmationPopup.svelte
@@ -129,7 +129,7 @@
                     <KeyValueBox
                         keyText={localize('general.metadata')}
                         valueText={JSON.stringify(irc27Metadata, null, '\t')}
-                        classes="whitespace-pre-wrap"
+                        isPreText
                     />
                 {/if}
             </activity-details>
diff --git a/packages/shared/components/boxes/AddressBox.svelte b/packages/shared/components/boxes/AddressBox.svelte
index e5cc93e3bf2..25726827742 100644
--- a/packages/shared/components/boxes/AddressBox.svelte
+++ b/packages/shared/components/boxes/AddressBox.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { Text, CopyableBox, FontWeight } from 'shared/components'
+    import { Text, CopyableBox, FontWeight, TextType } from 'shared/components'
 
-    export let address = ''
-    export let isCopyable = false
-    export let fontSize = 'base'
+    export let address: string = ''
+    export let isCopyable: boolean = false
+    export let fontSize: string = 'base'
 
     let copyableBoxElement: CopyableBox
 
@@ -15,14 +15,14 @@
 {#if address}
     <CopyableBox bind:this={copyableBoxElement} col {isCopyable} value={address} clearBoxPadding {...$$restProps}>
         {#if address.length > 20}
-            <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
+            <Text type={TextType.pre} {fontSize} fontWeight={FontWeight.medium}>
                 {address.slice(0, address.length / 2)}
             </Text>
-            <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
+            <Text type={TextType.pre} {fontSize} fontWeight={FontWeight.medium}>
                 {address.slice(address.length / 2)}
             </Text>
         {:else}
-            <Text type="pre" {fontSize} fontWeight={FontWeight.medium}>
+            <Text type={TextType.pre} {fontSize} fontWeight={FontWeight.medium}>
                 {address}
             </Text>
         {/if}
diff --git a/packages/shared/components/boxes/Box.svelte b/packages/shared/components/boxes/Box.svelte
index 8e1d144e5ec..e58f004f5a0 100644
--- a/packages/shared/components/boxes/Box.svelte
+++ b/packages/shared/components/boxes/Box.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-    export let col = false
-    export let row = false
-    export let clearBackground = false
-    export let clearPadding = false
-    export let backgroundColor = 'gray-50'
-    export let darkBackgroundColor = 'gray-850'
-    export let classes = ''
+    export let col: boolean = false
+    export let row: boolean = false
+    export let clearBackground: boolean = false
+    export let clearPadding: boolean = false
+    export let backgroundColor: string = 'gray-50'
+    export let darkBackgroundColor: string = 'gray-850'
+    export let classes: string = ''
 </script>
 
-<box
-    class={`
-        w-full flex rounded-lg
-        ${col ? 'flex-col' : ''}
-        ${row ? 'flex-row' : ''}
-        ${clearPadding ? '' : 'px-4 py-4'}
-        ${backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}  
-        ${darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''}
-        ${classes}
-    `}
+<box-content
+    class="w-full flex rounded-lg
+    {clearPadding ? '' : 'px-4 py-4'}
+    {backgroundColor && !clearBackground ? 'bg-' + backgroundColor : ''}
+    {darkBackgroundColor && !clearBackground ? 'dark:bg-' + darkBackgroundColor : ''} {classes}"
+    class:flex-col={col}
+    class:flex-row={row}
 >
     <slot />
-</box>
+</box-content>
diff --git a/packages/shared/components/boxes/CopyableBox.svelte b/packages/shared/components/boxes/CopyableBox.svelte
index 9c339b5428c..aca769c5212 100644
--- a/packages/shared/components/boxes/CopyableBox.svelte
+++ b/packages/shared/components/boxes/CopyableBox.svelte
@@ -5,12 +5,12 @@
     import { localize } from '@core/i18n'
     import { onDestroy } from 'svelte'
 
-    export let value = ''
-    export let isCopyable = true
-    export let clearPadding = false
-    export let clearBoxPadding = false
-    export let offset: number = undefined
-    export let classes = ''
+    export let value: string = ''
+    export let isCopyable: boolean = true
+    export let clearPadding: boolean = false
+    export let clearBoxPadding: boolean = false
+    export let offset: number | undefined = undefined
+    export let classes: string = ''
 
     let tooltipAnchor: HTMLElement
     let showTooltip = false
diff --git a/packages/shared/components/boxes/KeyValueBox.svelte b/packages/shared/components/boxes/KeyValueBox.svelte
index 87359de5124..f02377e1b0f 100644
--- a/packages/shared/components/boxes/KeyValueBox.svelte
+++ b/packages/shared/components/boxes/KeyValueBox.svelte
@@ -16,7 +16,7 @@
     export let tooltipText: string = ''
     export let shrink: boolean = false
     export let isPreText: boolean = false
-    export let maxHeight: number = undefined
+    export let maxHeight: number | undefined = undefined
     export let isLoading: boolean = false
     export let outline: boolean = false