@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/components/avatar/Avatar.d.ts

@@ -1,231 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-import * as React from 'react';
-declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
-    size: {
-        xs: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        sm: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        md: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        lg: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        xl: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-    };
-    variant: {
-        circle: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        square: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-    };
-    color: {
-        teal: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        plum: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        purple: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        orange: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        neutral: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        warning: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        success: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        info: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        danger: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        promo: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-        primary: import('tailwind-variants').ClassValue | {
-            base?: import('tailwind-variants').ClassValue;
-        };
-    };
-}, undefined, "uy:inline-block uy:relative uy:shrink-0", {
-    size: {
-        xs: "uy:size-200";
-        sm: "uy:size-300";
-        md: "uy:size-400";
-        lg: "uy:size-500";
-        xl: "uy:size-[56px]";
-    };
-    variant: {
-        circle: "uy:rounded-circle";
-        square: "uy:aspect-square";
-    };
-    color: {
-        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
-        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
-        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
-        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
-        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
-        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
-        success: "uy:bg-surface-success-low uy:text-content-success-high";
-        info: "uy:bg-surface-info-low uy:text-content-info-high";
-        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
-        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
-        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: "uy:size-200";
-        sm: "uy:size-300";
-        md: "uy:size-400";
-        lg: "uy:size-500";
-        xl: "uy:size-[56px]";
-    };
-    variant: {
-        circle: "uy:rounded-circle";
-        square: "uy:aspect-square";
-    };
-    color: {
-        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
-        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
-        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
-        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
-        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
-        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
-        success: "uy:bg-surface-success-low uy:text-content-success-high";
-        info: "uy:bg-surface-info-low uy:text-content-info-high";
-        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
-        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
-        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
-    };
-}, undefined, undefined, {
-    size: {
-        xs: "uy:size-200";
-        sm: "uy:size-300";
-        md: "uy:size-400";
-        lg: "uy:size-500";
-        xl: "uy:size-[56px]";
-    };
-    variant: {
-        circle: "uy:rounded-circle";
-        square: "uy:aspect-square";
-    };
-    color: {
-        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
-        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
-        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
-        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
-        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
-        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
-        success: "uy:bg-surface-success-low uy:text-content-success-high";
-        info: "uy:bg-surface-info-low uy:text-content-info-high";
-        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
-        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
-        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
-    };
-}, undefined, import('tailwind-variants').TVReturnTypeLike<{
-    size: {
-        xs: "uy:size-200";
-        sm: "uy:size-300";
-        md: "uy:size-400";
-        lg: "uy:size-500";
-        xl: "uy:size-[56px]";
-    };
-    variant: {
-        circle: "uy:rounded-circle";
-        square: "uy:aspect-square";
-    };
-    color: {
-        teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high";
-        plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum";
-        purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple";
-        orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange";
-        neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral";
-        warning: "uy:bg-surface-warning-low uy:text-content-warning-high";
-        success: "uy:bg-surface-success-low uy:text-content-success-high";
-        info: "uy:bg-surface-info-low uy:text-content-info-high";
-        danger: "uy:bg-surface-danger-low uy:text-content-danger-high";
-        promo: "uy:bg-surface-promo-low uy:text-content-promo-high";
-        primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high";
-    };
-}, undefined>>>;
-type AvatarAccessibleName = {
-    'aria-label': string;
-    'aria-labelledby'?: string;
-} | {
-    'aria-label'?: string;
-    'aria-labelledby': string;
-};
-export type AvatarProps = PropsWithChildren<{
-    /** Additional class names to apply to the avatar */
-    className?: string;
-    /** The avatar's variant. One of: circle or square */
-    variant?: VariantProps<typeof avatarRoot>['variant'];
-    /** Size of the avatar. One of: xs, sm, md, lg, xl */
-    size?: VariantProps<typeof avatarRoot>['size'];
-    /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
-    color?: VariantProps<typeof avatarRoot>['color'];
-    /** ID of the element that describes the avatar */
-    'aria-describedby'?: string;
-    /** Additional details for the avatar */
-    'aria-details'?: string;
-    /** Indicates if the avatar is hidden from assistive technologies */
-    'aria-hidden'?: boolean;
-} & AvatarAccessibleName>;
-/**
- * The Avatar component displays visual or text content for representing people or entities.
- * It supports images, initials, placeholders, and icons with customizable colors and sizes.
- * @param {AvatarProps} props - Props for the Avatar component
- * @example
- * ```tsx
- * import { Avatar, AvatarImage, AvatarFallback, AvatarIcon } from '@payfit/unity-components'
- *
- * // Avatar with image and fallback
- * function Example() {
- *   return (
- *     <Avatar size="lg" variant="circle" aria-label="John Doe">
- *       <AvatarImage src="/images/avatar.jpg" alt="John Doe" />
- *       <AvatarFallback variant="initials">JD</AvatarFallback>
- *     </Avatar>
- *   )
- * }
- *
- * // Avatar with icon and color
- * function IconExample() {
- *   return (
- *     <Avatar size="lg" color="teal" variant="circle" aria-label="Vacation">
- *       <AvatarIcon src="PalmFilled" alt="Palm tree" />
- *     </Avatar>
- *   )
- * }
- * ```
- * @remarks
- * - Use the `circle` variant for representing people
- * - Use the `square` variant for representing companies or organizations
- * - The `color` prop applies background and text color variants for icon avatars
- * - Always provide an `aria-label` or `aria-labelledby` for accessibility
- * - Use `aria-description` when a short additional description helps screen reader users
- * - Use `aria-labelledby` and `aria-describedby` to associate the avatar with visible text that identifies the represented person or entity
- * - The avatar has `role="img"` by default and should not be used as an interactive element directly; wrap it in a button or Actionable when it triggers an action
- * @see {@link AvatarProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
- * @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar unity-components.payfit.io}
- */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
-export { Avatar };

package/dist/esm/components/avatar/Avatar.js

@@ -1,38 +0,0 @@
-import { AvatarProvider as e } from "./Avatar.context.js";
-import { avatarBase as t } from "./Avatar.variants.js";
-import { useAvatarGroupContext as n } from "../avatar-group/AvatarGroup.context.js";
-import * as r from "react";
-import { uyMerge as i, uyTv as a } from "@payfit/unity-themes";
-import { jsx as o } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-avatar";
-//#region src/components/avatar/Avatar.tsx
-var c = a({
-	extend: t,
-	base: "uy:inline-block uy:relative uy:shrink-0",
-	defaultVariants: {
-		size: "md",
-		variant: "circle"
-	}
-}), l = r.forwardRef(({ size: t, variant: r = "circle", color: a, className: l, ...u }, d) => {
-	let f = n(), p = t ?? f?.defaultSize ?? "md", m = i(c({
-		variant: r,
-		size: p,
-		color: a
-	}), f?.variant === "stack" ? "uy:outline-1 uy:outline-solid uy:outline-grayscale-l0" : void 0, l);
-	return /* @__PURE__ */ o(e, {
-		variant: r,
-		size: p,
-		hasPair: !1,
-		color: a,
-		children: /* @__PURE__ */ o(s.Root, {
-			ref: d,
-			role: "img",
-			className: m,
-			"data-dd-privacy": "allow",
-			...u
-		})
-	});
-});
-l.displayName = s.Root.displayName;
-//#endregion
-export { l as Avatar };

package/dist/esm/components/avatar/Avatar.variants.js

@@ -1,64 +0,0 @@
-import { uyTv as e } from "@payfit/unity-themes";
-//#region src/components/avatar/Avatar.variants.ts
-var t = e({
-	variants: {
-		size: {
-			xs: "uy:size-200",
-			sm: "uy:size-300",
-			md: "uy:size-400",
-			lg: "uy:size-500",
-			xl: "uy:size-[56px]"
-		},
-		variant: {
-			circle: "uy:rounded-circle",
-			square: "uy:aspect-square"
-		},
-		color: {
-			teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high",
-			plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum",
-			purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple",
-			orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange",
-			neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral",
-			warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
-			success: "uy:bg-surface-success-low uy:text-content-success-high",
-			info: "uy:bg-surface-info-low uy:text-content-info-high",
-			danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
-			promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
-			primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high"
-		}
-	},
-	compoundVariants: [
-		{
-			size: "xs",
-			variant: "square",
-			className: "uy:rounded-50"
-		},
-		{
-			size: "sm",
-			variant: "square",
-			className: "uy:rounded-50"
-		},
-		{
-			size: "md",
-			variant: "square",
-			className: "uy:rounded-75"
-		},
-		{
-			size: "lg",
-			variant: "square",
-			className: "uy:rounded-100"
-		},
-		{
-			size: "xl",
-			variant: "square",
-			className: "uy:rounded-200"
-		}
-	],
-	defaultVariants: {
-		size: "md",
-		variant: "circle",
-		color: "neutral"
-	}
-});
-//#endregion
-export { t as avatarBase };

package/dist/esm/components/avatar/AvatarWithTooltip.js

@@ -1,39 +0,0 @@
-import { Actionable as e } from "../actionable/Actionable.js";
-import { Tooltip as t } from "../tooltip/Tooltip.js";
-import { avatarBase as n } from "./Avatar.variants.js";
-import { useAvatarGroupContext as r } from "../avatar-group/AvatarGroup.context.js";
-import { Avatar as i } from "./Avatar.js";
-import * as a from "react";
-import { uyMerge as o } from "@payfit/unity-themes";
-import { jsx as s } from "react/jsx-runtime";
-//#region src/components/avatar/AvatarWithTooltip.tsx
-var c = a.forwardRef(({ tooltip: a, "aria-label": c, "aria-labelledby": l, "aria-describedby": u, "aria-details": d, className: f, size: p, variant: m, ...h }, g) => {
-	let _ = r(), v = m ?? "circle", y = p ?? _?.defaultSize ?? "md", b = c ? { "aria-label": c } : { "aria-labelledby": l ?? "" };
-	return /* @__PURE__ */ s(t, {
-		title: a,
-		children: /* @__PURE__ */ s(e, {
-			ref: g,
-			asElement: "button",
-			type: "button",
-			"aria-label": c,
-			"aria-labelledby": l,
-			"aria-describedby": u,
-			"aria-details": d,
-			className: o(n({
-				variant: v,
-				size: y
-			}), "uy:cursor-default uy:leading-[0] uy: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"),
-			children: /* @__PURE__ */ s(i, {
-				...h,
-				size: p,
-				variant: m,
-				className: f,
-				...b,
-				"aria-hidden": !0
-			})
-		})
-	});
-});
-c.displayName = "AvatarWithTooltip";
-//#endregion
-export { c as AvatarWithTooltip };

package/dist/esm/components/avatar/InteractiveAvatar.js

@@ -1,39 +0,0 @@
-import { Actionable as e } from "../actionable/Actionable.js";
-import { Tooltip as t } from "../tooltip/Tooltip.js";
-import { avatarBase as n } from "./Avatar.variants.js";
-import { useAvatarGroupContext as r } from "../avatar-group/AvatarGroup.context.js";
-import { Avatar as i } from "./Avatar.js";
-import * as a from "react";
-import { uyMerge as o } from "@payfit/unity-themes";
-import { jsx as s } from "react/jsx-runtime";
-//#region src/components/avatar/InteractiveAvatar.tsx
-var c = a.forwardRef(({ tooltip: a, onPress: c, onPressStart: l, onPressEnd: u, onPressChange: d, children: f, ...p }, m) => {
-	let h = r();
-	return /* @__PURE__ */ s(t, {
-		title: a,
-		children: /* @__PURE__ */ s(e, {
-			ref: m,
-			asElement: "button",
-			type: "button",
-			className: o(n({
-				variant: p.variant ?? "circle",
-				size: p.size ?? h?.defaultSize ?? "md"
-			}), "uy:cursor-pointer uy:leading-[0] uy: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"),
-			onPress: c,
-			onPressStart: l,
-			onPressEnd: u,
-			onPressChange: d,
-			"aria-label": p["aria-label"],
-			"aria-describedby": p["aria-describedby"],
-			"aria-details": p["aria-details"],
-			children: /* @__PURE__ */ s(i, {
-				...p,
-				"aria-hidden": !0,
-				children: f
-			})
-		})
-	});
-});
-c.displayName = "InteractiveAvatar";
-//#endregion
-export { c as InteractiveAvatar };

package/dist/esm/components/avatar/parts/AvatarFallback.js

@@ -1,78 +0,0 @@
-import { useAvatarContext as e } from "../Avatar.context.js";
-import { avatarBase as t } from "../Avatar.variants.js";
-import { getInitials as n } from "../utils.js";
-import * as r from "react";
-import { uyMerge as i, uyTv as a } from "@payfit/unity-themes";
-import { jsx as o } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-avatar";
-//#region src/components/avatar/parts/AvatarFallback.tsx
-var c = a({
-	slots: {
-		base: "uy:absolute uy:overflow-hidden",
-		background: "",
-		foreground: ""
-	},
-	variants: { color: {
-		blue: {
-			background: "uy:bg-blue-l3",
-			foreground: "uy:fill-blue-l4"
-		},
-		yellow: {
-			background: "uy:bg-yellow-l3",
-			foreground: "uy:fill-yellow-l4"
-		},
-		purple: {
-			background: "uy:bg-purple-l3",
-			foreground: "uy:fill-purple-l4"
-		}
-	} }
-}), l = a({
-	extend: t,
-	base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-lowest",
-	variants: { size: {
-		xs: "uy:typography-body-small-strong",
-		sm: "uy:typography-body-small-strong",
-		md: "uy:typography-body-small-strong",
-		lg: "uy:typography-body-strong",
-		xl: "uy:typography-h2"
-	} }
-}), u = r.forwardRef(({ variant: r, color: a, children: u, ...d }, f) => {
-	let { size: p, variant: m } = e();
-	if (r === "placeholder") {
-		let e = t({
-			size: p,
-			variant: m
-		}), { base: n, background: r, foreground: l } = c({ color: a });
-		return /* @__PURE__ */ o(s.Fallback, {
-			ref: f,
-			role: "presentation",
-			...d,
-			children: /* @__PURE__ */ o("svg", {
-				role: "img",
-				"aria-hidden": !0,
-				xmlns: "http://www.w3.org/2000/svg",
-				viewBox: "0 0 16 16",
-				className: i(e, n(), r()),
-				children: /* @__PURE__ */ o("path", {
-					className: l(),
-					fillRule: "evenodd",
-					d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
-					clipRule: "evenodd"
-				})
-			})
-		});
-	}
-	return /* @__PURE__ */ o(s.Fallback, {
-		ref: f,
-		role: "presentation",
-		className: l({
-			size: p,
-			variant: m
-		}),
-		...d,
-		children: n(u)
-	});
-});
-u.displayName = s.Fallback.displayName;
-//#endregion
-export { u as AvatarFallback };

package/dist/esm/components/avatar/parts/AvatarIcon.d.ts

@@ -1,31 +0,0 @@
-import { IconProps } from '@payfit/unity-icons';
-import * as React from 'react';
-export type AvatarIconProps = Omit<IconProps, 'size' | 'color'>;
-/**
- * The AvatarIcon component displays an icon within an Avatar component, using the Unity icon system.
- * It automatically sizes the icon based on the parent Avatar's size and inherits the text color from the Avatar's color variant.
- * @param {AvatarIconProps} props - Props for the AvatarIcon component
- * @example
- * ```tsx
- * import { Avatar, AvatarIcon } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Avatar size="lg" color="teal" variant="circle" aria-label="Vacation">
- *       <AvatarIcon src="PalmFilled" alt="Palm tree" />
- *     </Avatar>
- *   )
- * }
- * ```
- * @remarks
- * - Must be used as a child of an Avatar component
- * - Icons automatically scale: 20px for small to large avatars, 24px for extra-large avatars
- * - The icon color is inherited from the parent Avatar's text color
- * @see {@link AvatarIconProps} for all available props
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar/parts GitHub}
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
- * @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar-avataricon unity-components.payfit.io}
- */
-declare const AvatarIcon: React.ForwardRefExoticComponent<AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
-export { AvatarIcon };

package/dist/esm/components/avatar/parts/AvatarIcon.js

@@ -1,32 +0,0 @@
-import { useAvatarContext as e } from "../Avatar.context.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { IconSprite as r } from "@payfit/unity-icons";
-import * as i from "@payfit/unity-themes/tokens/common/spacings.json";
-//#region src/components/avatar/parts/AvatarIcon.tsx
-var a = (e) => parseInt(e.replace("px", "").trim(), 10), o = {
-	xl: a(i.spacing[500].$value),
-	lg: a(i.spacing[300].$value),
-	md: a(i.spacing[250].$value),
-	sm: a(i.spacing[200].$value),
-	xs: a(i.spacing[150].$value),
-	default: a(i.spacing[250].$value)
-}, s = t.forwardRef(({ src: t, alt: i = "", className: a }, s) => {
-	let { size: c } = e(), l = o[c];
-	return /* @__PURE__ */ n("div", {
-		"data-dd-privacy": "allow",
-		ref: s,
-		role: "img",
-		className: `uy:flex uy:items-center uy:justify-center uy:w-full uy:h-full ${a || ""}`,
-		"aria-label": i,
-		children: /* @__PURE__ */ n(r, {
-			src: t,
-			width: l,
-			height: l,
-			fill: "currentColor"
-		})
-	});
-});
-s.displayName = "AvatarIcon";
-//#endregion
-export { s as AvatarIcon };

package/dist/esm/components/avatar/parts/AvatarImage.js

@@ -1,25 +0,0 @@
-import { useAvatarContext as e } from "../Avatar.context.js";
-import { avatarBase as t } from "../Avatar.variants.js";
-import * as n from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-avatar";
-//#region src/components/avatar/parts/AvatarImage.tsx
-var o = r({
-	extend: t,
-	base: "uy:aspect-square uy:w-full uy:h-full uy:object-cover uy:bg-surface-neutral-lowest"
-}), s = n.forwardRef(({ className: t, ...n }, r) => {
-	let { variant: s, size: c } = e(), l = o({
-		variant: s,
-		size: c,
-		className: t
-	});
-	return /* @__PURE__ */ i(a.Image, {
-		ref: r,
-		className: l,
-		...n
-	});
-});
-s.displayName = a.Image.displayName;
-//#endregion
-export { s as AvatarImage };

package/dist/esm/components/avatar/parts/AvatarPair.js

@@ -1,49 +0,0 @@
-import { AvatarProvider as e, useAvatarContext as t } from "../Avatar.context.js";
-import { avatarBase as n } from "../Avatar.variants.js";
-import * as r from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-avatar";
-//#region src/components/avatar/parts/AvatarPair.tsx
-var s = i({
-	extend: n,
-	base: "uy:absolute uy:overflow-hidden uy:leading-[0] uy:border uy:border-solid uy:border-content-inverted uy:-bottom-[var(--pair-offset)] uy:-right-[var(--pair-offset)] uy:transition-transform uy:origin-center",
-	variants: {
-		size: {
-			xs: "uy:size-200",
-			sm: "uy:size-300"
-		},
-		isHidden: {
-			true: "uy:scale-0",
-			false: "uy:scale-100"
-		}
-	},
-	defaultVariants: {
-		size: "sm",
-		variant: "circle",
-		isHidden: !1
-	}
-}), c = r.forwardRef(({ variant: n, isHidden: r, children: i, ...c }, l) => {
-	let { size: u } = t(), d = u === "xl", f = d ? "sm" : "xs", p = d ? 8 : 4, m = s({
-		variant: n,
-		size: f,
-		isHidden: r
-	});
-	return /* @__PURE__ */ a(e, {
-		variant: n,
-		size: f,
-		hasPair: !0,
-		children: /* @__PURE__ */ a(o.Root, {
-			ref: l,
-			role: "img",
-			className: m,
-			"aria-hidden": r,
-			style: { "--pair-offset": `${p}px` },
-			...c,
-			children: i
-		})
-	});
-});
-c.displayName = "AvatarPair";
-//#endregion
-export { c as AvatarPair };

package/dist/esm/components/avatar/utils.js

@@ -1,4 +0,0 @@
-//#region src/components/avatar/utils.ts
-var e = (e) => e ? e.length <= 2 ? e : e.replace(/[^a-z0-9 ]+/gi, "").split(" ").map((e) => e.charAt(0).toUpperCase()).filter((e, t, n) => t === 0 || n.length > 0 && t === n.length - 1).join("") : "";
-//#endregion
-export { e as getInitials };

package/dist/esm/components/avatar-group/AvatarGroup.context.js

@@ -1,18 +0,0 @@
-import { createContext as e, useContext as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-//#region src/components/avatar-group/AvatarGroup.context.tsx
-var r = e(null);
-function i({ defaultSize: e, variant: t, children: i }) {
-	return /* @__PURE__ */ n(r.Provider, {
-		value: {
-			defaultSize: e,
-			variant: t
-		},
-		children: i
-	});
-}
-function a() {
-	return t(r);
-}
-//#endregion
-export { i as AvatarGroupProvider, a as useAvatarGroupContext };