From bf397fed2aba00e1e654356b37227dd4dbd5189a Mon Sep 17 00:00:00 2001
From: Antonette Caldwell <acald.nebula@gmail.com>
Date: Tue, 5 Sep 2023 12:30:34 -0500
Subject: [PATCH] chore: formatted svg files, added eslint config as there is
 one missing

Signed-off-by: Antonette Caldwell <acald.nebula@gmail.com>
---
 packages/svg/.eslintrc.js                     | 20 ++++
 packages/svg/package.json                     |  9 +-
 packages/svg/src/icons/Add/AddIcon.tsx        | 13 +--
 .../src/icons/Add/AddIconCircleBordered.tsx   | 13 +--
 .../src/icons/Application/ApplicationIcon.tsx | 12 +--
 .../Application/KeppelApplicationIcon.tsx     | 20 ++--
 .../Application/OutlinedApplicationIcon.tsx   | 20 ++--
 packages/svg/src/icons/Bell/BellIcon.tsx      | 12 +--
 packages/svg/src/icons/Bus/BusIcon.tsx        | 12 +--
 packages/svg/src/icons/Chat/ChatIcon.tsx      | 12 +--
 packages/svg/src/icons/Circle/CircleIcon.tsx  | 13 +--
 .../src/icons/Circle/OutlinedCircleIcon.tsx   | 22 +++--
 packages/svg/src/icons/Clone/CloneIcon.tsx    | 12 +--
 .../svg/src/icons/Cloud/CloudSavedIcon.tsx    | 12 +--
 .../svg/src/icons/Component/ComponentIcon.tsx | 12 +--
 packages/svg/src/icons/Copy/CopyLinkIcon.tsx  | 12 +--
 .../svg/src/icons/CreateNew/CreateNewIcon.tsx | 12 +--
 packages/svg/src/icons/FilledCircleIcon.tsx   | 13 +--
 .../icons/Rectangle/KeppelRectangleIcon.tsx   | 13 +--
 .../icons/Rectangle/OutlinedRectangleIcon.tsx | 22 +++--
 .../svg/src/icons/Rectangle/RectangleIcon.tsx | 12 +--
 .../KeppelTallRoundedRectangleIcon.tsx        | 13 +--
 .../OutlinedTallRoundedRectangleIcon.tsx      | 22 +++--
 .../TallRoundedRectangleIcon.tsx              | 13 +--
 yarn.lock                                     | 93 +++++++++++++++++++
 25 files changed, 264 insertions(+), 175 deletions(-)
 create mode 100644 packages/svg/.eslintrc.js

diff --git a/packages/svg/.eslintrc.js b/packages/svg/.eslintrc.js
new file mode 100644
index 00000000..d9dc2221
--- /dev/null
+++ b/packages/svg/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "standard-with-typescript",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        'react/react-in-jsx-scope': 0
+    }
+}
diff --git a/packages/svg/package.json b/packages/svg/package.json
index ba44b173..e3716514 100644
--- a/packages/svg/package.json
+++ b/packages/svg/package.json
@@ -22,13 +22,20 @@
     "@types/jest": "^29.5.4",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-jest": "^29.1.1",
     "tsup": "^7.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "*"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/svg/src/icons/Add/AddIcon.tsx b/packages/svg/src/icons/Add/AddIcon.tsx
index 0e4d5b4d..f2aae1e3 100644
--- a/packages/svg/src/icons/Add/AddIcon.tsx
+++ b/packages/svg/src/icons/Add/AddIcon.tsx
@@ -1,13 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const AddIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}) => {
+export const AddIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, fill = DEFAULT_FILL_NONE, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Add/AddIconCircleBordered.tsx b/packages/svg/src/icons/Add/AddIconCircleBordered.tsx
index e8cb26fa..ca4acd51 100644
--- a/packages/svg/src/icons/Add/AddIconCircleBordered.tsx
+++ b/packages/svg/src/icons/Add/AddIconCircleBordered.tsx
@@ -1,13 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const AddIconCircleBordered: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}) => {
+export const AddIconCircleBordered: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, fill = DEFAULT_FILL_NONE, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Application/ApplicationIcon.tsx b/packages/svg/src/icons/Application/ApplicationIcon.tsx
index 177c7078..3f938035 100644
--- a/packages/svg/src/icons/Application/ApplicationIcon.tsx
+++ b/packages/svg/src/icons/Application/ApplicationIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-const ApplicationIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+const ApplicationIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx b/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx
index 9810dbe6..c3b7ee1d 100644
--- a/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx
+++ b/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx
@@ -1,24 +1,26 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import {
   CARIBBEAN_GREEN_FILL,
   DEFAULT_HEIGHT,
   DEFAULT_WIDTH,
   KEPPEL_GREEN_FILL
 } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
 type KeppelApplicationIconProps = {
   primaryFill: string;
   secondaryFill: string;
 } & IconProps;
 
-export const KeppelApplicationIcon: FC<KeppelApplicationIconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  primaryFill = KEPPEL_GREEN_FILL,
-  secondaryFill = CARIBBEAN_GREEN_FILL,
-  ...props
-}) => {
+export const KeppelApplicationIcon: FC<KeppelApplicationIconProps> = (
+  {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    primaryFill = KEPPEL_GREEN_FILL,
+    secondaryFill = CARIBBEAN_GREEN_FILL,
+    ...props
+  }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx b/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx
index 588ff167..6b3feb6f 100644
--- a/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx
+++ b/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx
@@ -1,19 +1,21 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import {
   DEFAULT_FILL_NONE,
   DEFAULT_HEIGHT,
   DEFAULT_STROKE,
   DEFAULT_WIDTH
 } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const OutlinedApplicationIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  stroke = DEFAULT_STROKE,
-  ...props
-}) => {
+export const OutlinedApplicationIcon: FC<IconProps> = (
+  {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    fill = DEFAULT_FILL_NONE,
+    stroke = DEFAULT_STROKE,
+    ...props
+  }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Bell/BellIcon.tsx b/packages/svg/src/icons/Bell/BellIcon.tsx
index 99216f57..7c7de306 100644
--- a/packages/svg/src/icons/Bell/BellIcon.tsx
+++ b/packages/svg/src/icons/Bell/BellIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const BellIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const BellIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Bus/BusIcon.tsx b/packages/svg/src/icons/Bus/BusIcon.tsx
index a5416f1e..0b16164e 100644
--- a/packages/svg/src/icons/Bus/BusIcon.tsx
+++ b/packages/svg/src/icons/Bus/BusIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const BusIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const BusIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Chat/ChatIcon.tsx b/packages/svg/src/icons/Chat/ChatIcon.tsx
index c864caa5..05f894c3 100644
--- a/packages/svg/src/icons/Chat/ChatIcon.tsx
+++ b/packages/svg/src/icons/Chat/ChatIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const ChatIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const ChatIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Circle/CircleIcon.tsx b/packages/svg/src/icons/Circle/CircleIcon.tsx
index 53911658..a518b064 100644
--- a/packages/svg/src/icons/Circle/CircleIcon.tsx
+++ b/packages/svg/src/icons/Circle/CircleIcon.tsx
@@ -1,13 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_FILL, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const CircleIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL,
-  ...props
-}) => {
+export const CircleIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, fill = DEFAULT_FILL, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Circle/OutlinedCircleIcon.tsx b/packages/svg/src/icons/Circle/OutlinedCircleIcon.tsx
index 95e682e1..7d97bbde 100644
--- a/packages/svg/src/icons/Circle/OutlinedCircleIcon.tsx
+++ b/packages/svg/src/icons/Circle/OutlinedCircleIcon.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import {
   DEFAULT_FILL_NONE,
   DEFAULT_HEIGHT,
@@ -6,16 +6,18 @@ import {
   DEFAULT_STROKE_WIDTH,
   DEFAULT_WIDTH
 } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const OutlinedCircleIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  stroke = DEFAULT_STROKE,
-  strokeWidth = DEFAULT_STROKE_WIDTH,
-  ...props
-}) => {
+export const OutlinedCircleIcon: FC<IconProps> = (
+  {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    fill = DEFAULT_FILL_NONE,
+    stroke = DEFAULT_STROKE,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    ...props
+  }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Clone/CloneIcon.tsx b/packages/svg/src/icons/Clone/CloneIcon.tsx
index cc8302d4..9decafcd 100644
--- a/packages/svg/src/icons/Clone/CloneIcon.tsx
+++ b/packages/svg/src/icons/Clone/CloneIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const CloneIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const CloneIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Cloud/CloudSavedIcon.tsx b/packages/svg/src/icons/Cloud/CloudSavedIcon.tsx
index 754eed63..6880d8b7 100644
--- a/packages/svg/src/icons/Cloud/CloudSavedIcon.tsx
+++ b/packages/svg/src/icons/Cloud/CloudSavedIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const CloudSavedIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const CloudSavedIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Component/ComponentIcon.tsx b/packages/svg/src/icons/Component/ComponentIcon.tsx
index 64e5a7d6..8e51b802 100644
--- a/packages/svg/src/icons/Component/ComponentIcon.tsx
+++ b/packages/svg/src/icons/Component/ComponentIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const ComponentIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const ComponentIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Copy/CopyLinkIcon.tsx b/packages/svg/src/icons/Copy/CopyLinkIcon.tsx
index b376f227..a7740608 100644
--- a/packages/svg/src/icons/Copy/CopyLinkIcon.tsx
+++ b/packages/svg/src/icons/Copy/CopyLinkIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const CopyLinkIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const CopyLinkIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/CreateNew/CreateNewIcon.tsx b/packages/svg/src/icons/CreateNew/CreateNewIcon.tsx
index 2360f5a0..e5d6cf87 100644
--- a/packages/svg/src/icons/CreateNew/CreateNewIcon.tsx
+++ b/packages/svg/src/icons/CreateNew/CreateNewIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const CreateNewIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const CreateNewIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/FilledCircleIcon.tsx b/packages/svg/src/icons/FilledCircleIcon.tsx
index 3972b1b6..4359af9a 100644
--- a/packages/svg/src/icons/FilledCircleIcon.tsx
+++ b/packages/svg/src/icons/FilledCircleIcon.tsx
@@ -1,12 +1,9 @@
-import { FC } from 'react';
-import { IconProps } from './types';
+import { type FC } from 'react';
+import { type IconProps } from './types';
 
-export const FilledCircleIcon: FC<IconProps> = ({
-  width,
-  height,
-  fill = 'currentColor',
-  ...props
-}) => {
+export const FilledCircleIcon: FC<IconProps> = (
+  { width, height, fill = 'currentColor', ...props }
+) => {
   return (
     <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
       <path
diff --git a/packages/svg/src/icons/Rectangle/KeppelRectangleIcon.tsx b/packages/svg/src/icons/Rectangle/KeppelRectangleIcon.tsx
index 000a3ecc..f1d56ef2 100644
--- a/packages/svg/src/icons/Rectangle/KeppelRectangleIcon.tsx
+++ b/packages/svg/src/icons/Rectangle/KeppelRectangleIcon.tsx
@@ -1,17 +1,14 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH, KEPPEL_GREEN_FILL } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
 type KeppelRectangleIconProps = {
   primaryFill: string;
 } & IconProps;
 
-export const KeppelRectangleIcon: FC<KeppelRectangleIconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  primaryFill = KEPPEL_GREEN_FILL,
-  ...props
-}) => {
+export const KeppelRectangleIcon: FC<KeppelRectangleIconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, primaryFill = KEPPEL_GREEN_FILL, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Rectangle/OutlinedRectangleIcon.tsx b/packages/svg/src/icons/Rectangle/OutlinedRectangleIcon.tsx
index 577f4cfe..6f4e05b4 100644
--- a/packages/svg/src/icons/Rectangle/OutlinedRectangleIcon.tsx
+++ b/packages/svg/src/icons/Rectangle/OutlinedRectangleIcon.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import {
   DEFAULT_FILL_NONE,
   DEFAULT_HEIGHT,
@@ -6,16 +6,18 @@ import {
   DEFAULT_STROKE_WIDTH,
   DEFAULT_WIDTH
 } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const OutlinedRectangleIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  stroke = DEFAULT_STROKE,
-  strokeWidth = DEFAULT_STROKE_WIDTH,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}) => {
+export const OutlinedRectangleIcon: FC<IconProps> = (
+  {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    stroke = DEFAULT_STROKE,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    fill = DEFAULT_FILL_NONE,
+    ...props
+  }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/Rectangle/RectangleIcon.tsx b/packages/svg/src/icons/Rectangle/RectangleIcon.tsx
index 0e345d11..6aca7d45 100644
--- a/packages/svg/src/icons/Rectangle/RectangleIcon.tsx
+++ b/packages/svg/src/icons/Rectangle/RectangleIcon.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const RectangleIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  ...props
-}) => {
+export const RectangleIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/TallRoundedRectangle/KeppelTallRoundedRectangleIcon.tsx b/packages/svg/src/icons/TallRoundedRectangle/KeppelTallRoundedRectangleIcon.tsx
index 61f08723..85cc9a32 100644
--- a/packages/svg/src/icons/TallRoundedRectangle/KeppelTallRoundedRectangleIcon.tsx
+++ b/packages/svg/src/icons/TallRoundedRectangle/KeppelTallRoundedRectangleIcon.tsx
@@ -1,17 +1,14 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH, KEPPEL_GREEN_FILL } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
 type KeppelTallRoundedRectangleIconProps = {
   primaryFill: string;
 } & IconProps;
 
-export const KeppelTallRoundedRectangleIcon: FC<KeppelTallRoundedRectangleIconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  primaryFill = KEPPEL_GREEN_FILL,
-  ...props
-}) => {
+export const KeppelTallRoundedRectangleIcon: FC<KeppelTallRoundedRectangleIconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, primaryFill = KEPPEL_GREEN_FILL, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/TallRoundedRectangle/OutlinedTallRoundedRectangleIcon.tsx b/packages/svg/src/icons/TallRoundedRectangle/OutlinedTallRoundedRectangleIcon.tsx
index d7501fe4..882df105 100644
--- a/packages/svg/src/icons/TallRoundedRectangle/OutlinedTallRoundedRectangleIcon.tsx
+++ b/packages/svg/src/icons/TallRoundedRectangle/OutlinedTallRoundedRectangleIcon.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import {
   DEFAULT_FILL_NONE,
   DEFAULT_HEIGHT,
@@ -6,16 +6,18 @@ import {
   DEFAULT_STROKE_WIDTH,
   DEFAULT_WIDTH
 } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const OutlinedTallRoundedRectangleIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  stroke = DEFAULT_STROKE,
-  strokeWidth = DEFAULT_STROKE_WIDTH,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}) => {
+export const OutlinedTallRoundedRectangleIcon: FC<IconProps> = (
+  {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    stroke = DEFAULT_STROKE,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    fill = DEFAULT_FILL_NONE,
+    ...props
+  }
+) => {
   return (
     <svg
       width={width}
diff --git a/packages/svg/src/icons/TallRoundedRectangle/TallRoundedRectangleIcon.tsx b/packages/svg/src/icons/TallRoundedRectangle/TallRoundedRectangleIcon.tsx
index 615d5692..550ccfb0 100644
--- a/packages/svg/src/icons/TallRoundedRectangle/TallRoundedRectangleIcon.tsx
+++ b/packages/svg/src/icons/TallRoundedRectangle/TallRoundedRectangleIcon.tsx
@@ -1,13 +1,10 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 import { DEFAULT_FILL, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
-import { IconProps } from '../types';
+import { type IconProps } from '../types';
 
-export const TallRoundedRectangleIcon: FC<IconProps> = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL,
-  ...props
-}) => {
+export const TallRoundedRectangleIcon: FC<IconProps> = (
+  { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, fill = DEFAULT_FILL, ...props }
+) => {
   return (
     <svg
       width={width}
diff --git a/yarn.lock b/yarn.lock
index d7d20516..34b5e0bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3519,6 +3519,23 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/eslint-plugin@^6.4.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.6.0.tgz#19ba09aa34fd504696445100262e5a9e1b1d7024"
+  integrity sha512-CW9YDGTQnNYMIo5lMeuiIG08p4E0cXrXTbcZ2saT/ETE7dWUrNxlijsQeU04qAAKkILiLzdQz+cGFxCJjaZUmA==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "6.6.0"
+    "@typescript-eslint/type-utils" "6.6.0"
+    "@typescript-eslint/utils" "6.6.0"
+    "@typescript-eslint/visitor-keys" "6.6.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/eslint-plugin@^6.4.1":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.5.0.tgz#5cee33edf0d45d5ec773e3b3111206b098ac8599"
@@ -3547,6 +3564,17 @@
     "@typescript-eslint/visitor-keys" "6.5.0"
     debug "^4.3.4"
 
+"@typescript-eslint/parser@^6.4.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.6.0.tgz#fe323a7b4eafb6d5ea82b96216561810394a739e"
+  integrity sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.6.0"
+    "@typescript-eslint/types" "6.6.0"
+    "@typescript-eslint/typescript-estree" "6.6.0"
+    "@typescript-eslint/visitor-keys" "6.6.0"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.5.0.tgz#f2cb20895aaad41b3ad27cc3a338ce8598f261c5"
@@ -3555,6 +3583,14 @@
     "@typescript-eslint/types" "6.5.0"
     "@typescript-eslint/visitor-keys" "6.5.0"
 
+"@typescript-eslint/scope-manager@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz#57105d4419d6de971f7d2c30a2ff4ac40003f61a"
+  integrity sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw==
+  dependencies:
+    "@typescript-eslint/types" "6.6.0"
+    "@typescript-eslint/visitor-keys" "6.6.0"
+
 "@typescript-eslint/type-utils@6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.5.0.tgz#6d246c93739282bc0d2e623f28d0dec6cfcc38d7"
@@ -3565,11 +3601,26 @@
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/type-utils@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.6.0.tgz#14f651d13b884915c4fca0d27adeb652a4499e86"
+  integrity sha512-8m16fwAcEnQc69IpeDyokNO+D5spo0w1jepWWY2Q6y5ZKNuj5EhVQXjtVAeDDqvW6Yg7dhclbsz6rTtOvcwpHg==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "6.6.0"
+    "@typescript-eslint/utils" "6.6.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/types@6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.5.0.tgz#f4e55cfd99ac5346ea772770bf212a3e689a8f04"
   integrity sha512-eqLLOEF5/lU8jW3Bw+8auf4lZSbbljHR2saKnYqON12G/WsJrGeeDHWuQePoEf9ro22+JkbPfWQwKEC5WwLQ3w==
 
+"@typescript-eslint/types@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.6.0.tgz#95e7ea650a2b28bc5af5ea8907114a48f54618c2"
+  integrity sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg==
+
 "@typescript-eslint/typescript-estree@6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.5.0.tgz#1cef6bc822585e9ef89d88834bc902d911d747ed"
@@ -3583,6 +3634,19 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/typescript-estree@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz#373c420d2e12c28220f4a83352280a04823a91b7"
+  integrity sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA==
+  dependencies:
+    "@typescript-eslint/types" "6.6.0"
+    "@typescript-eslint/visitor-keys" "6.6.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/utils@6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.5.0.tgz#6668bee4f7f24978b11df8a2ea42d56eebc4662c"
@@ -3596,6 +3660,19 @@
     "@typescript-eslint/typescript-estree" "6.5.0"
     semver "^7.5.4"
 
+"@typescript-eslint/utils@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.6.0.tgz#2d686c0f0786da6362d909e27a9de1c13ba2e7dc"
+  integrity sha512-mPHFoNa2bPIWWglWYdR0QfY9GN0CfvvXX1Sv6DlSTive3jlMTUy+an67//Gysc+0Me9pjitrq0LJp0nGtLgftw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.6.0"
+    "@typescript-eslint/types" "6.6.0"
+    "@typescript-eslint/typescript-estree" "6.6.0"
+    semver "^7.5.4"
+
 "@typescript-eslint/visitor-keys@6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.5.0.tgz#1a6f474a0170a447b76f0699ce6700110fd11436"
@@ -3604,6 +3681,14 @@
     "@typescript-eslint/types" "6.5.0"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/visitor-keys@6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz#1109088b4346c8b2446f3845db526374d9a3bafc"
+  integrity sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ==
+  dependencies:
+    "@typescript-eslint/types" "6.6.0"
+    eslint-visitor-keys "^3.4.1"
+
 "@vitejs/plugin-react@^3.0.1", "@vitejs/plugin-react@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz#d1091f535eab8b83d6e74034d01e27d73c773240"
@@ -5225,6 +5310,14 @@ eslint-config-standard-with-typescript@^38.0.0:
     "@typescript-eslint/parser" "^6.1.0"
     eslint-config-standard "17.1.0"
 
+eslint-config-standard-with-typescript@^39.0.0:
+  version "39.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-39.0.0.tgz#310847a474298cd64a8664a1d5b5434fb30e37b9"
+  integrity sha512-CiV2LS4NUeeRmDTDf1ocUMpMxitSyW0g+Y/N7ecElwGj188GahbcQgqfBNyVsIXQxHlZVBlOjkbg3oUI0R3KBg==
+  dependencies:
+    "@typescript-eslint/parser" "^6.4.0"
+    eslint-config-standard "17.1.0"
+
 eslint-config-standard@17.1.0:
   version "17.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz#40ffb8595d47a6b242e07cbfd49dc211ed128975"