@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/esm/components/Card/CardButton.style.js

@@ -1,25 +1,29 @@
-import { Box, ButtonBase, styled, Typography } from '@mui/material';
-export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
-    background: 'none',
-    color: 'inherit',
-    border: 'none',
-    font: 'inherit',
-    cursor: 'pointer',
-    outline: 'inherit',
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: theme.spacing(2),
-    borderRadius: theme.vars.shape.borderRadius,
+import { Box, ButtonBase, Typography, styled } from "@mui/material";
+//#region src/components/Card/CardButton.style.tsx
+const CardRowButton = styled(ButtonBase)(({ theme }) => ({
+	background: "none",
+	color: "inherit",
+	border: "none",
+	font: "inherit",
+	cursor: "pointer",
+	outline: "inherit",
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	padding: theme.spacing(2),
+	borderRadius: theme.vars.shape.borderRadius
 }));
-export const CardValue = styled(Typography)({
-    lineHeight: '1.25',
-    fontWeight: 500,
+const CardValue = styled(Typography)({
+	lineHeight: "1.25",
+	fontWeight: 500
 });
-export const CardTitleContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1.5),
+const CardTitleContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1.5)
 }));
+//#endregion
+export { CardRowButton, CardTitleContainer, CardValue };
+
 //# sourceMappingURL=CardButton.style.js.map

package/dist/esm/components/Card/CardButton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardButton.style.js","sourceRoot":"","sources":["../../../../src/components/Card/CardButton.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEnE,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9D,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,MAAM;IACd,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,MAAM;IACb,cAAc,EAAE,eAAe;IAC/B,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzB,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;CAC5C,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC1C,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,GAAG;CAChB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5D,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;CACxB,CAAC,CAAC,CAAA"}
+{"version":3,"file":"CardButton.style.js","names":[],"sources":["../../../../src/components/Card/CardButton.style.tsx"],"sourcesContent":["import { Box, ButtonBase, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardRowButton: React.FC<React.ComponentProps<typeof ButtonBase>> =\n  styled(ButtonBase)(({ theme }) => ({\n    background: 'none',\n    color: 'inherit',\n    border: 'none',\n    font: 'inherit',\n    cursor: 'pointer',\n    outline: 'inherit',\n    display: 'flex',\n    width: '100%',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: theme.spacing(2),\n    borderRadius: theme.vars.shape.borderRadius,\n  }))\n\nexport const CardValue: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    lineHeight: '1.25',\n    fontWeight: 500,\n  })\n\nexport const CardTitleContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1.5),\n  }))\n"],"mappings":";;AAGA,MAAa,gBACX,OAAO,WAAW,EAAE,EAAE,aAAa;CACjC,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,SAAS,MAAM,QAAQ,EAAE;CACzB,cAAc,MAAM,KAAK,MAAM;CAChC,EAAE;AAEL,MAAa,YACX,OAAO,WAAW,CAAC;CACjB,YAAY;CACZ,YAAY;CACb,CAAC;AAEJ,MAAa,qBACX,OAAO,IAAI,EAAE,EAAE,aAAa;CAC1B,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,IAAI;CACxB,EAAE"}

package/dist/esm/components/Card/CardHeader.js

@@ -1,22 +1,26 @@
-import { cardHeaderClasses, CardHeader as MuiCardHeader, styled, } from '@mui/material';
-export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
-    [`.${cardHeaderClasses.action}`]: {
-        marginTop: -2,
-        alignSelf: 'center',
-    },
-    [`.${cardHeaderClasses.title}`]: {
-        fontWeight: 600,
-        fontSize: 18,
-        lineHeight: 1.3334,
-        color: theme.vars.palette.text.primary,
-        textAlign: 'left',
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-        fontWeight: 500,
-        fontSize: 12,
-        lineHeight: 1.3334,
-        color: theme.vars.palette.text.secondary,
-        textAlign: 'left',
-    },
+import { CardHeader, cardHeaderClasses, styled } from "@mui/material";
+//#region src/components/Card/CardHeader.tsx
+const CardHeader$1 = styled(CardHeader)(({ theme }) => ({
+	[`.${cardHeaderClasses.action}`]: {
+		marginTop: -2,
+		alignSelf: "center"
+	},
+	[`.${cardHeaderClasses.title}`]: {
+		fontWeight: 600,
+		fontSize: 18,
+		lineHeight: 1.3334,
+		color: theme.vars.palette.text.primary,
+		textAlign: "left"
+	},
+	[`.${cardHeaderClasses.subheader}`]: {
+		fontWeight: 500,
+		fontSize: 12,
+		lineHeight: 1.3334,
+		color: theme.vars.palette.text.secondary,
+		textAlign: "left"
+	}
 }));
+//#endregion
+export { CardHeader$1 as CardHeader };
+
 //# sourceMappingURL=CardHeader.js.map

package/dist/esm/components/Card/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../../src/components/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,UAAU,IAAI,aAAa,EAC3B,MAAM,GACP,MAAM,eAAe,CAAA;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC,IAAI,iBAAiB,CAAC,MAAM,EAAE,CAAC,EAAE;QAChC,SAAS,EAAE,CAAC,CAAC;QACb,SAAS,EAAE,QAAQ;KACpB;IACD,CAAC,IAAI,iBAAiB,CAAC,KAAK,EAAE,CAAC,EAAE;QAC/B,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QACtC,SAAS,EAAE,MAAM;KAClB;IACD,CAAC,IAAI,iBAAiB,CAAC,SAAS,EAAE,CAAC,EAAE;QACnC,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;QACxC,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"CardHeader.js","names":["CardHeader","MuiCardHeader"],"sources":["../../../../src/components/Card/CardHeader.tsx"],"sourcesContent":["import {\n  cardHeaderClasses,\n  CardHeader as MuiCardHeader,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const CardHeader: React.FC<React.ComponentProps<typeof MuiCardHeader>> =\n  styled(MuiCardHeader)(({ theme }) => ({\n    [`.${cardHeaderClasses.action}`]: {\n      marginTop: -2,\n      alignSelf: 'center',\n    },\n    [`.${cardHeaderClasses.title}`]: {\n      fontWeight: 600,\n      fontSize: 18,\n      lineHeight: 1.3334,\n      color: theme.vars.palette.text.primary,\n      textAlign: 'left',\n    },\n    [`.${cardHeaderClasses.subheader}`]: {\n      fontWeight: 500,\n      fontSize: 12,\n      lineHeight: 1.3334,\n      color: theme.vars.palette.text.secondary,\n      textAlign: 'left',\n    },\n  }))\n"],"mappings":";;AAOA,MAAaA,eACX,OAAOC,WAAc,EAAE,EAAE,aAAa;EACnC,IAAI,kBAAkB,WAAW;EAChC,WAAW;EACX,WAAW;EACZ;EACA,IAAI,kBAAkB,UAAU;EAC/B,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,WAAW;EACZ;EACA,IAAI,kBAAkB,cAAc;EACnC,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,WAAW;EACZ;CACF,EAAE"}

package/dist/esm/components/Card/CardIconButton.js

@@ -1,12 +1,14 @@
-import { IconButton as MuiIconButton, styled } from '@mui/material';
-export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
-    return {
-        padding: theme.spacing(0.5),
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        '&:hover': {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-        },
-        fontSize: '1rem',
-    };
+import { IconButton, styled } from "@mui/material";
+//#region src/components/Card/CardIconButton.tsx
+const CardIconButton = styled(IconButton)(({ theme }) => {
+	return {
+		padding: theme.spacing(.5),
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` },
+		fontSize: "1rem"
+	};
 });
+//#endregion
+export { CardIconButton };
+
 //# sourceMappingURL=CardIconButton.js.map

package/dist/esm/components/Card/CardIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardIconButton.js","sourceRoot":"","sources":["../../../../src/components/Card/CardIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEnE,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAEjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACd,OAAO;QACL,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAC3B,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;QAChF,SAAS,EAAE;YACT,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;SACjF;QACD,QAAQ,EAAE,MAAM;KACjB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"CardIconButton.js","names":["MuiIconButton"],"sources":["../../../../src/components/Card/CardIconButton.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport { IconButton as MuiIconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const CardIconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> &\n    IconButtonProps &\n    Pick<LinkProps, 'href' | 'target' | 'rel'>\n> = styled(MuiIconButton)<\n  IconButtonProps & Pick<LinkProps, 'href' | 'target' | 'rel'>\n>(({ theme }) => {\n  return {\n    padding: theme.spacing(0.5),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n    '&:hover': {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    },\n    fontSize: '1rem',\n  }\n})\n"],"mappings":";;AAIA,MAAa,iBAIT,OAAOA,WAAc,EAEtB,EAAE,YAAY;AACf,QAAO;EACL,SAAS,MAAM,QAAQ,GAAI;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACD,UAAU;EACX;EACD"}

package/dist/esm/components/Card/CardLabel.js

@@ -1,61 +1,62 @@
-import { Box, styled, Typography } from '@mui/material';
-export const CardLabel = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'variant',
-})(({ theme }) => ({
-    borderRadius: theme.vars.shape.borderRadius,
-    padding: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 24,
-    minWidth: 24,
-    userSelect: 'none',
-    fontSize: '1rem',
-    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,
-    color: theme.vars.palette.text.primary,
-    ...theme.applyStyles('dark', {
-        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,
-    }),
-    variants: [
-        {
-            props: { variant: 'secondary' },
-            style: {
-                color: theme.palette.getContrastText(theme.palette.secondary.main),
-                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
-                ...theme.applyStyles('dark', {
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
-                }),
-            },
-        },
-        {
-            props: { variant: 'success' },
-            style: {
-                backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,
-                color: theme.vars.palette.success.main,
-                ...theme.applyStyles('dark', {
-                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,
-                    color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,
-                }),
-            },
-        },
-    ],
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Card/CardLabel.tsx
+const CardLabel = styled(Box, { shouldForwardProp: (prop) => prop !== "variant" })(({ theme }) => ({
+	borderRadius: theme.vars.shape.borderRadius,
+	padding: 0,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	height: 24,
+	minWidth: 24,
+	userSelect: "none",
+	fontSize: "1rem",
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,
+	color: theme.vars.palette.text.primary,
+	...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)` }),
+	variants: [
+		{
+			props: { variant: "secondary" },
+			style: {
+				color: theme.palette.getContrastText(theme.palette.secondary.main),
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,
+				...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})` })
+			}
+		},
+		{
+			props: { variant: "success" },
+			style: {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,
+				color: theme.vars.palette.success.main,
+				...theme.applyStyles("dark", {
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,
+					color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`
+				})
+			}
+		},
+		{
+			props: { variant: "warning" },
+			style: {
+				backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,
+				color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,
+				...theme.applyStyles("dark", {
+					backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,
+					color: theme.vars.palette.warning.main
+				})
+			}
+		}
+	]
 }));
-export const CardLabelTypography = styled(Typography, {
-    shouldForwardProp: (prop) => prop !== 'type',
-})(({ theme }) => ({
-    padding: theme.spacing(0.75, 1.5),
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: '600',
-    variants: [
-        {
-            props: {
-                type: 'icon',
-            },
-            style: {
-                padding: theme.spacing(0.75, 0, 0.75, 0.75),
-            },
-        },
-    ],
+const CardLabelTypography = styled(Typography, { shouldForwardProp: (prop) => prop !== "type" })(({ theme }) => ({
+	padding: theme.spacing(.75, 1.5),
+	fontSize: 12,
+	lineHeight: 1,
+	fontWeight: "600",
+	variants: [{
+		props: { type: "icon" },
+		style: { padding: theme.spacing(.75, 0, .75, .75) }
+	}]
 }));
+//#endregion
+export { CardLabel, CardLabelTypography };
+
 //# sourceMappingURL=CardLabel.js.map

package/dist/esm/components/Card/CardLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardLabel.js","sourceRoot":"","sources":["../../../../src/components/Card/CardLabel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CardLabel.js","names":[],"sources":["../../../../src/components/Card/CardLabel.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardLabel: React.FC<\n  React.ComponentProps<typeof Box> & {\n    variant?: 'secondary' | 'success' | 'warning'\n  }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'variant',\n})<{ variant?: 'secondary' | 'success' | 'warning' }>(({ theme }) => ({\n  borderRadius: theme.vars.shape.borderRadius,\n  padding: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  height: 24,\n  minWidth: 24,\n  userSelect: 'none',\n  fontSize: '1rem',\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 88%, black)`,\n  color: theme.vars.palette.text.primary,\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, white)`,\n  }),\n  variants: [\n    {\n      props: { variant: 'secondary' },\n      style: {\n        color: theme.palette.getContrastText(theme.palette.secondary.main),\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 20%, ${theme.vars.palette.secondary.main})`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'success' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 84%, ${theme.vars.palette.success.main})`,\n        color: theme.vars.palette.success.main,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 76%, ${theme.vars.palette.success.main})`,\n          color: `color-mix(in srgb, ${theme.vars.palette.success.main} 76%, white)`,\n        }),\n      },\n    },\n    {\n      props: { variant: 'warning' },\n      style: {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n        color: `color-mix(in srgb, ${theme.vars.palette.warning.main} 64%, black)`,\n        ...theme.applyStyles('dark', {\n          backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n          color: theme.vars.palette.warning.main,\n        }),\n      },\n    },\n  ],\n}))\n\nexport const CardLabelTypography: React.FC<\n  React.ComponentProps<typeof Typography> & { type?: 'icon' }\n> = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'type',\n})<{ type?: 'icon' }>(({ theme }) => ({\n  padding: theme.spacing(0.75, 1.5),\n  fontSize: 12,\n  lineHeight: 1,\n  fontWeight: '600',\n  variants: [\n    {\n      props: {\n        type: 'icon',\n      },\n      style: {\n        padding: theme.spacing(0.75, 0, 0.75, 0.75),\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAGA,MAAa,YAIT,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,WACvC,CAAC,EAAqD,EAAE,aAAa;CACpE,cAAc,MAAM,KAAK,MAAM;CAC/B,SAAS;CACT,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;CACV,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;CAC3E,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;CACF,UAAU;EACR;GACE,OAAO,EAAE,SAAS,aAAa;GAC/B,OAAO;IACL,OAAO,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,UAAU,KAAK;IAClE,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK;IACrH,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,UAAU,KAAK,IACtH,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACnH,OAAO,MAAM,KAAK,QAAQ,QAAQ;IAClC,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,QAAQ,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACnH,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KAC9D,CAAC;IACH;GACF;EACD;GACE,OAAO,EAAE,SAAS,WAAW;GAC7B,OAAO;IACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,OAAO,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IAC7D,GAAG,MAAM,YAAY,QAAQ;KAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACvE,OAAO,MAAM,KAAK,QAAQ,QAAQ;KACnC,CAAC;IACH;GACF;EACF;CACF,EAAE;AAEH,MAAa,sBAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,SAAS,QACvC,CAAC,EAAqB,EAAE,aAAa;CACpC,SAAS,MAAM,QAAQ,KAAM,IAAI;CACjC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,UAAU,CACR;EACE,OAAO,EACL,MAAM,QACP;EACD,OAAO,EACL,SAAS,MAAM,QAAQ,KAAM,GAAG,KAAM,IAAK,EAC5C;EACF,CACF;CACF,EAAE"}

package/dist/esm/components/Card/CardTitle.js

@@ -1,26 +1,22 @@
-import { styled, Typography } from '@mui/material';
-export const CardTitle = styled(Typography, {
-    shouldForwardProp: (prop) => !['required'].includes(prop),
-})(({ theme }) => ({
-    fontSize: 14,
-    lineHeight: 1,
-    fontWeight: 700,
-    padding: theme.spacing(2, 2, 0, 2),
-    textAlign: 'left',
-    color: theme.vars.palette.text.primary,
-    '&:after': {
-        content: 'none',
-        color: theme.vars.palette.error.main,
-    },
-    variants: [
-        {
-            props: ({ required }) => required,
-            style: {
-                '&:after': {
-                    content: '" *"',
-                },
-            },
-        },
-    ],
+import { Typography, styled } from "@mui/material";
+//#region src/components/Card/CardTitle.tsx
+const CardTitle = styled(Typography, { shouldForwardProp: (prop) => !["required"].includes(prop) })(({ theme }) => ({
+	fontSize: 14,
+	lineHeight: 1,
+	fontWeight: 700,
+	padding: theme.spacing(2, 2, 0, 2),
+	textAlign: "left",
+	color: theme.vars.palette.text.primary,
+	"&:after": {
+		content: "none",
+		color: theme.vars.palette.error.main
+	},
+	variants: [{
+		props: ({ required }) => required,
+		style: { "&:after": { content: "\" *\"" } }
+	}]
 }));
+//#endregion
+export { CardTitle };
+
 //# sourceMappingURL=CardTitle.js.map

package/dist/esm/components/Card/CardTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardTitle.js","sourceRoot":"","sources":["../../../../src/components/Card/CardTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,EAAE;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACpE,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACzC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;IACtC,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI;KACrC;IACD,QAAQ,EAAE;QACR;YACE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACjC,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;KACF;CACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"CardTitle.js","names":[],"sources":["../../../../src/components/Card/CardTitle.tsx"],"sourcesContent":["import { styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const CardTitle: React.FC<\n  React.ComponentProps<typeof Typography> & { required?: boolean }\n> = styled(Typography, {\n  shouldForwardProp: (prop) => !['required'].includes(prop as string),\n})<{ required?: boolean }>(({ theme }) => ({\n  fontSize: 14,\n  lineHeight: 1,\n  fontWeight: 700,\n  padding: theme.spacing(2, 2, 0, 2),\n  textAlign: 'left',\n  color: theme.vars.palette.text.primary,\n  '&:after': {\n    content: 'none',\n    color: theme.vars.palette.error.main,\n  },\n  variants: [\n    {\n      props: ({ required }) => required,\n      style: {\n        '&:after': {\n          content: '\" *\"',\n        },\n      },\n    },\n  ],\n}))\n"],"mappings":";;AAGA,MAAa,YAET,OAAO,YAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,EAAE;CAClC,WAAW;CACX,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;EACT,SAAS;EACT,OAAO,MAAM,KAAK,QAAQ,MAAM;EACjC;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,EACL,WAAW,EACT,SAAS,UACV,EACF;EACF,CACF;CACF,EAAE"}

package/dist/esm/components/Card/InputCard.js

@@ -1,7 +1,11 @@
-import { styled } from '@mui/material';
-import { Card } from './Card.js';
-export const InputCard = styled(Card, {
-    name: 'MuiInputCard',
-    slot: 'root',
+import { Card as Card$1 } from "./Card.js";
+import { styled } from "@mui/material";
+//#region src/components/Card/InputCard.tsx
+const InputCard = styled(Card$1, {
+	name: "MuiInputCard",
+	slot: "root"
 })({});
+//#endregion
+export { InputCard };
+
 //# sourceMappingURL=InputCard.js.map

package/dist/esm/components/Card/InputCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCard.js","sourceRoot":"","sources":["../../../../src/components/Card/InputCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE;IACpC,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"InputCard.js","names":["Card"],"sources":["../../../../src/components/Card/InputCard.tsx"],"sourcesContent":["import { styled } from '@mui/material'\nimport type React from 'react'\nimport { Card } from './Card.js'\n\nexport const InputCard: React.FC<React.ComponentProps<typeof Card>> = styled(\n  Card,\n  {\n    name: 'MuiInputCard',\n    slot: 'root',\n  }\n)({})\n"],"mappings":";;;AAIA,MAAa,YAAyD,OACpEA,QACA;CACE,MAAM;CACN,MAAM;CACP,CACF,CAAC,EAAE,CAAC"}

package/dist/esm/components/ChainSelect/ChainSelect.js

@@ -1,62 +1,124 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton, Tooltip, useMediaQuery } from '@mui/material';
-import { useNavigate } from '@tanstack/react-router';
-import { memo, useCallback, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
-import { maxChainsToOrder, maxChainsToShow, maxGridItemsToShow, } from '../../stores/chains/createChainOrderStore.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { AllChainsAvatar } from '../Chains/AllChainsAvatar.js';
-import { ChainAvatar, ChainCard, ChainContainer, MoreChainsBox, MoreChainsText, } from './ChainSelect.style.js';
-import { useChainSelect } from './useChainSelect.js';
-export const ChainSelect = memo(({ formType }) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
-    const { setFieldValue } = useFieldActions();
-    const { chainOrder, chains, isLoading, getSelectedChains, setChainOrder, setCurrentChain, } = useChainSelect(formType);
-    const [showAllNetworks, isAllNetworks, setIsAllNetworks] = useChainOrderStore((state) => [
-        state[`${formType}ShowAllNetworks`],
-        state[`${formType}IsAllNetworks`],
-        state.setIsAllNetworks,
-    ]);
-    const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
-    useEffect(() => {
-        if (chainId) {
-            const hasChainInOrderedList = chainOrder.includes(chainId);
-            // If we don't have a chain in the ordered chain list we should add it.
-            if (!hasChainInOrderedList) {
-                setChainOrder(chainId, formType);
-            }
-        }
-    }, [chainId, chainOrder, formType, setChainOrder]);
-    const onChainSelect = useCallback((selectedChainId) => {
-        setIsAllNetworks(false, formType);
-        setCurrentChain(selectedChainId);
-    }, [setIsAllNetworks, setCurrentChain, formType]);
-    const showAllChains = useCallback(() => {
-        navigate({ to: navigationRoutes[`${formType}Chain`] });
-    }, [navigate, formType]);
-    const selectAllNetworks = useCallback(() => {
-        setIsAllNetworks(true, formType);
-        // Reset the chain and token fields when selecting all networks
-        setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true });
-        setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true });
-    }, [setIsAllNetworks, formType, setFieldValue]);
-    const chainsToHide = chains?.length === maxChainsToShow
-        ? 0
-        : (chains?.length ?? 0) - maxChainsToOrder;
-    const chainsToShow = useMemo(() => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [], [chainsToHide, getSelectedChains, chains]);
-    const tilesCount = chainsToShow.length + (showAllNetworks ? 1 : 0) + (chainsToHide > 0 ? 1 : 0);
-    if (isLoading) {
-        return (_jsx(ChainContainer, { itemCount: tilesCount, children: Array.from({ length: maxGridItemsToShow }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: isMobile ? 36 : 56, sx: { borderRadius: 1 } }, index))) }));
-    }
-    return (_jsxs(ChainContainer, { itemCount: tilesCount, children: [showAllNetworks && (_jsx(Tooltip, { title: t('main.allNetworks'), enterNextDelay: 100, children: _jsx(ChainCard, { component: "button", onClick: selectAllNetworks, type: isAllNetworks ? 'selected' : 'default', selectionColor: "secondary", children: _jsx(AllChainsAvatar, { chains: chains ?? [], size: isMobile ? 'small' : 'medium' }) }) })), chainsToShow.map((chain) => (_jsx(ChainItem, { chain: chain, isSelected: chainId === chain.id, isAllNetworks: isAllNetworks, onSelect: onChainSelect }, chain.id))), chainsToHide > 0 && (_jsx(ChainCard, { component: "button", onClick: showAllChains, children: _jsx(MoreChainsBox, { children: _jsxs(MoreChainsText, { children: ["+", chainsToHide] }) }) }))] }));
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { useChainSelect } from "./useChainSelect.js";
+import { AllChainsAvatar } from "../Chains/AllChainsAvatar.js";
+import { ChainAvatar, ChainCard, ChainContainer, MoreChainsBox, MoreChainsText } from "./ChainSelect.style.js";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Skeleton, Tooltip, useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/ChainSelect/ChainSelect.tsx
+const ChainSelect = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
+	const { setFieldValue } = useFieldActions();
+	const { chainOrder, chains, isLoading, getSelectedChains, setChainOrder, setCurrentChain } = useChainSelect(formType);
+	const [showAllNetworks, isAllNetworks, setIsAllNetworks] = useChainOrderStore((state) => [
+		state[`${formType}ShowAllNetworks`],
+		state[`${formType}IsAllNetworks`],
+		state.setIsAllNetworks
+	]);
+	const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
+	useEffect(() => {
+		if (chainId) {
+			if (!chainOrder.includes(chainId)) setChainOrder(chainId, formType);
+		}
+	}, [
+		chainId,
+		chainOrder,
+		formType,
+		setChainOrder
+	]);
+	const onChainSelect = useCallback((selectedChainId) => {
+		setIsAllNetworks(false, formType);
+		setCurrentChain(selectedChainId);
+	}, [
+		setIsAllNetworks,
+		setCurrentChain,
+		formType
+	]);
+	const showAllChains = useCallback(() => {
+		navigate({ to: navigationRoutes[`${formType}Chain`] });
+	}, [navigate, formType]);
+	const selectAllNetworks = useCallback(() => {
+		setIsAllNetworks(true, formType);
+		setFieldValue(FormKeyHelper.getChainKey(formType), "", { isTouched: true });
+		setFieldValue(FormKeyHelper.getTokenKey(formType), "", { isTouched: true });
+	}, [
+		setIsAllNetworks,
+		formType,
+		setFieldValue
+	]);
+	const chainsToHide = chains?.length === 9 ? 0 : (chains?.length ?? 0) - 8;
+	const chainsToShow = useMemo(() => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [], [
+		chainsToHide,
+		getSelectedChains,
+		chains
+	]);
+	const tilesCount = chainsToShow.length + (showAllNetworks ? 1 : 0) + (chainsToHide > 0 ? 1 : 0);
+	if (isLoading) return /* @__PURE__ */ jsx(ChainContainer, {
+		itemCount: tilesCount,
+		children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, {
+			variant: "rectangular",
+			width: 56,
+			height: isMobile ? 36 : 56,
+			sx: { borderRadius: 1 }
+		}, index))
+	});
+	return /* @__PURE__ */ jsxs(ChainContainer, {
+		itemCount: tilesCount,
+		children: [
+			showAllNetworks && /* @__PURE__ */ jsx(Tooltip, {
+				title: t("main.allNetworks"),
+				enterNextDelay: 100,
+				children: /* @__PURE__ */ jsx(ChainCard, {
+					component: "button",
+					onClick: selectAllNetworks,
+					type: isAllNetworks ? "selected" : "default",
+					selectionColor: "secondary",
+					children: /* @__PURE__ */ jsx(AllChainsAvatar, {
+						chains: chains ?? [],
+						size: isMobile ? "small" : "medium"
+					})
+				})
+			}),
+			chainsToShow.map((chain) => /* @__PURE__ */ jsx(ChainItem, {
+				chain,
+				isSelected: chainId === chain.id,
+				isAllNetworks,
+				onSelect: onChainSelect
+			}, chain.id)),
+			chainsToHide > 0 && /* @__PURE__ */ jsx(ChainCard, {
+				component: "button",
+				onClick: showAllChains,
+				children: /* @__PURE__ */ jsx(MoreChainsBox, { children: /* @__PURE__ */ jsxs(MoreChainsText, { children: ["+", chainsToHide] }) })
+			})
+		]
+	});
 });
-const ChainItem = memo(({ chain, isSelected, isAllNetworks, onSelect, }) => {
-    return (_jsx(Tooltip, { title: chain.name, enterNextDelay: 100, children: _jsx(ChainCard, { component: "button", onClick: () => onSelect(chain.id), type: !isAllNetworks && isSelected ? 'selected' : 'default', selectionColor: "secondary", children: _jsx(ChainAvatar, { src: chain.logoURI, alt: chain.key, children: chain.name[0] }) }) }));
+const ChainItem = memo(({ chain, isSelected, isAllNetworks, onSelect }) => {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: chain.name,
+		enterNextDelay: 100,
+		children: /* @__PURE__ */ jsx(ChainCard, {
+			component: "button",
+			onClick: () => onSelect(chain.id),
+			type: !isAllNetworks && isSelected ? "selected" : "default",
+			selectionColor: "secondary",
+			children: /* @__PURE__ */ jsx(ChainAvatar, {
+				src: chain.logoURI,
+				alt: chain.key,
+				children: chain.name[0]
+			})
+		})
+	});
 });
+//#endregion
+export { ChainSelect };
+
 //# sourceMappingURL=ChainSelect.js.map