@lifi/widget 4.3.1 → 4.5.0

package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.d.ts

@@ -0,0 +1,21 @@
+import { ExecutionRow } from "../StepActions/executionRows.js";
+import { JSX, ReactNode } from "react";
+//#region src/components/ExecutionStatusCard/ExecutionStatusCard.d.ts
+interface ExecutionStatusCardProps {
+  /** Title for the current phase. `undefined` until an action has a message. */
+  title: string | undefined;
+  /** Subtitle under the title. `undefined` when the action has no description. */
+  description: string | undefined;
+  /** Completed step rows for the animated checklist. */
+  rows: ExecutionRow[];
+  /** The top icon: a `StatusIcon`, or a contract component for the custom variant. */
+  iconSlot: ReactNode;
+  /** Footer card: `ExecutionDoneCard` when done, otherwise `RouteTokens`. */
+  footerSlot: ReactNode;
+  /** Partner/VC component, shown after the icon/title when done. */
+  vcSlot?: ReactNode;
+}
+declare function ExecutionStatusCard({ title, description, rows, iconSlot, footerSlot, vcSlot }: ExecutionStatusCardProps): JSX.Element;
+//#endregion
+export { ExecutionStatusCard };
+//# sourceMappingURL=ExecutionStatusCard.d.ts.map

package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionStatusCard.d.ts","names":[],"sources":["../../../../src/components/ExecutionStatusCard/ExecutionStatusCard.tsx"],"mappings":";;;UAWU;;EAER;;EAEA;;EAEA,MAAM;;EAEN,UAAU;;EAEV,YAAY;;EAEZ,SAAS;;iBA6EK,sBACd,OACA,aACA,MACA,UACA,YACA,UACC,2BAA2B,IAAI"}

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

@@ -1 +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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"}
+{"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.map

@@ -1 +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"}
+{"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;EAAQ,UAAA;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;EACb,UAAA,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;GAEhC,UAAA;EACK,CAAA,CACA,EAAA,GAfK,CAeL,CACX;CACS,CAAA;AAEhB"}

package/dist/esm/components/ExecutionStatusCard/StatusIcon.d.ts

@@ -0,0 +1,16 @@
+import { RouteExecutionStatus } from "../../stores/routes/types.js";
+import { RouteExtended } from "@lifi/sdk";
+import { JSX } from "react";
+//#region src/components/ExecutionStatusCard/StatusIcon.d.ts
+interface StatusIconProps {
+  route: RouteExtended;
+  status: RouteExecutionStatus;
+}
+/**
+ * The animated status icon. Each state animates in its own way; they all
+ * animate out the same way.
+ */
+declare function StatusIcon({ route, status }: StatusIconProps): JSX.Element;
+//#endregion
+export { StatusIcon };
+//# sourceMappingURL=StatusIcon.d.ts.map

package/dist/esm/components/ExecutionStatusCard/StatusIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.d.ts","names":[],"sources":["../../../../src/components/ExecutionStatusCard/StatusIcon.tsx"],"mappings":";;;;UA0DU;EACR,OAAO;EACP,QAAQ;;;;;;iBAOM,aAAa,OAAO,UAAU,kBAAkB,IAAI"}

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

@@ -1 +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"}
+{"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;EACzC,UAAA,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;GAEC,UAAA,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/iconKey.js

@@ -1,4 +1,5 @@
 import { hasEnumFlag } from "../../utils/enum.js";
+import "../../stores/routes/types.js";
 //#region src/components/ExecutionStatusCard/iconKey.ts
 /** Maps route execution state to an {@link ExecutionIconKey}. Pure function. */
 function resolveExecutionIconKey(route, status) {

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

@@ -1 +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"}
+{"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.map

@@ -1 +1 @@
-{"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"}
+{"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;EAAxC,UAAA,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n  animationDuration,\n  defaultStyle,\n  transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n  in: boolean\n  width: string\n  onExited?: () => void\n}\n\nexport function ExpansionTransition({\n  in: inProp,\n  children,\n  width,\n  onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n  const nodeRef = useRef(null)\n  return (\n    <Transition\n      nodeRef={nodeRef}\n      in={inProp}\n      timeout={animationDuration}\n      onExited={onExited}\n      mountOnEnter\n      unmountOnExit\n    >\n      {(state) => {\n        return (\n          <Box\n            ref={nodeRef}\n            style={{\n              ...defaultStyle,\n              ...transitionStyles[state as keyof typeof transitionStyles],\n              width,\n            }}\n          >\n            {children}\n          </Box>\n        )\n      }}\n    </Transition>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,IAAI;CAC3B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;aAEE,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;IACF;IAEC;GACE,CAAA;EAET;CACU,CAAA;AAEhB"}
+{"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n  animationDuration,\n  defaultStyle,\n  transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n  in: boolean\n  width: string\n  onExited?: () => void\n}\n\nexport function ExpansionTransition({\n  in: inProp,\n  children,\n  width,\n  onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n  const nodeRef = useRef(null)\n  return (\n    <Transition\n      nodeRef={nodeRef}\n      in={inProp}\n      timeout={animationDuration}\n      onExited={onExited}\n      mountOnEnter\n      unmountOnExit\n    >\n      {(state) => {\n        return (\n          <Box\n            ref={nodeRef}\n            style={{\n              ...defaultStyle,\n              ...transitionStyles[state as keyof typeof transitionStyles],\n              width,\n            }}\n          >\n            {children}\n          </Box>\n        )\n      }}\n    </Transition>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,IAAI;CAC3B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;EAEE,WAAA,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;IACF;IAEC;GACE,CAAA;EAET;CACU,CAAA;AAEhB"}

package/dist/esm/components/FeeBreakdownTooltip.d.ts

@@ -0,0 +1,13 @@
+import { FeesBreakdown } from "../utils/fees.js";
+import { ReactElement } from "react";
+//#region src/components/FeeBreakdownTooltip.d.ts
+interface FeeBreakdownTooltipProps {
+  gasCosts?: FeesBreakdown[];
+  feeCosts?: FeesBreakdown[];
+  gasless?: boolean;
+  children: ReactElement<any, any>;
+}
+declare const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps>;
+//#endregion
+export { FeeBreakdownTooltip };
+//# sourceMappingURL=FeeBreakdownTooltip.d.ts.map

package/dist/esm/components/FeeBreakdownTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeeBreakdownTooltip.d.ts","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"mappings":";;;UAOU;EACR,WAAW;EACX,WAAW;EACX;EACA,UAAU;;cAGC,qBAAqB,MAAM,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n  gasCosts?: FeesBreakdown[]\n  feeCosts?: FeesBreakdown[]\n  gasless?: boolean\n  children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n  gasCosts,\n  feeCosts,\n  gasless,\n  children,\n}) => {\n  const { t } = useTranslation()\n  return (\n    <Tooltip\n      title={\n        <Box>\n          {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n          {gasCosts?.length && !gasless ? (\n            <Box>\n              {t('main.fees.network')}\n              {getFeeBreakdownTypography(gasCosts, t)}\n            </Box>\n          ) : null}\n          {feeCosts?.length && !gasless ? (\n            <Box\n              sx={{\n                mt: 0.5,\n              }}\n            >\n              {t('main.fees.provider')}\n              {getFeeBreakdownTypography(feeCosts, t)}\n            </Box>\n          ) : null}\n        </Box>\n      }\n      sx={{ cursor: 'help' }}\n    >\n      {children}\n    </Tooltip>\n  )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n  fees.map((fee, index) => (\n    <Typography\n      color=\"inherit\"\n      key={`${fee.token.address}${index}`}\n      sx={{\n        fontSize: 12,\n        fontWeight: '500',\n      }}\n    >\n      {t('format.currency', { value: fee.amountUSD })} (\n      {t('format.tokenAmount', {\n        value: formatTokenAmount(fee.amount, fee.token.decimals),\n      })}{' '}\n      {fee.token.symbol})\n    </Typography>\n  ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,iBAAiB,EAAO,CAAA,IAAI;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,mBAAmB,GACrB,0BAA0B,UAAU,CAAC,CACnC,EAAA,CAAA,IACH;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACN;cAHF,CAKG,EAAE,oBAAoB,GACtB,0BAA0B,UAAU,CAAC,CACnC;QACH;EACD,EAAA,CAAA;EAEP,IAAI,EAAE,QAAQ,OAAO;EAEpB;CACM,CAAA;AAEb;AAEA,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;CACd;WANF;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,UAAU,CAAC;EAAE;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,EACzD,CAAC;EAAG;EACH,IAAI,MAAM;EAAO;CACR;GAXL,GAAG,IAAI,MAAM,UAAU,OAWlB,CACb"}
+{"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n  gasCosts?: FeesBreakdown[]\n  feeCosts?: FeesBreakdown[]\n  gasless?: boolean\n  children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n  gasCosts,\n  feeCosts,\n  gasless,\n  children,\n}) => {\n  const { t } = useTranslation()\n  return (\n    <Tooltip\n      title={\n        <Box>\n          {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n          {gasCosts?.length && !gasless ? (\n            <Box>\n              {t('main.fees.network')}\n              {getFeeBreakdownTypography(gasCosts, t)}\n            </Box>\n          ) : null}\n          {feeCosts?.length && !gasless ? (\n            <Box\n              sx={{\n                mt: 0.5,\n              }}\n            >\n              {t('main.fees.provider')}\n              {getFeeBreakdownTypography(feeCosts, t)}\n            </Box>\n          ) : null}\n        </Box>\n      }\n      sx={{ cursor: 'help' }}\n    >\n      {children}\n    </Tooltip>\n  )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n  fees.map((fee, index) => (\n    <Typography\n      color=\"inherit\"\n      key={`${fee.token.address}${index}`}\n      sx={{\n        fontSize: 12,\n        fontWeight: '500',\n      }}\n    >\n      {t('format.currency', { value: fee.amountUSD })} (\n      {t('format.tokenAmount', {\n        value: formatTokenAmount(fee.amount, fee.token.decimals),\n      })}{' '}\n      {fee.token.symbol})\n    </Typography>\n  ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,iBAAiB,EAAO,CAAA,IAAI;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,mBAAmB,GACrB,0BAA0B,UAAU,CAAC,CACnC,EAAA,CAAA,IACH;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACN;IAHF,UAAA,CAKG,EAAE,oBAAoB,GACtB,0BAA0B,UAAU,CAAC,CACnC;GACH,CAAA,IAAA;EACD,EAAA,CAAA;EAEP,IAAI,EAAE,QAAQ,OAAO;EAEpB;CACM,CAAA;AAEb;AAEA,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;CACd;CANF,UAAA;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,UAAU,CAAC;EAAE;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,EACzD,CAAC;EAAG;EACH,IAAI,MAAM;EAAO;CACR;AAXL,GAAA,GAAG,IAAI,MAAM,UAAU,OAWlB,CACb"}

package/dist/esm/components/Header/ActivitiesButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivitiesButton.js","names":[],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport {\n  ActivitiesIconButton,\n  ErrorBadge,\n  IconContainer,\n  ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const indicator = useRouteExecutionIndicator()\n\n  return (\n    <Tooltip title={t('header.activities')}>\n      <ActivitiesIconButton\n        active={indicator.active || indicator.failed}\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.activities })}\n        disableRipple={indicator.active || indicator.failed}\n      >\n        <ErrorBadge\n          invisible={!indicator.failed}\n          badgeContent={\n            <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n          }\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        >\n          <IconContainer>\n            {(indicator.active || indicator.failed) && (\n              <ProgressTrack\n                variant=\"determinate\"\n                value={100}\n                size={40}\n                thickness={3}\n              />\n            )}\n            {indicator.active && (\n              <CircularProgressPending\n                size={40}\n                sx={{ position: 'absolute', top: -8, left: -8 }}\n              />\n            )}\n            <HistoryIcon />\n          </IconContainer>\n        </ErrorBadge>\n      </ActivitiesIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,2BAA2B;CAE7C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,mBAAmB;YACnC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,WAAW,CAAC;GAC3D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA;IAE9D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;IAAQ;cAErD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;KACZ,CAAA;KAEF,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;MAAG;KAC/C,CAAA;KAEH,oBAAC,aAAD,CAAc,CAAA;IACD,EAAA,CAAA;GACL,CAAA;EACQ,CAAA;CACf,CAAA;AAEb"}
+{"version":3,"file":"ActivitiesButton.js","names":[],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport {\n  ActivitiesIconButton,\n  ErrorBadge,\n  IconContainer,\n  ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const indicator = useRouteExecutionIndicator()\n\n  return (\n    <Tooltip title={t('header.activities')}>\n      <ActivitiesIconButton\n        active={indicator.active || indicator.failed}\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.activities })}\n        disableRipple={indicator.active || indicator.failed}\n      >\n        <ErrorBadge\n          invisible={!indicator.failed}\n          badgeContent={\n            <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n          }\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        >\n          <IconContainer>\n            {(indicator.active || indicator.failed) && (\n              <ProgressTrack\n                variant=\"determinate\"\n                value={100}\n                size={40}\n                thickness={3}\n              />\n            )}\n            {indicator.active && (\n              <CircularProgressPending\n                size={40}\n                sx={{ position: 'absolute', top: -8, left: -8 }}\n              />\n            )}\n            <HistoryIcon />\n          </IconContainer>\n        </ErrorBadge>\n      </ActivitiesIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,YAAY,2BAA2B;CAE7C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,mBAAmB;EACnC,UAAA,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,WAAW,CAAC;GAC3D,eAAe,UAAU,UAAU,UAAU;GAE7C,UAAA,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA;IAE9D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;IAAQ;IAErD,UAAA,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;KACZ,CAAA;KAEF,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;MAAG;KAC/C,CAAA;KAEH,oBAAC,aAAD,CAAc,CAAA;IACD,EAAA,CAAA;GACL,CAAA;EACQ,CAAA;CACf,CAAA;AAEb"}

package/dist/esm/components/Header/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n  const theme = useTheme()\n  const navigateBack = useNavigateBack()\n  const [backAction, executeBackAction] = useHeaderStore((state) => [\n    state.backAction,\n    state.executeBackAction,\n  ])\n\n  return (\n    <IconButton\n      size=\"medium\"\n      edge={theme?.navigation?.edge ? 'start' : false}\n      onClick={() => {\n        if (backAction) {\n          executeBackAction()\n        } else {\n          navigateBack()\n        }\n      }}\n    >\n      <ArrowBack />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,iBACR,CAAC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,kBAAkB;QAElB,aAAa;EAEjB;YAEA,oBAAC,WAAD,CAAY,CAAA;CACF,CAAA;AAEhB"}
+{"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n  const theme = useTheme()\n  const navigateBack = useNavigateBack()\n  const [backAction, executeBackAction] = useHeaderStore((state) => [\n    state.backAction,\n    state.executeBackAction,\n  ])\n\n  return (\n    <IconButton\n      size=\"medium\"\n      edge={theme?.navigation?.edge ? 'start' : false}\n      onClick={() => {\n        if (backAction) {\n          executeBackAction()\n        } else {\n          navigateBack()\n        }\n      }}\n    >\n      <ArrowBack />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB;CACrC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,iBACR,CAAC;CAED,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,kBAAkB;QAElB,aAAa;EAEjB;EAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;CACF,CAAA;AAEhB"}

package/dist/esm/components/Header/CloseDrawerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n  header?: 'navigation' | 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n  header,\n}: CloseDrawerButtonProps): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { closeDrawer } = useDrawer()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const showInNavigationHeader =\n    header === 'navigation' && useExternalWalletProvidersOnly\n\n  const showInWalletHeader = header === 'wallet'\n\n  return showInNavigationHeader || showInWalletHeader ? (\n    <Tooltip title={t('button.close')}>\n      <IconButton\n        size=\"medium\"\n        data-testid=\"widget-close-drawer-button\"\n        onClick={closeDrawer}\n      >\n        <CloseRounded />\n      </IconButton>\n    </Tooltip>\n  ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,gBAAgB,UAAU;CAClC,MAAM,EAAE,mCAAmC,0BAA0B;CAOrE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,cAAc;YAC9B,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;aAET,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}
+{"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n  header?: 'navigation' | 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n  header,\n}: CloseDrawerButtonProps): JSX.Element | null => {\n  const { t } = useTranslation()\n  const { closeDrawer } = useDrawer()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const showInNavigationHeader =\n    header === 'navigation' && useExternalWalletProvidersOnly\n\n  const showInWalletHeader = header === 'wallet'\n\n  return showInNavigationHeader || showInWalletHeader ? (\n    <Tooltip title={t('button.close')}>\n      <IconButton\n        size=\"medium\"\n        data-testid=\"widget-close-drawer-button\"\n        onClick={closeDrawer}\n      >\n        <CloseRounded />\n      </IconButton>\n    </Tooltip>\n  ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,gBAAgB,UAAU;CAClC,MAAM,EAAE,mCAAmC,0BAA0B;CAOrE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,cAAc;EAC9B,UAAA,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;GAET,UAAA,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}

package/dist/esm/components/Header/DisconnectIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n  account,\n}: {\n  account: Account\n}): JSX.Element => {\n  const disconnect = useAccountDisconnect()\n  return (\n    <IconButton\n      size=\"medium\"\n      onClick={async (e) => {\n        e.stopPropagation()\n        await disconnect(account)\n      }}\n    >\n      <PowerSettingsNewRounded />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,qBAAqB;CACxC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,gBAAgB;GAClB,MAAM,WAAW,OAAO;EAC1B;YAEA,oBAAC,yBAAD,CAA0B,CAAA;CAChB,CAAA;AAEhB"}
+{"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n  account,\n}: {\n  account: Account\n}): JSX.Element => {\n  const disconnect = useAccountDisconnect()\n  return (\n    <IconButton\n      size=\"medium\"\n      onClick={async (e) => {\n        e.stopPropagation()\n        await disconnect(account)\n      }}\n    >\n      <PowerSettingsNewRounded />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,qBAAqB;CACxC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,gBAAgB;GAClB,MAAM,WAAW,OAAO;EAC1B;EAEA,UAAA,oBAAC,yBAAD,CAA0B,CAAA;CAChB,CAAA;AAEhB"}

package/dist/esm/components/Header/HeaderTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\ninterface HeaderTab<K extends string> {\n  key: K\n  label: string\n}\n\ninterface HeaderTabsProps<K extends string> {\n  tabs: HeaderTab<K>[]\n  value: K\n  onChange: (key: K) => void\n}\n\n/**\n * Presentational header tabs bar shared by split mode and configured\n * navigation tabs.\n * Clears the form fields on switch; the caller supplies the labelled tabs, the\n * active key, and what selecting a key means for its store.\n */\nexport const HeaderTabs = <K extends string>({\n  tabs,\n  value,\n  onChange,\n}: HeaderTabsProps<K>): JSX.Element => {\n  const { setFieldValue } = useFieldActions()\n\n  const handleChange = (_: React.SyntheticEvent, key: K) => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('fromToken', '')\n    setFieldValue('toToken', '')\n    onChange(key)\n  }\n\n  return (\n    <NavigationTabs value={value} onChange={handleChange} aria-label=\"tabs\">\n      {tabs.map((tab) => (\n        <NavigationTab\n          key={tab.key}\n          value={tab.key}\n          label={tab.label}\n          disableRipple\n        />\n      ))}\n    </NavigationTabs>\n  )\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAgC,EAC3C,MACA,OACA,eACqC;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,gBAAgB,GAAyB,QAAW;EACxD,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,GAAG;CACd;CAEA,OACE,oBAAC,gBAAD;EAAuB;EAAO,UAAU;EAAc,cAAW;YAC9D,KAAK,KAAK,QACT,oBAAC,eAAD;GAEE,OAAO,IAAI;GACX,OAAO,IAAI;GACX,eAAA;EACD,GAJM,IAAI,GAIV,CACF;CACa,CAAA;AAEpB"}
+{"version":3,"file":"HeaderTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\ninterface HeaderTab<K extends string> {\n  key: K\n  label: string\n}\n\ninterface HeaderTabsProps<K extends string> {\n  tabs: HeaderTab<K>[]\n  value: K\n  onChange: (key: K) => void\n}\n\n/**\n * Presentational header tabs bar shared by split mode and configured\n * navigation tabs.\n * Clears the form fields on switch; the caller supplies the labelled tabs, the\n * active key, and what selecting a key means for its store.\n */\nexport const HeaderTabs = <K extends string>({\n  tabs,\n  value,\n  onChange,\n}: HeaderTabsProps<K>): JSX.Element => {\n  const { setFieldValue } = useFieldActions()\n\n  const handleChange = (_: React.SyntheticEvent, key: K) => {\n    setFieldValue('fromAmount', '')\n    setFieldValue('fromToken', '')\n    setFieldValue('toToken', '')\n    onChange(key)\n  }\n\n  return (\n    <NavigationTabs value={value} onChange={handleChange} aria-label=\"tabs\">\n      {tabs.map((tab) => (\n        <NavigationTab\n          key={tab.key}\n          value={tab.key}\n          label={tab.label}\n          disableRipple\n        />\n      ))}\n    </NavigationTabs>\n  )\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAgC,EAC3C,MACA,OACA,eACqC;CACrC,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,MAAM,gBAAgB,GAAyB,QAAW;EACxD,cAAc,cAAc,EAAE;EAC9B,cAAc,aAAa,EAAE;EAC7B,cAAc,WAAW,EAAE;EAC3B,SAAS,GAAG;CACd;CAEA,OACE,oBAAC,gBAAD;EAAuB;EAAO,UAAU;EAAc,cAAW;EAC9D,UAAA,KAAK,KAAK,QACT,oBAAC,eAAD;GAEE,OAAO,IAAI;GACX,OAAO,IAAI;GACX,eAAA;EACD,GAJM,IAAI,GAIV,CACF;CACa,CAAA;AAEpB"}

package/dist/esm/components/Header/NavigationHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport {\n  backButtonRoutes,\n  navigationRoutes,\n  navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { HeaderNavigationTabs } from './HeaderNavigationTabs.js'\nimport { SettingsButton } from './SettingsButton.js'\n\nexport const NavigationHeader: React.FC = () => {\n  const { hiddenUI, variant, defaultUI } = useWidgetConfig()\n  const navigationTabsCount = useNavigationTabsStore(\n    (state) => state.tabs.length\n  )\n  const { account } = useAccount()\n  const [element, title] = useHeaderStore((state) => [\n    state.element,\n    state.title,\n  ])\n  const { pathname } = useLocation()\n  const cleanedPathname = pathname.endsWith('/')\n    ? pathname.slice(0, -1)\n    : pathname\n  const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n  const hasPath = navigationRoutesValues.includes(path)\n\n  // The store resolves which tabs to show (split Swap/Bridge or configured\n  // navigation tabs); the header just reflects whether there are any.\n  const showHeaderTabs = !hasPath && navigationTabsCount > 0\n\n  return (\n    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n      {backButtonRoutes.includes(path) ? <BackButton /> : null}\n      {showHeaderTabs ? (\n        <Box sx={{ flex: 1, marginRight: 1 }}>\n          <HeaderNavigationTabs />\n        </Box>\n      ) : (\n        <Typography\n          align={hasPath ? 'center' : 'left'}\n          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n          sx={{\n            fontSize: hasPath ? 18 : 24,\n            fontWeight: '700',\n            flex: 1,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n      {pathname === navigationRoutes.home ? (\n        <HeaderControlsContainer>\n          {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}\n          <SettingsButton />\n          {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (\n            <CloseDrawerButton header=\"navigation\" />\n          ) : null}\n        </HeaderControlsContainer>\n      ) : (\n        element || (\n          <Box\n            sx={{\n              width: 28,\n              height: 40,\n            }}\n          />\n        )\n      )}\n    </HeaderAppBar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,UAAU,SAAS,cAAc,gBAAgB;CACzD,MAAM,sBAAsB,wBACzB,UAAU,MAAM,KAAK,MACxB;CACA,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,iBAAiB,CAAC,WAAW,sBAAsB;CAEzD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;YAApE;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,iBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;cACjC,oBAAC,sBAAD,CAAuB,CAAA;GACpB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}
+{"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport {\n  backButtonRoutes,\n  navigationRoutes,\n  navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { HeaderNavigationTabs } from './HeaderNavigationTabs.js'\nimport { SettingsButton } from './SettingsButton.js'\n\nexport const NavigationHeader: React.FC = () => {\n  const { hiddenUI, variant, defaultUI } = useWidgetConfig()\n  const navigationTabsCount = useNavigationTabsStore(\n    (state) => state.tabs.length\n  )\n  const { account } = useAccount()\n  const [element, title] = useHeaderStore((state) => [\n    state.element,\n    state.title,\n  ])\n  const { pathname } = useLocation()\n  const cleanedPathname = pathname.endsWith('/')\n    ? pathname.slice(0, -1)\n    : pathname\n  const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n  const hasPath = navigationRoutesValues.includes(path)\n\n  // The store resolves which tabs to show (split Swap/Bridge or configured\n  // navigation tabs); the header just reflects whether there are any.\n  const showHeaderTabs = !hasPath && navigationTabsCount > 0\n\n  return (\n    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n      {backButtonRoutes.includes(path) ? <BackButton /> : null}\n      {showHeaderTabs ? (\n        <Box sx={{ flex: 1, marginRight: 1 }}>\n          <HeaderNavigationTabs />\n        </Box>\n      ) : (\n        <Typography\n          align={hasPath ? 'center' : 'left'}\n          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n          sx={{\n            fontSize: hasPath ? 18 : 24,\n            fontWeight: '700',\n            flex: 1,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n      {pathname === navigationRoutes.home ? (\n        <HeaderControlsContainer>\n          {account.isConnected && !hiddenUI?.history && <ActivitiesButton />}\n          <SettingsButton />\n          {variant === 'drawer' && !hiddenUI?.drawerCloseButton ? (\n            <CloseDrawerButton header=\"navigation\" />\n          ) : null}\n        </HeaderControlsContainer>\n      ) : (\n        element || (\n          <Box\n            sx={{\n              width: 28,\n              height: 40,\n            }}\n          />\n        )\n      )}\n    </HeaderAppBar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,UAAU,SAAS,cAAc,gBAAgB;CACzD,MAAM,sBAAsB,wBACzB,UAAU,MAAM,KAAK,MACxB;CACA,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,KACR,CAAC;CACD,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,kBAAkB,SAAS,SAAS,GAAG,IACzC,SAAS,MAAM,GAAG,EAAE,IACpB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,GAAG,IAAI,CAAC;CAC3E,MAAM,UAAU,uBAAuB,SAAS,IAAI;CAIpD,MAAM,iBAAiB,CAAC,WAAW,sBAAsB;CAEzD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;EAApE,UAAA;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,iBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;IACjC,UAAA,oBAAC,sBAAD,CAAuB,CAAA;GACpB,CAAA,IAEL,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;IACR;IAEC,UAAA;GACS,CAAA;GAEb,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,WAAW,oBAAC,kBAAD,CAAmB,CAAA;IACjE,oBAAC,gBAAD,CAAiB,CAAA;IAChB,YAAY,YAAY,CAAC,UAAU,oBAClC,oBAAC,mBAAD,EAAmB,QAAO,aAAc,CAAA,IACtC;GACmB,EAAA,CAAA,IAEzB,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;GACV,EACD,CAAA;EAGO;;AAElB"}

package/dist/esm/components/Header/SettingsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n  SettingsIconBadge,\n  SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n\n  const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n    useSettingMonitor()\n\n  const variant = isRouteSettingsWithWarnings\n    ? 'warning'\n    : isCustomRouteSettings\n      ? 'info'\n      : undefined\n\n  const tooltipMessage = variant\n    ? t('tooltip.settingsModified')\n    : t('header.settings')\n\n  return (\n    <Tooltip title={tooltipMessage}>\n      <SettingsIconButton\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.settings })}\n        variant={variant}\n      >\n        {variant ? (\n          <SettingsIconBadge variant=\"dot\" color={variant}>\n            <Settings />\n          </SettingsIconBadge>\n        ) : (\n          <Settings />\n        )}\n      </SettingsIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;YAInB,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;aAER,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;cACtC,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}
+{"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n  SettingsIconBadge,\n  SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n\n  const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n    useSettingMonitor()\n\n  const variant = isRouteSettingsWithWarnings\n    ? 'warning'\n    : isCustomRouteSettings\n      ? 'info'\n      : undefined\n\n  const tooltipMessage = variant\n    ? t('tooltip.settingsModified')\n    : t('header.settings')\n\n  return (\n    <Tooltip title={tooltipMessage}>\n      <SettingsIconButton\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.settings })}\n        variant={variant}\n      >\n        {variant ? (\n          <SettingsIconBadge variant=\"dot\" color={variant}>\n            <Settings />\n          </SettingsIconBadge>\n        ) : (\n          <Settings />\n        )}\n      </SettingsIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAE7B,MAAM,EAAE,uBAAuB,gCAC7B,kBAAkB;CAEpB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,0BAA0B,IAC5B,EAAE,iBAAiB;EAInB,UAAA,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,SAAS,CAAC;GAChD;GAER,UAAA,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;IACtC,UAAA,oBAAC,UAAD,CAAW,CAAA;GACM,CAAA,IAEnB,oBAAC,UAAD,CAAW,CAAA;EAEK,CAAA;CACb,CAAA;AAEb"}

package/dist/esm/components/Header/WalletHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n  DrawerWalletContainer,\n  HeaderAppBar,\n  WalletAvatar,\n  WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n  const { hiddenUI } = useWidgetConfig()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const isWalletMenuHidden = hiddenUI?.walletMenu\n\n  const shouldShowWalletMenu =\n    !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n  return {\n    shouldShowWalletMenu,\n  }\n}\n\nexport const WalletHeader: React.FC = () => {\n  const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n  return shouldShowWalletMenu ? (\n    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n      <WalletMenuButton />\n    </HeaderAppBar>\n  ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n  const { variant, hiddenUI } = useWidgetConfig()\n  const { account, accounts } = useAccount()\n\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain: fromChain } = useChain(fromChainId)\n\n  const activeAccount =\n    (fromChain\n      ? accounts.find((account) => account.chainType === fromChain.chainType)\n      : undefined) || account\n\n  if (variant === 'drawer') {\n    return (\n      <DrawerWalletContainer>\n        {activeAccount.isConnected ? (\n          <ConnectedButton account={activeAccount} />\n        ) : (\n          <ConnectButton />\n        )}\n        {!hiddenUI?.drawerCloseButton ? (\n          <CloseDrawerButton header=\"wallet\" />\n        ) : null}\n      </DrawerWalletContainer>\n    )\n  }\n  return activeAccount.isConnected ? (\n    <ConnectedButton account={activeAccount} />\n  ) : (\n    <ConnectButton />\n  )\n}\n\nconst ConnectButton = () => {\n  const { t } = useTranslation()\n  const { walletConfig, variant } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async (event: React.MouseEvent<HTMLElement>) => {\n    if (\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement &&\n      walletConfig?.onConnect\n    ) {\n      walletConfig.onConnect()\n      return\n    }\n    openWalletMenu()\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n  return (\n    <WalletButton\n      withOffset={walletPosition === 'end'}\n      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n      startIcon={\n        walletPosition === 'start' ? (\n          <Wallet sx={{ marginLeft: -0.25 }} />\n        ) : undefined\n      }\n      onClick={connect}\n    >\n      {t('button.connectWallet')}\n    </WalletButton>\n  )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n  const { chain } = useChain(account.chainId)\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const walletAddress = shortenAddress(account.address)\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <WalletButton\n        withOffset\n        endIcon={<ExpandMore />}\n        startIcon={\n          chain?.logoURI ? (\n            <Badge\n              overlap=\"circular\"\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n              badgeContent={\n                <SmallAvatar\n                  src={chain?.logoURI}\n                  alt={chain?.name}\n                  sx={{ width: 12, height: 12 }}\n                >\n                  {chain?.name[0]}\n                </SmallAvatar>\n              }\n            >\n              <WalletAvatar\n                src={getConnectorIcon(account.connector)}\n                alt={account.connector?.name}\n              >\n                {account.connector?.name[0]}\n              </WalletAvatar>\n            </Badge>\n          ) : (\n            <Avatar\n              src={getConnectorIcon(account.connector)}\n              alt={account.connector?.name}\n              sx={{ width: 24, height: 24 }}\n            >\n              {account.connector?.name[0]}\n            </Avatar>\n          )\n        }\n        onClick={handleClick}\n      >\n        {walletAddress}\n      </WalletButton>\n      <WalletMenuContainer\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        <WalletMenu onClose={handleClose} />\n      </WalletMenuContainer>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n  DrawerWalletContainer,\n  HeaderAppBar,\n  WalletAvatar,\n  WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n  const { hiddenUI } = useWidgetConfig()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const isWalletMenuHidden = hiddenUI?.walletMenu\n\n  const shouldShowWalletMenu =\n    !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n  return {\n    shouldShowWalletMenu,\n  }\n}\n\nexport const WalletHeader: React.FC = () => {\n  const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n  return shouldShowWalletMenu ? (\n    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n      <WalletMenuButton />\n    </HeaderAppBar>\n  ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n  const { variant, hiddenUI } = useWidgetConfig()\n  const { account, accounts } = useAccount()\n\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain: fromChain } = useChain(fromChainId)\n\n  const activeAccount =\n    (fromChain\n      ? accounts.find((account) => account.chainType === fromChain.chainType)\n      : undefined) || account\n\n  if (variant === 'drawer') {\n    return (\n      <DrawerWalletContainer>\n        {activeAccount.isConnected ? (\n          <ConnectedButton account={activeAccount} />\n        ) : (\n          <ConnectButton />\n        )}\n        {!hiddenUI?.drawerCloseButton ? (\n          <CloseDrawerButton header=\"wallet\" />\n        ) : null}\n      </DrawerWalletContainer>\n    )\n  }\n  return activeAccount.isConnected ? (\n    <ConnectedButton account={activeAccount} />\n  ) : (\n    <ConnectButton />\n  )\n}\n\nconst ConnectButton = () => {\n  const { t } = useTranslation()\n  const { walletConfig, variant } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async (event: React.MouseEvent<HTMLElement>) => {\n    if (\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement &&\n      walletConfig?.onConnect\n    ) {\n      walletConfig.onConnect()\n      return\n    }\n    openWalletMenu()\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n  return (\n    <WalletButton\n      withOffset={walletPosition === 'end'}\n      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n      startIcon={\n        walletPosition === 'start' ? (\n          <Wallet sx={{ marginLeft: -0.25 }} />\n        ) : undefined\n      }\n      onClick={connect}\n    >\n      {t('button.connectWallet')}\n    </WalletButton>\n  )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n  const { chain } = useChain(account.chainId)\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const walletAddress = shortenAddress(account.address)\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <WalletButton\n        withOffset\n        endIcon={<ExpandMore />}\n        startIcon={\n          chain?.logoURI ? (\n            <Badge\n              overlap=\"circular\"\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n              badgeContent={\n                <SmallAvatar\n                  src={chain?.logoURI}\n                  alt={chain?.name}\n                  sx={{ width: 12, height: 12 }}\n                >\n                  {chain?.name[0]}\n                </SmallAvatar>\n              }\n            >\n              <WalletAvatar\n                src={getConnectorIcon(account.connector)}\n                alt={account.connector?.name}\n              >\n                {account.connector?.name[0]}\n              </WalletAvatar>\n            </Badge>\n          ) : (\n            <Avatar\n              src={getConnectorIcon(account.connector)}\n              alt={account.connector?.name}\n              sx={{ width: 24, height: 24 }}\n            >\n              {account.connector?.name[0]}\n            </Avatar>\n          )\n        }\n        onClick={handleClick}\n      >\n        {walletAddress}\n      </WalletButton>\n      <WalletMenuContainer\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        <WalletMenu onClose={handleClose} />\n      </WalletMenuContainer>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Header/WalletMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n  onClose,\n}: {\n  onClose: () => void\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const { getChainById } = useAvailableChains()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async () => {\n    openWalletMenu()\n    onClose()\n  }\n  const { getAddressLink } = useExplorer()\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {accounts.map((account) => {\n          const chain = getChainById(account.chainId)\n          const walletAddress = shortenAddress(account.address)\n          const handleCopyAddress = async () => {\n            await navigator.clipboard.writeText(account.address ?? '')\n            onClose()\n          }\n\n          return (\n            <MenuItem key={account.address} disableTouchRipple>\n              <Box\n                sx={{\n                  flex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                }}\n              >\n                {chain?.logoURI ? (\n                  <Badge\n                    overlap=\"circular\"\n                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n                    badgeContent={\n                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n                        {chain?.name[0]}\n                      </SmallAvatar>\n                    }\n                    sx={{ marginRight: 1.5 }}\n                  >\n                    <AvatarMasked\n                      src={getConnectorIcon(account.connector)}\n                      alt={account.connector?.name}\n                    >\n                      {account.connector?.name[0]}\n                    </AvatarMasked>\n                  </Badge>\n                ) : (\n                  <Avatar\n                    src={getConnectorIcon(account.connector)}\n                    alt={account.connector?.name}\n                    sx={{\n                      marginRight: 1.5,\n                    }}\n                  >\n                    {account.connector?.name[0]}\n                  </Avatar>\n                )}\n                {walletAddress}\n              </Box>\n              <Box\n                sx={{\n                  ml: 2,\n                }}\n              >\n                <IconButton size=\"medium\" onClick={handleCopyAddress}>\n                  <ContentCopyRounded />\n                </IconButton>\n                <IconButton\n                  size=\"medium\"\n                  component=\"a\"\n                  onClick={onClose}\n                  href={\n                    account.address\n                      ? getAddressLink(account.address, chain)\n                      : undefined\n                  }\n                  target=\"_blank\"\n                >\n                  <OpenInNewRounded />\n                </IconButton>\n                <DisconnectIconButton account={account} />\n              </Box>\n            </MenuItem>\n          )\n        })}\n      </Box>\n      <Button\n        onClick={connect}\n        fullWidth\n        startIcon={<PowerSettingsNewRounded />}\n        sx={{\n          marginTop: 1,\n        }}\n      >\n        {t('button.connectAnotherWallet')}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;YAEC,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;cAAhC,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;eALF,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;iBAC3C,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;gBAEvB,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;iBAEvB,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;gBAEC,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;QACL,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;eAHF;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;iBACjC,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;iBAEP,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;MACG;MA9DK,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;YAEC,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}
+{"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n  onClose,\n}: {\n  onClose: () => void\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const { getChainById } = useAvailableChains()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async () => {\n    openWalletMenu()\n    onClose()\n  }\n  const { getAddressLink } = useExplorer()\n\n  return (\n    <>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {accounts.map((account) => {\n          const chain = getChainById(account.chainId)\n          const walletAddress = shortenAddress(account.address)\n          const handleCopyAddress = async () => {\n            await navigator.clipboard.writeText(account.address ?? '')\n            onClose()\n          }\n\n          return (\n            <MenuItem key={account.address} disableTouchRipple>\n              <Box\n                sx={{\n                  flex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                }}\n              >\n                {chain?.logoURI ? (\n                  <Badge\n                    overlap=\"circular\"\n                    anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n                    badgeContent={\n                      <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n                        {chain?.name[0]}\n                      </SmallAvatar>\n                    }\n                    sx={{ marginRight: 1.5 }}\n                  >\n                    <AvatarMasked\n                      src={getConnectorIcon(account.connector)}\n                      alt={account.connector?.name}\n                    >\n                      {account.connector?.name[0]}\n                    </AvatarMasked>\n                  </Badge>\n                ) : (\n                  <Avatar\n                    src={getConnectorIcon(account.connector)}\n                    alt={account.connector?.name}\n                    sx={{\n                      marginRight: 1.5,\n                    }}\n                  >\n                    {account.connector?.name[0]}\n                  </Avatar>\n                )}\n                {walletAddress}\n              </Box>\n              <Box\n                sx={{\n                  ml: 2,\n                }}\n              >\n                <IconButton size=\"medium\" onClick={handleCopyAddress}>\n                  <ContentCopyRounded />\n                </IconButton>\n                <IconButton\n                  size=\"medium\"\n                  component=\"a\"\n                  onClick={onClose}\n                  href={\n                    account.address\n                      ? getAddressLink(account.address, chain)\n                      : undefined\n                  }\n                  target=\"_blank\"\n                >\n                  <OpenInNewRounded />\n                </IconButton>\n                <DisconnectIconButton account={account} />\n              </Box>\n            </MenuItem>\n          )\n        })}\n      </Box>\n      <Button\n        onClick={connect}\n        fullWidth\n        startIcon={<PowerSettingsNewRounded />}\n        sx={{\n          marginTop: 1,\n        }}\n      >\n        {t('button.connectAnotherWallet')}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;EAEC,UAAA,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;IAAhC,UAAA,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;KALF,UAAA,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;OAC3C,UAAA,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;MAEvB,UAAA,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;OAEvB,UAAA,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;MAEC,UAAA,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;IACL,CAAA,GAAA,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;KAHF,UAAA;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;OACjC,UAAA,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;OAEP,UAAA,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;IACG,CAAA,CAAA;GA9DK,GAAA,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;EAEC,UAAA,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}

package/dist/esm/components/IconCircle/IconCircle.d.ts

@@ -0,0 +1,11 @@
+import { StatusIcon } from "./statusIcons.js";
+import { BoxProps } from "@mui/material";
+//#region src/components/IconCircle/IconCircle.d.ts
+interface IconCircleProps extends Omit<BoxProps, "color"> {
+  status: StatusIcon;
+  size?: number;
+}
+declare const IconCircle: React.FC<IconCircleProps>;
+//#endregion
+export { IconCircle };
+//# sourceMappingURL=IconCircle.d.ts.map

package/dist/esm/components/IconCircle/IconCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconCircle.d.ts","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"mappings":";;;UASU,wBAAwB,KAAK;EACrC,QAAQ;EACR;;cAGW,YAAY,MAAM,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n  getStatusColor,\n  IconCircleRoot,\n  iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n  status: StatusIcon\n  size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n  status,\n  size = iconCircleSize,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const colorConfig = getStatusColor(status, theme)\n  const Icon = statusIcons[status]\n\n  return (\n    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n      <Icon />\n    </IconCircleRoot>\n  )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,SACiC,CAAC;CAChD,MAAM,OAAO,YAAY;CAEzB,OACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,CAAO,CAAA;CACO,CAAA;AAEpB"}
+{"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n  getStatusColor,\n  IconCircleRoot,\n  iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n  status: StatusIcon\n  size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n  status,\n  size = iconCircleSize,\n  ...rest\n}) => {\n  const theme = useTheme()\n  const colorConfig = getStatusColor(status, theme)\n  const Icon = statusIcons[status]\n\n  return (\n    <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n      <Icon />\n    </IconCircleRoot>\n  )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,SACiC,CAAC;CAChD,MAAM,OAAO,YAAY;CAEzB,OACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;EAC9D,UAAA,oBAAC,MAAD,CAAO,CAAA;CACO,CAAA;AAEpB"}

package/dist/esm/components/IconCircle/statusIcons.d.ts

@@ -0,0 +1,6 @@
+import "@mui/material";
+//#region src/components/IconCircle/statusIcons.d.ts
+type StatusIcon = "success" | "error" | "warning" | "info";
+//#endregion
+export { StatusIcon };
+//# sourceMappingURL=statusIcons.d.ts.map

package/dist/esm/components/IconCircle/statusIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusIcons.d.ts","names":[],"sources":["../../../../src/components/IconCircle/statusIcons.ts"],"mappings":";;KAMY"}

package/dist/esm/components/IconTypography.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { BoxProps } from "@mui/material";
+//#region src/components/IconTypography.d.ts
+declare const IconTypography: React.FC<BoxProps>;
+//#endregion
+export { IconTypography };
+//# sourceMappingURL=IconTypography.d.ts.map

package/dist/esm/components/IconTypography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconTypography.d.ts","names":[],"sources":["../../../src/components/IconTypography.ts"],"mappings":";;;cAIa,gBAAgB,MAAM,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n  Container,\n  ExpiryValue,\n  SettingItemButton,\n  SettingItemTitle,\n  SettingItemValue,\n  SettingsRow,\n  ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const [validUntil, partiallyFillable] = useFieldValues(\n    'validUntil',\n    'partiallyFillable'\n  )\n  const { setFieldValue } = useFieldActions()\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const open = Boolean(anchorEl)\n\n  const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = (): void => {\n    setAnchorEl(null)\n  }\n\n  const handleSelect = (duration: number): void => {\n    setFieldValue('validUntil', duration)\n    setAnchorEl(null)\n  }\n\n  const handlePartiallyFillableChange = (\n    event: ChangeEvent<HTMLInputElement>\n  ): void => {\n    setFieldValue('partiallyFillable', event.target.checked)\n  }\n\n  return (\n    <Container {...props}>\n      <Card>\n        <SettingItemButton\n          onClick={handleOpen}\n          disableRipple\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n          <ExpiryValue>\n            <SettingItemValue>\n              {formatDuration(validUntil, i18n.language, 'long')}\n            </SettingItemValue>\n            <KeyboardArrowDownIcon\n              sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n            />\n          </ExpiryValue>\n        </SettingItemButton>\n      </Card>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: (theme) => ({\n              border: `1px solid ${theme.vars.palette.grey[300]}`,\n              boxShadow: 'none',\n              ...theme.applyStyles('dark', {\n                borderColor: theme.vars.palette.grey[800],\n              }),\n            }),\n          },\n        }}\n      >\n        {DURATIONS.map((duration) => (\n          <MenuItem\n            key={duration}\n            onClick={() => handleSelect(duration)}\n            sx={(theme) => ({\n              justifyContent: 'space-between',\n              gap: 4,\n              fontSize: 14,\n              fontWeight: 700,\n              lineHeight: '18px',\n              color: theme.vars.palette.text.primary,\n            })}\n          >\n            {formatDuration(duration, i18n.language, 'long')}\n            {duration === validUntil ? (\n              <Check color=\"primary\" fontSize=\"small\" />\n            ) : null}\n          </MenuItem>\n        ))}\n      </Menu>\n      <Card>\n        <SettingsRow>\n          <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n          <Switch\n            checked={partiallyFillable}\n            onChange={handlePartiallyFillableChange}\n            aria-label={t('limitOrder.partiallyFillable')}\n          />\n        </SettingsRow>\n      </Card>\n    </Container>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;YAAf;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;cAJjB,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;MACf,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;cAEC,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;eAVF,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;OAfH,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}
+{"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n  Container,\n  ExpiryValue,\n  SettingItemButton,\n  SettingItemTitle,\n  SettingItemValue,\n  SettingsRow,\n  ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n  const { t, i18n } = useTranslation()\n  const [validUntil, partiallyFillable] = useFieldValues(\n    'validUntil',\n    'partiallyFillable'\n  )\n  const { setFieldValue } = useFieldActions()\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const open = Boolean(anchorEl)\n\n  const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = (): void => {\n    setAnchorEl(null)\n  }\n\n  const handleSelect = (duration: number): void => {\n    setFieldValue('validUntil', duration)\n    setAnchorEl(null)\n  }\n\n  const handlePartiallyFillableChange = (\n    event: ChangeEvent<HTMLInputElement>\n  ): void => {\n    setFieldValue('partiallyFillable', event.target.checked)\n  }\n\n  return (\n    <Container {...props}>\n      <Card>\n        <SettingItemButton\n          onClick={handleOpen}\n          disableRipple\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n          <ExpiryValue>\n            <SettingItemValue>\n              {formatDuration(validUntil, i18n.language, 'long')}\n            </SettingItemValue>\n            <KeyboardArrowDownIcon\n              sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n            />\n          </ExpiryValue>\n        </SettingItemButton>\n      </Card>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{\n          paper: {\n            sx: (theme) => ({\n              border: `1px solid ${theme.vars.palette.grey[300]}`,\n              boxShadow: 'none',\n              ...theme.applyStyles('dark', {\n                borderColor: theme.vars.palette.grey[800],\n              }),\n            }),\n          },\n        }}\n      >\n        {DURATIONS.map((duration) => (\n          <MenuItem\n            key={duration}\n            onClick={() => handleSelect(duration)}\n            sx={(theme) => ({\n              justifyContent: 'space-between',\n              gap: 4,\n              fontSize: 14,\n              fontWeight: 700,\n              lineHeight: '18px',\n              color: theme.vars.palette.text.primary,\n            })}\n          >\n            {formatDuration(duration, i18n.language, 'long')}\n            {duration === validUntil ? (\n              <Check color=\"primary\" fontSize=\"small\" />\n            ) : null}\n          </MenuItem>\n        ))}\n      </Menu>\n      <Card>\n        <SettingsRow>\n          <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n          <Switch\n            checked={partiallyFillable}\n            onChange={handlePartiallyFillableChange}\n            aria-label={t('limitOrder.partiallyFillable')}\n          />\n        </SettingsRow>\n      </Card>\n    </Container>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;EAAf,UAAA;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;IAJjB,UAAA,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;GACf,CAAA,EAAA,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;IAEC,UAAA,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;KAVF,UAAA,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;IAfH,GAAA,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}

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

@@ -1 +1 @@
-{"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n  AmountCard,\n  amountHeight,\n  CardBodyRow,\n  CardHeaderRow,\n  LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n  value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const isEditingRef = useRef(false)\n  const [inputValue, setInputValue] = useState('')\n\n  const [\n    fromChainId,\n    fromTokenAddress,\n    toChainId,\n    toTokenAddress,\n    priceInverted,\n  ] = useFieldValues(\n    FormKeyHelper.getChainKey('from'),\n    FormKeyHelper.getTokenKey('from'),\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    'priceInverted'\n  )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const { isFetching } = useRoutes()\n\n  // limitPrice is derived from the from/to amount fields, not stored.\n  const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n  const { setFieldValue } = useFieldActions()\n\n  const hasTokens = Boolean(fromToken && toToken)\n  const showSkeleton = isFetching && !limitPrice\n  const leadToken = priceInverted ? toToken : fromToken\n  const unitToken = priceInverted ? fromToken : toToken\n\n  const marketCanonical = useLimitMarketRate()\n\n  // Canonical price is orientation-independent; flip only for display.\n  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n  useEffect(() => {\n    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n    setFieldValue('selectedRouteId', undefined)\n  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n  // Keep the input in sync with derived/preset/invert updates, but never yank\n  // the value out from under an actively-typing user.\n  useEffect(() => {\n    if (!isEditingRef.current) {\n      setInputValue(cleanDisplay(displayPrice))\n    }\n  }, [displayPrice])\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    isEditingRef.current = true\n    const formatted = formatInputAmount(event.target.value, 18, true)\n    setInputValue(formatted)\n    const numeric = Number(formatted)\n    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n      setLimitPrice('')\n      return\n    }\n    // Canonical price is orientation-independent; un-flip the displayed value.\n    const canonical = priceInverted ? 1 / numeric : numeric\n    setLimitPrice(String(canonical))\n  }\n\n  const handleBlur = (): void => {\n    isEditingRef.current = false\n    setInputValue(cleanDisplay(displayPrice))\n  }\n\n  const handleInvert = (): void => {\n    isEditingRef.current = false\n    setFieldValue('priceInverted', !priceInverted)\n  }\n\n  // Apply a percentage offset to the canonical market rate (0 = at market).\n  const handlePreset = (pct: number): void => {\n    if (marketCanonical === undefined) {\n      return\n    }\n    isEditingRef.current = false\n    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n  }\n\n  const label = hasTokens\n    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n    : t('limitOrder.price')\n\n  return (\n    <AmountCard {...props} mask={false}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n        {hasTokens ? (\n          <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n            {unitToken?.symbol}\n            <SwapHorizIcon sx={{ fontSize: 16 }} />\n          </InvertChip>\n        ) : null}\n      </CardHeaderRow>\n      <CardBodyRow>\n        {showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <LargeInput\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            inputProps={{ inputMode: 'decimal' }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={inputValue}\n            name=\"limitPrice\"\n            disabled={!hasTokens}\n          />\n        )}\n      </CardBodyRow>\n      <LimitPricePresets\n        onSelect={handlePreset}\n        disabled={!hasTokens || marketCanonical === undefined}\n      />\n    </AmountCard>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n  AmountCard,\n  amountHeight,\n  CardBodyRow,\n  CardHeaderRow,\n  LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n  value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n  const { t } = useTranslation()\n  const isEditingRef = useRef(false)\n  const [inputValue, setInputValue] = useState('')\n\n  const [\n    fromChainId,\n    fromTokenAddress,\n    toChainId,\n    toTokenAddress,\n    priceInverted,\n  ] = useFieldValues(\n    FormKeyHelper.getChainKey('from'),\n    FormKeyHelper.getTokenKey('from'),\n    FormKeyHelper.getChainKey('to'),\n    FormKeyHelper.getTokenKey('to'),\n    'priceInverted'\n  )\n  const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n  const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n  const { isFetching } = useRoutes()\n\n  // limitPrice is derived from the from/to amount fields, not stored.\n  const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n  const { setFieldValue } = useFieldActions()\n\n  const hasTokens = Boolean(fromToken && toToken)\n  const showSkeleton = isFetching && !limitPrice\n  const leadToken = priceInverted ? toToken : fromToken\n  const unitToken = priceInverted ? fromToken : toToken\n\n  const marketCanonical = useLimitMarketRate()\n\n  // Canonical price is orientation-independent; flip only for display.\n  const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n  useEffect(() => {\n    setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n    setFieldValue('selectedRouteId', undefined)\n  }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n  // Keep the input in sync with derived/preset/invert updates, but never yank\n  // the value out from under an actively-typing user.\n  useEffect(() => {\n    if (!isEditingRef.current) {\n      setInputValue(cleanDisplay(displayPrice))\n    }\n  }, [displayPrice])\n\n  const handleChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ): void => {\n    isEditingRef.current = true\n    const formatted = formatInputAmount(event.target.value, 18, true)\n    setInputValue(formatted)\n    const numeric = Number(formatted)\n    if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n      setLimitPrice('')\n      return\n    }\n    // Canonical price is orientation-independent; un-flip the displayed value.\n    const canonical = priceInverted ? 1 / numeric : numeric\n    setLimitPrice(String(canonical))\n  }\n\n  const handleBlur = (): void => {\n    isEditingRef.current = false\n    setInputValue(cleanDisplay(displayPrice))\n  }\n\n  const handleInvert = (): void => {\n    isEditingRef.current = false\n    setFieldValue('priceInverted', !priceInverted)\n  }\n\n  // Apply a percentage offset to the canonical market rate (0 = at market).\n  const handlePreset = (pct: number): void => {\n    if (marketCanonical === undefined) {\n      return\n    }\n    isEditingRef.current = false\n    setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n  }\n\n  const label = hasTokens\n    ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n    : t('limitOrder.price')\n\n  return (\n    <AmountCard {...props} mask={false}>\n      <CardHeaderRow>\n        <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n        {hasTokens ? (\n          <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n            {unitToken?.symbol}\n            <SwapHorizIcon sx={{ fontSize: 16 }} />\n          </InvertChip>\n        ) : null}\n      </CardHeaderRow>\n      <CardBodyRow>\n        {showSkeleton ? (\n          <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n        ) : (\n          <LargeInput\n            size=\"small\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            inputProps={{ inputMode: 'decimal' }}\n            onChange={handleChange}\n            onBlur={handleBlur}\n            value={inputValue}\n            name=\"limitPrice\"\n            disabled={!hasTokens}\n          />\n        )}\n      </CardBodyRow>\n      <LimitPricePresets\n        onSelect={handlePreset}\n        disabled={!hasTokens || marketCanonical === undefined}\n      />\n    </AmountCard>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/LimitPriceCard/LimitPricePresets.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n  EditablePriceChip,\n  PriceChip,\n  PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n  /** Apply a percentage offset from the market rate (0 = at market). */\n  onSelect: (pct: number) => void\n  /** Disables the free-form custom pill (no tokens / no market rate yet). */\n  disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n  onSelect,\n  disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const customInputRef = useRef<HTMLInputElement>(null)\n  const [customPct, setCustomPct] = useState('')\n  const [customFocused, setCustomFocused] = useState(false)\n\n  // The custom pill renders as a plain button until engaged; when it flips into\n  // edit mode (focused), move the caret into the freshly-mounted input.\n  useEffect(() => {\n    if (customFocused) {\n      customInputRef.current?.focus()\n    }\n  }, [customFocused])\n\n  // Picking a fixed preset clears any custom value so the custom pill collapses\n  // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n  const handlePresetClick = (pct: number): void => {\n    setCustomPct('')\n    setCustomFocused(false)\n    onSelect(pct)\n  }\n\n  // Free-form offset pill: apply the typed percentage live so the price input\n  // tracks the offset as the user types. Accepts an optional leading +/- sign\n  // so the price can be set above (premium) or below (discount) market.\n  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const raw = event.target.value\n    if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n      return\n    }\n    setCustomPct(raw)\n    const numeric = Number(raw)\n    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n    // the signs/dot to NaN, and '' to 0, so guard both.\n    if (raw === '' || Number.isNaN(numeric)) {\n      return\n    }\n    onSelect(numeric)\n  }\n\n  const handleCustomKeyDown = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (event.key === 'Enter') {\n      event.currentTarget.blur()\n    }\n  }\n\n  // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n  // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n  const handleCustomBlur = (): void => {\n    setCustomFocused(false)\n    setCustomPct((prev) => {\n      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n        return prev\n      }\n      return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n    })\n  }\n\n  // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n  // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n  const showCustomLabel = customPct === '' && !customFocused\n\n  return (\n    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n      {PRESETS.map((pct) => (\n        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n        </PriceChip>\n      ))}\n      {showCustomLabel ? (\n        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n          {t('limitOrder.custom')}\n        </PriceChip>\n      ) : (\n        <EditablePriceChip\n          aria-disabled={disabled}\n          onClick={(event) => {\n            // `aria-disabled` only announces the state; enforce it so a\n            // programmatic click can't apply an offset while disabled.\n            if (disabled) {\n              return\n            }\n            const input = event.currentTarget.querySelector('input')\n            input?.focus()\n            const numeric = Number(customPct)\n            if (customPct && !Number.isNaN(numeric)) {\n              onSelect(numeric)\n            }\n          }}\n        >\n          <PriceChipInput\n            ref={customInputRef}\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            aria-label={t('limitOrder.custom')}\n            value={customPct}\n            onChange={handleCustomChange}\n            onKeyDown={handleCustomKeyDown}\n            onFocus={() => setCustomFocused(true)}\n            onBlur={handleCustomBlur}\n            disabled={disabled}\n            style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n          />\n          %\n        </EditablePriceChip>\n      )}\n    </ChipContainer>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;YAAtD,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;aACtD,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;aAChE,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;aAdF,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;IAER;;AAEnB"}
+{"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n  EditablePriceChip,\n  PriceChip,\n  PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n  /** Apply a percentage offset from the market rate (0 = at market). */\n  onSelect: (pct: number) => void\n  /** Disables the free-form custom pill (no tokens / no market rate yet). */\n  disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n  onSelect,\n  disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const customInputRef = useRef<HTMLInputElement>(null)\n  const [customPct, setCustomPct] = useState('')\n  const [customFocused, setCustomFocused] = useState(false)\n\n  // The custom pill renders as a plain button until engaged; when it flips into\n  // edit mode (focused), move the caret into the freshly-mounted input.\n  useEffect(() => {\n    if (customFocused) {\n      customInputRef.current?.focus()\n    }\n  }, [customFocused])\n\n  // Picking a fixed preset clears any custom value so the custom pill collapses\n  // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n  const handlePresetClick = (pct: number): void => {\n    setCustomPct('')\n    setCustomFocused(false)\n    onSelect(pct)\n  }\n\n  // Free-form offset pill: apply the typed percentage live so the price input\n  // tracks the offset as the user types. Accepts an optional leading +/- sign\n  // so the price can be set above (premium) or below (discount) market.\n  const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const raw = event.target.value\n    if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n      return\n    }\n    setCustomPct(raw)\n    const numeric = Number(raw)\n    // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n    // the signs/dot to NaN, and '' to 0, so guard both.\n    if (raw === '' || Number.isNaN(numeric)) {\n      return\n    }\n    onSelect(numeric)\n  }\n\n  const handleCustomKeyDown = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (event.key === 'Enter') {\n      event.currentTarget.blur()\n    }\n  }\n\n  // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n  // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n  const handleCustomBlur = (): void => {\n    setCustomFocused(false)\n    setCustomPct((prev) => {\n      if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n        return prev\n      }\n      return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n    })\n  }\n\n  // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n  // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n  const showCustomLabel = customPct === '' && !customFocused\n\n  return (\n    <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n      {PRESETS.map((pct) => (\n        <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n          {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n        </PriceChip>\n      ))}\n      {showCustomLabel ? (\n        <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n          {t('limitOrder.custom')}\n        </PriceChip>\n      ) : (\n        <EditablePriceChip\n          aria-disabled={disabled}\n          onClick={(event) => {\n            // `aria-disabled` only announces the state; enforce it so a\n            // programmatic click can't apply an offset while disabled.\n            if (disabled) {\n              return\n            }\n            const input = event.currentTarget.querySelector('input')\n            input?.focus()\n            const numeric = Number(customPct)\n            if (customPct && !Number.isNaN(numeric)) {\n              onSelect(numeric)\n            }\n          }}\n        >\n          <PriceChipInput\n            ref={customInputRef}\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            placeholder=\"0\"\n            aria-label={t('limitOrder.custom')}\n            value={customPct}\n            onChange={handleCustomChange}\n            onKeyDown={handleCustomKeyDown}\n            onFocus={() => setCustomFocused(true)}\n            onBlur={handleCustomBlur}\n            disabled={disabled}\n            style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n          />\n          %\n        </EditablePriceChip>\n      )}\n    </ChipContainer>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;EAAtD,UAAA,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;GACtD,UAAA,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;GAChE,UAAA,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;GAdF,UAAA,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;EAER,CAAA,CAAA;;AAEnB"}