@sikka/hawa 0.44.0-next → 0.45.1-next

package/dist/elements/index.js

@@ -3993,7 +3993,8 @@ var Radio = (0, import_react13.forwardRef)(
                 "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
                 orientationStyle[orientation],
                 widthStyle[width],
-                tabsContainerClassName
+                tabsContainerClassName,
+                props.direction === "rtl" ? "hawa-flex-row-reverse" : ""
               )
             },
             (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
@@ -5265,13 +5266,21 @@ var Select = ({
       children
     );
   };
-  const Option = ({ children, innerProps, innerRef }) => {
+  const Option = ({
+    children,
+    innerProps,
+    innerRef,
+    isFocused,
+    isSelected
+  }) => {
     return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         ref: innerRef,
         className: cn(
-          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground"
+          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all",
+          isFocused ? "hawa-bg-accent hawa-text-bg-accent-foreground" : "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+          isSelected && "hawa-bg-primary hawa-text-primary-foreground"
         ),
         ...innerProps
       },
@@ -5328,15 +5337,20 @@ var Select = ({
             container: () => cn(
               selectContainerStyles,
               props.phoneCode && phoneCodeStyles,
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
               props.isMulti && "hawa-ps-0 "
             ),
-            placeholder: () => selectPlaceholderStyles,
+            placeholder: () => cn(
+              selectPlaceholderStyles,
+              props.disabled && "hawa-text-muted-foreground"
+            ),
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => "hawa-text-foreground",
+            singleValue: () => cn(
+              props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
+            ),
             indicatorsContainer: () => cn(
               selectIndicatorContainerStyles,
-              props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
+              props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+              props.disabled && "hawa-opacity-30"
             )
           },
           unstyled: true,
@@ -5344,12 +5358,6 @@ var Select = ({
           components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
             Option,
             Menu,
-            // Control: (e) => (
-            //   <div
-            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
-            //     {...e}
-            //   />
-            // ),
             ValueContainer: (e) => /* @__PURE__ */ import_react35.default.createElement(
               "div",
               {
@@ -5372,6 +5380,7 @@ var Select = ({
           options: props.options,
           getOptionLabel: props.getOptionLabel,
           defaultValue: props.defaultValue,
+          value: props.value,
           placeholder: props.placeholder,
           isDisabled: props.disabled,
           isClearable: props.isClearable,
@@ -7421,19 +7430,19 @@ var PhoneInput = ({
 var React50 = __toESM(require("react"));
 var import_input_otp = require("input-otp");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react41 = require("react");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 var mergeClasses = (...classes) => classes.filter((className, index, array) => {
   return Boolean(className) && array.indexOf(className) === index;
 }).join(" ");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
 var import_react40 = require("react");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -7446,7 +7455,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
 var Icon = (0, import_react40.forwardRef)(
   ({
     color = "currentColor",
@@ -7478,7 +7487,7 @@ var Icon = (0, import_react40.forwardRef)(
   }
 );
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
   const Component = (0, import_react41.forwardRef)(
     ({ className, ...props }, ref) => (0, import_react41.createElement)(Icon, {
@@ -7492,7 +7501,7 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
 var Dot = createLucideIcon("Dot", [
   ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
 ]);
@@ -7549,12 +7558,19 @@ var PinInput = ({
   const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
   const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
   const secondGroupLength = maxLength - firstGroupLength;
-  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
+    PinInputSlot,
+    {
+      key: index,
+      index,
+      className: "hawa-w-full hawa-border"
+    }
+  ))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
       index: index + firstGroupLength,
-      className: "hawa-w-full"
+      className: "hawa-w-full hawa-border"
     }
   )))), /* @__PURE__ */ React50.createElement(HelperText, { helperText: props.helperText }));
 };
@@ -9038,7 +9054,7 @@ var PhoneMockup = ({
 
 lucide-react/dist/esm/shared/src/utils.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -9046,7 +9062,7 @@ lucide-react/dist/esm/shared/src/utils.js:
 
 lucide-react/dist/esm/defaultAttributes.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -9054,7 +9070,7 @@ lucide-react/dist/esm/defaultAttributes.js:
 
 lucide-react/dist/esm/Icon.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -9062,7 +9078,7 @@ lucide-react/dist/esm/Icon.js:
 
 lucide-react/dist/esm/createLucideIcon.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -9070,7 +9086,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 
 lucide-react/dist/esm/icons/dot.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -9078,7 +9094,7 @@ lucide-react/dist/esm/icons/dot.js:
 
 lucide-react/dist/esm/lucide-react.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.

package/dist/elements/index.mjs

@@ -26,7 +26,7 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-MEXJAHQV.mjs";
+} from "../chunk-QOVVJCFE.mjs";
 import {
   useClipboard
 } from "../chunk-WL7C2A5D.mjs";

package/dist/index.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.8 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -3080,6 +3080,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-opacity-100 {
   opacity: 1;
 }
+.hawa-opacity-30 {
+  opacity: 0.3;
+}
 .hawa-opacity-50 {
   opacity: 0.5;
 }

package/dist/index.d.mts

@@ -1877,8 +1877,9 @@ type TConfirmation = {
     errorText?: any;
     phoneNumber?: string;
     confirmLoading?: boolean;
-    handleConfirm?: any;
-    handleResend?: any;
+    onConfirm?: any;
+    onResend?: any;
+    onCancel?: any;
     codeLength?: number;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
@@ -2032,12 +2033,14 @@ type ContactFormProps = {
     cardless?: boolean;
     formId?: string;
     formAutoComplete?: "on" | "off";
+    clearOnSubmit?: boolean;
     size?: "sm" | "default";
     onSubmit: (e: ContactFormData) => void;
     customFields?: CustomField[];
     showSuccess?: boolean;
     classNames?: {
         submitButton?: string;
+        container?: string;
     };
     texts?: {
         submit: string;

package/dist/index.d.ts

@@ -1877,8 +1877,9 @@ type TConfirmation = {
     errorText?: any;
     phoneNumber?: string;
     confirmLoading?: boolean;
-    handleConfirm?: any;
-    handleResend?: any;
+    onConfirm?: any;
+    onResend?: any;
+    onCancel?: any;
     codeLength?: number;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
@@ -2032,12 +2033,14 @@ type ContactFormProps = {
     cardless?: boolean;
     formId?: string;
     formAutoComplete?: "on" | "off";
+    clearOnSubmit?: boolean;
     size?: "sm" | "default";
     onSubmit: (e: ContactFormData) => void;
     customFields?: CustomField[];
     showSuccess?: boolean;
     classNames?: {
         submitButton?: string;
+        container?: string;
     };
     texts?: {
         submit: string;

package/dist/index.js

@@ -4068,7 +4068,8 @@ var Radio = (0, import_react13.forwardRef)(
                 "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
                 orientationStyle[orientation],
                 widthStyle[width],
-                tabsContainerClassName
+                tabsContainerClassName,
+                props.direction === "rtl" ? "hawa-flex-row-reverse" : ""
               )
             },
             (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
@@ -5792,13 +5793,21 @@ var Select = ({
       children
     );
   };
-  const Option = ({ children, innerProps, innerRef }) => {
+  const Option = ({
+    children,
+    innerProps,
+    innerRef,
+    isFocused,
+    isSelected
+  }) => {
     return /* @__PURE__ */ import_react35.default.createElement(
       "div",
       {
         ref: innerRef,
         className: cn(
-          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground"
+          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all",
+          isFocused ? "hawa-bg-accent hawa-text-bg-accent-foreground" : "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+          isSelected && "hawa-bg-primary hawa-text-primary-foreground"
         ),
         ...innerProps
       },
@@ -5855,15 +5864,20 @@ var Select = ({
             container: () => cn(
               selectContainerStyles,
               props.phoneCode && phoneCodeStyles,
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
               props.isMulti && "hawa-ps-0 "
             ),
-            placeholder: () => selectPlaceholderStyles,
+            placeholder: () => cn(
+              selectPlaceholderStyles,
+              props.disabled && "hawa-text-muted-foreground"
+            ),
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => "hawa-text-foreground",
+            singleValue: () => cn(
+              props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
+            ),
             indicatorsContainer: () => cn(
               selectIndicatorContainerStyles,
-              props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
+              props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+              props.disabled && "hawa-opacity-30"
             )
           },
           unstyled: true,
@@ -5871,12 +5885,6 @@ var Select = ({
           components: props.hideIndicator ? { Option, Menu: Menu2, IndicatorsContainer: () => null } : {
             Option,
             Menu: Menu2,
-            // Control: (e) => (
-            //   <div
-            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
-            //     {...e}
-            //   />
-            // ),
             ValueContainer: (e) => /* @__PURE__ */ import_react35.default.createElement(
               "div",
               {
@@ -5899,6 +5907,7 @@ var Select = ({
           options: props.options,
           getOptionLabel: props.getOptionLabel,
           defaultValue: props.defaultValue,
+          value: props.value,
           placeholder: props.placeholder,
           isDisabled: props.disabled,
           isClearable: props.isClearable,
@@ -7948,19 +7957,19 @@ var PhoneInput = ({
 var React50 = __toESM(require("react"));
 var import_input_otp = require("input-otp");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react41 = require("react");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string9) => string9.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 var mergeClasses = (...classes) => classes.filter((className, index, array) => {
   return Boolean(className) && array.indexOf(className) === index;
 }).join(" ");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
 var import_react40 = require("react");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -7973,7 +7982,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
 var Icon = (0, import_react40.forwardRef)(
   ({
     color = "currentColor",
@@ -8005,7 +8014,7 @@ var Icon = (0, import_react40.forwardRef)(
   }
 );
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
   const Component = (0, import_react41.forwardRef)(
     ({ className, ...props }, ref) => (0, import_react41.createElement)(Icon, {
@@ -8019,7 +8028,7 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
 var Dot = createLucideIcon("Dot", [
   ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
 ]);
@@ -8076,12 +8085,19 @@ var PinInput = ({
   const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
   const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
   const secondGroupLength = maxLength - firstGroupLength;
-  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React50.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React50.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
+    PinInputSlot,
+    {
+      key: index,
+      index,
+      className: "hawa-w-full hawa-border"
+    }
+  ))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React50.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React50.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React50.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
       index: index + firstGroupLength,
-      className: "hawa-w-full"
+      className: "hawa-w-full hawa-border"
     }
   )))), /* @__PURE__ */ React50.createElement(HelperText, { helperText: props.helperText }));
 };
@@ -12019,12 +12035,10 @@ var CodeConfirmation = ({
     {
       noValidate: true,
       onSubmit: handleSubmit((e) => {
-        if (props.handleConfirm) {
-          return props.handleConfirm(e);
+        if (props.onConfirm) {
+          return props.onConfirm(e);
         } else {
-          console.log(
-            "Form is submitted but handleConfirm prop is missing"
-          );
+          console.log("Form is submitted but onConfirm prop is missing");
         }
       })
     },
@@ -12052,12 +12066,28 @@ var CodeConfirmation = ({
         className: "clickable-link",
         onClick: () => {
           startResendTimer();
-          props.handleResend();
+          props.onResend();
         }
       },
       ((_i = props.texts) == null ? void 0 : _i.resendCode) || "Click to resend"
     )),
-    /* @__PURE__ */ import_react74.default.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ import_react74.default.createElement(Button, { variant: "outline" }, ((_j = props.texts) == null ? void 0 : _j.cancel) || "Cancel"), /* @__PURE__ */ import_react74.default.createElement(Button, { isLoading: props.confirmLoading }, ((_k = props.texts) == null ? void 0 : _k.confirm) || "Confirm"))
+    /* @__PURE__ */ import_react74.default.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ import_react74.default.createElement(
+      Button,
+      {
+        type: "button",
+        onClick: () => {
+          if (props.onCancel) {
+            return props.onCancel();
+          } else {
+            console.log(
+              "Cancel button clicked but onCancel prop is missing"
+            );
+          }
+        },
+        variant: "outline"
+      },
+      ((_j = props.texts) == null ? void 0 : _j.cancel) || "Cancel"
+    ), /* @__PURE__ */ import_react74.default.createElement(Button, { isLoading: props.confirmLoading }, ((_k = props.texts) == null ? void 0 : _k.confirm) || "Confirm"))
   )));
 };
 
@@ -12700,6 +12730,7 @@ var ContactForm = ({
   onSubmit,
   customFields,
   classNames,
+  clearOnSubmit = true,
   ...props
 }) => {
   var _a, _b, _c, _d, _e;
@@ -12743,8 +12774,11 @@ var ContactForm = ({
     control,
     handleSubmit,
     formState: { errors },
-    reset
+    reset,
+    getValues,
+    trigger
   } = (0, import_react_hook_form9.useForm)({
+    mode: "all",
     resolver: (0, import_zod8.zodResolver)(MainSchema),
     defaultValues: {
       name: "",
@@ -12753,10 +12787,16 @@ var ContactForm = ({
       ...customFieldsDefaultValues
     }
   });
-  const handleFormSubmit = (data) => {
+  const SubmitForm = async (data) => {
+    const isValid = await trigger();
+    if (!isValid) {
+      return;
+    }
     if (onSubmit) {
       onSubmit(data);
-      reset();
+      if (clearOnSubmit) {
+        reset();
+      }
     } else {
       console.log("Form is submitted but onSubmit prop is missing");
     }
@@ -12766,7 +12806,8 @@ var ContactForm = ({
     {
       className: cn(
         "hawa-w-full",
-        cardless && "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none"
+        cardless && "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none",
+        classNames == null ? void 0 : classNames.container
       ),
       style: cardless ? { boxShadow: "none" } : void 0
     },
@@ -12774,7 +12815,7 @@ var ContactForm = ({
       "form",
       {
         noValidate: true,
-        onSubmit: handleSubmit(handleFormSubmit),
+        onSubmit: handleSubmit(SubmitForm),
         className: "hawa-space-y-2",
         id: formId,
         autoComplete: formAutoComplete
@@ -12885,7 +12926,10 @@ var ContactForm = ({
                 textareaProps: {
                   placeholder: texts == null ? void 0 : texts.message.placeholder,
                   className: "hawa-min-h-20",
-                  ...field
+                  ...field,
+                  onKeyDown: getHotkeyHandler([
+                    ["mod+enter", () => SubmitForm(getValues())]
+                  ])
                 },
                 classNames: { textarea: "hawa-min-h-40 hawa-h-full" },
                 helperText: (_a2 = errors.message) == null ? void 0 : _a2.message
@@ -13851,7 +13895,7 @@ var Usage = (props) => {
 
 lucide-react/dist/esm/shared/src/utils.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -13859,7 +13903,7 @@ lucide-react/dist/esm/shared/src/utils.js:
 
 lucide-react/dist/esm/defaultAttributes.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -13867,7 +13911,7 @@ lucide-react/dist/esm/defaultAttributes.js:
 
 lucide-react/dist/esm/Icon.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -13875,7 +13919,7 @@ lucide-react/dist/esm/Icon.js:
 
 lucide-react/dist/esm/createLucideIcon.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -13883,7 +13927,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 
 lucide-react/dist/esm/icons/dot.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -13891,7 +13935,7 @@ lucide-react/dist/esm/icons/dot.js:
 
 lucide-react/dist/esm/lucide-react.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.