@lifi/widget 4.0.0-beta.12 → 4.0.0-beta.14

package/dist/esm/components/Step/CircularProgress.style.js

@@ -4,11 +4,11 @@ const getStatusColor = (theme, status, substatus) => {
 	switch (status) {
 		case "ACTION_REQUIRED":
 		case "MESSAGE_REQUIRED":
-		case "RESET_REQUIRED": return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`;
+		case "RESET_REQUIRED": return `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`;
 		case "DONE":
-			if (substatus === "PARTIAL" || substatus === "REFUNDED") return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`;
-			return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`;
-		case "FAILED": return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`;
+			if (substatus === "PARTIAL" || substatus === "REFUNDED") return `color-mix(in srgb, ${theme.vars.palette.warning.main} 48%, transparent)`;
+			return `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, transparent)`;
+		case "FAILED": return `color-mix(in srgb, ${theme.vars.palette.error.main} 12%, transparent)`;
 		default: return null;
 	}
 };

package/dist/esm/components/Step/CircularProgress.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Step/CircularProgress.style.tsx"],"sourcesContent":["import type { ExecutionActionStatus, Substatus } from '@lifi/sdk'\nimport type { Theme } from '@mui/material'\nimport {\n  Box,\n  circularProgressClasses,\n  keyframes,\n  CircularProgress as MuiCircularProgress,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nconst getStatusColor = (\n  theme: Theme,\n  status?: ExecutionActionStatus,\n  substatus?: Substatus\n) => {\n  switch (status) {\n    case 'ACTION_REQUIRED':\n    case 'MESSAGE_REQUIRED':\n    case 'RESET_REQUIRED':\n      return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`\n    case 'DONE':\n      if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {\n        return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`\n      }\n      return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`\n    case 'FAILED':\n      return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`\n    default:\n      return null\n  }\n}\n\nexport const CircularIcon: React.FC<\n  React.ComponentProps<typeof Box> & {\n    status?: ExecutionActionStatus\n    substatus?: Substatus\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),\n})<{ status?: ExecutionActionStatus; substatus?: Substatus }>(\n  ({ theme, status, substatus }) => {\n    const statusColor = getStatusColor(theme, status, substatus)\n    const isSpecialStatus = [\n      'ACTION_REQUIRED',\n      'MESSAGE_REQUIRED',\n      'RESET_REQUIRED',\n      'DONE',\n      'FAILED',\n    ].includes(status!)\n\n    return {\n      backgroundColor: isSpecialStatus\n        ? statusColor!\n        : theme.vars.palette.background.paper,\n      borderStyle: 'solid',\n      borderColor: statusColor || theme.vars.palette.grey[300],\n      borderWidth: !isSpecialStatus ? 3 : 0,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      width: 40,\n      height: 40,\n      borderRadius: '50%',\n      ...theme.applyStyles('dark', {\n        borderColor: statusColor || theme.vars.palette.grey[800],\n      }),\n    }\n  }\n)\n\nconst circleAnimation = keyframes`\n  0% {\n    stroke-dashoffset: 129;\n    transform: rotate(0);\n  }\n  50% {\n    stroke-dashoffset: 56;\n    transform: rotate(45deg);\n  };\n  100% {\n    stroke-dashoffset: 129;\n    transform: rotate(360deg);\n  }\n`\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const CircularProgressPending: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)`\n  color: ${({ theme }) => theme.vars.palette.primary.main};\n  ${({ theme }) =>\n    theme.applyStyles('dark', {\n      color: theme.vars.palette.primary.light,\n    })}\n  animation-duration: 3s;\n  position: absolute;\n  .${circularProgressClasses.circle} {\n    animation-duration: 2s;\n    animation-timing-function: linear;\n    animation-name: ${circleAnimation};\n    stroke-dasharray: 129;\n    stroke-dashoffset: 129;\n    stroke-linecap: round;\n    transform-origin: 100% 100%;\n  }\n`\n"],"mappings":";;AAWA,MAAM,kBACJ,OACA,QACA,cACG;AACH,SAAQ,QAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK,iBACH,QAAO,QAAQ,MAAM,KAAK,QAAQ,KAAK,YAAY;EACrD,KAAK;AACH,OAAI,cAAc,aAAa,cAAc,WAC3C,QAAO,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;AAExD,UAAO,QAAQ,MAAM,KAAK,QAAQ,QAAQ,YAAY;EACxD,KAAK,SACH,QAAO,QAAQ,MAAM,KAAK,QAAQ,MAAM,YAAY;EACtD,QACE,QAAO;;;AAIb,MAAa,eAKT,OAAO,KAAK,EACd,oBAAoB,SAAiB,CAAC,CAAC,UAAU,YAAY,CAAC,SAAS,KAAK,EAC7E,CAAC,EACC,EAAE,OAAO,QAAQ,gBAAgB;CAChC,MAAM,cAAc,eAAe,OAAO,QAAQ,UAAU;CAC5D,MAAM,kBAAkB;EACtB;EACA;EACA;EACA;EACA;EACD,CAAC,SAAS,OAAQ;AAEnB,QAAO;EACL,iBAAiB,kBACb,cACA,MAAM,KAAK,QAAQ,WAAW;EAClC,aAAa;EACb,aAAa,eAAe,MAAM,KAAK,QAAQ,KAAK;EACpD,aAAa,CAAC,kBAAkB,IAAI;EACpC,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,cAAc;EACd,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,eAAe,MAAM,KAAK,QAAQ,KAAK,MACrD,CAAC;EACH;EAEJ;AAED,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,iBAAoB;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,OACnC,CAAC,CAAC;;;KAGF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}
+{"version":3,"file":"CircularProgress.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Step/CircularProgress.style.tsx"],"sourcesContent":["import type { ExecutionActionStatus, Substatus } from '@lifi/sdk'\nimport type { Theme } from '@mui/material'\nimport {\n  Box,\n  circularProgressClasses,\n  keyframes,\n  CircularProgress as MuiCircularProgress,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nconst getStatusColor = (\n  theme: Theme,\n  status?: ExecutionActionStatus,\n  substatus?: Substatus\n) => {\n  switch (status) {\n    case 'ACTION_REQUIRED':\n    case 'MESSAGE_REQUIRED':\n    case 'RESET_REQUIRED':\n      return `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`\n    case 'DONE':\n      if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {\n        return `color-mix(in srgb, ${theme.vars.palette.warning.main} 48%, transparent)`\n      }\n      return `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, transparent)`\n    case 'FAILED':\n      return `color-mix(in srgb, ${theme.vars.palette.error.main} 12%, transparent)`\n    default:\n      return null\n  }\n}\n\nexport const CircularIcon: React.FC<\n  React.ComponentProps<typeof Box> & {\n    status?: ExecutionActionStatus\n    substatus?: Substatus\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop: string) => !['status', 'substatus'].includes(prop),\n})<{ status?: ExecutionActionStatus; substatus?: Substatus }>(\n  ({ theme, status, substatus }) => {\n    const statusColor = getStatusColor(theme, status, substatus)\n    const isSpecialStatus = [\n      'ACTION_REQUIRED',\n      'MESSAGE_REQUIRED',\n      'RESET_REQUIRED',\n      'DONE',\n      'FAILED',\n    ].includes(status!)\n\n    return {\n      backgroundColor: isSpecialStatus\n        ? statusColor!\n        : theme.vars.palette.background.paper,\n      borderStyle: 'solid',\n      borderColor: statusColor || theme.vars.palette.grey[300],\n      borderWidth: !isSpecialStatus ? 3 : 0,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      width: 40,\n      height: 40,\n      borderRadius: '50%',\n      ...theme.applyStyles('dark', {\n        borderColor: statusColor || theme.vars.palette.grey[800],\n      }),\n    }\n  }\n)\n\nconst circleAnimation = keyframes`\n  0% {\n    stroke-dashoffset: 129;\n    transform: rotate(0);\n  }\n  50% {\n    stroke-dashoffset: 56;\n    transform: rotate(45deg);\n  };\n  100% {\n    stroke-dashoffset: 129;\n    transform: rotate(360deg);\n  }\n`\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const CircularProgressPending: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)`\n  color: ${({ theme }) => theme.vars.palette.primary.main};\n  ${({ theme }) =>\n    theme.applyStyles('dark', {\n      color: theme.vars.palette.primary.light,\n    })}\n  animation-duration: 3s;\n  position: absolute;\n  .${circularProgressClasses.circle} {\n    animation-duration: 2s;\n    animation-timing-function: linear;\n    animation-name: ${circleAnimation};\n    stroke-dasharray: 129;\n    stroke-dashoffset: 129;\n    stroke-linecap: round;\n    transform-origin: 100% 100%;\n  }\n`\n"],"mappings":";;AAWA,MAAM,kBACJ,OACA,QACA,cACG;AACH,SAAQ,QAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK,iBACH,QAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;EAC5D,KAAK;AACH,OAAI,cAAc,aAAa,cAAc,WAC3C,QAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;AAE/D,UAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;EAC/D,KAAK,SACH,QAAO,sBAAsB,MAAM,KAAK,QAAQ,MAAM,KAAK;EAC7D,QACE,QAAO;;;AAIb,MAAa,eAKT,OAAO,KAAK,EACd,oBAAoB,SAAiB,CAAC,CAAC,UAAU,YAAY,CAAC,SAAS,KAAK,EAC7E,CAAC,EACC,EAAE,OAAO,QAAQ,gBAAgB;CAChC,MAAM,cAAc,eAAe,OAAO,QAAQ,UAAU;CAC5D,MAAM,kBAAkB;EACtB;EACA;EACA;EACA;EACA;EACD,CAAC,SAAS,OAAQ;AAEnB,QAAO;EACL,iBAAiB,kBACb,cACA,MAAM,KAAK,QAAQ,WAAW;EAClC,aAAa;EACb,aAAa,eAAe,MAAM,KAAK,QAAQ,KAAK;EACpD,aAAa,CAAC,kBAAkB,IAAI;EACpC,SAAS;EACT,UAAU;EACV,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,cAAc;EACd,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,eAAe,MAAM,KAAK,QAAQ,KAAK,MACrD,CAAC;EACH;EAEJ;AAED,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,iBAAoB;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,OACnC,CAAC,CAAC;;;KAGF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}

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

@@ -10,8 +10,8 @@ const StepConnector$1 = styled(StepConnector, { shouldForwardProp: (prop) => ![
 	[`.${stepConnectorClasses.line}`]: {
 		minHeight: 8,
 		borderLeftWidth: 2,
-		borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-		...theme.applyStyles("dark", { borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)` })
+		borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
+		...theme.applyStyles("dark", { borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)` })
 	}
 }));
 const StepLabel$1 = styled(StepLabel, { shouldForwardProp: (prop) => ![
@@ -43,8 +43,8 @@ const StepLabelTypography = styled(Typography)(({ theme }) => ({
 const StepContent = styled(Box, { shouldForwardProp: (prop) => !["last"].includes(prop) })(({ theme }) => ({
 	margin: theme.spacing(0, 0, 0, 2.375),
 	paddingLeft: theme.spacing(4.375),
-	borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,
-	...theme.applyStyles("dark", { borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)` }),
+	borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,
+	...theme.applyStyles("dark", { borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)` }),
 	variants: [{
 		props: ({ last }) => last,
 		style: {

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

@@ -1 +1 @@
-{"version":3,"file":"StepActions.style.js","names":["StepConnector","MuiStepConnector","StepLabel","MuiStepLabel"],"sources":["../../../../src/components/StepActions/StepActions.style.tsx"],"sourcesContent":["import {\n  Box,\n  StepConnector as MuiStepConnector,\n  StepLabel as MuiStepLabel,\n  stepConnectorClasses,\n  stepLabelClasses,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepConnector: React.FC<\n  React.ComponentProps<typeof MuiStepConnector> & { last?: boolean }\n> = styled(MuiStepConnector, {\n  shouldForwardProp: (prop) =>\n    !['active', 'completed', 'error'].includes(prop as string),\n})(({ theme }) => ({\n  marginLeft: theme.spacing(2.375),\n  [`.${stepConnectorClasses.line}`]: {\n    minHeight: 8,\n    borderLeftWidth: 2,\n    borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,\n    ...theme.applyStyles('dark', {\n      borderColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,\n    }),\n  },\n}))\n\nexport const StepLabel: React.FC<\n  React.ComponentProps<typeof MuiStepLabel> & { last?: boolean }\n> = styled(MuiStepLabel, {\n  shouldForwardProp: (prop) =>\n    !['active', 'completed', 'error', 'disabled'].includes(prop as string),\n})(({ theme }) => ({\n  padding: 0,\n  alignItems: 'center',\n  [`.${stepLabelClasses.iconContainer}`]: {\n    paddingLeft: theme.spacing(1.25),\n    paddingRight: theme.spacing(3.25),\n  },\n  [`.${stepLabelClasses.labelContainer}`]: {\n    minHeight: 24,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  [`&.${stepLabelClasses.disabled}`]: {\n    cursor: 'inherit',\n  },\n}))\n\nexport const StepLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography> & { last?: boolean }\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  lineHeight: 1.325,\n  color: theme.vars.palette.text.secondary,\n  padding: theme.spacing(0.5, 0),\n}))\n\nexport const StepContent: React.FC<\n  React.ComponentProps<typeof Box> & { last?: boolean }\n> = styled(Box, {\n  shouldForwardProp: (prop) => !['last'].includes(prop as string),\n})<{ last?: boolean }>(({ theme }) => ({\n  margin: theme.spacing(0, 0, 0, 2.375),\n  paddingLeft: theme.spacing(4.375),\n  borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,\n  ...theme.applyStyles('dark', {\n    borderLeft: `2px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,\n  }),\n  variants: [\n    {\n      props: ({ last }) => last,\n      style: {\n        borderLeft: 'none',\n        paddingLeft: theme.spacing(4.625),\n      },\n    },\n  ],\n}))\n\nexport const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =\n  styled(AvatarMasked)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    backgroundColor: 'transparent',\n  }))\n"],"mappings":";;;AAYA,MAAaA,kBAET,OAAOC,eAAkB,EAC3B,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAQ,CAAC,SAAS,KAAe,EAC7D,CAAC,EAAE,EAAE,aAAa;CACjB,YAAY,MAAM,QAAQ,MAAM;EAC/B,IAAI,qBAAqB,SAAS;EACjC,WAAW;EACX,iBAAiB;EACjB,aAAa,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;EACnE,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACpE,CAAC;EACH;CACF,EAAE;AAEH,MAAaC,cAET,OAAOC,WAAc,EACvB,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAS;CAAW,CAAC,SAAS,KAAe,EACzE,CAAC,EAAE,EAAE,aAAa;CACjB,SAAS;CACT,YAAY;EACX,IAAI,iBAAiB,kBAAkB;EACtC,aAAa,MAAM,QAAQ,KAAK;EAChC,cAAc,MAAM,QAAQ,KAAK;EAClC;EACA,IAAI,iBAAiB,mBAAmB;EACvC,WAAW;EACX,SAAS;EACT,YAAY;EACb;EACA,KAAK,iBAAiB,aAAa,EAClC,QAAQ,WACT;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,IAAK,EAAE;CAC/B,EAAE;AAEH,MAAa,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,KAAe,EAChE,CAAC,EAAsB,EAAE,aAAa;CACrC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,MAAM;CACrC,aAAa,MAAM,QAAQ,MAAM;CACjC,YAAY,kBAAkB,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CAC5E,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,kBAAkB,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WAC7E,CAAC;CACF,UAAU,CACR;EACE,QAAQ,EAAE,WAAW;EACrB,OAAO;GACL,YAAY;GACZ,aAAa,MAAM,QAAQ,MAAM;GAClC;EACF,CACF;CACF,EAAE;AAEH,MAAa,aACX,OAAO,aAAa,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;CAClB,EAAE"}
+{"version":3,"file":"StepActions.style.js","names":["StepConnector","MuiStepConnector","StepLabel","MuiStepLabel"],"sources":["../../../../src/components/StepActions/StepActions.style.tsx"],"sourcesContent":["import {\n  Box,\n  StepConnector as MuiStepConnector,\n  StepLabel as MuiStepLabel,\n  stepConnectorClasses,\n  stepLabelClasses,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepConnector: React.FC<\n  React.ComponentProps<typeof MuiStepConnector> & { last?: boolean }\n> = styled(MuiStepConnector, {\n  shouldForwardProp: (prop) =>\n    !['active', 'completed', 'error'].includes(prop as string),\n})(({ theme }) => ({\n  marginLeft: theme.spacing(2.375),\n  [`.${stepConnectorClasses.line}`]: {\n    minHeight: 8,\n    borderLeftWidth: 2,\n    borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n    ...theme.applyStyles('dark', {\n      borderColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n    }),\n  },\n}))\n\nexport const StepLabel: React.FC<\n  React.ComponentProps<typeof MuiStepLabel> & { last?: boolean }\n> = styled(MuiStepLabel, {\n  shouldForwardProp: (prop) =>\n    !['active', 'completed', 'error', 'disabled'].includes(prop as string),\n})(({ theme }) => ({\n  padding: 0,\n  alignItems: 'center',\n  [`.${stepLabelClasses.iconContainer}`]: {\n    paddingLeft: theme.spacing(1.25),\n    paddingRight: theme.spacing(3.25),\n  },\n  [`.${stepLabelClasses.labelContainer}`]: {\n    minHeight: 24,\n    display: 'flex',\n    alignItems: 'center',\n  },\n  [`&.${stepLabelClasses.disabled}`]: {\n    cursor: 'inherit',\n  },\n}))\n\nexport const StepLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography> & { last?: boolean }\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  lineHeight: 1.325,\n  color: theme.vars.palette.text.secondary,\n  padding: theme.spacing(0.5, 0),\n}))\n\nexport const StepContent: React.FC<\n  React.ComponentProps<typeof Box> & { last?: boolean }\n> = styled(Box, {\n  shouldForwardProp: (prop) => !['last'].includes(prop as string),\n})<{ last?: boolean }>(({ theme }) => ({\n  margin: theme.spacing(0, 0, 0, 2.375),\n  paddingLeft: theme.spacing(4.375),\n  borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n  ...theme.applyStyles('dark', {\n    borderLeft: `2px solid color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n  }),\n  variants: [\n    {\n      props: ({ last }) => last,\n      style: {\n        borderLeft: 'none',\n        paddingLeft: theme.spacing(4.625),\n      },\n    },\n  ],\n}))\n\nexport const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =\n  styled(AvatarMasked)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    backgroundColor: 'transparent',\n  }))\n"],"mappings":";;;AAYA,MAAaA,kBAET,OAAOC,eAAkB,EAC3B,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAQ,CAAC,SAAS,KAAe,EAC7D,CAAC,EAAE,EAAE,aAAa;CACjB,YAAY,MAAM,QAAQ,MAAM;EAC/B,IAAI,qBAAqB,SAAS;EACjC,WAAW;EACX,iBAAiB;EACjB,aAAa,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC1E,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBAC3E,CAAC;EACH;CACF,EAAE;AAEH,MAAaC,cAET,OAAOC,WAAc,EACvB,oBAAoB,SAClB,CAAC;CAAC;CAAU;CAAa;CAAS;CAAW,CAAC,SAAS,KAAe,EACzE,CAAC,EAAE,EAAE,aAAa;CACjB,SAAS;CACT,YAAY;EACX,IAAI,iBAAiB,kBAAkB;EACtC,aAAa,MAAM,QAAQ,KAAK;EAChC,cAAc,MAAM,QAAQ,KAAK;EAClC;EACA,IAAI,iBAAiB,mBAAmB;EACvC,WAAW;EACX,SAAS;EACT,YAAY;EACb;EACA,KAAK,iBAAiB,aAAa,EAClC,QAAQ,WACT;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,IAAK,EAAE;CAC/B,EAAE;AAEH,MAAa,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,KAAe,EAChE,CAAC,EAAsB,EAAE,aAAa;CACrC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,MAAM;CACrC,aAAa,MAAM,QAAQ,MAAM;CACjC,YAAY,gCAAgC,MAAM,KAAK,QAAQ,OAAO,aAAa;CACnF,GAAG,MAAM,YAAY,QAAQ,EAC3B,YAAY,gCAAgC,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACpF,CAAC;CACF,UAAU,CACR;EACE,QAAQ,EAAE,WAAW;EACrB,OAAO;GACL,YAAY;GACZ,aAAa,MAAM,QAAQ,MAAM;GAClC;EACF,CACF;CACF,EAAE;AAEH,MAAa,aACX,OAAO,aAAa,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;CAClB,EAAE"}

package/dist/esm/components/Switch.js

@@ -23,7 +23,7 @@ const Switch$1 = styled(Switch)(({ theme }) => ({
 			border: "6px solid",
 			borderColor: theme.vars.palette.common.white
 		},
-		[`&.${switchClasses.disabled} .${switchClasses.thumb}`]: { color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)` },
+		[`&.${switchClasses.disabled} .${switchClasses.thumb}`]: { color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)` },
 		[`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
 			opacity: .7,
 			...theme.applyStyles("dark", { opacity: .3 })
@@ -38,7 +38,7 @@ const Switch$1 = styled(Switch)(({ theme }) => ({
 		borderRadius: 24 / 2,
 		opacity: 1,
 		transition: theme.transitions.create(["background-color"], { duration: theme.transitions.duration.standard }),
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`
 	}
 }));
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n  MuiSwitch\n)(({ theme }) => ({\n  width: 42,\n  height: 24,\n  padding: 0,\n  [`.${switchClasses.switchBase}`]: {\n    padding: 0,\n    margin: theme.spacing(0.25),\n    transitionDuration: theme.transitions.duration.standard,\n    [`&.${switchClasses.checked}`]: {\n      transform: 'translateX(18px)',\n      color: theme.vars.palette.common.white,\n      [`& + .${switchClasses.track}`]: {\n        backgroundColor: theme.vars.palette.primary.main,\n        opacity: 1,\n        border: 0,\n      },\n      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n        opacity: 0.5,\n      },\n    },\n    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n      color: theme.vars.palette.primary.main,\n      border: '6px solid',\n      borderColor: theme.vars.palette.common.white,\n    },\n    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n      color: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.12)`,\n    },\n    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n      opacity: 0.7,\n      ...theme.applyStyles('dark', {\n        opacity: 0.3,\n      }),\n    },\n  },\n  [`.${switchClasses.thumb}`]: {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  [`.${switchClasses.track}`]: {\n    borderRadius: 24 / 2,\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.16)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,OACD,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,IAAK;EAC3B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;IACT;IACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,IACV;GACF;GACA,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;GACxC;GACA,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WAC9D;GACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,IACV,CAAC;GACH;EACF;EACA,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;EACT;EACA,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE,EACzD,UAAU,MAAM,YAAY,SAAS,UACtC,CAAC;EACF,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;EACxE;CACF,EAAE"}
+{"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n  MuiSwitch\n)(({ theme }) => ({\n  width: 42,\n  height: 24,\n  padding: 0,\n  [`.${switchClasses.switchBase}`]: {\n    padding: 0,\n    margin: theme.spacing(0.25),\n    transitionDuration: theme.transitions.duration.standard,\n    [`&.${switchClasses.checked}`]: {\n      transform: 'translateX(18px)',\n      color: theme.vars.palette.common.white,\n      [`& + .${switchClasses.track}`]: {\n        backgroundColor: theme.vars.palette.primary.main,\n        opacity: 1,\n        border: 0,\n      },\n      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n        opacity: 0.5,\n      },\n    },\n    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n      color: theme.vars.palette.primary.main,\n      border: '6px solid',\n      borderColor: theme.vars.palette.common.white,\n    },\n    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n    },\n    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n      opacity: 0.7,\n      ...theme.applyStyles('dark', {\n        opacity: 0.3,\n      }),\n    },\n  },\n  [`.${switchClasses.thumb}`]: {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  [`.${switchClasses.track}`]: {\n    borderRadius: 24 / 2,\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,OACD,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,IAAK;EAC3B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;IACT;IACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,IACV;GACF;GACA,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;GACxC;GACA,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACrE;GACA,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,IACV,CAAC;GACH;EACF;EACA,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;EACT;EACA,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE,EACzD,UAAU,MAAM,YAAY,SAAS,UACtC,CAAC;EACF,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC/E;CACF,EAAE"}

package/dist/esm/components/Tabs/NavigationTabs.js

@@ -22,8 +22,8 @@ const NavigationTabs = styled(Tabs, {
 		height: "100%",
 		width: "100%",
 		borderRadius: theme.vars.shape.borderRadius,
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-		...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` })
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` })
 	}
 }));
 const NavigationTab = styled(Tab$1, {

package/dist/esm/components/Tabs/NavigationTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTabs.js","names":["Tab"],"sources":["../../../../src/components/Tabs/NavigationTabs.tsx"],"sourcesContent":["import { styled, Tabs, tabsClasses } from '@mui/material'\nimport type React from 'react'\nimport { Tab } from './Tabs.style.js'\n\nexport const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =\n  styled(Tabs, {\n    name: 'MuiNavigationTabs',\n    slot: 'root',\n  })(({ theme }) => ({\n    overflow: 'visible', // Prevent shadows from being cut off\n    width: 'fit-content',\n    minHeight: theme.spacing(5),\n    maxHeight: theme.spacing(5),\n    background: 'transparent',\n    ...theme.applyStyles('dark', {\n      backgroundColor: 'transparent',\n    }),\n    [`& .${tabsClasses.scroller}`]: {\n      padding: 0,\n      overflow: 'visible !important', // Enforce since overflow is set dynamically\n    },\n    [`& .${tabsClasses.indicator}`]: {\n      boxShadow: 'none',\n      top: 0,\n      left: 0,\n      height: '100%',\n      width: '100%',\n      borderRadius: theme.vars.shape.borderRadius,\n      backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n      ...theme.applyStyles('dark', {\n        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n      }),\n    },\n  }))\n\nexport const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(\n  Tab,\n  {\n    name: 'MuiNavigationTab',\n    slot: 'root',\n  }\n)(({ theme }) => ({\n  minHeight: theme.spacing(5),\n  maxHeight: theme.spacing(5),\n}))\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,MAAM;CACX,MAAM;CACN,MAAM;CACP,CAAC,EAAE,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC3B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACD,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;EACX;EACA,MAAM,YAAY,cAAc;EAC/B,WAAW;EACX,KAAK;EACL,MAAM;EACN,QAAQ;EACR,OAAO;EACP,cAAc,MAAM,KAAK,MAAM;EAC/B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;EACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE,CAAC;EACH;CACF,EAAE;AAEL,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;CACP,CACF,EAAE,EAAE,aAAa;CAChB,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC5B,EAAE"}
+{"version":3,"file":"NavigationTabs.js","names":["Tab"],"sources":["../../../../src/components/Tabs/NavigationTabs.tsx"],"sourcesContent":["import { styled, Tabs, tabsClasses } from '@mui/material'\nimport type React from 'react'\nimport { Tab } from './Tabs.style.js'\n\nexport const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =\n  styled(Tabs, {\n    name: 'MuiNavigationTabs',\n    slot: 'root',\n  })(({ theme }) => ({\n    overflow: 'visible', // Prevent shadows from being cut off\n    width: 'fit-content',\n    minHeight: theme.spacing(5),\n    maxHeight: theme.spacing(5),\n    background: 'transparent',\n    ...theme.applyStyles('dark', {\n      backgroundColor: 'transparent',\n    }),\n    [`& .${tabsClasses.scroller}`]: {\n      padding: 0,\n      overflow: 'visible !important', // Enforce since overflow is set dynamically\n    },\n    [`& .${tabsClasses.indicator}`]: {\n      boxShadow: 'none',\n      top: 0,\n      left: 0,\n      height: '100%',\n      width: '100%',\n      borderRadius: theme.vars.shape.borderRadius,\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n      }),\n    },\n  }))\n\nexport const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(\n  Tab,\n  {\n    name: 'MuiNavigationTab',\n    slot: 'root',\n  }\n)(({ theme }) => ({\n  minHeight: theme.spacing(5),\n  maxHeight: theme.spacing(5),\n}))\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,MAAM;CACX,MAAM;CACN,MAAM;CACP,CAAC,EAAE,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC3B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;EACD,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;EACX;EACA,MAAM,YAAY,cAAc;EAC/B,WAAW;EACX,KAAK;EACL,MAAM;EACN,QAAQ;EACR,OAAO;EACP,cAAc,MAAM,KAAK,MAAM;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E,CAAC;EACH;CACF,EAAE;AAEL,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;CACP,CACF,EAAE,EAAE,aAAa;CAChB,WAAW,MAAM,QAAQ,EAAE;CAC3B,WAAW,MAAM,QAAQ,EAAE;CAC5B,EAAE"}

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

@@ -9,11 +9,11 @@ const CardTabs = styled(styled(Tabs)(({ theme }) => ({
 	},
 	[`.${tabsClasses.fixed}`]: { padding: theme.spacing(.5) }
 })))(({ theme }) => ({
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	[`.${tabsClasses.indicator}`]: { backgroundColor: theme.vars.palette.background.paper },
 	...theme.applyStyles("dark", {
-		backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-		[`.${tabsClasses.indicator}`]: { backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)` }
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+		[`.${tabsClasses.indicator}`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)` }
 	})
 }));
 const Tab$1 = styled(Tab)(({ theme }) => ({

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n  Tab as MuiTab,\n  Tabs as MuiTabs,\n  styled,\n  tabClasses,\n  tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n  flex: 1,\n  [`.${tabsClasses.indicator}`]: {\n    top: theme.spacing(0.5),\n    left: theme.spacing(0.5),\n    height: `calc(100% - ${theme.spacing(1)})`,\n    width: `calc(100% - ${theme.spacing(1)})`,\n  },\n  [`.${tabsClasses.fixed}`]: {\n    padding: theme.spacing(0.5),\n  },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n  Tabs\n)(({ theme }) => ({\n  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  [`.${tabsClasses.indicator}`]: {\n    backgroundColor: theme.vars.palette.background.paper,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n    [`.${tabsClasses.indicator}`]: {\n      backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,\n    },\n  }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n  MuiTab\n)<TabProps>(({ theme }) => ({\n  zIndex: 1,\n  flex: 1,\n  textTransform: 'none',\n  fontSize: '1rem',\n  fontWeight: 700,\n  color: theme.vars.palette.common.onBackground,\n  [`&.${tabClasses.selected}`]: {\n    color: theme.vars.palette.common.onBackground,\n  },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,GAAI;EACvB,MAAM,MAAM,QAAQ,GAAI;EACxB,QAAQ,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC,OAAO,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC;EACA,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,GAAI,EAC5B;CACF,EAAE,CAIF,EAAE,EAAE,aAAa;CAChB,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;EACtE,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,OAChD;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;GACtE,IAAI,YAAY,cAAc,EAC7B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,kBAAkB,WACtE;EACF,CAAC;CACH,EAAE;AAEH,MAAaC,QAAqD,OAChEC,IACD,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,cAClC;CACF,EAAE"}
+{"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n  Tab as MuiTab,\n  Tabs as MuiTabs,\n  styled,\n  tabClasses,\n  tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n  flex: 1,\n  [`.${tabsClasses.indicator}`]: {\n    top: theme.spacing(0.5),\n    left: theme.spacing(0.5),\n    height: `calc(100% - ${theme.spacing(1)})`,\n    width: `calc(100% - ${theme.spacing(1)})`,\n  },\n  [`.${tabsClasses.fixed}`]: {\n    padding: theme.spacing(0.5),\n  },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n  Tabs\n)(({ theme }) => ({\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  [`.${tabsClasses.indicator}`]: {\n    backgroundColor: theme.vars.palette.background.paper,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    [`.${tabsClasses.indicator}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    },\n  }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n  MuiTab\n)<TabProps>(({ theme }) => ({\n  zIndex: 1,\n  flex: 1,\n  textTransform: 'none',\n  fontSize: '1rem',\n  fontWeight: 700,\n  color: theme.vars.palette.common.onBackground,\n  [`&.${tabClasses.selected}`]: {\n    color: theme.vars.palette.common.onBackground,\n  },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,GAAI;EACvB,MAAM,MAAM,QAAQ,GAAI;EACxB,QAAQ,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC,OAAO,eAAe,MAAM,QAAQ,EAAE,CAAC;EACxC;EACA,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,GAAI,EAC5B;CACF,EAAE,CAIF,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,OAChD;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,qBAC7E;EACF,CAAC;CACH,EAAE;AAEH,MAAaC,QAAqD,OAChEC,IACD,EAAY,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,cAClC;CACF,EAAE"}

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

@@ -15,7 +15,7 @@ const TextSecondary = styled(Typography, { shouldForwardProp: (prop) => !["dot"]
 	whiteSpace: "nowrap",
 	variants: [{
 		props: ({ dot }) => dot,
-		style: { color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)` }
+		style: { color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)` }
 	}]
 }));
 styled(Box)(({ theme }) => ({

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

@@ -1 +1 @@
-{"version":3,"file":"Token.style.js","names":[],"sources":["../../../../src/components/Token/Token.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TextSecondaryContainer: React.FC<\n  React.ComponentProps<typeof Box> & { dot?: boolean }\n> = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  flex: 1,\n  height: 16,\n}))\n\nexport const TextSecondary: React.FC<\n  React.ComponentProps<typeof Typography> & { dot?: boolean }\n> = styled(Typography, {\n  shouldForwardProp: (prop: string) => !['dot'].includes(prop),\n})<{ dot?: boolean }>(({ theme }) => ({\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: 500,\n  color: theme.vars.palette.text.secondary,\n  whiteSpace: 'nowrap',\n  variants: [\n    {\n      props: ({ dot }) => dot,\n      style: {\n        color: `rgba(${theme.vars.palette.text.secondaryChannel} / 0.56)`,\n      },\n    },\n  ],\n}))\n\nexport const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  height: 16,\n  borderLeftWidth: 2,\n  borderLeftStyle: 'solid',\n  borderColor: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;CACT,EAAE;AAEH,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,EAC7D,CAAC,EAAqB,EAAE,aAAa;CACpC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACZ,UAAU,CACR;EACE,QAAQ,EAAE,UAAU;EACpB,OAAO,EACL,OAAO,QAAQ,MAAM,KAAK,QAAQ,KAAK,iBAAiB,WACzD;EACF,CACF;CACF,EAAE;AAEqE,OACtE,IACD,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,iBAAiB;CACjB,iBAAiB;CACjB,aAAa,MAAM,KAAK,QAAQ,KAAK;CACrC,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,MACtC,CAAC;CACH,EAAE"}
+{"version":3,"file":"Token.style.js","names":[],"sources":["../../../../src/components/Token/Token.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TextSecondaryContainer: React.FC<\n  React.ComponentProps<typeof Box> & { dot?: boolean }\n> = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  flex: 1,\n  height: 16,\n}))\n\nexport const TextSecondary: React.FC<\n  React.ComponentProps<typeof Typography> & { dot?: boolean }\n> = styled(Typography, {\n  shouldForwardProp: (prop: string) => !['dot'].includes(prop),\n})<{ dot?: boolean }>(({ theme }) => ({\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: 500,\n  color: theme.vars.palette.text.secondary,\n  whiteSpace: 'nowrap',\n  variants: [\n    {\n      props: ({ dot }) => dot,\n      style: {\n        color: `color-mix(in srgb, ${theme.vars.palette.text.secondary} 56%, transparent)`,\n      },\n    },\n  ],\n}))\n\nexport const TokenDivider: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  height: 16,\n  borderLeftWidth: 2,\n  borderLeftStyle: 'solid',\n  borderColor: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n"],"mappings":";;AAGA,MAAa,yBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;CACT,EAAE;AAEH,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,EAC7D,CAAC,EAAqB,EAAE,aAAa;CACpC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;CACZ,UAAU,CACR;EACE,QAAQ,EAAE,UAAU;EACpB,OAAO,EACL,OAAO,sBAAsB,MAAM,KAAK,QAAQ,KAAK,UAAU,qBAChE;EACF,CACF;CACF,EAAE;AAEqE,OACtE,IACD,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,iBAAiB;CACjB,iBAAiB;CACjB,aAAa,MAAM,KAAK,QAAQ,KAAK;CACrC,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,MACtC,CAAC;CACH,EAAE"}

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

@@ -21,7 +21,7 @@ const IconButton$1 = styled(IconButton)(({ theme }) => ({
 	backgroundColor: "unset",
 	minWidth: "unset",
 	borderRadius: theme.vars.shape.borderRadiusTertiary,
-	"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` },
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
 	svg: { fontSize: 14 }
 }));
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TokenList.style.js","names":["ListItem","ListItemBase","List","MuiList","IconButton","MuiIconButton"],"sources":["../../../../src/components/TokenList/TokenList.style.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport {\n  IconButton as MuiIconButton,\n  List as MuiList,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItem as ListItemBase } from '../ListItem/ListItem.js'\n\nexport const ListItem: React.FC<\n  React.ComponentProps<typeof ListItemBase> & IconButtonProps & LinkProps\n> = styled(ListItemBase)(() => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}))\n\nexport const List: React.FC<\n  React.ComponentProps<typeof MuiList> & IconButtonProps & LinkProps\n> = styled(MuiList)(({ theme }) => ({\n  cursor: 'pointer',\n  marginLeft: theme.spacing(1.5),\n  marginRight: theme.spacing(1.5),\n}))\n\nexport const IconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & IconButtonProps & LinkProps\n> = styled(MuiIconButton)<IconButtonProps & LinkProps>(({ theme }) => ({\n  lineHeight: 1,\n  fontSize: 12,\n  fontWeight: 400,\n  padding: theme.spacing(0.375, 0.375),\n  margin: theme.spacing(0, 0, 0, 0.25),\n  color: 'inherit',\n  backgroundColor: 'unset',\n  minWidth: 'unset',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  '&:hover': {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  },\n  svg: {\n    fontSize: 14,\n  },\n}))\n"],"mappings":";;;AASA,MAAaA,aAET,OAAOC,WAAa,QAAQ;CAC9B,UAAU;CACV,KAAK;CACL,MAAM;CACP,EAAE;AAEH,MAAaC,SAET,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAClC,QAAQ;CACR,YAAY,MAAM,QAAQ,IAAI;CAC9B,aAAa,MAAM,QAAQ,IAAI;CAChC,EAAE;AAEH,MAAaC,eAET,OAAOC,WAAc,EAA+B,EAAE,aAAa;CACrE,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,SAAS,MAAM,QAAQ,MAAO,KAAM;CACpC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAK;CACpC,OAAO;CACP,iBAAiB;CACjB,UAAU;CACV,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACD,KAAK,EACH,UAAU,IACX;CACF,EAAE"}
+{"version":3,"file":"TokenList.style.js","names":["ListItem","ListItemBase","List","MuiList","IconButton","MuiIconButton"],"sources":["../../../../src/components/TokenList/TokenList.style.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport {\n  IconButton as MuiIconButton,\n  List as MuiList,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItem as ListItemBase } from '../ListItem/ListItem.js'\n\nexport const ListItem: React.FC<\n  React.ComponentProps<typeof ListItemBase> & IconButtonProps & LinkProps\n> = styled(ListItemBase)(() => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}))\n\nexport const List: React.FC<\n  React.ComponentProps<typeof MuiList> & IconButtonProps & LinkProps\n> = styled(MuiList)(({ theme }) => ({\n  cursor: 'pointer',\n  marginLeft: theme.spacing(1.5),\n  marginRight: theme.spacing(1.5),\n}))\n\nexport const IconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & IconButtonProps & LinkProps\n> = styled(MuiIconButton)<IconButtonProps & LinkProps>(({ theme }) => ({\n  lineHeight: 1,\n  fontSize: 12,\n  fontWeight: 400,\n  padding: theme.spacing(0.375, 0.375),\n  margin: theme.spacing(0, 0, 0, 0.25),\n  color: 'inherit',\n  backgroundColor: 'unset',\n  minWidth: 'unset',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n  svg: {\n    fontSize: 14,\n  },\n}))\n"],"mappings":";;;AASA,MAAaA,aAET,OAAOC,WAAa,QAAQ;CAC9B,UAAU;CACV,KAAK;CACL,MAAM;CACP,EAAE;AAEH,MAAaC,SAET,OAAOC,KAAQ,EAAE,EAAE,aAAa;CAClC,QAAQ;CACR,YAAY,MAAM,QAAQ,IAAI;CAC9B,aAAa,MAAM,QAAQ,IAAI;CAChC,EAAE;AAEH,MAAaC,eAET,OAAOC,WAAc,EAA+B,EAAE,aAAa;CACrE,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,SAAS,MAAM,QAAQ,MAAO,KAAM;CACpC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAK;CACpC,OAAO;CACP,iBAAiB;CACjB,UAAU;CACV,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,KAAK,EACH,UAAU,IACX;CACF,EAAE"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js

@@ -16,7 +16,7 @@ const StatusRow = styled(Box)(({ theme }) => ({
 	gap: theme.spacing(1),
 	padding: theme.spacing(1),
 	borderRadius: theme.vars.shape.borderRadiusTertiary,
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`
 }));
 const DeleteButton = styled(IconButton)(({ theme }) => ({
 	padding: theme.spacing(.5),

package/dist/esm/components/TransactionCard/ActiveTransactionCard.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveTransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.style.tsx"],"sourcesContent":["import { Box, IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  position: 'relative',\n  width: 24,\n  height: 24,\n  flexShrink: 0,\n  borderRadius: '50%',\n  border: `2px solid ${theme.vars.palette.grey[300]}`,\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const StatusRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1),\n  padding: theme.spacing(1),\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n}))\n\nexport const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =\n  styled(IconButton)(({ theme }) => ({\n    padding: theme.spacing(0.5),\n    backgroundColor: theme.vars.palette.background.paper,\n    width: 24,\n    height: 24,\n  }))\n"],"mappings":";;AAGA,MAAa,gBAA4D,OACvE,IACD,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;CAC7C,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,MACtC,CAAC;CACH,EAAE;AAEH,MAAa,YAAwD,OACnE,IACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CACxE,EAAE;AAEH,MAAa,eACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,GAAI;CAC3B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;CACT,EAAE"}
+{"version":3,"file":"ActiveTransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.style.tsx"],"sourcesContent":["import { Box, IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const PendingCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  position: 'relative',\n  width: 24,\n  height: 24,\n  flexShrink: 0,\n  borderRadius: '50%',\n  border: `2px solid ${theme.vars.palette.grey[300]}`,\n  ...theme.applyStyles('dark', {\n    borderColor: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const StatusRow: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1),\n  padding: theme.spacing(1),\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n}))\n\nexport const DeleteButton: React.FC<React.ComponentProps<typeof IconButton>> =\n  styled(IconButton)(({ theme }) => ({\n    padding: theme.spacing(0.5),\n    backgroundColor: theme.vars.palette.background.paper,\n    width: 24,\n    height: 24,\n  }))\n"],"mappings":";;AAGA,MAAa,gBAA4D,OACvE,IACD,EAAE,EAAE,aAAa;CAChB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;CAC7C,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,MACtC,CAAC;CACH,EAAE;AAEH,MAAa,YAAwD,OACnE,IACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC/E,EAAE;AAEH,MAAa,eACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,GAAI;CAC3B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;CACT,EAAE"}

package/dist/esm/config/version.d.ts

@@ -1,6 +1,6 @@
 //#region src/config/version.d.ts
 declare const name = "@lifi/widget";
-declare const version = "4.0.0-beta.12";
+declare const version = "4.0.0-beta.14";
 //#endregion
 export { name, version };
 //# sourceMappingURL=version.d.ts.map

package/dist/esm/config/version.js

@@ -1,6 +1,6 @@
 //#region src/config/version.ts
 const name = "@lifi/widget";
-const version = "4.0.0-beta.12";
+const version = "4.0.0-beta.14";
 //#endregion
 export { name, version };
 

package/dist/esm/config/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.0.0-beta.12'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}
+{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.0.0-beta.14'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}

package/dist/esm/pages/SettingsPage/ResetSettingsButton.style.js

@@ -1,10 +1,10 @@
 import { Box, styled } from "@mui/material";
 //#region src/pages/SettingsPage/ResetSettingsButton.style.tsx
 const ResetButtonContainer = styled(Box)(({ theme }) => ({
-	background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+	background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	borderRadius: "16px",
 	padding: "16px",
-	svg: { fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)` }
+	svg: { fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)` }
 }));
 //#endregion
 export { ResetButtonContainer };

package/dist/esm/pages/SettingsPage/ResetSettingsButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.4)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,YAAY,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CAClE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,UAC7D;CACF,EAAE"}
+{"version":3,"file":"ResetSettingsButton.style.js","names":[],"sources":["../../../../src/pages/SettingsPage/ResetSettingsButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ResetButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    background: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    borderRadius: '16px',\n    padding: '16px',\n    svg: {\n      fill: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 40%, transparent)`,\n    },\n  }))\n"],"mappings":";;AAGA,MAAa,uBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,YAAY,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CACzE,cAAc;CACd,SAAS;CACT,KAAK,EACH,MAAM,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,qBACpE;CACF,EAAE"}

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js

@@ -6,15 +6,15 @@ const SettingsFieldSet = styled(Box)(({ theme }) => ({
 	padding: theme.spacing(.5),
 	gap: theme.spacing(.5),
 	height: "3.5rem",
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-	...theme.applyStyles("dark", { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)` })
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` })
 }));
 const settingsControlSelected = (theme) => ({
 	backgroundColor: theme.vars.palette.background.paper,
-	boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+	boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
 	...theme.applyStyles("dark", {
-		backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-		boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,
+		boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`
 	}),
 	borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`
 });

package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlippageSettings.style.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport {\n  Box,\n  ButtonBase,\n  InputBase,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsFieldSet: React.FC<\n  React.ComponentProps<typeof Box> & SettingsControlProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(0.5),\n  height: '3.5rem',\n  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,\n  }),\n}))\n\nconst settingsControlSelected = (theme: Theme) => ({\n  backgroundColor: theme.vars.palette.background.paper,\n  boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,\n    boxShadow: `0px 2px 4px rgba(${theme.vars.palette.common.backgroundChannel} / 0.04)`,\n  }),\n  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,\n})\n\ninterface SettingsControlProps {\n  selected?: boolean\n}\n\nexport const SettingsDefaultButton: React.FC<\n  React.ComponentProps<typeof ButtonBase> & SettingsControlProps\n> = styled(ButtonBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    fontSize: '1rem',\n    fontWeight: 700,\n    '&:focus': {\n      ...settingsControlSelectedStyles,\n    },\n    ...selectedStyle,\n  }\n})\n\nexport const SettingsCustomInput: React.FC<\n  React.ComponentProps<typeof InputBase> & SettingsControlProps\n> = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    [`.${inputBaseClasses.input}`]: {\n      height: '100%',\n      width: '100%',\n      padding: 0,\n      textAlign: 'center',\n      '&::placeholder': {\n        fontSize: '1rem',\n        fontWeight: 700,\n        opacity: 1,\n      },\n      '&:focus': {\n        ...settingsControlSelectedStyles,\n      },\n      ...selectedStyle,\n    },\n  }\n})\n\nexport const SlippageLimitsWarningContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.25),\n  marginTop: theme.spacing(1.5),\n}))\n"],"mappings":";;AAUA,MAAa,mBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,GAAI;CAC3B,KAAK,MAAM,QAAQ,GAAI;CACvB,QAAQ;CACR,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CACvE,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE,CAAC;CACH,EAAE;AAEH,MAAM,2BAA2B,WAAkB;CACjD,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,oBAAoB,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CAC7E,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,kBAAkB;EACrE,WAAW,oBAAoB,MAAM,KAAK,QAAQ,OAAO,kBAAkB;EAC5E,CAAC;CACF,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACrD;AAMD,MAAa,wBAET,OAAO,WAAW,EAAwB,EAAE,OAAO,eAAe;CACpE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW,EACT,GAAG,+BACJ;EACD,GAAG;EACJ;EACD;AAEF,MAAa,sBAET,OAAO,UAAU,EAAwB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;IACV;GACD,WAAW,EACT,GAAG,+BACJ;GACD,GAAG;GACJ;EACF;EACD;AAEF,MAAa,iCAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,KAAK;CACxB,WAAW,MAAM,QAAQ,IAAI;CAC9B,EAAE"}
+{"version":3,"file":"SlippageSettings.style.js","names":[],"sources":["../../../../../src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport {\n  Box,\n  ButtonBase,\n  InputBase,\n  inputBaseClasses,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsFieldSet: React.FC<\n  React.ComponentProps<typeof Box> & SettingsControlProps\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(0.5),\n  height: '3.5rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n  }),\n}))\n\nconst settingsControlSelected = (theme: Theme) => ({\n  backgroundColor: theme.vars.palette.background.paper,\n  boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    boxShadow: `0px 2px 4px color-mix(in srgb, ${theme.vars.palette.common.background} 4%, transparent)`,\n  }),\n  borderRadius: `calc(${theme.vars.shape.borderRadius} - 4px)`,\n})\n\ninterface SettingsControlProps {\n  selected?: boolean\n}\n\nexport const SettingsDefaultButton: React.FC<\n  React.ComponentProps<typeof ButtonBase> & SettingsControlProps\n> = styled(ButtonBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    fontSize: '1rem',\n    fontWeight: 700,\n    '&:focus': {\n      ...settingsControlSelectedStyles,\n    },\n    ...selectedStyle,\n  }\n})\n\nexport const SettingsCustomInput: React.FC<\n  React.ComponentProps<typeof InputBase> & SettingsControlProps\n> = styled(InputBase)<SettingsControlProps>(({ theme, selected }) => {\n  const settingsControlSelectedStyles = settingsControlSelected(theme)\n  const selectedStyle = selected\n    ? {\n        '&:not(:focus)': {\n          ...settingsControlSelectedStyles,\n        },\n      }\n    : {}\n\n  return {\n    height: '100%',\n    width: '100%',\n    [`.${inputBaseClasses.input}`]: {\n      height: '100%',\n      width: '100%',\n      padding: 0,\n      textAlign: 'center',\n      '&::placeholder': {\n        fontSize: '1rem',\n        fontWeight: 700,\n        opacity: 1,\n      },\n      '&:focus': {\n        ...settingsControlSelectedStyles,\n      },\n      ...selectedStyle,\n    },\n  }\n})\n\nexport const SlippageLimitsWarningContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.25),\n  marginTop: theme.spacing(1.5),\n}))\n"],"mappings":";;AAUA,MAAa,mBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS,MAAM,QAAQ,GAAI;CAC3B,KAAK,MAAM,QAAQ,GAAI;CACvB,QAAQ;CACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E,CAAC;CACH,EAAE;AAEH,MAAM,2BAA2B,WAAkB;CACjD,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,aAAa;CACpF,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW;EAC5E,WAAW,kCAAkC,MAAM,KAAK,QAAQ,OAAO,WAAW;EACnF,CAAC;CACF,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACrD;AAMD,MAAa,wBAET,OAAO,WAAW,EAAwB,EAAE,OAAO,eAAe;CACpE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,WAAW,EACT,GAAG,+BACJ;EACD,GAAG;EACJ;EACD;AAEF,MAAa,sBAET,OAAO,UAAU,EAAwB,EAAE,OAAO,eAAe;CACnE,MAAM,gCAAgC,wBAAwB,MAAM;CACpE,MAAM,gBAAgB,WAClB,EACE,iBAAiB,EACf,GAAG,+BACJ,EACF,GACD,EAAE;AAEN,QAAO;EACL,QAAQ;EACR,OAAO;GACN,IAAI,iBAAiB,UAAU;GAC9B,QAAQ;GACR,OAAO;GACP,SAAS;GACT,WAAW;GACX,kBAAkB;IAChB,UAAU;IACV,YAAY;IACZ,SAAS;IACV;GACD,WAAW,EACT,GAAG,+BACJ;GACD,GAAG;GACJ;EACF;EACD;AAEF,MAAa,iCAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,KAAK;CACxB,WAAW,MAAM,QAAQ,IAAI;CAC9B,EAAE"}

package/dist/esm/pages/TransactionDetailsPage/ActionRow.style.js

@@ -6,7 +6,7 @@ const ActionRowContainer = styled(Box)(({ theme }) => ({
 	gap: theme.spacing(1),
 	padding: theme.spacing(1),
 	borderRadius: theme.vars.shape.borderRadiusTertiary,
-	backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`
 }));
 const ActionIconCircle = styled(Box)(({ theme }) => ({
 	display: "flex",
@@ -15,7 +15,7 @@ const ActionIconCircle = styled(Box)(({ theme }) => ({
 	width: 24,
 	height: 24,
 	borderRadius: "50%",
-	backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`
 }));
 const ActionRowLabel = styled(Typography)(({ theme }) => ({
 	flex: 1,

package/dist/esm/pages/TransactionDetailsPage/ActionRow.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  }))\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB;CACxE,EAAE;AAEL,MAAa,mBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,0BAA0B,MAAM,KAAK,QAAQ,QAAQ,YAAY,SAAS,MAAM,KAAK,QAAQ,WAAW,MAAM;CAChI,EAAE;AAEL,MAAa,iBACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAChC,EAAE"}
+{"version":3,"file":"ActionRow.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ActionRow.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionRowContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1),\n    borderRadius: theme.vars.shape.borderRadiusTertiary,\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  }))\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ActionRowLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)(({ theme }) => ({\n    flex: 1,\n    fontSize: 12,\n    fontWeight: 500,\n    color: theme.vars.palette.text.primary,\n  }))\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,EAAE;CACrB,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAC/E,EAAE;AAEL,MAAa,mBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW,MAAM;CACpH,EAAE;AAEL,MAAa,iBACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,MAAM;CACN,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAChC,EAAE"}

package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.style.js

@@ -14,7 +14,7 @@ const ExternalLink = styled(Link)(({ theme }) => ({
 	borderRadius: "50%",
 	textDecoration: "none",
 	color: theme.vars.palette.text.primary,
-	"&:hover": { backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)` }
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
 }));
 //#endregion
 export { ExternalLink, TransactionList };

package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReceiptsCard.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const TransactionList: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1.5),\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,IAAI;CACxB,EAAE;AAEL,MAAa,eAA4D,OACvE,KACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,QAAQ,MAAM,KAAK,QAAQ,OAAO,oBAAoB,WACxE;CACF,EAAE"}
+{"version":3,"file":"ReceiptsCard.style.js","names":[],"sources":["../../../../src/pages/TransactionDetailsPage/ReceiptsCard.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const TransactionList: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1.5),\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,kBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,IAAI;CACxB,EAAE;AAEL,MAAa,eAA4D,OACvE,KACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACF,EAAE"}

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js

@@ -4,13 +4,13 @@ import { Box, styled } from "@mui/material";
 const getStatusColor = (status, theme) => {
 	switch (status) {
 		case RouteExecutionStatus.Done: return {
-			color: theme.vars.palette.success.mainChannel,
+			color: theme.vars.palette.success.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
 		};
 		case RouteExecutionStatus.Failed: return {
-			color: theme.vars.palette.error.mainChannel,
+			color: theme.vars.palette.error.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
@@ -18,13 +18,13 @@ const getStatusColor = (status, theme) => {
 		case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
 		case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
 		case "warning": return {
-			color: theme.vars.palette.warning.mainChannel,
+			color: theme.vars.palette.warning.main,
 			alpha: .48,
 			lightDarken: .32,
 			darkDarken: 0
 		};
 		default: return {
-			color: theme.vars.palette.primary.mainChannel,
+			color: theme.vars.palette.primary.main,
 			alpha: .12,
 			lightDarken: 0,
 			darkDarken: 0
@@ -39,7 +39,7 @@ const CenterContainer = styled(Box)(() => ({
 const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status" })(({ theme, status = RouteExecutionStatus.Idle }) => {
 	const statusConfig = getStatusColor(status, theme);
 	return {
-		backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
+		backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,
 		borderRadius: "50%",
 		width: 72,
 		height: 72,
@@ -47,12 +47,12 @@ const IconCircle = styled(Box, { shouldForwardProp: (prop) => prop !== "status"
 		position: "relative",
 		placeItems: "center",
 		"& > svg": {
-			color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
+			color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,
 			width: 36,
 			height: 36
 		},
 		...theme.applyStyles("dark", { "& > svg": {
-			color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
+			color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,
 			width: 36,
 			height: 36
 		} })

package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus | 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n  switch (status) {\n    case RouteExecutionStatus.Done:\n      return {\n        color: theme.vars.palette.success.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Failed:\n      return {\n        color: theme.vars.palette.error.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.mainChannel,\n        alpha: 0.48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    default:\n      return {\n        color: theme.vars.palette.primary.mainChannel,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const CenterContainer: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n  display: 'grid',\n  placeItems: 'center',\n  position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n  ({ theme, status = RouteExecutionStatus.Idle }) => {\n    const statusConfig = getStatusColor(status, theme)\n\n    return {\n      backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,\n      borderRadius: '50%',\n      width: 72,\n      height: 72,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n        width: 36,\n        height: 36,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n          width: 36,\n          height: 36,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,KAAK,qBAAqB,KACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,SAAS,qBAAqB,WAAW;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,QAAQ,aAAa,MAAM,KAAK,aAAa,MAAM;EACpE,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,0BAA0B,aAAa,MAAM,KAAK,IAAI,aAAa,eAAe,IAAI;GAC7F,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,0BAA0B,aAAa,MAAM,KAAK,IAAI,aAAa,cAAc,IAAI;GAC5F,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}
+{"version":3,"file":"StatusBottomSheet.style.js","names":[],"sources":["../../../../src/pages/TransactionPage/StatusBottomSheet.style.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\n\ntype StatusColor = RouteExecutionStatus | 'warning'\n\nconst getStatusColor = (status: StatusColor, theme: Theme) => {\n  switch (status) {\n    case RouteExecutionStatus.Done:\n      return {\n        color: theme.vars.palette.success.main,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Failed:\n      return {\n        color: theme.vars.palette.error.main,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:\n    case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:\n    case 'warning':\n      return {\n        color: theme.vars.palette.warning.main,\n        alpha: 0.48,\n        lightDarken: 0.32,\n        darkDarken: 0,\n      }\n    default:\n      return {\n        color: theme.vars.palette.primary.main,\n        alpha: 0.12,\n        lightDarken: 0,\n        darkDarken: 0,\n      }\n  }\n}\n\nexport const CenterContainer: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box)(() => ({\n  display: 'grid',\n  placeItems: 'center',\n  position: 'relative',\n}))\n\nexport const IconCircle: React.FC<\n  React.ComponentProps<typeof Box> & { status?: StatusColor }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'status',\n})<{ status?: StatusColor }>(\n  ({ theme, status = RouteExecutionStatus.Idle }) => {\n    const statusConfig = getStatusColor(status, theme)\n\n    return {\n      backgroundColor: `color-mix(in srgb, ${statusConfig.color} ${statusConfig.alpha * 100}%, transparent)`,\n      borderRadius: '50%',\n      width: 72,\n      height: 72,\n      display: 'grid',\n      position: 'relative',\n      placeItems: 'center',\n      '& > svg': {\n        color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.lightDarken) * 100}%, black)`,\n        width: 36,\n        height: 36,\n      },\n      ...theme.applyStyles('dark', {\n        '& > svg': {\n          color: `color-mix(in srgb, ${statusConfig.color} ${(1 - statusConfig.darkDarken) * 100}%, black)`,\n          width: 36,\n          height: 36,\n        },\n      }),\n    }\n  }\n)\n"],"mappings":";;;AAOA,MAAM,kBAAkB,QAAqB,UAAiB;AAC5D,SAAQ,QAAR;EACE,KAAK,qBAAqB,KACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OACxB,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,MAAM;GAChC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,qBAAqB,OAAO,qBAAqB;EACtD,KAAK,UACH,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;EACH,QACE,QAAO;GACL,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,OAAO;GACP,aAAa;GACb,YAAY;GACb;;;AAIP,MAAa,kBAET,OAAO,IAAI,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAa,aAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EACC,EAAE,OAAO,SAAS,qBAAqB,WAAW;CACjD,MAAM,eAAe,eAAe,QAAQ,MAAM;AAElD,QAAO;EACL,iBAAiB,sBAAsB,aAAa,MAAM,GAAG,aAAa,QAAQ,IAAI;EACtF,cAAc;EACd,OAAO;EACP,QAAQ;EACR,SAAS;EACT,UAAU;EACV,YAAY;EACZ,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,eAAe,IAAI;GACxF,OAAO;GACP,QAAQ;GACT;EACD,GAAG,MAAM,YAAY,QAAQ,EAC3B,WAAW;GACT,OAAO,sBAAsB,aAAa,MAAM,IAAI,IAAI,aAAa,cAAc,IAAI;GACvF,OAAO;GACP,QAAQ;GACT,EACF,CAAC;EACH;EAEJ"}

package/dist/esm/stores/form/useFormRef.js

@@ -1,3 +1,5 @@
+import { widgetEvents } from "../../hooks/useWidgetEvents.js";
+import { WidgetEvent } from "../../types/events.js";
 import { useBookmarkActions } from "../bookmarks/useBookmarkActions.js";
 import { formDefaultValues } from "./createFormStore.js";
 import { useImperativeHandle } from "react";
@@ -18,7 +20,13 @@ const useFormRef = (formStore, formRef) => {
 		return { setFieldValue: (fieldName, value, options) => {
 			const sanitizedValue = sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value;
 			const fieldValueOptions = options?.setUrlSearchParam ? { isTouched: options?.setUrlSearchParam } : void 0;
+			const oldValue = formStore.getState().getFieldValues(fieldName)[0];
 			formStore.getState().setFieldValue(fieldName, sanitizedValue, fieldValueOptions);
+			if (sanitizedValue !== oldValue) widgetEvents.emit(WidgetEvent.FormFieldChanged, {
+				fieldName,
+				newValue: sanitizedValue,
+				oldValue
+			});
 		} };
 	}, [formStore, setSelectedBookmark]);
 };

package/dist/esm/stores/form/useFormRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormRef.js","names":[],"sources":["../../../../src/stores/form/useFormRef.ts"],"sourcesContent":["import { useImperativeHandle } from 'react'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { formDefaultValues } from '../../stores/form/createFormStore.js'\nimport type { FormRef } from '../../types/widget.js'\nimport type { FormStoreStore, GenericFormValue } from './types.js'\n\nexport const useFormRef = (\n  formStore: FormStoreStore,\n  formRef?: FormRef\n): void => {\n  const { setSelectedBookmark } = useBookmarkActions()\n\n  useImperativeHandle(formRef, () => {\n    const sanitizeValue: {\n      [key: string]: (value: any) => GenericFormValue\n    } = {\n      fromAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.fromAmount,\n      toAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.toAmount,\n      toAddress: (value) => {\n        const isToAddressObj = typeof value !== 'string'\n\n        const address =\n          (isToAddressObj ? value?.address : value) ||\n          formDefaultValues.toAddress\n\n        // we can assume that the toAddress has been passed as ToAddress object\n        // and display it accordingly - this ensures that if a name is included\n        // that it is displayed in the Send To Wallet form field correctly\n        if (isToAddressObj) {\n          setSelectedBookmark(value)\n        }\n\n        return address\n      },\n    }\n\n    return {\n      setFieldValue: (fieldName, value, options) => {\n        const sanitizedValue = (\n          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value\n        ) as GenericFormValue\n\n        const fieldValueOptions = options?.setUrlSearchParam\n          ? { isTouched: options?.setUrlSearchParam }\n          : undefined\n\n        formStore\n          .getState()\n          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)\n      },\n    }\n  }, [formStore, setSelectedBookmark])\n}\n"],"mappings":";;;;AAMA,MAAa,cACX,WACA,YACS;CACT,MAAM,EAAE,wBAAwB,oBAAoB;AAEpD,qBAAoB,eAAe;EACjC,MAAM,gBAEF;GACF,aAAa,WACV,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,WAAW,WACR,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,YAAY,UAAU;IACpB,MAAM,iBAAiB,OAAO,UAAU;IAExC,MAAM,WACH,iBAAiB,OAAO,UAAU,UACnC,kBAAkB;AAKpB,QAAI,eACF,qBAAoB,MAAM;AAG5B,WAAO;;GAEV;AAED,SAAO,EACL,gBAAgB,WAAW,OAAO,YAAY;GAC5C,MAAM,iBACJ,cAAc,aAAa,cAAc,WAAW,MAAM,GAAG;GAG/D,MAAM,oBAAoB,SAAS,oBAC/B,EAAE,WAAW,SAAS,mBAAmB,GACzC,KAAA;AAEJ,aACG,UAAU,CACV,cAAc,WAAW,gBAAgB,kBAAkB;KAEjE;IACA,CAAC,WAAW,oBAAoB,CAAC"}
+{"version":3,"file":"useFormRef.js","names":[],"sources":["../../../../src/stores/form/useFormRef.ts"],"sourcesContent":["import { useImperativeHandle } from 'react'\nimport { widgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { formDefaultValues } from '../../stores/form/createFormStore.js'\nimport type { FormFieldChanged } from '../../types/events.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { FormRef } from '../../types/widget.js'\nimport type {\n  FormFieldNames,\n  FormStoreStore,\n  GenericFormValue,\n} from './types.js'\n\nexport const useFormRef = (\n  formStore: FormStoreStore,\n  formRef?: FormRef\n): void => {\n  const { setSelectedBookmark } = useBookmarkActions()\n\n  useImperativeHandle(formRef, () => {\n    const sanitizeValue: {\n      [key: string]: (value: any) => GenericFormValue\n    } = {\n      fromAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.fromAmount,\n      toAmount: (value) =>\n        (typeof value === 'number' ? value?.toPrecision() : value) ||\n        formDefaultValues.toAmount,\n      toAddress: (value) => {\n        const isToAddressObj = typeof value !== 'string'\n\n        const address =\n          (isToAddressObj ? value?.address : value) ||\n          formDefaultValues.toAddress\n\n        // we can assume that the toAddress has been passed as ToAddress object\n        // and display it accordingly - this ensures that if a name is included\n        // that it is displayed in the Send To Wallet form field correctly\n        if (isToAddressObj) {\n          setSelectedBookmark(value)\n        }\n\n        return address\n      },\n    }\n\n    return {\n      setFieldValue: (fieldName, value, options) => {\n        const sanitizedValue = (\n          sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value\n        ) as GenericFormValue\n\n        const fieldValueOptions = options?.setUrlSearchParam\n          ? { isTouched: options?.setUrlSearchParam }\n          : undefined\n\n        const oldValue = formStore\n          .getState()\n          .getFieldValues(fieldName as FormFieldNames)[0]\n\n        formStore\n          .getState()\n          .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)\n\n        if (sanitizedValue !== oldValue) {\n          widgetEvents.emit(WidgetEvent.FormFieldChanged, {\n            fieldName,\n            newValue: sanitizedValue,\n            oldValue,\n          } as FormFieldChanged)\n        }\n      },\n    }\n  }, [formStore, setSelectedBookmark])\n}\n"],"mappings":";;;;;;AAaA,MAAa,cACX,WACA,YACS;CACT,MAAM,EAAE,wBAAwB,oBAAoB;AAEpD,qBAAoB,eAAe;EACjC,MAAM,gBAEF;GACF,aAAa,WACV,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,WAAW,WACR,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,YAAY,UAAU;IACpB,MAAM,iBAAiB,OAAO,UAAU;IAExC,MAAM,WACH,iBAAiB,OAAO,UAAU,UACnC,kBAAkB;AAKpB,QAAI,eACF,qBAAoB,MAAM;AAG5B,WAAO;;GAEV;AAED,SAAO,EACL,gBAAgB,WAAW,OAAO,YAAY;GAC5C,MAAM,iBACJ,cAAc,aAAa,cAAc,WAAW,MAAM,GAAG;GAG/D,MAAM,oBAAoB,SAAS,oBAC/B,EAAE,WAAW,SAAS,mBAAmB,GACzC,KAAA;GAEJ,MAAM,WAAW,UACd,UAAU,CACV,eAAe,UAA4B,CAAC;AAE/C,aACG,UAAU,CACV,cAAc,WAAW,gBAAgB,kBAAkB;AAE9D,OAAI,mBAAmB,SACrB,cAAa,KAAK,YAAY,kBAAkB;IAC9C;IACA,UAAU;IACV;IACD,CAAqB;KAG3B;IACA,CAAC,WAAW,oBAAoB,CAAC"}

package/dist/esm/stores/routes/createRouteExecutionStore.js

@@ -62,8 +62,8 @@ const createRouteExecutionStore = ({ namePrefix }) => create()(persist((set, get
 	}
 }), {
 	name: `${namePrefix || "li.fi"}-widget-routes`,
-	version: 3,
-	migrate: (persistedState) => persistedState,
+	version: 4,
+	migrate: () => ({ routes: {} }),
 	partialize: (state) => ({ routes: state.routes }),
 	merge: (persistedState, currentState) => {
 		const state = {

package/dist/esm/stores/routes/createRouteExecutionStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"createRouteExecutionStore.js","names":[],"sources":["../../../../src/stores/routes/createRouteExecutionStore.ts"],"sourcesContent":["import type { Route, RouteExtended } from '@lifi/sdk'\nimport type { StoreApi, UseBoundStore } from 'zustand'\nimport { create } from 'zustand'\nimport { persist } from 'zustand/middleware'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { PersistStoreProps } from '../types.js'\nimport type { RouteExecution, RouteExecutionState } from './types.js'\nimport { RouteExecutionStatus } from './types.js'\nimport {\n  isRouteDone,\n  isRouteFailed,\n  isRoutePartiallyDone,\n  isRouteRefunded,\n} from './utils.js'\n\nexport const createRouteExecutionStore = ({\n  namePrefix,\n}: PersistStoreProps): UseBoundStore<StoreApi<RouteExecutionState>> =>\n  create<RouteExecutionState>()(\n    persist(\n      (set, get) => ({\n        routes: {},\n        setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {\n          if (!get().routes[route.id]) {\n            set((state: RouteExecutionState) => {\n              const routes = { ...state.routes }\n              // clean previous idle routes\n              Object.keys(routes)\n                .filter(\n                  (routeId) =>\n                    !observableRouteIds?.includes(routeId) &&\n                    hasEnumFlag(\n                      routes[routeId]!.status,\n                      RouteExecutionStatus.Idle\n                    )\n                )\n                .forEach((routeId) => {\n                  delete routes[routeId]\n                })\n              routes[route.id] = {\n                route,\n                status: RouteExecutionStatus.Idle,\n              }\n              return {\n                routes,\n              }\n            })\n          }\n        },\n        updateRoute: (route: RouteExtended) => {\n          if (get().routes[route.id]) {\n            set((state: RouteExecutionState) => {\n              const updatedState = {\n                routes: {\n                  ...state.routes,\n                  [route.id]: { ...state.routes[route.id]!, route },\n                },\n              }\n              const isFailed = isRouteFailed(route)\n              if (isFailed) {\n                updatedState.routes[route.id]!.status =\n                  RouteExecutionStatus.Failed\n                return updatedState\n              }\n              const isDone = isRouteDone(route)\n              if (isDone) {\n                updatedState.routes[route.id]!.status =\n                  RouteExecutionStatus.Done\n                if (isRoutePartiallyDone(route)) {\n                  updatedState.routes[route.id]!.status |=\n                    RouteExecutionStatus.Partial\n                } else if (isRouteRefunded(route)) {\n                  updatedState.routes[route.id]!.status |=\n                    RouteExecutionStatus.Refunded\n                }\n                return updatedState\n              }\n              const isLoading = route.steps.some((step) => step.execution)\n              if (isLoading) {\n                updatedState.routes[route.id]!.status =\n                  RouteExecutionStatus.Pending\n              }\n              return updatedState\n            })\n          }\n        },\n        deleteRoutes: (type, accountAddresses) =>\n          set((state: RouteExecutionState) => {\n            const routes = { ...state.routes }\n            Object.keys(routes)\n              .filter((routeId) => {\n                const route = routes[routeId]\n                if (\n                  accountAddresses &&\n                  !accountAddresses.includes(route?.route.fromAddress ?? '')\n                ) {\n                  return false\n                }\n                return type === 'completed'\n                  ? hasEnumFlag(route?.status ?? 0, RouteExecutionStatus.Done)\n                  : type === 'failed'\n                    ? hasEnumFlag(\n                        route?.status ?? 0,\n                        RouteExecutionStatus.Failed\n                      )\n                    : !hasEnumFlag(\n                        route?.status ?? 0,\n                        RouteExecutionStatus.Done\n                      )\n              })\n              .forEach((routeId) => {\n                delete routes[routeId]\n              })\n            return {\n              routes,\n            }\n          }),\n        deleteRoute: (routeId: string) => {\n          if (get().routes[routeId]) {\n            set((state: RouteExecutionState) => {\n              const routes = { ...state.routes }\n              delete routes[routeId]\n              return {\n                routes,\n              }\n            })\n          }\n        },\n      }),\n      {\n        name: `${namePrefix || 'li.fi'}-widget-routes`,\n        version: 3,\n        migrate: (persistedState: any) => persistedState,\n        partialize: (state) => ({ routes: state.routes }),\n        merge: (persistedState: any, currentState: RouteExecutionState) => {\n          const state = {\n            ...currentState,\n            ...persistedState,\n          } as RouteExecutionState\n          try {\n            // Keep only the most recent 100 routes, evicting the oldest when the\n            // limit is exceeded.\n            const maxStoredRoutes = 100\n            const allRoutes = Object.values(state.routes) as RouteExecution[]\n            const storedRoutes = allRoutes\n              .sort(\n                (a, b) =>\n                  (b.route.steps[0]?.execution?.startedAt ?? 0) -\n                  (a.route.steps[0]?.execution?.startedAt ?? 0)\n              )\n              .slice(0, maxStoredRoutes)\n            const keepIds = new Set(storedRoutes.map((r) => r.route.id))\n            for (const id of Object.keys(state.routes)) {\n              if (!keepIds.has(id)) {\n                delete state.routes[id]\n              }\n            }\n          } catch (error) {\n            console.error(error)\n          }\n          return state\n        },\n      }\n    )\n  )\n"],"mappings":";;;;;;AAeA,MAAa,6BAA6B,EACxC,iBAEA,QAA6B,CAC3B,SACG,KAAK,SAAS;CACb,QAAQ,EAAE;CACV,qBAAqB,OAAc,uBAAkC;AACnE,MAAI,CAAC,KAAK,CAAC,OAAO,MAAM,IACtB,MAAK,UAA+B;GAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAElC,UAAO,KAAK,OAAO,CAChB,QACE,YACC,CAAC,oBAAoB,SAAS,QAAQ,IACtC,YACE,OAAO,SAAU,QACjB,qBAAqB,KACtB,CACJ,CACA,SAAS,YAAY;AACpB,WAAO,OAAO;KACd;AACJ,UAAO,MAAM,MAAM;IACjB;IACA,QAAQ,qBAAqB;IAC9B;AACD,UAAO,EACL,QACD;IACD;;CAGN,cAAc,UAAyB;AACrC,MAAI,KAAK,CAAC,OAAO,MAAM,IACrB,MAAK,UAA+B;GAClC,MAAM,eAAe,EACnB,QAAQ;IACN,GAAG,MAAM;KACR,MAAM,KAAK;KAAE,GAAG,MAAM,OAAO,MAAM;KAAM;KAAO;IAClD,EACF;AAED,OADiB,cAAc,MAAM,EACvB;AACZ,iBAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AACvB,WAAO;;AAGT,OADe,YAAY,MAAM,EACrB;AACV,iBAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AACvB,QAAI,qBAAqB,MAAM,CAC7B,cAAa,OAAO,MAAM,IAAK,UAC7B,qBAAqB;aACd,gBAAgB,MAAM,CAC/B,cAAa,OAAO,MAAM,IAAK,UAC7B,qBAAqB;AAEzB,WAAO;;AAGT,OADkB,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU,CAE1D,cAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AAEzB,UAAO;IACP;;CAGN,eAAe,MAAM,qBACnB,KAAK,UAA+B;EAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAClC,SAAO,KAAK,OAAO,CAChB,QAAQ,YAAY;GACnB,MAAM,QAAQ,OAAO;AACrB,OACE,oBACA,CAAC,iBAAiB,SAAS,OAAO,MAAM,eAAe,GAAG,CAE1D,QAAO;AAET,UAAO,SAAS,cACZ,YAAY,OAAO,UAAU,GAAG,qBAAqB,KAAK,GAC1D,SAAS,WACP,YACE,OAAO,UAAU,GACjB,qBAAqB,OACtB,GACD,CAAC,YACC,OAAO,UAAU,GACjB,qBAAqB,KACtB;IACP,CACD,SAAS,YAAY;AACpB,UAAO,OAAO;IACd;AACJ,SAAO,EACL,QACD;GACD;CACJ,cAAc,YAAoB;AAChC,MAAI,KAAK,CAAC,OAAO,SACf,MAAK,UAA+B;GAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAClC,UAAO,OAAO;AACd,UAAO,EACL,QACD;IACD;;CAGP,GACD;CACE,MAAM,GAAG,cAAc,QAAQ;CAC/B,SAAS;CACT,UAAU,mBAAwB;CAClC,aAAa,WAAW,EAAE,QAAQ,MAAM,QAAQ;CAChD,QAAQ,gBAAqB,iBAAsC;EACjE,MAAM,QAAQ;GACZ,GAAG;GACH,GAAG;GACJ;AACD,MAAI;GAKF,MAAM,eADY,OAAO,OAAO,MAAM,OAAO,CAE1C,MACE,GAAG,OACD,EAAE,MAAM,MAAM,IAAI,WAAW,aAAa,MAC1C,EAAE,MAAM,MAAM,IAAI,WAAW,aAAa,GAC9C,CACA,MAAM,GARe,IAQI;GAC5B,MAAM,UAAU,IAAI,IAAI,aAAa,KAAK,MAAM,EAAE,MAAM,GAAG,CAAC;AAC5D,QAAK,MAAM,MAAM,OAAO,KAAK,MAAM,OAAO,CACxC,KAAI,CAAC,QAAQ,IAAI,GAAG,CAClB,QAAO,MAAM,OAAO;WAGjB,OAAO;AACd,WAAQ,MAAM,MAAM;;AAEtB,SAAO;;CAEV,CACF,CACF"}
+{"version":3,"file":"createRouteExecutionStore.js","names":[],"sources":["../../../../src/stores/routes/createRouteExecutionStore.ts"],"sourcesContent":["import type { Route, RouteExtended } from '@lifi/sdk'\nimport type { StoreApi, UseBoundStore } from 'zustand'\nimport { create } from 'zustand'\nimport { persist } from 'zustand/middleware'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { PersistStoreProps } from '../types.js'\nimport type { RouteExecution, RouteExecutionState } from './types.js'\nimport { RouteExecutionStatus } from './types.js'\nimport {\n  isRouteDone,\n  isRouteFailed,\n  isRoutePartiallyDone,\n  isRouteRefunded,\n} from './utils.js'\n\nexport const createRouteExecutionStore = ({\n  namePrefix,\n}: PersistStoreProps): UseBoundStore<StoreApi<RouteExecutionState>> =>\n  create<RouteExecutionState>()(\n    persist(\n      (set, get) => ({\n        routes: {},\n        setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {\n          if (!get().routes[route.id]) {\n            set((state: RouteExecutionState) => {\n              const routes = { ...state.routes }\n              // clean previous idle routes\n              Object.keys(routes)\n                .filter(\n                  (routeId) =>\n                    !observableRouteIds?.includes(routeId) &&\n                    hasEnumFlag(\n                      routes[routeId]!.status,\n                      RouteExecutionStatus.Idle\n                    )\n                )\n                .forEach((routeId) => {\n                  delete routes[routeId]\n                })\n              routes[route.id] = {\n                route,\n                status: RouteExecutionStatus.Idle,\n              }\n              return {\n                routes,\n              }\n            })\n          }\n        },\n        updateRoute: (route: RouteExtended) => {\n          if (get().routes[route.id]) {\n            set((state: RouteExecutionState) => {\n              const updatedState = {\n                routes: {\n                  ...state.routes,\n                  [route.id]: { ...state.routes[route.id]!, route },\n                },\n              }\n              const isFailed = isRouteFailed(route)\n              if (isFailed) {\n                updatedState.routes[route.id]!.status =\n                  RouteExecutionStatus.Failed\n                return updatedState\n              }\n              const isDone = isRouteDone(route)\n              if (isDone) {\n                updatedState.routes[route.id]!.status =\n                  RouteExecutionStatus.Done\n                if (isRoutePartiallyDone(route)) {\n                  updatedState.routes[route.id]!.status |=\n                    RouteExecutionStatus.Partial\n                } else if (isRouteRefunded(route)) {\n                  updatedState.routes[route.id]!.status |=\n                    RouteExecutionStatus.Refunded\n                }\n                return updatedState\n              }\n              const isLoading = route.steps.some((step) => step.execution)\n              if (isLoading) {\n                updatedState.routes[route.id]!.status =\n                  RouteExecutionStatus.Pending\n              }\n              return updatedState\n            })\n          }\n        },\n        deleteRoutes: (type, accountAddresses) =>\n          set((state: RouteExecutionState) => {\n            const routes = { ...state.routes }\n            Object.keys(routes)\n              .filter((routeId) => {\n                const route = routes[routeId]\n                if (\n                  accountAddresses &&\n                  !accountAddresses.includes(route?.route.fromAddress ?? '')\n                ) {\n                  return false\n                }\n                return type === 'completed'\n                  ? hasEnumFlag(route?.status ?? 0, RouteExecutionStatus.Done)\n                  : type === 'failed'\n                    ? hasEnumFlag(\n                        route?.status ?? 0,\n                        RouteExecutionStatus.Failed\n                      )\n                    : !hasEnumFlag(\n                        route?.status ?? 0,\n                        RouteExecutionStatus.Done\n                      )\n              })\n              .forEach((routeId) => {\n                delete routes[routeId]\n              })\n            return {\n              routes,\n            }\n          }),\n        deleteRoute: (routeId: string) => {\n          if (get().routes[routeId]) {\n            set((state: RouteExecutionState) => {\n              const routes = { ...state.routes }\n              delete routes[routeId]\n              return {\n                routes,\n              }\n            })\n          }\n        },\n      }),\n      {\n        name: `${namePrefix || 'li.fi'}-widget-routes`,\n        // Bump version on breaking changes to the stored structure.\n        version: 4,\n        // Clear stored routes on any version mismatch to avoid errors from incompatible data shapes.\n        migrate: () => ({ routes: {} }),\n        partialize: (state) => ({ routes: state.routes }),\n        merge: (persistedState: any, currentState: RouteExecutionState) => {\n          const state = {\n            ...currentState,\n            ...persistedState,\n          } as RouteExecutionState\n          try {\n            // Keep only the most recent 100 routes, evicting the oldest when the\n            // limit is exceeded.\n            const maxStoredRoutes = 100\n            const allRoutes = Object.values(state.routes) as RouteExecution[]\n            const storedRoutes = allRoutes\n              .sort(\n                (a, b) =>\n                  (b.route.steps[0]?.execution?.startedAt ?? 0) -\n                  (a.route.steps[0]?.execution?.startedAt ?? 0)\n              )\n              .slice(0, maxStoredRoutes)\n            const keepIds = new Set(storedRoutes.map((r) => r.route.id))\n            for (const id of Object.keys(state.routes)) {\n              if (!keepIds.has(id)) {\n                delete state.routes[id]\n              }\n            }\n          } catch (error) {\n            console.error(error)\n          }\n          return state\n        },\n      }\n    )\n  )\n"],"mappings":";;;;;;AAeA,MAAa,6BAA6B,EACxC,iBAEA,QAA6B,CAC3B,SACG,KAAK,SAAS;CACb,QAAQ,EAAE;CACV,qBAAqB,OAAc,uBAAkC;AACnE,MAAI,CAAC,KAAK,CAAC,OAAO,MAAM,IACtB,MAAK,UAA+B;GAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAElC,UAAO,KAAK,OAAO,CAChB,QACE,YACC,CAAC,oBAAoB,SAAS,QAAQ,IACtC,YACE,OAAO,SAAU,QACjB,qBAAqB,KACtB,CACJ,CACA,SAAS,YAAY;AACpB,WAAO,OAAO;KACd;AACJ,UAAO,MAAM,MAAM;IACjB;IACA,QAAQ,qBAAqB;IAC9B;AACD,UAAO,EACL,QACD;IACD;;CAGN,cAAc,UAAyB;AACrC,MAAI,KAAK,CAAC,OAAO,MAAM,IACrB,MAAK,UAA+B;GAClC,MAAM,eAAe,EACnB,QAAQ;IACN,GAAG,MAAM;KACR,MAAM,KAAK;KAAE,GAAG,MAAM,OAAO,MAAM;KAAM;KAAO;IAClD,EACF;AAED,OADiB,cAAc,MAAM,EACvB;AACZ,iBAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AACvB,WAAO;;AAGT,OADe,YAAY,MAAM,EACrB;AACV,iBAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AACvB,QAAI,qBAAqB,MAAM,CAC7B,cAAa,OAAO,MAAM,IAAK,UAC7B,qBAAqB;aACd,gBAAgB,MAAM,CAC/B,cAAa,OAAO,MAAM,IAAK,UAC7B,qBAAqB;AAEzB,WAAO;;AAGT,OADkB,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU,CAE1D,cAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AAEzB,UAAO;IACP;;CAGN,eAAe,MAAM,qBACnB,KAAK,UAA+B;EAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAClC,SAAO,KAAK,OAAO,CAChB,QAAQ,YAAY;GACnB,MAAM,QAAQ,OAAO;AACrB,OACE,oBACA,CAAC,iBAAiB,SAAS,OAAO,MAAM,eAAe,GAAG,CAE1D,QAAO;AAET,UAAO,SAAS,cACZ,YAAY,OAAO,UAAU,GAAG,qBAAqB,KAAK,GAC1D,SAAS,WACP,YACE,OAAO,UAAU,GACjB,qBAAqB,OACtB,GACD,CAAC,YACC,OAAO,UAAU,GACjB,qBAAqB,KACtB;IACP,CACD,SAAS,YAAY;AACpB,UAAO,OAAO;IACd;AACJ,SAAO,EACL,QACD;GACD;CACJ,cAAc,YAAoB;AAChC,MAAI,KAAK,CAAC,OAAO,SACf,MAAK,UAA+B;GAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAClC,UAAO,OAAO;AACd,UAAO,EACL,QACD;IACD;;CAGP,GACD;CACE,MAAM,GAAG,cAAc,QAAQ;CAE/B,SAAS;CAET,gBAAgB,EAAE,QAAQ,EAAE,EAAE;CAC9B,aAAa,WAAW,EAAE,QAAQ,MAAM,QAAQ;CAChD,QAAQ,gBAAqB,iBAAsC;EACjE,MAAM,QAAQ;GACZ,GAAG;GACH,GAAG;GACJ;AACD,MAAI;GAKF,MAAM,eADY,OAAO,OAAO,MAAM,OAAO,CAE1C,MACE,GAAG,OACD,EAAE,MAAM,MAAM,IAAI,WAAW,aAAa,MAC1C,EAAE,MAAM,MAAM,IAAI,WAAW,aAAa,GAC9C,CACA,MAAM,GARe,IAQI;GAC5B,MAAM,UAAU,IAAI,IAAI,aAAa,KAAK,MAAM,EAAE,MAAM,GAAG,CAAC;AAC5D,QAAK,MAAM,MAAM,OAAO,KAAK,MAAM,OAAO,CACxC,KAAI,CAAC,QAAQ,IAAI,GAAG,CAClB,QAAO,MAAM,OAAO;WAGjB,OAAO;AACd,WAAQ,MAAM,MAAM;;AAEtB,SAAO;;CAEV,CACF,CACF"}