@sikka/hawa 0.0.270 → 0.0.273

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

@@ -14,9 +14,10 @@ type LandingCardTypes = {
     linkText?: string
   }
   buttonLink?: string
+  className?: any
 }
 export const HawaLandingCard: FC<LandingCardTypes> = ({
-  orientation,
+  orientation = "horizontal",
   ...props
 }) => {
   let cardStyles = {
@@ -36,12 +37,13 @@ export const HawaLandingCard: FC<LandingCardTypes> = ({
       className={clsx(
         cardStyles[orientation],
         "flex flex-col p-10",
-        "relative overflow-hidden"
+        "relative overflow-hidden",
+        props.className
       )}
       {...props}
     >
-      {props.texts.titleTip && (
-        <div className="text-sm text-red-600">{props.texts.titleTip}</div>
+      {props.texts?.titleTip && (
+        <div className="text-sm text-red-600">{props.texts?.titleTip}</div>
       )}
       {props.imageURL && (
         <img
@@ -50,15 +52,15 @@ export const HawaLandingCard: FC<LandingCardTypes> = ({
         />
       )}
 
-      {props.texts.title && (
-        <div className="mt-2 text-lg font-medium">{props.texts.title} </div>
+      {props.texts?.title && (
+        <div className="mt-2 text-lg font-medium">{props.texts?.title} </div>
       )}
-      {props.texts.description && (
-        <div className="z-10 mt-4 text-sm">{props.texts.description}</div>
+      {props.texts?.description && (
+        <div className="z-10 mt-4 text-sm">{props.texts?.description}</div>
       )}
-      {props.texts.linkText && (
+      {props.texts?.linkText && (
         <div className="z-10 mt-6 text-sm underline underline-offset-8">
-          {props.texts.linkText}
+          {props.texts?.linkText}
         </div>
       )}
     </div>

package/src/elements/HawaLoading.tsx

@@ -0,0 +1,83 @@
+import React, { FC } from "react"
+import clsx from "clsx"
+
+type LoadingTypes = {
+  size?: "button" | "sm" | "normal" | "lg" | "xl"
+  design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots"
+  color?: any
+}
+
+export const HawaLoading: FC<LoadingTypes> = ({
+  design = "spinner",
+  size = "sm",
+  color,
+  ...props
+}) => {
+  let sizeStyles = {
+    button: "h-4 w-4",
+    sm: "h-6 w-6",
+    normal: "h-8 w-8",
+    lg: "h-14 w-14",
+    xl: "h-24 w-24",
+  }
+
+  let animationStyles = {
+    pulse: "animate-in fade-in duration-1000",
+    bounce: "animate-bounce",
+  }
+  switch (design.split("-")[0]) {
+    case "dots":
+      return (
+        <div className="flex flex-row space-x-2 ">
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-100 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "bg-buttonPrimary-500"
+            )}
+          ></div>
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-200 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+
+              color ? color : "bg-buttonPrimary-500"
+            )}
+          ></div>
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-300 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+
+              color ? color : "bg-buttonPrimary-500"
+            )}
+          ></div>
+        </div>
+      )
+
+    default:
+      return (
+        <div className="flex flex-row gap-x-3">
+          <div aria-label="Loading..." role="status">
+            <svg
+              className={clsx(sizeStyles[size], "animate-spin")}
+              viewBox="3 3 18 18"
+            >
+              <path
+                className="fill-gray-200"
+                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"}
+                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>
+          </div>
+        </div>
+      )
+  }
+}

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

@@ -60,6 +60,7 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
               },
               lineHeight: "1.25rem",
               padding: "0.37rem",
+              paddingLeft: 0,
             }),
             singleValue: (base) => ({
               ...base,
@@ -84,6 +85,8 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
             DropdownIndicator: () => null,
             IndicatorSeparator: () => null,
           }}
+          // className="bg-red-500"
+
           options={Countries}
           isMulti={false}
           isSearchable={true}
@@ -96,7 +99,8 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
         <input
           onChange={props.handleChange}
           type="number"
-          className="block w-full appearance-none rounded rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 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"
+          placeholder="531045453"
+          className="block w-full appearance-none rounded rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 text-[0.875rem] 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"
         />
         {props.helperText && (
           <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">

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

@@ -4,16 +4,14 @@ import clsx from "clsx"
 type RadioTypes = {
   orientation?: "vertical" | "horizontal"
   design?: "default" | "tabs" | "cards" | "bordered"
-  options?: [
-    {
-      value: any
-      label: any
-      disabled?: any
-      sublabel?: any
-      beforeIcon?: any
-      afterIcon?: any
-    }
-  ]
+  options?: {
+    value: any
+    label: any
+    disabled?: any
+    sublabel?: any
+    icon?: any
+  }[]
+
   onChangeTab?: any
   defaultValue?: any
 }
@@ -59,7 +57,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                       : inactiveTabStyle
                   )}
                 >
-                  {/* {opt.icon} */}
+                  {opt.icon && opt.icon}
                   {opt.label}
                 </button>
               </li>
@@ -130,7 +128,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 { HawaLoading } from "./HawaLoading"
+// 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,28 +43,29 @@ 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 />
+        <HawaLoading />
       ) : (
         <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>
   )

package/src/elements/HawaStepper.tsx

@@ -60,7 +60,6 @@ export const HawaStepper: FC<THawaTimeline> = ({
                       viewBox="0 0 512 512"
                       height="0.60em"
                       width="0.60em"
-                      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>

package/src/elements/HawaTable.tsx

@@ -141,7 +141,6 @@ export const HawaTable: FC<TableTypes> = ({
                   viewBox="0 0 512 512"
                   height="1em"
                   width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                 </svg>
@@ -161,7 +160,6 @@ export const HawaTable: FC<TableTypes> = ({
                     viewBox="0 0 16 16"
                     height="1em"
                     width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <path d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"></path>
                   </svg>
@@ -175,7 +173,6 @@ export const HawaTable: FC<TableTypes> = ({
                     viewBox="0 0 16 16"
                     height="1em"
                     width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       fill-rule="evenodd"
@@ -362,7 +359,6 @@ export const HawaTable: FC<TableTypes> = ({
                                   viewBox="0 0 16 16"
                                   height="1em"
                                   width="1em"
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
                                   <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>
@@ -423,7 +419,6 @@ export const HawaTable: FC<TableTypes> = ({
                   viewBox="0 0 16 16"
                   height="1em"
                   width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
@@ -534,7 +529,6 @@ export const HawaTable: FC<TableTypes> = ({
                   viewBox="0 0 16 16"
                   height="1em"
                   width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"

package/src/elements/InvoiceAccordion.tsx

@@ -74,7 +74,6 @@ export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
               aria-hidden="true"
               height="2em"
               width="2em"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 fill-rule="evenodd"
@@ -110,7 +109,6 @@ export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
                 viewBox="0 0 16 16"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
               </svg>

package/src/elements/UsageCard.tsx

@@ -22,7 +22,6 @@ export const UsageCard: FC<UsageCardTypes> = (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/elements/UserFeedback.tsx

@@ -68,7 +68,6 @@ export const UserFeedback: FC<ComponentTypes> = ({
             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/index.ts

@@ -23,7 +23,7 @@ export * from "./HawaCopyrights"
 export * from "./HawaStepper"
 export * from "./HawaStats"
 export * from "./HawaCodeBlock"
-export * from "./HawaSpinner"
+export * from "./HawaLoading"
 export * from "./HawaRadio"
 export * from "./HawaDatepicker"
 export * from "./DragDropImages"

package/src/layout/Banner.tsx

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

package/src/layout/HawaAppLayout.tsx

@@ -142,7 +142,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
@@ -199,7 +198,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   className="absolute -left-1 h-10 w-10 text-gray-400"
                   fill="currentColor"
                   viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fillRule="evenodd"
@@ -438,7 +436,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                     stroke-linejoin="round"
                     height="1em"
                     width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <circle cx="12" cy="12" r="3"></circle>
                     <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -146,7 +146,6 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
@@ -505,7 +504,6 @@ const AvatarIcon = () => (
     className="absolute -left-1 h-10 w-10 text-gray-400"
     fill="currentColor"
     viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
@@ -542,7 +540,6 @@ const ArrowIcon = ({ pointing, color }) => {
       )}
       fill={color}
       viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         fillRule="evenodd"
@@ -563,7 +560,6 @@ const SettingsIcon = () => (
     stroke-linejoin="round"
     height="1em"
     width="1em"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <circle cx="12" cy="12" r="3"></circle>
     <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>

package/src/layout/HawaGrid.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from "react"
+import clsx from "clsx"
+
+type GridTypes = {
+  children?: any
+}
+
+export const HawaGrid: FC<GridTypes> = (props) => {
+  return (
+    // [&>*:not(:first-child)]:mt-8
+    <div className=" columns-1 gap-5 sm:columns-2 sm:gap-8 md:columns-3 lg:columns-4 [&>*:not(:first-child)]:mt-8">
+      {props.children}
+    </div>
+  )
+}

package/src/layout/HawaSiteLayout.tsx

@@ -125,7 +125,6 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
                 aria-hidden="true"
                 height="1.6em"
                 width="1.6em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path
                   fill-rule="evenodd"

package/src/layout/index.ts

@@ -4,6 +4,7 @@ export * from "./HawaSiteLayout"
 export * from "./HawaAppLayout"
 export * from "./HawaAppLayoutSimplified"
 export * from "./HawaContainer"
+export * from "./HawaGrid"
 export * from "./AppSidebar"
 export * from "./Footer"
 export * from "./Banner"