@sikka/hawa 0.0.249 → 0.0.251

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.249",
+  "version": "0.0.251",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -60,10 +60,10 @@
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "qs": "^6.10.3",
-    "react": ">=17.0.1",
+    "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dnd": "^15.1.2",
-    "react-dom": ">=17.0.1",
+    "react-dom": "^17.0.1",
     "react-hook-form": "^7.28.0",
     "react-phone-input-2": "^2.15.1",
     "react-select": "^5.3.2",
@@ -82,8 +82,8 @@
     "tailwindcss": "^3.3.3"
   },
   "peerDependencies": {
-    "react-dom": ">=17.0.1",
-    "react": ">=17.0.1"
+    "react-dom": "^17.0.1",
+    "react": "^17.0.1"
   },
   "resolutions": {
     "@storybook/react/webpack": "^5",
@@ -94,7 +94,7 @@
   },
   "dependencies": {
     "clsx": "^1.2.1",
-    "react": ">=17.0.1",
+    "react": "^17.0.1",
     "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.28.0",
     "react-icons": "^4.6.0",

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/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/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/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/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/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/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/HawaButton.tsx

@@ -1,9 +1,9 @@
-import React from "react"
+import { 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/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/HawaDatepicker.tsx

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

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/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/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/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/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/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/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/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 = []

package/src/layout/Footer.tsx

@@ -1,8 +1,5 @@
-import { useState } from "@storybook/addons"
-import { FC, ReactNode } from "react"
-import clsx from "clsx"
 import { BsInstagram, BsTwitter } from "react-icons/bs"
-import { FaSnapchat, FaSnapchatGhost, FaTiktok } from "react-icons/fa"
+import { FaSnapchatGhost, FaTiktok } from "react-icons/fa"
 
 type FooterTypes = {
   logoText?: string
@@ -24,7 +21,7 @@ type FooterTypes = {
 
 export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
   return (
-    <div className="sticky  left-0 bottom-0 flex w-full flex-row gap-8  bg-blue-200 p-4">
+    <div className="sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4">
       {props.logoText && (
         <div>
           <div className="text-2xl font-bold">{props.logoText}</div>

package/src/layout/HawaSiteLayout.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx"
 import React, { useEffect, useRef, useState } from "react"
+import clsx from "clsx"
 import useDiscloser from "../hooks/useDiscloser"
 import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"