@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/navigation-card/NavigationCard.js

@@ -1,63 +1,53 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { forwardRef as C, useMemo as P } from "react";
-import { Button as $ } from "react-aria-components/Button";
-import { Link as w } from "react-aria-components/Link";
-import { useId as I } from "react-aria/useId";
-import { processPaddingProp as R } from "../../utils/spacing.js";
-import { NavigationCardContext as j } from "./NavigationCard.context.js";
-import { navigationCard as L } from "./NavigationCard.variants.js";
-const k = C(
-  ({
-    children: m,
-    asElement: f = "a",
-    prefix: t,
-    suffix: o,
-    padding: d = "$300",
-    paddingBlock: n,
-    paddingInline: s,
-    gap: c = "$150",
-    ...i
-  }, b) => {
-    const e = I(), l = f === "a" || "href" in i, v = i, a = {
-      id: `unity-navigation-card-${e}`,
-      labelId: i["aria-labelledby"] ?? `unity-navigation-card-label-${e}`,
-      descriptionId: i["aria-describedby"] ?? `unity-navigation-card-description-${e}`
-    }, {
-      base: y,
-      prefix: u,
-      body: p,
-      suffix: x
-    } = P(() => {
-      const g = R(
-        d,
-        n,
-        s
-      );
-      return L({
-        ...g,
-        gap: c
-      });
-    }, [d, n, s, c]), N = l ? w : $;
-    return /* @__PURE__ */ r(j.Provider, { value: a, children: /* @__PURE__ */ h(
-      N,
-      {
-        "data-dd-privacy": "allow",
-        id: a.id,
-        "aria-labelledby": a.labelId,
-        "aria-describedby": a.descriptionId,
-        ...v,
-        ref: b,
-        className: y(),
-        children: [
-          t && /* @__PURE__ */ r("div", { className: u(), children: t }),
-          /* @__PURE__ */ r("div", { className: p(), children: m }),
-          o && /* @__PURE__ */ r("div", { className: x(), children: o })
-        ]
-      }
-    ) });
-  }
-);
-k.displayName = "RawNavigationCard";
-export {
-  k as RawNavigationCard
-};
+import { processPaddingProp as e } from "../../utils/spacing.js";
+import { NavigationCardContext as t } from "./NavigationCard.context.js";
+import { navigationCard as n } from "./NavigationCard.variants.js";
+import { forwardRef as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Button as s } from "react-aria-components/Button";
+import { Link as c } from "react-aria-components/Link";
+import { useId as l } from "react-aria/useId";
+//#region src/components/navigation-card/NavigationCard.tsx
+var u = r(({ children: r, asElement: u = "a", prefix: d, suffix: f, padding: p = "$300", paddingBlock: m, paddingInline: h, gap: g = "$150", ..._ }, v) => {
+	let y = l(), b = u === "a" || "href" in _, x = _, S = {
+		id: `unity-navigation-card-${y}`,
+		labelId: _["aria-labelledby"] ?? `unity-navigation-card-label-${y}`,
+		descriptionId: _["aria-describedby"] ?? `unity-navigation-card-description-${y}`
+	}, { base: C, prefix: w, body: T, suffix: E } = i(() => n({
+		...e(p, m, h),
+		gap: g
+	}), [
+		p,
+		m,
+		h,
+		g
+	]), D = b ? c : s;
+	return /* @__PURE__ */ a(t.Provider, {
+		value: S,
+		children: /* @__PURE__ */ o(D, {
+			"data-dd-privacy": "allow",
+			id: S.id,
+			"aria-labelledby": S.labelId,
+			"aria-describedby": S.descriptionId,
+			...x,
+			ref: v,
+			className: C(),
+			children: [
+				d && /* @__PURE__ */ a("div", {
+					className: w(),
+					children: d
+				}),
+				/* @__PURE__ */ a("div", {
+					className: T(),
+					children: r
+				}),
+				f && /* @__PURE__ */ a("div", {
+					className: E(),
+					children: f
+				})
+			]
+		})
+	});
+});
+u.displayName = "RawNavigationCard";
+//#endregion
+export { u as RawNavigationCard };

package/dist/esm/components/navigation-card/NavigationCard.variants.js

@@ -1,164 +1,164 @@
 import { uyTv as e } from "@payfit/unity-themes";
-const u = e({
-  slots: {
-    base: [
-      "uy:flex uy:flex-row uy:items-center uy:text-left",
-      "uy:rounded-lg uy:border-solid uy:border-1 uy:transition-colors uy:group",
-      "uy:cursor-pointer uy:data-[disabled]:cursor-not-allowed",
-      "uy:bg-surface-neutral uy:border-border-neutral",
-      "uy:theme-legacy:text-content-neutral-low uy:theme-rebrand:text-content-neutral",
-      "uy:data-[hovered]:bg-surface-neutral-hover uy:data-[hovered]:border-border-neutral-hover",
-      "uy:data-[pressed]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed]:border-border-neutral-pressed uy:theme-rebrand:data-[pressed]:border-transparent",
-      "uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-offset-2",
-      "uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled"
-    ],
-    prefix: ["uy:w-fit uy:contents uy:grow-0 uy:shrink-1"],
-    body: ["uy:flex-1 uy:space-y-50"],
-    suffix: ["uy:w-fit uy:grow-0 uy:shrink-1"]
-  },
-  variants: {
-    gap: {
-      $0: { base: "uy:gap-0" },
-      $25: { base: "uy:gap-25" },
-      $50: { base: "uy:gap-50" },
-      $75: { base: "uy:gap-75" },
-      $100: { base: "uy:gap-100" },
-      $125: { base: "uy:gap-125" },
-      $150: { base: "uy:gap-150" },
-      $200: { base: "uy:gap-200" },
-      $250: { base: "uy:gap-250" },
-      $300: { base: "uy:gap-300" },
-      $400: { base: "uy:gap-400" },
-      $500: { base: "uy:gap-500" },
-      $600: { base: "uy:gap-600" },
-      $800: { base: "uy:gap-800" },
-      $1000: { base: "uy:gap-1000" }
-    },
-    padding: {
-      $0: { base: "uy:p-0" },
-      $25: { base: "uy:p-25" },
-      $50: { base: "uy:p-50" },
-      $75: { base: "uy:p-75" },
-      $100: { base: "uy:p-100" },
-      $125: { base: "uy:p-125" },
-      $150: { base: "uy:p-150" },
-      $200: { base: "uy:p-200" },
-      $250: { base: "uy:p-250" },
-      $300: { base: "uy:p-300" },
-      $400: { base: "uy:p-400" },
-      $500: { base: "uy:p-500" },
-      $600: { base: "uy:p-600" },
-      $800: { base: "uy:p-800" },
-      $1000: { base: "uy:p-1000" }
-    },
-    paddingBlock: {
-      $0: { base: "uy:py-0" },
-      $25: { base: "uy:py-25" },
-      $50: { base: "uy:py-50" },
-      $75: { base: "uy:py-75" },
-      $100: { base: "uy:py-100" },
-      $125: { base: "uy:py-125" },
-      $150: { base: "uy:py-150" },
-      $200: { base: "uy:py-200" },
-      $250: { base: "uy:py-250" },
-      $300: { base: "uy:py-300" },
-      $400: { base: "uy:py-400" },
-      $500: { base: "uy:py-500" },
-      $600: { base: "uy:py-600" },
-      $800: { base: "uy:py-800" },
-      $1000: { base: "uy:py-1000" }
-    },
-    paddingInline: {
-      $0: { base: "uy:px-0" },
-      $25: { base: "uy:px-25" },
-      $50: { base: "uy:px-50" },
-      $75: { base: "uy:px-75" },
-      $100: { base: "uy:px-100" },
-      $125: { base: "uy:px-125" },
-      $150: { base: "uy:px-150" },
-      $200: { base: "uy:px-200" },
-      $250: { base: "uy:px-250" },
-      $300: { base: "uy:px-300" },
-      $400: { base: "uy:px-400" },
-      $500: { base: "uy:px-500" },
-      $600: { base: "uy:px-600" },
-      $800: { base: "uy:px-800" },
-      $1000: { base: "uy:px-1000" }
-    },
-    paddingTop: {
-      $0: { base: "uy:pt-0" },
-      $25: { base: "uy:pt-25" },
-      $50: { base: "uy:pt-50" },
-      $75: { base: "uy:pt-75" },
-      $100: { base: "uy:pt-100" },
-      $125: { base: "uy:pt-125" },
-      $150: { base: "uy:pt-150" },
-      $200: { base: "uy:pt-200" },
-      $250: { base: "uy:pt-250" },
-      $300: { base: "uy:pt-300" },
-      $400: { base: "uy:pt-400" },
-      $500: { base: "uy:pt-500" },
-      $600: { base: "uy:pt-600" },
-      $800: { base: "uy:pt-800" },
-      $1000: { base: "uy:pt-1000" }
-    },
-    paddingRight: {
-      $0: { base: "uy:pr-0" },
-      $25: { base: "uy:pr-25" },
-      $50: { base: "uy:pr-50" },
-      $75: { base: "uy:pr-75" },
-      $100: { base: "uy:pr-100" },
-      $125: { base: "uy:pr-125" },
-      $150: { base: "uy:pr-150" },
-      $200: { base: "uy:pr-200" },
-      $250: { base: "uy:pr-250" },
-      $300: { base: "uy:pr-300" },
-      $400: { base: "uy:pr-400" },
-      $500: { base: "uy:pr-500" },
-      $600: { base: "uy:pr-600" },
-      $800: { base: "uy:pr-800" },
-      $1000: { base: "uy:pr-1000" }
-    },
-    paddingBottom: {
-      $0: { base: "uy:pb-0" },
-      $25: { base: "uy:pb-25" },
-      $50: { base: "uy:pb-50" },
-      $75: { base: "uy:pb-75" },
-      $100: { base: "uy:pb-100" },
-      $125: { base: "uy:pb-125" },
-      $150: { base: "uy:pb-150" },
-      $200: { base: "uy:pb-200" },
-      $250: { base: "uy:pb-250" },
-      $300: { base: "uy:pb-300" },
-      $400: { base: "uy:pb-400" },
-      $500: { base: "uy:pb-500" },
-      $600: { base: "uy:pb-600" },
-      $800: { base: "uy:pb-800" },
-      $1000: { base: "uy:pb-1000" }
-    },
-    paddingLeft: {
-      $0: { base: "uy:pl-0" },
-      $25: { base: "uy:pl-25" },
-      $50: { base: "uy:pl-50" },
-      $75: { base: "uy:pl-75" },
-      $100: { base: "uy:pl-100" },
-      $125: { base: "uy:pl-125" },
-      $150: { base: "uy:pl-150" },
-      $200: { base: "uy:pl-200" },
-      $250: { base: "uy:pl-250" },
-      $300: { base: "uy:pl-300" },
-      $400: { base: "uy:pl-400" },
-      $500: { base: "uy:pl-500" },
-      $600: { base: "uy:pl-600" },
-      $800: { base: "uy:pl-800" },
-      $1000: { base: "uy:pl-1000" }
-    }
-  },
-  defaultVariants: {
-    padding: "$300",
-    gap: "$150"
-  }
+//#region src/components/navigation-card/NavigationCard.variants.ts
+var t = e({
+	slots: {
+		base: [
+			"uy:flex uy:flex-row uy:items-center uy:text-left",
+			"uy:rounded-lg uy:border-solid uy:border-1 uy:transition-colors uy:group",
+			"uy:cursor-pointer uy:data-[disabled]:cursor-not-allowed",
+			"uy:bg-surface-neutral uy:border-border-neutral",
+			"uy:theme-legacy:text-content-neutral-low uy:theme-rebrand:text-content-neutral",
+			"uy:data-[hovered]:bg-surface-neutral-hover uy:data-[hovered]:border-border-neutral-hover",
+			"uy:data-[pressed]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed]:border-border-neutral-pressed uy:theme-rebrand:data-[pressed]:border-transparent",
+			"uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-offset-2",
+			"uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled"
+		],
+		prefix: ["uy:w-fit uy:contents uy:grow-0 uy:shrink-1"],
+		body: ["uy:flex-1 uy:space-y-50"],
+		suffix: ["uy:w-fit uy:grow-0 uy:shrink-1"]
+	},
+	variants: {
+		gap: {
+			$0: { base: "uy:gap-0" },
+			$25: { base: "uy:gap-25" },
+			$50: { base: "uy:gap-50" },
+			$75: { base: "uy:gap-75" },
+			$100: { base: "uy:gap-100" },
+			$125: { base: "uy:gap-125" },
+			$150: { base: "uy:gap-150" },
+			$200: { base: "uy:gap-200" },
+			$250: { base: "uy:gap-250" },
+			$300: { base: "uy:gap-300" },
+			$400: { base: "uy:gap-400" },
+			$500: { base: "uy:gap-500" },
+			$600: { base: "uy:gap-600" },
+			$800: { base: "uy:gap-800" },
+			$1000: { base: "uy:gap-1000" }
+		},
+		padding: {
+			$0: { base: "uy:p-0" },
+			$25: { base: "uy:p-25" },
+			$50: { base: "uy:p-50" },
+			$75: { base: "uy:p-75" },
+			$100: { base: "uy:p-100" },
+			$125: { base: "uy:p-125" },
+			$150: { base: "uy:p-150" },
+			$200: { base: "uy:p-200" },
+			$250: { base: "uy:p-250" },
+			$300: { base: "uy:p-300" },
+			$400: { base: "uy:p-400" },
+			$500: { base: "uy:p-500" },
+			$600: { base: "uy:p-600" },
+			$800: { base: "uy:p-800" },
+			$1000: { base: "uy:p-1000" }
+		},
+		paddingBlock: {
+			$0: { base: "uy:py-0" },
+			$25: { base: "uy:py-25" },
+			$50: { base: "uy:py-50" },
+			$75: { base: "uy:py-75" },
+			$100: { base: "uy:py-100" },
+			$125: { base: "uy:py-125" },
+			$150: { base: "uy:py-150" },
+			$200: { base: "uy:py-200" },
+			$250: { base: "uy:py-250" },
+			$300: { base: "uy:py-300" },
+			$400: { base: "uy:py-400" },
+			$500: { base: "uy:py-500" },
+			$600: { base: "uy:py-600" },
+			$800: { base: "uy:py-800" },
+			$1000: { base: "uy:py-1000" }
+		},
+		paddingInline: {
+			$0: { base: "uy:px-0" },
+			$25: { base: "uy:px-25" },
+			$50: { base: "uy:px-50" },
+			$75: { base: "uy:px-75" },
+			$100: { base: "uy:px-100" },
+			$125: { base: "uy:px-125" },
+			$150: { base: "uy:px-150" },
+			$200: { base: "uy:px-200" },
+			$250: { base: "uy:px-250" },
+			$300: { base: "uy:px-300" },
+			$400: { base: "uy:px-400" },
+			$500: { base: "uy:px-500" },
+			$600: { base: "uy:px-600" },
+			$800: { base: "uy:px-800" },
+			$1000: { base: "uy:px-1000" }
+		},
+		paddingTop: {
+			$0: { base: "uy:pt-0" },
+			$25: { base: "uy:pt-25" },
+			$50: { base: "uy:pt-50" },
+			$75: { base: "uy:pt-75" },
+			$100: { base: "uy:pt-100" },
+			$125: { base: "uy:pt-125" },
+			$150: { base: "uy:pt-150" },
+			$200: { base: "uy:pt-200" },
+			$250: { base: "uy:pt-250" },
+			$300: { base: "uy:pt-300" },
+			$400: { base: "uy:pt-400" },
+			$500: { base: "uy:pt-500" },
+			$600: { base: "uy:pt-600" },
+			$800: { base: "uy:pt-800" },
+			$1000: { base: "uy:pt-1000" }
+		},
+		paddingRight: {
+			$0: { base: "uy:pr-0" },
+			$25: { base: "uy:pr-25" },
+			$50: { base: "uy:pr-50" },
+			$75: { base: "uy:pr-75" },
+			$100: { base: "uy:pr-100" },
+			$125: { base: "uy:pr-125" },
+			$150: { base: "uy:pr-150" },
+			$200: { base: "uy:pr-200" },
+			$250: { base: "uy:pr-250" },
+			$300: { base: "uy:pr-300" },
+			$400: { base: "uy:pr-400" },
+			$500: { base: "uy:pr-500" },
+			$600: { base: "uy:pr-600" },
+			$800: { base: "uy:pr-800" },
+			$1000: { base: "uy:pr-1000" }
+		},
+		paddingBottom: {
+			$0: { base: "uy:pb-0" },
+			$25: { base: "uy:pb-25" },
+			$50: { base: "uy:pb-50" },
+			$75: { base: "uy:pb-75" },
+			$100: { base: "uy:pb-100" },
+			$125: { base: "uy:pb-125" },
+			$150: { base: "uy:pb-150" },
+			$200: { base: "uy:pb-200" },
+			$250: { base: "uy:pb-250" },
+			$300: { base: "uy:pb-300" },
+			$400: { base: "uy:pb-400" },
+			$500: { base: "uy:pb-500" },
+			$600: { base: "uy:pb-600" },
+			$800: { base: "uy:pb-800" },
+			$1000: { base: "uy:pb-1000" }
+		},
+		paddingLeft: {
+			$0: { base: "uy:pl-0" },
+			$25: { base: "uy:pl-25" },
+			$50: { base: "uy:pl-50" },
+			$75: { base: "uy:pl-75" },
+			$100: { base: "uy:pl-100" },
+			$125: { base: "uy:pl-125" },
+			$150: { base: "uy:pl-150" },
+			$200: { base: "uy:pl-200" },
+			$250: { base: "uy:pl-250" },
+			$300: { base: "uy:pl-300" },
+			$400: { base: "uy:pl-400" },
+			$500: { base: "uy:pl-500" },
+			$600: { base: "uy:pl-600" },
+			$800: { base: "uy:pl-800" },
+			$1000: { base: "uy:pl-1000" }
+		}
+	},
+	defaultVariants: {
+		padding: "$300",
+		gap: "$150"
+	}
 });
-export {
-  u as navigationCard
-};
+//#endregion
+export { t as navigationCard };

package/dist/esm/components/navigation-card/parts/NavigationCardDescription.js

@@ -1,22 +1,19 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
 import { Text as e } from "../../text/Text.js";
-import { useNavigationCardContext as n } from "../NavigationCard.context.js";
-const d = i((o, t) => {
-  const { descriptionId: r } = n();
-  return /* @__PURE__ */ a(
-    e,
-    {
-      id: r,
-      ...o,
-      ref: t,
-      variant: "body",
-      color: "content.neutral.low",
-      className: "uy:max-sm:typography-body-small uy:group-aria-disabled:text-content-neutral-disabled"
-    }
-  );
+import { useNavigationCardContext as t } from "../NavigationCard.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/navigation-card/parts/NavigationCardDescription.tsx
+var i = n((n, i) => {
+	let { descriptionId: a } = t();
+	return /* @__PURE__ */ r(e, {
+		id: a,
+		...n,
+		ref: i,
+		variant: "body",
+		color: "content.neutral.low",
+		className: "uy:max-sm:typography-body-small uy:group-aria-disabled:text-content-neutral-disabled"
+	});
 });
-d.displayName = "NavigationCardDescription";
-export {
-  d as NavigationCardDescription
-};
+i.displayName = "NavigationCardDescription";
+//#endregion
+export { i as NavigationCardDescription };