@xyo-network/react-shared 2.64.0 → 2.64.2

package/dist/browser/components/Ampersand.js

@@ -1,6 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/Ampersand.tsx
 import { Typography } from "@mui/material";
-const Ampersand = (props) => {
+import { jsx } from "react/jsx-runtime";
+var Ampersand = (props) => {
   return /* @__PURE__ */ jsx(Typography, { marginX: 1, component: "span", ...props, children: "&" });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Ampersand.tsx"],"sourcesContent":["import { Typography, TypographyProps } from '@mui/material'\n\nexport const Ampersand: React.FC<TypographyProps> = (props) => {\n  return (\n    <Typography marginX={1} component=\"span\" {...props}>\n      &amp;\n    </Typography>\n  )\n}\n"],"mappings":"AAII;AAJJ,SAAS,kBAAmC;AAErC,MAAM,YAAuC,CAAC,UAAU;AAC7D,SACE,oBAAC,cAAW,SAAS,GAAG,WAAU,QAAQ,GAAG,OAAO,eAEpD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/Ampersand.tsx"],"sourcesContent":["import { Typography, TypographyProps } from '@mui/material'\n\nexport const Ampersand: React.FC<TypographyProps> = (props) => {\n  return (\n    <Typography marginX={1} component=\"span\" {...props}>\n      &amp;\n    </Typography>\n  )\n}\n"],"mappings":";AAAA,SAAS,kBAAmC;AAIxC;AAFG,IAAM,YAAuC,CAAC,UAAU;AAC7D,SACE,oBAAC,cAAW,SAAS,GAAG,WAAU,QAAQ,GAAG,OAAO,eAEpD;AAEJ;","names":[]}

package/dist/browser/components/BasicHero/BasicHero.js

@@ -1,10 +1,76 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/BasicHero/BasicHero.tsx
 import { Container, Grid, Typography } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexGrowCol, FlexGrowRow } from "@xylabs/react-flexbox";
 import { LinkEx } from "@xylabs/react-link";
-import { useGradientStyles, useIsMobile } from "../../hooks";
-const SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
+
+// src/hooks/GradientStyles/GradientStyles.tsx
+import { useTheme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+var 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"
+    }
+  };
+};
+var 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"
+    }
+  };
+};
+var useGradientStyles = () => {
+  const theme = useTheme();
+  const styles = theme.palette.mode === "dark" ? colorfulGradientDarkMode() : colorfulGradientLightMode();
+  const classes = makeStyles(styles);
+  return { classes, styles };
+};
+
+// src/hooks/useIsMobile.ts
+import { useTheme as useTheme2 } from "@mui/material";
+
+// src/hooks/useMediaQuery.ts
+import { useMediaQuery } from "@mui/material";
+
+// src/hooks/useIsMobile.ts
+var useIsMobile = () => {
+  const theme = useTheme2();
+  return useMediaQuery(theme.breakpoints.down("md"));
+};
+
+// src/components/BasicHero/BasicHero.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
   return /* @__PURE__ */ jsxs(
     FlexGrowRow,
     {
@@ -24,7 +90,7 @@ const SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, su
     }
   );
 };
-const ButtonSection = ({ href, to, buttonText }) => {
+var ButtonSection = ({ href, to, buttonText }) => {
   const isMobile = useIsMobile();
   return /* @__PURE__ */ jsx(
     ButtonEx,
@@ -45,7 +111,7 @@ const ButtonSection = ({ href, to, buttonText }) => {
     }
   );
 };
-const BasicHero = ({
+var BasicHero = ({
   backgroundImage,
   title,
   gradientTitle,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BasicHero/BasicHero.tsx"],"sourcesContent":["import { Container, Grid, Typography } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexBoxProps, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { ReactElement } from 'react'\n\nimport { useGradientStyles, useIsMobile } from '../../hooks'\n\nexport interface BasicHeroProps extends FlexBoxProps {\n  backgroundColor?: string\n  backgroundImage?: string\n  button1Href?: string\n  button1Text?: string\n  button1To?: string\n  button2Href?: string\n  button2Text?: string\n  button2To?: string\n  desc: string\n  gradientTitle?: string\n  heroImage?: string\n  subLinkIcon?: ReactElement\n  subLinkPath?: string\n  subLinkText1?: string\n  subLinkText2?: string\n  sx?: Record<string, string>\n  textColor?: string\n  title: string\n  title2?: string\n}\n\ninterface SubLinkSectionProps {\n  backgroundImageAlignment?: boolean\n  subLinkIcon?: ReactElement\n  subLinkPath?: string\n  subLinkText1?: string\n  subLinkText2?: string\n}\n\ninterface ButtonSectionProps {\n  buttonText?: string\n  href?: string\n  to?: string\n}\nconst SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {\n  return (\n    <FlexGrowRow\n      width=\"100%\"\n      sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}\n    >\n      {subLinkIcon ? <span>{subLinkIcon}&nbsp;</span> : null}\n      <Typography>{subLinkText1}&nbsp;</Typography>\n      <LinkEx href={subLinkPath} underline=\"always\" target=\"_blank\" color=\"inherit\">\n        <Typography>{subLinkText2}</Typography>\n      </LinkEx>\n    </FlexGrowRow>\n  )\n}\n\nconst ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {\n  const isMobile = useIsMobile()\n  return (\n    <ButtonEx\n      fullWidth={true}\n      marginTop={1}\n      marginBottom={1}\n      marginRight={isMobile ? 2 : 1}\n      marginLeft={isMobile ? 2 : 0}\n      target={href ?? '_blank'}\n      to={to}\n      href={href}\n      color=\"primary\"\n      variant=\"contained\"\n      paddingX={3}\n      sx={{ display: href || to ? 'flex' : 'none' }}\n    >\n      {buttonText}\n    </ButtonEx>\n  )\n}\n\nexport const BasicHero: React.FC<BasicHeroProps> = ({\n  backgroundImage,\n  title,\n  gradientTitle,\n  backgroundColor,\n  textColor,\n  desc,\n  heroImage,\n  title2,\n  subLinkText1,\n  subLinkText2,\n  subLinkPath,\n  button1Text,\n  button2Text,\n  button2To,\n  button1To,\n  button2Href,\n  button1Href,\n  subLinkIcon,\n  sx,\n  ...props\n}) => {\n  const isMobile = useIsMobile()\n  const { classes } = useGradientStyles()\n  return (\n    <FlexGrowCol\n      sx={{\n        backgroundImage: `url(${backgroundImage})`,\n        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },\n        minHeight: {\n          md: '500px',\n          sm: '400px',\n          xs: '200px',\n        },\n        ...(sx ?? {}),\n      }}\n      style={{\n        backgroundColor: backgroundColor ?? '',\n        backgroundRepeat: 'no-repeat',\n        backgroundSize: 'cover',\n        color: textColor ?? '',\n      }}\n      {...props}\n    >\n      <Container>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          sx={{\n            alignItems: { xs: 'center' },\n            justifyContent: { xs: 'center' },\n          }}\n        >\n          <Grid item xs={12} sm={8} md={backgroundImage ? 6 : 8} lg={backgroundImage ? 6 : 8}>\n            <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>\n              <Typography variant=\"h1\" component=\"h1\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n                {title ? <span>{`${title} `}</span> : null}\n                {gradientTitle ? <span className={classes().heading}> {` ${gradientTitle}`}</span> : null}\n                {title2 ? <span>{` ${title2}`}</span> : null}\n              </Typography>\n              <Typography variant=\"body1\" component=\"h2\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n                {desc}\n              </Typography>\n              <FlexGrowRow sx={{ flexDirection: { lg: 'row', xs: 'column' } }} width=\"100%\" marginTop={1}>\n                <ButtonSection href={button1Href} to={button1To} buttonText={button1Text} />\n                <ButtonSection href={button2Href} to={button2To} buttonText={button2Text} />\n              </FlexGrowRow>\n              <SubLinkSection\n                subLinkIcon={subLinkIcon}\n                subLinkText1={subLinkText1}\n                subLinkText2={subLinkText2}\n                subLinkPath={subLinkPath}\n                backgroundImageAlignment={backgroundImage ? true : false}\n              />\n            </FlexGrowCol>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            {heroImage ? <img src={heroImage} width=\"100%\" /> : null}\n          </Grid>\n        </Grid>\n      </Container>\n    </FlexGrowCol>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/BasicHero/BasicHero.tsx","../../../../src/hooks/GradientStyles/GradientStyles.tsx","../../../../src/hooks/useIsMobile.ts","../../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import { Container, Grid, Typography } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexBoxProps, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { ReactElement } from 'react'\n\nimport { useGradientStyles, useIsMobile } from '../../hooks'\n\nexport interface BasicHeroProps extends FlexBoxProps {\n  backgroundColor?: string\n  backgroundImage?: string\n  button1Href?: string\n  button1Text?: string\n  button1To?: string\n  button2Href?: string\n  button2Text?: string\n  button2To?: string\n  desc: string\n  gradientTitle?: string\n  heroImage?: string\n  subLinkIcon?: ReactElement\n  subLinkPath?: string\n  subLinkText1?: string\n  subLinkText2?: string\n  sx?: Record<string, string>\n  textColor?: string\n  title: string\n  title2?: string\n}\n\ninterface SubLinkSectionProps {\n  backgroundImageAlignment?: boolean\n  subLinkIcon?: ReactElement\n  subLinkPath?: string\n  subLinkText1?: string\n  subLinkText2?: string\n}\n\ninterface ButtonSectionProps {\n  buttonText?: string\n  href?: string\n  to?: string\n}\nconst SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {\n  return (\n    <FlexGrowRow\n      width=\"100%\"\n      sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}\n    >\n      {subLinkIcon ? <span>{subLinkIcon}&nbsp;</span> : null}\n      <Typography>{subLinkText1}&nbsp;</Typography>\n      <LinkEx href={subLinkPath} underline=\"always\" target=\"_blank\" color=\"inherit\">\n        <Typography>{subLinkText2}</Typography>\n      </LinkEx>\n    </FlexGrowRow>\n  )\n}\n\nconst ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {\n  const isMobile = useIsMobile()\n  return (\n    <ButtonEx\n      fullWidth={true}\n      marginTop={1}\n      marginBottom={1}\n      marginRight={isMobile ? 2 : 1}\n      marginLeft={isMobile ? 2 : 0}\n      target={href ?? '_blank'}\n      to={to}\n      href={href}\n      color=\"primary\"\n      variant=\"contained\"\n      paddingX={3}\n      sx={{ display: href || to ? 'flex' : 'none' }}\n    >\n      {buttonText}\n    </ButtonEx>\n  )\n}\n\nexport const BasicHero: React.FC<BasicHeroProps> = ({\n  backgroundImage,\n  title,\n  gradientTitle,\n  backgroundColor,\n  textColor,\n  desc,\n  heroImage,\n  title2,\n  subLinkText1,\n  subLinkText2,\n  subLinkPath,\n  button1Text,\n  button2Text,\n  button2To,\n  button1To,\n  button2Href,\n  button1Href,\n  subLinkIcon,\n  sx,\n  ...props\n}) => {\n  const isMobile = useIsMobile()\n  const { classes } = useGradientStyles()\n  return (\n    <FlexGrowCol\n      sx={{\n        backgroundImage: `url(${backgroundImage})`,\n        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },\n        minHeight: {\n          md: '500px',\n          sm: '400px',\n          xs: '200px',\n        },\n        ...(sx ?? {}),\n      }}\n      style={{\n        backgroundColor: backgroundColor ?? '',\n        backgroundRepeat: 'no-repeat',\n        backgroundSize: 'cover',\n        color: textColor ?? '',\n      }}\n      {...props}\n    >\n      <Container>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          sx={{\n            alignItems: { xs: 'center' },\n            justifyContent: { xs: 'center' },\n          }}\n        >\n          <Grid item xs={12} sm={8} md={backgroundImage ? 6 : 8} lg={backgroundImage ? 6 : 8}>\n            <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>\n              <Typography variant=\"h1\" component=\"h1\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n                {title ? <span>{`${title} `}</span> : null}\n                {gradientTitle ? <span className={classes().heading}> {` ${gradientTitle}`}</span> : null}\n                {title2 ? <span>{` ${title2}`}</span> : null}\n              </Typography>\n              <Typography variant=\"body1\" component=\"h2\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n                {desc}\n              </Typography>\n              <FlexGrowRow sx={{ flexDirection: { lg: 'row', xs: 'column' } }} width=\"100%\" marginTop={1}>\n                <ButtonSection href={button1Href} to={button1To} buttonText={button1Text} />\n                <ButtonSection href={button2Href} to={button2To} buttonText={button2Text} />\n              </FlexGrowRow>\n              <SubLinkSection\n                subLinkIcon={subLinkIcon}\n                subLinkText1={subLinkText1}\n                subLinkText2={subLinkText2}\n                subLinkPath={subLinkPath}\n                backgroundImageAlignment={backgroundImage ? true : false}\n              />\n            </FlexGrowCol>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            {heroImage ? <img src={heroImage} width=\"100%\" /> : null}\n          </Grid>\n        </Grid>\n      </Container>\n    </FlexGrowCol>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { makeStyles } from '@mui/styles'\nimport { CSSProperties } from 'react'\n\nexport interface GradientStyles {\n  background: CSSProperties\n  border: CSSProperties\n  heading: CSSProperties\n}\n\nexport const colorfulGradientLightMode = () => {\n  return {\n    background: {\n      backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n    },\n    border: {\n      borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n      borderImageSlice: 1,\n      borderImageSource: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n      borderRadius: 0,\n      borderStyle: 'solid',\n      borderWidth: '2px',\n    },\n    heading: {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n      display: 'inline-block',\n    },\n  }\n}\n\nexport const colorfulGradientDarkMode = () => {\n  return {\n    background: {\n      backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n    },\n    border: {\n      borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n      borderImageSlice: 1,\n      borderImageSource: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n      borderRadius: 0,\n      borderStyle: 'solid',\n      borderWidth: '2px',\n    },\n    heading: {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n      display: 'inline-block',\n    },\n  }\n}\n\nexport const useGradientStyles = () => {\n  const theme = useTheme()\n  const styles = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()\n  const classes = makeStyles(styles)\n  return { classes, styles }\n}\n","import { useTheme } from '@mui/material'\n\nimport { useMediaQuery } from './useMediaQuery'\n\nexport const useIsMobile = () => {\n  const theme = useTheme()\n  return useMediaQuery(theme.breakpoints.down('md'))\n}\n","// eslint-disable-next-line import/no-deprecated\nimport { useMediaQuery } from '@mui/material'\n\n// eslint-disable-next-line import/no-deprecated\nexport { useMediaQuery }\n\n/* This file only exists to deal with the false positve lint error */\n"],"mappings":"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","names":["useTheme","useTheme"]}

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

@@ -1,2 +1,204 @@
-export * from "./BasicHero";
+// src/components/BasicHero/BasicHero.tsx
+import { Container, Grid, Typography } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexGrowCol, FlexGrowRow } from "@xylabs/react-flexbox";
+import { LinkEx } from "@xylabs/react-link";
+
+// src/hooks/GradientStyles/GradientStyles.tsx
+import { useTheme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+var 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"
+    }
+  };
+};
+var 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"
+    }
+  };
+};
+var useGradientStyles = () => {
+  const theme = useTheme();
+  const styles = theme.palette.mode === "dark" ? colorfulGradientDarkMode() : colorfulGradientLightMode();
+  const classes = makeStyles(styles);
+  return { classes, styles };
+};
+
+// src/hooks/useIsMobile.ts
+import { useTheme as useTheme2 } from "@mui/material";
+
+// src/hooks/useMediaQuery.ts
+import { useMediaQuery } from "@mui/material";
+
+// src/hooks/useIsMobile.ts
+var useIsMobile = () => {
+  const theme = useTheme2();
+  return useMediaQuery(theme.breakpoints.down("md"));
+};
+
+// src/components/BasicHero/BasicHero.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SubLinkSection = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {
+  return /* @__PURE__ */ jsxs(
+    FlexGrowRow,
+    {
+      width: "100%",
+      sx: { flexDirection: { md: "row", xs: "column" }, justifyContent: { md: backgroundImageAlignment ? "flex-start" : "center", xs: "center" } },
+      children: [
+        subLinkIcon ? /* @__PURE__ */ jsxs("span", { children: [
+          subLinkIcon,
+          "\xA0"
+        ] }) : null,
+        /* @__PURE__ */ jsxs(Typography, { children: [
+          subLinkText1,
+          "\xA0"
+        ] }),
+        /* @__PURE__ */ jsx(LinkEx, { href: subLinkPath, underline: "always", target: "_blank", color: "inherit", children: /* @__PURE__ */ jsx(Typography, { children: subLinkText2 }) })
+      ]
+    }
+  );
+};
+var ButtonSection = ({ href, to, buttonText }) => {
+  const isMobile = useIsMobile();
+  return /* @__PURE__ */ jsx(
+    ButtonEx,
+    {
+      fullWidth: true,
+      marginTop: 1,
+      marginBottom: 1,
+      marginRight: isMobile ? 2 : 1,
+      marginLeft: isMobile ? 2 : 0,
+      target: href ?? "_blank",
+      to,
+      href,
+      color: "primary",
+      variant: "contained",
+      paddingX: 3,
+      sx: { display: href || to ? "flex" : "none" },
+      children: buttonText
+    }
+  );
+};
+var 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 { classes } = useGradientStyles();
+  return /* @__PURE__ */ jsx(
+    FlexGrowCol,
+    {
+      sx: {
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundPosition: { lg: "bottom", md: "center left", xs: "top left" },
+        minHeight: {
+          md: "500px",
+          sm: "400px",
+          xs: "200px"
+        },
+        ...sx ?? {}
+      },
+      style: {
+        backgroundColor: backgroundColor ?? "",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        color: textColor ?? ""
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(
+        Grid,
+        {
+          container: true,
+          justifyContent: "center",
+          alignItems: "center",
+          sx: {
+            alignItems: { xs: "center" },
+            justifyContent: { xs: "center" }
+          },
+          children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 8, md: backgroundImage ? 6 : 8, lg: backgroundImage ? 6 : 8, children: /* @__PURE__ */ jsxs(FlexGrowCol, { paddingY: 2, sx: { alignItems: { xs: backgroundImage && !isMobile ? "flex-start" : "center" } }, children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: "h1", component: "h1", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: [
+                title ? /* @__PURE__ */ jsx("span", { children: `${title} ` }) : null,
+                gradientTitle ? /* @__PURE__ */ jsxs("span", { className: classes().heading, children: [
+                  " ",
+                  ` ${gradientTitle}`
+                ] }) : null,
+                title2 ? /* @__PURE__ */ jsx("span", { children: ` ${title2}` }) : null
+              ] }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", component: "h2", gutterBottom: true, textAlign: backgroundImage && !isMobile ? "left" : "center", children: desc }),
+              /* @__PURE__ */ jsxs(FlexGrowRow, { sx: { flexDirection: { lg: "row", xs: "column" } }, width: "100%", marginTop: 1, children: [
+                /* @__PURE__ */ jsx(ButtonSection, { href: button1Href, to: button1To, buttonText: button1Text }),
+                /* @__PURE__ */ jsx(ButtonSection, { href: button2Href, to: button2To, buttonText: button2Text })
+              ] }),
+              /* @__PURE__ */ jsx(
+                SubLinkSection,
+                {
+                  subLinkIcon,
+                  subLinkText1,
+                  subLinkText2,
+                  subLinkPath,
+                  backgroundImageAlignment: backgroundImage ? true : false
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: heroImage ? /* @__PURE__ */ jsx("img", { src: heroImage, width: "100%" }) : null })
+          ]
+        }
+      ) })
+    }
+  );
+};
+export {
+  BasicHero
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BasicHero/index.ts"],"sourcesContent":["export * from './BasicHero'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../../src/components/BasicHero/BasicHero.tsx","../../../../src/hooks/GradientStyles/GradientStyles.tsx","../../../../src/hooks/useIsMobile.ts","../../../../src/hooks/useMediaQuery.ts"],"sourcesContent":["import { Container, Grid, Typography } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexBoxProps, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { LinkEx } from '@xylabs/react-link'\nimport { ReactElement } from 'react'\n\nimport { useGradientStyles, useIsMobile } from '../../hooks'\n\nexport interface BasicHeroProps extends FlexBoxProps {\n  backgroundColor?: string\n  backgroundImage?: string\n  button1Href?: string\n  button1Text?: string\n  button1To?: string\n  button2Href?: string\n  button2Text?: string\n  button2To?: string\n  desc: string\n  gradientTitle?: string\n  heroImage?: string\n  subLinkIcon?: ReactElement\n  subLinkPath?: string\n  subLinkText1?: string\n  subLinkText2?: string\n  sx?: Record<string, string>\n  textColor?: string\n  title: string\n  title2?: string\n}\n\ninterface SubLinkSectionProps {\n  backgroundImageAlignment?: boolean\n  subLinkIcon?: ReactElement\n  subLinkPath?: string\n  subLinkText1?: string\n  subLinkText2?: string\n}\n\ninterface ButtonSectionProps {\n  buttonText?: string\n  href?: string\n  to?: string\n}\nconst SubLinkSection: React.FC<SubLinkSectionProps> = ({ backgroundImageAlignment, subLinkIcon, subLinkPath, subLinkText1, subLinkText2 }) => {\n  return (\n    <FlexGrowRow\n      width=\"100%\"\n      sx={{ flexDirection: { md: 'row', xs: 'column' }, justifyContent: { md: backgroundImageAlignment ? 'flex-start' : 'center', xs: 'center' } }}\n    >\n      {subLinkIcon ? <span>{subLinkIcon}&nbsp;</span> : null}\n      <Typography>{subLinkText1}&nbsp;</Typography>\n      <LinkEx href={subLinkPath} underline=\"always\" target=\"_blank\" color=\"inherit\">\n        <Typography>{subLinkText2}</Typography>\n      </LinkEx>\n    </FlexGrowRow>\n  )\n}\n\nconst ButtonSection: React.FC<ButtonSectionProps> = ({ href, to, buttonText }) => {\n  const isMobile = useIsMobile()\n  return (\n    <ButtonEx\n      fullWidth={true}\n      marginTop={1}\n      marginBottom={1}\n      marginRight={isMobile ? 2 : 1}\n      marginLeft={isMobile ? 2 : 0}\n      target={href ?? '_blank'}\n      to={to}\n      href={href}\n      color=\"primary\"\n      variant=\"contained\"\n      paddingX={3}\n      sx={{ display: href || to ? 'flex' : 'none' }}\n    >\n      {buttonText}\n    </ButtonEx>\n  )\n}\n\nexport const BasicHero: React.FC<BasicHeroProps> = ({\n  backgroundImage,\n  title,\n  gradientTitle,\n  backgroundColor,\n  textColor,\n  desc,\n  heroImage,\n  title2,\n  subLinkText1,\n  subLinkText2,\n  subLinkPath,\n  button1Text,\n  button2Text,\n  button2To,\n  button1To,\n  button2Href,\n  button1Href,\n  subLinkIcon,\n  sx,\n  ...props\n}) => {\n  const isMobile = useIsMobile()\n  const { classes } = useGradientStyles()\n  return (\n    <FlexGrowCol\n      sx={{\n        backgroundImage: `url(${backgroundImage})`,\n        backgroundPosition: { lg: 'bottom', md: 'center left', xs: 'top left' },\n        minHeight: {\n          md: '500px',\n          sm: '400px',\n          xs: '200px',\n        },\n        ...(sx ?? {}),\n      }}\n      style={{\n        backgroundColor: backgroundColor ?? '',\n        backgroundRepeat: 'no-repeat',\n        backgroundSize: 'cover',\n        color: textColor ?? '',\n      }}\n      {...props}\n    >\n      <Container>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          sx={{\n            alignItems: { xs: 'center' },\n            justifyContent: { xs: 'center' },\n          }}\n        >\n          <Grid item xs={12} sm={8} md={backgroundImage ? 6 : 8} lg={backgroundImage ? 6 : 8}>\n            <FlexGrowCol paddingY={2} sx={{ alignItems: { xs: backgroundImage && !isMobile ? 'flex-start' : 'center' } }}>\n              <Typography variant=\"h1\" component=\"h1\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n                {title ? <span>{`${title} `}</span> : null}\n                {gradientTitle ? <span className={classes().heading}> {` ${gradientTitle}`}</span> : null}\n                {title2 ? <span>{` ${title2}`}</span> : null}\n              </Typography>\n              <Typography variant=\"body1\" component=\"h2\" gutterBottom textAlign={backgroundImage && !isMobile ? 'left' : 'center'}>\n                {desc}\n              </Typography>\n              <FlexGrowRow sx={{ flexDirection: { lg: 'row', xs: 'column' } }} width=\"100%\" marginTop={1}>\n                <ButtonSection href={button1Href} to={button1To} buttonText={button1Text} />\n                <ButtonSection href={button2Href} to={button2To} buttonText={button2Text} />\n              </FlexGrowRow>\n              <SubLinkSection\n                subLinkIcon={subLinkIcon}\n                subLinkText1={subLinkText1}\n                subLinkText2={subLinkText2}\n                subLinkPath={subLinkPath}\n                backgroundImageAlignment={backgroundImage ? true : false}\n              />\n            </FlexGrowCol>\n          </Grid>\n          <Grid item xs={12} md={6}>\n            {heroImage ? <img src={heroImage} width=\"100%\" /> : null}\n          </Grid>\n        </Grid>\n      </Container>\n    </FlexGrowCol>\n  )\n}\n","import { useTheme } from '@mui/material'\nimport { makeStyles } from '@mui/styles'\nimport { CSSProperties } from 'react'\n\nexport interface GradientStyles {\n  background: CSSProperties\n  border: CSSProperties\n  heading: CSSProperties\n}\n\nexport const colorfulGradientLightMode = () => {\n  return {\n    background: {\n      backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n    },\n    border: {\n      borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n      borderImageSlice: 1,\n      borderImageSource: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n      borderRadius: 0,\n      borderStyle: 'solid',\n      borderWidth: '2px',\n    },\n    heading: {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',\n      display: 'inline-block',\n    },\n  }\n}\n\nexport const colorfulGradientDarkMode = () => {\n  return {\n    background: {\n      backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n    },\n    border: {\n      borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n      borderImageSlice: 1,\n      borderImageSource: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n      borderRadius: 0,\n      borderStyle: 'solid',\n      borderWidth: '2px',\n    },\n    heading: {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',\n      display: 'inline-block',\n    },\n  }\n}\n\nexport const useGradientStyles = () => {\n  const theme = useTheme()\n  const styles = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()\n  const classes = makeStyles(styles)\n  return { classes, styles }\n}\n","import { useTheme } from '@mui/material'\n\nimport { useMediaQuery } from './useMediaQuery'\n\nexport const useIsMobile = () => {\n  const theme = useTheme()\n  return useMediaQuery(theme.breakpoints.down('md'))\n}\n","// eslint-disable-next-line import/no-deprecated\nimport { useMediaQuery } from '@mui/material'\n\n// eslint-disable-next-line import/no-deprecated\nexport { useMediaQuery }\n\n/* This file only exists to deal with the false positve lint error */\n"],"mappings":"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","names":["useTheme","useTheme"]}

package/dist/browser/components/Ellipsize.js

@@ -1,9 +1,29 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/Ellipsize.tsx
 import { Box, styled, Typography } from "@mui/material";
 import { forwardRef, useCallback, useState } from "react";
-import { useShareForwardedRef } from "../hooks";
-const ComponentName = "Ellipsize";
-const EllipsizeRoot = styled(Box, {
+
+// src/hooks/useShareForwardRef.ts
+import { useEffect, useRef } from "react";
+var useShareForwardedRef = (forwardedRef, refresh = 0) => {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+      return;
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  }, [forwardedRef, refresh]);
+  return innerRef;
+};
+
+// src/components/Ellipsize.tsx
+import { jsx } from "react/jsx-runtime";
+var ComponentName = "Ellipsize";
+var EllipsizeRoot = styled(Box, {
   name: ComponentName,
   shouldForwardProp: (prop) => prop !== "beforeLineHeight",
   slot: "Root"
@@ -22,13 +42,13 @@ const EllipsizeRoot = styled(Box, {
     }
   }
 }));
-const EllipsizeInnerWrap = styled(Box, {
+var EllipsizeInnerWrap = styled(Box, {
   name: ComponentName,
   slot: "innerWrap"
 })(() => ({
   position: "relative"
 }));
-const EllipsizeContentWrap = styled(Typography, {
+var EllipsizeContentWrap = styled(Typography, {
   name: ComponentName,
   shouldForwardProp: (prop) => prop !== "ellipsisPosition",
   slot: "contentWrap"
@@ -47,7 +67,7 @@ const EllipsizeContentWrap = styled(Typography, {
     } : {}
   });
 });
-const useClientHeight = () => {
+var useClientHeight = () => {
   const [contentWrapHeight, setContentWrapHeight] = useState();
   const contentWrapRef = useCallback((node) => {
     if (node !== null) {
@@ -56,7 +76,7 @@ const useClientHeight = () => {
   }, []);
   return { contentWrapHeight, contentWrapRef };
 };
-const EllipsizeBox = forwardRef(
+var EllipsizeBox = forwardRef(
   ({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
     const { contentWrapRef, contentWrapHeight } = useClientHeight();
     const sharedRef = useShareForwardedRef(ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Ellipsize.tsx"],"sourcesContent":["import { Box, BoxProps, styled, Typography, TypographyProps, TypographyTypeMap } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { useShareForwardedRef } from '../hooks'\n\n/**\n * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259\n */\n\nconst ComponentName = 'Ellipsize'\n\nexport interface EllipsizeRootProps extends BoxProps {\n  beforeLineHeight?: string | number\n}\n\nconst EllipsizeRoot = styled(Box, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'beforeLineHeight',\n  slot: 'Root',\n})<EllipsizeRootProps>(({ beforeLineHeight }) => ({\n  '&': {\n    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.\n    // the pseudo element with a hidden character establishes the proper height of the content and hides it\n    ':before': {\n      content: \"'nbsp;'\",\n      display: 'block',\n      // take the pseudo element out of the `display: block` flow so it won't push against our actual content\n      float: 'left',\n      visibility: 'hidden',\n      // since we are `display: block`, lineHeight is the height\n      ...(beforeLineHeight && { lineHeight: beforeLineHeight }),\n    },\n  },\n}))\n\nconst EllipsizeInnerWrap = styled(Box, {\n  name: ComponentName,\n  slot: 'innerWrap',\n})(() => ({\n  position: 'relative',\n}))\n\nconst EllipsizeContentWrap = styled(Typography, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'ellipsisPosition',\n  slot: 'contentWrap',\n})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {\n  return theme.unstable_sx({\n    fontFamily: fontFamily ?? 'monospace',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    ...(ellipsisPosition === 'start'\n      ? {\n          direction: 'rtl',\n          textAlign: 'left',\n        }\n      : {}),\n  })\n})\n\nconst useClientHeight = () => {\n  const [contentWrapHeight, setContentWrapHeight] = useState<string>()\n\n  const contentWrapRef = useCallback((node: HTMLElement) => {\n    if (node !== null) {\n      setContentWrapHeight(node.clientHeight + 'px')\n    }\n  }, [])\n\n  return { contentWrapHeight, contentWrapRef }\n}\n\n// See - https://mui.com/material-ui/guides/composition/#with-typescript\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {\n  ellipsisPosition?: 'start' | 'end'\n}\n\nexport interface EllipsizeBoxProps extends BoxProps {\n  disableSharedRef?: boolean\n  ellipsisPosition?: 'start' | 'end'\n  typographyProps?: TypographyWithComponentProps\n}\n\nexport const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(\n  ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {\n    // Allow syncing of :before pseudo element height with contentWrapHeight\n    const { contentWrapRef, contentWrapHeight } = useClientHeight()\n    const sharedRef = useShareForwardedRef(ref)\n\n    return (\n      <EllipsizeRoot beforeLineHeight={!!sharedRef && !disableSharedRef ? contentWrapHeight : undefined} {...props} ref={ref}>\n        <EllipsizeInnerWrap>\n          <EllipsizeContentWrap ref={contentWrapRef} component={'span'} ellipsisPosition={ellipsisPosition} variant=\"body2\" {...typographyProps}>\n            {children}\n          </EllipsizeContentWrap>\n        </EllipsizeInnerWrap>\n      </EllipsizeRoot>\n    )\n  },\n)\nEllipsizeBox.displayName = 'EllipsizeBox'\n"],"mappings":"AAkGU;AAlGV,SAAS,KAAe,QAAQ,kBAAsD;AAEtF,SAAS,YAAY,aAAa,gBAAgB;AAElD,SAAS,4BAA4B;AAMrC,MAAM,gBAAgB;AAMtB,MAAM,gBAAgB,OAAO,KAAK;AAAA,EAChC,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AAAA,EACtC,MAAM;AACR,CAAC,EAAsB,CAAC,EAAE,iBAAiB,OAAO;AAAA,EAChD,KAAK;AAAA;AAAA;AAAA,IAGH,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,MAET,OAAO;AAAA,MACP,YAAY;AAAA;AAAA,MAEZ,GAAI,oBAAoB,EAAE,YAAY,iBAAiB;AAAA,IACzD;AAAA,EACF;AACF,EAAE;AAEF,MAAM,qBAAqB,OAAO,KAAK;AAAA,EACrC,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAE,OAAO;AAAA,EACR,UAAU;AACZ,EAAE;AAEF,MAAM,uBAAuB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AAAA,EACtC,MAAM;AACR,CAAC,EAAgC,CAAC,EAAE,OAAO,kBAAkB,WAAW,MAAM;AAC5E,SAAO,MAAM,YAAY;AAAA,IACvB,YAAY,cAAc;AAAA,IAC1B,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,GAAI,qBAAqB,UACrB;AAAA,MACE,WAAW;AAAA,MACX,WAAW;AAAA,IACb,IACA,CAAC;AAAA,EACP,CAAC;AACH,CAAC;AAED,MAAM,kBAAkB,MAAM;AAC5B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB;AAEnE,QAAM,iBAAiB,YAAY,CAAC,SAAsB;AACxD,QAAI,SAAS,MAAM;AACjB,2BAAqB,KAAK,eAAe,IAAI;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,mBAAmB,eAAe;AAC7C;AAcO,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,UAAU,mBAAmB,SAAS,kBAAkB,iBAAiB,GAAG,MAAM,GAAG,QAAQ;AAE9F,UAAM,EAAE,gBAAgB,kBAAkB,IAAI,gBAAgB;AAC9D,UAAM,YAAY,qBAAqB,GAAG;AAE1C,WACE,oBAAC,iBAAc,kBAAkB,CAAC,CAAC,aAAa,CAAC,mBAAmB,oBAAoB,QAAY,GAAG,OAAO,KAC5G,8BAAC,sBACC,8BAAC,wBAAqB,KAAK,gBAAgB,WAAW,QAAQ,kBAAoC,SAAQ,SAAS,GAAG,iBACnH,UACH,GACF,GACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/Ellipsize.tsx","../../../src/hooks/useShareForwardRef.ts"],"sourcesContent":["import { Box, BoxProps, styled, Typography, TypographyProps, TypographyTypeMap } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { useShareForwardedRef } from '../hooks'\n\n/**\n * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259\n */\n\nconst ComponentName = 'Ellipsize'\n\nexport interface EllipsizeRootProps extends BoxProps {\n  beforeLineHeight?: string | number\n}\n\nconst EllipsizeRoot = styled(Box, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'beforeLineHeight',\n  slot: 'Root',\n})<EllipsizeRootProps>(({ beforeLineHeight }) => ({\n  '&': {\n    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.\n    // the pseudo element with a hidden character establishes the proper height of the content and hides it\n    ':before': {\n      content: \"'nbsp;'\",\n      display: 'block',\n      // take the pseudo element out of the `display: block` flow so it won't push against our actual content\n      float: 'left',\n      visibility: 'hidden',\n      // since we are `display: block`, lineHeight is the height\n      ...(beforeLineHeight && { lineHeight: beforeLineHeight }),\n    },\n  },\n}))\n\nconst EllipsizeInnerWrap = styled(Box, {\n  name: ComponentName,\n  slot: 'innerWrap',\n})(() => ({\n  position: 'relative',\n}))\n\nconst EllipsizeContentWrap = styled(Typography, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'ellipsisPosition',\n  slot: 'contentWrap',\n})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {\n  return theme.unstable_sx({\n    fontFamily: fontFamily ?? 'monospace',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    ...(ellipsisPosition === 'start'\n      ? {\n          direction: 'rtl',\n          textAlign: 'left',\n        }\n      : {}),\n  })\n})\n\nconst useClientHeight = () => {\n  const [contentWrapHeight, setContentWrapHeight] = useState<string>()\n\n  const contentWrapRef = useCallback((node: HTMLElement) => {\n    if (node !== null) {\n      setContentWrapHeight(node.clientHeight + 'px')\n    }\n  }, [])\n\n  return { contentWrapHeight, contentWrapRef }\n}\n\n// See - https://mui.com/material-ui/guides/composition/#with-typescript\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {\n  ellipsisPosition?: 'start' | 'end'\n}\n\nexport interface EllipsizeBoxProps extends BoxProps {\n  disableSharedRef?: boolean\n  ellipsisPosition?: 'start' | 'end'\n  typographyProps?: TypographyWithComponentProps\n}\n\nexport const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(\n  ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {\n    // Allow syncing of :before pseudo element height with contentWrapHeight\n    const { contentWrapRef, contentWrapHeight } = useClientHeight()\n    const sharedRef = useShareForwardedRef(ref)\n\n    return (\n      <EllipsizeRoot beforeLineHeight={!!sharedRef && !disableSharedRef ? contentWrapHeight : undefined} {...props} ref={ref}>\n        <EllipsizeInnerWrap>\n          <EllipsizeContentWrap ref={contentWrapRef} component={'span'} ellipsisPosition={ellipsisPosition} variant=\"body2\" {...typographyProps}>\n            {children}\n          </EllipsizeContentWrap>\n        </EllipsizeInnerWrap>\n      </EllipsizeRoot>\n    )\n  },\n)\nEllipsizeBox.displayName = 'EllipsizeBox'\n","import { ForwardedRef, useEffect, useRef } from 'react'\n\nexport const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T>, refresh = 0) => {\n  // final ref that will share value with forward ref. this is the one to be attached to components\n  const innerRef = useRef<T>(null)\n\n  useEffect(() => {\n    if (!forwardedRef) {\n      return\n    }\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(innerRef.current)\n      return\n    } else {\n      forwardedRef.current = innerRef.current\n    }\n  }, [forwardedRef, refresh])\n\n  return innerRef\n}\n"],"mappings":";AAAA,SAAS,KAAe,QAAQ,kBAAsD;AAEtF,SAAS,YAAY,aAAa,gBAAgB;;;ACFlD,SAAuB,WAAW,cAAc;AAEzC,IAAM,uBAAuB,CAAI,cAA+B,UAAU,MAAM;AAErF,QAAM,WAAW,OAAU,IAAI;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AACA,QAAI,OAAO,iBAAiB,YAAY;AACtC,mBAAa,SAAS,OAAO;AAC7B;AAAA,IACF,OAAO;AACL,mBAAa,UAAU,SAAS;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,cAAc,OAAO,CAAC;AAE1B,SAAO;AACT;;;AD+EU;AAxFV,IAAM,gBAAgB;AAMtB,IAAM,gBAAgB,OAAO,KAAK;AAAA,EAChC,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AAAA,EACtC,MAAM;AACR,CAAC,EAAsB,CAAC,EAAE,iBAAiB,OAAO;AAAA,EAChD,KAAK;AAAA;AAAA;AAAA,IAGH,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,MAET,OAAO;AAAA,MACP,YAAY;AAAA;AAAA,MAEZ,GAAI,oBAAoB,EAAE,YAAY,iBAAiB;AAAA,IACzD;AAAA,EACF;AACF,EAAE;AAEF,IAAM,qBAAqB,OAAO,KAAK;AAAA,EACrC,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAE,OAAO;AAAA,EACR,UAAU;AACZ,EAAE;AAEF,IAAM,uBAAuB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AAAA,EACtC,MAAM;AACR,CAAC,EAAgC,CAAC,EAAE,OAAO,kBAAkB,WAAW,MAAM;AAC5E,SAAO,MAAM,YAAY;AAAA,IACvB,YAAY,cAAc;AAAA,IAC1B,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,GAAI,qBAAqB,UACrB;AAAA,MACE,WAAW;AAAA,MACX,WAAW;AAAA,IACb,IACA,CAAC;AAAA,EACP,CAAC;AACH,CAAC;AAED,IAAM,kBAAkB,MAAM;AAC5B,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB;AAEnE,QAAM,iBAAiB,YAAY,CAAC,SAAsB;AACxD,QAAI,SAAS,MAAM;AACjB,2BAAqB,KAAK,eAAe,IAAI;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,mBAAmB,eAAe;AAC7C;AAcO,IAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,UAAU,mBAAmB,SAAS,kBAAkB,iBAAiB,GAAG,MAAM,GAAG,QAAQ;AAE9F,UAAM,EAAE,gBAAgB,kBAAkB,IAAI,gBAAgB;AAC9D,UAAM,YAAY,qBAAqB,GAAG;AAE1C,WACE,oBAAC,iBAAc,kBAAkB,CAAC,CAAC,aAAa,CAAC,mBAAmB,oBAAoB,QAAY,GAAG,OAAO,KAC5G,8BAAC,sBACC,8BAAC,wBAAqB,KAAK,gBAAgB,WAAW,QAAQ,kBAAoC,SAAQ,SAAS,GAAG,iBACnH,UACH,GACF,GACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}

package/dist/browser/components/ErrorBoundary.js

@@ -1,8 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ErrorBoundary.tsx
 import { Typography } from "@mui/material";
 import { FlexCol } from "@xylabs/react-flexbox";
 import { Component } from "react";
-class ErrorBoundary extends Component {
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
     this.state = { error: void 0 };
@@ -29,7 +30,7 @@ class ErrorBoundary extends Component {
     }
     return this.props.children;
   }
-}
+};
 export {
   ErrorBoundary
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ErrorBoundary.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { Component, ErrorInfo, ReactNode } from 'react'\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode\n  // fallback as a static ReactNode value\n  fallback?: ReactNode\n  // fallback element that can receive the error as a prop\n  fallbackWithError?: (error: Error) => ReactNode\n}\n\nexport interface ErrorBoundaryState {\n  error?: Error\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { error: undefined }\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    console.error(`${error}: ${errorInfo}`)\n  }\n\n  override render() {\n    if (this.state.error) {\n      if (this.props.fallbackWithError) {\n        return this.props.fallbackWithError(this.state.error)\n      }\n      return (\n        this.props.fallback ?? (\n          <FlexCol>\n            <Typography variant=\"h1\">Something went wrong.</Typography>\n            <Typography variant=\"body1\">[{this.state.error?.message}]</Typography>\n          </FlexCol>\n        )\n      )\n    }\n\n    return this.props.children\n  }\n}\n"],"mappings":"AAsCY,cACA,YADA;AAtCZ,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,iBAAuC;AAczC,MAAM,sBAAsB,UAAkD;AAAA,EACnF,YAAY,OAA2B;AACrC,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,OAAO,OAAU;AAAA,EAClC;AAAA,EAEA,OAAO,yBAAyB,OAAc;AAC5C,WAAO,EAAE,MAAM;AAAA,EACjB;AAAA,EAES,kBAAkB,OAAc,WAAsB;AAC7D,YAAQ,MAAM,GAAG,KAAK,KAAK,SAAS,EAAE;AAAA,EACxC;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,MAAM,OAAO;AACpB,UAAI,KAAK,MAAM,mBAAmB;AAChC,eAAO,KAAK,MAAM,kBAAkB,KAAK,MAAM,KAAK;AAAA,MACtD;AACA,aACE,KAAK,MAAM,YACT,qBAAC,WACC;AAAA,4BAAC,cAAW,SAAQ,MAAK,mCAAqB;AAAA,QAC9C,qBAAC,cAAW,SAAQ,SAAQ;AAAA;AAAA,UAAE,KAAK,MAAM,OAAO;AAAA,UAAQ;AAAA,WAAC;AAAA,SAC3D;AAAA,IAGN;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/ErrorBoundary.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { Component, ErrorInfo, ReactNode } from 'react'\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode\n  // fallback as a static ReactNode value\n  fallback?: ReactNode\n  // fallback element that can receive the error as a prop\n  fallbackWithError?: (error: Error) => ReactNode\n}\n\nexport interface ErrorBoundaryState {\n  error?: Error\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { error: undefined }\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    console.error(`${error}: ${errorInfo}`)\n  }\n\n  override render() {\n    if (this.state.error) {\n      if (this.props.fallbackWithError) {\n        return this.props.fallbackWithError(this.state.error)\n      }\n      return (\n        this.props.fallback ?? (\n          <FlexCol>\n            <Typography variant=\"h1\">Something went wrong.</Typography>\n            <Typography variant=\"body1\">[{this.state.error?.message}]</Typography>\n          </FlexCol>\n        )\n      )\n    }\n\n    return this.props.children\n  }\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,iBAAuC;AAoCpC,cACA,YADA;AAtBL,IAAM,gBAAN,cAA4B,UAAkD;AAAA,EACnF,YAAY,OAA2B;AACrC,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,OAAO,OAAU;AAAA,EAClC;AAAA,EAEA,OAAO,yBAAyB,OAAc;AAC5C,WAAO,EAAE,MAAM;AAAA,EACjB;AAAA,EAES,kBAAkB,OAAc,WAAsB;AAC7D,YAAQ,MAAM,GAAG,KAAK,KAAK,SAAS,EAAE;AAAA,EACxC;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,MAAM,OAAO;AACpB,UAAI,KAAK,MAAM,mBAAmB;AAChC,eAAO,KAAK,MAAM,kBAAkB,KAAK,MAAM,KAAK;AAAA,MACtD;AACA,aACE,KAAK,MAAM,YACT,qBAAC,WACC;AAAA,4BAAC,cAAW,SAAQ,MAAK,mCAAqB;AAAA,QAC9C,qBAAC,cAAW,SAAQ,SAAQ;AAAA;AAAA,UAAE,KAAK,MAAM,OAAO;AAAA,UAAQ;AAAA,WAAC;AAAA,SAC3D;AAAA,IAGN;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}

package/dist/browser/components/ListItemButtonEx.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/ListItemButtonEx.tsx
 import { ListItemButton } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-const ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
+import { jsx } from "react/jsx-runtime";
+var ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
   const navigate = useNavigate();
   const localOnClick = (event) => {
     onClick?.(event);
@@ -11,7 +12,7 @@ const ListItemButtonExTo = ({ to, toOptions, onClick, ...props }) => {
   };
   return /* @__PURE__ */ jsx(ListItemButton, { onClick: localOnClick, ...props });
 };
-const ListItemButtonEx = ({ to, ...props }) => {
+var ListItemButtonEx = ({ to, ...props }) => {
   if (to) {
     return /* @__PURE__ */ jsx(ListItemButtonExTo, { to, ...props });
   } else {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ListItemButtonEx.tsx"],"sourcesContent":["import { ListItemButton, ListItemButtonProps } from '@mui/material'\nimport { MouseEvent } from 'react'\nimport { NavigateOptions, To, useNavigate } from 'react-router-dom'\n\nexport interface ListItemButtonExProps extends ListItemButtonProps {\n  target?: string\n  to?: To\n  toOptions?: NavigateOptions\n}\n\nexport const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({ to, toOptions, onClick, ...props }) => {\n  const navigate = useNavigate()\n  const localOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (to) {\n      navigate(to, toOptions)\n    }\n  }\n\n  return <ListItemButton onClick={localOnClick} {...props} />\n}\n\nexport const ListItemButtonEx: React.FC<ListItemButtonExProps> = ({ to, ...props }) => {\n  if (to) {\n    return <ListItemButtonExTo to={to} {...props} />\n  } else {\n    return <ListItemButton {...props} />\n  }\n}\n"],"mappings":"AAmBS;AAnBT,SAAS,sBAA2C;AAEpD,SAA8B,mBAAmB;AAQ1C,MAAM,qBAAsD,CAAC,EAAE,IAAI,WAAW,SAAS,GAAG,MAAM,MAAM;AAC3G,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,CAAC,UAAsC;AAC1D,cAAU,KAAK;AACf,QAAI,IAAI;AACN,eAAS,IAAI,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,SAAO,oBAAC,kBAAe,SAAS,cAAe,GAAG,OAAO;AAC3D;AAEO,MAAM,mBAAoD,CAAC,EAAE,IAAI,GAAG,MAAM,MAAM;AACrF,MAAI,IAAI;AACN,WAAO,oBAAC,sBAAmB,IAAS,GAAG,OAAO;AAAA,EAChD,OAAO;AACL,WAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,EACpC;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/ListItemButtonEx.tsx"],"sourcesContent":["import { ListItemButton, ListItemButtonProps } from '@mui/material'\nimport { MouseEvent } from 'react'\nimport { NavigateOptions, To, useNavigate } from 'react-router-dom'\n\nexport interface ListItemButtonExProps extends ListItemButtonProps {\n  target?: string\n  to?: To\n  toOptions?: NavigateOptions\n}\n\nexport const ListItemButtonExTo: React.FC<ListItemButtonExProps> = ({ to, toOptions, onClick, ...props }) => {\n  const navigate = useNavigate()\n  const localOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (to) {\n      navigate(to, toOptions)\n    }\n  }\n\n  return <ListItemButton onClick={localOnClick} {...props} />\n}\n\nexport const ListItemButtonEx: React.FC<ListItemButtonExProps> = ({ to, ...props }) => {\n  if (to) {\n    return <ListItemButtonExTo to={to} {...props} />\n  } else {\n    return <ListItemButton {...props} />\n  }\n}\n"],"mappings":";AAAA,SAAS,sBAA2C;AAEpD,SAA8B,mBAAmB;AAiBxC;AATF,IAAM,qBAAsD,CAAC,EAAE,IAAI,WAAW,SAAS,GAAG,MAAM,MAAM;AAC3G,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,CAAC,UAAsC;AAC1D,cAAU,KAAK;AACf,QAAI,IAAI;AACN,eAAS,IAAI,SAAS;AAAA,IACxB;AAAA,EACF;AAEA,SAAO,oBAAC,kBAAe,SAAS,cAAe,GAAG,OAAO;AAC3D;AAEO,IAAM,mBAAoD,CAAC,EAAE,IAAI,GAAG,MAAM,MAAM;AACrF,MAAI,IAAI;AACN,WAAO,oBAAC,sBAAmB,IAAS,GAAG,OAAO;AAAA,EAChD,OAAO;AACL,WAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,EACpC;AACF;","names":[]}

package/dist/browser/components/LoadResult.js

@@ -1,18 +1,31 @@
-import { Fragment, jsx } from "react/jsx-runtime";
+// src/components/LoadResult.tsx
 import { FlexGrowRow } from "@xylabs/react-flexbox";
-import { NotFound } from "./NotFound";
+
+// src/components/NotFound.tsx
+import { Typography } from "@mui/material";
+import { FlexGrowCol } from "@xylabs/react-flexbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotFound = (props) => {
+  return /* @__PURE__ */ jsxs(FlexGrowCol, { ...props, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h2", children: "Sorry!" }),
+    /* @__PURE__ */ jsx(Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })
+  ] });
+};
+
+// src/components/LoadResult.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 function LoadResult(props) {
   const { notFound, error, searchResult, children } = props;
   if (notFound) {
-    return /* @__PURE__ */ jsx(NotFound, {});
+    return /* @__PURE__ */ jsx2(NotFound, {});
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
+    return /* @__PURE__ */ jsx2(Fragment, { children });
   }
   if (searchResult === void 0) {
-    return /* @__PURE__ */ jsx(FlexGrowRow, { busy: true, minHeight: "50px" });
+    return /* @__PURE__ */ jsx2(FlexGrowRow, { busy: true, minHeight: "50px" });
   } else {
-    return /* @__PURE__ */ jsx(Fragment, { children });
+    return /* @__PURE__ */ jsx2(Fragment, { children });
   }
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LoadResult.tsx"],"sourcesContent":["import { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { PropsWithChildren } from 'react'\n\nimport { NotFound } from './NotFound'\n\nexport interface LoadResultProps<T> {\n  /** @deprecated - use error prop */\n  apiError?: Error\n  /** Defer error handling to the children and load them */\n  error?: boolean\n  notFound: boolean\n  searchResult: T | undefined\n}\n\nexport function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>) {\n  const { notFound, error, searchResult, children } = props\n  if (notFound) {\n    return <NotFound />\n  }\n  if (error) {\n    return <>{children}</>\n  }\n  if (searchResult === undefined) {\n    return <FlexGrowRow busy minHeight=\"50px\" />\n  } else {\n    return <>{children}</>\n  }\n}\n"],"mappings":"AAiBW,SAGA,UAHA;AAjBX,SAAS,mBAAmB;AAG5B,SAAS,gBAAgB;AAWlB,SAAS,WAAc,OAA8C;AAC1E,QAAM,EAAE,UAAU,OAAO,cAAc,SAAS,IAAI;AACpD,MAAI,UAAU;AACZ,WAAO,oBAAC,YAAS;AAAA,EACnB;AACA,MAAI,OAAO;AACT,WAAO,gCAAG,UAAS;AAAA,EACrB;AACA,MAAI,iBAAiB,QAAW;AAC9B,WAAO,oBAAC,eAAY,MAAI,MAAC,WAAU,QAAO;AAAA,EAC5C,OAAO;AACL,WAAO,gCAAG,UAAS;AAAA,EACrB;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/LoadResult.tsx","../../../src/components/NotFound.tsx"],"sourcesContent":["import { FlexGrowRow } from '@xylabs/react-flexbox'\nimport { PropsWithChildren } from 'react'\n\nimport { NotFound } from './NotFound'\n\nexport interface LoadResultProps<T> {\n  /** @deprecated - use error prop */\n  apiError?: Error\n  /** Defer error handling to the children and load them */\n  error?: boolean\n  notFound: boolean\n  searchResult: T | undefined\n}\n\nexport function LoadResult<T>(props: PropsWithChildren<LoadResultProps<T>>) {\n  const { notFound, error, searchResult, children } = props\n  if (notFound) {\n    return <NotFound />\n  }\n  if (error) {\n    return <>{children}</>\n  }\n  if (searchResult === undefined) {\n    return <FlexGrowRow busy minHeight=\"50px\" />\n  } else {\n    return <>{children}</>\n  }\n}\n","import { Typography } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\n\nconst NotFound: React.FC<FlexBoxProps> = (props) => {\n  return (\n    <FlexGrowCol {...props}>\n      <Typography variant=\"h2\">Sorry!</Typography>\n      <Typography marginY={3} variant=\"body2\">\n        {\"Can't find anything here\"}\n      </Typography>\n    </FlexGrowCol>\n  )\n}\n\nexport { NotFound }\n"],"mappings":";AAAA,SAAS,mBAAmB;;;ACA5B,SAAS,kBAAkB;AAC3B,SAAuB,mBAAmB;AAItC,SACE,KADF;AAFJ,IAAM,WAAmC,CAAC,UAAU;AAClD,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,wBAAC,cAAW,SAAQ,MAAK,oBAAM;AAAA,IAC/B,oBAAC,cAAW,SAAS,GAAG,SAAQ,SAC7B,sCACH;AAAA,KACF;AAEJ;;;ADKW,SAGA,UAHA,OAAAA,YAAA;AAHJ,SAAS,WAAc,OAA8C;AAC1E,QAAM,EAAE,UAAU,OAAO,cAAc,SAAS,IAAI;AACpD,MAAI,UAAU;AACZ,WAAO,gBAAAA,KAAC,YAAS;AAAA,EACnB;AACA,MAAI,OAAO;AACT,WAAO,gBAAAA,KAAA,YAAG,UAAS;AAAA,EACrB;AACA,MAAI,iBAAiB,QAAW;AAC9B,WAAO,gBAAAA,KAAC,eAAY,MAAI,MAAC,WAAU,QAAO;AAAA,EAC5C,OAAO;AACL,WAAO,gBAAAA,KAAA,YAAG,UAAS;AAAA,EACrB;AACF;","names":["jsx"]}

package/dist/browser/components/NotFound.js

@@ -1,7 +1,8 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/NotFound.tsx
 import { Typography } from "@mui/material";
 import { FlexGrowCol } from "@xylabs/react-flexbox";
-const NotFound = (props) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotFound = (props) => {
   return /* @__PURE__ */ jsxs(FlexGrowCol, { ...props, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h2", children: "Sorry!" }),
     /* @__PURE__ */ jsx(Typography, { marginY: 3, variant: "body2", children: "Can't find anything here" })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NotFound.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\n\nconst NotFound: React.FC<FlexBoxProps> = (props) => {\n  return (\n    <FlexGrowCol {...props}>\n      <Typography variant=\"h2\">Sorry!</Typography>\n      <Typography marginY={3} variant=\"body2\">\n        {\"Can't find anything here\"}\n      </Typography>\n    </FlexGrowCol>\n  )\n}\n\nexport { NotFound }\n"],"mappings":"AAKI,SACE,KADF;AALJ,SAAS,kBAAkB;AAC3B,SAAuB,mBAAmB;AAE1C,MAAM,WAAmC,CAAC,UAAU;AAClD,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,wBAAC,cAAW,SAAQ,MAAK,oBAAM;AAAA,IAC/B,oBAAC,cAAW,SAAS,GAAG,SAAQ,SAC7B,sCACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/NotFound.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\n\nconst NotFound: React.FC<FlexBoxProps> = (props) => {\n  return (\n    <FlexGrowCol {...props}>\n      <Typography variant=\"h2\">Sorry!</Typography>\n      <Typography marginY={3} variant=\"body2\">\n        {\"Can't find anything here\"}\n      </Typography>\n    </FlexGrowCol>\n  )\n}\n\nexport { NotFound }\n"],"mappings":";AAAA,SAAS,kBAAkB;AAC3B,SAAuB,mBAAmB;AAItC,SACE,KADF;AAFJ,IAAM,WAAmC,CAAC,UAAU;AAClD,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,wBAAC,cAAW,SAAQ,MAAK,oBAAM;AAAA,IAC/B,oBAAC,cAAW,SAAS,GAAG,SAAQ,SAC7B,sCACH;AAAA,KACF;AAEJ;","names":[]}