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

package/dist/components/ClearButton/Clear.d.ts

@@ -4,5 +4,6 @@ interface ClearProps {
      */
     className?: string;
 }
-export declare function Clear({ className }: ClearProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function Clear({ className }: ClearProps): import("react/jsx-runtime").JSX.Element;
+export { Clear };
+export type { ClearProps };

package/dist/components/ClearButton/Clear.js

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as t } from "../../lib/utils.js";
-function s({ className: e }) {
-  return /* @__PURE__ */ r(
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+function Clear({ className }) {
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       width: "24",
@@ -9,8 +9,8 @@ function s({ className: e }) {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: t("size-6", e),
-      children: /* @__PURE__ */ r(
+      className: cn("size-6", className),
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M6.75729 17.2426L11.9999 12M17.2426 6.75736L11.9999 12M11.9999 12L6.75729 6.75736M11.9999 12L17.2426 17.2426",
@@ -23,5 +23,5 @@ function s({ className: e }) {
   );
 }
 export {
-  s as Clear
+  Clear
 };

package/dist/components/ClearButton/ClearButton.d.ts

@@ -10,6 +10,6 @@ interface ClearButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     onClear?: () => void;
 }
-export declare const CLEAR_BUTTON_WIDTH = 1.25;
 declare const ClearButton: React.ForwardRefExoticComponent<ClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default ClearButton;
+export { ClearButton };
+export type { ClearButtonProps };

package/dist/components/ClearButton/ClearButton.js

@@ -1,27 +1,31 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as m from "react";
-import { cn as u } from "../../lib/utils.js";
-import { Clear as l } from "./Clear.js";
-const B = 1.25, i = m.forwardRef(
-  ({ children: p, inputRef: t, className: a, onClear: r, ...n }, c) => {
-    const s = (o) => {
-      o.preventDefault(), o.stopPropagation(), t && "current" in t && t.current && (t.current.value = "", r == null || r());
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Clear } from "./Clear.js";
+const ClearButton = React.forwardRef(
+  ({ children, inputRef, className, onClear, ...props }, ref) => {
+    const handleClear = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (inputRef && "current" in inputRef && inputRef.current) {
+        inputRef.current.value = "";
+        onClear == null ? void 0 : onClear();
+      }
     };
-    return /* @__PURE__ */ e(
+    return /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        ref: c,
-        className: u(a),
-        onMouseDown: s,
-        ...n,
-        children: /* @__PURE__ */ e(l, {})
+        ref,
+        className: cn(className),
+        onMouseDown: handleClear,
+        ...props,
+        children: /* @__PURE__ */ jsx(Clear, {})
       }
     );
   }
 );
-i.displayName = "ClearButton";
+ClearButton.displayName = "ClearButton";
 export {
-  B as CLEAR_BUTTON_WIDTH,
-  i as default
+  ClearButton
 };

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

@@ -1 +1 @@
-export { default } from './ClearButton';
+export { ClearButton, type ClearButtonProps } from './ClearButton';

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -11,6 +11,7 @@ interface ColorPickerGroupProps extends Omit<RadixRadioGroupProps, "value" | "on
     /** Callback fired when the selected color changes */
     onChange?: (value: string) => void;
 }
-export declare const ColorPickerItem: import('react').ForwardRefExoticComponent<ColorPickerItemProps & import('react').RefAttributes<HTMLButtonElement>>;
-export declare const ColorPickerGroup: import('react').ForwardRefExoticComponent<ColorPickerGroupProps & import('react').RefAttributes<HTMLDivElement>>;
-export default ColorPickerGroup;
+declare const ColorPickerItem: import('react').ForwardRefExoticComponent<ColorPickerItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const ColorPickerGroup: import('react').ForwardRefExoticComponent<ColorPickerGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ColorPickerGroup, ColorPickerItem };
+export type { ColorPickerGroupProps, ColorPickerItemProps };

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,35 +1,39 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Item as n, Indicator as d, Root as i } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
-import { forwardRef as a } from "react";
-const f = a(
-  ({ value: e, ...r }, o) => /* @__PURE__ */ t(
-    n,
-    {
-      ref: o,
-      value: e,
-      className: "size-[3.25rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed",
-      style: {
-        background: e
-      },
-      ...r,
-      children: /* @__PURE__ */ t(d, { className: "size-11 rounded-full bg-transparent border-2 border-gray-0" })
-    }
-  )
-), p = a(
-  ({ value: e, onChange: r, children: o, ...s }, l) => /* @__PURE__ */ t(
-    i,
-    {
-      ref: l,
-      value: e,
-      onValueChange: r,
-      className: "flex gap-4 items-center",
-      ...s,
-      children: o
-    }
-  )
+import { jsx } from "react/jsx-runtime";
+import { Item as Item2, Indicator, Root as Root2 } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
+import { forwardRef } from "react";
+const ColorPickerItem = forwardRef(
+  ({ value, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Item2,
+      {
+        ref,
+        value,
+        className: "size-[3.25rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed",
+        style: {
+          background: value
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(Indicator, { className: "size-11 rounded-full bg-transparent border-2 border-gray-0" })
+      }
+    );
+  }
+);
+const ColorPickerGroup = forwardRef(
+  ({ value, onChange, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Root2,
+      {
+        ref,
+        value,
+        onValueChange: onChange,
+        className: "flex gap-4 items-center",
+        ...props,
+        children
+      }
+    );
+  }
 );
 export {
-  p as ColorPickerGroup,
-  f as ColorPickerItem,
-  p as default
+  ColorPickerGroup,
+  ColorPickerItem
 };

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

@@ -1 +1,2 @@
-export * from './ColorPicker';
+export { ColorPickerGroup, ColorPickerItem } from './ColorPicker';
+export type { ColorPickerGroupProps, ColorPickerItemProps } from './ColorPicker';

package/dist/components/CountryDrawer/CountryDrawer.d.ts

@@ -19,5 +19,6 @@ interface CountryDrawerProps {
     /** Optional callback fired when drawer open/close animation completes */
     onAnimationEnd?: (open: boolean) => void;
 }
-export declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, title, searchLabel, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, title, searchLabel, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
+export { CountryDrawer };
+export type { CountryDrawerProps };

package/dist/components/CountryDrawer/CountryDrawer.js

@@ -1,66 +1,74 @@
 "use client";
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as i, useRef as v } from "react";
-import { Button as x } from "../Button/Button.js";
-import { Drawer as D, DrawerTrigger as T, DrawerContent as N, DrawerClose as b } from "../Drawer/Drawer.js";
-import { XMark as j } from "../Icons/XMark.js";
-import { GroupedCountryList as k } from "../PhoneField/GroupedCountryList.js";
-import { SearchField as B } from "../SearchField/SearchField.js";
-import { TopBar as F } from "../TopBar/TopBar.js";
-import { useCountryFiltering as G } from "./useCountryFiltering.js";
-import { useCountryGrouping as O } from "./useCountryGrouping.js";
-function J({
-  onChange: l,
-  value: s,
-  countries: u,
-  onAnimationEnd: c,
-  disabled: m = !1,
-  children: h,
-  defaultValue: f = "US",
-  title: p = "Country",
-  searchLabel: d
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { XMark } from "../Icons/XMark.js";
+import { GroupedCountryList } from "../PhoneField/GroupedCountryList.js";
+import { useCountryFiltering } from "./useCountryFiltering.js";
+import { useCountryGrouping } from "./useCountryGrouping.js";
+import { Drawer, DrawerTrigger, DrawerContent, DrawerClose } from "../Drawer/Drawer.js";
+import { TopBar } from "../TopBar/TopBar.js";
+import { Button } from "../Button/Button.js";
+import { SearchField } from "../SearchField/SearchField.js";
+function CountryDrawer({
+  onChange,
+  value,
+  countries,
+  onAnimationEnd,
+  disabled = false,
+  children,
+  defaultValue = "US",
+  title = "Country",
+  searchLabel
 }) {
-  const [o, t] = i(""), [C, n] = i(!1), g = v(null), w = (r) => {
-    t(r.target.value);
-  }, y = G({
-    countries: u,
-    searchText: o
-  }), S = O({
-    countries: y,
-    defaultValue: f
+  const [searchText, setSearchText] = useState("");
+  const [open, setOpen] = useState(false);
+  const searchRef = useRef(null);
+  const handleSearchChange = (event) => {
+    setSearchText(event.target.value);
+  };
+  const filteredCountries = useCountryFiltering({
+    countries,
+    searchText
   });
-  return /* @__PURE__ */ a(D, { open: C, onOpenChange: n, onAnimationEnd: c, height: "full", children: [
-    /* @__PURE__ */ e(T, { asChild: !0, className: "outline-none", disabled: m, children: h }),
-    /* @__PURE__ */ a(N, { children: [
-      /* @__PURE__ */ e(
-        F,
+  const groupedCountries = useCountryGrouping({
+    countries: filteredCountries,
+    defaultValue
+  });
+  const handleCountrySelect = (countryCode) => {
+    onChange(countryCode);
+    setSearchText("");
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, onAnimationEnd, height: "full", children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, className: "outline-none", disabled, children }),
+    /* @__PURE__ */ jsxs(DrawerContent, { children: [
+      /* @__PURE__ */ jsx(
+        TopBar,
         {
-          title: p,
-          startAdornment: /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(x, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ e(j, {}) }) })
+          title,
+          startAdornment: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ jsx(XMark, {}) }) })
         }
       ),
-      /* @__PURE__ */ e("div", { className: "p-6 shrink-0", children: /* @__PURE__ */ e(
-        B,
+      /* @__PURE__ */ jsx("div", { className: "p-6 shrink-0", children: /* @__PURE__ */ jsx(
+        SearchField,
         {
-          ref: g,
-          value: o,
-          onChange: w,
-          label: d
+          ref: searchRef,
+          value: searchText,
+          onChange: handleSearchChange,
+          label: searchLabel
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-auto px-6 grow", children: /* @__PURE__ */ e(
-        k,
+      /* @__PURE__ */ jsx("div", { className: "no-scrollbar w-full overflow-auto px-6 grow", children: /* @__PURE__ */ jsx(
+        GroupedCountryList,
         {
-          groupedCountries: S,
-          onSelect: (r) => {
-            l(r), t(""), n(!1);
-          },
-          value: s
+          groupedCountries,
+          onSelect: handleCountrySelect,
+          value
         }
       ) })
     ] })
   ] });
 }
 export {
-  J as CountryDrawer
+  CountryDrawer
 };

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

@@ -1 +1 @@
-export * from './CountryDrawer';
+export { CountryDrawer, type CountryDrawerProps } from './CountryDrawer';

package/dist/components/CountryDrawer/useCountryFiltering.js

@@ -1,9 +1,10 @@
-import { defaultCountries as o } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { getCountryDataListByCodes as i, filterCountries as n } from "../PhoneField/utils.js";
-function f({ countries: t, searchText: r }) {
-  const e = t ? i(t) : o;
-  return n(e, r);
+import { defaultCountries as R } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { getCountryDataListByCodes, filterCountries } from "../PhoneField/utils.js";
+function useCountryFiltering({ countries, searchText }) {
+  const richCountries = countries ? getCountryDataListByCodes(countries) : R;
+  const filteredCountries = filterCountries(richCountries, searchText);
+  return filteredCountries;
 }
 export {
-  f as useCountryFiltering
+  useCountryFiltering
 };

package/dist/components/CountryDrawer/useCountryGrouping.js

@@ -1,17 +1,23 @@
-import { parseCountry as s } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { getValidatedCountryCode as p } from "../PhoneField/utils.js";
-function a({
-  countries: t,
-  defaultValue: n = "US"
+import { parseCountry as M } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { getValidatedCountryCode } from "../PhoneField/utils.js";
+function useCountryGrouping({
+  countries,
+  defaultValue = "US"
 }) {
-  return t.reduce((r, u) => {
-    const e = s(u), o = e.name.charAt(0).toUpperCase();
-    return r[o] || (r[o] = []), r[o].push({
-      countryCode: p(e.iso2, n),
-      name: e.name
-    }), r;
+  const groupedCountries = countries.reduce((acc, country) => {
+    const parsedCountry = M(country);
+    const firstLetter = parsedCountry.name.charAt(0).toUpperCase();
+    if (!acc[firstLetter]) {
+      acc[firstLetter] = [];
+    }
+    acc[firstLetter].push({
+      countryCode: getValidatedCountryCode(parsedCountry.iso2, defaultValue),
+      name: parsedCountry.name
+    });
+    return acc;
   }, {});
+  return groupedCountries;
 }
 export {
-  a as useCountryGrouping
+  useCountryGrouping
 };

package/dist/components/Drawer/Drawer.js

@@ -1,71 +1,71 @@
 "use client";
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { cn as m } from "../../lib/utils.js";
-import * as l from "react";
-import { Drawer as i } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
-import "../BottomBar/BottomBar.js";
-import { Button as f } from "../Button/Button.js";
-import { XMark as h } from "../Icons/XMark.js";
-import { Typography as n } from "../Typography/Typography.js";
-import { useDrawer as d, DrawerContext as p } from "./use-drawer.js";
-const u = ({
-  dismissible: a = !0,
-  height: e = "full",
-  modal: t = !0,
-  ...o
-}) => /* @__PURE__ */ r(p.Provider, { value: { dismissible: a, height: e }, children: /* @__PURE__ */ r(
-  i.Root,
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Drawer as Drawer$1 } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
+import { XMark } from "../Icons/XMark.js";
+import { DrawerContext, useDrawer } from "./use-drawer.js";
+import { Button } from "../Button/Button.js";
+import { Typography } from "../Typography/Typography.js";
+const Drawer = ({
+  dismissible = true,
+  height = "full",
+  modal = true,
+  ...props
+}) => /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { dismissible, height }, children: /* @__PURE__ */ jsx(
+  Drawer$1.Root,
   {
-    shouldScaleBackground: !1,
-    dismissible: a,
-    modal: t,
+    shouldScaleBackground: false,
+    dismissible,
+    modal,
     direction: "bottom",
-    handleOnly: !0,
-    ...o
+    handleOnly: true,
+    ...props
   }
 ) });
-u.displayName = "Drawer";
-const w = l.forwardRef((a, e) => /* @__PURE__ */ r(i.Trigger, { ref: e, ...a }));
-w.displayName = i.Trigger.displayName;
-const y = l.forwardRef((a, e) => /* @__PURE__ */ r(i.Close, { ref: e, ...a })), c = l.forwardRef((a, e) => /* @__PURE__ */ r(i.Overlay, { ref: e, className: "fixed inset-0 z-50 bg-gray-900/40", ...a }));
-c.displayName = i.Overlay.displayName;
-const N = l.forwardRef((a, e) => {
-  const { height: t } = d();
-  return /* @__PURE__ */ s(i.Portal, { children: [
-    /* @__PURE__ */ r(c, {}),
-    /* @__PURE__ */ r(
-      i.Content,
+Drawer.displayName = "Drawer";
+const DrawerTrigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer$1.Trigger, { ref, ...props }));
+DrawerTrigger.displayName = Drawer$1.Trigger.displayName;
+const DrawerClose = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer$1.Close, { ref, ...props }));
+const DrawerOverlay = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, { ref, className: "fixed inset-0 z-50 bg-gray-900/40", ...props }));
+DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
+const DrawerContent = React.forwardRef((props, ref) => {
+  const { height } = useDrawer();
+  return /* @__PURE__ */ jsxs(Drawer$1.Portal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Drawer$1.Content,
       {
-        ref: e,
-        ...a,
-        className: m(
+        ref,
+        ...props,
+        className: cn(
           "fixed inset-x-0 bottom-0 z-50 bg-gray-0 outline-none flex flex-col",
-          t === "full" ? "top-0 rounded-none" : "h-auto rounded-t-[1.75rem]",
-          a.className
+          height === "full" ? "top-0 rounded-none" : "h-auto rounded-t-[1.75rem]",
+          props.className
         )
       }
     )
   ] });
 });
-N.displayName = "DrawerContent";
-const D = ({ icon: a, children: e, ...t }) => {
-  const { dismissible: o } = d();
-  return /* @__PURE__ */ s("div", { className: "flex justify-between items-center gap-4 mb-2 w-full", ...t, children: [
-    o && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(y, { asChild: !0, children: /* @__PURE__ */ r(f, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(h, {}) }) }) }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col gap-6", children: e }),
-    o && /* @__PURE__ */ r("div", { className: "shrink-0 size-10" })
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({ icon, children, ...props }) => {
+  const { dismissible } = useDrawer();
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-4 mb-2 w-full", ...props, children: [
+    dismissible && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ jsx(XMark, {}) }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children }),
+    dismissible && /* @__PURE__ */ jsx("div", { className: "shrink-0 size-10" })
   ] });
 };
-D.displayName = "DrawerHeader";
-const g = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(i.Title, { ref: t, ...e, asChild: !0, children: /* @__PURE__ */ r(n, { variant: "subtitle", level: 1, children: e.children }) }));
-g.displayName = i.Title.displayName;
-const v = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(i.Description, { ref: t, className: "text-gray-500", ...e, asChild: !0, children: /* @__PURE__ */ r(n, { variant: "body", level: 2, children: e.children }) }));
-v.displayName = i.Description.displayName;
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle", level: 1, children: props.children }) }));
+DrawerTitle.displayName = Drawer$1.Title.displayName;
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, { ref, className: "text-gray-500", ...props, asChild: true, children: /* @__PURE__ */ jsx(Typography, { variant: "body", level: 2, children: props.children }) }));
+DrawerDescription.displayName = Drawer$1.Description.displayName;
 export {
-  u as Drawer,
-  y as DrawerClose,
-  N as DrawerContent,
-  D as DrawerHeader,
-  g as DrawerTitle,
-  w as DrawerTrigger
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
 };

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

@@ -1 +1,2 @@
-export * from './Drawer';
+export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, } from './Drawer';
+export type { DrawerProps, DrawerContentProps, DrawerHeaderProps, DrawerTitleProps, DrawerDescriptionProps, DrawerTriggerProps, DrawerCloseProps, } from './types';

package/dist/components/Drawer/use-drawer.js

@@ -1,11 +1,13 @@
-import { createContext as r, useContext as t } from "react";
-const o = r(void 0), s = () => {
-  const e = t(o);
-  if (e === void 0)
+import { createContext, useContext } from "react";
+const DrawerContext = createContext(void 0);
+const useDrawer = () => {
+  const context = useContext(DrawerContext);
+  if (context === void 0) {
     throw new Error("useDrawer must be used within a Drawer");
-  return e;
+  }
+  return context;
 };
 export {
-  o as DrawerContext,
-  s as useDrawer
+  DrawerContext,
+  useDrawer
 };

package/dist/components/Flag/Flag.d.ts

@@ -1,6 +1,6 @@
-import * as FlagComponents from "./flag-components";
-export type CountryCode = keyof typeof FlagComponents;
-interface FlagProps {
+import { HTMLAttributes } from 'react';
+import { CountryCode } from './types';
+interface FlagProps extends Omit<HTMLAttributes<HTMLImageElement>, "width" | "height"> {
     /**
      * ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'FR')
      */
@@ -10,5 +10,5 @@ interface FlagProps {
      */
     size?: number;
 }
-export declare const Flag: import('react').ForwardRefExoticComponent<FlagProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const Flag: import('react').ForwardRefExoticComponent<FlagProps & import('react').RefAttributes<HTMLImageElement>>;
 export default Flag;

package/dist/components/Flag/Flag.js

@@ -1,12 +1,26 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import * as e from "./flag-components/index.js";
-const p = n(({ countryCode: t, size: o = 40 }, r) => {
-  const a = e[t];
-  return /* @__PURE__ */ m(a, { ref: r, width: o, height: o });
-});
-p.displayName = "Flag";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+const DEFAULT_CDN_URL = "https://mini-apps-ui-kit.world.org/flags/";
+const DEFAULT_CDN_SUFFIX = "svg";
+const Flag = forwardRef(
+  ({ countryCode, size = 40, className, title, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ref,
+        width: size,
+        height: size,
+        title: title ?? countryCode,
+        src: `${DEFAULT_CDN_URL}${countryCode}.${DEFAULT_CDN_SUFFIX}`,
+        className: cn("object-cover bg-gray-100 rounded-full", className),
+        ...props
+      }
+    );
+  }
+);
+Flag.displayName = "Flag";
 export {
-  p as Flag,
-  p as default
+  Flag,
+  Flag as default
 };

package/dist/components/Flag/constants.d.ts

@@ -1,2 +1 @@
-import { CountryCode } from './Flag';
-export declare const countryCodes: CountryCode[];
+export declare const countryCodes: readonly ["AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "ER", "ES", "ET", "EU", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GT", "GU", "GW", "GY", "HK", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PN", "PR", "PS", "PT", "PW", "PY", "QA", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SI", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VN", "VU", "WS", "XK", "YE", "ZA", "ZM", "ZW"];