@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js

@@ -1,38 +1,30 @@
-import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { TanstackFormFeedbackText as n } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as s } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as f } from "../form-field/TanstackFormField.js";
-import { TanstackSelectableCardRadioGroup as k } from "../selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js";
-function u({
-  children: o,
-  isRequired: t,
-  requiredVariant: l,
-  label: i,
-  helperText: r,
-  ...c
-}, m) {
-  return /* @__PURE__ */ e(f, { children: [
-    /* @__PURE__ */ e("div", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-      /* @__PURE__ */ a(
-        s,
-        {
-          requiredVariant: l,
-          isRequired: t,
-          children: i
-        }
-      ),
-      r && /* @__PURE__ */ a(p, { children: r })
-    ] }),
-    /* @__PURE__ */ a(k, { ref: m, ...c, children: o }),
-    /* @__PURE__ */ a(n, {})
-  ] });
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackSelectableCardRadioGroup as i } from "../selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.tsx
+function c({ children: a, isRequired: c, requiredVariant: l, label: u, helperText: d, ...f }, p) {
+	return /* @__PURE__ */ s(t, { children: [
+		/* @__PURE__ */ s("div", {
+			className: "uy:flex uy:flex-col uy:gap-50",
+			children: [/* @__PURE__ */ o(r, {
+				requiredVariant: l,
+				isRequired: c,
+				children: u
+			}), d && /* @__PURE__ */ o(n, { children: d })]
+		}),
+		/* @__PURE__ */ o(i, {
+			ref: p,
+			...f,
+			children: a
+		}),
+		/* @__PURE__ */ o(e, {})
+	] });
 }
-const F = d(
-  u
-);
-F.displayName = "TanstackSelectableCardRadioGroupField";
-export {
-  F as TanstackSelectableCardRadioGroupField
-};
+var l = a(c);
+l.displayName = "TanstackSelectableCardRadioGroupField";
+//#endregion
+export { l as TanstackSelectableCardRadioGroupField };

package/dist/esm/components/side-panel/SidePanel.js

@@ -1,71 +1,53 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as c, useEffect as g } from "react";
-import { uyTv as x } from "@payfit/unity-themes";
-import { Dialog as h } from "react-aria-components/Dialog";
-import { ModalOverlay as p, Modal as v } from "react-aria-components/Modal";
-import { SidePanelDragIndicator as w } from "./parts/SidePanelDragIndicator.js";
-const N = x({
-  slots: {
-    overlay: [
-      "uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
-      "uy:fixed uy:inset-0 uy:isolate uy:z-30",
-      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
-    ],
-    wrapper: [
-      "uy:w-full uy:md:w-[400px]",
-      "uy:fixed uy:bottom-0 uy:md:inset-y-200 uy:md:right-200",
-      "uy:bg-surface-neutral uy:rounded-t-200 uy:md:rounded-200 uy:shadow-flying",
-      "uy:flex uy:flex-col uy:h-[95svh] uy:md:max-h-[calc(100vh-2rem)]",
-      "uy:overflow-hidden",
-      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out uy:md:data-[entering]:animate-slide-right-fade-in uy:md:data-[exiting]:animate-slide-right-fade-out"
-    ],
-    content: [
-      "uy:flex uy:flex-col uy:h-full uy:overflow-hidden uy:outline-none"
-    ]
-  }
-}), P = c(
-  ({
-    children: o,
-    isOpen: e,
-    onOpenChange: u,
-    defaultOpen: a,
-    isDismissable: i = !0,
-    isKeyboardDismissDisabled: r = !1,
-    disableScrollLocking: d = !1,
-    ...y
-  }, l) => {
-    const { overlay: n, wrapper: m, content: f } = N();
-    return g(() => {
-      d && (e ?? a) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
-    }, [d, e, a]), /* @__PURE__ */ t(
-      p,
-      {
-        className: n(),
-        isOpen: e,
-        onOpenChange: u,
-        defaultOpen: a,
-        isDismissable: i,
-        isKeyboardDismissDisabled: r,
-        children: /* @__PURE__ */ s(
-          v,
-          {
-            "data-dd-privacy": "allow",
-            ...y,
-            ref: l,
-            className: m(),
-            "data-unity-side-panel": !0,
-            children: [
-              /* @__PURE__ */ t(w, {}),
-              /* @__PURE__ */ t(h, { className: f(), children: o })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-P.displayName = "SidePanel";
-export {
-  P as SidePanel,
-  N as sidePanel
-};
+import { SidePanelDragIndicator as e } from "./parts/SidePanelDragIndicator.js";
+import { forwardRef as t, useEffect as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Dialog as o } from "react-aria-components/Dialog";
+import { Modal as s, ModalOverlay as c } from "react-aria-components/Modal";
+//#region src/components/side-panel/SidePanel.tsx
+var l = r({ slots: {
+	overlay: [
+		"uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
+		"uy:fixed uy:inset-0 uy:isolate uy:z-30",
+		"uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
+	],
+	wrapper: [
+		"uy:w-full uy:md:w-[400px]",
+		"uy:fixed uy:bottom-0 uy:md:inset-y-200 uy:md:right-200",
+		"uy:bg-surface-neutral uy:rounded-t-200 uy:md:rounded-200 uy:shadow-flying",
+		"uy:flex uy:flex-col uy:h-[95svh] uy:md:max-h-[calc(100vh-2rem)]",
+		"uy:overflow-hidden",
+		"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out uy:md:data-[entering]:animate-slide-right-fade-in uy:md:data-[exiting]:animate-slide-right-fade-out"
+	],
+	content: ["uy:flex uy:flex-col uy:h-full uy:overflow-hidden uy:outline-none"]
+} }), u = t(({ children: t, isOpen: r, onOpenChange: u, defaultOpen: d, isDismissable: f = !0, isKeyboardDismissDisabled: p = !1, disableScrollLocking: m = !1, ...h }, g) => {
+	let { overlay: _, wrapper: v, content: y } = l();
+	return n(() => {
+		m && (r ?? d) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
+	}, [
+		m,
+		r,
+		d
+	]), /* @__PURE__ */ i(c, {
+		className: _(),
+		isOpen: r,
+		onOpenChange: u,
+		defaultOpen: d,
+		isDismissable: f,
+		isKeyboardDismissDisabled: p,
+		children: /* @__PURE__ */ a(s, {
+			"data-dd-privacy": "allow",
+			...h,
+			ref: g,
+			className: v(),
+			"data-unity-side-panel": !0,
+			children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(o, {
+				className: y(),
+				children: t
+			})]
+		})
+	});
+});
+u.displayName = "SidePanel";
+//#endregion
+export { u as SidePanel, l as sidePanel };

package/dist/esm/components/side-panel/parts/SidePanelContent.js

@@ -1,26 +1,26 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
+import { forwardRef as e } from "react";
 import { uyTv as t } from "@payfit/unity-themes";
-const y = t({
-  slots: {
-    base: [
-      "uy:bg-surface-neutral",
-      "uy:flex uy:flex-col uy:flex-1 uy:min-h-0 uy:overflow-hidden",
-      "uy:w-full"
-    ],
-    scroller: [
-      "uy:flex-1 uy:overflow-y-auto uy:overflow-x-hidden uy:p-300",
-      "uy:h-full uy:min-h-0"
-    ]
-  }
-}), a = s(
-  ({ children: o, ...l }, r) => {
-    const { base: n, scroller: u } = y();
-    return /* @__PURE__ */ e("section", { ref: r, className: n(), ...l, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
-  }
-);
-a.displayName = "SidePanelContent";
-export {
-  a as SidePanelContent,
-  y as sidePanelContent
-};
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/side-panel/parts/SidePanelContent.tsx
+var r = t({ slots: {
+	base: [
+		"uy:bg-surface-neutral",
+		"uy:flex uy:flex-col uy:flex-1 uy:min-h-0 uy:overflow-hidden",
+		"uy:w-full"
+	],
+	scroller: ["uy:flex-1 uy:overflow-y-auto uy:overflow-x-hidden uy:p-300", "uy:h-full uy:min-h-0"]
+} }), i = e(({ children: e, ...t }, i) => {
+	let { base: a, scroller: o } = r();
+	return /* @__PURE__ */ n("section", {
+		ref: i,
+		className: a(),
+		...t,
+		children: /* @__PURE__ */ n("div", {
+			className: o(),
+			children: e
+		})
+	});
+});
+i.displayName = "SidePanelContent";
+//#endregion
+export { i as SidePanelContent, r as sidePanelContent };

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -1,66 +1,45 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as g, useContext as x } from "react";
-import { uyTv as D } from "@payfit/unity-themes";
-import { useDrag as b } from "@use-gesture/react";
-import { OverlayTriggerStateContext as h } from "react-aria-components/Dialog";
-import { useBreakpointListener as v } from "../../../hooks/use-breakpoint-listener.js";
-const P = D({
-  slots: {
-    base: [
-      "uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500",
-      "uy:cursor-grab uy:touch-action-none"
-    ],
-    indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
-  }
-}), S = 100;
-function T() {
-  const r = g(null), n = x(h), s = v(), { base: a, indicator: i } = P(), l = s === "xs" || s === "sm", u = b(
-    (c) => {
-      const {
-        movement: [I, e],
-        direction: [N, d],
-        intentional: m,
-        cancel: f,
-        last: y,
-        event: p
-      } = c;
-      if (!l) {
-        f();
-        return;
-      }
-      p.preventDefault();
-      const t = r.current?.closest(
-        "[data-unity-side-panel]"
-      );
-      if (t) {
-        if (e < 0) {
-          t.style.transform = "translate3d(0, 0, 0)";
-          return;
-        }
-        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", y && m && (e > S || d > 0 ? n && setTimeout(() => {
-          n.close();
-        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
-      }
-    },
-    {
-      axis: "y",
-      filterTaps: !0,
-      threshold: 5
-    }
-  );
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: a(),
-      "aria-hidden": "true",
-      ref: r,
-      ...u(),
-      children: /* @__PURE__ */ o("div", { className: i() })
-    }
-  );
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { useContext as t, useRef as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i } from "react/jsx-runtime";
+import { OverlayTriggerStateContext as a } from "react-aria-components/Dialog";
+import { useDrag as o } from "@use-gesture/react";
+//#region src/components/side-panel/parts/SidePanelDragIndicator.tsx
+var s = r({ slots: {
+	base: ["uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500", "uy:cursor-grab uy:touch-action-none"],
+	indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
+} }), c = 100;
+function l() {
+	let r = n(null), l = t(a), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = o((e) => {
+		let { movement: [t, n], direction: [i, a], intentional: o, cancel: s, last: u, event: d } = e;
+		if (!p) {
+			s();
+			return;
+		}
+		d.preventDefault();
+		let f = r.current?.closest("[data-unity-side-panel]");
+		if (f) {
+			if (n < 0) {
+				f.style.transform = "translate3d(0, 0, 0)";
+				return;
+			}
+			f.style.transform = `translate3d(0, ${n}px, 0)`, f.style.transition = "none", u && o && (n > c || a > 0 ? l && setTimeout(() => {
+				l.close();
+			}, 50) : (f.style.transform = "translate3d(0, 0, 0)", f.style.transition = "transform 0.3s ease"));
+		}
+	}, {
+		axis: "y",
+		filterTaps: !0,
+		threshold: 5
+	});
+	return /* @__PURE__ */ i("div", {
+		className: d(),
+		"aria-hidden": "true",
+		ref: r,
+		...m(),
+		children: /* @__PURE__ */ i("div", { className: f() })
+	});
 }
-T.displayName = "SidePanelDragIndicator";
-export {
-  T as SidePanelDragIndicator,
-  P as sidePanelDragIndicator
-};
+l.displayName = "SidePanelDragIndicator";
+//#endregion
+export { l as SidePanelDragIndicator };

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -1,29 +1,26 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as i, Children as a, isValidElement as m, cloneElement as l } from "react";
-import { uyTv as p } from "@payfit/unity-themes";
-import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as d } from "../../button/Button.js";
-import { DialogButton as b } from "../../dialog/parts/DialogActions/DialogButton.js";
-const c = p({
-  base: [
-    "uy:py-200 uy:px-300 uy:w-full",
-    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0 uy:flex-col uy:md:flex-row",
-    "uy:bg-surface-neutral uy:rounded-bl-200 uy:rounded-br-200 uy:border-t uy:border-solid uy:border-t-solid uy:border-border-neutral",
-    "uy:sticky uy:bottom-0 uy:z-10",
-    "uy:mt-auto",
-    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
-  ]
-}), x = i(
-  ({ children: r, ...t }, u) => {
-    const o = f(), n = o === "xs" || o === "sm", y = a.map(r, (e) => m(e) && (e.type === d || e.type === b) ? l(e, {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      size: n ? "full" : e.props.size
-    }) : e);
-    return /* @__PURE__ */ s("footer", { ref: u, className: c(), ...t, children: y });
-  }
-);
-x.displayName = "SidePanelFooter";
-export {
-  x as SidePanelFooter,
-  c as sidePanelFooter
-};
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as t } from "../../button/Button.js";
+import { DialogButton as n } from "../../dialog/parts/DialogActions/DialogButton.js";
+import { Children as r, cloneElement as i, forwardRef as a, isValidElement as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/side-panel/parts/SidePanelFooter.tsx
+var l = s({ base: [
+	"uy:py-200 uy:px-300 uy:w-full",
+	"uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0 uy:flex-col uy:md:flex-row",
+	"uy:bg-surface-neutral uy:rounded-bl-200 uy:rounded-br-200 uy:border-t uy:border-solid uy:border-t-solid uy:border-border-neutral",
+	"uy:sticky uy:bottom-0 uy:z-10",
+	"uy:mt-auto",
+	"uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
+] }), u = a(({ children: a, ...s }, u) => {
+	let d = e(), f = d === "xs" || d === "sm", p = r.map(a, (e) => o(e) && (e.type === t || e.type === n) ? i(e, { size: f ? "full" : e.props.size }) : e);
+	return /* @__PURE__ */ c("footer", {
+		ref: u,
+		className: l(),
+		...s,
+		children: p
+	});
+});
+u.displayName = "SidePanelFooter";
+//#endregion
+export { u as SidePanelFooter, l as sidePanelFooter };

package/dist/esm/components/side-panel/parts/SidePanelHeader.js

@@ -1,43 +1,41 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
-import { Heading as i } from "react-aria-components/Heading";
-import { CircularIconButton as c } from "../../icon-button/CircularIconButton.js";
-const d = y({
-  // add the component styles
-  slots: {
-    base: [
-      "uy:py-200 uy:px-300 uy:w-full",
-      "uy:flex uy:flex-col uy:shrink-0",
-      "uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
-      "uy:sticky uy:top-0 uy:z-10"
-    ],
-    content: ["uy:flex uy:items-center uy:justify-between uy:w-full"],
-    heading: [
-      "uy:typography-h2 uy:md:typography-h3 uy:text-content-neutral uy:truncate"
-    ]
-  }
-}), m = s(
-  ({ children: t, ...o }, r) => {
-    const { base: u, content: n, heading: l } = d();
-    return /* @__PURE__ */ e("header", { ref: r, className: u(), ...o, children: /* @__PURE__ */ a("div", { className: n(), children: [
-      /* @__PURE__ */ e(i, { slot: "title", className: l(), children: t }),
-      /* @__PURE__ */ e(
-        c,
-        {
-          asElement: "button",
-          slot: "close",
-          icon: "CloseOutlined",
-          title: "Close",
-          size: "large",
-          color: "content.neutral.low"
-        }
-      )
-    ] }) });
-  }
-);
-m.displayName = "SidePanelHeader";
-export {
-  m as SidePanelHeader,
-  d as sidePanelHeader
-};
+import { CircularIconButton as e } from "../../icon-button/CircularIconButton.js";
+import { forwardRef as t } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Heading as a } from "react-aria-components/Heading";
+//#region src/components/side-panel/parts/SidePanelHeader.tsx
+var o = n({ slots: {
+	base: [
+		"uy:py-200 uy:px-300 uy:w-full",
+		"uy:flex uy:flex-col uy:shrink-0",
+		"uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
+		"uy:sticky uy:top-0 uy:z-10"
+	],
+	content: ["uy:flex uy:items-center uy:justify-between uy:w-full"],
+	heading: ["uy:typography-h2 uy:md:typography-h3 uy:text-content-neutral uy:truncate"]
+} }), s = t(({ children: t, ...n }, s) => {
+	let { base: c, content: l, heading: u } = o();
+	return /* @__PURE__ */ r("header", {
+		ref: s,
+		className: c(),
+		...n,
+		children: /* @__PURE__ */ i("div", {
+			className: l(),
+			children: [/* @__PURE__ */ r(a, {
+				slot: "title",
+				className: u(),
+				children: t
+			}), /* @__PURE__ */ r(e, {
+				asElement: "button",
+				slot: "close",
+				icon: "CloseOutlined",
+				title: "Close",
+				size: "large",
+				color: "content.neutral.low"
+			})]
+		})
+	});
+});
+s.displayName = "SidePanelHeader";
+//#endregion
+export { s as SidePanelHeader, o as sidePanelHeader };