@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/carousel/parts/CarouselContent.js

@@ -1,69 +1,53 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useState as P, useEffect as C } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { useResponsiveValue as r } from "../../../hooks/use-responsive-value.js";
-import { useCarousel as x } from "../Carousel.context.js";
-const D = w({
-  slots: {
-    root: ["uy:overflow-hidden ", "uy:-mx-(--uy-carousel-track-offset)"],
-    track: [
-      "uy:flex uy:touch-pan-y uy:touch-pinch-zoom",
-      "uy:gap-(--uy-carousel-slide-gap)",
-      "uy:*:first:ms-(--uy-carousel-track-margin-start)",
-      "uy:*:last:me-(--uy-carousel-track-margin-end)",
-      "uy:data-[grab-state=grab]:cursor-grab",
-      "uy:data-[grab-state=grabbing]:cursor-grabbing"
-    ]
-  }
-});
-function N({
-  className: p,
-  children: d,
-  itemsPerPage: f,
-  gap: y,
-  trackPadding: o,
-  trackOffset: m = 0
-}) {
-  const { carouselRef: b, a11yIds: k, api: a } = x(), { root: $, track: v } = D(), [h, s] = P(!1), t = r(f), n = r(y), e = r(m), c = r(o?.start), u = r(o?.end);
-  return C(() => {
-    if (!a) return;
-    const i = () => {
-      s(!0);
-    }, l = () => {
-      s(!1);
-    };
-    return a.on("pointerdown", i), a.on("pointerup", l), () => {
-      a.off("pointerdown", i), a.off("pointerup", l);
-    };
-  }, [a]), /* @__PURE__ */ g(
-    "div",
-    {
-      ref: b,
-      className: $({ className: p }),
-      "data-slot": "carousel-content",
-      "data-items-per-page": typeof t == "number" ? t : void 0,
-      style: {
-        "--uy-carousel-slide-width": `calc((1 / ${t ?? 1}) * 100%)`,
-        "--uy-carousel-track-offset": typeof e == "number" ? `${e}px` : `var(--uy-spacing-${e.replace("$", "")})`,
-        "--uy-carousel-slide-gap": `var(--uy-spacing-${n ? n.replace("$", "") : 0})`,
-        "--uy-carousel-track-margin-start": `var(--uy-spacing-${c ? c.replace("$", "") : 0})`,
-        "--uy-carousel-track-margin-end": `var(--uy-spacing-${u ? u.replace("$", "") : 0})`
-      },
-      children: /* @__PURE__ */ g(
-        "div",
-        {
-          className: v(),
-          "data-slot": "carousel-track",
-          "data-grab-state": h ? "grabbing" : "grab",
-          id: k.track,
-          children: d
-        }
-      )
-    }
-  );
+import { useCarousel as e } from "../Carousel.context.js";
+import { useResponsiveValue as t } from "../../../hooks/use-responsive-value.js";
+import { useEffect as n, useState as r } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/carousel/parts/CarouselContent.tsx
+var o = i({ slots: {
+	root: ["uy:overflow-hidden ", "uy:-mx-(--uy-carousel-track-offset)"],
+	track: [
+		"uy:flex uy:touch-pan-y uy:touch-pinch-zoom",
+		"uy:gap-(--uy-carousel-slide-gap)",
+		"uy:*:first:ms-(--uy-carousel-track-margin-start)",
+		"uy:*:last:me-(--uy-carousel-track-margin-end)",
+		"uy:data-[grab-state=grab]:cursor-grab",
+		"uy:data-[grab-state=grabbing]:cursor-grabbing"
+	]
+} });
+function s({ className: i, children: s, itemsPerPage: c, gap: l, trackPadding: u, trackOffset: d = 0 }) {
+	let { carouselRef: f, a11yIds: p, api: m } = e(), { root: h, track: g } = o(), [_, v] = r(!1), y = t(c), b = t(l), x = t(d), S = t(u?.start), C = t(u?.end);
+	return n(() => {
+		if (!m) return;
+		let e = () => {
+			v(!0);
+		}, t = () => {
+			v(!1);
+		};
+		return m.on("pointerdown", e), m.on("pointerup", t), () => {
+			m.off("pointerdown", e), m.off("pointerup", t);
+		};
+	}, [m]), /* @__PURE__ */ a("div", {
+		ref: f,
+		className: h({ className: i }),
+		"data-slot": "carousel-content",
+		"data-items-per-page": typeof y == "number" ? y : void 0,
+		style: {
+			"--uy-carousel-slide-width": `calc((1 / ${y ?? 1}) * 100%)`,
+			"--uy-carousel-track-offset": typeof x == "number" ? `${x}px` : `var(--uy-spacing-${x.replace("$", "")})`,
+			"--uy-carousel-slide-gap": `var(--uy-spacing-${b ? b.replace("$", "") : 0})`,
+			"--uy-carousel-track-margin-start": `var(--uy-spacing-${S ? S.replace("$", "") : 0})`,
+			"--uy-carousel-track-margin-end": `var(--uy-spacing-${C ? C.replace("$", "") : 0})`
+		},
+		children: /* @__PURE__ */ a("div", {
+			className: g(),
+			"data-slot": "carousel-track",
+			"data-grab-state": _ ? "grabbing" : "grab",
+			id: p.track,
+			children: s
+		})
+	});
 }
-N.displayName = "CarouselContent";
-export {
-  N as CarouselContent,
-  D as carouselContent
-};
+s.displayName = "CarouselContent";
+//#endregion
+export { s as CarouselContent, o as carouselContent };

package/dist/esm/components/carousel/parts/CarouselHeader.js

@@ -1,58 +1,43 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
-import { useIntl as f } from "react-intl";
-import { Text as p } from "../../text/Text.js";
-import { useCarousel as h } from "../Carousel.context.js";
-import { CarouselNav as v } from "./CarouselNav.js";
-const x = y({
-  slots: {
-    root: "uy:flex uy:items-center uy:justify-between",
-    title: "uy:flex-1",
-    slot: "uy:shrink-0",
-    nav: "uy:hidden uy:md:flex"
-  }
-}), N = d(
-  ({ title: t, actionSlot: r, className: s }, a) => {
-    const { a11yIds: o } = h(), l = f(), {
-      root: i,
-      title: n,
-      slot: m,
-      nav: u
-    } = x();
-    return /* @__PURE__ */ c("header", { ref: a, className: i({ class: s }), children: [
-      /* @__PURE__ */ e(
-        p,
-        {
-          id: o.title,
-          "data-dd-privacy": "allow",
-          variant: "h3",
-          color: "content.neutral",
-          className: n(),
-          children: t
-        }
-      ),
-      r && /* @__PURE__ */ e(
-        "div",
-        {
-          role: "group",
-          "aria-label": l.formatMessage(
-            {
-              id: "unity:component:carousel:header:actions:label",
-              defaultMessage: "{title} actions"
-            },
-            { title: t }
-          ),
-          className: m(),
-          children: r
-        }
-      ),
-      /* @__PURE__ */ e(v, { className: u() })
-    ] });
-  }
-);
-N.displayName = "CarouselHeader";
-export {
-  N as CarouselHeader,
-  x as carouselHeader
-};
+import { Text as e } from "../../text/Text.js";
+import { useCarousel as t } from "../Carousel.context.js";
+import { CarouselNav as n } from "./CarouselNav.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";
+import { useIntl as s } from "react-intl";
+//#region src/components/carousel/parts/CarouselHeader.tsx
+var c = i({ slots: {
+	root: "uy:flex uy:items-center uy:justify-between",
+	title: "uy:flex-1",
+	slot: "uy:shrink-0",
+	nav: "uy:hidden uy:md:flex"
+} }), l = r(({ title: r, actionSlot: i, className: l }, u) => {
+	let { a11yIds: d } = t(), f = s(), { root: p, title: m, slot: h, nav: g } = c();
+	return /* @__PURE__ */ o("header", {
+		ref: u,
+		className: p({ class: l }),
+		children: [
+			/* @__PURE__ */ a(e, {
+				id: d.title,
+				"data-dd-privacy": "allow",
+				variant: "h3",
+				color: "content.neutral",
+				className: m(),
+				children: r
+			}),
+			i && /* @__PURE__ */ a("div", {
+				role: "group",
+				"aria-label": f.formatMessage({
+					id: "unity:component:carousel:header:actions:label",
+					defaultMessage: "{title} actions"
+				}, { title: r }),
+				className: h(),
+				children: i
+			}),
+			/* @__PURE__ */ a(n, { className: g() })
+		]
+	});
+});
+l.displayName = "CarouselHeader";
+//#endregion
+export { l as CarouselHeader, c as carouselHeader };

package/dist/esm/components/carousel/parts/CarouselNav.js

@@ -1,80 +1,65 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { uyTv as p } from "@payfit/unity-themes";
-import { useIntl as f } from "react-intl";
-import { IconButton as l } from "../../icon-button/IconButton.js";
-import { Text as b } from "../../text/Text.js";
-import { useCarousel as g } from "../Carousel.context.js";
-const y = p({
-  slots: {
-    root: "uy:flex uy:items-center uy:gap-50",
-    indicator: "uy:tabular-nums uy:select-none"
-  }
-}), x = ({ className: i }) => {
-  const {
-    goToNext: u,
-    goToPrev: c,
-    canGoToPrev: e,
-    canGoToNext: t,
-    selectedSnap: d,
-    snapCount: r,
-    a11yIds: o
-  } = g(), a = f(), { root: m, indicator: v } = y();
-  return r === 1 ? null : /* @__PURE__ */ n(
-    "div",
-    {
-      className: m({ class: i }),
-      role: "toolbar",
-      "aria-label": a.formatMessage({
-        id: "unity:component:carousel:nav:toolbar-label",
-        defaultMessage: "Carousel navigation"
-      }),
-      "data-unity-slot": "carousel-nav",
-      children: [
-        /* @__PURE__ */ s(
-          l,
-          {
-            variant: "ghost",
-            color: "neutral",
-            icon: "CaretLeftOutlined",
-            label: a.formatMessage({
-              id: "unity:component:carousel:nav:previous:label",
-              defaultMessage: "Go to previous slide"
-            }),
-            onClick: c,
-            isDisabled: !e(),
-            "aria-disabled": !e(),
-            "aria-controls": o.track,
-            id: o.previousButton
-          }
-        ),
-        /* @__PURE__ */ n(b, { variant: "body", color: "content.neutral", className: v(), children: [
-          d + 1,
-          "/",
-          r
-        ] }),
-        /* @__PURE__ */ s(
-          l,
-          {
-            variant: "ghost",
-            color: "neutral",
-            icon: "CaretRightOutlined",
-            label: a.formatMessage({
-              id: "unity:component:carousel:nav:next:label",
-              defaultMessage: "Go to next slide"
-            }),
-            onClick: u,
-            isDisabled: !t(),
-            "aria-disabled": !t(),
-            "aria-controls": o.track,
-            id: o.nextButton
-          }
-        )
-      ]
-    }
-  );
-};
-x.displayName = "CarouselNav";
-export {
-  x as CarouselNav,
-  y as carouselNav
+import { IconButton as e } from "../../icon-button/IconButton.js";
+import { Text as t } from "../../text/Text.js";
+import { useCarousel as n } from "../Carousel.context.js";
+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";
+//#region src/components/carousel/parts/CarouselNav.tsx
+var s = r({ slots: {
+	root: "uy:flex uy:items-center uy:gap-50",
+	indicator: "uy:tabular-nums uy:select-none"
+} }), c = ({ className: r }) => {
+	let { goToNext: c, goToPrev: l, canGoToPrev: u, canGoToNext: d, selectedSnap: f, snapCount: p, a11yIds: m } = n(), h = o(), { root: g, indicator: _ } = s();
+	return p === 1 ? null : /* @__PURE__ */ a("div", {
+		className: g({ class: r }),
+		role: "toolbar",
+		"aria-label": h.formatMessage({
+			id: "unity:component:carousel:nav:toolbar-label",
+			defaultMessage: "Carousel navigation"
+		}),
+		"data-unity-slot": "carousel-nav",
+		children: [
+			/* @__PURE__ */ i(e, {
+				variant: "ghost",
+				color: "neutral",
+				icon: "CaretLeftOutlined",
+				label: h.formatMessage({
+					id: "unity:component:carousel:nav:previous:label",
+					defaultMessage: "Go to previous slide"
+				}),
+				onClick: l,
+				isDisabled: !u(),
+				"aria-disabled": !u(),
+				"aria-controls": m.track,
+				id: m.previousButton
+			}),
+			/* @__PURE__ */ a(t, {
+				variant: "body",
+				color: "content.neutral",
+				className: _(),
+				children: [
+					f + 1,
+					"/",
+					p
+				]
+			}),
+			/* @__PURE__ */ i(e, {
+				variant: "ghost",
+				color: "neutral",
+				icon: "CaretRightOutlined",
+				label: h.formatMessage({
+					id: "unity:component:carousel:nav:next:label",
+					defaultMessage: "Go to next slide"
+				}),
+				onClick: c,
+				isDisabled: !d(),
+				"aria-disabled": !d(),
+				"aria-controls": m.track,
+				id: m.nextButton
+			})
+		]
+	});
 };
+c.displayName = "CarouselNav";
+//#endregion
+export { c as CarouselNav, s as carouselNav };

package/dist/esm/components/carousel/parts/CarouselSlide.js

@@ -1,35 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import { uyTv as l } from "@payfit/unity-themes";
-import { useIntl as u } from "react-intl";
-const t = l({
-  // add the component styles
-  base: [
-    "uy:group uy:min-w-0 uy:shrink-0 uy:grow-0",
-    "uy:basis-[calc(var(--uy-carousel-slide-width)-var(--uy-carousel-slide-gap))]",
-    "uy:focus-visible:outline-0"
-  ]
-}), d = a(
-  ({ className: e, ...o }, r) => {
-    const s = u();
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        ...o,
-        ref: r,
-        role: "group",
-        "aria-roledescription": s.formatMessage({
-          id: "unity:component:carousel:slide:roledescription",
-          defaultMessage: "slide"
-        }),
-        "data-unity-slot": "carousel-item",
-        className: t({ className: e })
-      }
-    );
-  }
-);
-d.displayName = "CarouselSlide";
-export {
-  d as CarouselSlide,
-  t as carouselSlide
-};
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+import { useIntl as r } from "react-intl";
+//#region src/components/carousel/parts/CarouselSlide.tsx
+var i = t({ base: [
+	"uy:group uy:min-w-0 uy:shrink-0 uy:grow-0",
+	"uy:basis-[calc(var(--uy-carousel-slide-width)-var(--uy-carousel-slide-gap))]",
+	"uy:focus-visible:outline-0"
+] }), a = e(({ className: e, ...t }, a) => {
+	let o = r();
+	return /* @__PURE__ */ n("div", {
+		...t,
+		ref: a,
+		role: "group",
+		"aria-roledescription": o.formatMessage({
+			id: "unity:component:carousel:slide:roledescription",
+			defaultMessage: "slide"
+		}),
+		"data-unity-slot": "carousel-item",
+		className: i({ className: e })
+	});
+});
+a.displayName = "CarouselSlide";
+//#endregion
+export { a as CarouselSlide, i as carouselSlide };

package/dist/esm/components/checkbox/Checkbox.js

@@ -1,105 +1,83 @@
-import { jsxs as r, jsx as a, Fragment as B } from "react/jsx-runtime";
-import { forwardRef as R, isValidElement as h, cloneElement as f } from "react";
-import { CheckboxField as D, CheckboxButton as E } from "react-aria-components/Checkbox";
-import { useId as F } from "react-aria/useId";
-import { Text as N } from "../text/Text.js";
-import { checkbox as V } from "./Checkbox.variants.js";
-import { CheckboxIndicator as L } from "./parts/CheckboxIndicator.js";
-const O = R(
-  ({ children: u, helperText: i, feedbackText: l, ...o }, v) => {
-    const e = F(), {
-      isDisabled: s,
-      isReadOnly: n,
-      isInvalid: t,
-      isRequired: d,
-      requiredVariant: c = "required",
-      ...x
-    } = o, {
-      base: g,
-      wrapper: $,
-      label: k,
-      asterisk: C,
-      optionalTag: q,
-      descriptionsContainer: w,
-      helperText: m,
-      feedbackText: b
-    } = V({
-      isDisabled: s,
-      isReadOnly: n,
-      isInvalid: t
-    }), y = [o["aria-labelledby"], `${e}-label`].filter(Boolean), p = [
-      o["aria-describedby"],
-      typeof i == "string" ? `${e}-helper-text` : void 0,
-      typeof l == "string" ? `${e}-feedback-text` : void 0
-    ].filter(Boolean), I = y.length > 0 ? y.join(" ") : void 0, S = p.length > 0 ? p.join(" ") : void 0;
-    return /* @__PURE__ */ r("div", { className: g(), children: [
-      /* @__PURE__ */ a(
-        D,
-        {
-          ...x,
-          isInvalid: t,
-          className: "uy:contents",
-          "aria-labelledby": I,
-          "aria-describedby": S,
-          isDisabled: s,
-          isReadOnly: n,
-          children: /* @__PURE__ */ a(E, { ref: v, className: $(), children: (j) => /* @__PURE__ */ r(B, { children: [
-            /* @__PURE__ */ a(
-              L,
-              {
-                ...j,
-                className: "uy:mt-25 uy:ml-0"
-              }
-            ),
-            /* @__PURE__ */ a(
-              "span",
-              {
-                id: `${e}-label`,
-                className: k(),
-                "data-dd-privacy": "allow",
-                children: u
-              }
-            ),
-            c === "required" && d && /* @__PURE__ */ r("span", { className: C(), children: [
-              "*",
-              /* @__PURE__ */ a("span", { className: "uy:sr-only", children: "required" })
-            ] }),
-            c === "optional" && !d && /* @__PURE__ */ a("span", { className: q(), children: "(optional)" })
-          ] }) })
-        }
-      ),
-      (i || l) && /* @__PURE__ */ r("div", { className: w(), "data-dd-privacy": "allow", children: [
-        typeof i == "string" ? /* @__PURE__ */ a(
-          N,
-          {
-            variant: "bodySmall",
-            color: "content.neutral.low",
-            id: `${e}-helper-text`,
-            className: m(),
-            children: i
-          }
-        ) : h(i) && f(i, {
-          "data-id": `${e}-helper-text`,
-          className: m()
-        }),
-        t && (typeof l == "string" ? /* @__PURE__ */ a(
-          N,
-          {
-            variant: "bodySmallStrong",
-            color: "content.form.invalid",
-            id: `${e}-feedback-text`,
-            className: b(),
-            children: l
-          }
-        ) : h(l) && f(l, {
-          "data-id": `${e}-feedback-text`,
-          className: b()
-        }))
-      ] })
-    ] });
-  }
-);
-O.displayName = "Checkbox";
-export {
-  O as Checkbox
-};
+import { Text as e } from "../text/Text.js";
+import { checkbox as t } from "./Checkbox.variants.js";
+import { CheckboxIndicator as n } from "./parts/CheckboxIndicator.js";
+import { cloneElement as r, forwardRef as i, isValidElement as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useId as l } from "react-aria/useId";
+import { CheckboxButton as u, CheckboxField as d } from "react-aria-components/Checkbox";
+//#region src/components/checkbox/Checkbox.tsx
+var f = i(({ children: i, helperText: f, feedbackText: p, ...m }, h) => {
+	let g = l(), { isDisabled: _, isReadOnly: v, isInvalid: y, isRequired: b, requiredVariant: x = "required", ...S } = m, { base: C, wrapper: w, label: T, asterisk: E, optionalTag: D, descriptionsContainer: O, helperText: k, feedbackText: A } = t({
+		isDisabled: _,
+		isReadOnly: v,
+		isInvalid: y
+	}), j = [m["aria-labelledby"], `${g}-label`].filter(Boolean), M = [
+		m["aria-describedby"],
+		typeof f == "string" ? `${g}-helper-text` : void 0,
+		typeof p == "string" ? `${g}-feedback-text` : void 0
+	].filter(Boolean), N = j.length > 0 ? j.join(" ") : void 0, P = M.length > 0 ? M.join(" ") : void 0;
+	return /* @__PURE__ */ c("div", {
+		className: C(),
+		children: [/* @__PURE__ */ s(d, {
+			...S,
+			isInvalid: y,
+			className: "uy:contents",
+			"aria-labelledby": N,
+			"aria-describedby": P,
+			isDisabled: _,
+			isReadOnly: v,
+			children: /* @__PURE__ */ s(u, {
+				ref: h,
+				className: w(),
+				children: (e) => /* @__PURE__ */ c(o, { children: [
+					/* @__PURE__ */ s(n, {
+						...e,
+						className: "uy:mt-25 uy:ml-0"
+					}),
+					/* @__PURE__ */ s("span", {
+						id: `${g}-label`,
+						className: T(),
+						"data-dd-privacy": "allow",
+						children: i
+					}),
+					x === "required" && b && /* @__PURE__ */ c("span", {
+						className: E(),
+						children: ["*", /* @__PURE__ */ s("span", {
+							className: "uy:sr-only",
+							children: "required"
+						})]
+					}),
+					x === "optional" && !b && /* @__PURE__ */ s("span", {
+						className: D(),
+						children: "(optional)"
+					})
+				] })
+			})
+		}), (f || p) && /* @__PURE__ */ c("div", {
+			className: O(),
+			"data-dd-privacy": "allow",
+			children: [typeof f == "string" ? /* @__PURE__ */ s(e, {
+				variant: "bodySmall",
+				color: "content.neutral.low",
+				id: `${g}-helper-text`,
+				className: k(),
+				children: f
+			}) : a(f) && r(f, {
+				"data-id": `${g}-helper-text`,
+				className: k()
+			}), y && (typeof p == "string" ? /* @__PURE__ */ s(e, {
+				variant: "bodySmallStrong",
+				color: "content.form.invalid",
+				id: `${g}-feedback-text`,
+				className: A(),
+				children: p
+			}) : a(p) && r(p, {
+				"data-id": `${g}-feedback-text`,
+				className: A()
+			}))]
+		})]
+	});
+});
+f.displayName = "Checkbox";
+//#endregion
+export { f as Checkbox };