npm - @worldcoin/mini-apps-ui-kit-react - Versions diffs - 0.0.1 - Mend

@worldcoin/mini-apps-ui-kit-react 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (665) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,78 @@
+# @worldcoin/mini-apps-ui-kit-react
+React components UI Kit library for Mini Apps
+## Getting Started
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Tailwind Configuration
+- `./styles/globals.css`: is the main entrypoint for the tailwind css styles
+- `./public/globals.css`: compiled tailwind css styles
+- `./src/tailwind`: tailwind plugin with uiKit tailwind presets
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- Configure the top-level `parserOptions` property like this:
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+```js
+// eslint.config.js
+import react from "eslint-plugin-react";
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: "18.3" } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs["jsx-runtime"].rules,
+  },
+});
+```
+## Font Configuration
+The library uses three fonts:
+- **[Rubik](https://fonts.google.com/specimen/Rubik)** as the sans-serif font for body text and subtitles `(--font-sans)`
+- **[Sora](https://fonts.google.com/specimen/Sora)** as the display font for headings and numbers `(--font-display)`
+- **[DM Mono](https://fonts.google.com/specimen/DM+Mono)** as the monospace font `(--font-mono)`
+Embed the following code in the `<head>` of your html to load the fonts:
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@600&display=swap" rel="stylesheet">
+```
+Or use the following code to load the fonts via CSS:
+```css
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap');
+```

package/dist/_virtual/_commonjsHelpers.js ADDED Viewed

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as getDefaultExportFromCjs
+};

package/dist/_virtual/create-plugin.js ADDED Viewed

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/createPlugin.js ADDED Viewed

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/dynamic-import-helper.js ADDED Viewed

@@ -0,0 +1,16 @@
+const l = (r, n, t) => {
+  const e = r[n];
+  return e ? typeof e == "function" ? e() : Promise.resolve(e) : new Promise((i, o) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      o.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + n + (n.split("/").length !== t ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+export {
+  l as default
+};

package/dist/components/Button/Button.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonHTMLAttributes } from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
+    isLoading?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /**
+     * The variant style to use
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "ghost";
+    /**
+     * The size of the button
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The border radius of the button
+     * @default "md"
+     */
+    radius?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Whether the button is in a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Optional icon to display in the button.
+     * The component passed to this prop must accept a `style` prop.
+     * The component should use currentColor to match the Input's styling.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether the button should take up the full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button should be rendered as a slot
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/Button/Button.js ADDED Viewed

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { Slot as s } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as y } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as p } from "react";
+import u from "./Spinner.js";
+const f = y(
+  "flex items-center justify-center gap-1 font-display font-semibold leading-[1.2] tracking-normal transition-colors",
+  {
+    variants: {
+      variant: {
+        primary: "bg-gray-900 text-gray-0 hover:bg-gray-700 active:bg-gray-500 disabled:bg-gray-100 disabled:text-gray-300",
+        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 active:bg-gray-400 disabled:bg-gray-100 disabled:text-gray-300",
+        tertiary: "border border-gray-200 bg-transparent text-gray-500 hover:bg-gray-100 active:bg-gray-200 disabled:text-gray-300",
+        ghost: "bg-transparent text-gray-500 hover:bg-gray-100 active:bg-gray-200 disabled:text-gray-300"
+      },
+      size: {
+        sm: "h-10 min-w-10 px-2 text-sm",
+        md: "h-12 min-w-12 px-3 text-base",
+        lg: "h-14 min-w-14 px-4 text-base"
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded",
+        md: "rounded-xl",
+        lg: "rounded-2xl",
+        full: "rounded-full"
+      },
+      isLoading: {
+        true: "border-none bg-transparent fill-transparent text-transparent hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-transparent",
+        false: ""
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "lg",
+      radius: "md",
+      fullWidth: !1
+    }
+  }
+), x = {
+  sm: {
+    width: "1rem",
+    height: "1rem"
+  },
+  md: {
+    width: "1.25rem",
+    height: "1.25rem"
+  },
+  lg: {
+    width: "1.5rem",
+    height: "1.5rem"
+  }
+}, c = p(
+  ({
+    variant: i,
+    size: a = "lg",
+    radius: g,
+    className: h,
+    isLoading: t,
+    children: e,
+    icon: n,
+    fullWidth: o,
+    asChild: d,
+    ...l
+  }, m) => /* @__PURE__ */ b(
+    d ? s : "button",
+    {
+      ref: m,
+      className: f({
+        variant: i,
+        size: a,
+        radius: g,
+        isLoading: t,
+        fullWidth: o
+      }),
+      ...l,
+      children: [
+        n && /* @__PURE__ */ r(
+          s,
+          {
+            style: {
+              ...x[a],
+              opacity: t ? 0 : 1
+            },
+            children: n
+          }
+        ),
+        e && /* @__PURE__ */ r("span", { children: e }),
+        t && /* @__PURE__ */ r(u, { className: "absolute" })
+      ]
+    }
+  )
+);
+c.displayName = "Button";
+export {
+  c as Button,
+  c as default
+};

package/dist/components/Button/Spinner.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+interface SpinnerProps {
+    /**
+     * Additional CSS classes to apply to the spinner
+     */
+    className?: string;
+}
+declare const Spinner: ({ className }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/dist/components/Button/Spinner.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { cn as r } from "../../lib/utils.js";
+const o = ({ className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "25",
+    height: "24",
+    viewBox: "0 0 25 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: r("absolute h-6 w-6 animate-spin", t),
+    children: [
+      /* @__PURE__ */ s(
+        "circle",
+        {
+          cx: "12.5",
+          cy: "12",
+          r: "10.75",
+          strokeOpacity: "0.16",
+          strokeWidth: "2.5",
+          className: "stroke-gray-400"
+        }
+      ),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: "M17.7793 2.63334C18.1177 2.03289 17.9073 1.2652 17.275 0.990931C15.811 0.355965 14.2311 0.0176611 12.6271 0.000672984C11.0231 -0.0163151 9.43634 0.28845 7.95926 0.892267C7.32126 1.15308 7.09463 1.91614 7.42026 2.52362C7.74589 3.1311 8.50044 3.35103 9.14533 3.10774C10.2458 2.69258 11.4173 2.484 12.6007 2.49653C13.784 2.50907 14.9508 2.74241 16.0423 3.18079C16.6818 3.43768 17.4409 3.23378 17.7793 2.63334Z",
+          className: "fill-gray-900"
+        }
+      )
+    ]
+  }
+);
+export {
+  o as default
+};

package/dist/components/Button/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './Button';

package/dist/components/Button/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { Button as r } from "./Button.js";
+export {
+  r as Button
+};

package/dist/components/Checkbox/Checkbox.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
+export interface CheckboxProps extends Omit<RadixCheckboxProps, "onCheckedChange" | "onChange" | "className"> {
+    /**
+     * The checked state of the checkbox.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Callback function that is triggered when the checked state changes.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The disabled state of the checkbox.
+     * @default false
+     */
+    disabled?: boolean;
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Root as c, Indicator as s } from "../../node_modules/.pnpm/@radix-ui_react-checkbox@1.1.3_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18._5vtvszwgvdmnkk62ia2dob365m/node_modules/@radix-ui/react-checkbox/dist/index.js";
+import { forwardRef as n } from "react";
+import { Tick as i } from "../Icons/Tick.js";
+const l = n(
+  ({ checked: a, onChange: r, disabled: t = !1, ...o }, d) => /* @__PURE__ */ e(
+    c,
+    {
+      ref: d,
+      checked: a,
+      onCheckedChange: r,
+      disabled: t,
+      className: "flex h-6 w-6 items-center justify-center rounded-md border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900 data-[state=unchecked]:border-gray-400 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
+      ...o,
+      children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "text-gray-0" }) })
+    }
+  )
+);
+l.displayName = "Checkbox";
+export {
+  l as Checkbox,
+  l as default
+};

package/dist/components/Checkbox/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './Checkbox';

package/dist/components/Checkbox/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { Checkbox as r } from "./Checkbox.js";
+export {
+  r as Checkbox
+};

package/dist/components/Chip/Chip.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+type ChipVariant = "default" | "success" | "warning" | "error" | "important";
+export interface ChipProps {
+    /**
+     * The variant of the chip. Default value is "default".
+     */
+    variant?: ChipVariant;
+    /**
+     * The label text displayed on the chip.
+     */
+    label: string;
+    /**
+     * Optional icon to display alongside the label.
+     */
+    icon?: ReactNode;
+    /**
+     *  Optional additional CSS class names.
+     */
+    className?: string;
+}
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
+    variant?: "default" | "success" | "warning" | "error" | "important" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
+export default Chip;

package/dist/components/Chip/Chip.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { Slot as o } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as f } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as l } from "react";
+const m = f(
+  "inline-flex h-7 items-center gap-2 rounded-full px-2 font-sans text-sm font-medium leading-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-100 text-gray-900",
+        success: "bg-success-100 text-success-700",
+        warning: "bg-warning-100 text-warning-700",
+        error: "bg-error-100 text-error-700",
+        important: "bg-info-100 text-info-700"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), d = l(
+  ({ className: e = "", icon: r, label: a, variant: n = "default" }, i) => /* @__PURE__ */ s("div", { ref: i, className: m({ variant: n, className: e }), children: [
+    r && /* @__PURE__ */ t(o, { style: { width: "1rem", height: "1rem" }, children: r }),
+    /* @__PURE__ */ t("span", { children: a })
+  ] })
+);
+d.displayName = "Chip";
+export {
+  d as Chip,
+  d as default
+};

package/dist/components/Chip/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './Chip';

package/dist/components/Chip/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { Chip as r } from "./Chip.js";
+export {
+  r as Chip
+};

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

@@ -0,0 +1,16 @@
+import { RadioGroupProps as RadixRadioGroupProps } from '@radix-ui/react-radio-group';
+import * as RadioGroup from "@radix-ui/react-radio-group";
+interface ColorPickerItemProps extends Omit<RadioGroup.RadioGroupItemProps, "value"> {
+    value: string;
+}
+interface ColorPickerGroupProps extends Omit<RadixRadioGroupProps, "value" | "onValueChange" | "onChange"> {
+    /** The currently selected color value */
+    value?: string;
+    /** ColorPickerItem components to render as options */
+    children: React.ReactNode;
+    /** 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;

package/dist/components/ColorPicker/ColorPicker.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Item as i, Indicator as n, Root as c } 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 s } from "react";
+const f = s(
+  ({ value: e, ...o }, r) => /* @__PURE__ */ t(
+    i,
+    {
+      ref: r,
+      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
+      },
+      ...o,
+      children: /* @__PURE__ */ t(
+        n,
+        {
+          className: "absolute flex size-[3.5rem] items-center rounded-full justify-center opacity-25",
+          style: { boxShadow: `0px 0px 0px 2px ${e}` }
+        }
+      )
+    }
+  )
+), p = s(
+  ({ value: e, onChange: o, children: r, ...a }, l) => /* @__PURE__ */ t(
+    c,
+    {
+      ref: l,
+      value: e,
+      onValueChange: o,
+      className: "flex gap-4 items-center",
+      ...a,
+      children: r
+    }
+  )
+);
+export {
+  p as ColorPickerGroup,
+  f as ColorPickerItem,
+  p as default
+};

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

	@@ -0,0 +1 @@
1	+ export * from './ColorPicker';

package/dist/components/ColorPicker/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { ColorPickerGroup as e, ColorPickerItem as c } from "./ColorPicker.js";
+export {
+  e as ColorPickerGroup,
+  c as ColorPickerItem
+};

package/dist/components/Drawer/Drawer.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare const Drawer: typeof import('vaul').Root;
+declare const DrawerTrigger: typeof DrawerPrimitive.Trigger;
+declare const DrawerClose: typeof DrawerPrimitive.Close;
+declare const DrawerContent: typeof DrawerPrimitive.Content;
+export { Drawer, DrawerTrigger, DrawerClose, DrawerContent };

package/dist/components/Drawer/Drawer.js ADDED Viewed

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { cn as n } from "../../lib/utils.js";
+import * as i from "react";
+import { Drawer as e } 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";
+const w = e.Root, x = e.Trigger, g = e.Close, c = i.forwardRef(({ className: a, children: t, ...l }, s) => /* @__PURE__ */ o(e.Portal, { children: [
+  /* @__PURE__ */ r(e.Overlay, { className: "fixed inset-0 z-50", children: /* @__PURE__ */ r("div", { className: "w-full h-full bg-gray-900 opacity-40" }) }),
+  /* @__PURE__ */ o(
+    e.Content,
+    {
+      ref: s,
+      className: n(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 h-auto flex flex-col rounded-t-2xl bg-gray-0 outline-none",
+        a
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ r(e.Title, { className: "sr-only" }),
+        /* @__PURE__ */ r(e.Handle, { className: "my-2" }),
+        t
+      ]
+    }
+  )
+] }));
+c.displayName = "DrawerContent";
+export {
+  w as Drawer,
+  g as DrawerClose,
+  c as DrawerContent,
+  x as DrawerTrigger
+};

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

	@@ -0,0 +1 @@
1	+ export * from './Drawer';

package/dist/components/Drawer/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { Drawer as a, DrawerClose as o, DrawerContent as w, DrawerTrigger as D } from "./Drawer.js";
+export {
+  a as Drawer,
+  o as DrawerClose,
+  w as DrawerContent,
+  D as DrawerTrigger
+};

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

@@ -0,0 +1,14 @@
+import * as FlagComponents from "./flag-components";
+export type CountryCode = keyof typeof FlagComponents;
+interface FlagProps {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'FR')
+     */
+    countryCode: CountryCode;
+    /**
+     * Width and height in pixels for the flag SVG. Defaults to 40px if not specified.
+     */
+    size?: number;
+}
+export declare const Flag: import('react').ForwardRefExoticComponent<FlagProps & import('react').RefAttributes<SVGSVGElement>>;
+export default Flag;

package/dist/components/Flag/Flag.js ADDED Viewed

@@ -0,0 +1,12 @@
+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";
+export {
+  p as Flag,
+  p as default
+};

package/dist/components/Flag/LazyFlag.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+interface FlagProps {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'FR')
+     */
+    countryCode: string;
+    /**
+     * Width and height in pixels for the flag SVG.
+     * Defaults to 40px if not specified.
+     */
+    size?: number;
+}
+export declare const LazyFlag: import('react').ForwardRefExoticComponent<FlagProps & import('react').RefAttributes<SVGSVGElement>>;
+export default LazyFlag;