@xyo-network/react-shared 2.25.38 → 2.25.41

package/src/components/SimpleCard/SimpleCard.tsx

@@ -1,12 +1,13 @@
 import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'
-import { alpha, Card, CardActions, CardContent, CardMedia, CardProps, IconButton, Typography, useTheme } from '@mui/material'
+import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'
 import { FlexCol, FlexGrowCol } from '@xylabs/sdk-react'
 import { ReactNode, useState } from 'react'
 import { To, useNavigate } from 'react-router-dom'
 
 import { useIsMobile } from '../../hooks'
+import { CardEx, CardExProps } from '../CardEx'
 
-export interface SimpleCardProps extends CardProps {
+export interface SimpleCardProps extends CardExProps {
   headline?: ReactNode
   desc?: ReactNode
   href?: string
@@ -30,10 +31,9 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({ iconImage, subtitle, hea
     href ? window.open(href) : navigate('/404')
   }
   return (
-    <Card
+    <CardEx
       elevation={raised ? 3 : 0}
       style={{ height: '100%', justifyContent: 'space-between', width: '100%' }}
-      {...props}
       sx={{
         '&:hover': {
           cursor: interactionVariant == 'button' ? 'pointer' : null,
@@ -43,6 +43,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({ iconImage, subtitle, hea
       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}
     >
       {media ? <CardMedia component="img" height="100" image={media} alt="" /> : null}
 
@@ -82,6 +83,6 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({ iconImage, subtitle, hea
           </FlexGrowCol>
         </CardActions>
       ) : null}
-    </Card>
+    </CardEx>
   )
 }

package/src/components/TypographyEx.tsx

@@ -0,0 +1,12 @@
+import { Typography, TypographyProps } from '@mui/material'
+
+import { useGradientStyles } from '../hooks'
+
+export interface TypographyExProps extends TypographyProps {
+  gradient?: 'text'
+}
+
+export const TypographyEx: React.FC<TypographyExProps> = ({ gradient, ...props }) => {
+  const { classes } = useGradientStyles()
+  return <Typography className={gradient === 'text' ? classes().heading : undefined} {...props} />
+}

package/src/components/index.ts

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

package/src/{components/GradientText/GradientText.tsx → hooks/GradientStyles/GradientStyle.stories.tsx}

@@ -1,54 +1,16 @@
-import { Divider, Grid, Typography, useTheme } from '@mui/material'
-import { makeStyles } from '@mui/styles'
-import { FlexCol } from '@xylabs/sdk-react'
+import { Divider, Grid, Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+import { BrowserRouter } from 'react-router-dom'
 
-import { SimpleCard } from '../SimpleCard'
+import { SimpleCard } from '../../components'
+import { useGradientStyles } from './GradientStyles'
 
-export const colorfulGradientLightMode = makeStyles(() => ({
-  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: 4,
-    borderStyle: 'solid',
-    borderWidth: '2px',
-  },
-  heading: {
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-    background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
-    display: 'inline-block',
-  },
-}))
-
-export const colorfulGradientDarkMode = makeStyles(() => ({
-  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: 4,
-    borderStyle: 'solid',
-    borderWidth: '2px',
-  },
-  heading: {
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-    background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
-    display: 'inline-block',
-  },
-}))
-
-export const GradientTextExample: React.FC = () => {
-  const theme = useTheme()
-  const classes = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()
+const GradientTextExample: React.FC<FlexBoxProps> = (props) => {
+  const { classes } = useGradientStyles()
+  const classNames = classes()
   return (
-    <FlexCol alignItems="stretch">
+    <FlexCol alignItems="stretch" {...props}>
       <Typography variant="h4" gutterBottom>
         XYO Network Gradient Text Options
       </Typography>
@@ -57,13 +19,13 @@ export const GradientTextExample: React.FC = () => {
       </Typography>
       <Divider sx={{ marginY: '8px' }} />
       <Typography variant="h5" gutterBottom>
-        Lorem ipsum dolor sit amet consectetur, <span className={classes.heading}>adipisicing elit.</span>
+        Lorem ipsum dolor sit amet consectetur, <span className={classNames.heading}>adipisicing elit.</span>
       </Typography>
       <Typography variant="subtitle2" gutterBottom paddingTop={3}>
         Body Text
       </Typography>
       <Divider sx={{ marginY: '8px' }} />
-      <Typography variant="h5" gutterBottom className={classes.heading}>
+      <Typography variant="h5" gutterBottom className={classNames.heading}>
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic,
         deserunt tempore, natus optio veritatis dolor?
       </Typography>
@@ -71,7 +33,7 @@ export const GradientTextExample: React.FC = () => {
         Caption
       </Typography>
       <Divider sx={{ marginY: '8px' }} />
-      <Typography variant="caption" gutterBottom className={classes.heading}>
+      <Typography variant="caption" gutterBottom className={classNames.heading}>
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic,
         deserunt tempore, natus optio veritatis dolor?
       </Typography>
@@ -82,7 +44,7 @@ export const GradientTextExample: React.FC = () => {
       <Grid container spacing={2}>
         <Grid item xs={12} sm={6} md={4}>
           <SimpleCard
-            className={classes.border}
+            gradient="border"
             headline="Gradient Border Simple Card"
             desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita."
             interactionVariant="button"
@@ -90,15 +52,15 @@ export const GradientTextExample: React.FC = () => {
         </Grid>
         <Grid item xs={12} sm={6} md={4}>
           <SimpleCard
-            className={classes.border}
-            headline="Gradient Border Simple Card"
+            gradient="background"
+            headline="Gradient Background Simple Card"
             desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita."
             interactionVariant="button"
           />
         </Grid>
         <Grid item xs={12} sm={6} md={4}>
           <SimpleCard
-            className={classes.border}
+            gradient="border"
             headline="Gradient Border Simple Card"
             desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita."
             interactionVariant="button"
@@ -108,3 +70,26 @@ export const GradientTextExample: React.FC = () => {
     </FlexCol>
   )
 }
+
+const StorybookEntry = {
+  argTypes: {},
+  component: GradientTextExample,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/GradientText',
+} as ComponentMeta<typeof GradientTextExample>
+
+const Template: ComponentStory<typeof GradientTextExample> = (args) => (
+  <BrowserRouter>
+    <GradientTextExample {...args}></GradientTextExample>
+  </BrowserRouter>
+)
+
+export const Default = Template.bind({})
+Default.args = {}
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/hooks/GradientStyles/GradientStyles.tsx

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

package/src/hooks/GradientStyles/index.ts

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

package/src/hooks/index.ts

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

package/dist/cjs/components/GradientText/GradientText.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const colorfulGradientLightMode: (props?: any) => import("@mui/styles").ClassNameMap<"border" | "background" | "heading">;
-export declare const colorfulGradientDarkMode: (props?: any) => import("@mui/styles").ClassNameMap<"border" | "background" | "heading">;
-export declare const GradientTextExample: React.FC;

package/dist/cjs/components/GradientText/GradientText.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GradientTextExample = exports.colorfulGradientDarkMode = exports.colorfulGradientLightMode = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/styles");
-const sdk_react_1 = require("@xylabs/sdk-react");
-const SimpleCard_1 = require("../SimpleCard");
-exports.colorfulGradientLightMode = (0, styles_1.makeStyles)(() => ({
-    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: 4,
-        borderStyle: 'solid',
-        borderWidth: '2px',
-    },
-    heading: {
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
-        display: 'inline-block',
-    },
-}));
-exports.colorfulGradientDarkMode = (0, styles_1.makeStyles)(() => ({
-    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: 4,
-        borderStyle: 'solid',
-        borderWidth: '2px',
-    },
-    heading: {
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
-        display: 'inline-block',
-    },
-}));
-const GradientTextExample = () => {
-    const theme = (0, material_1.useTheme)();
-    const classes = theme.palette.mode === 'dark' ? (0, exports.colorfulGradientDarkMode)() : (0, exports.colorfulGradientLightMode)();
-    return ((0, jsx_runtime_1.jsxs)(sdk_react_1.FlexCol, Object.assign({ alignItems: "stretch" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", gutterBottom: true }, { children: "XYO Network Gradient Text Options" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2", gutterBottom: true, paddingTop: 3 }, { children: "Highlight" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { marginY: '8px' } }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h5", gutterBottom: true }, { children: ["Lorem ipsum dolor sit amet consectetur, ", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.heading }, { children: "adipisicing elit." }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2", gutterBottom: true, paddingTop: 3 }, { children: "Body Text" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { marginY: '8px' } }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", gutterBottom: true, className: classes.heading }, { children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic, deserunt tempore, natus optio veritatis dolor?" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2", gutterBottom: true, paddingTop: 3 }, { children: "Caption" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { marginY: '8px' } }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", gutterBottom: true, className: classes.heading }, { children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic, deserunt tempore, natus optio veritatis dolor?" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2", gutterBottom: true, paddingTop: 3 }, { children: "Card Border" })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { marginY: '8px' } }), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: (0, jsx_runtime_1.jsx)(SimpleCard_1.SimpleCard, { className: classes.border, headline: "Gradient Border Simple Card", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita.", interactionVariant: "button" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: (0, jsx_runtime_1.jsx)(SimpleCard_1.SimpleCard, { className: classes.border, headline: "Gradient Border Simple Card", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita.", interactionVariant: "button" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 6, md: 4 }, { children: (0, jsx_runtime_1.jsx)(SimpleCard_1.SimpleCard, { className: classes.border, headline: "Gradient Border Simple Card", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita.", interactionVariant: "button" }) }))] }))] })));
-};
-exports.GradientTextExample = GradientTextExample;
-//# sourceMappingURL=GradientText.js.map

package/dist/cjs/components/GradientText/GradientText.js.map

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

package/dist/cjs/components/GradientText/index.d.ts

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

package/dist/cjs/components/GradientText/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/GradientText/index.ts"],"names":[],"mappings":";;;AAAA,yDAA8B"}

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const colorfulGradientLightMode: (props?: any) => import("@mui/styles").ClassNameMap<"border" | "background" | "heading">;
-export declare const colorfulGradientDarkMode: (props?: any) => import("@mui/styles").ClassNameMap<"border" | "background" | "heading">;
-export declare const GradientTextExample: React.FC;

package/dist/esm/components/GradientText/GradientText.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Grid, Typography, useTheme } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { FlexCol } from '@xylabs/sdk-react';
-import { SimpleCard } from '../SimpleCard';
-export const colorfulGradientLightMode = makeStyles(() => ({
-    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: 4,
-        borderStyle: 'solid',
-        borderWidth: '2px',
-    },
-    heading: {
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
-        display: 'inline-block',
-    },
-}));
-export const colorfulGradientDarkMode = makeStyles(() => ({
-    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: 4,
-        borderStyle: 'solid',
-        borderWidth: '2px',
-    },
-    heading: {
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
-        display: 'inline-block',
-    },
-}));
-export const GradientTextExample = () => {
-    const theme = useTheme();
-    const classes = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode();
-    return (_jsxs(FlexCol, { alignItems: "stretch", children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "XYO Network Gradient Text Options" }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, paddingTop: 3, children: "Highlight" }), _jsx(Divider, { sx: { marginY: '8px' } }), _jsxs(Typography, { variant: "h5", gutterBottom: true, children: ["Lorem ipsum dolor sit amet consectetur, ", _jsx("span", { className: classes.heading, children: "adipisicing elit." })] }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, paddingTop: 3, children: "Body Text" }), _jsx(Divider, { sx: { marginY: '8px' } }), _jsx(Typography, { variant: "h5", gutterBottom: true, className: classes.heading, children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic, deserunt tempore, natus optio veritatis dolor?" }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, paddingTop: 3, children: "Caption" }), _jsx(Divider, { sx: { marginY: '8px' } }), _jsx(Typography, { variant: "caption", gutterBottom: true, className: classes.heading, children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic, deserunt tempore, natus optio veritatis dolor?" }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, paddingTop: 3, children: "Card Border" }), _jsx(Divider, { sx: { marginY: '8px' } }), _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(SimpleCard, { className: classes.border, headline: "Gradient Border Simple Card", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita.", interactionVariant: "button" }) }), _jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(SimpleCard, { className: classes.border, headline: "Gradient Border Simple Card", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita.", interactionVariant: "button" }) }), _jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, children: _jsx(SimpleCard, { className: classes.border, headline: "Gradient Border Simple Card", desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita.", interactionVariant: "button" }) })] })] }));
-};
-//# sourceMappingURL=GradientText.js.map

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

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

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

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

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

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

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

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

package/src/components/GradientText/GradientText.stories.tsx

@@ -1,31 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { GradientTextExample } from './GradientText'
-const StorybookEntry = {
-  argTypes: {},
-  component: GradientTextExample,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'shared/GradientText',
-} as ComponentMeta<typeof GradientTextExample>
-
-const Template: ComponentStory<typeof GradientTextExample> = (args) => (
-  <BrowserRouter>
-    <GradientTextExample {...args}></GradientTextExample>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-
-export { Default }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/GradientText/index.ts

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