@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/phone-number/PhoneNumberInput.js

@@ -1,329 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as J, useState as K, useRef as Q, useImperativeHandle as X } from "react";
-import { uyTv as Y } from "@payfit/unity-themes";
-import { useFilter as Z, Autocomplete as _ } from "react-aria-components/Autocomplete";
-import { Button as ee } from "react-aria-components/Button";
-import { Group as re } from "react-aria-components/Group";
-import { Input as te } from "react-aria-components/Input";
-import { ListBox as ae } from "react-aria-components/ListBox";
-import { Popover as oe } from "react-aria-components/Popover";
-import { Select as ue } from "react-aria-components/Select";
-import { Virtualizer as de, ListLayout as ne } from "react-aria-components/Virtualizer";
-import { defaultCountries as f, usePhoneInput as ie, FlagImage as le, parseCountry as se } from "react-international-phone";
-import { useIntl as ye } from "react-intl";
-import { CircularIconButton as ce } from "../icon-button/CircularIconButton.js";
-import { Icon as m } from "../icon/Icon.js";
-import { SearchInput as fe } from "../select/parts/SearchInput.js";
-import { PhoneNumberItem as me } from "./parts/PhoneNumberItem.js";
-import be from "./unknownFlag.svg.js";
-const pe = Y({
-  slots: {
-    base: [
-      "uy:group",
-      // common
-      "uy:flex uy:w-full uy:border uy:border-border-form-enabled uy:bg-surface-form-enabled uy:border-solid uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
-      // common hover
-      'uy:data-[active="true"]:data-[hovered="true"]:border-border-form-hover uy:data-[active="true"]:data-[hovered="true"]:bg-surface-form-hover uy:data-[active="true"]:data-[hovered="true"]:text-content-form-hover',
-      // common pressed
-      'uy:data-[active="true"]:data-[pressed="true"]:border-border-form-pressed uy:data-[active="true"]:data-[pressed="true"]:bg-surface-form-pressed uy:data-[active="true"]:data-[pressed="true"]:text-content-form-pressed',
-      // common active
-      'uy:data-[active="true"]:border-border-form-active',
-      // common focus-visible
-      'uy:data-[focus-visible="true"]:outline-none uy:data-[focus-visible="true"]:ring-2 uy:data-[focus-visible="true"]:ring-utility-focus-ring uy:data-[focus-visible="true"]:ring-offset-2',
-      // common invalid
-      'uy:data-[invalid="true"]:border-border-form-error uy:data-[invalid="true"]:bg-surface-form-error uy:data-[invalid="true"]:text-content-form-danger-enabled',
-      // common disabled
-      'uy:data-[disabled="true"]:border-border-form-disabled uy:data-[disabled="true"]:bg-surface-form-disabled uy:data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
-      //mobile
-      "uy:h-5.5 uy:rounded-100",
-      // desktop
-      "uy:sm:h-500 uy:sm:rounded-75 "
-    ],
-    prefix: [
-      // common
-      "uy:border-r uy:border-solid uy:border-border-form-enabled uy:text-content-form-enabled uy:flex-grow-0 uy:pl-150 uy:pr-100   uy:group-data-[active=true]:border-border-form-active  uy:cursor-pointer",
-      // common invalid
-      'uy:group-data-[invalid="true"]:border-border-form-error',
-      // common disabled
-      'uy:group-data-[disabled="true"]:border-border-form-disabled uy:group-data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
-      //mobile
-      "uy:py-125",
-      // desktop
-      "uy:sm:py-100"
-    ],
-    inputWrapper: [
-      // common
-      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:px-150 uy:max-w-full uy:justify-between",
-      // common invalid
-      'uy:group-data-[invalid="true"]:bg-surface-form-error',
-      // common disabled
-      'uy:group-data-[disabled="true"]:bg-surface-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
-      // mobile
-      "uy:py-125 uy:rounded-100",
-      // desktop
-      "uy:sm:py-100 uy:sm:rounded-75"
-    ],
-    input: [
-      // common
-      "uy:text-content-form-enabled uy:bg-surface-form-enabled uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full uy:min-h-300",
-      // common invalid
-      'uy:group-data-[invalid="true"]:bg-surface-form-error uy:group-data-[invalid="true"]:text-content-danger-enabled',
-      // common disabled
-      'uy:group-data-[disabled="true"]:bg-surface-form-disabled uy:group-data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed'
-    ],
-    state: [
-      // common
-      "uy:flex uy:gap-50 uy:items-center uy:shrink-0"
-    ],
-    selectIcon: [
-      //common
-      ""
-    ],
-    selectButton: [
-      //common
-      "uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none",
-      // common disabled
-      'uy:data-[disabled="true"]:cursor-not-allowed'
-    ],
-    selectPopover: [
-      //common
-      "uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
-      // mobile
-      "uy:rounded-100",
-      // desktop
-      "uy:sm:rounded-75"
-    ],
-    selectListbox: [
-      //common
-      "uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"
-    ]
-  }
-}), ge = J(
-  (b, p) => {
-    const n = ye(), {
-      onChange: g,
-      value: i,
-      defaultCountry: h = "unknown",
-      onClearButtonPress: v,
-      isInvalid: o = !1,
-      isDisabled: u = !1,
-      prefix: x = "+",
-      "aria-label": s,
-      defaultMask: w,
-      charAfterDialCode: C,
-      historySaveDebounceMS: I,
-      disableCountryGuess: N,
-      forceDialCode: P,
-      disableDialCodeAndPrefix: k,
-      disableFormatting: S,
-      searchInputAriaLabel: M,
-      ...B
-    } = b, [D, L] = K(!1), { contains: O } = Z({ sensitivity: "base" }), d = Q(null);
-    X(p, () => d.current, [d]);
-    const R = [["", "unknown", "", ""], ...f], {
-      inputRef: y,
-      inputValue: c,
-      handlePhoneValueChange: j,
-      country: t,
-      setCountry: A,
-      phone: F
-    } = ie({
-      prefix: x,
-      defaultCountry: h,
-      value: i,
-      countries: R,
-      disableDialCodePrefill: !0,
-      defaultMask: w,
-      charAfterDialCode: C,
-      historySaveDebounceMS: I,
-      disableCountryGuess: N,
-      forceDialCode: P,
-      disableDialCodeAndPrefix: k,
-      disableFormatting: S,
-      onChange: (r) => {
-        g?.(t.iso2 === "unknown" ? "" : r.phone);
-      }
-    }), {
-      base: W,
-      prefix: $,
-      inputWrapper: V,
-      input: z,
-      selectPopover: G,
-      selectListbox: T,
-      selectIcon: U,
-      selectButton: E,
-      state: H
-    } = pe(), q = c.replace(F, "").trim() !== "" && !u;
-    return /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ a(
-      re,
-      {
-        className: W(),
-        "aria-label": `${s}${i ? `, ${i}` : ""}`,
-        "aria-invalid": o,
-        "data-invalid": o,
-        "data-disabled": u,
-        "aria-disabled": u,
-        children: [
-          /* @__PURE__ */ a(
-            ue,
-            {
-              onOpenChange: (r) => {
-                L(r), r || setTimeout(() => {
-                  y.current?.focus();
-                }, 0);
-              },
-              isDisabled: u,
-              value: t.iso2,
-              onChange: (r) => {
-                A(r);
-              },
-              className: $(),
-              isInvalid: o,
-              children: [
-                /* @__PURE__ */ a(
-                  ee,
-                  {
-                    "data-dd-privacy": "mask",
-                    className: E(),
-                    "aria-label": n.formatMessage(
-                      {
-                        id: "unity:component:phone-number:country-selector:label",
-                        defaultMessage: "Select country code, {country} {dialCode}"
-                      },
-                      {
-                        country: t.name,
-                        dialCode: t.dialCode
-                      }
-                    ),
-                    children: [
-                      t.iso2 !== "unknown" ? /* @__PURE__ */ e(
-                        le,
-                        {
-                          iso2: t.iso2,
-                          alt: t.name,
-                          size: 24,
-                          "aria-hidden": "true",
-                          "data-dd-privacy": "mask"
-                        }
-                      ) : /* @__PURE__ */ e(
-                        "img",
-                        {
-                          "aria-hidden": "true",
-                          src: be,
-                          alt: "",
-                          "data-dd-privacy": "mask",
-                          className: "react-international-phone-flag-emoji",
-                          width: 24,
-                          height: 24
-                        }
-                      ),
-                      /* @__PURE__ */ e(
-                        m,
-                        {
-                          className: U(),
-                          "aria-hidden": "true",
-                          src: D ? "CaretUpOutlined" : "CaretDownOutlined"
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  oe,
-                  {
-                    style: {
-                      "--trigger-width": `${d.current?.offsetWidth}px`
-                    },
-                    triggerRef: d,
-                    offset: 1,
-                    containerPadding: 8,
-                    className: G(),
-                    children: /* @__PURE__ */ a(_, { filter: O, children: [
-                      /* @__PURE__ */ e(fe, { "aria-label": M }),
-                      /* @__PURE__ */ e(
-                        de,
-                        {
-                          layout: ne,
-                          layoutOptions: {
-                            padding: 8
-                          },
-                          children: /* @__PURE__ */ e(
-                            ae,
-                            {
-                              className: T(),
-                              items: f,
-                              children: (r) => {
-                                const l = se(r);
-                                return /* @__PURE__ */ e(
-                                  me,
-                                  {
-                                    country: l,
-                                    id: l.iso2
-                                  },
-                                  l.iso2
-                                );
-                              }
-                            }
-                          )
-                        }
-                      )
-                    ] })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ a("div", { className: V(), children: [
-            /* @__PURE__ */ e(
-              te,
-              {
-                ref: y,
-                ...B,
-                className: z(),
-                type: "tel",
-                onChange: j,
-                value: c,
-                "data-dd-privacy": "mask",
-                "aria-invalid": o,
-                disabled: u,
-                "aria-label": s
-              }
-            ),
-            /* @__PURE__ */ a("div", { className: H(), children: [
-              o && /* @__PURE__ */ e(
-                m,
-                {
-                  src: "WarningCircleOutlined",
-                  color: "content.form.invalid",
-                  role: "img",
-                  "aria-label": n.formatMessage({
-                    id: "unity:component:form-field:form-input:error:alt",
-                    defaultMessage: "Error"
-                  })
-                }
-              ),
-              q && /* @__PURE__ */ e(
-                ce,
-                {
-                  title: n.formatMessage({
-                    id: "unity:component:common:clear:title",
-                    defaultMessage: "Clear"
-                  }),
-                  color: "content.neutral.low",
-                  icon: "CloseOutlined",
-                  onPress: () => {
-                    v?.();
-                  }
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    ) });
-  }
-);
-ge.displayName = "PhoneNumberInput";
-export {
-  ge as PhoneNumberInput
-};

package/dist/esm/components/phone-number/TanstackPhoneNumberInput.d.ts

@@ -1,64 +0,0 @@
-import { PhoneNumberInputProps } from './PhoneNumberInput.js';
-export type TanstackPhoneNumberInputProps = Omit<PhoneNumberInputProps, 'value' | 'isInvalid'>;
-/**
- * The `TanstackPhoneNumberInput` component renders a phone number input field
- * wired to the TanStack Form context. It manages state and accessibility via the
- * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
- *
- * Behavior:
- * - Displays a phone number input with integrated country selector and automatic formatting.
- * - The field value and invalid state are derived from the TanStack form context.
- * - Supports searchable country dropdown and full keyboard navigation.
- *
- * Accessibility:
- * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
- *   `aria-details` using identifiers from the `a11y` context.
- *
- * Key props:
- * - `defaultCountry?: CountryIso2` — default country code (ISO 3166-1 alpha-2).
- * - `placeholder?: string` — placeholder text displayed when the field is empty.
- * - `prefix?: string` — prefix character for phone numbers (default: '+').
- * - `onChange?: (phone: string) => void` — callback when phone number changes.
- * - `onClearButtonPress?: () => void` — callback when clear button is pressed.
- * - Inherits all props from `PhoneNumberInputProps` except `value` and `isInvalid`.
- * @example
- * ```tsx
- * import { TanstackPhoneNumberInput } from '@/components/phone-number/TanstackPhoneNumberInput'
- * import { useTanstackUnityForm } from '@/hooks/use-tanstack-form'
- * import * as z from 'zod'
- *
- * function Example() {
- *   const schema = z.object({
- *     phoneNumber: z.e164({ message: 'Invalid phone number' }),
- *   })
- *
- *   const form = useTanstackUnityForm({
- *     validators: {
- *       onBlur: schema,
- *     },
- *   })
- *
- *   return (
- *     <form.AppForm>
- *       <form.Form>
- *         <form.AppField name="phoneNumber">
- *           {field => (
- *             <field.PhoneNumberInput
- *               aria-label="Phone number"
- *               defaultCountry="fr"
- *               placeholder="+33 6 12 34 56 78"
- *             />
- *           )}
- *         </form.AppField>
- *       </form.Form>
- *     </form.AppForm>
- *   )
- * }
- * ```
- * @remarks Migration from `PhoneNumberInput` (non‑TanStack):
- * - Do not pass `value` or `isInvalid` props: these are derived from the TanStack form context.
- * - Use `<form.AppField name="…">` to provide the field context.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-field-components-phonenumber--docs
- */
-declare const TanstackPhoneNumberInput: import('react').ForwardRefExoticComponent<TanstackPhoneNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
-export { TanstackPhoneNumberInput };

package/dist/esm/components/phone-number/TanstackPhoneNumberInput.js

@@ -1,33 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as b } from "../form-field/TanstackFormField.context.js";
-import { PhoneNumberInput as h } from "./PhoneNumberInput.js";
-const C = c(({ onChange: r, onBlur: n, onClearButtonPress: i, isDisabled: l, ...s }, d) => {
-  const e = f(), t = b(), m = e.state.meta.isTouched && !e.state.meta.isValid, o = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u(
-    h,
-    {
-      ref: d,
-      ...s,
-      value: e.state.value ?? "",
-      onChange: (a) => {
-        e.handleChange(a), r?.(a);
-      },
-      onBlur: (a) => {
-        e.handleBlur(), n?.(a);
-      },
-      onClearButtonPress: () => {
-        e.setValue(""), i?.();
-      },
-      isDisabled: l,
-      isInvalid: m,
-      "aria-labelledby": t.labelId,
-      "aria-describedby": o.length > 0 ? o : void 0,
-      "aria-details": t.contextualLinkId
-    }
-  );
-});
-export {
-  C as TanstackPhoneNumberInput
-};

package/dist/esm/components/phone-number/parts/PhoneNumberItem.d.ts

@@ -1,42 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ListBoxItemProps } from 'react-aria-components/ListBox';
-import { ParsedCountry } from 'react-international-phone';
-export declare const phoneNumberItem: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            name?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            name?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    name: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            name?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    name: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    name: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface PhoneNumberItemProps extends VariantProps<typeof phoneNumberItem>, ListBoxItemProps {
-    country: ParsedCountry;
-}
-declare const PhoneNumberItem: {
-    ({ country, isDisabled }: PhoneNumberItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { PhoneNumberItem };

package/dist/esm/components/phone-number/parts/PhoneNumberItem.js

@@ -1,68 +0,0 @@
-import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { uyTv as n } from "@payfit/unity-themes";
-import { ListBoxItem as m } from "react-aria-components/ListBox";
-import { FlagImage as c } from "react-international-phone";
-import { useIntl as y } from "react-intl";
-import { Icon as p } from "../../icon/Icon.js";
-import { Text as r } from "../../text/Text.js";
-const b = n({
-  slots: {
-    base: [
-      //common
-      "uy:flex uy:py-100 uy:px-150 uy:typography-body uy:cursor-pointer  uy:rounded-50",
-      // mobile
-      "uy:gap-125",
-      // desktop
-      "uy:sm:gap-100",
-      //  hover
-      'uy:data-[hovered="true"]:bg-surface-neutral-hover',
-      //  pressed
-      'uy:data-[pressed="true"]:bg-surface-neutral-pressed',
-      //  selected
-      'uy:data-[selected="true"]:bg-surface-neutral-active',
-      //  focus-visible
-      'uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-utility-focus-ring',
-      //  disabled
-      'uy:data-[disabled="true"]:text-content-neutral-disabled uy:data-[disabled="true"]:bg-surface-neutral-disabled uy:data-[disabled="true"]:cursor-not-allowed'
-    ],
-    name: [
-      //common
-      "uy:grow"
-    ]
-  }
-}), f = ({ country: e, isDisabled: u }) => {
-  const { base: s, name: o } = b(), i = y();
-  return /* @__PURE__ */ t(
-    m,
-    {
-      id: e.iso2,
-      textValue: `${e.name} ${e.dialCode}`,
-      className: s(),
-      "data-dd-privacy": "mask",
-      isDisabled: u,
-      children: ({ isSelected: d }) => /* @__PURE__ */ a(l, { children: [
-        /* @__PURE__ */ t(c, { iso2: e.iso2, alt: "", size: 24 }),
-        /* @__PURE__ */ t(r, { className: o(), children: e.name }),
-        /* @__PURE__ */ a(r, { children: [
-          "+",
-          e.dialCode
-        ] }),
-        d && /* @__PURE__ */ t(
-          p,
-          {
-            src: "CheckOutlined",
-            alt: i.formatMessage({
-              id: "unity:component:phone-number:selected:label",
-              defaultMessage: "Selected"
-            })
-          }
-        )
-      ] })
-    }
-  );
-};
-f.displayName = "PhoneNumberItem";
-export {
-  f as PhoneNumberItem,
-  b as phoneNumberItem
-};

package/dist/esm/components/phone-number/unknownFlag.svg.js

@@ -1,4 +0,0 @@
-const e = "data:image/svg+xml,%3csvg%20width='21'%20height='15'%20viewBox='0%200%2021%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='21'%20height='15'%20fill='%23CBD3DC'/%3e%3c/svg%3e";
-export {
-  e as default
-};

package/dist/esm/components/phone-number-field/TanstackPhoneNumberField.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { LabelProps } from '../label/Label.js';
-import { TanstackPhoneNumberInputProps } from '../phone-number/TanstackPhoneNumberInput.js';
-interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
-    /** The label for the text field. */
-    label: string;
-    /** Helper text to display below the text field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the select field. */
-    contextualLink?: ReactNode;
-}
-export interface PhoneNumberFieldProps extends FieldProps, TanstackPhoneNumberInputProps {
-}
-declare const TanstackPhoneNumberField: import('react').ForwardRefExoticComponent<PhoneNumberFieldProps & import('react').RefAttributes<unknown>>;
-export { TanstackPhoneNumberField };

package/dist/esm/components/phone-number-field/TanstackPhoneNumberField.js

@@ -1,32 +0,0 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { TanstackFormFeedbackText as s } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as d } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
-import { TanstackPhoneNumberInput as f } from "../phone-number/TanstackPhoneNumberInput.js";
-const F = ({
-  label: m,
-  isRequired: e,
-  requiredVariant: t,
-  helperText: o,
-  contextualLink: a,
-  ...n
-}) => /* @__PURE__ */ i(l, { children: [
-  /* @__PURE__ */ r(
-    d,
-    {
-      requiredVariant: t,
-      isRequired: e,
-      children: m
-    }
-  ),
-  o && /* @__PURE__ */ r(p, { children: o }),
-  /* @__PURE__ */ r(f, { ...n }),
-  /* @__PURE__ */ r(s, {}),
-  a
-] }), k = c(F);
-k.displayName = "TanstackPhoneNumberField";
-export {
-  k as TanstackPhoneNumberField
-};

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

@@ -1,87 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { AriaAttributes } from 'react';
-declare const pill: import('tailwind-variants').TVReturnType<{
-    variant: {
-        critical: string;
-        info: string[];
-        neutral: string;
-    };
-    shape: {
-        circle: string;
-        pill: string;
-    };
-    isVisible: {
-        true: string;
-        false: string;
-    };
-}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", {
-    variant: {
-        critical: string;
-        info: string[];
-        neutral: string;
-    };
-    shape: {
-        circle: string;
-        pill: string;
-    };
-    isVisible: {
-        true: string;
-        false: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        critical: string;
-        info: string[];
-        neutral: string;
-    };
-    shape: {
-        circle: string;
-        pill: string;
-    };
-    isVisible: {
-        true: string;
-        false: string;
-    };
-}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", unknown, unknown, undefined>>;
-export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
-    /** The value to be displayed inside the Pill */
-    value: number;
-    /**
-     * The variant of the Pill, determining its color scheme
-     * @default 'critical'
-     */
-    variant?: VariantProps<typeof pill>['variant'];
-    /**
-     * Determines if the Pill is visible or not
-     * @default true
-     */
-    isVisible?: VariantProps<typeof pill>['isVisible'];
-    /**
-     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
-     * @default 2
-     */
-    maxDigits?: number;
-};
-/**
- * The Pill component displays a count of notifications or other numerical values.
- */
-declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
-    /** The value to be displayed inside the Pill */
-    value: number;
-    /**
-     * The variant of the Pill, determining its color scheme
-     * @default 'critical'
-     */
-    variant?: VariantProps<typeof pill>["variant"];
-    /**
-     * Determines if the Pill is visible or not
-     * @default true
-     */
-    isVisible?: VariantProps<typeof pill>["isVisible"];
-    /**
-     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
-     * @default 2
-     */
-    maxDigits?: number;
-} & import('react').RefAttributes<HTMLSpanElement>>;
-export { Pill };