npm - @lifi/widget - Versions diffs - 0.0.0-preview-6cc63bac → 0.0.0-preview-fe8dc5e6 - Mend

@lifi/widget 0.0.0-preview-6cc63bac → 0.0.0-preview-fe8dc5e6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (312) hide show

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

	@@ -1 +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: `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,MACF,~~GAAG~~,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,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;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}
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: `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,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,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;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}

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

@@ -30,6 +30,9 @@ const NavigationTab = styled(Tab$1, {
 	name: "MuiNavigationTab",
 	slot: "root"
 })(({ theme }) => ({
+	flex: "none",
+	whiteSpace: "nowrap",
+	minWidth: "auto",
 	minHeight: theme.spacing(5),
 	maxHeight: theme.spacing(5)
 }));

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

	@@ -1 +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: `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;AACR,CAAC,~~GAAG~~,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,CAAC;CAC1B,WAAW,MAAM,QAAQ,CAAC;CAC1B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;EACA,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;CACZ;EACC,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,mBAChF,CAAC;CACH;AACF,EAAE;AAEJ,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;AACR,CACF,~~GAAG~~,EAAE,aAAa;CAChB,WAAW,MAAM,QAAQ,CAAC;CAC1B,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE"}
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: `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 flex: 'none',\n whiteSpace: 'nowrap',\n minWidth: 'auto',\n minHeight: theme.spacing(5),\n maxHeight: theme.spacing(5),\n}))\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,MAAM;CACX,MAAM;CACN,MAAM;AACR,CAAC,CAAC,EAAE,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,CAAC;CAC1B,WAAW,MAAM,QAAQ,CAAC;CAC1B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;EACA,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;CACZ;EACC,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,mBAChF,CAAC;CACH;AACF,EAAE;AAEJ,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;AACR,CACF,CAAC,EAAE,EAAE,aAAa;CAChB,MAAM;CACN,YAAY;CACZ,UAAU;CACV,WAAW,MAAM,QAAQ,CAAC;CAC1B,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE"}

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

	@@ -1 +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: `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,IAAO,~~GAAG~~,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAGED,CACF,~~GAAG~~,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,~~GAAa~~,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,aACnC;AACF,EAAE"}
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: `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,IAAO,CAAC,EAAE,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAGED,CACF,CAAC,EAAE,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,CAAC,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,aACnC;AACF,EAAE"}

package/dist/esm/components/Timer/StepStatusTimer.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepStatusTimer.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Timer/StepStatusTimer.style.tsx"],"sourcesContent":["import {\n Box,\n circularProgressClasses,\n keyframes,\n CircularProgress as MuiCircularProgress,\n styled,\n Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\n\nexport const StatusCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)({\n position: 'absolute',\n inset: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nexport const RingContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)({\n position: 'relative',\n width: iconCircleSize,\n height: iconCircleSize,\n})\n\nexport const ProgressTrack: React.FC<\n React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n left: 0,\n color: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.grey[800],\n }),\n}))\n\nexport const ProgressFill: React.FC<\n React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n left: 0,\n color: theme.vars.palette.primary.main,\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.primary.light,\n }),\n}))\n\nexport const TimerLabel: React.FC<React.ComponentProps<typeof Typography>> =\n styled(Typography)({\n fontSize: 18,\n fontWeight: 700,\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 top: 0;\n left: 0;\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,MAAa,eAA2D,OACtE,GACF,~~EAAE~~;CACA,UAAU;CACV,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,MAAa,gBAA4D,OACvE,GACF,~~EAAE~~;CACA,UAAU;CACV,OAAA;CACA,QAAA;AACF,CAAC;AAED,MAAa,gBAET,OAAOA,gBAAmB,~~GAAG~~,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE;AAEF,MAAa,eAET,OAAOA,gBAAmB,~~GAAG~~,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,QAAQ;CAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,~~EAAE~~;CACjB,UAAU;CACV,YAAY;AACd,CAAC;AAEH,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,gBAAmB,CAAC;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC,EAAE;;;;;KAKF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}
1	+ {"version":3,"file":"StepStatusTimer.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Timer/StepStatusTimer.style.tsx"],"sourcesContent":["import {\n Box,\n circularProgressClasses,\n keyframes,\n CircularProgress as MuiCircularProgress,\n styled,\n Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\n\nexport const StatusCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)({\n position: 'absolute',\n inset: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nexport const RingContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n Box\n)({\n position: 'relative',\n width: iconCircleSize,\n height: iconCircleSize,\n})\n\nexport const ProgressTrack: React.FC<\n React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n left: 0,\n color: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.grey[800],\n }),\n}))\n\nexport const ProgressFill: React.FC<\n React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n left: 0,\n color: theme.vars.palette.primary.main,\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.primary.light,\n }),\n}))\n\nexport const TimerLabel: React.FC<React.ComponentProps<typeof Typography>> =\n styled(Typography)({\n fontSize: 18,\n fontWeight: 700,\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 top: 0;\n left: 0;\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,MAAa,eAA2D,OACtE,GACF,CAAC,CAAC;CACA,UAAU;CACV,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,MAAa,gBAA4D,OACvE,GACF,CAAC,CAAC;CACA,UAAU;CACV,OAAA;CACA,QAAA;AACF,CAAC;AAED,MAAa,gBAET,OAAOA,gBAAmB,CAAC,EAAE,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE;AAEF,MAAa,eAET,OAAOA,gBAAmB,CAAC,EAAE,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,QAAQ;CAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,CAAC,CAAC;CACjB,UAAU;CACV,YAAY;AACd,CAAC;AAEH,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,gBAAmB,CAAC;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC,EAAE;;;;;KAKF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}

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

	@@ -1 +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: `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,GAAG,~~SAAS~~;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;AACV,EAAE;AAEF,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,KAAK,~~EAAE~~,SAAS,IAAI,EAC7D,CAAC,~~GAAsB~~,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,oBACjE;CACF,CACF;AACF,EAAE;AAEsE,OACtE,GACF,~~GAAG~~,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,KACvC,CAAC;AACH,EAAE"}
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: `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,GAAG,CAAC,QAAQ;CACrB,SAAS;CACT,YAAY;CACZ,UAAU;CACV,MAAM;CACN,QAAQ;AACV,EAAE;AAEF,MAAa,gBAET,OAAO,YAAY,EACrB,oBAAoB,SAAiB,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,EAC7D,CAAC,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,oBACjE;CACF,CACF;AACF,EAAE;AAEsE,OACtE,GACF,CAAC,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,KACvC,CAAC;AACH,EAAE"}

package/dist/esm/components/TokenList/PinTokenButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PinTokenButton.js","names":[],"sources":["../../../../src/components/TokenList/PinTokenButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'\n\ninterface PinTokenButtonProps {\n chainId: number\n tokenAddress: string\n}\n\nexport const PinTokenButton = ({\n chainId,\n tokenAddress,\n}: PinTokenButtonProps): JSX.Element => {\n const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [\n state.pinnedTokens,\n state.pinToken,\n state.unpinToken,\n ])\n\n const isPinned =\n pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false\n\n const handleClick = (e: React.MouseEvent) => {\n e.stopPropagation()\n ;(e.currentTarget as HTMLElement).blur()\n if (isPinned) {\n unpinToken(chainId, tokenAddress)\n } else {\n pinToken(chainId, tokenAddress)\n }\n }\n\n const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n\n return (\n <IconButton\n sx={{ width: 20, height: 20 }}\n size=\"small\"\n onClick={handleClick}\n >\n <PinIcon\n sx={{\n fontSize: 12,\n color: isPinned ? 'text.primary' : 'text.secondary',\n }}\n />\n </IconButton>\n )\n}\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,SACA,mBACsC;CACtC,MAAM,CAAC,cAAc,UAAU,cAAc,sBAAsB,UAAU;EAC3E,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CAED,MAAM,WACJ,aAAa,~~UAAU~~,SAAS,aAAa,YAAY,CAAC,KAAK;CAEjE,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,IAAI,UACF,WAAW,SAAS,YAAY;OAEhC,SAAS,SAAS,YAAY;CAElC;CAIA,OACE,oBAAC,YAAD;EACE,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;YAET,oBARY,WAAW,cAAc,qBAQrC,EACE,IAAI;GACF,UAAU;GACV,OAAO,WAAW,iBAAiB;EACrC,EACD,CAAA;CACS,CAAA;AAEhB"}
1	+ {"version":3,"file":"PinTokenButton.js","names":[],"sources":["../../../../src/components/TokenList/PinTokenButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { usePinnedTokensStore } from '../../stores/pinnedTokens/PinnedTokensStore.js'\n\ninterface PinTokenButtonProps {\n chainId: number\n tokenAddress: string\n}\n\nexport const PinTokenButton = ({\n chainId,\n tokenAddress,\n}: PinTokenButtonProps): JSX.Element => {\n const [pinnedTokens, pinToken, unpinToken] = usePinnedTokensStore((state) => [\n state.pinnedTokens,\n state.pinToken,\n state.unpinToken,\n ])\n\n const isPinned =\n pinnedTokens[chainId]?.includes(tokenAddress.toLowerCase()) ?? false\n\n const handleClick = (e: React.MouseEvent) => {\n e.stopPropagation()\n ;(e.currentTarget as HTMLElement).blur()\n if (isPinned) {\n unpinToken(chainId, tokenAddress)\n } else {\n pinToken(chainId, tokenAddress)\n }\n }\n\n const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n\n return (\n <IconButton\n sx={{ width: 20, height: 20 }}\n size=\"small\"\n onClick={handleClick}\n >\n <PinIcon\n sx={{\n fontSize: 12,\n color: isPinned ? 'text.primary' : 'text.secondary',\n }}\n />\n </IconButton>\n )\n}\n"],"mappings":";;;;;;AAWA,MAAa,kBAAkB,EAC7B,SACA,mBACsC;CACtC,MAAM,CAAC,cAAc,UAAU,cAAc,sBAAsB,UAAU;EAC3E,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CAED,MAAM,WACJ,aAAa,QAAQ,EAAE,SAAS,aAAa,YAAY,CAAC,KAAK;CAEjE,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,IAAI,UACF,WAAW,SAAS,YAAY;OAEhC,SAAS,SAAS,YAAY;CAElC;CAIA,OACE,oBAAC,YAAD;EACE,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;YAET,oBARY,WAAW,cAAc,qBAQrC,EACE,IAAI;GACF,UAAU;GACV,OAAO,WAAW,iBAAiB;EACrC,EACD,CAAA;CACS,CAAA;AAEhB"}

package/dist/esm/components/TokenList/TokenDetailsSheet.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { TokenDetailsSheetContent } from "./TokenDetailsSheetContent.js";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { useImperativeHandle, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/TokenList/TokenDetailsSheet.tsx
-const TokenDetailsSheet = forwardRef((_, ref) => {
+const TokenDetailsSheet = ({ ref }) => {
 	const bottomSheetRef = useRef(null);
 	const [tokenAddress, setTokenAddress] = useState(void 0);
 	const [chainId, setChainId] = useState(void 0);
@@ -24,13 +24,13 @@ const TokenDetailsSheet = forwardRef((_, ref) => {
 		ref: bottomSheetRef,
 		keepMounted: true,
 		children: /* @__PURE__ */ jsx(TokenDetailsSheetContent, {
-			ref,
+			onClose: () => bottomSheetRef.current?.close(),
 			tokenAddress,
 			withoutContractAddress,
 			chainId
 		})
 	});
-});
+};
 //#endregion
 export { TokenDetailsSheet };

package/dist/esm/components/TokenList/TokenDetailsSheet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type ~~React~~ from 'react'\nimport { ~~forwardRef,~~ useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet: ~~React.ForwardRefExoticComponent<\~~n ~~React.RefAttributes~~<TokenDetailsSheetBase>\n> = ~~forwardRef<TokenDetailsSheetBase>((_, ref)~~ => {\n const bottomSheetRef = useRef<BottomSheetBase>(null)\n const [tokenAddress, setTokenAddress] = useState<string \| undefined>(\n undefined\n )\n const [chainId, setChainId] = useState<number \| undefined>(undefined)\n const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => bottomSheetRef.current?.isOpen(),\n open: (address: string, noContractAddress: boolean, chainId: number) => {\n setTokenAddress(address)\n setWithoutContractAddress(noContractAddress)\n setChainId(chainId)\n bottomSheetRef.current?.open()\n },\n close: () => {\n bottomSheetRef.current?.close()\n },\n }),\n []\n )\n\n return (\n <BottomSheet ref={bottomSheetRef} keepMounted>\n <TokenDetailsSheetContent\n ~~ref~~={~~ref~~}\n tokenAddress={tokenAddress}\n withoutContractAddress={withoutContractAddress}\n chainId={chainId}\n />\n </BottomSheet>\n )\n})\n"],"mappings":";;;;;AAOA,MAAa,~~oBAET~~,~~YAAmC~~,~~GAAG,QAAQ~~;~~CAChD~~,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;YAChC,oBAAC,0BAAD;~~GACO~~;~~GACS~~;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB~~,CAAC~~"}
1	+ {"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n ref,\n}: {\n ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n const bottomSheetRef = useRef<BottomSheetBase>(null)\n const [tokenAddress, setTokenAddress] = useState<string \| undefined>(\n undefined\n )\n const [chainId, setChainId] = useState<number \| undefined>(undefined)\n const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n useImperativeHandle(\n ref,\n () => ({\n isOpen: () => bottomSheetRef.current?.isOpen(),\n open: (address: string, noContractAddress: boolean, chainId: number) => {\n setTokenAddress(address)\n setWithoutContractAddress(noContractAddress)\n setChainId(chainId)\n bottomSheetRef.current?.open()\n },\n close: () => {\n bottomSheetRef.current?.close()\n },\n }),\n []\n )\n\n return (\n <BottomSheet ref={bottomSheetRef} keepMounted>\n <TokenDetailsSheetContent\n onClose={() => bottomSheetRef.current?.close()}\n tokenAddress={tokenAddress}\n withoutContractAddress={withoutContractAddress}\n chainId={chainId}\n />\n </BottomSheet>\n )\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;YAChC,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;GAC/B;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB"}

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { TokenAvatar } from "../Avatar/TokenAvatar.js";
 import { shortenAddress } from "../../utils/wallet.js";
 import { useExplorer } from "../../hooks/useExplorer.js";
 import { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader } from "./TokenDetailsSheetContent.style.js";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { Box, IconButton, Link, Skeleton, Typography } from "@mui/material";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
@@ -14,7 +14,7 @@ import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
 import Close from "@mui/icons-material/Close";
 //#region src/components/TokenList/TokenDetailsSheetContent.tsx
 const noDataLabel = "-";
-const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
+const TokenDetailsSheetContent = ({ tokenAddress, chainId, withoutContractAddress, onClose }) => {
 	const { t } = useTranslation();
 	const { getAddressLink } = useExplorer();
 	const { getChainById } = useAvailableChains();
@@ -60,7 +60,7 @@ const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutCon
 		}), /* @__PURE__ */ jsx(IconButton, {
 			onClick: (e) => {
 				e.stopPropagation();
-				if (ref && typeof ref !== "function") ref.current?.close();
+				onClose();
 			},
 			sx: {
 				mt: "-8px",
@@ -163,7 +163,7 @@ const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutCon
 			})
 		})
 	] });
-});
+};
 const MetricWithSkeleton = ({ label, width, height, isLoading, children }) => {
 	return /* @__PURE__ */ jsxs(MetricContainer, { children: [/* @__PURE__ */ jsx(Label, { children: label }), isLoading ? /* @__PURE__ */ jsx(Skeleton, {
 		variant: "rounded",

package/dist/esm/components/TokenList/TokenDetailsSheetContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { forwardRef, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n Label,\n MetricContainer,\n TokenDetailsSheetContainer,\n TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\ninterface TokenDetailsSheetContentProps {\n tokenAddress: string \| undefined\n chainId: number \| undefined\n withoutContractAddress: boolean\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent: React.ForwardRefExoticComponent<\n TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>\n> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(\n ({ tokenAddress, chainId, withoutContractAddress }, ref) => {\n const { t } = useTranslation()\n const { getAddressLink } = useExplorer()\n const { getChainById } = useAvailableChains()\n\n const { token, isLoading } = useToken(chainId, tokenAddress, true)\n const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n const copyContractAddress = async (e: React.MouseEvent) => {\n e.stopPropagation()\n try {\n // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n await navigator.clipboard.writeText(tokenAddress \|\| '')\n } catch {\n // Silently fail to avoid crashing the UI if clipboard write fails\n }\n }\n\n return (\n <TokenDetailsSheetContainer>\n <TokenDetailsSheetHeader>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 3,\n }}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n tokenAvatarSize={72}\n chainAvatarSize={28}\n isLoading={isLoading}\n />\n <MetricContainer>\n {isLoading ? (\n <>\n <Skeleton variant=\"rounded\" width={80} height={24} />\n <Skeleton variant=\"rounded\" width={80} height={16} />\n </>\n ) : (\n <>\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '24px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.symbol \|\| noDataLabel}\n </Typography>\n <Label>{token?.name \|\| noDataLabel}</Label>\n </>\n )}\n </MetricContainer>\n </Box>\n <IconButton\n onClick={(e) => {\n e.stopPropagation()\n if (ref && typeof ref !== 'function') {\n ref.current?.close()\n }\n }}\n sx={{ mt: '-8px', mr: '-8px' }}\n >\n <Close />\n </IconButton>\n </TokenDetailsSheetHeader>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.currentPrice')}\n width={200}\n height={40}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '32px',\n lineHeight: '40px',\n color: 'text.primary',\n }}\n >\n {token?.priceUSD\n ? t('format.currency', {\n value: token.priceUSD,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n {!withoutContractAddress && (\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.contractAddress')}\n width={200}\n height={24}\n >\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 1,\n }}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {shortenAddress(tokenAddress)}\n </Typography>\n {tokenAddress && (\n <CardIconButton size=\"small\" onClick={copyContractAddress}>\n <ContentCopyRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n {tokenAddress && (\n <CardIconButton\n size=\"small\"\n LinkComponent={Link}\n href={getAddressLink(tokenAddress, chainId)}\n target=\"_blank\"\n rel=\"nofollow noreferrer\"\n onClick={(e) => e.stopPropagation()}\n >\n <OpenInNewRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n </Box>\n </MetricWithSkeleton>\n )}\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.marketCap')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.marketCapUSD\n ? t('format.currency', {\n value: token.marketCapUSD,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.volume24h')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.volumeUSD24H\n ? t('format.currency', {\n value: token.volumeUSD24H,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n </TokenDetailsSheetContainer>\n )\n }\n)\n\ninterface MetricWithSkeletonProps {\n label: string\n isLoading: boolean\n width: number\n height: number\n}\n\nconst MetricWithSkeleton = ({\n label,\n width,\n height,\n isLoading,\n children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n return (\n <MetricContainer>\n <Label>{label}</Label>\n {isLoading ? (\n <Skeleton variant=\"rounded\" width={width} height={height} />\n ) : (\n children\n )}\n </MetricContainer>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n Label,\n MetricContainer,\n TokenDetailsSheetContainer,\n TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\n\ninterface TokenDetailsSheetContentProps {\n tokenAddress: string \| undefined\n chainId: number \| undefined\n withoutContractAddress: boolean\n onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n tokenAddress,\n chainId,\n withoutContractAddress,\n onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\n const { t } = useTranslation()\n const { getAddressLink } = useExplorer()\n const { getChainById } = useAvailableChains()\n\n const { token, isLoading } = useToken(chainId, tokenAddress, true)\n const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n const copyContractAddress = async (e: React.MouseEvent) => {\n e.stopPropagation()\n try {\n // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n await navigator.clipboard.writeText(tokenAddress \|\| '')\n } catch {\n // Silently fail to avoid crashing the UI if clipboard write fails\n }\n }\n\n return (\n <TokenDetailsSheetContainer>\n <TokenDetailsSheetHeader>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 3,\n }}\n >\n <TokenAvatar\n token={token}\n chain={chain}\n tokenAvatarSize={72}\n chainAvatarSize={28}\n isLoading={isLoading}\n />\n <MetricContainer>\n {isLoading ? (\n <>\n <Skeleton variant=\"rounded\" width={80} height={24} />\n <Skeleton variant=\"rounded\" width={80} height={16} />\n </>\n ) : (\n <>\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '24px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.symbol \|\| noDataLabel}\n </Typography>\n <Label>{token?.name \|\| noDataLabel}</Label>\n </>\n )}\n </MetricContainer>\n </Box>\n <IconButton\n onClick={(e) => {\n e.stopPropagation()\n onClose()\n }}\n sx={{ mt: '-8px', mr: '-8px' }}\n >\n <Close />\n </IconButton>\n </TokenDetailsSheetHeader>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.currentPrice')}\n width={200}\n height={40}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '32px',\n lineHeight: '40px',\n color: 'text.primary',\n }}\n >\n {token?.priceUSD\n ? t('format.currency', {\n value: token.priceUSD,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n {!withoutContractAddress && (\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.contractAddress')}\n width={200}\n height={24}\n >\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n gap: 1,\n }}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {shortenAddress(tokenAddress)}\n </Typography>\n {tokenAddress && (\n <CardIconButton size=\"small\" onClick={copyContractAddress}>\n <ContentCopyRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n {tokenAddress && (\n <CardIconButton\n size=\"small\"\n LinkComponent={Link}\n href={getAddressLink(tokenAddress, chainId)}\n target=\"_blank\"\n rel=\"nofollow noreferrer\"\n onClick={(e) => e.stopPropagation()}\n >\n <OpenInNewRounded fontSize=\"inherit\" />\n </CardIconButton>\n )}\n </Box>\n </MetricWithSkeleton>\n )}\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.marketCap')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.marketCapUSD\n ? t('format.currency', {\n value: token.marketCapUSD,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n <MetricWithSkeleton\n isLoading={isLoading}\n label={t('tokenMetric.volume24h')}\n width={200}\n height={24}\n >\n <Typography\n sx={{\n fontWeight: 700,\n fontSize: '18px',\n lineHeight: '24px',\n color: 'text.primary',\n }}\n >\n {token?.volumeUSD24H\n ? t('format.currency', {\n value: token.volumeUSD24H,\n notation: 'compact',\n compactDisplay: 'short',\n maximumFractionDigits: 2,\n })\n : noDataLabel}\n </Typography>\n </MetricWithSkeleton>\n </TokenDetailsSheetContainer>\n )\n}\n\ninterface MetricWithSkeletonProps {\n label: string\n isLoading: boolean\n width: number\n height: number\n}\n\nconst MetricWithSkeleton = ({\n label,\n width,\n height,\n isLoading,\n children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n return (\n <MetricContainer>\n <Label>{label}</Label>\n {isLoading ? (\n <Skeleton variant=\"rounded\" width={width} height={height} />\n ) : (\n children\n )}\n </MetricContainer>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenDetailsSheetContent.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenDetailsSheetContent.style.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport type { PageContainerProps } from '../PageContainer.js'\nimport { PageContainer } from '../PageContainer.js'\n\nexport const TokenDetailsSheetContainer: React.FC<\n React.ComponentProps<typeof PageContainer> & PageContainerProps\n> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(2),\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n}))\n\nexport const TokenDetailsSheetHeader: React.FC<\n React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n justifyContent: 'space-between',\n gap: theme.spacing(2),\n}))\n\nexport const Label: React.FC<React.ComponentProps<typeof Typography>> = styled(\n Typography\n)(({ theme }) => ({\n fontWeight: 500,\n fontSize: '12px',\n lineHeight: '16px',\n color: theme.vars.palette.text.secondary,\n}))\n\nexport const MetricContainer: React.FC<React.ComponentProps<typeof Box>> =\n styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n }))\n"],"mappings":";;;AAKA,MAAa,6BAET,OAAO,aAAa,~~GAAuB~~,EAAE,aAAa;CAC5D,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY,MAAM,QAAQ,CAAC;CAC3B,eAAe,MAAM,QAAQ,CAAC;AAChC,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,~~GAAG~~,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,QAA2D,OACtE,UACF,~~GAAG~~,EAAE,aAAa;CAChB,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,~~GAAG~~,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE"}
1	+ {"version":3,"file":"TokenDetailsSheetContent.style.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport type { PageContainerProps } from '../PageContainer.js'\nimport { PageContainer } from '../PageContainer.js'\n\nexport const TokenDetailsSheetContainer: React.FC<\n React.ComponentProps<typeof PageContainer> & PageContainerProps\n> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(2),\n paddingTop: theme.spacing(3),\n paddingBottom: theme.spacing(3),\n}))\n\nexport const TokenDetailsSheetHeader: React.FC<\n React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n justifyContent: 'space-between',\n gap: theme.spacing(2),\n}))\n\nexport const Label: React.FC<React.ComponentProps<typeof Typography>> = styled(\n Typography\n)(({ theme }) => ({\n fontWeight: 500,\n fontSize: '12px',\n lineHeight: '16px',\n color: theme.vars.palette.text.secondary,\n}))\n\nexport const MetricContainer: React.FC<React.ComponentProps<typeof Box>> =\n styled(Box)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(1),\n }))\n"],"mappings":";;;AAKA,MAAa,6BAET,OAAO,aAAa,CAAC,EAAsB,EAAE,aAAa;CAC5D,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY,MAAM,QAAQ,CAAC;CAC3B,eAAe,MAAM,QAAQ,CAAC;AAChC,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,QAA2D,OACtE,UACF,CAAC,EAAE,EAAE,aAAa;CAChB,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE"}

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

	@@ -1 +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: `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,UAAY,~~SAAS~~;CAC9B,UAAU;CACV,KAAK;CACL,MAAM;AACR,EAAE;AAEF,MAAaC,SAET,OAAOC,IAAO,~~GAAG~~,EAAE,aAAa;CAClC,QAAQ;CACR,YAAY,MAAM,QAAQ,GAAG;CAC7B,aAAa,MAAM,QAAQ,GAAG;AAChC,EAAE;AAEF,MAAaC,eAET,OAAOC,UAAa,~~GAAgC~~,EAAE,aAAa;CACrE,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,SAAS,MAAM,QAAQ,MAAO,IAAK;CACnC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAI;CACnC,OAAO;CACP,iBAAiB;CACjB,UAAU;CACV,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,KAAK,EACH,UAAU,GACZ;AACF,EAAE"}
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: `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,UAAY,CAAC,QAAQ;CAC9B,UAAU;CACV,KAAK;CACL,MAAM;AACR,EAAE;AAEF,MAAaC,SAET,OAAOC,IAAO,CAAC,EAAE,EAAE,aAAa;CAClC,QAAQ;CACR,YAAY,MAAM,QAAQ,GAAG;CAC7B,aAAa,MAAM,QAAQ,GAAG;AAChC,EAAE;AAEF,MAAaC,eAET,OAAOC,UAAa,CAAC,EAA+B,EAAE,aAAa;CACrE,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,SAAS,MAAM,QAAQ,MAAO,IAAK;CACnC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAI;CACnC,OAAO;CACP,iBAAiB;CACjB,UAAU;CACV,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,KAAK,EACH,UAAU,GACZ;AACF,EAAE"}

package/dist/esm/components/TokenList/TokenListItem.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { memo, useMemo, useRef, useState } from "react";
 import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Slide, Tooltip, Typography, listItemSecondaryActionClasses } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 //#region src/components/TokenList/TokenListItem.tsx
 const TokenListItem = memo(({ onClick, size, start, token, chain, isBalanceLoading, startAdornment, endAdornment, selected, onShowTokenDetails }) => {
@@ -53,7 +53,7 @@ const OpenTokenDetailsButton = ({ tokenAddress, withoutContractAddress, chainId,
 			e.currentTarget.blur();
 			onClick(tokenAddress, withoutContractAddress, chainId);
 		},
-		children: /* @__PURE__ */ jsx(InfoOutlinedIcon, {})
+		children: /* @__PURE__ */ jsx(InfoOutlined, {})
 	});
 };
 const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, selected, onShowTokenDetails }) => {

package/dist/esm/components/TokenList/TokenListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n Avatar,\n Box,\n ListItemAvatar,\n ListItemText,\n listItemSecondaryActionClasses,\n Skeleton,\n Slide,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n TokenListItemAvatarProps,\n TokenListItemButtonProps,\n TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n ({\n onClick,\n size,\n start,\n token,\n chain,\n isBalanceLoading,\n startAdornment,\n endAdornment,\n selected,\n onShowTokenDetails,\n }) => {\n return (\n <ListItem\n style={{\n height: `${size}px`,\n transform: `translateY(${start}px)`,\n padding: 0,\n }}\n >\n {startAdornment}\n <TokenListItemButton\n token={token}\n isBalanceLoading={isBalanceLoading}\n onClick={onClick}\n chain={chain}\n selected={selected}\n onShowTokenDetails={onShowTokenDetails}\n />\n {endAdornment}\n </ListItem>\n )\n }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n const [isImageLoading, setIsImageLoading] = useState(true)\n\n return (\n <Avatar\n src={token.logoURI}\n alt={token.symbol}\n sx={(theme) =>\n isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n }\n onLoad={() => setIsImageLoading(false)}\n >\n {token.symbol?.[0]}\n </Avatar>\n )\n})\n\ninterface OpenTokenDetailsButtonProps {\n tokenAddress: string \| undefined\n withoutContractAddress: boolean\n chainId: number\n onClick: (\n tokenAddress: string,\n withoutContractAddress: boolean,\n chainId: number\n ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n tokenAddress,\n withoutContractAddress,\n chainId,\n onClick,\n}: OpenTokenDetailsButtonProps) => {\n if (!tokenAddress) {\n return null\n }\n return (\n <IconButton\n size=\"small\"\n onClick={(e) => {\n e.stopPropagation()\n e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n onClick(tokenAddress, withoutContractAddress, chainId)\n }}\n >\n <InfoOutlinedIcon />\n </IconButton>\n )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n ({\n onClick,\n token,\n chain,\n isBalanceLoading,\n selected,\n onShowTokenDetails,\n }) => {\n const { t } = useTranslation()\n const container = useRef(null)\n const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n const [showAddress, setShowAddress] = useState(false)\n\n const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n const onMouseEnter = () => {\n timeoutId.current = setTimeout(() => {\n if (token.address) {\n setShowAddress(true)\n }\n }, 350)\n }\n\n const onMouseLeave = () => {\n clearTimeout(timeoutId.current)\n if (showAddress) {\n setShowAddress(false)\n }\n }\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n e.stopPropagation()\n onClick?.(token.address, token.chainId)\n }\n\n const tokenAmount = useMemo(\n () => formatTokenAmount(token.amount, token.decimals),\n [token.amount, token.decimals]\n )\n\n const tokenPrice = useMemo(\n () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n [token.amount, token.priceUSD, token.decimals]\n )\n\n const longPressEvents = useLongPress(() =>\n onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n )\n\n return (\n <ListItemButton\n onClick={handleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n {...longPressEvents}\n dense\n selected={selected}\n sx={{\n height: 60,\n marginBottom: '4px',\n }}\n >\n <ListItemAvatar>\n {chain ? (\n <TokenAvatar\n token={token as StaticToken}\n chain={chain}\n tokenAvatarSize={40}\n chainAvatarSize={16}\n />\n ) : (\n <TokenListItemAvatar token={token} />\n )}\n </ListItemAvatar>\n <ListItemText\n primary={\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n {token.symbol}\n {!token.verified && (\n <Tooltip\n title={t('warning.message.unverifiedToken')}\n placement=\"top\"\n arrow\n >\n <WarningRounded\n sx={{\n display: 'flex',\n fontSize: 16,\n color: 'warning.main',\n cursor: 'help',\n }}\n />\n </Tooltip>\n )}\n </Box>\n }\n slotProps={{\n secondary: {\n component: 'div',\n },\n }}\n secondary={\n withoutContractAddress ? (\n <Box\n ref={container}\n sx={{\n height: 20,\n display: 'flex',\n }}\n >\n <Box\n sx={{\n pt: 0.25,\n }}\n >\n {token.name}\n </Box>\n <Box\n sx={{\n position: 'relative',\n }}\n >\n <Slide\n direction=\"up\"\n in={showAddress}\n container={container.current}\n style={{\n position: 'absolute',\n }}\n appear={false}\n mountOnEnter\n >\n <Box>\n <OpenTokenDetailsButton\n tokenAddress={token.address}\n withoutContractAddress={withoutContractAddress}\n chainId={token.chainId}\n onClick={onShowTokenDetails}\n />\n <PinTokenButton\n chainId={token.chainId}\n tokenAddress={token.address}\n />\n </Box>\n </Slide>\n </Box>\n </Box>\n ) : (\n <Box\n ref={container}\n sx={{\n position: 'relative',\n height: 20,\n }}\n >\n <Slide\n direction=\"down\"\n in={!showAddress}\n container={container.current}\n style={{\n position: 'absolute',\n }}\n appear={false}\n >\n <Box\n sx={{\n pt: 0.25,\n }}\n >\n {token.name}\n </Box>\n </Slide>\n <Slide\n direction=\"up\"\n in={showAddress}\n container={container.current}\n style={{\n position: 'absolute',\n }}\n appear={false}\n mountOnEnter\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 0.5,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n pt: 0.125,\n }}\n >\n {shortenAddress(token.address)}\n </Box>\n <Box>\n <OpenTokenDetailsButton\n tokenAddress={token.address}\n withoutContractAddress={withoutContractAddress}\n chainId={token.chainId}\n onClick={onShowTokenDetails}\n />\n <PinTokenButton\n chainId={token.chainId}\n tokenAddress={token.address}\n />\n </Box>\n </Box>\n </Slide>\n </Box>\n )\n }\n />\n {isBalanceLoading ? (\n <TokenAmountSkeleton />\n ) : (\n <Box sx={{ textAlign: 'right' }}>\n {token.amount ? (\n <Typography\n noWrap\n sx={{\n fontWeight: 600,\n }}\n title={tokenAmount}\n >\n {t('format.tokenAmount', {\n value: tokenAmount,\n })}\n </Typography>\n ) : null}\n {token.amount && token.priceUSD ? (\n <Typography\n data-price={token.priceUSD}\n sx={{\n fontWeight: 500,\n fontSize: 12,\n color: 'text.secondary',\n }}\n >\n {t('format.currency', {\n value: tokenPrice,\n })}\n </Typography>\n ) : null}\n </Box>\n )}\n </ListItemButton>\n )\n }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n return (\n <ListItem\n secondaryAction={<TokenAmountSkeleton />}\n disablePadding\n sx={(theme) => ({\n position: 'relative',\n flexDirection: 'row',\n alignItems: 'center',\n padding: 0,\n [`& .${listItemSecondaryActionClasses.root}`]: {\n right: theme.spacing(1.5),\n },\n })}\n >\n <ListItemAvatar>\n <Skeleton\n variant=\"circular\"\n width={40}\n height={40}\n sx={{ marginLeft: 1.5, marginRight: 2 }}\n />\n </ListItemAvatar>\n <ListItemText\n primary={<Skeleton variant=\"text\" width={56} height={24} />}\n secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n />\n </ListItem>\n )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n return (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-end',\n }}\n >\n <Skeleton variant=\"text\" width={56} height={24} />\n <Skeleton variant=\"text\" width={48} height={16} />\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","InfoOutlinedIcon","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport WarningRounded from '@mui/icons-material/WarningRounded'\nimport {\n Avatar,\n Box,\n ListItemAvatar,\n ListItemText,\n listItemSecondaryActionClasses,\n Skeleton,\n Slide,\n Tooltip,\n Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n TokenListItemAvatarProps,\n TokenListItemButtonProps,\n TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n ({\n onClick,\n size,\n start,\n token,\n chain,\n isBalanceLoading,\n startAdornment,\n endAdornment,\n selected,\n onShowTokenDetails,\n }) => {\n return (\n <ListItem\n style={{\n height: `${size}px`,\n transform: `translateY(${start}px)`,\n padding: 0,\n }}\n >\n {startAdornment}\n <TokenListItemButton\n token={token}\n isBalanceLoading={isBalanceLoading}\n onClick={onClick}\n chain={chain}\n selected={selected}\n onShowTokenDetails={onShowTokenDetails}\n />\n {endAdornment}\n </ListItem>\n )\n }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n const [isImageLoading, setIsImageLoading] = useState(true)\n\n return (\n <Avatar\n src={token.logoURI}\n alt={token.symbol}\n sx={(theme) =>\n isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n }\n onLoad={() => setIsImageLoading(false)}\n >\n {token.symbol?.[0]}\n </Avatar>\n )\n})\n\ninterface OpenTokenDetailsButtonProps {\n tokenAddress: string \| undefined\n withoutContractAddress: boolean\n chainId: number\n onClick: (\n tokenAddress: string,\n withoutContractAddress: boolean,\n chainId: number\n ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n tokenAddress,\n withoutContractAddress,\n chainId,\n onClick,\n}: OpenTokenDetailsButtonProps) => {\n if (!tokenAddress) {\n return null\n }\n return (\n <IconButton\n size=\"small\"\n onClick={(e) => {\n e.stopPropagation()\n e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n onClick(tokenAddress, withoutContractAddress, chainId)\n }}\n >\n <InfoOutlinedIcon />\n </IconButton>\n )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n ({\n onClick,\n token,\n chain,\n isBalanceLoading,\n selected,\n onShowTokenDetails,\n }) => {\n const { t } = useTranslation()\n const container = useRef(null)\n const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n const [showAddress, setShowAddress] = useState(false)\n\n const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n const onMouseEnter = () => {\n timeoutId.current = setTimeout(() => {\n if (token.address) {\n setShowAddress(true)\n }\n }, 350)\n }\n\n const onMouseLeave = () => {\n clearTimeout(timeoutId.current)\n if (showAddress) {\n setShowAddress(false)\n }\n }\n\n const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n e.stopPropagation()\n onClick?.(token.address, token.chainId)\n }\n\n const tokenAmount = useMemo(\n () => formatTokenAmount(token.amount, token.decimals),\n [token.amount, token.decimals]\n )\n\n const tokenPrice = useMemo(\n () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n [token.amount, token.priceUSD, token.decimals]\n )\n\n const longPressEvents = useLongPress(() =>\n onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n )\n\n return (\n <ListItemButton\n onClick={handleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n {...longPressEvents}\n dense\n selected={selected}\n sx={{\n height: 60,\n marginBottom: '4px',\n }}\n >\n <ListItemAvatar>\n {chain ? (\n <TokenAvatar\n token={token as StaticToken}\n chain={chain}\n tokenAvatarSize={40}\n chainAvatarSize={16}\n />\n ) : (\n <TokenListItemAvatar token={token} />\n )}\n </ListItemAvatar>\n <ListItemText\n primary={\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n {token.symbol}\n {!token.verified && (\n <Tooltip\n title={t('warning.message.unverifiedToken')}\n placement=\"top\"\n arrow\n >\n <WarningRounded\n sx={{\n display: 'flex',\n fontSize: 16,\n color: 'warning.main',\n cursor: 'help',\n }}\n />\n </Tooltip>\n )}\n </Box>\n }\n slotProps={{\n secondary: {\n component: 'div',\n },\n }}\n secondary={\n withoutContractAddress ? (\n <Box\n ref={container}\n sx={{\n height: 20,\n display: 'flex',\n }}\n >\n <Box\n sx={{\n pt: 0.25,\n }}\n >\n {token.name}\n </Box>\n <Box\n sx={{\n position: 'relative',\n }}\n >\n <Slide\n direction=\"up\"\n in={showAddress}\n container={container.current}\n style={{\n position: 'absolute',\n }}\n appear={false}\n mountOnEnter\n >\n <Box>\n <OpenTokenDetailsButton\n tokenAddress={token.address}\n withoutContractAddress={withoutContractAddress}\n chainId={token.chainId}\n onClick={onShowTokenDetails}\n />\n <PinTokenButton\n chainId={token.chainId}\n tokenAddress={token.address}\n />\n </Box>\n </Slide>\n </Box>\n </Box>\n ) : (\n <Box\n ref={container}\n sx={{\n position: 'relative',\n height: 20,\n }}\n >\n <Slide\n direction=\"down\"\n in={!showAddress}\n container={container.current}\n style={{\n position: 'absolute',\n }}\n appear={false}\n >\n <Box\n sx={{\n pt: 0.25,\n }}\n >\n {token.name}\n </Box>\n </Slide>\n <Slide\n direction=\"up\"\n in={showAddress}\n container={container.current}\n style={{\n position: 'absolute',\n }}\n appear={false}\n mountOnEnter\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 0.5,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n pt: 0.125,\n }}\n >\n {shortenAddress(token.address)}\n </Box>\n <Box>\n <OpenTokenDetailsButton\n tokenAddress={token.address}\n withoutContractAddress={withoutContractAddress}\n chainId={token.chainId}\n onClick={onShowTokenDetails}\n />\n <PinTokenButton\n chainId={token.chainId}\n tokenAddress={token.address}\n />\n </Box>\n </Box>\n </Slide>\n </Box>\n )\n }\n />\n {isBalanceLoading ? (\n <TokenAmountSkeleton />\n ) : (\n <Box sx={{ textAlign: 'right' }}>\n {token.amount ? (\n <Typography\n noWrap\n sx={{\n fontWeight: 600,\n }}\n title={tokenAmount}\n >\n {t('format.tokenAmount', {\n value: tokenAmount,\n })}\n </Typography>\n ) : null}\n {token.amount && token.priceUSD ? (\n <Typography\n data-price={token.priceUSD}\n sx={{\n fontWeight: 500,\n fontSize: 12,\n color: 'text.secondary',\n }}\n >\n {t('format.currency', {\n value: tokenPrice,\n })}\n </Typography>\n ) : null}\n </Box>\n )}\n </ListItemButton>\n )\n }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n return (\n <ListItem\n secondaryAction={<TokenAmountSkeleton />}\n disablePadding\n sx={(theme) => ({\n position: 'relative',\n flexDirection: 'row',\n alignItems: 'center',\n padding: 0,\n [`& .${listItemSecondaryActionClasses.root}`]: {\n right: theme.spacing(1.5),\n },\n })}\n >\n <ListItemAvatar>\n <Skeleton\n variant=\"circular\"\n width={40}\n height={40}\n sx={{ marginLeft: 1.5, marginRight: 2 }}\n />\n </ListItemAvatar>\n <ListItemText\n primary={<Skeleton variant=\"text\" width={56} height={24} />}\n secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n />\n </ListItem>\n )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n return (\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-end',\n }}\n >\n <Skeleton variant=\"text\" width={56} height={24} />\n <Skeleton variant=\"text\" width={48} height={16} />\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/VirtualizedTokenList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VirtualizedTokenList.js","names":["List"],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { FC } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { TokenDetailsSheet } from './TokenDetailsSheet.js'\nimport { List } from './TokenList.style.js'\nimport { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'\nimport type {\n TokenDetailsSheetBase,\n VirtualizedTokenListProps,\n} from './types.js'\n\nconst tokenItemHeight = 64 // 60 + 4px margin-bottom\n\nexport const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({\n tokens,\n scrollElementRef,\n chainId,\n selectedTokenAddress,\n isLoading,\n isBalanceLoading,\n showCategories,\n showPinnedTokens,\n onClick,\n isAllNetworks,\n}) => {\n const { t } = useTranslation()\n\n const { chains } = useAvailableChains()\n\n // Create Set for O(1) chain lookup instead of O(n) find\n const chainsSet = useMemo(() => {\n if (!chains) {\n return undefined\n }\n return new Map(chains.map((chain) => [chain.id, chain]))\n }, [chains])\n\n const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)\n\n const onShowTokenDetails = useCallback(\n (tokenAddress: string, noContractAddress: boolean, chainId: number) => {\n tokenDetailsSheetRef.current?.open(\n tokenAddress,\n noContractAddress,\n chainId\n )\n },\n []\n )\n\n const getItemKey = useCallback(\n (index: number) => {\n const token = tokens[index]\n return `${token.chainId}-${token.address}-${index}`\n },\n [tokens]\n )\n\n const estimateSize = useCallback(\n (index: number) => {\n const currentToken = tokens[index]\n const previousToken = tokens[index - 1]\n let size = tokenItemHeight\n\n // Pinned tokens (always shown, even in all networks mode)\n if (currentToken.pinned && index === 0) {\n size += 24\n }\n if (previousToken?.pinned && !currentToken.pinned) {\n size += 32\n }\n\n if (!showCategories) {\n return size\n }\n\n if (currentToken.featured && !currentToken.pinned && index === 0) {\n size += 24\n }\n\n // Category transition (excluding pinned tokens)\n const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n if (\n isNotPinned &&\n ((previousToken?.amount && !currentToken.amount) \|\|\n (previousToken?.featured && !currentToken.featured) \|\|\n (previousToken?.popular && !currentToken.popular))\n ) {\n size += 32\n }\n\n return size\n },\n [tokens, showCategories]\n )\n\n const virtualizerConfig = useMemo(\n () => ({\n count: tokens.length,\n overscan: 5,\n getScrollElement: () => scrollElementRef.current,\n estimateSize,\n getItemKey,\n paddingEnd: 8,\n }),\n [tokens.length, estimateSize, getItemKey, scrollElementRef]\n )\n\n const { getVirtualItems, getTotalSize, scrollToIndex, measure } =\n useVirtualizer(virtualizerConfig)\n\n // Address the issue of disappearing tokens on rerender\n useEffect(() => {\n if (scrollElementRef.current) {\n measure()\n }\n }, [measure, scrollElementRef.current])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes\n useEffect(() => {\n // Scroll to the top of the list when switching the chains\n if (getVirtualItems().length) {\n scrollToIndex(0, { align: 'start' })\n }\n // Close the token details sheet when switching the chains\n tokenDetailsSheetRef.current?.close()\n }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])\n\n return (\n <>\n <List\n className=\"long-list\"\n style={{ height: getTotalSize() }}\n disablePadding\n >\n {getVirtualItems().map((item) => {\n const currentToken = tokens[item.index]\n const previousToken: TokenAmount \| undefined = tokens[item.index - 1]\n const chain = chainsSet?.get(currentToken.chainId)\n\n const isNotPinned = !currentToken.pinned\n const isFirstPinnedToken = currentToken.pinned && item.index === 0\n const isTransitionFromPinned = previousToken?.pinned && isNotPinned\n\n // Category transitions (excluding pinned)\n const isTransitionFromFeatured =\n previousToken?.featured && !currentToken.featured && isNotPinned\n const isTransitionFromMyTokens =\n previousToken?.amount && !currentToken.amount && isNotPinned\n const isTransitionFromPopular =\n previousToken?.popular && !currentToken.popular && isNotPinned\n\n // Determine which category label to show\n const startAdornmentLabel = (() => {\n if (showPinnedTokens && isFirstPinnedToken) {\n return t('main.pinnedTokens')\n }\n if (showPinnedTokens && !showCategories && isTransitionFromPinned) {\n return t('main.allTokens')\n }\n if (!showCategories) {\n return null\n }\n\n if (\n (isTransitionFromPinned && currentToken.featured) \|\|\n (currentToken.featured && isNotPinned && item.index === 0)\n ) {\n return t('main.featuredTokens')\n }\n if (\n (isTransitionFromFeatured \|\| isTransitionFromPinned) &&\n currentToken.amount &&\n isNotPinned\n ) {\n return t('main.myTokens')\n }\n if (\n (isTransitionFromFeatured \|\|\n isTransitionFromMyTokens \|\|\n isTransitionFromPinned) &&\n currentToken.popular &&\n isNotPinned\n ) {\n return t('main.popularTokens')\n }\n if (\n isTransitionFromMyTokens \|\|\n isTransitionFromFeatured \|\|\n isTransitionFromPinned \|\|\n isTransitionFromPopular\n ) {\n return t('main.allTokens')\n }\n return null\n })()\n\n const isSelected =\n selectedTokenAddress === currentToken.address &&\n chainId === currentToken.chainId\n\n return (\n <TokenListItem\n key={item.key}\n onClick={onClick}\n size={item.size}\n start={item.start}\n token={currentToken}\n chain={isAllNetworks ? chain : undefined}\n selected={isSelected}\n onShowTokenDetails={onShowTokenDetails}\n isBalanceLoading={isBalanceLoading}\n startAdornment={\n startAdornmentLabel ? (\n <Typography\n sx={{\n fontSize: 14,\n fontWeight: 600,\n lineHeight: '16px',\n px: 1.5,\n pt:\n isFirstPinnedToken \|\|\n (currentToken.featured &&\n isNotPinned &&\n item.index === 0)\n ? 0\n : 1,\n pb: 1,\n }}\n >\n {startAdornmentLabel}\n </Typography>\n ) : null\n }\n />\n )\n })}\n </List>\n <TokenDetailsSheet ref={tokenDetailsSheetRef} />\n {isLoading && (\n <List disablePadding sx={{ cursor: 'default' }}>\n {Array.from({ length: 3 }).map((_, index) => (\n <TokenListItemSkeleton key={index} />\n ))}\n </List>\n )}\n </>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"VirtualizedTokenList.js","names":["List"],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { FC } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { TokenDetailsSheet } from './TokenDetailsSheet.js'\nimport { List } from './TokenList.style.js'\nimport { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'\nimport type {\n TokenDetailsSheetBase,\n VirtualizedTokenListProps,\n} from './types.js'\n\nconst tokenItemHeight = 64 // 60 + 4px margin-bottom\n\nexport const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({\n tokens,\n scrollElementRef,\n chainId,\n selectedTokenAddress,\n isLoading,\n isBalanceLoading,\n showCategories,\n showPinnedTokens,\n onClick,\n isAllNetworks,\n}) => {\n const { t } = useTranslation()\n\n const { chains } = useAvailableChains()\n\n // Create Set for O(1) chain lookup instead of O(n) find\n const chainsSet = useMemo(() => {\n if (!chains) {\n return undefined\n }\n return new Map(chains.map((chain) => [chain.id, chain]))\n }, [chains])\n\n const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)\n\n const onShowTokenDetails = useCallback(\n (tokenAddress: string, noContractAddress: boolean, chainId: number) => {\n tokenDetailsSheetRef.current?.open(\n tokenAddress,\n noContractAddress,\n chainId\n )\n },\n []\n )\n\n const getItemKey = useCallback(\n (index: number) => {\n const token = tokens[index]\n return `${token.chainId}-${token.address}-${index}`\n },\n [tokens]\n )\n\n const estimateSize = useCallback(\n (index: number) => {\n const currentToken = tokens[index]\n const previousToken = tokens[index - 1]\n let size = tokenItemHeight\n\n // Pinned tokens (always shown, even in all networks mode)\n if (currentToken.pinned && index === 0) {\n size += 24\n }\n if (previousToken?.pinned && !currentToken.pinned) {\n size += 32\n }\n\n if (!showCategories) {\n return size\n }\n\n if (currentToken.featured && !currentToken.pinned && index === 0) {\n size += 24\n }\n\n // Category transition (excluding pinned tokens)\n const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n if (\n isNotPinned &&\n ((previousToken?.amount && !currentToken.amount) \|\|\n (previousToken?.featured && !currentToken.featured) \|\|\n (previousToken?.popular && !currentToken.popular))\n ) {\n size += 32\n }\n\n return size\n },\n [tokens, showCategories]\n )\n\n const virtualizerConfig = useMemo(\n () => ({\n count: tokens.length,\n overscan: 5,\n getScrollElement: () => scrollElementRef.current,\n estimateSize,\n getItemKey,\n paddingEnd: 8,\n }),\n [tokens.length, estimateSize, getItemKey, scrollElementRef]\n )\n\n const { getVirtualItems, getTotalSize, scrollToIndex, measure } =\n useVirtualizer(virtualizerConfig)\n\n // Address the issue of disappearing tokens on rerender\n useEffect(() => {\n if (scrollElementRef.current) {\n measure()\n }\n }, [measure, scrollElementRef.current])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes\n useEffect(() => {\n // Scroll to the top of the list when switching the chains\n if (getVirtualItems().length) {\n scrollToIndex(0, { align: 'start' })\n }\n // Close the token details sheet when switching the chains\n tokenDetailsSheetRef.current?.close()\n }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])\n\n return (\n <>\n <List\n className=\"long-list\"\n style={{ height: getTotalSize() }}\n disablePadding\n >\n {getVirtualItems().map((item) => {\n const currentToken = tokens[item.index]\n const previousToken: TokenAmount \| undefined = tokens[item.index - 1]\n const chain = chainsSet?.get(currentToken.chainId)\n\n const isNotPinned = !currentToken.pinned\n const isFirstPinnedToken = currentToken.pinned && item.index === 0\n const isTransitionFromPinned = previousToken?.pinned && isNotPinned\n\n // Category transitions (excluding pinned)\n const isTransitionFromFeatured =\n previousToken?.featured && !currentToken.featured && isNotPinned\n const isTransitionFromMyTokens =\n previousToken?.amount && !currentToken.amount && isNotPinned\n const isTransitionFromPopular =\n previousToken?.popular && !currentToken.popular && isNotPinned\n\n // Determine which category label to show\n const startAdornmentLabel = (() => {\n if (showPinnedTokens && isFirstPinnedToken) {\n return t('main.pinnedTokens')\n }\n if (showPinnedTokens && !showCategories && isTransitionFromPinned) {\n return t('main.allTokens')\n }\n if (!showCategories) {\n return null\n }\n\n if (\n (isTransitionFromPinned && currentToken.featured) \|\|\n (currentToken.featured && isNotPinned && item.index === 0)\n ) {\n return t('main.featuredTokens')\n }\n if (\n (isTransitionFromFeatured \|\| isTransitionFromPinned) &&\n currentToken.amount &&\n isNotPinned\n ) {\n return t('main.myTokens')\n }\n if (\n (isTransitionFromFeatured \|\|\n isTransitionFromMyTokens \|\|\n isTransitionFromPinned) &&\n currentToken.popular &&\n isNotPinned\n ) {\n return t('main.popularTokens')\n }\n if (\n isTransitionFromMyTokens \|\|\n isTransitionFromFeatured \|\|\n isTransitionFromPinned \|\|\n isTransitionFromPopular\n ) {\n return t('main.allTokens')\n }\n return null\n })()\n\n const isSelected =\n selectedTokenAddress === currentToken.address &&\n chainId === currentToken.chainId\n\n return (\n <TokenListItem\n key={item.key}\n onClick={onClick}\n size={item.size}\n start={item.start}\n token={currentToken}\n chain={isAllNetworks ? chain : undefined}\n selected={isSelected}\n onShowTokenDetails={onShowTokenDetails}\n isBalanceLoading={isBalanceLoading}\n startAdornment={\n startAdornmentLabel ? (\n <Typography\n sx={{\n fontSize: 14,\n fontWeight: 600,\n lineHeight: '16px',\n px: 1.5,\n pt:\n isFirstPinnedToken \|\|\n (currentToken.featured &&\n isNotPinned &&\n item.index === 0)\n ? 0\n : 1,\n pb: 1,\n }}\n >\n {startAdornmentLabel}\n </Typography>\n ) : null\n }\n />\n )\n })}\n </List>\n <TokenDetailsSheet ref={tokenDetailsSheetRef} />\n {isLoading && (\n <List disablePadding sx={{ cursor: 'default' }}>\n {Array.from({ length: 3 }).map((_, index) => (\n <TokenListItemSkeleton key={index} />\n ))}\n </List>\n )}\n </>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/useTokenSelect.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
 import "../../types/events.js";
-import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
-import { useSplitModeStore } from "../../stores/settings/useSplitModeStore.js";
 import { isItemAllowed } from "../../utils/item.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useSplitMode } from "../../stores/navigationTabs/useNavigationTabsStore.js";
 import { useFieldActions } from "../../stores/form/useFieldActions.js";
 import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
@@ -11,7 +11,7 @@ import { useCallback } from "react";
 //#region src/components/TokenList/useTokenSelect.ts
 const useTokenSelect = (formType, onClick) => {
 	const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig();
-	const splitMode = useSplitModeStore((store) => store.state);
+	const splitMode = useSplitMode();
 	const emitter = useWidgetEvents();
 	const { setFieldValue, getFieldValues } = useFieldActions();
 	const autoPopulateToAddress = useToAddressAutoPopulate();

package/dist/esm/components/TokenList/useTokenSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTokenSelect.js","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { ~~useSplitModeStore~~ } from '../../stores/~~settings~~/~~useSplitModeStore~~.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { isItemAllowed } from '../../utils/item.js'\n\nexport const useTokenSelect = (\n formType: FormType,\n onClick?: () => void\n): ((tokenAddress: string, chainId?: number) => void) => {\n const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()\n const splitMode = ~~useSplitModeStore~~(~~(store~~) ~~=> store.state)~~\n const emitter = useWidgetEvents()\n const { setFieldValue, getFieldValues } = useFieldActions()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [\n state.setChain,\n state.setIsAllNetworks,\n ])\n\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n\n return useCallback(\n (tokenAddress: string, chainId?: number) => {\n setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })\n const selectedChainId =\n chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]\n // Set chain again to trigger URL builder update\n setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {\n isDirty: true,\n isTouched: true,\n })\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {\n setFieldValue(amountKey, '')\n }\n const oppositeFormType = formType === 'from' ? 'to' : 'from'\n const [\n selectedOppositeTokenAddress,\n selectedOppositeChainId,\n selectedToAddress,\n ] = getFieldValues(\n FormKeyHelper.getTokenKey(oppositeFormType),\n FormKeyHelper.getChainKey(oppositeFormType),\n 'toAddress'\n )\n\n // TODO: remove when we enable same chain/token transfers\n const isSameTokenTransfer =\n selectedOppositeTokenAddress === tokenAddress &&\n selectedOppositeChainId === selectedChainId\n\n const isBridgeToSameChain =\n mode === 'split' &&\n splitMode === 'bridge' &&\n selectedOppositeChainId === selectedChainId\n\n if ((isSameTokenTransfer \|\| isBridgeToSameChain) && mode !== 'custom') {\n setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {\n isDirty: true,\n isTouched: true,\n })\n }\n\n // If no opposite token is selected, synchronize the opposite chain\n // to match the currently selected chain (if allowed).\n // In default exchange mode, also collapse \"All Networks\" on the opposite\n // side - same-chain swap is the most common action.\n if (\n !selectedOppositeTokenAddress &&\n selectedChainId &&\n isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])\n ) {\n const isDefaultExchange = !mode \|\| mode === 'default'\n if (isDefaultExchange) {\n setIsAllNetworks(false, oppositeFormType)\n }\n setFieldValue(\n FormKeyHelper.getChainKey(oppositeFormType),\n selectedChainId,\n {\n isDirty: true,\n isTouched: true,\n }\n )\n setChain(selectedChainId, oppositeFormType)\n }\n\n // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected\n autoPopulateToAddress({\n formType,\n selectedToAddress,\n selectedChainId,\n selectedOppositeChainId,\n selectedOppositeTokenAddress,\n })\n\n const eventToEmit =\n formType === 'from'\n ? WidgetEvent.SourceChainTokenSelected\n : WidgetEvent.DestinationChainTokenSelected\n\n if (selectedChainId) {\n emitter.emit(eventToEmit, {\n chainId: selectedChainId,\n tokenAddress,\n })\n }\n\n onClick?.()\n },\n [\n autoPopulateToAddress,\n disabledUI,\n emitter,\n formType,\n getFieldValues,\n onClick,\n setChain,\n setIsAllNetworks,\n setFieldValue,\n mode,\n splitMode,\n tokenKey,\n chainsConfig,\n ]\n )\n}\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBACX,UACA,YACuD;CACvD,MAAM,EAAE,MAAM,YAAY,QAAQ,iBAAiB,gBAAgB;CACnE,MAAM,YAAY,~~mBAAmB,UAAU,MAAM,KAAK~~;~~CAC1D~~,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,wBAAwB,yBAAyB;CACvD,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,UAAU,CACjE,MAAM,UACN,MAAM,gBACR,CAAC;CAED,MAAM,WAAW,cAAc,YAAY,QAAQ;CAEnD,OAAO,aACJ,cAAsB,YAAqB;EAC1C,cAAc,UAAU,cAAc;GAAE,SAAS;GAAM,WAAW;EAAK,CAAC;EACxE,MAAM,kBACJ,WAAW,eAAe,cAAc,YAAY,QAAQ,CAAC,~~EAAE~~;EAEjE,cAAc,cAAc,YAAY,QAAQ,GAAG,iBAAiB;GAClE,SAAS;GACT,WAAW;EACb,CAAC;EACD,MAAM,YAAY,cAAc,aAAa,QAAQ;EACrD,IAAI,CAAC,aAAa,YAChB,cAAc,WAAW,EAAE;EAE7B,MAAM,mBAAmB,aAAa,SAAS,OAAO;EACtD,MAAM,CACJ,8BACA,yBACA,qBACE,eACF,cAAc,YAAY,gBAAgB,GAC1C,cAAc,YAAY,gBAAgB,GAC1C,WACF;EAYA,KARE,iCAAiC,gBACjC,4BAA4B,mBAG5B,SAAS,WACT,cAAc,YACd,4BAA4B,oBAEsB,SAAS,UAC3D,cAAc,cAAc,YAAY,gBAAgB,GAAG,IAAI;GAC7D,SAAS;GACT,WAAW;EACb,CAAC;EAOH,IACE,CAAC,gCACD,mBACA,cAAc,iBAAiB,eAAe,iBAAiB,GAC/D;GAEA,IAD0B,CAAC,QAAQ,SAAS,WAE1C,iBAAiB,OAAO,gBAAgB;GAE1C,cACE,cAAc,YAAY,gBAAgB,GAC1C,iBACA;IACE,SAAS;IACT,WAAW;GACb,CACF;GACA,SAAS,iBAAiB,gBAAgB;EAC5C;EAGA,sBAAsB;GACpB;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,cACJ,aAAa,SAAA,6BAAA;EAIf,IAAI,iBACF,QAAQ,KAAK,aAAa;GACxB,SAAS;GACT;EACF,CAAC;EAGH,UAAU;CACZ,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;AACF"}
1	+ {"version":3,"file":"useTokenSelect.js","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { isItemAllowed } from '../../utils/item.js'\n\nexport const useTokenSelect = (\n formType: FormType,\n onClick?: () => void\n): ((tokenAddress: string, chainId?: number) => void) => {\n const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()\n const splitMode = useSplitMode()\n const emitter = useWidgetEvents()\n const { setFieldValue, getFieldValues } = useFieldActions()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [\n state.setChain,\n state.setIsAllNetworks,\n ])\n\n const tokenKey = FormKeyHelper.getTokenKey(formType)\n\n return useCallback(\n (tokenAddress: string, chainId?: number) => {\n setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })\n const selectedChainId =\n chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]\n // Set chain again to trigger URL builder update\n setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {\n isDirty: true,\n isTouched: true,\n })\n const amountKey = FormKeyHelper.getAmountKey(formType)\n if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {\n setFieldValue(amountKey, '')\n }\n const oppositeFormType = formType === 'from' ? 'to' : 'from'\n const [\n selectedOppositeTokenAddress,\n selectedOppositeChainId,\n selectedToAddress,\n ] = getFieldValues(\n FormKeyHelper.getTokenKey(oppositeFormType),\n FormKeyHelper.getChainKey(oppositeFormType),\n 'toAddress'\n )\n\n // TODO: remove when we enable same chain/token transfers\n const isSameTokenTransfer =\n selectedOppositeTokenAddress === tokenAddress &&\n selectedOppositeChainId === selectedChainId\n\n const isBridgeToSameChain =\n mode === 'split' &&\n splitMode === 'bridge' &&\n selectedOppositeChainId === selectedChainId\n\n if ((isSameTokenTransfer \|\| isBridgeToSameChain) && mode !== 'custom') {\n setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {\n isDirty: true,\n isTouched: true,\n })\n }\n\n // If no opposite token is selected, synchronize the opposite chain\n // to match the currently selected chain (if allowed).\n // In default exchange mode, also collapse \"All Networks\" on the opposite\n // side - same-chain swap is the most common action.\n if (\n !selectedOppositeTokenAddress &&\n selectedChainId &&\n isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])\n ) {\n const isDefaultExchange = !mode \|\| mode === 'default'\n if (isDefaultExchange) {\n setIsAllNetworks(false, oppositeFormType)\n }\n setFieldValue(\n FormKeyHelper.getChainKey(oppositeFormType),\n selectedChainId,\n {\n isDirty: true,\n isTouched: true,\n }\n )\n setChain(selectedChainId, oppositeFormType)\n }\n\n // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected\n autoPopulateToAddress({\n formType,\n selectedToAddress,\n selectedChainId,\n selectedOppositeChainId,\n selectedOppositeTokenAddress,\n })\n\n const eventToEmit =\n formType === 'from'\n ? WidgetEvent.SourceChainTokenSelected\n : WidgetEvent.DestinationChainTokenSelected\n\n if (selectedChainId) {\n emitter.emit(eventToEmit, {\n chainId: selectedChainId,\n tokenAddress,\n })\n }\n\n onClick?.()\n },\n [\n autoPopulateToAddress,\n disabledUI,\n emitter,\n formType,\n getFieldValues,\n onClick,\n setChain,\n setIsAllNetworks,\n setFieldValue,\n mode,\n splitMode,\n tokenKey,\n chainsConfig,\n ]\n )\n}\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBACX,UACA,YACuD;CACvD,MAAM,EAAE,MAAM,YAAY,QAAQ,iBAAiB,gBAAgB;CACnE,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,wBAAwB,yBAAyB;CACvD,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,UAAU,CACjE,MAAM,UACN,MAAM,gBACR,CAAC;CAED,MAAM,WAAW,cAAc,YAAY,QAAQ;CAEnD,OAAO,aACJ,cAAsB,YAAqB;EAC1C,cAAc,UAAU,cAAc;GAAE,SAAS;GAAM,WAAW;EAAK,CAAC;EACxE,MAAM,kBACJ,WAAW,eAAe,cAAc,YAAY,QAAQ,CAAC,CAAC,CAAC;EAEjE,cAAc,cAAc,YAAY,QAAQ,GAAG,iBAAiB;GAClE,SAAS;GACT,WAAW;EACb,CAAC;EACD,MAAM,YAAY,cAAc,aAAa,QAAQ;EACrD,IAAI,CAAC,aAAa,YAChB,cAAc,WAAW,EAAE;EAE7B,MAAM,mBAAmB,aAAa,SAAS,OAAO;EACtD,MAAM,CACJ,8BACA,yBACA,qBACE,eACF,cAAc,YAAY,gBAAgB,GAC1C,cAAc,YAAY,gBAAgB,GAC1C,WACF;EAYA,KARE,iCAAiC,gBACjC,4BAA4B,mBAG5B,SAAS,WACT,cAAc,YACd,4BAA4B,oBAEsB,SAAS,UAC3D,cAAc,cAAc,YAAY,gBAAgB,GAAG,IAAI;GAC7D,SAAS;GACT,WAAW;EACb,CAAC;EAOH,IACE,CAAC,gCACD,mBACA,cAAc,iBAAiB,eAAe,iBAAiB,GAC/D;GAEA,IAD0B,CAAC,QAAQ,SAAS,WAE1C,iBAAiB,OAAO,gBAAgB;GAE1C,cACE,cAAc,YAAY,gBAAgB,GAC1C,iBACA;IACE,SAAS;IACT,WAAW;GACb,CACF;GACA,SAAS,iBAAiB,gBAAgB;EAC5C;EAGA,sBAAsB;GACpB;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,cACJ,aAAa,SAAA,6BAAA;EAIf,IAAI,iBACF,QAAQ,KAAK,aAAa;GACxB,SAAS;GACT;EACF,CAAC;EAGH,UAAU;CACZ,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;AACF"}

package/dist/esm/components/TokenRate/TokenRate.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenRate.style.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.style.ts"],"sourcesContent":["import { styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TokenRateTypography: React.FC<\n React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n fontSize: 14,\n lineHeight: 1.429,\n fontWeight: 500,\n color: theme.vars.palette.text.primary,\n cursor: 'pointer',\n '&:hover': {\n opacity: 1,\n },\n opacity: 0.56,\n transition: theme.transitions.create(['opacity'], {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }),\n}))\n"],"mappings":";;AAGA,MAAa,sBAET,OAAO,UAAU,~~GAAG~~,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,WAAW,EACT,SAAS,EACX;CACA,SAAS;CACT,YAAY,MAAM,YAAY,OAAO,CAAC,SAAS,GAAG;EAChD,UAAU,MAAM,YAAY,SAAS;EACrC,QAAQ,MAAM,YAAY,OAAO;CACnC,CAAC;AACH,EAAE"}
1	+ {"version":3,"file":"TokenRate.style.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.style.ts"],"sourcesContent":["import { styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const TokenRateTypography: React.FC<\n React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n fontSize: 14,\n lineHeight: 1.429,\n fontWeight: 500,\n color: theme.vars.palette.text.primary,\n cursor: 'pointer',\n '&:hover': {\n opacity: 1,\n },\n opacity: 0.56,\n transition: theme.transitions.create(['opacity'], {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }),\n}))\n"],"mappings":";;AAGA,MAAa,sBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,QAAQ;CACR,WAAW,EACT,SAAS,EACX;CACA,SAAS;CACT,YAAY,MAAM,YAAY,OAAO,CAAC,SAAS,GAAG;EAChD,UAAU,MAAM,YAAY,SAAS;EACrC,QAAQ,MAAM,YAAY,OAAO;CACnC,CAAC;AACH,EAAE"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n route: RouteExtended\n status?: RouteExecutionStatus\n onClick: () => void\n onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n route,\n status,\n onClick,\n onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n const { t } = useTranslation()\n\n const lastActiveStep = route.steps.findLast((step) => step.execution)\n const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n const isFailed = status === RouteExecutionStatus.Failed\n\n const statusIcon = (() => {\n if (isFailed) {\n return <IconCircle status=\"error\" size={24} />\n }\n if (\n ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n lastActiveAction?.status ?? ''\n )\n ) {\n return <IconCircle status=\"info\" size={24} />\n }\n return (\n <PendingCircle>\n <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n </PendingCircle>\n )\n })()\n\n return (\n <Card onClick={onClick} indented>\n <ActionRow\n sx={{ mb: 1.5 }}\n startAdornment={statusIcon}\n message={title ?? ''}\n endAdornment={\n isFailed ? (\n <Tooltip title={t('button.clearTransaction')}>\n <DeleteButton size=\"small\" onClick={onDelete}>\n <DeleteOutline sx={{ fontSize: 16 }} />\n </DeleteButton>\n </Tooltip>\n ) : lastActiveStep?.execution?.signedAt ? (\n <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n <ExecutionTimerText\n expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n />\n </Typography>\n ) : undefined\n }\n />\n <RouteTokens route={route} />\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAoBjB,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,uBAtBoB;IACxB,IAAI,UACF,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAQ,MAAM;IAAK,CAAA;IAE/C,IACE;KAAC;KAAmB;KAAoB;IAAgB,~~EAAE~~,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAO,MAAM;IAAK,CAAA;IAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;KAAyB,MAAM;KAAI,IAAI;MAAE,KAAK;MAAI,MAAM;KAAG;IAAI,CAAA,EAClD,CAAA;GAEnB,~~GAM~~+B;GACzB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;cACzC,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;cAC9C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}
1	+ {"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n route: RouteExtended\n status?: RouteExecutionStatus\n onClick: () => void\n onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n route,\n status,\n onClick,\n onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n const { t } = useTranslation()\n\n const lastActiveStep = route.steps.findLast((step) => step.execution)\n const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n const isFailed = status === RouteExecutionStatus.Failed\n\n const statusIcon = (() => {\n if (isFailed) {\n return <IconCircle status=\"error\" size={24} />\n }\n if (\n ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n lastActiveAction?.status ?? ''\n )\n ) {\n return <IconCircle status=\"info\" size={24} />\n }\n return (\n <PendingCircle>\n <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n </PendingCircle>\n )\n })()\n\n return (\n <Card onClick={onClick} indented>\n <ActionRow\n sx={{ mb: 1.5 }}\n startAdornment={statusIcon}\n message={title ?? ''}\n endAdornment={\n isFailed ? (\n <Tooltip title={t('button.clearTransaction')}>\n <DeleteButton size=\"small\" onClick={onDelete}>\n <DeleteOutline sx={{ fontSize: 16 }} />\n </DeleteButton>\n </Tooltip>\n ) : lastActiveStep?.execution?.signedAt ? (\n <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n <ExecutionTimerText\n expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n />\n </Typography>\n ) : undefined\n }\n />\n <RouteTokens route={route} />\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAoBjB,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,uBAtBoB;IACxB,IAAI,UACF,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAQ,MAAM;IAAK,CAAA;IAE/C,IACE;KAAC;KAAmB;KAAoB;IAAgB,CAAC,CAAC,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAO,MAAM;IAAK,CAAA;IAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;KAAyB,MAAM;KAAI,IAAI;MAAE,KAAK;MAAI,MAAM;KAAG;IAAI,CAAA,EAClD,CAAA;GAEnB,EAAA,CAM+B;GACzB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;cACzC,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;cAC9C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}

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

	@@ -1 +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 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,GACF,~~GAAG~~,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,KACvC,CAAC;AACH,EAAE;AAEF,MAAa,eACX,OAAO,UAAU,~~GAAG~~,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,EAAG;CAC1B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;AACV,EAAE"}
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 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,GACF,CAAC,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,KACvC,CAAC;AACH,EAAE;AAEF,MAAa,eACX,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACjC,SAAS,MAAM,QAAQ,EAAG;CAC1B,iBAAiB,MAAM,KAAK,QAAQ,WAAW;CAC/C,OAAO;CACP,QAAQ;AACV,EAAE"}

package/dist/esm/components/TransactionCard/TransactionCard.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/TransactionCard.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const DateLabelContainer: React.FC<React.ComponentProps<typeof Box>> =\n styled(Box)({\n display: 'flex',\n justifyContent: 'space-between',\n })\n\nexport const DateLabelText: React.FC<React.ComponentProps<typeof Typography>> =\n styled(Typography)({\n fontSize: 12,\n fontWeight: 500,\n })\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,GAAG,~~EAAE~~;CACV,SAAS;CACT,gBAAgB;AAClB,CAAC;AAEH,MAAa,gBACX,OAAO,UAAU,~~EAAE~~;CACjB,UAAU;CACV,YAAY;AACd,CAAC"}
1	+ {"version":3,"file":"TransactionCard.style.js","names":[],"sources":["../../../../src/components/TransactionCard/TransactionCard.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const DateLabelContainer: React.FC<React.ComponentProps<typeof Box>> =\n styled(Box)({\n display: 'flex',\n justifyContent: 'space-between',\n })\n\nexport const DateLabelText: React.FC<React.ComponentProps<typeof Typography>> =\n styled(Typography)({\n fontSize: 12,\n fontWeight: 500,\n })\n"],"mappings":";;AAGA,MAAa,qBACX,OAAO,GAAG,CAAC,CAAC;CACV,SAAS;CACT,gBAAgB;AAClB,CAAC;AAEH,MAAa,gBACX,OAAO,UAAU,CAAC,CAAC;CACjB,UAAU;CACV,YAAY;AACd,CAAC"}

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

@@ -1,6 +1,6 @@
 //#region src/config/version.d.ts
 declare const name = "@lifi/widget";
-declare const version = "0.0.0-preview-6cc63bac";
+declare const version = "0.0.0-preview-fe8dc5e6";
 //#endregion
 export { name, version };
 //# sourceMappingURL=version.d.ts.map

package/dist/esm/config/version.js CHANGED Viewed

@@ -1,6 +1,6 @@
 //#region src/config/version.ts
 const name = "@lifi/widget";
-const version = "0.0.0-preview-6cc63bac";
+const version = "0.0.0-preview-fe8dc5e6";
 //#endregion
 export { name, version };

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

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

package/dist/esm/hooks/timer/validate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validate.js","names":[],"sources":["../../../../src/hooks/timer/validate.ts"],"sourcesContent":["export function validateExpiryTimestamp(expiryTimestamp: Date): boolean {\n const isValid = new Date(expiryTimestamp).getTime() > 0\n if (!isValid) {\n console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)\n }\n return isValid\n}\n\nexport function validateOnExpire(onExpire: () => void): boolean {\n const isValid = onExpire && typeof onExpire === 'function'\n if (onExpire && !isValid) {\n console.warn('useTimer Invalid onExpire settings function', onExpire)\n }\n return isValid\n}\n"],"mappings":";AAAA,SAAgB,wBAAwB,iBAAgC;CACtE,MAAM,UAAU,IAAI,KAAK,eAAe,~~EAAE~~,QAAQ,IAAI;CACtD,IAAI,CAAC,SACH,QAAQ,KAAK,6CAA6C,eAAe;CAE3E,OAAO;AACT;AAEA,SAAgB,iBAAiB,UAA+B;CAC9D,MAAM,UAAU,YAAY,OAAO,aAAa;CAChD,IAAI,YAAY,CAAC,SACf,QAAQ,KAAK,+CAA+C,QAAQ;CAEtE,OAAO;AACT"}
1	+ {"version":3,"file":"validate.js","names":[],"sources":["../../../../src/hooks/timer/validate.ts"],"sourcesContent":["export function validateExpiryTimestamp(expiryTimestamp: Date): boolean {\n const isValid = new Date(expiryTimestamp).getTime() > 0\n if (!isValid) {\n console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)\n }\n return isValid\n}\n\nexport function validateOnExpire(onExpire: () => void): boolean {\n const isValid = onExpire && typeof onExpire === 'function'\n if (onExpire && !isValid) {\n console.warn('useTimer Invalid onExpire settings function', onExpire)\n }\n return isValid\n}\n"],"mappings":";AAAA,SAAgB,wBAAwB,iBAAgC;CACtE,MAAM,UAAU,IAAI,KAAK,eAAe,CAAC,CAAC,QAAQ,IAAI;CACtD,IAAI,CAAC,SACH,QAAQ,KAAK,6CAA6C,eAAe;CAE3E,OAAO;AACT;AAEA,SAAgB,iBAAiB,UAA+B;CAC9D,MAAM,UAAU,YAAY,OAAO,aAAa;CAChD,IAAI,YAAY,CAAC,SACf,QAAQ,KAAK,+CAA+C,QAAQ;CAEtE,OAAO;AACT"}