@sikka/hawa 0.0.170 → 0.0.172

package/package.json

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

package/src/blocks/Misc/Newsletter.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
-import { FaCheck } from "react-icons/fa"
+
 type TNewsletter = {
   variant?: "outlined" | "contained" | "neobrutalism"
   texts: {

package/src/blocks/Misc/Testimonial.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+import { FaCheck } from "react-icons/fa"
+type TEmptyState = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+}
+
+export const Testimonial: React.FunctionComponent<TEmptyState> = ({
+  variant = "contained",
+}) => {
+  return (
+    <div
+      className="rounded flex flex-col gap-2 border-2 border-gray-200 bg-white p-4"
+      // style={{ width: "249.708px", marginRight: "24px" }}
+    >
+      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+        <rect width="48" height="48" rx="24" fill="#45BE8B"></rect>
+        <path
+          d="M14.1412 22.4427L17.5803 16.5199C17.7671 16.1981 18.1112 16 18.4834 16H20.8581C21.653 16 22.1565 16.8528 21.7725 17.5488L19.3042 22.0225C19.2202 22.1747 19.1762 22.3458 19.1762 22.5196C19.1762 23.0879 19.6369 23.5486 20.2052 23.5486H21.5827C22.1594 23.5486 22.627 24.0162 22.627 24.5929V31.347C22.627 31.9237 22.1594 32.3913 21.5827 32.3913H15.0443C14.4676 32.3913 14 31.9237 14 31.347V22.9671C14 22.7829 14.0487 22.602 14.1412 22.4427Z"
+          fill="#FFFFFF"
+        ></path>
+        <path
+          d="M25.356 22.4427L28.7951 16.5199C28.982 16.1981 29.326 16 29.6982 16H32.0729C32.8679 16 33.3713 16.8528 32.9873 17.5488L30.5191 22.0225C30.4351 22.1747 30.391 22.3458 30.391 22.5196C30.391 23.0879 30.8518 23.5486 31.4201 23.5486H32.7975C33.3743 23.5486 33.8418 24.0162 33.8418 24.5929V31.347C33.8418 31.9237 33.3743 32.3913 32.7975 32.3913H26.2592C25.6824 32.3913 25.2148 31.9237 25.2148 31.347V22.9671C25.2148 22.7829 25.2636 22.602 25.356 22.4427Z"
+          fill="#FFFFFF"
+        ></path>
+      </svg>
+      <div>
+        <p>
+          The team at Tines is simply amazing. The tech is easy to follow, easy
+          to work with, and infinitely flexible. The solution opportunities
+          created by Tines are endless.
+        </p>
+      </div>
+      <cite>
+        <div>
+          <div>
+            <strong style={{ color: "#45BE8B" }}>Brent Lassi</strong>
+          </div>
+          <div> Chief Information Security Officer</div>
+        </div>
+        <div>
+          <img
+            src="https://www.datocms-assets.com/55802/1636449069-bluecore-logo-dark.svg"
+            title="Logo of Brent Lassi"
+            alt="Logo of Brent Lassi"
+          />
+        </div>
+      </cite>
+    </div>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -1,3 +1,5 @@
 export * from "./NotFound"
 export * from "./EmptyState"
 export * from "./Newsletter"
+export * from "./Testimonial"
+

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -68,9 +68,9 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
     { label: `SAR`, value: `sar` },
   ]
   let activeTabStyle =
-    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active"
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded active"
   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"
+    "inline-block py-3 px-4 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
   return (
     <div id="detailed-pricing" className="w-full overflow-x-auto">
       <div className="min-w-max overflow-hidden">
@@ -121,7 +121,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           <div>
             <a
               href="#"
-              className="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
+              className="block w-full rounded bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -129,7 +129,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           <div>
             <a
               href="#"
-              className="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
+              className="block w-full rounded bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             >
               Buy now
             </a>
@@ -137,7 +137,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           <div>
             <a
               href="#"
-              className="block w-full rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
+              className="block w-full rounded bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
             >
               Buy now
             </a>

package/src/blocks/Pricing/PricingPlans.tsx

@@ -36,9 +36,9 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
     { label: `SAR`, value: `sar` },
   ]
   let activeTabStyle =
-    "inline-block py-3 px-4 text-white bg-blue-600 rounded-lg active"
+    "inline-block py-3 px-4 text-white bg-blue-600 rounded active"
   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"
+    "inline-block py-3 px-4 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">

package/src/blocks/Referral/ReferralAccount.tsx

@@ -16,9 +16,10 @@ export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
     <HawaContainer>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Code</div>
-        <div className="flex flex-row items-center justify-between rounded-lg bg-white">
+        <div className="flex flex-row items-center justify-between rounded bg-white">
           <span className="ml-3 font-bold">{referralCode}</span>
           <HawaButton
+            buttonID={"refCode"}
             tooltip="Copy"
             className="mr-1.5"
             onClick={() => navigator.clipboard.writeText(referralCode)}
@@ -31,10 +32,10 @@ export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
       </div>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Link</div>
-        <div className="flex flex-row items-center justify-between rounded-lg bg-white">
+        <div className="flex flex-row items-center justify-between rounded bg-white">
           <span className="ml-3 font-bold">{referralLink}</span>
           <HawaButton
-            tooltip="Copy"
+            buttonID={"refLink"}
             className="mr-1.5"
             onClick={() => navigator.clipboard.writeText(referralLink)}
           >

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -69,7 +69,7 @@ export const ReferralSettlement: React.FunctionComponent<
       )}
       <div className="mt-3">
         <div className="mb-1">Settlement Accounts</div>
-        <div className="rounded-lg">
+        <div className="rounded">
           <SettlementAccountCard
             bank="Al Inma Bank"
             iban="SA10228094028098329119"
@@ -93,7 +93,7 @@ export const ReferralSettlement: React.FunctionComponent<
 }
 
 const SettlementAccountCard = (props) => (
-  <div className="mb-3 flex flex-row items-center justify-between rounded-lg border-b bg-white p-2">
+  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-2">
     <div className="flex flex-col justify-between">
       <div className="text-xs">{props.bank}</div>
       <div>{props.accountHolder}</div>

package/src/blocks/Referral/ReferralStats.tsx

@@ -37,7 +37,7 @@ export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
       )}
       <div className="mt-3">
         <div className="mb-1">Sign ups</div>
-        <div className="rounded-lg">
+        <div className="rounded">
           {/* <HawaTable
             columns={["date", "email", "amount"]}
             rows={[
@@ -78,13 +78,13 @@ export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
 }
 
 const NumberCard = (props) => (
-  <div className="w-full rounded-lg bg-white p-2">
+  <div className="w-full rounded bg-white p-2">
     <div className="text-sm">{props.title}</div>
     <div className="font-bold">{props.number}</div>
   </div>
 )
 const ReferralSignUpCard = (props) => (
-  <div className="mb-3 rounded-lg border-b bg-white p-2">
+  <div className="mb-3 rounded border-b bg-white p-2">
     <div className="text-xs">{props.date}</div>
     <div className="flex flex-row justify-between">
       <div>{props.email}</div>

package/src/blocks/index.ts

@@ -3,3 +3,4 @@ export * from "./AuthForms"
 export * from "./Payment"
 export * from "./Pricing"
 export * from "./Referral"
+export * from "./Misc"

package/src/elements/DragDropImages.tsx

@@ -111,7 +111,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )
     })
     const thumbs = files?.map((file: any, index: any) => (
-      <div className="relative m-3 rounded-lg">
+      <div className="relative m-3 rounded">
         <button
           onClick={(e) => {
             e.stopPropagation()
@@ -120,7 +120,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             onDeleteFile(file)
           }}
           type="button"
-          className="absolute left-0 ml-auto inline-flex items-center rounded-lg rounded-tr-none rounded-bl-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+          className="absolute left-0 ml-auto inline-flex items-center rounded rounded-tr-none rounded-bl-none bg-gray-900 p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
           data-modal-toggle="defaultModal"
         >
           <svg
@@ -173,7 +173,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             style: { backgroundColor: isDragActive ? "white" : "inherit" },
           })}
           // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
-          className="mb-2 flex flex-col justify-center rounded-xl border border-dashed border-black"
+          className="mb-2 flex flex-col justify-center rounded border border-dashed border-black"
         >
           <input {...getInputProps()} />
           <div className="p-1 text-center">{texts.clickHereToUpload}</div>

package/src/elements/DraggableCard.tsx

@@ -7,9 +7,9 @@ export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
   props
 ) => {
   return (
-    <div className="bg-layoutPrimary-default flex flex-row rounded-xl p-4">
+    <div className="bg-layoutPrimary-default flex flex-row rounded p-4">
       <button
-        className="inline-flex items-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+        className="inline-flex items-center rounded bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         type="button"
       >
         <svg

package/src/elements/HawaAccordian.tsx

@@ -21,14 +21,14 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
     "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900"
 
   return (
-    <div className="rounded-lg ">
+    <div className="rounded">
       <h2 id={"accordion-collapse-heading-" + props.count}>
         <button
           type="button"
           className={clsx(
             // props.count === 0 ? roundedTop : noRounding,
             "flex w-full items-center justify-between border border-gray-200 bg-gray-100 p-5 text-left font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-800",
-            !collapse ? "rounded-t-lg" : "rounded-lg"
+            !collapse ? "rounded-t-lg" : "rounded"
           )}
           onClick={() => setCollapse(!collapse)}
           data-accordion-target={"#accordion-collapse-body-" + props.count}

package/src/elements/HawaAdCard.tsx

@@ -13,14 +13,14 @@ export const HawaAdCard: React.FunctionComponent<AdCardTypes> = ({
 }) => {
   let cardStyles = {
     horizontal:
-      "flex max-w-xl rounded-lg border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
+      "flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
     vertical:
-      "flex max-w-xs rounded-lg border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
+      "flex max-w-xs rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
   }
 
   let imageStyles = {
-    horizontal: "w-8 h-8 rounded-lg",
-    vertical: "w-14 h-14 rounded-lg",
+    horizontal: "w-8 h-8 rounded",
+    vertical: "w-14 h-14 rounded",
   }
 
   return (

package/src/elements/HawaAlert.tsx

@@ -77,7 +77,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   return (
     <div
       className={clsx(
-        "mb-4 flex flex-col rounded-lg p-4 text-sm",
+        "mb-4 flex flex-col rounded p-4 text-sm",
         styleVariant[variant][props.severity]
       )}
       role="alert"

package/src/elements/HawaButton.tsx

@@ -17,7 +17,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isLoading?: boolean
 }
 
-const baseStyles = "cursor-pointer font-medium rounded-lg  transition-all"
+const baseStyles = "cursor-pointer font-medium rounded  transition-all"
 
 const sizeStyles = {
   xs: "px-1 py-1",

package/src/elements/HawaCardInput.tsx

@@ -130,7 +130,7 @@ export const HawaCardInput = ({
               <input
                 type="tel"
                 name="cardNumber"
-                className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
                 autoComplete="off"
                 onChange={onCardNumberChange}
                 maxLength={19}
@@ -156,7 +156,7 @@ export const HawaCardInput = ({
             <input
               type="text"
               //   className="card-input__input"
-              className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+              className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
               autoComplete="off"
               name="cardHolder"
               onChange={handleFormChange}
@@ -173,7 +173,7 @@ export const HawaCardInput = ({
               </label>
               <div className="flex flex-row gap-2">
                 <select
-                  className="rounded-lg p-2.5"
+                  className="rounded p-2.5"
                   value={cardMonth}
                   name="cardMonth"
                   onChange={handleFormChange}
@@ -193,7 +193,7 @@ export const HawaCardInput = ({
                 </select>
                 <select
                   name="cardYear"
-                  className="rounded-lg p-2.5"
+                  className="rounded p-2.5"
                   value={cardYear}
                   onChange={handleFormChange}
                   onFocus={(e) => onCardInputFocus(e, "cardDate")}
@@ -216,7 +216,7 @@ export const HawaCardInput = ({
             <label htmlFor="cardCvv">CCV</label>
             <input
               type="tel"
-              className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+              className="mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
               maxLength={4}
               autoComplete="off"
               name="cardCvv"

package/src/elements/HawaChip.tsx

@@ -12,7 +12,7 @@ export const HawaChip: React.FunctionComponent<TChipTypes> = ({
   icon,
 }) => {
   let defaultStyles =
-    "flex flex-row w-fit gap-1 items-center rounded-lg bg-blue-200 px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+    "flex flex-row w-fit gap-1 items-center rounded bg-blue-200 px-2.5 py-0.5  font-bold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
   let sizeStyles = {
     small: "h-fit text-xs",
     normal: "h-full leading-4 px-3 py-2 text-xs ",

package/src/elements/HawaItemCard.tsx

@@ -34,7 +34,7 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
   ...props
 }) => {
   let defaultStyle =
-    "block rounded-lg border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-all dark:border-gray-700 dark:bg-gray-800 "
+    "block rounded border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-all dark:border-gray-700 dark:bg-gray-800 "
 
   let orientationStyles = {
     vertical: "max-w-sm",
@@ -46,7 +46,7 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
       "h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
   }
   let headerActionsButtonStyle =
-    "inline-block rounded-lg p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+    "inline-block rounded p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
 
   const [openActionHeader, setOpenActionHeader] = useState(false)
   const {isOpen : isActionOpen, onClose : onActionClose, onOpen : onActionOpen} = useDiscloser();

package/src/elements/HawaLogoButton.tsx

@@ -150,7 +150,7 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="transition-all my-2 flex h-11 w-full flex-row justify-center rounded-xl bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
+      className="transition-all my-2 flex h-11 w-full flex-row justify-center rounded bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}

package/src/elements/HawaMenu.tsx

@@ -55,7 +55,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     }
   }, [onClickOutside])
   let defaultStyles =
-    "border-none ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
+    "border-none ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
   let positionStyles = {
     "top-right": "top-12 right-0",
     "top-left": "top-12 left-0",
@@ -98,7 +98,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
             >
               {group?.map((item) => {
                 return item.element ? (
-                  <li className="mx-1 cursor-pointer items-center rounded-lg hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white">
+                  <li className="mx-1 cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white">
                     {item.element}
                   </li>
                 ) : (
@@ -106,8 +106,8 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded-lg bg-buttonPrimary-default py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
-                        : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-default py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
+                        : "mx-1 flex cursor-pointer flex-row items-center rounded py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >
                     {item.icon && (

package/src/elements/HawaModal.tsx

@@ -44,14 +44,14 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
         )}
       ></div>
 
-      <div className="relative w-1/2 max-w-md rounded-lg bg-white p-1 shadow-lg dark:bg-gray-700">
+      <div className="relative w-1/2 max-w-md rounded bg-white p-1 shadow-lg dark:bg-gray-700">
         <div className="flex items-start justify-between rounded-t p-3 dark:border-gray-600">
           <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
             {title}
           </h3>
           <button
             type="button"
-            className="inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+            className="inline-flex items-center rounded bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
             data-modal-toggle="defaultModal"
             onClick={(e) => {
               onClose()

package/src/elements/HawaPanelTabs.tsx

@@ -49,7 +49,7 @@ export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
         {props.options.map((option: any) => {
           return (
             <div
-              className="rounded-lg bg-gray-50 p-4 dark:bg-gray-800"
+              className="rounded bg-gray-50 p-4 dark:bg-gray-800"
               id={option.value}
               role="tabpanel"
               aria-labelledby={`${option.value}-tab`}

package/src/elements/HawaPhoneInput.tsx

@@ -20,7 +20,7 @@ const Option: React.FunctionComponent<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded-lg p-1 px-3 hover:bg-blue-200"
+    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-blue-200"
     {...innerProps}
   >
     <img className="h-8 w-8" src={props.data.image}></img>
@@ -99,7 +99,7 @@ export const HawaPhoneInput: React.FunctionComponent<HawaPhoneInputTypes> = (
         <input
           onChange={props.handleChange}
           type="number"
-          className="block w-full appearance-none rounded-lg rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          className="block w-full appearance-none rounded rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
         />
         {props.helperText && (
           <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">

package/src/elements/HawaPricingCard.tsx

@@ -46,11 +46,11 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
   let chipSpacing = isArabic ? { left: 10 } : { right: 10 }
   let cardSizes = {
     small:
-      "mx-1 w-full max-w-fit rounded-lg border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full max-w-fit rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     medium:
-      "mx-1 w-full max-w-md rounded-lg border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full max-w-md rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     large:
-      "mx-1 w-full max-w-lg rounded-lg border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full max-w-lg rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
   }
   return (
     <div dir={isArabic ? "rtl" : "ltr"} className={cardSizes[props.size]}>
@@ -121,7 +121,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
       </ul>
       <button
         type="button"
-        className="inline-flex w-full justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
+        className="inline-flex w-full justify-center rounded bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
       >
         {props.buttonText}
       </button>

package/src/elements/HawaRadio.tsx

@@ -14,9 +14,9 @@ type RadioTypes = {
 export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-blue-600 rounded-lg active"
+    "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-default rounded active"
   let inactiveTabStyle =
-    "inline-block py-2 px-4 w-full bg-gray-100 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 
   return (
     <div>
@@ -25,7 +25,7 @@ export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
           props.options?.length > 2
             ? "flex-wrap xs:max-w-full xs:flex-nowrap"
             : "",
-          "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
+          "flex max-w-fit flex-row whitespace-nowrap rounded bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
         )}
       >
         {props.options?.map((opt: any, o) => (

package/src/elements/HawaRange.tsx

@@ -40,7 +40,7 @@ export const HawaRange: React.FunctionComponent<RangeTypes> = ({
             setRangeValue(e.target.value)
             handleChange(e)
           }}
-          className="h-2 w-fit cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+          className="h-2 w-fit cursor-pointer appearance-none rounded bg-gray-200 dark:bg-gray-700"
         />
         <div className="ml-2">{endElement}</div>{" "}
       </div>

package/src/elements/HawaSelect.tsx

@@ -18,7 +18,7 @@ const Option: React.FunctionComponent<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded-lg p-1 px-3 hover:bg-blue-200"
+    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-blue-200"
     {...innerProps}
   >
     {children}
@@ -43,7 +43,7 @@ const Control: React.FunctionComponent<ControlTypes> = ({
   return (
     <div
       ref={innerRef}
-      className="flex h-10 w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+      className="flex h-10 w-full rounded border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
       {...innerProps}
       // {...props}
     >
@@ -68,7 +68,7 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
 }) => {
   return (
     <div
-      className="absolute z-10 mt-2 w-full rounded-lg bg-white ring-1 ring-blue-200"
+      className="absolute z-10 mt-2 w-full rounded bg-white ring-1 ring-blue-200"
       ref={innerRef}
       {...innerProps}
       // {...props}

package/src/elements/HawaSettingsRow.tsx

@@ -32,7 +32,7 @@ export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = ({
   radioProps,
 }) => {
   return (
-    <div className="my-0.5 flex max-h-fit flex-row items-center justify-between rounded-xl bg-white px-4 py-2 pr-2 align-middle">
+    <div className="my-0.5 flex max-h-fit flex-row items-center justify-between rounded bg-white px-4 py-2 pr-2 align-middle">
       <HawaTypography>{settingsLabel}</HawaTypography>
       {settingsType === "text" && <HawaTextField margin="none" width="small" />}
       {settingsType === "boolean" && <HawaSwitch />}

package/src/elements/HawaSnackbar.tsx

@@ -34,7 +34,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   duration,
 }) => {
   let defaultStyle =
-    "fixed flex flex-row items-top p-1 w-full max-w-xs rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+    "fixed flex flex-row items-top p-1 w-full max-w-xs rounded shadow dark:text-gray-400 dark:bg-gray-800"
   let severities = {
     info: "text-blue-700 bg-blue-100",
     warning: "text-yellow-700 bg-yellow-100",
@@ -104,7 +104,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
         </div>
         <button
           type="button"
-          className="inline-flex h-8 w-8 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          className="inline-flex h-8 w-8 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
           data-dismiss-target="#toast-default"
           aria-label="Close"
           onClick={() => setClosed(true)}

package/src/elements/HawaStats.tsx

@@ -12,7 +12,7 @@ type StatTypes = {
 }
 export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
   let defaultStyle =
-    "flex flex-col gap-1 rounded-lg p-4 text-sm h-fit max-h-fit"
+    "flex flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
     contained: "bg-layoutPrimary-default w-fit",

package/src/elements/HawaTable.tsx

@@ -29,7 +29,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
     small: "px-3 py-1",
   }
   return (
-    <div className="relative overflow-x-clip rounded-lg">
+    <div className="relative overflow-x-clip rounded">
       <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
         <thead className="bg-layoutPrimary-default text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
           <tr>