diff --git a/.babelrc b/.babelrc
index c4fcb6d..3e4eb64 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,7 +1,13 @@
 {
     "presets": [
         ["@babel/preset-env", {"modules": false}],
-        ["@babel/preset-typescript", {"modules": false}]
+        ["@babel/preset-typescript", {"modules": false}],
+        [
+            "@babel/preset-react",
+            {
+                "modules": false
+            }
+        ]
     ],
     "plugins": [
         [
diff --git a/package.json b/package.json
index 0a9e59d..21a3f60 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@github/catalyst": "^1.1.3",
     "dayjs": "^1.10.5",
     "lit-html": "^1.4.1",
+    "prettier-plugin-html-template-literals": "^1.0.5",
     "validator": "^13.6.0"
   },
   "devDependencies": {
@@ -21,6 +22,7 @@
     "@babel/plugin-proposal-decorators": "^7.14.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
+    "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.13.0",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
@@ -36,7 +38,7 @@
     "eslint-plugin-import": "^2.23.4",
     "html-webpack-plugin": "^5.3.1",
     "node-sass": "^6.0.0",
-    "prettier": "^2.3.1",
+    "prettier": "^2.5.1",
     "sass-loader": "^11.1.1",
     "sass-to-string": "^1.5.1",
     "terser-webpack-plugin": "^5.1.3",
diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts
index 81d2249..a3d03fb 100644
--- a/src/common/core/BaseElement/BaseElement.ts
+++ b/src/common/core/BaseElement/BaseElement.ts
@@ -79,7 +79,14 @@ class BaseElement extends HTMLElement {
 	updateCallback = (): void => {};
 
 	update = (): void => {
-		render(this.render(), this);
+		let _rendered = this.render();
+		console.log(typeof _rendered, _rendered);
+		if (typeof _rendered === 'string') {
+			const strings: any = [_rendered];
+			console.log('Mwa', strings);
+			_rendered = html(strings);
+		}
+		render(_rendered, this);
 		if (this.shadowRoot) {
 			const renderSlot = () => html`<slot><slot></slot></slot>`;
 			render(renderSlot(), this.shadowRoot);
diff --git a/src/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts
index b1df69c..0a98dc2 100644
--- a/src/common/pages/BasePageElement/BasePageElement.ts
+++ b/src/common/pages/BasePageElement/BasePageElement.ts
@@ -1,7 +1,6 @@
 import { attr } from '@github/catalyst';
-import { html, render } from 'core/utils';
+import { html, render, isTrue, TemplateResult } from 'core/utils';
 import { BaseElement } from 'common/';
-import { isTrue } from 'core/utils';
 
 class BasePageElement extends BaseElement {
 	public _pageTitle: string = '';
@@ -31,7 +30,12 @@ class BasePageElement extends BaseElement {
 	};
 
 	update = (): void => {
-		const _render = () => html` ${this.renderTitle()} ${this.render()} `;
+		let renderPage = this.render();
+		if (typeof renderPage === 'string') {
+			const strings: any = [renderPage];
+			renderPage = html(strings);
+		}
+		const _render = () => html` ${this.renderTitle()} ${renderPage} `;
 		render(_render(), this);
 		this.bindEvents('app-action');
 		this.updateCallback();
diff --git a/src/components/app-form/AppFormElementTemplate.ts b/src/components/app-form/AppFormElementTemplate.ts
deleted file mode 100644
index 004fa0e..0000000
--- a/src/components/app-form/AppFormElementTemplate.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { html, isTrue, nothing, TemplateResult } from 'core/utils';
-
-export default (props): TemplateResult => {
-	const { renderInput, customRender, error, isValid, hasCancel } = props;
-	const renderSubmit = (valid: boolean) => {
-		if (!valid) {
-			return html`
-				<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>Submit</button>
-			`;
-		}
-		return html` <button class="btn btn-squared btn-primary --submit" type="submit">Submit</button> `;
-	};
-	const renderError = (error: string) => {
-		if (error) {
-			return html`<span>${error}</span>`;
-		}
-		return html``;
-	};
-	const renderCancel = (hasCancel: boolean) => {
-		if (hasCancel) {
-			return html`<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
-				Cancel
-			</button>`;
-		}
-		return html``;
-	};
-
-	return html`
-		<div class="app-form">
-			<form
-				app-action="submit:app-form#onSubmit"
-				data-target="app-form.formElement"
-				autocomplete="on"
-				method="POST"
-				action="javascript:void(0)"
-			>
-				${renderInput ? customRender() : html`<slot data-target="app-form.innerSlot"></slot>`} ${renderError(error)}
-				<div class="form-buttons">
-					<div class="button-content">${renderSubmit(isValid)}${renderCancel(isTrue(hasCancel))}</div>
-				</div>
-			</form>
-		</div>
-	`;
-};
diff --git a/src/components/app-form/AppFormElementTemplate.tsx b/src/components/app-form/AppFormElementTemplate.tsx
new file mode 100644
index 0000000..64b0637
--- /dev/null
+++ b/src/components/app-form/AppFormElementTemplate.tsx
@@ -0,0 +1,65 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { html, isTrue, nothing, TemplateResult, createElement, Fragment } from 'core/utils';
+
+const renderSubmit = (valid: boolean) => {
+	if (!valid) {
+		return (
+			<button class="btn btn-squared btn-primary --submit disabled" type="submit" disabled>
+				Submit
+			</button>
+		);
+	}
+	return (
+		<button class="btn btn-squared btn-primary --submit" type="submit">
+			Submit
+		</button>
+	);
+};
+const renderError = (error: string) => {
+	if (error) {
+		return <span>${error}</span>;
+	}
+	return null;
+};
+const renderCancel = (hasCancel: boolean) => {
+	if (hasCancel) {
+		return (
+			<button class="btn btn-squared btn-red --cancel" type="button" app-action="click:app-form#goBack">
+				Cancel
+			</button>
+		);
+	}
+	return null;
+};
+
+export default (props): TemplateResult => {
+	const { renderInput, customRender, error, isValid, hasCancel } = props;
+
+	return (
+		<div class="app-form">
+			<form
+				app-action="submit:app-form#onSubmit"
+				data-target="app-form.formElement"
+				autocomplete="on"
+				method="POST"
+				action="javascript:void(0)"
+			>
+				{renderInput ? (
+					customRender()
+				) : (
+					<Fragment>
+						<slot data-target="app-form.innerSlot"></slot> {renderError(error)}
+					</Fragment>
+				)}
+				<div class="form-buttons">
+					<div class="button-content">
+						{renderSubmit(isValid)}
+						{renderCancel(isTrue(hasCancel))}
+					</div>
+				</div>
+			</form>
+		</div>
+	);
+};
diff --git a/src/components/wallet-header/WalletHeaderElementTemplate.ts b/src/components/wallet-header/WalletHeaderElementTemplate.ts
index 7b27327..91c45d4 100644
--- a/src/components/wallet-header/WalletHeaderElementTemplate.ts
+++ b/src/components/wallet-header/WalletHeaderElementTemplate.ts
@@ -3,7 +3,7 @@ import { html, nothing, TemplateResult } from 'core/utils';
 export default (props): TemplateResult => {
 	const { currentBalance, currency, lastMonth, nextMonth, loader, initial } = props;
 
-	const renderItem = (header, balance, currency) => html`<div class="header-item">
+	const renderItem = (header, balance, currency) => html` <div class="header-item">
 		<div class="--header">${header}</div>
 		<div class="--content">
 			<span class="--balance ${balance > 0 ? '--positive' : '--negative'}"
diff --git a/src/core/utils/index.ts b/src/core/utils/index.ts
index 9e5d51a..70ed37a 100644
--- a/src/core/utils/index.ts
+++ b/src/core/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './library';
+export * as Library from './library';
 export * from './templating';
 
 export * from './directives/until';
diff --git a/src/core/utils/library.ts b/src/core/utils/library.ts
index fdc696c..9c3c28c 100644
--- a/src/core/utils/library.ts
+++ b/src/core/utils/library.ts
@@ -4,6 +4,52 @@ import { autoShadowRoot } from '@github/catalyst/lib/auto-shadow-root';
 import { defineObservedAttributes, initializeAttrs } from '@github/catalyst/lib/attr';
 
 import { CustomElement } from '@github/catalyst/lib/custom-element';
+import { html } from 'core/utils';
+
+function renderChildren(children) {
+	let _html = '';
+	for (const child of children) {
+		if (!child) break;
+		if (typeof child === 'string') {
+			_html += child;
+		} else {
+			_html += createElement(...child);
+		}
+	}
+	return _html;
+}
+
+const htmlTagReg = /<\/?[a-z][\s\S]*>/i;
+
+function processElement(tag?, attributes?, ...children) {
+	console.log(tag, attributes, children);
+	const isHtmlTag = htmlTagReg.test(tag);
+	if (isHtmlTag) {
+		console.log('tag1', [tag]);
+		return tag;
+	}
+	if (!tag) {
+		console.log('tag2', [tag]);
+		return renderChildren(children);
+	}
+
+	let _html = '<';
+	_html += tag;
+	for (const [key, value] of Object.entries(attributes || {})) {
+		_html += ` ${key}="${value}"`;
+	}
+	_html += '>';
+	_html += renderChildren(children);
+	_html += `</${tag}>`;
+	console.log('tag3', [_html]);
+	return _html;
+}
+
+function createElement(...args) {
+	return processElement(...args);
+}
+
+const Fragment = null;
 
 function controller(customElement: CustomElement | string): void | any {
 	if (typeof customElement == 'string') {
@@ -41,4 +87,4 @@ function controller(customElement: CustomElement | string): void | any {
 	}
 }
 
-export { attr, controller, target, targets };
+export { attr, controller, target, targets, createElement, Fragment };
diff --git a/src/pages/history-page/HistoryPageElementTemplate.ts b/src/pages/history-page/HistoryPageElementTemplate.ts
deleted file mode 100644
index dedf3d8..0000000
--- a/src/pages/history-page/HistoryPageElementTemplate.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { html, nothing, TemplateResult } from 'core/utils';
-
-export default (props): TemplateResult => {
-	return html`<div>
-		<div class="wallet-buttons">
-			<button class="btn btn-squared btn-primary" app-action="click:history-page#transactionCheck">
-				Check Transactions
-			</button>
-		</div>
-		<app-pagination data-target="history-page.pagination"></app-pagination>
-	</div>`;
-};
diff --git a/src/pages/history-page/HistoryPageElementTemplate.tsx b/src/pages/history-page/HistoryPageElementTemplate.tsx
new file mode 100644
index 0000000..7bd95f5
--- /dev/null
+++ b/src/pages/history-page/HistoryPageElementTemplate.tsx
@@ -0,0 +1,17 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { TemplateResult, createElement } from 'core/utils';
+
+export default (props): TemplateResult => {
+	return (
+		<div>
+			<div class="wallet-buttons">
+				<button class="btn btn-squared btn-primary" app-action="click:history-page#transactionCheck">
+					Check Transactions
+				</button>
+			</div>
+			<app-pagination data-target="history-page.pagination"></app-pagination>
+		</div>
+	);
+};
diff --git a/src/pages/login-page/LoginFormTemplate.ts b/src/pages/login-page/LoginFormTemplate.ts
deleted file mode 100644
index 5c10e35..0000000
--- a/src/pages/login-page/LoginFormTemplate.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { html, TemplateResult } from 'core/utils';
-
-export default (): TemplateResult => html` <input-field
-		data-type="email"
-		data-name="email"
-		data-label="E-mail"
-		data-targets="login-page.inputs"
-		data-rules="required|is_email"
-	></input-field>
-	<input-field
-		data-type="password"
-		data-name="password"
-		data-label="Password"
-		data-targets="login-page.inputs"
-		data-rules="required"
-	>
-	</input-field>
-	<input-field
-		data-type="checkbox"
-		data-name="rememberMe"
-		data-label="Remember me"
-		data-targets="login-page.inputs"
-		data-rules=""
-	>
-	</input-field>`;
diff --git a/src/pages/login-page/LoginFormTemplate.tsx b/src/pages/login-page/LoginFormTemplate.tsx
new file mode 100644
index 0000000..6060394
--- /dev/null
+++ b/src/pages/login-page/LoginFormTemplate.tsx
@@ -0,0 +1,30 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { TemplateResult, createElement, Fragment } from 'core/utils';
+
+export default (): TemplateResult => (
+	<Fragment>
+		<input-field
+			data-type="email"
+			data-name="email"
+			data-label="E-mail"
+			data-targets="login-page.inputs"
+			data-rules="required|is_email"
+		></input-field>
+		<input-field
+			data-type="password"
+			data-name="password"
+			data-label="Password"
+			data-targets="login-page.inputs"
+			data-rules="required"
+		></input-field>
+		<input-field
+			data-type="checkbox"
+			data-name="rememberMe"
+			data-label="Remember me"
+			data-targets="login-page.inputs"
+			data-rules=""
+		></input-field>
+	</Fragment>
+);
diff --git a/src/pages/login-page/LoginPageElementTemplate.ts b/src/pages/login-page/LoginPageElementTemplate.ts
deleted file mode 100644
index b51e87a..0000000
--- a/src/pages/login-page/LoginPageElementTemplate.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { html, TemplateResult } from 'core/utils';
-
-export default (): TemplateResult => html`
-	<app-form
-		data-custom="login-page#onSubmit"
-		data-target="login-page.appForm"
-		data-render-input="login-page#renderForms"
-	>
-	</app-form>
-	<div>
-		<app-link data-to="/register" data-title="Create new account"></app-link>
-	</div>
-`;
diff --git a/src/pages/login-page/LoginPageElementTemplate.tsx b/src/pages/login-page/LoginPageElementTemplate.tsx
new file mode 100644
index 0000000..da396f2
--- /dev/null
+++ b/src/pages/login-page/LoginPageElementTemplate.tsx
@@ -0,0 +1,27 @@
+/** @jsx createElement */
+/** @jsx.Frag Fragment */
+
+import { TemplateResult, createElement, Fragment } from 'core/utils';
+
+const Form = (
+	<app-form
+		data-custom="login-page#onSubmit"
+		data-target="login-page.appForm"
+		data-render-input="login-page#renderForms"
+	></app-form>
+);
+
+const RegisterLink = (
+	<div>
+		<app-link data-to="/register" data-title="Create new account"></app-link>
+	</div>
+);
+
+export default (): TemplateResult => {
+	return (
+		<Fragment>
+			<Form />
+			<RegisterLink />
+		</Fragment>
+	);
+};
diff --git a/yarn.lock b/yarn.lock
index 81596f5..852e64b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -58,6 +58,13 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
+  integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz"
@@ -155,6 +162,13 @@
   dependencies:
     "@babel/types" "^7.13.12"
 
+"@babel/helper-module-imports@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
+  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.14.0", "@babel/helper-module-transforms@^7.14.2":
   version "7.14.2"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz"
@@ -181,6 +195,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.5.tgz#afe37a45f39fce44a3d50a7958129ea5b1a5c074"
+  integrity sha512-59KHWHXxVA9K4HNF4sbHCf+eJeFe0Te/ZFGqBT4OjXhrwvA04sGfaEGsVTdsjoszq0YTP49RC9UKe5g8uN2RwQ==
+
 "@babel/helper-remap-async-to-generator@^7.13.0":
   version "7.13.0"
   resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz"
@@ -226,11 +245,21 @@
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz"
   integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
 
+"@babel/helper-validator-identifier@^7.15.7":
+  version "7.15.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
+  integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
+
 "@babel/helper-validator-option@^7.12.17":
   version "7.12.17"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz"
   integrity sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==
 
+"@babel/helper-validator-option@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
+  integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
+
 "@babel/helper-wrap-function@^7.13.0":
   version "7.13.0"
   resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.13.0.tgz"
@@ -459,6 +488,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.5.tgz#bf255d252f78bc8b77a17cadc37d1aa5b8ed4394"
+  integrity sha512-42OGssv9NPk4QHKVgIHlzeLgPOW5rGgfV5jzG90AhcXXIv6hu/eqj63w4VgvRxdvZY3AlYeDgPiSJ3BqAd1Y6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.5"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -705,6 +741,39 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-transform-react-display-name@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.5.tgz#d5e910327d7931fb9f8f9b6c6999473ceae5a286"
+  integrity sha512-dHYCOnzSsXFz8UcdNQIHGvg94qPL/teF7CCiCEMRxmA1G2p5Mq4JnKVowCDxYfiQ9D7RstaAp9kwaSI+sXbnhw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.5"
+
+"@babel/plugin-transform-react-jsx-development@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.5.tgz#87da9204c275ffb57f45d192a1120cf104bc1e86"
+  integrity sha512-uQSLacMZSGLCxOw20dzo1dmLlKkd+DsayoV54q3MHXhbqgPzoiGerZQgNPl/Ro8/OcXV2ugfnkx+rxdS0sN5Uw==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.16.5"
+
+"@babel/plugin-transform-react-jsx@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.5.tgz#5298aedc5f81e02b1cb702e597e8d6a346675765"
+  integrity sha512-+arLIz1d7kmwX0fKxTxbnoeG85ONSnLpvdODa4P3pc1sS7CV1hfmtYWufkW/oYsPnkDrEeQFxhUWcFnrXW7jQQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.16.5"
+    "@babel/plugin-syntax-jsx" "^7.16.5"
+    "@babel/types" "^7.16.0"
+
+"@babel/plugin-transform-react-pure-annotations@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.5.tgz#6535d0fe67c7a3a26c5105f92c8cbcbe844cd94b"
+  integrity sha512-0nYU30hCxnCVCbRjSy9ahlhWZ2Sn6khbY4FqR91W+2RbSqkWEbVu2gXh45EqNy4Bq7sRU+H4i0/6YKwOSzh16A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.16.5"
+
 "@babel/plugin-transform-regenerator@^7.13.15":
   version "7.13.15"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.13.15.tgz"
@@ -869,6 +938,18 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/preset-react@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.5.tgz#09df3b7a6522cb3e6682dc89b4dfebb97d22031b"
+  integrity sha512-3kzUOQeaxY/2vhPDS7CX/KGEGu/1bOYGvdRDJ2U5yjEz5o5jmIeTPLoiQBPGjfhPascLuW5OlMiPzwOOuB6txg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.5"
+    "@babel/helper-validator-option" "^7.14.5"
+    "@babel/plugin-transform-react-display-name" "^7.16.5"
+    "@babel/plugin-transform-react-jsx" "^7.16.5"
+    "@babel/plugin-transform-react-jsx-development" "^7.16.5"
+    "@babel/plugin-transform-react-pure-annotations" "^7.16.5"
+
 "@babel/preset-typescript@^7.13.0":
   version "7.13.0"
   resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz"
@@ -916,6 +997,14 @@
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
+  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    to-fast-properties "^2.0.0"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.3"
   resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz"
@@ -5063,10 +5152,15 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz"
-  integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==
+prettier-plugin-html-template-literals@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-html-template-literals/-/prettier-plugin-html-template-literals-1.0.5.tgz#fa8209c888b3e3e50cd61775f1b12b3e20f0cb58"
+  integrity sha1-+oIJyIiz4+UM1hd18bErPiDwy1g=
+
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
 pretty-error@^2.1.1:
   version "2.1.2"