@sikka/hawa 0.0.70 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Payment/Form/CForm.js

@@ -139,7 +139,7 @@ export default function CForm({
   const handlePayfortForm = (e) => {};
 
   // NOTE: Currently the cursor on the card number field gets reset if we remove a number, the code bellow was used
-  // in class components, need to transform this to work with functional components.
+  // in className components, need to transform this to work with functional components.
   // getSnapshotBeforeUpdate() {
   //     return this.props.cardNumberRef.current.selectionStart;
   // }

package/src/blocks/Pricing/ComparingPlans.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 const CheckMark = () => (
   <svg
-    class="w-5 h-5 text-green-500"
+    className="w-5 h-5 text-green-500"
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
@@ -20,7 +20,7 @@ const CheckMark = () => (
 
 const UncheckMark = () => (
   <svg
-    class="w-5 h-5 text-red-500"
+    className="w-5 h-5 text-red-500"
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
@@ -52,20 +52,20 @@ export const ComparingPlans = (props) => {
   let inactiveTabStyle =
     "inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
   return (
-    <div id="detailed-pricing" class="overflow-x-auto w-full">
-      <div class="overflow-hidden min-w-max">
-        <div class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
-          <div class="flex items-center"></div>
+    <div id="detailed-pricing" className="overflow-x-auto w-full">
+      <div className="overflow-hidden min-w-max">
+        <div className="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
+          <div className="flex items-center"></div>
           {props.plans.map((plan) => (
             <div>{plan.title}</div>
           ))}
         </div>
         {props.plans.map((plan) => {
           return (
-            <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
-              <div class="text-gray-500 dark:text-gray-400">
+            <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+              <div className="text-gray-500 dark:text-gray-400">
                 Basic components (
-                <a href="#" class="text-blue-600 hover:underline">
+                <a href="#" className="text-blue-600 hover:underline">
                   view all
                 </a>
                 )
@@ -76,10 +76,10 @@ export const ComparingPlans = (props) => {
             </div>
           );
         })}
-        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
-          <div class="text-gray-500 dark:text-gray-400">
+        <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div className="text-gray-500 dark:text-gray-400">
             Application UI (
-            <a href="#" class="text-blue-600 hover:underline">
+            <a href="#" className="text-blue-600 hover:underline">
               view demo
             </a>
             )
@@ -88,20 +88,20 @@ export const ComparingPlans = (props) => {
           <CheckMark />
           <UncheckMark />
         </div>
-        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
-          <div class="text-gray-500 dark:text-gray-400">
+        <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div className="text-gray-500 dark:text-gray-400">
             Marketing UI pre-order
           </div>
           <UncheckMark />
           <CheckMark />
           <UncheckMark />
         </div>
-        <div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
-          <div class="text-gray-500 dark:text-gray-400"></div>
+        <div className="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
+          <div className="text-gray-500 dark:text-gray-400"></div>
           <div>
             <a
               href="#"
-              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+              className="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -109,7 +109,7 @@ export const ComparingPlans = (props) => {
           <div>
             <a
               href="#"
-              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+              className="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -117,7 +117,7 @@ export const ComparingPlans = (props) => {
           <div>
             <a
               href="#"
-              class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
+              className="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900"
             >
               Buy now
             </a>

package/src/elements/DragDropImages.js

@@ -98,12 +98,12 @@ export const DragDropImages = ({
             onDeleteFile(file);
           }}
           type="button"
-          class="text-gray-400 absolute left-0 bg-gray-900 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          className="text-gray-400 absolute left-0 bg-gray-900 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
           data-modal-toggle="defaultModal"
         >
           <svg
             aria-hidden="true"
-            class="w-5 h-5"
+            className="w-5 h-5"
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +114,7 @@ export const DragDropImages = ({
               clip-rule="evenodd"
             ></path>
           </svg>
-          <span class="sr-only">Close modal</span>
+          <span className="sr-only">Close modal</span>
         </button>
 
         <div

package/src/elements/DraggableCard.js

@@ -4,11 +4,11 @@ export const DraggableCard = (props) => {
   return (
     <div className="flex flex-row bg-blue-300 rounded-xl p-4">
       <button
-        class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        className="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         type="button"
       >
         <svg
-          class="w-6 h-6"
+          className="w-6 h-6"
           aria-hidden="true"
           fill="currentColor"
           viewBox="0 0 20 20"

package/src/elements/HawaAccordian.js

@@ -59,7 +59,7 @@ const AccordionItem = (props) => {
             Check out this guide to learn how to{" "}
             <a
               href="/docs/getting-started/introduction/"
-              class="text-blue-600 dark:text-blue-500 hover:underline"
+              className="text-blue-600 dark:text-blue-500 hover:underline"
             >
               get started
             </a>{" "}

package/src/elements/HawaAlert.js

@@ -12,14 +12,14 @@ export const HawaAlert = (props) => {
 
   return (
     <div
-      class={
+      className={
         "flex flex-col p-4 mb-4 text-sm rounded-lg" +
         " " +
         severities[props.severity]
       }
       role="alert"
     >
-      <span class="font-medium">{props.title}</span>
+      <span className="font-medium">{props.title}</span>
       <span>{" " + props.text}</span>
     </div>
   );

package/src/elements/HawaChip.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export const HawaChip = (props) => {
   return (
-    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
+    <span className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
       {props.label}
     </span>
   );

package/src/elements/HawaDrawerItem.js

@@ -11,7 +11,7 @@ const HawaDrawerItem = (props) => {
       <div className={props.icon ? withIcon : withoutIcon}>
         {/* <svg
           aria-hidden="true"
-          class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+          className="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
           fill="currentColor"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"
@@ -19,7 +19,7 @@ const HawaDrawerItem = (props) => {
           <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
           <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
         </svg> */}
-        <span class="ml-3">{props.text}</span>
+        <span className="ml-3">{props.text}</span>
       </div>
     </li>
   );

package/src/elements/HawaItemCard.js

@@ -3,18 +3,18 @@ import PropTypes from "prop-types";
 
 export const HawaItemCard = (props) => {
   return (
-    <div class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 ">
+    <div className="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 ">
       {props.headerActions && (
-        <div class="flex justify-end pr-6">
+        <div className="flex justify-end pr-6">
           <button
             id="dropdownButton"
             data-dropdown-toggle="dropdown"
-            class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
+            className="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
             type="button"
           >
-            <span class="sr-only">Open dropdown</span>
+            <span className="sr-only">Open dropdown</span>
             <svg
-              class="w-6 h-6"
+              className="w-6 h-6"
               aria-hidden="true"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -25,15 +25,15 @@ export const HawaItemCard = (props) => {
           </button>
           <div
             id="dropdown"
-            class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+            className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
           >
-            <ul class="py-1" aria-labelledby="dropdownButton">
+            <ul className="py-1" aria-labelledby="dropdownButton">
               {props.headerActions.map((action) => {
                 return (
                   <li>
                     <a
                       href="#"
-                      class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                      className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                     >
                       {action.label}
                     </a>
@@ -44,11 +44,11 @@ export const HawaItemCard = (props) => {
           </div>
         </div>
       )}
-      <div class="px-6">
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+      <div className="px-6">
+        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           {props.header}{" "}
         </h5>
-        <p class="font-normal text-gray-700 dark:text-gray-400">
+        <p className="font-normal text-gray-700 dark:text-gray-400">
           {props.content}
         </p>
       </div>

package/src/elements/HawaModal.js

@@ -7,22 +7,22 @@ export const HawaModal = (props) => {
       id={props.modalID}
       tabindex="-1"
       aria-hidden="true"
-      class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
+      className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
     >
-      <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
-        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-          <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+      <div className="relative p-4 w-full max-w-2xl h-full md:h-auto">
+        <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <div className="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
               Terms of Service
             </h3>
             <button
               type="button"
-              class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+              className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
               data-modal-toggle="defaultModal"
             >
               <svg
                 aria-hidden="true"
-                class="w-5 h-5"
+                className="w-5 h-5"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -33,16 +33,16 @@ export const HawaModal = (props) => {
                   clip-rule="evenodd"
                 ></path>
               </svg>
-              <span class="sr-only">Close modal</span>
+              <span className="sr-only">Close modal</span>
             </button>
           </div>
-          <div class="p-6 space-y-6">
-            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          <div className="p-6 space-y-6">
+            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
               With less than a month to go before the European Union enacts new
               consumer privacy laws for its citizens, companies around the world
               are updating their terms of service agreements to comply.
             </p>
-            <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
               The European Union’s General Data Protection Regulation (G.D.P.R.)
               goes into effect on May 25 and is meant to ensure a common set of
               data rights in the European Union. It requires organizations to
@@ -50,18 +50,18 @@ export const HawaModal = (props) => {
               could personally affect them.
             </p>
           </div>
-          <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+          <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
             <button
               data-modal-toggle="defaultModal"
               type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
             >
               I accept
             </button>
             <button
               data-modal-toggle="defaultModal"
               type="button"
-              class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+              className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
             >
               Decline
             </button>

package/src/elements/HawaPanelTabs.js

@@ -7,18 +7,18 @@ export const HawaPanelTabs = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
     <div>
-      <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+      <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
         <ul
-          class="flex flex-wrap -mb-px text-sm font-medium text-center"
+          className="flex flex-wrap -mb-px text-sm font-medium text-center"
           id="myTab"
           data-tabs-toggle="#myTabContent"
           role="tablist"
         >
           {props.options.map((option) => {
             return (
-              <li class="mr-2" role="presentation">
+              <li className="mr-2" role="presentation">
                 <button
-                  class="inline-block p-4 rounded-t-lg border-b-2 text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  className="inline-block p-4 rounded-t-lg border-b-2 text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
                   id={`${option.value}-tab`}
                   data-tabs-target={`#${option.value}`}
                   type="button"
@@ -37,7 +37,7 @@ export const HawaPanelTabs = (props) => {
         {props.options.map((option) => {
           return (
             <div
-              class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+              className="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
               id={option.value}
               role="tabpanel"
               aria-labelledby={`${option.value}-tab`}

package/src/elements/HawaPopMenu.js

@@ -6,12 +6,12 @@ export const HawaPopMenu = (props) => {
       {/* <button
         id="dropdownDefault"
         data-dropdown-toggle={props.popMenuID}
-        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         type="button"
       >
         Dropdown button{" "}
         <svg
-          class="ml-2 w-4 h-4"
+          className="ml-2 w-4 h-4"
           aria-hidden="true"
           fill="none"
           stroke="currentColor"
@@ -28,21 +28,21 @@ export const HawaPopMenu = (props) => {
       </button> */}
       <div
         id={props.popMenuID}
-        class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+        className="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
         data-popper-reference-hidden=""
         data-popper-escaped=""
         data-popper-placement="bottom"
         // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 484.5px, 0px);"
       >
         <ul
-          class="py-1 text-sm text-gray-700 dark:text-gray-200"
+          className="py-1 text-sm text-gray-700 dark:text-gray-200"
           aria-labelledby="dropdownDefault"
         >
           {props.menuItems.map((item) => (
             <li>
               <a
                 href="#"
-                class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
               >
                 {item.label}
               </a>

package/src/elements/HawaPricingCard.js

@@ -22,32 +22,32 @@ export const HawaPricingCard = (props) => {
   let featuresMapping = isArabic ? props.features_ar : props.features;
   let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
   return (
-    <div class="mx-1 p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
-      <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
+    <div className="mx-1 p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+      <h5 className="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
         {isArabic ? props.title_ar : props.title}
       </h5>
-      <div class="flex items-baseline text-gray-900 dark:text-white">
-        <span class="font-semibold text-sm">
+      <div className="flex items-baseline text-gray-900 dark:text-white">
+        <span className="font-semibold text-sm">
           {" "}
           {currencyMapping[props.currency?.toLowerCase()]}
         </span>
-        <span class="text-5xl font-extrabold tracking-tight">
+        <span className="text-5xl font-extrabold tracking-tight">
           {props.price}
         </span>
-        <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+        <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
           /{" "}
           {isArabic
             ? cycleTextsArabic[props.cycleText]
             : cycleTextsEnglish[props.cycleText]}
         </span>
       </div>
-      <ul role="list" class="my-7 space-y-5">
+      <ul role="list" className="my-7 space-y-5">
         {featuresMapping?.map((feature) => {
           return (
-            <li class="flex space-x-3">
+            <li className="flex space-x-3">
               <svg
                 aria-hidden="true"
-                class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
+                className="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -59,17 +59,17 @@ export const HawaPricingCard = (props) => {
                   clip-rule="evenodd"
                 ></path>
               </svg>
-              <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
+              <span className="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
                 {feature}
               </span>
             </li>
           );
         })}
 
-        {/* <li class="flex space-x-3 line-through decoration-gray-500">
+        {/* <li className="flex space-x-3 line-through decoration-gray-500">
             <svg
               aria-hidden="true"
-              class="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
+              className="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
@@ -81,14 +81,14 @@ export const HawaPricingCard = (props) => {
                 clip-rule="evenodd"
               ></path>
             </svg>
-            <span class="text-base font-normal leading-tight text-gray-500">
+            <span className="text-base font-normal leading-tight text-gray-500">
               Sketch Files
             </span>
           </li> */}
       </ul>
       <button
         type="button"
-        class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
+        className="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
       >
         {props.buttonText}
       </button>

package/src/elements/HawaRadio.js

@@ -4,21 +4,21 @@ import "flowbite";
 export const HawaRadio = (props) => {
   return (
     <div>
-      <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+      <ul className="items-center w-full text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
         {props.options.map((option) => {
           return (
-            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
-              <div class="flex items-center pl-3">
+            <li className="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
+              <div className="flex items-center pl-3">
                 <input
                   id="horizontal-list-radio-license"
                   type="radio"
                   value=""
                   name="list-radio"
-                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
+                  className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
                 />
                 <label
                   for="horizontal-list-radio-license"
-                  class="py-3 ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300"
+                  className="py-3 ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300"
                 >
                   {option.label}
                 </label>

package/src/elements/HawaRange.js

@@ -7,7 +7,7 @@ export const HawaRange = (props) => {
       {props.label && (
         <label
           for="default-range"
-          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
         >
           {props.label}
         </label>
@@ -18,7 +18,7 @@ export const HawaRange = (props) => {
           id="default-range"
           type="range"
           value="50"
-          class="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+          className="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
         />
         <div className="ml-2">{props.endElement}</div>{" "}
       </div>

package/src/elements/HawaSelect.js

@@ -27,7 +27,7 @@ export const HawaSelect = (props) => {
 
       <select
         id="countries"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       >
         {props.children}
       </select>

package/src/elements/HawaSnackbar.js

@@ -15,19 +15,19 @@ export const HawaSnackbar = (props) => {
   return (
     <div id="toast-default" role="alert" className={severities[props.severity]}>
       <div>
-        <div class="ml-3 text-sm font-bold">{props.title}</div>
-        <div class="ml-3 text-sm font-normal">{props.text}</div>
+        <div className="ml-3 text-sm font-bold">{props.title}</div>
+        <div className="ml-3 text-sm font-normal">{props.text}</div>
       </div>
       <button
         type="button"
-        class="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+        className="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
         data-dismiss-target="#toast-default"
         aria-label="Close"
       >
-        <span class="sr-only">Close</span>
+        <span className="sr-only">Close</span>
         <svg
           aria-hidden="true"
-          class="w-5 h-5"
+          className="w-5 h-5"
           fill="currentColor"
           viewBox="0 0 20 20"
           xmlns="http://www.w3.org/2000/svg"

package/src/elements/HawaSwitch.js

@@ -4,16 +4,16 @@ export const HawaSwitch = (props) => {
   return (
     <label
       for="default-toggle"
-      class="inline-flex relative items-center cursor-pointer"
+      className="inline-flex relative items-center cursor-pointer"
     >
       <input
         type="checkbox"
         value=""
         id="default-toggle"
-        class="sr-only peer"
+        className="sr-only peer"
       />
-      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-      <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+      <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
         {props.text}
       </span>
     </label>