@evenicanpm/storefront-core 1.0.2 → 1.0.4

package/src/components-v2/header/components/user.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  MouseEvent,
+  ReactNode,
+} from "react";
+import { useRouter } from "next/navigation";
+// UI Components
+import {
+  Box,
+  Button,
+  Popover,
+  List,
+  ListItemButton,
+  IconButton,
+} from "@mui/material";
+import { MdPersonOutline as PersonOutline } from "react-icons/md";
+import MobileUserIcon from "@evenicanpm/storefront-core/src/components-v2/icons/user";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import T from "@evenicanpm/storefront-core/src/components-v2/T";
+// Auth components
+import { signIn, useSession } from "next-auth/react";
+import { getMsalInstance, initializeMsal } from "@/auth/msal";
+import signOutCustom from "@/auth/signout";
+// API hooks
+import useUpdateUser from "@/services/user/mutations/update-user";
+import useSessionInit from "@/services/session/mutations/session-init";
+import useSessionLogout from "@/services/session/mutations/session-logout";
+
+interface IdTokenClaims {
+  given_name?: string;
+  family_name?: string;
+}
+
+const MENU_ITEMS = [
+  { href: "/account/profile", label: "Account.Menu.profile" },
+  { href: "/account/addresses", label: "Account.Menu.addresses" },
+  { href: "/account/orders", label: "Account.Menu.orders" },
+  { href: "/account/wish-lists", label: "Account.Menu.wishlists" },
+];
+
+interface UserContextValue {
+  isAuthenticated: boolean;
+  status: string;
+  menuItems: typeof MENU_ITEMS;
+  handleLogout: () => void;
+  signIn: typeof signIn;
+  signOut: () => void;
+  anchorEl: HTMLButtonElement | null;
+  setAnchorEl: (el: HTMLButtonElement | null) => void;
+  open: boolean;
+}
+
+const UserContext = createContext<UserContextValue | undefined>(undefined);
+
+const useUserContext = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) throw new Error("User subcomponent must be used within <User>");
+  return ctx;
+};
+
+interface Props {
+  children?: ReactNode;
+}
+
+const User = ({ children }: Props) => {
+  const { data: session, status } = useSession();
+
+  if (session?.error) {
+    // Custom error set in server - /api/auth/[...nextauth]
+    console.warn("Auth Error", session?.error);
+    signOutCustom();
+  }
+
+  const isAuthenticated = !!session;
+  const { mutateAsync: sessionInit } = useSessionInit();
+  const { mutateAsync: updateUser } = useUpdateUser();
+  const { mutateAsync: sessionLogout } = useSessionLogout();
+
+  // session init
+  useEffect(() => {
+    if (isAuthenticated) {
+      const { accessToken, user } = session;
+      const email = user?.email;
+      if (accessToken && email) {
+        sessionInit({ accessToken, email });
+      }
+    }
+  }, [isAuthenticated, session, sessionInit]);
+
+  // Handles MSAL redirect - which happens for edit profile and reset password use cases in account/profile page.
+  useEffect(() => {
+    const handleRedirect = async () => {
+      try {
+        await initializeMsal();
+        const res = await getMsalInstance().handleRedirectPromise();
+        if (res) {
+          const { given_name, family_name } =
+            res.idTokenClaims as IdTokenClaims;
+          // Update the API when profile info is updated through MSAL
+          if (given_name && family_name) {
+            updateUser({
+              AccountNumber: "",
+              FirstName: given_name,
+              LastName: family_name,
+            }).catch(console.error);
+          }
+        }
+      } catch (err) {
+        console.error("MSAL redirect error:", err);
+      }
+    };
+    handleRedirect();
+  }, [updateUser]);
+
+  const handleLogout = async () => {
+    try {
+      await sessionLogout({});
+      signOutCustom();
+    } catch (err) {
+      console.error("Logout Error:", err);
+    }
+  };
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const value: UserContextValue = {
+    isAuthenticated,
+    status,
+    menuItems: MENU_ITEMS,
+    handleLogout,
+    signIn,
+    signOut: signOutCustom,
+    anchorEl,
+    setAnchorEl,
+    open,
+  };
+
+  if (status === "loading") return null;
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+};
+
+// Subcomponents
+User.MobileTrigger = function MobileTrigger() {
+  const { isAuthenticated, signIn } = useUserContext();
+  const router = useRouter();
+  return (
+    <IconButton
+      aria-label="User Menu"
+      onClick={() => {
+        if (!isAuthenticated) signIn();
+        else router.push("/account/profile");
+      }}
+    >
+      <MobileUserIcon style={{ fontSize: "1.25rem" }} />
+    </IconButton>
+  );
+};
+
+User.DesktopTrigger = function DesktopTrigger() {
+  const { setAnchorEl } = useUserContext();
+  return (
+    <IconButton
+      aria-label="User Menu"
+      onClick={(e: MouseEvent<HTMLButtonElement>) =>
+        setAnchorEl(e.currentTarget)
+      }
+    >
+      <PersonOutline />
+    </IconButton>
+  );
+};
+
+User.Menu = function Menu({
+  children,
+}: {
+  children?: (items: typeof MENU_ITEMS) => React.ReactNode;
+}) {
+  const { anchorEl, open, setAnchorEl, menuItems, handleLogout } =
+    useUserContext();
+  const id = open ? "account-popover" : undefined;
+
+  return (
+    <Popover
+      id={id}
+      open={open}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      transformOrigin={{ vertical: "top", horizontal: "right" }}
+    >
+      <List sx={{ p: 1 }} onClick={() => setAnchorEl(null)}>
+        {children
+          ? children(menuItems) // Allow caller to control what gets rendered
+          : menuItems.map(({ href, label }) => (
+              <User.MenuItem key={href} href={href} label={label} />
+            ))}
+        <Box p={1}>
+          <Button
+            fullWidth
+            size="small"
+            color="primary"
+            variant="outlined"
+            onClick={handleLogout}
+          >
+            <T path="Account.Menu.btnLogout" />
+          </Button>
+        </Box>
+      </List>
+    </Popover>
+  );
+};
+
+User.MenuItem = function MenuItem({
+  href,
+  label,
+}: {
+  href: string;
+  label: string;
+}) {
+  return (
+    <NavLink href={href} style={{ color: "inherit" }}>
+      <ListItemButton>
+        <T path={label} />
+      </ListItemButton>
+    </NavLink>
+  );
+};
+
+User.LoginButton = function LoginButton() {
+  const { signIn } = useUserContext();
+  return (
+    <Button
+      size="small"
+      variant="contained"
+      color="primary"
+      onClick={() => signIn()}
+    >
+      <T path="Account.Menu.btnLogin" />
+    </Button>
+  );
+};
+
+export default User;

package/src/components-v2/header/header.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ReactNode } from "react";
+import clsx from "clsx";
+import { MdOutlineShoppingBag } from "react-icons/md";
+// GLOBAL CUSTOM COMPONENTS
+import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
+import SiteLogo from "@evenicanpm/storefront-core/src/components-v2/site-logo";
+// LOCAL CUSTOM COMPONENTS
+import CategoriesMenu from "./components/categories-menu";
+import User from "./components/user";
+import MiniCartTrigger from "../mini-cart/mini-cart-trigger";
+// STYLED COMPONENTS
+import { HeaderWrapper, StyledContainer } from "./styles/index";
+// API
+import getCart from "@/api-manager/services/cart/queries/get-cart";
+
+import { useSession } from "next-auth/react";
+
+type HeaderRootProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+const Header = ({ className, children }: HeaderRootProps) => {
+  return (
+    <HeaderWrapper className={clsx(className)}>
+      <StyledContainer>{children}</StyledContainer>
+    </HeaderWrapper>
+  );
+};
+
+Header.LeftSlot = ({ children }: { children: ReactNode }) => {
+  return (
+    <FlexBox minWidth={100} alignItems="center">
+      {children}
+    </FlexBox>
+  );
+};
+Header.Logo = () => {
+  return <SiteLogo />;
+};
+
+Header.Categories = () => {
+  return <CategoriesMenu />;
+};
+
+Header.MidSlot = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>;
+};
+
+Header.User = () => {
+  const { data: session } = useSession();
+  const isAuthenticated = !!session;
+  return (
+    <User>
+      {isAuthenticated ? (
+        <>
+          <User.DesktopTrigger />
+          <User.Menu />
+        </>
+      ) : (
+        <User.LoginButton />
+      )}
+    </User>
+  );
+};
+
+Header.Cart = () => {
+  const { data: cart } = getCart.useData();
+  return cart ? (
+    <MiniCartTrigger cart={cart}>
+      <MiniCartTrigger.Badge>
+        <MiniCartTrigger.Button>
+          <MdOutlineShoppingBag />
+        </MiniCartTrigger.Button>
+      </MiniCartTrigger.Badge>
+      <MiniCartTrigger.Drawer />
+    </MiniCartTrigger>
+  ) : null;
+};
+
+export default Header;

package/src/components-v2/header/hooks/use-header.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import { useState } from "react";
+
+export default function useHeader() {
+  const [searchBarOpen, setSearchBarOpen] = useState(false);
+  const toggleSearchBar = () => setSearchBarOpen((state) => !state);
+
+  return {
+    searchBarOpen,
+    toggleSearchBar,
+  };
+}

package/src/components-v2/header/index.ts

@@ -0,0 +1 @@
+export { default } from "./header";

package/src/components-v2/header/sticky-header.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Header from "@evenicanpm/storefront-core/src/components-v2/header/index";
+import { SearchBarViewLg as SearchBar } from "@evenicanpm/storefront-core/src/components-v2/search-bar";
+import Sticky from "@evenicanpm/storefront-core/src/components-v2/sticky/index";
+import { useCallback, useState } from "react";
+
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import MobileHeader from "./components/mobile-header";
+
+export default function StickyHeader() {
+  const [isFixed, setIsFixed] = useState(false);
+  const toggleIsFixed = useCallback((fixed: boolean) => setIsFixed(fixed), []);
+
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150));
+
+  if (downMd) {
+    return (
+      <MobileHeader>
+        <MobileHeader.Menu />
+        <MobileHeader.Logo />
+        <MobileHeader.Icons>
+          <MobileHeader.Search />
+          <MobileHeader.User />
+          <MobileHeader.Cart />
+        </MobileHeader.Icons>
+        <MobileHeader.SearchDrawer />
+      </MobileHeader>
+    );
+  }
+
+  return (
+    <Sticky fixedOn={0} onSticky={toggleIsFixed} scrollDistance={300}>
+      <Header>
+        <Header.LeftSlot>
+          <Header.Logo />
+          {isFixed && <Header.Categories />}
+        </Header.LeftSlot>
+        <Header.MidSlot>
+          <SearchBar />
+        </Header.MidSlot>
+        <Header.User />
+        <Header.Cart />
+      </Header>
+    </Sticky>
+  );
+}

package/src/components-v2/header/styles/index.ts

@@ -0,0 +1,24 @@
+import Container from "@mui/material/Container";
+import styled from "@mui/material/styles/styled";
+// CONSTANT VARIABLES
+import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
+
+export const HeaderWrapper = styled("div")(({ theme }) => ({
+  zIndex: 3,
+  position: "relative",
+  height: layoutConstant.headerHeight,
+  transition: "height 250ms ease-in-out",
+  background: theme.palette.background.paper,
+  // borderBottom: `1px solid ${theme.palette.grey[200]}`,
+  [theme.breakpoints.down("sm")]: {
+    height: layoutConstant.mobileHeaderHeight,
+  },
+}));
+
+export const StyledContainer = styled(Container)({
+  gap: 2,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+});

package/src/components-v2/icons/cart-bag.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const CartBag = createSvgIcon(
+  <svg viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.33329 7.37181V5.37181C5.33329 2.79431 7.42079 0.705139 9.99996 0.705139C12.5791 0.705139 14.6666 2.79431 14.6666 5.37181V7.37181H17.3333C18.4375 7.37181 19.3333 8.26764 19.3333 9.37181V18.0385C19.3333 20.2468 17.5416 22.0385 15.3333 22.0385H4.66663C2.45746 22.0385 0.666626 20.2468 0.666626 18.0385V9.37181C0.666626 8.26764 1.56204 7.37181 2.66663 7.37181H5.33329ZM7.33329 7.37181H12.6666V5.37181C12.6666 3.89889 11.4708 2.70514 9.99996 2.70514C8.52913 2.70514 7.33329 3.89889 7.33329 5.37181V7.37181ZM2.66663 9.37181V18.0385C2.66663 19.1426 3.56204 20.0385 4.66663 20.0385H15.3333C16.4375 20.0385 17.3333 19.1426 17.3333 18.0385V9.37181H14.6666V11.7051C14.6666 12.2593 14.2208 12.7051 13.6666 12.7051C13.1125 12.7051 12.6666 12.2593 12.6666 11.7051V9.37181H7.33329V11.7051C7.33329 12.2593 6.88746 12.7051 6.33329 12.7051C5.77913 12.7051 5.33329 12.2593 5.33329 11.7051V9.37181H2.66663Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "CartBag",
+);
+
+export default CartBag;

package/src/components-v2/icons/category-outline.tsx

@@ -0,0 +1,29 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const CategoryOutlined = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 3C2 2.44772 2.44772 2 3 2H10C10.5523 2 11 2.44772 11 3V10C11 10.5523 10.5523 11 10 11H3C2.44772 11 2 10.5523 2 10V3ZM4 4V9H9V4H4Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 3C13 2.44772 13.4477 2 14 2H21C21.5523 2 22 2.44772 22 3V10C22 10.5523 21.5523 11 21 11H14C13.4477 11 13 10.5523 13 10V3ZM15 4V9H20V4H15Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 14C13 13.4477 13.4477 13 14 13H21C21.5523 13 22 13.4477 22 14V21C22 21.5523 21.5523 22 21 22H14C13.4477 22 13 21.5523 13 21V14ZM15 15V20H20V15H15Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 14C2 13.4477 2.44772 13 3 13H10C10.5523 13 11 13.4477 11 14V21C11 21.5523 10.5523 22 10 22H3C2.44772 22 2 21.5523 2 21V14ZM4 15V20H9V15H4Z"
+    />
+  </svg>,
+  "CategoryOutlined",
+);
+
+export default CategoryOutlined;

package/src/components-v2/icons/category.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Category = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 64 64">
+    <path d="m29 11v14a4 4 0 0 1 -4 4h-14a4 4 0 0 1 -4-4v-14a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4zm24-4h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm-28 28h-14a4 4 0 0 0 -4 4v14a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4v-14a4 4 0 0 0 -4-4zm21 0a11 11 0 1 0 11 11 11 11 0 0 0 -11-11z" />
+  </svg>,
+  "Category",
+);
+
+export default Category;

package/src/components-v2/icons/home.tsx

@@ -0,0 +1,19 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Home = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3861 1.21065C11.7472 0.929784 12.2528 0.929784 12.6139 1.21065L21.6139 8.21065C21.8575 8.4001 22 8.69141 22 9V20C22 20.7957 21.6839 21.5587 21.1213 22.1213C20.5587 22.6839 19.7957 23 19 23H5C4.20435 23 3.44129 22.6839 2.87868 22.1213C2.31607 21.5587 2 20.7957 2 20V9C2 8.69141 2.14247 8.4001 2.38606 8.21065L11.3861 1.21065ZM4 9.48908V20C4 20.2652 4.10536 20.5196 4.29289 20.7071C4.48043 20.8946 4.73478 21 5 21H19C19.2652 21 19.5196 20.8946 19.7071 20.7071C19.8946 20.5196 20 20.2652 20 20V9.48908L12 3.26686L4 9.48908Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 12C8 11.4477 8.44772 11 9 11H15C15.5523 11 16 11.4477 16 12V22C16 22.5523 15.5523 23 15 23C14.4477 23 14 22.5523 14 22V13H10V22C10 22.5523 9.55228 23 9 23C8.44772 23 8 22.5523 8 22V12Z"
+    />
+  </svg>,
+  "Home",
+);
+
+export default Home;

package/src/components-v2/icons/search.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const Search = createSvgIcon(
+  <svg viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M21.3162 20.0056L17.2879 15.9891C18.5876 14.3333 19.2928 12.2886 19.2902 10.1836C19.2902 8.30891 18.7343 6.47636 17.6928 4.91764C16.6513 3.35892 15.1709 2.14405 13.439 1.42665C11.707 0.709246 9.80123 0.521542 7.96259 0.887269C6.12396 1.253 4.43507 2.15573 3.10948 3.48131C1.7839 4.80689 0.88117 6.49579 0.515443 8.33442C0.149715 10.1731 0.33742 12.0788 1.05482 13.8108C1.77222 15.5428 2.98709 17.0231 4.54581 18.0646C6.10453 19.1061 7.93709 19.662 9.81174 19.662C11.9167 19.6646 13.9615 18.9594 15.6173 17.6597L19.6338 21.688C19.7439 21.7991 19.8749 21.8872 20.0193 21.9474C20.1637 22.0075 20.3186 22.0385 20.475 22.0385C20.6314 22.0385 20.7862 22.0075 20.9306 21.9474C21.075 21.8872 21.206 21.7991 21.3162 21.688C21.4272 21.5779 21.5154 21.4468 21.5755 21.3024C21.6357 21.1581 21.6666 21.0032 21.6666 20.8468C21.6666 20.6904 21.6357 20.5355 21.5755 20.3912C21.5154 20.2468 21.4272 20.1157 21.3162 20.0056ZM2.70292 10.1836C2.70292 8.77758 3.11985 7.40316 3.90098 6.23412C4.6821 5.06508 5.79235 4.15393 7.09132 3.61588C8.39028 3.07783 9.81963 2.93705 11.1986 3.21134C12.5776 3.48564 13.8443 4.16269 14.8384 5.15688C15.8326 6.15106 16.5097 7.41773 16.784 8.79671C17.0583 10.1757 16.9175 11.605 16.3794 12.904C15.8414 14.203 14.9302 15.3132 13.7612 16.0943C12.5922 16.8755 11.2177 17.2924 9.81174 17.2924C7.92637 17.2924 6.11821 16.5434 4.78505 15.2103C3.45189 13.8771 2.70292 12.0689 2.70292 10.1836Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "Search",
+);
+
+export default Search;

package/src/components-v2/icons/shopping-bag-outlined.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const ShoppingBagOutlined = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <g>
+      <rect fill="none" height="24" width="24" />
+      <path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M18,20H6V8h2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8h4v2c0,0.55,0.45,1,1,1s1-0.45,1-1V8 h2V20z" />
+    </g>
+  </svg>,
+  "ShoppingBagOutlined",
+);
+
+export default ShoppingBagOutlined;

package/src/components-v2/icons/up-down.tsx

@@ -0,0 +1,21 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const UpDown = createSvgIcon(
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "UpDown",
+);
+
+export default UpDown;

package/src/components-v2/icons/user.tsx

@@ -0,0 +1,13 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const User = createSvgIcon(
+  <svg viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12 13.3718H8.00002C3.95002 13.3718 0.666687 16.6551 0.666687 20.7051C0.666687 21.4414 1.26377 22.0385 2.00002 22.0385H18C18.7363 22.0385 19.3334 21.4414 19.3334 20.7051C19.3334 16.6551 16.05 13.3718 12 13.3718ZM2.70794 20.0385C3.0371 17.4093 5.28335 15.3718 8.00002 15.3718H12C14.715 15.3718 16.9625 17.4114 17.2917 20.0385H2.70794ZM10 11.3718C12.9454 11.3718 15.3334 8.98389 15.3334 6.03847C15.3334 3.09306 12.9454 0.705139 10 0.705139C7.0546 0.705139 4.66669 3.09306 4.66669 6.03847C4.66669 8.98431 7.05419 11.3718 10 11.3718ZM10 2.70514C11.8379 2.70514 13.3334 4.20056 13.3334 6.03847C13.3334 7.87639 11.8379 9.37181 10 9.37181C8.1621 9.37181 6.66669 7.87597 6.66669 6.03847C6.66669 4.20056 8.16252 2.70514 10 2.70514Z"
+      fill="currentColor"
+    />
+  </svg>,
+  "User",
+);
+
+export default User;

package/src/components-v2/icons/user2.tsx

@@ -0,0 +1,14 @@
+import createSvgIcon from "@mui/material/utils/createSvgIcon";
+
+const User2 = createSvgIcon(
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path
+      d="M6.65 7.5C6.65 9.21452 7.46395 10.7392 8.72162 11.7184C4.89924 13.0726 2.15 16.7186 2.15 21C2.15 21.47 2.53084 21.85 3 21.85H21C21.4692 21.85 21.85 21.47 21.85 21C21.85 16.7186 19.1008 13.0726 15.2784 11.7184C16.536 10.7392 17.35 9.21452 17.35 7.5C17.35 4.55053 14.9502 2.15 12 2.15C9.04976 2.15 6.65 4.55053 6.65 7.5ZM8.35 7.5C8.35 5.48748 9.98748 3.85 12 3.85C14.0125 3.85 15.65 5.48748 15.65 7.5C15.65 9.51252 14.0125 11.15 12 11.15C9.98748 11.15 8.35 9.51252 8.35 7.5ZM20.106 20.15H3.89395C4.32041 16.0538 7.79275 12.85 12 12.85C16.2072 12.85 19.6796 16.0538 20.106 20.15Z"
+      stroke="#395589"
+      strokeWidth="0.2"
+    />
+  </svg>,
+  "User2",
+);
+
+export default User2;