Register TwentySix.Cloud Components (#1)

.env

@@ -1,2 +1,2 @@
 # https://www.builder.io/c/docs/using-your-api-key
-# NEXT_PUBLIC_BUILDER_API_KEY=fd4e1a4bdbc240f0b17c0e77aee16d01
+# NEXT_PUBLIC_BUILDER_API_KEY=5da369ee55b9465c91cf36605e655931

.npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

next.config.mjs

@@ -1,13 +1,49 @@
 import BuilderDevTools from "@builder.io/dev-tools/next";
+import twin from "babel-plugin-twin";
+import macros from "babel-plugin-macros";
+import styledComponents from "babel-plugin-styled-components";
+import syntaxTypescript from "@babel/plugin-syntax-typescript";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = BuilderDevTools()(
   BuilderDevTools()({
     reactStrictMode: true,
-    output: 'export',
+    output: "export",
     images: {
       unoptimized: true,
     },
+    webpack: (config, options) => {
+      config.module.rules.push({
+        test: /\.(tsx|ts)$/,
+        use: [
+          options.defaultLoaders.babel,
+          {
+            loader: "babel-loader",
+            options: {
+              plugins: [
+                twin,
+                macros,
+                [styledComponents, { ssr: true, displayName: true }],
+                [syntaxTypescript, { isTSX: true }],
+              ],
+            },
+          },
+        ],
+      });
+
+      config.resolve.fallback = {
+        ...(config.resolve.fallback || {}),
+        fs: false,
+        module: false,
+        path: false,
+        os: false,
+        crypto: false,
+        perf_hooks: false,
+        v8: false,
+      };
+
+      return config;
+    },
   })
 );