@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.8 → 1.0.0

package/dist/components/NumberPad/Delete.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-function o(t) {
-  return /* @__PURE__ */ e(
+import { jsx } from "react/jsx-runtime";
+function Delete(props) {
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       width: "24",
@@ -8,8 +8,9 @@ function o(t) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      ...t,
-      children: /* @__PURE__ */ e(
+      "data-testid": "delete-icon",
+      ...props,
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M15 6L9 12L15 18",
@@ -22,5 +23,5 @@ function o(t) {
   );
 }
 export {
-  o as Delete
+  Delete
 };

package/dist/components/NumberPad/NumberPad.d.ts

@@ -27,5 +27,6 @@ interface NumberPadProps {
      */
     longPressOptions?: LongPressOptions;
 }
-export declare const NumberPad: ({ value, onChange, disabled, onLongDeletePress, longPressOptions, }: NumberPadProps) => import("react/jsx-runtime").JSX.Element;
-export default NumberPad;
+declare const NumberPad: ({ value, onChange, disabled, onLongDeletePress, longPressOptions, }: NumberPadProps) => import("react/jsx-runtime").JSX.Element;
+export { NumberPad };
+export type { NumberPadProps };

package/dist/components/NumberPad/NumberPad.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { cn as c } from "../../lib/utils.js";
-import { useLongPress as d } from "../../node_modules/.pnpm/@uidotdev_usehooks@2.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@uidotdev/usehooks/index.js";
-import { typographyVariants as m } from "../Typography/Typography.js";
-import { Delete as v } from "./Delete.js";
-const f = [
+import { jsx } from "react/jsx-runtime";
+import haptics from "../../lib/haptics.js";
+import { cn } from "../../lib/utils.js";
+import { useLongPress } from "../../node_modules/.pnpm/@uidotdev_usehooks@2.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@uidotdev/usehooks/index.js";
+import { typographyVariants } from "../Typography/Typography.js";
+import { Delete } from "./Delete.js";
+const buttons = [
   { value: "1" },
   { value: "2" },
   { value: "3" },
@@ -16,49 +17,53 @@ const f = [
   { value: "9" },
   { value: "." },
   { value: "0" },
-  { value: "del", label: /* @__PURE__ */ l(v, { className: "size-6" }) }
-], h = ({
-  value: r = "",
-  onChange: s,
-  disabled: a = !1,
-  onLongDeletePress: t = () => {
+  { value: "del", label: /* @__PURE__ */ jsx(Delete, { className: "size-6" }) }
+];
+const NumberPad = ({
+  value = "",
+  onChange,
+  disabled = false,
+  onLongDeletePress = () => {
   },
-  longPressOptions: n = {
+  longPressOptions = {
     threshold: 1500
   }
 }) => {
-  r !== "" && isNaN(Number(r)) && console.error("NumberPad value must be a valid number or empty string");
-  const o = (e) => {
-    if (!(!s || a))
-      if (e === "del")
-        s(r.slice(0, -1));
-      else {
-        if (e === "." && r.includes("."))
-          return;
-        {
-          const i = r + e;
-          (e === "." || !isNaN(Number(i))) && s(i);
-        }
+  if (value !== "" && isNaN(Number(value))) {
+    console.error("NumberPad value must be a valid number or empty string");
+  }
+  const handleButtonClick = (buttonValue) => {
+    haptics.impact("light");
+    if (!onChange || disabled) return;
+    if (buttonValue === "del") {
+      onChange(value.slice(0, -1));
+    } else if (buttonValue === "." && value.includes(".")) {
+      return;
+    } else {
+      const newValue = value + buttonValue;
+      if (buttonValue === "." || !isNaN(Number(newValue))) {
+        onChange(newValue);
       }
-  }, u = d(t, n);
-  return /* @__PURE__ */ l("div", { className: "grid grid-cols-3 grid-rows-4 gap-1 w-full", children: f.map((e) => /* @__PURE__ */ l(
+    }
+  };
+  const longPressAttributes = useLongPress(onLongDeletePress, longPressOptions);
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 grid-rows-4 gap-1 w-full", children: buttons.map((button) => /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      onClick: () => o(e.value),
-      disabled: a,
-      className: c(
-        m({ variant: "heading", level: 3 }),
-        "h-12 min-w-28 flex items-center justify-center select-none group",
-        "disabled:text-gray-300 disabled:cursor-not-allowed disabled:active:bg-transparent"
+      onClick: () => handleButtonClick(button.value),
+      disabled,
+      className: cn(
+        typographyVariants({ variant: "heading", level: 3 }),
+        "h-12 min-w-28 flex items-center justify-center select-none",
+        "disabled:text-gray-300 disabled:cursor-not-allowed"
       ),
-      ...e.value === "del" ? u : {},
-      children: /* @__PURE__ */ l("span", { className: "duration-200 transition-colors size-12 flex items-center justify-center rounded-full group-active:bg-gray-50", children: e.label || e.value })
+      ...button.value === "del" ? longPressAttributes : {},
+      children: /* @__PURE__ */ jsx("span", { className: "duration-200 transition-colors size-12 flex items-center justify-center rounded-full", children: button.label || button.value })
     },
-    e.value
+    button.value
   )) });
 };
 export {
-  h as NumberPad,
-  h as default
+  NumberPad
 };

package/dist/components/NumberPad/index.d.ts

@@ -1 +1 @@
-export * from './NumberPad';
+export { NumberPad, type NumberPadProps } from './NumberPad';

package/dist/components/OTPField/OTPField.d.ts

@@ -1,11 +1,61 @@
 import { OTPInputProps } from 'input-otp';
 import * as React from "react";
+export declare const inputVariants: (props?: ({
+    error?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const patternDictionary: {
     digits: string;
     chars: string;
     digitsAndChars: string;
 };
-export declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPInputProps, "className" | "inputMode" | "maxLength" | "placeholder" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback" | "render"> & {
+type OTPFieldProps = Omit<OTPInputProps, "render" | "className" | "containerClassName" | "textAlign" | "inputMode" | "pushPasswordManagerStrategy" | "noScriptCSSFallback" | "maxLength" | "placeholder"> & {
+    /**
+     * The number of input slots/characters in the OTP field.
+     * Defaults to 6 if not specified.
+     */
+    maxLength?: number;
+    /**
+     * Whether the OTP field is in an error state.
+     * When true, displays error styling.
+     */
+    error?: boolean;
+    /**
+     * Custom regex pattern to validate the input.
+     * If not provided, uses the pattern from the selected mode.
+     */
+    pattern?: string;
+    /**
+     * The input mode that determines allowed characters.
+     * - digits: Only numbers 0-9
+     * - chars: Only letters A-Z
+     * - digitsAndChars: Both numbers and letters
+     * Defaults to "digits" if not specified.
+     */
+    mode?: keyof typeof patternDictionary;
+    /**
+     * The current value of the OTP input.
+     * Used for controlled component behavior.
+     */
+    value?: string;
+    /**
+     * Callback fired when the input value changes.
+     * @param newValue The new input value
+     */
+    onChange?: (newValue: string) => unknown;
+    /**
+     * Callback fired when all slots are filled.
+     * Called with the complete OTP value.
+     */
+    onComplete?: (...args: any[]) => unknown;
+    /**
+     * Function to transform pasted text before inserting.
+     * Useful for handling formatted strings, e.g. "123-456" -> "123456"
+     * @param pastedText The text being pasted
+     * @returns The transformed text to insert
+     */
+    pasteTransformer?: (pastedText: string) => string;
+};
+declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPInputProps, "className" | "inputMode" | "maxLength" | "placeholder" | "textAlign" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback" | "render"> & {
     /**
      * The number of input slots/characters in the OTP field.
      * Defaults to 6 if not specified.
@@ -52,4 +102,5 @@ export declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPInputProp
      */
     pasteTransformer?: (pastedText: string) => string;
 } & React.RefAttributes<HTMLInputElement>>;
-export default OTPField;
+export { OTPField };
+export type { OTPFieldProps };

package/dist/components/OTPField/OTPField.js

@@ -1,47 +1,72 @@
 "use client";
-import { jsx as t, Fragment as p } from "react/jsx-runtime";
-import { cn as l } from "../../lib/utils.js";
-import { OTPInput as f, REGEXP_ONLY_DIGITS as g, REGEXP_ONLY_CHARS as h, REGEXP_ONLY_DIGITS_AND_CHARS as u } from "../../node_modules/.pnpm/input-otp@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
-import * as x from "react";
-import { inputVariants as y } from "../Input/Input.js";
-import { typographyVariants as _ } from "../Typography/Typography.js";
-const R = {
-  digits: g,
-  chars: h,
-  digitsAndChars: u
-}, E = {
+import { jsx, Fragment } from "react/jsx-runtime";
+import { withHaptics } from "../../lib/haptics.js";
+import { cn } from "../../lib/utils.js";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { OTPInput as Lt, REGEXP_ONLY_DIGITS as Kt, REGEXP_ONLY_CHARS as Jt, REGEXP_ONLY_DIGITS_AND_CHARS as Qt } from "../../node_modules/.pnpm/input-otp@1.4.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
+import * as React from "react";
+import { typographyVariants } from "../Typography/Typography.js";
+const inputVariants = cva(
+  cn(
+    "peer h-[3.5rem] w-full rounded-[0.625rem] border border-gray-100 bg-gray-100 px-4 outline-none transition duration-300",
+    "placeholder:text-gray-500",
+    "focus:border-gray-300 focus:bg-gray-0 focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ),
+  {
+    variants: {
+      error: {
+        true: "border-error-600 focus:border-error-600 bg-gray-0"
+      }
+    },
+    defaultVariants: {
+      error: false
+    }
+  }
+);
+const patternDictionary = {
+  digits: Kt,
+  chars: Jt,
+  digitsAndChars: Qt
+};
+const inputModeDictionary = {
   digits: "numeric",
   chars: "text",
   digitsAndChars: "text"
-}, O = x.forwardRef(
-  ({ maxLength: a = 6, error: r, children: N, mode: i = "digits", pattern: n, ...s }, e) => /* @__PURE__ */ t(
-    f,
-    {
-      ref: e,
-      ...s,
-      maxLength: a,
-      inputMode: E[i],
-      pattern: n || R[i],
-      containerClassName: "flex items-center gap-2 has-[:disabled]:opacity-50",
-      render: ({ slots: o }) => /* @__PURE__ */ t(p, { children: o.map(({ isActive: d, char: c }, m) => /* @__PURE__ */ t(
-        "div",
-        {
-          ref: e,
-          role: "textbox",
-          className: l(
-            y({ error: r }),
-            _({ variant: "body", level: 2 }),
-            "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
-            (d || r) && "z-10 bg-gray-0"
-          ),
-          children: c
-        },
-        m
-      )) })
-    }
-  )
+};
+const OTPField = React.forwardRef(
+  ({ maxLength = 6, error, children, mode = "digits", pattern, onChange, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Lt,
+      {
+        ref,
+        ...props,
+        maxLength,
+        inputMode: inputModeDictionary[mode],
+        pattern: pattern || patternDictionary[mode],
+        onChange: withHaptics(onChange),
+        containerClassName: "flex items-center gap-2 has-[:disabled]:opacity-50",
+        render: ({ slots }) => /* @__PURE__ */ jsx(Fragment, { children: slots.map(({ isActive, char }, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            role: "textbox",
+            className: cn(
+              inputVariants({ error }),
+              typographyVariants({ variant: "body", level: 2 }),
+              "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
+              (isActive || error) && "z-10 bg-gray-0"
+            ),
+            children: char
+          },
+          idx
+        )) })
+      }
+    );
+  }
 );
+OTPField.displayName = "OTPField";
 export {
-  O as OTPField,
-  O as default
+  OTPField,
+  inputVariants
 };

package/dist/components/OTPField/index.d.ts

@@ -1 +1 @@
-export * from './OTPField';
+export { OTPField, type OTPFieldProps } from './OTPField';

package/dist/components/PasswordField/PasswordField.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from '../Input';
-export interface PasswordFieldProps extends Omit<InputProps, "startAdornment" | "startAdornmentWidth"> {
+interface PasswordFieldProps extends Omit<InputProps, "startAdornment"> {
     /**
      * If true, the input will display in an error state with error styling
      */
@@ -9,5 +9,6 @@ export interface PasswordFieldProps extends Omit<InputProps, "startAdornment" |
      */
     isValid?: boolean;
 }
-export declare const PasswordField: import('react').ForwardRefExoticComponent<PasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;
-export default PasswordField;
+declare const PasswordField: import('react').ForwardRefExoticComponent<PasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export { PasswordField };
+export type { PasswordFieldProps };

package/dist/components/PasswordField/index.d.ts

@@ -1 +1 @@
-export * from './PasswordField';
+export { PasswordField, type PasswordFieldProps } from './PasswordField';

package/dist/components/PasteButton/PasteButton.d.ts

@@ -15,6 +15,6 @@ interface PasteButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      */
     onPaste?: (value: string) => void;
 }
-export declare const PASTE_BUTTON_WIDTH = 5;
 declare const PasteButton: React.ForwardRefExoticComponent<PasteButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default PasteButton;
+export { PasteButton };
+export type { PasteButtonProps };

package/dist/components/PasteButton/PasteButton.js

@@ -1,41 +1,43 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { cn as m } from "../../lib/utils.js";
-import { MagicWand as u } from "../Icons/MagicWand.js";
-import { Typography as p } from "../Typography/Typography.js";
-const T = 5, f = d.forwardRef(
-  ({ children: x, inputRef: r, label: o = "Paste", className: n, onPaste: a, ...c }, l) => {
-    const i = async () => {
+import { jsxs, jsx } from "react/jsx-runtime";
+import haptics from "../../lib/haptics.js";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { MagicWand } from "../Icons/MagicWand.js";
+import { Typography } from "../Typography/Typography.js";
+const PasteButton = React.forwardRef(
+  ({ children, inputRef, label = "Paste", className, onPaste, ...props }, ref) => {
+    const handlePaste = async () => {
       try {
-        if (r && "current" in r && r.current) {
-          const t = await navigator.clipboard.readText();
-          r.current.value = t, a == null || a(t);
+        if (inputRef && "current" in inputRef && inputRef.current) {
+          const text = await navigator.clipboard.readText();
+          inputRef.current.value = text;
+          onPaste == null ? void 0 : onPaste(text);
+          haptics.impact("light");
         }
-      } catch (t) {
-        console.error("Failed to read clipboard:", t);
+      } catch (error) {
+        console.error("Failed to read clipboard:", error);
       }
     };
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        ref: l,
-        className: m(
-          n,
-          "flex h-full w-full items-center justify-center px-4 gap-1 text-gray-900 transition duration-300 bg-transparent disabled:cursor-not-allowed"
+        ref,
+        className: cn(
+          className,
+          "flex h-full w-full items-center justify-center gap-1 text-gray-900 transition duration-300 bg-transparent disabled:cursor-not-allowed"
         ),
-        onClick: i,
-        ...c,
+        onClick: handlePaste,
+        ...props,
         children: [
-          /* @__PURE__ */ e(p, { variant: "subtitle", level: 3, children: o }),
-          /* @__PURE__ */ e(u, {})
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, children: label }),
+          /* @__PURE__ */ jsx(MagicWand, {})
         ]
       }
     );
   }
 );
-f.displayName = "PasteButton";
+PasteButton.displayName = "PasteButton";
 export {
-  T as PASTE_BUTTON_WIDTH,
-  f as default
+  PasteButton
 };

package/dist/components/PasteButton/index.d.ts

@@ -1 +1 @@
-export { default } from './PasteButton';
+export { PasteButton, type PasteButtonProps } from './PasteButton';

package/dist/components/PhoneField/CountryListItem.js

@@ -1,35 +1,36 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import "../Flag/Flag.js";
-import { LazyFlag as m } from "../Flag/LazyFlag.js";
-import { Typography as l } from "../Typography/Typography.js";
-const p = ({
-  countryCode: t,
-  countryName: a,
-  onClick: e,
-  isSelected: s
-}) => /* @__PURE__ */ i(
-  "button",
-  {
-    type: "button",
-    "data-country": t,
-    className: "h-[3.75rem] flex items-center w-full gap-2 cursor-pointer",
-    onClick: () => e == null ? void 0 : e(t),
-    ...s && { "data-selected": !0 },
-    children: [
-      /* @__PURE__ */ r(m, { countryCode: t, size: 32 }),
-      /* @__PURE__ */ r(
-        l,
-        {
-          variant: "subtitle",
-          level: 2,
-          className: "mx-2 overflow-hidden text-ellipsis whitespace-nowrap",
-          children: a
-        }
-      )
-    ]
-  }
-);
-p.displayName = "CountryListItem";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Flag } from "../Flag/Flag.js";
+import { Typography } from "../Typography/Typography.js";
+const CountryListItem = ({
+  countryCode,
+  countryName,
+  onClick,
+  isSelected
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-country": countryCode,
+      className: "h-[3.75rem] flex items-center w-full gap-2 cursor-pointer",
+      onClick: () => onClick == null ? void 0 : onClick(countryCode),
+      ...isSelected && { "data-selected": true },
+      children: [
+        /* @__PURE__ */ jsx(Flag, { countryCode, size: 32 }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "subtitle",
+            level: 2,
+            className: "mx-2 overflow-hidden text-ellipsis whitespace-nowrap",
+            children: countryName
+          }
+        )
+      ]
+    }
+  );
+};
+CountryListItem.displayName = "CountryListItem";
 export {
-  p as default
+  CountryListItem as default
 };

package/dist/components/PhoneField/CountrySelectorButton.js

@@ -1,12 +1,11 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { cn as l } from "../../lib/utils.js";
-import { cva as m } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as c } from "react";
-import { Flag as d } from "../Flag/Flag.js";
-import "../Flag/LazyFlag.js";
-import { ArrowDown as u } from "../Icons/ArrowDown.js";
-import { Typography as f } from "../Typography/Typography.js";
-const p = m(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { cva } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef } from "react";
+import { ArrowDown } from "../Icons/ArrowDown.js";
+import { Typography } from "../Typography/Typography.js";
+import { Flag } from "../Flag/Flag.js";
+const triggerVariants = cva(
   "flex items-center bg-transparent focus:outline-none cursor-pointer text-gray-900",
   {
     variants: {
@@ -16,26 +15,29 @@ const p = m(
       }
     },
     defaultVariants: {
-      disabled: !1
+      disabled: false
     }
   }
-), y = c(
-  ({ disabled: t, className: o, value: e, label: a, ...s }, i) => /* @__PURE__ */ n(
-    "div",
-    {
-      ref: i,
-      ...s,
-      className: l(p({ disabled: t, className: o })),
-      "data-testid": "country-selector-button",
-      children: [
-        /* @__PURE__ */ r("div", { className: "mr-2", children: /* @__PURE__ */ r(d, { countryCode: e, size: 24 }) }),
-        /* @__PURE__ */ r(f, { variant: "subtitle", level: 3, className: "mr-2", children: a }),
-        /* @__PURE__ */ r(u, {})
-      ]
-    }
-  )
 );
-y.displayName = "CountrySelectorButton";
+const CountrySelectorButton = forwardRef(
+  ({ disabled, className, value, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cn(triggerVariants({ disabled, className })),
+        "data-testid": "country-selector-button",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mr-2", children: /* @__PURE__ */ jsx(Flag, { countryCode: value, size: 24 }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, className: "mr-2", children: label }),
+          /* @__PURE__ */ jsx(ArrowDown, {})
+        ]
+      }
+    );
+  }
+);
+CountrySelectorButton.displayName = "CountrySelectorButton";
 export {
-  y as default
+  CountrySelectorButton as default
 };

package/dist/components/PhoneField/GroupedCountryList.js

@@ -1,30 +1,34 @@
-import { jsxs as i, jsx as e, Fragment as n } from "react/jsx-runtime";
-import { DrawerClose as c } from "../Drawer/Drawer.js";
-import { Magnifier as d } from "../Icons/Magnifier.js";
-import { Typography as l } from "../Typography/Typography.js";
-import p from "./CountryListItem.js";
-function C({
-  groupedCountries: o,
-  onSelect: s,
-  value: m
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { withHaptics } from "../../lib/haptics.js";
+import { Magnifier } from "../Icons/Magnifier.js";
+import CountryListItem from "./CountryListItem.js";
+import { Typography } from "../Typography/Typography.js";
+import { DrawerClose } from "../Drawer/Drawer.js";
+function GroupedCountryList({
+  groupedCountries,
+  onSelect,
+  value
 }) {
-  return Object.keys(o).length === 0 ? /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center grow text-gray-400 gap-2 h-full", children: [
-    /* @__PURE__ */ e(d, { className: "size-8" }),
-    /* @__PURE__ */ e(l, { variant: "body", level: 3, children: "No search results" })
-  ] }) : /* @__PURE__ */ e(n, { children: Object.entries(o).sort(([r], [a]) => r.localeCompare(a)).map(([r, a]) => /* @__PURE__ */ i("div", { className: "group", children: [
-    /* @__PURE__ */ e(l, { variant: "subtitle", level: 3, className: "text-gray-400 mb-2", children: r }),
-    a.map((t) => /* @__PURE__ */ e(c, { asChild: !0, children: /* @__PURE__ */ e(
-      p,
+  if (Object.keys(groupedCountries).length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center grow text-gray-400 gap-2 h-full", children: [
+      /* @__PURE__ */ jsx(Magnifier, { className: "size-8" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", level: 3, children: "No search results" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(groupedCountries).sort(([a], [b]) => a.localeCompare(b)).map(([letter, countries]) => /* @__PURE__ */ jsxs("div", { className: "group", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 3, className: "text-gray-400 mb-2", children: letter }),
+    countries.map((country) => /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+      CountryListItem,
       {
-        countryCode: t.countryCode,
-        countryName: t.name,
-        onClick: s,
-        isSelected: m === t.countryCode
+        countryCode: country.countryCode,
+        countryName: country.name,
+        onClick: withHaptics(onSelect),
+        isSelected: value === country.countryCode
       }
-    ) }, t.countryCode)),
-    /* @__PURE__ */ e("div", { className: "h-[1px] bg-gray-200 my-4 group-last:hidden" })
-  ] }, r)) });
+    ) }, country.countryCode)),
+    /* @__PURE__ */ jsx("div", { className: "h-[1px] bg-gray-200 my-4 group-last:hidden" })
+  ] }, letter)) });
 }
 export {
-  C as GroupedCountryList
+  GroupedCountryList
 };