@lifi/widget 4.0.0 → 4.2.0

package/dist/esm/components/EmptyListIndicator/EmptyListIndicator.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyListIndicator.style.js","names":[],"sources":["../../../../src/components/EmptyListIndicator/EmptyListIndicator.style.tsx"],"sourcesContent":["import { Container, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const EmptyListContainer: React.FC<\n  React.ComponentProps<typeof Container>\n> = styled(Container)(({ theme }) => ({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  paddingTop: theme.spacing(12),\n  paddingBottom: theme.spacing(12),\n}))\n\nexport const EmptyListIcon: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    fontSize: 48,\n    '& > svg': {\n      fontSize: 'inherit',\n    },\n  })\n\nexport const EmptyListTitle: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 18,\n    fontWeight: 700,\n    marginTop: theme.spacing(2),\n  }))\n\nexport const EmptyListMessage: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  color: theme.vars.palette.text.secondary,\n  textAlign: 'center',\n  marginTop: theme.spacing(2),\n}))\n"],"mappings":";;AAGA,MAAa,qBAET,OAAO,SAAS,GAAG,EAAE,aAAa;CACpC,SAAS;CACT,MAAM;CACN,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,YAAY,MAAM,QAAQ,EAAE;CAC5B,eAAe,MAAM,QAAQ,EAAE;AACjC,EAAE;AAEF,MAAa,gBACX,OAAO,UAAU,EAAE;CACjB,UAAU;CACV,WAAW,EACT,UAAU,UACZ;AACF,CAAC;AAEH,MAAa,iBACX,OAAO,UAAU,GAAG,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE;AAEJ,MAAa,mBAET,OAAO,UAAU,GAAG,EAAE,aAAa;CACrC,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE"}
+{"version":3,"file":"EmptyListIndicator.style.js","names":[],"sources":["../../../../src/components/EmptyListIndicator/EmptyListIndicator.style.tsx"],"sourcesContent":["import { Container, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const EmptyListContainer: React.FC<\n  React.ComponentProps<typeof Container>\n> = styled(Container)(({ theme }) => ({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  paddingTop: theme.spacing(12),\n  paddingBottom: theme.spacing(12),\n}))\n\nexport const EmptyListIcon: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    fontSize: 48,\n    '& > svg': {\n      fontSize: 'inherit',\n    },\n  })\n\nexport const EmptyListTitle: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    fontSize: 18,\n    fontWeight: 700,\n    marginTop: theme.spacing(2),\n  }))\n\nexport const EmptyListMessage: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  color: theme.vars.palette.text.secondary,\n  textAlign: 'center',\n  marginTop: theme.spacing(2),\n}))\n"],"mappings":";;AAGA,MAAa,qBAET,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa;CACpC,SAAS;CACT,MAAM;CACN,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,YAAY,MAAM,QAAQ,EAAE;CAC5B,eAAe,MAAM,QAAQ,EAAE;AACjC,EAAE;AAEF,MAAa,gBACX,OAAO,UAAU,CAAC,CAAC;CACjB,UAAU;CACV,WAAW,EACT,UAAU,UACZ;AACF,CAAC;AAEH,MAAa,iBACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,UAAU;CACV,YAAY;CACZ,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE;AAEJ,MAAa,mBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE"}

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,KAAK;CAC9B;CACA,UAAU,SAA2B;EACnC,SAAS;EACT,OAAO;EACP,YAAY,gBAAgB,KAAK;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;YACzC,oBAAC,EAAE,KAAH;GAEE,QAAQ;GACR,UAAU;GACV,SAAQ;GACR,SAAQ;GACR,MAAK;GACL,OAAO;IACL,UAAU;IACV,OAAO;IACP,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;aAEC,YAAY,UACX,oBAAC,WAAD,EAAiB,KAAO,CAAA,IAExB,oBAAC,YAAD,EAAY,QAAQ,QAAU,CAAA;EAE3B,GAnBA,OAmBA;CACQ,CAAA,EACE,CAAA;AAEzB"}

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

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

package/dist/esm/components/ExecutionStatusCard/iconKey.js.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,IACR,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.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expansion.style.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const animationDuration = 225\n\nexport const defaultStyle = {\n  opacity: 0,\n  whiteSpace: 'nowrap',\n  transform: 'translateX(-100%)',\n  display: 'inline-block',\n  position: 'absolute' as const,\n  top: 0,\n  left: 0,\n  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n}\n\nexport const transitionStyles = {\n  entering: {\n    opacity: 1,\n    transform: 'translateX(0)',\n  },\n  entered: {\n    opacity: 1,\n    transform: 'translateX(0)',\n  },\n  exiting: {\n    opacity: 0,\n    transform: 'translateX(-100%)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'translateX(-100%)',\n  },\n}\n\nexport const ExpansionContainer: React.FC<\n  React.ComponentProps<typeof Box> & { width: string | number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'width',\n})<{ width: string | number }>(({ width }) => ({\n  position: 'relative',\n  display: 'flex',\n  transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n  width: width,\n  marginLeft: width ? '24px' : 0,\n}))\n"],"mappings":";AAKA,MAAa,eAAe;CAC1B,SAAS;CACT,YAAY;CACZ,WAAW;CACX,SAAS;CACT,UAAU;CACV,KAAK;CACL,MAAM;CACN,YAAY;AACd;AAEA,MAAa,mBAAmB;CAC9B,UAAU;EACR,SAAS;EACT,WAAW;CACb;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;CACA,QAAQ;EACN,SAAS;EACT,WAAW;CACb;AACF;AAEA,MAAa,qBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,QACxC,CAAC,GAA+B,EAAE,aAAa;CAC7C,UAAU;CACV,SAAS;CACT,YAAY;CACL;CACP,YAAY,QAAQ,SAAS;AAC/B,EAAE"}
+{"version":3,"file":"Expansion.style.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const animationDuration = 225\n\nexport const defaultStyle = {\n  opacity: 0,\n  whiteSpace: 'nowrap',\n  transform: 'translateX(-100%)',\n  display: 'inline-block',\n  position: 'absolute' as const,\n  top: 0,\n  left: 0,\n  transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n}\n\nexport const transitionStyles = {\n  entering: {\n    opacity: 1,\n    transform: 'translateX(0)',\n  },\n  entered: {\n    opacity: 1,\n    transform: 'translateX(0)',\n  },\n  exiting: {\n    opacity: 0,\n    transform: 'translateX(-100%)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'translateX(-100%)',\n  },\n}\n\nexport const ExpansionContainer: React.FC<\n  React.ComponentProps<typeof Box> & { width: string | number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'width',\n})<{ width: string | number }>(({ width }) => ({\n  position: 'relative',\n  display: 'flex',\n  transition: `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n  width: width,\n  marginLeft: width ? '24px' : 0,\n}))\n"],"mappings":";AAKA,MAAa,eAAe;CAC1B,SAAS;CACT,YAAY;CACZ,WAAW;CACX,SAAS;CACT,UAAU;CACV,KAAK;CACL,MAAM;CACN,YAAY;AACd;AAEA,MAAa,mBAAmB;CAC9B,UAAU;EACR,SAAS;EACT,WAAW;CACb;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;CACA,SAAS;EACP,SAAS;EACT,WAAW;CACb;CACA,QAAQ;EACN,SAAS;EACT,WAAW;CACb;AACF;AAEA,MAAa,qBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,QACxC,CAAC,CAAC,EAA8B,EAAE,aAAa;CAC7C,UAAU;CACV,SAAS;CACT,YAAY;CACL;CACP,YAAY,QAAQ,SAAS;AAC/B,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActivitiesButton.style.js","names":["MuiIconButton","MuiCircularProgress"],"sources":["../../../../src/components/Header/ActivitiesButton.style.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  CircularProgress as MuiCircularProgress,\n  IconButton as MuiIconButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(\n  Badge\n)(({ theme }) => ({\n  '& .MuiBadge-badge': {\n    padding: 0,\n    minWidth: 16,\n    width: 16,\n    height: 16,\n    borderRadius: '50%',\n    backgroundColor: theme.vars.palette.background.paper,\n    boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,\n    top: -2,\n    left: 10,\n  },\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(() => ({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n}))\n\nexport const ActivitiesIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & { active?: boolean }\n> = styled(MuiIconButton, {\n  shouldForwardProp: (prop) => prop !== 'active',\n})<{ active?: boolean }>({\n  variants: [\n    {\n      props: { active: true },\n      style: ({ theme }) => ({\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n          },\n        }),\n      }),\n    },\n  ],\n})\n\nexport const ProgressTrack: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  color: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[800],\n  }),\n}))\n"],"mappings":";;AASA,MAAa,aAA2D,OACtE,KACF,GAAG,EAAE,aAAa,EAChB,qBAAqB;CACnB,SAAS;CACT,UAAU;CACV,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,aAAa,MAAM,KAAK,QAAQ,WAAW;CACtD,KAAK;CACL,MAAM;AACR,EACF,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,SAAS;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEF,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,SACxC,CAAC,EAAwB,EACvB,UAAU,CACR;CACE,OAAO,EAAE,QAAQ,KAAK;CACtB,QAAQ,EAAE,aAAa;EACrB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;EACA,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;EACF,CAAC;CACH;AACF,CACF,EACF,CAAC;AAED,MAAa,gBAET,OAAOC,gBAAmB,GAAG,EAAE,aAAa;CAC9C,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE"}
+{"version":3,"file":"ActivitiesButton.style.js","names":["MuiIconButton","MuiCircularProgress"],"sources":["../../../../src/components/Header/ActivitiesButton.style.tsx"],"sourcesContent":["import {\n  Badge,\n  Box,\n  CircularProgress as MuiCircularProgress,\n  IconButton as MuiIconButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ErrorBadge: React.FC<React.ComponentProps<typeof Badge>> = styled(\n  Badge\n)(({ theme }) => ({\n  '& .MuiBadge-badge': {\n    padding: 0,\n    minWidth: 16,\n    width: 16,\n    height: 16,\n    borderRadius: '50%',\n    backgroundColor: theme.vars.palette.background.paper,\n    boxShadow: `0 0 0 2px ${theme.vars.palette.background.paper}`,\n    top: -2,\n    left: 10,\n  },\n}))\n\nexport const IconContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(() => ({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n}))\n\nexport const ActivitiesIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & { active?: boolean }\n> = styled(MuiIconButton, {\n  shouldForwardProp: (prop) => prop !== 'active',\n})<{ active?: boolean }>({\n  variants: [\n    {\n      props: { active: true },\n      style: ({ theme }) => ({\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n          },\n        }),\n      }),\n    },\n  ],\n})\n\nexport const ProgressTrack: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  color: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[800],\n  }),\n}))\n"],"mappings":";;AASA,MAAa,aAA2D,OACtE,KACF,CAAC,EAAE,EAAE,aAAa,EAChB,qBAAqB;CACnB,SAAS;CACT,UAAU;CACV,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,aAAa,MAAM,KAAK,QAAQ,WAAW;CACtD,KAAK;CACL,MAAM;AACR,EACF,EAAE;AAEF,MAAa,gBAA4D,OACvE,GACF,CAAC,QAAQ;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEF,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,SACxC,CAAC,CAAC,CAAuB,EACvB,UAAU,CACR;CACE,OAAO,EAAE,QAAQ,KAAK;CACtB,QAAQ,EAAE,aAAa;EACrB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;EACA,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;EACF,CAAC;CACH;AACF,CACF,EACF,CAAC;AAED,MAAa,gBAET,OAAOC,gBAAmB,CAAC,EAAE,EAAE,aAAa;CAC9C,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE"}

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

@@ -13,6 +13,7 @@ const CloseDrawerButton = ({ header }) => {
 		title: t("button.close"),
 		children: /* @__PURE__ */ jsx(IconButton, {
 			size: "medium",
+			"data-testid": "widget-close-drawer-button",
 			onClick: closeDrawer,
 			children: /* @__PURE__ */ jsx(CloseRounded, {})
 		})

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 size=\"medium\" onClick={closeDrawer}>\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;GAAY,MAAK;GAAS,SAAS;aACjC,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;YAC9B,oBAAC,YAAD;GACE,MAAK;GACL,eAAY;GACZ,SAAS;aAET,oBAAC,cAAD,CAAe,CAAA;EACL,CAAA;CACL,CAAA,IACP;AACN"}

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

@@ -5,27 +5,24 @@ import { useDefaultElementId } from "../../hooks/useDefaultElementId.js";
 import { Container } from "./Header.style.js";
 import { NavigationHeader } from "./NavigationHeader.js";
 import { WalletHeader } from "./WalletHeader.js";
-import { useLayoutEffect, useRef } from "react";
+import { useCallback } from "react";
 import { useLocation } from "@tanstack/react-router";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Header/Header.tsx
 const HeaderContainer = ({ children }) => {
 	const { pathname } = useLocation();
 	const elementId = useDefaultElementId();
-	const headerRef = useRef(null);
 	const { setHeaderHeight } = useSetHeaderHeight();
-	useLayoutEffect(() => {
+	const headerRef = useCallback((node) => {
+		if (!node) return;
 		const handleHeaderResize = () => {
-			const height = headerRef.current?.getBoundingClientRect().height;
+			const height = node.getBoundingClientRect().height;
 			if (height) setHeaderHeight(height);
 		};
-		let resizeObserver;
-		if (headerRef.current) {
-			resizeObserver = new ResizeObserver(handleHeaderResize);
-			resizeObserver.observe(headerRef.current);
-		}
+		const resizeObserver = new ResizeObserver(handleHeaderResize);
+		resizeObserver.observe(node);
 		return () => {
-			if (resizeObserver) resizeObserver.disconnect();
+			resizeObserver.disconnect();
 		};
 	}, [setHeaderHeight]);
 	return /* @__PURE__ */ jsx(Container, {

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n  const { pathname } = useLocation()\n  const elementId = useDefaultElementId()\n  const headerRef = useRef<HTMLDivElement>(null)\n  const { setHeaderHeight } = useSetHeaderHeight()\n\n  useLayoutEffect(() => {\n    const handleHeaderResize = () => {\n      const height = headerRef.current?.getBoundingClientRect().height\n\n      if (height) {\n        setHeaderHeight(height)\n      }\n    }\n\n    let resizeObserver: ResizeObserver\n\n    if (headerRef.current) {\n      resizeObserver = new ResizeObserver(handleHeaderResize)\n      resizeObserver.observe(headerRef.current)\n    }\n\n    return () => {\n      if (resizeObserver) {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [setHeaderHeight])\n\n  return (\n    <Container\n      id={createElementId(ElementId.Header, elementId ?? '')}\n      sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n      ref={headerRef}\n    >\n      {children}\n    </Container>\n  )\n}\n\nexport const Header: FC = () => {\n  return (\n    <HeaderContainer>\n      <WalletHeader />\n      <NavigationHeader />\n    </HeaderContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,YAAY,oBAAoB;CACtC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,oBAAoB,mBAAmB;CAE/C,sBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,sBAAsB,EAAE;GAE1D,IAAI,QACF,gBAAgB,MAAM;EAE1B;EAEA,IAAI;EAEJ,IAAI,UAAU,SAAS;GACrB,iBAAiB,IAAI,eAAe,kBAAkB;GACtD,eAAe,QAAQ,UAAU,OAAO;EAC1C;EAEA,aAAa;GACX,IAAI,gBACF,eAAe,WAAW;EAE9B;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,OACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,EAAE;EACrD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,KAAK,CAAC;EACnE,KAAK;EAEJ;CACQ,CAAA;AAEf;AAEA,MAAa,eAAmB;CAC9B,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,kBAAD,CAAmB,CAAA,CACJ,EAAA,CAAA;AAErB"}
+{"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useCallback } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n  const { pathname } = useLocation()\n  const elementId = useDefaultElementId()\n  const { setHeaderHeight } = useSetHeaderHeight()\n\n  // React 19 ref cleanup callback: set up the ResizeObserver when the node\n  // mounts and tear it down when it unmounts.\n  const headerRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (!node) {\n        return\n      }\n\n      const handleHeaderResize = () => {\n        const height = node.getBoundingClientRect().height\n\n        if (height) {\n          setHeaderHeight(height)\n        }\n      }\n\n      const resizeObserver = new ResizeObserver(handleHeaderResize)\n      resizeObserver.observe(node)\n\n      return () => {\n        resizeObserver.disconnect()\n      }\n    },\n    [setHeaderHeight]\n  )\n\n  return (\n    <Container\n      id={createElementId(ElementId.Header, elementId ?? '')}\n      sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n      ref={headerRef}\n    >\n      {children}\n    </Container>\n  )\n}\n\nexport const Header: FC = () => {\n  return (\n    <HeaderContainer>\n      <WalletHeader />\n      <NavigationHeader />\n    </HeaderContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY;CACjC,MAAM,YAAY,oBAAoB;CACtC,MAAM,EAAE,oBAAoB,mBAAmB;CAI/C,MAAM,YAAY,aACf,SAAgC;EAC/B,IAAI,CAAC,MACH;EAGF,MAAM,2BAA2B;GAC/B,MAAM,SAAS,KAAK,sBAAsB,CAAC,CAAC;GAE5C,IAAI,QACF,gBAAgB,MAAM;EAE1B;EAEA,MAAM,iBAAiB,IAAI,eAAe,kBAAkB;EAC5D,eAAe,QAAQ,IAAI;EAE3B,aAAa;GACX,eAAe,WAAW;EAC5B;CACF,GACA,CAAC,eAAe,CAClB;CAEA,OACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,EAAE;EACrD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,KAAK,CAAC;EACnE,KAAK;EAEJ;CACQ,CAAA;AAEf;AAEA,MAAa,eAAmB;CAC9B,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,kBAAD,CAAmB,CAAA,CACJ,EAAA,CAAA;AAErB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n  AppBar,\n  Avatar,\n  Box,\n  Button,\n  buttonClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n  React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n  backgroundColor: 'transparent',\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n  }),\n  color: theme.vars.palette.text.primary,\n  flexDirection: 'row',\n  alignItems: 'center',\n  position: 'relative',\n}))\n\nexport const Container: React.FC<\n  React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: sticky ? 'sticky' : 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 0, 3),\n    overflow: 'auto',\n    borderRadius: theme.container?.borderRadius ?? 0,\n    ...theme.header,\n    ...(theme.header?.position === 'fixed'\n      ? {\n          minWidth: theme.breakpoints.values.xs,\n          maxWidth: theme.breakpoints.values.sm,\n          width: '100%',\n        }\n      : {}),\n  }\n})\n\nexport const WalletButton: React.FC<\n  React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n  shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n  color: theme.vars.palette.text.primary,\n  padding: theme.spacing(1, 1.5),\n  maxHeight: 40,\n  fontSize: '0.875rem',\n  fontWeight: 600,\n  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n  }),\n  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {\n    fontSize: '24px',\n  },\n  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {\n    fontSize: '24px',\n  },\n  ...(theme.navigation.edge && {\n    marginRight: withOffset ? theme.spacing(-1.25) : 0,\n  }),\n}))\n\nexport const DrawerWalletContainer: React.FC<\n  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n\n  ...(theme.navigation.edge && {\n    '& button:first-of-type': {\n      marginLeft: theme.spacing(-1),\n    },\n    '& button:last-of-type': {\n      marginRight: theme.spacing(-1.25),\n    },\n  }),\n}))\n\nexport const HeaderControlsContainer: React.FC<\n  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  ...(theme.navigation.edge && {\n    '& button:last-of-type': {\n      marginRight: theme.spacing(-1.25),\n    },\n  }),\n}))\n\nexport const WalletAvatar: React.FC<\n  React.ComponentProps<typeof Avatar> & {\n    avatarSize?: number\n    badgeSize?: number\n  }\n> = styled(Avatar, {\n  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n  ({ avatarSize = 24, badgeSize = 12 }) => ({\n    mask: getAvatarMask(badgeSize),\n    width: avatarSize,\n    height: avatarSize,\n  })\n)\n"],"mappings":";;;AAWA,MAAa,eAET,OAAO,MAAM,GAAG,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;CACD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;AACZ,EAAE;AAEF,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,SACxC,CAAC,GAAyB,EAAE,OAAO,aAAa;CAC9C,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC;EACnC,UAAU;EACV,cAAc,MAAM,WAAW,gBAAgB;EAC/C,GAAG,MAAM;EACT,GAAI,MAAM,QAAQ,aAAa,UAC3B;GACE,UAAU,MAAM,YAAY,OAAO;GACnC,UAAU,MAAM,YAAY,OAAO;GACnC,OAAO;EACT,IACA,CAAC;CACP;AACF,CAAC;AAED,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,aACxC,CAAC,GAA6B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG;CAC7B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACF,CAAC;EACA,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,OACZ;EACC,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,OACZ;CACA,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,KAAK,IAAI,EACnD;AACF,EAAE;AAEF,MAAa,wBAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,EAAE,EAC9B;EACA,yBAAyB,EACvB,aAAa,MAAM,QAAQ,KAAK,EAClC;CACF;AACF,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,EAAG;CACtB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,KAAK,EAClC,EACF;AACF,EAAE;AAEF,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,YACjE,CAAC,GACE,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,SAAS;CAC7B,OAAO;CACP,QAAQ;AACV,EACF"}
+{"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n  AppBar,\n  Avatar,\n  Box,\n  Button,\n  buttonClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n  React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n  backgroundColor: 'transparent',\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n  }),\n  color: theme.vars.palette.text.primary,\n  flexDirection: 'row',\n  alignItems: 'center',\n  position: 'relative',\n}))\n\nexport const Container: React.FC<\n  React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: sticky ? 'sticky' : 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 0, 3),\n    overflow: 'auto',\n    borderRadius: theme.container?.borderRadius ?? 0,\n    ...theme.header,\n    ...(theme.header?.position === 'fixed'\n      ? {\n          minWidth: theme.breakpoints.values.xs,\n          maxWidth: theme.breakpoints.values.sm,\n          width: '100%',\n        }\n      : {}),\n  }\n})\n\nexport const WalletButton: React.FC<\n  React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n  shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n  color: theme.vars.palette.text.primary,\n  padding: theme.spacing(1, 1.5),\n  maxHeight: 40,\n  fontSize: '0.875rem',\n  fontWeight: 600,\n  borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n  }),\n  [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {\n    fontSize: '24px',\n  },\n  [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {\n    fontSize: '24px',\n  },\n  ...(theme.navigation.edge && {\n    marginRight: withOffset ? theme.spacing(-1.25) : 0,\n  }),\n}))\n\nexport const DrawerWalletContainer: React.FC<\n  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'space-between',\n\n  ...(theme.navigation.edge && {\n    '& button:first-of-type': {\n      marginLeft: theme.spacing(-1),\n    },\n    '& button:last-of-type': {\n      marginRight: theme.spacing(-1.25),\n    },\n  }),\n}))\n\nexport const HeaderControlsContainer: React.FC<\n  React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(0.5),\n  ...(theme.navigation.edge && {\n    '& button:last-of-type': {\n      marginRight: theme.spacing(-1.25),\n    },\n  }),\n}))\n\nexport const WalletAvatar: React.FC<\n  React.ComponentProps<typeof Avatar> & {\n    avatarSize?: number\n    badgeSize?: number\n  }\n> = styled(Avatar, {\n  shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n  ({ avatarSize = 24, badgeSize = 12 }) => ({\n    mask: getAvatarMask(badgeSize),\n    width: avatarSize,\n    height: avatarSize,\n  })\n)\n"],"mappings":";;;AAWA,MAAa,eAET,OAAO,MAAM,CAAC,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;CACD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;AACZ,EAAE;AAEF,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,SACxC,CAAC,CAAC,EAAwB,EAAE,OAAO,aAAa;CAC9C,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,GAAG,CAAC;EACnC,UAAU;EACV,cAAc,MAAM,WAAW,gBAAgB;EAC/C,GAAG,MAAM;EACT,GAAI,MAAM,QAAQ,aAAa,UAC3B;GACE,UAAU,MAAM,YAAY,OAAO;GACnC,UAAU,MAAM,YAAY,OAAO;GACnC,OAAO;EACT,IACA,CAAC;CACP;AACF,CAAC;AAED,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,aACxC,CAAC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG;CAC7B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACF,CAAC;EACA,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,OACZ;EACC,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,OACZ;CACA,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,KAAK,IAAI,EACnD;AACF,EAAE;AAEF,MAAa,wBAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,EAAE,EAC9B;EACA,yBAAyB,EACvB,aAAa,MAAM,QAAQ,KAAK,EAClC;CACF;AACF,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,EAAG;CACtB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,KAAK,EAClC,EACF;AACF,EAAE;AAEF,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,YACjE,CAAC,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,SAAS;CAC7B,OAAO;CACP,QAAQ;AACV,EACF"}

package/dist/esm/components/Header/HeaderNavigationTabs.js

@@ -0,0 +1,39 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { useNavigationTabsStore } from "../../stores/navigationTabs/useNavigationTabsStore.js";
+import { useNavigationTabLabel } from "../../stores/navigationTabs/useNavigationTabLabel.js";
+import { HeaderTabs } from "./HeaderTabs.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Header/HeaderNavigationTabs.tsx
+const HeaderNavigationTabs = () => {
+	const [tabs, activeTab, setActiveTab] = useNavigationTabsStore((store) => [
+		store.tabs,
+		store.activeTab,
+		store.setActiveTab
+	]);
+	const getLabel = useNavigationTabLabel();
+	const emitter = useWidgetEvents();
+	const previousTabRef = useRef(void 0);
+	useEffect(() => {
+		if (!activeTab || previousTabRef.current === activeTab) return;
+		emitter.emit("navigationTabChanged", {
+			tab: activeTab,
+			previousTab: previousTabRef.current
+		});
+		previousTabRef.current = activeTab;
+	}, [emitter, activeTab]);
+	if (!tabs.length || !activeTab) return null;
+	return /* @__PURE__ */ jsx(HeaderTabs, {
+		tabs: tabs.map((key) => ({
+			key,
+			label: getLabel(key)
+		})),
+		value: activeTab,
+		onChange: setActiveTab
+	});
+};
+//#endregion
+export { HeaderNavigationTabs };
+
+//# sourceMappingURL=HeaderNavigationTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/HeaderNavigationTabs.tsx"],"sourcesContent":["import { type JSX, useEffect, useRef } from 'react'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useNavigationTabLabel } from '../../stores/navigationTabs/useNavigationTabLabel.js'\nimport { useNavigationTabsStore } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { NavigationTabKey } from '../../types/widget.js'\nimport { HeaderTabs } from './HeaderTabs.js'\n\nexport const HeaderNavigationTabs = (): JSX.Element | null => {\n  const [tabs, activeTab, setActiveTab] = useNavigationTabsStore((store) => [\n    store.tabs,\n    store.activeTab,\n    store.setActiveTab,\n  ])\n  const getLabel = useNavigationTabLabel()\n  const emitter = useWidgetEvents()\n  const previousTabRef = useRef<NavigationTabKey | undefined>(undefined)\n\n  // Emit on the first resolved tab and on every subsequent switch.\n  useEffect(() => {\n    if (!activeTab || previousTabRef.current === activeTab) {\n      return\n    }\n    emitter.emit(WidgetEvent.NavigationTabChanged, {\n      tab: activeTab,\n      previousTab: previousTabRef.current,\n    })\n    previousTabRef.current = activeTab\n  }, [emitter, activeTab])\n\n  if (!tabs.length || !activeTab) {\n    return null\n  }\n\n  return (\n    <HeaderTabs\n      tabs={tabs.map((key) => ({ key, label: getLabel(key) }))}\n      value={activeTab}\n      onChange={setActiveTab}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,6BAAiD;CAC5D,MAAM,CAAC,MAAM,WAAW,gBAAgB,wBAAwB,UAAU;EACxE,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CACD,MAAM,WAAW,sBAAsB;CACvC,MAAM,UAAU,gBAAgB;CAChC,MAAM,iBAAiB,OAAqC,KAAA,CAAS;CAGrE,gBAAgB;EACd,IAAI,CAAC,aAAa,eAAe,YAAY,WAC3C;EAEF,QAAQ,KAAA,wBAAuC;GAC7C,KAAK;GACL,aAAa,eAAe;EAC9B,CAAC;EACD,eAAe,UAAU;CAC3B,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,IAAI,CAAC,KAAK,UAAU,CAAC,WACnB,OAAO;CAGT,OACE,oBAAC,YAAD;EACE,MAAM,KAAK,KAAK,SAAS;GAAE;GAAK,OAAO,SAAS,GAAG;EAAE,EAAE;EACvD,OAAO;EACP,UAAU;CACX,CAAA;AAEL"}

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

@@ -0,0 +1,33 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { NavigationTab, NavigationTabs } from "../Tabs/NavigationTabs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Header/HeaderTabs.tsx
+/**
+* Presentational header tabs bar shared by split mode and configured
+* navigation tabs.
+* Clears the form fields on switch; the caller supplies the labelled tabs, the
+* active key, and what selecting a key means for its store.
+*/
+const HeaderTabs = ({ tabs, value, onChange }) => {
+	const { setFieldValue } = useFieldActions();
+	const handleChange = (_, key) => {
+		setFieldValue("fromAmount", "");
+		setFieldValue("fromToken", "");
+		setFieldValue("toToken", "");
+		onChange(key);
+	};
+	return /* @__PURE__ */ jsx(NavigationTabs, {
+		value,
+		onChange: handleChange,
+		"aria-label": "tabs",
+		children: tabs.map((tab) => /* @__PURE__ */ jsx(NavigationTab, {
+			value: tab.key,
+			label: tab.label,
+			disableRipple: true
+		}, tab.key))
+	});
+};
+//#endregion
+export { HeaderTabs };
+
+//# sourceMappingURL=HeaderTabs.js.map

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

@@ -0,0 +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"}

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

@@ -1,26 +1,28 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from "../../utils/navigationRoutes.js";
+import { useNavigationTabsStore } from "../../stores/navigationTabs/useNavigationTabsStore.js";
 import { HeaderAppBar, HeaderControlsContainer } from "./Header.style.js";
 import { ActivitiesButton } from "./ActivitiesButton.js";
 import { BackButton } from "./BackButton.js";
 import { CloseDrawerButton } from "./CloseDrawerButton.js";
+import { HeaderNavigationTabs } from "./HeaderNavigationTabs.js";
 import { SettingsButton } from "./SettingsButton.js";
-import { SplitNavigationTabs } from "./SplitNavigationTabs.js";
 import { useLocation } from "@tanstack/react-router";
 import { Box, Typography } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAccount } from "@lifi/wallet-management";
 //#region src/components/Header/NavigationHeader.tsx
 const NavigationHeader = () => {
-	const { mode, hiddenUI, variant, defaultUI, modeOptions } = useWidgetConfig();
+	const { hiddenUI, variant, defaultUI } = useWidgetConfig();
+	const navigationTabsCount = useNavigationTabsStore((state) => state.tabs.length);
 	const { account } = useAccount();
 	const [element, title] = useHeaderStore((state) => [state.element, state.title]);
 	const { pathname } = useLocation();
 	const cleanedPathname = pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
 	const path = cleanedPathname.substring(cleanedPathname.lastIndexOf("/") + 1);
 	const hasPath = navigationRoutesValues.includes(path);
-	const showSplitOptions = mode === "split" && !hasPath && typeof modeOptions?.split !== "string";
+	const showHeaderTabs = !hasPath && navigationTabsCount > 0;
 	return /* @__PURE__ */ jsxs(HeaderAppBar, {
 		elevation: 0,
 		sx: {
@@ -29,12 +31,12 @@ const NavigationHeader = () => {
 		},
 		children: [
 			backButtonRoutes.includes(path) ? /* @__PURE__ */ jsx(BackButton, {}) : null,
-			showSplitOptions ? /* @__PURE__ */ jsx(Box, {
+			showHeaderTabs ? /* @__PURE__ */ jsx(Box, {
 				sx: {
 					flex: 1,
 					marginRight: 1
 				},
-				children: /* @__PURE__ */ jsx(SplitNavigationTabs, {})
+				children: /* @__PURE__ */ jsx(HeaderNavigationTabs, {})
 			}) : /* @__PURE__ */ jsx(Typography, {
 				align: hasPath ? "center" : "left",
 				noWrap: defaultUI?.navigationHeaderTitleNoWrap ?? true,

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 {\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 { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n  const { mode, hiddenUI, variant, defaultUI, modeOptions } = useWidgetConfig()\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  // Show tabs when split is undefined (default tabs) or an object with defaultTab\n  // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n  const showSplitOptions =\n    mode === 'split' && !hasPath && typeof modeOptions?.split !== 'string'\n\n  return (\n    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n      {backButtonRoutes.includes(path) ? <BackButton /> : null}\n      {showSplitOptions ? (\n        <Box sx={{ flex: 1, marginRight: 1 }}>\n          <SplitNavigationTabs />\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":";;;;;;;;;;;;;;AAiBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,MAAM,UAAU,SAAS,WAAW,gBAAgB,gBAAgB;CAC5E,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,mBACJ,SAAS,WAAW,CAAC,WAAW,OAAO,aAAa,UAAU;CAEhE,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;EAAI;YAApE;GACG,iBAAiB,SAAS,IAAI,IAAI,oBAAC,YAAD,CAAa,CAAA,IAAI;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;IAAE;cACjC,oBAAC,qBAAD,CAAsB,CAAA;GACnB,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;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n  badgeClasses,\n  IconButton,\n  Badge as MuiBadge,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n  React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.25),\n  [`.${badgeClasses.badge}`]: {\n    width: 10,\n    height: 10,\n    borderRadius: '50%',\n    transform: 'translate(70%, -70%)',\n  },\n}))\n\ninterface SettingsIconButtonProps {\n  variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n  React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n  switch (variant) {\n    case 'info':\n      return {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n          },\n        }),\n      }\n    case 'warning':\n      return {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,\n          },\n        }),\n      }\n    default:\n      return {}\n  }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,KAAQ,GAAG,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;EACtB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;CACb;AACF,EAAE;AAMF,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,UAC1C,CAAC,GAA4B,EAAE,OAAO,cAAc;CAClD,QAAQ,SAAR;EACE,KAAK,QACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;GACF,CAAC;EACH;EACF,KAAK,WACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,gCAC5F;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,gCAC5F;GACF,CAAC;EACH;EACF,SACE,OAAO,CAAC;CACZ;AACF,CAAC"}
+{"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n  badgeClasses,\n  IconButton,\n  Badge as MuiBadge,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n  React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.25),\n  [`.${badgeClasses.badge}`]: {\n    width: 10,\n    height: 10,\n    borderRadius: '50%',\n    transform: 'translate(70%, -70%)',\n  },\n}))\n\ninterface SettingsIconButtonProps {\n  variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n  React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n  switch (variant) {\n    case 'info':\n      return {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n          },\n        }),\n      }\n    case 'warning':\n      return {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,\n          },\n        }),\n      }\n    default:\n      return {}\n  }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,KAAQ,CAAC,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;EACtB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;CACb;AACF,EAAE;AAMF,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,UAC1C,CAAC,CAAC,EAA2B,EAAE,OAAO,cAAc;CAClD,QAAQ,SAAR;EACE,KAAK,QACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,oBACtE;GACF,CAAC;EACH;EACF,KAAK,WACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,gCAC5F;GACA,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,gCAC5F;GACF,CAAC;EACH;EACF,SACE,OAAO,CAAC;CACZ;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"WalletMenu.style.js","names":["MuiMenu"],"sources":["../../../../src/components/Header/WalletMenu.style.tsx"],"sourcesContent":["import {\n  Menu as MuiMenu,\n  menuClasses,\n  menuItemClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const WalletMenuContainer: React.FC<\n  React.ComponentProps<typeof MuiMenu>\n> = styled(MuiMenu)(({ theme }) => ({\n  [`& .${menuClasses.paper}`]: {\n    borderRadius: theme.vars.shape.borderRadius,\n    color: theme.vars.palette.text.primary,\n    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',\n    padding: theme.spacing(2),\n    [`& .${menuClasses.list}`]: {\n      padding: 0,\n    },\n    [`& .${menuItemClasses.root}`]: {\n      borderRadius: theme.vars.shape.borderRadiusSecondary,\n      padding: theme.spacing(1, 0, 1, 1),\n      [`& .${svgIconClasses.root}`]: {\n        fontSize: 20,\n        color: theme.vars.palette.text.primary,\n      },\n      ':hover': {\n        background: 'none',\n        cursor: 'default',\n      },\n    },\n  },\n}))\n"],"mappings":";;AASA,MAAa,sBAET,OAAOA,IAAO,GAAG,EAAE,aAAa,GACjC,MAAM,YAAY,UAAU;CAC3B,cAAc,MAAM,KAAK,MAAM;CAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,SAAS,MAAM,QAAQ,CAAC;EACvB,MAAM,YAAY,SAAS,EAC1B,SAAS,EACX;EACC,MAAM,gBAAgB,SAAS;EAC9B,cAAc,MAAM,KAAK,MAAM;EAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;GAChC,MAAM,eAAe,SAAS;GAC7B,UAAU;GACV,OAAO,MAAM,KAAK,QAAQ,KAAK;EACjC;EACA,UAAU;GACR,YAAY;GACZ,QAAQ;EACV;CACF;AACF,EACF,EAAE"}
+{"version":3,"file":"WalletMenu.style.js","names":["MuiMenu"],"sources":["../../../../src/components/Header/WalletMenu.style.tsx"],"sourcesContent":["import {\n  Menu as MuiMenu,\n  menuClasses,\n  menuItemClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const WalletMenuContainer: React.FC<\n  React.ComponentProps<typeof MuiMenu>\n> = styled(MuiMenu)(({ theme }) => ({\n  [`& .${menuClasses.paper}`]: {\n    borderRadius: theme.vars.shape.borderRadius,\n    color: theme.vars.palette.text.primary,\n    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',\n    padding: theme.spacing(2),\n    [`& .${menuClasses.list}`]: {\n      padding: 0,\n    },\n    [`& .${menuItemClasses.root}`]: {\n      borderRadius: theme.vars.shape.borderRadiusSecondary,\n      padding: theme.spacing(1, 0, 1, 1),\n      [`& .${svgIconClasses.root}`]: {\n        fontSize: 20,\n        color: theme.vars.palette.text.primary,\n      },\n      ':hover': {\n        background: 'none',\n        cursor: 'default',\n      },\n    },\n  },\n}))\n"],"mappings":";;AASA,MAAa,sBAET,OAAOA,IAAO,CAAC,EAAE,EAAE,aAAa,GACjC,MAAM,YAAY,UAAU;CAC3B,cAAc,MAAM,KAAK,MAAM;CAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,SAAS,MAAM,QAAQ,CAAC;EACvB,MAAM,YAAY,SAAS,EAC1B,SAAS,EACX;EACC,MAAM,gBAAgB,SAAS;EAC9B,cAAc,MAAM,KAAK,MAAM;EAC/B,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;GAChC,MAAM,eAAe,SAAS;GAC7B,UAAU;GACV,OAAO,MAAM,KAAK,QAAQ,KAAK;EACjC;EACA,UAAU;GACR,YAAY;GACZ,QAAQ;EACV;CACF;AACF,EACF,EAAE"}

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

@@ -52,6 +52,6 @@ const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colo
 	};
 });
 //#endregion
-export { IconCircleRoot, getStatusColor };
+export { IconCircleRoot, getStatusColor, iconSizeRatio };
 
 //# sourceMappingURL=IconCircle.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCircle.style.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { StatusIcon } from './statusIcons'\n\nexport const iconCircleSize = 90\n\ninterface StatusColorConfig {\n  color: string\n  mixAmount: number\n  lightDarken: number\n  darkDarken: number\n}\n\nexport const getStatusColor = (\n  status: StatusIcon,\n  theme: Theme\n): StatusColorConfig => {\n  switch (status) {\n    case 'success':\n      return {\n        color: theme.vars.palette.success.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'error':\n      return {\n        color: theme.vars.palette.error.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.main,\n        mixAmount: 48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    case 'info':\n      return {\n        color: theme.vars.palette.info.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const iconSizeRatio: number = 48 / 90\n\nexport const IconCircleRoot: React.FC<\n  React.ComponentProps<typeof Box> & {\n    colorConfig: StatusColorConfig\n    circleSize: number\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',\n})<{ colorConfig: StatusColorConfig; circleSize: number }>(\n  ({ theme, colorConfig, circleSize }) => {\n    const svgSize = Math.round(circleSize * iconSizeRatio)\n    return {\n      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,\n      borderRadius: '50%',\n      width: circleSize,\n      height: circleSize,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,\n        width: svgSize,\n        height: svgSize,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,\n          width: svgSize,\n          height: svgSize,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;AAcA,MAAa,kBACX,QACA,UACsB;CACtB,QAAQ,QAAR;EACE,KAAK,WACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,SACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,WACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,QACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,WAAW;GACX,aAAa;GACb,YAAY;EACd;CACJ;AACF;AAEA,MAAa,gBAAwB,KAAK;AAE1C,MAAa,iBAKT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,iBAAiB,SAAS,aAClE,CAAC,GACE,EAAE,OAAO,aAAa,iBAAiB;CACtC,MAAM,UAAU,KAAK,MAAM,aAAa,aAAa;CACrD,OAAO;EACL,iBAAiB,sBAAsB,YAAY,MAAM,GAAG,YAAY,UAAU,KAAK,MAAM,KAAK,QAAQ,WAAW,MAAM;EAC3H,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,eAAe,IAAI;GACtF,OAAO;GACP,QAAQ;EACV;EACA,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,cAAc,IAAI;GACrF,OAAO;GACP,QAAQ;EACV,EACF,CAAC;CACH;AACF,CACF"}
+{"version":3,"file":"IconCircle.style.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { StatusIcon } from './statusIcons'\n\nexport const iconCircleSize = 90\n\ninterface StatusColorConfig {\n  color: string\n  mixAmount: number\n  lightDarken: number\n  darkDarken: number\n}\n\nexport const getStatusColor = (\n  status: StatusIcon,\n  theme: Theme\n): StatusColorConfig => {\n  switch (status) {\n    case 'success':\n      return {\n        color: theme.vars.palette.success.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'error':\n      return {\n        color: theme.vars.palette.error.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.main,\n        mixAmount: 48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    case 'info':\n      return {\n        color: theme.vars.palette.info.main,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const iconSizeRatio: number = 48 / 90\n\nexport const IconCircleRoot: React.FC<\n  React.ComponentProps<typeof Box> & {\n    colorConfig: StatusColorConfig\n    circleSize: number\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'colorConfig' && prop !== 'circleSize',\n})<{ colorConfig: StatusColorConfig; circleSize: number }>(\n  ({ theme, colorConfig, circleSize }) => {\n    const svgSize = Math.round(circleSize * iconSizeRatio)\n    return {\n      backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,\n      borderRadius: '50%',\n      width: circleSize,\n      height: circleSize,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,\n        width: svgSize,\n        height: svgSize,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,\n          width: svgSize,\n          height: svgSize,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;AAcA,MAAa,kBACX,QACA,UACsB;CACtB,QAAQ,QAAR;EACE,KAAK,WACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,SACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,WACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;EACd;EACF,KAAK,QACH,OAAO;GACL,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,WAAW;GACX,aAAa;GACb,YAAY;EACd;CACJ;AACF;AAEA,MAAa,gBAAwB,KAAK;AAE1C,MAAa,iBAKT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,iBAAiB,SAAS,aAClE,CAAC,CAAC,EACC,EAAE,OAAO,aAAa,iBAAiB;CACtC,MAAM,UAAU,KAAK,MAAM,aAAa,aAAa;CACrD,OAAO;EACL,iBAAiB,sBAAsB,YAAY,MAAM,GAAG,YAAY,UAAU,KAAK,MAAM,KAAK,QAAQ,WAAW,MAAM;EAC3H,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,eAAe,IAAI;GACtF,OAAO;GACP,QAAQ;EACV;EACA,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,cAAc,IAAI;GACrF,OAAO;GACP,QAAQ;EACV,EACF,CAAC;CACH;AACF,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({\n  color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n  lineHeight: 0,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n  }),\n}))\n"],"mappings":";;AAIA,MAAa,iBAAqC,OAAO,GAAG,GAAG,EAAE,aAAa;CAC5E,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE,CAAC;AACH,EAAE"}
+{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<BoxProps> = styled(Box)(({ theme }) => ({\n  color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n  lineHeight: 0,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)`,\n  }),\n}))\n"],"mappings":";;AAIA,MAAa,iBAAqC,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC5E,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpE,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE,CAAC;AACH,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/Input.tsx"],"sourcesContent":["import { InputBase, inputBaseClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  paddingRight: theme.spacing(2),\n  [`.${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1.5, 1, 1.5, 2),\n    height: '2.875em',\n    boxSizing: 'inherit',\n  },\n  fontWeight: 500,\n}))\n"],"mappings":";;AAGA,MAAa,QAA0D,OACrE,SACF,GAAG,EAAE,aAAa;CAChB,cAAc,MAAM,QAAQ,CAAC;EAC5B,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,QAAQ;EACR,WAAW;CACb;CACA,YAAY;AACd,EAAE"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/Input.tsx"],"sourcesContent":["import { InputBase, inputBaseClasses, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const Input: React.FC<React.ComponentProps<typeof InputBase>> = styled(\n  InputBase\n)(({ theme }) => ({\n  paddingRight: theme.spacing(2),\n  [`.${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1.5, 1, 1.5, 2),\n    height: '2.875em',\n    boxSizing: 'inherit',\n  },\n  fontWeight: 500,\n}))\n"],"mappings":";;AAGA,MAAa,QAA0D,OACrE,SACF,CAAC,EAAE,EAAE,aAAa;CAChB,cAAc,MAAM,QAAQ,CAAC;EAC5B,IAAI,iBAAiB,UAAU;EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,QAAQ;EACR,WAAW;CACb;CACA,YAAY;AACd,EAAE"}

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

@@ -0,0 +1,99 @@
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { formatDuration } from "../../utils/format.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { Card as Card$1 } from "../Card/Card.js";
+import { Switch as Switch$1 } from "../Switch.js";
+import { Container as Container$1, ExpiryValue, SettingItemButton, SettingItemTitle, SettingItemValue, SettingsRow, ToggleLabel } from "./LimitOrderSettings.style.js";
+import { useState } from "react";
+import { Menu, MenuItem } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Check from "@mui/icons-material/Check";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+//#region src/components/LimitOrderSettings/LimitOrderSettings.tsx
+/** Selectable order-validity durations, in seconds. */
+const DURATIONS = [
+	3600,
+	86400,
+	604800,
+	2592e3,
+	31536e3
+];
+const LimitOrderSettings = (props) => {
+	const { t, i18n } = useTranslation();
+	const [validUntil, partiallyFillable] = useFieldValues("validUntil", "partiallyFillable");
+	const { setFieldValue } = useFieldActions();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const handleOpen = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+	const handleSelect = (duration) => {
+		setFieldValue("validUntil", duration);
+		setAnchorEl(null);
+	};
+	const handlePartiallyFillableChange = (event) => {
+		setFieldValue("partiallyFillable", event.target.checked);
+	};
+	return /* @__PURE__ */ jsxs(Container$1, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Card$1, { children: /* @__PURE__ */ jsxs(SettingItemButton, {
+				onClick: handleOpen,
+				disableRipple: true,
+				"aria-haspopup": "menu",
+				"aria-expanded": open,
+				children: [/* @__PURE__ */ jsx(SettingItemTitle, { children: t("limitOrder.expiresIn") }), /* @__PURE__ */ jsxs(ExpiryValue, { children: [/* @__PURE__ */ jsx(SettingItemValue, { children: formatDuration(validUntil, i18n.language, "long") }), /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { sx: {
+					fontSize: 20,
+					height: "18px",
+					marginTop: "2px"
+				} })] })]
+			}) }),
+			/* @__PURE__ */ jsx(Menu, {
+				anchorEl,
+				open,
+				onClose: handleClose,
+				anchorOrigin: {
+					vertical: "bottom",
+					horizontal: "right"
+				},
+				transformOrigin: {
+					vertical: "top",
+					horizontal: "right"
+				},
+				slotProps: { paper: { sx: (theme) => ({
+					border: `1px solid ${theme.vars.palette.grey[300]}`,
+					boxShadow: "none",
+					...theme.applyStyles("dark", { borderColor: theme.vars.palette.grey[800] })
+				}) } },
+				children: DURATIONS.map((duration) => /* @__PURE__ */ jsxs(MenuItem, {
+					onClick: () => handleSelect(duration),
+					sx: (theme) => ({
+						justifyContent: "space-between",
+						gap: 4,
+						fontSize: 14,
+						fontWeight: 700,
+						lineHeight: "18px",
+						color: theme.vars.palette.text.primary
+					}),
+					children: [formatDuration(duration, i18n.language, "long"), duration === validUntil ? /* @__PURE__ */ jsx(Check, {
+						color: "primary",
+						fontSize: "small"
+					}) : null]
+				}, duration))
+			}),
+			/* @__PURE__ */ jsx(Card$1, { children: /* @__PURE__ */ jsxs(SettingsRow, { children: [/* @__PURE__ */ jsx(ToggleLabel, { children: t("limitOrder.partiallyFillable") }), /* @__PURE__ */ jsx(Switch$1, {
+				checked: partiallyFillable,
+				onChange: handlePartiallyFillableChange,
+				"aria-label": t("limitOrder.partiallyFillable")
+			})] }) })
+		]
+	});
+};
+//#endregion
+export { LimitOrderSettings };
+
+//# sourceMappingURL=LimitOrderSettings.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,52 @@
+import { Box, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/LimitOrderSettings/LimitOrderSettings.style.tsx
+const Container$1 = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
+}));
+const SettingsRow = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	gap: theme.spacing(2),
+	padding: theme.spacing(1.5, 2)
+}));
+const ToggleLabel = styled(Box)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	lineHeight: 1,
+	color: theme.vars.palette.text.primary,
+	flex: "1 0 0",
+	minWidth: 0
+}));
+const ExpiryValue = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(.5),
+	color: theme.vars.palette.text.secondary,
+	height: 14
+}));
+const SettingItemButton = styled(ButtonBase)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	width: "100%",
+	padding: theme.spacing(2),
+	borderRadius: theme.vars.shape.borderRadius
+}));
+const SettingItemTitle = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	color: theme.vars.palette.text.primary,
+	lineHeight: 1
+}));
+const SettingItemValue = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	fontWeight: 700,
+	color: theme.vars.palette.text.primary
+}));
+//#endregion
+export { Container$1 as Container, ExpiryValue, SettingItemButton, SettingItemTitle, SettingItemValue, SettingsRow, ToggleLabel };
+
+//# sourceMappingURL=LimitOrderSettings.style.js.map