@sikka/hawa 0.31.5-next → 0.31.7-next

package/dist/{Radio-bhKmANMf.d.ts → Radio-3B8RZYJA.d.ts}

@@ -25,7 +25,7 @@ type SelectTypes = {
     isSearchable?: boolean;
     controlClassNames?: string;
     containerClassNames?: string;
-    onChange?: any;
+    onChange: any;
     helperText?: string;
     onInputChange?: any;
     native?: any;

package/dist/{Radio-9MkZay6D.d.mts → Radio-L369ID7b.d.mts}

@@ -25,7 +25,7 @@ type SelectTypes = {
     isSearchable?: boolean;
     controlClassNames?: string;
     containerClassNames?: string;
-    onChange?: any;
+    onChange: any;
     helperText?: string;
     onInputChange?: any;
     native?: any;

package/dist/blocks/auth/index.js

@@ -3119,22 +3119,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          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_react8.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react8.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,
@@ -3190,16 +3224,14 @@ var Select = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-var PhoneInput = ({ labelProps, ...props }) => {
+var PhoneInput = ({
+  labelProps,
+  inputProps,
+  ...props
+}) => {
   const [phoneNumber, setPhoneNumber] = (0, import_react9.useState)("");
   const [countryCode, setCountryCode] = (0, import_react9.useState)(props.preferredCountry);
   const inputRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
-    var _a;
-    if (inputRef.current) {
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, []);
   const handleInputChange = (e) => {
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
@@ -3215,31 +3247,32 @@ var PhoneInput = ({ labelProps, ...props }) => {
   return /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react9.default.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ import_react9.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react9.default.createElement(
     Select,
     {
+      phoneCode: true,
       width: "fit",
       hideHelperText: true,
-      phoneCode: true,
       hideIndicator: true,
-      placeholder: "Code",
-      options: countries_default,
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      defaultValue: props.preferredCountry,
+      placeholder: "Code",
+      options: countries_default,
+      onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
-      onChange: setCountryCode
+      defaultValue: props.preferredCountry
     }
   ), /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react9.default.createElement(
     "input",
     {
+      type: "tel",
       ref: inputRef,
       id: "phone-number",
+      value: phoneNumber,
+      onChange: handleInputChange,
+      placeholder: props.placeholder,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
-      onChange: handleInputChange,
-      value: phoneNumber,
-      type: "tel",
-      placeholder: props.placeholder
+      ...inputProps
     }
   ))), /* @__PURE__ */ import_react9.default.createElement(
     "p",

package/dist/blocks/auth/index.mjs

@@ -7,7 +7,7 @@ import {
 } from "../../chunk-47APBDKK.mjs";
 import {
   Select
-} from "../../chunk-34LNWMOZ.mjs";
+} from "../../chunk-WAVKQ44V.mjs";
 import {
   EyeIcon,
   HiddenEyeIcon
@@ -629,7 +629,7 @@ var Alert = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-import React4, { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import React4, { useState as useState2, useRef as useRef2 } from "react";
 
 // countries.ts
 var countries = [
@@ -2325,16 +2325,14 @@ var countries = [
 var countries_default = countries;
 
 // elements/phoneInput/PhoneInput.tsx
-var PhoneInput = ({ labelProps, ...props }) => {
+var PhoneInput = ({
+  labelProps,
+  inputProps,
+  ...props
+}) => {
   const [phoneNumber, setPhoneNumber] = useState2("");
   const [countryCode, setCountryCode] = useState2(props.preferredCountry);
   const inputRef = useRef2(null);
-  useEffect2(() => {
-    var _a;
-    if (inputRef.current) {
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, []);
   const handleInputChange = (e) => {
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
@@ -2350,31 +2348,32 @@ var PhoneInput = ({ labelProps, ...props }) => {
   return /* @__PURE__ */ React4.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React4.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React4.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React4.createElement(
     Select,
     {
+      phoneCode: true,
       width: "fit",
       hideHelperText: true,
-      phoneCode: true,
       hideIndicator: true,
-      placeholder: "Code",
-      options: countries_default,
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      defaultValue: props.preferredCountry,
+      placeholder: "Code",
+      options: countries_default,
+      onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
-      onChange: setCountryCode
+      defaultValue: props.preferredCountry
     }
   ), /* @__PURE__ */ React4.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React4.createElement(
     "input",
     {
+      type: "tel",
       ref: inputRef,
       id: "phone-number",
+      value: phoneNumber,
+      onChange: handleInputChange,
+      placeholder: props.placeholder,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
-      onChange: handleInputChange,
-      value: phoneNumber,
-      type: "tel",
-      placeholder: props.placeholder
+      ...inputProps
     }
   ))), /* @__PURE__ */ React4.createElement(
     "p",

package/dist/blocks/feedback/index.js

@@ -1493,22 +1493,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          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_react11.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react11.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,

package/dist/blocks/feedback/index.mjs

@@ -4,7 +4,7 @@ import {
 } from "../../chunk-XRUPXLOK.mjs";
 import {
   Select
-} from "../../chunk-34LNWMOZ.mjs";
+} from "../../chunk-WAVKQ44V.mjs";
 import {
   Radio
 } from "../../chunk-2QAGLSHC.mjs";

package/dist/blocks/index.d.mts

@@ -1,7 +1,7 @@
 import React__default, { FC, InputHTMLAttributes } from 'react';
 import { ThirdPartyAuthTextsTypes, LoginFormTextsTypes, RegisterFormTextsTypes, NewPasswordTextsTypes, ResetPasswordTextsTypes, BaseInputType, TextInputType, PricingCardProps, PlanFeature, PricingPlanTexts } from '../types/index.mjs';
 import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-CKtkuNFH.mjs';
-import { S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-9MkZay6D.mjs';
+import { S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-L369ID7b.mjs';
 import { M as MenuItemType } from '../DropdownMenu-o_-MnT5h.mjs';
 import '@radix-ui/react-dropdown-menu';
 

package/dist/blocks/index.d.ts

@@ -1,7 +1,7 @@
 import React__default, { FC, InputHTMLAttributes } from 'react';
 import { ThirdPartyAuthTextsTypes, LoginFormTextsTypes, RegisterFormTextsTypes, NewPasswordTextsTypes, ResetPasswordTextsTypes, BaseInputType, TextInputType, PricingCardProps, PlanFeature, PricingPlanTexts } from '../types/index.js';
 import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-CKtkuNFH.js';
-import { S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-bhKmANMf.js';
+import { S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-3B8RZYJA.js';
 import { M as MenuItemType } from '../DropdownMenu-p-Ha-y2R.js';
 import '@radix-ui/react-dropdown-menu';
 

package/dist/blocks/index.js

@@ -3140,22 +3140,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          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_react8.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react8.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,
@@ -3211,16 +3245,14 @@ var Select = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-var PhoneInput = ({ labelProps, ...props }) => {
+var PhoneInput = ({
+  labelProps,
+  inputProps,
+  ...props
+}) => {
   const [phoneNumber, setPhoneNumber] = (0, import_react9.useState)("");
   const [countryCode, setCountryCode] = (0, import_react9.useState)(props.preferredCountry);
   const inputRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
-    var _a;
-    if (inputRef.current) {
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, []);
   const handleInputChange = (e) => {
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
@@ -3236,31 +3268,32 @@ var PhoneInput = ({ labelProps, ...props }) => {
   return /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react9.default.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ import_react9.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ import_react9.default.createElement(
     Select,
     {
+      phoneCode: true,
       width: "fit",
       hideHelperText: true,
-      phoneCode: true,
       hideIndicator: true,
-      placeholder: "Code",
-      options: countries_default,
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      defaultValue: props.preferredCountry,
+      placeholder: "Code",
+      options: countries_default,
+      onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
-      onChange: setCountryCode
+      defaultValue: props.preferredCountry
     }
   ), /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ import_react9.default.createElement(
     "input",
     {
+      type: "tel",
       ref: inputRef,
       id: "phone-number",
+      value: phoneNumber,
+      onChange: handleInputChange,
+      placeholder: props.placeholder,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
-      onChange: handleInputChange,
-      value: phoneNumber,
-      type: "tel",
-      placeholder: props.placeholder
+      ...inputProps
     }
   ))), /* @__PURE__ */ import_react9.default.createElement(
     "p",

package/dist/blocks/index.mjs

@@ -26,7 +26,7 @@ import {
   UncheckMark,
   VeryBadEmoji,
   VeryGoodEmoji
-} from "../chunk-6HRJIMXY.mjs";
+} from "../chunk-JXN2PVGT.mjs";
 import "../chunk-R2SKHHDK.mjs";
 import {
   Button,

package/dist/blocks/misc/index.js

@@ -1377,22 +1377,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          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_react28.default.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ import_react28.default.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,

package/dist/blocks/misc/index.mjs

@@ -11,7 +11,7 @@ import {
 } from "../../chunk-XRUPXLOK.mjs";
 import {
   Select
-} from "../../chunk-34LNWMOZ.mjs";
+} from "../../chunk-WAVKQ44V.mjs";
 import {
   Button,
   Card,

package/dist/{chunk-6HRJIMXY.mjs → chunk-JXN2PVGT.mjs}

@@ -429,22 +429,56 @@ var Select = ({
               props.controlClassNames
             ),
             container: () => cn(
-              "hawa-rounded",
-              props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
+              "hawa-rounded ",
+              props.phoneCode && "hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[40px] ",
               "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm",
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer"
+              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
+              props.isMulti && "hawa-ps-0 "
             ),
             placeholder: () => "hawa-text-muted-foreground hawa-cursor-pointer hawa-px-1",
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
             singleValue: () => "hawa-text-foreground",
             indicatorsContainer: () => cn(
-              "hawa-cursor-pointer hawa-text-muted-foreground",
+              "hawa-cursor-pointer hawa-text-muted-foreground hawa-absolute hawa-end-0 hawa-top-[50%] hawa-bottom-[50%] ",
               props.hideIndicator ? "hawa-invisible" : "hawa-px-1"
             )
           },
           unstyled: true,
           autoFocus: true,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          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__ */ React4.createElement(
+              "div",
+              {
+                className: cn(
+                  e.className,
+                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
+                ),
+                ...e
+              }
+            ),
+            MultiValueContainer: (e) => /* @__PURE__ */ React4.createElement(
+              "div",
+              {
+                className: cn(
+                  // e.className,
+                  "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row"
+                ),
+                ...e
+              }
+            )
+          },
           onChange: (newValue, action) => props.onChange(newValue, action),
           options: props.options,
           getOptionLabel: props.getOptionLabel,
@@ -500,7 +534,7 @@ var Select = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-import React5, { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import React5, { useState as useState2, useRef as useRef2 } from "react";
 
 // countries.ts
 var countries = [
@@ -2196,16 +2230,14 @@ var countries = [
 var countries_default = countries;
 
 // elements/phoneInput/PhoneInput.tsx
-var PhoneInput = ({ labelProps, ...props }) => {
+var PhoneInput = ({
+  labelProps,
+  inputProps,
+  ...props
+}) => {
   const [phoneNumber, setPhoneNumber] = useState2("");
   const [countryCode, setCountryCode] = useState2(props.preferredCountry);
   const inputRef = useRef2(null);
-  useEffect2(() => {
-    var _a;
-    if (inputRef.current) {
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, []);
   const handleInputChange = (e) => {
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
@@ -2221,31 +2253,32 @@ var PhoneInput = ({ labelProps, ...props }) => {
   return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React5.createElement("div", { dir: "ltr", className: "hawa-flex hawa-w-full hawa-flex-row" }, /* @__PURE__ */ React5.createElement(
     Select,
     {
+      phoneCode: true,
       width: "fit",
       hideHelperText: true,
-      phoneCode: true,
       hideIndicator: true,
-      placeholder: "Code",
-      options: countries_default,
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      defaultValue: props.preferredCountry,
+      placeholder: "Code",
+      options: countries_default,
+      onChange: setCountryCode,
       value: countryCode == null ? void 0 : countryCode.label,
-      onChange: setCountryCode
+      defaultValue: props.preferredCountry
     }
   ), /* @__PURE__ */ React5.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full  hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React5.createElement(
     "input",
     {
+      type: "tel",
       ref: inputRef,
       id: "phone-number",
+      value: phoneNumber,
+      onChange: handleInputChange,
+      placeholder: props.placeholder,
       className: cn(
         "hawa-block hawa-h-[40px] hawa-w-full hawa-rounded hawa-rounded-l-none hawa-border hawa-border-l-0 hawa-border-l-transparent  hawa-bg-background hawa-p-2 hawa-text-sm hawa-transition-all"
       ),
-      onChange: handleInputChange,
-      value: phoneNumber,
-      type: "tel",
-      placeholder: props.placeholder
+      ...inputProps
     }
   ))), /* @__PURE__ */ React5.createElement(
     "p",