@sikka/hawa 0.0.269 → 0.0.271

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.269",
+  "version": "0.0.271",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -96,7 +96,9 @@
     "@storybook/manager-webpack5/webpack": "^5"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "clsx": "^1.2.1",
+    "cmdk": "^0.2.0",
     "react": "^18.2.0",
     "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.28.0",

package/src/blocks/Misc/EmptyState.tsx

@@ -27,10 +27,9 @@ export const EmptyState: FC<TEmptyState> = ({
             viewBox="0 0 512 512"
             height="0.35em"
             width="0.35em"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
-          </svg>
+          </svg>{" "}
         </div>
         <div className="m-2 text-xl font-bold">
           {texts?.youreCaughtUp ?? "You're all caught up"}

package/src/blocks/Misc/NoPermission.tsx

@@ -17,18 +17,16 @@ export const NoPermission: FC<TNoPermission> = ({
     <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">
-          <svg
-            stroke="currentColor"
-            fill="white"
-            stroke-width="0"
-            viewBox="0 0 448 512"
-            height="0.35em"
-            width="0.35em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
-          </svg>
-        </div>
+        <svg
+    stroke="currentColor"
+    fill="white"
+    stroke-width="0"
+    viewBox="0 0 448 512"
+    height="0.35em"
+    width="0.35em"
+  >
+    <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+  </svg>        </div>
         <div className="m-2 text-xl font-bold">
           {texts?.title ?? "You don't have permission"}
         </div>

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -7,7 +7,6 @@ const CheckMark = () => (
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
@@ -23,7 +22,6 @@ const UncheckMark = () => (
     aria-hidden="true"
     fill="currentColor"
     viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
@@ -137,7 +135,6 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                         viewBox="0 0 16 16"
                         height="1em"
                         width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
                       >
                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
                       </svg>

package/src/blocks/Referral/ReferralAccount.tsx

@@ -30,7 +30,6 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                 viewBox="0 0 512 512"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
               </svg>{" "}
@@ -54,7 +53,6 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                 viewBox="0 0 512 512"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
               </svg>{" "}

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -115,7 +115,6 @@ const SettlementAccountCard = (props) => (
           className="h-5 w-5"
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"

package/src/elements/ArrowCarousel.tsx

@@ -30,7 +30,6 @@ const Arrow = (props: {
       )}
       fill={props.disabled && "grey"}
       viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         fillRule="evenodd"

package/src/elements/BackToTop.tsx

@@ -117,7 +117,6 @@ export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
           "h-6 w-6 shrink-0 rotate-180 transition-all  disabled:bg-gray-200"
         )}
         viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
       >
         <path
           fillRule="evenodd"

package/src/elements/DragDropImages.tsx

@@ -159,7 +159,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           className="h-5 w-5"
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"
@@ -214,7 +213,6 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
               stroke-linejoin="round"
               height="1.5em"
               width="1.5em"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
               <path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>

package/src/elements/DraggableCard.tsx

@@ -16,7 +16,6 @@ export const DraggableCard: FC<DraggableCardTypes> = (props) => {
           aria-hidden="true"
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
         </svg>

package/src/elements/HawaAccordion.tsx

@@ -34,7 +34,6 @@ export const HawaAccordion: FC<AccordionTypes> = (props) => {
           }  shrink-0 transition-all`}
           fill="currentColor"
           viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"

package/src/elements/HawaAlert.tsx

@@ -180,7 +180,6 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
               className="h-5 w-5"
               fill="currentColor"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 fillRule="evenodd"

package/src/elements/HawaButton.tsx

@@ -210,7 +210,7 @@ export const HawaButton: FC<ButtonProps> = ({
               {isClicked && feedback ? (
                 <div className="w-full  text-center">{buttonText}</div>
               ) : null}
-              <div className="flex w-full flex-row items-center justify-center gap-2 whitespace-nowrap">
+              <div className="flex w-full flex-row items-center select-none justify-center gap-2 whitespace-nowrap">
                 {props.startIcon && props.startIcon}
                 {children}
                 {props.endIcon && props.endIcon}

package/src/elements/HawaCodeBlock.tsx

@@ -130,7 +130,6 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
                 stroke-linejoin="round"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <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>
@@ -154,7 +153,6 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
             stroke-linejoin="round"
             height="1em"
             width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <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>

package/src/elements/HawaDropdownMenu.tsx

@@ -0,0 +1,267 @@
+import React, { ReactNode, useEffect, useRef, useState, FC } from "react"
+import clsx from "clsx"
+import { Command } from "cmdk"
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+
+// TODO: add width to decrease width
+
+interface TMenuTypes {
+  children?: any
+  direction?: "rtl" | "ltr"
+}
+
+type MenuItems = {}
+
+export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
+  const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
+  const [urlsChecked, setUrlsChecked] = React.useState(false)
+  const [person, setPerson] = React.useState("pedro")
+
+  let dropdownData = {
+    items: [
+      {
+        label: "New Tab",
+        shortcut: "ctrl + T",
+        disabled: false,
+      },
+      {
+        label: "New Windows",
+        shortcut: "ctrl + N",
+        disabled: false,
+      },
+      {
+        label: "New Private Window",
+        shortcut: "⇧+ctrl+N",
+        disabled: true,
+      },
+    ],
+    checkboxes: [
+      {
+        label: "Show Bookmarks",
+        shortcut: "ctrl + B",
+        disabled: false,
+      },
+      {
+        label: "Show Something",
+        shortcut: "ctrl + C",
+        disabled: false,
+      },
+      {
+        label: "Show that",
+        shortcut: "ctrl + T",
+        disabled: false,
+      },
+    ],
+  }
+  return (
+    <DropdownMenu.Root dir={direction}>
+      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="min-w-[220px] rounded bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
+          sideOffset={5}
+        >
+          {dropdownData.items.map((it, i) => (
+            <DropdownMenu.Item
+              key={i}
+              className="group relative flex h-[25px] select-none items-center justify-between 
+         rounded-inner  px-[5px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
+          data-[highlighted]:text-violet-1 "
+              //  ltr:pr-[25px] rtl:pl-[25px]
+              disabled={it.disabled}
+            >
+              {/* New Tab{" "} */}
+              {it.label}
+              <div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
+                {/* ml-auto pl-[20px] */}
+                {/* ⌘+T */}
+                {it.shortcut}
+              </div>
+            </DropdownMenu.Item>
+          ))}
+
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger
+              className=" group relative flex h-[25px] select-none  
+            items-center rounded-inner  justify-between flex-row
+            px-[5px] text-[13px] leading-none text-violet-11
+             outline-none data-[disabled]:pointer-events-none
+              data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9
+               data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1
+                data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ltr:pl-[25px] rtl:pl-[0px]  "
+            >
+              More Tools
+              <div
+                className="ltr:ml-auto rtl:pr-[5px]  ltr:pl-[0px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white
+               rtl:mr-auto rtl:rotate-180 rtl:pl-[0px]"
+              >
+                {/* <ChevronRightIcon /> */}
+                <svg
+                  aria-label="Chevron Right Icon"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 16 16"
+                  height="1em"
+                  width="1em"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+                  ></path>
+                </svg>
+              </div>
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.SubContent
+                className="min-w-[220px] rounded-inner bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
+                sideOffset={2}
+                alignOffset={-5}
+              >
+                <DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                  Save Page As…{" "}
+                  <div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
+                    ⌘+S
+                  </div>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                  Create Shortcut…
+                </DropdownMenu.Item>
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                  Name Window…
+                </DropdownMenu.Item>
+                <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
+                <DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
+                  Developer Tools
+                </DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Sub>
+
+          <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
+
+          {dropdownData.checkboxes.map((ch, i) => (
+            <DropdownMenu.CheckboxItem
+              key={i}
+              className="group relative flex h-[25px] select-none items-center
+             justify-between rounded-inner px-[5px] text-[13px] leading-none text-violet-11
+              outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
+               data-[highlighted]:text-violet-1"
+              //  ltr:pl-[25px] rtl:pr-[25px]
+              checked={bookmarksChecked}
+              onCheckedChange={setBookmarksChecked}
+            >
+              <DropdownMenu.ItemIndicator className="absolute inline-flex w-[25px] items-center justify-center  ltr:left-0 rtl:right-0">
+                <svg
+                  aria-label="Check Mark"
+                  stroke="currentColor"
+                  fill="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 512 512"
+                  height="0.60em"
+                  width="0.60em"
+                >
+                  <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+                </svg>{" "}
+              </DropdownMenu.ItemIndicator>
+              {/* Show Bookmarks{" "} */}
+              {ch.label}
+              <div className=" text-mauve-11  group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
+                {/* ml-auto pl-[20px] */}
+                {/* ⌘+B */}
+                {ch.shortcut}
+              </div>
+            </DropdownMenu.CheckboxItem>
+          ))}
+          {/*         
+          <DropdownMenu.CheckboxItem
+            className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
+            checked={urlsChecked}
+            onCheckedChange={setUrlsChecked}
+          >
+            <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
+              <svg
+                aria-label="Check Mark"
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                height="0.60em"
+                width="0.60em"
+              >
+                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+              </svg>{" "}
+            </DropdownMenu.ItemIndicator>
+            Show Full URLs
+          </DropdownMenu.CheckboxItem> */}
+
+          <DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
+
+          <DropdownMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve-11">
+            People
+          </DropdownMenu.Label>
+          <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
+            <DropdownMenu.RadioItem
+              className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
+              value="pedro"
+            >
+              <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
+                <svg
+                  aria-label="Filled Dot"
+                  width="15"
+                  height="15"
+                  viewBox="0 0 15 15"
+                  fill="none"
+                >
+                  <path
+                    d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z"
+                    fill="currentColor"
+                  ></path>
+                </svg>{" "}
+              </DropdownMenu.ItemIndicator>
+              Pedro Duarte
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem
+              className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
+              value="colm"
+            >
+              <DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
+                <svg
+                  aria-label="Filled Dot"
+                  width="15"
+                  height="15"
+                  viewBox="0 0 15 15"
+                  fill="none"
+                >
+                  <path
+                    d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z"
+                    fill="currentColor"
+                  ></path>
+                </svg>{" "}
+              </DropdownMenu.ItemIndicator>
+              Colm Tuite
+            </DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+
+          <DropdownMenu.Arrow className="fill-white" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+    // <Command label="Command Menu" className="bg-gray-100 drop-shadow-lg w-fit rounded">
+    //   <Command.Input className="rounded-t-inner" />
+    //   <Command.List className="p-1">
+    //     <Command.Empty>No results found.</Command.Empty>
+
+    //     <Command.Group heading="Letters">
+    //       <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">a</Command.Item>
+    //       <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">b</Command.Item>
+    //       <Command.Separator />
+    //       <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">c</Command.Item>
+    //     </Command.Group>
+
+    //     <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">Apple</Command.Item>
+    //   </Command.List>
+    // </Command>
+  )
+}

package/src/elements/HawaItemCard.tsx

@@ -120,7 +120,6 @@ export const HawaItemCard: FC<ItemCardTypes> = ({
                   aria-hidden="true"
                   fill="currentColor"
                   viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
                 </svg>

package/src/elements/HawaLogoButton.tsx

@@ -36,7 +36,6 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
           width="32px"
           height="32px"
           viewBox="0 0 32 32"
-          xmlns="http://www.w3.org/2000/svg"
           className="h-7 w-7"
         >
           <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
@@ -47,7 +46,6 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
       logoElement = (
         <svg
           version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
           x="0px"
           y="0px"
           className="h-5 w-5"
@@ -124,7 +122,6 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
       logoElement = (
         <svg
           version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 223 223"
           className="h-6 w-6"
         >

package/src/elements/HawaModal.tsx

@@ -69,7 +69,6 @@ export const HawaModal: FC<ModalTypes> = ({
               className="h-5 w-5"
               fill="currentColor"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 fillRule="evenodd"

package/src/elements/HawaPricingCard.tsx

@@ -78,7 +78,6 @@ export const HawaPricingCard: FC<PricingCardTypes> = ({
                   className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"
                   fill="currentColor"
                   viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <title>Check icon</title>
                   <path

package/src/elements/HawaRadio.tsx

@@ -52,12 +52,14 @@ export const HawaRadio: FC<RadioTypes> = ({
                     setSelectedOption(opt.value)
                     props.onChangeTab(opt.value)
                   }}
-                  className={
+                  className={clsx(
+                    "flex flex-row items-center justify-center gap-2",
                     selectedOption === opt.value
                       ? activeTabStyle
                       : inactiveTabStyle
-                  }
+                  )}
                 >
+                  {/* {opt.icon} */}
                   {opt.label}
                 </button>
               </li>
@@ -128,7 +130,6 @@ export const HawaRadio: FC<RadioTypes> = ({
                 {/* <svg
                   className="ml-3 h-5 w-5 "
                   aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 14 10"
                 >

package/src/elements/HawaSnackbar.tsx

@@ -6,7 +6,7 @@ type THawaSnackBar = {
   severity: "info" | "warning" | "error" | "success" | "none"
   title: string
   description: string
-  // handleClose?: () => void
+  onCloseSnakbar?: () => void
   duration?: number
   position?:
     | "top-left"
@@ -31,6 +31,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   severity = "info",
   position = "bottom-left",
   actions,
+  onCloseSnakbar,
   // handleClose,
   duration,
 }) => {
@@ -110,7 +111,10 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
           className="right-0 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)}
+          onClick={() => {
+            onCloseSnakbar()
+            setClosed(true)
+          }}
         >
           <span className="sr-only">Close</span>
           <svg
@@ -118,7 +122,6 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
             className="h-5 w-5"
             fill="currentColor"
             viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               fillRule="evenodd"

package/src/elements/HawaStats.tsx

@@ -1,22 +1,31 @@
 import React, { FC } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
+import { BsFilesAlt } from "react-icons/bs"
 
 type StatTypes = {
   label?: string
   color?: string
   number?: string
   helperText?: string
-  variant?: "plain" | "contained" | "outlined" | "brutalist" | "dropshadow"
+  icon?: any
+  variant?:
+    | "default"
+    | "plain"
+    | "contained"
+    | "outlined"
+    | "brutalist"
+    | "dropshadow"
   width?: "full" | "min" | "normal"
   isLoading?: boolean
   handleClick?: () => void
 }
-export const HawaStats: FC<StatTypes> = (props) => {
+export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
   let defaultStyle =
     "flex transition-all flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
+    default: "border bg-card text-card-foreground shadow-sm",
     contained: "bg-layoutPrimary-500",
     outlined: "ring-2 w-fit",
     neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white",
@@ -34,20 +43,21 @@ export const HawaStats: FC<StatTypes> = (props) => {
       className={clsx(
         defaultStyle,
         widthStyles[props.width],
-        statStyles[props.variant],
+        statStyles[variant],
         props.handleClick ? "cursor-pointer" : "cursor-default",
-        props.handleClick && props.variant === "dropshadow"
+        props.handleClick && variant === "dropshadow"
           ? "hover:drop-shadow-lg"
           : ""
       )}
       style={{
         backgroundColor: props.color
           ? props.color
-          : props.variant === "contained"
+          : variant === "contained"
           ? "var(--layout-primary-500)"
           : "",
       }}
     >
+      {props.icon && <div className="mb-2">{props.icon} </div>}
       <div>{props.label}</div>
       {props.isLoading ? (
         <HawaSpinner />
@@ -55,7 +65,7 @@ export const HawaStats: FC<StatTypes> = (props) => {
         <div className="text-2xl font-bold">{props.number}</div>
       )}
       {props.helperText ? (
-        <div className="text-xs">{props.helperText}</div>
+        <div className="text-xs text-muted-foreground">{props.helperText}</div>
       ) : null}
     </div>
   )