@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/payfit-brand/PayFitPreprod.js

@@ -1,33 +1,33 @@
-import { jsxs as i, jsx as c } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import m from "../../hooks/use-id.js";
-import { Badge as p } from "../badge/Badge.js";
-const f = v(
-  ({ label: l, description: a, env: t, ...d }, n) => {
-    const e = m(), r = `payfit-preprod-title-${e}`, h = `payfit-preprod-desc-${e}`, s = {
+import { jsxs as t, jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import o from "../../hooks/use-id.js";
+import { Badge as f } from "../badge/Badge.js";
+const u = p(
+  ({ label: l, description: e, env: d, showOnlyMonogram: a = !1, ...s }, v) => {
+    const r = o(), h = `payfit-preprod-title-${r}`, i = `payfit-preprod-desc-${r}`, n = {
       focusable: !1,
       role: "img",
-      "aria-labelledby": r,
-      ...a && { "aria-describedby": h }
-    }, o = {
-      ...d,
-      ...s
+      "aria-labelledby": h,
+      ...e && { "aria-describedby": i }
+    }, m = {
+      ...s,
+      ...n
     };
-    return /* @__PURE__ */ i("span", { className: "uy:flex uy:gap-200 uy:items-center", children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ t("span", { className: "uy:flex uy:gap-200 uy:items-center", children: [
+      /* @__PURE__ */ t(
         "svg",
         {
-          ...o,
+          ...m,
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 104 32",
+          viewBox: a ? "0 0 32 32" : "0 0 104 32",
           fill: "none",
-          ref: n,
-          width: 104,
+          ref: v,
+          width: a ? 32 : 104,
           height: 32,
-          className: "uy:min-w-[104px]",
+          className: a ? "uy:min-w-[32px]" : "uy:min-w-[104px]",
           children: [
-            /* @__PURE__ */ c("title", { id: r, children: l }),
-            a && /* @__PURE__ */ c("desc", { id: h, children: a }),
+            /* @__PURE__ */ c("title", { id: h, children: l }),
+            e && /* @__PURE__ */ c("desc", { id: i, children: e }),
             /* @__PURE__ */ c(
               "path",
               {
@@ -37,7 +37,7 @@ const f = v(
                 clipRule: "evenodd"
               }
             ),
-            /* @__PURE__ */ c(
+            !a && /* @__PURE__ */ c(
               "path",
               {
                 className: "uy:fill-content-neutral",
@@ -47,11 +47,11 @@ const f = v(
           ]
         }
       ),
-      /* @__PURE__ */ c(p, { variant: "warning", children: t })
+      /* @__PURE__ */ c(f, { variant: "warning", children: d })
     ] });
   }
 );
-f.displayName = "PayFitBrandPreprod";
+u.displayName = "PayFitBrandPreprod";
 export {
-  f as PayFitBrandPreprod
+  u as PayFitBrandPreprod
 };

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

@@ -0,0 +1,67 @@
+import { InputProps as AriaInputProps } from 'react-aria-components';
+import { CountryIso2, PhoneInputProps } from 'react-international-phone';
+/**
+ * Interface for the PhoneNumberInput component props.
+ */
+export interface PhoneNumberInputProps extends Omit<AriaInputProps, 'value' | 'style' | 'className' | 'onChange' | 'disabled' | 'aria-label'>, Omit<PhoneInputProps, 'countries' | 'preferredCountries' | 'disableDialCodePrefill' | 'inputRefProp'> {
+    /**
+     * Function called when the phone number value changes.
+     * @param phone The formatted phone number.
+     */
+    onChange?: (phone: string) => void;
+    /**
+     * ISO2 code of the country selected by default.
+     */
+    defaultCountry?: CountryIso2;
+    /**
+     * Whether the input is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Function called when the clear button is pressed.
+     */
+    onClearButtonPress?: () => void;
+    /**
+     * Accessibility label for the phone number input.
+     */
+    'aria-label': string;
+    /**
+     * Accessibility label for the country search input.
+     */
+    searchInputAriaLabel: string;
+}
+/**
+ * The `PhoneNumberInput` component displays a styled phone number input field that follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
+ * @example
+ * ```tsx
+ * import { PhoneNumberInput } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState('')
+ *
+ *   const handlePhoneChange = (phone: string) => {
+ *     setValue(phone)
+ *   }
+ *
+ *   return (
+ *     <PhoneNumberInput
+ *       aria-label="Phone number"
+ *       placeholder="+33 6 12 34 56 78"
+ *       value={value}
+ *       onChange={handlePhoneChange}
+ *       defaultCountry="fr"
+ *     />
+ *   )
+ * }
+ * ```
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/components-phonenumber--docs
+ */
+declare const PhoneNumberInput: import('react').ForwardRefExoticComponent<PhoneNumberInputProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PhoneNumberInput };

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

@@ -0,0 +1,322 @@
+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, Group as _, Select as ee, Button as re, Popover as te, Autocomplete as ae, Virtualizer as oe, ListLayout as ue, ListBox as de, Input as ne } from "react-aria-components";
+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",
+      // 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(
+      _,
+      {
+        className: W(),
+        "aria-label": `${s}${i ? `, ${i}` : ""}`,
+        "aria-invalid": o,
+        "data-invalid": o,
+        "data-disabled": u,
+        "aria-disabled": u,
+        children: [
+          /* @__PURE__ */ a(
+            ee,
+            {
+              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(
+                  re,
+                  {
+                    "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(
+                  te,
+                  {
+                    style: {
+                      "--trigger-width": `${d.current?.offsetWidth}px`
+                    },
+                    triggerRef: d,
+                    offset: 1,
+                    containerPadding: 8,
+                    className: G(),
+                    children: /* @__PURE__ */ a(ae, { filter: O, children: [
+                      /* @__PURE__ */ e(fe, { "aria-label": M }),
+                      /* @__PURE__ */ e(
+                        oe,
+                        {
+                          layout: ue,
+                          layoutOptions: {
+                            padding: 8
+                          },
+                          children: /* @__PURE__ */ e(
+                            de,
+                            {
+                              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(
+              ne,
+              {
+                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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,42 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ListBoxItemProps } from 'react-aria-components';
+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

@@ -0,0 +1,68 @@
+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";
+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

@@ -0,0 +1,4 @@
+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
+};