@xyo-network/react-shared 2.25.38 → 2.25.41

package/dist/esm/components/BasicHero/BasicHero.js

@@ -1,8 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Container, Grid, Typography, useTheme } from '@mui/material';
+import { Container, Grid, Typography } from '@mui/material';
 import { ButtonEx, FlexGrowCol, FlexGrowRow, LinkEx } from '@xylabs/sdk-react';
-import { useIsMobile } from '../../hooks';
-import { colorfulGradientDarkMode, colorfulGradientLightMode } from '../GradientText';
+import { useGradientStyles, useIsMobile } from '../../hooks';
 const SubLinkSection = ({ subLinkText1, subLinkText2, subLinkPath, subLinkIcon, backgroundImageAlignment }) => {
     return (_jsxs(FlexGrowRow, { width: "100%", sx: { flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }, children: [subLinkIcon ? _jsxs("span", { children: [subLinkIcon, "\u00A0"] }) : null, _jsxs(Typography, { children: [subLinkText1, "\u00A0"] }), _jsx(LinkEx, { href: subLinkPath, underline: "always", target: "_blank", color: "inherit", children: _jsx(Typography, { children: subLinkText2 }) })] }));
 };
@@ -12,8 +11,7 @@ const ButtonSection = ({ href, to, buttonText }) => {
 };
 export const BasicHero = ({ backgroundImage, title, gradientTitle, backgroundColor, textColor, desc, heroImage, title2, subLinkText1, subLinkText2, subLinkPath, button1Text, button2Text, button2To, button1To, button2Href, button1Href, subLinkIcon, sx, ...props }) => {
     const isMobile = useIsMobile();
-    const theme = useTheme();
-    const classes = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode();
+    const { classes } = useGradientStyles();
     return (_jsx(FlexGrowCol, { sx: {
             backgroundImage: `url(${backgroundImage})`,
             backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },
@@ -31,6 +29,6 @@ export const BasicHero = ({ backgroundImage, title, gradientTitle, backgroundCol
         }, ...props, children: _jsx(Container, { children: _jsxs(Grid, { container: true, justifyContent: "center", alignItems: "center", sx: {
                     alignItems: { xs: 'center' },
                     justifyContent: { xs: 'center' },
-                }, children: [_jsx(Grid, { item: true, xs: 12, sm: 8, md: backgroundImage ? 6 : 8, lg: backgroundImage ? 6 : 8, children: _jsxs(FlexGrowCol, { paddingY: 2, sx: { alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }, children: [_jsxs(Typography, { variant: "h1", component: "h1", gutterBottom: true, textAlign: backgroundImage && !isMobile ? 'left' : 'center', children: [title ? _jsx("span", { children: `${title} ` }) : null, gradientTitle ? _jsxs("span", { className: classes.heading, children: [" ", ` ${gradientTitle}`] }) : null, title2 ? _jsx("span", { children: ` ${title2}` }) : null] }), _jsx(Typography, { variant: "body1", component: "h2", gutterBottom: true, textAlign: backgroundImage && !isMobile ? 'left' : 'center', children: desc }), _jsxs(FlexGrowRow, { sx: { flexDirection: { lg: 'row', xs: 'column' } }, width: "100%", marginTop: 1, children: [_jsx(ButtonSection, { href: button1Href, to: button1To, buttonText: button1Text }), _jsx(ButtonSection, { href: button2Href, to: button2To, buttonText: button2Text })] }), _jsx(SubLinkSection, { subLinkIcon: subLinkIcon, subLinkText1: subLinkText1, subLinkText2: subLinkText2, subLinkPath: subLinkPath, backgroundImageAlignment: backgroundImage ? true : false })] }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: heroImage ? _jsx("img", { src: heroImage, width: "100%" }) : null })] }) }) }));
+                }, children: [_jsx(Grid, { item: true, xs: 12, sm: 8, md: backgroundImage ? 6 : 8, lg: backgroundImage ? 6 : 8, children: _jsxs(FlexGrowCol, { paddingY: 2, sx: { alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }, children: [_jsxs(Typography, { variant: "h1", component: "h1", gutterBottom: true, textAlign: backgroundImage && !isMobile ? 'left' : 'center', children: [title ? _jsx("span", { children: `${title} ` }) : null, gradientTitle ? _jsxs("span", { className: classes().heading, children: [" ", ` ${gradientTitle}`] }) : null, title2 ? _jsx("span", { children: ` ${title2}` }) : null] }), _jsx(Typography, { variant: "body1", component: "h2", gutterBottom: true, textAlign: backgroundImage && !isMobile ? 'left' : 'center', children: desc }), _jsxs(FlexGrowRow, { sx: { flexDirection: { lg: 'row', xs: 'column' } }, width: "100%", marginTop: 1, children: [_jsx(ButtonSection, { href: button1Href, to: button1To, buttonText: button1Text }), _jsx(ButtonSection, { href: button2Href, to: button2To, buttonText: button2Text })] }), _jsx(SubLinkSection, { subLinkIcon: subLinkIcon, subLinkText1: subLinkText1, subLinkText2: subLinkText2, subLinkPath: subLinkPath, backgroundImageAlignment: backgroundImage ? true : false })] }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: heroImage ? _jsx("img", { src: heroImage, width: "100%" }) : null })] }) }) }));
 };
 //# sourceMappingURL=BasicHero.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BasicHero.js","sourceRoot":"","sources":["../../../../src/components/BasicHero/BasicHero.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BasicHero.js","sourceRoot":"","sources":["../../../../src/components/BasicHero/BasicHero.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/CardEx.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CardProps } from '@mui/material';
+export interface CardExProps extends CardProps {
+    gradient?: 'border' | 'background';
+}
+export declare const CardEx: React.FC<CardExProps>;

package/dist/esm/components/CardEx.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from '@mui/material';
+import { useGradientStyles } from '../hooks';
+export const CardEx = ({ style, gradient, ...props }) => {
+    const { styles } = useGradientStyles();
+    const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {};
+    return _jsx(Card, { style: { ...gradientStyle, ...style }, ...props });
+};
+//# sourceMappingURL=CardEx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAM5C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,GAAG,aAAa,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AACnE,CAAC,CAAA"}

package/dist/esm/components/Footer/Copyright.js.map

@@ -1 +1 @@
-{"version":3,"file":"Copyright.js","sourceRoot":"","sources":["../../../../src/components/Footer/Copyright.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,EAAgB,OAAO,EAAuB,MAAM,mBAAmB,CAAA;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMnC,MAAM,WAAW,GAAkB;IACjC;QACE,IAAI,EAAE,qBAAqB;QAC3B,KAAK,EAAE,eAAe,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,gBAAgB;KAC/D;IACD;QACE,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,gBAAgB;KACxB;IACD;QACE,IAAI,EAAE,6BAA6B;QACnC,KAAK,EAAE,SAAS;KACjB;IACD;QACE,IAAI,EAAE,2BAA2B;QACjC,KAAK,EAAE,OAAO;KACf;IACD;QACE,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,SAAS;KACjB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAClF,MAAC,OAAO,IAAC,QAAQ,EAAC,MAAM,EAAC,aAAa,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aAC5F,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,UAAU,IAAC,MAAM,QAAa,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAM,UAAU,YACnE,0BAAQ,UAAU,CAAC,KAAK,GAAS,IADX,KAAK,CAEhB,CACd,CAAC,EACD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,YACnE,KAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,GAAG,GAC1C,CACX,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA"}
+{"version":3,"file":"Copyright.js","sourceRoot":"","sources":["../../../../src/components/Footer/Copyright.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,EAAgB,OAAO,EAAe,MAAM,mBAAmB,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMnC,MAAM,WAAW,GAAkB;IACjC;QACE,IAAI,EAAE,qBAAqB;QAC3B,KAAK,EAAE,eAAe,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,gBAAgB;KAC/D;IACD;QACE,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,gBAAgB;KACxB;IACD;QACE,IAAI,EAAE,6BAA6B;QACnC,KAAK,EAAE,SAAS;KACjB;IACD;QACE,IAAI,EAAE,2BAA2B;QACjC,KAAK,EAAE,OAAO;KACf;IACD;QACE,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,SAAS;KACjB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAClF,MAAC,OAAO,IAAC,QAAQ,EAAC,MAAM,EAAC,aAAa,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,aAC5F,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,UAAU,IAAC,MAAM,QAAa,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,KAAM,UAAU,YACnE,0BAAQ,UAAU,CAAC,KAAK,GAAS,IADX,KAAK,CAEhB,CACd,CAAC,EACD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,YACnE,KAAC,aAAa,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,GAAG,GAC1C,CACX,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA"}

package/dist/esm/components/ListItemButtonEx.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ListItemButtonProps } from '@mui/material';
+import { NavigateOptions, To } from 'react-router-dom';
+export interface ListItemButtonExProps extends ListItemButtonProps {
+    target?: string;
+    to?: To;
+    toOptions?: NavigateOptions;
+}
+export declare const ListItemButtonExTo: React.FC<ListItemButtonExProps>;
+export declare const ListItemButtonEx: React.FC<ListItemButtonExProps>;

package/dist/esm/components/ListItemButtonEx.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItemButton } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+export const ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
+    const navigate = useNavigate();
+    const localOnClick = (event) => {
+        onClick?.(event);
+        if (to) {
+            navigate(to, toOptions);
+        }
+    };
+    return _jsx(ListItemButton, { onClick: localOnClick, ...props });
+};
+export const ListItemButtonEx = ({ to, ...props }) => {
+    if (to) {
+        return _jsx(ListItemButtonExTo, { to: to, ...props });
+    }
+    else {
+        return _jsx(ListItemButtonEx, { ...props });
+    }
+};
+//# sourceMappingURL=ListItemButtonEx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemButtonEx.js","sourceRoot":"","sources":["../../../src/components/ListItemButtonEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAuB,MAAM,eAAe,CAAA;AAEnE,OAAO,EAAuB,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAQnE,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC1G,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAChB,IAAI,EAAE,EAAE;YACN,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC,CAAA;SACxB;IACH,CAAC,CAAA;IAED,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,YAAY,KAAM,KAAK,GAAI,CAAA;AAC7D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpF,IAAI,EAAE,EAAE;QACN,OAAO,KAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,KAAM,KAAK,GAAI,CAAA;KACjD;SAAM;QACL,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAA;KACvC;AACH,CAAC,CAAA"}

package/dist/esm/components/SimpleCard/SimpleCard.d.ts

@@ -1,7 +1,7 @@
-import { CardProps } from '@mui/material';
 import { ReactNode } from 'react';
 import { To } from 'react-router-dom';
-export interface SimpleCardProps extends CardProps {
+import { CardExProps } from '../CardEx';
+export interface SimpleCardProps extends CardExProps {
     headline?: ReactNode;
     desc?: ReactNode;
     href?: string;

package/dist/esm/components/SimpleCard/SimpleCard.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
-import { alpha, Card, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material';
+import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material';
 import { FlexCol, FlexGrowCol } from '@xylabs/sdk-react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useIsMobile } from '../../hooks';
+import { CardEx } from '../CardEx';
 export const SimpleCard = ({ iconImage, subtitle, headline, small, desc, href, to, interactionVariant = 'card', media, ...props }) => {
     const theme = useTheme();
     const [raised, setRaised] = useState(false);
@@ -16,11 +17,11 @@ export const SimpleCard = ({ iconImage, subtitle, headline, small, desc, href, t
     const externalRouteChange = (href) => {
         href ? window.open(href) : navigate('/404');
     };
-    return (_jsxs(Card, { elevation: raised ? 3 : 0, style: { height: '100%', justifyContent: 'space-between', width: '100%' }, ...props, sx: {
+    return (_jsxs(CardEx, { elevation: raised ? 3 : 0, style: { height: '100%', justifyContent: 'space-between', width: '100%' }, sx: {
             '&:hover': {
                 cursor: interactionVariant == 'button' ? 'pointer' : null,
             },
             backgroundColor: alpha(theme.palette.primary.light, 0.05),
-        }, onMouseEnter: () => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null), onMouseLeave: () => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null), onClick: () => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null), children: [media ? _jsx(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null, _jsx(CardContent, { sx: { height: '100%' }, children: _jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [iconImage ? _jsx("img", { src: iconImage, height: "40px", style: { paddingBottom: '8px' } }) : null, typeof headline === 'string' ? (_jsx(Typography, { variant: small ? 'body1' : 'h6', textAlign: "left", gutterBottom: true, children: headline })) : (headline), subtitle ? (_jsx(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle })) : null, _jsx(Typography, { variant: small ? 'caption' : 'body1', textAlign: "left", gutterBottom: true, children: desc })] }) }), interactionVariant == 'button' ? (_jsx(CardActions, { children: _jsx(FlexGrowCol, { alignItems: "flex-end", children: _jsx(IconButton, { color: raised ? 'secondary' : 'primary', size: small ? 'small' : 'medium', onClick: () => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')), disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, children: _jsx(ArrowForwardRoundedIcon, { fontSize: small ? 'small' : 'medium' }) }) }) })) : null] }));
+        }, onMouseEnter: () => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null), onMouseLeave: () => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null), onClick: () => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null), ...props, children: [media ? _jsx(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null, _jsx(CardContent, { sx: { height: '100%' }, children: _jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [iconImage ? _jsx("img", { src: iconImage, height: "40px", style: { paddingBottom: '8px' } }) : null, typeof headline === 'string' ? (_jsx(Typography, { variant: small ? 'body1' : 'h6', textAlign: "left", gutterBottom: true, children: headline })) : (headline), subtitle ? (_jsx(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle })) : null, _jsx(Typography, { variant: small ? 'caption' : 'body1', textAlign: "left", gutterBottom: true, children: desc })] }) }), interactionVariant == 'button' ? (_jsx(CardActions, { children: _jsx(FlexGrowCol, { alignItems: "flex-end", children: _jsx(IconButton, { color: raised ? 'secondary' : 'primary', size: small ? 'small' : 'medium', onClick: () => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')), disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, children: _jsx(ArrowForwardRoundedIcon, { fontSize: small ? 'small' : 'medium' }) }) }) })) : null] }));
 };
 //# sourceMappingURL=SimpleCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleCard.js","sourceRoot":"","sources":["../../../../src/components/SimpleCard/SimpleCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SimpleCard.js","sourceRoot":"","sources":["../../../../src/components/SimpleCard/SimpleCard.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TypographyEx.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TypographyProps } from '@mui/material';
+export interface TypographyExProps extends TypographyProps {
+    gradient?: 'text';
+}
+export declare const TypographyEx: React.FC<TypographyExProps>;

package/dist/esm/components/TypographyEx.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { useGradientStyles } from '../hooks';
+export const TypographyEx = ({ gradient, ...props }) => {
+    const { classes } = useGradientStyles();
+    return _jsx(Typography, { className: gradient === 'text' ? classes().heading : undefined, ...props });
+};
+//# sourceMappingURL=TypographyEx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypographyEx.js","sourceRoot":"","sources":["../../../src/components/TypographyEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAM5C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClF,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACvC,OAAO,KAAC,UAAU,IAAC,SAAS,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KAAM,KAAK,GAAI,CAAA;AAClG,CAAC,CAAA"}

package/dist/esm/components/index.d.ts

@@ -6,8 +6,8 @@ export * from './ErrorPage';
 export * from './FlexPage';
 export * from './Footer';
 export * from './FullWidthCard';
-export * from './GradientText';
 export * from './JsonRouteWrapper';
+export * from './ListItemButtonEx';
 export * from './NotFound';
 export * from './Pipe';
 export * from './ScrollTableOnSm';
@@ -15,3 +15,4 @@ export * from './SectionSpacingRow';
 export * from './SimpleCard';
 export * from './TableCell';
 export * from './TypeDocViewer';
+export * from './TypographyEx';

package/dist/esm/components/index.js

@@ -6,8 +6,8 @@ export * from './ErrorPage';
 export * from './FlexPage';
 export * from './Footer';
 export * from './FullWidthCard';
-export * from './GradientText';
 export * from './JsonRouteWrapper';
+export * from './ListItemButtonEx';
 export * from './NotFound';
 export * from './Pipe';
 export * from './ScrollTableOnSm';
@@ -15,4 +15,5 @@ export * from './SectionSpacingRow';
 export * from './SimpleCard';
 export * from './TableCell';
 export * from './TypeDocViewer';
+export * from './TypographyEx';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA"}

package/dist/esm/hooks/GradientStyles/GradientStyles.d.ts

@@ -0,0 +1,66 @@
+import { CSSProperties } from 'react';
+export interface GradientStyles {
+    background: CSSProperties;
+    border: CSSProperties;
+    heading: CSSProperties;
+}
+export declare const colorfulGradientLightMode: () => {
+    background: {
+        backgroundImage: string;
+    };
+    border: {
+        borderImage: string;
+        borderImageSlice: number;
+        borderImageSource: string;
+        borderRadius: number;
+        borderStyle: string;
+        borderWidth: string;
+    };
+    heading: {
+        WebkitBackgroundClip: string;
+        WebkitTextFillColor: string;
+        background: string;
+        display: string;
+    };
+};
+export declare const colorfulGradientDarkMode: () => {
+    background: {
+        backgroundImage: string;
+    };
+    border: {
+        borderImage: string;
+        borderImageSlice: number;
+        borderImageSource: string;
+        borderRadius: number;
+        borderStyle: string;
+        borderWidth: string;
+    };
+    heading: {
+        WebkitBackgroundClip: string;
+        WebkitTextFillColor: string;
+        background: string;
+        display: string;
+    };
+};
+export declare const useGradientStyles: () => {
+    classes: (props?: any) => import("@mui/styles").ClassNameMap<"border" | "background" | "heading">;
+    styles: {
+        background: {
+            backgroundImage: string;
+        };
+        border: {
+            borderImage: string;
+            borderImageSlice: number;
+            borderImageSource: string;
+            borderRadius: number;
+            borderStyle: string;
+            borderWidth: string;
+        };
+        heading: {
+            WebkitBackgroundClip: string;
+            WebkitTextFillColor: string;
+            background: string;
+            display: string;
+        };
+    };
+};

package/dist/esm/hooks/GradientStyles/GradientStyles.js

@@ -0,0 +1,51 @@
+import { useTheme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+export const colorfulGradientLightMode = () => {
+    return {
+        background: {
+            backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+        },
+        border: {
+            borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+            borderImageSlice: 1,
+            borderImageSource: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+            borderRadius: 0,
+            borderStyle: 'solid',
+            borderWidth: '2px',
+        },
+        heading: {
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+            display: 'inline-block',
+        },
+    };
+};
+export const colorfulGradientDarkMode = () => {
+    return {
+        background: {
+            backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+        },
+        border: {
+            borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+            borderImageSlice: 1,
+            borderImageSource: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+            borderRadius: 0,
+            borderStyle: 'solid',
+            borderWidth: '2px',
+        },
+        heading: {
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+            display: 'inline-block',
+        },
+    };
+};
+export const useGradientStyles = () => {
+    const theme = useTheme();
+    const styles = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode();
+    const classes = makeStyles(styles);
+    return { classes, styles };
+};
+//# sourceMappingURL=GradientStyles.js.map

package/dist/esm/hooks/GradientStyles/GradientStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientStyles.js","sourceRoot":"","sources":["../../../../src/hooks/GradientStyles/GradientStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAA;AAStD,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,OAAO;QACL,UAAU,EAAE;YACV,eAAe,EAAE,qEAAqE;SACvF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,qEAAqE;YAClF,gBAAgB,EAAE,CAAC;YACnB,iBAAiB,EAAE,qEAAqE;YACxF,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,KAAK;SACnB;QACD,OAAO,EAAE;YACP,oBAAoB,EAAE,MAAM;YAC5B,mBAAmB,EAAE,aAAa;YAClC,UAAU,EAAE,qEAAqE;YACjF,OAAO,EAAE,cAAc;SACxB;KACF,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE;YACV,eAAe,EAAE,qEAAqE;SACvF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,qEAAqE;YAClF,gBAAgB,EAAE,CAAC;YACnB,iBAAiB,EAAE,qEAAqE;YACxF,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,KAAK;SACnB;QACD,OAAO,EAAE;YACP,oBAAoB,EAAE,MAAM;YAC5B,mBAAmB,EAAE,aAAa;YAClC,UAAU,EAAE,qEAAqE;YACjF,OAAO,EAAE,cAAc;SACxB;KACF,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,CAAA;IACvG,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAA;IAClC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,CAAA;AAC5B,CAAC,CAAA"}

package/dist/esm/hooks/GradientStyles/index.d.ts

@@ -0,0 +1 @@
+export * from './GradientStyles';

package/dist/esm/hooks/GradientStyles/index.js

@@ -0,0 +1,2 @@
+export * from './GradientStyles';
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/GradientStyles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/hooks/GradientStyles/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/dist/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from './GradientStyles';
 export * from './useFooterOffsetResizer';
 export * from './useIsMobile';
 export * from './useMediaQuery';

package/dist/esm/hooks/index.js

@@ -1,3 +1,4 @@
+export * from './GradientStyles';
 export * from './useFooterOffsetResizer';
 export * from './useIsMobile';
 export * from './useMediaQuery';

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AACxC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}

package/package.json

@@ -12,17 +12,17 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.2",
-    "@mui/lab": "^5.0.0-alpha.84",
-    "@mui/material": "^5.8.2",
-    "@mui/styles": "^5.8.0",
+    "@mui/icons-material": "^5.8.3",
+    "@mui/lab": "^5.0.0-alpha.85",
+    "@mui/material": "^5.8.3",
+    "@mui/styles": "^5.8.3",
     "@xylabs/pixel": "^1.3.9",
     "@xylabs/sdk-js": "^2.5.7",
-    "@xylabs/sdk-react": "^2.13.2",
-    "@xyo-network/api": "^2.20.43",
-    "@xyo-network/core": "^2.20.43",
-    "@xyo-network/network": "^2.20.43",
-    "@xyo-network/react-theme": "^2.25.38",
+    "@xylabs/sdk-react": "^2.13.7",
+    "@xyo-network/api": "^2.20.44",
+    "@xyo-network/core": "^2.20.44",
+    "@xyo-network/network": "^2.20.44",
+    "@xyo-network/react-theme": "^2.25.41",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
     "react": "^18.1.0",
@@ -38,17 +38,17 @@
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
-    "@storybook/addons": "^6.5.7",
-    "@storybook/api": "^6.5.7",
-    "@storybook/components": "^6.5.7",
-    "@storybook/core-events": "^6.5.7",
-    "@storybook/react": "^6.5.7",
-    "@storybook/theming": "^6.5.7",
+    "@storybook/addons": "^6.5.8",
+    "@storybook/api": "^6.5.8",
+    "@storybook/components": "^6.5.8",
+    "@storybook/core-events": "^6.5.8",
+    "@storybook/react": "^6.5.8",
+    "@storybook/theming": "^6.5.8",
     "@types/lodash": "^4.14.182",
     "@types/react-helmet": "^6.1.5",
     "@xylabs/pixel": "^1.3.9",
     "@xylabs/sdk-js": "^2.5.7",
-    "@xylabs/sdk-react": "^2.13.2",
+    "@xylabs/sdk-react": "^2.13.7",
     "@xylabs/ts-scripts": "^1.0.66",
     "@xylabs/tsconfig": "^1.0.13",
     "axios": "^0.27.2",
@@ -113,6 +113,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.38",
+  "version": "2.25.41",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/BasicHero/BasicHero.tsx

@@ -1,9 +1,8 @@
-import { Container, Grid, Typography, useTheme } from '@mui/material'
+import { Container, Grid, Typography } from '@mui/material'
 import { ButtonEx, FlexBoxProps, FlexGrowCol, FlexGrowRow, LinkEx } from '@xylabs/sdk-react'
 import { ReactElement } from 'react'
 
-import { useIsMobile } from '../../hooks'
-import { colorfulGradientDarkMode, colorfulGradientLightMode } from '../GradientText'
+import { useGradientStyles, useIsMobile } from '../../hooks'
 
 export interface BasicHeroProps extends FlexBoxProps {
   title: string
@@ -97,8 +96,7 @@ export const BasicHero: React.FC<BasicHeroProps> = ({
   ...props
 }) => {
   const isMobile = useIsMobile()
-  const theme = useTheme()
-  const classes = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()
+  const { classes } = useGradientStyles()
   return (
     <FlexGrowCol
       sx={{
@@ -133,7 +131,7 @@ export const BasicHero: React.FC<BasicHeroProps> = ({
             <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>
               <Typography variant="h1" component="h1" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>
                 {title ? <span>{`${title} `}</span> : null}
-                {gradientTitle ? <span className={classes.heading}> {` ${gradientTitle}`}</span> : null}
+                {gradientTitle ? <span className={classes().heading}> {` ${gradientTitle}`}</span> : null}
                 {title2 ? <span>{` ${title2}`}</span> : null}
               </Typography>
               <Typography variant="body1" component="h2" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>

package/src/components/CardEx.tsx

@@ -0,0 +1,13 @@
+import { Card, CardProps } from '@mui/material'
+
+import { useGradientStyles } from '../hooks'
+
+export interface CardExProps extends CardProps {
+  gradient?: 'border' | 'background'
+}
+
+export const CardEx: React.FC<CardExProps> = ({ style, gradient, ...props }) => {
+  const { styles } = useGradientStyles()
+  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
+  return <Card style={{ ...gradientStyle, ...style }} {...props} />
+}

package/src/components/Footer/Copyright.tsx

@@ -1,5 +1,5 @@
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
-import { FlexBoxProps, FlexRow, LinkEx, LinkExProps } from '@xylabs/sdk-react'
+import { FlexBoxProps, FlexRow, LinkExProps } from '@xylabs/sdk-react'
 
 import { FooterLink } from './Link'
 

package/src/components/JsonRouteWrapper/JsonFromUrl.stories.tsx

@@ -1,17 +1,15 @@
 /* eslint-disable deprecation/deprecation */
 /* eslint-disable import/no-deprecated */
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { ComponentStory, Meta } from '@storybook/react'
 import { FlexCol } from '@xylabs/sdk-react'
 import { BrowserRouter } from 'react-router-dom'
 
 import { DeprecateStory } from '../../../../../.storybook'
 import { JsonFromUrl } from './JsonFromUrl'
 
-const StorybookEntry = {
-  argTypes: {
-    apiDomain: {
-      defaultValue: 'http://localhost:8081',
-    },
+const StorybookEntry: Meta = {
+  args: {
+    apiDomain: 'http://localhost:8081',
   },
   component: JsonFromUrl,
   parameters: {
@@ -20,7 +18,7 @@ const StorybookEntry = {
     },
   },
   title: 'shared/JsonRouteWrapper/JsonFromUrl',
-} as ComponentMeta<typeof JsonFromUrl>
+}
 
 const Template: ComponentStory<typeof JsonFromUrl> = (props) => {
   return (

package/src/components/JsonRouteWrapper/JsonRouteWrapper.stories.tsx

@@ -13,9 +13,7 @@ const JsonDecorator: DecoratorFn = (Story) => (
 
 const StorybookEntry = {
   argTypes: {
-    apiDomain: {
-      defaultValue: 'https://beta.api.archivist.xyo.network',
-    },
+    apiDomain: 'https://beta.api.archivist.xyo.network',
   },
   component: JsonRouteWrapper,
   decorators: [JsonDecorator],

package/src/components/ListItemButtonEx.tsx

@@ -0,0 +1,29 @@
+import { ListItemButton, ListItemButtonProps } from '@mui/material'
+import { MouseEvent } from 'react'
+import { NavigateOptions, To, useNavigate } from 'react-router-dom'
+
+export interface ListItemButtonExProps extends ListItemButtonProps {
+  target?: string
+  to?: To
+  toOptions?: NavigateOptions
+}
+
+export const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({ to, toOptions, onClick, ...props }) => {
+  const navigate = useNavigate()
+  const localOnClick = (event: MouseEvent<HTMLDivElement>) => {
+    onClick?.(event)
+    if (to) {
+      navigate(to, toOptions)
+    }
+  }
+
+  return <ListItemButton onClick={localOnClick} {...props} />
+}
+
+export const ListItemButtonEx: React.FC<ListItemButtonExProps> = ({ to, ...props }) => {
+  if (to) {
+    return <ListItemButtonExTo to={to} {...props} />
+  } else {
+    return <ListItemButtonEx {...props} />
+  }
+}