@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/error-state/ErrorState.js

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

package/dist/esm/components/error-state/initConfig.js

@@ -1,149 +1,91 @@
-import { jsx as r } from "react/jsx-runtime";
-import t from "@payfit/unity-illustrations/assets/EmptyStateIncidentPanel";
-import a from "@payfit/unity-illustrations/assets/EmptyStateResearch";
-import { RawLink as n } from "../link/RawLink.js";
-const c = (e) => /* @__PURE__ */ new Map([
-  [
-    "known",
-    {
-      illustration: t,
-      icon: "WarningCircleOutlined",
-      mainTitle: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-title",
-          defaultMessage: "Something went wrong"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:known:main-description",
-          defaultMessage: "Please refresh the page or check your connection.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescriptionComponent: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-description-component",
-          defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      buttonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:button:label",
-          defaultMessage: "Go to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      detailDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:detail-description",
-          defaultMessage: "Here's the technical error detail.<br></br> <br></br>If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:"
-        },
-        {
-          br: () => /* @__PURE__ */ r("br", {}),
-          Link: (o) => /* @__PURE__ */ r(
-            n,
-            {
-              variant: "inline",
-              isExternal: !0,
-              color: "primary",
-              href: e.formatMessage({
-                id: "unity:component:common:customer-support:url"
-              }),
-              children: o
-            }
-          )
-        }
-      )
-    }
-  ],
-  [
-    "unknown",
-    {
-      illustration: t,
-      icon: "WarningCircleOutlined",
-      mainTitle: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-title",
-          defaultMessage: "Something went wrong"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:unknown:main-description",
-          defaultMessage: "Please refresh the page or try signing in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br>If the problem continues, please contact <Link>our customer support</Link>."
-        },
-        {
-          br: () => /* @__PURE__ */ r("br", {}),
-          Link: (o) => /* @__PURE__ */ r(
-            n,
-            {
-              variant: "inline",
-              isExternal: !0,
-              color: "primary",
-              href: e.formatMessage({
-                id: "unity:component:common:customer-support:url"
-              }),
-              children: o
-            }
-          )
-        }
-      ),
-      mainDescriptionComponent: e.formatMessage(
-        {
-          id: "unity:component:error-state:common:main-description-component",
-          defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      buttonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:button:label",
-          defaultMessage: "Go to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      backButtonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:unknown:back-link:label",
-          defaultMessage: "Back to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      )
-    }
-  ],
-  [
-    "404",
-    {
-      illustration: a,
-      icon: "WarningCircleOutlined",
-      mainTitle: e.formatMessage(
-        {
-          id: "unity:component:error-state:404:main-title",
-          defaultMessage: "Sorry, we couldn’t find what you’re looking for"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      mainDescription: e.formatMessage(
-        {
-          id: "unity:component:error-state:404:main-description",
-          defaultMessage: "This item may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard."
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      ),
-      buttonLabel: e.formatMessage(
-        {
-          id: "unity:component:error-state:button:label",
-          defaultMessage: "Go to dashboard"
-        },
-        { br: () => /* @__PURE__ */ r("br", {}) }
-      )
-    }
-  ]
+import { RawLink as e } from "../link/RawLink.js";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@payfit/unity-illustrations/assets/EmptyStateIncidentPanel";
+import r from "@payfit/unity-illustrations/assets/EmptyStateResearch";
+//#region src/components/error-state/initConfig.tsx
+var i = (i) => new Map([
+	["known", {
+		illustration: n,
+		icon: "WarningCircleOutlined",
+		mainTitle: i.formatMessage({
+			id: "unity:component:error-state:common:main-title",
+			defaultMessage: "Something went wrong"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: i.formatMessage({
+			id: "unity:component:error-state:known:main-description",
+			defaultMessage: "Please refresh the page or check your connection.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescriptionComponent: i.formatMessage({
+			id: "unity:component:error-state:common:main-description-component",
+			defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		buttonLabel: i.formatMessage({
+			id: "unity:component:error-state:button:label",
+			defaultMessage: "Go to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		detailDescription: i.formatMessage({
+			id: "unity:component:error-state:detail-description",
+			defaultMessage: "Here's the technical error detail.<br></br> <br></br>If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:"
+		}, {
+			br: () => /* @__PURE__ */ t("br", {}),
+			Link: (n) => /* @__PURE__ */ t(e, {
+				variant: "inline",
+				isExternal: !0,
+				color: "primary",
+				href: i.formatMessage({ id: "unity:component:common:customer-support:url" }),
+				children: n
+			})
+		})
+	}],
+	["unknown", {
+		illustration: n,
+		icon: "WarningCircleOutlined",
+		mainTitle: i.formatMessage({
+			id: "unity:component:error-state:common:main-title",
+			defaultMessage: "Something went wrong"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: i.formatMessage({
+			id: "unity:component:error-state:unknown:main-description",
+			defaultMessage: "Please refresh the page or try signing in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br>If the problem continues, please contact <Link>our customer support</Link>."
+		}, {
+			br: () => /* @__PURE__ */ t("br", {}),
+			Link: (n) => /* @__PURE__ */ t(e, {
+				variant: "inline",
+				isExternal: !0,
+				color: "primary",
+				href: i.formatMessage({ id: "unity:component:common:customer-support:url" }),
+				children: n
+			})
+		}),
+		mainDescriptionComponent: i.formatMessage({
+			id: "unity:component:error-state:common:main-description-component",
+			defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		buttonLabel: i.formatMessage({
+			id: "unity:component:error-state:button:label",
+			defaultMessage: "Go to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		backButtonLabel: i.formatMessage({
+			id: "unity:component:error-state:unknown:back-link:label",
+			defaultMessage: "Back to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) })
+	}],
+	["404", {
+		illustration: r,
+		icon: "WarningCircleOutlined",
+		mainTitle: i.formatMessage({
+			id: "unity:component:error-state:404:main-title",
+			defaultMessage: "Sorry, we couldn’t find what you’re looking for"
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		mainDescription: i.formatMessage({
+			id: "unity:component:error-state:404:main-description",
+			defaultMessage: "This item may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard."
+		}, { br: () => /* @__PURE__ */ t("br", {}) }),
+		buttonLabel: i.formatMessage({
+			id: "unity:component:error-state:button:label",
+			defaultMessage: "Go to dashboard"
+		}, { br: () => /* @__PURE__ */ t("br", {}) })
+	}]
 ]);
-export {
-  c as initConfig
-};
+//#endregion
+export { i as initConfig };