@payfit/unity-components 3.1.14 → 3.1.15

package/dist/esm/core/components/text-area/TextArea.js

@@ -0,0 +1,121 @@
+import { Icon as e } from "../icon/Icon.js";
+import { Spinner as t } from "../spinner/Spinner.js";
+import { useResizable as n } from "../../hooks/use-resizable.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";
+import { TextArea as c } from "react-aria-components/TextArea";
+//#region src/core/components/text-area/TextArea.tsx
+var l = i({
+	slots: {
+		base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
+		inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75",
+		input: "uy:flex-grow uy:flex-shrink uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:resize-none",
+		state: "uy:flex uy:gap-50 uy:flex-shrink-0 uy:basis-250",
+		resizeHandle: "uy:absolute uy:bottom-25 uy:right-25 uy:w-100 uy:h-100 uy:cursor-se-resize uy:flex uy:items-center uy:justify-center"
+	},
+	variants: {
+		isInvalid: { true: {
+			base: "uy:border-border-form-error uy:bg-surface-form-error",
+			inputWrapper: "uy:bg-surface-form-error",
+			input: "uy:bg-surface-form-error",
+			state: "uy:text-content-form-error"
+		} },
+		isReadOnly: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			input: "uy:bg-surface-form-disabled uy:text-content-form-readonly"
+		} },
+		isDisabled: { true: {
+			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+			inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
+			input: "uy:bg-surface-form-disabled uy:text-content-form-disabled"
+		} }
+	},
+	compoundVariants: [{
+		isInvalid: !1,
+		isDisabled: !1,
+		isReadOnly: !1,
+		className: {
+			base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
+			input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
+			state: "uy:text-content-form-disabled"
+		}
+	}],
+	defaultVariants: {
+		isInvalid: !1,
+		isDisabled: !1,
+		isReadOnly: !1
+	}
+}), u = r(({ isInvalid: r, isLoading: i, isDisabled: u, isReadOnly: d, isResizable: f = !1, ...p }, m) => {
+	let h = s(), { containerRef: g, handleResizeStart: _ } = n({ isDisabled: !f || u || d }), { base: v, inputWrapper: y, input: b, state: x, resizeHandle: S } = l({
+		isInvalid: r,
+		isDisabled: u,
+		isReadOnly: d
+	});
+	return /* @__PURE__ */ o("div", {
+		ref: g,
+		className: v(),
+		children: [/* @__PURE__ */ o("div", {
+			className: y(),
+			children: [/* @__PURE__ */ a(c, {
+				"data-dd-privacy": "mask",
+				...p,
+				ref: m,
+				className: b(),
+				"aria-busy": i,
+				"aria-invalid": r,
+				readOnly: d,
+				disabled: u
+			}), /* @__PURE__ */ o("div", {
+				className: x(),
+				children: [i && /* @__PURE__ */ a(t, {
+					color: "inherit",
+					size: "small",
+					label: h.formatMessage({
+						id: "unity:component:form-field:form-input:spinner:label",
+						defaultMessage: "Loading"
+					})
+				}), r && /* @__PURE__ */ a(e, {
+					src: "WarningCircleOutlined",
+					color: "content.form.invalid",
+					alt: h.formatMessage({
+						id: "unity:component:form-field:form-input:error:alt",
+						defaultMessage: "Error"
+					})
+				})]
+			})]
+		}), f && !u && !d && /* @__PURE__ */ a("div", {
+			className: S(),
+			onMouseDown: _,
+			role: "button",
+			tabIndex: 0,
+			"aria-label": h.formatMessage({
+				id: "unity:component:form-field:textarea:resize-handle:label",
+				defaultMessage: "Resize textarea"
+			}),
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g.current?.querySelector("textarea")?.focus());
+			},
+			children: /* @__PURE__ */ o("svg", {
+				role: "presentation",
+				width: "8",
+				height: "8",
+				viewBox: "0 0 8 8",
+				fill: "none",
+				children: [/* @__PURE__ */ a("path", {
+					d: "M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",
+					fill: "#8B8D98"
+				}), /* @__PURE__ */ a("path", {
+					d: "M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",
+					fill: "#8B8D98"
+				})]
+			})
+		})]
+	});
+});
+u.displayName = "TextArea";
+//#endregion
+export { u as TextArea, l as textArea };

package/dist/esm/core/components/timeline/Timeline.context.js

@@ -0,0 +1,20 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/timeline/Timeline.context.tsx
+var r = e(null);
+function i({ children: e, orientation: t, type: i }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			orientation: t,
+			type: i
+		},
+		children: e
+	});
+}
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useTimelineContext must be used within a Timeline component. Make sure to wrap your TimelineStep components with <Timeline>.");
+	return e;
+}
+//#endregion
+export { r as TimelineContext, i as TimelineProvider, a as useTimelineContext };

package/dist/esm/core/components/timeline/Timeline.js

@@ -0,0 +1,33 @@
+import { TimelineProvider as e } from "./Timeline.context.js";
+import { timeline as t } from "./Timeline.variants.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react-aria/useId";
+//#region src/core/components/timeline/Timeline.tsx
+var o = n(({ "aria-label": n, customProgressLabel: o, orientation: s = "vertical", type: c = "default", className: l, children: u }, d) => {
+	let f = a();
+	return /* @__PURE__ */ i(e, {
+		orientation: s,
+		type: c,
+		children: [o && /* @__PURE__ */ r("div", {
+			id: f,
+			className: "uy:sr-only",
+			children: o
+		}), /* @__PURE__ */ r(c === "numbered" ? "ol" : "ul", {
+			ref: (e) => {
+				typeof d == "function" ? d(e) : d && (d.current = e);
+			},
+			className: t({
+				orientation: s,
+				className: l
+			}),
+			"aria-label": n,
+			"aria-describedby": o ? f : void 0,
+			"aria-orientation": s,
+			children: u
+		})]
+	});
+});
+o.displayName = "Timeline";
+//#endregion
+export { o as Timeline };

package/dist/esm/core/components/timeline/Timeline.utils.js

@@ -0,0 +1,9 @@
+import { isDesktopBreakpoint as e, useBreakpointListener as t } from "../../hooks/use-breakpoint-listener.js";
+import { useTimelineContext as n } from "./Timeline.context.js";
+//#region src/core/components/timeline/Timeline.utils.ts
+var r = () => {
+	let { orientation: r } = n(), i = t();
+	return r === "horizontal" && e(i);
+};
+//#endregion
+export { r as useIsHorizontalDesktop };

package/dist/esm/core/components/timeline/Timeline.variants.js

@@ -0,0 +1,96 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/timeline/Timeline.variants.ts
+var t = e({
+	base: "uy:flex uy:list-none uy:m-0 uy:p-0",
+	variants: { orientation: {
+		vertical: "uy:flex-col",
+		horizontal: "uy:flex-col uy:md:flex-row"
+	} },
+	defaultVariants: { orientation: "vertical" }
+}), n = e({
+	base: "uy:flex uy:m-0 uy:p-0 uy:gap-200",
+	variants: { orientation: {
+		vertical: "uy:flex-row uy:w-full uy:items-stretch",
+		horizontal: "uy:flex-row uy:w-full uy:items-stretch uy:md:flex-col uy:md:flex-1 uy:md:min-w-0 uy:md:w-auto"
+	} },
+	defaultVariants: { orientation: "vertical" }
+}), r = e({
+	slots: {
+		container: "uy:flex uy:items-center uy:w-300",
+		ball: [
+			"uy:flex uy:items-center uy:justify-center",
+			"uy:w-250 uy:h-250 uy:rounded-full",
+			"uy:border-2 uy:border-solid",
+			"uy:flex-shrink-0"
+		],
+		line: "uy:flex-1",
+		icon: "uy:w-250 uy:h-250",
+		number: [
+			"uy:typography-body-small-strong",
+			"uy:flex uy:items-center uy:justify-center",
+			"uy:w-full uy:h-full"
+		]
+	},
+	variants: {
+		state: {
+			completed: {
+				ball: "uy:bg-surface-neutral-highest-enabled uy:border-transparent uy:w-300 uy:h-300",
+				line: "uy:border-border-neutral-highest uy:border-solid",
+				icon: "uy:text-content-inverted"
+			},
+			current: {
+				ball: "uy:bg-transparent  uy:border-border-neutral-highest",
+				line: "uy:border-border-neutral uy:border-dashed",
+				number: "uy:text-content-primary-active"
+			},
+			pending: {
+				ball: "uy:bg-transparent uy:border-border-neutral",
+				line: "uy:border-border-neutral uy:border-dashed",
+				number: "uy:text-content-neutral-lowest"
+			}
+		},
+		type: {
+			default: {},
+			numbered: { ball: "uy:w-300 uy:h-300" }
+		},
+		orientation: {
+			vertical: {
+				container: "uy:flex-col uy:self-stretch",
+				line: "uy:min-h-200 uy:w-0 uy:border-l-2"
+			},
+			horizontal: {
+				container: "uy:flex-col uy:self-stretch uy:md:flex-row uy:md:w-full uy:md:h-300 uy:md:self-auto",
+				line: "uy:min-h-200 uy:w-0 uy:border-l-2 uy:md:min-h-0 uy:md:min-w-200 uy:md:h-0 uy:md:w-auto uy:md:border-l-0 uy:md:border-t-2"
+			}
+		}
+	},
+	compoundVariants: [{
+		state: "current",
+		type: "numbered",
+		className: {
+			ball: "uy:bg-surface-neutral-highest-enabled uy:border-transparent",
+			number: "uy:text-content-inverted-active"
+		}
+	}, {
+		state: "pending",
+		type: "numbered",
+		className: {
+			ball: "uy:bg-surface-neutral-lowest uy:border-border-neutral-low",
+			number: "uy:text-content-neutral"
+		}
+	}],
+	defaultVariants: {
+		state: "pending",
+		type: "default",
+		orientation: "vertical"
+	}
+}), i = e({
+	base: "uy:flex uy:flex-col uy:gap-100 uy:items-start",
+	variants: { orientation: {
+		vertical: "uy:flex-1 uy:pb-300",
+		horizontal: "uy:flex-1 uy:pb-300 uy:md:pb-0 uy:md:pr-400"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { t as timeline, i as timelineContent, r as timelineMarker, n as timelineStep };

package/dist/esm/core/components/timeline/parts/TimelineMarker.js

@@ -0,0 +1,36 @@
+import { useTimelineContext as e } from "../Timeline.context.js";
+import { timelineMarker as t } from "../Timeline.variants.js";
+import n from "./check.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/core/components/timeline/parts/TimelineMarker.tsx
+var o = r(({ state: r = "pending", stepNumber: o, className: s }, c) => {
+	let { type: l, orientation: u } = e(), { container: d, icon: f, ball: p, number: m, line: h } = t({
+		state: r,
+		type: l,
+		orientation: u,
+		className: s
+	}), g = r === "completed", _ = l === "numbered" && !g && o !== void 0;
+	return /* @__PURE__ */ a("div", {
+		ref: c,
+		className: d(),
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ a("div", {
+			className: p(),
+			children: [g && /* @__PURE__ */ i(n, {
+				className: f(),
+				"aria-hidden": "true"
+			}), _ && /* @__PURE__ */ i("span", {
+				className: m(),
+				"aria-hidden": "true",
+				children: o
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: h(),
+			"data-timeline-line": !0
+		})]
+	});
+});
+o.displayName = "TimelineMarker";
+//#endregion
+export { o as TimelineMarker };

package/dist/esm/core/components/timeline/parts/TimelineStep.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/timeline/parts/TimelineStep.context.tsx
+var r = e(null);
+function i({ labelId: e, children: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { labelId: e },
+		children: t
+	});
+}
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useTimelineStepContext must be used within TimelineStepProvider");
+	return e;
+}
+//#endregion
+export { i as TimelineStepProvider, a as useTimelineStepContext };

package/dist/esm/core/components/timeline/parts/TimelineStep.js

@@ -0,0 +1,57 @@
+import { useTimelineContext as e } from "../Timeline.context.js";
+import { timelineStep as t } from "../Timeline.variants.js";
+import { TimelineMarker as n } from "./TimelineMarker.js";
+import { TimelineStepProvider as r } from "./TimelineStep.context.js";
+import { TimelineStepContent as i } from "./TimelineStepContent.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useIntl as l } from "react-intl";
+//#region src/core/components/timeline/parts/TimelineStep.tsx
+var u = a(({ state: a = "pending", stepNumber: u, className: d, statusSlot: f, actionSlot: p, children: m }, h) => {
+	let g = l(), { orientation: _ } = e(), v = o(), y = o(), b = {
+		completed: g.formatMessage({
+			id: "unity:component:timeline:state:completed",
+			defaultMessage: "Completed"
+		}),
+		current: g.formatMessage({
+			id: "unity:component:timeline:state:current",
+			defaultMessage: "In progress"
+		}),
+		pending: g.formatMessage({
+			id: "unity:component:timeline:state:pending",
+			defaultMessage: "Pending"
+		})
+	};
+	return /* @__PURE__ */ c("li", {
+		ref: h,
+		className: t({
+			orientation: _,
+			className: d
+		}),
+		"aria-current": a === "current" ? "step" : void 0,
+		"aria-labelledby": v,
+		"aria-describedby": y,
+		children: [
+			/* @__PURE__ */ s(n, {
+				state: a,
+				stepNumber: u
+			}),
+			/* @__PURE__ */ s("span", {
+				id: y,
+				className: "uy:sr-only",
+				children: b[a]
+			}),
+			/* @__PURE__ */ s(r, {
+				labelId: v,
+				children: /* @__PURE__ */ s(i, {
+					statusSlot: f,
+					actionSlot: p,
+					children: m
+				})
+			})
+		]
+	});
+});
+u.displayName = "TimelineStep";
+//#endregion
+export { u as TimelineStep };

package/dist/esm/core/components/timeline/parts/TimelineStepContent.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/timeline/parts/TimelineStepContent.context.tsx
+var r = e(null);
+function i({ children: e, statusSlot: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { statusSlot: t },
+		children: e
+	});
+}
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useTimelineStepContentContext must be used within TimelineStepContent");
+	return e;
+}
+//#endregion
+export { r as TimelineStepContentContext, i as TimelineStepContentProvider, a as useTimelineStepContentContext };

package/dist/esm/core/components/timeline/parts/TimelineStepContent.js

@@ -0,0 +1,31 @@
+import { useTimelineContext as e } from "../Timeline.context.js";
+import { timelineContent as t } from "../Timeline.variants.js";
+import { useIsHorizontalDesktop as n } from "../Timeline.utils.js";
+import { TimelineStepContentProvider as r } from "./TimelineStepContent.context.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/core/components/timeline/parts/TimelineStepContent.tsx
+var s = i(({ className: i, children: s, statusSlot: c, actionSlot: l }, u) => {
+	let { orientation: d } = e(), f = n();
+	return /* @__PURE__ */ a(r, {
+		statusSlot: c,
+		children: /* @__PURE__ */ o("div", {
+			ref: u,
+			className: t({
+				orientation: d,
+				className: i
+			}),
+			children: [
+				s,
+				f && c && /* @__PURE__ */ a("div", {
+					"aria-hidden": "true",
+					children: c
+				}),
+				l
+			]
+		})
+	});
+});
+s.displayName = "TimelineStepContent";
+//#endregion
+export { s as TimelineStepContent };

package/dist/esm/core/components/timeline/parts/TimelineStepDescription.js

@@ -0,0 +1,13 @@
+import { Text as e } from "../../text/Text.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/timeline/parts/TimelineStepDescription.tsx
+var r = t(({ children: t }, r) => /* @__PURE__ */ n(e, {
+	ref: r,
+	variant: "body",
+	color: "content.neutral",
+	children: t
+}));
+r.displayName = "TimelineStepDescription";
+//#endregion
+export { r as TimelineStepDescription };

package/dist/esm/core/components/timeline/parts/TimelineStepHeader.js

@@ -0,0 +1,35 @@
+import { Text as e } from "../../text/Text.js";
+import { useTimelineStepContext as t } from "./TimelineStep.context.js";
+import { useIsHorizontalDesktop as n } from "../Timeline.utils.js";
+import { useTimelineStepContentContext as r } from "./TimelineStepContent.context.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/core/components/timeline/parts/TimelineStepHeader.tsx
+var s = i(({ title: i, subtitle: s, asHeader: c = "h3" }, l) => {
+	let { statusSlot: u } = r(), { labelId: d } = t(), f = !n() && u;
+	return /* @__PURE__ */ o("header", {
+		ref: l,
+		className: "uy:flex uy:flex-col uy:gap-0 uy:items-start uy:w-full",
+		children: [/* @__PURE__ */ o("div", {
+			className: "uy:flex uy:gap-100 uy:items-start uy:w-full",
+			children: [/* @__PURE__ */ a(e, {
+				variant: "bodyStrong",
+				color: "content.neutral",
+				className: "uy:flex-1",
+				asElement: c,
+				id: d,
+				children: i
+			}), f && /* @__PURE__ */ a("div", {
+				"aria-hidden": "true",
+				children: u
+			})]
+		}), s && /* @__PURE__ */ a(e, {
+			variant: "bodySmall",
+			color: "content.neutral.lowest",
+			children: s
+		})]
+	});
+});
+s.displayName = "TimelineStepHeader";
+//#endregion
+export { s as TimelineStepHeader };

package/dist/esm/core/components/timeline/parts/check.js

@@ -0,0 +1,23 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/core/components/timeline/parts/check.svg?react
+var t = (t) => /* @__PURE__ */ e("svg", {
+	fill: "none",
+	height: 20,
+	viewBox: "0 0 20 20",
+	width: 20,
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("g", {
+		id: "check",
+		children: /* @__PURE__ */ e("path", {
+			clipRule: "evenodd",
+			d: "M16.0669 5.80806C16.311 6.05214 16.311 6.44786 16.0669 6.69194L8.56694 14.1919C8.32286 14.436 7.92714 14.436 7.68306 14.1919L4.55806 11.0669C4.31398 10.8229 4.31398 10.4271 4.55806 10.1831C4.80214 9.93898 5.19786 9.93898 5.44194 10.1831L8.125 12.8661L15.1831 5.80806C15.4271 5.56398 15.8229 5.56398 16.0669 5.80806Z",
+			fill: "white",
+			fillRule: "evenodd",
+			id: "Vector"
+		})
+	})
+});
+//#endregion
+export { t as default };

package/dist/esm/core/components/toast/ToastManager.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Toaster as t } from "react-hot-toast";
+//#region src/core/components/toast/ToastManager.tsx
+var n = {
+	error: { duration: Infinity },
+	success: { duration: 5e3 }
+}, r = () => /* @__PURE__ */ e(t, {
+	position: "top-right",
+	gutter: 8,
+	toastOptions: { removeDelay: 0 }
+});
+//#endregion
+export { n as TOAST_CONFIG, r as ToastManager };

package/dist/esm/core/components/toast/UnityToast.js

@@ -0,0 +1,70 @@
+import { Icon as e } from "../icon/Icon.js";
+import { IconButton as t } from "../icon-button/IconButton.js";
+import { ToastTitle as n } from "./parts/ToastTitle.js";
+import { Children as r, Fragment as i, isValidElement as a } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useIntl as l } from "react-intl";
+//#region src/core/components/toast/UnityToast.tsx
+var u = o({
+	slots: {
+		base: "uy:sm:max-w-52 uy:border uy:border-solid  uy:rounded-125 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-300 uy:p-150 uy:flex uy:gap-125 uy:border-border-neutral",
+		contentWrapper: "uy:flex uy:grow uy:ml-125 uy:flex-col",
+		divider: "    uy:hidden"
+	},
+	variants: { variant: {
+		success: "",
+		error: ""
+	} }
+}), d = (e) => {
+	let t = a(e) && e.type === i ? e.props.children : e;
+	if (r.toArray(t).filter((e) => a(e) && e.type === n).length !== 1) throw Error("UnityToast must have one ToastTitle component");
+}, f = ({ children: n, onClose: r, variant: i, ...a }) => {
+	let o = l();
+	d(n);
+	let { base: f, contentWrapper: p, divider: m } = u({ variant: i });
+	return /* @__PURE__ */ c("div", {
+		"data-dd-privacy": "mask",
+		...a,
+		tabIndex: -1,
+		role: i === "error" ? "alert" : "status",
+		"aria-atomic": "true",
+		"aria-live": i === "error" ? "assertive" : "polite",
+		className: f(),
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "uy:flex uy:flex-row uy:grow",
+				children: [/* @__PURE__ */ s(e, {
+					src: i === "success" ? "CheckCircleFilled" : "WarningCircleFilled",
+					color: i === "success" ? "content.success" : "content.danger",
+					className: "uy:mt-100",
+					alt: o.formatMessage({
+						id: "unity:component:toast:icon:status",
+						defaultMessage: "Status"
+					})
+				}), /* @__PURE__ */ s("div", {
+					className: p(),
+					children: n
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				role: "presentation",
+				className: m()
+			}),
+			/* @__PURE__ */ s(t, {
+				icon: "CloseOutlined",
+				iconRole: "presentation",
+				label: o.formatMessage({
+					id: "unity:component:common:close:label",
+					defaultMessage: "Close"
+				}),
+				variant: "ghost",
+				color: "neutral",
+				onClick: r
+			})
+		]
+	});
+};
+f.displayName = "UnityToast";
+//#endregion
+export { f as UnityToast };

package/dist/esm/core/components/toast/parts/ToastAction.js

@@ -0,0 +1,17 @@
+import { Button as e } from "../../button/Button.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/core/components/toast/parts/ToastAction.tsx
+function n({ children: n, onPress: r }) {
+	return /* @__PURE__ */ t("div", {
+		className: "uy:self-start",
+		children: /* @__PURE__ */ t(e, {
+			variant: "secondary",
+			color: "primary",
+			onPress: r,
+			children: n
+		})
+	});
+}
+n.displayName = "ToastAction";
+//#endregion
+export { n as ToastAction };

package/dist/esm/core/components/toast/parts/ToastContent.js

@@ -0,0 +1,13 @@
+import { Text as e } from "../../text/Text.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/core/components/toast/parts/ToastContent.tsx
+function n({ children: n }) {
+	return /* @__PURE__ */ t(e, {
+		variant: "body",
+		className: "uy:mb-100",
+		children: n
+	});
+}
+n.displayName = "ToastContent";
+//#endregion
+export { n as ToastContent };

package/dist/esm/core/components/toast/parts/ToastTitle.js

@@ -0,0 +1,14 @@
+import { Text as e } from "../../text/Text.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/core/components/toast/parts/ToastTitle.tsx
+function n({ children: n }) {
+	return /* @__PURE__ */ t(e, {
+		asElement: "h4",
+		variant: "bodyStrong",
+		className: "uy:mt-100",
+		children: n
+	});
+}
+n.displayName = "ToastTitle";
+//#endregion
+export { n as ToastTitle };