diff --git a/README.md b/README.md
index 3467692e5..52a9ba334 100644
--- a/README.md
+++ b/README.md
@@ -417,6 +417,7 @@ export default function Example() {
 }
 ```
 
+
 <br />
 
 ## @material-tailwind/html
diff --git a/packages/material-tailwind-react/src/types/generic.ts b/packages/material-tailwind-react/src/types/generic.ts
index 48bc734a1..2d0f5a473 100644
--- a/packages/material-tailwind-react/src/types/generic.ts
+++ b/packages/material-tailwind-react/src/types/generic.ts
@@ -68,6 +68,7 @@ export const propTypesColors: string[] = [
 ];
 
 export const propTypesAnimation = PropTypes.shape({
+  initial: PropTypes.instanceOf(Object),
   mount: PropTypes.instanceOf(Object),
   unmount: PropTypes.instanceOf(Object),
 });
@@ -94,7 +95,7 @@ export const propTypesOffsetType = PropTypes.oneOfType([
   PropTypes.shape({
     mainAxis: PropTypes.number,
     crossAxis: PropTypes.number,
-    alignmentAxis: PropTypes.number,
+    alignmentAxis: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null])]),
   }),
 ]);
 
@@ -111,4 +112,4 @@ export const propTypesPlacements: string[] = [
   "left-start",
   "left",
   "left-end",
-];
+];
\ No newline at end of file
diff --git a/utils/copy-to-clipboard.ts b/utils/copy-to-clipboard.ts
index f7b23c3db..42b075e84 100644
--- a/utils/copy-to-clipboard.ts
+++ b/utils/copy-to-clipboard.ts
@@ -2,21 +2,19 @@ export function copyToClipboard(text) {
   return new Promise<void>((resolve, reject) => {
     if (navigator?.clipboard) {
       const cb = navigator.clipboard;
-
       cb.writeText(text).then(resolve).catch(reject);
     } else {
       try {
         const body = document.querySelector("body");
-
         const textarea = document.createElement("textarea");
-        body?.appendChild(textarea);
-
         textarea.value = text;
+        textarea.readOnly = true;
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        body?.appendChild(textarea);
         textarea.select();
         document.execCommand("copy");
-
         body?.removeChild(textarea);
-
         resolve();
       } catch (e) {
         reject(e);
@@ -24,5 +22,4 @@ export function copyToClipboard(text) {
     }
   });
 }
-
 export default copyToClipboard;
diff --git a/utils/filter-array.ts b/utils/filter-array.ts
index 06b7a9616..eff17c9c3 100644
--- a/utils/filter-array.ts
+++ b/utils/filter-array.ts
@@ -3,5 +3,5 @@ export default function filterArray(array) {
     return flat.concat(
       Array.isArray(toFlatten) ? filterArray(toFlatten) : toFlatten
     );
-  }, []);
+  }, []).filter((item) => item !== undefined && item !== null);
 }
diff --git a/utils/format-number.ts b/utils/format-number.ts
index fc5a3f5e5..7b22f214a 100644
--- a/utils/format-number.ts
+++ b/utils/format-number.ts
@@ -1,22 +1,21 @@
-export function formatNumber(number, decPlaces) {
-  decPlaces = Math.pow(10, decPlaces);
+export function formatNumber(number, decPlaces = 0) {
+  if (typeof number !== "number" || isNaN(number)) return number;
 
+  const factor = Math.pow(10, decPlaces);
   const abbrev = ["K", "M", "B", "T"];
 
   for (let i = abbrev.length - 1; i >= 0; i--) {
-    var size = Math.pow(10, (i + 1) * 3);
+    const size = Math.pow(10, (i + 1) * 3);
 
-    if (size <= number) {
-      number = Math.round((number * decPlaces) / size) / decPlaces;
+    if (number >= size) {
+      let formatted = Math.round((number * factor) / size) / factor;
 
-      if (number == 1000 && i < abbrev.length - 1) {
-        number = 1;
+      if (formatted === 1000 && i < abbrev.length - 1) {
+        formatted = 1;
         i++;
       }
 
-      number += abbrev[i];
-
-      break;
+      return formatted + abbrev[i];
     }
   }
 
diff --git a/utils/fpixel.js b/utils/fpixel.js
index 49a258357..1a916ded3 100644
--- a/utils/fpixel.js
+++ b/utils/fpixel.js
@@ -1,4 +1,4 @@
-export const FB_PIXEL_ID = '111649226022273';
+export const FB_PIXEL_ID = '';
 
 export const pageview = () => {
   window.fbq('track', 'PageView')
@@ -7,4 +7,4 @@ export const pageview = () => {
 // https://developers.facebook.com/docs/facebook-pixel/advanced/
 export const event = (name, options = {}) => {
   window.fbq('track', name, options)
-}
\ No newline at end of file
+}
diff --git a/utils/get-directories-and-files.ts b/utils/get-directories-and-files.ts
index a72182802..a5c96d501 100644
--- a/utils/get-directories-and-files.ts
+++ b/utils/get-directories-and-files.ts
@@ -1,16 +1,17 @@
-import { readdirSync } from "fs";
+import { readdirSync, statSync } from "fs";
 import path from "path";
-
 export default function getDirectoriesAndFile(dir: string) {
-  return dir === "documentation/.DS_Store"
-    ? null
-    : readdirSync(dir)
-        .map((file) => {
-          if (path.extname(file) === ".mdx") {
-            return [dir, file.replace(".mdx", "")];
-          } else {
-            return getDirectoriesAndFile(path.join(dir, file));
-          }
-        })
-        .filter((dir) => dir !== undefined);
+  if (path.basename(dir) === ".DS_Store") return null;
+  return readdirSync(dir)
+    .map((file) => {
+      const filePath = path.join(dir, file);
+      if (path.extname(file) === ".mdx") {
+        return [dir, file.replace(".mdx", "")];
+      } else if (statSync(filePath).isDirectory()) {
+        return getDirectoriesAndFile(filePath);
+      } else {
+        return undefined;
+      }
+    })
+    .filter((dir) => dir !== undefined && dir !== null);
 }
diff --git a/utils/rehype-pretty-code-config.ts b/utils/rehype-pretty-code-config.ts
index fde299150..48cfc7589 100644
--- a/utils/rehype-pretty-code-config.ts
+++ b/utils/rehype-pretty-code-config.ts
@@ -1,18 +1,25 @@
 export const rehypePrettyCodeConfig = {
   theme: "github-dark",
   bypassInlineCode: true,
+
   onVisitLine(node) {
-    if (node.children.length === 0) {
+    if (!node.children?.length) {
       node.children = [{ type: "text", value: " " }];
     }
   },
+
   onVisitHighlightedLine(node) {
-    node.properties.className = [...(node.properties.className ?? []), "highlighted"];
+    const props = (node.properties ??= {});
+    props.className = [].concat(props.className ?? [], "highlighted");
   },
+
   onVisitHighlightedChars(node) {
-    node.properties.className = ["word"];
+    const props = (node.properties ??= {});
+    props.className = [].concat(props.className ?? [], "word");
   },
+
   keepBackground: false,
 };
 
 export default rehypePrettyCodeConfig;
+
diff --git a/widgets/color-palette.tsx b/widgets/color-palette.tsx
index 639270138..1c386d80a 100644
--- a/widgets/color-palette.tsx
+++ b/widgets/color-palette.tsx
@@ -1,9 +1,6 @@
 interface Props {
   name: string;
-  colors: {
-    name: number;
-    hex: string;
-  };
+  colors: Record<string, string>;
 }
 
 export function ColorPalette({ name, colors }: Props) {
@@ -14,28 +11,24 @@ export function ColorPalette({ name, colors }: Props) {
           {name}
         </div>
       </div>
-      <div className="grid min-w-0 flex-1 grid-cols-5 gap-x-4 gap-y-3 2xl:grid-cols-10 2xl:gap-x-2">
-        {Object.entries(colors).map((color, key) => {
-          const level = color[0];
-          const hex = color[1] as string;
 
-          return (
-            <div key={key} className="space-y-1.5">
-              <div
-                className="h-10 w-full rounded"
-                style={{ backgroundColor: hex }}
-              />
-              <div className="px-0.5 md:flex md:justify-between md:space-x-2 2xl:block 2xl:space-x-0">
-                <div className="w-6 font-medium text-blue-gray-900 2xl:w-full">
-                  {level}
-                </div>
-                <div className="font-mono lowercase text-blue-gray-500">
-                  {hex}
-                </div>
+      <div className="grid min-w-0 flex-1 grid-cols-5 gap-x-4 gap-y-3 2xl:grid-cols-10 2xl:gap-x-2">
+        {Object.entries(colors).map(([level, hex]) => (
+          <div key={level} className="space-y-1.5">
+            <div
+              className="h-10 w-full rounded"
+              style={{ backgroundColor: hex }}
+            />
+            <div className="px-0.5 md:flex md:justify-between md:space-x-2 2xl:block 2xl:space-x-0">
+              <div className="w-6 font-medium text-blue-gray-900 2xl:w-full">
+                {level}
+              </div>
+              <div className="font-mono lowercase text-blue-gray-500">
+                {hex}
               </div>
             </div>
-          );
-        })}
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/widgets/search.tsx b/widgets/search.tsx
index 4b9c13e4c..fefaa4361 100644
--- a/widgets/search.tsx
+++ b/widgets/search.tsx
@@ -1,16 +1,12 @@
 import React from "react";
 import { DocSearch } from "@docsearch/react";
 
-const APP_ID = "37KXIBLNGX";
-const INDEX_NAME = "material-tailwind";
-const API_KEY = "8cc5688018e14bad2a2528eea41fbb35";
-
 export function Search() {
   return (
     <DocSearch
-      indexName={INDEX_NAME}
-      apiKey={API_KEY}
-      appId={APP_ID}
+      indexName={process.env.REACT_APP_INDEX_NAME}
+      apiKey={process.env.REACT_APP_API_KEY}
+      appId={process.env.REACT_APP_APP_ID}
       placeholder="Search..."
     />
   );