diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/assets/FuturaStd-Bold.otf b/packages/create-mechanic/function-examples/adaptive-grid/function/assets/FuturaStd-Bold.otf
deleted file mode 100755
index dc253841..00000000
Binary files a/packages/create-mechanic/function-examples/adaptive-grid/function/assets/FuturaStd-Bold.otf and /dev/null differ
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js b/packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js
index 21a54253..93ea7bb2 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js
+++ b/packages/create-mechanic/function-examples/adaptive-grid/function/components/Column.js
@@ -4,7 +4,7 @@ export const Column = ({ width, height, x, y, showGrid, children }) => {
   return (
     <>
       <foreignObject width={width} height={height} x={x} y={y}>
-        <div className={"column"}>{children}</div>
+        <div className="column">{children}</div>
       </foreignObject>
 
       {showGrid && (
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js b/packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js
index 24c13021..b6b2b256 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js
+++ b/packages/create-mechanic/function-examples/adaptive-grid/function/components/Image.js
@@ -11,7 +11,7 @@ export const Image = ({
   height,
   gutterRatio,
   filterOpacity,
-  gridColor,
+  gridColor
 }) => {
   const imageHref = image ? (href ? href : "") : defaultUrl;
 
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js b/packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js
index ee6e8a9a..cc39c1db 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js
+++ b/packages/create-mechanic/function-examples/adaptive-grid/function/hooks.js
@@ -10,7 +10,7 @@ export const usePotentialRandomValue = (
   return value.current;
 };
 
-export const useImageHref = (image) => {
+export const useImageHref = image => {
   const [href, setHref] = useState("");
 
   useEffect(() => {
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/index.js b/packages/create-mechanic/function-examples/adaptive-grid/function/index.js
index 0419c91c..e3b2fd62 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/function/index.js
+++ b/packages/create-mechanic/function-examples/adaptive-grid/function/index.js
@@ -7,7 +7,7 @@ import {
   getRandomInt,
   getRandomSign,
   getRandomColor,
-  brightnessByColor,
+  brightnessByColor
 } from "./utils";
 
 import "./styles.css";
@@ -27,7 +27,7 @@ export const handler = ({ inputs, mechanic }) => {
     title,
     image,
     filterOpacity,
-    titleSizeAdjust,
+    titleSizeAdjust
   } = inputs;
 
   const canvasRatio = width / height;
@@ -101,12 +101,12 @@ export const handler = ({ inputs, mechanic }) => {
     canvasRatio >= 0.75
       ? twoWidth + gutterRatio
       : twoWidth + gutterRatio * 0.5 + borderRatio,
-    threeWidth + borderRatio + borderRatio * 0.5,
+    threeWidth + borderRatio + borderRatio * 0.5
   ];
   const chooseX = [
     0,
     borderRatio + gutterRatio * 0.5 + oneWidth,
-    borderRatio + gutterRatio * 1.5 + oneWidth + twoWidth,
+    borderRatio + gutterRatio * 1.5 + oneWidth + twoWidth
   ];
   const cropWidth = chooseW[imageColumn - 1];
   const cropX = chooseX[imageColumn - 1];
@@ -134,7 +134,7 @@ export const handler = ({ inputs, mechanic }) => {
     fontFamily: "Object Sans",
     whiteSpace: "pre-wrap",
     overflowWrap: "anywhere",
-    hyphens: "auto",
+    hyphens: "auto"
   };
 
   const textStyle = {
@@ -143,7 +143,7 @@ export const handler = ({ inputs, mechanic }) => {
     fontFamily: "Object Sans",
     whiteSpace: "pre-wrap",
     overflowWrap: "anywhere",
-    hyphens: "auto",
+    hyphens: "auto"
   };
 
   const href = useImageHref(image);
@@ -249,11 +249,11 @@ export const handler = ({ inputs, mechanic }) => {
 export const inputs = {
   width: {
     type: "number",
-    default: 1000,
+    default: 1000
   },
   height: {
     type: "number",
-    default: 1000,
+    default: 1000
   },
   randomRatio: {
     type: "groupToggle",
@@ -266,7 +266,7 @@ export const inputs = {
         default: 2,
         min: 1,
         max: 10,
-        step: 1,
+        step: 1
       },
       columnTwoRatio: {
         type: "number",
@@ -274,7 +274,7 @@ export const inputs = {
         default: 2,
         min: 1,
         max: 10,
-        step: 1,
+        step: 1
       },
       columnThreeRatio: {
         type: "number",
@@ -282,7 +282,7 @@ export const inputs = {
         default: 1,
         min: 1,
         max: 10,
-        step: 1,
+        step: 1
       },
       border: {
         type: "number",
@@ -290,7 +290,7 @@ export const inputs = {
         default: 15,
         min: 1,
         max: 100,
-        step: 1,
+        step: 1
       },
       gutter: {
         type: "number",
@@ -298,7 +298,7 @@ export const inputs = {
         default: 15,
         min: 1,
         max: 100,
-        step: 1,
+        step: 1
       },
       imageColumn: {
         type: "number",
@@ -306,9 +306,9 @@ export const inputs = {
         default: 1,
         min: 1,
         max: 3,
-        step: 1,
-      },
-    },
+        step: 1
+      }
+    }
   },
   randomColor: {
     type: "groupToggle",
@@ -318,23 +318,23 @@ export const inputs = {
       backgroundColor: {
         type: "color",
         model: "hex",
-        default: "#000000",
+        default: "#000000"
       },
       textColor: {
         type: "color",
         model: "hex",
-        default: "#ffffff",
+        default: "#ffffff"
       },
       titleColor: {
         type: "color",
         model: "hex",
-        default: "#E94825",
-      },
-    },
+        default: "#E94825"
+      }
+    }
   },
   image: {
     type: "image",
-    multiple: false,
+    multiple: false
   },
   filterOpacity: {
     type: "number",
@@ -342,11 +342,11 @@ export const inputs = {
     min: 0,
     max: 100,
     step: 1,
-    slider: true,
+    slider: true
   },
   textSize: {
     type: "number",
-    default: 20,
+    default: 20
   },
   titleSizeAdjust: {
     type: "number",
@@ -354,58 +354,58 @@ export const inputs = {
     default: 0,
     min: -5,
     max: 15,
-    step: 1,
+    step: 1
   },
   title: {
     type: "text",
-    default: "Mechanic",
+    default: "Mechanic"
   },
   textOne: {
     type: "text",
-    default: "MUNUS SHIH",
+    default: "MUNUS SHIH"
   },
   textTwo: {
     type: "text",
-    default: "MECHANIC.DESIGN INFO@MECHANIC.DESIGN",
+    default: "MECHANIC.DESIGN INFO@MECHANIC.DESIGN"
   },
   textThree: {
     type: "text",
-    default: "@MECHANIC 781 12TH ST, 8A, NEW YORK, NY 10003",
+    default: "@MECHANIC 781 12TH ST, 8A, NEW YORK, NY 10003"
   },
   textFour: {
     type: "text",
-    default: "MUNUS@MECHANIC.DESIGN",
+    default: "MUNUS@MECHANIC.DESIGN"
   },
   grid: {
     type: "boolean",
-    default: false,
-  },
+    default: false
+  }
 };
 
 export const presets = {
   "Instagram Story": {
     width: 1080,
-    height: 1920,
+    height: 1920
   },
   "Instagram Post": {
     width: 1080,
-    height: 1080,
+    height: 1080
   },
   Poster: {
     width: 812,
-    height: 1148,
+    height: 1148
   },
   Banner: {
     width: 1640,
-    height: 624,
+    height: 624
   },
   Ticket: {
     width: 394,
-    height: 1126,
-  },
+    height: 1126
+  }
 };
 
 export const settings = {
   engine: require("@mechanic-design/engine-react"),
-  showMultipleExports: true,
+  showMultipleExports: true
 };
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/function/styles.css b/packages/create-mechanic/function-examples/adaptive-grid/function/styles.css
index 3c85337e..1d1b1791 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/function/styles.css
+++ b/packages/create-mechanic/function-examples/adaptive-grid/function/styles.css
@@ -10,73 +10,54 @@
  * or check ./assets/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf
  * Alex Slobzheninov https://www.behance.net/slobzheninov
  * ---------------------------------------------------------------------------
- */
+*/
 
 @font-face {
-    font-family: "Futura";
-    src: url("./assets/FuturaStd-Bold.otf") format("opentype");
+  font-family: "Object Sans";
+  src: url("./assets/PPObjectSans-Regular.otf") format("opentype");
 }
 
 @font-face {
-    font-family: "Object Sans";
-    src: url("./assets/PPObjectSans-Regular.otf") format("opentype");
+  font-family: "Object Sans Italic";
+  src: url("./assets/PPObjectSans-Slanted.otf") format("opentype");
+  font-style: italic;
 }
 
 @font-face {
-    font-family: "Object Sans Italic";
-    src: url("./assets/PPObjectSans-Slanted.otf") format("opentype");
-    font-style: italic;
+  font-family: "Object Sans Heavy";
+  src: url("./assets/PPObjectSans-Heavy.otf") format("opentype");
+  font-weight: bold;
 }
 
 @font-face {
-    font-family: "Object Sans Heavy";
-    src: url("./assets/PPObjectSans-Heavy.otf") format("opentype");
-    font-weight: bold;
+  font-family: "Object Sans Slanted";
+  src: url("./assets/PPObjectSans-HeavySlanted.otf") format("opentype");
+  font-weight: bold;
+  font-style: italic;
 }
 
-@font-face {
-    font-family: "Object Sans Slanted";
-    src: url("./assets/PPObjectSans-HeavySlanted.otf") format("opentype");
-    font-weight: bold;
-    font-style: italic;
-}
-
-*{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-.gutter{
-    background:white;
-}
-
-.darkGrid {
-    outline: #000 solid 1px;
-    outline-offset: -1px;
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
-/* 
-.lightGrid {
-    outline: #fff solid 1px;
-    outline-offset: -1px;
-} */
 
-.column{
-    height: 100%;
-    position: relative;
-    padding: 10px;
+.column {
+  height: 100%;
+  position: relative;
+  padding: 10px;
 }
 
 .top {
-    position: absolute;
-    top: 0;
-    padding-top: 10px;
-    padding-right: 10px;
+  position: absolute;
+  top: 0;
+  padding-top: 10px;
+  padding-right: 10px;
 }
 
 .bottom {
-    position: absolute;
-    bottom: 0;
-    padding-bottom: 10px;
-    padding-right: 10px;
-}
\ No newline at end of file
+  position: absolute;
+  bottom: 0;
+  padding-bottom: 10px;
+  padding-right: 10px;
+}
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/index.js b/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/index.js
index 80cdfd46..ee84687c 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/index.js
+++ b/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/index.js
@@ -3,31 +3,31 @@ import {
   BooleanInput,
   NumberInput,
   OptionInput,
-  ColorInput,
+  ColorInput
 } from "@mechanic-design/ui-components";
 
 import * as css from "./style.module.css";
 
 export const typeName = "groupToggle";
 
-export const initValue = (input) => ({
+export const initValue = input => ({
   show: input.default,
   ...Object.fromEntries(
     Object.entries(input.inputs).map(([name, input]) => [name, input.default])
-  ),
+  )
 });
 
 export const prepareValue = (value, input) => {
   const v =
     value === undefined ||
     value === null ||
-    !Object.keys(input.inputs).every((k) => value.hasOwnProperty(k))
+    !Object.keys(input.inputs).every(k => value.hasOwnProperty(k))
       ? initValue(input)
       : value;
   return v;
 };
 
-export const Input = (props) => {
+export const Input = props => {
   const { name, values, inputDef, onChange } = props;
   const { show, ...value } = values[name] ?? initValue(inputDef);
 
diff --git a/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/style.module.css b/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/style.module.css
index 16570dde..4bb9fdfa 100644
--- a/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/style.module.css
+++ b/packages/create-mechanic/function-examples/adaptive-grid/inputs/group/style.module.css
@@ -1,7 +1,7 @@
 .root {
-    margin: 1em 0;
+  margin: 1em 0;
 }
 
 .toggle {
-    margin: 1em 0;
+  margin: 1em 0;
 }
\ No newline at end of file