Changes

Author: VenoM9078

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "forgeforms",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.5.0",
   "type": "module",
   "main": "dist/forgeforms.js",
   "module": "dist/forgeforms.js",

package.json

@@ -5,7 +5,10 @@ function App() {
   return (
     <div>
       <h1>My App</h1>
-      <ForgeForms apiKey="9f7fadce-7132-4faa-b960-3de1287b09d8" />
+      <ForgeForms
+        showTitle={`false`}
+        apiKey="e2990749-624b-4f9e-a9cf-60cecf6132ca"
+      />
     </div>
   );
 }

src/App.jsx

@@ -9,7 +9,7 @@ import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 
-const ForgeForms = ({ apiKey }) => {
+const ForgeForms = ({ apiKey, showTitle }) => {
   const [formFields, setFormFields] = useState([]);
   const [originalResponse, setOriginalResponse] = useState([]);
   const [formTitle, setFormTitle] = useState("");
@@ -138,11 +138,11 @@ const ForgeForms = ({ apiKey }) => {
   return (
     <div className="custom-class">
       {error && (
-        <div className="rounded-md bg-red-50 p-4">
-          <div className="flex">
-            <div className="flex-shrink-0">
+        <div className="rpk-rounded-md rpk-bg-red-50 rpk-p-4">
+          <div className="rpk-flex">
+            <div className="rpk-flex-shrink-0">
               <svg
-                className="h-5 w-5 textRed-400"
+                className="rpk-h-5 rpk-w-5 rpk-text-red-400"
                 viewBox="0 0 20 20"
                 fill="red"
                 aria-hidden="true"
@@ -154,12 +154,15 @@ const ForgeForms = ({ apiKey }) => {
                 />
               </svg>
             </div>
-            <div className="ml-3">
-              <h3 className="text-sm font-medium text-red-800">
+            <div className="rpk-ml-3">
+              <h3 className="rpk-text-sm rpk-font-medium rpk-text-red-800">
                 There were errors with your submission
               </h3>
-              <div className="mt-2 text-sm text-red-700">
-                <ul role="list" className="list-disc space-y-1 pl-5">
+              <div className="rpk-mt-2 rpk-text-sm rpk-text-red-700">
+                <ul
+                  role="list"
+                  className="rpk-list-disc rpk-space-y-1 rpk-pl-5"
+                >
                   {errorMsg.map((error, index) => (
                     <li key={index}>{error}</li>
                   ))}
@@ -170,9 +173,6 @@ const ForgeForms = ({ apiKey }) => {
         </div>
       )}
 
-      <h2 className="form-title">
-        {dataLoaded ? formTitle : <Skeleton width={200} />}
-      </h2>
       <form onSubmit={handleSubmit}>
         {formFields
           .filter((field) => field.id !== "terms&conditions")

src/ForgeForms.jsx

@@ -229,55 +229,56 @@ input[type="checkbox"]:checked {
 body {
   font-family: "Inter", sans-serif;
 }
-.rounded-md {
+
+.rpk-rounded-md {
   border-radius: 0.375rem;
 }
-.bg-red-50 {
+.rpk-bg-red-50 {
   background-color: #fef2f2;
 }
-.p-4 {
+.rpk-p-4 {
   padding: 1rem;
 }
-.flex {
+.rpk-flex {
   display: flex;
   align-items: center; /* Added to center items */
 }
-.flex-shrink-0 {
+.rpk-flex-shrink-0 {
   flex-shrink: 0;
 }
-.h-5 {
+.rpk-h-5 {
   height: 1.25rem;
 }
-.w-5 {
+.rpk-w-5 {
   width: 1.25rem;
 }
-.text-red-400 {
+.rpk-text-red-400 {
   fill: red; /* Changed color to red */
 }
-.ml-3 {
+.rpk-ml-3 {
   margin-left: 0.75rem;
 }
-.text-sm {
+.rpk-text-sm {
   font-size: 0.875rem;
 }
-.font-medium {
+.rpk-font-medium {
   font-weight: 500;
 }
-.text-red-800 {
+.rpk-text-red-800 {
   color: #b91c1c;
 }
-.mt-2 {
+.rpk-mt-2 {
   margin-top: 0.5rem;
 }
-.text-red-700 {
+.rpk-text-red-700 {
   color: #ef4444;
 }
-.list-disc {
+.rpk-list-disc {
   list-style-type: disc;
 }
-.space-y-1 {
+.rpk-space-y-1 {
   margin-top: 0.25rem;
 }
-.pl-5 {
+.rpk-pl-5 {
   padding-left: 1.25rem;
 }