@lifi/widget 4.0.0-beta.13 → 4.0.0-beta.17

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

@@ -1,4 +1,4 @@
-import { ExpansionType } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useHasChainExpansion } from "../../hooks/useHasChainExpansion.js";
 import { ExpansionContainer } from "./Expansion.style.js";
 import { chainExpansionWidth } from "../Chains/ChainsExpanded.style.js";
@@ -12,16 +12,16 @@ function Expansion() {
 	const [withChainExpansion, expansionType] = useHasChainExpansion();
 	const chainExpansionTypeRef = useRef(expansionType);
 	const [routesOpen, setRoutesOpen] = useState(false);
-	if (expansionType === ExpansionType.FromChain || expansionType === ExpansionType.ToChain) chainExpansionTypeRef.current = expansionType;
+	if (expansionType === "fromChain" || expansionType === "toChain") chainExpansionTypeRef.current = expansionType;
 	return /* @__PURE__ */ jsxs(ExpansionContainer, {
 		width: useMemo(() => {
 			return routesOpen ? routesExpansionWidth : withChainExpansion ? chainExpansionWidth : 0;
 		}, [routesOpen, withChainExpansion]),
 		children: [/* @__PURE__ */ jsx(RoutesExpanded, {
-			canOpen: expansionType === ExpansionType.Routes,
+			canOpen: expansionType === "routes",
 			setOpenExpansion: setRoutesOpen
 		}), /* @__PURE__ */ jsx(ChainsExpanded, {
-			formType: chainExpansionTypeRef.current === ExpansionType.FromChain ? "from" : "to",
+			formType: chainExpansionTypeRef.current === "fromChain" ? "from" : "to",
 			open: withChainExpansion
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n  const [withChainExpansion, expansionType] = useHasChainExpansion()\n  const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n  const [routesOpen, setRoutesOpen] = useState(false)\n\n  // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n  if (\n    expansionType === ExpansionType.FromChain ||\n    expansionType === ExpansionType.ToChain\n  ) {\n    chainExpansionTypeRef.current = expansionType\n  }\n\n  const containerWidth = useMemo(() => {\n    return routesOpen\n      ? routesExpansionWidth\n      : withChainExpansion\n        ? chainExpansionWidth\n        : 0\n  }, [routesOpen, withChainExpansion])\n\n  return (\n    <ExpansionContainer width={containerWidth}>\n      <RoutesExpanded\n        canOpen={expansionType === ExpansionType.Routes}\n        setOpenExpansion={setRoutesOpen}\n      />\n      <ChainsExpanded\n        formType={\n          chainExpansionTypeRef.current === ExpansionType.FromChain\n            ? 'from'\n            : 'to'\n        }\n        open={withChainExpansion}\n      />\n    </ExpansionContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAkB,cAAc,aAChC,kBAAkB,cAAc,QAEhC,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAAC;YAGlC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAkB,cAAc;GACzC,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAY,cAAc,YAC5C,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}
+{"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n  const [withChainExpansion, expansionType] = useHasChainExpansion()\n  const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n  const [routesOpen, setRoutesOpen] = useState(false)\n\n  // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n  if (\n    expansionType === ExpansionType.FromChain ||\n    expansionType === ExpansionType.ToChain\n  ) {\n    chainExpansionTypeRef.current = expansionType\n  }\n\n  const containerWidth = useMemo(() => {\n    return routesOpen\n      ? routesExpansionWidth\n      : withChainExpansion\n        ? chainExpansionWidth\n        : 0\n  }, [routesOpen, withChainExpansion])\n\n  return (\n    <ExpansionContainer width={containerWidth}>\n      <RoutesExpanded\n        canOpen={expansionType === ExpansionType.Routes}\n        setOpenExpansion={setRoutesOpen}\n      />\n      <ChainsExpanded\n        formType={\n          chainExpansionTypeRef.current === ExpansionType.FromChain\n            ? 'from'\n            : 'to'\n        }\n        open={withChainExpansion}\n      />\n    </ExpansionContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAA,eACA,kBAAA,UAEA,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAAC;YAGlC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}

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

@@ -19,7 +19,7 @@ const ActivitiesButton = () => {
 			active: indicator.active || indicator.failed,
 			size: "medium",
 			onClick: () => navigate({ to: navigationRoutes.activities }),
-			disableRipple: true,
+			disableRipple: indicator.active || indicator.failed,
 			children: /* @__PURE__ */ jsx(ErrorBadge, {
 				invisible: !indicator.failed,
 				badgeContent: /* @__PURE__ */ jsx(ErrorRounded, {

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

@@ -1 +1 @@
-{"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n  ActivitiesIconButton,\n  ErrorBadge,\n  IconContainer,\n  ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const indicator = useRouteExecutionIndicator()\n\n  return (\n    <Tooltip title={t('header.activities')}>\n      <ActivitiesIconButton\n        active={indicator.active || indicator.failed}\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.activities })}\n        disableRipple\n      >\n        <ErrorBadge\n          invisible={!indicator.failed}\n          badgeContent={\n            <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n          }\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        >\n          <IconContainer>\n            {(indicator.active || indicator.failed) && (\n              <ProgressTrack\n                variant=\"determinate\"\n                value={100}\n                size={40}\n                thickness={3}\n              />\n            )}\n            {indicator.active && (\n              <CircularProgressPending\n                size={40}\n                sx={{ position: 'absolute', top: -8, left: -8 }}\n              />\n            )}\n            <HistoryIcon />\n          </IconContainer>\n        </ErrorBadge>\n      </ActivitiesIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAA;aAEA,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
+{"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n  ActivitiesIconButton,\n  ErrorBadge,\n  IconContainer,\n  ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const indicator = useRouteExecutionIndicator()\n\n  return (\n    <Tooltip title={t('header.activities')}>\n      <ActivitiesIconButton\n        active={indicator.active || indicator.failed}\n        size=\"medium\"\n        onClick={() => navigate({ to: navigationRoutes.activities })}\n        disableRipple={indicator.active || indicator.failed}\n      >\n        <ErrorBadge\n          invisible={!indicator.failed}\n          badgeContent={\n            <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n          }\n          overlap=\"circular\"\n          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        >\n          <IconContainer>\n            {(indicator.active || indicator.failed) && (\n              <ProgressTrack\n                variant=\"determinate\"\n                value={100}\n                size={40}\n                thickness={3}\n              />\n            )}\n            {indicator.active && (\n              <CircularProgressPending\n                size={40}\n                sx={{ position: 'absolute', top: -8, left: -8 }}\n              />\n            )}\n            <HistoryIcon />\n          </IconContainer>\n        </ErrorBadge>\n      </ActivitiesIconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}

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

@@ -20,11 +20,11 @@ const IconContainer = styled(Box)(() => ({
 const ActivitiesIconButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "active" })({ variants: [{
 	props: { active: true },
 	style: ({ theme }) => ({
-		backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
-		"&:hover": { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)` },
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)` },
 		...theme.applyStyles("dark", {
-			backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
-			"&:hover": { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)` }
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }
 		})
 	})
 }] });

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: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,\n        '&:hover': {\n          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n          '&:hover': {\n            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,\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,MACD,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;CACP,EACF,EAAE;AAEH,MAAa,gBAA4D,OACvE,IACD,QAAQ;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EAAE;AAEH,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,UACvC,CAAC,CAAuB,EACvB,UAAU,CACR;CACE,OAAO,EAAE,QAAQ,MAAM;CACvB,QAAQ,EAAE,aAAa;EACrB,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;EAC7D,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;GAC7D,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D;GACF,CAAC;EACH;CACF,CACF,EACF,CAAC;AAEF,MAAa,gBAET,OAAOC,iBAAoB,EAAE,EAAE,aAAa;CAC9C,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,MAChC,CAAC;CACH,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,MACD,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;CACP,EACF,EAAE;AAEH,MAAa,gBAA4D,OACvE,IACD,QAAQ;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EAAE;AAEH,MAAa,uBAET,OAAOA,YAAe,EACxB,oBAAoB,SAAS,SAAS,UACvC,CAAC,CAAuB,EACvB,UAAU,CACR;CACE,OAAO,EAAE,QAAQ,MAAM;CACvB,QAAQ,EAAE,aAAa;EACrB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;EACD,GAAG,MAAM,YAAY,QAAQ;GAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;GACF,CAAC;EACH;CACF,CACF,EACF,CAAC;AAEF,MAAa,gBAET,OAAOC,iBAAoB,EAAE,EAAE,aAAa;CAC9C,UAAU;CACV,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,MAChC,CAAC;CACH,EAAE"}

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

@@ -1,5 +1,5 @@
 import { useSetHeaderHeight } from "../../stores/header/useHeaderStore.js";
-import { ElementId, createElementId } from "../../utils/elements.js";
+import { createElementId } from "../../utils/elements.js";
 import { stickyHeaderRoutes } from "../../utils/navigationRoutes.js";
 import { useDefaultElementId } from "../../hooks/useDefaultElementId.js";
 import { Container } from "./Header.style.js";
@@ -29,7 +29,7 @@ const HeaderContainer = ({ children }) => {
 		};
 	}, [setHeaderHeight]);
 	return /* @__PURE__ */ jsx(Container, {
-		id: createElementId(ElementId.Header, elementId ?? ""),
+		id: createElementId("widget-header", elementId ?? ""),
 		sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)),
 		ref: headerRef,
 		children

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,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,gBAAgB,UAAU,QAAQ,aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}
+{"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,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}

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

@@ -37,10 +37,10 @@ const WalletButton = styled(Button, { shouldForwardProp: (prop) => prop !== "wit
 	fontWeight: 600,
 	borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,
 	backgroundColor: "transparent",
-	"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
 	...theme.applyStyles("dark", {
 		backgroundColor: "transparent",
-		"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
 	}),
 	[`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: { fontSize: "24px" },
 	[`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: { fontSize: "24px" },

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, 1.5, 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: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: 'transparent',\n    '&:hover': {\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\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,OAAO,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;CACF,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EAAwB,EAAE,OAAO,aAAa;AAC9C,QAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,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;GACR,GACD,EAAE;EACP;EACD;AAEF,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,cACvC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,IAAI;CAC9B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;EACF,CAAC;EACD,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,QACX;EACA,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,QACX;CACD,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,MAAM,GAAG,GAClD;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,GAAG,EAC9B;EACD,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC;EACF;CACF,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAI;CACvB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC,EACF;CACF,EAAE;AAEH,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,UAAU;CAC9B,OAAO;CACP,QAAQ;CACT,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, 1.5, 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,OAAO,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;CACF,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EAAwB,EAAE,OAAO,aAAa;AAC9C,QAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,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;GACR,GACD,EAAE;EACP;EACD;AAEF,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,cACvC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,IAAI;CAC9B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACF,CAAC;EACD,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,QACX;EACA,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,QACX;CACD,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,MAAM,GAAG,GAClD;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,GAAG,EAC9B;EACD,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC;EACF;CACF,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAI;CACvB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC,EACF;CACF,EAAE;AAEH,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,UAAU;CAC9B,OAAO;CACP,QAAQ;CACT,EACF"}

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

@@ -1,6 +1,6 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useHeaderStore } from "../../stores/header/useHeaderStore.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues } from "../../utils/navigationRoutes.js";
 import { HeaderAppBar, HeaderControlsContainer } from "./Header.style.js";
 import { ActivitiesButton } from "./ActivitiesButton.js";
@@ -47,9 +47,9 @@ const NavigationHeader = () => {
 				children: title
 			}),
 			pathname === navigationRoutes.home ? /* @__PURE__ */ jsxs(HeaderControlsContainer, { children: [
-				account.isConnected && !hiddenUI?.includes(HiddenUI.History) && /* @__PURE__ */ jsx(ActivitiesButton, {}),
+				account.isConnected && !hiddenUI?.includes("history") && /* @__PURE__ */ jsx(ActivitiesButton, {}),
 				/* @__PURE__ */ jsx(SettingsButton, {}),
-				variant === "drawer" && !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
+				variant === "drawer" && !hiddenUI?.includes("drawerCloseButton") ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "navigation" }) : null
 			] }) : element || /* @__PURE__ */ jsx(Box, { sx: {
 				width: 28,
 				height: 40

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 { HiddenUI } from '../../types/widget.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 { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n    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    subvariant === 'split' &&\n    !hasPath &&\n    typeof subvariantOptions?.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?.includes(HiddenUI.History) && (\n            <ActivitiesButton />\n          )}\n          <SettingsButton />\n          {variant === 'drawer' &&\n          !hiddenUI?.includes(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,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,SAAS,SAAS,QAAQ,IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,SAAS,SAAS,kBAAkB,GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}
+{"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 { HiddenUI } from '../../types/widget.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 { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n    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    subvariant === 'split' &&\n    !hasPath &&\n    typeof subvariantOptions?.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?.includes(HiddenUI.History) && (\n            <ActivitiesButton />\n          )}\n          <SettingsButton />\n          {variant === 'drawer' &&\n          !hiddenUI?.includes(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,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,SAAA,UAA0B,IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,SAAA,oBAAoC,GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}

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

@@ -14,19 +14,19 @@ const SettingsIconBadge = styled(Badge)(({ theme }) => ({
 const SettingsIconButton = styled(IconButton, { shouldForwardProp: (props) => props !== "variant" })(({ theme, variant }) => {
 	switch (variant) {
 		case "info": return {
-			backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,
-			"&:hover": { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)` },
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)` },
 			...theme.applyStyles("dark", {
-				backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
-				"&:hover": { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)` }
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+				"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }
 			})
 		};
 		case "warning": return {
-			backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
-			"&:hover": { backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)` },
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+			"&:hover": { backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)` },
 			...theme.applyStyles("dark", {
-				backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,
-				"&:hover": { backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)` }
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+				"&:hover": { backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)` }
 			})
 		};
 		default: return {};

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: `rgba(${theme.vars.palette.info.mainChannel} / 0.08)`,\n        '&:hover': {\n          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n          '&:hover': {\n            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,\n          },\n        }),\n      }\n    case 'warning':\n      return {\n        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.32) 80%, black)`,\n        },\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,\n          '&:hover': {\n            backgroundColor: `color-mix(in srgb, rgba(${theme.vars.palette.warning.mainChannel} / 0.16) 80%, black)`,\n          },\n        }),\n      }\n    default:\n      return {}\n  }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,MAAS,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,KAAK;EACvB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACF,EAAE;AAMH,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,WACzC,CAAC,EAA2B,EAAE,OAAO,cAAc;AAClD,SAAQ,SAAR;EACE,KAAK,OACH,QAAO;GACL,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;GAC7D,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;IAC7D,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D;IACF,CAAC;GACH;EACH,KAAK,UACH,QAAO;GACL,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;GAChE,WAAW,EACT,iBAAiB,2BAA2B,MAAM,KAAK,QAAQ,QAAQ,YAAY,uBACpF;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;IAChE,WAAW,EACT,iBAAiB,2BAA2B,MAAM,KAAK,QAAQ,QAAQ,YAAY,uBACpF;IACF,CAAC;GACH;EACH,QACE,QAAO,EAAE;;EAEb"}
+{"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,MAAS,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,KAAK;EACvB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACF,EAAE;AAMH,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,WACzC,CAAC,EAA2B,EAAE,OAAO,cAAc;AAClD,SAAQ,SAAR;EACE,KAAK,OACH,QAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;IACF,CAAC;GACH;EACH,KAAK,UACH,QAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;IACF,CAAC;GACH;EACH,QACE,QAAO,EAAE;;EAEb"}

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

@@ -1,5 +1,5 @@
 import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { HiddenUI } from "../../types/widget.js";
+import "../../types/widget.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
 import { useExternalWalletProvider } from "../../providers/WalletProvider/useExternalWalletProvider.js";
 import { useChain } from "../../hooks/useChain.js";
@@ -20,7 +20,7 @@ import Wallet from "@mui/icons-material/Wallet";
 const useInternalWalletManagement = () => {
 	const { hiddenUI } = useWidgetConfig();
 	const { useExternalWalletProvidersOnly } = useExternalWalletProvider();
-	const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu);
+	const isWalletMenuHidden = hiddenUI?.includes("walletMenu");
 	return { shouldShowWalletMenu: !useExternalWalletProvidersOnly && !isWalletMenuHidden };
 };
 const WalletHeader = () => {
@@ -37,7 +37,7 @@ const WalletMenuButton = () => {
 	const [fromChainId] = useFieldValues("fromChain");
 	const { chain: fromChain } = useChain(fromChainId);
 	const activeAccount = (fromChain ? accounts.find((account) => account.chainType === fromChain.chainType) : void 0) || account;
-	if (variant === "drawer") return /* @__PURE__ */ jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {}), !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
+	if (variant === "drawer") return /* @__PURE__ */ jsxs(DrawerWalletContainer, { children: [activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {}), !hiddenUI?.includes("drawerCloseButton") ? /* @__PURE__ */ jsx(CloseDrawerButton, { header: "wallet" }) : null] });
 	return activeAccount.isConnected ? /* @__PURE__ */ jsx(ConnectedButton, { account: activeAccount }) : /* @__PURE__ */ jsx(ConnectButton, {});
 };
 const ConnectButton = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n  DrawerWalletContainer,\n  HeaderAppBar,\n  WalletAvatar,\n  WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n  const { hiddenUI } = useWidgetConfig()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)\n\n  const shouldShowWalletMenu =\n    !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n  return {\n    shouldShowWalletMenu,\n  }\n}\n\nexport const WalletHeader: React.FC = () => {\n  const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n  return shouldShowWalletMenu ? (\n    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n      <WalletMenuButton />\n    </HeaderAppBar>\n  ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n  const { variant, hiddenUI } = useWidgetConfig()\n  const { account, accounts } = useAccount()\n\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain: fromChain } = useChain(fromChainId)\n\n  const activeAccount =\n    (fromChain\n      ? accounts.find((account) => account.chainType === fromChain.chainType)\n      : undefined) || account\n\n  if (variant === 'drawer') {\n    return (\n      <DrawerWalletContainer>\n        {activeAccount.isConnected ? (\n          <ConnectedButton account={activeAccount} />\n        ) : (\n          <ConnectButton />\n        )}\n        {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n          <CloseDrawerButton header=\"wallet\" />\n        ) : null}\n      </DrawerWalletContainer>\n    )\n  }\n  return activeAccount.isConnected ? (\n    <ConnectedButton account={activeAccount} />\n  ) : (\n    <ConnectButton />\n  )\n}\n\nconst ConnectButton = () => {\n  const { t } = useTranslation()\n  const { walletConfig, variant } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async (event: React.MouseEvent<HTMLElement>) => {\n    if (\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement &&\n      walletConfig?.onConnect\n    ) {\n      walletConfig.onConnect()\n      return\n    }\n    openWalletMenu()\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n  return (\n    <WalletButton\n      withOffset={walletPosition === 'end'}\n      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n      startIcon={\n        walletPosition === 'start' ? (\n          <Wallet sx={{ marginLeft: -0.25 }} />\n        ) : undefined\n      }\n      onClick={connect}\n    >\n      {t('button.connectWallet')}\n    </WalletButton>\n  )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n  const { chain } = useChain(account.chainId)\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const walletAddress = shortenAddress(account.address)\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <WalletButton\n        withOffset\n        endIcon={<ExpandMore />}\n        startIcon={\n          chain?.logoURI ? (\n            <Badge\n              overlap=\"circular\"\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n              badgeContent={\n                <SmallAvatar\n                  src={chain?.logoURI}\n                  alt={chain?.name}\n                  sx={{ width: 12, height: 12 }}\n                >\n                  {chain?.name[0]}\n                </SmallAvatar>\n              }\n            >\n              <WalletAvatar\n                src={getConnectorIcon(account.connector)}\n                alt={account.connector?.name}\n              >\n                {account.connector?.name[0]}\n              </WalletAvatar>\n            </Badge>\n          ) : (\n            <Avatar\n              src={getConnectorIcon(account.connector)}\n              alt={account.connector?.name}\n              sx={{ width: 24, height: 24 }}\n            >\n              {account.connector?.name[0]}\n            </Avatar>\n          )\n        }\n        onClick={handleClick}\n      >\n        {walletAddress}\n      </WalletButton>\n      <WalletMenuContainer\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        <WalletMenu onClose={handleClose} />\n      </WalletMenuContainer>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WalletHeader.js","names":[],"sources":["../../../../src/components/Header/WalletHeader.tsx"],"sourcesContent":["import {\n  getConnectorIcon,\n  useAccount,\n  useWalletMenu,\n} from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport Wallet from '@mui/icons-material/Wallet'\nimport { Avatar, Badge } from '@mui/material'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport {\n  DrawerWalletContainer,\n  HeaderAppBar,\n  WalletAvatar,\n  WalletButton,\n} from './Header.style.js'\nimport { WalletMenu } from './WalletMenu.js'\nimport { WalletMenuContainer } from './WalletMenu.style.js'\n\nconst useInternalWalletManagement = () => {\n  const { hiddenUI } = useWidgetConfig()\n  const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n  const isWalletMenuHidden = hiddenUI?.includes(HiddenUI.WalletMenu)\n\n  const shouldShowWalletMenu =\n    !useExternalWalletProvidersOnly && !isWalletMenuHidden\n\n  return {\n    shouldShowWalletMenu,\n  }\n}\n\nexport const WalletHeader: React.FC = () => {\n  const { shouldShowWalletMenu } = useInternalWalletManagement()\n\n  return shouldShowWalletMenu ? (\n    <HeaderAppBar elevation={0} sx={{ justifyContent: 'flex-end' }}>\n      <WalletMenuButton />\n    </HeaderAppBar>\n  ) : null\n}\n\nconst WalletMenuButton: React.FC = () => {\n  const { variant, hiddenUI } = useWidgetConfig()\n  const { account, accounts } = useAccount()\n\n  const [fromChainId] = useFieldValues('fromChain')\n  const { chain: fromChain } = useChain(fromChainId)\n\n  const activeAccount =\n    (fromChain\n      ? accounts.find((account) => account.chainType === fromChain.chainType)\n      : undefined) || account\n\n  if (variant === 'drawer') {\n    return (\n      <DrawerWalletContainer>\n        {activeAccount.isConnected ? (\n          <ConnectedButton account={activeAccount} />\n        ) : (\n          <ConnectButton />\n        )}\n        {!hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n          <CloseDrawerButton header=\"wallet\" />\n        ) : null}\n      </DrawerWalletContainer>\n    )\n  }\n  return activeAccount.isConnected ? (\n    <ConnectedButton account={activeAccount} />\n  ) : (\n    <ConnectButton />\n  )\n}\n\nconst ConnectButton = () => {\n  const { t } = useTranslation()\n  const { walletConfig, variant } = useWidgetConfig()\n  const { openWalletMenu } = useWalletMenu()\n  const connect = async (event: React.MouseEvent<HTMLElement>) => {\n    if (\n      !walletConfig?.usePartialWalletManagement &&\n      !walletConfig?.forceInternalWalletManagement &&\n      walletConfig?.onConnect\n    ) {\n      walletConfig.onConnect()\n      return\n    }\n    openWalletMenu()\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const walletPosition = variant === 'drawer' ? 'start' : 'end'\n\n  return (\n    <WalletButton\n      withOffset={walletPosition === 'end'}\n      endIcon={walletPosition === 'end' ? <Wallet /> : undefined}\n      startIcon={\n        walletPosition === 'start' ? (\n          <Wallet sx={{ marginLeft: -0.25 }} />\n        ) : undefined\n      }\n      onClick={connect}\n    >\n      {t('button.connectWallet')}\n    </WalletButton>\n  )\n}\n\nconst ConnectedButton = ({ account }: { account: Account }) => {\n  const { chain } = useChain(account.chainId)\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const walletAddress = shortenAddress(account.address)\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n    event.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n  }\n\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  return (\n    <>\n      <WalletButton\n        withOffset\n        endIcon={<ExpandMore />}\n        startIcon={\n          chain?.logoURI ? (\n            <Badge\n              overlap=\"circular\"\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n              badgeContent={\n                <SmallAvatar\n                  src={chain?.logoURI}\n                  alt={chain?.name}\n                  sx={{ width: 12, height: 12 }}\n                >\n                  {chain?.name[0]}\n                </SmallAvatar>\n              }\n            >\n              <WalletAvatar\n                src={getConnectorIcon(account.connector)}\n                alt={account.connector?.name}\n              >\n                {account.connector?.name[0]}\n              </WalletAvatar>\n            </Badge>\n          ) : (\n            <Avatar\n              src={getConnectorIcon(account.connector)}\n              alt={account.connector?.name}\n              sx={{ width: 24, height: 24 }}\n            >\n              {account.connector?.name[0]}\n            </Avatar>\n          )\n        }\n        onClick={handleClick}\n      >\n        {walletAddress}\n      </WalletButton>\n      <WalletMenuContainer\n        anchorEl={anchorEl}\n        open={Boolean(anchorEl)}\n        onClose={handleClose}\n      >\n        <WalletMenu onClose={handleClose} />\n      </WalletMenuContainer>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,MAAM,oCAAoC;CACxC,MAAM,EAAE,aAAa,iBAAiB;CACtC,MAAM,EAAE,mCAAmC,2BAA2B;CAEtE,MAAM,qBAAqB,UAAU,SAAA,aAA6B;AAKlE,QAAO,EACL,sBAHA,CAAC,kCAAkC,CAAC,oBAIrC;;AAGH,MAAa,qBAA+B;CAC1C,MAAM,EAAE,yBAAyB,6BAA6B;AAE9D,QAAO,uBACL,oBAAC,cAAD;EAAc,WAAW;EAAG,IAAI,EAAE,gBAAgB,YAAY;YAC5D,oBAAC,kBAAD,EAAoB,CAAA;EACP,CAAA,GACb;;AAGN,MAAM,yBAAmC;CACvC,MAAM,EAAE,SAAS,aAAa,iBAAiB;CAC/C,MAAM,EAAE,SAAS,aAAa,YAAY;CAE1C,MAAM,CAAC,eAAe,eAAe,YAAY;CACjD,MAAM,EAAE,OAAO,cAAc,SAAS,YAAY;CAElD,MAAM,iBACH,YACG,SAAS,MAAM,YAAY,QAAQ,cAAc,UAAU,UAAU,GACrE,KAAA,MAAc;AAEpB,KAAI,YAAY,SACd,QACE,qBAAC,uBAAD,EAAA,UAAA,CACG,cAAc,cACb,oBAAC,iBAAD,EAAiB,SAAS,eAAiB,CAAA,GAE3C,oBAAC,eAAD,EAAiB,CAAA,EAElB,CAAC,UAAU,SAAA,oBAAoC,GAC9C,oBAAC,mBAAD,EAAmB,QAAO,UAAW,CAAA,GACnC,KACkB,EAAA,CAAA;AAG5B,QAAO,cAAc,cACnB,oBAAC,iBAAD,EAAiB,SAAS,eAAiB,CAAA,GAE3C,oBAAC,eAAD,EAAiB,CAAA;;AAIrB,MAAM,sBAAsB;CAC1B,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,cAAc,YAAY,iBAAiB;CACnD,MAAM,EAAE,mBAAmB,eAAe;CAC1C,MAAM,UAAU,OAAO,UAAyC;AAC9D,MACE,CAAC,cAAc,8BACf,CAAC,cAAc,iCACf,cAAc,WACd;AACA,gBAAa,WAAW;AACxB;;AAEF,kBAAgB;AAChB,QAAM,cAAc,MAAM;;CAG5B,MAAM,iBAAiB,YAAY,WAAW,UAAU;AAExD,QACE,oBAAC,cAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,mBAAmB,QAAQ,oBAAC,QAAD,EAAU,CAAA,GAAG,KAAA;EACjD,WACE,mBAAmB,UACjB,oBAAC,QAAD,EAAQ,IAAI,EAAE,YAAY,MAAO,EAAI,CAAA,GACnC,KAAA;EAEN,SAAS;YAER,EAAE,uBAAuB;EACb,CAAA;;AAInB,MAAM,mBAAmB,EAAE,cAAoC;CAC7D,MAAM,EAAE,UAAU,SAAS,QAAQ,QAAQ;CAC3C,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;CAClE,MAAM,gBAAgB,eAAe,QAAQ,QAAQ;CAErD,MAAM,eAAe,UAAyC;AAC5D,cAAY,MAAM,cAAc;AAChC,QAAM,cAAc,MAAM;;CAG5B,MAAM,oBAAoB;AACxB,cAAY,KAAK;;AAGnB,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,YAAA;EACA,SAAS,oBAAC,YAAD,EAAc,CAAA;EACvB,WACE,OAAO,UACL,oBAAC,OAAD;GACE,SAAQ;GACR,cAAc;IAAE,UAAU;IAAU,YAAY;IAAS;GACzD,cACE,oBAAC,aAAD;IACE,KAAK,OAAO;IACZ,KAAK,OAAO;IACZ,IAAI;KAAE,OAAO;KAAI,QAAQ;KAAI;cAE5B,OAAO,KAAK;IACD,CAAA;aAGhB,oBAAC,cAAD;IACE,KAAK,iBAAiB,QAAQ,UAAU;IACxC,KAAK,QAAQ,WAAW;cAEvB,QAAQ,WAAW,KAAK;IACZ,CAAA;GACT,CAAA,GAER,oBAAC,QAAD;GACE,KAAK,iBAAiB,QAAQ,UAAU;GACxC,KAAK,QAAQ,WAAW;GACxB,IAAI;IAAE,OAAO;IAAI,QAAQ;IAAI;aAE5B,QAAQ,WAAW,KAAK;GAClB,CAAA;EAGb,SAAS;YAER;EACY,CAAA,EACf,oBAAC,qBAAD;EACY;EACV,MAAM,QAAQ,SAAS;EACvB,SAAS;YAET,oBAAC,YAAD,EAAY,SAAS,aAAe,CAAA;EAChB,CAAA,CACrB,EAAA,CAAA"}

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

@@ -3,25 +3,25 @@ import { Box, styled } from "@mui/material";
 const getStatusColor = (status, theme) => {
 	switch (status) {
 		case "success": return {
-			color: theme.vars.palette.success.mainChannel,
+			color: theme.vars.palette.success.main,
 			mixAmount: 12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
 		case "error": return {
-			color: theme.vars.palette.error.mainChannel,
+			color: theme.vars.palette.error.main,
 			mixAmount: 12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
 		case "warning": return {
-			color: theme.vars.palette.warning.mainChannel,
+			color: theme.vars.palette.warning.main,
 			mixAmount: 48,
 			lightDarken: .32,
 			darkDarken: 0
 		};
 		case "info": return {
-			color: theme.vars.palette.info.mainChannel,
+			color: theme.vars.palette.info.main,
 			mixAmount: 12,
 			lightDarken: 0,
 			darkDarken: 0
@@ -32,7 +32,7 @@ const iconSizeRatio = 48 / 90;
 const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colorConfig" && prop !== "circleSize" })(({ theme, colorConfig, circleSize }) => {
 	const svgSize = Math.round(circleSize * iconSizeRatio);
 	return {
-		backgroundColor: `color-mix(in srgb, rgb(${colorConfig.color}) ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
+		backgroundColor: `color-mix(in srgb, ${colorConfig.color} ${colorConfig.mixAmount}%, ${theme.vars.palette.background.paper})`,
 		borderRadius: "50%",
 		width: circleSize,
 		height: circleSize,
@@ -40,12 +40,12 @@ const IconCircleRoot = styled(Box, { shouldForwardProp: (prop) => prop !== "colo
 		position: "relative",
 		placeItems: "center",
 		"& > svg": {
-			color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.lightDarken) * 100}%, black)`,
+			color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.lightDarken) * 100}%, black)`,
 			width: svgSize,
 			height: svgSize
 		},
 		...theme.applyStyles("dark", { "& > svg": {
-			color: `color-mix(in srgb, rgb(${colorConfig.color}) ${(1 - colorConfig.darkDarken) * 100}%, black)`,
+			color: `color-mix(in srgb, ${colorConfig.color} ${(1 - colorConfig.darkDarken) * 100}%, black)`,
 			width: svgSize,
 			height: svgSize
 		} })

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.mainChannel,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'error':\n      return {\n        color: theme.vars.palette.error.mainChannel,\n        mixAmount: 12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.mainChannel,\n        mixAmount: 48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    case 'info':\n      return {\n        color: theme.vars.palette.info.mainChannel,\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, rgb(${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, rgb(${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, rgb(${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;AACtB,SAAQ,QAAR;EACE,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,QACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,OACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,WAAW;GACX,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,gBAAwB,KAAK;AAE1C,MAAa,iBAKT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,iBAAiB,SAAS,cACjE,CAAC,EACC,EAAE,OAAO,aAAa,iBAAiB;CACtC,MAAM,UAAU,KAAK,MAAM,aAAa,cAAc;AACtD,QAAO;EACL,iBAAiB,0BAA0B,YAAY,MAAM,IAAI,YAAY,UAAU,KAAK,MAAM,KAAK,QAAQ,WAAW,MAAM;EAChI,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,0BAA0B,YAAY,MAAM,KAAK,IAAI,YAAY,eAAe,IAAI;GAC3F,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,0BAA0B,YAAY,MAAM,KAAK,IAAI,YAAY,cAAc,IAAI;GAC1F,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}
+{"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;AACtB,SAAQ,QAAR;EACE,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,QACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,WAAW;GACX,aAAa;GACb,YAAY;GACb;EACH,KAAK,OACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,WAAW;GACX,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,gBAAwB,KAAK;AAE1C,MAAa,iBAKT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,iBAAiB,SAAS,cACjE,CAAC,EACC,EAAE,OAAO,aAAa,iBAAiB;CACtC,MAAM,UAAU,KAAK,MAAM,aAAa,cAAc;AACtD,QAAO;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;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,YAAY,MAAM,IAAI,IAAI,YAAY,cAAc,IAAI;GACrF,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}

package/dist/esm/components/IconTypography.js

@@ -1,9 +1,9 @@
 import { Box, styled } from "@mui/material";
 //#region src/components/IconTypography.ts
 const IconTypography = styled(Box)(({ theme }) => ({
-	color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,
+	color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,
 	lineHeight: 0,
-	...theme.applyStyles("dark", { color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)` })
+	...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 32%, transparent)` })
 }));
 //#endregion
 export { IconTypography };

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

@@ -1 +1 @@
-{"version":3,"file":"IconTypography.js","names":[],"sources":["../../../src/components/IconTypography.ts"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const IconTypography: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,\n    lineHeight: 0,\n    ...theme.applyStyles('dark', {\n      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.32)`,\n    }),\n  }))\n"],"mappings":";;AAGA,MAAa,iBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,OAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CAC7D,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WAC9D,CAAC;CACH,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,IAAI,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,qBACrE,CAAC;CACH,EAAE"}

package/dist/esm/components/ListItemButton.js

@@ -5,7 +5,7 @@ const ListItemButton$1 = styled(ListItemButton)(({ theme }) => {
 		borderRadius: theme.vars.shape.borderRadius,
 		paddingLeft: theme.spacing(1.5),
 		height: 56,
-		"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
 		[`&.${listItemButtonClasses.selected}`]: {
 			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,
 			"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)` },

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n  listItemButtonClasses,\n  ListItemButton as MuiListItemButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n  return {\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingLeft: theme.spacing(1.5),\n    height: 56,\n    '&:hover': {\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    },\n    [`&.${listItemButtonClasses.selected}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n      '&:hover': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n      },\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n        },\n      }),\n    },\n    variants: [\n      {\n        props: ({ disabled }) => disabled,\n        style: {\n          opacity: 0.5,\n          cursor: 'auto',\n          '&:hover': {\n            backgroundColor: 'none',\n          },\n        },\n      },\n    ],\n  }\n})\n"],"mappings":";;AAOA,MAAaA,mBAET,OAAOC,eAAkB,EAAE,EAAE,YAAY;AAC3C,QAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,MAAM,QAAQ,IAAI;EAC/B,QAAQ;EACR,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;GACA,KAAK,sBAAsB,aAAa;GACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;GACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;IACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;IACF,CAAC;GACH;EACD,UAAU,CACR;GACE,QAAQ,EAAE,eAAe;GACzB,OAAO;IACL,SAAS;IACT,QAAQ;IACR,WAAW,EACT,iBAAiB,QAClB;IACF;GACF,CACF;EACF;EACD"}
+{"version":3,"file":"ListItemButton.js","names":["ListItemButton","MuiListItemButton"],"sources":["../../../src/components/ListItemButton.tsx"],"sourcesContent":["import {\n  listItemButtonClasses,\n  ListItemButton as MuiListItemButton,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof MuiListItemButton>\n> = styled(MuiListItemButton)(({ theme }) => {\n  return {\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingLeft: theme.spacing(1.5),\n    height: 56,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    },\n    [`&.${listItemButtonClasses.selected}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, white)`,\n      '&:hover': {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, white)`,\n      },\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 24%, black)`,\n        '&:hover': {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.secondary.main} 28%, black)`,\n        },\n      }),\n    },\n    variants: [\n      {\n        props: ({ disabled }) => disabled,\n        style: {\n          opacity: 0.5,\n          cursor: 'auto',\n          '&:hover': {\n            backgroundColor: 'none',\n          },\n        },\n      },\n    ],\n  }\n})\n"],"mappings":";;AAOA,MAAaA,mBAET,OAAOC,eAAkB,EAAE,EAAE,YAAY;AAC3C,QAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,MAAM,QAAQ,IAAI;EAC/B,QAAQ;EACR,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;GACA,KAAK,sBAAsB,aAAa;GACvC,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;GACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK;IACzE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,UAAU,KAAK,eAC1E;IACF,CAAC;GACH;EACD,UAAU,CACR;GACE,QAAQ,EAAE,eAAe;GACzB,OAAO;IACL,SAAS;IACT,QAAQ;IACR,WAAW,EACT,iBAAiB,QAClB;IACF;GACF,CACF;EACF;EACD"}

package/dist/esm/components/Messages/AlertMessage.js

@@ -6,7 +6,7 @@ const AlertMessage = ({ title, icon, children, multiline, severity = "info", ...
 	...rest,
 	children: [/* @__PURE__ */ jsxs(AlertMessageCardTitle, {
 		severity,
-		alignItems: multiline ? "start" : "center",
+		sx: { alignItems: multiline ? "start" : "center" },
 		children: [icon, title]
 	}), children]
 });

package/dist/esm/components/Messages/AlertMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n  AlertMessageCard,\n  AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n  icon: ReactNode\n  title: ReactNode\n  multiline?: boolean\n  severity?: Severity\n}\n\nexport const AlertMessage = ({\n  title,\n  icon,\n  children,\n  multiline,\n  severity = 'info',\n  ...rest\n}: AlertMessageProps): JSX.Element => (\n  <AlertMessageCard severity={severity} {...rest}>\n    <AlertMessageCardTitle\n      severity={severity}\n      alignItems={multiline ? 'start' : 'center'}\n    >\n      {icon}\n      {title}\n    </AlertMessageCardTitle>\n    {children}\n  </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,YAAY,YAAY,UAAU;YAFpC,CAIG,MACA,MACqB;KACvB,SACgB"}
+{"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n  AlertMessageCard,\n  AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n  icon: ReactNode\n  title: ReactNode\n  multiline?: boolean\n  severity?: Severity\n}\n\nexport const AlertMessage = ({\n  title,\n  icon,\n  children,\n  multiline,\n  severity = 'info',\n  ...rest\n}: AlertMessageProps): JSX.Element => (\n  <AlertMessageCard severity={severity} {...rest}>\n    <AlertMessageCardTitle\n      severity={severity}\n      sx={{ alignItems: multiline ? 'start' : 'center' }}\n    >\n      {icon}\n      {title}\n    </AlertMessageCardTitle>\n    {children}\n  </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,IAAI,EAAE,YAAY,YAAY,UAAU,UAAU;YAFpD,CAIG,MACA,MACqB;KACvB,SACgB"}

package/dist/esm/components/Messages/AlertMessage.style.js

@@ -6,13 +6,13 @@ const AlertMessageCard = styled(Box, { shouldForwardProp: (prop) => prop !== "se
 	whiteSpace: "pre-line",
 	width: "100%",
 	paddingBottom: theme.spacing(2),
-	backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,
-	...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)` }),
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,
+	...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)` }),
 	variants: [{
 		props: { severity: "warning" },
 		style: {
-			backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,
-			...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)` })
+			backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+			...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)` })
 		}
 	}]
 }));

package/dist/esm/components/Messages/AlertMessage.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n  severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  position: 'relative',\n  whiteSpace: 'pre-line',\n  width: '100%',\n  paddingBottom: theme.spacing(2),\n  backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.16)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.32)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `rgba(${theme.vars.palette.warning.mainChannel} / 0.16)`,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const AlertMessageCardTitle: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  display: 'flex',\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  gap: theme.spacing(1),\n  color: theme.vars.palette.info.main,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAQA,MAAa,mBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACvC,CAAC,EAAsB,EAAE,aAAa;CACrC,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,OAAO;CACP,eAAe,MAAM,QAAQ,EAAE;CAC/B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;CAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D,CAAC;CACF,UAAU,CACR;EACE,OAAO,EACL,UAAU,WACX;EACD,OAAO;GACL,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;GAChE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY,WACjE,CAAC;GACH;EACF,CACF;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACvC,CAAC,EAAsB,EAAE,aAAa;CACrC,SAAS;CACT,aAAa,MAAM,QAAQ,EAAE;CAC7B,cAAc,MAAM,QAAQ,EAAE;CAC9B,YAAY,MAAM,QAAQ,EAAE;CAC5B,KAAK,MAAM,QAAQ,EAAE;CACrB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,eAC3D,CAAC;CACF,UAAU,CACR;EACE,OAAO,EACL,UAAU,WACX;EACD,OAAO;GACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACnC,CAAC;GACH;EACF,CACF;CACF,EAAE"}
+{"version":3,"file":"AlertMessage.style.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport type { Severity } from './types.js'\n\ninterface AlertSeverityProps {\n  severity: Severity\n}\n\nexport const AlertMessageCard: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  position: 'relative',\n  whiteSpace: 'pre-line',\n  width: '100%',\n  paddingBottom: theme.spacing(2),\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const AlertMessageCardTitle: React.FC<\n  React.ComponentProps<typeof Box> & AlertSeverityProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'severity',\n})<AlertSeverityProps>(({ theme }) => ({\n  display: 'flex',\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  gap: theme.spacing(1),\n  color: theme.vars.palette.info.main,\n  ...theme.applyStyles('dark', {\n    color: `color-mix(in srgb, ${theme.vars.palette.info.main} 76%, white)`,\n  }),\n  variants: [\n    {\n      props: {\n        severity: 'warning',\n      },\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAQA,MAAa,mBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACvC,CAAC,EAAsB,EAAE,aAAa;CACrC,cAAc,MAAM,KAAK,MAAM;CAC/B,UAAU;CACV,YAAY;CACZ,OAAO;CACP,eAAe,MAAM,QAAQ,EAAE;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;CACpE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE,CAAC;CACF,UAAU,CACR;EACE,OAAO,EACL,UAAU,WACX;EACD,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,qBACxE,CAAC;GACH;EACF,CACF;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACvC,CAAC,EAAsB,EAAE,aAAa;CACrC,SAAS;CACT,aAAa,MAAM,QAAQ,EAAE;CAC7B,cAAc,MAAM,QAAQ,EAAE;CAC9B,YAAY,MAAM,QAAQ,EAAE;CAC5B,KAAK,MAAM,QAAQ,EAAE;CACrB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,eAC3D,CAAC;CACF,UAAU,CACR;EACE,OAAO,EACL,UAAU,WACX;EACD,OAAO;GACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GAC7D,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACnC,CAAC;GACH;EACF,CACF;CACF,EAAE"}

package/dist/esm/components/Messages/GasRefuelMessage.style.js

@@ -4,11 +4,11 @@ import { styled, switchClasses } from "@mui/material";
 const InfoMessageSwitch = styled(Switch$1)(({ theme }) => ({ [`.${switchClasses.switchBase}`]: {
 	[`&.${switchClasses.checked}`]: { [`& + .${switchClasses.track}`]: {
 		backgroundColor: theme.vars.palette.info.main,
-		...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)` })
+		...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)` })
 	} },
 	[`&.Mui-focusVisible .${switchClasses.thumb}`]: {
 		color: theme.vars.palette.info.main,
-		...theme.applyStyles("dark", { color: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)` })
+		...theme.applyStyles("dark", { color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)` })
 	}
 } }));
 //#endregion

package/dist/esm/components/Messages/GasRefuelMessage.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n  styled(Switch)(({ theme }) => ({\n    [`.${switchClasses.switchBase}`]: {\n      [`&.${switchClasses.checked}`]: {\n        [`& + .${switchClasses.track}`]: {\n          backgroundColor: theme.vars.palette.info.main,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,\n          }),\n        },\n      },\n      [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n        color: theme.vars.palette.info.main,\n        ...theme.applyStyles('dark', {\n          color: `rgba(${theme.vars.palette.info.mainChannel} / 0.84)`,\n        }),\n      },\n    },\n  }))\n"],"mappings":";;;AAIA,MAAa,oBACX,OAAOA,SAAO,EAAE,EAAE,aAAa,GAC5B,IAAI,cAAc,eAAe;EAC/B,KAAK,cAAc,YAAY,GAC7B,QAAQ,cAAc,UAAU;EAC/B,iBAAiB,MAAM,KAAK,QAAQ,KAAK;EACzC,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WAC9D,CAAC;EACH,EACF;EACA,uBAAuB,cAAc,UAAU;EAC9C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY,WACpD,CAAC;EACH;CACF,EACF,EAAE"}
+{"version":3,"file":"GasRefuelMessage.style.js","names":["Switch"],"sources":["../../../../src/components/Messages/GasRefuelMessage.style.ts"],"sourcesContent":["import { styled, switchClasses } from '@mui/material'\nimport type React from 'react'\nimport { Switch } from '../Switch.js'\n\nexport const InfoMessageSwitch: React.FC<React.ComponentProps<typeof Switch>> =\n  styled(Switch)(({ theme }) => ({\n    [`.${switchClasses.switchBase}`]: {\n      [`&.${switchClasses.checked}`]: {\n        [`& + .${switchClasses.track}`]: {\n          backgroundColor: theme.vars.palette.info.main,\n          ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n          }),\n        },\n      },\n      [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n        color: theme.vars.palette.info.main,\n        ...theme.applyStyles('dark', {\n          color: `color-mix(in srgb, ${theme.vars.palette.info.main} 84%, transparent)`,\n        }),\n      },\n    },\n  }))\n"],"mappings":";;;AAIA,MAAa,oBACX,OAAOA,SAAO,EAAE,EAAE,aAAa,GAC5B,IAAI,cAAc,eAAe;EAC/B,KAAK,cAAc,YAAY,GAC7B,QAAQ,cAAc,UAAU;EAC/B,iBAAiB,MAAM,KAAK,QAAQ,KAAK;EACzC,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE,CAAC;EACH,EACF;EACA,uBAAuB,cAAc,UAAU;EAC9C,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBAC3D,CAAC;EACH;CACF,EACF,EAAE"}

package/dist/esm/components/PageEntered.js

@@ -1,5 +1,5 @@
 import { useWidgetEvents } from "../hooks/useWidgetEvents.js";
-import { WidgetEvent } from "../types/events.js";
+import "../types/events.js";
 import { useEffect } from "react";
 import { useLocation } from "@tanstack/react-router";
 //#region src/components/PageEntered.ts
@@ -7,7 +7,7 @@ function PageEntered() {
 	const location = useLocation();
 	const emitter = useWidgetEvents();
 	useEffect(() => {
-		emitter.emit(WidgetEvent.PageEntered, location.pathname);
+		emitter.emit("pageEntered", location.pathname);
 	}, [emitter, location.pathname]);
 	return null;
 }