@lifi/widget 4.0.0-beta.9 → 4.1.0

package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.js

@@ -0,0 +1,273 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { ExecutionChecklist } from "./ExecutionChecklist.js";
+import { StaggeredRevealTypography } from "./StaggeredRevealTypography.js";
+import { Box, Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+import { stagger } from "motion";
+import * as m from "motion/react-m";
+//#region src/components/ExecutionStatusCard/ExecutionStatusCard.tsx
+const containerVariants = {
+	hidden: {
+		opacity: 0,
+		scale: .97
+	},
+	visible: {
+		opacity: 1,
+		scale: 1,
+		transition: {
+			duration: .3,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			],
+			delayChildren: stagger(.06)
+		}
+	}
+};
+const heroColumnVariants = {
+	hidden: {},
+	visible: { transition: { delayChildren: stagger(.04) } }
+};
+const heroItemVariants = {
+	hidden: { opacity: 0 },
+	visible: {
+		opacity: 1,
+		transition: {
+			duration: .3,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	}
+};
+const titleVariants = {
+	hidden: {
+		opacity: 0,
+		y: 10,
+		filter: "blur(2px)"
+	},
+	visible: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			duration: .3,
+			ease: [
+				.19,
+				1,
+				.22,
+				1
+			]
+		}
+	},
+	exit: {
+		opacity: 0,
+		y: -10,
+		filter: "blur(2px)",
+		transition: {
+			duration: .05,
+			ease: [
+				.19,
+				1,
+				.22,
+				1
+			]
+		}
+	}
+};
+/** No enter animation — the per-word stagger reveals it. Exit timing matches the title. */
+const textContainerVariants = {
+	hidden: {
+		opacity: 0,
+		transition: {
+			duration: .05,
+			ease: [
+				.215,
+				.61,
+				.355,
+				1
+			]
+		}
+	},
+	visible: {
+		opacity: 1,
+		transition: { duration: 0 }
+	}
+};
+/**
+* Animate height explicitly. A plain `layout` animation sets `height: auto`
+* immediately, so the card background would jump to full height before the
+* content appears. `layout` stays only to animate the checklist's position
+* when the hero column above it resizes.
+*/
+const checklistVariants = {
+	hidden: {
+		height: 0,
+		opacity: 0,
+		transition: {
+			duration: .3,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	},
+	visible: {
+		height: "auto",
+		opacity: 1,
+		transition: {
+			duration: .3,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	}
+};
+const layoutTransition = {
+	duration: .3,
+	ease: [
+		.19,
+		1,
+		.22,
+		1
+	]
+};
+const WORD_STAGGER_DELAY = .08;
+function ExecutionStatusCard({ title, description, rows, iconSlot, footerSlot, vcSlot }) {
+	const hasRows = rows.length > 0;
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2
+		},
+		children: [/* @__PURE__ */ jsx(Card$1, {
+			type: "default",
+			indented: true,
+			children: /* @__PURE__ */ jsxs(m.div, {
+				variants: containerVariants,
+				initial: "hidden",
+				animate: "visible",
+				style: {
+					width: "100%",
+					transformOrigin: "top center"
+				},
+				children: [/* @__PURE__ */ jsxs(Box, {
+					component: m.div,
+					layout: true,
+					transition: { layout: layoutTransition },
+					variants: heroColumnVariants,
+					sx: {
+						width: "100%",
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						textAlign: "center",
+						boxSizing: "border-box"
+					},
+					children: [
+						/* @__PURE__ */ jsx(m.div, {
+							layout: true,
+							variants: heroItemVariants,
+							style: {
+								width: "100%",
+								display: "flex",
+								justifyContent: "center"
+							},
+							children: iconSlot
+						}),
+						title && /* @__PURE__ */ jsx(m.div, {
+							layout: true,
+							variants: heroItemVariants,
+							style: {
+								width: "100%",
+								paddingTop: 12
+							},
+							children: /* @__PURE__ */ jsx(AnimatePresence, {
+								initial: false,
+								mode: "wait",
+								children: /* @__PURE__ */ jsx(m.div, {
+									variants: titleVariants,
+									initial: "hidden",
+									animate: "visible",
+									exit: "exit",
+									style: { width: "100%" },
+									children: /* @__PURE__ */ jsx(Typography, {
+										sx: {
+											fontSize: 16,
+											fontWeight: 600,
+											lineHeight: 1.4,
+											textAlign: "center"
+										},
+										children: title
+									})
+								}, title)
+							})
+						}),
+						/* @__PURE__ */ jsx(AnimatePresence, {
+							initial: false,
+							mode: "popLayout",
+							children: description && /* @__PURE__ */ jsx(m.div, {
+								variants: textContainerVariants,
+								initial: "hidden",
+								animate: "visible",
+								exit: "hidden",
+								style: {
+									width: "100%",
+									paddingTop: 4
+								},
+								children: /* @__PURE__ */ jsx(StaggeredRevealTypography, {
+									text: description,
+									delay: WORD_STAGGER_DELAY,
+									sx: {
+										fontSize: 14,
+										fontWeight: 500,
+										color: "text.secondary",
+										textAlign: "center"
+									}
+								})
+							}, description)
+						}),
+						vcSlot && /* @__PURE__ */ jsx(m.div, {
+							layout: true,
+							variants: heroItemVariants,
+							style: { width: "100%" },
+							children: vcSlot
+						})
+					]
+				}), /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					children: hasRows && /* @__PURE__ */ jsx(m.div, {
+						layout: true,
+						transition: { layout: layoutTransition },
+						variants: checklistVariants,
+						initial: "hidden",
+						animate: "visible",
+						exit: "hidden",
+						style: { width: "100%" },
+						children: /* @__PURE__ */ jsx(ExecutionChecklist, { rows })
+					}, "checklist")
+				})]
+			})
+		}), /* @__PURE__ */ jsx(m.div, {
+			layout: true,
+			transition: { layout: layoutTransition },
+			children: footerSlot
+		})]
+	});
+}
+//#endregion
+export { ExecutionStatusCard };
+
+//# sourceMappingURL=ExecutionStatusCard.js.map

package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionStatusCard.js","names":["Card"],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionStatusCard.tsx"],"sourcesContent":["import { Box, Typography } from '@mui/material'\nimport { stagger } from 'motion'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX, ReactNode } from 'react'\nimport { Card } from '../Card/Card.js'\nimport type { ExecutionRow } from '../StepActions/executionRows.js'\nimport { ExecutionChecklist } from './ExecutionChecklist.js'\nimport { StaggeredRevealTypography } from './StaggeredRevealTypography.js'\n\ninterface ExecutionStatusCardProps {\n  /** Title for the current phase. `undefined` until an action has a message. */\n  title: string | undefined\n  /** Subtitle under the title. `undefined` when the action has no description. */\n  description: string | undefined\n  /** Completed step rows for the animated checklist. */\n  rows: ExecutionRow[]\n  /** The top icon: a `StatusIcon`, or a contract component for the custom variant. */\n  iconSlot: ReactNode\n  /** Footer card: `ExecutionDoneCard` when done, otherwise `RouteTokens`. */\n  footerSlot: ReactNode\n  /** Partner/VC component, shown after the icon/title when done. */\n  vcSlot?: ReactNode\n}\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0, scale: 0.97 },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    transition: {\n      duration: 0.3,\n      ease: [0.22, 1, 0.36, 1],\n      delayChildren: stagger(0.06),\n    },\n  },\n}\n\nconst heroColumnVariants: Variants = {\n  hidden: {},\n  visible: { transition: { delayChildren: stagger(0.04) } },\n}\n\nconst heroItemVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst titleVariants: Variants = {\n  hidden: { opacity: 0, y: 10, filter: 'blur(2px)' },\n  visible: {\n    opacity: 1,\n    y: 0,\n    filter: 'blur(0px)',\n    transition: { duration: 0.3, ease: [0.19, 1, 0.22, 1] },\n  },\n  exit: {\n    opacity: 0,\n    y: -10,\n    filter: 'blur(2px)',\n    transition: { duration: 0.05, ease: [0.19, 1, 0.22, 1] },\n  },\n}\n\n/** No enter animation — the per-word stagger reveals it. Exit timing matches the title. */\nconst textContainerVariants: Variants = {\n  hidden: {\n    opacity: 0,\n    transition: { duration: 0.05, ease: [0.215, 0.61, 0.355, 1] },\n  },\n  visible: { opacity: 1, transition: { duration: 0 } },\n}\n\n/**\n * Animate height explicitly. A plain `layout` animation sets `height: auto`\n * immediately, so the card background would jump to full height before the\n * content appears. `layout` stays only to animate the checklist's position\n * when the hero column above it resizes.\n */\nconst checklistVariants: Variants = {\n  hidden: {\n    height: 0,\n    opacity: 0,\n    transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n  },\n  visible: {\n    height: 'auto',\n    opacity: 1,\n    transition: { duration: 0.3, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst layoutTransition: Transition = { duration: 0.3, ease: [0.19, 1, 0.22, 1] }\n\nconst WORD_STAGGER_DELAY = 0.08\n\nexport function ExecutionStatusCard({\n  title,\n  description,\n  rows,\n  iconSlot,\n  footerSlot,\n  vcSlot,\n}: ExecutionStatusCardProps): JSX.Element {\n  const hasRows = rows.length > 0\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n      {/*\n       * Keep Card non-animated. Animating its layout would combine with the\n       * rows' layout animations and make the rows jump. Its height follows\n       * the checklist through normal layout instead.\n       */}\n      <Card type=\"default\" indented>\n        <m.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          style={{ width: '100%', transformOrigin: 'top center' }}\n        >\n          <Box\n            component={m.div}\n            layout\n            transition={{ layout: layoutTransition }}\n            variants={heroColumnVariants}\n            sx={{\n              width: '100%',\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'center',\n              textAlign: 'center',\n              boxSizing: 'border-box',\n            }}\n          >\n            <m.div\n              layout\n              variants={heroItemVariants}\n              style={{\n                width: '100%',\n                display: 'flex',\n                justifyContent: 'center',\n              }}\n            >\n              {iconSlot}\n            </m.div>\n\n            {title && (\n              <m.div\n                layout\n                variants={heroItemVariants}\n                style={{ width: '100%', paddingTop: 12 }}\n              >\n                <AnimatePresence initial={false} mode=\"wait\">\n                  <m.div\n                    key={title}\n                    variants={titleVariants}\n                    initial=\"hidden\"\n                    animate=\"visible\"\n                    exit=\"exit\"\n                    style={{ width: '100%' }}\n                  >\n                    <Typography\n                      sx={{\n                        fontSize: 16,\n                        fontWeight: 600,\n                        lineHeight: 1.4,\n                        textAlign: 'center',\n                      }}\n                    >\n                      {title}\n                    </Typography>\n                  </m.div>\n                </AnimatePresence>\n              </m.div>\n            )}\n\n            {/* mode=\"popLayout\": old description leaves layout at once so the column reflows */}\n            <AnimatePresence initial={false} mode=\"popLayout\">\n              {description && (\n                <m.div\n                  key={description}\n                  variants={textContainerVariants}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  style={{ width: '100%', paddingTop: 4 }}\n                >\n                  <StaggeredRevealTypography\n                    text={description}\n                    delay={WORD_STAGGER_DELAY}\n                    sx={{\n                      fontSize: 14,\n                      fontWeight: 500,\n                      color: 'text.secondary',\n                      textAlign: 'center',\n                    }}\n                  />\n                </m.div>\n              )}\n            </AnimatePresence>\n\n            {vcSlot && (\n              <m.div\n                layout\n                variants={heroItemVariants}\n                style={{ width: '100%' }}\n              >\n                {vcSlot}\n              </m.div>\n            )}\n          </Box>\n\n          <AnimatePresence initial={false}>\n            {hasRows && (\n              <m.div\n                key=\"checklist\"\n                layout\n                transition={{ layout: layoutTransition }}\n                variants={checklistVariants}\n                initial=\"hidden\"\n                animate=\"visible\"\n                exit=\"hidden\"\n                style={{ width: '100%' }}\n              >\n                <ExecutionChecklist rows={rows} />\n              </m.div>\n            )}\n          </AnimatePresence>\n        </m.div>\n      </Card>\n\n      {/* layout makes the footer shift smoothly when the card above grows */}\n      <m.div layout transition={{ layout: layoutTransition }}>\n        {footerSlot}\n      </m.div>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/ExecutionStatusCard/StaggeredRevealTypography.js

@@ -0,0 +1,47 @@
+import { Fragment } from "react";
+import { Typography } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+//#region src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx
+const WORD_DURATION = .3;
+const WORD_BOUNCE = 0;
+const WORD_ENTER_Y = 4;
+/**
+* Reveals text with a word-level stagger animation on mount.
+* Callers should remount via `key={text}` when the text changes.
+*/
+function StaggeredRevealTypography({ text, delay, ...props }) {
+	if (useReducedMotion()) return /* @__PURE__ */ jsx(Typography, {
+		...props,
+		children: text
+	});
+	const words = text.split(" ");
+	const perWordDuration = words.length > 1 ? WORD_DURATION * .6 : WORD_DURATION;
+	const staggerInterval = (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1);
+	return /* @__PURE__ */ jsx(Typography, {
+		...props,
+		children: words.map((word, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && " ", /* @__PURE__ */ jsx(m.span, {
+			initial: {
+				opacity: 0,
+				y: WORD_ENTER_Y
+			},
+			animate: {
+				opacity: 1,
+				y: 0
+			},
+			transition: {
+				type: "spring",
+				visualDuration: perWordDuration,
+				bounce: WORD_BOUNCE,
+				delay: (delay ?? 0) + i * staggerInterval
+			},
+			style: { display: "inline-block" },
+			children: word
+		})] }, i))
+	});
+}
+//#endregion
+export { StaggeredRevealTypography };
+
+//# sourceMappingURL=StaggeredRevealTypography.js.map

package/dist/esm/components/ExecutionStatusCard/StaggeredRevealTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaggeredRevealTypography.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StaggeredRevealTypography.tsx"],"sourcesContent":["import { Typography, type TypographyProps } from '@mui/material'\nimport { useReducedMotion } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport { Fragment } from 'react'\n\nconst WORD_DURATION = 0.3\nconst WORD_BOUNCE = 0\nconst WORD_ENTER_Y = 4\n\nexport type StaggeredRevealTypographyProps = {\n  text: string\n  /** Seconds before the first word begins animating. */\n  delay?: number\n} & Omit<TypographyProps, 'children'>\n\n/**\n * Reveals text with a word-level stagger animation on mount.\n * Callers should remount via `key={text}` when the text changes.\n */\nexport function StaggeredRevealTypography({\n  text,\n  delay,\n  ...props\n}: StaggeredRevealTypographyProps): JSX.Element {\n  const reduceMotion = useReducedMotion()\n\n  if (reduceMotion) {\n    return <Typography {...props}>{text}</Typography>\n  }\n\n  const words = text.split(' ')\n  const perWordDuration = words.length > 1 ? WORD_DURATION * 0.6 : WORD_DURATION\n  const staggerInterval =\n    (WORD_DURATION - perWordDuration) / Math.max(1, words.length - 1)\n\n  return (\n    <Typography {...props}>\n      {words.map((word, i) => (\n        <Fragment key={i}>\n          {i > 0 && ' '}\n          <m.span\n            initial={{ opacity: 0, y: WORD_ENTER_Y }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{\n              type: 'spring',\n              visualDuration: perWordDuration,\n              bounce: WORD_BOUNCE,\n              delay: (delay ?? 0) + i * staggerInterval,\n            }}\n            style={{ display: 'inline-block' }}\n          >\n            {word}\n          </m.span>\n        </Fragment>\n      ))}\n    </Typography>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAM,gBAAgB;AACtB,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;AAYrB,SAAgB,0BAA0B,EACxC,MACA,OACA,GAAG,SAC2C;CAG9C,IAFqB,iBAEN,GACb,OAAO,oBAAC,YAAD;EAAY,GAAI;YAAQ;CAAiB,CAAA;CAGlD,MAAM,QAAQ,KAAK,MAAM,GAAG;CAC5B,MAAM,kBAAkB,MAAM,SAAS,IAAI,gBAAgB,KAAM;CACjE,MAAM,mBACH,gBAAgB,mBAAmB,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC;CAElE,OACE,oBAAC,YAAD;EAAY,GAAI;YACb,MAAM,KAAK,MAAM,MAChB,qBAAC,UAAD,EAAA,UAAA,CACG,IAAI,KAAK,KACV,oBAAC,EAAE,MAAH;GACE,SAAS;IAAE,SAAS;IAAG,GAAG;GAAa;GACvC,SAAS;IAAE,SAAS;IAAG,GAAG;GAAE;GAC5B,YAAY;IACV,MAAM;IACN,gBAAgB;IAChB,QAAQ;IACR,QAAQ,SAAS,KAAK,IAAI;GAC5B;GACA,OAAO,EAAE,SAAS,eAAe;aAEhC;EACK,CAAA,CACA,EAAA,GAfK,CAeL,CACX;CACS,CAAA;AAEhB"}

package/dist/esm/components/ExecutionStatusCard/StatusIcon.js

@@ -0,0 +1,122 @@
+import { IconCircle } from "../IconCircle/IconCircle.js";
+import { TimerRing } from "../Timer/StepStatusTimer.js";
+import { resolveExecutionIconKey } from "./iconKey.js";
+import { StatusIconContainer } from "./StatusIcon.style.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+import * as m from "motion/react-m";
+//#region src/components/ExecutionStatusCard/StatusIcon.tsx
+const ICON_EXIT = {
+	duration: .08,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+const iconEnterConfig = {
+	success: {
+		initialScale: .6,
+		transition: {
+			type: "spring",
+			visualDuration: .3,
+			bounce: .18
+		}
+	},
+	warning: {
+		initialScale: .75,
+		transition: {
+			type: "spring",
+			visualDuration: .27,
+			bounce: .1
+		}
+	},
+	error: {
+		initialScale: .75,
+		transition: {
+			duration: .18,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	},
+	info: {
+		initialScale: .8,
+		transition: {
+			duration: .2,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	},
+	timer: {
+		initialScale: .85,
+		transition: {
+			duration: .22,
+			ease: [
+				.22,
+				1,
+				.36,
+				1
+			]
+		}
+	}
+};
+const iconVariants = {
+	hidden: (key) => ({
+		opacity: 0,
+		scale: iconEnterConfig[key].initialScale
+	}),
+	visible: (key) => ({
+		opacity: 1,
+		scale: 1,
+		transition: iconEnterConfig[key].transition
+	}),
+	exit: {
+		opacity: 0,
+		scale: .8,
+		filter: "blur(4px)",
+		transition: {
+			duration: ICON_EXIT.duration,
+			ease: ICON_EXIT.ease
+		}
+	}
+};
+/**
+* The animated status icon. Each state animates in its own way; they all
+* animate out the same way.
+*/
+function StatusIcon({ route, status }) {
+	const iconKey = resolveExecutionIconKey(route, status);
+	const step = route.steps.at(-1);
+	return /* @__PURE__ */ jsx(StatusIconContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		initial: false,
+		children: /* @__PURE__ */ jsx(m.div, {
+			custom: iconKey,
+			variants: iconVariants,
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			style: {
+				position: "absolute",
+				inset: 0,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			children: iconKey === "timer" ? /* @__PURE__ */ jsx(TimerRing, { step }) : /* @__PURE__ */ jsx(IconCircle, { status: iconKey })
+		}, iconKey)
+	}) });
+}
+//#endregion
+export { StatusIcon };
+
+//# sourceMappingURL=StatusIcon.js.map

package/dist/esm/components/ExecutionStatusCard/StatusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport type { Transition, Variants } from 'motion/react'\nimport { AnimatePresence } from 'motion/react'\nimport * as m from 'motion/react-m'\nimport type { JSX } from 'react'\nimport type { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { TimerRing } from '../Timer/StepStatusTimer.js'\nimport type { ExecutionIconKey } from './iconKey.js'\nimport { resolveExecutionIconKey } from './iconKey.js'\nimport { StatusIconContainer } from './StatusIcon.style.js'\n\nconst ICON_EXIT = { duration: 0.08, ease: [0.22, 1, 0.36, 1] as const }\n\nconst iconEnterConfig: Record<\n  ExecutionIconKey,\n  { initialScale: number; transition: Transition }\n> = {\n  success: {\n    initialScale: 0.6,\n    transition: { type: 'spring', visualDuration: 0.3, bounce: 0.18 },\n  },\n  warning: {\n    initialScale: 0.75,\n    transition: { type: 'spring', visualDuration: 0.27, bounce: 0.1 },\n  },\n  error: {\n    initialScale: 0.75,\n    transition: { duration: 0.18, ease: [0.22, 1, 0.36, 1] },\n  },\n  info: {\n    initialScale: 0.8,\n    transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },\n  },\n  timer: {\n    initialScale: 0.85,\n    transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },\n  },\n}\n\nconst iconVariants: Variants = {\n  hidden: (key: ExecutionIconKey) => ({\n    opacity: 0,\n    scale: iconEnterConfig[key].initialScale,\n  }),\n  visible: (key: ExecutionIconKey) => ({\n    opacity: 1,\n    scale: 1,\n    transition: iconEnterConfig[key].transition,\n  }),\n  exit: {\n    opacity: 0,\n    scale: 0.8,\n    filter: 'blur(4px)',\n    transition: { duration: ICON_EXIT.duration, ease: ICON_EXIT.ease },\n  },\n}\n\ninterface StatusIconProps {\n  route: RouteExtended\n  status: RouteExecutionStatus\n}\n\n/**\n * The animated status icon. Each state animates in its own way; they all\n * animate out the same way.\n */\nexport function StatusIcon({ route, status }: StatusIconProps): JSX.Element {\n  const iconKey = resolveExecutionIconKey(route, status)\n  const step = route.steps.at(-1)\n\n  return (\n    <StatusIconContainer>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <m.div\n          key={iconKey}\n          custom={iconKey}\n          variants={iconVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"exit\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          {iconKey === 'timer' ? (\n            <TimerRing step={step} />\n          ) : (\n            <IconCircle status={iconKey} />\n          )}\n        </m.div>\n      </AnimatePresence>\n    </StatusIconContainer>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,YAAY;CAAE,UAAU;CAAM,MAAM;EAAC;EAAM;EAAG;EAAM;CAAC;AAAW;AAEtE,MAAM,kBAGF;CACF,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAK,QAAQ;EAAK;CAClE;CACA,SAAS;EACP,cAAc;EACd,YAAY;GAAE,MAAM;GAAU,gBAAgB;GAAM,QAAQ;EAAI;CAClE;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;CACA,MAAM;EACJ,cAAc;EACd,YAAY;GAAE,UAAU;GAAK,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACxD;CACA,OAAO;EACL,cAAc;EACd,YAAY;GAAE,UAAU;GAAM,MAAM;IAAC;IAAM;IAAG;IAAM;GAAC;EAAE;CACzD;AACF;AAEA,MAAM,eAAyB;CAC7B,SAAS,SAA2B;EAClC,SAAS;EACT,OAAO,gBAAgB,IAAI,CAAC;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,IAAI,CAAC;CACnC;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,YAAY;GAAE,UAAU,UAAU;GAAU,MAAM,UAAU;EAAK;CACnE;AACF;;;;;AAWA,SAAgB,WAAW,EAAE,OAAO,UAAwC;CAC1E,MAAM,UAAU,wBAAwB,OAAO,MAAM;CACrD,MAAM,OAAO,MAAM,MAAM,GAAG,EAAE;CAE9B,OACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD;EAAiB,MAAK;EAAY,SAAS;YACzC,oBAAC,EAAE,KAAH;GAEE,QAAQ;GACR,UAAU;GACV,SAAQ;GACR,SAAQ;GACR,MAAK;GACL,OAAO;IACL,UAAU;IACV,OAAO;IACP,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;aAEC,YAAY,UACX,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAExB,oBAAC,YAAD,EAAY,QAAQ,QAAU,CAAA;EAE3B,GAnBA,OAmBA;CACQ,CAAA,EACE,CAAA;AAEzB"}

package/dist/esm/components/ExecutionStatusCard/StatusIcon.style.js

@@ -0,0 +1,14 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/ExecutionStatusCard/StatusIcon.style.tsx
+const StatusIconContainer = styled(Box)({
+	position: "relative",
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	width: 90,
+	height: 90
+});
+//#endregion
+export { StatusIconContainer };
+
+//# sourceMappingURL=StatusIcon.style.js.map

package/dist/esm/components/ExecutionStatusCard/StatusIcon.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.style.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\n\nexport const StatusIconContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)({\n    position: 'relative',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    width: iconCircleSize,\n    height: iconCircleSize,\n  })\n"],"mappings":";;AAIA,MAAa,sBACX,OAAO,GAAG,CAAC,CAAC;CACV,UAAU;CACV,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,OAAA;CACA,QAAA;AACF,CAAC"}

package/dist/esm/components/ExecutionStatusCard/iconKey.js

@@ -0,0 +1,13 @@
+import { hasEnumFlag } from "../../utils/enum.js";
+//#region src/components/ExecutionStatusCard/iconKey.ts
+/** Maps route execution state to an {@link ExecutionIconKey}. Pure function. */
+function resolveExecutionIconKey(route, status) {
+	if (hasEnumFlag(status, 4)) return hasEnumFlag(status, 16) || hasEnumFlag(status, 32) ? "warning" : "success";
+	if (hasEnumFlag(status, 8)) return "error";
+	if ((route.steps.find((step) => step.execution?.status === "PENDING" || step.execution?.status === "ACTION_REQUIRED") ?? route.steps.at(-1))?.execution?.status === "ACTION_REQUIRED") return "info";
+	return "timer";
+}
+//#endregion
+export { resolveExecutionIconKey };
+
+//# sourceMappingURL=iconKey.js.map

package/dist/esm/components/ExecutionStatusCard/iconKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconKey.js","names":[],"sources":["../../../../src/components/ExecutionStatusCard/iconKey.ts"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { hasEnumFlag } from '../../utils/enum.js'\n\n/** Visual state of the execution status indicator. */\nexport type ExecutionIconKey =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'info'\n  | 'timer'\n\n/** Maps route execution state to an {@link ExecutionIconKey}. Pure function. */\nexport function resolveExecutionIconKey(\n  route: RouteExtended,\n  status: RouteExecutionStatus\n): ExecutionIconKey {\n  if (hasEnumFlag(status, RouteExecutionStatus.Done)) {\n    return hasEnumFlag(status, RouteExecutionStatus.Partial) ||\n      hasEnumFlag(status, RouteExecutionStatus.Refunded)\n      ? 'warning'\n      : 'success'\n  }\n  if (hasEnumFlag(status, RouteExecutionStatus.Failed)) {\n    return 'error'\n  }\n  const activeStep =\n    route.steps.find(\n      (step) =>\n        step.execution?.status === 'PENDING' ||\n        step.execution?.status === 'ACTION_REQUIRED'\n    ) ?? route.steps.at(-1)\n  if (activeStep?.execution?.status === 'ACTION_REQUIRED') {\n    return 'info'\n  }\n  return 'timer'\n}\n"],"mappings":";;;AAaA,SAAgB,wBACd,OACA,QACkB;CAClB,IAAI,YAAY,QAAA,CAAiC,GAC/C,OAAO,YAAY,QAAA,EAAoC,KACrD,YAAY,QAAA,EAAqC,IAC/C,YACA;CAEN,IAAI,YAAY,QAAA,CAAmC,GACjD,OAAO;CAQT,KALE,MAAM,MAAM,MACT,SACC,KAAK,WAAW,WAAW,aAC3B,KAAK,WAAW,WAAW,iBAC/B,KAAK,MAAM,MAAM,GAAG,EAAE,EAAA,EACR,WAAW,WAAW,mBACpC,OAAO;CAET,OAAO;AACT"}

package/dist/esm/components/Expansion/Expansion.js

@@ -1,30 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from 'react';
-import { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js';
-import { ExpansionType } from '../../types/widget.js';
-import { ChainsExpanded } from '../Chains/ChainsExpanded.js';
-import { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js';
-import { RoutesExpanded } from '../Routes/RoutesExpanded.js';
-import { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js';
-import { ExpansionContainer } from './Expansion.style.js';
-export function Expansion() {
-    const [withChainExpansion, expansionType] = useHasChainExpansion();
-    const chainExpansionTypeRef = useRef(expansionType);
-    const [routesOpen, setRoutesOpen] = useState(false);
-    // Track the previous chain expansion type to avoid re-renders when transitioning to Routes
-    if (expansionType === ExpansionType.FromChain ||
-        expansionType === ExpansionType.ToChain) {
-        chainExpansionTypeRef.current = expansionType;
-    }
-    const containerWidth = useMemo(() => {
-        return routesOpen
-            ? routesExpansionWidth
-            : withChainExpansion
-                ? chainExpansionWidth
-                : 0;
-    }, [routesOpen, withChainExpansion]);
-    return (_jsxs(ExpansionContainer, { width: containerWidth, children: [_jsx(RoutesExpanded, { canOpen: expansionType === ExpansionType.Routes, setOpenExpansion: setRoutesOpen }), _jsx(ChainsExpanded, { formType: chainExpansionTypeRef.current === ExpansionType.FromChain
-                    ? 'from'
-                    : 'to', open: withChainExpansion })] }));
+import "../../types/widget.js";
+import { useHasChainExpansion } from "../../hooks/useHasChainExpansion.js";
+import { ExpansionContainer } from "./Expansion.style.js";
+import { chainExpansionWidth } from "../Chains/ChainsExpanded.style.js";
+import { ChainsExpanded } from "../Chains/ChainsExpanded.js";
+import { routesExpansionWidth } from "../Routes/RoutesExpanded.style.js";
+import { RoutesExpanded } from "../Routes/RoutesExpanded.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Expansion/Expansion.tsx
+function Expansion() {
+	const [withChainExpansion, expansionType] = useHasChainExpansion();
+	const chainExpansionTypeRef = useRef(expansionType);
+	const [routesOpen, setRoutesOpen] = useState(false);
+	if (expansionType === "fromChain" || expansionType === "toChain") chainExpansionTypeRef.current = expansionType;
+	return /* @__PURE__ */ jsxs(ExpansionContainer, {
+		width: useMemo(() => {
+			return routesOpen ? routesExpansionWidth : withChainExpansion ? chainExpansionWidth : 0;
+		}, [routesOpen, withChainExpansion]),
+		children: [/* @__PURE__ */ jsx(RoutesExpanded, {
+			canOpen: expansionType === "routes",
+			setOpenExpansion: setRoutesOpen
+		}), /* @__PURE__ */ jsx(ChainsExpanded, {
+			formType: chainExpansionTypeRef.current === "fromChain" ? "from" : "to",
+			open: withChainExpansion
+		})]
+	});
 }
+//#endregion
+export { Expansion };
+
 //# sourceMappingURL=Expansion.js.map

package/dist/esm/components/Expansion/Expansion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expansion.js","sourceRoot":"","sources":["../../../../src/components/Expansion/Expansion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD,MAAM,UAAU,SAAS;IACvB,MAAM,CAAC,kBAAkB,EAAE,aAAa,CAAC,GAAG,oBAAoB,EAAE,CAAA;IAClE,MAAM,qBAAqB,GAAG,MAAM,CAAgB,aAAa,CAAC,CAAA;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEnD,2FAA2F;IAC3F,IACE,aAAa,KAAK,aAAa,CAAC,SAAS;QACzC,aAAa,KAAK,aAAa,CAAC,OAAO,EACvC,CAAC;QACD,qBAAqB,CAAC,OAAO,GAAG,aAAa,CAAA;IAC/C,CAAC;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,UAAU;YACf,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,kBAAkB;gBAClB,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,CAAC,CAAA;IACT,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAEpC,OAAO,CACL,MAAC,kBAAkB,IAAC,KAAK,EAAE,cAAc,aACvC,KAAC,cAAc,IACb,OAAO,EAAE,aAAa,KAAK,aAAa,CAAC,MAAM,EAC/C,gBAAgB,EAAE,aAAa,GAC/B,EACF,KAAC,cAAc,IACb,QAAQ,EACN,qBAAqB,CAAC,OAAO,KAAK,aAAa,CAAC,SAAS;oBACvD,CAAC,CAAC,MAAM;oBACR,CAAC,CAAC,IAAI,EAEV,IAAI,EAAE,kBAAkB,GACxB,IACiB,CACtB,CAAA;AACH,CAAC"}
+{"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n  const [withChainExpansion, expansionType] = useHasChainExpansion()\n  const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n  const [routesOpen, setRoutesOpen] = useState(false)\n\n  // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n  if (\n    expansionType === ExpansionType.FromChain ||\n    expansionType === ExpansionType.ToChain\n  ) {\n    chainExpansionTypeRef.current = expansionType\n  }\n\n  const containerWidth = useMemo(() => {\n    return routesOpen\n      ? routesExpansionWidth\n      : withChainExpansion\n        ? chainExpansionWidth\n        : 0\n  }, [routesOpen, withChainExpansion])\n\n  return (\n    <ExpansionContainer width={containerWidth}>\n      <RoutesExpanded\n        canOpen={expansionType === ExpansionType.Routes}\n        setOpenExpansion={setRoutesOpen}\n      />\n      <ChainsExpanded\n        formType={\n          chainExpansionTypeRef.current === ExpansionType.FromChain\n            ? 'from'\n            : 'to'\n        }\n        open={withChainExpansion}\n      />\n    </ExpansionContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,qBAAqB;CACjE,MAAM,wBAAwB,OAAsB,aAAa;CACjE,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAGlD,IACE,kBAAA,eACA,kBAAA,WAEA,sBAAsB,UAAU;CAWlC,OACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;GACnC,OAAO,aACH,uBACA,qBACE,sBACA;EACR,GAAG,CAAC,YAAY,kBAAkB,CAGQ;YAAxC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;EACnB,CAAA,GACD,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;EACP,CAAA,CACiB;;AAExB"}