@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/components/password-field/parts/ValidationRuleItem.js

@@ -1,40 +0,0 @@
-import { useMemo as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useIntl as i } from "react-intl";
-import { Icon as a } from "@payfit/unity-icons";
-//#region src/components/password-field/parts/ValidationRuleItem.tsx
-var o = t({ slots: {
-	root: ["uy:flex uy:items-center uy:gap-50 uy:typography-body-small"],
-	label: ["uy:text-content-neutral"]
-} });
-function s({ id: t, label: s, status: c }) {
-	let l = i(), u = c === "checked", d = e(() => u ? /* @__PURE__ */ n(a, {
-		src: "CheckCircleFilled",
-		color: "content.success",
-		size: 20
-	}) : /* @__PURE__ */ n(a, {
-		src: "CheckCircleOutlined",
-		color: "content.neutral",
-		size: 20
-	}), [u]), f = u ? l.formatMessage({
-		id: "unity:component:password-field:rule-status:passed",
-		defaultMessage: "Passed"
-	}) : l.formatMessage({
-		id: "unity:component:password-field:rule-status:not-passed",
-		defaultMessage: "Not passed"
-	}), { root: p, label: m } = o();
-	return /* @__PURE__ */ r("li", {
-		className: p(),
-		"aria-label": `${f}: ${typeof s == "string" ? s : ""}`,
-		children: [d, /* @__PURE__ */ r("span", {
-			className: m(),
-			children: [/* @__PURE__ */ r("span", {
-				className: "uy:sr-only",
-				children: [f, ": "]
-			}), s]
-		})]
-	}, t);
-}
-//#endregion
-export { s as ValidationRuleItem };

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

@@ -1,74 +0,0 @@
-import e from "../../hooks/use-id.js";
-import { Badge as t } from "../badge/Badge.js";
-import { BRAND_ASSETS as n } from "./PayFitBrand.js";
-import { forwardRef as r } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/payfit-brand/PayFitPreprod.tsx
-var s = i({
-	slots: { base: "uy:h-auto" },
-	variants: {
-		showOnlyMonogram: {
-			true: { base: "uy:min-w-[32px]" },
-			false: { base: "uy:min-w-[104px]" }
-		},
-		theme: { default: {} }
-	},
-	compoundVariants: [{
-		showOnlyMonogram: !0,
-		theme: "default",
-		className: { base: "uy:min-w-[20px]" }
-	}, {
-		showOnlyMonogram: !1,
-		theme: "default",
-		className: { base: "uy:min-w-[48px]" }
-	}]
-}), c = r(({ label: r, description: i, env: c, showOnlyMonogram: l = !1, ...u }, d) => {
-	let f = e(), p = `payfit-preprod-title-${f}`, m = `payfit-preprod-desc-${f}`, h = n.default;
-	return /* @__PURE__ */ o("span", {
-		className: "uy:flex uy:gap-200 uy:items-center",
-		children: [/* @__PURE__ */ o("svg", {
-			...u,
-			focusable: !1,
-			role: "img",
-			"aria-labelledby": p,
-			...i && { "aria-describedby": m },
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: l ? h.monogram.viewBox : h.logotype.viewBox,
-			fill: "none",
-			ref: d,
-			width: l ? 24 : 80,
-			className: s({
-				showOnlyMonogram: l,
-				theme: "default"
-			}).base(),
-			children: [
-				/* @__PURE__ */ a("title", {
-					id: p,
-					children: r
-				}),
-				i && /* @__PURE__ */ a("desc", {
-					id: m,
-					children: i
-				}),
-				/* @__PURE__ */ a("path", {
-					fillRule: "evenodd",
-					className: l ? "uy:fill-grayscale-l12" : "uy:hidden",
-					d: h.monogram.path,
-					clipRule: "evenodd"
-				}),
-				!l && /* @__PURE__ */ a("path", {
-					className: "uy:fill-grayscale-l12",
-					d: h.logotype.path
-				})
-			]
-		}), /* @__PURE__ */ a(t, {
-			variant: "warning",
-			className: "uy:self-center",
-			children: c
-		})]
-	});
-});
-c.displayName = "PayFitBrandPreprod";
-//#endregion
-export { c as PayFitBrandPreprod };

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

@@ -1,215 +0,0 @@
-import { Icon as e } from "../icon/Icon.js";
-import { CircularIconButton as t } from "../icon-button/CircularIconButton.js";
-import { Search as n } from "../search/Search.js";
-import { PhoneNumberItem as r } from "./parts/PhoneNumberItem.js";
-import i from "./unknownFlag.js";
-import { forwardRef as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
-import { uyTv as l } from "@payfit/unity-themes";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Group as f } from "react-aria-components/Group";
-import { useIntl as p } from "react-intl";
-import { Button as m } from "react-aria-components/Button";
-import { Separator as h } from "react-aria-components/Separator";
-import { ListBox as g } from "react-aria-components/ListBox";
-import { Popover as _ } from "react-aria-components/Popover";
-import { Input as v } from "react-aria-components/Input";
-import { Autocomplete as y, useFilter as b } from "react-aria-components/Autocomplete";
-import { Select as x } from "react-aria-components/Select";
-import { ListLayout as S, Virtualizer as C } from "react-aria-components/Virtualizer";
-import { FlagImage as w, defaultCountries as T, parseCountry as E, usePhoneInput as D } from "react-international-phone";
-//#region src/components/phone-number/PhoneNumberInput.tsx
-var O = l({ slots: {
-	base: [
-		"uy:group",
-		"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",
-		"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",
-		"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",
-		"uy:data-[active=\"true\"]:border-border-form-active",
-		"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",
-		"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",
-		"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",
-		"uy:h-5.5 uy:rounded-100",
-		"uy:sm:h-500 uy:sm:rounded-75 "
-	],
-	prefix: [
-		"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",
-		"uy:group-data-[invalid=\"true\"]:border-border-form-error",
-		"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",
-		"uy:py-125",
-		"uy:sm:py-100"
-	],
-	inputWrapper: [
-		"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",
-		"uy:group-data-[invalid=\"true\"]:bg-surface-form-error",
-		"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
-		"uy:py-125 uy:rounded-100",
-		"uy:sm:py-100 uy:sm:rounded-75"
-	],
-	input: [
-		"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",
-		"uy:group-data-[invalid=\"true\"]:bg-surface-form-error uy:group-data-[invalid=\"true\"]:text-content-danger-enabled",
-		"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: ["uy:flex uy:gap-50 uy:items-center uy:shrink-0"],
-	selectIcon: [""],
-	selectButton: ["uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none", "uy:data-[disabled=\"true\"]:cursor-not-allowed"],
-	selectPopover: [
-		"uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
-		"uy:rounded-100",
-		"uy:sm:rounded-75"
-	],
-	selectListbox: ["uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"]
-} }), k = a((a, l) => {
-	let k = p(), { onChange: A, value: j, defaultCountry: M = "unknown", onClearButtonPress: N, isInvalid: P = !1, isDisabled: F = !1, prefix: I = "+", "aria-label": L, defaultMask: R, charAfterDialCode: z, historySaveDebounceMS: B, disableCountryGuess: ee, forceDialCode: V, disableDialCodeAndPrefix: H, disableFormatting: U, searchInputAriaLabel: W, ...G } = a, [K, q] = c(!1), { contains: J } = b({ sensitivity: "base" }), Y = s(null);
-	o(l, () => Y.current, [Y]);
-	let { inputRef: X, inputValue: Z, handlePhoneValueChange: Q, country: $, setCountry: te, phone: ne } = D({
-		prefix: I,
-		defaultCountry: M,
-		value: j,
-		countries: [[
-			"",
-			"unknown",
-			"",
-			""
-		], ...T],
-		disableDialCodePrefill: !0,
-		defaultMask: R,
-		charAfterDialCode: z,
-		historySaveDebounceMS: B,
-		disableCountryGuess: ee,
-		forceDialCode: V,
-		disableDialCodeAndPrefix: H,
-		disableFormatting: U,
-		onChange: (e) => {
-			A?.($.iso2 === "unknown" ? "" : e.phone);
-		}
-	}), { base: re, prefix: ie, inputWrapper: ae, input: oe, selectPopover: se, selectListbox: ce, selectIcon: le, selectButton: ue, state: de } = O(), fe = Z.replace(ne, "").trim() !== "" && !F;
-	return /* @__PURE__ */ u("div", {
-		ref: Y,
-		children: /* @__PURE__ */ d(f, {
-			className: re(),
-			"aria-label": `${L}${j ? `, ${j}` : ""}`,
-			"aria-invalid": P,
-			"data-invalid": P,
-			"data-disabled": F,
-			"aria-disabled": F,
-			children: [/* @__PURE__ */ d(x, {
-				onOpenChange: (e) => {
-					q(e), e || setTimeout(() => {
-						X.current?.focus();
-					}, 0);
-				},
-				isDisabled: F,
-				value: $.iso2,
-				onChange: (e) => {
-					te(e);
-				},
-				className: ie(),
-				isInvalid: P,
-				children: [/* @__PURE__ */ d(m, {
-					"data-dd-privacy": "mask",
-					className: ue(),
-					"aria-label": k.formatMessage({
-						id: "unity:component:phone-number:country-selector:label",
-						defaultMessage: "Select country code, {country} {dialCode}"
-					}, {
-						country: $.name,
-						dialCode: $.dialCode
-					}),
-					children: [$.iso2 === "unknown" ? /* @__PURE__ */ u("img", {
-						"aria-hidden": "true",
-						src: i,
-						alt: "",
-						"data-dd-privacy": "mask",
-						className: "react-international-phone-flag-emoji",
-						width: 24,
-						height: 24
-					}) : /* @__PURE__ */ u(w, {
-						iso2: $.iso2,
-						alt: $.name,
-						size: 24,
-						"aria-hidden": "true",
-						"data-dd-privacy": "mask"
-					}), /* @__PURE__ */ u(e, {
-						className: le(),
-						"aria-hidden": "true",
-						src: K ? "CaretUpOutlined" : "CaretDownOutlined"
-					})]
-				}), /* @__PURE__ */ u(_, {
-					style: { "--trigger-width": `${Y.current?.offsetWidth}px` },
-					triggerRef: Y,
-					offset: 1,
-					containerPadding: 8,
-					className: se(),
-					children: /* @__PURE__ */ d(y, {
-						filter: J,
-						children: [
-							/* @__PURE__ */ u("div", {
-								className: "uy:m-100",
-								children: /* @__PURE__ */ u(n, {
-									autoFocus: !0,
-									label: W,
-									"data-dd-privacy": "mask"
-								})
-							}),
-							/* @__PURE__ */ u(h, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
-							/* @__PURE__ */ u(C, {
-								layout: S,
-								layoutOptions: { padding: 8 },
-								children: /* @__PURE__ */ u(g, {
-									className: ce(),
-									items: T,
-									children: (e) => {
-										let t = E(e);
-										return /* @__PURE__ */ u(r, {
-											country: t,
-											id: t.iso2
-										}, t.iso2);
-									}
-								})
-							})
-						]
-					})
-				})]
-			}), /* @__PURE__ */ d("div", {
-				className: ae(),
-				children: [/* @__PURE__ */ u(v, {
-					ref: X,
-					...G,
-					className: oe(),
-					type: "tel",
-					onChange: Q,
-					value: Z,
-					"data-dd-privacy": "mask",
-					"aria-invalid": P,
-					disabled: F,
-					"aria-label": L
-				}), /* @__PURE__ */ d("div", {
-					className: de(),
-					children: [P && /* @__PURE__ */ u(e, {
-						src: "WarningCircleOutlined",
-						color: "content.form.invalid",
-						role: "img",
-						"aria-label": k.formatMessage({
-							id: "unity:component:form-field:form-input:error:alt",
-							defaultMessage: "Error"
-						})
-					}), fe && /* @__PURE__ */ u(t, {
-						title: k.formatMessage({
-							id: "unity:component:common:clear:title",
-							defaultMessage: "Clear"
-						}),
-						color: "content.neutral.low",
-						icon: "CloseOutlined",
-						onPress: () => {
-							N?.();
-						}
-					})]
-				})]
-			})]
-		})
-	});
-});
-k.displayName = "PhoneNumberInput";
-//#endregion
-export { k 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,30 +0,0 @@
-import { PhoneNumberInput as e } from "./PhoneNumberInput.js";
-import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
-import { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/phone-number/TanstackPhoneNumberInput.tsx
-var a = r(({ onChange: r, onBlur: a, onClearButtonPress: o, isDisabled: s, ...c }, l) => {
-	let u = t(), d = n(), f = u.state.meta.isTouched && !u.state.meta.isValid, p = [d.helperTextId, d.feedbackTextId].filter(Boolean).join(" ");
-	return /* @__PURE__ */ i(e, {
-		ref: l,
-		...c,
-		value: u.state.value ?? "",
-		onChange: (e) => {
-			u.handleChange(e), r?.(e);
-		},
-		onBlur: (e) => {
-			u.handleBlur(), a?.(e);
-		},
-		onClearButtonPress: () => {
-			u.setValue(""), o?.();
-		},
-		isDisabled: s,
-		isInvalid: f,
-		"aria-labelledby": d.labelId,
-		"aria-describedby": p.length > 0 ? p : void 0,
-		"aria-details": d.contextualLinkId
-	});
-});
-//#endregion
-export { a as TanstackPhoneNumberInput };

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

@@ -1,52 +0,0 @@
-import { Icon as e } from "../../icon/Icon.js";
-import { Text as t } from "../../text/Text.js";
-import { uyTv as n } from "@payfit/unity-themes";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useIntl as o } from "react-intl";
-import { ListBoxItem as s } from "react-aria-components/ListBox";
-import { FlagImage as c } from "react-international-phone";
-//#region src/components/phone-number/parts/PhoneNumberItem.tsx
-var l = n({ slots: {
-	base: [
-		"uy:flex uy:py-100 uy:px-150 uy:typography-body uy:cursor-pointer  uy:rounded-50",
-		"uy:gap-125",
-		"uy:sm:gap-100",
-		"uy:data-[hovered=\"true\"]:bg-surface-neutral-hover",
-		"uy:data-[pressed=\"true\"]:bg-surface-neutral-pressed",
-		"uy:data-[selected=\"true\"]:bg-surface-neutral-active",
-		"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",
-		"uy:data-[disabled=\"true\"]:text-content-neutral-disabled uy:data-[disabled=\"true\"]:bg-surface-neutral-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed"
-	],
-	name: ["uy:grow"]
-} }), u = ({ country: n, isDisabled: u }) => {
-	let { base: d, name: f } = l(), p = o();
-	return /* @__PURE__ */ i(s, {
-		id: n.iso2,
-		textValue: `${n.name} ${n.dialCode}`,
-		className: d(),
-		"data-dd-privacy": "mask",
-		isDisabled: u,
-		children: ({ isSelected: o }) => /* @__PURE__ */ a(r, { children: [
-			/* @__PURE__ */ i(c, {
-				iso2: n.iso2,
-				alt: "",
-				size: 24
-			}),
-			/* @__PURE__ */ i(t, {
-				className: f(),
-				children: n.name
-			}),
-			/* @__PURE__ */ a(t, { children: ["+", n.dialCode] }),
-			o && /* @__PURE__ */ i(e, {
-				src: "CheckOutlined",
-				alt: p.formatMessage({
-					id: "unity:component:phone-number:selected:label",
-					defaultMessage: "Selected"
-				})
-			})
-		] })
-	});
-};
-u.displayName = "PhoneNumberItem";
-//#endregion
-export { u as PhoneNumberItem, l as phoneNumberItem };

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

@@ -1,4 +0,0 @@
-//#region src/components/phone-number/unknownFlag.svg
-var 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";
-//#endregion
-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/pill/Pill.js

@@ -1,54 +0,0 @@
-import { forwardRef as e } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/pill/Pill.tsx
-var r = t({
-	base: "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",
-	variants: {
-		variant: {
-			critical: "uy:bg-surface-danger uy:text-content-inverted",
-			info: "uy:bg-surface-info uy:text-content-info-high",
-			neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral"
-		},
-		shape: {
-			circle: "uy:rounded-circle",
-			pill: "uy:rounded-pill uy:px-50"
-		},
-		isDot: {
-			true: "uy:!size-100 uy:!min-w-0",
-			false: ""
-		},
-		isVisible: {
-			true: "uy:visible",
-			false: "uy:invisible"
-		}
-	},
-	defaultVariants: {
-		variant: "critical",
-		shape: "pill",
-		isDot: !1,
-		isVisible: !0
-	}
-}), i = (e, t) => {
-	let n = 10 ** t - 1;
-	return e > n ? `${n}+` : e.toString();
-}, a = e(({ variant: e = "critical", isVisible: t = !0, maxDigits: a = 2, value: o, ...s }, c) => {
-	let l = Math.abs(o), u = l === 0 ? "" : i(l, a), d = r({
-		variant: e,
-		isVisible: t,
-		shape: u.length <= 1 ? "circle" : "pill",
-		isDot: l === 0
-	});
-	return /* @__PURE__ */ n("span", {
-		"data-dd-privacy": "allow",
-		...s,
-		ref: c,
-		role: "status",
-		className: d,
-		"aria-atomic": "true",
-		children: u
-	});
-});
-a.displayName = "Pill";
-//#endregion
-export { a as Pill };

package/dist/esm/components/popover/Popover.js

@@ -1,38 +0,0 @@
-import { PopoverHeader as e } from "./parts/PopoverHeader.js";
-import { forwardRef as t } from "react";
-import { uyTv as n } from "@payfit/unity-themes";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Popover as a } from "react-aria-components/Popover";
-import { Dialog as o, DialogTrigger as s } from "react-aria-components/Dialog";
-//#region src/components/popover/Popover.tsx
-var c = n({ slots: {
-	base: [
-		"uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-300 uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
-		"uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
-		"uy:data-[entering]:data-[placement=\"bottom\"]:-translate-y-100 uy:data-[entering]:data-[placement=\"bottom\"]:translate-x-0 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-y-0",
-		"uy:data-[entering]:data-[placement=\"top\"]:translate-y-100 uy:data-[entering]:data-[placement=\"top\"]:translate-x-0 uy:data-[exiting]:data-[placement=\"top\"]:translate-y-0",
-		"uy:data-[entering]:data-[placement=\"left\"]:translate-x-100 uy:data-[entering]:data-[placement=\"left\"]:translate-y-0 uy:data-[exiting]:data-[placement=\"bottom\"]:translate-x-0",
-		"uy:data-[entering]:data-[placement=\"right\"]:-translate-x-100 uy:data-[entering]:data-[placement=\"right\"]:translate-y-0 uy:data-[exiting]:data-[placement=\"right\"]:translate-y-0"
-	],
-	dialog: ["uy:flex uy:flex-col uy:rounded-100", "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring"]
-} }), l = t((t, n) => {
-	let { children: s, title: l, isTitleSrOnly: u, displayCloseButton: d, ...f } = t, { base: p, dialog: m } = c();
-	return /* @__PURE__ */ r(a, {
-		ref: n,
-		className: p(),
-		offset: 8,
-		...f,
-		children: /* @__PURE__ */ i(o, {
-			className: m(),
-			role: "dialog",
-			children: [/* @__PURE__ */ r(e, {
-				title: l,
-				isTitleSrOnly: u,
-				displayCloseButton: d
-			}), s]
-		})
-	});
-});
-l.displayName = "Popover", s.displayName = "PopoverTrigger";
-//#endregion
-export { l as Popover, s as PopoverTrigger };

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -1,48 +0,0 @@
-import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
-import { forwardRef as t, useContext as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useIntl as o } from "react-intl";
-import { OverlayTriggerStateContext as s } from "react-aria-components/Dialog";
-import { Heading as c } from "react-aria-components/Heading";
-//#region src/components/popover/parts/PopoverHeader.tsx
-var l = r({
-	slots: {
-		base: "uy:flex uy:justify-between",
-		heading: "uy:content-center",
-		iconButton: "uy:ml-200"
-	},
-	variants: { isTitleSrOnly: {
-		true: { heading: "uy:sr-only" },
-		false: {
-			base: "uy:mb-200",
-			heading: "uy:typography-h4 uy:min-h-400 uy:align-center"
-		}
-	} }
-}), u = t(({ title: t, isTitleSrOnly: r, displayCloseButton: u }, d) => {
-	let f = n(s), p = o(), { base: m, heading: h, iconButton: g } = l({ isTitleSrOnly: r });
-	return /* @__PURE__ */ a("div", {
-		className: m(),
-		children: [/* @__PURE__ */ i(c, {
-			ref: d,
-			slot: "title",
-			className: h(),
-			"data-dd-privacy": "allow",
-			level: 4,
-			children: t
-		}), u && /* @__PURE__ */ i(e, {
-			className: g(),
-			title: p.formatMessage({
-				id: "unity:component:common:close:label",
-				defaultMessage: "Close"
-			}),
-			color: "content.neutral.low",
-			icon: "CloseOutlined",
-			onPress: () => f?.close(),
-			size: "large"
-		})]
-	});
-});
-u.displayName = "PopoverTitle";
-//#endregion
-export { u as PopoverHeader };