@payfit/unity-components 2.47.5 → 2.47.6

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

@@ -1,28 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as s, useContext as v } from "react";
-const r = s({
-  variant: "circle",
-  size: "md",
-  hasPair: !1,
-  color: void 0
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/avatar/Avatar.context.tsx
+var r = e({
+	variant: "circle",
+	size: "md",
+	hasPair: !1,
+	color: void 0
 });
-function x({
-  variant: t,
-  size: e,
-  hasPair: o,
-  color: a,
-  children: n
-}) {
-  return /* @__PURE__ */ i(r.Provider, { value: { variant: t, size: e, hasPair: o, color: a }, children: n });
+function i({ variant: e, size: t, hasPair: i, color: a, children: o }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			variant: e,
+			size: t,
+			hasPair: i,
+			color: a
+		},
+		children: o
+	});
 }
-function d() {
-  const t = v(r);
-  if (!t)
-    throw new Error("useAvatarContext must be used within an AvatarProvider");
-  return t;
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useAvatarContext must be used within an AvatarProvider");
+	return e;
 }
-export {
-  r as AvatarContext,
-  x as AvatarProvider,
-  d as useAvatarContext
-};
+//#endregion
+export { i as AvatarProvider, a as useAvatarContext };

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

@@ -1,46 +1,38 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import * as e from "@radix-ui/react-avatar";
-import { AvatarProvider as f } from "./Avatar.context.js";
-import { avatarBase as n } from "./Avatar.variants.js";
-const p = d({
-  extend: n,
-  base: "uy:inline-block uy:relative uy:shrink-0",
-  defaultVariants: {
-    size: "md",
-    variant: "circle"
-  }
-}), v = c.forwardRef(
-  ({ size: a = "md", variant: r = "circle", color: t, className: i, ...m }, s) => {
-    const l = p({
-      variant: r,
-      size: a,
-      color: t,
-      className: i
-    });
-    return /* @__PURE__ */ o(
-      f,
-      {
-        variant: r,
-        size: a,
-        hasPair: !1,
-        color: t,
-        children: /* @__PURE__ */ o(
-          e.Root,
-          {
-            ref: s,
-            role: "img",
-            className: l,
-            "data-dd-privacy": "allow",
-            ...m
-          }
-        )
-      }
-    );
-  }
-);
-v.displayName = e.Root.displayName;
-export {
-  v as Avatar
-};
+import { AvatarProvider 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/Avatar.tsx
+var o = r({
+	extend: t,
+	base: "uy:inline-block uy:relative uy:shrink-0",
+	defaultVariants: {
+		size: "md",
+		variant: "circle"
+	}
+}), s = n.forwardRef(({ size: t = "md", variant: n = "circle", color: r, className: s, ...c }, l) => {
+	let u = o({
+		variant: n,
+		size: t,
+		color: r,
+		className: s
+	});
+	return /* @__PURE__ */ i(e, {
+		variant: n,
+		size: t,
+		hasPair: !1,
+		color: r,
+		children: /* @__PURE__ */ i(a.Root, {
+			ref: l,
+			role: "img",
+			className: u,
+			"data-dd-privacy": "allow",
+			...c
+		})
+	});
+});
+s.displayName = a.Root.displayName;
+//#endregion
+export { s as Avatar };

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

@@ -1,64 +1,64 @@
 import { uyTv as e } from "@payfit/unity-themes";
-const 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"
-  }
+//#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"
+	}
 });
-export {
-  t as avatarBase
-};
+//#endregion
+export { t as avatarBase };

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

@@ -1,82 +1,78 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as b from "react";
-import { uyTv as y, uyMerge as h } from "@payfit/unity-themes";
-import * as l from "@radix-ui/react-avatar";
-import { useAvatarContext as f } from "../Avatar.context.js";
-import { avatarBase as i } from "../Avatar.variants.js";
-import { getInitials as v } from "../utils.js";
-const w = y({
-  slots: {
-    base: "uy:absolute uy:overflow-hidden",
-    background: "",
-    foreground: ""
-  },
-  variants: {
-    color: {
-      blue: {
-        background: "uy:theme-legacy:bg-blue-l4 uy:theme-rebrand:bg-blue-l3",
-        foreground: "uy:theme-legacy:fill-blue-l3 uy:theme-rebrand:fill-blue-l4"
-      },
-      yellow: {
-        background: "uy:theme-legacy:bg-yellow-l4 uy:theme-rebrand:bg-yellow-l3",
-        foreground: "uy:theme-legacy:fill-yellow-l3 uy:theme-rebrand:fill-yellow-l4"
-      },
-      purple: {
-        background: "uy:theme-legacy:bg-purple-l4 uy:theme-rebrand:bg-purple-l3",
-        foreground: "uy:theme-legacy:fill-purple-l3 uy:theme-rebrand:fill-purple-l4"
-      }
-    }
-  }
-}), x = y({
-  extend: i,
-  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"
-    }
-  }
-}), k = b.forwardRef(({ variant: c, color: g, children: m, ...a }, r) => {
-  const d = f(), { size: o, variant: t } = d;
-  if (c === "placeholder") {
-    const p = i({ size: o, variant: t }), { base: n, background: u, foreground: s } = w({
-      color: g
-    });
-    return console.log("BASE", n()), console.log("FG", s()), console.log("BG", u()), /* @__PURE__ */ e(l.Fallback, { ref: r, role: "presentation", ...a, children: /* @__PURE__ */ e(
-      "svg",
-      {
-        role: "img",
-        "aria-hidden": !0,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 16 16",
-        className: h(p, n(), u()),
-        children: /* @__PURE__ */ e(
-          "path",
-          {
-            className: s(),
-            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__ */ e(
-    l.Fallback,
-    {
-      ref: r,
-      role: "presentation",
-      className: x({ size: o, variant: t }),
-      ...a,
-      children: v(m)
-    }
-  );
+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:theme-legacy:bg-blue-l4 uy:theme-rebrand:bg-blue-l3",
+			foreground: "uy:theme-legacy:fill-blue-l3 uy:theme-rebrand:fill-blue-l4"
+		},
+		yellow: {
+			background: "uy:theme-legacy:bg-yellow-l4 uy:theme-rebrand:bg-yellow-l3",
+			foreground: "uy:theme-legacy:fill-yellow-l3 uy:theme-rebrand:fill-yellow-l4"
+		},
+		purple: {
+			background: "uy:theme-legacy:bg-purple-l4 uy:theme-rebrand:bg-purple-l3",
+			foreground: "uy:theme-legacy:fill-purple-l3 uy:theme-rebrand: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 console.log("BASE", n()), console.log("FG", l()), console.log("BG", r()), /* @__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)
+	});
 });
-k.displayName = l.Fallback.displayName;
-export {
-  k as AvatarFallback
-};
+u.displayName = s.Fallback.displayName;
+//#endregion
+export { u as AvatarFallback };

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

@@ -1,40 +1,32 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as c from "react";
-import { IconSprite as p } from "@payfit/unity-icons";
-import * as a from "@payfit/unity-themes/tokens/common/spacings.json";
-import { useAvatarContext as u } from "../Avatar.context.js";
-const r = (e) => parseInt(e.replace("px", "").trim(), 10), m = {
-  xl: r(a.spacing[500].$value),
-  lg: r(a.spacing[300].$value),
-  md: r(a.spacing[250].$value),
-  sm: r(a.spacing[200].$value),
-  xs: r(a.spacing[150].$value),
-  default: r(a.spacing[250].$value)
-}, f = c.forwardRef(
-  ({ src: e, alt: o = "", className: s }, l) => {
-    const { size: n } = u(), t = m[n];
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        "data-dd-privacy": "allow",
-        ref: l,
-        role: "img",
-        className: `uy:flex uy:items-center uy:justify-center uy:w-full uy:h-full ${s || ""}`,
-        "aria-label": o,
-        children: /* @__PURE__ */ i(
-          p,
-          {
-            src: e,
-            width: t,
-            height: t,
-            fill: "currentColor"
-          }
-        )
-      }
-    );
-  }
-);
-f.displayName = "AvatarIcon";
-export {
-  f as AvatarIcon
-};
+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,21 +1,25 @@
-import { jsx as i } from "react/jsx-runtime";
+import { useAvatarContext as e } from "../Avatar.context.js";
+import { avatarBase as t } from "../Avatar.variants.js";
 import * as n from "react";
-import { uyTv as u } from "@payfit/unity-themes";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-avatar";
-import { useAvatarContext as p } from "../Avatar.context.js";
-import { avatarBase as c } from "../Avatar.variants.js";
-const f = u({
-  extend: c,
-  base: "uy:aspect-square uy:w-full uy:h-full uy:object-cover uy:bg-surface-neutral-lowest"
-}), l = n.forwardRef(({ className: r, ...e }, t) => {
-  const { variant: s, size: o } = p(), m = f({
-    variant: s,
-    size: o,
-    className: r
-  });
-  return /* @__PURE__ */ i(a.Image, { ref: t, className: m, ...e });
+//#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
+	});
 });
-l.displayName = a.Image.displayName;
-export {
-  l as AvatarImage
-};
+s.displayName = a.Image.displayName;
+//#endregion
+export { s as AvatarImage };