@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/skip-links/SkipLinks.js

@@ -1,87 +1,69 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { forwardRef as l, useId as p } from "react";
-import { uyTv as f } from "@payfit/unity-themes";
-import { Link as m } from "react-aria-components/Link";
-import { FormattedMessage as b } from "react-intl";
-import { link as k } from "../link/RawLink.js";
-const h = f({
-  slots: {
-    base: [
-      "uy:sr-only",
-      "uy:focus-within:p-200",
-      "uy:focus-within:bg-surface-neutral",
-      "uy:focus-within:border-border-neutral uy:focus-within:border-solid uy:focus-within:border-1",
-      "uy:focus-within:shadow-raising",
-      "uy:focus-within:rounded-100",
-      "uy:focus-within:not-sr-only",
-      "uy:focus-within:absolute",
-      "uy:focus-within:top-100",
-      "uy:focus-within:left-100",
-      "uy:focus-within:z-50"
-    ],
-    label: "uy:typography-h4",
-    list: "uy:mt-1 uy:space-y-1 uy:list-none"
-  }
-}), w = l(
-  ({ label: s, className: n, children: e, ...o }, a) => {
-    const r = `skip-links-label-${p()}`;
-    if (!e)
-      return null;
-    const { base: u, label: c, list: d } = h();
-    return /* @__PURE__ */ y(
-      "nav",
-      {
-        "data-dd-privacy": "allow",
-        ...o,
-        ref: a,
-        className: u({ className: n }),
-        role: "navigation",
-        "aria-labelledby": r,
-        "data-unity-component": "SkipLinks",
-        children: [
-          /* @__PURE__ */ t("span", { id: r, className: c(), children: s || /* @__PURE__ */ t(
-            b,
-            {
-              id: "unity:component:skip-links:label",
-              defaultMessage: "Skip to:"
-            }
-          ) }),
-          /* @__PURE__ */ t("ol", { className: d(), children: e })
-        ]
-      }
-    );
-  }
-), g = l(
-  ({ targetId: s, children: n, ...e }, o) => {
-    const { base: a } = k({
-      size: "small",
-      color: "primary",
-      variant: "standalone"
-    });
-    return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
-      m,
-      {
-        ...e,
-        ref: o,
-        className: a(),
-        onPress: () => {
-          const i = document.getElementById(s);
-          i && (i.focus(), i.hasAttribute("tabindex") || (i.setAttribute("tabindex", "-1"), i.addEventListener(
-            "blur",
-            () => {
-              i.removeAttribute("tabindex");
-            },
-            { once: !0 }
-          )));
-        },
-        children: n
-      }
-    ) });
-  }
-);
-w.displayName = "SkipLinks";
-g.displayName = "SkipLink";
-export {
-  g as SkipLink,
-  w as SkipLinks
-};
+import { link as e } from "../link/RawLink.js";
+import { forwardRef as t, useId as n } from "react";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { FormattedMessage as o } from "react-intl";
+import { Link as s } from "react-aria-components/Link";
+//#region src/components/skip-links/SkipLinks.tsx
+var c = r({ slots: {
+	base: [
+		"uy:sr-only",
+		"uy:focus-within:p-200",
+		"uy:focus-within:bg-surface-neutral",
+		"uy:focus-within:border-border-neutral uy:focus-within:border-solid uy:focus-within:border-1",
+		"uy:focus-within:shadow-raising",
+		"uy:focus-within:rounded-100",
+		"uy:focus-within:not-sr-only",
+		"uy:focus-within:absolute",
+		"uy:focus-within:top-100",
+		"uy:focus-within:left-100",
+		"uy:focus-within:z-50"
+	],
+	label: "uy:typography-h4",
+	list: "uy:mt-1 uy:space-y-1 uy:list-none"
+} }), l = t(({ label: e, className: t, children: r, ...s }, l) => {
+	let u = `skip-links-label-${n()}`;
+	if (!r) return null;
+	let { base: d, label: f, list: p } = c();
+	return /* @__PURE__ */ a("nav", {
+		"data-dd-privacy": "allow",
+		...s,
+		ref: l,
+		className: d({ className: t }),
+		role: "navigation",
+		"aria-labelledby": u,
+		"data-unity-component": "SkipLinks",
+		children: [/* @__PURE__ */ i("span", {
+			id: u,
+			className: f(),
+			children: e || /* @__PURE__ */ i(o, {
+				id: "unity:component:skip-links:label",
+				defaultMessage: "Skip to:"
+			})
+		}), /* @__PURE__ */ i("ol", {
+			className: p(),
+			children: r
+		})]
+	});
+}), u = t(({ targetId: t, children: n, ...r }, a) => {
+	let { base: o } = e({
+		size: "small",
+		color: "primary",
+		variant: "standalone"
+	});
+	return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(s, {
+		...r,
+		ref: a,
+		className: o(),
+		onPress: () => {
+			let e = document.getElementById(t);
+			e && (e.focus(), e.hasAttribute("tabindex") || (e.setAttribute("tabindex", "-1"), e.addEventListener("blur", () => {
+				e.removeAttribute("tabindex");
+			}, { once: !0 })));
+		},
+		children: n
+	}) });
+});
+l.displayName = "SkipLinks", u.displayName = "SkipLink";
+//#endregion
+export { u as SkipLink, l as SkipLinks };

package/dist/esm/components/spinner/Spinner.js

@@ -1,108 +1,78 @@
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import f from "../../hooks/use-id.js";
-const h = m({
-  slots: {
-    base: "uy:flex uy:flex-col uy:items-center uy:gap-200",
-    indicator: "",
-    label: "uy:typography-body uy:text-left uy:truncate"
-  },
-  variants: {
-    size: {
-      small: {
-        indicator: "uy:w-200 uy:h-200",
-        label: "uy:hidden"
-      },
-      medium: {
-        indicator: "uy:w-300 uy:h-300"
-      }
-    },
-    color: {
-      primary: {
-        indicator: "uy:text-content-primary"
-      },
-      inverted: {
-        indicator: "uy:text-content-inverted",
-        label: "uy:text-content-inverted"
-      },
-      inherit: {
-        indicator: ""
-      }
-    }
-  },
-  defaultVariants: {
-    size: "small",
-    color: "primary"
-  }
+import e from "../../hooks/use-id.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";
+//#region src/components/spinner/Spinner.tsx
+var a = n({
+	slots: {
+		base: "uy:flex uy:flex-col uy:items-center uy:gap-200",
+		indicator: "",
+		label: "uy:typography-body uy:text-left uy:truncate"
+	},
+	variants: {
+		size: {
+			small: {
+				indicator: "uy:w-200 uy:h-200",
+				label: "uy:hidden"
+			},
+			medium: { indicator: "uy:w-300 uy:h-300" }
+		},
+		color: {
+			primary: { indicator: "uy:text-content-primary" },
+			inverted: {
+				indicator: "uy:text-content-inverted",
+				label: "uy:text-content-inverted"
+			},
+			inherit: { indicator: "" }
+		}
+	},
+	defaultVariants: {
+		size: "small",
+		color: "primary"
+	}
 });
-function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
-  const a = `spinner-label-${f()}`, {
-    base: d,
-    indicator: y,
-    label: u
-  } = h({
-    size: e,
-    color: o
-  });
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      ...s,
-      ref: c,
-      role: r,
-      className: d(),
-      "aria-labelledby": r === "status" ? a : void 0,
-      "aria-live": "polite",
-      "data-dd-privacy": "allow",
-      children: [
-        /* @__PURE__ */ t(
-          "svg",
-          {
-            viewBox: "0 0 100 100",
-            "aria-hidden": "true",
-            className: y(),
-            children: [
-              /* @__PURE__ */ i("title", { children: "Loading" }),
-              /* @__PURE__ */ i(
-                "circle",
-                {
-                  cx: "50",
-                  cy: "50",
-                  r: "45",
-                  fill: "none",
-                  stroke: "currentColor",
-                  style: {
-                    "--r": "45px",
-                    "--1deg": "calc(2 * pi * var(--r) / 360)",
-                    strokeWidth: "9.6px",
-                    shapeRendering: "geometricPrecision",
-                    strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
-                    transformOrigin: "50% 50%",
-                    animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ i(
-          "span",
-          {
-            id: a,
-            className: u(),
-            "aria-hidden": e !== "small",
-            children: l
-          }
-        )
-      ]
-    }
-  );
+function o({ label: t, color: n, size: o, role: s = "status", ...c }, l) {
+	let u = `spinner-label-${e()}`, { base: d, indicator: f, label: p } = a({
+		size: o,
+		color: n
+	});
+	return /* @__PURE__ */ i("div", {
+		...c,
+		ref: l,
+		role: s,
+		className: d(),
+		"aria-labelledby": s === "status" ? u : void 0,
+		"aria-live": "polite",
+		"data-dd-privacy": "allow",
+		children: [/* @__PURE__ */ i("svg", {
+			viewBox: "0 0 100 100",
+			"aria-hidden": "true",
+			className: f(),
+			children: [/* @__PURE__ */ r("title", { children: "Loading" }), /* @__PURE__ */ r("circle", {
+				cx: "50",
+				cy: "50",
+				r: "45",
+				fill: "none",
+				stroke: "currentColor",
+				style: {
+					"--r": "45px",
+					"--1deg": "calc(2 * pi * var(--r) / 360)",
+					strokeWidth: "9.6px",
+					shapeRendering: "geometricPrecision",
+					strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
+					transformOrigin: "50% 50%",
+					animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
+				}
+			})]
+		}), /* @__PURE__ */ r("span", {
+			id: u,
+			className: p(),
+			"aria-hidden": o !== "small",
+			children: t
+		})]
+	});
 }
-n.displayName = "Spinner";
-const S = p(
-  n
-);
-export {
-  S as Spinner
-};
+o.displayName = "Spinner";
+var s = t(o);
+//#endregion
+export { s as Spinner };

package/dist/esm/components/stepper/Stepper.context.js

@@ -1,22 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
-import { createContext as n, useContext as p } from "react";
-const t = n({
-  currentStep: 0
-});
-function s({
-  children: e,
-  currentStep: r
-}) {
-  return /* @__PURE__ */ o(t.Provider, { value: { currentStep: r }, children: e });
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/stepper/Stepper.context.tsx
+var r = e({ currentStep: 0 });
+function i({ children: e, currentStep: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { currentStep: t },
+		children: e
+	});
 }
-function x() {
-  const e = p(t);
-  if (!e)
-    throw new Error("useStepperContext must be used within an StepperProvider");
-  return e;
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useStepperContext must be used within an StepperProvider");
+	return e;
 }
-export {
-  t as StepperContext,
-  s as StepperProvider,
-  x as useStepperContext
-};
+//#endregion
+export { i as StepperProvider, a as useStepperContext };

package/dist/esm/components/stepper/Stepper.js

@@ -1,19 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
+import { StepperProvider as e } from "./Stepper.context.js";
 import { forwardRef as t } from "react";
-import { StepperProvider as m } from "./Stepper.context.js";
-const d = t(
-  ({ children: e, currentStep: p, ...o }, a) => /* @__PURE__ */ r(m, { currentStep: p, children: /* @__PURE__ */ r(
-    "ol",
-    {
-      "data-dd-privacy": "allow",
-      ref: a,
-      className: "uy:flex uy:gap-200",
-      ...o,
-      children: e
-    }
-  ) })
-);
-d.displayName = "Stepper";
-export {
-  d as Stepper
-};
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/stepper/Stepper.tsx
+var r = t(({ children: t, currentStep: r, ...i }, a) => /* @__PURE__ */ n(e, {
+	currentStep: r,
+	children: /* @__PURE__ */ n("ol", {
+		"data-dd-privacy": "allow",
+		ref: a,
+		className: "uy:flex uy:gap-200",
+		...i,
+		children: t
+	})
+}));
+r.displayName = "Stepper";
+//#endregion
+export { r as Stepper };

package/dist/esm/components/stepper/hooks/useStepper.js

@@ -1,26 +1,21 @@
-import { useState as n } from "react";
-const v = ({
-  initialStep: e,
-  totalSteps: s
-}) => {
-  const [t, c] = n(e), [u, p] = n(e <= 1), [x, S] = n(
-    e >= s
-  ), f = () => {
-    t >= s || o("next");
-  }, g = () => {
-    t <= 1 || o("previous");
-  }, o = (i) => {
-    const r = i === "next" ? t + 1 : t - 1;
-    p(r <= 1), S(r >= s), c(r);
-  };
-  return {
-    currentStep: t,
-    goNext: f,
-    goPrevious: g,
-    isLastStep: x,
-    isFirstStep: u
-  };
-};
-export {
-  v as useStepper
+import { useState as e } from "react";
+//#region src/components/stepper/hooks/useStepper.ts
+var t = ({ initialStep: t, totalSteps: n }) => {
+	let [r, i] = e(t), [a, o] = e(t <= 1), [s, c] = e(t >= n), l = () => {
+		r >= n || d("next");
+	}, u = () => {
+		r <= 1 || d("previous");
+	}, d = (e) => {
+		let t = e === "next" ? r + 1 : r - 1;
+		o(t <= 1), c(t >= n), i(t);
+	};
+	return {
+		currentStep: r,
+		goNext: l,
+		goPrevious: u,
+		isLastStep: s,
+		isFirstStep: a
+	};
 };
+//#endregion
+export { t as useStepper };

package/dist/esm/components/stepper/parts/Step.js

@@ -1,56 +1,47 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { Icon as d } from "@payfit/unity-icons";
-import { uyTv as f } from "@payfit/unity-themes";
-import { Text as x } from "../../text/Text.js";
-import { useStepperContext as b } from "../Stepper.context.js";
-const g = f({
-  slots: {
-    base: "uy:flex uy:flex-1 uy:flex-col uy:gap-75",
-    bar: "uy:h-50 uy:w-full uy:rounded-full uy:transition-all",
-    labelRow: "uy:flex uy:flex-row uy:items-center uy:gap-50",
-    text: "uy:typography-body-strong",
-    statusIcon: "uy:starting:scale-0 uy:scale-100 uy:transition-transform uy:duration-150"
-  },
-  variants: {
-    stepStatus: {
-      current: { bar: "uy:bg-surface-primary" },
-      completed: { bar: "uy:bg-surface-primary" },
-      uncompleted: { bar: "uy:bg-surface-neutral-lowest" }
-    }
-  }
-}), h = m(
-  ({ label: o, stepNumber: e, ...u }, c) => {
-    const { currentStep: a } = b(), t = a === e ? "current" : a > e ? "completed" : "uncompleted", { base: l, bar: n, labelRow: i, text: y, statusIcon: p } = g({
-      stepStatus: t
-    });
-    return /* @__PURE__ */ s(
-      "li",
-      {
-        ref: c,
-        className: l(),
-        "aria-current": t === "current" ? "step" : void 0,
-        ...u,
-        children: [
-          /* @__PURE__ */ r("div", { className: n(), "aria-hidden": "true" }),
-          /* @__PURE__ */ s("div", { className: i(), children: [
-            /* @__PURE__ */ r(x, { className: y(), children: `${e}. ${o}` }),
-            t === "completed" && /* @__PURE__ */ r(
-              d,
-              {
-                src: "CheckCircleOutlined",
-                color: "content.success",
-                size: 20,
-                className: p()
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
-h.displayName = "Step";
-export {
-  h as Step
-};
+import { Text as e } from "../../text/Text.js";
+import { useStepperContext as t } from "../Stepper.context.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";
+import { Icon as o } from "@payfit/unity-icons";
+//#region src/components/stepper/parts/Step.tsx
+var s = r({
+	slots: {
+		base: "uy:flex uy:flex-1 uy:flex-col uy:gap-75",
+		bar: "uy:h-50 uy:w-full uy:rounded-full uy:transition-all",
+		labelRow: "uy:flex uy:flex-row uy:items-center uy:gap-50",
+		text: "uy:typography-body-strong",
+		statusIcon: "uy:starting:scale-0 uy:scale-100 uy:transition-transform uy:duration-150"
+	},
+	variants: { stepStatus: {
+		current: { bar: "uy:bg-surface-primary" },
+		completed: { bar: "uy:bg-surface-primary" },
+		uncompleted: { bar: "uy:bg-surface-neutral-lowest" }
+	} }
+}), c = n(({ label: n, stepNumber: r, ...c }, l) => {
+	let { currentStep: u } = t(), d = u === r ? "current" : u > r ? "completed" : "uncompleted", { base: f, bar: p, labelRow: m, text: h, statusIcon: g } = s({ stepStatus: d });
+	return /* @__PURE__ */ a("li", {
+		ref: l,
+		className: f(),
+		"aria-current": d === "current" ? "step" : void 0,
+		...c,
+		children: [/* @__PURE__ */ i("div", {
+			className: p(),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ a("div", {
+			className: m(),
+			children: [/* @__PURE__ */ i(e, {
+				className: h(),
+				children: `${r}. ${n}`
+			}), d === "completed" && /* @__PURE__ */ i(o, {
+				src: "CheckCircleOutlined",
+				color: "content.success",
+				size: 20,
+				className: g()
+			})]
+		})]
+	});
+});
+c.displayName = "Step";
+//#endregion
+export { c as Step };