@xyo-network/react-card 2.64.0 → 2.64.1

package/dist/browser/components/CardContentEx.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/CardContentEx.tsx
 import { CardContent, styled } from "@mui/material";
 import { useShareForwardedRef } from "@xyo-network/react-shared";
 import { forwardRef, useEffect } from "react";
-const CardContentExRoot = styled(CardContent, {
+import { jsx } from "react/jsx-runtime";
+var CardContentExRoot = styled(CardContent, {
   name: "CardContentEx",
   shouldForwardProp: (prop) => !["variant", "removePadding"].includes(prop),
   slot: "Root"
@@ -16,7 +17,7 @@ const CardContentExRoot = styled(CardContent, {
     ...removePadding && { padding: 0 }
   }
 }));
-const CardContentExWithRef = forwardRef(({ scrollToTop = 0, refreshRef = 0, ...props }, ref) => {
+var CardContentExWithRef = forwardRef(({ scrollToTop = 0, refreshRef = 0, ...props }, ref) => {
   const sharedRef = useShareForwardedRef(ref, refreshRef);
   useEffect(() => {
     if (sharedRef && scrollToTop) {
@@ -26,7 +27,7 @@ const CardContentExWithRef = forwardRef(({ scrollToTop = 0, refreshRef = 0, ...p
   return /* @__PURE__ */ jsx(CardContentExRoot, { ref: sharedRef, ...props });
 });
 CardContentExWithRef.displayName = "CardContentEx";
-const CardContentEx = CardContentExWithRef;
+var CardContentEx = CardContentExWithRef;
 export {
   CardContentEx,
   CardContentExWithRef

package/dist/browser/components/CardContentEx.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardContentEx.tsx"],"sourcesContent":["import { CardContent, CardContentProps, styled } from '@mui/material'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect } from 'react'\n\nconst CardContentExRoot = styled(CardContent, {\n  name: 'CardContentEx',\n  shouldForwardProp: (prop: string) => !['variant', 'removePadding'].includes(prop),\n  slot: 'Root',\n})<CardContentExProps>(({ variant, removePadding }) => ({\n  ...((variant === 'scrollable' || removePadding) && {\n    [':last-child']: {\n      paddingBottom: 0,\n    },\n    overflow: 'auto',\n    paddingTop: 0,\n    ...(removePadding && { padding: 0 }),\n  }),\n}))\n\nexport type CardContentExProps = CardContentProps & {\n  refreshRef?: number\n  removePadding?: boolean\n  scrollToTop?: number\n  variant?: 'scrollable' | 'normal'\n}\n\nexport const CardContentExWithRef = forwardRef<HTMLDivElement | null, CardContentExProps>(({ scrollToTop = 0, refreshRef = 0, ...props }, ref) => {\n  const sharedRef = useShareForwardedRef<HTMLDivElement>(ref, refreshRef)\n\n  useEffect(() => {\n    if (sharedRef && scrollToTop) {\n      sharedRef.current?.scroll({ behavior: 'smooth', top: 0 })\n    }\n  }, [sharedRef, scrollToTop])\n\n  return <CardContentExRoot ref={sharedRef} {...props} />\n})\n\nCardContentExWithRef.displayName = 'CardContentEx'\n\nexport const CardContentEx = CardContentExWithRef\n"],"mappings":"AAmCS;AAnCT,SAAS,aAA+B,cAAc;AACtD,SAAS,4BAA4B;AACrC,SAAS,YAAY,iBAAiB;AAEtC,MAAM,oBAAoB,OAAO,aAAa;AAAA,EAC5C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAiB,CAAC,CAAC,WAAW,eAAe,EAAE,SAAS,IAAI;AAAA,EAChF,MAAM;AACR,CAAC,EAAsB,CAAC,EAAE,SAAS,cAAc,OAAO;AAAA,EACtD,IAAK,YAAY,gBAAgB,kBAAkB;AAAA,IACjD,CAAC,aAAa,GAAG;AAAA,MACf,eAAe;AAAA,IACjB;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAI,iBAAiB,EAAE,SAAS,EAAE;AAAA,EACpC;AACF,EAAE;AASK,MAAM,uBAAuB,WAAsD,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAChJ,QAAM,YAAY,qBAAqC,KAAK,UAAU;AAEtE,YAAU,MAAM;AACd,QAAI,aAAa,aAAa;AAC5B,gBAAU,SAAS,OAAO,EAAE,UAAU,UAAU,KAAK,EAAE,CAAC;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,SAAO,oBAAC,qBAAkB,KAAK,WAAY,GAAG,OAAO;AACvD,CAAC;AAED,qBAAqB,cAAc;AAE5B,MAAM,gBAAgB;","names":[]}
+{"version":3,"sources":["../../../src/components/CardContentEx.tsx"],"sourcesContent":["import { CardContent, CardContentProps, styled } from '@mui/material'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport { forwardRef, useEffect } from 'react'\n\nconst CardContentExRoot = styled(CardContent, {\n  name: 'CardContentEx',\n  shouldForwardProp: (prop: string) => !['variant', 'removePadding'].includes(prop),\n  slot: 'Root',\n})<CardContentExProps>(({ variant, removePadding }) => ({\n  ...((variant === 'scrollable' || removePadding) && {\n    [':last-child']: {\n      paddingBottom: 0,\n    },\n    overflow: 'auto',\n    paddingTop: 0,\n    ...(removePadding && { padding: 0 }),\n  }),\n}))\n\nexport type CardContentExProps = CardContentProps & {\n  refreshRef?: number\n  removePadding?: boolean\n  scrollToTop?: number\n  variant?: 'scrollable' | 'normal'\n}\n\nexport const CardContentExWithRef = forwardRef<HTMLDivElement | null, CardContentExProps>(({ scrollToTop = 0, refreshRef = 0, ...props }, ref) => {\n  const sharedRef = useShareForwardedRef<HTMLDivElement>(ref, refreshRef)\n\n  useEffect(() => {\n    if (sharedRef && scrollToTop) {\n      sharedRef.current?.scroll({ behavior: 'smooth', top: 0 })\n    }\n  }, [sharedRef, scrollToTop])\n\n  return <CardContentExRoot ref={sharedRef} {...props} />\n})\n\nCardContentExWithRef.displayName = 'CardContentEx'\n\nexport const CardContentEx = CardContentExWithRef\n"],"mappings":";AAAA,SAAS,aAA+B,cAAc;AACtD,SAAS,4BAA4B;AACrC,SAAS,YAAY,iBAAiB;AAiC7B;AA/BT,IAAM,oBAAoB,OAAO,aAAa;AAAA,EAC5C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAiB,CAAC,CAAC,WAAW,eAAe,EAAE,SAAS,IAAI;AAAA,EAChF,MAAM;AACR,CAAC,EAAsB,CAAC,EAAE,SAAS,cAAc,OAAO;AAAA,EACtD,IAAK,YAAY,gBAAgB,kBAAkB;AAAA,IACjD,CAAC,aAAa,GAAG;AAAA,MACf,eAAe;AAAA,IACjB;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAI,iBAAiB,EAAE,SAAS,EAAE;AAAA,EACpC;AACF,EAAE;AASK,IAAM,uBAAuB,WAAsD,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,GAAG,MAAM,GAAG,QAAQ;AAChJ,QAAM,YAAY,qBAAqC,KAAK,UAAU;AAEtE,YAAU,MAAM;AACd,QAAI,aAAa,aAAa;AAC5B,gBAAU,SAAS,OAAO,EAAE,UAAU,UAAU,KAAK,EAAE,CAAC;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,SAAO,oBAAC,qBAAkB,KAAK,WAAY,GAAG,OAAO;AACvD,CAAC;AAED,qBAAqB,cAAc;AAE5B,IAAM,gBAAgB;","names":[]}

package/dist/browser/components/CardEx.js

@@ -1,8 +1,9 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/CardEx.tsx
 import { Card } from "@mui/material";
 import { useGradientStyles } from "@xyo-network/react-shared";
 import { forwardRef } from "react";
-const CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
+import { jsx } from "react/jsx-runtime";
+var CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
   const { styles } = useGradientStyles();
   const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
   return /* @__PURE__ */ jsx(
@@ -18,7 +19,7 @@ const CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
   );
 });
 CardExWithRef.displayName = "CardEx";
-const CardEx = CardExWithRef;
+var CardEx = CardExWithRef;
 export {
   CardEx,
   CardExWithRef

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardEx.tsx"],"sourcesContent":["import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n  gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n  const { styles } = useGradientStyles()\n  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n  return (\n    <Card\n      style={{\n        ...gradientStyle,\n        ...style,\n      }}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"AAYI;AAZJ,SAAS,YAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAMpB,MAAM,gBAAuC,WAAW,CAAC,EAAE,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACrG,QAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,QAAM,gBAAgB,aAAa,WAAW,OAAO,SAAS,aAAa,eAAe,OAAO,aAAa,CAAC;AAC/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,cAAc,cAAc;AAErB,MAAM,SAAS;","names":[]}
+{"version":3,"sources":["../../../src/components/CardEx.tsx"],"sourcesContent":["import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n  gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n  const { styles } = useGradientStyles()\n  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n  return (\n    <Card\n      style={{\n        ...gradientStyle,\n        ...style,\n      }}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":";AAAA,SAAS,YAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAUvB;AAJG,IAAM,gBAAuC,WAAW,CAAC,EAAE,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACrG,QAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,QAAM,gBAAgB,aAAa,WAAW,OAAO,SAAS,aAAa,eAAe,OAAO,aAAa,CAAC;AAC/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,cAAc,cAAc;AAErB,IAAM,SAAS;","names":[]}

package/dist/browser/components/FullWidthCard/FullWidthCard.js

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/FullWidthCard/FullWidthCard.tsx
 import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
 import { alpha, Card, CardActions, CardContent, CardMedia, Grid, IconButton, Typography, useTheme, Zoom } from "@mui/material";
 import { FlexGrowCol } from "@xylabs/react-flexbox";
 import { useIsMobile } from "@xyo-network/react-shared";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-const FullWidthCard = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var FullWidthCard = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {
   const theme = useTheme();
   const [raised, setRaised] = useState(false);
   const navigate = useNavigate();

package/dist/browser/components/FullWidthCard/FullWidthCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FullWidthCard/FullWidthCard.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, Card, CardActions, CardContent, CardMedia, CardProps, Grid, IconButton, Typography, useTheme, Zoom } from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nexport interface FullWidthCardProps extends CardProps {\n  cardIsButton?: boolean\n  desc?: ReactNode\n  href?: string\n  linkText?: string\n  media?: string\n  name: ReactNode\n  small?: boolean\n  to?: To\n}\n\nexport const FullWidthCard: React.FC<FullWidthCardProps> = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {\n  const theme = useTheme()\n  const [raised, setRaised] = useState(false)\n  const navigate = useNavigate()\n  const isMobile = useIsMobile()\n\n  const localRouteChange = (to: To | undefined) => {\n    to ? navigate(to) : navigate('/404')\n  }\n  const externalRouteChange = (href: string | undefined) => {\n    href ? window.open(href) : navigate('/404')\n  }\n\n  return (\n    <Card\n      elevation={raised ? 3 : 0}\n      style={{ height: '100%', width: '100%' }}\n      {...props}\n      sx={{\n        '&:hover': {\n          cursor: 'pointer',\n        },\n        backgroundColor: alpha(theme.palette.primary.light, 0.05),\n      }}\n      onMouseEnter={() => (isMobile ? null : cardIsButton ? setRaised(true) : null)}\n      onMouseLeave={() => (isMobile ? null : cardIsButton ? setRaised(false) : null)}\n      onClick={() => (cardIsButton ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n    >\n      {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n      <CardContent>\n        <Grid container alignItems=\"center\" paddingY={2} paddingX={2}>\n          <Grid item xs={12} md={6}>\n            {typeof name === 'string' ? (\n              <Typography fontWeight={700} variant=\"h2\" textAlign=\"left\" paddingBottom={1}>\n                {name}\n              </Typography>\n            ) : (\n              name\n            )}\n          </Grid>\n          <Grid item xs={12} md={5}>\n            <Typography variant=\"body1\" fontWeight={400} textAlign=\"left\">\n              {desc}\n            </Typography>\n          </Grid>\n          <Grid item xs={1} display={isMobile ? 'none' : 'flex'} justifyContent=\"center\">\n            <Zoom in={raised}>\n              <IconButton\n                color=\"primary\"\n                size={small ? 'small' : 'medium'}\n                onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n                disableFocusRipple\n                disableRipple\n                disableTouchRipple\n              >\n                <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n              </IconButton>\n            </Zoom>\n          </Grid>\n        </Grid>\n      </CardContent>\n      <CardActions sx={{ display: { md: isMobile ? 'flex' : 'none' } }}>\n        <FlexGrowCol alignItems=\"flex-end\">\n          <IconButton\n            color=\"primary\"\n            size={small ? 'small' : 'medium'}\n            onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n            disableFocusRipple\n            disableRipple\n            disableTouchRipple\n          >\n            <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n          </IconButton>\n        </FlexGrowCol>\n      </CardActions>\n    </Card>\n  )\n}\n"],"mappings":"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","names":["to","href"]}
+{"version":3,"sources":["../../../../src/components/FullWidthCard/FullWidthCard.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, Card, CardActions, CardContent, CardMedia, CardProps, Grid, IconButton, Typography, useTheme, Zoom } from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nexport interface FullWidthCardProps extends CardProps {\n  cardIsButton?: boolean\n  desc?: ReactNode\n  href?: string\n  linkText?: string\n  media?: string\n  name: ReactNode\n  small?: boolean\n  to?: To\n}\n\nexport const FullWidthCard: React.FC<FullWidthCardProps> = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {\n  const theme = useTheme()\n  const [raised, setRaised] = useState(false)\n  const navigate = useNavigate()\n  const isMobile = useIsMobile()\n\n  const localRouteChange = (to: To | undefined) => {\n    to ? navigate(to) : navigate('/404')\n  }\n  const externalRouteChange = (href: string | undefined) => {\n    href ? window.open(href) : navigate('/404')\n  }\n\n  return (\n    <Card\n      elevation={raised ? 3 : 0}\n      style={{ height: '100%', width: '100%' }}\n      {...props}\n      sx={{\n        '&:hover': {\n          cursor: 'pointer',\n        },\n        backgroundColor: alpha(theme.palette.primary.light, 0.05),\n      }}\n      onMouseEnter={() => (isMobile ? null : cardIsButton ? setRaised(true) : null)}\n      onMouseLeave={() => (isMobile ? null : cardIsButton ? setRaised(false) : null)}\n      onClick={() => (cardIsButton ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n    >\n      {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n      <CardContent>\n        <Grid container alignItems=\"center\" paddingY={2} paddingX={2}>\n          <Grid item xs={12} md={6}>\n            {typeof name === 'string' ? (\n              <Typography fontWeight={700} variant=\"h2\" textAlign=\"left\" paddingBottom={1}>\n                {name}\n              </Typography>\n            ) : (\n              name\n            )}\n          </Grid>\n          <Grid item xs={12} md={5}>\n            <Typography variant=\"body1\" fontWeight={400} textAlign=\"left\">\n              {desc}\n            </Typography>\n          </Grid>\n          <Grid item xs={1} display={isMobile ? 'none' : 'flex'} justifyContent=\"center\">\n            <Zoom in={raised}>\n              <IconButton\n                color=\"primary\"\n                size={small ? 'small' : 'medium'}\n                onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n                disableFocusRipple\n                disableRipple\n                disableTouchRipple\n              >\n                <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n              </IconButton>\n            </Zoom>\n          </Grid>\n        </Grid>\n      </CardContent>\n      <CardActions sx={{ display: { md: isMobile ? 'flex' : 'none' } }}>\n        <FlexGrowCol alignItems=\"flex-end\">\n          <IconButton\n            color=\"primary\"\n            size={small ? 'small' : 'medium'}\n            onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n            disableFocusRipple\n            disableRipple\n            disableTouchRipple\n          >\n            <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n          </IconButton>\n        </FlexGrowCol>\n      </CardActions>\n    </Card>\n  )\n}\n"],"mappings":"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","names":["to","href"]}

package/dist/browser/components/FullWidthCard/index.js

@@ -1,2 +1,72 @@
-export * from "./FullWidthCard";
+// src/components/FullWidthCard/FullWidthCard.tsx
+import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
+import { alpha, Card, CardActions, CardContent, CardMedia, Grid, IconButton, Typography, useTheme, Zoom } from "@mui/material";
+import { FlexGrowCol } from "@xylabs/react-flexbox";
+import { useIsMobile } from "@xyo-network/react-shared";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FullWidthCard = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {
+  const theme = useTheme();
+  const [raised, setRaised] = useState(false);
+  const navigate = useNavigate();
+  const isMobile = useIsMobile();
+  const localRouteChange = (to2) => {
+    to2 ? navigate(to2) : navigate("/404");
+  };
+  const externalRouteChange = (href2) => {
+    href2 ? window.open(href2) : navigate("/404");
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      elevation: raised ? 3 : 0,
+      style: { height: "100%", width: "100%" },
+      ...props,
+      sx: {
+        "&:hover": {
+          cursor: "pointer"
+        },
+        backgroundColor: alpha(theme.palette.primary.light, 0.05)
+      },
+      onMouseEnter: () => isMobile ? null : cardIsButton ? setRaised(true) : null,
+      onMouseLeave: () => isMobile ? null : cardIsButton ? setRaised(false) : null,
+      onClick: () => cardIsButton ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
+      children: [
+        media ? /* @__PURE__ */ jsx(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", paddingY: 2, paddingX: 2, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: typeof name === "string" ? /* @__PURE__ */ jsx(Typography, { fontWeight: 700, variant: "h2", textAlign: "left", paddingBottom: 1, children: name }) : name }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 5, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", fontWeight: 400, textAlign: "left", children: desc }) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, display: isMobile ? "none" : "flex", justifyContent: "center", children: /* @__PURE__ */ jsx(Zoom, { in: raised, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              color: "primary",
+              size: small ? "small" : "medium",
+              onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
+              disableFocusRipple: true,
+              disableRipple: true,
+              disableTouchRipple: true,
+              children: /* @__PURE__ */ jsx(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
+            }
+          ) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(CardActions, { sx: { display: { md: isMobile ? "flex" : "none" } }, children: /* @__PURE__ */ jsx(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            color: "primary",
+            size: small ? "small" : "medium",
+            onClick: () => href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404"),
+            disableFocusRipple: true,
+            disableRipple: true,
+            disableTouchRipple: true,
+            children: /* @__PURE__ */ jsx(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  FullWidthCard
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/FullWidthCard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FullWidthCard/index.ts"],"sourcesContent":["export * from './FullWidthCard'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/FullWidthCard/FullWidthCard.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, Card, CardActions, CardContent, CardMedia, CardProps, Grid, IconButton, Typography, useTheme, Zoom } from '@mui/material'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nexport interface FullWidthCardProps extends CardProps {\n  cardIsButton?: boolean\n  desc?: ReactNode\n  href?: string\n  linkText?: string\n  media?: string\n  name: ReactNode\n  small?: boolean\n  to?: To\n}\n\nexport const FullWidthCard: React.FC<FullWidthCardProps> = ({ cardIsButton, desc, href, media, name, small, to, ...props }) => {\n  const theme = useTheme()\n  const [raised, setRaised] = useState(false)\n  const navigate = useNavigate()\n  const isMobile = useIsMobile()\n\n  const localRouteChange = (to: To | undefined) => {\n    to ? navigate(to) : navigate('/404')\n  }\n  const externalRouteChange = (href: string | undefined) => {\n    href ? window.open(href) : navigate('/404')\n  }\n\n  return (\n    <Card\n      elevation={raised ? 3 : 0}\n      style={{ height: '100%', width: '100%' }}\n      {...props}\n      sx={{\n        '&:hover': {\n          cursor: 'pointer',\n        },\n        backgroundColor: alpha(theme.palette.primary.light, 0.05),\n      }}\n      onMouseEnter={() => (isMobile ? null : cardIsButton ? setRaised(true) : null)}\n      onMouseLeave={() => (isMobile ? null : cardIsButton ? setRaised(false) : null)}\n      onClick={() => (cardIsButton ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n    >\n      {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n      <CardContent>\n        <Grid container alignItems=\"center\" paddingY={2} paddingX={2}>\n          <Grid item xs={12} md={6}>\n            {typeof name === 'string' ? (\n              <Typography fontWeight={700} variant=\"h2\" textAlign=\"left\" paddingBottom={1}>\n                {name}\n              </Typography>\n            ) : (\n              name\n            )}\n          </Grid>\n          <Grid item xs={12} md={5}>\n            <Typography variant=\"body1\" fontWeight={400} textAlign=\"left\">\n              {desc}\n            </Typography>\n          </Grid>\n          <Grid item xs={1} display={isMobile ? 'none' : 'flex'} justifyContent=\"center\">\n            <Zoom in={raised}>\n              <IconButton\n                color=\"primary\"\n                size={small ? 'small' : 'medium'}\n                onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n                disableFocusRipple\n                disableRipple\n                disableTouchRipple\n              >\n                <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n              </IconButton>\n            </Zoom>\n          </Grid>\n        </Grid>\n      </CardContent>\n      <CardActions sx={{ display: { md: isMobile ? 'flex' : 'none' } }}>\n        <FlexGrowCol alignItems=\"flex-end\">\n          <IconButton\n            color=\"primary\"\n            size={small ? 'small' : 'medium'}\n            onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n            disableFocusRipple\n            disableRipple\n            disableTouchRipple\n          >\n            <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n          </IconButton>\n        </FlexGrowCol>\n      </CardActions>\n    </Card>\n  )\n}\n"],"mappings":"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","names":["to","href"]}

package/dist/browser/components/PageCard.js

@@ -1,24 +1,49 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/PageCard.tsx
 import { Refresh as RefreshIcon } from "@mui/icons-material";
 import { CardHeader, IconButton } from "@mui/material";
 import { TypographyEx } from "@xyo-network/react-shared";
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/CardEx.tsx
+import { Card } from "@mui/material";
+import { useGradientStyles } from "@xyo-network/react-shared";
 import { forwardRef } from "react";
-import { CardEx } from "./CardEx";
-const PageCardWithRef = forwardRef(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {
+import { jsx } from "react/jsx-runtime";
+var CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
+  const { styles } = useGradientStyles();
+  const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      style: {
+        ...gradientStyle,
+        ...style
+      },
+      ref,
+      ...props
+    }
+  );
+});
+CardExWithRef.displayName = "CardEx";
+var CardEx = CardExWithRef;
+
+// src/components/PageCard.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PageCardWithRef = forwardRef2(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(CardEx, { style: { backgroundColor: "transparent", position: "relative", ...style }, elevation: 0, ref, ...props, children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       CardHeader,
       {
-        title: /* @__PURE__ */ jsx(TypographyEx, { variant: "h5", gutterBottom: true, children: title }),
-        subheader: /* @__PURE__ */ jsx(TypographyEx, { variant: "subtitle1", children: subheader }),
-        action: action ? action : /* @__PURE__ */ jsx(Fragment, { children: onRefresh ? /* @__PURE__ */ jsx(IconButton, { onClick: () => onRefresh?.(), children: /* @__PURE__ */ jsx(RefreshIcon, {}) }) : null })
+        title: /* @__PURE__ */ jsx2(TypographyEx, { variant: "h5", gutterBottom: true, children: title }),
+        subheader: /* @__PURE__ */ jsx2(TypographyEx, { variant: "subtitle1", children: subheader }),
+        action: action ? action : /* @__PURE__ */ jsx2(Fragment, { children: onRefresh ? /* @__PURE__ */ jsx2(IconButton, { onClick: () => onRefresh?.(), children: /* @__PURE__ */ jsx2(RefreshIcon, {}) }) : null })
       }
     ),
     children
   ] });
 });
 PageCardWithRef.displayName = "PageCard";
-const PageCard = PageCardWithRef;
+var PageCard = PageCardWithRef;
 export {
   PageCard
 };

package/dist/browser/components/PageCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PageCard.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { CardHeader, CardHeaderProps, IconButton } from '@mui/material'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\n\nimport { CardEx, CardExProps } from './CardEx'\n\nexport interface PageCardProps extends CardExProps {\n  action?: ReactNode\n  onRefresh?: () => void\n  subheader?: CardHeaderProps['subheader']\n}\n\nconst PageCardWithRef: React.FC<PageCardProps> = forwardRef(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {\n  return (\n    <CardEx style={{ backgroundColor: 'transparent', position: 'relative', ...style }} elevation={0} ref={ref} {...props}>\n      <CardHeader\n        title={\n          <TypographyEx variant=\"h5\" gutterBottom>\n            {title}\n          </TypographyEx>\n        }\n        subheader={<TypographyEx variant=\"subtitle1\">{subheader}</TypographyEx>}\n        action={\n          action ? (\n            action\n          ) : (\n            <>\n              {onRefresh ? (\n                <IconButton onClick={() => onRefresh?.()}>\n                  <RefreshIcon />\n                </IconButton>\n              ) : null}\n            </>\n          )\n        }\n      />\n      {children}\n    </CardEx>\n  )\n})\n\nPageCardWithRef.displayName = 'PageCard'\n\nexport const PageCard = PageCardWithRef\n"],"mappings":"AAeI,SAYQ,UATF,KAHN;AAfJ,SAAS,WAAW,mBAAmB;AACvC,SAAS,YAA6B,kBAAkB;AACxD,SAAS,oBAAoB;AAC7B,SAAS,kBAA6B;AAEtC,SAAS,cAA2B;AAQpC,MAAM,kBAA2C,WAAW,CAAC,EAAE,WAAW,OAAO,WAAW,UAAU,QAAQ,OAAO,GAAG,MAAM,GAAG,QAAQ;AACvI,SACE,qBAAC,UAAO,OAAO,EAAE,iBAAiB,eAAe,UAAU,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,KAAW,GAAG,OAC7G;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OACE,oBAAC,gBAAa,SAAQ,MAAK,cAAY,MACpC,iBACH;AAAA,QAEF,WAAW,oBAAC,gBAAa,SAAQ,aAAa,qBAAU;AAAA,QACxD,QACE,SACE,SAEA,gCACG,sBACC,oBAAC,cAAW,SAAS,MAAM,YAAY,GACrC,8BAAC,eAAY,GACf,IACE,MACN;AAAA;AAAA,IAGN;AAAA,IACC;AAAA,KACH;AAEJ,CAAC;AAED,gBAAgB,cAAc;AAEvB,MAAM,WAAW;","names":[]}
+{"version":3,"sources":["../../../src/components/PageCard.tsx","../../../src/components/CardEx.tsx"],"sourcesContent":["import { Refresh as RefreshIcon } from '@mui/icons-material'\nimport { CardHeader, CardHeaderProps, IconButton } from '@mui/material'\nimport { TypographyEx } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\n\nimport { CardEx, CardExProps } from './CardEx'\n\nexport interface PageCardProps extends CardExProps {\n  action?: ReactNode\n  onRefresh?: () => void\n  subheader?: CardHeaderProps['subheader']\n}\n\nconst PageCardWithRef: React.FC<PageCardProps> = forwardRef(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {\n  return (\n    <CardEx style={{ backgroundColor: 'transparent', position: 'relative', ...style }} elevation={0} ref={ref} {...props}>\n      <CardHeader\n        title={\n          <TypographyEx variant=\"h5\" gutterBottom>\n            {title}\n          </TypographyEx>\n        }\n        subheader={<TypographyEx variant=\"subtitle1\">{subheader}</TypographyEx>}\n        action={\n          action ? (\n            action\n          ) : (\n            <>\n              {onRefresh ? (\n                <IconButton onClick={() => onRefresh?.()}>\n                  <RefreshIcon />\n                </IconButton>\n              ) : null}\n            </>\n          )\n        }\n      />\n      {children}\n    </CardEx>\n  )\n})\n\nPageCardWithRef.displayName = 'PageCard'\n\nexport const PageCard = PageCardWithRef\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n  gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n  const { styles } = useGradientStyles()\n  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n  return (\n    <Card\n      style={{\n        ...gradientStyle,\n        ...style,\n      }}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":";AAAA,SAAS,WAAW,mBAAmB;AACvC,SAAS,YAA6B,kBAAkB;AACxD,SAAS,oBAAoB;AAC7B,SAAS,cAAAA,mBAA6B;;;ACHtC,SAAS,YAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAUvB;AAJG,IAAM,gBAAuC,WAAW,CAAC,EAAE,OAAO,UAAU,GAAG,MAAM,GAAG,QAAQ;AACrG,QAAM,EAAE,OAAO,IAAI,kBAAkB;AACrC,QAAM,gBAAgB,aAAa,WAAW,OAAO,SAAS,aAAa,eAAe,OAAO,aAAa,CAAC;AAC/G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,cAAc,cAAc;AAErB,IAAM,SAAS;;;ADVlB,SAYQ,UATF,OAAAC,MAHN;AAFJ,IAAM,kBAA2CC,YAAW,CAAC,EAAE,WAAW,OAAO,WAAW,UAAU,QAAQ,OAAO,GAAG,MAAM,GAAG,QAAQ;AACvI,SACE,qBAAC,UAAO,OAAO,EAAE,iBAAiB,eAAe,UAAU,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,KAAW,GAAG,OAC7G;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,OACE,gBAAAA,KAAC,gBAAa,SAAQ,MAAK,cAAY,MACpC,iBACH;AAAA,QAEF,WAAW,gBAAAA,KAAC,gBAAa,SAAQ,aAAa,qBAAU;AAAA,QACxD,QACE,SACE,SAEA,gBAAAA,KAAA,YACG,sBACC,gBAAAA,KAAC,cAAW,SAAS,MAAM,YAAY,GACrC,0BAAAA,KAAC,eAAY,GACf,IACE,MACN;AAAA;AAAA,IAGN;AAAA,IACC;AAAA,KACH;AAEJ,CAAC;AAED,gBAAgB,cAAc;AAEvB,IAAM,WAAW;","names":["forwardRef","jsx","forwardRef"]}

package/dist/browser/components/SimpleCard/SimpleCard.js

@@ -1,12 +1,37 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/SimpleCard/SimpleCard.tsx
 import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
 import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from "@mui/material";
 import { FlexCol, FlexGrowCol } from "@xylabs/react-flexbox";
 import { useIsMobile } from "@xyo-network/react-shared";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { CardEx } from "../CardEx";
-const SimpleCard = ({
+
+// src/components/CardEx.tsx
+import { Card } from "@mui/material";
+import { useGradientStyles } from "@xyo-network/react-shared";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
+  const { styles } = useGradientStyles();
+  const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      style: {
+        ...gradientStyle,
+        ...style
+      },
+      ref,
+      ...props
+    }
+  );
+});
+CardExWithRef.displayName = "CardEx";
+var CardEx = CardExWithRef;
+
+// src/components/SimpleCard/SimpleCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SimpleCard = ({
   desc,
   iconImage,
   interactionVariant = "card",
@@ -45,14 +70,14 @@ const SimpleCard = ({
       onClick: () => interactionVariant == "button" ? href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate("/404") : null,
       ...props,
       children: [
-        media ? /* @__PURE__ */ jsx(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
-        /* @__PURE__ */ jsx(CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [
-          iconImage ? /* @__PURE__ */ jsx("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
-          typeof headline === "string" ? /* @__PURE__ */ jsx(Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
-          subtitle ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
-          /* @__PURE__ */ jsx(Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
+        media ? /* @__PURE__ */ jsx2(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
+        /* @__PURE__ */ jsx2(CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [
+          iconImage ? /* @__PURE__ */ jsx2("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
+          typeof headline === "string" ? /* @__PURE__ */ jsx2(Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
+          subtitle ? /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
+          /* @__PURE__ */ jsx2(Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
         ] }) }),
-        interactionVariant == "button" ? /* @__PURE__ */ jsx(CardActions, { children: /* @__PURE__ */ jsx(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx(
+        interactionVariant == "button" ? /* @__PURE__ */ jsx2(CardActions, { children: /* @__PURE__ */ jsx2(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx2(
           IconButton,
           {
             color: raised ? "secondary" : "primary",
@@ -61,7 +86,7 @@ const SimpleCard = ({
             disableFocusRipple: true,
             disableRipple: true,
             disableTouchRipple: true,
-            children: /* @__PURE__ */ jsx(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
+            children: /* @__PURE__ */ jsx2(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
           }
         ) }) }) : null
       ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCard/SimpleCard.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n  desc?: ReactNode\n  headline?: ReactNode\n  href?: string\n  iconImage?: string\n  interactionVariant?: 'button' | 'card'\n  media?: string\n  small?: boolean\n  subtitle?: string\n  to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n  desc,\n  iconImage,\n  interactionVariant = 'card',\n  headline,\n  href,\n  media,\n  small,\n  subtitle,\n  sx,\n  to,\n  ...props\n}) => {\n  const theme = useTheme()\n  const [raised, setRaised] = useState(false)\n  const navigate = useNavigate()\n  const isMobile = useIsMobile()\n  const localRouteChange = (to: To | undefined) => {\n    to ? navigate(to) : navigate('/404')\n  }\n  const externalRouteChange = (href: string | undefined) => {\n    href ? window.open(href) : navigate('/404')\n  }\n  return (\n    <CardEx\n      elevation={raised ? 3 : 0}\n      sx={{\n        '&:hover': {\n          cursor: interactionVariant == 'button' ? 'pointer' : null,\n        },\n        backgroundColor: alpha(theme.palette.primary.light, 0.05),\n        ...sx,\n      }}\n      onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n      onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n      onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n      {...props}\n    >\n      {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n      <CardContent sx={{ height: '100%' }}>\n        <FlexCol width=\"100%\" alignItems=\"flex-start\">\n          {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n          {typeof headline === 'string' ? (\n            <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n              {headline}\n            </Typography>\n          ) : (\n            headline\n          )}\n          {subtitle ? (\n            <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n              {subtitle}\n            </Typography>\n          ) : null}\n          <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n            {desc}\n          </Typography>\n        </FlexCol>\n      </CardContent>\n      {interactionVariant == 'button' ? (\n        <CardActions>\n          <FlexGrowCol alignItems=\"flex-end\">\n            <IconButton\n              color={raised ? 'secondary' : 'primary'}\n              size={small ? 'small' : 'medium'}\n              onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n              disableFocusRipple\n              disableRipple\n              disableTouchRipple\n            >\n              <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n            </IconButton>\n          </FlexGrowCol>\n        </CardActions>\n      ) : null}\n    </CardEx>\n  )\n}\n"],"mappings":"AA2De,cAGP,YAHO;AA3Df,SAAS,uBAAuB,+BAA+B;AAC/D,SAAS,OAAO,aAAa,aAAa,WAAW,YAAY,YAAY,gBAAgB;AAC7F,SAAS,SAAS,mBAAmB;AACrC,SAAS,mBAAmB;AAC5B,SAAoB,gBAAgB;AACpC,SAAa,mBAAmB;AAEhC,SAAS,cAA2B;AAc7B,MAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,YAAY;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,CAACA,QAAuB;AAC/C,IAAAA,MAAK,SAASA,GAAE,IAAI,SAAS,MAAM;AAAA,EACrC;AACA,QAAM,sBAAsB,CAACC,UAA6B;AACxD,IAAAA,QAAO,OAAO,KAAKA,KAAI,IAAI,SAAS,MAAM;AAAA,EAC5C;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS,IAAI;AAAA,MACxB,IAAI;AAAA,QACF,WAAW;AAAA,UACT,QAAQ,sBAAsB,WAAW,YAAY;AAAA,QACvD;AAAA,QACA,iBAAiB,MAAM,MAAM,QAAQ,QAAQ,OAAO,IAAI;AAAA,QACxD,GAAG;AAAA,MACL;AAAA,MACA,cAAc,MAAO,WAAW,OAAO,sBAAsB,WAAW,UAAU,IAAI,IAAI;AAAA,MAC1F,cAAc,MAAO,WAAW,OAAO,sBAAsB,WAAW,UAAU,KAAK,IAAI;AAAA,MAC3F,SAAS,MAAO,sBAAsB,WAAY,OAAO,oBAAoB,IAAI,IAAI,KAAK,iBAAiB,EAAE,IAAI,SAAS,MAAM,IAAK;AAAA,MACpI,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,aAAU,WAAU,OAAM,QAAO,OAAM,OAAO,OAAO,KAAI,IAAG,IAAK;AAAA,QAE3E,oBAAC,eAAY,IAAI,EAAE,QAAQ,OAAO,GAChC,+BAAC,WAAQ,OAAM,QAAO,YAAW,cAC9B;AAAA,sBAAY,oBAAC,SAAI,KAAK,WAAW,QAAO,QAAO,OAAO,EAAE,eAAe,MAAM,GAAG,IAAK;AAAA,UACrF,OAAO,aAAa,WACnB,oBAAC,cAAW,SAAS,QAAQ,UAAU,MAAM,WAAU,QAAO,cAAY,MACvE,oBACH,IAEA;AAAA,UAED,WACC,oBAAC,cAAW,SAAQ,aAAY,WAAU,QAAO,cAAY,MAC1D,oBACH,IACE;AAAA,UACJ,oBAAC,cAAW,SAAS,QAAQ,YAAY,SAAS,WAAU,QAAO,cAAY,MAC5E,gBACH;AAAA,WACF,GACF;AAAA,QACC,sBAAsB,WACrB,oBAAC,eACC,8BAAC,eAAY,YAAW,YACtB;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,SAAS,cAAc;AAAA,YAC9B,MAAM,QAAQ,UAAU;AAAA,YACxB,SAAS,MAAO,OAAO,oBAAoB,IAAI,IAAI,KAAK,iBAAiB,EAAE,IAAI,SAAS,MAAM;AAAA,YAC9F,oBAAkB;AAAA,YAClB,eAAa;AAAA,YACb,oBAAkB;AAAA,YAElB,8BAAC,2BAAwB,UAAU,QAAQ,UAAU,UAAU;AAAA;AAAA,QACjE,GACF,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":["to","href"]}
+{"version":3,"sources":["../../../../src/components/SimpleCard/SimpleCard.tsx","../../../../src/components/CardEx.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n  desc?: ReactNode\n  headline?: ReactNode\n  href?: string\n  iconImage?: string\n  interactionVariant?: 'button' | 'card'\n  media?: string\n  small?: boolean\n  subtitle?: string\n  to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n  desc,\n  iconImage,\n  interactionVariant = 'card',\n  headline,\n  href,\n  media,\n  small,\n  subtitle,\n  sx,\n  to,\n  ...props\n}) => {\n  const theme = useTheme()\n  const [raised, setRaised] = useState(false)\n  const navigate = useNavigate()\n  const isMobile = useIsMobile()\n  const localRouteChange = (to: To | undefined) => {\n    to ? navigate(to) : navigate('/404')\n  }\n  const externalRouteChange = (href: string | undefined) => {\n    href ? window.open(href) : navigate('/404')\n  }\n  return (\n    <CardEx\n      elevation={raised ? 3 : 0}\n      sx={{\n        '&:hover': {\n          cursor: interactionVariant == 'button' ? 'pointer' : null,\n        },\n        backgroundColor: alpha(theme.palette.primary.light, 0.05),\n        ...sx,\n      }}\n      onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n      onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n      onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n      {...props}\n    >\n      {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n      <CardContent sx={{ height: '100%' }}>\n        <FlexCol width=\"100%\" alignItems=\"flex-start\">\n          {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n          {typeof headline === 'string' ? (\n            <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n              {headline}\n            </Typography>\n          ) : (\n            headline\n          )}\n          {subtitle ? (\n            <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n              {subtitle}\n            </Typography>\n          ) : null}\n          <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n            {desc}\n          </Typography>\n        </FlexCol>\n      </CardContent>\n      {interactionVariant == 'button' ? (\n        <CardActions>\n          <FlexGrowCol alignItems=\"flex-end\">\n            <IconButton\n              color={raised ? 'secondary' : 'primary'}\n              size={small ? 'small' : 'medium'}\n              onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n              disableFocusRipple\n              disableRipple\n              disableTouchRipple\n            >\n              <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n            </IconButton>\n          </FlexGrowCol>\n        </CardActions>\n      ) : null}\n    </CardEx>\n  )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n  gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n  const { styles } = useGradientStyles()\n  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n  return (\n    <Card\n      style={{\n        ...gradientStyle,\n        ...style,\n      }}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"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","names":["jsx","to","href"]}

package/dist/browser/components/SimpleCard/index.js

@@ -1,2 +1,99 @@
-export * from "./SimpleCard";
+// src/components/SimpleCard/SimpleCard.tsx
+import { ArrowForwardRounded as ArrowForwardRoundedIcon } from "@mui/icons-material";
+import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from "@mui/material";
+import { FlexCol, FlexGrowCol } from "@xylabs/react-flexbox";
+import { useIsMobile } from "@xyo-network/react-shared";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+// src/components/CardEx.tsx
+import { Card } from "@mui/material";
+import { useGradientStyles } from "@xyo-network/react-shared";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
+  const { styles } = useGradientStyles();
+  const gradientStyle = gradient === "border" ? styles.border : gradient === "background" ? styles.background : {};
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      style: {
+        ...gradientStyle,
+        ...style
+      },
+      ref,
+      ...props
+    }
+  );
+});
+CardExWithRef.displayName = "CardEx";
+var CardEx = CardExWithRef;
+
+// src/components/SimpleCard/SimpleCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SimpleCard = ({
+  desc,
+  iconImage,
+  interactionVariant = "card",
+  headline,
+  href,
+  media,
+  small,
+  subtitle,
+  sx,
+  to,
+  ...props
+}) => {
+  const theme = useTheme();
+  const [raised, setRaised] = useState(false);
+  const navigate = useNavigate();
+  const isMobile = useIsMobile();
+  const localRouteChange = (to2) => {
+    to2 ? navigate(to2) : navigate("/404");
+  };
+  const externalRouteChange = (href2) => {
+    href2 ? window.open(href2) : navigate("/404");
+  };
+  return /* @__PURE__ */ jsxs(
+    CardEx,
+    {
+      elevation: raised ? 3 : 0,
+      sx: {
+        "&:hover": {
+          cursor: interactionVariant == "button" ? "pointer" : null
+        },
+        backgroundColor: alpha(theme.palette.primary.light, 0.05),
+        ...sx
+      },
+      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 ? /* @__PURE__ */ jsx2(CardMedia, { component: "img", height: "100", image: media, alt: "" }) : null,
+        /* @__PURE__ */ jsx2(CardContent, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxs(FlexCol, { width: "100%", alignItems: "flex-start", children: [
+          iconImage ? /* @__PURE__ */ jsx2("img", { src: iconImage, height: "40px", style: { paddingBottom: "8px" } }) : null,
+          typeof headline === "string" ? /* @__PURE__ */ jsx2(Typography, { variant: small ? "body1" : "h6", textAlign: "left", gutterBottom: true, children: headline }) : headline,
+          subtitle ? /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", textAlign: "left", gutterBottom: true, children: subtitle }) : null,
+          /* @__PURE__ */ jsx2(Typography, { variant: small ? "caption" : "body1", textAlign: "left", gutterBottom: true, children: desc })
+        ] }) }),
+        interactionVariant == "button" ? /* @__PURE__ */ jsx2(CardActions, { children: /* @__PURE__ */ jsx2(FlexGrowCol, { alignItems: "flex-end", children: /* @__PURE__ */ jsx2(
+          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: /* @__PURE__ */ jsx2(ArrowForwardRoundedIcon, { fontSize: small ? "small" : "medium" })
+          }
+        ) }) }) : null
+      ]
+    }
+  );
+};
+export {
+  SimpleCard
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/SimpleCard/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCard/index.ts"],"sourcesContent":["export * from './SimpleCard'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/SimpleCard/SimpleCard.tsx","../../../../src/components/CardEx.tsx"],"sourcesContent":["import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'\nimport { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useIsMobile } from '@xyo-network/react-shared'\nimport { ReactNode, useState } from 'react'\nimport { To, useNavigate } from 'react-router-dom'\n\nimport { CardEx, CardExProps } from '../CardEx'\n\nexport interface SimpleCardProps extends CardExProps {\n  desc?: ReactNode\n  headline?: ReactNode\n  href?: string\n  iconImage?: string\n  interactionVariant?: 'button' | 'card'\n  media?: string\n  small?: boolean\n  subtitle?: string\n  to?: To\n}\n\nexport const SimpleCard: React.FC<SimpleCardProps> = ({\n  desc,\n  iconImage,\n  interactionVariant = 'card',\n  headline,\n  href,\n  media,\n  small,\n  subtitle,\n  sx,\n  to,\n  ...props\n}) => {\n  const theme = useTheme()\n  const [raised, setRaised] = useState(false)\n  const navigate = useNavigate()\n  const isMobile = useIsMobile()\n  const localRouteChange = (to: To | undefined) => {\n    to ? navigate(to) : navigate('/404')\n  }\n  const externalRouteChange = (href: string | undefined) => {\n    href ? window.open(href) : navigate('/404')\n  }\n  return (\n    <CardEx\n      elevation={raised ? 3 : 0}\n      sx={{\n        '&:hover': {\n          cursor: interactionVariant == 'button' ? 'pointer' : null,\n        },\n        backgroundColor: alpha(theme.palette.primary.light, 0.05),\n        ...sx,\n      }}\n      onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}\n      onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}\n      onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}\n      {...props}\n    >\n      {media ? <CardMedia component=\"img\" height=\"100\" image={media} alt=\"\" /> : null}\n\n      <CardContent sx={{ height: '100%' }}>\n        <FlexCol width=\"100%\" alignItems=\"flex-start\">\n          {iconImage ? <img src={iconImage} height=\"40px\" style={{ paddingBottom: '8px' }} /> : null}\n          {typeof headline === 'string' ? (\n            <Typography variant={small ? 'body1' : 'h6'} textAlign=\"left\" gutterBottom>\n              {headline}\n            </Typography>\n          ) : (\n            headline\n          )}\n          {subtitle ? (\n            <Typography variant=\"subtitle2\" textAlign=\"left\" gutterBottom>\n              {subtitle}\n            </Typography>\n          ) : null}\n          <Typography variant={small ? 'caption' : 'body1'} textAlign=\"left\" gutterBottom>\n            {desc}\n          </Typography>\n        </FlexCol>\n      </CardContent>\n      {interactionVariant == 'button' ? (\n        <CardActions>\n          <FlexGrowCol alignItems=\"flex-end\">\n            <IconButton\n              color={raised ? 'secondary' : 'primary'}\n              size={small ? 'small' : 'medium'}\n              onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}\n              disableFocusRipple\n              disableRipple\n              disableTouchRipple\n            >\n              <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />\n            </IconButton>\n          </FlexGrowCol>\n        </CardActions>\n      ) : null}\n    </CardEx>\n  )\n}\n","import { Card, CardProps } from '@mui/material'\nimport { useGradientStyles } from '@xyo-network/react-shared'\nimport { forwardRef } from 'react'\n\nexport type CardExProps = CardProps & {\n  gradient?: 'border' | 'background'\n}\n\nexport const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {\n  const { styles } = useGradientStyles()\n  const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}\n  return (\n    <Card\n      style={{\n        ...gradientStyle,\n        ...style,\n      }}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n\nCardExWithRef.displayName = 'CardEx'\n\nexport const CardEx = CardExWithRef\n"],"mappings":"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","names":["jsx","to","href"]}