@sikka/hawa 0.1.86 → 0.1.87

package/dist/index.d.mts

@@ -171,6 +171,7 @@ type SubItem$2 = {
     icon?: any;
     action?: () => void;
     highlighted?: boolean;
+    disabled?: boolean;
 };
 type MenuItemType = {
     icon?: any;
@@ -181,6 +182,7 @@ type MenuItemType = {
     action?: () => void;
     highlighted?: boolean;
     subitems?: SubItem$2[];
+    disabled?: boolean;
 };
 interface DropdownMenuProps {
     trigger?: any;
@@ -1032,6 +1034,8 @@ declare const AppSidebar: React__default.FC<Props>;
 type FooterTypes = {
     logoText?: string;
     logoURL?: string;
+    copyRights?: string;
+    variation?: "default" | "minimal";
     socialLinks?: {
         twitter?: string;
         instagram?: string;
@@ -1115,11 +1119,15 @@ type AppLandingTypes = {
     handleSignUp: () => void;
     handleLanguage: () => void;
     handleColorMode: () => void;
-    texts: {
+    texts?: {
         signIn: string;
         signUp: string;
         lang: string;
+        newUserText?: string;
+        createAccount?: string;
     };
+    withoutSignUp?: boolean;
+    handleRouteToSignUp?: () => void;
     size: "small" | "normal" | "full";
 };
 declare const AppLanding: FC<AppLandingTypes>;

package/dist/index.d.ts

@@ -171,6 +171,7 @@ type SubItem$2 = {
     icon?: any;
     action?: () => void;
     highlighted?: boolean;
+    disabled?: boolean;
 };
 type MenuItemType = {
     icon?: any;
@@ -181,6 +182,7 @@ type MenuItemType = {
     action?: () => void;
     highlighted?: boolean;
     subitems?: SubItem$2[];
+    disabled?: boolean;
 };
 interface DropdownMenuProps {
     trigger?: any;
@@ -1032,6 +1034,8 @@ declare const AppSidebar: React__default.FC<Props>;
 type FooterTypes = {
     logoText?: string;
     logoURL?: string;
+    copyRights?: string;
+    variation?: "default" | "minimal";
     socialLinks?: {
         twitter?: string;
         instagram?: string;
@@ -1115,11 +1119,15 @@ type AppLandingTypes = {
     handleSignUp: () => void;
     handleLanguage: () => void;
     handleColorMode: () => void;
-    texts: {
+    texts?: {
         signIn: string;
         signUp: string;
         lang: string;
+        newUserText?: string;
+        createAccount?: string;
     };
+    withoutSignUp?: boolean;
+    handleRouteToSignUp?: () => void;
     size: "small" | "normal" | "full";
 };
 declare const AppLanding: FC<AppLandingTypes>;

package/dist/index.js

@@ -1504,6 +1504,7 @@ var DropdownMenuItem = React19.forwardRef(function(_param, ref) /* @__PURE__ */
         "inset"
     ]);
     return React19.createElement(DropdownMenuPrimitive.Item, _object_spread({
+        disabled: props.disabled,
         ref: ref,
         className: cn("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), /* @__PURE__ */ React19.createElement("div", {
@@ -1620,6 +1621,7 @@ var DropdownMenu = function(param) {
             dir: direction
         }, item.icon && item.icon, item.label), /* @__PURE__ */ React19.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React19.createElement(DropdownMenuSubContent, null, item.subitems.map(function(subitem, subIndex) {
             return /* @__PURE__ */ React19.createElement(DropdownMenuItem, {
+                disabled: subitem.disabled,
                 className: "flex flex-row gap-2",
                 onSelect: function() {
                     return subitem.action();
@@ -1627,6 +1629,7 @@ var DropdownMenu = function(param) {
                 key: subIndex
             }, subitem.icon && subitem.icon, subitem.label);
         })))) : /* @__PURE__ */ React19.createElement(DropdownMenuItem, {
+            disabled: item.disabled,
             className: "flex flex-row gap-2",
             key: index,
             onSelect: function(e) {
@@ -6700,10 +6703,10 @@ var useCarousel_default = useCarousel;
 // src/elements/Carousel.tsx
 var Carousel = function(param) {
     var images = param.images;
-    var imageWidth = 240 + 16;
+    var imageWidth = 1e3 + 16;
     var _useCarousel_default = useCarousel_default(imageWidth), containerRef = _useCarousel_default.containerRef, handleMouseDown = _useCarousel_default.handleMouseDown, handleMouseLeave = _useCarousel_default.handleMouseLeave, handleMouseUp = _useCarousel_default.handleMouseUp, handleMouseMove = _useCarousel_default.handleMouseMove;
     return /* @__PURE__ */ import_react54.default.createElement("div", {
-        className: "flex cursor-pointer snap-x  gap-4 overflow-x-scroll",
+        className: "flex cursor-pointer snap-x  gap-4 overflow-x-hidden justify-center items-center",
         onMouseDown: handleMouseDown,
         onMouseLeave: handleMouseLeave,
         onMouseUp: handleMouseUp,
@@ -6712,10 +6715,11 @@ var Carousel = function(param) {
     }, images.map(function(image, index) {
         return /* @__PURE__ */ import_react54.default.createElement("div", {
             key: index,
-            className: "h-40 w-60 flex-shrink-0"
+            className: "w-[1000px] h-96 flex-shrink-0"
         }, /* @__PURE__ */ import_react54.default.createElement("img", {
             src: image,
             alt: "Carousel Image ".concat(index),
+            width: imageWidth,
             className: "h-full w-full rounded-lg object-cover"
         }));
     }));
@@ -8377,13 +8381,30 @@ var AppSidebar = function(param) {
 var import_bs = require("react-icons/bs");
 var import_fa2 = require("react-icons/fa");
 var Footer = function(_param) {
-    var props = _extends({}, _object_destructuring_empty(_param));
+    var _param_variation = _param.variation, variation = _param_variation === void 0 ? "default" : _param_variation, props = _object_without_properties(_param, [
+        "variation"
+    ]);
     var _props_footerLinks;
+    var variationStyles = {
+        default: "rounded border",
+        minimal: "border-t"
+    };
     return /* @__PURE__ */ React.createElement("div", {
-        className: "sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4"
-    }, props.logoText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
-        className: "text-2xl font-bold"
-    }, props.logoText)), (_props_footerLinks = props.footerLinks) === null || _props_footerLinks === void 0 ? void 0 : _props_footerLinks.map(function(pagesSection) {
+        className: cn("flex w-full flex-row items-center justify-between gap-8  rounded bg-background p-4", variationStyles[variation])
+    }, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col items-center gap-2"
+    }, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-row items-center gap-2"
+    }, props.logoURL && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("img", {
+        className: "h-8",
+        src: props.logoURL
+    })), props.logoText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+        className: "text-2xl font-bold text-primary"
+    }, props.logoText))), props.copyRights && props.footerLinks && /* @__PURE__ */ React.createElement("div", {
+        className: "text-xs text-muted-foreground"
+    }, "\xa9 ", props.copyRights, " ", /* @__PURE__ */ new Date().getFullYear())), props.copyRights && !props.footerLinks && /* @__PURE__ */ React.createElement("div", {
+        className: "text-xs text-muted-foreground"
+    }, "\xa9 ", props.copyRights, " ", /* @__PURE__ */ new Date().getFullYear()), (_props_footerLinks = props.footerLinks) === null || _props_footerLinks === void 0 ? void 0 : _props_footerLinks.map(function(pagesSection) {
         return /* @__PURE__ */ React.createElement("div", {
             className: "flex w-32 flex-col gap-2"
         }, /* @__PURE__ */ React.createElement("div", {
@@ -8398,14 +8419,18 @@ var Footer = function(_param) {
         })));
     }), props.socialLinks && /* @__PURE__ */ React.createElement("div", {
         className: "flex flex-row gap-2"
-    }, props.socialLinks.twitter && /* @__PURE__ */ React.createElement("div", {
-        className: "flex h-6 w-6 items-center justify-center rounded bg-white"
-    }, /* @__PURE__ */ React.createElement(import_bs.BsTwitter, null)), props.socialLinks.instagram && /* @__PURE__ */ React.createElement("div", {
-        className: "flex h-6 w-6 items-center justify-center rounded bg-white"
-    }, /* @__PURE__ */ React.createElement(import_bs.BsInstagram, null)), props.socialLinks.tiktok && /* @__PURE__ */ React.createElement("div", {
-        className: "flex h-6 w-6 items-center justify-center rounded bg-white"
-    }, /* @__PURE__ */ React.createElement(import_fa2.FaTiktok, null)), props.socialLinks.snapchat && /* @__PURE__ */ React.createElement("div", {
-        className: "flex h-6 w-6 items-center justify-center rounded bg-white"
+    }, props.socialLinks.twitter && /* @__PURE__ */ React.createElement(Button, {
+        size: "smallIcon",
+        variant: "ghost"
+    }, /* @__PURE__ */ React.createElement(import_bs.BsTwitter, null)), props.socialLinks.instagram && /* @__PURE__ */ React.createElement(Button, {
+        size: "smallIcon",
+        variant: "ghost"
+    }, /* @__PURE__ */ React.createElement(import_bs.BsInstagram, null)), props.socialLinks.tiktok && /* @__PURE__ */ React.createElement(Button, {
+        size: "smallIcon",
+        variant: "ghost"
+    }, /* @__PURE__ */ React.createElement(import_fa2.FaTiktok, null)), props.socialLinks.snapchat && /* @__PURE__ */ React.createElement(Button, {
+        size: "smallIcon",
+        variant: "ghost"
     }, /* @__PURE__ */ React.createElement(import_fa2.FaSnapchatGhost, null))));
 };
 // src/layout/Banner.tsx
@@ -8782,13 +8807,12 @@ var AppLanding = function(props) {
         variant: "outline"
     }, /* @__PURE__ */ import_react71.default.createElement(Icons.mail, {
         className: "h-4 w-4"
-    }), "Continue With Email"), /* @__PURE__ */ import_react71.default.createElement("a", {
-        href: "#",
-        className: "text-center text-sm"
-    }, "Don't have an account?", " ", /* @__PURE__ */ import_react71.default.createElement("a", {
-        href: "#",
+    }), "Continue With Email"), !props.withoutSignUp && /* @__PURE__ */ import_react71.default.createElement("div", {
+        className: "p-3 text-center text-sm font-normal dark:text-gray-300"
+    }, props.texts.newUserText, " ", /* @__PURE__ */ import_react71.default.createElement("span", {
+        onClick: props.handleRouteToSignUp,
         className: "clickable-link"
-    }, "Sign Up")))), /* @__PURE__ */ import_react71.default.createElement("div", {
+    }, props.texts.createAccount)))), /* @__PURE__ */ import_react71.default.createElement("div", {
         className: "mt-6 flex flex-row justify-between"
     }, /* @__PURE__ */ import_react71.default.createElement(HawaRadio, {
         onChangeTab: props.handleLanguage,
@@ -8985,7 +9009,7 @@ var SignInForm = function(props) {
         className: "mt-4 w-full",
         isLoading: props.isLoading
     }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ import_react73.default.createElement("div", {
-        className: "p-3 text-center text-sm font-semibold dark:text-gray-300"
+        className: "p-3 text-center text-sm font-normal dark:text-gray-300"
     }, props.texts.newUserText, " ", /* @__PURE__ */ import_react73.default.createElement("span", {
         onClick: props.handleRouteToSignUp,
         className: "clickable-link"
@@ -9285,7 +9309,7 @@ var SignUpForm = function(props) {
         className: "w-full",
         isLoading: props.isLoading
     }, props.texts.signUpText))), /* @__PURE__ */ import_react74.default.createElement("div", {
-        className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white"
+        className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-normal dark:text-white"
     }, /* @__PURE__ */ import_react74.default.createElement("span", null, props.texts.existingUserText), /* @__PURE__ */ import_react74.default.createElement("span", {
         onClick: props.handleRouteToSignIn,
         className: "clickable-link"
@@ -9588,32 +9612,32 @@ var CreditCardForm = function(props) {
             var _errors_password;
             return /* @__PURE__ */ import_react79.default.createElement(HawaTextField, {
                 width: "full",
-                name: "password",
-                placeholder: "Enter password",
-                type: "tel",
+                name: "cardNumber",
+                placeholder: "1234 1234 1234 1234",
+                type: "number",
                 label: "Card Number",
                 helpertext: (_errors_password = errors.password) === null || _errors_password === void 0 ? void 0 : _errors_password.message
             });
         },
         rules: {
-            required: "Password is rquired"
+            required: "Card Number is rquired"
         }
     }), /* @__PURE__ */ import_react79.default.createElement("div", {
         className: "w-1/4"
     }, /* @__PURE__ */ import_react79.default.createElement(import_react_hook_form7.Controller, {
         control: control,
-        name: "cardName",
+        name: "cardCVC",
         render: function(param) {
             var field = param.field;
             var _errors_password;
             return /* @__PURE__ */ import_react79.default.createElement(HawaTextField, {
                 width: "full",
-                name: "password",
+                name: "cardCVC",
                 maxLength: "3",
                 autoComplete: "cc-number",
-                placeholder: "",
-                type: "password",
-                label: "CCV",
+                placeholder: "CVC",
+                type: "number",
+                label: "CVC",
                 helpertext: (_errors_password = errors.password) === null || _errors_password === void 0 ? void 0 : _errors_password.message
             });
         },
@@ -9622,16 +9646,16 @@ var CreditCardForm = function(props) {
         }
     }))), /* @__PURE__ */ import_react79.default.createElement(import_react_hook_form7.Controller, {
         control: control,
-        name: "cardName",
+        name: "cardExpiry",
         render: function(param) {
             var field = param.field;
             var _errors_password;
             return /* @__PURE__ */ import_react79.default.createElement(HawaTextField, {
                 width: "full",
-                name: "password",
-                placeholder: "Enter password",
-                type: "text",
-                label: "Name On Card",
+                name: "cardExpiry",
+                placeholder: "MM / YY",
+                type: "password",
+                label: "Expiry Date",
                 helpertext: (_errors_password = errors.password) === null || _errors_password === void 0 ? void 0 : _errors_password.message
             });
         },
@@ -9646,15 +9670,14 @@ var CreditCardForm = function(props) {
             var _errors_password;
             return /* @__PURE__ */ import_react79.default.createElement(HawaTextField, {
                 width: "full",
-                name: "password",
-                placeholder: "Enter password",
-                type: "password",
-                label: "Expiry Date",
+                name: "cardName",
+                type: "text",
+                label: "Name on card",
                 helpertext: (_errors_password = errors.password) === null || _errors_password === void 0 ? void 0 : _errors_password.message
             });
         },
         rules: {
-            required: "Password is rquired"
+            required: "Card holder name is rquired"
         }
     })), /* @__PURE__ */ import_react79.default.createElement(CardFooter, null, /* @__PURE__ */ import_react79.default.createElement(Button, {
         className: "w-full",

package/dist/index.mjs

@@ -1042,6 +1042,7 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React19.createElement(
   DropdownMenuPrimitive.Item,
   {
+    disabled: props.disabled,
     ref,
     className: cn(
       "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",
@@ -1178,6 +1179,7 @@ var DropdownMenu = ({
       return item.subitems ? /* @__PURE__ */ React19.createElement(DropdownMenuSub, { key: index }, /* @__PURE__ */ React19.createElement(DropdownMenuSubTrigger, { dir: direction }, item.icon && item.icon, item.label), /* @__PURE__ */ React19.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React19.createElement(DropdownMenuSubContent, null, item.subitems.map((subitem, subIndex) => /* @__PURE__ */ React19.createElement(
         DropdownMenuItem,
         {
+          disabled: subitem.disabled,
           className: "flex flex-row gap-2",
           onSelect: () => subitem.action(),
           key: subIndex
@@ -1187,6 +1189,7 @@ var DropdownMenu = ({
       ))))) : /* @__PURE__ */ React19.createElement(
         DropdownMenuItem,
         {
+          disabled: item.disabled,
           className: "flex flex-row gap-2",
           key: index,
           onSelect: (e) => {
@@ -6486,7 +6489,7 @@ var useCarousel_default = useCarousel;
 
 // src/elements/Carousel.tsx
 var Carousel = ({ images }) => {
-  const imageWidth = 240 + 16;
+  const imageWidth = 1e3 + 16;
   const {
     containerRef,
     handleMouseDown,
@@ -6497,18 +6500,19 @@ var Carousel = ({ images }) => {
   return /* @__PURE__ */ React59.createElement(
     "div",
     {
-      className: "flex cursor-pointer snap-x  gap-4 overflow-x-scroll",
+      className: "flex cursor-pointer snap-x  gap-4 overflow-x-hidden justify-center items-center",
       onMouseDown: handleMouseDown,
       onMouseLeave: handleMouseLeave,
       onMouseUp: handleMouseUp,
       onMouseMove: handleMouseMove,
       ref: containerRef
     },
-    images.map((image, index) => /* @__PURE__ */ React59.createElement("div", { key: index, className: "h-40 w-60 flex-shrink-0" }, /* @__PURE__ */ React59.createElement(
+    images.map((image, index) => /* @__PURE__ */ React59.createElement("div", { key: index, className: "w-[1000px] h-96 flex-shrink-0" }, /* @__PURE__ */ React59.createElement(
       "img",
       {
         src: image,
         alt: `Carousel Image ${index}`,
+        width: imageWidth,
         className: "h-full w-full rounded-lg object-cover"
       }
     )))
@@ -8697,15 +8701,34 @@ var AppSidebar = ({ isOpen, onClose, items }) => {
 // src/layout/Footer.tsx
 import { BsInstagram, BsTwitter } from "react-icons/bs";
 import { FaSnapchatGhost, FaTiktok } from "react-icons/fa";
-var Footer = ({ ...props }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "sticky  bottom-0 left-0 flex w-full flex-row gap-8  bg-blue-200 p-4" }, props.logoText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold" }, props.logoText)), props.footerLinks?.map((pagesSection) => /* @__PURE__ */ React.createElement("div", { className: "flex w-32 flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, pagesSection.title), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, pagesSection.pages.map((singlePage) => /* @__PURE__ */ React.createElement(
-    "a",
+var Footer = ({
+  variation = "default",
+  ...props
+}) => {
+  let variationStyles = {
+    default: "rounded border",
+    minimal: "border-t"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      className: "transition-all hover:font-bold",
-      href: singlePage.link
+      className: cn(
+        "flex w-full flex-row items-center justify-between gap-8  rounded bg-background p-4",
+        variationStyles[variation]
+      )
     },
-    singlePage.label
-  ))))), props.socialLinks && /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-2" }, props.socialLinks.twitter && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(BsTwitter, null)), props.socialLinks.instagram && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(BsInstagram, null)), props.socialLinks.tiktok && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(FaTiktok, null)), props.socialLinks.snapchat && /* @__PURE__ */ React.createElement("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-white" }, /* @__PURE__ */ React.createElement(FaSnapchatGhost, null))));
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-2" }, props.logoURL && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("img", { className: "h-8", src: props.logoURL })), props.logoText && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-2xl font-bold text-primary" }, props.logoText))), props.copyRights && props.footerLinks && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground" }, "\xA9 ", props.copyRights, " ", (/* @__PURE__ */ new Date()).getFullYear())),
+    props.copyRights && !props.footerLinks && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground" }, "\xA9 ", props.copyRights, " ", (/* @__PURE__ */ new Date()).getFullYear()),
+    props.footerLinks?.map((pagesSection) => /* @__PURE__ */ React.createElement("div", { className: "flex w-32 flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "text-lg font-bold" }, pagesSection.title), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, pagesSection.pages.map((singlePage) => /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: "transition-all hover:font-bold",
+        href: singlePage.link
+      },
+      singlePage.label
+    ))))),
+    props.socialLinks && /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-2" }, props.socialLinks.twitter && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(BsTwitter, null)), props.socialLinks.instagram && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(BsInstagram, null)), props.socialLinks.tiktok && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(FaTiktok, null)), props.socialLinks.snapchat && /* @__PURE__ */ React.createElement(Button, { size: "smallIcon", variant: "ghost" }, /* @__PURE__ */ React.createElement(FaSnapchatGhost, null)))
+  );
 };
 
 // src/layout/Banner.tsx
@@ -9105,7 +9128,14 @@ var AppLanding = (props) => {
     },
     /* @__PURE__ */ React85.createElement(Icons.mail, { className: "h-4 w-4" }),
     "Continue With Email"
-  ), /* @__PURE__ */ React85.createElement("a", { href: "#", className: "text-center text-sm" }, "Don't have an account?", " ", /* @__PURE__ */ React85.createElement("a", { href: "#", className: "clickable-link" }, "Sign Up")))), /* @__PURE__ */ React85.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React85.createElement(
+  ), !props.withoutSignUp && /* @__PURE__ */ React85.createElement("div", { className: "p-3 text-center text-sm font-normal dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React85.createElement(
+    "span",
+    {
+      onClick: props.handleRouteToSignUp,
+      className: "clickable-link"
+    },
+    props.texts.createAccount
+  )))), /* @__PURE__ */ React85.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React85.createElement(
     HawaRadio,
     {
       onChangeTab: props.handleLanguage,
@@ -9315,7 +9345,7 @@ var SignInForm = (props) => {
       className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     },
     props.texts.forgotPasswordText
-  )), /* @__PURE__ */ React87.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React87.createElement("div", { className: "p-3 text-center text-sm font-semibold dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React87.createElement(
+  )), /* @__PURE__ */ React87.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React87.createElement("div", { className: "p-3 text-center text-sm font-normal dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React87.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
@@ -9593,7 +9623,7 @@ var SignUpForm = (props) => {
         }
       )
     }
-  ), /* @__PURE__ */ React88.createElement(Button, { className: "w-full", isLoading: props.isLoading }, props.texts.signUpText))), /* @__PURE__ */ React88.createElement("div", { className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white" }, /* @__PURE__ */ React88.createElement("span", null, props.texts.existingUserText), /* @__PURE__ */ React88.createElement(
+  ), /* @__PURE__ */ React88.createElement(Button, { className: "w-full", isLoading: props.isLoading }, props.texts.signUpText))), /* @__PURE__ */ React88.createElement("div", { className: "flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-normal dark:text-white" }, /* @__PURE__ */ React88.createElement("span", null, props.texts.existingUserText), /* @__PURE__ */ React88.createElement(
     "span",
     {
       onClick: props.handleRouteToSignIn,
@@ -9973,32 +10003,32 @@ var CreditCardForm = (props) => {
         HawaTextField,
         {
           width: "full",
-          name: "password",
-          placeholder: "Enter password",
-          type: "tel",
+          name: "cardNumber",
+          placeholder: "1234 1234 1234 1234",
+          type: "number",
           label: "Card Number",
           helpertext: errors.password?.message
         }
       ),
       rules: {
-        required: "Password is rquired"
+        required: "Card Number is rquired"
       }
     }
   ), /* @__PURE__ */ React93.createElement("div", { className: "w-1/4" }, /* @__PURE__ */ React93.createElement(
     Controller7,
     {
       control,
-      name: "cardName",
+      name: "cardCVC",
       render: ({ field }) => /* @__PURE__ */ React93.createElement(
         HawaTextField,
         {
           width: "full",
-          name: "password",
+          name: "cardCVC",
           maxLength: "3",
           autoComplete: "cc-number",
-          placeholder: "",
-          type: "password",
-          label: "CCV",
+          placeholder: "CVC",
+          type: "number",
+          label: "CVC",
           helpertext: errors.password?.message
         }
       ),
@@ -10010,15 +10040,15 @@ var CreditCardForm = (props) => {
     Controller7,
     {
       control,
-      name: "cardName",
+      name: "cardExpiry",
       render: ({ field }) => /* @__PURE__ */ React93.createElement(
         HawaTextField,
         {
           width: "full",
-          name: "password",
-          placeholder: "Enter password",
-          type: "text",
-          label: "Name On Card",
+          name: "cardExpiry",
+          placeholder: "MM / YY",
+          type: "password",
+          label: "Expiry Date",
           helpertext: errors.password?.message
         }
       ),
@@ -10035,15 +10065,14 @@ var CreditCardForm = (props) => {
         HawaTextField,
         {
           width: "full",
-          name: "password",
-          placeholder: "Enter password",
-          type: "password",
-          label: "Expiry Date",
+          name: "cardName",
+          type: "text",
+          label: "Name on card",
           helpertext: errors.password?.message
         }
       ),
       rules: {
-        required: "Password is rquired"
+        required: "Card holder name is rquired"
       }
     }
   )), /* @__PURE__ */ React93.createElement(CardFooter, null, /* @__PURE__ */ React93.createElement(Button, { className: "w-full", onClick: props.handlePayWithCreditCard }, "Pay with Credit Card"))));