@sikka/hawa 0.0.244 → 0.0.246

package/lib/layout/HawaAppLayout.d.ts

@@ -19,6 +19,7 @@ type HawaAppLayoutTypes = {
     email?: string;
     drawerSize?: "sm" | "md" | "large";
     profileMenuItems?: MenuItems[][];
+    onSettingsClick?: () => void;
 };
 type MenuItems = {
     icon?: JSX.Element;

package/lib/layout/index.d.ts

@@ -3,6 +3,5 @@ export * from "./HawaBottomAppBar";
 export * from "./HawaSiteLayout";
 export * from "./HawaAppLayout";
 export * from "./HawaContainer";
-export * from "./SimpleGrid";
 export * from "./AppSidebar";
 export * from "./Footer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.244",
+  "version": "0.0.246",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -113,8 +113,6 @@
     "react-select": "^5.3.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "slate": "^0.94.1",
-    "slate-history": "^0.93.0",
-    "slate-react": "^0.97.1",
-    "start": "^5.1.0"
+    "slate-react": "^0.97.1"
   }
 }

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -15,7 +15,7 @@ type TConfirmation = {
     codePlaceholder: string
     codeRequiredText: string
     confirm: string
-    cancel
+    cancel: string
   }
   phoneNumber?: string
   submitConfirmation?: any

package/src/blocks/Misc/EmptyState.tsx

@@ -5,20 +5,30 @@ import { FaCheck } from "react-icons/fa"
 
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
+  onActionClick: () => void
+  texts: {
+    youreCaughtUp?: string
+    actionText?: string
+  }
 }
 
-export const EmptyState: FC<TEmptyState> = ({ variant = "contained" }) => {
+export const EmptyState: FC<TEmptyState> = ({
+  variant = "contained",
+  texts,
+  onActionClick,
+}) => {
   return (
-    <HawaContainer variant={variant} centered={true}>
+    <HawaContainer variant={variant} centered={true} maxWidth="small">
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
           <FaCheck size={20} color="white" />
         </div>
-        <div className="m-2 text-xl font-bold">You're all caught up</div>
-        <div>If you're lost, please contact us help@sikka.io </div>
+        <div className="m-2 text-xl font-bold">
+          {texts?.youreCaughtUp ?? "You're all caught up"}
+        </div>
       </div>
-      <HawaButton color="primary" width="full">
-        Action
+      <HawaButton color="primary" width="half" onClick={() => onActionClick()}>
+        {texts?.actionText ?? "Go Home"}
       </HawaButton>
     </HawaContainer>
   )

package/src/blocks/Misc/LeadGenerator.tsx

@@ -37,9 +37,7 @@ export const LeadGenerator: FC<TLeadGenerator> = ({
           placeholder={"example@sikka.io"}
           margin="none"
         />
-        <HawaButton size="full" margins="none">
-          {texts?.submit ?? "Submit"}
-        </HawaButton>
+        <HawaButton margins="none">{texts?.submit ?? "Submit"}</HawaButton>
       </form>
     </HawaContainer>
   )

package/src/blocks/Misc/Newsletter.tsx

@@ -41,7 +41,7 @@ export const Newsletter: FC<TNewsletter> = ({
           placeholder={"example@sikka.io"}
           margin="none"
         />
-        <HawaButton size="full" margins="none">
+        <HawaButton  margins="none">
           {texts?.submit ?? "Submit"}
         </HawaButton>
       </form>

package/src/blocks/Misc/NoPermission.tsx

@@ -4,24 +4,30 @@ import { FaLock } from "react-icons/fa"
 
 type TNoPermission = {
   variant?: "outlined" | "contained" | "neobrutalism"
+  texts?: {
+    title: string
+    subtitle: string
+  }
 }
 
-export const NoPermission: FC<TNoPermission> = ({ variant = "contained" }) => {
+export const NoPermission: FC<TNoPermission> = ({
+  variant = "contained",
+  texts,
+}) => {
   return (
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
           <FaLock size={20} color="white" />
         </div>
-        <div className="m-2 text-xl font-bold">You don't have permission</div>
+        <div className="m-2 text-xl font-bold">
+          {texts?.title ?? "You don't have permission"}
+        </div>
         <div>
-          If you think this is a problem please contact your administrator or
-          our customer support
+          {texts?.subtitle ??
+            "If you think this is a problem please contact your administrator or our customer support"}
         </div>
       </div>
-      {/* <HawaButton color="primary" width="full">
-        Action
-      </HawaButton> */}
     </HawaContainer>
   )
 }

package/src/blocks/Misc/NotFound.tsx

@@ -22,10 +22,10 @@ export const NotFound: FC<NotFoundTypes> = ({
         <div className="m-2 text-center text-xl font-bold ">
           {texts?.pageNotFound ?? "Page Not Found"}
         </div>
-        <div className="text-center ">
+        <div className="text-center mb-4">
           {texts?.ifLost ?? "If you're lost please contact us help@sikka.io"}
         </div>
-        <HawaButton color="primary" width="full">
+        <HawaButton color="primary" width="full" margins="none">
           {texts?.home ?? "Home"}
         </HawaButton>
       </div>

package/src/blocks/Misc/Testimonial.tsx

@@ -1,50 +1,44 @@
 import { FC } 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: FC<TEmptyState> = ({ variant = "contained" }) => {
+export const Testimonial: FC<TEmptyState> = (props) => {
   return (
-    <div
-      className="flex flex-col gap-2 rounded 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 className="flex w-fit flex-col  gap-2 rounded border-2 border-gray-200 bg-white p-4">
       <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 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>
-      <cite>
+      <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>
-          <div>
-            <strong style={{ color: "#45BE8B" }}>Brent Lassi</strong>
-          </div>
+          <strong>Brent Lassi</strong>
           <div> Chief Information Security Officer</div>
         </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> */}
+      </div>
     </div>
   )
 }

package/src/blocks/Payment/ChargeWalletForm.tsx

@@ -22,16 +22,17 @@ 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-2 text-center">
-        <div className="w-40 whitespace-nowrap rounded bg-gray-100 p-4">
+      <div className="mb-2 flex w-full flex-row gap-4 text-center">
+        <HawaButton variant="outlined" margins="none" className="h-full">
           10 SAR
-        </div>
-        <div className="w-40 whitespace-nowrap rounded bg-gray-100 p-4">
+        </HawaButton>
+        <HawaButton variant="outlined" margins="none" className="h-full">
           100 SAR
-        </div>
+        </HawaButton>
+
         <input
           placeholder="Custom"
-          className="h-auto rounded bg-gray-100 p-4"
+          className="h-auto w-full rounded bg-gray-100 p-4"
         />
       </div>
       {/* <FormProvider {...methods}>

package/src/blocks/Payment/CheckoutForm.tsx

@@ -156,60 +156,59 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                   />
                 )}
               />
-              <div style={{ width: 20 }} />
+            </div>
 
+            <div className="flex flex-col md:flex-row">
               <Controller
                 control={control}
-                name="buildingNumber"
+                name="province"
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
                     type="text"
-                    label={props.texts?.buildingNumberLabel + " *"}
-                    helperText={errors.buildingNumber?.message}
+                    label={props.texts?.stateLabel + " *"}
+                    helperText={errors.province?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
                 )}
               />
-            </div>
+              <div style={{ width: 20 }} />
 
-            <div className="flex flex-col md:flex-row">
               <Controller
                 control={control}
-                name="province"
+                name="city"
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
                     type="text"
-                    label={props.texts?.stateLabel + " *"}
-                    helperText={errors.province?.message}
+                    label={props.texts?.cityLabel + " *"}
+                    helperText={errors.city?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
                 )}
               />
-              <div style={{ width: 20 }} />
-
+            </div>
+            <div className="flex flex-col md:flex-row">
               <Controller
                 control={control}
-                name="city"
+                name="buildingNumber"
                 rules={{ required: props.texts?.required }}
                 render={({ field }) => (
                   <HawaTextField
                     width="full"
                     type="text"
-                    label={props.texts?.cityLabel + " *"}
-                    helperText={errors.city?.message}
+                    label={props.texts?.buildingNumberLabel + " *"}
+                    helperText={errors.buildingNumber?.message}
                     {...field}
                     value={field.value ?? ""}
                   />
                 )}
               />
-            </div>
-            <div className="mb-3">
+              <div style={{ width: 20 }} />
               <Controller
                 control={control}
                 name="zipCode"
@@ -225,8 +224,9 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
                   />
                 )}
               />
-              <div style={{ width: 20 }} />
-
+              {/* <div style={{ width: 20 }} /> */}
+            </div>
+            <div className="mb-3">
               <Controller
                 control={control}
                 name="country"

package/src/blocks/Payment/Confirmation.tsx

@@ -56,7 +56,7 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
         <div className="text-center">{props.texts.yourOrderNumber}</div>
         <div className="text-center font-bold">{props.orderNumber}</div>
       </div>
-      <div className="py-5">
+      {/* <div className="py-5">
         <div className="mb-3 text-center text-xl font-semibold">
           {props.texts.orderDetails}
         </div>
@@ -70,8 +70,8 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
             rows={props.products}
           />
         )}
-      </div>
-      <div className="flex flex-col justify-center py-5 pt-0">
+      </div> */}
+      <div className="flex flex-col items-center justify-center py-5 pt-0">
         <HawaButton color="primary" width="full" onClick={props.handlePrint}>
           {props.texts.print}
         </HawaButton>
@@ -85,7 +85,7 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
           {props.texts.fasterPaymentNote}
         </div>
         <a
-          className="w-fit cursor-pointer text-center text-xs font-normal"
+          className="w-fit cursor-pointer  text-center text-xs font-normal"
           onClick={props.handleRefundPolicyLink}
         >
           {props.texts.refundPolicy}

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -95,14 +95,19 @@ export const ReferralSettlement: FC<TReferralSettlement> = ({
 }
 
 const SettlementAccountCard = (props) => (
-  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-2">
+  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-3">
     <div className="flex flex-col justify-between">
       <div className="text-xs">{props.bank}</div>
       <div>{props.accountHolder}</div>
       <div className="text-xs">{props.iban}</div>
     </div>
-    <div className="flex flex-row items-center justify-center gap-1">
-      {props.default && <HawaChip size="normal" label="Default" />}
+    <div className="flex flex-row items-center justify-center gap-2">
+      {props.default && (
+        <HawaButton disabled variant="outlined" size="small">
+          Default
+        </HawaButton>
+      )}
+      {/* {props.default && <HawaChip size="normal" label="Default" />} */}
       {!props.default && <HawaButton size="small">Make Default</HawaButton>}
       <HawaButton tooltip="Delete">
         <FaTimes />

package/src/elements/HawaTextField.tsx

@@ -50,7 +50,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center"
   let defaultInputStyle =
-    "block w-full rounded outline outline-gray-300 bg-white p-2 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"
+    "block w-full rounded outline outline-1 outline-gray-300 bg-white p-2 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"
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 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"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  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",

package/src/layout/HawaAppLayout.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useRef, useState } from "react"
 import clsx from "clsx"
 import { HiMenu } from "react-icons/hi"
 import { FaChevronRight } from "react-icons/fa"
+import { FiSettings } from "react-icons/fi"
 import useDiscloser from "../hooks/useDiscloser"
 import useBreakpoint from "../hooks/useBreakpoint"
-import { HawaMenu } from "../elements"
+import { HawaButton, HawaMenu } from "../elements"
 
 // TODO: when no navbar, the drawer can't be opened
 // TODO: when no pagetitle, navbar gets messy
@@ -29,6 +30,7 @@ type HawaAppLayoutTypes = {
   email?: string
   drawerSize?: "sm" | "md" | "large"
   profileMenuItems?: MenuItems[][]
+  onSettingsClick?: () => void
 }
 
 type MenuItems = {
@@ -40,6 +42,7 @@ type MenuItems = {
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   direction = "rtl",
   drawerSize = "md",
+  onSettingsClick,
   ...props
 }) => {
   const [openSideMenu, setOpenSideMenu] = useState(false)
@@ -89,7 +92,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 left-0 right-0 z-30 flex h-14 w-full items-center justify-between bg-layoutPrimary-500 p-2",
+            "fixed left-0 right-0 top-0 z-30 flex h-14 w-full items-center justify-between bg-layoutPrimary-500 p-2",
             isRTL ? "flex-row-reverse" : "flex-row"
           )}
         >
@@ -234,7 +237,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           <div
             dir={direction}
             className={clsx(
-              "fixed z-50 mb-2 flex h-14 flex-row items-center ",
+              "fixed z-50 mb-2 flex h-14 flex-row items-center transition-all ",
               size > 600 || openSideMenu
                 ? "bg-layoutPrimary-500"
                 : "w-0 bg-transparent"
@@ -245,7 +248,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   ? `${
                       drawerSizeStyle[openSideMenu ? "opened" : "closed"][
                         drawerSize
-                      ]
+                      ] - 16
                     }px`
                   : "full",
             }}
@@ -277,62 +280,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                 src={props.logoSymbol}
               />
             ) : null}
-
-            {/* Expand Button */}
-            {size > 600 ? (
-              <div
-                className={clsx("fixed right-0 w-fit transition-all")}
-                // style={isRTL ? {} : {left: }}
-                style={
-                  isRTL
-                    ? {
-                        right: `${
-                          drawerSizeStyle[openSideMenu ? "opened" : "closed"][
-                            drawerSize
-                          ] - 30
-                        }px`,
-                      }
-                    : {
-                        left: `${
-                          drawerSizeStyle[openSideMenu ? "opened" : "closed"][
-                            drawerSize
-                          ] - 30
-                        }px`,
-                      }
-                }
-              >
-                <div
-                  dir={direction}
-                  className={clsx(
-                    "relative top-0 left-0 transition-all",
-                    openSideMenu ? " opacity-100" : " opacity-0"
-                  )}
-                >
-                  <div
-                    onClick={() => setKeepOpen(!keepOpen)}
-                    className={
-                      "w-fit cursor-pointer rounded bg-gray-300 p-1 transition-all"
-                    }
-                  >
-                    <FaChevronRight
-                      fontSize={11}
-                      className={clsx(
-                        isRTL
-                          ? keepOpen
-                            ? "rotate-0"
-                            : "rotate-180"
-                          : keepOpen
-                          ? "rotate-180"
-                          : "rotate-0"
-                      )}
-                    />
-                  </div>
-                </div>
-              </div>
-            ) : null}
           </div>
           {/* Drawer Items */}
-          <div className="mt-14 mb-8">
+          <div className="mb-10 mt-14">
             {props.drawerItems?.map((dSection, dIndex) => (
               <div
                 key={dIndex}
@@ -441,6 +391,84 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
               </div>
             ))}
           </div>
+          {/* Drawer Footer */}
+          {openSideMenu && (
+            <div
+              className={clsx(
+                "fixed bottom-0 left-0 right-0 flex flex-row items-center bg-layoutPrimary-500 p-4",
+                openSideMenu ? "bg-layoutPrimary-500" : "bg-transparent",
+                onSettingsClick ? "justify-between" : "justify-end"
+              )}
+              style={{
+                width: `${
+                  drawerSizeStyle[openSideMenu ? "opened" : "closed"][
+                    drawerSize
+                  ] - 16
+                }px`,
+              }}
+            >
+              {onSettingsClick && (
+                <div
+                  className=" cursor-pointer rounded p-2 transition-all hover:bg-layoutPrimary-700"
+                  onClick={() => onSettingsClick()}
+                >
+                  <FiSettings />
+                </div>
+              )}
+              {/* Expand Button */}
+              {size > 600 ? (
+                <div
+                  className={clsx("w-fit transition-all")}
+                  // style={isRTL ? {} : {left: }}
+                  style={
+                    isRTL
+                      ? {
+                          right: `${
+                            drawerSizeStyle[openSideMenu ? "opened" : "closed"][
+                              drawerSize
+                            ] - 35
+                          }px`,
+                        }
+                      : {
+                          left: `${
+                            drawerSizeStyle[openSideMenu ? "opened" : "closed"][
+                              drawerSize
+                            ] - 35
+                          }px`,
+                        }
+                  }
+                >
+                  <div
+                    dir={direction}
+                    className={clsx(
+                      "relative left-0 top-0 transition-all",
+                      openSideMenu ? " opacity-100" : " opacity-0"
+                    )}
+                  >
+                    <div
+                      onClick={() => setKeepOpen(!keepOpen)}
+                      className={
+                        "w-fit cursor-pointer rounded bg-gray-300 p-2 transition-all hover:bg-gray-400"
+                      }
+                    >
+                      <FaChevronRight
+                        fontSize={14}
+                        className={clsx(
+                          isRTL
+                            ? keepOpen
+                              ? "rotate-0"
+                              : "rotate-180"
+                            : keepOpen
+                            ? "rotate-180"
+                            : "rotate-0"
+                        )}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          )}
         </div>
       </div>
       {/* 

package/src/layout/index.ts

@@ -3,6 +3,5 @@ export * from "./HawaBottomAppBar"
 export * from "./HawaSiteLayout"
 export * from "./HawaAppLayout"
 export * from "./HawaContainer"
-export * from "./SimpleGrid"
 export * from "./AppSidebar"
 export * from "./Footer"

package/src/styles.css

@@ -730,6 +730,9 @@ video {
 .mb-1 {
   margin-bottom: 0.25rem;
 }
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -742,9 +745,6 @@ video {
 .mb-5 {
   margin-bottom: 1.25rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .ml-0 {
   margin-left: 0px;
 }
@@ -2246,6 +2246,11 @@ body {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));

package/docs/CNAME

@@ -1 +0,0 @@
-hawa.style