diff --git a/packages/amplify-ui-codegen-schema/lib/types/index.ts b/packages/amplify-ui-codegen-schema/lib/types/index.ts
index 2fd6cc053..3db0cae72 100644
--- a/packages/amplify-ui-codegen-schema/lib/types/index.ts
+++ b/packages/amplify-ui-codegen-schema/lib/types/index.ts
@@ -1,3 +1,5 @@
+import theme from './theme';
+
 export type FigmaMetadata = {
   /**
    * The document URL for the figma document
@@ -422,3 +424,9 @@ export type StudioComponentStorageBindingProperty = {
   bucket: string;
   key?: string;
 };
+
+type DeepPartial<T> = {
+  [K in keyof T]?: DeepPartial<T[K]>;
+};
+
+export type StudioTheme = DeepPartial<typeof theme>;
diff --git a/packages/amplify-ui-codegen-schema/lib/types/theme.ts b/packages/amplify-ui-codegen-schema/lib/types/theme.ts
new file mode 100644
index 000000000..208d1ff0e
--- /dev/null
+++ b/packages/amplify-ui-codegen-schema/lib/types/theme.ts
@@ -0,0 +1,835 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 27 Sep 2021 16:06:22 GMT
+ */
+
+export default {
+  "components": {
+    "alert": {
+      "backgroundColor": "hsl(210, 5%, 90%)",
+      "padding": "0.75rem 1rem",
+      "info": {
+        "backgroundColor": "hsl(220, 85%, 85%)"
+      },
+      "error": {
+        "backgroundColor": "hsl(0, 75%, 85%)"
+      },
+      "warning": {
+        "backgroundColor": "hsl(30, 75%, 85%)"
+      },
+      "success": {
+        "backgroundColor": "hsl(130, 75%, 85%)"
+      }
+    },
+    "badge": {
+      "lineHeight": 1,
+      "fontWeight": 600,
+      "fontSize": "0.875rem",
+      "textAlign": "center",
+      "padding": "0.5rem 0.75rem",
+      "backgroundColor": "hsl(210, 5%, 90%)",
+      "borderRadius": "9999px",
+      "info": {
+        "backgroundColor": "hsl(220, 85%, 85%)"
+      },
+      "warning": {
+        "backgroundColor": "hsl(30, 75%, 85%)"
+      },
+      "success": {
+        "backgroundColor": "hsl(130, 75%, 85%)"
+      },
+      "error": {
+        "backgroundColor": "hsl(0, 75%, 85%)"
+      },
+      "small": {
+        "fontSize": "0.75rem",
+        "padding": "0.25rem 0.5rem"
+      },
+      "large": {
+        "fontSize": "1rem",
+        "padding": "0.75rem 1rem"
+      }
+    },
+    "button": {
+      "fontWeight": "bold",
+      "textAlign": "center",
+      "borderRadius": "0.25rem",
+      "transitionDuration": "250ms",
+      "fontSize": "1rem",
+      "lineHeight": "1rem",
+      "padding": "0.75rem 1rem",
+      "borderColor": "hsl(190, 75%, 85%)",
+      "borderWidth": "1px",
+      "borderStyle": "solid",
+      "color": "hsl(190, 95%, 30%)",
+      "_hover": {
+        "color": "hsl(190, 100%, 15%)",
+        "backgroundColor": "hsl(190, 75%, 95%)",
+        "borderColor": "hsl(190, 50%, 50%)"
+      },
+      "_focus": {
+        "color": "hsl(190, 100%, 15%)",
+        "borderColor": "hsl(190, 100%, 15%)",
+        "boxShadow": "hsl(190, 100%, 15%) 0px 0px 0px 1px"
+      },
+      "_active": {
+        "color": "#fff",
+        "backgroundColor": "hsl(190, 100%, 15%)",
+        "borderColor": "hsl(190, 100%, 15%)"
+      },
+      "_loading": {
+        "color": "hsl(210, 6%, 70%)",
+        "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 5%, 90%)"
+      },
+      "_disabled": {
+        "color": "hsl(210, 6%, 70%)",
+        "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 5%, 90%)"
+      },
+      "primary": {
+        "borderWidth": 0,
+        "backgroundColor": "hsl(190, 95%, 30%)",
+        "color": "#fff",
+        "_disabled": {
+          "backgroundColor": "hsl(210, 5%, 90%)",
+          "color": "hsl(210, 6%, 70%)"
+        },
+        "_loading": {
+          "backgroundColor": "hsl(210, 5%, 90%)",
+          "color": "hsl(210, 6%, 70%)"
+        },
+        "_hover": {
+          "backgroundColor": "hsl(190, 100%, 20%)"
+        },
+        "_focus": {
+          "backgroundColor": "hsl(190, 100%, 20%)"
+        },
+        "_active": {
+          "backgroundColor": "hsl(190, 100%, 15%)"
+        }
+      },
+      "link": {
+        "borderWidth": 0,
+        "backgroundColor": "transparent",
+        "color": "hsl(190, 95%, 30%)",
+        "_hover": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_focus": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_active": {
+          "color": "hsl(190, 100%, 15%)"
+        },
+        "_disabled": {
+          "color": "hsl(210, 6%, 70%)"
+        },
+        "_loading": {
+          "color": "hsl(210, 6%, 70%)"
+        }
+      },
+      "small": {
+        "fontSize": "0.875rem",
+        "lineHeight": "0.875rem",
+        "padding": "0.5rem 0.75rem"
+      },
+      "large": {
+        "fontSize": "1.25rem",
+        "lineHeight": "1.25rem",
+        "padding": "1rem 1.5rem"
+      }
+    },
+    "card": {
+      "backgroundColor": "#fff",
+      "borderWidth": "1px",
+      "borderStyle": "solid",
+      "borderColor": "hsl(210, 6%, 70%)",
+      "boxShadow": "0 2px 6px hsl(210, 50%, 10%, 0.15)",
+      "padding": "1rem"
+    },
+    "divider": {
+      "borderStyle": "solid",
+      "borderColor": "hsl(210, 6%, 70%)",
+      "borderWidth": "2px",
+      "small": {
+        "borderWidth": "1px"
+      },
+      "large": {
+        "borderWidth": "3px"
+      },
+      "opacity": "0.6"
+    },
+    "field": {
+      "gap": "0.5rem",
+      "fontSize": "1rem",
+      "small": {
+        "gap": "0.25rem",
+        "fontSize": "0.875rem"
+      },
+      "large": {
+        "gap": "0.75rem",
+        "fontSize": "1.25rem"
+      }
+    },
+    "fieldcontrol": {
+      "borderStyle": "solid",
+      "borderColor": "hsl(210, 6%, 70%)",
+      "borderWidth": "1px",
+      "borderRadius": "0.25rem",
+      "padding": "0.5rem 1rem",
+      "fontSize": "1rem",
+      "lineHeight": "2.25",
+      "transitionDuration": "250ms",
+      "outlineColor": "transparent",
+      "outlineStyle": "solid",
+      "outlineWidth": "2px",
+      "outlineOffset": "2px",
+      "small": {
+        "fontSize": "0.875rem",
+        "padding": "0.5rem 0.75rem",
+        "lineHeight": "2"
+      },
+      "large": {
+        "fontSize": "1.25rem",
+        "padding": "1rem 1.5rem",
+        "lineHeight": "2.5"
+      },
+      "quiet": {
+        "borderStyle": "none",
+        "borderBlockEnd": "1px solid hsl(210, 6%, 70%)",
+        "borderInlineStart": "none",
+        "borderInlineEnd": "none",
+        "borderBlockStart": "none",
+        "borderRadius": "0",
+        "_focus": {
+          "borderBlockEndColor": "hsl(190, 100%, 15%)",
+          "boxShadow": "0 1px hsl(190, 100%, 15%)"
+        },
+        "_error": {
+          "borderBlockEndColor": "hsl(0, 95%, 30%)",
+          "_focus": {
+            "boxShadow": "0 1px hsl(0, 95%, 30%)"
+          }
+        }
+      },
+      "_focus": {
+        "borderColor": "hsl(190, 100%, 15%)",
+        "boxShadow": "0px 0px 0px 1px hsl(190, 100%, 15%)"
+      },
+      "_disabled": {
+        "cursor": "not-allowed",
+        "borderColor": "transparent",
+        "backgroundColor": "hsl(210, 5%, 90%)"
+      },
+      "_error": {
+        "borderColor": "hsl(0, 95%, 30%)",
+        "_focus": {
+          "boxShadow": "0px 0px 0px 1px hsl(0, 95%, 30%)"
+        }
+      }
+    },
+    "fieldgroup": {
+      "gap": 0
+    },
+    "fieldmessages": {
+      "error": {
+        "color": "hsl(0, 95%, 30%)",
+        "fontSize": "0.875rem"
+      },
+      "description": {
+        "fontStyle": "italic",
+        "fontSize": "0.875rem"
+      }
+    },
+    "flex": {
+      "gap": "1rem",
+      "justifyContent": "normal",
+      "alignItems": "stretch",
+      "alignContent": "normal",
+      "flexWrap": "nowrap"
+    },
+    "heading": {
+      "1": {
+        "fontSize": "5rem",
+        "fontWeight": 300
+      },
+      "2": {
+        "fontSize": "3rem",
+        "fontWeight": 300
+      },
+      "3": {
+        "fontSize": "2rem",
+        "fontWeight": 400
+      },
+      "4": {
+        "fontSize": "1.5rem",
+        "fontWeight": 500
+      },
+      "5": {
+        "fontSize": "1.25rem",
+        "fontWeight": 600
+      },
+      "6": {
+        "fontSize": "1rem",
+        "fontWeight": 700
+      },
+      "color": "hsl(210, 50%, 10%)",
+      "lineHeight": 1.25
+    },
+    "icon": {
+      "lineHeight": 1,
+      "height": "1rem",
+      "large": {
+        "height": "1.25rem"
+      },
+      "small": {
+        "height": "0.875rem"
+      }
+    },
+    "image": {
+      "maxWidth": "100%",
+      "height": "auto",
+      "objectFit": "initial",
+      "objectPosition": "initial"
+    },
+    "link": {
+      "active": {
+        "color": "hsl(190, 100%, 15%)"
+      },
+      "color": "hsl(190, 95%, 30%)",
+      "focus": {
+        "color": "hsl(190, 100%, 20%)"
+      },
+      "hover": {
+        "color": "hsl(190, 100%, 20%)"
+      },
+      "large": {
+        "fontSize": "1.25rem"
+      },
+      "small": {
+        "fontSize": "0.875rem"
+      },
+      "visited": {
+        "color": "hsl(210, 6%, 70%)"
+      }
+    },
+    "pagination": {
+      "current": {
+        "color": "#fff",
+        "fontSize": "0.875rem",
+        "backgroundColor": "rgba(0, 0, 0, 0.4)"
+      },
+      "button": {
+        "color": "inherit",
+        "fontWeight": "inherit",
+        "paddingTop": "0",
+        "paddingRight": "6px",
+        "paddingBottom": "0",
+        "paddingLeft": "6px",
+        "transition": "background-color 250ms",
+        "hover": {
+          "backgroundColor": "rgba(0, 0, 0, 0.1)"
+        },
+        "disabled": {
+          "opacity": "0.4"
+        }
+      },
+      "ellipsis": {
+        "paddingRight": "8px",
+        "paddingLeft": "8px"
+      },
+      "itemContainer": {
+        "marginLeft": "4px",
+        "marginRight": "4px"
+      },
+      "itemShared": {
+        "height": "2rem",
+        "minWidth": "2rem",
+        "borderRadius": "1rem"
+      }
+    },
+    "placeholder": {
+      "borderRadius": "0.25rem",
+      "transitionDuration": "500ms",
+      "startColor": "hsl(210, 5%, 95%)",
+      "endColor": "hsl(210, 5%, 90%)",
+      "small": {
+        "height": "0.75rem"
+      },
+      "default": {
+        "height": "1rem"
+      },
+      "large": {
+        "height": "1.5rem"
+      }
+    },
+    "radio": {
+      "alignItems": "center",
+      "justifyContent": "flex-start",
+      "gap": "inherit",
+      "button": {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "1rem",
+        "height": "1rem",
+        "boxSizing": "border-box",
+        "borderWidth": "2px",
+        "borderStyle": "solid",
+        "borderRadius": "50%",
+        "borderColor": "hsl(210, 6%, 70%)",
+        "color": "#fff",
+        "backgroundColor": "#fff",
+        "transitionProperty": "all",
+        "transitionDuration": "250ms",
+        "outlineColor": "transparent",
+        "outlineStyle": "solid",
+        "outlineWidth": "2px",
+        "outlineOffset": "2px",
+        "before": {
+          "content": "\"\"",
+          "display": "inline-block",
+          "width": "50%",
+          "height": "50%",
+          "borderRadius": "50%",
+          "backgroundColor": "currentColor"
+        },
+        "small": {
+          "width": "0.75rem",
+          "height": "0.75rem"
+        },
+        "large": {
+          "width": "1.25rem",
+          "height": "1.25rem"
+        },
+        "_checked": {
+          "color": "hsl(0, 50%, 50%)",
+          "_disabled": {
+            "color": "hsl(210, 5%, 80%)"
+          }
+        },
+        "_focus": {
+          "borderColor": "hsl(190, 100%, 15%)",
+          "boxShadow": "0 0 0 1px hsl(190, 100%, 15%)"
+        },
+        "_disabled": {
+          "borderColor": "#e9ecf0",
+          "backgroundColor": "#fff",
+          "color": "#fff"
+        }
+      },
+      "label": {
+        "_disabled": {
+          "color": "#d6dbe2"
+        }
+      }
+    },
+    "rating": {
+      "large": {
+        "size": "3rem"
+      },
+      "default": {
+        "size": "1.5rem"
+      },
+      "small": {
+        "size": "0.875rem"
+      },
+      "filled": {
+        "color": "hsl(30, 75%, 75%)"
+      },
+      "empty": {
+        "color": "hsl(210, 6%, 70%)"
+      }
+    },
+    "select": {
+      "paddingInlineEnd": "3.0rem",
+      "wrapper": {
+        "display": "block",
+        "position": "relative",
+        "cursor": "pointer"
+      },
+      "iconWrapper": {
+        "position": "absolute",
+        "height": "50%",
+        "top": "25%",
+        "right": "1rem",
+        "pointerEvents": "none"
+      }
+    },
+    "switchfield": {
+      "disabled": {
+        "opacity": "0.3"
+      },
+      "focused": {
+        "shadow": "0 0 4px #000"
+      },
+      "label": {
+        "padding": "0.5rem"
+      },
+      "large": {
+        "font": {
+          "size": "1.25rem"
+        }
+      },
+      "small": {
+        "font": {
+          "size": "0.875rem"
+        }
+      },
+      "thumb": {
+        "background": "#fff",
+        "border": {
+          "color": "hsl(210, 5%, 90%)",
+          "radius": "8rem"
+        },
+        "checked": {
+          "transform": "translateX(1em)"
+        },
+        "transition": {
+          "duration": "250ms"
+        },
+        "width": "1em"
+      },
+      "track": {
+        "background": "hsl(210, 5%, 80%)",
+        "border": {
+          "radius": "8rem"
+        },
+        "checked": {
+          "background": "hsl(220, 70%, 70%)"
+        },
+        "height": "1em",
+        "padding": "2px",
+        "transition": {
+          "duration": "100ms"
+        },
+        "width": "2.0em"
+      }
+    },
+    "tabs": {
+      "backgroundColor": "transparent",
+      "borderColor": "hsl(210, 5%, 80%)",
+      "borderStyle": "solid",
+      "borderWidth": "2px",
+      "item": {
+        "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 5%, 80%)",
+        "borderStyle": "solid",
+        "borderWidth": "2px",
+        "color": "hsl(210, 10%, 40%)",
+        "fontSize": "1rem",
+        "fontWeight": 700,
+        "padding": "0.75rem 1rem",
+        "textAlign": "center",
+        "transitionDuration": "250ms",
+        "_hover": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_focus": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_active": {
+          "color": "hsl(190, 95%, 30%)",
+          "borderColor": "hsl(190, 95%, 30%)",
+          "backgroundColor": "transparent"
+        },
+        "_disabled": {
+          "color": "hsl(210, 6%, 70%)",
+          "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 5%, 90%)"
+        }
+      }
+    },
+    "text": {
+      "color": "hsl(210, 50%, 10%)",
+      "primary": {
+        "color": "hsl(210, 50%, 10%)"
+      },
+      "secondary": {
+        "color": "hsl(210, 10%, 40%)"
+      },
+      "tertiary": {
+        "color": "hsl(210, 6%, 70%)"
+      },
+      "error": {
+        "color": "hsl(0, 95%, 30%)"
+      },
+      "warning": {
+        "color": "hsl(30, 95%, 30%)"
+      },
+      "success": {
+        "color": "hsl(130, 95%, 30%)"
+      },
+      "info": {
+        "color": "hsl(220, 95%, 30%)"
+      }
+    }
+  },
+  "borderWidths": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "breakpoints": {
+    "values": {
+      "base": 0,
+      "small": 30,
+      "medium": 48,
+      "large": 62,
+      "xl": 80,
+      "xxl": 96
+    },
+    "unit": "em",
+    "defaultBreakpoint": "base"
+  },
+  "colors": {
+    "red": {
+      "10": "hsl(0, 75%, 95%)",
+      "20": "hsl(0, 75%, 85%)",
+      "40": "hsl(0, 75%, 75%)",
+      "60": "hsl(0, 50%, 50%)",
+      "80": "hsl(0, 95%, 30%)",
+      "90": "hsl(0, 100%, 20%)",
+      "100": "hsl(0, 100%, 15%)"
+    },
+    "orange": {
+      "10": "hsl(30, 75%, 95%)",
+      "20": "hsl(30, 75%, 85%)",
+      "40": "hsl(30, 75%, 75%)",
+      "60": "hsl(30, 50%, 50%)",
+      "80": "hsl(30, 95%, 30%)",
+      "90": "hsl(30, 100%, 20%)",
+      "100": "hsl(30, 100%, 15%)"
+    },
+    "yellow": {
+      "10": "hsl(60, 75%, 95%)",
+      "20": "hsl(60, 75%, 85%)",
+      "40": "hsl(60, 75%, 75%)",
+      "60": "hsl(60, 50%, 50%)",
+      "80": "hsl(60, 95%, 30%)",
+      "90": "hsl(60, 100%, 20%)",
+      "100": "hsl(60, 100%, 15%)"
+    },
+    "green": {
+      "10": "hsl(130, 75%, 95%)",
+      "20": "hsl(130, 75%, 85%)",
+      "40": "hsl(130, 75%, 75%)",
+      "60": "hsl(130, 50%, 50%)",
+      "80": "hsl(130, 95%, 30%)",
+      "90": "hsl(130, 100%, 20%)",
+      "100": "hsl(130, 100%, 15%)"
+    },
+    "teal": {
+      "10": "hsl(190, 75%, 95%)",
+      "20": "hsl(190, 75%, 85%)",
+      "40": "hsl(190, 70%, 70%)",
+      "60": "hsl(190, 50%, 50%)",
+      "80": "hsl(190, 95%, 30%)",
+      "90": "hsl(190, 100%, 20%)",
+      "100": "hsl(190, 100%, 15%)"
+    },
+    "blue": {
+      "10": "hsl(220, 95%, 95%)",
+      "20": "hsl(220, 85%, 85%)",
+      "40": "hsl(220, 70%, 70%)",
+      "60": "hsl(220, 50%, 50%)",
+      "80": "hsl(220, 95%, 30%)",
+      "90": "hsl(220, 100%, 20%)",
+      "100": "hsl(220, 100%, 15%)"
+    },
+    "purple": {
+      "10": "hsl(300, 95%, 95%)",
+      "20": "hsl(300, 85%, 85%)",
+      "40": "hsl(300, 70%, 70%)",
+      "60": "hsl(300, 50%, 50%)",
+      "80": "hsl(300, 95%, 30%)",
+      "90": "hsl(300, 100%, 20%)",
+      "100": "hsl(300, 100%, 15%)"
+    },
+    "pink": {
+      "10": "hsl(340, 95%, 95%)",
+      "20": "hsl(340, 90%, 85%)",
+      "40": "hsl(340, 70%, 70%)",
+      "60": "hsl(340, 50%, 50%)",
+      "80": "hsl(340, 95%, 30%)",
+      "90": "hsl(340, 100%, 20%)",
+      "100": "hsl(340, 100%, 15%)"
+    },
+    "neutral": {
+      "10": "hsl(210, 5%, 95%)",
+      "20": "hsl(210, 5%, 90%)",
+      "40": "hsl(210, 5%, 80%)",
+      "60": "hsl(210, 6%, 70%)",
+      "80": "hsl(210, 10%, 40%)",
+      "90": "hsl(210, 25%, 25%)",
+      "100": "hsl(210, 50%, 10%)"
+    },
+    "brand": {
+      "primary": {
+        "10": "hsl(190, 75%, 95%)",
+        "20": "hsl(190, 75%, 85%)",
+        "40": "hsl(190, 70%, 70%)",
+        "60": "hsl(190, 50%, 50%)",
+        "80": "hsl(190, 95%, 30%)",
+        "90": "hsl(190, 100%, 20%)",
+        "100": "hsl(190, 100%, 15%)"
+      },
+      "secondary": {
+        "10": "hsl(300, 95%, 95%)",
+        "20": "hsl(300, 85%, 85%)",
+        "40": "hsl(300, 70%, 70%)",
+        "60": "hsl(300, 50%, 50%)",
+        "80": "hsl(300, 95%, 30%)",
+        "90": "hsl(300, 100%, 20%)",
+        "100": "hsl(300, 100%, 15%)"
+      }
+    },
+    "font": {
+      "primary": "hsl(210, 50%, 10%)",
+      "secondary": "hsl(210, 10%, 40%)",
+      "tertiary": "hsl(210, 6%, 70%)",
+      "disabled": "hsl(210, 6%, 70%)",
+      "inverse": "#fff",
+      "interactive": "hsl(190, 95%, 30%)",
+      "hover": "hsl(190, 100%, 20%)",
+      "focus": "hsl(190, 100%, 20%)",
+      "active": "hsl(190, 100%, 15%)",
+      "info": "hsl(220, 95%, 30%)",
+      "warning": "hsl(30, 95%, 30%)",
+      "error": "hsl(0, 95%, 30%)",
+      "success": "hsl(130, 95%, 30%)"
+    },
+    "background": {
+      "primary": "#fff",
+      "secondary": "hsl(210, 5%, 95%)",
+      "tertiary": "hsl(210, 5%, 90%)",
+      "disabled": "hsl(210, 5%, 95%)",
+      "info": "hsl(220, 85%, 85%)",
+      "warning": "hsl(30, 75%, 85%)",
+      "error": "hsl(0, 75%, 85%)",
+      "success": "hsl(130, 75%, 85%)"
+    },
+    "border": {
+      "primary": "hsl(210, 6%, 70%)",
+      "secondary": "hsl(210, 5%, 80%)",
+      "tertiary": "hsl(210, 5%, 90%)"
+    },
+    "focus": "hsl(190, 100%, 15%)",
+    "error": "hsl(0, 95%, 30%)",
+    "shadow": {
+      "primary": "hsl(210, 50%, 10%, 0.25)",
+      "secondary": "hsl(210, 50%, 10%, 0.15)",
+      "tertiary": "hsl(210, 50%, 10%, 0.05)"
+    },
+    "black": "#000",
+    "white": "#fff",
+    "transparent": "transparent",
+    "icon": {
+      "filled": "hsl(30, 75%, 75%)",
+      "empty": "hsl(210, 6%, 70%)"
+    }
+  },
+  "fonts": {
+    "default": {
+      "variable": "'InterVariable', -apple-system, BlinkMacSystemFont,\n        'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\n        sans-serif",
+      "static": "'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\n        'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif"
+    }
+  },
+  "fontSizes": {
+    "xs": "0.75rem",
+    "small": "0.875rem",
+    "medium": "1rem",
+    "large": "1.25rem",
+    "xl": "1.5rem",
+    "xxl": "2rem",
+    "xxxl": "3rem",
+    "xxxxl": "5rem"
+  },
+  "fontWeights": {
+    "hairline": 100,
+    "thin": 200,
+    "light": 300,
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700,
+    "extrabold": 800,
+    "black": 900
+  },
+  "lineHeights": {
+    "small": "2",
+    "medium": "2.25",
+    "large": "2.5"
+  },
+  "opacities": {
+    "0": "0",
+    "10": "0.1",
+    "20": "0.2",
+    "30": "0.3",
+    "40": "0.4",
+    "50": "0.5",
+    "60": "0.6",
+    "70": "0.7",
+    "80": "0.8",
+    "90": "0.9",
+    "100": "1"
+  },
+  "outlineOffsets": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "outlineWidths": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "radii": {
+    "small": "0.125rem",
+    "medium": "0.25rem",
+    "large": "1rem",
+    "xl": "2rem",
+    "xxl": "4rem",
+    "xxxl": "8rem"
+  },
+  "shadows": {
+    "small": "0 2px 4px hsl(210, 50%, 10%, 0.05)",
+    "medium": "0 2px 6px hsl(210, 50%, 10%, 0.15)",
+    "large": "0 4px 12px hsl(210, 50%, 10%, 0.25)",
+    "switch": "0 0 4px #000"
+  },
+  "space": {
+    "xxs": "0.25rem",
+    "xs": "0.5rem",
+    "small": "0.75rem",
+    "medium": "1rem",
+    "large": "1.5rem",
+    "xl": "2.0rem",
+    "xxl": "3.0rem",
+    "xxxl": "4.5rem",
+    "relative": {
+      "xxs": "0.25em",
+      "xs": "0.5em",
+      "small": "0.75em",
+      "medium": "1em",
+      "large": "1.5em",
+      "xl": "2.0em",
+      "xxl": "3.0em",
+      "xxxl": "4.5em"
+    }
+  },
+  "time": {
+    "transition": {
+      "short": "100ms",
+      "medium": "250ms",
+      "long": "500ms"
+    }
+  },
+  "transforms": {
+    "slideX": {
+      "small": "translateX(0.5em)",
+      "medium": "translateX(1em)",
+      "large": "translateX(2em)"
+    }
+  }
+};
\ No newline at end of file
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
index 5569227eb..319f65fda 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
+++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -516,3 +516,1963 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
 }
 "
 `;
+
+exports[`amplify render tests theme should render the theme 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { React } from \\"react\\";
+import {
+  AmplifyProvider,
+  DeepPartial,
+  Theme,
+  extendTheming,
+} from \\"@aws-amplify/ui-react\\";
+export default function withTheme<T>(
+  WrappedComponent: React.ReactComponent<T>
+) {
+  const theme = {
+    components: {
+      alert: {
+        backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        padding: \\"0.75rem 1rem\\",
+        info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" },
+        error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" },
+        warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" },
+        success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" },
+      },
+      badge: {
+        lineHeight: 1,
+        fontWeight: 600,
+        fontSize: \\"0.875rem\\",
+        textAlign: \\"center\\",
+        padding: \\"0.5rem 0.75rem\\",
+        backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        borderRadius: \\"9999px\\",
+        info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" },
+        warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" },
+        success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" },
+        error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" },
+        small: { fontSize: \\"0.75rem\\", padding: \\"0.25rem 0.5rem\\" },
+        large: { fontSize: \\"1rem\\", padding: \\"0.75rem 1rem\\" },
+      },
+      button: {
+        fontWeight: \\"bold\\",
+        textAlign: \\"center\\",
+        borderRadius: \\"0.25rem\\",
+        transitionDuration: \\"250ms\\",
+        fontSize: \\"1rem\\",
+        lineHeight: \\"1rem\\",
+        padding: \\"0.75rem 1rem\\",
+        borderColor: \\"hsl(190, 75%, 85%)\\",
+        borderWidth: \\"1px\\",
+        borderStyle: \\"solid\\",
+        color: \\"hsl(190, 95%, 30%)\\",
+        _hover: {
+          color: \\"hsl(190, 100%, 15%)\\",
+          backgroundColor: \\"hsl(190, 75%, 95%)\\",
+          borderColor: \\"hsl(190, 50%, 50%)\\",
+        },
+        _focus: {
+          color: \\"hsl(190, 100%, 15%)\\",
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+          boxShadow: \\"hsl(190, 100%, 15%) 0px 0px 0px 1px\\",
+        },
+        _active: {
+          color: \\"#fff\\",
+          backgroundColor: \\"hsl(190, 100%, 15%)\\",
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+        },
+        _loading: {
+          color: \\"hsl(210, 6%, 70%)\\",
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        _disabled: {
+          color: \\"hsl(210, 6%, 70%)\\",
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        primary: {
+          borderWidth: 0,
+          backgroundColor: \\"hsl(190, 95%, 30%)\\",
+          color: \\"#fff\\",
+          _disabled: {
+            backgroundColor: \\"hsl(210, 5%, 90%)\\",
+            color: \\"hsl(210, 6%, 70%)\\",
+          },
+          _loading: {
+            backgroundColor: \\"hsl(210, 5%, 90%)\\",
+            color: \\"hsl(210, 6%, 70%)\\",
+          },
+          _hover: { backgroundColor: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { backgroundColor: \\"hsl(190, 100%, 20%)\\" },
+          _active: { backgroundColor: \\"hsl(190, 100%, 15%)\\" },
+        },
+        link: {
+          borderWidth: 0,
+          backgroundColor: \\"transparent\\",
+          color: \\"hsl(190, 95%, 30%)\\",
+          _hover: { color: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { color: \\"hsl(190, 100%, 20%)\\" },
+          _active: { color: \\"hsl(190, 100%, 15%)\\" },
+          _disabled: { color: \\"hsl(210, 6%, 70%)\\" },
+          _loading: { color: \\"hsl(210, 6%, 70%)\\" },
+        },
+        small: {
+          fontSize: \\"0.875rem\\",
+          lineHeight: \\"0.875rem\\",
+          padding: \\"0.5rem 0.75rem\\",
+        },
+        large: {
+          fontSize: \\"1.25rem\\",
+          lineHeight: \\"1.25rem\\",
+          padding: \\"1rem 1.5rem\\",
+        },
+      },
+      card: {
+        backgroundColor: \\"#fff\\",
+        borderWidth: \\"1px\\",
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        boxShadow: \\"0 2px 6px hsl(210, 50%, 10%, 0.15)\\",
+        padding: \\"1rem\\",
+      },
+      divider: {
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        borderWidth: \\"2px\\",
+        small: { borderWidth: \\"1px\\" },
+        large: { borderWidth: \\"3px\\" },
+        opacity: \\"0.6\\",
+      },
+      field: {
+        gap: \\"0.5rem\\",
+        fontSize: \\"1rem\\",
+        small: { gap: \\"0.25rem\\", fontSize: \\"0.875rem\\" },
+        large: { gap: \\"0.75rem\\", fontSize: \\"1.25rem\\" },
+      },
+      fieldcontrol: {
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        borderWidth: \\"1px\\",
+        borderRadius: \\"0.25rem\\",
+        padding: \\"0.5rem 1rem\\",
+        fontSize: \\"1rem\\",
+        lineHeight: \\"2.25\\",
+        transitionDuration: \\"250ms\\",
+        outlineColor: \\"transparent\\",
+        outlineStyle: \\"solid\\",
+        outlineWidth: \\"2px\\",
+        outlineOffset: \\"2px\\",
+        small: {
+          fontSize: \\"0.875rem\\",
+          padding: \\"0.5rem 0.75rem\\",
+          lineHeight: \\"2\\",
+        },
+        large: {
+          fontSize: \\"1.25rem\\",
+          padding: \\"1rem 1.5rem\\",
+          lineHeight: \\"2.5\\",
+        },
+        quiet: {
+          borderStyle: \\"none\\",
+          borderBlockEnd: \\"1px solid hsl(210, 6%, 70%)\\",
+          borderInlineStart: \\"none\\",
+          borderInlineEnd: \\"none\\",
+          borderBlockStart: \\"none\\",
+          borderRadius: \\"0\\",
+          _focus: {
+            borderBlockEndColor: \\"hsl(190, 100%, 15%)\\",
+            boxShadow: \\"0 1px hsl(190, 100%, 15%)\\",
+          },
+          _error: {
+            borderBlockEndColor: \\"hsl(0, 95%, 30%)\\",
+            _focus: { boxShadow: \\"0 1px hsl(0, 95%, 30%)\\" },
+          },
+        },
+        _focus: {
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+          boxShadow: \\"0px 0px 0px 1px hsl(190, 100%, 15%)\\",
+        },
+        _disabled: {
+          cursor: \\"not-allowed\\",
+          borderColor: \\"transparent\\",
+          backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        _error: {
+          borderColor: \\"hsl(0, 95%, 30%)\\",
+          _focus: { boxShadow: \\"0px 0px 0px 1px hsl(0, 95%, 30%)\\" },
+        },
+      },
+      fieldgroup: { gap: 0 },
+      fieldmessages: {
+        error: { color: \\"hsl(0, 95%, 30%)\\", fontSize: \\"0.875rem\\" },
+        description: { fontStyle: \\"italic\\", fontSize: \\"0.875rem\\" },
+      },
+      flex: {
+        gap: \\"1rem\\",
+        justifyContent: \\"normal\\",
+        alignItems: \\"stretch\\",
+        alignContent: \\"normal\\",
+        flexWrap: \\"nowrap\\",
+      },
+      heading: {
+        1: { fontSize: \\"5rem\\", fontWeight: 300 },
+        2: { fontSize: \\"3rem\\", fontWeight: 300 },
+        3: { fontSize: \\"2rem\\", fontWeight: 400 },
+        4: { fontSize: \\"1.5rem\\", fontWeight: 500 },
+        5: { fontSize: \\"1.25rem\\", fontWeight: 600 },
+        6: { fontSize: \\"1rem\\", fontWeight: 700 },
+        color: \\"hsl(210, 50%, 10%)\\",
+        lineHeight: 1.25,
+      },
+      icon: {
+        lineHeight: 1,
+        height: \\"1rem\\",
+        large: { height: \\"1.25rem\\" },
+        small: { height: \\"0.875rem\\" },
+      },
+      image: {
+        maxWidth: \\"100%\\",
+        height: \\"auto\\",
+        objectFit: \\"initial\\",
+        objectPosition: \\"initial\\",
+      },
+      link: {
+        active: { color: \\"hsl(190, 100%, 15%)\\" },
+        color: \\"hsl(190, 95%, 30%)\\",
+        focus: { color: \\"hsl(190, 100%, 20%)\\" },
+        hover: { color: \\"hsl(190, 100%, 20%)\\" },
+        large: { fontSize: \\"1.25rem\\" },
+        small: { fontSize: \\"0.875rem\\" },
+        visited: { color: \\"hsl(210, 6%, 70%)\\" },
+      },
+      pagination: {
+        current: {
+          color: \\"#fff\\",
+          fontSize: \\"0.875rem\\",
+          backgroundColor: \\"rgba(0, 0, 0, 0.4)\\",
+        },
+        button: {
+          color: \\"inherit\\",
+          fontWeight: \\"inherit\\",
+          paddingTop: \\"0\\",
+          paddingRight: \\"6px\\",
+          paddingBottom: \\"0\\",
+          paddingLeft: \\"6px\\",
+          transition: \\"background-color 250ms\\",
+          hover: { backgroundColor: \\"rgba(0, 0, 0, 0.1)\\" },
+          disabled: { opacity: \\"0.4\\" },
+        },
+        ellipsis: { paddingRight: \\"8px\\", paddingLeft: \\"8px\\" },
+        itemContainer: { marginLeft: \\"4px\\", marginRight: \\"4px\\" },
+        itemShared: { height: \\"2rem\\", minWidth: \\"2rem\\", borderRadius: \\"1rem\\" },
+      },
+      placeholder: {
+        borderRadius: \\"0.25rem\\",
+        transitionDuration: \\"500ms\\",
+        startColor: \\"hsl(210, 5%, 95%)\\",
+        endColor: \\"hsl(210, 5%, 90%)\\",
+        small: { height: \\"0.75rem\\" },
+        default: { height: \\"1rem\\" },
+        large: { height: \\"1.5rem\\" },
+      },
+      radio: {
+        alignItems: \\"center\\",
+        justifyContent: \\"flex-start\\",
+        gap: \\"inherit\\",
+        button: {
+          alignItems: \\"center\\",
+          justifyContent: \\"center\\",
+          width: \\"1rem\\",
+          height: \\"1rem\\",
+          boxSizing: \\"border-box\\",
+          borderWidth: \\"2px\\",
+          borderStyle: \\"solid\\",
+          borderRadius: \\"50%\\",
+          borderColor: \\"hsl(210, 6%, 70%)\\",
+          color: \\"#fff\\",
+          backgroundColor: \\"#fff\\",
+          transitionProperty: \\"all\\",
+          transitionDuration: \\"250ms\\",
+          outlineColor: \\"transparent\\",
+          outlineStyle: \\"solid\\",
+          outlineWidth: \\"2px\\",
+          outlineOffset: \\"2px\\",
+          before: {
+            content: '\\"\\"',
+            display: \\"inline-block\\",
+            width: \\"50%\\",
+            height: \\"50%\\",
+            borderRadius: \\"50%\\",
+            backgroundColor: \\"currentColor\\",
+          },
+          small: { width: \\"0.75rem\\", height: \\"0.75rem\\" },
+          large: { width: \\"1.25rem\\", height: \\"1.25rem\\" },
+          _checked: {
+            color: \\"hsl(0, 50%, 50%)\\",
+            _disabled: { color: \\"hsl(210, 5%, 80%)\\" },
+          },
+          _focus: {
+            borderColor: \\"hsl(190, 100%, 15%)\\",
+            boxShadow: \\"0 0 0 1px hsl(190, 100%, 15%)\\",
+          },
+          _disabled: {
+            borderColor: \\"#e9ecf0\\",
+            backgroundColor: \\"#fff\\",
+            color: \\"#fff\\",
+          },
+        },
+        label: { _disabled: { color: \\"#d6dbe2\\" } },
+      },
+      rating: {
+        large: { size: \\"3rem\\" },
+        default: { size: \\"1.5rem\\" },
+        small: { size: \\"0.875rem\\" },
+        filled: { color: \\"hsl(30, 75%, 75%)\\" },
+        empty: { color: \\"hsl(210, 6%, 70%)\\" },
+      },
+      select: {
+        paddingInlineEnd: \\"3.0rem\\",
+        wrapper: { display: \\"block\\", position: \\"relative\\", cursor: \\"pointer\\" },
+        iconWrapper: {
+          position: \\"absolute\\",
+          height: \\"50%\\",
+          top: \\"25%\\",
+          right: \\"1rem\\",
+          pointerEvents: \\"none\\",
+        },
+      },
+      switchfield: {
+        disabled: { opacity: \\"0.3\\" },
+        focused: { shadow: \\"0 0 4px #000\\" },
+        label: { padding: \\"0.5rem\\" },
+        large: { font: { size: \\"1.25rem\\" } },
+        small: { font: { size: \\"0.875rem\\" } },
+        thumb: {
+          background: \\"#fff\\",
+          border: { color: \\"hsl(210, 5%, 90%)\\", radius: \\"8rem\\" },
+          checked: { transform: \\"translateX(1em)\\" },
+          transition: { duration: \\"250ms\\" },
+          width: \\"1em\\",
+        },
+        track: {
+          background: \\"hsl(210, 5%, 80%)\\",
+          border: { radius: \\"8rem\\" },
+          checked: { background: \\"hsl(220, 70%, 70%)\\" },
+          height: \\"1em\\",
+          padding: \\"2px\\",
+          transition: { duration: \\"100ms\\" },
+          width: \\"2.0em\\",
+        },
+      },
+      tabs: {
+        backgroundColor: \\"transparent\\",
+        borderColor: \\"hsl(210, 5%, 80%)\\",
+        borderStyle: \\"solid\\",
+        borderWidth: \\"2px\\",
+        item: {
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 80%)\\",
+          borderStyle: \\"solid\\",
+          borderWidth: \\"2px\\",
+          color: \\"hsl(210, 10%, 40%)\\",
+          fontSize: \\"1rem\\",
+          fontWeight: 700,
+          padding: \\"0.75rem 1rem\\",
+          textAlign: \\"center\\",
+          transitionDuration: \\"250ms\\",
+          _hover: { color: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { color: \\"hsl(190, 100%, 20%)\\" },
+          _active: {
+            color: \\"hsl(190, 95%, 30%)\\",
+            borderColor: \\"hsl(190, 95%, 30%)\\",
+            backgroundColor: \\"transparent\\",
+          },
+          _disabled: {
+            color: \\"hsl(210, 6%, 70%)\\",
+            backgroundColor: \\"transparent\\",
+            borderColor: \\"hsl(210, 5%, 90%)\\",
+          },
+        },
+      },
+      text: {
+        color: \\"hsl(210, 50%, 10%)\\",
+        primary: { color: \\"hsl(210, 50%, 10%)\\" },
+        secondary: { color: \\"hsl(210, 10%, 40%)\\" },
+        tertiary: { color: \\"hsl(210, 6%, 70%)\\" },
+        error: { color: \\"hsl(0, 95%, 30%)\\" },
+        warning: { color: \\"hsl(30, 95%, 30%)\\" },
+        success: { color: \\"hsl(130, 95%, 30%)\\" },
+        info: { color: \\"hsl(220, 95%, 30%)\\" },
+      },
+    },
+    borderWidths: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    breakpoints: {
+      values: { base: 0, small: 30, medium: 48, large: 62, xl: 80, xxl: 96 },
+      unit: \\"em\\",
+      defaultBreakpoint: \\"base\\",
+    },
+    colors: {
+      red: {
+        10: \\"hsl(0, 75%, 95%)\\",
+        20: \\"hsl(0, 75%, 85%)\\",
+        40: \\"hsl(0, 75%, 75%)\\",
+        60: \\"hsl(0, 50%, 50%)\\",
+        80: \\"hsl(0, 95%, 30%)\\",
+        90: \\"hsl(0, 100%, 20%)\\",
+        100: \\"hsl(0, 100%, 15%)\\",
+      },
+      orange: {
+        10: \\"hsl(30, 75%, 95%)\\",
+        20: \\"hsl(30, 75%, 85%)\\",
+        40: \\"hsl(30, 75%, 75%)\\",
+        60: \\"hsl(30, 50%, 50%)\\",
+        80: \\"hsl(30, 95%, 30%)\\",
+        90: \\"hsl(30, 100%, 20%)\\",
+        100: \\"hsl(30, 100%, 15%)\\",
+      },
+      yellow: {
+        10: \\"hsl(60, 75%, 95%)\\",
+        20: \\"hsl(60, 75%, 85%)\\",
+        40: \\"hsl(60, 75%, 75%)\\",
+        60: \\"hsl(60, 50%, 50%)\\",
+        80: \\"hsl(60, 95%, 30%)\\",
+        90: \\"hsl(60, 100%, 20%)\\",
+        100: \\"hsl(60, 100%, 15%)\\",
+      },
+      green: {
+        10: \\"hsl(130, 75%, 95%)\\",
+        20: \\"hsl(130, 75%, 85%)\\",
+        40: \\"hsl(130, 75%, 75%)\\",
+        60: \\"hsl(130, 50%, 50%)\\",
+        80: \\"hsl(130, 95%, 30%)\\",
+        90: \\"hsl(130, 100%, 20%)\\",
+        100: \\"hsl(130, 100%, 15%)\\",
+      },
+      teal: {
+        10: \\"hsl(190, 75%, 95%)\\",
+        20: \\"hsl(190, 75%, 85%)\\",
+        40: \\"hsl(190, 70%, 70%)\\",
+        60: \\"hsl(190, 50%, 50%)\\",
+        80: \\"hsl(190, 95%, 30%)\\",
+        90: \\"hsl(190, 100%, 20%)\\",
+        100: \\"hsl(190, 100%, 15%)\\",
+      },
+      blue: {
+        10: \\"hsl(220, 95%, 95%)\\",
+        20: \\"hsl(220, 85%, 85%)\\",
+        40: \\"hsl(220, 70%, 70%)\\",
+        60: \\"hsl(220, 50%, 50%)\\",
+        80: \\"hsl(220, 95%, 30%)\\",
+        90: \\"hsl(220, 100%, 20%)\\",
+        100: \\"hsl(220, 100%, 15%)\\",
+      },
+      purple: {
+        10: \\"hsl(300, 95%, 95%)\\",
+        20: \\"hsl(300, 85%, 85%)\\",
+        40: \\"hsl(300, 70%, 70%)\\",
+        60: \\"hsl(300, 50%, 50%)\\",
+        80: \\"hsl(300, 95%, 30%)\\",
+        90: \\"hsl(300, 100%, 20%)\\",
+        100: \\"hsl(300, 100%, 15%)\\",
+      },
+      pink: {
+        10: \\"hsl(340, 95%, 95%)\\",
+        20: \\"hsl(340, 90%, 85%)\\",
+        40: \\"hsl(340, 70%, 70%)\\",
+        60: \\"hsl(340, 50%, 50%)\\",
+        80: \\"hsl(340, 95%, 30%)\\",
+        90: \\"hsl(340, 100%, 20%)\\",
+        100: \\"hsl(340, 100%, 15%)\\",
+      },
+      neutral: {
+        10: \\"hsl(210, 5%, 95%)\\",
+        20: \\"hsl(210, 5%, 90%)\\",
+        40: \\"hsl(210, 5%, 80%)\\",
+        60: \\"hsl(210, 6%, 70%)\\",
+        80: \\"hsl(210, 10%, 40%)\\",
+        90: \\"hsl(210, 25%, 25%)\\",
+        100: \\"hsl(210, 50%, 10%)\\",
+      },
+      brand: {
+        primary: {
+          10: \\"hsl(190, 75%, 95%)\\",
+          20: \\"hsl(190, 75%, 85%)\\",
+          40: \\"hsl(190, 70%, 70%)\\",
+          60: \\"hsl(190, 50%, 50%)\\",
+          80: \\"hsl(190, 95%, 30%)\\",
+          90: \\"hsl(190, 100%, 20%)\\",
+          100: \\"hsl(190, 100%, 15%)\\",
+        },
+        secondary: {
+          10: \\"hsl(300, 95%, 95%)\\",
+          20: \\"hsl(300, 85%, 85%)\\",
+          40: \\"hsl(300, 70%, 70%)\\",
+          60: \\"hsl(300, 50%, 50%)\\",
+          80: \\"hsl(300, 95%, 30%)\\",
+          90: \\"hsl(300, 100%, 20%)\\",
+          100: \\"hsl(300, 100%, 15%)\\",
+        },
+      },
+      font: {
+        primary: \\"hsl(210, 50%, 10%)\\",
+        secondary: \\"hsl(210, 10%, 40%)\\",
+        tertiary: \\"hsl(210, 6%, 70%)\\",
+        disabled: \\"hsl(210, 6%, 70%)\\",
+        inverse: \\"#fff\\",
+        interactive: \\"hsl(190, 95%, 30%)\\",
+        hover: \\"hsl(190, 100%, 20%)\\",
+        focus: \\"hsl(190, 100%, 20%)\\",
+        active: \\"hsl(190, 100%, 15%)\\",
+        info: \\"hsl(220, 95%, 30%)\\",
+        warning: \\"hsl(30, 95%, 30%)\\",
+        error: \\"hsl(0, 95%, 30%)\\",
+        success: \\"hsl(130, 95%, 30%)\\",
+      },
+      background: {
+        primary: \\"#fff\\",
+        secondary: \\"hsl(210, 5%, 95%)\\",
+        tertiary: \\"hsl(210, 5%, 90%)\\",
+        disabled: \\"hsl(210, 5%, 95%)\\",
+        info: \\"hsl(220, 85%, 85%)\\",
+        warning: \\"hsl(30, 75%, 85%)\\",
+        error: \\"hsl(0, 75%, 85%)\\",
+        success: \\"hsl(130, 75%, 85%)\\",
+      },
+      border: {
+        primary: \\"hsl(210, 6%, 70%)\\",
+        secondary: \\"hsl(210, 5%, 80%)\\",
+        tertiary: \\"hsl(210, 5%, 90%)\\",
+      },
+      focus: \\"hsl(190, 100%, 15%)\\",
+      error: \\"hsl(0, 95%, 30%)\\",
+      shadow: {
+        primary: \\"hsl(210, 50%, 10%, 0.25)\\",
+        secondary: \\"hsl(210, 50%, 10%, 0.15)\\",
+        tertiary: \\"hsl(210, 50%, 10%, 0.05)\\",
+      },
+      black: \\"#000\\",
+      white: \\"#fff\\",
+      transparent: \\"transparent\\",
+      icon: { filled: \\"hsl(30, 75%, 75%)\\", empty: \\"hsl(210, 6%, 70%)\\" },
+    },
+    fonts: {
+      default: {
+        variable:
+          \\"'InterVariable', -apple-system, BlinkMacSystemFont,\\\\n        'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\\\\n        sans-serif\\",
+        static:
+          \\"'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\\\\n        'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif\\",
+      },
+    },
+    fontSizes: {
+      xs: \\"0.75rem\\",
+      small: \\"0.875rem\\",
+      medium: \\"1rem\\",
+      large: \\"1.25rem\\",
+      xl: \\"1.5rem\\",
+      xxl: \\"2rem\\",
+      xxxl: \\"3rem\\",
+      xxxxl: \\"5rem\\",
+    },
+    fontWeights: {
+      hairline: 100,
+      thin: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+    },
+    lineHeights: { small: \\"2\\", medium: \\"2.25\\", large: \\"2.5\\" },
+    opacities: {
+      0: \\"0\\",
+      10: \\"0.1\\",
+      20: \\"0.2\\",
+      30: \\"0.3\\",
+      40: \\"0.4\\",
+      50: \\"0.5\\",
+      60: \\"0.6\\",
+      70: \\"0.7\\",
+      80: \\"0.8\\",
+      90: \\"0.9\\",
+      100: \\"1\\",
+    },
+    outlineOffsets: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    outlineWidths: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    radii: {
+      small: \\"0.125rem\\",
+      medium: \\"0.25rem\\",
+      large: \\"1rem\\",
+      xl: \\"2rem\\",
+      xxl: \\"4rem\\",
+      xxxl: \\"8rem\\",
+    },
+    shadows: {
+      small: \\"0 2px 4px hsl(210, 50%, 10%, 0.05)\\",
+      medium: \\"0 2px 6px hsl(210, 50%, 10%, 0.15)\\",
+      large: \\"0 4px 12px hsl(210, 50%, 10%, 0.25)\\",
+      switch: \\"0 0 4px #000\\",
+    },
+    space: {
+      xxs: \\"0.25rem\\",
+      xs: \\"0.5rem\\",
+      small: \\"0.75rem\\",
+      medium: \\"1rem\\",
+      large: \\"1.5rem\\",
+      xl: \\"2.0rem\\",
+      xxl: \\"3.0rem\\",
+      xxxl: \\"4.5rem\\",
+      relative: {
+        xxs: \\"0.25em\\",
+        xs: \\"0.5em\\",
+        small: \\"0.75em\\",
+        medium: \\"1em\\",
+        large: \\"1.5em\\",
+        xl: \\"2.0em\\",
+        xxl: \\"3.0em\\",
+        xxxl: \\"4.5em\\",
+      },
+    },
+    time: { transition: { short: \\"100ms\\", medium: \\"250ms\\", long: \\"500ms\\" } },
+    transforms: {
+      slideX: {
+        small: \\"translateX(0.5em)\\",
+        medium: \\"translateX(1em)\\",
+        large: \\"translateX(2em)\\",
+      },
+    },
+    types: {
+      null: null,
+      string: \\"test\\",
+      number: 10,
+      boolean: { t: true, false: false },
+      object: { object: { test: \\"test\\" }, array: [\\"test\\"] },
+    },
+  };
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || \\"Component\\";
+  const ComponentWithTheme = (props: T) => {
+    const theming = extendTheming(theme);
+    return (
+      <AmplifyProvider theming={theming}>
+        <WrappedComponent {...props} />
+      </AmplifyProvider>
+    );
+  };
+  ComponentWithTheme.displayName = displayName;
+  return ComponentWithTheme;
+}
+"
+`;
+
+exports[`amplify render tests theme should render the theme with ES5 1`] = `
+"var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+/* eslint-disable */
+import React from \\"react\\";
+import { AmplifyProvider, extendTheming } from \\"@aws-amplify/ui-react\\";
+export default function withTheme(WrappedComponent) {
+  var theme = {
+    components: {
+      alert: {
+        backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        padding: \\"0.75rem 1rem\\",
+        info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" },
+        error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" },
+        warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" },
+        success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" },
+      },
+      badge: {
+        lineHeight: 1,
+        fontWeight: 600,
+        fontSize: \\"0.875rem\\",
+        textAlign: \\"center\\",
+        padding: \\"0.5rem 0.75rem\\",
+        backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        borderRadius: \\"9999px\\",
+        info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" },
+        warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" },
+        success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" },
+        error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" },
+        small: { fontSize: \\"0.75rem\\", padding: \\"0.25rem 0.5rem\\" },
+        large: { fontSize: \\"1rem\\", padding: \\"0.75rem 1rem\\" },
+      },
+      button: {
+        fontWeight: \\"bold\\",
+        textAlign: \\"center\\",
+        borderRadius: \\"0.25rem\\",
+        transitionDuration: \\"250ms\\",
+        fontSize: \\"1rem\\",
+        lineHeight: \\"1rem\\",
+        padding: \\"0.75rem 1rem\\",
+        borderColor: \\"hsl(190, 75%, 85%)\\",
+        borderWidth: \\"1px\\",
+        borderStyle: \\"solid\\",
+        color: \\"hsl(190, 95%, 30%)\\",
+        _hover: {
+          color: \\"hsl(190, 100%, 15%)\\",
+          backgroundColor: \\"hsl(190, 75%, 95%)\\",
+          borderColor: \\"hsl(190, 50%, 50%)\\",
+        },
+        _focus: {
+          color: \\"hsl(190, 100%, 15%)\\",
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+          boxShadow: \\"hsl(190, 100%, 15%) 0px 0px 0px 1px\\",
+        },
+        _active: {
+          color: \\"#fff\\",
+          backgroundColor: \\"hsl(190, 100%, 15%)\\",
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+        },
+        _loading: {
+          color: \\"hsl(210, 6%, 70%)\\",
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        _disabled: {
+          color: \\"hsl(210, 6%, 70%)\\",
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        primary: {
+          borderWidth: 0,
+          backgroundColor: \\"hsl(190, 95%, 30%)\\",
+          color: \\"#fff\\",
+          _disabled: {
+            backgroundColor: \\"hsl(210, 5%, 90%)\\",
+            color: \\"hsl(210, 6%, 70%)\\",
+          },
+          _loading: {
+            backgroundColor: \\"hsl(210, 5%, 90%)\\",
+            color: \\"hsl(210, 6%, 70%)\\",
+          },
+          _hover: { backgroundColor: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { backgroundColor: \\"hsl(190, 100%, 20%)\\" },
+          _active: { backgroundColor: \\"hsl(190, 100%, 15%)\\" },
+        },
+        link: {
+          borderWidth: 0,
+          backgroundColor: \\"transparent\\",
+          color: \\"hsl(190, 95%, 30%)\\",
+          _hover: { color: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { color: \\"hsl(190, 100%, 20%)\\" },
+          _active: { color: \\"hsl(190, 100%, 15%)\\" },
+          _disabled: { color: \\"hsl(210, 6%, 70%)\\" },
+          _loading: { color: \\"hsl(210, 6%, 70%)\\" },
+        },
+        small: {
+          fontSize: \\"0.875rem\\",
+          lineHeight: \\"0.875rem\\",
+          padding: \\"0.5rem 0.75rem\\",
+        },
+        large: {
+          fontSize: \\"1.25rem\\",
+          lineHeight: \\"1.25rem\\",
+          padding: \\"1rem 1.5rem\\",
+        },
+      },
+      card: {
+        backgroundColor: \\"#fff\\",
+        borderWidth: \\"1px\\",
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        boxShadow: \\"0 2px 6px hsl(210, 50%, 10%, 0.15)\\",
+        padding: \\"1rem\\",
+      },
+      divider: {
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        borderWidth: \\"2px\\",
+        small: { borderWidth: \\"1px\\" },
+        large: { borderWidth: \\"3px\\" },
+        opacity: \\"0.6\\",
+      },
+      field: {
+        gap: \\"0.5rem\\",
+        fontSize: \\"1rem\\",
+        small: { gap: \\"0.25rem\\", fontSize: \\"0.875rem\\" },
+        large: { gap: \\"0.75rem\\", fontSize: \\"1.25rem\\" },
+      },
+      fieldcontrol: {
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        borderWidth: \\"1px\\",
+        borderRadius: \\"0.25rem\\",
+        padding: \\"0.5rem 1rem\\",
+        fontSize: \\"1rem\\",
+        lineHeight: \\"2.25\\",
+        transitionDuration: \\"250ms\\",
+        outlineColor: \\"transparent\\",
+        outlineStyle: \\"solid\\",
+        outlineWidth: \\"2px\\",
+        outlineOffset: \\"2px\\",
+        small: {
+          fontSize: \\"0.875rem\\",
+          padding: \\"0.5rem 0.75rem\\",
+          lineHeight: \\"2\\",
+        },
+        large: {
+          fontSize: \\"1.25rem\\",
+          padding: \\"1rem 1.5rem\\",
+          lineHeight: \\"2.5\\",
+        },
+        quiet: {
+          borderStyle: \\"none\\",
+          borderBlockEnd: \\"1px solid hsl(210, 6%, 70%)\\",
+          borderInlineStart: \\"none\\",
+          borderInlineEnd: \\"none\\",
+          borderBlockStart: \\"none\\",
+          borderRadius: \\"0\\",
+          _focus: {
+            borderBlockEndColor: \\"hsl(190, 100%, 15%)\\",
+            boxShadow: \\"0 1px hsl(190, 100%, 15%)\\",
+          },
+          _error: {
+            borderBlockEndColor: \\"hsl(0, 95%, 30%)\\",
+            _focus: { boxShadow: \\"0 1px hsl(0, 95%, 30%)\\" },
+          },
+        },
+        _focus: {
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+          boxShadow: \\"0px 0px 0px 1px hsl(190, 100%, 15%)\\",
+        },
+        _disabled: {
+          cursor: \\"not-allowed\\",
+          borderColor: \\"transparent\\",
+          backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        _error: {
+          borderColor: \\"hsl(0, 95%, 30%)\\",
+          _focus: { boxShadow: \\"0px 0px 0px 1px hsl(0, 95%, 30%)\\" },
+        },
+      },
+      fieldgroup: { gap: 0 },
+      fieldmessages: {
+        error: { color: \\"hsl(0, 95%, 30%)\\", fontSize: \\"0.875rem\\" },
+        description: { fontStyle: \\"italic\\", fontSize: \\"0.875rem\\" },
+      },
+      flex: {
+        gap: \\"1rem\\",
+        justifyContent: \\"normal\\",
+        alignItems: \\"stretch\\",
+        alignContent: \\"normal\\",
+        flexWrap: \\"nowrap\\",
+      },
+      heading: {
+        1: { fontSize: \\"5rem\\", fontWeight: 300 },
+        2: { fontSize: \\"3rem\\", fontWeight: 300 },
+        3: { fontSize: \\"2rem\\", fontWeight: 400 },
+        4: { fontSize: \\"1.5rem\\", fontWeight: 500 },
+        5: { fontSize: \\"1.25rem\\", fontWeight: 600 },
+        6: { fontSize: \\"1rem\\", fontWeight: 700 },
+        color: \\"hsl(210, 50%, 10%)\\",
+        lineHeight: 1.25,
+      },
+      icon: {
+        lineHeight: 1,
+        height: \\"1rem\\",
+        large: { height: \\"1.25rem\\" },
+        small: { height: \\"0.875rem\\" },
+      },
+      image: {
+        maxWidth: \\"100%\\",
+        height: \\"auto\\",
+        objectFit: \\"initial\\",
+        objectPosition: \\"initial\\",
+      },
+      link: {
+        active: { color: \\"hsl(190, 100%, 15%)\\" },
+        color: \\"hsl(190, 95%, 30%)\\",
+        focus: { color: \\"hsl(190, 100%, 20%)\\" },
+        hover: { color: \\"hsl(190, 100%, 20%)\\" },
+        large: { fontSize: \\"1.25rem\\" },
+        small: { fontSize: \\"0.875rem\\" },
+        visited: { color: \\"hsl(210, 6%, 70%)\\" },
+      },
+      pagination: {
+        current: {
+          color: \\"#fff\\",
+          fontSize: \\"0.875rem\\",
+          backgroundColor: \\"rgba(0, 0, 0, 0.4)\\",
+        },
+        button: {
+          color: \\"inherit\\",
+          fontWeight: \\"inherit\\",
+          paddingTop: \\"0\\",
+          paddingRight: \\"6px\\",
+          paddingBottom: \\"0\\",
+          paddingLeft: \\"6px\\",
+          transition: \\"background-color 250ms\\",
+          hover: { backgroundColor: \\"rgba(0, 0, 0, 0.1)\\" },
+          disabled: { opacity: \\"0.4\\" },
+        },
+        ellipsis: { paddingRight: \\"8px\\", paddingLeft: \\"8px\\" },
+        itemContainer: { marginLeft: \\"4px\\", marginRight: \\"4px\\" },
+        itemShared: { height: \\"2rem\\", minWidth: \\"2rem\\", borderRadius: \\"1rem\\" },
+      },
+      placeholder: {
+        borderRadius: \\"0.25rem\\",
+        transitionDuration: \\"500ms\\",
+        startColor: \\"hsl(210, 5%, 95%)\\",
+        endColor: \\"hsl(210, 5%, 90%)\\",
+        small: { height: \\"0.75rem\\" },
+        default: { height: \\"1rem\\" },
+        large: { height: \\"1.5rem\\" },
+      },
+      radio: {
+        alignItems: \\"center\\",
+        justifyContent: \\"flex-start\\",
+        gap: \\"inherit\\",
+        button: {
+          alignItems: \\"center\\",
+          justifyContent: \\"center\\",
+          width: \\"1rem\\",
+          height: \\"1rem\\",
+          boxSizing: \\"border-box\\",
+          borderWidth: \\"2px\\",
+          borderStyle: \\"solid\\",
+          borderRadius: \\"50%\\",
+          borderColor: \\"hsl(210, 6%, 70%)\\",
+          color: \\"#fff\\",
+          backgroundColor: \\"#fff\\",
+          transitionProperty: \\"all\\",
+          transitionDuration: \\"250ms\\",
+          outlineColor: \\"transparent\\",
+          outlineStyle: \\"solid\\",
+          outlineWidth: \\"2px\\",
+          outlineOffset: \\"2px\\",
+          before: {
+            content: '\\"\\"',
+            display: \\"inline-block\\",
+            width: \\"50%\\",
+            height: \\"50%\\",
+            borderRadius: \\"50%\\",
+            backgroundColor: \\"currentColor\\",
+          },
+          small: { width: \\"0.75rem\\", height: \\"0.75rem\\" },
+          large: { width: \\"1.25rem\\", height: \\"1.25rem\\" },
+          _checked: {
+            color: \\"hsl(0, 50%, 50%)\\",
+            _disabled: { color: \\"hsl(210, 5%, 80%)\\" },
+          },
+          _focus: {
+            borderColor: \\"hsl(190, 100%, 15%)\\",
+            boxShadow: \\"0 0 0 1px hsl(190, 100%, 15%)\\",
+          },
+          _disabled: {
+            borderColor: \\"#e9ecf0\\",
+            backgroundColor: \\"#fff\\",
+            color: \\"#fff\\",
+          },
+        },
+        label: { _disabled: { color: \\"#d6dbe2\\" } },
+      },
+      rating: {
+        large: { size: \\"3rem\\" },
+        default: { size: \\"1.5rem\\" },
+        small: { size: \\"0.875rem\\" },
+        filled: { color: \\"hsl(30, 75%, 75%)\\" },
+        empty: { color: \\"hsl(210, 6%, 70%)\\" },
+      },
+      select: {
+        paddingInlineEnd: \\"3.0rem\\",
+        wrapper: { display: \\"block\\", position: \\"relative\\", cursor: \\"pointer\\" },
+        iconWrapper: {
+          position: \\"absolute\\",
+          height: \\"50%\\",
+          top: \\"25%\\",
+          right: \\"1rem\\",
+          pointerEvents: \\"none\\",
+        },
+      },
+      switchfield: {
+        disabled: { opacity: \\"0.3\\" },
+        focused: { shadow: \\"0 0 4px #000\\" },
+        label: { padding: \\"0.5rem\\" },
+        large: { font: { size: \\"1.25rem\\" } },
+        small: { font: { size: \\"0.875rem\\" } },
+        thumb: {
+          background: \\"#fff\\",
+          border: { color: \\"hsl(210, 5%, 90%)\\", radius: \\"8rem\\" },
+          checked: { transform: \\"translateX(1em)\\" },
+          transition: { duration: \\"250ms\\" },
+          width: \\"1em\\",
+        },
+        track: {
+          background: \\"hsl(210, 5%, 80%)\\",
+          border: { radius: \\"8rem\\" },
+          checked: { background: \\"hsl(220, 70%, 70%)\\" },
+          height: \\"1em\\",
+          padding: \\"2px\\",
+          transition: { duration: \\"100ms\\" },
+          width: \\"2.0em\\",
+        },
+      },
+      tabs: {
+        backgroundColor: \\"transparent\\",
+        borderColor: \\"hsl(210, 5%, 80%)\\",
+        borderStyle: \\"solid\\",
+        borderWidth: \\"2px\\",
+        item: {
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 80%)\\",
+          borderStyle: \\"solid\\",
+          borderWidth: \\"2px\\",
+          color: \\"hsl(210, 10%, 40%)\\",
+          fontSize: \\"1rem\\",
+          fontWeight: 700,
+          padding: \\"0.75rem 1rem\\",
+          textAlign: \\"center\\",
+          transitionDuration: \\"250ms\\",
+          _hover: { color: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { color: \\"hsl(190, 100%, 20%)\\" },
+          _active: {
+            color: \\"hsl(190, 95%, 30%)\\",
+            borderColor: \\"hsl(190, 95%, 30%)\\",
+            backgroundColor: \\"transparent\\",
+          },
+          _disabled: {
+            color: \\"hsl(210, 6%, 70%)\\",
+            backgroundColor: \\"transparent\\",
+            borderColor: \\"hsl(210, 5%, 90%)\\",
+          },
+        },
+      },
+      text: {
+        color: \\"hsl(210, 50%, 10%)\\",
+        primary: { color: \\"hsl(210, 50%, 10%)\\" },
+        secondary: { color: \\"hsl(210, 10%, 40%)\\" },
+        tertiary: { color: \\"hsl(210, 6%, 70%)\\" },
+        error: { color: \\"hsl(0, 95%, 30%)\\" },
+        warning: { color: \\"hsl(30, 95%, 30%)\\" },
+        success: { color: \\"hsl(130, 95%, 30%)\\" },
+        info: { color: \\"hsl(220, 95%, 30%)\\" },
+      },
+    },
+    borderWidths: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    breakpoints: {
+      values: { base: 0, small: 30, medium: 48, large: 62, xl: 80, xxl: 96 },
+      unit: \\"em\\",
+      defaultBreakpoint: \\"base\\",
+    },
+    colors: {
+      red: {
+        10: \\"hsl(0, 75%, 95%)\\",
+        20: \\"hsl(0, 75%, 85%)\\",
+        40: \\"hsl(0, 75%, 75%)\\",
+        60: \\"hsl(0, 50%, 50%)\\",
+        80: \\"hsl(0, 95%, 30%)\\",
+        90: \\"hsl(0, 100%, 20%)\\",
+        100: \\"hsl(0, 100%, 15%)\\",
+      },
+      orange: {
+        10: \\"hsl(30, 75%, 95%)\\",
+        20: \\"hsl(30, 75%, 85%)\\",
+        40: \\"hsl(30, 75%, 75%)\\",
+        60: \\"hsl(30, 50%, 50%)\\",
+        80: \\"hsl(30, 95%, 30%)\\",
+        90: \\"hsl(30, 100%, 20%)\\",
+        100: \\"hsl(30, 100%, 15%)\\",
+      },
+      yellow: {
+        10: \\"hsl(60, 75%, 95%)\\",
+        20: \\"hsl(60, 75%, 85%)\\",
+        40: \\"hsl(60, 75%, 75%)\\",
+        60: \\"hsl(60, 50%, 50%)\\",
+        80: \\"hsl(60, 95%, 30%)\\",
+        90: \\"hsl(60, 100%, 20%)\\",
+        100: \\"hsl(60, 100%, 15%)\\",
+      },
+      green: {
+        10: \\"hsl(130, 75%, 95%)\\",
+        20: \\"hsl(130, 75%, 85%)\\",
+        40: \\"hsl(130, 75%, 75%)\\",
+        60: \\"hsl(130, 50%, 50%)\\",
+        80: \\"hsl(130, 95%, 30%)\\",
+        90: \\"hsl(130, 100%, 20%)\\",
+        100: \\"hsl(130, 100%, 15%)\\",
+      },
+      teal: {
+        10: \\"hsl(190, 75%, 95%)\\",
+        20: \\"hsl(190, 75%, 85%)\\",
+        40: \\"hsl(190, 70%, 70%)\\",
+        60: \\"hsl(190, 50%, 50%)\\",
+        80: \\"hsl(190, 95%, 30%)\\",
+        90: \\"hsl(190, 100%, 20%)\\",
+        100: \\"hsl(190, 100%, 15%)\\",
+      },
+      blue: {
+        10: \\"hsl(220, 95%, 95%)\\",
+        20: \\"hsl(220, 85%, 85%)\\",
+        40: \\"hsl(220, 70%, 70%)\\",
+        60: \\"hsl(220, 50%, 50%)\\",
+        80: \\"hsl(220, 95%, 30%)\\",
+        90: \\"hsl(220, 100%, 20%)\\",
+        100: \\"hsl(220, 100%, 15%)\\",
+      },
+      purple: {
+        10: \\"hsl(300, 95%, 95%)\\",
+        20: \\"hsl(300, 85%, 85%)\\",
+        40: \\"hsl(300, 70%, 70%)\\",
+        60: \\"hsl(300, 50%, 50%)\\",
+        80: \\"hsl(300, 95%, 30%)\\",
+        90: \\"hsl(300, 100%, 20%)\\",
+        100: \\"hsl(300, 100%, 15%)\\",
+      },
+      pink: {
+        10: \\"hsl(340, 95%, 95%)\\",
+        20: \\"hsl(340, 90%, 85%)\\",
+        40: \\"hsl(340, 70%, 70%)\\",
+        60: \\"hsl(340, 50%, 50%)\\",
+        80: \\"hsl(340, 95%, 30%)\\",
+        90: \\"hsl(340, 100%, 20%)\\",
+        100: \\"hsl(340, 100%, 15%)\\",
+      },
+      neutral: {
+        10: \\"hsl(210, 5%, 95%)\\",
+        20: \\"hsl(210, 5%, 90%)\\",
+        40: \\"hsl(210, 5%, 80%)\\",
+        60: \\"hsl(210, 6%, 70%)\\",
+        80: \\"hsl(210, 10%, 40%)\\",
+        90: \\"hsl(210, 25%, 25%)\\",
+        100: \\"hsl(210, 50%, 10%)\\",
+      },
+      brand: {
+        primary: {
+          10: \\"hsl(190, 75%, 95%)\\",
+          20: \\"hsl(190, 75%, 85%)\\",
+          40: \\"hsl(190, 70%, 70%)\\",
+          60: \\"hsl(190, 50%, 50%)\\",
+          80: \\"hsl(190, 95%, 30%)\\",
+          90: \\"hsl(190, 100%, 20%)\\",
+          100: \\"hsl(190, 100%, 15%)\\",
+        },
+        secondary: {
+          10: \\"hsl(300, 95%, 95%)\\",
+          20: \\"hsl(300, 85%, 85%)\\",
+          40: \\"hsl(300, 70%, 70%)\\",
+          60: \\"hsl(300, 50%, 50%)\\",
+          80: \\"hsl(300, 95%, 30%)\\",
+          90: \\"hsl(300, 100%, 20%)\\",
+          100: \\"hsl(300, 100%, 15%)\\",
+        },
+      },
+      font: {
+        primary: \\"hsl(210, 50%, 10%)\\",
+        secondary: \\"hsl(210, 10%, 40%)\\",
+        tertiary: \\"hsl(210, 6%, 70%)\\",
+        disabled: \\"hsl(210, 6%, 70%)\\",
+        inverse: \\"#fff\\",
+        interactive: \\"hsl(190, 95%, 30%)\\",
+        hover: \\"hsl(190, 100%, 20%)\\",
+        focus: \\"hsl(190, 100%, 20%)\\",
+        active: \\"hsl(190, 100%, 15%)\\",
+        info: \\"hsl(220, 95%, 30%)\\",
+        warning: \\"hsl(30, 95%, 30%)\\",
+        error: \\"hsl(0, 95%, 30%)\\",
+        success: \\"hsl(130, 95%, 30%)\\",
+      },
+      background: {
+        primary: \\"#fff\\",
+        secondary: \\"hsl(210, 5%, 95%)\\",
+        tertiary: \\"hsl(210, 5%, 90%)\\",
+        disabled: \\"hsl(210, 5%, 95%)\\",
+        info: \\"hsl(220, 85%, 85%)\\",
+        warning: \\"hsl(30, 75%, 85%)\\",
+        error: \\"hsl(0, 75%, 85%)\\",
+        success: \\"hsl(130, 75%, 85%)\\",
+      },
+      border: {
+        primary: \\"hsl(210, 6%, 70%)\\",
+        secondary: \\"hsl(210, 5%, 80%)\\",
+        tertiary: \\"hsl(210, 5%, 90%)\\",
+      },
+      focus: \\"hsl(190, 100%, 15%)\\",
+      error: \\"hsl(0, 95%, 30%)\\",
+      shadow: {
+        primary: \\"hsl(210, 50%, 10%, 0.25)\\",
+        secondary: \\"hsl(210, 50%, 10%, 0.15)\\",
+        tertiary: \\"hsl(210, 50%, 10%, 0.05)\\",
+      },
+      black: \\"#000\\",
+      white: \\"#fff\\",
+      transparent: \\"transparent\\",
+      icon: { filled: \\"hsl(30, 75%, 75%)\\", empty: \\"hsl(210, 6%, 70%)\\" },
+    },
+    fonts: {
+      default: {
+        variable:
+          \\"'InterVariable', -apple-system, BlinkMacSystemFont,\\\\n        'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\\\\n        sans-serif\\",
+        static:
+          \\"'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\\\\n        'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif\\",
+      },
+    },
+    fontSizes: {
+      xs: \\"0.75rem\\",
+      small: \\"0.875rem\\",
+      medium: \\"1rem\\",
+      large: \\"1.25rem\\",
+      xl: \\"1.5rem\\",
+      xxl: \\"2rem\\",
+      xxxl: \\"3rem\\",
+      xxxxl: \\"5rem\\",
+    },
+    fontWeights: {
+      hairline: 100,
+      thin: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+    },
+    lineHeights: { small: \\"2\\", medium: \\"2.25\\", large: \\"2.5\\" },
+    opacities: {
+      0: \\"0\\",
+      10: \\"0.1\\",
+      20: \\"0.2\\",
+      30: \\"0.3\\",
+      40: \\"0.4\\",
+      50: \\"0.5\\",
+      60: \\"0.6\\",
+      70: \\"0.7\\",
+      80: \\"0.8\\",
+      90: \\"0.9\\",
+      100: \\"1\\",
+    },
+    outlineOffsets: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    outlineWidths: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    radii: {
+      small: \\"0.125rem\\",
+      medium: \\"0.25rem\\",
+      large: \\"1rem\\",
+      xl: \\"2rem\\",
+      xxl: \\"4rem\\",
+      xxxl: \\"8rem\\",
+    },
+    shadows: {
+      small: \\"0 2px 4px hsl(210, 50%, 10%, 0.05)\\",
+      medium: \\"0 2px 6px hsl(210, 50%, 10%, 0.15)\\",
+      large: \\"0 4px 12px hsl(210, 50%, 10%, 0.25)\\",
+      switch: \\"0 0 4px #000\\",
+    },
+    space: {
+      xxs: \\"0.25rem\\",
+      xs: \\"0.5rem\\",
+      small: \\"0.75rem\\",
+      medium: \\"1rem\\",
+      large: \\"1.5rem\\",
+      xl: \\"2.0rem\\",
+      xxl: \\"3.0rem\\",
+      xxxl: \\"4.5rem\\",
+      relative: {
+        xxs: \\"0.25em\\",
+        xs: \\"0.5em\\",
+        small: \\"0.75em\\",
+        medium: \\"1em\\",
+        large: \\"1.5em\\",
+        xl: \\"2.0em\\",
+        xxl: \\"3.0em\\",
+        xxxl: \\"4.5em\\",
+      },
+    },
+    time: { transition: { short: \\"100ms\\", medium: \\"250ms\\", long: \\"500ms\\" } },
+    transforms: {
+      slideX: {
+        small: \\"translateX(0.5em)\\",
+        medium: \\"translateX(1em)\\",
+        large: \\"translateX(2em)\\",
+      },
+    },
+    types: {
+      null: null,
+      string: \\"test\\",
+      number: 10,
+      boolean: { t: true, false: false },
+      object: { object: { test: \\"test\\" }, array: [\\"test\\"] },
+    },
+  };
+  var displayName =
+    WrappedComponent.displayName || WrappedComponent.name || \\"Component\\";
+  var ComponentWithTheme = function (props) {
+    var theming = extendTheming(theme);
+    return React.createElement(
+      AmplifyProvider,
+      { theming: theming },
+      React.createElement(WrappedComponent, __assign({}, props))
+    );
+  };
+  ComponentWithTheme.displayName = displayName;
+  return ComponentWithTheme;
+}
+"
+`;
+
+exports[`amplify render tests theme should render the theme with TSX 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { React } from \\"react\\";
+import {
+  AmplifyProvider,
+  DeepPartial,
+  Theme,
+  extendTheming,
+} from \\"@aws-amplify/ui-react\\";
+export default function withTheme<T>(
+  WrappedComponent: React.ReactComponent<T>
+) {
+  const theme = {
+    components: {
+      alert: {
+        backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        padding: \\"0.75rem 1rem\\",
+        info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" },
+        error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" },
+        warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" },
+        success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" },
+      },
+      badge: {
+        lineHeight: 1,
+        fontWeight: 600,
+        fontSize: \\"0.875rem\\",
+        textAlign: \\"center\\",
+        padding: \\"0.5rem 0.75rem\\",
+        backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        borderRadius: \\"9999px\\",
+        info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" },
+        warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" },
+        success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" },
+        error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" },
+        small: { fontSize: \\"0.75rem\\", padding: \\"0.25rem 0.5rem\\" },
+        large: { fontSize: \\"1rem\\", padding: \\"0.75rem 1rem\\" },
+      },
+      button: {
+        fontWeight: \\"bold\\",
+        textAlign: \\"center\\",
+        borderRadius: \\"0.25rem\\",
+        transitionDuration: \\"250ms\\",
+        fontSize: \\"1rem\\",
+        lineHeight: \\"1rem\\",
+        padding: \\"0.75rem 1rem\\",
+        borderColor: \\"hsl(190, 75%, 85%)\\",
+        borderWidth: \\"1px\\",
+        borderStyle: \\"solid\\",
+        color: \\"hsl(190, 95%, 30%)\\",
+        _hover: {
+          color: \\"hsl(190, 100%, 15%)\\",
+          backgroundColor: \\"hsl(190, 75%, 95%)\\",
+          borderColor: \\"hsl(190, 50%, 50%)\\",
+        },
+        _focus: {
+          color: \\"hsl(190, 100%, 15%)\\",
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+          boxShadow: \\"hsl(190, 100%, 15%) 0px 0px 0px 1px\\",
+        },
+        _active: {
+          color: \\"#fff\\",
+          backgroundColor: \\"hsl(190, 100%, 15%)\\",
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+        },
+        _loading: {
+          color: \\"hsl(210, 6%, 70%)\\",
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        _disabled: {
+          color: \\"hsl(210, 6%, 70%)\\",
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        primary: {
+          borderWidth: 0,
+          backgroundColor: \\"hsl(190, 95%, 30%)\\",
+          color: \\"#fff\\",
+          _disabled: {
+            backgroundColor: \\"hsl(210, 5%, 90%)\\",
+            color: \\"hsl(210, 6%, 70%)\\",
+          },
+          _loading: {
+            backgroundColor: \\"hsl(210, 5%, 90%)\\",
+            color: \\"hsl(210, 6%, 70%)\\",
+          },
+          _hover: { backgroundColor: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { backgroundColor: \\"hsl(190, 100%, 20%)\\" },
+          _active: { backgroundColor: \\"hsl(190, 100%, 15%)\\" },
+        },
+        link: {
+          borderWidth: 0,
+          backgroundColor: \\"transparent\\",
+          color: \\"hsl(190, 95%, 30%)\\",
+          _hover: { color: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { color: \\"hsl(190, 100%, 20%)\\" },
+          _active: { color: \\"hsl(190, 100%, 15%)\\" },
+          _disabled: { color: \\"hsl(210, 6%, 70%)\\" },
+          _loading: { color: \\"hsl(210, 6%, 70%)\\" },
+        },
+        small: {
+          fontSize: \\"0.875rem\\",
+          lineHeight: \\"0.875rem\\",
+          padding: \\"0.5rem 0.75rem\\",
+        },
+        large: {
+          fontSize: \\"1.25rem\\",
+          lineHeight: \\"1.25rem\\",
+          padding: \\"1rem 1.5rem\\",
+        },
+      },
+      card: {
+        backgroundColor: \\"#fff\\",
+        borderWidth: \\"1px\\",
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        boxShadow: \\"0 2px 6px hsl(210, 50%, 10%, 0.15)\\",
+        padding: \\"1rem\\",
+      },
+      divider: {
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        borderWidth: \\"2px\\",
+        small: { borderWidth: \\"1px\\" },
+        large: { borderWidth: \\"3px\\" },
+        opacity: \\"0.6\\",
+      },
+      field: {
+        gap: \\"0.5rem\\",
+        fontSize: \\"1rem\\",
+        small: { gap: \\"0.25rem\\", fontSize: \\"0.875rem\\" },
+        large: { gap: \\"0.75rem\\", fontSize: \\"1.25rem\\" },
+      },
+      fieldcontrol: {
+        borderStyle: \\"solid\\",
+        borderColor: \\"hsl(210, 6%, 70%)\\",
+        borderWidth: \\"1px\\",
+        borderRadius: \\"0.25rem\\",
+        padding: \\"0.5rem 1rem\\",
+        fontSize: \\"1rem\\",
+        lineHeight: \\"2.25\\",
+        transitionDuration: \\"250ms\\",
+        outlineColor: \\"transparent\\",
+        outlineStyle: \\"solid\\",
+        outlineWidth: \\"2px\\",
+        outlineOffset: \\"2px\\",
+        small: {
+          fontSize: \\"0.875rem\\",
+          padding: \\"0.5rem 0.75rem\\",
+          lineHeight: \\"2\\",
+        },
+        large: {
+          fontSize: \\"1.25rem\\",
+          padding: \\"1rem 1.5rem\\",
+          lineHeight: \\"2.5\\",
+        },
+        quiet: {
+          borderStyle: \\"none\\",
+          borderBlockEnd: \\"1px solid hsl(210, 6%, 70%)\\",
+          borderInlineStart: \\"none\\",
+          borderInlineEnd: \\"none\\",
+          borderBlockStart: \\"none\\",
+          borderRadius: \\"0\\",
+          _focus: {
+            borderBlockEndColor: \\"hsl(190, 100%, 15%)\\",
+            boxShadow: \\"0 1px hsl(190, 100%, 15%)\\",
+          },
+          _error: {
+            borderBlockEndColor: \\"hsl(0, 95%, 30%)\\",
+            _focus: { boxShadow: \\"0 1px hsl(0, 95%, 30%)\\" },
+          },
+        },
+        _focus: {
+          borderColor: \\"hsl(190, 100%, 15%)\\",
+          boxShadow: \\"0px 0px 0px 1px hsl(190, 100%, 15%)\\",
+        },
+        _disabled: {
+          cursor: \\"not-allowed\\",
+          borderColor: \\"transparent\\",
+          backgroundColor: \\"hsl(210, 5%, 90%)\\",
+        },
+        _error: {
+          borderColor: \\"hsl(0, 95%, 30%)\\",
+          _focus: { boxShadow: \\"0px 0px 0px 1px hsl(0, 95%, 30%)\\" },
+        },
+      },
+      fieldgroup: { gap: 0 },
+      fieldmessages: {
+        error: { color: \\"hsl(0, 95%, 30%)\\", fontSize: \\"0.875rem\\" },
+        description: { fontStyle: \\"italic\\", fontSize: \\"0.875rem\\" },
+      },
+      flex: {
+        gap: \\"1rem\\",
+        justifyContent: \\"normal\\",
+        alignItems: \\"stretch\\",
+        alignContent: \\"normal\\",
+        flexWrap: \\"nowrap\\",
+      },
+      heading: {
+        1: { fontSize: \\"5rem\\", fontWeight: 300 },
+        2: { fontSize: \\"3rem\\", fontWeight: 300 },
+        3: { fontSize: \\"2rem\\", fontWeight: 400 },
+        4: { fontSize: \\"1.5rem\\", fontWeight: 500 },
+        5: { fontSize: \\"1.25rem\\", fontWeight: 600 },
+        6: { fontSize: \\"1rem\\", fontWeight: 700 },
+        color: \\"hsl(210, 50%, 10%)\\",
+        lineHeight: 1.25,
+      },
+      icon: {
+        lineHeight: 1,
+        height: \\"1rem\\",
+        large: { height: \\"1.25rem\\" },
+        small: { height: \\"0.875rem\\" },
+      },
+      image: {
+        maxWidth: \\"100%\\",
+        height: \\"auto\\",
+        objectFit: \\"initial\\",
+        objectPosition: \\"initial\\",
+      },
+      link: {
+        active: { color: \\"hsl(190, 100%, 15%)\\" },
+        color: \\"hsl(190, 95%, 30%)\\",
+        focus: { color: \\"hsl(190, 100%, 20%)\\" },
+        hover: { color: \\"hsl(190, 100%, 20%)\\" },
+        large: { fontSize: \\"1.25rem\\" },
+        small: { fontSize: \\"0.875rem\\" },
+        visited: { color: \\"hsl(210, 6%, 70%)\\" },
+      },
+      pagination: {
+        current: {
+          color: \\"#fff\\",
+          fontSize: \\"0.875rem\\",
+          backgroundColor: \\"rgba(0, 0, 0, 0.4)\\",
+        },
+        button: {
+          color: \\"inherit\\",
+          fontWeight: \\"inherit\\",
+          paddingTop: \\"0\\",
+          paddingRight: \\"6px\\",
+          paddingBottom: \\"0\\",
+          paddingLeft: \\"6px\\",
+          transition: \\"background-color 250ms\\",
+          hover: { backgroundColor: \\"rgba(0, 0, 0, 0.1)\\" },
+          disabled: { opacity: \\"0.4\\" },
+        },
+        ellipsis: { paddingRight: \\"8px\\", paddingLeft: \\"8px\\" },
+        itemContainer: { marginLeft: \\"4px\\", marginRight: \\"4px\\" },
+        itemShared: { height: \\"2rem\\", minWidth: \\"2rem\\", borderRadius: \\"1rem\\" },
+      },
+      placeholder: {
+        borderRadius: \\"0.25rem\\",
+        transitionDuration: \\"500ms\\",
+        startColor: \\"hsl(210, 5%, 95%)\\",
+        endColor: \\"hsl(210, 5%, 90%)\\",
+        small: { height: \\"0.75rem\\" },
+        default: { height: \\"1rem\\" },
+        large: { height: \\"1.5rem\\" },
+      },
+      radio: {
+        alignItems: \\"center\\",
+        justifyContent: \\"flex-start\\",
+        gap: \\"inherit\\",
+        button: {
+          alignItems: \\"center\\",
+          justifyContent: \\"center\\",
+          width: \\"1rem\\",
+          height: \\"1rem\\",
+          boxSizing: \\"border-box\\",
+          borderWidth: \\"2px\\",
+          borderStyle: \\"solid\\",
+          borderRadius: \\"50%\\",
+          borderColor: \\"hsl(210, 6%, 70%)\\",
+          color: \\"#fff\\",
+          backgroundColor: \\"#fff\\",
+          transitionProperty: \\"all\\",
+          transitionDuration: \\"250ms\\",
+          outlineColor: \\"transparent\\",
+          outlineStyle: \\"solid\\",
+          outlineWidth: \\"2px\\",
+          outlineOffset: \\"2px\\",
+          before: {
+            content: '\\"\\"',
+            display: \\"inline-block\\",
+            width: \\"50%\\",
+            height: \\"50%\\",
+            borderRadius: \\"50%\\",
+            backgroundColor: \\"currentColor\\",
+          },
+          small: { width: \\"0.75rem\\", height: \\"0.75rem\\" },
+          large: { width: \\"1.25rem\\", height: \\"1.25rem\\" },
+          _checked: {
+            color: \\"hsl(0, 50%, 50%)\\",
+            _disabled: { color: \\"hsl(210, 5%, 80%)\\" },
+          },
+          _focus: {
+            borderColor: \\"hsl(190, 100%, 15%)\\",
+            boxShadow: \\"0 0 0 1px hsl(190, 100%, 15%)\\",
+          },
+          _disabled: {
+            borderColor: \\"#e9ecf0\\",
+            backgroundColor: \\"#fff\\",
+            color: \\"#fff\\",
+          },
+        },
+        label: { _disabled: { color: \\"#d6dbe2\\" } },
+      },
+      rating: {
+        large: { size: \\"3rem\\" },
+        default: { size: \\"1.5rem\\" },
+        small: { size: \\"0.875rem\\" },
+        filled: { color: \\"hsl(30, 75%, 75%)\\" },
+        empty: { color: \\"hsl(210, 6%, 70%)\\" },
+      },
+      select: {
+        paddingInlineEnd: \\"3.0rem\\",
+        wrapper: { display: \\"block\\", position: \\"relative\\", cursor: \\"pointer\\" },
+        iconWrapper: {
+          position: \\"absolute\\",
+          height: \\"50%\\",
+          top: \\"25%\\",
+          right: \\"1rem\\",
+          pointerEvents: \\"none\\",
+        },
+      },
+      switchfield: {
+        disabled: { opacity: \\"0.3\\" },
+        focused: { shadow: \\"0 0 4px #000\\" },
+        label: { padding: \\"0.5rem\\" },
+        large: { font: { size: \\"1.25rem\\" } },
+        small: { font: { size: \\"0.875rem\\" } },
+        thumb: {
+          background: \\"#fff\\",
+          border: { color: \\"hsl(210, 5%, 90%)\\", radius: \\"8rem\\" },
+          checked: { transform: \\"translateX(1em)\\" },
+          transition: { duration: \\"250ms\\" },
+          width: \\"1em\\",
+        },
+        track: {
+          background: \\"hsl(210, 5%, 80%)\\",
+          border: { radius: \\"8rem\\" },
+          checked: { background: \\"hsl(220, 70%, 70%)\\" },
+          height: \\"1em\\",
+          padding: \\"2px\\",
+          transition: { duration: \\"100ms\\" },
+          width: \\"2.0em\\",
+        },
+      },
+      tabs: {
+        backgroundColor: \\"transparent\\",
+        borderColor: \\"hsl(210, 5%, 80%)\\",
+        borderStyle: \\"solid\\",
+        borderWidth: \\"2px\\",
+        item: {
+          backgroundColor: \\"transparent\\",
+          borderColor: \\"hsl(210, 5%, 80%)\\",
+          borderStyle: \\"solid\\",
+          borderWidth: \\"2px\\",
+          color: \\"hsl(210, 10%, 40%)\\",
+          fontSize: \\"1rem\\",
+          fontWeight: 700,
+          padding: \\"0.75rem 1rem\\",
+          textAlign: \\"center\\",
+          transitionDuration: \\"250ms\\",
+          _hover: { color: \\"hsl(190, 100%, 20%)\\" },
+          _focus: { color: \\"hsl(190, 100%, 20%)\\" },
+          _active: {
+            color: \\"hsl(190, 95%, 30%)\\",
+            borderColor: \\"hsl(190, 95%, 30%)\\",
+            backgroundColor: \\"transparent\\",
+          },
+          _disabled: {
+            color: \\"hsl(210, 6%, 70%)\\",
+            backgroundColor: \\"transparent\\",
+            borderColor: \\"hsl(210, 5%, 90%)\\",
+          },
+        },
+      },
+      text: {
+        color: \\"hsl(210, 50%, 10%)\\",
+        primary: { color: \\"hsl(210, 50%, 10%)\\" },
+        secondary: { color: \\"hsl(210, 10%, 40%)\\" },
+        tertiary: { color: \\"hsl(210, 6%, 70%)\\" },
+        error: { color: \\"hsl(0, 95%, 30%)\\" },
+        warning: { color: \\"hsl(30, 95%, 30%)\\" },
+        success: { color: \\"hsl(130, 95%, 30%)\\" },
+        info: { color: \\"hsl(220, 95%, 30%)\\" },
+      },
+    },
+    borderWidths: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    breakpoints: {
+      values: { base: 0, small: 30, medium: 48, large: 62, xl: 80, xxl: 96 },
+      unit: \\"em\\",
+      defaultBreakpoint: \\"base\\",
+    },
+    colors: {
+      red: {
+        10: \\"hsl(0, 75%, 95%)\\",
+        20: \\"hsl(0, 75%, 85%)\\",
+        40: \\"hsl(0, 75%, 75%)\\",
+        60: \\"hsl(0, 50%, 50%)\\",
+        80: \\"hsl(0, 95%, 30%)\\",
+        90: \\"hsl(0, 100%, 20%)\\",
+        100: \\"hsl(0, 100%, 15%)\\",
+      },
+      orange: {
+        10: \\"hsl(30, 75%, 95%)\\",
+        20: \\"hsl(30, 75%, 85%)\\",
+        40: \\"hsl(30, 75%, 75%)\\",
+        60: \\"hsl(30, 50%, 50%)\\",
+        80: \\"hsl(30, 95%, 30%)\\",
+        90: \\"hsl(30, 100%, 20%)\\",
+        100: \\"hsl(30, 100%, 15%)\\",
+      },
+      yellow: {
+        10: \\"hsl(60, 75%, 95%)\\",
+        20: \\"hsl(60, 75%, 85%)\\",
+        40: \\"hsl(60, 75%, 75%)\\",
+        60: \\"hsl(60, 50%, 50%)\\",
+        80: \\"hsl(60, 95%, 30%)\\",
+        90: \\"hsl(60, 100%, 20%)\\",
+        100: \\"hsl(60, 100%, 15%)\\",
+      },
+      green: {
+        10: \\"hsl(130, 75%, 95%)\\",
+        20: \\"hsl(130, 75%, 85%)\\",
+        40: \\"hsl(130, 75%, 75%)\\",
+        60: \\"hsl(130, 50%, 50%)\\",
+        80: \\"hsl(130, 95%, 30%)\\",
+        90: \\"hsl(130, 100%, 20%)\\",
+        100: \\"hsl(130, 100%, 15%)\\",
+      },
+      teal: {
+        10: \\"hsl(190, 75%, 95%)\\",
+        20: \\"hsl(190, 75%, 85%)\\",
+        40: \\"hsl(190, 70%, 70%)\\",
+        60: \\"hsl(190, 50%, 50%)\\",
+        80: \\"hsl(190, 95%, 30%)\\",
+        90: \\"hsl(190, 100%, 20%)\\",
+        100: \\"hsl(190, 100%, 15%)\\",
+      },
+      blue: {
+        10: \\"hsl(220, 95%, 95%)\\",
+        20: \\"hsl(220, 85%, 85%)\\",
+        40: \\"hsl(220, 70%, 70%)\\",
+        60: \\"hsl(220, 50%, 50%)\\",
+        80: \\"hsl(220, 95%, 30%)\\",
+        90: \\"hsl(220, 100%, 20%)\\",
+        100: \\"hsl(220, 100%, 15%)\\",
+      },
+      purple: {
+        10: \\"hsl(300, 95%, 95%)\\",
+        20: \\"hsl(300, 85%, 85%)\\",
+        40: \\"hsl(300, 70%, 70%)\\",
+        60: \\"hsl(300, 50%, 50%)\\",
+        80: \\"hsl(300, 95%, 30%)\\",
+        90: \\"hsl(300, 100%, 20%)\\",
+        100: \\"hsl(300, 100%, 15%)\\",
+      },
+      pink: {
+        10: \\"hsl(340, 95%, 95%)\\",
+        20: \\"hsl(340, 90%, 85%)\\",
+        40: \\"hsl(340, 70%, 70%)\\",
+        60: \\"hsl(340, 50%, 50%)\\",
+        80: \\"hsl(340, 95%, 30%)\\",
+        90: \\"hsl(340, 100%, 20%)\\",
+        100: \\"hsl(340, 100%, 15%)\\",
+      },
+      neutral: {
+        10: \\"hsl(210, 5%, 95%)\\",
+        20: \\"hsl(210, 5%, 90%)\\",
+        40: \\"hsl(210, 5%, 80%)\\",
+        60: \\"hsl(210, 6%, 70%)\\",
+        80: \\"hsl(210, 10%, 40%)\\",
+        90: \\"hsl(210, 25%, 25%)\\",
+        100: \\"hsl(210, 50%, 10%)\\",
+      },
+      brand: {
+        primary: {
+          10: \\"hsl(190, 75%, 95%)\\",
+          20: \\"hsl(190, 75%, 85%)\\",
+          40: \\"hsl(190, 70%, 70%)\\",
+          60: \\"hsl(190, 50%, 50%)\\",
+          80: \\"hsl(190, 95%, 30%)\\",
+          90: \\"hsl(190, 100%, 20%)\\",
+          100: \\"hsl(190, 100%, 15%)\\",
+        },
+        secondary: {
+          10: \\"hsl(300, 95%, 95%)\\",
+          20: \\"hsl(300, 85%, 85%)\\",
+          40: \\"hsl(300, 70%, 70%)\\",
+          60: \\"hsl(300, 50%, 50%)\\",
+          80: \\"hsl(300, 95%, 30%)\\",
+          90: \\"hsl(300, 100%, 20%)\\",
+          100: \\"hsl(300, 100%, 15%)\\",
+        },
+      },
+      font: {
+        primary: \\"hsl(210, 50%, 10%)\\",
+        secondary: \\"hsl(210, 10%, 40%)\\",
+        tertiary: \\"hsl(210, 6%, 70%)\\",
+        disabled: \\"hsl(210, 6%, 70%)\\",
+        inverse: \\"#fff\\",
+        interactive: \\"hsl(190, 95%, 30%)\\",
+        hover: \\"hsl(190, 100%, 20%)\\",
+        focus: \\"hsl(190, 100%, 20%)\\",
+        active: \\"hsl(190, 100%, 15%)\\",
+        info: \\"hsl(220, 95%, 30%)\\",
+        warning: \\"hsl(30, 95%, 30%)\\",
+        error: \\"hsl(0, 95%, 30%)\\",
+        success: \\"hsl(130, 95%, 30%)\\",
+      },
+      background: {
+        primary: \\"#fff\\",
+        secondary: \\"hsl(210, 5%, 95%)\\",
+        tertiary: \\"hsl(210, 5%, 90%)\\",
+        disabled: \\"hsl(210, 5%, 95%)\\",
+        info: \\"hsl(220, 85%, 85%)\\",
+        warning: \\"hsl(30, 75%, 85%)\\",
+        error: \\"hsl(0, 75%, 85%)\\",
+        success: \\"hsl(130, 75%, 85%)\\",
+      },
+      border: {
+        primary: \\"hsl(210, 6%, 70%)\\",
+        secondary: \\"hsl(210, 5%, 80%)\\",
+        tertiary: \\"hsl(210, 5%, 90%)\\",
+      },
+      focus: \\"hsl(190, 100%, 15%)\\",
+      error: \\"hsl(0, 95%, 30%)\\",
+      shadow: {
+        primary: \\"hsl(210, 50%, 10%, 0.25)\\",
+        secondary: \\"hsl(210, 50%, 10%, 0.15)\\",
+        tertiary: \\"hsl(210, 50%, 10%, 0.05)\\",
+      },
+      black: \\"#000\\",
+      white: \\"#fff\\",
+      transparent: \\"transparent\\",
+      icon: { filled: \\"hsl(30, 75%, 75%)\\", empty: \\"hsl(210, 6%, 70%)\\" },
+    },
+    fonts: {
+      default: {
+        variable:
+          \\"'InterVariable', -apple-system, BlinkMacSystemFont,\\\\n        'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\\\\n        sans-serif\\",
+        static:
+          \\"'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\\\\n        'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif\\",
+      },
+    },
+    fontSizes: {
+      xs: \\"0.75rem\\",
+      small: \\"0.875rem\\",
+      medium: \\"1rem\\",
+      large: \\"1.25rem\\",
+      xl: \\"1.5rem\\",
+      xxl: \\"2rem\\",
+      xxxl: \\"3rem\\",
+      xxxxl: \\"5rem\\",
+    },
+    fontWeights: {
+      hairline: 100,
+      thin: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+    },
+    lineHeights: { small: \\"2\\", medium: \\"2.25\\", large: \\"2.5\\" },
+    opacities: {
+      0: \\"0\\",
+      10: \\"0.1\\",
+      20: \\"0.2\\",
+      30: \\"0.3\\",
+      40: \\"0.4\\",
+      50: \\"0.5\\",
+      60: \\"0.6\\",
+      70: \\"0.7\\",
+      80: \\"0.8\\",
+      90: \\"0.9\\",
+      100: \\"1\\",
+    },
+    outlineOffsets: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    outlineWidths: { small: \\"1px\\", medium: \\"2px\\", large: \\"3px\\" },
+    radii: {
+      small: \\"0.125rem\\",
+      medium: \\"0.25rem\\",
+      large: \\"1rem\\",
+      xl: \\"2rem\\",
+      xxl: \\"4rem\\",
+      xxxl: \\"8rem\\",
+    },
+    shadows: {
+      small: \\"0 2px 4px hsl(210, 50%, 10%, 0.05)\\",
+      medium: \\"0 2px 6px hsl(210, 50%, 10%, 0.15)\\",
+      large: \\"0 4px 12px hsl(210, 50%, 10%, 0.25)\\",
+      switch: \\"0 0 4px #000\\",
+    },
+    space: {
+      xxs: \\"0.25rem\\",
+      xs: \\"0.5rem\\",
+      small: \\"0.75rem\\",
+      medium: \\"1rem\\",
+      large: \\"1.5rem\\",
+      xl: \\"2.0rem\\",
+      xxl: \\"3.0rem\\",
+      xxxl: \\"4.5rem\\",
+      relative: {
+        xxs: \\"0.25em\\",
+        xs: \\"0.5em\\",
+        small: \\"0.75em\\",
+        medium: \\"1em\\",
+        large: \\"1.5em\\",
+        xl: \\"2.0em\\",
+        xxl: \\"3.0em\\",
+        xxxl: \\"4.5em\\",
+      },
+    },
+    time: { transition: { short: \\"100ms\\", medium: \\"250ms\\", long: \\"500ms\\" } },
+    transforms: {
+      slideX: {
+        small: \\"translateX(0.5em)\\",
+        medium: \\"translateX(1em)\\",
+        large: \\"translateX(2em)\\",
+      },
+    },
+    types: {
+      null: null,
+      string: \\"test\\",
+      number: 10,
+      boolean: { t: true, false: false },
+      object: { object: { test: \\"test\\" }, array: [\\"test\\"] },
+    },
+  };
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || \\"Component\\";
+  const ComponentWithTheme = (props: T) => {
+    const theming = extendTheming(theme);
+    return (
+      <AmplifyProvider theming={theming}>
+        <WrappedComponent {...props} />
+      </AmplifyProvider>
+    );
+  };
+  ComponentWithTheme.displayName = displayName;
+  return ComponentWithTheme;
+}
+"
+`;
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
index 0f486a016..b8db990f4 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -1,9 +1,10 @@
-import { StudioComponent } from '@amzn/amplify-ui-codegen-schema';
+import { StudioComponent, StudioTheme } from '@amzn/amplify-ui-codegen-schema';
 import { StudioTemplateRendererFactory } from '@amzn/studio-ui-codegen';
 import fs from 'fs';
 import { join } from 'path';
 import { ModuleKind, ScriptTarget, ScriptKind, ReactRenderConfig } from '..';
 import { AmplifyRenderer } from '../amplify-ui-renderers/amplify-renderer';
+import { ReactThemeStudioTemplateRenderer } from '../react-theme-studio-template-renderer';
 
 function loadSchemaFromJSONFile(jsonSchemaFile: string): StudioComponent {
   return JSON.parse(
@@ -11,6 +12,12 @@ function loadSchemaFromJSONFile(jsonSchemaFile: string): StudioComponent {
   ) as StudioComponent;
 }
 
+function loadThemeFromJSONFile(jsonThemeFile: string): StudioTheme {
+  return JSON.parse(
+    fs.readFileSync(join(__dirname, 'studio-ui-json', `${jsonThemeFile}.json`), 'utf-8'),
+  ) as StudioTheme;
+}
+
 function generateWithAmplifyRenderer(
   jsonSchemaFile: string,
   renderConfig: ReactRenderConfig = {},
@@ -26,6 +33,14 @@ function generateWithAmplifyRenderer(
   return rendererFactory.buildRenderer(schema).renderComponent().componentText;
 }
 
+function generateWithThemeRenderer(jsonFile: string, renderConfig: ReactRenderConfig = {}): string {
+  const theme = loadThemeFromJSONFile(jsonFile);
+  const rendererFactory = new StudioTemplateRendererFactory(
+    (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
+  );
+  return rendererFactory.buildRenderer(theme).renderComponent().componentText;
+}
+
 describe('amplify render tests', () => {
   describe('basic component tests', () => {
     it('should generate a simple box component', () => {
@@ -128,4 +143,18 @@ describe('amplify render tests', () => {
       ).toMatchSnapshot();
     });
   });
+
+  describe('theme', () => {
+    it('should render the theme', () => {
+      expect(generateWithThemeRenderer('theme')).toMatchSnapshot();
+    });
+
+    it('should render the theme with TSX', () => {
+      expect(generateWithThemeRenderer('theme', { script: ScriptKind.TSX })).toMatchSnapshot();
+    });
+
+    it('should render the theme with ES5', () => {
+      expect(generateWithThemeRenderer('theme', { target: ScriptTarget.ES5, script: ScriptKind.JS })).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/theme.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/theme.json
new file mode 100644
index 000000000..aeb2555b3
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/theme.json
@@ -0,0 +1,845 @@
+{
+  "components": {
+    "alert": {
+      "backgroundColor": "hsl(210, 5%, 90%)",
+      "padding": "0.75rem 1rem",
+      "info": {
+        "backgroundColor": "hsl(220, 85%, 85%)"
+      },
+      "error": {
+        "backgroundColor": "hsl(0, 75%, 85%)"
+      },
+      "warning": {
+        "backgroundColor": "hsl(30, 75%, 85%)"
+      },
+      "success": {
+        "backgroundColor": "hsl(130, 75%, 85%)"
+      }
+    },
+    "badge": {
+      "lineHeight": 1,
+      "fontWeight": 600,
+      "fontSize": "0.875rem",
+      "textAlign": "center",
+      "padding": "0.5rem 0.75rem",
+      "backgroundColor": "hsl(210, 5%, 90%)",
+      "borderRadius": "9999px",
+      "info": {
+        "backgroundColor": "hsl(220, 85%, 85%)"
+      },
+      "warning": {
+        "backgroundColor": "hsl(30, 75%, 85%)"
+      },
+      "success": {
+        "backgroundColor": "hsl(130, 75%, 85%)"
+      },
+      "error": {
+        "backgroundColor": "hsl(0, 75%, 85%)"
+      },
+      "small": {
+        "fontSize": "0.75rem",
+        "padding": "0.25rem 0.5rem"
+      },
+      "large": {
+        "fontSize": "1rem",
+        "padding": "0.75rem 1rem"
+      }
+    },
+    "button": {
+      "fontWeight": "bold",
+      "textAlign": "center",
+      "borderRadius": "0.25rem",
+      "transitionDuration": "250ms",
+      "fontSize": "1rem",
+      "lineHeight": "1rem",
+      "padding": "0.75rem 1rem",
+      "borderColor": "hsl(190, 75%, 85%)",
+      "borderWidth": "1px",
+      "borderStyle": "solid",
+      "color": "hsl(190, 95%, 30%)",
+      "_hover": {
+        "color": "hsl(190, 100%, 15%)",
+        "backgroundColor": "hsl(190, 75%, 95%)",
+        "borderColor": "hsl(190, 50%, 50%)"
+      },
+      "_focus": {
+        "color": "hsl(190, 100%, 15%)",
+        "borderColor": "hsl(190, 100%, 15%)",
+        "boxShadow": "hsl(190, 100%, 15%) 0px 0px 0px 1px"
+      },
+      "_active": {
+        "color": "#fff",
+        "backgroundColor": "hsl(190, 100%, 15%)",
+        "borderColor": "hsl(190, 100%, 15%)"
+      },
+      "_loading": {
+        "color": "hsl(210, 6%, 70%)",
+        "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 5%, 90%)"
+      },
+      "_disabled": {
+        "color": "hsl(210, 6%, 70%)",
+        "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 5%, 90%)"
+      },
+      "primary": {
+        "borderWidth": 0,
+        "backgroundColor": "hsl(190, 95%, 30%)",
+        "color": "#fff",
+        "_disabled": {
+          "backgroundColor": "hsl(210, 5%, 90%)",
+          "color": "hsl(210, 6%, 70%)"
+        },
+        "_loading": {
+          "backgroundColor": "hsl(210, 5%, 90%)",
+          "color": "hsl(210, 6%, 70%)"
+        },
+        "_hover": {
+          "backgroundColor": "hsl(190, 100%, 20%)"
+        },
+        "_focus": {
+          "backgroundColor": "hsl(190, 100%, 20%)"
+        },
+        "_active": {
+          "backgroundColor": "hsl(190, 100%, 15%)"
+        }
+      },
+      "link": {
+        "borderWidth": 0,
+        "backgroundColor": "transparent",
+        "color": "hsl(190, 95%, 30%)",
+        "_hover": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_focus": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_active": {
+          "color": "hsl(190, 100%, 15%)"
+        },
+        "_disabled": {
+          "color": "hsl(210, 6%, 70%)"
+        },
+        "_loading": {
+          "color": "hsl(210, 6%, 70%)"
+        }
+      },
+      "small": {
+        "fontSize": "0.875rem",
+        "lineHeight": "0.875rem",
+        "padding": "0.5rem 0.75rem"
+      },
+      "large": {
+        "fontSize": "1.25rem",
+        "lineHeight": "1.25rem",
+        "padding": "1rem 1.5rem"
+      }
+    },
+    "card": {
+      "backgroundColor": "#fff",
+      "borderWidth": "1px",
+      "borderStyle": "solid",
+      "borderColor": "hsl(210, 6%, 70%)",
+      "boxShadow": "0 2px 6px hsl(210, 50%, 10%, 0.15)",
+      "padding": "1rem"
+    },
+    "divider": {
+      "borderStyle": "solid",
+      "borderColor": "hsl(210, 6%, 70%)",
+      "borderWidth": "2px",
+      "small": {
+        "borderWidth": "1px"
+      },
+      "large": {
+        "borderWidth": "3px"
+      },
+      "opacity": "0.6"
+    },
+    "field": {
+      "gap": "0.5rem",
+      "fontSize": "1rem",
+      "small": {
+        "gap": "0.25rem",
+        "fontSize": "0.875rem"
+      },
+      "large": {
+        "gap": "0.75rem",
+        "fontSize": "1.25rem"
+      }
+    },
+    "fieldcontrol": {
+      "borderStyle": "solid",
+      "borderColor": "hsl(210, 6%, 70%)",
+      "borderWidth": "1px",
+      "borderRadius": "0.25rem",
+      "padding": "0.5rem 1rem",
+      "fontSize": "1rem",
+      "lineHeight": "2.25",
+      "transitionDuration": "250ms",
+      "outlineColor": "transparent",
+      "outlineStyle": "solid",
+      "outlineWidth": "2px",
+      "outlineOffset": "2px",
+      "small": {
+        "fontSize": "0.875rem",
+        "padding": "0.5rem 0.75rem",
+        "lineHeight": "2"
+      },
+      "large": {
+        "fontSize": "1.25rem",
+        "padding": "1rem 1.5rem",
+        "lineHeight": "2.5"
+      },
+      "quiet": {
+        "borderStyle": "none",
+        "borderBlockEnd": "1px solid hsl(210, 6%, 70%)",
+        "borderInlineStart": "none",
+        "borderInlineEnd": "none",
+        "borderBlockStart": "none",
+        "borderRadius": "0",
+        "_focus": {
+          "borderBlockEndColor": "hsl(190, 100%, 15%)",
+          "boxShadow": "0 1px hsl(190, 100%, 15%)"
+        },
+        "_error": {
+          "borderBlockEndColor": "hsl(0, 95%, 30%)",
+          "_focus": {
+            "boxShadow": "0 1px hsl(0, 95%, 30%)"
+          }
+        }
+      },
+      "_focus": {
+        "borderColor": "hsl(190, 100%, 15%)",
+        "boxShadow": "0px 0px 0px 1px hsl(190, 100%, 15%)"
+      },
+      "_disabled": {
+        "cursor": "not-allowed",
+        "borderColor": "transparent",
+        "backgroundColor": "hsl(210, 5%, 90%)"
+      },
+      "_error": {
+        "borderColor": "hsl(0, 95%, 30%)",
+        "_focus": {
+          "boxShadow": "0px 0px 0px 1px hsl(0, 95%, 30%)"
+        }
+      }
+    },
+    "fieldgroup": {
+      "gap": 0
+    },
+    "fieldmessages": {
+      "error": {
+        "color": "hsl(0, 95%, 30%)",
+        "fontSize": "0.875rem"
+      },
+      "description": {
+        "fontStyle": "italic",
+        "fontSize": "0.875rem"
+      }
+    },
+    "flex": {
+      "gap": "1rem",
+      "justifyContent": "normal",
+      "alignItems": "stretch",
+      "alignContent": "normal",
+      "flexWrap": "nowrap"
+    },
+    "heading": {
+      "1": {
+        "fontSize": "5rem",
+        "fontWeight": 300
+      },
+      "2": {
+        "fontSize": "3rem",
+        "fontWeight": 300
+      },
+      "3": {
+        "fontSize": "2rem",
+        "fontWeight": 400
+      },
+      "4": {
+        "fontSize": "1.5rem",
+        "fontWeight": 500
+      },
+      "5": {
+        "fontSize": "1.25rem",
+        "fontWeight": 600
+      },
+      "6": {
+        "fontSize": "1rem",
+        "fontWeight": 700
+      },
+      "color": "hsl(210, 50%, 10%)",
+      "lineHeight": 1.25
+    },
+    "icon": {
+      "lineHeight": 1,
+      "height": "1rem",
+      "large": {
+        "height": "1.25rem"
+      },
+      "small": {
+        "height": "0.875rem"
+      }
+    },
+    "image": {
+      "maxWidth": "100%",
+      "height": "auto",
+      "objectFit": "initial",
+      "objectPosition": "initial"
+    },
+    "link": {
+      "active": {
+        "color": "hsl(190, 100%, 15%)"
+      },
+      "color": "hsl(190, 95%, 30%)",
+      "focus": {
+        "color": "hsl(190, 100%, 20%)"
+      },
+      "hover": {
+        "color": "hsl(190, 100%, 20%)"
+      },
+      "large": {
+        "fontSize": "1.25rem"
+      },
+      "small": {
+        "fontSize": "0.875rem"
+      },
+      "visited": {
+        "color": "hsl(210, 6%, 70%)"
+      }
+    },
+    "pagination": {
+      "current": {
+        "color": "#fff",
+        "fontSize": "0.875rem",
+        "backgroundColor": "rgba(0, 0, 0, 0.4)"
+      },
+      "button": {
+        "color": "inherit",
+        "fontWeight": "inherit",
+        "paddingTop": "0",
+        "paddingRight": "6px",
+        "paddingBottom": "0",
+        "paddingLeft": "6px",
+        "transition": "background-color 250ms",
+        "hover": {
+          "backgroundColor": "rgba(0, 0, 0, 0.1)"
+        },
+        "disabled": {
+          "opacity": "0.4"
+        }
+      },
+      "ellipsis": {
+        "paddingRight": "8px",
+        "paddingLeft": "8px"
+      },
+      "itemContainer": {
+        "marginLeft": "4px",
+        "marginRight": "4px"
+      },
+      "itemShared": {
+        "height": "2rem",
+        "minWidth": "2rem",
+        "borderRadius": "1rem"
+      }
+    },
+    "placeholder": {
+      "borderRadius": "0.25rem",
+      "transitionDuration": "500ms",
+      "startColor": "hsl(210, 5%, 95%)",
+      "endColor": "hsl(210, 5%, 90%)",
+      "small": {
+        "height": "0.75rem"
+      },
+      "default": {
+        "height": "1rem"
+      },
+      "large": {
+        "height": "1.5rem"
+      }
+    },
+    "radio": {
+      "alignItems": "center",
+      "justifyContent": "flex-start",
+      "gap": "inherit",
+      "button": {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "1rem",
+        "height": "1rem",
+        "boxSizing": "border-box",
+        "borderWidth": "2px",
+        "borderStyle": "solid",
+        "borderRadius": "50%",
+        "borderColor": "hsl(210, 6%, 70%)",
+        "color": "#fff",
+        "backgroundColor": "#fff",
+        "transitionProperty": "all",
+        "transitionDuration": "250ms",
+        "outlineColor": "transparent",
+        "outlineStyle": "solid",
+        "outlineWidth": "2px",
+        "outlineOffset": "2px",
+        "before": {
+          "content": "\"\"",
+          "display": "inline-block",
+          "width": "50%",
+          "height": "50%",
+          "borderRadius": "50%",
+          "backgroundColor": "currentColor"
+        },
+        "small": {
+          "width": "0.75rem",
+          "height": "0.75rem"
+        },
+        "large": {
+          "width": "1.25rem",
+          "height": "1.25rem"
+        },
+        "_checked": {
+          "color": "hsl(0, 50%, 50%)",
+          "_disabled": {
+            "color": "hsl(210, 5%, 80%)"
+          }
+        },
+        "_focus": {
+          "borderColor": "hsl(190, 100%, 15%)",
+          "boxShadow": "0 0 0 1px hsl(190, 100%, 15%)"
+        },
+        "_disabled": {
+          "borderColor": "#e9ecf0",
+          "backgroundColor": "#fff",
+          "color": "#fff"
+        }
+      },
+      "label": {
+        "_disabled": {
+          "color": "#d6dbe2"
+        }
+      }
+    },
+    "rating": {
+      "large": {
+        "size": "3rem"
+      },
+      "default": {
+        "size": "1.5rem"
+      },
+      "small": {
+        "size": "0.875rem"
+      },
+      "filled": {
+        "color": "hsl(30, 75%, 75%)"
+      },
+      "empty": {
+        "color": "hsl(210, 6%, 70%)"
+      }
+    },
+    "select": {
+      "paddingInlineEnd": "3.0rem",
+      "wrapper": {
+        "display": "block",
+        "position": "relative",
+        "cursor": "pointer"
+      },
+      "iconWrapper": {
+        "position": "absolute",
+        "height": "50%",
+        "top": "25%",
+        "right": "1rem",
+        "pointerEvents": "none"
+      }
+    },
+    "switchfield": {
+      "disabled": {
+        "opacity": "0.3"
+      },
+      "focused": {
+        "shadow": "0 0 4px #000"
+      },
+      "label": {
+        "padding": "0.5rem"
+      },
+      "large": {
+        "font": {
+          "size": "1.25rem"
+        }
+      },
+      "small": {
+        "font": {
+          "size": "0.875rem"
+        }
+      },
+      "thumb": {
+        "background": "#fff",
+        "border": {
+          "color": "hsl(210, 5%, 90%)",
+          "radius": "8rem"
+        },
+        "checked": {
+          "transform": "translateX(1em)"
+        },
+        "transition": {
+          "duration": "250ms"
+        },
+        "width": "1em"
+      },
+      "track": {
+        "background": "hsl(210, 5%, 80%)",
+        "border": {
+          "radius": "8rem"
+        },
+        "checked": {
+          "background": "hsl(220, 70%, 70%)"
+        },
+        "height": "1em",
+        "padding": "2px",
+        "transition": {
+          "duration": "100ms"
+        },
+        "width": "2.0em"
+      }
+    },
+    "tabs": {
+      "backgroundColor": "transparent",
+      "borderColor": "hsl(210, 5%, 80%)",
+      "borderStyle": "solid",
+      "borderWidth": "2px",
+      "item": {
+        "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 5%, 80%)",
+        "borderStyle": "solid",
+        "borderWidth": "2px",
+        "color": "hsl(210, 10%, 40%)",
+        "fontSize": "1rem",
+        "fontWeight": 700,
+        "padding": "0.75rem 1rem",
+        "textAlign": "center",
+        "transitionDuration": "250ms",
+        "_hover": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_focus": {
+          "color": "hsl(190, 100%, 20%)"
+        },
+        "_active": {
+          "color": "hsl(190, 95%, 30%)",
+          "borderColor": "hsl(190, 95%, 30%)",
+          "backgroundColor": "transparent"
+        },
+        "_disabled": {
+          "color": "hsl(210, 6%, 70%)",
+          "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 5%, 90%)"
+        }
+      }
+    },
+    "text": {
+      "color": "hsl(210, 50%, 10%)",
+      "primary": {
+        "color": "hsl(210, 50%, 10%)"
+      },
+      "secondary": {
+        "color": "hsl(210, 10%, 40%)"
+      },
+      "tertiary": {
+        "color": "hsl(210, 6%, 70%)"
+      },
+      "error": {
+        "color": "hsl(0, 95%, 30%)"
+      },
+      "warning": {
+        "color": "hsl(30, 95%, 30%)"
+      },
+      "success": {
+        "color": "hsl(130, 95%, 30%)"
+      },
+      "info": {
+        "color": "hsl(220, 95%, 30%)"
+      }
+    }
+  },
+  "borderWidths": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "breakpoints": {
+    "values": {
+      "base": 0,
+      "small": 30,
+      "medium": 48,
+      "large": 62,
+      "xl": 80,
+      "xxl": 96
+    },
+    "unit": "em",
+    "defaultBreakpoint": "base"
+  },
+  "colors": {
+    "red": {
+      "10": "hsl(0, 75%, 95%)",
+      "20": "hsl(0, 75%, 85%)",
+      "40": "hsl(0, 75%, 75%)",
+      "60": "hsl(0, 50%, 50%)",
+      "80": "hsl(0, 95%, 30%)",
+      "90": "hsl(0, 100%, 20%)",
+      "100": "hsl(0, 100%, 15%)"
+    },
+    "orange": {
+      "10": "hsl(30, 75%, 95%)",
+      "20": "hsl(30, 75%, 85%)",
+      "40": "hsl(30, 75%, 75%)",
+      "60": "hsl(30, 50%, 50%)",
+      "80": "hsl(30, 95%, 30%)",
+      "90": "hsl(30, 100%, 20%)",
+      "100": "hsl(30, 100%, 15%)"
+    },
+    "yellow": {
+      "10": "hsl(60, 75%, 95%)",
+      "20": "hsl(60, 75%, 85%)",
+      "40": "hsl(60, 75%, 75%)",
+      "60": "hsl(60, 50%, 50%)",
+      "80": "hsl(60, 95%, 30%)",
+      "90": "hsl(60, 100%, 20%)",
+      "100": "hsl(60, 100%, 15%)"
+    },
+    "green": {
+      "10": "hsl(130, 75%, 95%)",
+      "20": "hsl(130, 75%, 85%)",
+      "40": "hsl(130, 75%, 75%)",
+      "60": "hsl(130, 50%, 50%)",
+      "80": "hsl(130, 95%, 30%)",
+      "90": "hsl(130, 100%, 20%)",
+      "100": "hsl(130, 100%, 15%)"
+    },
+    "teal": {
+      "10": "hsl(190, 75%, 95%)",
+      "20": "hsl(190, 75%, 85%)",
+      "40": "hsl(190, 70%, 70%)",
+      "60": "hsl(190, 50%, 50%)",
+      "80": "hsl(190, 95%, 30%)",
+      "90": "hsl(190, 100%, 20%)",
+      "100": "hsl(190, 100%, 15%)"
+    },
+    "blue": {
+      "10": "hsl(220, 95%, 95%)",
+      "20": "hsl(220, 85%, 85%)",
+      "40": "hsl(220, 70%, 70%)",
+      "60": "hsl(220, 50%, 50%)",
+      "80": "hsl(220, 95%, 30%)",
+      "90": "hsl(220, 100%, 20%)",
+      "100": "hsl(220, 100%, 15%)"
+    },
+    "purple": {
+      "10": "hsl(300, 95%, 95%)",
+      "20": "hsl(300, 85%, 85%)",
+      "40": "hsl(300, 70%, 70%)",
+      "60": "hsl(300, 50%, 50%)",
+      "80": "hsl(300, 95%, 30%)",
+      "90": "hsl(300, 100%, 20%)",
+      "100": "hsl(300, 100%, 15%)"
+    },
+    "pink": {
+      "10": "hsl(340, 95%, 95%)",
+      "20": "hsl(340, 90%, 85%)",
+      "40": "hsl(340, 70%, 70%)",
+      "60": "hsl(340, 50%, 50%)",
+      "80": "hsl(340, 95%, 30%)",
+      "90": "hsl(340, 100%, 20%)",
+      "100": "hsl(340, 100%, 15%)"
+    },
+    "neutral": {
+      "10": "hsl(210, 5%, 95%)",
+      "20": "hsl(210, 5%, 90%)",
+      "40": "hsl(210, 5%, 80%)",
+      "60": "hsl(210, 6%, 70%)",
+      "80": "hsl(210, 10%, 40%)",
+      "90": "hsl(210, 25%, 25%)",
+      "100": "hsl(210, 50%, 10%)"
+    },
+    "brand": {
+      "primary": {
+        "10": "hsl(190, 75%, 95%)",
+        "20": "hsl(190, 75%, 85%)",
+        "40": "hsl(190, 70%, 70%)",
+        "60": "hsl(190, 50%, 50%)",
+        "80": "hsl(190, 95%, 30%)",
+        "90": "hsl(190, 100%, 20%)",
+        "100": "hsl(190, 100%, 15%)"
+      },
+      "secondary": {
+        "10": "hsl(300, 95%, 95%)",
+        "20": "hsl(300, 85%, 85%)",
+        "40": "hsl(300, 70%, 70%)",
+        "60": "hsl(300, 50%, 50%)",
+        "80": "hsl(300, 95%, 30%)",
+        "90": "hsl(300, 100%, 20%)",
+        "100": "hsl(300, 100%, 15%)"
+      }
+    },
+    "font": {
+      "primary": "hsl(210, 50%, 10%)",
+      "secondary": "hsl(210, 10%, 40%)",
+      "tertiary": "hsl(210, 6%, 70%)",
+      "disabled": "hsl(210, 6%, 70%)",
+      "inverse": "#fff",
+      "interactive": "hsl(190, 95%, 30%)",
+      "hover": "hsl(190, 100%, 20%)",
+      "focus": "hsl(190, 100%, 20%)",
+      "active": "hsl(190, 100%, 15%)",
+      "info": "hsl(220, 95%, 30%)",
+      "warning": "hsl(30, 95%, 30%)",
+      "error": "hsl(0, 95%, 30%)",
+      "success": "hsl(130, 95%, 30%)"
+    },
+    "background": {
+      "primary": "#fff",
+      "secondary": "hsl(210, 5%, 95%)",
+      "tertiary": "hsl(210, 5%, 90%)",
+      "disabled": "hsl(210, 5%, 95%)",
+      "info": "hsl(220, 85%, 85%)",
+      "warning": "hsl(30, 75%, 85%)",
+      "error": "hsl(0, 75%, 85%)",
+      "success": "hsl(130, 75%, 85%)"
+    },
+    "border": {
+      "primary": "hsl(210, 6%, 70%)",
+      "secondary": "hsl(210, 5%, 80%)",
+      "tertiary": "hsl(210, 5%, 90%)"
+    },
+    "focus": "hsl(190, 100%, 15%)",
+    "error": "hsl(0, 95%, 30%)",
+    "shadow": {
+      "primary": "hsl(210, 50%, 10%, 0.25)",
+      "secondary": "hsl(210, 50%, 10%, 0.15)",
+      "tertiary": "hsl(210, 50%, 10%, 0.05)"
+    },
+    "black": "#000",
+    "white": "#fff",
+    "transparent": "transparent",
+    "icon": {
+      "filled": "hsl(30, 75%, 75%)",
+      "empty": "hsl(210, 6%, 70%)"
+    }
+  },
+  "fonts": {
+    "default": {
+      "variable": "'InterVariable', -apple-system, BlinkMacSystemFont,\n        'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',\n        sans-serif",
+      "static": "'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',\n        'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif"
+    }
+  },
+  "fontSizes": {
+    "xs": "0.75rem",
+    "small": "0.875rem",
+    "medium": "1rem",
+    "large": "1.25rem",
+    "xl": "1.5rem",
+    "xxl": "2rem",
+    "xxxl": "3rem",
+    "xxxxl": "5rem"
+  },
+  "fontWeights": {
+    "hairline": 100,
+    "thin": 200,
+    "light": 300,
+    "normal": 400,
+    "medium": 500,
+    "semibold": 600,
+    "bold": 700,
+    "extrabold": 800,
+    "black": 900
+  },
+  "lineHeights": {
+    "small": "2",
+    "medium": "2.25",
+    "large": "2.5"
+  },
+  "opacities": {
+    "0": "0",
+    "10": "0.1",
+    "20": "0.2",
+    "30": "0.3",
+    "40": "0.4",
+    "50": "0.5",
+    "60": "0.6",
+    "70": "0.7",
+    "80": "0.8",
+    "90": "0.9",
+    "100": "1"
+  },
+  "outlineOffsets": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "outlineWidths": {
+    "small": "1px",
+    "medium": "2px",
+    "large": "3px"
+  },
+  "radii": {
+    "small": "0.125rem",
+    "medium": "0.25rem",
+    "large": "1rem",
+    "xl": "2rem",
+    "xxl": "4rem",
+    "xxxl": "8rem"
+  },
+  "shadows": {
+    "small": "0 2px 4px hsl(210, 50%, 10%, 0.05)",
+    "medium": "0 2px 6px hsl(210, 50%, 10%, 0.15)",
+    "large": "0 4px 12px hsl(210, 50%, 10%, 0.25)",
+    "switch": "0 0 4px #000"
+  },
+  "space": {
+    "xxs": "0.25rem",
+    "xs": "0.5rem",
+    "small": "0.75rem",
+    "medium": "1rem",
+    "large": "1.5rem",
+    "xl": "2.0rem",
+    "xxl": "3.0rem",
+    "xxxl": "4.5rem",
+    "relative": {
+      "xxs": "0.25em",
+      "xs": "0.5em",
+      "small": "0.75em",
+      "medium": "1em",
+      "large": "1.5em",
+      "xl": "2.0em",
+      "xxl": "3.0em",
+      "xxxl": "4.5em"
+    }
+  },
+  "time": {
+    "transition": {
+      "short": "100ms",
+      "medium": "250ms",
+      "long": "500ms"
+    }
+  },
+  "transforms": {
+    "slideX": {
+      "small": "translateX(0.5em)",
+      "medium": "translateX(1em)",
+      "large": "translateX(2em)"
+    }
+  },
+  "types": {
+    "null": null,
+    "string": "test",
+    "number": 10,
+    "boolean": {
+      "t": true,
+      "false": false
+    },
+    "object": {
+      "object": {
+        "test": "test"
+      },
+      "array": ["test"]
+    }
+  }
+}
diff --git a/packages/studio-ui-codegen-react/lib/index.ts b/packages/studio-ui-codegen-react/lib/index.ts
index adce72f21..97c16edc5 100644
--- a/packages/studio-ui-codegen-react/lib/index.ts
+++ b/packages/studio-ui-codegen-react/lib/index.ts
@@ -2,6 +2,7 @@ export * from './react-component-with-children-renderer';
 export * from './react-component-renderer';
 export { ImportCollection } from './import-collection';
 export * from './react-studio-template-renderer';
+export * from './react-theme-studio-template-renderer';
 export * from './react-output-config';
 export * from './react-render-config';
 export * from './react-output-manager';
diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts
new file mode 100644
index 000000000..26af53394
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts
@@ -0,0 +1,44 @@
+import ts, { createPrinter, createSourceFile, NewLineKind, transpileModule } from 'typescript';
+import prettier from 'prettier';
+import parserBabel from 'prettier/parser-babel';
+import { ReactRenderConfig, ScriptKind, ScriptTarget, ModuleKind } from './react-render-config';
+
+export const defaultRenderConfig = {
+  script: ScriptKind.TSX,
+  target: ScriptTarget.ES2015,
+  module: ModuleKind.ESNext,
+};
+
+export function transpile(code: string, renderConfig: ReactRenderConfig): string {
+  const { target, module, script } = renderConfig;
+  if (script === ScriptKind.JS || script === ScriptKind.JSX) {
+    const transpiledCode = transpileModule(code, {
+      compilerOptions: {
+        target,
+        module,
+        jsx: script === ScriptKind.JS ? ts.JsxEmit.React : ts.JsxEmit.Preserve,
+        esModuleInterop: true,
+      },
+    }).outputText;
+
+    return prettier.format(transpiledCode, { parser: 'babel', plugins: [parserBabel] });
+  }
+
+  return prettier.format(code, { parser: 'babel', plugins: [parserBabel] });
+}
+
+export function buildPrinter(fileName: string, renderConfig: ReactRenderConfig) {
+  const { target, script } = renderConfig;
+  const file = createSourceFile(
+    fileName,
+    '',
+    target || defaultRenderConfig.target,
+    false,
+    script || defaultRenderConfig.script,
+  );
+
+  const printer = createPrinter({
+    newLine: NewLineKind.LineFeed,
+  });
+  return { printer, file };
+}
diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
index 624b4ab52..87c3fca70 100644
--- a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
@@ -9,17 +9,13 @@ import {
 
 import { EOL } from 'os';
 import ts, {
-  createPrinter,
-  createSourceFile,
   EmitHint,
   factory,
   FunctionDeclaration,
   JsxElement,
   JsxFragment,
-  NewLineKind,
   PropertySignature,
   SyntaxKind,
-  transpileModule,
   TypeAliasDeclaration,
   TypeNode,
   VariableStatement,
@@ -29,8 +25,6 @@ import ts, {
   ObjectLiteralExpression,
   CallExpression,
 } from 'typescript';
-import prettier from 'prettier';
-import parserBabel from 'prettier/parser-babel';
 import { ImportCollection } from './import-collection';
 import { ReactOutputManager } from './react-output-manager';
 import {
@@ -42,9 +36,11 @@ import {
 } from './react-render-config';
 import SampleCodeRenderer from './amplify-ui-renderers/sampleCodeRenderer';
 import { getComponentPropName } from './react-component-render-helper';
+import { transpile, buildPrinter } from './react-studio-template-renderer-helper';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
   string,
+  StudioComponent,
   ReactOutputManager,
   {
     componentText: string;
@@ -85,7 +81,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     );
     const sampleAppName = 'App';
 
-    const { printer, file } = this.createPrinter();
+    const { printer, file } = buildPrinter(this.fileName, this.renderConfig);
     let importsText = '';
     for (const importStatement of imports) {
       const result = printer.printNode(EmitHint.Unspecified, importStatement, file);
@@ -101,7 +97,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
   renderComponentOnly() {
     const jsx = this.renderJsx(this.component);
 
-    const { printer, file } = this.createPrinter();
+    const { printer, file } = buildPrinter(this.fileName, this.renderConfig);
 
     const imports = this.importCollection.buildImportStatements();
 
@@ -120,7 +116,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
 
     const result = printer.printNode(EmitHint.Unspecified, wrappedFunction, file);
 
-    const compText = this.transpile(result);
+    const compText = transpile(result, this.renderConfig);
 
     return { compText, importsText };
   }
@@ -128,7 +124,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
   renderComponent() {
     // This is a react component so we only need a single tsx
 
-    const { printer, file } = this.createPrinter();
+    const { printer, file } = buildPrinter(this.fileName, this.renderConfig);
 
     const jsx = this.renderJsx(this.component);
 
@@ -158,7 +154,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     const result = printer.printNode(EmitHint.Unspecified, wrappedFunction, file);
     componentText += result;
 
-    const transpiledComponentText = this.transpile(componentText);
+    const transpiledComponentText = transpile(componentText, this.renderConfig);
 
     return {
       componentText: transpiledComponentText,
@@ -166,40 +162,6 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     };
   }
 
-  private transpile(code: string): string {
-    const { target, module, script } = this.renderConfig;
-    if (script === ScriptKind.JS || script === ScriptKind.JSX) {
-      const transpiledCode = transpileModule(code, {
-        compilerOptions: {
-          target,
-          module,
-          jsx: script === ScriptKind.JS ? ts.JsxEmit.React : ts.JsxEmit.Preserve,
-          esModuleInterop: true,
-        },
-      }).outputText;
-
-      return prettier.format(transpiledCode, { parser: 'babel', plugins: [parserBabel] });
-    }
-
-    return prettier.format(code, { parser: 'babel', plugins: [parserBabel] });
-  }
-
-  private createPrinter() {
-    const { target, script } = this.renderConfig;
-    const file = createSourceFile(
-      this.fileName,
-      '',
-      target || this.defaultRenderConfig.target,
-      false,
-      script || this.defaultRenderConfig.script,
-    );
-
-    const printer = createPrinter({
-      newLine: NewLineKind.LineFeed,
-    });
-    return { printer, file };
-  }
-
   renderFunctionWrapper(
     componentName: string,
     jsx: JsxElement | JsxFragment,
diff --git a/packages/studio-ui-codegen-react/lib/react-theme-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-theme-studio-template-renderer.ts
new file mode 100644
index 000000000..f3e2e2b18
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/react-theme-studio-template-renderer.ts
@@ -0,0 +1,293 @@
+import { StudioTheme } from '@amzn/amplify-ui-codegen-schema';
+import { EOL } from 'os';
+import {
+  factory,
+  SyntaxKind,
+  ObjectLiteralExpression,
+  NodeFlags,
+  EmitHint,
+  FunctionDeclaration,
+  StringLiteral,
+  NumericLiteral,
+  BooleanLiteral,
+  NullLiteral,
+  ArrayLiteralExpression,
+} from 'typescript';
+import { StudioTemplateRenderer } from '@amzn/studio-ui-codegen';
+
+import {
+  ReactRenderConfig,
+  ScriptKind,
+  scriptKindToFileExtension,
+  ScriptTarget,
+  ModuleKind,
+} from './react-render-config';
+import { ImportCollection } from './import-collection';
+import { ReactOutputManager } from './react-output-manager';
+import { transpile, buildPrinter, defaultRenderConfig } from './react-studio-template-renderer-helper';
+
+export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
+  string,
+  StudioTheme,
+  ReactOutputManager,
+  {
+    componentText: string;
+    renderComponentToFilesystem: (outputPath: string) => Promise<void>;
+  }
+> {
+  protected importCollection = new ImportCollection();
+
+  protected defaultRenderConfig = defaultRenderConfig;
+
+  fileName = 'theme.txs';
+
+  constructor(theme: StudioTheme, protected renderConfig: ReactRenderConfig) {
+    super(theme, new ReactOutputManager(), renderConfig);
+    const { script } = this.renderConfig;
+    if (script !== ScriptKind.TSX) {
+      this.fileName = `theme.${scriptKindToFileExtension(renderConfig.script || ScriptKind.TSX)}`;
+    }
+
+    this.renderConfig = {
+      script: ScriptKind.TSX,
+      target: ScriptTarget.ES2015,
+      module: ModuleKind.ESNext,
+      ...this.renderConfig,
+    };
+  }
+
+  renderComponent() {
+    const { printer, file } = buildPrinter(this.fileName, this.renderConfig);
+
+    const renderedImports = this.buildImports().map((importStatement) =>
+      printer.printNode(EmitHint.Unspecified, importStatement, file),
+    );
+    const renderedFunction = printer.printNode(EmitHint.Unspecified, this.buildFunction(), file);
+    const componentText = ['/* eslint-disable */', ...renderedImports, renderedFunction].join(EOL);
+    const transpiledComponentText = transpile(componentText, this.renderConfig);
+
+    return {
+      componentText: transpiledComponentText,
+      renderComponentToFilesystem: this.renderComponentToFilesystem(transpiledComponentText)(this.fileName),
+    };
+  }
+
+  private buildImports() {
+    this.importCollection.addImport('react', 'React');
+    this.importCollection.addImport('@aws-amplify/ui-react', 'extendTheming');
+    this.importCollection.addImport('@aws-amplify/ui-react', 'Theme');
+    this.importCollection.addImport('@aws-amplify/ui-react', 'DeepPartial');
+    this.importCollection.addImport('@aws-amplify/ui-react', 'AmplifyProvider');
+
+    return this.importCollection.buildImportStatements();
+  }
+
+  private buildFunction(): FunctionDeclaration {
+    return factory.createFunctionDeclaration(
+      undefined,
+      [factory.createModifier(SyntaxKind.ExportKeyword), factory.createModifier(SyntaxKind.DefaultKeyword)],
+      undefined,
+      factory.createIdentifier('withTheme'),
+      [factory.createTypeParameterDeclaration(factory.createIdentifier('T'), undefined, undefined)],
+      [
+        factory.createParameterDeclaration(
+          undefined,
+          undefined,
+          undefined,
+          factory.createIdentifier('WrappedComponent'),
+          undefined,
+          factory.createTypeReferenceNode(
+            factory.createQualifiedName(factory.createIdentifier('React'), factory.createIdentifier('ReactComponent')),
+            [factory.createTypeReferenceNode(factory.createIdentifier('T'), undefined)],
+          ),
+          undefined,
+        ),
+      ],
+      undefined,
+      factory.createBlock(
+        [
+          factory.createVariableStatement(
+            undefined,
+            factory.createVariableDeclarationList(
+              [
+                factory.createVariableDeclaration(
+                  factory.createIdentifier('theme'),
+                  undefined,
+                  undefined,
+                  this.themeToLiteral(this.component),
+                ),
+              ],
+              NodeFlags.Const,
+            ),
+          ),
+          factory.createVariableStatement(
+            undefined,
+            factory.createVariableDeclarationList(
+              [
+                factory.createVariableDeclaration(
+                  factory.createIdentifier('displayName'),
+                  undefined,
+                  undefined,
+                  factory.createBinaryExpression(
+                    factory.createBinaryExpression(
+                      factory.createPropertyAccessExpression(
+                        factory.createIdentifier('WrappedComponent'),
+                        factory.createIdentifier('displayName'),
+                      ),
+                      factory.createToken(SyntaxKind.BarBarToken),
+                      factory.createPropertyAccessExpression(
+                        factory.createIdentifier('WrappedComponent'),
+                        factory.createIdentifier('name'),
+                      ),
+                    ),
+                    factory.createToken(SyntaxKind.BarBarToken),
+                    factory.createStringLiteral('Component'),
+                  ),
+                ),
+              ],
+              NodeFlags.Const,
+            ),
+          ),
+          factory.createVariableStatement(
+            undefined,
+            factory.createVariableDeclarationList(
+              [
+                factory.createVariableDeclaration(
+                  factory.createIdentifier('ComponentWithTheme'),
+                  undefined,
+                  undefined,
+                  factory.createArrowFunction(
+                    undefined,
+                    undefined,
+                    [
+                      factory.createParameterDeclaration(
+                        undefined,
+                        undefined,
+                        undefined,
+                        factory.createIdentifier('props'),
+                        undefined,
+                        factory.createTypeReferenceNode(factory.createIdentifier('T'), undefined),
+                        undefined,
+                      ),
+                    ],
+                    undefined,
+                    factory.createToken(SyntaxKind.EqualsGreaterThanToken),
+                    factory.createBlock(
+                      [
+                        factory.createVariableStatement(
+                          undefined,
+                          factory.createVariableDeclarationList(
+                            [
+                              factory.createVariableDeclaration(
+                                factory.createIdentifier('theming'),
+                                undefined,
+                                undefined,
+                                factory.createCallExpression(factory.createIdentifier('extendTheming'), undefined, [
+                                  factory.createIdentifier('theme'),
+                                ]),
+                              ),
+                            ],
+                            NodeFlags.Const,
+                          ),
+                        ),
+                        factory.createReturnStatement(
+                          factory.createParenthesizedExpression(
+                            factory.createJsxElement(
+                              factory.createJsxOpeningElement(
+                                factory.createIdentifier('AmplifyProvider'),
+                                undefined,
+                                factory.createJsxAttributes([
+                                  factory.createJsxAttribute(
+                                    factory.createIdentifier('theming'),
+                                    factory.createJsxExpression(undefined, factory.createIdentifier('theming')),
+                                  ),
+                                ]),
+                              ),
+                              [
+                                factory.createJsxSelfClosingElement(
+                                  factory.createIdentifier('WrappedComponent'),
+                                  undefined,
+                                  factory.createJsxAttributes([
+                                    factory.createJsxSpreadAttribute(factory.createIdentifier('props')),
+                                  ]),
+                                ),
+                              ],
+                              factory.createJsxClosingElement(factory.createIdentifier('AmplifyProvider')),
+                            ),
+                          ),
+                        ),
+                      ],
+                      true,
+                    ),
+                  ),
+                ),
+              ],
+              NodeFlags.Const,
+            ),
+          ),
+          factory.createExpressionStatement(
+            factory.createBinaryExpression(
+              factory.createPropertyAccessExpression(
+                factory.createIdentifier('ComponentWithTheme'),
+                factory.createIdentifier('displayName'),
+              ),
+              factory.createToken(SyntaxKind.EqualsToken),
+              factory.createIdentifier('displayName'),
+            ),
+          ),
+          factory.createReturnStatement(factory.createIdentifier('ComponentWithTheme')),
+        ],
+        true,
+      ),
+    );
+  }
+
+  private themeToLiteral(
+    theme: StudioTheme,
+  ): ObjectLiteralExpression | StringLiteral | NumericLiteral | BooleanLiteral | NullLiteral | ArrayLiteralExpression {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    type json = string | number | boolean | null | json[] | { [key: string]: json };
+
+    // eslint-disable-next-line consistent-return
+    function jsonToLiteral(
+      jsonObject: json,
+    ):
+      | ObjectLiteralExpression
+      | StringLiteral
+      | NumericLiteral
+      | BooleanLiteral
+      | NullLiteral
+      | ArrayLiteralExpression {
+      if (jsonObject === null) {
+        return factory.createNull();
+      }
+      // eslint-disable-next-line default-case
+      switch (typeof jsonObject) {
+        case 'string':
+          return factory.createStringLiteral(jsonObject);
+        case 'number':
+          return factory.createNumericLiteral(jsonObject);
+        case 'boolean': {
+          if (jsonObject) {
+            return factory.createTrue();
+          }
+          return factory.createFalse();
+        }
+        case 'object': {
+          if (jsonObject instanceof Array) {
+            return factory.createArrayLiteralExpression(jsonObject.map(jsonToLiteral), false);
+          }
+          // else object
+          return factory.createObjectLiteralExpression(
+            Object.entries(jsonObject).map(([key, value]) =>
+              factory.createPropertyAssignment(factory.createIdentifier(key), jsonToLiteral(value)),
+            ),
+            false,
+          );
+        }
+      }
+    }
+
+    return jsonToLiteral(theme as json);
+  }
+}
diff --git a/packages/studio-ui-codegen/lib/__tests__/template-renderer-factory.test.ts b/packages/studio-ui-codegen/lib/__tests__/template-renderer-factory.test.ts
index c54c66e05..1ae559eb9 100644
--- a/packages/studio-ui-codegen/lib/__tests__/template-renderer-factory.test.ts
+++ b/packages/studio-ui-codegen/lib/__tests__/template-renderer-factory.test.ts
@@ -1,4 +1,5 @@
 /* eslint-disable max-classes-per-file */
+import { StudioComponent } from '@amzn/amplify-ui-codegen-schema';
 import { FrameworkOutputManager } from '../framework-output-manager';
 import { StudioTemplateRenderer } from '../studio-template-renderer';
 import { StudioTemplateRendererFactory } from '../template-renderer-factory';
@@ -15,6 +16,7 @@ const renderComponentToFilesystem = jest.fn();
 
 class MockTemplateRenderer extends StudioTemplateRenderer<
   string,
+  StudioComponent,
   MockOutputManager,
   { componentText: string; renderComponentToFilesystem: (outputPath: string) => Promise<void> }
 > {
@@ -31,7 +33,7 @@ describe('StudioTemplateRendererFactory', () => {
     const componentName = 'MyText';
     const outputManager = new MockOutputManager();
     const renderer = new StudioTemplateRendererFactory(
-      (component) => new MockTemplateRenderer(component, outputManager, {}),
+      (component: StudioComponent) => new MockTemplateRenderer(component, outputManager, {}),
     ).buildRenderer({
       componentType: 'Text',
       name: componentName,
diff --git a/packages/studio-ui-codegen/lib/framework-output-manager.ts b/packages/studio-ui-codegen/lib/framework-output-manager.ts
index fa053e32c..c8556cbc5 100644
--- a/packages/studio-ui-codegen/lib/framework-output-manager.ts
+++ b/packages/studio-ui-codegen/lib/framework-output-manager.ts
@@ -1,3 +1,3 @@
 export abstract class FrameworkOutputManager<TSource> {
-  abstract writeComponent(input: TSource, outputPath: string, componentName: string): Promise<void>;
+  abstract writeComponent(input: TSource, outputPath: string): Promise<void>;
 }
diff --git a/packages/studio-ui-codegen/lib/studio-template-renderer.ts b/packages/studio-ui-codegen/lib/studio-template-renderer.ts
index 696b44b4d..b3a825e02 100644
--- a/packages/studio-ui-codegen/lib/studio-template-renderer.ts
+++ b/packages/studio-ui-codegen/lib/studio-template-renderer.ts
@@ -1,12 +1,11 @@
-import { StudioComponent } from '@amzn/amplify-ui-codegen-schema';
 import path from 'path';
 import { FrameworkOutputManager } from './framework-output-manager';
 import { FrameworkRenderConfig } from './framework-render-config';
-import { StudioRendererConstants } from './renderer-helper';
 import { RenderTextComponentResponse } from './render-component-response';
 
 export abstract class StudioTemplateRenderer<
   TSource,
+  TStudioType,
   TOutputManager extends FrameworkOutputManager<TSource>,
   TRenderOutput extends RenderTextComponentResponse,
 > {
@@ -15,7 +14,7 @@ export abstract class StudioTemplateRenderer<
    * @param component The first order component to be rendered.
    */
   constructor(
-    protected component: StudioComponent,
+    protected component: TStudioType,
     protected outputManager: TOutputManager,
     protected renderConfig: FrameworkRenderConfig,
   ) {}
@@ -28,10 +27,6 @@ export abstract class StudioTemplateRenderer<
 
   renderComponentToFilesystem(componentContent: TSource) {
     return (fileName: string) => (outputPath: string) =>
-      this.outputManager.writeComponent(
-        componentContent,
-        path.join(outputPath, fileName),
-        this.component.name ?? StudioRendererConstants.unknownName,
-      );
+      this.outputManager.writeComponent(componentContent, path.join(outputPath, fileName));
   }
 }
diff --git a/packages/studio-ui-codegen/lib/template-renderer-factory.ts b/packages/studio-ui-codegen/lib/template-renderer-factory.ts
index 596e83bae..d6ba692ac 100644
--- a/packages/studio-ui-codegen/lib/template-renderer-factory.ts
+++ b/packages/studio-ui-codegen/lib/template-renderer-factory.ts
@@ -1,4 +1,3 @@
-import { StudioComponent } from '@amzn/amplify-ui-codegen-schema';
 import { FrameworkOutputManager } from './framework-output-manager';
 import { StudioTemplateRenderer } from './studio-template-renderer';
 
@@ -10,13 +9,14 @@ import { RenderTextComponentResponse } from './render-component-response';
  */
 export class StudioTemplateRendererFactory<
   TSource,
+  TStudioType,
   TOutputManager extends FrameworkOutputManager<TSource>,
   TRenderOutput extends RenderTextComponentResponse,
-  TRenderer extends StudioTemplateRenderer<TSource, TOutputManager, TRenderOutput>,
+  TRenderer extends StudioTemplateRenderer<TSource, TStudioType, TOutputManager, TRenderOutput>,
 > {
-  constructor(private renderer: (component: StudioComponent) => TRenderer) {}
+  constructor(private renderer: (component: TStudioType) => TRenderer) {}
 
-  buildRenderer(component: StudioComponent): TRenderer {
+  buildRenderer(component: TStudioType): TRenderer {
     return this.renderer(component);
   }
 }
diff --git a/packages/studio-ui-codegen/lib/template-renderer.ts b/packages/studio-ui-codegen/lib/template-renderer.ts
index 419278973..6aed51c22 100644
--- a/packages/studio-ui-codegen/lib/template-renderer.ts
+++ b/packages/studio-ui-codegen/lib/template-renderer.ts
@@ -1,4 +1,3 @@
-import { StudioComponent } from '@amzn/amplify-ui-codegen-schema';
 import fs from 'fs';
 import { FrameworkOutputManager } from './framework-output-manager';
 import { StudioTemplateRenderer } from './studio-template-renderer';
@@ -13,12 +12,13 @@ import { RenderTextComponentResponse } from './render-component-response';
  */
 export class StudioTemplateRendererManager<
   TSource,
+  TStudioType,
   TOutputManager extends FrameworkOutputManager<TSource>,
   TRenderOutput extends RenderTextComponentResponse,
-  TRenderer extends StudioTemplateRenderer<TSource, TOutputManager, TRenderOutput>,
+  TRenderer extends StudioTemplateRenderer<TSource, TStudioType, TOutputManager, TRenderOutput>,
 > {
   constructor(
-    private renderer: StudioTemplateRendererFactory<TSource, TOutputManager, TRenderOutput, TRenderer>,
+    private renderer: StudioTemplateRendererFactory<TSource, TStudioType, TOutputManager, TRenderOutput, TRenderer>,
     private outputConfig: FrameworkOutputConfig,
   ) {
     const renderPath = this.outputConfig.outputPathDir;
@@ -27,7 +27,7 @@ export class StudioTemplateRendererManager<
     }
   }
 
-  renderSchemaToTemplate(component: StudioComponent | undefined): TRenderOutput {
+  renderSchemaToTemplate(component: TStudioType | undefined): TRenderOutput {
     if (!component) {
       throw new Error('Please ensure you have passed in a valid component schema');
     }
@@ -37,7 +37,7 @@ export class StudioTemplateRendererManager<
     return result;
   }
 
-  renderSchemaToTemplates(jsonSchema: StudioComponent[] | undefined) {
+  renderSchemaToTemplates(jsonSchema: TStudioType[] | undefined) {
     if (!jsonSchema) {
       throw new Error('Please ensure you have passed in a valid schema');
     }
diff --git a/packages/test-generator/index.ts b/packages/test-generator/index.ts
index bf5143a0c..34169e707 100644
--- a/packages/test-generator/index.ts
+++ b/packages/test-generator/index.ts
@@ -1,29 +1,57 @@
 /* eslint-disable no-console */
-import { StudioComponent } from '@amzn/amplify-ui-codegen-schema';
+import { StudioComponent, StudioTheme } from '@amzn/amplify-ui-codegen-schema';
 import { StudioTemplateRendererManager, StudioTemplateRendererFactory } from '@amzn/studio-ui-codegen';
-import { AmplifyRenderer, ReactOutputConfig, ReactRenderConfig, ScriptKind } from '@amzn/studio-ui-codegen-react';
-import { ModuleKind, ScriptTarget } from 'typescript';
+import {
+  AmplifyRenderer,
+  ReactOutputConfig,
+  ReactRenderConfig,
+  ReactThemeStudioTemplateRenderer,
+} from '@amzn/studio-ui-codegen-react';
 import path from 'path';
 
 import * as schemas from './lib';
 
 Error.stackTraceLimit = Infinity;
 
-const renderConfig: ReactRenderConfig = {
-  module: ModuleKind.CommonJS,
-  target: ScriptTarget.ES2015,
-  script: ScriptKind.JS,
+const renderConfig: ReactRenderConfig = {};
+
+const outputPathDir = path.resolve(path.join(__dirname, '..', 'ui-components'));
+const outputConfig: ReactOutputConfig = {
+  outputPathDir,
 };
 
 const rendererFactory = new StudioTemplateRendererFactory(
   (component: StudioComponent) => new AmplifyRenderer(component, renderConfig),
 );
+const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
 
-const outputPathDir = path.resolve(path.join(__dirname, '..', 'ui-components'));
-const outputConfig: ReactOutputConfig = {
-  outputPathDir,
+const themeRendererManager = new StudioTemplateRendererManager(
+  new StudioTemplateRendererFactory((theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig)),
+  outputConfig,
+);
+
+const theme: StudioTheme = {
+  components: {
+    alert: {
+      backgroundColor: 'hsl(210, 5%, 90%)',
+      padding: '0.75rem 1rem',
+      info: {
+        backgroundColor: 'hsl(220, 85%, 85%)',
+      },
+      error: {
+        backgroundColor: 'hsl(0, 75%, 85%)',
+      },
+      warning: {
+        backgroundColor: 'hsl(30, 75%, 85%)',
+      },
+      success: {
+        backgroundColor: 'hsl(130, 75%, 85%)',
+      },
+    },
+  },
 };
-const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
+themeRendererManager.renderSchemaToTemplate(theme);
+
 Object.entries(schemas).forEach(([name, schema]) => {
   console.log(name);
   try {