@lifi/widget 4.0.0 → 4.2.0

package/dist/esm/components/Skeleton/WidgetSkeleton.js

@@ -65,54 +65,57 @@ const WidgetSkeleton = ({ config }) => {
 		modeStorageKey: "li.fi-widget-mode",
 		colorSchemeStorageKey: "li.fi-widget-color-scheme",
 		disableTransitionOnChange: true,
-		children: /* @__PURE__ */ jsx(AppExpandedContainer, { children: /* @__PURE__ */ jsxs(RelativeContainer, {
-			sx: {
-				display: "flex",
-				flexDirection: "column"
-			},
-			children: [
-				/* @__PURE__ */ jsxs(SkeletonHeaderContainer, { children: [!hiddenUI?.walletMenu ? /* @__PURE__ */ jsx(SkeletonHeaderAppBar, { children: /* @__PURE__ */ jsx(SkeletonWalletMenuButton, {}) }) : null, /* @__PURE__ */ jsxs(SkeletonHeaderAppBar, {
-					sx: {
-						justifyContent: "space-between",
-						height: 52
-					},
-					children: [/* @__PURE__ */ jsx(Skeleton, {
-						width: 124,
-						height: 36,
+		children: /* @__PURE__ */ jsx(AppExpandedContainer, {
+			"data-testid": "widget-skeleton-container",
+			children: /* @__PURE__ */ jsxs(RelativeContainer, {
+				sx: {
+					display: "flex",
+					flexDirection: "column"
+				},
+				children: [
+					/* @__PURE__ */ jsxs(SkeletonHeaderContainer, { children: [!hiddenUI?.walletMenu ? /* @__PURE__ */ jsx(SkeletonHeaderAppBar, { children: /* @__PURE__ */ jsx(SkeletonWalletMenuButton, {}) }) : null, /* @__PURE__ */ jsxs(SkeletonHeaderAppBar, {
+						sx: {
+							justifyContent: "space-between",
+							height: 52
+						},
+						children: [/* @__PURE__ */ jsx(Skeleton, {
+							width: 124,
+							height: 36,
+							variant: "text"
+						}), /* @__PURE__ */ jsx(SkeletonIcon, {})]
+					})] }),
+					/* @__PURE__ */ jsxs(FlexContainer, {
+						sx: {
+							gap: 2,
+							paddingBottom: hiddenUI?.poweredBy ? 3 : 2
+						},
+						children: [
+							/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+							/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
+							/* @__PURE__ */ jsx(SkeletonYouPayCard, {}),
+							requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSelectCard, {
+								titleWidth: 104,
+								placeholderWidth: 175
+							}) : null,
+							/* @__PURE__ */ jsxs(SkeletonReviewButtonContainer, { children: [/* @__PURE__ */ jsx(SkeletonReviewButton, {
+								variant: "contained",
+								fullWidth: true,
+								children: "\xA0"
+							}), !requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSendToWalletButton, {
+								variant: "text",
+								fullWidth: true,
+								children: "\xA0"
+							}) : null] })
+						]
+					}),
+					!hiddenUI?.poweredBy ? /* @__PURE__ */ jsx(SkeletonPoweredByContainer, { children: /* @__PURE__ */ jsx(Skeleton, {
+						width: 96,
+						height: 18,
 						variant: "text"
-					}), /* @__PURE__ */ jsx(SkeletonIcon, {})]
-				})] }),
-				/* @__PURE__ */ jsxs(FlexContainer, {
-					sx: {
-						gap: 2,
-						paddingBottom: hiddenUI?.poweredBy ? 3 : 2
-					},
-					children: [
-						/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
-						/* @__PURE__ */ jsx(SkeletonSelectCard, {}),
-						/* @__PURE__ */ jsx(SkeletonYouPayCard, {}),
-						requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSelectCard, {
-							titleWidth: 104,
-							placeholderWidth: 175
-						}) : null,
-						/* @__PURE__ */ jsxs(SkeletonReviewButtonContainer, { children: [/* @__PURE__ */ jsx(SkeletonReviewButton, {
-							variant: "contained",
-							fullWidth: true,
-							children: "\xA0"
-						}), !requiredUI?.toAddress ? /* @__PURE__ */ jsx(SkeletonSendToWalletButton, {
-							variant: "text",
-							fullWidth: true,
-							children: "\xA0"
-						}) : null] })
-					]
-				}),
-				!hiddenUI?.poweredBy ? /* @__PURE__ */ jsx(SkeletonPoweredByContainer, { children: /* @__PURE__ */ jsx(Skeleton, {
-					width: 96,
-					height: 18,
-					variant: "text"
-				}) }) : null
-			]
-		}) })
+					}) }) : null
+				]
+			})
+		})
 	});
 };
 //#endregion

package/dist/esm/components/Skeleton/WidgetSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI\n  const requiredUI = config?.requiredUI\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer>\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.walletMenu ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.poweredBy ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"WidgetSkeleton.js","names":["createTheme"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.tsx"],"sourcesContent":["import { Skeleton, ThemeProvider, useMediaQuery } from '@mui/material'\nimport { type JSX, useMemo } from 'react'\nimport { createTheme } from '../../themes/createTheme.js'\nimport type { WidgetConfigPartialProps } from '../../types/widget.js'\nimport {\n  AppExpandedContainer,\n  FlexContainer,\n  RelativeContainer,\n} from '../AppContainer.js'\nimport {\n  SkeletonAmountContainer,\n  SkeletonCard,\n  SkeletonCardRow,\n  SkeletonHeaderAppBar,\n  SkeletonHeaderContainer,\n  SkeletonInputCard,\n  SkeletonPoweredByContainer,\n  SkeletonReviewButton,\n  SkeletonReviewButtonContainer,\n  SkeletonSendToWalletButton,\n  SkeletonWalletMenuButtonContainer,\n} from './WidgetSkeleton.style.js'\n\nconst SkeletonIcon = () => <Skeleton width={24} height={24} variant=\"rounded\" />\nconst SkeletonWalletMenuButton = () => (\n  <SkeletonWalletMenuButtonContainer>\n    <Skeleton width={98} height={24} variant=\"text\" />\n    <SkeletonIcon />\n  </SkeletonWalletMenuButtonContainer>\n)\n\ninterface SkeletonSelectCardProps {\n  titleWidth?: number\n  placeholderWidth?: number\n}\nconst SkeletonSelectCard = ({\n  titleWidth = 36,\n  placeholderWidth = 195,\n}: SkeletonSelectCardProps) => (\n  <SkeletonCard elevation={0}>\n    <Skeleton width={titleWidth} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <Skeleton width={placeholderWidth} height={27} variant=\"text\" />\n    </SkeletonCardRow>\n  </SkeletonCard>\n)\n\nconst SkeletonYouPayCard = () => (\n  <SkeletonInputCard elevation={0}>\n    <Skeleton width={55} height={22} variant=\"text\" />\n    <SkeletonCardRow>\n      <Skeleton width={40} height={40} variant=\"circular\" />\n      <SkeletonAmountContainer>\n        <Skeleton\n          width={48}\n          height={37}\n          variant=\"text\"\n          sx={{ marginTop: -0.75 }}\n        />\n        <Skeleton width={48} height={12} variant=\"text\" />\n      </SkeletonAmountContainer>\n    </SkeletonCardRow>\n  </SkeletonInputCard>\n)\n\nexport const WidgetSkeleton = ({\n  config,\n}: WidgetConfigPartialProps): JSX.Element => {\n  const appearance = config?.appearance\n  const hiddenUI = config?.hiddenUI\n  const requiredUI = config?.requiredUI\n  const configTheme = config?.theme\n  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')\n  const appearanceMode =\n    !appearance || appearance === 'system'\n      ? prefersDarkMode\n        ? 'dark'\n        : 'light'\n      : appearance\n\n  const theme = useMemo(() => createTheme(configTheme), [configTheme])\n\n  return (\n    <ThemeProvider\n      theme={theme}\n      defaultMode={appearanceMode}\n      modeStorageKey=\"li.fi-widget-mode\"\n      colorSchemeStorageKey=\"li.fi-widget-color-scheme\"\n      disableTransitionOnChange\n    >\n      <AppExpandedContainer data-testid=\"widget-skeleton-container\">\n        <RelativeContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n          <SkeletonHeaderContainer>\n            {!hiddenUI?.walletMenu ? (\n              <SkeletonHeaderAppBar>\n                <SkeletonWalletMenuButton />\n              </SkeletonHeaderAppBar>\n            ) : null}\n            <SkeletonHeaderAppBar\n              sx={{ justifyContent: 'space-between', height: 52 }}\n            >\n              <Skeleton width={124} height={36} variant=\"text\" />\n              <SkeletonIcon />\n            </SkeletonHeaderAppBar>\n          </SkeletonHeaderContainer>\n\n          <FlexContainer\n            sx={{\n              gap: 2,\n              paddingBottom: hiddenUI?.poweredBy ? 3 : 2,\n            }}\n          >\n            <SkeletonSelectCard />\n            <SkeletonSelectCard />\n            <SkeletonYouPayCard />\n            {requiredUI?.toAddress ? (\n              <SkeletonSelectCard titleWidth={104} placeholderWidth={175} />\n            ) : null}\n            <SkeletonReviewButtonContainer>\n              <SkeletonReviewButton variant=\"contained\" fullWidth>\n                &nbsp;\n              </SkeletonReviewButton>\n              {!requiredUI?.toAddress ? (\n                <SkeletonSendToWalletButton variant=\"text\" fullWidth>\n                  &nbsp;\n                </SkeletonSendToWalletButton>\n              ) : null}\n            </SkeletonReviewButtonContainer>\n          </FlexContainer>\n          {!hiddenUI?.poweredBy ? (\n            <SkeletonPoweredByContainer>\n              <Skeleton width={96} height={18} variant=\"text\" />\n            </SkeletonPoweredByContainer>\n          ) : null}\n        </RelativeContainer>\n      </AppExpandedContainer>\n    </ThemeProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/Skeleton/WidgetSkeleton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetSkeleton.style.js","names":["MuiCard"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.style.tsx"],"sourcesContent":["import { Box, Button, Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\n\nexport const SkeletonHeaderAppBar: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    color: theme.vars?.palette?.text.primary,\n    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),\n  }))\n\nexport const SkeletonWalletMenuButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(1, 0, 1, 1.5),\n  gap: theme.spacing(1),\n}))\n\nexport const SkeletonCardRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'center',\n    marginTop: theme.spacing(1.5),\n  }))\n\nexport const SkeletonAmountContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  height: 40,\n  overflowY: 'hidden',\n})\n\nexport const SkeletonCard: React.FC<React.ComponentProps<typeof MuiCard>> =\n  styled(MuiCard)(({ theme }) => ({\n    padding: theme.spacing(1.5, 2, 2),\n  }))\n\nexport const SkeletonInputCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)(({ theme }) => ({\n  padding: theme.spacing(1.5, 2, 2),\n}))\n\nexport const SkeletonReviewButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.5),\n  alignItems: 'center',\n}))\n\nexport const SkeletonReviewButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  pointerEvents: 'none',\n})\nexport const SkeletonSendToWalletButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  minWidth: 48,\n  width: 48,\n  pointerEvents: 'none',\n})\n\nexport const SkeletonPoweredByContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n  alignItems: 'flex-end',\n  paddingBottom: theme.spacing(2),\n  paddingLeft: theme.spacing(3),\n  paddingRight: theme.spacing(3),\n}))\n\nexport const SkeletonHeaderContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 1.5, 3),\n    overflow: 'auto',\n  }\n})\n"],"mappings":";;;AAIA,MAAa,uBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY;CACZ,OAAO,MAAM,MAAM,SAAS,KAAK;CACjC,cAAc,MAAM,YAAY,OAAO,IAAI,MAAM,UAAU,CAAC;AAC9D,EAAE;AAEJ,MAAa,oCAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG;CACnC,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY;CACZ,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,EAAE;CACd,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,QAAQ;CACR,WAAW;AACb,CAAC;AAED,MAAa,eACX,OAAOA,IAAO,GAAG,EAAE,aAAa,EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEJ,MAAa,oBAET,OAAO,SAAS,GAAG,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEF,MAAa,gCAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAG;CACtB,YAAY;AACd,EAAE;AAEF,MAAa,uBAET,OAAO,MAAM,EAAE;CACjB,QAAQ;CACR,eAAe;AACjB,CAAC;AACD,MAAa,6BAET,OAAO,MAAM,EAAE;CACjB,QAAQ;CACR,UAAU;CACV,OAAO;CACP,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,eAAe,MAAM,QAAQ,CAAC;CAC9B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,UAAU;CACZ;AACF,CAAC"}
+{"version":3,"file":"WidgetSkeleton.style.js","names":["MuiCard"],"sources":["../../../../src/components/Skeleton/WidgetSkeleton.style.tsx"],"sourcesContent":["import { Box, Button, Card as MuiCard, styled } from '@mui/material'\nimport type React from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\n\nexport const SkeletonHeaderAppBar: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    color: theme.vars?.palette?.text.primary,\n    paddingRight: theme.navigation?.edge ? 0 : theme.spacing?.(1),\n  }))\n\nexport const SkeletonWalletMenuButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(1, 0, 1, 1.5),\n  gap: theme.spacing(1),\n}))\n\nexport const SkeletonCardRow: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'center',\n    marginTop: theme.spacing(1.5),\n  }))\n\nexport const SkeletonAmountContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  height: 40,\n  overflowY: 'hidden',\n})\n\nexport const SkeletonCard: React.FC<React.ComponentProps<typeof MuiCard>> =\n  styled(MuiCard)(({ theme }) => ({\n    padding: theme.spacing(1.5, 2, 2),\n  }))\n\nexport const SkeletonInputCard: React.FC<\n  React.ComponentProps<typeof InputCard>\n> = styled(InputCard)(({ theme }) => ({\n  padding: theme.spacing(1.5, 2, 2),\n}))\n\nexport const SkeletonReviewButtonContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1.5),\n  alignItems: 'center',\n}))\n\nexport const SkeletonReviewButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  pointerEvents: 'none',\n})\nexport const SkeletonSendToWalletButton: React.FC<\n  React.ComponentProps<typeof Button>\n> = styled(Button)({\n  height: 48,\n  minWidth: 48,\n  width: 48,\n  pointerEvents: 'none',\n})\n\nexport const SkeletonPoweredByContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n  alignItems: 'flex-end',\n  paddingBottom: theme.spacing(2),\n  paddingLeft: theme.spacing(3),\n  paddingRight: theme.spacing(3),\n}))\n\nexport const SkeletonHeaderContainer: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => {\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: theme.vars.palette.background.default,\n    position: 'relative',\n    top: 0,\n    zIndex: 1200,\n    gap: theme.spacing(0.5),\n    padding: theme.spacing(1.5, 3, 1.5, 3),\n    overflow: 'auto',\n  }\n})\n"],"mappings":";;;AAIA,MAAa,uBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,YAAY;CACZ,OAAO,MAAM,MAAM,SAAS,KAAK;CACjC,cAAc,MAAM,YAAY,OAAO,IAAI,MAAM,UAAU,CAAC;AAC9D,EAAE;AAEJ,MAAa,oCAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG;CACnC,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY;CACZ,WAAW,MAAM,QAAQ,GAAG;AAC9B,EAAE;AAEJ,MAAa,0BAET,OAAO,GAAG,CAAC,CAAC;CACd,SAAS;CACT,eAAe;CACf,gBAAgB;CAChB,QAAQ;CACR,WAAW;AACb,CAAC;AAED,MAAa,eACX,OAAOA,IAAO,CAAC,EAAE,EAAE,aAAa,EAC9B,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEJ,MAAa,oBAET,OAAO,SAAS,CAAC,EAAE,EAAE,aAAa,EACpC,SAAS,MAAM,QAAQ,KAAK,GAAG,CAAC,EAClC,EAAE;AAEF,MAAa,gCAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAG;CACtB,YAAY;AACd,EAAE;AAEF,MAAa,uBAET,OAAO,MAAM,CAAC,CAAC;CACjB,QAAQ;CACR,eAAe;AACjB,CAAC;AACD,MAAa,6BAET,OAAO,MAAM,CAAC,CAAC;CACjB,QAAQ;CACR,UAAU;CACV,OAAO;CACP,eAAe;AACjB,CAAC;AAED,MAAa,6BAET,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,eAAe,MAAM,QAAQ,CAAC;CAC9B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,CAAC,EAAE,EAAE,YAAY;CAC7B,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU;EACV,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,EAAG;EACtB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,CAAC;EACrC,UAAU;CACZ;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.integratorStepDetails) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (mode === 'custom' && modeOptions?.custom?.type) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepActions.js","names":["Card"],"sources":["../../../../src/components/Step/StepActions.tsx"],"sourcesContent":["import type { LiFiStep, RouteExtended, StepExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport ArrowForward from '@mui/icons-material/ArrowForward'\nimport { Box, Divider, Tooltip } from '@mui/material'\nimport { Fragment } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type {\n  ModeOptions,\n  WidgetFeeConfig,\n  WidgetMode,\n} from '../../types/widget.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { Card } from '../Card/Card.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  StepActionsHeader,\n  StepActionsTitle,\n  StepLabelTypography,\n} from './StepActions.style.js'\n\ninterface StepDetailsLabelProps {\n  step: StepExtended\n  mode?: Extract<WidgetMode, 'custom'>\n  modeOptions?: ModeOptions\n  feeConfig?: WidgetFeeConfig\n  relayerSupport?: boolean\n}\n\nexport const StepActions: React.FC<{\n  route: RouteExtended\n}> = ({ route }) => {\n  const { t } = useTranslation()\n  const { mode, modeOptions, feeConfig, hiddenUI } = useWidgetConfig()\n  const { isGaslessStep } = useEthereumContext()\n\n  const headerIncludedSteps = route.steps.flatMap((step) => step.includedSteps)\n\n  const flatSteps = route.steps.flatMap((routeStep) => {\n    let steps = routeStep.includedSteps\n    if (hiddenUI?.integratorStepDetails) {\n      const feeCollectionStep = steps.find((s) => s.tool === 'feeCollection')\n      if (feeCollectionStep) {\n        steps = structuredClone(steps.filter((s) => s.tool !== 'feeCollection'))\n        steps[0].estimate.fromAmount = feeCollectionStep.estimate.fromAmount\n      }\n    }\n    const hasGaslessSupport = !!isGaslessStep?.(routeStep)\n    return steps.map((includedStep) => ({ includedStep, hasGaslessSupport }))\n  })\n\n  const tooltipContent = (\n    <Card indented>\n      <Box\n        sx={{\n          display: 'grid',\n          gridTemplateColumns: '32px 1fr',\n          columnGap: 1.5,\n        }}\n      >\n        {flatSteps.map(({ includedStep: step, hasGaslessSupport }, i, arr) => {\n          const showDivider = i !== arr.length - 1\n          const isFeeCollection =\n            step.type === 'protocol' && step.tool === 'feeCollection'\n          const toolName =\n            isFeeCollection && feeConfig?.name\n              ? feeConfig.name\n              : step.toolDetails.name\n          const toolLogoURI =\n            isFeeCollection && feeConfig?.logoURI\n              ? feeConfig.logoURI\n              : step.toolDetails.logoURI\n\n          return (\n            <Fragment key={step.id}>\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\n                {toolLogoURI ? (\n                  <SmallAvatar\n                    src={toolLogoURI}\n                    alt={toolName}\n                    sx={{ width: 32, height: 32 }}\n                  >\n                    {toolName?.[0]}\n                  </SmallAvatar>\n                ) : null}\n              </Box>\n              <Box\n                sx={{ display: 'flex', flexDirection: 'column', minHeight: 32 }}\n              >\n                {step.type === 'custom' && mode === 'custom' ? (\n                  <CustomStepDetailsLabel\n                    step={step}\n                    mode={mode}\n                    modeOptions={modeOptions}\n                  />\n                ) : step.type === 'cross' ? (\n                  <BridgeStepDetailsLabel step={step} />\n                ) : step.type === 'protocol' ? (\n                  <ProtocolStepDetailsLabel\n                    step={step}\n                    feeConfig={feeConfig}\n                    relayerSupport={hasGaslessSupport}\n                  />\n                ) : (\n                  <SwapStepDetailsLabel step={step} />\n                )}\n                <StepDetailsContent step={step} />\n              </Box>\n              {showDivider && (\n                <Box sx={{ display: 'flex', alignItems: 'center', px: '15px' }}>\n                  <Divider\n                    orientation=\"vertical\"\n                    sx={{ my: 0.5, height: 8, borderRightWidth: 2 }}\n                  />\n                </Box>\n              )}\n              {showDivider && <Box />}\n            </Fragment>\n          )\n        })}\n      </Box>\n    </Card>\n  )\n\n  return (\n    <StepActionsHeader>\n      <StepActionsTitle>{t('main.route')}</StepActionsTitle>\n      <Tooltip\n        title={tooltipContent}\n        placement=\"bottom-end\"\n        arrow={false}\n        slotProps={{\n          tooltip: {\n            sx: {\n              bgcolor: 'transparent',\n              p: 0,\n              boxShadow: 'none',\n              maxWidth: 'none',\n            },\n          },\n          transition: {\n            style: { transformOrigin: 'right top' },\n          },\n        }}\n      >\n        <CardIconButton\n          size=\"small\"\n          sx={(theme) => ({\n            borderRadius: theme.vars.shape.borderRadiusSecondary,\n          })}\n        >\n          <Box sx={{ display: 'flex', alignItems: 'center' }}>\n            {headerIncludedSteps.map((includedStep, index) => (\n              <Fragment key={index}>\n                {index > 0 ? (\n                  <Divider sx={{ width: 8, mx: 0.5, borderWidth: 1 }} />\n                ) : null}\n                <SmallAvatar\n                  src={includedStep.toolDetails.logoURI}\n                  alt={includedStep.toolDetails.name}\n                  sx={{ width: 16, height: 16 }}\n                >\n                  {includedStep.toolDetails.name[0]}\n                </SmallAvatar>\n              </Fragment>\n            ))}\n          </Box>\n        </CardIconButton>\n      </Tooltip>\n    </StepActionsHeader>\n  )\n}\n\nconst StepDetailsContent: React.FC<{\n  step: StepExtended\n}> = ({ step }) => {\n  const { t } = useTranslation()\n\n  const sameTokenProtocolStep =\n    step.action.fromToken.chainId === step.action.toToken.chainId &&\n    step.action.fromToken.address === step.action.toToken.address\n\n  let fromAmount: string | undefined\n  if (sameTokenProtocolStep) {\n    const estimatedFromAmount =\n      BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount)\n\n    fromAmount =\n      estimatedFromAmount > 0n\n        ? formatTokenAmount(estimatedFromAmount, step.action.fromToken.decimals)\n        : formatTokenAmount(\n            BigInt(step.estimate.fromAmount),\n            step.action.fromToken.decimals\n          )\n  } else {\n    fromAmount = formatTokenAmount(\n      BigInt(step.estimate.fromAmount),\n      step.action.fromToken.decimals\n    )\n  }\n\n  const showToAmount =\n    step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep\n\n  return (\n    <StepLabelTypography>\n      {!showToAmount ? (\n        <>\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.estimate.fromAmount),\n              step.action.fromToken.decimals\n            ),\n          })}{' '}\n          {step.action.fromToken.symbol}\n          {' - '}\n        </>\n      ) : null}\n      {t('format.tokenAmount', {\n        value: fromAmount,\n      })}{' '}\n      {step.action.fromToken.symbol}\n      {showToAmount ? (\n        <>\n          <ArrowForward sx={{ fontSize: 18, paddingX: 0.5, height: 12 }} />\n          {t('format.tokenAmount', {\n            value: formatTokenAmount(\n              BigInt(step.execution?.toAmount ?? step.estimate.toAmount),\n              step.execution?.toToken?.decimals ?? step.action.toToken.decimals\n            ),\n          })}{' '}\n          {step.execution?.toToken?.symbol ?? step.action.toToken.symbol}\n        </>\n      ) : (\n        ` (${t('format.currency', {\n          value: formatTokenPrice(\n            fromAmount,\n            step.action.fromToken.priceUSD,\n            step.action.fromToken.decimals\n          ),\n        })})`\n      )}\n    </StepLabelTypography>\n  )\n}\n\nconst CustomStepDetailsLabel: React.FC<StepDetailsLabelProps> = ({\n  step,\n  mode,\n  modeOptions,\n}) => {\n  const { t } = useTranslation()\n\n  if (!mode) {\n    return null\n  }\n\n  // FIXME: step transaction request overrides step tool details, but not included step tool details\n  const toolDetails =\n    mode === 'custom' && (step as unknown as LiFiStep).includedSteps?.length > 0\n      ? (step as unknown as LiFiStep).includedSteps.find(\n          (step) => step.tool === 'custom' && step.toolDetails.key !== 'custom'\n        )?.toolDetails || step.toolDetails\n      : step.toolDetails\n\n  const stepDetailsKey =\n    (mode === 'custom' && modeOptions?.custom?.type) || 'checkout'\n\n  return (\n    <StepLabelTypography>\n      {t(`main.${stepDetailsKey}StepDetails`, {\n        tool: toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst BridgeStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.bridgeStepDetails', {\n        from: getChainById(step.action.fromChainId)?.name,\n        to: getChainById(step.action.toChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst SwapStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step }) => {\n  const { t } = useTranslation()\n  const { getChainById } = useAvailableChains()\n  return (\n    <StepLabelTypography>\n      {t('main.swapStepDetails', {\n        chain: getChainById(step.action.fromChainId)?.name,\n        tool: step.toolDetails.name,\n      })}\n    </StepLabelTypography>\n  )\n}\n\nconst ProtocolStepDetailsLabel: React.FC<\n  Omit<StepDetailsLabelProps, 'variant'>\n> = ({ step, feeConfig, relayerSupport }) => {\n  const { t } = useTranslation()\n  return (\n    <StepLabelTypography>\n      {step.toolDetails.key === 'feeCollection'\n        ? feeConfig?.name ||\n          (relayerSupport\n            ? t('main.fees.relayerService')\n            : t('main.fees.defaultIntegrator'))\n        : step.toolDetails.key === 'gasZip'\n          ? t('main.refuelStepDetails', {\n              tool: step.toolDetails.name,\n            })\n          : step.toolDetails.name}\n    </StepLabelTypography>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepActions.style.js","names":[],"sources":["../../../../src/components/Step/StepActions.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  lineHeight: 1.3334,\n  color: theme.vars.palette.text.primary,\n  whiteSpace: 'nowrap',\n}))\n\nexport const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =\n  styled(AvatarMasked)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    backgroundColor: 'transparent',\n  }))\n\nexport const StepActionsHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  }))\n\nexport const StepActionsTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 12,\n  fontWeight: 700,\n}))\n"],"mappings":";;;AAIA,MAAa,sBAET,OAAO,UAAU,GAAG,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE;AAGA,OAAO,YAAY,GAAG,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;AACnB,EAAE;AAEJ,MAAa,oBACX,OAAO,GAAG,SAAS;CACjB,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEJ,MAAa,mBAET,OAAO,UAAU,SAAS;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}
+{"version":3,"file":"StepActions.style.js","names":[],"sources":["../../../../src/components/Step/StepActions.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\n\nexport const StepLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 12,\n  fontWeight: 500,\n  lineHeight: 1.3334,\n  color: theme.vars.palette.text.primary,\n  whiteSpace: 'nowrap',\n}))\n\nexport const StepAvatar: React.FC<React.ComponentProps<typeof AvatarMasked>> =\n  styled(AvatarMasked)(({ theme }) => ({\n    color: theme.vars.palette.text.primary,\n    backgroundColor: 'transparent',\n  }))\n\nexport const StepActionsHeader: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(() => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  }))\n\nexport const StepActionsTitle: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 12,\n  fontWeight: 700,\n}))\n"],"mappings":";;;AAIA,MAAa,sBAET,OAAO,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,YAAY;AACd,EAAE;AAGA,OAAO,YAAY,CAAC,EAAE,EAAE,aAAa;CACnC,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,iBAAiB;AACnB,EAAE;AAEJ,MAAa,oBACX,OAAO,GAAG,CAAC,QAAQ;CACjB,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EAAE;AAEJ,MAAa,mBAET,OAAO,UAAU,CAAC,QAAQ;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"SentToWalletRow.style.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW,MAAM;AACrH,EAAE;AAEJ,MAAa,eAA4D,OACvE,IACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}
+{"version":3,"file":"SentToWalletRow.style.js","names":[],"sources":["../../../../src/components/StepActions/SentToWalletRow.style.tsx"],"sourcesContent":["import { Box, Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ActionIconCircle: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: '50%',\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.success.main} 12%, ${theme.vars.palette.background.paper})`,\n  }))\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,mBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW,MAAM;AACrH,EAAE;AAEJ,MAAa,eAA4D,OACvE,IACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"StepActionRow.style.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.style.tsx"],"sourcesContent":["import { Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,eAA4D,OACvE,IACF,GAAG,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}
+{"version":3,"file":"StepActionRow.style.js","names":[],"sources":["../../../../src/components/StepActions/StepActionRow.style.tsx"],"sourcesContent":["import { Link, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ExternalLink: React.FC<React.ComponentProps<typeof Link>> = styled(\n  Link\n)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 24,\n  height: 24,\n  borderRadius: '50%',\n  textDecoration: 'none',\n  color: theme.vars.palette.text.primary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,eAA4D,OACvE,IACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,EAAE"}

package/dist/esm/components/SwapButton/SwapButton.js

@@ -0,0 +1,50 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useToAddressReset } from "../../hooks/useToAddressReset.js";
+import { useToAddressAutoPopulate } from "../../hooks/useToAddressAutoPopulate.js";
+import { SwapButtonContainer, SwapIconCard } from "./SwapButton.style.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+//#region src/components/SwapButton/SwapButton.tsx
+const SwapButton = ({ sx, ...props }) => {
+	const { t } = useTranslation();
+	const { mode } = useWidgetConfig();
+	const { setFieldValue, getFieldValues } = useFieldActions();
+	const { getChainById } = useAvailableChains();
+	const { tryResetToAddress } = useToAddressReset();
+	const autoPopulateToAddress = useToAddressAutoPopulate();
+	const handleClick = () => {
+		const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] = getFieldValues("fromChain", "fromToken", "toChain", "toToken", "toAddress", "toAmount");
+		setFieldValue("fromAmount", mode === "limit" && toAmount ? toAmount : "", { isTouched: true });
+		setFieldValue("fromChain", toChainId, { isTouched: true });
+		setFieldValue("fromToken", toToken, { isTouched: true });
+		setFieldValue("toChain", fromChainId, { isTouched: true });
+		setFieldValue("toToken", fromToken, { isTouched: true });
+		if (autoPopulateToAddress({
+			formType: "from",
+			selectedToAddress: toAddress,
+			selectedChainId: toChainId,
+			selectedOppositeChainId: fromChainId,
+			selectedOppositeTokenAddress: fromToken
+		})) return;
+		const toChain = getChainById(fromChainId);
+		if (toChain) tryResetToAddress(toChain);
+	};
+	return /* @__PURE__ */ jsx(SwapButtonContainer, {
+		sx,
+		...props,
+		children: /* @__PURE__ */ jsx(SwapIconCard, {
+			component: "button",
+			onClick: handleClick,
+			"aria-label": t("button.swap"),
+			"data-testid": "widget-swap-tokens-button",
+			children: /* @__PURE__ */ jsx(ArrowDownwardIcon, { fontSize: "inherit" })
+		})
+	});
+};
+//#endregion
+export { SwapButton };
+
+//# sourceMappingURL=SwapButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwapButton.js","names":["ArrowDownward"],"sources":["../../../../src/components/SwapButton/SwapButton.tsx"],"sourcesContent":["import ArrowDownward from '@mui/icons-material/ArrowDownward'\nimport type { BoxProps } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { SwapButtonContainer, SwapIconCard } from './SwapButton.style.js'\n\nexport const SwapButton: React.FC<BoxProps> = ({\n  sx,\n  ...props\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const { mode } = useWidgetConfig()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { getChainById } = useAvailableChains()\n  const { tryResetToAddress } = useToAddressReset()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n\n  const handleClick = (): void => {\n    const [fromChainId, fromToken, toChainId, toToken, toAddress, toAmount] =\n      getFieldValues(\n        'fromChain',\n        'fromToken',\n        'toChain',\n        'toToken',\n        'toAddress',\n        'toAmount'\n      )\n    const newFromAmount =\n      mode === 'limit' && toAmount ? (toAmount as string) : ''\n    setFieldValue('fromAmount', newFromAmount, { isTouched: true })\n    setFieldValue('fromChain', toChainId, { isTouched: true })\n    setFieldValue('fromToken', toToken, { isTouched: true })\n    setFieldValue('toChain', fromChainId, { isTouched: true })\n    setFieldValue('toToken', fromToken, { isTouched: true })\n\n    const autoPopulatedToAddress = autoPopulateToAddress({\n      formType: 'from',\n      selectedToAddress: toAddress,\n      selectedChainId: toChainId,\n      selectedOppositeChainId: fromChainId,\n      selectedOppositeTokenAddress: fromToken,\n    })\n\n    if (autoPopulatedToAddress) {\n      return\n    }\n\n    const toChain = getChainById(fromChainId)\n    if (toChain) {\n      tryResetToAddress(toChain)\n    }\n  }\n\n  return (\n    <SwapButtonContainer sx={sx} {...props}>\n      <SwapIconCard\n        component=\"button\"\n        onClick={handleClick}\n        aria-label={t('button.swap')}\n        data-testid=\"widget-swap-tokens-button\"\n      >\n        <ArrowDownward fontSize=\"inherit\" />\n      </SwapIconCard>\n    </SwapButtonContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,cAAkC,EAC7C,IACA,GAAG,YACc;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAA0B;EAC9B,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,WAAW,YAC5D,eACE,aACA,aACA,WACA,WACA,aACA,UACF;EAGF,cAAc,cADZ,SAAS,WAAW,WAAY,WAAsB,IACb,EAAE,WAAW,KAAK,CAAC;EAC9D,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAUvD,IAR+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAEyB,GACvB;EAGF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CAEA,OACE,oBAAC,qBAAD;EAAyB;EAAI,GAAI;YAC/B,oBAAC,cAAD;GACE,WAAU;GACV,SAAS;GACT,cAAY,EAAE,aAAa;GAC3B,eAAY;aAEZ,oBAACA,mBAAD,EAAe,UAAS,UAAW,CAAA;EACvB,CAAA;CACK,CAAA;AAEzB"}

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

@@ -0,0 +1,24 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { Box, styled } from "@mui/material";
+//#region src/components/SwapButton/SwapButton.style.tsx
+const swapButtonZIndex = 1110;
+const SwapIconCard = styled(Card$1)(({ theme }) => ({
+	height: 32,
+	width: 32,
+	fontSize: 16,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	borderRadius: theme.vars.shape.borderRadiusTertiary,
+	zIndex: swapButtonZIndex
+}));
+const SwapButtonContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	margin: theme.spacing(-1.5)
+}));
+//#endregion
+export { SwapButtonContainer, SwapIconCard };
+
+//# sourceMappingURL=SwapButton.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwapButton.style.js","names":["Card"],"sources":["../../../../src/components/SwapButton/SwapButton.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from '../Card/Card.js'\n\n// Sits just above MUI's appBar layer (1100) so the swap icon stays on top of the\n// two overlapping amount cards it bridges.\nconst swapButtonZIndex = 1110\n\nexport const SwapIconCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card\n)(({ theme }) => ({\n  height: 32,\n  width: 32,\n  fontSize: 16,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  zIndex: swapButtonZIndex,\n}))\n\nexport const SwapButtonContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    margin: theme.spacing(-1.5),\n  }))\n"],"mappings":";;;AAMA,MAAM,mBAAmB;AAEzB,MAAa,eAA4D,OACvEA,MACF,CAAC,EAAE,EAAE,aAAa;CAChB,QAAQ;CACR,OAAO;CACP,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,cAAc,MAAM,KAAK,MAAM;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAa,sBACX,OAAO,GAAG,CAAC,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ,MAAM,QAAQ,IAAI;AAC5B,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n  MuiSwitch\n)(({ theme }) => ({\n  width: 42,\n  height: 24,\n  padding: 0,\n  [`.${switchClasses.switchBase}`]: {\n    padding: 0,\n    margin: theme.spacing(0.25),\n    transitionDuration: theme.transitions.duration.standard,\n    [`&.${switchClasses.checked}`]: {\n      transform: 'translateX(18px)',\n      color: theme.vars.palette.common.white,\n      [`& + .${switchClasses.track}`]: {\n        backgroundColor: theme.vars.palette.primary.main,\n        opacity: 1,\n        border: 0,\n      },\n      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n        opacity: 0.5,\n      },\n    },\n    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n      color: theme.vars.palette.primary.main,\n      border: '6px solid',\n      borderColor: theme.vars.palette.common.white,\n    },\n    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n      color: `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"}
+{"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

@@ -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

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

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

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

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

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

@@ -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

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

@@ -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",