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

package/dist/components/OTPField/OTPField.js

@@ -0,0 +1,47 @@
+"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 = {
+  digits: "numeric",
+  chars: "text",
+  digitsAndChars: "text"
+}, O = x.forwardRef(
+  ({ maxLength: i = 6, error: a, children: N, mode: r = "digits", pattern: s, ...n }, e) => /* @__PURE__ */ t(
+    f,
+    {
+      ref: e,
+      ...n,
+      maxLength: i,
+      inputMode: E[r],
+      pattern: s || R[r],
+      containerClassName: "flex items-center gap-1 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: a }),
+            _({ variant: "body", level: 2 }),
+            "w-12 h-[4.25rem] rounded-lg flex items-center justify-center",
+            d && "z-10 bg-gray-0 shadow-card"
+          ),
+          children: c
+        },
+        m
+      )) })
+    }
+  )
+);
+export {
+  O as OTPField,
+  O as default
+};

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

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

package/dist/components/OTPField/index.js

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

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

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as React from "react";
+interface PasteButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Reference to an input element that will receive the pasted text
+     */
+    inputRef: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * Text to display on the paste button
+     * @default "Paste"
+     */
+    label?: string;
+    /**
+     * Optional callback function that will be called after a successful paste
+     */
+    onPaste?: () => void;
+}
+export declare const PASTE_BUTTON_WIDTH = 3.875;
+declare const PasteButton: React.ForwardRefExoticComponent<PasteButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default PasteButton;

package/dist/components/PasteButton/PasteButton.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as d } from "../../lib/utils.js";
+import { Typography as u } from "../Typography/Typography.js";
+const b = 3.875, m = s.forwardRef(
+  ({ children: p, inputRef: r, label: o = "Paste", className: c, onPaste: t, ...l }, n) => {
+    const i = async () => {
+      try {
+        if (r && "current" in r && r.current) {
+          const e = await navigator.clipboard.readText();
+          r.current.value = e, t == null || t();
+        }
+      } catch (e) {
+        console.error("Failed to read clipboard:", e);
+      }
+    };
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        ref: n,
+        className: d(
+          c,
+          "flex h-full w-full items-center justify-center rounded-lg px-4 text-base font-medium text-gray-500 transition duration-300 bg-gray-0 group-focus-within:bg-gray-100 disabled:cursor-not-allowed"
+        ),
+        onClick: i,
+        ...l,
+        children: /* @__PURE__ */ a(u, { variant: "subtitle", level: 4, className: "uppercase text-gray-900", children: o })
+      }
+    );
+  }
+);
+m.displayName = "PasteButton";
+export {
+  b as PASTE_BUTTON_WIDTH,
+  m as default
+};

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

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

package/dist/components/PasteButton/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./PasteButton.js";
+export {
+  o as default
+};

package/dist/components/PhoneField/ArrowDown.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function ArrowDown(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/PhoneField/ArrowDown.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+function n(r) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "10",
+      height: "6",
+      viewBox: "0 0 10 6",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...r,
+      children: /* @__PURE__ */ o(
+        "path",
+        {
+          d: "M1 1L5 5L9 1",
+          stroke: "currentColor",
+          strokeWidth: "1.84615",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  n as ArrowDown
+};

package/dist/components/PhoneField/CountryListItem.d.ts

@@ -0,0 +1,13 @@
+import { CountryCode } from '../Flag';
+interface CountryListItemProps {
+    countryCode: CountryCode;
+    countryName: string;
+    dialCode: string;
+    isSelected: boolean;
+    onClick?: () => void;
+}
+declare const CountryListItem: {
+    ({ countryCode, countryName, dialCode, isSelected, onClick, }: CountryListItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CountryListItem;

package/dist/components/PhoneField/CountryListItem.js

@@ -0,0 +1,39 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import { Flag as n } from "../Flag/Flag.js";
+import "../Flag/LazyFlag.js";
+import { Typography as a } from "../Typography/Typography.js";
+const p = ({
+  countryCode: r,
+  countryName: t,
+  dialCode: o,
+  isSelected: s,
+  onClick: i
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    "data-country": r,
+    className: m(
+      "flex items-center w-full cursor-pointer rounded-md p-2 hover:bg-gray-100",
+      s && "bg-gray-200"
+    ),
+    onClick: i,
+    children: [
+      /* @__PURE__ */ e("span", { className: "w-6 h-6", children: /* @__PURE__ */ e(n, { countryCode: r, size: 24 }) }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          variant: "body",
+          level: 2,
+          className: "mx-2 overflow-hidden text-ellipsis whitespace-nowrap",
+          children: t
+        }
+      ),
+      /* @__PURE__ */ e(a, { variant: "body", level: 2, className: "ml-auto", children: o })
+    ]
+  }
+);
+p.displayName = "CountryListItem";
+export {
+  p as default
+};

package/dist/components/PhoneField/CountrySelectorButton.d.ts

@@ -0,0 +1,9 @@
+import { CountryCode } from '../Flag';
+interface CountrySelectorButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled: boolean;
+    countryCode: CountryCode;
+    hideDialCode: boolean;
+    dialCode: string;
+}
+declare const CountrySelectorButton: import('react').ForwardRefExoticComponent<CountrySelectorButtonProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CountrySelectorButton;

package/dist/components/PhoneField/CountrySelectorButton.js

@@ -0,0 +1,41 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import { cva as c } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as d } from "react";
+import { Flag as p } from "../Flag/Flag.js";
+import "../Flag/LazyFlag.js";
+import { Typography as f } from "../Typography/Typography.js";
+import { ArrowDown as u } from "./ArrowDown.js";
+const y = c(
+  "flex items-center bg-transparent border-none focus:outline-none cursor-pointer",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-20",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), g = d(
+  ({ disabled: t, className: e, countryCode: o, hideDialCode: a, dialCode: s, ...n }, i) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: i,
+      ...n,
+      className: m(y({ disabled: t, className: e })),
+      "data-testid": "country-selector-button",
+      children: [
+        /* @__PURE__ */ r("div", { className: "w-6 h-6 mr-2", children: /* @__PURE__ */ r(p, { countryCode: o, size: 24 }) }),
+        !a && /* @__PURE__ */ r(f, { variant: "subtitle", level: 2, className: "mr-2 text-gray-900", children: s }),
+        /* @__PURE__ */ r("span", { className: "w-2.5 h-1.5", children: /* @__PURE__ */ r(u, { className: "text-gray-400" }) })
+      ]
+    }
+  )
+);
+g.displayName = "CountrySelectorButton";
+export {
+  g as default
+};

package/dist/components/PhoneField/PhoneField.d.ts

@@ -0,0 +1,64 @@
+import { CountryCode } from '../Flag/Flag';
+import { InputProps } from '../Input';
+export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdornment" | "startAdornmentWidth"> {
+    /**
+     * Current phone number value.
+     */
+    value?: string;
+    /**
+     * Callback triggered when the phone number changes.
+     */
+    onChange?: (phone: string) => void;
+    /**
+     * If true, the dial code will be hidden.
+     * The dial code is still displayed at the start of the input and in the dropdown.
+     * @default false
+     */
+    hideDialCode?: boolean;
+    /**
+     * Disable dial code prefill on initialization.
+     * Dial code prefill works only when empty phone value have been provided.
+     * @default true
+     */
+    disableDialCodePrefill?: boolean;
+    /**
+     * If true, the input will display in an error state with error styling
+     */
+    error?: boolean;
+    /**
+     * If true, the input will display in a valid state with success styling
+     */
+    isValid?: boolean;
+    /**
+     * The placeholder text to display when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * When true, prevents the user from interacting with phone field.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Default ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'FR')
+     * @default "US"
+     */
+    defaultCountryCode?: CountryCode;
+    /**
+     * Element to be rendered at the end (right side) of the input.
+     * The component passed to this prop must accept a `style` prop.
+     * The component should use currentColor to match the Input's styling.
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * Width of the end adornment in rem
+     * @default 1.25
+     */
+    endAdornmentWidth?: number;
+    /**
+     * Display mode for the country selector: "dropdown" for desktop or "drawer" for mobile.
+     * @default "dropdown"
+     */
+    countrySelectorMode?: "dropdown" | "drawer";
+}
+export declare const PhoneField: import('react').ForwardRefExoticComponent<PhoneFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export default PhoneField;

package/dist/components/PhoneField/PhoneField.js

@@ -0,0 +1,204 @@
+"use client";
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { DROPDOWN_CONTAINER_STYLES as z } from "../../lib/constants/dropdownStyles.js";
+import { cn as G } from "../../lib/utils.js";
+import { Root as J, Trigger as K, Portal as Q, Content as Z, Viewport as ee, Item as oe } from "../../node_modules/.pnpm/@radix-ui_react-select@2.1.4_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3._atdh45n5c7sked5b6tbwgdz7re/node_modules/@radix-ui/react-select/dist/index.js";
+import { forwardRef as te, useRef as re, useState as w, useImperativeHandle as ne, useMemo as ae } from "react";
+import { usePhoneInput as le, parseCountry as I } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { Drawer as se, DrawerTrigger as ie, DrawerContent as ce, DrawerClose as ue } from "../Drawer/Drawer.js";
+import { Input as de } from "../Input/Input.js";
+import { SearchField as me } from "../SearchField/SearchField.js";
+import { Typography as F } from "../Typography/Typography.js";
+import O from "./CountryListItem.js";
+import P from "./CountrySelectorButton.js";
+import { extendedCountries as c, DIAL_CODE_PREFIX as y, startAdornmentWidthByDialCodeLength as he } from "./constants.js";
+import { getValidatedCountryCode as x, filterCountries as pe } from "./utils.js";
+const fe = te(
+  ({
+    value: R,
+    onChange: u,
+    placeholder: T = "Enter phone number",
+    defaultCountryCode: l = "US",
+    hideDialCode: d = !1,
+    disableDialCodePrefill: $ = !0,
+    disabled: s = !1,
+    error: E = !1,
+    isValid: L,
+    endAdornment: b,
+    endAdornmentWidth: V,
+    countrySelectorMode: W = "dropdown",
+    ..._
+  }, B) => {
+    const g = re(null), [m, h] = w(!1), [j, p] = w(!1), [f, N] = w(""), { inputValue: k, country: C, inputRef: n, handlePhoneValueChange: M, setCountry: q } = le(
+      {
+        defaultCountry: l.toLowerCase(),
+        disableDialCodePrefill: $,
+        value: R,
+        countries: c,
+        onChange: (e) => {
+          u == null || u(e.phone);
+        }
+      }
+    ), a = x(C.iso2, l), H = 2.8, S = `${y}${C.dialCode}`, U = d ? H : he[C.dialCode.length];
+    ne(B, () => n.current);
+    const v = (e) => {
+      e == null || e.preventDefault(), j && requestAnimationFrame(() => {
+        var t;
+        (t = n.current) == null || t.focus();
+      }), p(!1);
+    }, X = (e) => {
+      var r;
+      const t = (r = g.current) == null ? void 0 : r.contains(e.target);
+      p(!!t);
+    }, D = (e) => {
+      q(e.toLowerCase()), h(!1);
+    }, Y = (e) => {
+      N(e.target.value);
+    }, A = ae(
+      () => pe(c, f),
+      [c, f]
+    );
+    return /* @__PURE__ */ o(
+      de,
+      {
+        ..._,
+        ref: n,
+        value: k,
+        onChange: M,
+        placeholder: T,
+        disabled: s,
+        error: E,
+        isValid: L,
+        endAdornment: b,
+        endAdornmentWidth: V,
+        startAdornmentWidth: U,
+        isFocused: m,
+        startAdornment: W === "drawer" ? /* @__PURE__ */ i(
+          se,
+          {
+            open: m,
+            onOpenChange: h,
+            onClose: v,
+            onAnimationEnd: (e) => {
+              e && p(!0);
+            },
+            children: [
+              /* @__PURE__ */ o(ie, { asChild: !0, className: "outline-none", children: /* @__PURE__ */ o(
+                P,
+                {
+                  disabled: s,
+                  countryCode: a,
+                  hideDialCode: d,
+                  dialCode: S
+                }
+              ) }),
+              /* @__PURE__ */ o(ce, { className: "h-[96%]", children: /* @__PURE__ */ i("div", { className: "max-w-md w-full mx-auto flex flex-col flex-grow", children: [
+                /* @__PURE__ */ o(F, { variant: "subtitle", level: 2, className: "px-4 py-2", children: "Select country" }),
+                /* @__PURE__ */ o("div", { className: "px-4 pt-2 pb-4", children: /* @__PURE__ */ o(
+                  me,
+                  {
+                    placeholder: "Search name or number",
+                    value: f,
+                    onChange: Y
+                  }
+                ) }),
+                /* @__PURE__ */ i(
+                  "div",
+                  {
+                    className: "no-scrollbar mx-auto w-full flex flex-col flex-grow flex-basis-0 overflow-auto p-2",
+                    style: {
+                      // Explicitly setting flex-basis ensures that the remaining space in the flex container is used,
+                      // height issues are fixed, and proper scrolling is enabled.
+                      flexBasis: 0
+                    },
+                    children: [
+                      A.map((e) => {
+                        const t = I(e), r = x(
+                          t.iso2,
+                          l
+                        );
+                        return /* @__PURE__ */ o(ue, { className: "block w-full", children: /* @__PURE__ */ o(
+                          O,
+                          {
+                            countryCode: r,
+                            countryName: t.name,
+                            dialCode: `${y}${t.dialCode}`,
+                            onClick: () => {
+                              D(r), N("");
+                            },
+                            isSelected: a === r
+                          }
+                        ) }, r);
+                      }),
+                      A.length === 0 && /* @__PURE__ */ o(F, { variant: "body", level: 2, className: "text-center", children: "No countries found" })
+                    ]
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ) : /* @__PURE__ */ i(
+          J,
+          {
+            value: a,
+            open: m,
+            onOpenChange: h,
+            onValueChange: D,
+            disabled: s,
+            children: [
+              /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
+                P,
+                {
+                  disabled: s,
+                  countryCode: a,
+                  hideDialCode: d,
+                  dialCode: S
+                }
+              ) }),
+              /* @__PURE__ */ o(Q, { children: /* @__PURE__ */ o(
+                Z,
+                {
+                  ref: (e) => {
+                    g.current = e, e && n.current && (e.style.width = `${n.current.offsetWidth}px`);
+                  },
+                  position: "popper",
+                  className: G(z, "-ml-3 mt-5 w-auto"),
+                  onCloseAutoFocus: v,
+                  onPointerDown: X,
+                  children: /* @__PURE__ */ o(ee, { className: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2", children: c.map((e) => {
+                    const t = I(e), r = x(
+                      t.iso2,
+                      l
+                    );
+                    return /* @__PURE__ */ o(
+                      oe,
+                      {
+                        value: r,
+                        className: "outline-none",
+                        children: /* @__PURE__ */ o(
+                          O,
+                          {
+                            countryCode: r,
+                            countryName: t.name,
+                            dialCode: `${y}${t.dialCode}`,
+                            isSelected: a === r
+                          }
+                        )
+                      },
+                      r
+                    );
+                  }) })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+fe.displayName = "PhoneField";
+export {
+  fe as PhoneField,
+  fe as default
+};

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

@@ -0,0 +1,4 @@
+import { CountryData } from 'react-international-phone';
+export declare const extendedCountries: CountryData[];
+export declare const DIAL_CODE_PREFIX = "+";
+export declare const startAdornmentWidthByDialCodeLength: Record<string, number>;

package/dist/components/PhoneField/constants.js

@@ -0,0 +1,26 @@
+import { countries as i } from "../../node_modules/.pnpm/countries-list@3.1.1/node_modules/countries-list/mjs/index.js";
+import { defaultCountries as e, 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 { countryCodes as d } from "../Flag/constants.js";
+const r = new Set(
+  d.map((o) => o.toLowerCase())
+), c = e.filter(
+  (o) => r.has(s(o).iso2)
+), p = new Set(e.map((o) => s(o).iso2)), m = Array.from(r).filter(
+  (o) => !p.has(o)
+), l = Object.entries(i).filter(([o]) => m.includes(o.toLowerCase())).map(([o, t]) => {
+  const { name: n, phone: a } = t, u = a[0].toString(), C = o.toLowerCase();
+  return [n, C, u];
+}), L = [
+  ...c,
+  ...l
+].sort((o, t) => o[0].localeCompare(t[0])), h = "+", S = {
+  1: 4.4,
+  2: 5.2,
+  3: 5.8,
+  4: 6.2
+};
+export {
+  h as DIAL_CODE_PREFIX,
+  L as extendedCountries,
+  S as startAdornmentWidthByDialCodeLength
+};

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

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

package/dist/components/PhoneField/index.js

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

package/dist/components/PhoneField/utils.d.ts

@@ -0,0 +1,4 @@
+import { CountryData } from 'react-international-phone';
+import { CountryCode } from '../Flag';
+export declare const getValidatedCountryCode: (code: string, defaultCountryCode: CountryCode) => CountryCode;
+export declare const filterCountries: (countries: CountryData[], searchText: string) => CountryData[];

package/dist/components/PhoneField/utils.js

@@ -0,0 +1,14 @@
+import { parseCountry as a } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { isSupportedCountryCode as d } from "../Flag/utils.js";
+import { DIAL_CODE_PREFIX as u } from "./constants.js";
+const m = (o, e) => {
+  const r = o.toUpperCase();
+  return d(r) ? r : e;
+}, l = (o, e) => e ? o.filter((r) => {
+  const t = a(r), s = t.name.toLowerCase(), C = `${u}${t.dialCode.toLowerCase()}`, n = e.toLowerCase();
+  return s.includes(n) || C.includes(n);
+}) : o;
+export {
+  l as filterCountries,
+  m as getValidatedCountryCode
+};

package/dist/components/Pill/Pill.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonHTMLAttributes } from 'react';
+declare const pillVariants: (props?: ({
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface PillProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style">, VariantProps<typeof pillVariants> {
+    /**
+     * Whether the pill is checked
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Whether the pill is rendered as a child component
+     * @default false
+     */
+    asChild?: boolean;
+}
+export declare const Pill: import('react').ForwardRefExoticComponent<PillProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Pill;

package/dist/components/Pill/Pill.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as l } 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 n } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as s } from "react";
+import { cn as m } from "../../lib/utils.js";
+import { typographyVariants as p } from "../Typography/Typography.js";
+const f = n(
+  // TODO: Add disabled classes
+  "inline-flex h-9 items-center rounded-full px-4 transition-colors duration-200",
+  {
+    variants: {
+      checked: {
+        true: "bg-gray-100",
+        false: "bg-transparent"
+      }
+    },
+    defaultVariants: {
+      checked: !1
+    }
+  }
+), c = s(
+  ({ checked: t, children: r, asChild: a, ...o }, e) => /* @__PURE__ */ i(
+    a ? l : "button",
+    {
+      ref: e,
+      className: m(
+        f({ checked: t }),
+        p({ variant: "subtitle", level: 3 })
+      ),
+      ...o,
+      children: r
+    }
+  )
+);
+c.displayName = "Pill";
+export {
+  c as Pill,
+  c as default
+};

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

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

package/dist/components/Pill/index.js

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