@sikka/hawa 0.1.57 → 0.1.59

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,6 +1,14 @@
-import React, { FC } from "react"
-import { HawaLogoButton } from "../../elements"
-import { Card, CardContent, CardHeader, CardTitle } from "../../elements/Card"
+import React, { FC, useState } from "react"
+import { Button } from "../../elements"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../elements/Card"
+import { cn } from "../../util"
 
 type SelectPaymentTypes = {
   viaMada: boolean
@@ -17,72 +25,163 @@ type SelectPaymentTypes = {
   applePayLabel: string
   visaMasterLabel: string
   googlePayLabel: string
-  handleMada: any
-  handleWallet: any
-  handleSTCPay: any
-  handlePayPal: any
-  handleApplePay: any
-  handleCreditCard: any
-  handleGooglePay: any
+  handleContinue: (string) => void
 }
 
 export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
+  const [selectedMethod, setSelectedMethod] = useState("")
   return (
     <Card>
       <CardHeader>
         <CardTitle>Choose Payment Method</CardTitle>
+        <CardDescription>
+          And you'll be directed to the next step to complete the payment
+        </CardDescription>
       </CardHeader>
-      <CardContent>
-        {props.viaWallet && (
-          <HawaLogoButton
-            logo="wallet"
-            buttonText={props.walletLabel}
-            onClick={props.handleWallet}
+      <CardContent className="grid grid-cols-2 gap-4">
+        <Button
+          className={cn(
+            "flex w-full flex-col gap-2 pt-6",
+            selectedMethod === "mada" && "outline outline-4 outline-primary"
+          )}
+          variant="outline"
+          size="heightless"
+          disabled={!props.viaMada}
+          onClick={() => setSelectedMethod("mada")}
+        >
+          <img
+            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
+            className="h-6"
           />
-        )}
-        {props.viaCreditCard && (
-          <HawaLogoButton
-            logo="visa/master"
-            buttonText={props.visaMasterLabel}
-            onClick={props.handleCreditCard}
-          />
-        )}
-        {props.viaMada && (
-          <HawaLogoButton
-            logo="mada"
-            buttonText={props.madaLabel}
-            onClick={props.handleMada}
+          <span>{props.madaLabel}</span>
+        </Button>
+
+        <Button
+          className={cn(
+            "flex w-full flex-col gap-2",
+            selectedMethod === "apple-pay" &&
+              "outline outline-4 outline-primary"
+          )}
+          variant="outline"
+          size="heightless"
+          disabled={!props.viaApplePay}
+          onClick={() => setSelectedMethod("apple-pay")}
+        >
+          <img
+            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
+            className="h-11"
           />
-        )}
-        {props.viaSTCPay && (
-          <HawaLogoButton
-            logo="stcpay"
-            buttonText={props.stcPayLabel}
-            onClick={props.handleSTCPay}
+          <span>{props.applePayLabel}</span>
+        </Button>
+
+        <Button
+          className={cn(
+            "flex w-full flex-col gap-2",
+            selectedMethod === "visa-master" &&
+              "outline outline-4 outline-primary"
+          )}
+          variant="outline"
+          size="heightless"
+          disabled={!props.viaCreditCard}
+          onClick={() => setSelectedMethod("visa-master")}
+        >
+          <img
+            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
+            className="h-6"
           />
-        )}
-        {props.viaPayPal && (
-          <HawaLogoButton
-            logo="paypal"
-            buttonText={props.paypalLabel}
-            onClick={props.handlePayPal}
+          <span>{props.visaMasterLabel}</span>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="heightless"
+          className={cn(
+            "flex w-full flex-col gap-2",
+            selectedMethod === "wallet" && "outline outline-4 outline-primary"
+          )}
+          disabled={!props.viaWallet}
+          onClick={() => setSelectedMethod("wallet")}
+        >
+          <svg
+            version="1.1"
+            fill="currentColor"
+            viewBox="0 0 223 223"
+            className="h-6 w-6"
+          >
+            <g>
+              <path
+                d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
+                  M169.515,123.967c-7.082,0-12.823-5.741-12.823-12.823c0-7.082,5.741-12.823,12.823-12.823c7.082,0,12.823,5.741,12.823,12.823
+                  C182.338,118.225,176.597,123.967,169.515,123.967z"
+              />
+              <path
+                d="M123.509,68.5H205v-33c0-8.271-6.395-15-14.667-15h-175C7.062,20.5,0,27.229,0,35.5v152c0,8.271,7.062,15,15.333,15h175
+                  c8.271,0,14.667-6.729,14.667-15v-34h-81.342L123.509,68.5z"
+              />
+            </g>
+          </svg>
+          <span>{props.walletLabel}</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="heightless"
+          className={cn(
+            "flex w-full flex-col gap-2",
+            selectedMethod === "stc-pay" && "outline outline-4 outline-primary"
+          )}
+          disabled={!props.viaSTCPay}
+          onClick={() => setSelectedMethod("stc-pay")}
+        >
+          <img
+            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
+            className="h-6"
           />
-        )}
-        {props.viaGooglePay && (
-          <HawaLogoButton
-            logo="googlepay"
-            buttonText={props.googlePayLabel}
-            onClick={props.handleGooglePay}
+          <span>{props.stcPayLabel}</span>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="heightless"
+          className={cn(
+            "flex w-full flex-col gap-2",
+            selectedMethod === "google-pay" &&
+              "outline outline-4 outline-primary"
+          )}
+          disabled={!props.viaGooglePay}
+          onClick={() => setSelectedMethod("google-pay")}
+        >
+          <img
+            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
+            className="h-6"
           />
-        )}
-        {props.viaApplePay && (
-          <HawaLogoButton
-            logo="applepay"
-            buttonText={props.applePayLabel}
-            onClick={props.handleApplePay}
+          <span>{props.googlePayLabel}</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="heightless"
+          className={cn(
+            "col-span-2 flex w-full flex-col gap-2",
+            selectedMethod === "paypal" && "outline outline-4 outline-primary"
+          )}
+          disabled={!props.viaPayPal}
+          onClick={() => setSelectedMethod("paypal")}
+        >
+          <img
+            src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
+            className="h-6"
           />
-        )}
+          <span>{props.paypalLabel}</span>
+        </Button>
       </CardContent>
+      <CardFooter>
+        <Button
+          onClick={() => props.handleContinue(selectedMethod)}
+          className="w-full"
+          disabled={!selectedMethod}
+        >
+          Continue
+        </Button>
+      </CardFooter>
     </Card>
   )
 }

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -123,7 +123,7 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                       <svg
                         stroke="currentColor"
                         fill="currentColor"
-                        stroke-width="0"
+                        strokeWidth="0"
                         viewBox="0 0 16 16"
                         height="1em"
                         width="1em"

package/src/blocks/Pricing/HorizontalPricing.tsx

@@ -105,13 +105,13 @@ const CheckIcons = () => (
     <svg
       fill="none"
       viewBox="0 0 24 24"
-      stroke-width="1.5"
+      strokeWidth="1.5"
       stroke="currentColor"
       className="default h-8 w-8 text-neutral-500"
     >
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
       />
     </svg>
@@ -121,8 +121,8 @@ const CheckIcons = () => (
       className="active hidden h-8 w-8 text-blue-500"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
       />
     </svg>

package/src/blocks/Referral/ReferralAccount.tsx

@@ -28,7 +28,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                 <svg
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 512 512"
                   height="1em"
                   width="1em"
@@ -51,7 +51,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
                 <svg
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 512 512"
                   height="1em"
                   width="1em"

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -134,7 +134,7 @@ const SettlementAccountCard = (props) => {
               className="rotate-90"
               stroke="currentColor"
               fill="currentColor"
-              stroke-width="0"
+              strokeWidth="0"
               viewBox="0 0 16 16"
               height="1em"
               width="1em"

package/src/elements/Button.tsx

@@ -25,6 +25,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
+        heightless: "px-4 py-4",
         xs: "h-fit py-1 text-[10px] px-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",

package/src/elements/DragDropImages.tsx

@@ -20,6 +20,9 @@ type DragDropImagesTypes = {
   onClearFiles: any
   maxSize: number
   errorMessages: string
+  disclaimer?: boolean
+  termsLink?: string
+  privacyLink?: string
   /** The translation object, use this to replace the default text with any translated text you want.*/
   texts: {
     errorUploading: any
@@ -29,6 +32,10 @@ type DragDropImagesTypes = {
     fileTooLarge: any
     acceptedFileTypes: any
     invalidFileType: any
+    terms?: string
+    privacyPolicy?: string
+    disclaimer?: string
+    and?: string
   }
 }
 
@@ -44,8 +51,11 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
   showPreview,
   onDeleteFile,
   onClearFiles,
+  disclaimer,
   maxSize,
   label,
+  termsLink,
+  privacyLink,
 }) => {
   const [cmp, setCmp] = useState(0)
   const [max, setMax] = useState<any>(0)
@@ -197,7 +207,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )}
       <div
         className={clsx(
-          "flex flex-col justify-center rounded border border-dashed  transition-all hover:bg-gray-100 dark:hover:bg-gray-800 ",
+          "flex flex-col justify-center rounded border border-dashed bg-gray-50  p-6 transition-all hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-800 ",
           isDragActive ? "bg-gray-200 dark:bg-gray-700" : "bg-background"
         )}
       >
@@ -207,10 +217,10 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             <svg
               stroke="currentColor"
               fill="none"
-              stroke-width="2"
+              strokeWidth="2"
               viewBox="0 0 24 24"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+              strokeLinecap="round"
+              strokeLinejoin="round"
               height="1.5em"
               width="1.5em"
             >
@@ -246,6 +256,24 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
         ) : null}
         <div className="px-4">{fileRejections[0]?.errors[0]?.code && errs}</div>
       </div>
+      {disclaimer && (
+        <div className="mt-2 text-sm text-muted-foreground/50">
+          {texts.disclaimer ?? "By uploading a file you agree to our"}{" "}
+          <a
+            href={termsLink}
+            className="clickable-link text-muted-foreground/50"
+          >
+            {texts.terms ?? "Terms"}
+          </a>{" "}
+          {texts.and ?? "and"}{" "}
+          <a
+            href={privacyLink}
+            className="clickable-link text-muted-foreground/50"
+          >
+            {texts.privacyPolicy ?? "Privacy Policy"}
+          </a>
+        </div>
+      )}
     </div>
   )
 }

package/src/elements/DropdownMenu.tsx

@@ -25,20 +25,20 @@ const DropdownMenuSubTrigger = React.forwardRef<
     )}
     {...props}
   >
-    <div className="flex flex-row items-center gap-1">{children}</div>{" "}
+    <div className="flex flex-row items-center gap-2">{children}</div>{" "}
     {/* <ChevronRight className="ml-auto h-4 w-4" /> */}
     <svg
       aria-label="Chevron Right Icon"
       stroke="currentColor"
       fill="currentColor"
-      stroke-width="0"
+      strokeWidth="0"
       viewBox="0 0 16 16"
       height="1em"
       width="1em"
       className={cn(props.dir === "rtl" ? "rotate-180" : "")}
     >
       <path
-        fill-rule="evenodd"
+        fillRule="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>
@@ -72,7 +72,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50  overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -85,17 +85,22 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
+    end?: any
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
     {...props}
-  />
+  >
+    <div className="flex flex-row items-center gap-2">{props.children}</div>
+
+    {props.end && props.end}
+  </DropdownMenuPrimitive.Item>
 ))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
@@ -119,7 +124,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
           aria-label="Check Mark"
           stroke="currentColor"
           fill="currentColor"
-          stroke-width="0"
+          strokeWidth="0"
           viewBox="0 0 512 512"
           height="0.60em"
           width="0.60em"
@@ -157,9 +162,9 @@ const DropdownMenuRadioItem = React.forwardRef<
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
           className="h-2 w-2 fill-current"
         >
           <circle cx="12" cy="12" r="10"></circle>
@@ -239,6 +244,8 @@ type Item = {
   icon?: any
   label: string
   value: string
+  end?: any
+  presist?: boolean
   action?: () => void
   highlighted?: boolean
   subitems?: SubItem[] // Note the use of the optional modifier
@@ -255,8 +262,8 @@ export const DropdownMenu = ({
   triggerClassname,
   align,
   alignOffset,
+  width = "default",
 }: {
-  // ... other prop types
   trigger?: any
   items?: Item[]
   direction?: "rtl" | "ltr"
@@ -267,8 +274,14 @@ export const DropdownMenu = ({
   side?: ExtendedDropdownMenuContentProps["side"]
   align?: ExtendedDropdownMenuContentProps["align"]
   alignOffset?: ExtendedDropdownMenuContentProps["alignOffset"]
-  // ... more prop types
+  width?: "default" | "sm" | "lg" | "parent"
 }) => {
+  const widthStyles = {
+    default: "min-w-[8rem]",
+    sm: "w-fit",
+    lg: "w-[200px]",
+    parent: "ddm-w-parent",
+  }
   return (
     <DropdownMenuRoot dir={direction}>
       <DropdownMenuTrigger className={triggerClassname}>
@@ -278,7 +291,7 @@ export const DropdownMenu = ({
         <DropdownMenuContent
           side={side}
           sideOffset={sideOffset}
-          className={cn(className, "flex flex-col gap-1")}
+          className={cn(className, widthStyles[width], "flex flex-col gap-2")}
           align={align}
           alignOffset={alignOffset}
         >
@@ -293,7 +306,7 @@ export const DropdownMenu = ({
                   <DropdownMenuSubContent>
                     {item.subitems.map((subitem, subIndex) => (
                       <DropdownMenuItem
-                        className="flex flex-row gap-1"
+                        className="flex flex-row gap-2"
                         onSelect={() => subitem.action()}
                         key={subIndex}
                       >
@@ -306,9 +319,15 @@ export const DropdownMenu = ({
               </DropdownMenuSub>
             ) : (
               <DropdownMenuItem
-                className="flex flex-row gap-1"
+                className="flex flex-row gap-2"
                 key={index}
-                onSelect={() => item.action()}
+                onSelect={(e) => {
+                  if (item.presist) {
+                    e.preventDefault()
+                  }
+                  item.action()
+                }}
+                end={item.end}
               >
                 {item.icon && item.icon}
                 {item.label}
@@ -320,21 +339,3 @@ export const DropdownMenu = ({
     </DropdownMenuRoot>
   )
 }
-
-// export {
-//   DropdownMenu,
-//   DropdownMenuTrigger,
-//   DropdownMenuContent,
-//   DropdownMenuItem,
-//   DropdownMenuCheckboxItem,
-//   DropdownMenuRadioItem,
-//   DropdownMenuLabel,
-//   DropdownMenuSeparator,
-//   DropdownMenuShortcut,
-//   DropdownMenuGroup,
-//   DropdownMenuPortal,
-//   DropdownMenuSub,
-//   DropdownMenuSubContent,
-//   DropdownMenuSubTrigger,
-//   DropdownMenuRadioGroup,
-// }

package/src/elements/HawaCodeBlock.tsx

@@ -108,10 +108,10 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
                   aria-label="Copy Icon"
                   stroke="currentColor"
                   fill="none"
-                  stroke-width="2"
+                  strokeWidth="2"
                   viewBox="0 0 24 24"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   height="1em"
                   width="1em"
                 >

package/src/elements/HawaDropdownMenu.tsx

@@ -101,13 +101,13 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
                   aria-label="Chevron Right Icon"
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 16 16"
                   height="1em"
                   width="1em"
                 >
                   <path
-                    fill-rule="evenodd"
+                    fillRule="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>
@@ -157,7 +157,7 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
                   aria-label="Check Mark"
                   stroke="currentColor"
                   fill="currentColor"
-                  stroke-width="0"
+                  strokeWidth="0"
                   viewBox="0 0 512 512"
                   height="0.60em"
                   width="0.60em"
@@ -185,7 +185,7 @@ export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
                 aria-label="Check Mark"
                 stroke="currentColor"
                 fill="currentColor"
-                stroke-width="0"
+                strokeWidth="0"
                 viewBox="0 0 512 512"
                 height="0.60em"
                 width="0.60em"

package/src/elements/HawaRadio.tsx

@@ -155,9 +155,9 @@ export const HawaRadio: FC<RadioTypes> = ({
                 >
                   <path
                     stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M1 5h12m0 0L9 1m4 4L9 9"
                   />
                 </svg> */}

package/src/elements/HawaSettingsRow.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from "react"
 import { HawaTextField } from "./HawaTextField"
-import { HawaSwitch } from "./HawaSwitch"
 import { HawaColorPicker } from "./HawaColorPicker"
 import { HawaRange } from "./HawaRange"
 import { HawaRadio } from "./HawaRadio"
 import { HawaSelect } from "./HawaSelect"
+import { Switch } from "./Switch"
 
 type SettingsRowTypes = {
   settingsLabel: string
@@ -24,7 +24,7 @@ type SettingsRowTypes = {
     max?: any
   }
   switchProps: {
-    size: "small" | "normal" | "large"
+    size: "sm" | "default"
   }
   selectProps: {
     label?: string
@@ -64,7 +64,7 @@ export const HawaSettingsRow: FC<SettingsRowTypes> = ({
         )}{" "}
       </div>
       {settingsType === "text" && <HawaTextField margin="none" width="small" />}
-      {settingsType === "boolean" && <HawaSwitch {...switchProps} />}
+      {settingsType === "boolean" && <Switch {...switchProps} />}
       {settingsType === "range" && <HawaRange {...rangeProps} />}
       {settingsType === "color" && <HawaColorPicker {...colorProps} />}
       {settingsType === "radio" && <HawaRadio {...radioProps} />}

package/src/elements/HawaStepper.tsx

@@ -56,7 +56,7 @@ export const HawaStepper: FC<THawaTimeline> = ({
                       aria-label="Check Mark"
                       stroke="currentColor"
                       fill="currentColor"
-                      stroke-width="0"
+                      strokeWidth="0"
                       viewBox="0 0 512 512"
                       height="0.60em"
                       width="0.60em"