@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/action-bar/parts/ActionBarPrefixArea.js

@@ -1,35 +1,24 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { Group as n } from "react-aria-components/Group";
+import { actionBar as e } from "../ActionBar.variants.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Group as r } from "react-aria-components/Group";
 import { useIntl as i } from "react-intl";
-import { actionBar as c } from "../ActionBar.variants.js";
-const p = ({
-  children: r,
-  ariaKeyshortcuts: o
-}) => {
-  const t = i(), { prefixArea: e } = c();
-  return /* @__PURE__ */ a(
-    n,
-    {
-      className: e(),
-      "aria-label": t.formatMessage({
-        id: "unity:component:action-bar:group:label",
-        defaultMessage: "Toolbar information"
-      }),
-      children: [
-        r,
-        o && /* @__PURE__ */ s("span", { className: "uy:sr-only", children: t.formatMessage(
-          {
-            id: "unity:component:action-bar:key-shortcuts-text",
-            defaultMessage: "Use {keyShortcuts} to focus the action bar"
-          },
-          {
-            keyShortcuts: o
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  p as ActionBarPrefixArea
+//#region src/components/action-bar/parts/ActionBarPrefixArea.tsx
+var a = ({ children: a, ariaKeyshortcuts: o }) => {
+	let s = i(), { prefixArea: c } = e();
+	return /* @__PURE__ */ n(r, {
+		className: c(),
+		"aria-label": s.formatMessage({
+			id: "unity:component:action-bar:group:label",
+			defaultMessage: "Toolbar information"
+		}),
+		children: [a, o && /* @__PURE__ */ t("span", {
+			className: "uy:sr-only",
+			children: s.formatMessage({
+				id: "unity:component:action-bar:key-shortcuts-text",
+				defaultMessage: "Use {keyShortcuts} to focus the action bar"
+			}, { keyShortcuts: o })
+		})]
+	});
 };
+//#endregion
+export { a as ActionBarPrefixArea };

package/dist/esm/components/action-bar/parts/ActionBarRoot.js

@@ -1,56 +1,44 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-const l = c({
-  base: [
-    "uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
-    "uy:duration-200 uy:ease-out",
-    "uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
-    "uy:starting:opacity-0"
-  ],
-  variants: {
-    isVisible: {
-      true: ["uy:animate-slide-up-fade-in"],
-      false: [
-        // Use transform instead of changing bottom position
-        "uy:animate-slide-down-fade-out",
-        "uy:pointer-events-none",
-        "uy:opacity-0",
-        "uy:translate-y-10"
-      ]
-    },
-    position: {
-      absolute: ["uy:absolute"],
-      fixed: ["uy:fixed"]
-    }
-  }
-}), p = y(
-  ({
-    children: o,
-    offsetBottom: a = 0,
-    isVisible: t = !1,
-    position: u = "absolute",
-    ...n
-  }, i) => {
-    const e = typeof a == "number" ? a : a.replace("$", ""), s = typeof a == "number" ? `calc(var(--uy-spacing)*${e})` : `var(--uy-spacing-${e})`;
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: i,
-        className: l({ isVisible: t, position: u }),
-        ...n,
-        style: {
-          "--uy-spacing-offset-bottom": s
-        },
-        tabIndex: -1,
-        inert: t ? void 0 : "",
-        children: o
-      }
-    );
-  }
-);
-p.displayName = "ActionBarRoot";
-export {
-  p as ActionBarRoot,
-  l as actionBarRoot
-};
+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/action-bar/parts/ActionBarRoot.tsx
+var r = t({
+	base: [
+		"uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
+		"uy:duration-200 uy:ease-out",
+		"uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
+		"uy:starting:opacity-0"
+	],
+	variants: {
+		isVisible: {
+			true: ["uy:animate-slide-up-fade-in"],
+			false: [
+				"uy:animate-slide-down-fade-out",
+				"uy:pointer-events-none",
+				"uy:opacity-0",
+				"uy:translate-y-10"
+			]
+		},
+		position: {
+			absolute: ["uy:absolute"],
+			fixed: ["uy:fixed"]
+		}
+	}
+}), i = e(({ children: e, offsetBottom: t = 0, isVisible: i = !1, position: a = "absolute", ...o }, s) => {
+	let c = typeof t == "number" ? t : t.replace("$", ""), l = typeof t == "number" ? `calc(var(--uy-spacing)*${c})` : `var(--uy-spacing-${c})`;
+	return /* @__PURE__ */ n("div", {
+		ref: s,
+		className: r({
+			isVisible: i,
+			position: a
+		}),
+		...o,
+		style: { "--uy-spacing-offset-bottom": l },
+		tabIndex: -1,
+		inert: i ? void 0 : "",
+		children: e
+	});
+});
+i.displayName = "ActionBarRoot";
+//#endregion
+export { i as ActionBarRoot, r as actionBarRoot };

package/dist/esm/components/action-bar/utils/action-bar-helpers.js

@@ -1,29 +1,24 @@
-import c, { isValidElement as s } from "react";
-import { ActionBarButton as p } from "../parts/ActionBarButton.js";
-import { ActionBarIconButton as n } from "../parts/ActionBarIconButton.js";
-const u = (e) => e.filter(
-  (o) => o.variant !== "primary"
-), y = (e) => {
-  const o = [];
-  return c.Children.forEach(e, (t) => {
-    if (!s(t) || t.type !== p && t.type !== n)
-      return;
-    const r = t.props;
-    if (r.variant === "primary") return;
-    const i = t.type === n ? r.label : r.children, a = t.type === n ? r.icon : r.prefixIcon;
-    o.push({
-      //eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-      id: t.key ?? r.id,
-      label: i,
-      variant: r.variant,
-      meta: {
-        onPress: r.onPress,
-        prefixIcon: a
-      }
-    });
-  }), o;
-};
-export {
-  u as extractMobileActionsFromArray,
-  y as extractMobileActionsFromChildren
+import { ActionBarButton as e } from "../parts/ActionBarButton.js";
+import { ActionBarIconButton as t } from "../parts/ActionBarIconButton.js";
+import n, { isValidElement as r } from "react";
+//#region src/components/action-bar/utils/action-bar-helpers.ts
+var i = (e) => e.filter((e) => e.variant !== "primary"), a = (i) => {
+	let a = [];
+	return n.Children.forEach(i, (n) => {
+		if (!r(n) || n.type !== e && n.type !== t) return;
+		let i = n.props;
+		if (i.variant === "primary") return;
+		let o = n.type === t ? i.label : i.children, s = n.type === t ? i.icon : i.prefixIcon;
+		a.push({
+			id: n.key ?? i.id,
+			label: o,
+			variant: i.variant,
+			meta: {
+				onPress: i.onPress,
+				prefixIcon: s
+			}
+		});
+	}), a;
 };
+//#endregion
+export { i as extractMobileActionsFromArray, a as extractMobileActionsFromChildren };

package/dist/esm/components/actionable/Actionable.js

@@ -1,83 +1,67 @@
-import { jsx as H } from "react/jsx-runtime";
-import { forwardRef as k, useState as F, useMemo as E } from "react";
-import { uyTv as N } from "@payfit/unity-themes";
-import { useObjectRef as x, useFocusVisible as S, useHover as U, useFocus as V, mergeProps as f } from "react-aria";
-import { useButton as j } from "react-aria/useButton";
-const w = N({
-  base: "uy:group",
-  variants: {
-    isUnstyled: {
-      true: "",
-      false: [
-        "uy:cursor-pointer",
-        "uy:aria-disabled:cursor-not-allowed",
-        "uy:aria-disabled:text-content-neutral-disabled"
-      ]
-    }
-  },
-  defaultVariants: {
-    isUnstyled: !1
-  }
-}), A = k((v, e) => {
-  const {
-    asElement: l = "div",
-    isUnstyled: d = !1,
-    className: c,
-    children: o,
-    ...s
-  } = v;
-  e = x(e);
-  const { isFocusVisible: a } = S(), { isHovered: i, hoverProps: u } = U({
-    onHoverStart: s.onHoverStart,
-    onHoverEnd: s.onHoverEnd,
-    onHoverChange: s.onHoverChange,
-    isDisabled: s.isDisabled
-  }), [t, D] = F(!1), { focusProps: b } = V({
-    onFocusChange: D,
-    isDisabled: s.isDisabled
-  }), { buttonProps: p, isPressed: n } = j(
-    {
-      ...s,
-      isDisabled: s.isDisabled,
-      elementType: l
-    },
-    e
-  ), y = E(
-    () => w({ isUnstyled: d, className: c }),
-    [c, d]
-  ), g = l, C = (r) => {
-    if (s.isDisabled) {
-      r.preventDefault(), r.stopPropagation();
-      return;
-    }
-    const m = f(p, u, b);
-    m.onClick && m.onClick(r);
-  }, P = f(p, u, b), { onClick: M, ...h } = P;
-  return /* @__PURE__ */ H(
-    g,
-    {
-      ...h,
-      onClick: C,
-      className: y,
-      ...n && { "data-pressed": n },
-      ...t && { "data-focused": t },
-      ...i && { "data-hovered": i },
-      ...s.isDisabled && { "data-disabled": s.isDisabled },
-      ...a && { "data-focus-visible": a },
-      ref: e,
-      children: typeof o == "function" ? o({
-        isHovered: i,
-        isPressed: n,
-        isFocused: t,
-        isDisabled: !!s.isDisabled,
-        isFocusVisible: a,
-        isPending: !1,
-        defaultChildren: null
-      }) : o
-    }
-  );
+import { forwardRef as e, useMemo as t, useState as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { mergeProps as i, useFocus as a, useFocusVisible as o, useHover as s, useObjectRef as c } from "react-aria";
+import { useButton as l } from "react-aria/useButton";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/actionable/Actionable.tsx
+var d = r({
+	base: "uy:group",
+	variants: { isUnstyled: {
+		true: "",
+		false: [
+			"uy:cursor-pointer",
+			"uy:aria-disabled:cursor-not-allowed",
+			"uy:aria-disabled:text-content-neutral-disabled"
+		]
+	} },
+	defaultVariants: { isUnstyled: !1 }
+}), f = e((e, r) => {
+	let { asElement: f = "div", isUnstyled: p = !1, className: m, children: h, ...g } = e;
+	r = c(r);
+	let { isFocusVisible: _ } = o(), { isHovered: v, hoverProps: y } = s({
+		onHoverStart: g.onHoverStart,
+		onHoverEnd: g.onHoverEnd,
+		onHoverChange: g.onHoverChange,
+		isDisabled: g.isDisabled
+	}), [b, x] = n(!1), { focusProps: S } = a({
+		onFocusChange: x,
+		isDisabled: g.isDisabled
+	}), { buttonProps: C, isPressed: w } = l({
+		...g,
+		isDisabled: g.isDisabled,
+		elementType: f
+	}, r), T = t(() => d({
+		isUnstyled: p,
+		className: m
+	}), [m, p]), E = f, D = (e) => {
+		if (g.isDisabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		let t = i(C, y, S);
+		t.onClick && t.onClick(e);
+	}, { onClick: O, ...k } = i(C, y, S);
+	return /* @__PURE__ */ u(E, {
+		...k,
+		onClick: D,
+		className: T,
+		...w && { "data-pressed": w },
+		...b && { "data-focused": b },
+		...v && { "data-hovered": v },
+		...g.isDisabled && { "data-disabled": g.isDisabled },
+		..._ && { "data-focus-visible": _ },
+		ref: r,
+		children: typeof h == "function" ? h({
+			isHovered: v,
+			isPressed: w,
+			isFocused: b,
+			isDisabled: !!g.isDisabled,
+			isFocusVisible: _,
+			isPending: !1,
+			defaultChildren: null
+		}) : h
+	});
 });
-A.displayName = "Actionable";
-export {
-  A as Actionable
-};
+f.displayName = "Actionable";
+//#endregion
+export { f as Actionable };

package/dist/esm/components/alert/Alert.js

@@ -1,99 +1,84 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { uyTv as b } from "@payfit/unity-themes";
-import { CircularIconButton as a } from "../icon-button/CircularIconButton.js";
-import { Icon as w } from "../icon/Icon.js";
-const p = b({
-  slots: {
-    base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
-    content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200 uy:[&>*:first-child:not(header)]:sm:pt-50",
-    icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
-  },
-  variants: {
-    variant: {
-      info: {
-        base: "uy:bg-surface-info-lowest uy:border-border-info-lowest",
-        icon: "uy:text-content-info"
-      },
-      warning: {
-        base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest",
-        icon: "uy:text-content-warning"
-      },
-      success: {
-        base: "uy:bg-surface-success-lowest uy:border-border-success-lowest",
-        icon: "uy:text-content-success"
-      },
-      danger: {
-        base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest",
-        icon: "uy:text-content-danger"
-      },
-      insight: {
-        base: "uy:bg-surface-neutral-lowest uy:border-surface-neutral-lowest",
-        icon: "uy:text-content-neutral-lowest"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "info"
-  }
-}), x = {
-  info: "InfoFilled",
-  warning: "WarningFilled",
-  success: "CheckCircleFilled",
-  danger: "WarningCircleFilled",
-  insight: "LightbulbFilamentFilled"
-}, h = g(
-  ({
-    children: l,
-    variant: e = "info",
-    isDismissable: o = !1,
-    onDismiss: n,
-    dismissButtonLabel: r,
-    ...i
-  }, u) => {
-    const { base: c, content: d, icon: y } = p({ variant: e }), f = x[e], m = {
-      role: e === "danger" ? "alert" : "status",
-      "aria-live": e === "danger" ? "assertive" : "polite",
-      "aria-atomic": !0,
-      "aria-relevant": "additions removals"
-    };
-    return /* @__PURE__ */ s(
-      "div",
-      {
-        ...i,
-        "data-dd-privacy": "mask",
-        ref: u,
-        className: c(),
-        ...m,
-        children: [
-          /* @__PURE__ */ s("div", { className: y(), children: [
-            /* @__PURE__ */ t(w, { src: f, size: 24, role: "presentation" }),
-            o && r && /* @__PURE__ */ t(
-              a,
-              {
-                title: r,
-                icon: "CloseOutlined",
-                onPress: n,
-                className: "uy:sm:hidden"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ t("section", { className: d(), children: l }),
-          o && r && /* @__PURE__ */ t(
-            a,
-            {
-              title: r,
-              icon: "CloseOutlined",
-              onPress: n,
-              className: "uy:hidden uy:sm:flex"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-h.displayName = "Alert";
-export {
-  h as Alert
-};
+import { Icon as e } from "../icon/Icon.js";
+import { CircularIconButton as t } from "../icon-button/CircularIconButton.js";
+import { forwardRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/alert/Alert.tsx
+var o = r({
+	slots: {
+		base: "uy:p-200 uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:sm:gap-200 uy:border uy:border-solid uy:rounded-150 uy:sm:rounded-100",
+		content: "uy:flex uy:flex-col uy:flex-1 uy:[&>header:has(+*:not(footer))]:mb-100 uy:[&>*+footer]:mt-200 uy:[&>*:first-child:not(header)]:sm:pt-50",
+		icon: "uy:sm:mt-50 uy:flex uy:justify-between uy:items-center uy:sm:items-start"
+	},
+	variants: { variant: {
+		info: {
+			base: "uy:bg-surface-info-lowest uy:border-border-info-lowest",
+			icon: "uy:text-content-info"
+		},
+		warning: {
+			base: "uy:bg-surface-warning-lowest uy:border-border-warning-lowest",
+			icon: "uy:text-content-warning"
+		},
+		success: {
+			base: "uy:bg-surface-success-lowest uy:border-border-success-lowest",
+			icon: "uy:text-content-success"
+		},
+		danger: {
+			base: "uy:bg-surface-danger-lowest uy:border-border-danger-lowest",
+			icon: "uy:text-content-danger"
+		},
+		insight: {
+			base: "uy:bg-surface-neutral-lowest uy:border-surface-neutral-lowest",
+			icon: "uy:text-content-neutral-lowest"
+		}
+	} },
+	defaultVariants: { variant: "info" }
+}), s = {
+	info: "InfoFilled",
+	warning: "WarningFilled",
+	success: "CheckCircleFilled",
+	danger: "WarningCircleFilled",
+	insight: "LightbulbFilamentFilled"
+}, c = n(({ children: n, variant: r = "info", isDismissable: c = !1, onDismiss: l, dismissButtonLabel: u, ...d }, f) => {
+	let { base: p, content: m, icon: h } = o({ variant: r }), g = s[r], _ = {
+		role: r === "danger" ? "alert" : "status",
+		"aria-live": r === "danger" ? "assertive" : "polite",
+		"aria-atomic": !0,
+		"aria-relevant": "additions removals"
+	};
+	return /* @__PURE__ */ a("div", {
+		...d,
+		"data-dd-privacy": "mask",
+		ref: f,
+		className: p(),
+		..._,
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: h(),
+				children: [/* @__PURE__ */ i(e, {
+					src: g,
+					size: 24,
+					role: "presentation"
+				}), c && u && /* @__PURE__ */ i(t, {
+					title: u,
+					icon: "CloseOutlined",
+					onPress: l,
+					className: "uy:sm:hidden"
+				})]
+			}),
+			/* @__PURE__ */ i("section", {
+				className: m(),
+				children: n
+			}),
+			c && u && /* @__PURE__ */ i(t, {
+				title: u,
+				icon: "CloseOutlined",
+				onPress: l,
+				className: "uy:hidden uy:sm:flex"
+			})
+		]
+	});
+});
+c.displayName = "Alert";
+//#endregion
+export { c as Alert };

package/dist/esm/components/alert/parts/AlertActions.js

@@ -1,21 +1,19 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-const l = i({
-  base: "uy:flex uy:gap-100",
-  variants: {
-    direction: {
-      row: "uy:flex-row",
-      column: "uy:flex-col"
-    }
-  },
-  defaultVariants: {
-    direction: "column"
-  }
-}), n = a(
-  ({ children: o, direction: r = "column" }, t) => /* @__PURE__ */ e("footer", { ref: t, className: l({ direction: r }), children: o })
-);
-n.displayName = "AlertActions";
-export {
-  n as AlertActions
-};
+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/alert/parts/AlertActions.tsx
+var r = t({
+	base: "uy:flex uy:gap-100",
+	variants: { direction: {
+		row: "uy:flex-row",
+		column: "uy:flex-col"
+	} },
+	defaultVariants: { direction: "column" }
+}), i = e(({ children: e, direction: t = "column" }, i) => /* @__PURE__ */ n("footer", {
+	ref: i,
+	className: r({ direction: t }),
+	children: e
+}));
+i.displayName = "AlertActions";
+//#endregion
+export { i as AlertActions };

package/dist/esm/components/alert/parts/AlertContent.js

@@ -1,10 +1,13 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { Text as n } from "../../text/Text.js";
-const a = m(
-  ({ children: r, ...t }, o) => /* @__PURE__ */ e(n, { variant: "body", ref: o, ...t, children: r })
-);
-a.displayName = "AlertContent";
-export {
-  a as AlertContent
-};
+import { Text as e } from "../../text/Text.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/alert/parts/AlertContent.tsx
+var r = t(({ children: t, ...r }, i) => /* @__PURE__ */ n(e, {
+	variant: "body",
+	ref: i,
+	...r,
+	children: t
+}));
+r.displayName = "AlertContent";
+//#endregion
+export { r as AlertContent };