@payfit/unity-components 3.1.14 → 3.1.15

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

@@ -0,0 +1,91 @@
+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, OverlayTriggerStateContext as s } from "react-aria-components/Dialog";
+import { Modal as c, ModalOverlay as l } from "react-aria-components/Modal";
+import { useOverlayTriggerState as u } from "react-stately/useOverlayTriggerState";
+import { createPortal as d } from "react-dom";
+//#region src/core/components/side-panel/SidePanel.tsx
+var f = 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"
+	},
+	variants: { isModal: { false: {
+		overlay: "uy:pointer-events-none",
+		wrapper: "uy:pointer-events-auto"
+	} } }
+}), p = t(({ children: t, isOpen: r, onOpenChange: p, defaultOpen: m, isDismissable: h = !0, isKeyboardDismissDisabled: g = !1, isModal: _ = !0, disableScrollLocking: v = !1, "aria-label": y = "Side panel", "aria-labelledby": b, ...x }, S) => {
+	let C = u({
+		isOpen: r,
+		onOpenChange: p,
+		defaultOpen: m
+	}), { overlay: w, wrapper: T, content: E } = f({ isModal: _ });
+	return n(() => {
+		v && (r ?? m) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
+	}, [
+		v,
+		r,
+		m
+	]), _ ? /* @__PURE__ */ i(l, {
+		className: w(),
+		isOpen: r,
+		onOpenChange: p,
+		defaultOpen: m,
+		isDismissable: h,
+		isKeyboardDismissDisabled: g,
+		children: /* @__PURE__ */ a(c, {
+			"data-dd-privacy": "allow",
+			...x,
+			ref: S,
+			className: T(),
+			"data-unity-side-panel": !0,
+			children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(o, {
+				className: E(),
+				children: t
+			})]
+		})
+	}) : !C.isOpen || typeof document > "u" || !document.body ? null : d(/* @__PURE__ */ i(s.Provider, {
+		value: C,
+		children: /* @__PURE__ */ i("div", {
+			className: w(),
+			children: /* @__PURE__ */ a("div", {
+				"data-dd-privacy": "allow",
+				...x,
+				ref: S,
+				className: T(),
+				"data-unity-side-panel": !0,
+				onClickCapture: (e) => {
+					e.target instanceof Element && e.target.closest("[slot=\"close\"]") && C.close();
+				},
+				onKeyDownCapture: (e) => {
+					h && e.key === "Escape" && !g && C.close();
+				},
+				children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i("div", {
+					"aria-label": b ? void 0 : y,
+					"aria-labelledby": b,
+					"aria-modal": !1,
+					className: E(),
+					role: "dialog",
+					children: t
+				})]
+			})
+		})
+	}), document.body);
+});
+p.displayName = "SidePanel";
+//#endregion
+export { p as SidePanel, f as sidePanel };

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

@@ -0,0 +1,26 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/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/core/components/side-panel/parts/SidePanelDragIndicator.js

@@ -0,0 +1,45 @@
+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/core/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() })
+	});
+}
+l.displayName = "SidePanelDragIndicator";
+//#endregion
+export { l as SidePanelDragIndicator, s as sidePanelDragIndicator };

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

@@ -0,0 +1,26 @@
+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/core/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/core/components/side-panel/parts/SidePanelHeader.js

@@ -0,0 +1,41 @@
+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/core/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 };

package/dist/esm/core/components/skeleton/Skeleton.js

@@ -0,0 +1,47 @@
+import { forwardRef as e } from "react";
+import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/core/components/skeleton/Skeleton.tsx
+var i = n({
+	base: "uy:bg-surface-neutral-disabled uy:animate-pulse",
+	variants: {
+		variant: {
+			rectangular: "uy:rounded-50",
+			circular: "uy:rounded-circle",
+			text: "uy:inline-block uy:h-[1em] uy:my-[calc((1lh-1em)/2)] uy:rounded-50"
+		},
+		textVariant: {
+			displayHeading: "uy:typography-display-heading",
+			h1: "uy:typography-h1",
+			h2: "uy:typography-h2",
+			h3: "uy:typography-h3",
+			h4: "uy:typography-h4",
+			overline: "uy:typography-overline",
+			subtitle: "uy:typography-subtitle",
+			displayTitle: "uy:typography-display-title",
+			displayBody: "uy:typography-display-body",
+			body: "uy:typography-body",
+			bodyStrong: "uy:typography-body-strong",
+			bodySmall: "uy:typography-body-small",
+			bodySmallStrong: "uy:typography-body-small-strong",
+			bodyLarge: "uy:typography-body-large",
+			bodyLargeStrong: "uy:typography-body-large-strong",
+			action: "uy:typography-action",
+			actionLarge: "uy:typography-body-large",
+			actionSmall: "uy:typography-body-small",
+			actionInfo: "uy:typography-action uy:underline uy:decoration-dotted uy:decoration-[10%] uy:underline-offset-[25%]"
+		}
+	},
+	defaultVariants: { variant: "rectangular" }
+}), a = e(({ variant: e = "rectangular", textVariant: n, className: a, "aria-hidden": o = !0, ...s }, c) => /* @__PURE__ */ r("div", {
+	ref: c,
+	"aria-hidden": o,
+	className: t(a, i({
+		variant: e,
+		textVariant: n
+	})),
+	...s
+}));
+a.displayName = "Skeleton";
+//#endregion
+export { a as Skeleton };

package/dist/esm/core/components/skip-links/SkipLinks.d.ts

@@ -0,0 +1,82 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface SkipLinksProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /** Optional label for the skip links navigation. Defaults to "Skip to:" */
+    label?: string;
+}
+export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> {
+    /** The target element ID to skip to */
+    targetId: string;
+}
+/**
+ * SkipLinks component provides keyboard navigation shortcuts to important sections of the page
+ *
+ * The SkipLinks component creates accessible navigation shortcuts that appear when focused,
+ * allowing keyboard users to quickly jump to important sections like main content, toolbars,
+ * or action areas. It follows WCAG guidelines for skip navigation.
+ * @param props - The props for the SkipLinks component
+ * @param props.label - Optional label for the skip links navigation section
+ * @param props.children - SkipLink components
+ * @example
+ * ```tsx
+ * import { SkipLinks, SkipLink } from '@payfit/unity-components'
+ *
+ * function TableWithActions() {
+ *   return (
+ *     <div>
+ *       <SkipLinks label="Quick navigation:">
+ *         <SkipLink targetId="main-content">
+ *           Skip to main content
+ *         </SkipLink>
+ *         <SkipLink targetId="table-actions-toolbar">
+ *           Skip to actions
+ *         </SkipLink>
+ *       </SkipLinks>
+ *       <div id="main-content" tabIndex={-1}>
+ *         Main content
+ *       </div>
+ *       <div id="table-actions-toolbar" tabIndex={-1}>
+ *         Action bar content
+ *       </div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Skip links are visually hidden by default and become visible when focused
+ * - Each link should target an element with a valid ID and tabIndex={-1}
+ * - The component exposes navigation and list semantics labelled through `aria-labelledby`
+ * - Links follow the normal tab order and can be activated with Enter or Space
+ * - Place skip links where they should occur in the page tab order and avoid fixed or absolute positioning that could conflict with other skip links
+ * - The component follows WCAG 2.1 guidelines for skip navigation
+ * @see {@link SkipLinksProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/skip-links GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const SkipLinks: import('react').ForwardRefExoticComponent<SkipLinksProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * SkipLink component represents a single skip navigation link
+ *
+ * The SkipLink component should be used as a child of SkipLinks to create individual
+ * navigation shortcuts. It automatically handles focus management and accessibility.
+ * @param props - The props for the SkipLink component
+ * @param props.targetId - The ID of the target element to skip to
+ * @param props.children - The link text content
+ * @example
+ * ```tsx
+ * import { SkipLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <SkipLink targetId="main-content">
+ *       Skip to main content
+ *     </SkipLink>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Should only be used as a child of SkipLinks component
+ * - Automatically focuses the target element when activated
+ * @see {@link SkipLinkProps} for all available props
+ */
+declare const SkipLink: import('react').ForwardRefExoticComponent<SkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { SkipLinks, SkipLink };

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

@@ -0,0 +1,69 @@
+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/core/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/core/components/spinner/Spinner.js

@@ -0,0 +1,78 @@
+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/core/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-neutral" },
+			inverted: {
+				indicator: "uy:text-content-inverted",
+				label: "uy:text-content-inverted"
+			},
+			inherit: { indicator: "" }
+		}
+	},
+	defaultVariants: {
+		size: "small",
+		color: "primary"
+	}
+});
+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
+		})]
+	});
+}
+o.displayName = "Spinner";
+var s = t(o);
+//#endregion
+export { s as Spinner };

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

@@ -0,0 +1,17 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/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 a() {
+	let e = t(r);
+	if (!e) throw Error("useStepperContext must be used within an StepperProvider");
+	return e;
+}
+//#endregion
+export { r as StepperContext, i as StepperProvider, a as useStepperContext };

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

@@ -0,0 +1,17 @@
+import { StepperProvider as e } from "./Stepper.context.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/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/core/components/stepper/hooks/useStepper.js

@@ -0,0 +1,21 @@
+import { useState as e } from "react";
+//#region src/core/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/core/components/stepper/parts/Step.js

@@ -0,0 +1,47 @@
+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/core/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 };