@payfit/unity-components/dist/esm/components/error-state/ErrorState.js

import { Icon as e } from "../icon/Icon.js";
import { Button as t } from "../button/Button.js";
import { Text as n } from "../text/Text.js";
import { useContainerQueryLevel as r } from "../../hooks/use-container-query-level.js";
import { Code as i } from "../code/Code.js";
import { initConfig as a } from "./initConfig.js";
import { Collapsible as o } from "./parts/Collapsible.js";
import { forwardRef as s, useCallback as c, useRef as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useIntl as f } from "react-intl";
import { Illustration as p } from "@payfit/unity-illustrations";
import { tv as m } from "tailwind-variants";
//#region src/components/error-state/ErrorState.tsx
var h = m({ slots: {
	container: ["uy:@container uy:w-full uy:h-full uy:content-center uy:flex-1"],
	wrapper: [
		"uy:border-solid uy:border-border-neutral uy:border uy:rounded-200 uy:p-300",
		"uy:@section:py-600 uy:@section:px-auto",
		"uy:@page:border-0 uy:@page:py-auto uy:@page:px-auto",
		"uy:@app:border-0 uy:@app:py-auto uy:@app:px-auto"
	],
	base: ["uy:max-w-[704px] uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250 uy:w-full uy:justify-self-center"],
	illustration: [
		"uy:@section:block",
		"uy:hidden",
		"uy:@page:w-[200px]",
		"uy:@section:w-[200px]",
		"uy:@app:w-[240px]"
	],
	icon: ["uy:bg-surface-neutral-lowest uy:rounded-125 uy:p-100", "uy:@section:hidden"],
	informationContainer: ["uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-150 uy:text-center uy"],
	information: [
		"uy:hidden",
		"",
		"uy:@section:block"
	],
	informationComponent: ["uy:block", "uy:@section:hidden"],
	h1: ["uy:hidden uy:@app:block"],
	h2: ["uy:hidden uy:@page:@max-app:block"],
	h3: ["uy:hidden uy:@section:@max-page:block"],
	h4: ["uy:block uy:@section:hidden"],
	description: ["uy:hidden uy:@section:block uy:@section:w-full"]
} }), g = (e, t) => /* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u("div", {
	className: "uy:mb-200",
	children: e.detailDescription ?? t?.detailDescription
}), /* @__PURE__ */ u(i, { children: e.error.message })] }), _ = (e, n) => /* @__PURE__ */ u("div", {
	className: "uy:mt-200 uy:@section:block uy:hidden",
	children: /* @__PURE__ */ u(t, {
		onClick: () => {
			window.history.go(-1);
		},
		color: "primary",
		variant: "ghost",
		children: e.backButtonLabel ?? n?.backButtonLabel
	})
}), v = s((i, o) => {
	let { icon: s, illustration: m, onButtonPress: v, buttonLabel: y, mainTitle: b, mainDescription: x, mainDescriptionComponent: S, type: C, error: w, role: T = "status" } = i, { base: E, container: D, wrapper: O, illustration: k, icon: A, informationContainer: j, information: M, informationComponent: N, description: P, h1: F, h2: I, h3: L, h4: R } = h(), z = f(), B = a(z), V = l(null), { level: H } = r({ ref: V }), U = c((e) => {
		V.current = e, o && (typeof o == "function" ? o(e) : o.current = e);
	}, [o]), W = C === "404" ? "404" : "unknown";
	C === "generic" && w && (W = "known");
	let G = B.get(W), K = m ?? G?.illustration, q = s ?? G?.icon, J = y ?? G?.buttonLabel, Y = b ?? G?.mainTitle, X = x ?? G?.mainDescription, Z = S ?? G?.mainDescriptionComponent;
	return /* @__PURE__ */ u("div", {
		role: T,
		className: D(),
		ref: U,
		"data-container-level": H,
		children: /* @__PURE__ */ u("div", {
			className: O(),
			children: /* @__PURE__ */ d("div", {
				className: E(),
				children: [
					K && /* @__PURE__ */ u(p, {
						src: K,
						variant: "picture",
						alt: z.formatMessage({
							id: "unity:component:error-state:common:illustration:alt",
							defaultMessage: "Error states"
						}),
						className: k(),
						isDecorative: !0
					}),
					q && /* @__PURE__ */ u(e, {
						src: q,
						size: 24,
						color: "content.neutral.low",
						alt: z.formatMessage({
							id: "unity:component:error-state:common:icon:alt",
							defaultMessage: "Error states"
						}),
						className: A()
					}),
					/* @__PURE__ */ d("div", {
						className: j(),
						children: [
							/* @__PURE__ */ u(n, {
								asElement: "h1",
								variant: "h1",
								color: "content.neutral",
								className: F(),
								children: Y
							}),
							/* @__PURE__ */ u(n, {
								asElement: "h2",
								variant: "h2",
								color: "content.neutral",
								className: I(),
								children: Y
							}),
							/* @__PURE__ */ u(n, {
								asElement: "h3",
								variant: "h3",
								color: "content.neutral",
								className: L(),
								children: Y
							}),
							/* @__PURE__ */ u(n, {
								asElement: "h4",
								variant: "h4",
								color: "content.neutral",
								className: R(),
								children: Y
							}),
							/* @__PURE__ */ u(n, {
								asElement: "p",
								variant: "body",
								color: "content.neutral.low",
								className: M(),
								children: X
							}),
							/* @__PURE__ */ u(n, {
								asElement: "p",
								variant: "body",
								color: "content.neutral.low",
								className: N(),
								children: Z
							})
						]
					}),
					/* @__PURE__ */ u(t, {
						variant: H === "component" ? "ghost" : "primary",
						onPress: v,
						children: J
					}),
					W === "unknown" && _(i, G),
					W === "known" && /* @__PURE__ */ u("div", {
						className: P(),
						children: g(i, G)
					})
				]
			})
		})
	});
});
v.displayName = "ErrorState";
//#endregion
export { v as ErrorState, h as errorState };