From 334080b98bd979a460e170cc122be12e781ff2de Mon Sep 17 00:00:00 2001
From: Yan Xu <yxu@pn1704854.lanl.gov>
Date: Mon, 18 Mar 2024 18:00:56 -0600
Subject: [PATCH 1/6] tutorial screen

---
 src/components/TextListItem/TextListItem.tsx |  26 +++
 src/components/Tutorial/Tutorial.css         |   9 +
 src/components/Tutorial/Tutorial.tsx         | 225 +++++++++++++++++++
 src/pages/TutorialPage/TutorialPage.tsx      |  26 ++-
 src/pages/TutorialPage/tutorial.md           | 156 +++++++++++++
 5 files changed, 437 insertions(+), 5 deletions(-)
 create mode 100644 src/components/TextListItem/TextListItem.tsx
 create mode 100644 src/components/Tutorial/Tutorial.css
 create mode 100644 src/components/Tutorial/Tutorial.tsx
 create mode 100644 src/pages/TutorialPage/tutorial.md

diff --git a/src/components/TextListItem/TextListItem.tsx b/src/components/TextListItem/TextListItem.tsx
new file mode 100644
index 0000000..b5b9d4f
--- /dev/null
+++ b/src/components/TextListItem/TextListItem.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { IonText, IonIcon } from '@ionic/react';
+import { checkmarkCircle } from 'ionicons/icons';
+
+interface TextListItemProps {
+  color: string,
+  children: string;
+}
+
+const TextListItem: React.FC<TextListItemProps> = ({ color, children }) => {
+  return (
+    <>
+      <p>
+        <IonText color={color}>
+          <IonIcon icon={checkmarkCircle}></IonIcon>
+          &nbsp;&nbsp;
+        </IonText>
+        <IonText color={color}>
+          {children}
+        </IonText> 
+      </p>
+    </>
+  );
+};
+
+export default TextListItem;
\ No newline at end of file
diff --git a/src/components/Tutorial/Tutorial.css b/src/components/Tutorial/Tutorial.css
new file mode 100644
index 0000000..b09c077
--- /dev/null
+++ b/src/components/Tutorial/Tutorial.css
@@ -0,0 +1,9 @@
+.tutorial-header {
+  padding: 10px 10px 10px 10px;
+}
+
+.tutorial-header .title {
+  font-size: 1.0rem;
+  font-weight: bold;
+  color: var(--ion-color-primary);
+}
\ No newline at end of file
diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
new file mode 100644
index 0000000..9d1bdd7
--- /dev/null
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -0,0 +1,225 @@
+import React from "react";
+import {
+  IonIcon,
+  IonContent,
+  IonAccordion, 
+  IonAccordionGroup, 
+  IonItem, 
+  IonLabel,
+  IonPopover,
+} from "@ionic/react";
+import { informationCircleOutline } from 'ionicons/icons';
+import TextListItem from "../../components/TextListItem/TextListItem";
+
+import "./Tutorial.css";
+
+const Tutorial: React.FC = () => {
+  return (
+    <IonAccordionGroup>
+      <div className="tutorial-header">
+        <span className="title">Soil Package</span>
+        <IonIcon id="hover-trigger-soil" icon={informationCircleOutline} size="small" color="primary"></IonIcon>
+        <IonPopover trigger="hover-trigger-soil" triggerAction="hover">
+          <IonContent class="ion-padding">
+            Are you planning a trip to the field to collect soil samples and metadata? 
+            Below we have listed the NMDC soil package required metadata fields to ensure 
+            you pack the right tools and make required measurements in the field!
+            <br></br>
+            <br></br>
+            Note: The NMDC metadata requirements also encompass fields required by NCBI and 
+            the Genomic Standards Consortium (GSC)
+          </IonContent>
+        </IonPopover>
+      </div>
+      
+      <IonAccordion value="soildPackage1">
+        <IonItem slot="header" >
+          <IonLabel>What to consider bringing out to the field to collect sample metadata</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">Way of measuring sampling depth e.g., ruler, measurement device</TextListItem>
+          <TextListItem color="primary">Sample storage method (e.g., preservative, cooler, freezer)</TextListItem>
+          <TextListItem color="primary">
+            Way of labeling samples (e.g., labeled tubes, sharpies, barcodes); 
+            can also bring barcode reader to log sample numbers from barcodes in the app
+          </TextListItem>
+          <TextListItem color="primary">Sample collection device (link the things from sample collection device field)</TextListItem>
+          <TextListItem color="primary">Thermometer, or way of measuring air temperature and sample temperature</TextListItem>
+          <TextListItem color="primary">Way of measuring elevation </TextListItem>
+          <TextListItem color="primary">Way of locating sampling point (latitude and longitude) </TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Way of collecting pH (e.g., pH strips)</TextListItem>
+        </div>
+      </IonAccordion>
+      <IonAccordion value="soildPackage2">
+        <IonItem slot="header" >
+          <IonLabel>Basic recommendations for fieldwork</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">Bring sunscreen, hat, sunglasses, bug spray </TextListItem>
+          <TextListItem color="primary">Tell at least one person where you are going, when you are going, other information about your sampling trip</TextListItem>
+          <TextListItem color="primary">Know local animals and dangers they may pose</TextListItem>
+          <TextListItem color="primary">Check weather conditions and know risks for local weather events (e.g., flash floods)</TextListItem>
+          <TextListItem color="primary">Know risks for injuries in the sampling environment</TextListItem>
+          <TextListItem color="primary">Bring plenty of food and water</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+        </div>
+      </IonAccordion>
+      <IonAccordion value="soildPackage3">
+        <IonItem slot="header" >
+          <IonLabel>All required fields of the NMDC soil metadata package relevant to the sample and the field collection</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+        </div>
+      </IonAccordion>
+      <IonAccordion value="soildPackage4">
+        <IonItem slot="header" >
+          <IonLabel>All recommended fields of the NMDC soil metadata package relevant to the sample and the field collection</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+        </div>
+      </IonAccordion>
+      <IonAccordion value="soildPackage5">
+        <IonItem slot="header" >
+          <IonLabel>Other fields in the NMDC Submission Portal that may be relevant to the sample or to later processing steps</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Slope aspect?</TextListItem>
+          <TextListItem color="primary">Sample name</TextListItem>
+          <TextListItem color="primary">Ecosystem</TextListItem>
+        </div>
+      </IonAccordion>
+      
+      <div className="tutorial-header">
+        <span className="title">Metadata Collection</span>
+        <IonIcon id="hover-trigger-metadata" icon={informationCircleOutline} size="small" color="primary"></IonIcon>
+        <IonPopover trigger="hover-trigger-metadata" triggerAction="hover">
+          <IonContent class="ion-padding">
+            Metadata collection in the field
+          </IonContent>
+        </IonPopover>
+      </div>
+
+      <IonAccordion value="metadata1">
+        <IonItem slot="header" >
+          <IonLabel>metadata collection 1</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">item</TextListItem>
+          <TextListItem color="primary">item</TextListItem>
+        </div>
+      </IonAccordion>
+      <IonAccordion value="metadata2">
+        <IonItem slot="header" >
+          <IonLabel>metadata collection 2</IonLabel>
+        </IonItem>
+        <div className="ion-padding" slot="content">
+          <TextListItem color="primary">item</TextListItem>
+          <TextListItem color="primary">item</TextListItem>
+        </div>
+      </IonAccordion>
+    </IonAccordionGroup>
+  );
+};
+
+export default Tutorial;
\ No newline at end of file
diff --git a/src/pages/TutorialPage/TutorialPage.tsx b/src/pages/TutorialPage/TutorialPage.tsx
index 9ed2a82..4131834 100644
--- a/src/pages/TutorialPage/TutorialPage.tsx
+++ b/src/pages/TutorialPage/TutorialPage.tsx
@@ -1,17 +1,33 @@
 import React from "react";
-import { IonContent, IonPage, IonTitle } from "@ionic/react";
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import Tutorial from "../../components/Tutorial/Tutorial";
 
 import "./TutorialPage.css";
 
 const TutorialPage: React.FC = () => {
   return (
     <IonPage>
-      <IonContent fullscreen className={"ion-padding"}>
-        {/* TODO: Implement this page. */}
-        <IonTitle>TutorialPage</IonTitle>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/"></IonBackButton>
+          </IonButtons>
+          <IonTitle>Tutorial</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <Tutorial />
       </IonContent>
     </IonPage>
   );
 };
 
-export default TutorialPage;
+export default TutorialPage;
\ No newline at end of file
diff --git a/src/pages/TutorialPage/tutorial.md b/src/pages/TutorialPage/tutorial.md
new file mode 100644
index 0000000..3f06847
--- /dev/null
+++ b/src/pages/TutorialPage/tutorial.md
@@ -0,0 +1,156 @@
+# Field Notes App Tutorials
+
+## Soil Package
+
+Are you planning a trip to the field to collect soil samples and metadata? Below we have listed the NMDC soil package required metadata fields to ensure you pack the right tools and make required measurements in the field!
+
+Note: The NMDC metadata requirements also encompass fields required by NCBI and the Genomic Standards Consortium (GSC)
+
+
+### What to consider bringing out to the field to collect sample metadata
+- Way of measuring sampling depth e.g., ruler, measurement device
+- Sample storage method (e.g., preservative, cooler, freezer)
+- Way of labeling samples (e.g., labeled tubes, sharpies, barcodes); can also bring barcode reader to log sample numbers from barcodes in the app
+- Sample collection device (link the things from sample collection device field)
+- Thermometer, or way of measuring air temperature and sample temperature
+- Way of measuring elevation (e.g.,
+- Way of locating sampling point (latitude and longitude)
+- Slope aspect?
+- Way of collecting pH (e.g., pH strips)
+
+
+### Basic recommendations for fieldwork
+- Bring sunscreen, hat, sunglasses, bug spray
+- Tell at least one person where you are going, when you are going, other information about your sampling trip
+- Know local animals and dangers they may pose
+- Check weather conditions and know risks for local weather events (e.g., flash floods)
+- Know risks for injuries in the sampling environment
+- Bring plenty of food and water
+- Bring communication device(s), know limitations of them (e.g., no cell phone service)
+- Proper shoes and clothes for the environment and weather
+- Always better to sample with a group or another individual, try to never go alone
+- Pack layers of clothing
+
+
+### All required fields of the NMDC soil metadata package relevant to the sample and the field collection
+
+- Sample name
+- Broad-scale environmental context
+- Local environmental context
+- Environmental medium
+- Growth facility
+- Storage conditions
+- Collection date
+- Geographic location (country, and/or sea, region)
+- Geographic location (latitude and longitude)
+- Elevation, meters
+- Sample storage temperature
+- Depth, meters
+
+
+### All recommended fields of the NMDC soil metadata package relevant to the sample and the field collection
+
+- Sample linkage
+- Ecosystem
+- Ecosystem category
+- Ecosystem type
+- Ecosystem subtype
+- Specific ecosystem
+- Composite design/sieving
+- Size-fraction lower threshold
+- Size-fraction upper threshold
+- Biotic regimen
+- Sample collection device
+- Air temperature regimen
+- Chemical administration
+- Climate environment
+- Gaseous environment
+- Humidity regimen
+- Light regimen
+- Watering regimen
+- pH
+- Collection time, GMT
+- Incubation collection date
+- Incubation collection time, GMT
+- Incubation start date
+- Incubation start time, GMT
+- Filter method
+- Experimental factor-other
+- Other treatments
+- Isotope exposure/addition
+- Microbial biomass carbon method
+
+
+### Other fields in the NMDC Submission Portal that may be relevant to the sample or to later processing steps
+
+- Source material identifier
+- Slope aspect
+- History/agrochemical additions
+- Aluminum saturation/extreme unusual properties
+- Aluminum saturation method/extreme unusual properties
+- Mean annual precipitation
+- Mean annual temperature
+- History/crop rotation
+- Current land use
+- Current vegetation
+- Current vegetation method
+- Drainage classification
+- Experimental factor
+- History/extreme events
+- Soil taxonomic/FAO classification
+- History/fire
+- History/flooding
+- Heavy metals/extreme unusual properties
+- Heavy metals method/extreme unusual properties
+- Soil horizon method
+- Link to classification method
+- Link to climate information
+- Soil taxonomic/local classification
+- Miscellaneous parameter
+- Soil taxonomic/local classification method
+- Oxygenation status of sample
+- History/previous land use method
+- History/previous land use
+- Profile position
+- Average seasonal precipitation
+- Mean seasonal temperature 
+- Slope gradient
+- Soil horizon
+- Soil texture measurement
+- Soil texture method
+- Soil type
+- Soil type method
+- Temperature
+- History/tillage
+- Water content
+- Water content method
+- pH method
+- Microbial biomass
+- Microbial biomass method
+- Carbon/nitrogen ratio
+- Organic matter
+- Organic nitrogen
+- Total carbon
+- Total nitrogen content
+- Total nitrogen content method
+- Total organic carbon
+- Total organic carbon method
+- Total phosphorus
+- Phosphate
+- Salinity
+
+
+## Metadata Collection
+
+Metadata collection in the field
+
+
+### metadata collection 1
+
+- item
+- item
+
+### metadata collection 2
+
+- item
+- item
\ No newline at end of file

From fb7756e75d5b12226f0aa6e5259b52ed7d7ea061 Mon Sep 17 00:00:00 2001
From: eecavanna <eecavanna@users.noreply.github.com>
Date: Tue, 19 Mar 2024 19:24:17 -0700
Subject: [PATCH 2/6] Demonstrate "Markdown-in-JS" approach (using
 `react-markdown`)

---
 package-lock.json                          | 1502 ++++++++++++++++++--
 package.json                               |    1 +
 src/components/Tutorial/Tutorial.tsx       |  192 +--
 src/components/Tutorial/md-in-js/001.md.ts |   18 +
 src/components/Tutorial/md-in-js/002.md.ts |   19 +
 src/components/Tutorial/md-in-js/003.md.ts |   21 +
 src/components/Tutorial/md-in-js/004.md.ts |   38 +
 src/components/Tutorial/md-in-js/005.md.ts |   64 +
 src/components/Tutorial/md-in-js/index.ts  |   21 +
 9 files changed, 1602 insertions(+), 274 deletions(-)
 create mode 100644 src/components/Tutorial/md-in-js/001.md.ts
 create mode 100644 src/components/Tutorial/md-in-js/002.md.ts
 create mode 100644 src/components/Tutorial/md-in-js/003.md.ts
 create mode 100644 src/components/Tutorial/md-in-js/004.md.ts
 create mode 100644 src/components/Tutorial/md-in-js/005.md.ts
 create mode 100644 src/components/Tutorial/md-in-js/index.ts

diff --git a/package-lock.json b/package-lock.json
index b0f0a13..09e4f88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.0",
+        "react-markdown": "^9.0.1",
         "react-minisearch": "^6.3.0",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4"
@@ -6462,6 +6463,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/detect-port": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.5.tgz",
@@ -6495,8 +6504,15 @@
     "node_modules/@types/estree": {
       "version": "0.0.51",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "dev": true
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
@@ -6556,6 +6572,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/history": {
       "version": "4.7.11",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
@@ -6646,6 +6670,14 @@
       "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
       "dev": true
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
+      "integrity": "sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/mdx": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.11.tgz",
@@ -6676,6 +6708,11 @@
       "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
       "dev": true
     },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
     "node_modules/@types/node": {
       "version": "20.11.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.14.tgz",
@@ -6710,8 +6747,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.11",
@@ -6729,7 +6765,6 @@
       "version": "18.2.48",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.48.tgz",
       "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -6775,8 +6810,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.6",
@@ -6847,8 +6881,7 @@
     "node_modules/@types/unist": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==",
-      "dev": true
+      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
     },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
@@ -7199,8 +7232,7 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@vitejs/plugin-legacy": {
       "version": "5.3.0",
@@ -8535,6 +8567,15 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -8959,6 +9000,15 @@
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "dev": true
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
@@ -8993,6 +9043,42 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -9296,6 +9382,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "9.5.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
@@ -10044,8 +10139,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
       "version": "13.6.4",
@@ -10182,7 +10276,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -10235,6 +10328,18 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "dev": true
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -10496,7 +10601,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -10605,6 +10709,18 @@
         "detect-port": "bin/detect-port.js"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/diff": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
@@ -11569,6 +11685,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -11734,8 +11859,7 @@
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "node_modules/external-editor": {
       "version": "3.1.0",
@@ -13073,6 +13197,63 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
+      "integrity": "sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
+    "node_modules/hast-util-to-jsx-runtime/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/hast-util-to-jsx-runtime/node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -13144,6 +13325,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
+      "integrity": "sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -13339,6 +13529,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz",
+      "integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ=="
+    },
     "node_modules/inquirer": {
       "version": "8.2.6",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
@@ -13434,6 +13629,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -13576,6 +13793,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-deflate": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-deflate/-/is-deflate-1.0.0.tgz",
@@ -13663,6 +13889,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-installed-globally": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
@@ -14900,6 +15135,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -15032,96 +15276,368 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-to-string": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
-      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
-      "dev": true,
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
+      "integrity": "sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
+    "node_modules/mdast-util-from-markdown/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
     },
-    "node_modules/memoizerific": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
-      "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
-      "dev": true,
+    "node_modules/mdast-util-from-markdown/node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
       "dependencies": {
-        "map-or-similar": "^1.5.0"
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/meow": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
-      "integrity": "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==",
-      "dev": true,
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
+      "integrity": "sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==",
       "dependencies": {
-        "@types/minimist": "^1.2.0",
-        "camelcase-keys": "^6.2.2",
-        "decamelize-keys": "^1.1.0",
-        "hard-rejection": "^2.1.0",
-        "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.0",
-        "read-pkg-up": "^7.0.1",
-        "redent": "^3.0.0",
-        "trim-newlines": "^3.0.0",
-        "type-fest": "^0.18.0",
-        "yargs-parser": "^20.2.3"
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.2.tgz",
+      "integrity": "sha512-eKMQDeywY2wlHc97k5eD8VC+9ASMjN8ItEZQNGwJ6E0XWKiW/Z0V5/H8pvoXUf+y+Mj0VIgeRRbujBmFn4FTyA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-remove-position": "^5.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/meow/node_modules/hosted-git-info": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-      "dev": true,
+    "node_modules/mdast-util-mdx-jsx/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
       "dependencies": {
-        "lru-cache": "^6.0.0"
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/meow/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
       "dependencies": {
-        "yallist": "^4.0.0"
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/meow/node_modules/normalize-package-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-      "dev": true,
+    "node_modules/mdast-util-phrasing/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/mdast-util-phrasing/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
       "dependencies": {
-        "hosted-git-info": "^4.0.1",
-        "is-core-module": "^2.5.0",
-        "semver": "^7.3.4",
-        "validate-npm-package-license": "^3.0.1"
+        "@types/unist": "^3.0.0"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
+      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/mdast-util-to-hast/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast/node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+      "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/mdast-util-to-markdown/node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown/node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
+      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memoizerific": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+      "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
+      "dev": true,
+      "dependencies": {
+        "map-or-similar": "^1.5.0"
+      }
+    },
+    "node_modules/meow": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
+      "integrity": "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.18.0",
+        "yargs-parser": "^20.2.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/meow/node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/meow/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/meow/node_modules/normalize-package-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/meow/node_modules/type-fest": {
@@ -15172,43 +15688,464 @@
         "node": ">= 8"
       }
     },
-    "node_modules/mergexml": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/mergexml/-/mergexml-1.2.3.tgz",
-      "integrity": "sha512-sNc9qswtLUoGmN0MB3dY+MCIJqCGEZZrtYp0Z5Iwsk6ELc/V96SFIuv5Y6O6tYAsFtdpJcPFV0FgOSHSciJLbA==",
-      "dev": true,
+    "node_modules/mergexml": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mergexml/-/mergexml-1.2.3.tgz",
+      "integrity": "sha512-sNc9qswtLUoGmN0MB3dY+MCIJqCGEZZrtYp0Z5Iwsk6ELc/V96SFIuv5Y6O6tYAsFtdpJcPFV0FgOSHSciJLbA==",
+      "dev": true,
+      "dependencies": {
+        "@xmldom/xmldom": "^0.7.0",
+        "formidable": "^1.2.1",
+        "xpath": "0.0.27"
+      }
+    },
+    "node_modules/mergexml/node_modules/@xmldom/xmldom": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.13.tgz",
+      "integrity": "sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/mergexml/node_modules/xpath": {
+      "version": "0.0.27",
+      "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.27.tgz",
+      "integrity": "sha512-fg03WRxtkCV6ohClePNAECYsmpKKTv5L8y/X3Dn1hQrec3POx2jHZ/0P2qQ6HvsrU1BmeqXcof3NGGueG6LxwQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
+      "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.0.tgz",
+      "integrity": "sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+      "integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+      "integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+      "integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+      "integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+      "integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+      "integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+      "integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+      "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+      "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+      "integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+      "integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+      "integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "dependencies": {
-        "@xmldom/xmldom": "^0.7.0",
-        "formidable": "^1.2.1",
-        "xpath": "0.0.27"
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/mergexml/node_modules/@xmldom/xmldom": {
-      "version": "0.7.13",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.13.tgz",
-      "integrity": "sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/mergexml/node_modules/xpath": {
-      "version": "0.0.27",
-      "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.27.tgz",
-      "integrity": "sha512-fg03WRxtkCV6ohClePNAECYsmpKKTv5L8y/X3Dn1hQrec3POx2jHZ/0P2qQ6HvsrU1BmeqXcof3NGGueG6LxwQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.0"
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.0.tgz",
+      "integrity": "sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
     },
     "node_modules/micromatch": {
       "version": "4.0.5",
@@ -15423,8 +16360,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/msw": {
       "version": "2.1.5",
@@ -16347,6 +17283,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -16814,6 +17769,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-information": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.1.tgz",
+      "integrity": "sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -17301,6 +18265,75 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-markdown": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
+    "node_modules/react-markdown/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/react-markdown/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/react-markdown/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/react-markdown/node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/react-minisearch": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/react-minisearch/-/react-minisearch-6.3.0.tgz",
@@ -17742,6 +18775,37 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-slug": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.1.0.tgz",
@@ -19042,6 +20106,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
+      "integrity": "sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -19136,6 +20213,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.5.tgz",
+      "integrity": "sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==",
+      "dependencies": {
+        "inline-style-parser": "0.2.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -19692,6 +20777,15 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/trim-newlines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
@@ -19701,6 +20795,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -20061,6 +21164,40 @@
         "node": ">=4"
       }
     },
+    "node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unified/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/unified/node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -20083,6 +21220,97 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/unist-util-remove-position/node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position/node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
     "node_modules/unist-util-visit": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
@@ -20353,6 +21581,43 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/vfile/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
     "node_modules/vite": {
       "version": "5.0.12",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
@@ -21521,6 +22786,15 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e3f388e..4590802 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",
+    "react-markdown": "^9.0.1",
     "react-minisearch": "^6.3.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4"
diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
index 9d1bdd7..4e9f536 100644
--- a/src/components/Tutorial/Tutorial.tsx
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -6,10 +6,13 @@ import {
   IonAccordionGroup, 
   IonItem, 
   IonLabel,
+  IonList,
   IonPopover,
 } from "@ionic/react";
-import { informationCircleOutline } from 'ionicons/icons';
+import { informationCircleOutline, checkmarkCircle } from 'ionicons/icons';
 import TextListItem from "../../components/TextListItem/TextListItem";
+import { sections } from "./md-in-js";
+import Markdown from "react-markdown";
 
 import "./Tutorial.css";
 
@@ -31,165 +34,34 @@ const Tutorial: React.FC = () => {
           </IonContent>
         </IonPopover>
       </div>
-      
-      <IonAccordion value="soildPackage1">
-        <IonItem slot="header" >
-          <IonLabel>What to consider bringing out to the field to collect sample metadata</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">Way of measuring sampling depth e.g., ruler, measurement device</TextListItem>
-          <TextListItem color="primary">Sample storage method (e.g., preservative, cooler, freezer)</TextListItem>
-          <TextListItem color="primary">
-            Way of labeling samples (e.g., labeled tubes, sharpies, barcodes); 
-            can also bring barcode reader to log sample numbers from barcodes in the app
-          </TextListItem>
-          <TextListItem color="primary">Sample collection device (link the things from sample collection device field)</TextListItem>
-          <TextListItem color="primary">Thermometer, or way of measuring air temperature and sample temperature</TextListItem>
-          <TextListItem color="primary">Way of measuring elevation </TextListItem>
-          <TextListItem color="primary">Way of locating sampling point (latitude and longitude) </TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Way of collecting pH (e.g., pH strips)</TextListItem>
-        </div>
-      </IonAccordion>
-      <IonAccordion value="soildPackage2">
-        <IonItem slot="header" >
-          <IonLabel>Basic recommendations for fieldwork</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">Bring sunscreen, hat, sunglasses, bug spray </TextListItem>
-          <TextListItem color="primary">Tell at least one person where you are going, when you are going, other information about your sampling trip</TextListItem>
-          <TextListItem color="primary">Know local animals and dangers they may pose</TextListItem>
-          <TextListItem color="primary">Check weather conditions and know risks for local weather events (e.g., flash floods)</TextListItem>
-          <TextListItem color="primary">Know risks for injuries in the sampling environment</TextListItem>
-          <TextListItem color="primary">Bring plenty of food and water</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-        </div>
-      </IonAccordion>
-      <IonAccordion value="soildPackage3">
-        <IonItem slot="header" >
-          <IonLabel>All required fields of the NMDC soil metadata package relevant to the sample and the field collection</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-        </div>
-      </IonAccordion>
-      <IonAccordion value="soildPackage4">
-        <IonItem slot="header" >
-          <IonLabel>All recommended fields of the NMDC soil metadata package relevant to the sample and the field collection</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-        </div>
-      </IonAccordion>
-      <IonAccordion value="soildPackage5">
-        <IonItem slot="header" >
-          <IonLabel>Other fields in the NMDC Submission Portal that may be relevant to the sample or to later processing steps</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Slope aspect?</TextListItem>
-          <TextListItem color="primary">Sample name</TextListItem>
-          <TextListItem color="primary">Ecosystem</TextListItem>
-        </div>
-      </IonAccordion>
-      
+
+      {/* Render each section in its own accordion. */}
+      {sections.map(s => (
+        <IonAccordion key={s.title}>
+          <IonItem slot={"header"}>
+            <IonLabel>{s.title}</IonLabel>
+          </IonItem>
+          <div className={"ion-padding"} slot={"content"}>
+            <Markdown
+              // Map Markdown elements to React elements.
+              components={{
+                ul: (props) => (
+                    <IonList>{props!.children}</IonList>
+                ),
+                li: (props) => (
+                  <IonItem lines={"none"}>
+                    <IonIcon slot={"start"} icon={checkmarkCircle} color={"primary"} />
+                    {props!.children as string}
+                  </IonItem>
+                ),
+              }}
+            >
+              {s.md}
+            </Markdown>
+          </div>
+        </IonAccordion>
+      ))}
+
       <div className="tutorial-header">
         <span className="title">Metadata Collection</span>
         <IonIcon id="hover-trigger-metadata" icon={informationCircleOutline} size="small" color="primary"></IonIcon>
diff --git a/src/components/Tutorial/md-in-js/001.md.ts b/src/components/Tutorial/md-in-js/001.md.ts
new file mode 100644
index 0000000..5e040ef
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/001.md.ts
@@ -0,0 +1,18 @@
+export const title = `What to consider bringing out to the field to collect sample metadata`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Way of measuring sampling depth e.g., ruler, measurement device
+- Sample storage method (e.g., preservative, cooler, freezer)
+- Way of labeling samples (e.g., labeled tubes, sharpies, barcodes); can also bring barcode reader to log sample numbers from barcodes in the app
+- Sample collection device (link the things from sample collection device field)
+- Thermometer, or way of measuring air temperature and sample temperature
+- Way of measuring elevation (e.g.,
+- Way of locating sampling point (latitude and longitude)
+- Slope aspect?
+- Way of collecting pH (e.g., pH strips)
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;
diff --git a/src/components/Tutorial/md-in-js/002.md.ts b/src/components/Tutorial/md-in-js/002.md.ts
new file mode 100644
index 0000000..b58f0f1
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/002.md.ts
@@ -0,0 +1,19 @@
+export const title = `Basic recommendations for fieldwork`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Bring sunscreen, hat, sunglasses, bug spray
+- Tell at least one person where you are going, when you are going, other information about your sampling trip
+- Know local animals and dangers they may pose
+- Check weather conditions and know risks for local weather events (e.g., flash floods)
+- Know risks for injuries in the sampling environment
+- Bring plenty of food and water
+- Bring communication device(s), know limitations of them (e.g., no cell phone service)
+- Proper shoes and clothes for the environment and weather
+- Always better to sample with a group or another individual, try to never go alone
+- Pack layers of clothing
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;
diff --git a/src/components/Tutorial/md-in-js/003.md.ts b/src/components/Tutorial/md-in-js/003.md.ts
new file mode 100644
index 0000000..38e1a87
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/003.md.ts
@@ -0,0 +1,21 @@
+export const title = `All required fields of the NMDC soil metadata package relevant to the sample and the field collection`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Sample name
+- Broad-scale environmental context
+- Local environmental context
+- Environmental medium
+- Growth facility
+- Storage conditions
+- Collection date
+- Geographic location (country, and/or sea, region)
+- Geographic location (latitude and longitude)
+- Elevation, meters
+- Sample storage temperature
+- Depth, meters
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;
diff --git a/src/components/Tutorial/md-in-js/004.md.ts b/src/components/Tutorial/md-in-js/004.md.ts
new file mode 100644
index 0000000..08396a2
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/004.md.ts
@@ -0,0 +1,38 @@
+export const title = `All recommended fields of the NMDC soil metadata package relevant to the sample and the field collection`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Sample linkage
+- Ecosystem
+- Ecosystem category
+- Ecosystem type
+- Ecosystem subtype
+- Specific ecosystem
+- Composite design/sieving
+- Size-fraction lower threshold
+- Size-fraction upper threshold
+- Biotic regimen
+- Sample collection device
+- Air temperature regimen
+- Chemical administration
+- Climate environment
+- Gaseous environment
+- Humidity regimen
+- Light regimen
+- Watering regimen
+- pH
+- Collection time, GMT
+- Incubation collection date
+- Incubation collection time, GMT
+- Incubation start date
+- Incubation start time, GMT
+- Filter method
+- Experimental factor-other
+- Other treatments
+- Isotope exposure/addition
+- Microbial biomass carbon method
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;
diff --git a/src/components/Tutorial/md-in-js/005.md.ts b/src/components/Tutorial/md-in-js/005.md.ts
new file mode 100644
index 0000000..f090a5e
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/005.md.ts
@@ -0,0 +1,64 @@
+export const title = `Other fields in the NMDC Submission Portal that may be relevant to the sample or to later processing steps`;
+
+// language=Markdown
+const rawMarkdownContent = `
+- Source material identifier
+- Slope aspect
+- History/agrochemical additions
+- Aluminum saturation/extreme unusual properties
+- Aluminum saturation method/extreme unusual properties
+- Mean annual precipitation
+- Mean annual temperature
+- History/crop rotation
+- Current land use
+- Current vegetation
+- Current vegetation method
+- Drainage classification
+- Experimental factor
+- History/extreme events
+- Soil taxonomic/FAO classification
+- History/fire
+- History/flooding
+- Heavy metals/extreme unusual properties
+- Heavy metals method/extreme unusual properties
+- Soil horizon method
+- Link to classification method
+- Link to climate information
+- Soil taxonomic/local classification
+- Miscellaneous parameter
+- Soil taxonomic/local classification method
+- Oxygenation status of sample
+- History/previous land use method
+- History/previous land use
+- Profile position
+- Average seasonal precipitation
+- Mean seasonal temperature 
+- Slope gradient
+- Soil horizon
+- Soil texture measurement
+- Soil texture method
+- Soil type
+- Soil type method
+- Temperature
+- History/tillage
+- Water content
+- Water content method
+- pH method
+- Microbial biomass
+- Microbial biomass method
+- Carbon/nitrogen ratio
+- Organic matter
+- Organic nitrogen
+- Total carbon
+- Total nitrogen content
+- Total nitrogen content method
+- Total organic carbon
+- Total organic carbon method
+- Total phosphorus
+- Phosphate
+- Salinity
+`;
+
+export const markdownContent = rawMarkdownContent.trim();
+
+export default markdownContent;
diff --git a/src/components/Tutorial/md-in-js/index.ts b/src/components/Tutorial/md-in-js/index.ts
new file mode 100644
index 0000000..d3bd8c9
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/index.ts
@@ -0,0 +1,21 @@
+import * as s1 from "./001.md";
+import * as s2 from "./002.md";
+import * as s3 from "./003.md";
+import * as s4 from "./004.md";
+import * as s5 from "./005.md";
+
+type Section = {
+  title: string;
+  md: string; // Markdown content
+};
+
+// Put the sections into a specific order.
+export const sections: Array<Section> = [
+  { title: s1.title, md: s1.markdownContent },
+  { title: s2.title, md: s2.markdownContent },
+  { title: s3.title, md: s3.markdownContent },
+  { title: s4.title, md: s4.markdownContent },
+  { title: s5.title, md: s5.markdownContent },
+];
+
+export default sections;

From ee553f2f53fac96273950b4f94446c5c9d21d842 Mon Sep 17 00:00:00 2001
From: Yan Xu <yxu@pn1704854.lanl.gov>
Date: Wed, 20 Mar 2024 10:54:15 -0600
Subject: [PATCH 3/6] move hardcoding header/info out of Tutorial component

---
 src/components/TextListItem/TextListItem.tsx  | 26 ----------
 src/components/Tutorial/Tutorial.tsx          | 51 ++++---------------
 src/components/Tutorial/md-in-js/index.ts     | 21 --------
 .../{001.md.ts => soilPackage-001.md.ts}      |  0
 .../{002.md.ts => soilPackage-002.md.ts}      |  0
 .../{003.md.ts => soilPackage-003.md.ts}      |  0
 .../{004.md.ts => soilPackage-004.md.ts}      |  0
 .../{005.md.ts => soilPackage-005.md.ts}      |  0
 .../Tutorial/md-in-js/soilPackageTutorial.ts  | 34 +++++++++++++
 9 files changed, 45 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/TextListItem/TextListItem.tsx
 delete mode 100644 src/components/Tutorial/md-in-js/index.ts
 rename src/components/Tutorial/md-in-js/{001.md.ts => soilPackage-001.md.ts} (100%)
 rename src/components/Tutorial/md-in-js/{002.md.ts => soilPackage-002.md.ts} (100%)
 rename src/components/Tutorial/md-in-js/{003.md.ts => soilPackage-003.md.ts} (100%)
 rename src/components/Tutorial/md-in-js/{004.md.ts => soilPackage-004.md.ts} (100%)
 rename src/components/Tutorial/md-in-js/{005.md.ts => soilPackage-005.md.ts} (100%)
 create mode 100644 src/components/Tutorial/md-in-js/soilPackageTutorial.ts

diff --git a/src/components/TextListItem/TextListItem.tsx b/src/components/TextListItem/TextListItem.tsx
deleted file mode 100644
index b5b9d4f..0000000
--- a/src/components/TextListItem/TextListItem.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import { IonText, IonIcon } from '@ionic/react';
-import { checkmarkCircle } from 'ionicons/icons';
-
-interface TextListItemProps {
-  color: string,
-  children: string;
-}
-
-const TextListItem: React.FC<TextListItemProps> = ({ color, children }) => {
-  return (
-    <>
-      <p>
-        <IonText color={color}>
-          <IonIcon icon={checkmarkCircle}></IonIcon>
-          &nbsp;&nbsp;
-        </IonText>
-        <IonText color={color}>
-          {children}
-        </IonText> 
-      </p>
-    </>
-  );
-};
-
-export default TextListItem;
\ No newline at end of file
diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
index 4e9f536..5e9fa03 100644
--- a/src/components/Tutorial/Tutorial.tsx
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -10,8 +10,7 @@ import {
   IonPopover,
 } from "@ionic/react";
 import { informationCircleOutline, checkmarkCircle } from 'ionicons/icons';
-import TextListItem from "../../components/TextListItem/TextListItem";
-import { sections } from "./md-in-js";
+import { soilPackageTutorial } from "./md-in-js/soilPackageTutorial";
 import Markdown from "react-markdown";
 
 import "./Tutorial.css";
@@ -20,23 +19,24 @@ const Tutorial: React.FC = () => {
   return (
     <IonAccordionGroup>
       <div className="tutorial-header">
-        <span className="title">Soil Package</span>
+        <span className="title">{soilPackageTutorial.header}</span>
         <IonIcon id="hover-trigger-soil" icon={informationCircleOutline} size="small" color="primary"></IonIcon>
         <IonPopover trigger="hover-trigger-soil" triggerAction="hover">
           <IonContent class="ion-padding">
-            Are you planning a trip to the field to collect soil samples and metadata? 
-            Below we have listed the NMDC soil package required metadata fields to ensure 
-            you pack the right tools and make required measurements in the field!
-            <br></br>
-            <br></br>
-            Note: The NMDC metadata requirements also encompass fields required by NCBI and 
-            the Genomic Standards Consortium (GSC)
+            {soilPackageTutorial.info.split("\n").map(function(item, index) {
+              return (
+                <span key={index}>
+                  {item}
+                  <br/>
+                </span>
+              )
+            })}
           </IonContent>
         </IonPopover>
       </div>
 
       {/* Render each section in its own accordion. */}
-      {sections.map(s => (
+      {soilPackageTutorial.sections.map(s => (
         <IonAccordion key={s.title}>
           <IonItem slot={"header"}>
             <IonLabel>{s.title}</IonLabel>
@@ -61,35 +61,6 @@ const Tutorial: React.FC = () => {
           </div>
         </IonAccordion>
       ))}
-
-      <div className="tutorial-header">
-        <span className="title">Metadata Collection</span>
-        <IonIcon id="hover-trigger-metadata" icon={informationCircleOutline} size="small" color="primary"></IonIcon>
-        <IonPopover trigger="hover-trigger-metadata" triggerAction="hover">
-          <IonContent class="ion-padding">
-            Metadata collection in the field
-          </IonContent>
-        </IonPopover>
-      </div>
-
-      <IonAccordion value="metadata1">
-        <IonItem slot="header" >
-          <IonLabel>metadata collection 1</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">item</TextListItem>
-          <TextListItem color="primary">item</TextListItem>
-        </div>
-      </IonAccordion>
-      <IonAccordion value="metadata2">
-        <IonItem slot="header" >
-          <IonLabel>metadata collection 2</IonLabel>
-        </IonItem>
-        <div className="ion-padding" slot="content">
-          <TextListItem color="primary">item</TextListItem>
-          <TextListItem color="primary">item</TextListItem>
-        </div>
-      </IonAccordion>
     </IonAccordionGroup>
   );
 };
diff --git a/src/components/Tutorial/md-in-js/index.ts b/src/components/Tutorial/md-in-js/index.ts
deleted file mode 100644
index d3bd8c9..0000000
--- a/src/components/Tutorial/md-in-js/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as s1 from "./001.md";
-import * as s2 from "./002.md";
-import * as s3 from "./003.md";
-import * as s4 from "./004.md";
-import * as s5 from "./005.md";
-
-type Section = {
-  title: string;
-  md: string; // Markdown content
-};
-
-// Put the sections into a specific order.
-export const sections: Array<Section> = [
-  { title: s1.title, md: s1.markdownContent },
-  { title: s2.title, md: s2.markdownContent },
-  { title: s3.title, md: s3.markdownContent },
-  { title: s4.title, md: s4.markdownContent },
-  { title: s5.title, md: s5.markdownContent },
-];
-
-export default sections;
diff --git a/src/components/Tutorial/md-in-js/001.md.ts b/src/components/Tutorial/md-in-js/soilPackage-001.md.ts
similarity index 100%
rename from src/components/Tutorial/md-in-js/001.md.ts
rename to src/components/Tutorial/md-in-js/soilPackage-001.md.ts
diff --git a/src/components/Tutorial/md-in-js/002.md.ts b/src/components/Tutorial/md-in-js/soilPackage-002.md.ts
similarity index 100%
rename from src/components/Tutorial/md-in-js/002.md.ts
rename to src/components/Tutorial/md-in-js/soilPackage-002.md.ts
diff --git a/src/components/Tutorial/md-in-js/003.md.ts b/src/components/Tutorial/md-in-js/soilPackage-003.md.ts
similarity index 100%
rename from src/components/Tutorial/md-in-js/003.md.ts
rename to src/components/Tutorial/md-in-js/soilPackage-003.md.ts
diff --git a/src/components/Tutorial/md-in-js/004.md.ts b/src/components/Tutorial/md-in-js/soilPackage-004.md.ts
similarity index 100%
rename from src/components/Tutorial/md-in-js/004.md.ts
rename to src/components/Tutorial/md-in-js/soilPackage-004.md.ts
diff --git a/src/components/Tutorial/md-in-js/005.md.ts b/src/components/Tutorial/md-in-js/soilPackage-005.md.ts
similarity index 100%
rename from src/components/Tutorial/md-in-js/005.md.ts
rename to src/components/Tutorial/md-in-js/soilPackage-005.md.ts
diff --git a/src/components/Tutorial/md-in-js/soilPackageTutorial.ts b/src/components/Tutorial/md-in-js/soilPackageTutorial.ts
new file mode 100644
index 0000000..d38b833
--- /dev/null
+++ b/src/components/Tutorial/md-in-js/soilPackageTutorial.ts
@@ -0,0 +1,34 @@
+import * as s1 from "./soilPackage-001.md";
+import * as s2 from "./soilPackage-002.md";
+import * as s3 from "./soilPackage-003.md";
+import * as s4 from "./soilPackage-004.md";
+import * as s5 from "./soilPackage-005.md";
+
+type Section = {
+  title: string;
+  md: string; // Markdown content
+};
+
+// Put the sections into a specific order.
+const sections: Array<Section> = [
+  { title: s1.title, md: s1.markdownContent },
+  { title: s2.title, md: s2.markdownContent },
+  { title: s3.title, md: s3.markdownContent },
+  { title: s4.title, md: s4.markdownContent },
+  { title: s5.title, md: s5.markdownContent },
+];
+
+const header = "Soil Package";
+const info = "Are you planning a trip to the field to collect soil samples and metadata? " +
+            "Below we have listed the NMDC soil package required metadata fields to ensure " +
+            "you pack the right tools and make required measurements in the field!\n\n" +
+            "Note: The NMDC metadata requirements also encompass fields required by NCBI and " +
+            "the Genomic Standards Consortium (GSC)";
+
+export const soilPackageTutorial = {
+  header: header,
+  info: info,
+  sections: sections,
+};
+
+export default soilPackageTutorial;
\ No newline at end of file

From c3be849206195f562f5b35b7f559d8b3159bc5e6 Mon Sep 17 00:00:00 2001
From: Yan Xu <yxu@pn1704854.lanl.gov>
Date: Wed, 20 Mar 2024 11:09:15 -0600
Subject: [PATCH 4/6] change check-icon size to small

---
 src/components/Tutorial/Tutorial.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
index 5e9fa03..5375ab6 100644
--- a/src/components/Tutorial/Tutorial.tsx
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -50,7 +50,7 @@ const Tutorial: React.FC = () => {
                 ),
                 li: (props) => (
                   <IonItem lines={"none"}>
-                    <IonIcon slot={"start"} icon={checkmarkCircle} color={"primary"} />
+                    <IonIcon size={"small"} slot={"start"} icon={checkmarkCircle} color={"primary"} />
                     {props!.children as string}
                   </IonItem>
                 ),

From 3fb3c325b0603db8ad56f2092b5a285b1184b249 Mon Sep 17 00:00:00 2001
From: Yan Xu <yxu@pn1704854.lanl.gov>
Date: Wed, 20 Mar 2024 13:10:56 -0600
Subject: [PATCH 5/6] fix code format

---
 src/components/Tutorial/Tutorial.css          |  4 +--
 src/components/Tutorial/Tutorial.tsx          | 36 +++++++++++--------
 .../Tutorial/md-in-js/soilPackageTutorial.ts  | 13 +++----
 src/pages/TutorialPage/TutorialPage.tsx       |  2 +-
 src/pages/TutorialPage/tutorial.md            | 13 +++----
 5 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/components/Tutorial/Tutorial.css b/src/components/Tutorial/Tutorial.css
index b09c077..d5e3e82 100644
--- a/src/components/Tutorial/Tutorial.css
+++ b/src/components/Tutorial/Tutorial.css
@@ -3,7 +3,7 @@
 }
 
 .tutorial-header .title {
-  font-size: 1.0rem;
+  font-size: 1rem;
   font-weight: bold;
   color: var(--ion-color-primary);
-}
\ No newline at end of file
+}
diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
index 5375ab6..c805e71 100644
--- a/src/components/Tutorial/Tutorial.tsx
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import {
   IonIcon,
   IonContent,
-  IonAccordion, 
-  IonAccordionGroup, 
-  IonItem, 
+  IonAccordion,
+  IonAccordionGroup,
+  IonItem,
   IonLabel,
   IonList,
   IonPopover,
 } from "@ionic/react";
-import { informationCircleOutline, checkmarkCircle } from 'ionicons/icons';
+import { informationCircleOutline, checkmarkCircle } from "ionicons/icons";
 import { soilPackageTutorial } from "./md-in-js/soilPackageTutorial";
 import Markdown from "react-markdown";
 
@@ -20,23 +20,28 @@ const Tutorial: React.FC = () => {
     <IonAccordionGroup>
       <div className="tutorial-header">
         <span className="title">{soilPackageTutorial.header}</span>
-        <IonIcon id="hover-trigger-soil" icon={informationCircleOutline} size="small" color="primary"></IonIcon>
+        <IonIcon
+          id="hover-trigger-soil"
+          icon={informationCircleOutline}
+          size="small"
+          color="primary"
+        ></IonIcon>
         <IonPopover trigger="hover-trigger-soil" triggerAction="hover">
           <IonContent class="ion-padding">
-            {soilPackageTutorial.info.split("\n").map(function(item, index) {
+            {soilPackageTutorial.info.split("\n").map(function (item, index) {
               return (
                 <span key={index}>
                   {item}
-                  <br/>
+                  <br />
                 </span>
-              )
+              );
             })}
           </IonContent>
         </IonPopover>
       </div>
 
       {/* Render each section in its own accordion. */}
-      {soilPackageTutorial.sections.map(s => (
+      {soilPackageTutorial.sections.map((s) => (
         <IonAccordion key={s.title}>
           <IonItem slot={"header"}>
             <IonLabel>{s.title}</IonLabel>
@@ -45,12 +50,15 @@ const Tutorial: React.FC = () => {
             <Markdown
               // Map Markdown elements to React elements.
               components={{
-                ul: (props) => (
-                    <IonList>{props!.children}</IonList>
-                ),
+                ul: (props) => <IonList>{props!.children}</IonList>,
                 li: (props) => (
                   <IonItem lines={"none"}>
-                    <IonIcon size={"small"} slot={"start"} icon={checkmarkCircle} color={"primary"} />
+                    <IonIcon
+                      size={"small"}
+                      slot={"start"}
+                      icon={checkmarkCircle}
+                      color={"primary"}
+                    />
                     {props!.children as string}
                   </IonItem>
                 ),
@@ -65,4 +73,4 @@ const Tutorial: React.FC = () => {
   );
 };
 
-export default Tutorial;
\ No newline at end of file
+export default Tutorial;
diff --git a/src/components/Tutorial/md-in-js/soilPackageTutorial.ts b/src/components/Tutorial/md-in-js/soilPackageTutorial.ts
index d38b833..6c286ca 100644
--- a/src/components/Tutorial/md-in-js/soilPackageTutorial.ts
+++ b/src/components/Tutorial/md-in-js/soilPackageTutorial.ts
@@ -19,11 +19,12 @@ const sections: Array<Section> = [
 ];
 
 const header = "Soil Package";
-const info = "Are you planning a trip to the field to collect soil samples and metadata? " +
-            "Below we have listed the NMDC soil package required metadata fields to ensure " +
-            "you pack the right tools and make required measurements in the field!\n\n" +
-            "Note: The NMDC metadata requirements also encompass fields required by NCBI and " +
-            "the Genomic Standards Consortium (GSC)";
+const info =
+  "Are you planning a trip to the field to collect soil samples and metadata? " +
+  "Below we have listed the NMDC soil package required metadata fields to ensure " +
+  "you pack the right tools and make required measurements in the field!\n\n" +
+  "Note: The NMDC metadata requirements also encompass fields required by NCBI and " +
+  "the Genomic Standards Consortium (GSC)";
 
 export const soilPackageTutorial = {
   header: header,
@@ -31,4 +32,4 @@ export const soilPackageTutorial = {
   sections: sections,
 };
 
-export default soilPackageTutorial;
\ No newline at end of file
+export default soilPackageTutorial;
diff --git a/src/pages/TutorialPage/TutorialPage.tsx b/src/pages/TutorialPage/TutorialPage.tsx
index 4131834..d0ebd09 100644
--- a/src/pages/TutorialPage/TutorialPage.tsx
+++ b/src/pages/TutorialPage/TutorialPage.tsx
@@ -30,4 +30,4 @@ const TutorialPage: React.FC = () => {
   );
 };
 
-export default TutorialPage;
\ No newline at end of file
+export default TutorialPage;
diff --git a/src/pages/TutorialPage/tutorial.md b/src/pages/TutorialPage/tutorial.md
index 3f06847..807446b 100644
--- a/src/pages/TutorialPage/tutorial.md
+++ b/src/pages/TutorialPage/tutorial.md
@@ -6,8 +6,8 @@ Are you planning a trip to the field to collect soil samples and metadata? Below
 
 Note: The NMDC metadata requirements also encompass fields required by NCBI and the Genomic Standards Consortium (GSC)
 
-
 ### What to consider bringing out to the field to collect sample metadata
+
 - Way of measuring sampling depth e.g., ruler, measurement device
 - Sample storage method (e.g., preservative, cooler, freezer)
 - Way of labeling samples (e.g., labeled tubes, sharpies, barcodes); can also bring barcode reader to log sample numbers from barcodes in the app
@@ -18,8 +18,8 @@ Note: The NMDC metadata requirements also encompass fields required by NCBI and
 - Slope aspect?
 - Way of collecting pH (e.g., pH strips)
 
-
 ### Basic recommendations for fieldwork
+
 - Bring sunscreen, hat, sunglasses, bug spray
 - Tell at least one person where you are going, when you are going, other information about your sampling trip
 - Know local animals and dangers they may pose
@@ -31,7 +31,6 @@ Note: The NMDC metadata requirements also encompass fields required by NCBI and
 - Always better to sample with a group or another individual, try to never go alone
 - Pack layers of clothing
 
-
 ### All required fields of the NMDC soil metadata package relevant to the sample and the field collection
 
 - Sample name
@@ -47,7 +46,6 @@ Note: The NMDC metadata requirements also encompass fields required by NCBI and
 - Sample storage temperature
 - Depth, meters
 
-
 ### All recommended fields of the NMDC soil metadata package relevant to the sample and the field collection
 
 - Sample linkage
@@ -80,7 +78,6 @@ Note: The NMDC metadata requirements also encompass fields required by NCBI and
 - Isotope exposure/addition
 - Microbial biomass carbon method
 
-
 ### Other fields in the NMDC Submission Portal that may be relevant to the sample or to later processing steps
 
 - Source material identifier
@@ -113,7 +110,7 @@ Note: The NMDC metadata requirements also encompass fields required by NCBI and
 - History/previous land use
 - Profile position
 - Average seasonal precipitation
-- Mean seasonal temperature 
+- Mean seasonal temperature
 - Slope gradient
 - Soil horizon
 - Soil texture measurement
@@ -139,12 +136,10 @@ Note: The NMDC metadata requirements also encompass fields required by NCBI and
 - Phosphate
 - Salinity
 
-
 ## Metadata Collection
 
 Metadata collection in the field
 
-
 ### metadata collection 1
 
 - item
@@ -153,4 +148,4 @@ Metadata collection in the field
 ### metadata collection 2
 
 - item
-- item
\ No newline at end of file
+- item

From 1ad6777245f99fa89f4c22973ae889d384f6e39e Mon Sep 17 00:00:00 2001
From: Yan Xu <yxu@pn1704854.lanl.gov>
Date: Wed, 20 Mar 2024 14:54:58 -0600
Subject: [PATCH 6/6] use CSS module

---
 .../Tutorial/{Tutorial.css => Tutorial.module.css}       | 9 ++++++---
 src/components/Tutorial/Tutorial.tsx                     | 8 ++++----
 2 files changed, 10 insertions(+), 7 deletions(-)
 rename src/components/Tutorial/{Tutorial.css => Tutorial.module.css} (54%)

diff --git a/src/components/Tutorial/Tutorial.css b/src/components/Tutorial/Tutorial.module.css
similarity index 54%
rename from src/components/Tutorial/Tutorial.css
rename to src/components/Tutorial/Tutorial.module.css
index d5e3e82..94b5a50 100644
--- a/src/components/Tutorial/Tutorial.css
+++ b/src/components/Tutorial/Tutorial.module.css
@@ -1,9 +1,12 @@
-.tutorial-header {
+.header {
   padding: 10px 10px 10px 10px;
 }
 
-.tutorial-header .title {
-  font-size: 1rem;
+.header .title {
   font-weight: bold;
   color: var(--ion-color-primary);
 }
+
+.listItem {
+  color: var(--ion-color-primary);
+}
diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
index c805e71..60b210f 100644
--- a/src/components/Tutorial/Tutorial.tsx
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -13,13 +13,13 @@ import { informationCircleOutline, checkmarkCircle } from "ionicons/icons";
 import { soilPackageTutorial } from "./md-in-js/soilPackageTutorial";
 import Markdown from "react-markdown";
 
-import "./Tutorial.css";
+import styles from "./Tutorial.module.css";
 
 const Tutorial: React.FC = () => {
   return (
     <IonAccordionGroup>
-      <div className="tutorial-header">
-        <span className="title">{soilPackageTutorial.header}</span>
+      <div className={styles.header}>
+        <span className={styles.title}>{soilPackageTutorial.header}</span>
         <IonIcon
           id="hover-trigger-soil"
           icon={informationCircleOutline}
@@ -52,7 +52,7 @@ const Tutorial: React.FC = () => {
               components={{
                 ul: (props) => <IonList>{props!.children}</IonList>,
                 li: (props) => (
-                  <IonItem lines={"none"}>
+                  <IonItem className={styles.listItem} lines={"none"}>
                     <IonIcon
                       size={"small"}
                       slot={"start"}