@blerp/design 1.2.74 → 1.2.76

package/dist/esm/ScreenSizeHook.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+  const isClient = typeof window === "object";
+
+  function getSize() {
+    return {
+      width: isClient ? window.innerWidth : undefined,
+      height: isClient ? window.innerHeight : undefined
+    };
+  }
+
+  const [windowSize, setWindowSize] = useState(getSize);
+  useEffect(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    function handleResize() {
+      setWindowSize(getSize());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount and unmount
+
+  return windowSize;
+};
+
+export { useWindowSize };

package/dist/esm/SnackbarContextProvider.js

@@ -0,0 +1,154 @@
+import _extends from '@babel/runtime/helpers/extends';
+import React, { useState } from 'react';
+import Slide from '@mui/material/Slide';
+import Fade from '@mui/material/Fade';
+import { Snackbar, Alert } from './index.js';
+
+/*
+snackbarContext.triggerSnackbar({
+  message: `Added to ${collection.title}`,
+  severity: "success",
+  actionButton: (
+    <Button
+      color="inherit"
+      variant="text"
+      size="small"
+      onClick={() => {
+        globalContext.setActiveBoard(collection);
+      }}>
+      View
+    </Button>
+  ),
+});
+*/
+
+const SnackbarContext = /*#__PURE__*/React.createContext({
+  snackbarValues: {
+    open: false,
+    message: "Set a message",
+    position: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    slideDirection: "up",
+    transitionType: "slide",
+    severity: "success",
+    actionButton: /*#__PURE__*/React.createElement(React.Fragment, null),
+    autoHideDuration: 5000
+  },
+  triggerSnackbar: () => null
+});
+
+const SnackbarProvider = props => {
+  const [open, setOpen] = useState(false);
+  const [snackbarValues, setSnackbarValues] = useState({
+    message: "Set a message",
+    position: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    color: "grey8",
+    transitionType: "slide",
+    slideDirection: "up",
+    severity: "success",
+    actionButton: /*#__PURE__*/React.createElement(React.Fragment, null),
+    autoHideDuration: 5000
+  });
+
+  const triggerSnackbar = _ref => {
+    let {
+      message = "Set a message",
+      position = {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      slideDirection = "up",
+      transitionType = "slide",
+      severity = "success",
+      color,
+      actionButton = /*#__PURE__*/React.createElement(React.Fragment, null),
+      autoHideDuration = 5000
+    } = _ref;
+
+    if (!color) {
+      switch (severity) {
+        case "success":
+          color = "grey3"; // figure out how to fix seafoam text
+
+          break;
+
+        case "error":
+          color = "ibisRed";
+          break;
+
+        default:
+          color = "notBlack";
+          break;
+      }
+    }
+
+    setOpen(true);
+    setSnackbarValues({
+      message,
+      position,
+      color,
+      transitionType,
+      slideDirection,
+      severity,
+      actionButton,
+      autoHideDuration
+    });
+    setTimeout(() => {
+      setOpen(false);
+    }, autoHideDuration);
+  };
+
+  return /*#__PURE__*/React.createElement(SnackbarContext.Provider, {
+    value: {
+      snackbarValues: snackbarValues,
+      setSnackbarValues: setSnackbarValues,
+      triggerSnackbar: props => {
+        // TODO: figure out why setTimeout is needed to show every time
+        setTimeout(() => {
+          triggerSnackbar(props);
+        });
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Snackbar, {
+    anchorOrigin: { ...snackbarValues.position
+    },
+    autoHideDuration: snackbarValues.autoHideDuration,
+    open: open,
+    sx: {
+      minWidth: "30%"
+    },
+    TransitionComponent: props => {
+      if (snackbarValues.transitionType === "fade") {
+        return /*#__PURE__*/React.createElement(Fade, _extends({}, props, {
+          direction: snackbarValues.slideDirection,
+          unmountOnExit: true
+        }));
+      } else {
+        return /*#__PURE__*/React.createElement(Slide, _extends({}, props, {
+          direction: snackbarValues.slideDirection,
+          unmountOnExit: true
+        }));
+      }
+    },
+    onClose: () => setOpen(false),
+    key: "snackbar-toast"
+  }, /*#__PURE__*/React.createElement(Alert, {
+    severity: snackbarValues.severity,
+    variant: "filled",
+    color: snackbarValues.color,
+    action: snackbarValues.actionButton,
+    sx: {
+      width: "100%",
+      "& svg": {
+        color: "inherit"
+      }
+    }
+  }, snackbarValues.message)), props.children);
+};
+
+export { SnackbarContext, SnackbarProvider };

package/dist/esm/Theme.js

@@ -0,0 +1,246 @@
+import React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import icons from './icons.js';
+import colors, { lightColors, lightPalette, darkColors, darkPalette } from './colors.js';
+import { mainTheme } from './index.js';
+import { SnackbarProvider } from './SnackbarContextProvider.js';
+
+const fonts = "@font-face {\n  font-family: \"Odudo\";\n  font-weight: normal;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: lighter;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 300;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bolder;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bold;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}";
+const theme = createTheme({
+  typography: {
+    fontFamily: "Odudo, Arial"
+  },
+  components: {
+    MuiPopover: {
+      defaultProps: {
+        BackdropProps: {
+          sx: {
+            backgroundColor: "transparent",
+            backdropFilter: "none"
+          }
+        }
+      }
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "".concat(colors.grey6, "70"),
+          backdropFilter: "blur(4px)"
+        }
+      }
+    },
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          color: colors.notBlack
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          color: colors.notBlack,
+          backgroundColor: colors.grey2,
+          "& textarea": {
+            color: colors.notBlack
+          },
+          ":hover": {
+            backgroundColor: colors.grey2
+          },
+          ":before": {
+            borderColor: colors.notBlack
+          },
+          ":hover:before": {
+            borderColor: "".concat(colors.notBlack, " !important")
+          }
+        }
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          color: colors.notBlack,
+          borderColor: colors.notBlack,
+          ":before": {
+            borderColor: colors.notBlack
+          },
+          ":hover:before": {
+            borderColor: "".concat(colors.notBlack, " !important")
+          }
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: colors.notBlack
+        }
+      }
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: colors.notBlack
+        }
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: "30px",
+          fontWeight: "600",
+          letterSpacing: "0.05rem",
+          textTransform: "capitalize"
+        }
+      },
+      variants: [{
+        props: {
+          variant: "outlined"
+        },
+        style: {
+          borderWidth: "2px",
+          "&:hover": {
+            borderWidth: "2px"
+          }
+        }
+      }]
+    },
+    MuiCssBaseline: {
+      styleOverrides: "\n                ".concat(fonts, "\n            ")
+    }
+  },
+  mode: "light",
+  colors: lightColors,
+  icons: icons,
+  palette: lightPalette
+});
+const darkTheme = createTheme({
+  typography: {
+    fontFamily: "Odudo, Arial"
+  },
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: colors.white
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          color: colors.white,
+          backgroundColor: colors.grey7,
+          "& textarea": {
+            color: colors.white
+          },
+          ":hover": {
+            backgroundColor: colors.grey7
+          },
+          ":before": {
+            borderColor: colors.waxwing
+          },
+          ":hover:before": {
+            borderColor: "".concat(colors.white, " !important")
+          }
+        }
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          color: colors.white,
+          borderColor: colors.white,
+          ":before": {
+            borderColor: colors.waxwing
+          },
+          ":hover:before": {
+            borderColor: "".concat(colors.white, " !important")
+          }
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: colors.white
+        }
+      }
+    },
+    MuiPopover: {
+      defaultProps: {
+        BackdropProps: {
+          sx: {
+            backgroundColor: "transparent",
+            backdropFilter: "none"
+          }
+        }
+      }
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "".concat(colors.grey5, "70"),
+          backdropFilter: "blur(4px)"
+        }
+      }
+    },
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          color: colors.white
+        }
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: "30px",
+          fontWeight: "600",
+          letterSpacing: "0.05rem",
+          textTransform: "capitalize"
+        }
+      },
+      variants: [{
+        props: {
+          variant: "outlined"
+        },
+        style: {
+          borderWidth: "2px",
+          "&:hover": {
+            borderWidth: "2px"
+          }
+        }
+      }]
+    },
+    MuiCssBaseline: {
+      styleOverrides: "\n                ".concat(fonts, "\n            ")
+    }
+  },
+  mode: "dark",
+  colors: darkColors,
+  icons: icons,
+  palette: darkPalette
+});
+
+const BlerpTheme = _ref => {
+  let {
+    mode,
+    children
+  } = _ref;
+  const currentTheme = mode === "dark" ? darkTheme : theme; // ...
+
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: currentTheme
+  }, /*#__PURE__*/React.createElement(ThemeProvider$1, {
+    theme: { ...mainTheme,
+      icons: icons,
+      mode: mode === "dark" ? "dark" : "light",
+      ...currentTheme
+    }
+  }, /*#__PURE__*/React.createElement(SnackbarProvider, null, children)));
+};
+
+export default BlerpTheme;
+export { darkTheme, theme };

package/dist/esm/Toggle.js

@@ -0,0 +1,49 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { CheckRounded } from '@mui/icons-material';
+import React from 'react';
+import styled from 'styled-components';
+import { EllipsisLoader } from './EllipsisLoader.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const Slider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), props => props.theme.colors.grey5);
+const ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider, props => props.disabled ? "#7b7b7b" : props.theme.colors.seafoam, Slider, Slider);
+const Switch = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), props => props.disabled ? "default" : "pointer", props => props.checked ? "38px" : "36px", props => props.checked ? "22px" : "20px", props => props.checked ? "0px" : "1px solid transparent", props => props.checked ? "transparent" : props.theme.colors.grey5, props => props.disabled ? "0.5" : "1", ToggleInput);
+const BlackSlider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: transparent;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 14px;\n        width: 14px;\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        background-color: ", ";\n        border-radius: 50%;\n    }\n"])), props => props.theme.colors.notBlack);
+const BlackToggleInput = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    &:checked + ", " {\n        background-color: transparent;\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n        /* -webkit-transform: translateY(2px);\n        -ms-transform: translateY(2px);\n        transform: translateY(2px); */\n    }\n"])), BlackSlider, BlackSlider, props => props.theme.colors.notBlack, BlackSlider, BlackSlider);
+styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 28px;\n    height: 14px;\n    border: 2px solid ", ";\n    border-radius: 14px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), props => props.theme.colors.notBlack, BlackToggleInput);
+const LoadingContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 50px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n"])));
+const Toggle = _ref => {
+  let {
+    loading,
+    checked,
+    onClick,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(LoadingContainer, null, /*#__PURE__*/React.createElement(EllipsisLoader, null)) : /*#__PURE__*/React.createElement(Switch, {
+    checked: checked,
+    disabled: disabled,
+    onClick: e => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ToggleInput, {
+    checked: checked,
+    disabled: disabled,
+    onChange: () => null,
+    type: "checkbox"
+  }), /*#__PURE__*/React.createElement(Slider, null, /*#__PURE__*/React.createElement(CheckRounded, {
+    sx: {
+      position: "absolute",
+      top: checked ? "3px" : "4px",
+      left: "4px",
+      color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
+      fontSize: checked ? "16px" : "12px",
+      backgroundColor: checked ? "white.main" : "grey5.main",
+      borderRadius: "50%",
+      transition: "0.2s"
+    }
+  }))));
+};
+
+export { Toggle };

package/dist/esm/UserCard.js

@@ -0,0 +1,133 @@
+import { VerifiedRounded, DiamondRounded } from '@mui/icons-material';
+import React from 'react';
+import { Stack, Text } from './index.js';
+
+const UserCard = _ref => {
+  var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$twitchChannelIn5, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn6;
+
+  let {
+    user,
+    onUsernameClick,
+    onFollowerClick,
+    onCreatedClick,
+    collapsed
+  } = _ref;
+  const formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  let followerCount = formatter.format((user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.followerCount) || 0);
+  let createdCount = formatter.format((user === null || user === void 0 ? void 0 : user.totalCreationCount) || 0);
+  return /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      backgroundColor: "grey4.main",
+      minWidth: "280px",
+      maxWidth: "320px",
+      height: collapsed ? "auto" : "121px",
+      borderRadius: "12px",
+      alignItems: "center",
+      padding: "10px",
+      boxSizing: "border-box",
+      justifyContent: "space-around",
+      border: "1px solid transparent",
+      borderColor: collapsed ? (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn3 = user.twitchChannelInfo) === null || _user$twitchChannelIn3 === void 0 ? void 0 : _user$twitchChannelIn3.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    style: {
+      width: collapsed ? "49px" : "89px",
+      height: collapsed ? "49px" : "89px",
+      borderRadius: "50%",
+      border: "2px solid transparent",
+      borderColor: collapsed ? "transparent" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn4 = user.twitchChannelInfo) === null || _user$twitchChannelIn4 === void 0 ? void 0 : _user$twitchChannelIn4.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn5 = user.twitchChannelInfo) === null || _user$twitchChannelIn5 === void 0 ? void 0 : _user$twitchChannelIn5.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
+      padding: collapsed ? "3px" : "6px",
+      boxSizing: "border-box"
+    },
+    src: (user === null || user === void 0 ? void 0 : (_user$profileImage = user.profileImage) === null || _user$profileImage === void 0 ? void 0 : (_user$profileImage$or = _user$profileImage.original) === null || _user$profileImage$or === void 0 ? void 0 : _user$profileImage$or.url) || "https://cdn.blerp.com/blerp_products/Icons/Account-White.svg",
+    alt: "profile"
+  }), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn6 = user.twitchChannelInfo) === null || _user$twitchChannelIn6 === void 0 ? void 0 : _user$twitchChannelIn6.broadcasterType) === "partner" && /*#__PURE__*/React.createElement(VerifiedRounded, {
+    sx: {
+      position: "absolute",
+      bottom: collapsed ? "0" : "5px",
+      right: collapsed ? "0" : "5px",
+      fontSize: "17px",
+      backgroundColor: "grey4.main",
+      borderRadius: "50%"
+    }
+  }), (user === null || user === void 0 ? void 0 : user.premiumBlerpUserStatus) === "ACTIVE" && /*#__PURE__*/React.createElement(DiamondRounded, {
+    sx: {
+      position: "absolute",
+      bottom: collapsed ? "0" : "5px",
+      right: collapsed ? "0" : "5px",
+      fontSize: "17px",
+      backgroundColor: "grey4.main",
+      borderRadius: "50%"
+    }
+  })), /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      flex: 1,
+      marginLeft: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "18px",
+      fontWeight: "300",
+      maxWidth: "180px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      marginBottom: !collapsed && "10px",
+      overflow: "hidden",
+      cursor: "pointer",
+      transition: "0.3s",
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    onClick: onUsernameClick
+  }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    sx: {
+      alignItems: "center",
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center",
+    sx: {
+      cursor: "pointer"
+    },
+    onClick: onFollowerClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
+  }, followerCount), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "300",
+      color: "grey7.main"
+    }
+  }, "followers")), /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center",
+    sx: {
+      cursor: "pointer"
+    },
+    onClick: onCreatedClick
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
+  }, createdCount), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "300",
+      color: "grey7.main"
+    }
+  }, "created")))));
+};
+
+export { UserCard };