fix(builder): 🐛 Add public env var in runtime config

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -17,6 +17,11 @@ import { BaseEmoji, emojiIndex } from 'emoji-mart'
 import { emojis } from './emojis'
 import { Input } from '../Textbox/Input'
 import { isEmpty } from 'utils'
+import getConfig from 'next/config'
+
+const {
+  publicRuntimeConfig: { NEXT_PUBLIC_GIPHY_API_KEY },
+} = getConfig()
 
 type Props = {
   url?: string
@@ -183,12 +188,10 @@ const EmojiContent = ({
 }
 
 const GiphyContent = ({ onNewUrl }: ContentProps) => {
-  if (isEmpty(process.env.NEXT_PUBLIC_GIPHY_API_KEY))
+  if (isEmpty(NEXT_PUBLIC_GIPHY_API_KEY))
     return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
   return (
-    <SearchContextManager
-      apiKey={process.env.NEXT_PUBLIC_GIPHY_API_KEY as string}
-    >
+    <SearchContextManager apiKey={NEXT_PUBLIC_GIPHY_API_KEY}>
       <GiphySearch onSubmit={onNewUrl} />
     </SearchContextManager>
   )

apps/builder/components/theme/GeneralSettings/FontSelector/FontSelector.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Text, HStack } from '@chakra-ui/react'
 import { SearchableDropdown } from '../../../shared/SearchableDropdown'
 import { isEmpty } from 'utils'
+import getConfig from 'next/config'
 
 type FontSelectorProps = {
   activeFont?: string
@@ -20,9 +21,12 @@ export const FontSelector = ({
   }, [])
 
   const fetchPopularFonts = async () => {
-    if (isEmpty(process.env.NEXT_PUBLIC_GOOGLE_API_KEY)) return []
+    const {
+      publicRuntimeConfig: { NEXT_PUBLIC_GOOGLE_API_KEY },
+    } = getConfig()
+    if (isEmpty(NEXT_PUBLIC_GOOGLE_API_KEY)) return []
     const response = await fetch(
-      `https://www.googleapis.com/webfonts/v1/webfonts?key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}&sort=popularity`
+      `https://www.googleapis.com/webfonts/v1/webfonts?key=${NEXT_PUBLIC_GOOGLE_API_KEY}&sort=popularity`
     )
     return (await response.json()).items.map(
       (item: { family: string }) => item.family