@sikka/hawa 0.0.250 → 0.0.252

package/package.json

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

package/src/blocks/Account/HawaApiBox.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type HawaApiBoxTypes = {
   lang?: any

package/src/blocks/Account/UserProfileForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton, HawaPhoneInput, HawaTextField } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type UserSettingsFormTypes = {
   children: any

package/src/blocks/AuthForms/AppLanding.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout/HawaContainer"
 

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import { HawaAlert, HawaButton, HawaPinInput } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import {
   HawaTextField,
   HawaLogoButton,

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { HawaButton, HawaPhoneInput } from "../../elements"
 import { HawaContainer } from "../../layout"

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import {
   HawaTextField,
   HawaLogoButton,

package/src/blocks/Misc/EmptyState.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 import { FaCheck } from "react-icons/fa"

package/src/blocks/Misc/LeadGenerator.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Misc/Newsletter.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Misc/NoPermission.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaContainer } from "../../layout"
 import { FaLock } from "react-icons/fa"
 

package/src/blocks/Misc/NotFound.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Misc/Testimonial.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Payment/CheckoutForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import {
   HawaTextField,
   HawaTable,

package/src/blocks/Payment/Confirmation.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton, HawaTable } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaTypography, HawaLogoButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import { BsExclamationCircleFill } from "react-icons/bs"
 import { HawaTabs, HawaTooltip } from "../../elements"
 

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
 
 type PricingPlansTypes = {

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { FaClone } from "react-icons/fa"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { FaTimes } from "react-icons/fa"
 import {
   HawaAlert,

package/src/blocks/Referral/ReferralStats.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaAlert, HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 

package/src/elements/ArrowCarousel.tsx

@@ -1,5 +1,5 @@
+import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
-import { useEffect, useState, FC } from "react"
 
 type Item = {
   label?: string

package/src/elements/AutoCompleteField.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { Controller, useFormContext } from "react-hook-form"
 
 type TAutoCompleteFieldTypes = {

package/src/elements/BackToTop.tsx

@@ -1,4 +1,4 @@
-import { FC, RefObject, useState, useEffect } from "react"
+import React, { FC, RefObject, useState, useEffect } from "react"
 import { clsx } from "clsx"
 
 type ComponentTypes = {

package/src/elements/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react"
+import React, { FC, ReactNode } from "react"
 
 type TBreadcrumb = {
   /** The array of crumbs, each one with a label and a href link */

package/src/elements/DraggableCard.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, FC } from "react"
+import React, { ReactElement, FC } from "react"
 
 type DraggableCardTypes = {
   children: ReactElement

package/src/elements/HawaAccordion.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import clsx from "clsx"
 
 type AccordionTypes = {

package/src/elements/HawaAdCard.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type AdCardTypes = {
   orientation: "vertical" | "horizontal"

package/src/elements/HawaButton.tsx

@@ -1,9 +1,9 @@
-import React from "react"
+import React, { FC, ButtonHTMLAttributes } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
 import { HawaTooltip } from "./HawaTooltip"
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
   tooltipDirection?: "rtl" | "ltr"
   color?: "default" | "primary" | "secondary"
@@ -33,7 +33,7 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 
-export const HawaButton: React.FunctionComponent<ButtonProps> = ({
+export const HawaButton: FC<ButtonProps> = ({
   className,
   variant = "contained",
   color = "default",
@@ -174,7 +174,7 @@ export const HawaButton: React.FunctionComponent<ButtonProps> = ({
         </button>
       )}
       {badge && (
-        <div className="absolute -top-3 -right-3 inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-red-500 text-xs font-bold text-white dark:border-gray-900">
+        <div className="absolute -right-3 -top-3 inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-red-500 text-xs font-bold text-white dark:border-gray-900">
           {badge}
         </div>
       )}

package/src/elements/HawaCardInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useState } from "react"
 import { HawaButton } from "./HawaButton"
 
 const CARDS = {

package/src/elements/HawaCheckbox.tsx

@@ -1,5 +1,5 @@
+import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
-import { useEffect, useState, FC } from "react"
 
 type TCheckBoxTypes = {
   centered?: boolean

package/src/elements/HawaChip.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import clsx from "clsx"
 
 type TChipTypes = {

package/src/elements/HawaColorPicker.tsx

@@ -1,4 +1,4 @@
-import { useState, FC, ChangeEvent } from "react"
+import React, { useState, FC, ChangeEvent } from "react"
 
 type ColorPickerTypes = {
   /** The hex code for the color */

package/src/elements/HawaCopyrights.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type CopyRightsTypes = {
   /** A text used as the version of the app, for example: v1.0.0 */

package/src/elements/HawaDatepicker.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react"
+import React, { FC, useState } from "react"
 
 type DatepickerTypes = {}
 

package/src/elements/HawaDrawer.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode } from "react"
+import React, { FC, ReactElement, ReactNode } from "react"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
 // TODO: This element should either be removed or improved

package/src/elements/HawaIconCount.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type IconCountTypes = {
   /** The icon of the counter */

package/src/elements/HawaItemCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, FC } from "react"
+import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import { HawaButton } from "./HawaButton"

package/src/elements/HawaLandingCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { FC } from "react"
+import React, { FC } from "react"
 
 type LandingCardTypes = {
   orientation: "vertical" | "horizontal"

package/src/elements/HawaLogoButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type LogoButtonTypes = {
   lang?: any

package/src/elements/HawaMenu.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState, FC } from "react"
+import React, { ReactNode, useEffect, useRef, useState, FC } from "react"
 import clsx from "clsx"
 
 // TODO: add width to decrease width

package/src/elements/HawaModal.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, FC } from "react"
+import React, { ReactElement, useEffect, FC } from "react"
 import clsx from "clsx"
 
 type ModalTypes = {

package/src/elements/HawaPanelTabs.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 
 type PanelTabsTypes = {
   defaultValue: any

package/src/elements/HawaPhoneInput.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import Countries from "../countries"
 import Select from "react-select"
 

package/src/elements/HawaPinInput.tsx

@@ -1,5 +1,5 @@
+import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
-import { useEffect, useState, FC } from "react"
 
 type PinInputTypes = {
   label?: string

package/src/elements/HawaPricingCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaButton } from "./HawaButton"
 
 // TODO: if feature.excluded is false, show gray and x

package/src/elements/HawaRadio.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import clsx from "clsx"
 
 type RadioTypes = {

package/src/elements/HawaRange.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react"
+import React, { FC, useState } from "react"
 
 type RangeTypes = {
   value?: any

package/src/elements/HawaSearchBar.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaTextField } from "./HawaTextField"
 
 type SearchBarTypes = {}

package/src/elements/HawaSelect.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { FC } from "react"
+import React, { FC } from "react"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
 

package/src/elements/HawaSettingsRow.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaTextField } from "./HawaTextField"
 import { HawaSwitch } from "./HawaSwitch"
 import { HawaColorPicker } from "./HawaColorPicker"

package/src/elements/HawaSnackbar.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef, useState } from "react"
+import React, { FC, useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 

package/src/elements/HawaSpinner.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import clsx from "clsx"
 
 type SpinnerTypes = {

package/src/elements/HawaStats.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
 

package/src/elements/HawaStepper.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import clsx from "clsx"
 import { FaCheck } from "react-icons/fa"
 

package/src/elements/HawaStoreButtons.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type StoreButtonsTypes = {
   store: "apple" | "google"

package/src/elements/HawaSwitch.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import clsx from "clsx"
 
 type SwitchTypes = {

package/src/elements/HawaTable.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, FC } from "react"
+import React, { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"

package/src/elements/HawaTabs.tsx

@@ -1,5 +1,5 @@
+import React, { useState, FC } from "react"
 import clsx from "clsx"
-import { useState, FC } from "react"
 
 // TODO: fix wrapping issue when small screen
 

package/src/elements/HawaTextField.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithRef } from "react"
+import React, { FC, PropsWithRef } from "react"
 import clsx from "clsx"
 
 // TODO: make icon based on direction

package/src/elements/HawaTooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, ReactElement, FC } from "react"
+import React, { useEffect, useRef, useState, ReactElement, FC } from "react"
 import clsx from "clsx"
 
 type THawaToolTip = {

package/src/elements/HawaTypography.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type TypographyTypes = {
   children: any

package/src/elements/InvoiceAccordion.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from "react"
+import React, { useState, FC } from "react"
 import clsx from "clsx"
 import { HiChevronRight } from "react-icons/hi"
 import { BsThreeDotsVertical } from "react-icons/bs"

package/src/elements/SubsectionList.tsx

@@ -1,5 +1,5 @@
+import React, { useState, FC } from "react"
 import clsx from "clsx"
-import { useState, FC } from "react"
 import { HawaChip } from "./HawaChip"
 
 type SubsectionListTypes = {

package/src/elements/TabPanel.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 
 type TabPanelTypes = {
   children: any

package/src/elements/UsageCard.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react"
+import React, { FC } from "react"
 import { HawaTooltip } from "./HawaTooltip"
 import { BsExclamationCircleFill } from "react-icons/bs"
 

package/src/elements/UserFeedback.tsx

@@ -1,5 +1,5 @@
+import React, { FC, useEffect, useRef, useState } from "react"
 import clsx from "clsx"
-import { FC, useEffect, useRef, useState } from "react"
 import { HawaButton } from "./HawaButton"
 
 type ComponentTypes = {

package/src/hooks/useBreakpoint.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import React, { useState, useEffect } from "react"
 
 const useBreakpoint = () => {
   const [breakpoint, setBreakpoint] = useState(window?.innerWidth)

package/src/hooks/useDiscloser.ts

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import React, { useState } from "react"
 
 type TUseDiscloser = {
   isOpen: boolean

package/src/hooks/useHover.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 function useHover() {
   const [value, setValue] = useState(false);

package/src/hooks/useScrollPosition.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 function useScrollPosition(ref) {
   const [scrollPosition, setScrollPosition] = useState(0);

package/src/hooks/useTable.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import React, { useState, useEffect } from "react"
 
 const calculateRange = (data, rowsPerPage) => {
   const range = []