@sikka/hawa 0.1.4 → 0.1.6

package/package.json

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

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -55,7 +55,7 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
           <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
           <div className=" py-2 text-center text-xs text-muted-foreground">
             <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
-            <span className="cursor-pointer text-buttonPrimary-500">
+            <span className="clickable-link">
               {props.texts.resendCode ?? "Click to resend"}
             </span>
           </div>

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -74,7 +74,7 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
                 {props.texts.dontHaveAccount ?? "Don't have an account? "}
                 <span
                   onClick={props.handleRouteToSignUp}
-                  className="cursor-pointer text-blue-600 dark:text-blue-400"
+                  className="clickable-link"
                 >
                   {props.texts.signUpText ?? "Sign Up"}
                 </span>

package/src/blocks/AuthForms/SignInForm.tsx

@@ -127,7 +127,7 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               {props.texts.newUserText}{" "}
               <span
                 onClick={props.handleRouteToSignUp}
-                className="cursor-pointer text-blue-600 dark:text-blue-400"
+                className="clickable-link"
               >
                 {props.texts.createAccount}
               </span>

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -257,7 +257,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
                           {props.texts.iAcceptText}{" "}
                           <a
                             onClick={props.handleRouteToTOS}
-                            className="cursor-pointer text-blue-800"
+                            className="clickable-link"
                           >
                             {props.texts.termsText}
                           </a>
@@ -291,7 +291,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
             <span>{props.texts.existingUserText}</span>
             <span
               onClick={props.handleRouteToSignIn}
-              className="cursor-pointer text-blue-600"
+              className="clickable-link"
             >
               {props.texts.signInText}
             </span>

package/src/blocks/Misc/NotFound.tsx

@@ -24,7 +24,12 @@ export const NotFound: FC<NotFoundTypes> = ({
             {texts?.pageNotFound ?? "Page Not Found"}
           </div>
           <div className="mb-4 text-center">
-            {texts?.ifLost ?? "If you're lost please contact us help@sikka.io"}
+            {texts?.ifLost ?? (
+              <>
+                If you're lost please contact us{" "}
+                <span className="clickable-link">help@sikka.io</span>
+              </>
+            )}
           </div>
           <Button className="w-full">{texts?.home ?? "Home"}</Button>
         </div>

package/src/blocks/Misc/Testimonial.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react"
+import { Card, CardContent } from "../../elements/Card"
 
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
@@ -6,39 +7,41 @@ type TEmptyState = {
 
 export const Testimonial: FC<TEmptyState> = (props) => {
   return (
-    <div className="flex w-fit flex-col  gap-2 rounded border-2 border-gray-200 bg-white p-4">
-      <div>
-        <p className="mb-4 max-w-sm">
-          The team at Sikka Software 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>
-      <div className="flex flex-row gap-4">
-        <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>
-        <span className="border border-l "></span>{" "}
+    <Card>
+      <CardContent headless>
         <div>
-          <strong>Brent Lassi</strong>
-          <div> Chief Information Security Officer</div>
+          <p className="mb-4 max-w-sm">
+            The team at Sikka Software 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>
-        {/* <div>
+        <div className="flex flex-row gap-4">
+          <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>
+          <span className="border border-l "></span>{" "}
+          <div>
+            <strong>Brent Lassi</strong>
+            <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> */}
-      </div>
-    </div>
+        </div>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState, FC } from "react"
-import { HawaButton } from "../../elements"
 import { Card, CardContent } from "../../elements/Card"
 import { Button } from "../../elements/Button"
+import { Input } from "../../elements/Input"
 
 type ChargeWalletTypes = {
   currency: any
@@ -24,18 +24,20 @@ export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
           </div>
           <div className="text-sm font-normal">{props.currency || "SAR"}</div>
         </div>
-        <div className="mb-2 flex w-full flex-row gap-4 text-center">
-          <HawaButton variant="outlined" margins="none" className="h-full">
-            10 SAR
-          </HawaButton>
-          <HawaButton variant="outlined" margins="none" className="h-full">
-            100 SAR
-          </HawaButton>
+        <div className="mb-2 flex w-full flex-col gap-4 text-center">
+          <div className="mb-2 flex w-full flex-row gap-4 text-center">
+            <Button variant="outline" className="h-full w-full">
+              10 SAR
+            </Button>
+            <Button variant="outline" className="h-full w-full">
+              50 SAR
+            </Button>
+            <Button variant="outline" className="h-full w-full">
+              100 SAR
+            </Button>
+          </div>
 
-          <input
-            placeholder="Custom"
-            className="h-auto w-full rounded bg-gray-100 p-4"
-          />
+          <Input placeholder="Custom Amount" type="number" name="amount" />
         </div>
         {/* <FormProvider {...methods}>
         <form onSubmit={handleSubmit(props.handleChargeWallet)}>
@@ -67,13 +69,7 @@ export const ChargeWalletForm: FC<ChargeWalletTypes> = (props) => {
             }}
           />
 
-          <HawaButton
-            color="primary"
-            // type="submit"
-            width="full"
-          >
-            {props.texts.chargeWallet}
-          </HawaButton>
+      
           </form>
         </FormProvider> */}
         <Button className="mt-6 w-full">{props.texts.chargeWallet}</Button>

package/src/blocks/Payment/Confirmation.tsx

@@ -84,7 +84,7 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
             {props.texts.fasterPaymentNote}
           </div>
           <a
-            className="w-fit cursor-pointer text-center  text-xs font-normal dark:text-white"
+            className="clickable-link text-xs"
             onClick={props.handleRefundPolicyLink}
           >
             {props.texts.refundPolicy}

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
 import {
   HawaAlert,
-  HawaButton,
   HawaChip,
   HawaMenu,
   HawaSelect,
@@ -9,6 +8,7 @@ import {
 } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type TReferralSettlement = {
   referralLink: string
@@ -58,7 +58,7 @@ export const ReferralSettlement: FC<TReferralSettlement> = ({
           </FormProvider>
         </div>
         <div>
-          <HawaButton width="full">Add Bank Account</HawaButton>
+          <Button className="mt-6 w-full">Add Bank Account</Button>
         </div>
         {withdrawError && (
           <div>
@@ -106,9 +106,14 @@ const SettlementAccountCard = (props) => {
       </div>
       <div className="flex flex-row items-center justify-center gap-2">
         {props.default && (
-          <HawaButton disabled variant="outlined" size="xs" margins="none">
-            Default
-          </HawaButton>
+          <HawaChip
+            label="Default"
+            size="small"
+            // disabled
+            // variant="outlined"
+            // size="xs"
+            // margins="none"
+          />
         )}
 
         <HawaMenu
@@ -123,7 +128,7 @@ const SettlementAccountCard = (props) => {
           // position={direction === "rtl" ? "right-bottom" : "left-bottom"}
           // direction={direction}
         >
-          <HawaButton variant="outlined">
+          <Button variant="outline" size="icon">
             <svg
               aria-label="Vertical Three Dots Menu Icon"
               className="rotate-90"
@@ -136,36 +141,8 @@ const SettlementAccountCard = (props) => {
             >
               <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
             </svg>
-          </HawaButton>
-          {/* <div className="flex w-fit rotate-90 cursor-pointer  items-center justify-center rounded  p-2 hover:bg-buttonPrimary-500/50">
-            <svg
-              aria-label="Vertical Three Dots Menu Icon"
-              stroke="currentColor"
-              fill="currentColor"
-              stroke-width="0"
-              viewBox="0 0 16 16"
-              height="1em"
-              width="1em"
-            >
-              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
-            </svg>
-          </div> */}
+          </Button>
         </HawaMenu>
-        {/* {!props.default && <HawaButton size="small">Make Default</HawaButton>} */}
-        {/* <HawaButton tooltip="Delete" size="small">
-          <svg
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path
-              fillRule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </HawaButton> */}
       </div>
     </div>
   )

package/src/elements/Breadcrumb.tsx

@@ -20,7 +20,7 @@ const HawaBreadcrumb: FC<TBreadcrumb> = ({
             className={
               index + 1 === breadcrumbLinks.length
                 ? "pointer-events-none"
-                : "underline-offset-4 transition-all hover:text-buttonPrimary-500 hover:underline hover:decoration-2"
+                : "underline-offset-4 transition-all hover:text-primary hover:underline hover:decoration-2"
             }
           >
             {singleBreadcrumbLink.label}

package/src/elements/Button.tsx

@@ -63,9 +63,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {isLoading ? (
-          // Replace with your loading icon component
-          <HawaLoading design="dots-pulse"  size="button" />
-          ) : (
+          <HawaLoading
+            design="dots-pulse"
+            color="bg-primary-foreground"
+            size="button"
+          />
+        ) : (
           children
         )}
       </Comp>

package/src/elements/DragDropImages.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
-import { HawaButton } from "./HawaButton"
 import clsx from "clsx"
+import { Button } from "./Button"
 
 //TODO: This element needs more improvements and testing
 
@@ -236,7 +236,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
         </div>
         {acceptedFiles.length > 0 && (
           <div className="flex justify-center rounded-lg  p-2 ">
-            <HawaButton onClick={clearAllFiles}>Clear All</HawaButton>
+            <Button onClick={clearAllFiles}>Clear All</Button>
           </div>
         )}
         {acceptedFiles.length > 0 && thumbs && showPreview ? (

package/src/elements/HawaAlert.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
 
 type AlertTypes = {
   severity: "info" | "warning" | "error" | "success"
@@ -22,7 +23,13 @@ type AlertTypes = {
     {
       label: string
       onClick: any
-      variant: "contained" | "outlined"
+      variant:
+        | "outline"
+        | "link"
+        | "default"
+        | "destructive"
+        | "secondary"
+        | "ghost"
     }
   ]
   persistant?: boolean
@@ -144,14 +151,13 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
             {props.actions && (
               <div className="mt-2 flex flex-row gap-2">
                 {props.actions.map((act, index) => (
-                  <HawaButton
+                  <Button
                     key={index}
                     variant={act.variant}
                     onClick={act.onClick()}
-                    margins="none"
                   >
                     {act.label}
-                  </HawaButton>
+                  </Button>
                 ))}
               </div>
             )}
@@ -161,7 +167,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
           <button
             type="button"
             className={clsx(
-              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  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",
+              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900  dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
               closeButtonStyle[props.severity],
               direction === "rtl" ? "left-2" : "right-2"
             )}
@@ -176,6 +182,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
           >
             <span className="sr-only">Close</span>
             <svg
+              aria-label="Close Icon"
               aria-hidden="true"
               className="h-5 w-5"
               fill="currentColor"

package/src/elements/HawaButton.tsx

@@ -36,12 +36,12 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 const baseStyles =
-"cursor-pointer justify-center items-center text-center font-medium transition-all"
+  "cursor-pointer  justify-center items-center text-center font-medium transition-all "
 const sizeStyles = {
   icon: "h-10 w-10",
   xs: "px-1.5 py-2 text-[9px] h-fit",
   small: "text-xs px-2.5 py-1.5",
-  medium: "text-sm leading-4 px-3 py-2 h-[2.36rem] ",
+  medium: "text-sm leading-4 px-3 py-2",
   default: "h-10 px-4 py-2",
   large: "text-sm px-4 py-2",
   noPadding: "p-0",
@@ -90,7 +90,7 @@ export const HawaButton: FC<ButtonProps> = ({
   className,
   variant = "contained",
   color = "default",
-  size = "medium",
+  size = "default",
   width = "normal",
   disabled = false,
   isLoading = false,

package/src/elements/HawaCodeBlock.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useState } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
 
 type CodeBlockTypes = {
   color?: "dark" | "light"
@@ -56,7 +57,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
             <div
               className={clsx(
                 selectedTab === i
-                  ? "dark:border-buttonPrimary-400 border-b-2   border-buttonPrimary-700"
+                  ? " border-b-2   border-primary"
                   : "bg-transparent"
               )}
             >
@@ -73,7 +74,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
         </div>
       )}
       {fileName && (
-        <div className="flex flex-row gap-2 rounded-t p-2 pb-0 text-black bg-gray-100  dark:bg-gray-700 dark:text-white">
+        <div className="flex flex-row gap-2 rounded-t bg-gray-100 p-2 pb-0 text-black  dark:bg-gray-700 dark:text-white">
           <div
             className={clsx(
               "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem]"
@@ -102,16 +103,18 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
             >
               Copied!
             </div>
-            <HawaButton
-              variant="outlined"
-              color="dark"
+            <Button
+              // variant="outlined"
+              // color="dark"
+              size="icon"
               onClick={() => {
                 handleCopyClick()
                 navigator.clipboard.writeText(
                   tabs ? tabs[selectedTab].code : code
                 )
               }}
-              margins="none"
+              // className="w-4"
+              // margins="none"
             >
               <svg
                 stroke="currentColor"
@@ -126,7 +129,7 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
                 <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                 <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
               </svg>
-            </HawaButton>
+            </Button>
           </div>
         </code>
       </pre>

package/src/elements/HawaLoading.tsx

@@ -34,7 +34,7 @@ export const HawaLoading: FC<LoadingTypes> = ({
               "animate-bounce rounded-full delay-100 repeat-infinite",
               size === "button" ? "h-2 w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
-              color ? color : "bg-primary-foreground"
+              color ? color : "bg-primary"
             )}
           ></div>
           <div
@@ -42,8 +42,7 @@ export const HawaLoading: FC<LoadingTypes> = ({
               "animate-bounce rounded-full delay-200 repeat-infinite",
               size === "button" ? "h-2 w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
-
-              color ? color : "bg-primary-foreground"
+              color ? color : "bg-primary"
             )}
           ></div>
           <div
@@ -51,8 +50,7 @@ export const HawaLoading: FC<LoadingTypes> = ({
               "animate-bounce rounded-full delay-300 repeat-infinite",
               size === "button" ? "h-2 w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
-
-              color ? color : "bg-primary-foreground"
+              color ? color : "bg-primary"
             )}
           ></div>
         </div>
@@ -67,12 +65,11 @@ export const HawaLoading: FC<LoadingTypes> = ({
               viewBox="3 3 18 18"
             >
               <path
-                className="fill-gray-200"
+                className="fill-primary/20"
                 d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
               ></path>
               <path
-                // className="fill-buttonPrimary-500 "
-                className={color ? color : "fill-buttonPrimary-500"}
+                className={color ? color : "fill-primary"}
                 d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
               ></path>
             </svg>

package/src/elements/HawaPhoneInput.tsx

@@ -48,7 +48,7 @@ const Option: FC<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex cursor-pointer flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/30 dark:text-white dark:hover:bg-buttonPrimary-500/60"
+    className="m-2 flex cursor-pointer flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-primary hover:text-primary-foreground"
     {...innerProps}
   >
     <div className="flex flex-row items-center justify-center gap-1">

package/src/elements/HawaPricingCard.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx"
 import React, { FC } from "react"
 import { HawaButton } from "./HawaButton"
+import { Button } from "./Button"
 
 // TODO: if feature.excluded is false, show gray and x
 // TODO: add badge to feature if soon
@@ -31,27 +32,25 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
   let isArabic = direction === "rtl"
   let cardSizes = {
     small:
-      "mx-1 w-full  max-w-sm rounded border dark:border-gray-700 dark:bg-gray-800 ",
+      "mx-1 w-full  max-w-sm rounded border dark:border-gray-700 bg-background ",
     medium:
-      "mx-1 w-full rounded min-w-fit border dark:border-gray-700 dark:bg-gray-800 ",
+      "mx-1 w-full rounded min-w-fit border dark:border-gray-700 bg-background ",
     large:
-      "mx-1 w-full max-w-lg rounded border dark:border-gray-700 dark:bg-gray-800 ",
+      "mx-1 w-full max-w-lg rounded border dark:border-gray-700 bg-background ",
   }
   return (
     <div
       dir={isArabic ? "rtl" : "ltr"}
       className={clsx(
-        currentPlan
-          ? "border-buttonPrimary-500 bg-layoutPrimary-500"
-          : "bg-white",
+        currentPlan ? "border-primary" : "bg-background",
         cardSizes[size],
         "flex flex-col gap-4 rounded border-2 p-4"
       )}
     >
-      <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
+      <h5 className="text-md 0 font-bold text-primary/70">
         {props.texts.title}
       </h5>
-      <div className=" flex items-baseline  text-gray-900 dark:text-white">
+      <div className=" text-primary/ flex  items-baseline">
         <>
           <span className="text-5xl font-extrabold tracking-tight">
             {props.price}
@@ -60,11 +59,11 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
             {props.texts.currencyText}
           </span>
         </>
-        <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+        <span className="ml-1 text-xl font-normal text-primary/70">
           / {props.texts.cycleText}
         </span>
       </div>
-      <h5 className="text-md  font-normal text-gray-500 dark:text-gray-400">
+      <h5 className="text-md  font-normal text-primary/70">
         {props.texts.subtitle}
       </h5>
 
@@ -74,19 +73,19 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
             return (
               <li key={o} className="flex ">
                 <svg
+                  aria-label="Check Icon"
                   aria-hidden="true"
-                  className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"
+                  className="m-2 h-5 w-5 flex-shrink-0 text-primary"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                 >
-                  <title>Check icon</title>
                   <path
                     fillRule="evenodd"
                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                     clipRule="evenodd"
                   ></path>
                 </svg>
-                <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
+                <span className="flex items-center  text-center font-normal leading-tight text-primary/70 ">
                   {feature.text}
                 </span>
               </li>
@@ -94,14 +93,13 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
           })}
         </ul>
       )}
-      <HawaButton
+      <Button
         onClick={props.onPlanClicked}
-        margins="none"
         disabled={currentPlan}
-        width="full"
+        className="w-full"
       >
         {props.texts.buttonText}
-      </HawaButton>
+      </Button>
     </div>
   )
 }

package/src/elements/HawaSelect.tsx

@@ -87,7 +87,7 @@ const Option: FC<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/50 hover:text-white"
+    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:text-primary-foreground hover:bg-primary"
     {...innerProps}
   >
     {children}