@campxdev/react-blueprint 0.1.15 → 0.1.16

package/.storybook/preview.tsx

@@ -1,12 +1,12 @@
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 import React from "react";
-import { MuiThemeProvider } from "../src/themes/MuiThemeProvider";
+import { BrowserRouter } from "react-router-dom";
 import { useDarkMode } from "storybook-dark-mode";
+import { MuiThemeProvider } from "../src/themes/MuiThemeProvider";
+import { DarkColorTokens, LightColorTokens } from "../src/themes/colorTokens";
 import { darkTheme } from "../src/themes/darkTheme";
 import { lightTheme } from "../src/themes/lightTheme";
-import { DarkColorTokens, LightColorTokens } from "../src/themes/colorTokens";
-import { BrowserRouter } from "react-router-dom";
 
 const preview: Preview = {
   parameters: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -9,7 +9,7 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
     "@mui/x-data-grid": "^7.5.1",
-    "@storybook/addon-backgrounds": "^8.1.4",
+    "@storybook/addon-backgrounds": "^8.1.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -18,6 +18,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
+    "framer-motion": "^11.2.9",
     "js-cookie": "^3.0.5",
     "pullstate": "^1.24.0",
     "react": "^18.3.1",
@@ -58,21 +59,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.4.0",
-    "@storybook/addon-essentials": "^8.1.4",
-    "@storybook/addon-interactions": "^8.1.4",
-    "@storybook/addon-links": "^8.1.4",
-    "@storybook/addon-mdx-gfm": "^8.1.4",
-    "@storybook/addon-onboarding": "^8.1.4",
-    "@storybook/blocks": "^8.1.4",
-    "@storybook/preset-create-react-app": "^8.1.4",
-    "@storybook/react": "^8.1.4",
-    "@storybook/react-webpack5": "^8.1.4",
-    "@storybook/test": "^8.1.4",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-mdx-gfm": "^8.1.5",
+    "@storybook/addon-onboarding": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/preset-create-react-app": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-webpack5": "^8.1.5",
+    "@storybook/test": "^8.1.5",
     "@types/js-cookie": "^3.0.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.1.4",
+    "storybook": "^8.1.5",
     "webpack": "^5.91.0"
   }
 }

package/src/components/DataDisplay/DataTable/DataTable.stories.tsx

@@ -1,19 +1,12 @@
-import { GridColDef } from "@mui/x-data-grid";
+import { GridColDef, GridColumnGroupingModel } from "@mui/x-data-grid";
 import { Meta, StoryObj } from "@storybook/react";
 import { DataTable } from "./DataTable"; // Make sure the path to your component is correct
 
 const columns: GridColDef[] = [
-  { field: "id", headerName: "ID", width: 70 },
-  { field: "firstName", headerName: "First name", width: 130 },
-  { field: "lastName", headerName: "Last name", width: 130 },
-  { field: "age", headerName: "Age", type: "number", width: 90 },
-  {
-    field: "fullName",
-    headerName: "Full name",
-    description: "This column has a value getter and is not sortable.",
-    sortable: false,
-    width: 160,
-  },
+  { field: "id", headerName: "ID", flex: 1 },
+  { field: "firstName", headerName: "First name", flex: 3 },
+  { field: "lastName", headerName: "Last name", flex: 3 },
+  { field: "age", headerName: "Age", type: "number", flex: 1 },
 ];
 
 const rows = [
@@ -26,6 +19,16 @@ const rows = [
   { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
   { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
   { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
+  { id: 10, lastName: "Baratheon", firstName: "Robert", age: 40 },
+];
+
+const columnGroupingModel: GridColumnGroupingModel = [
+  {
+    groupId: "full_name",
+    headerName: "Full Name",
+    description: "Full Name of Character",
+    children: [{ field: "firstName" }, { field: "lastName" }],
+  },
 ];
 
 // Define the default export with Meta type including the component type
@@ -45,17 +48,31 @@ const meta: Meta<typeof DataTable> = {
       control: "number",
       description: "Total Number of rows",
     },
+    onPageChange: {
+      action: "onPageChange", // This will log actions in the actions panel of Storybook
+      description: "Callback function when the page changes",
+    },
+    onLimitChange: {
+      action: "onLimitChange", // This will log actions in the actions panel of Storybook
+      description: "Callback function when the limit changes",
+    },
+  },
+  args: {
+    limit: 10,
+    offset: 0,
+    totalCount: 100,
+    onPageChange: (page) => {},
+    onLimitChange: (limit) => {},
+    columnGroupingModel,
+    columns,
+    rows,
   },
 };
 
 export default meta;
 const Template: StoryObj<typeof DataTable> = {
   render: (args) => <DataTable {...args} />,
-
-  args: {
-    columns,
-    rows,
-  },
+  args: {},
 };
 
 export const Default: StoryObj<typeof DataTable> = {

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,25 +1,50 @@
-import { Pagination } from "@mui/material";
 import {
   DataGrid as MuiDataGrid,
   DataGridProps as MuiDataGridProps,
 } from "@mui/x-data-grid";
 import { DataGridContainer } from "../styles";
+import { TablePagination } from "./TablePagination";
 
 export type DataTableProps = {
-  limit: number;
-  offset: number;
-  totalCount: number;
+  limit?: number;
+  offset?: number;
+  totalCount?: number;
+  onPageChange?: (page: number) => void;
+  onLimitChange?: (limit: number) => void;
 } & MuiDataGridProps;
 
 export const DataTable = (props: DataTableProps) => {
-  const pages = Math.ceil(props.totalCount / props.limit);
-  const currentPage = Math.ceil(props.offset / props.limit);
+  const { limit, offset, totalCount, onPageChange, onLimitChange } = props;
+
   return (
     <DataGridContainer>
       <MuiDataGrid
         {...props}
         slots={{
-          pagination: () => <Pagination count={pages} page={currentPage} />,
+          pagination: () => {
+            if (
+              limit === undefined ||
+              offset === undefined ||
+              totalCount === undefined ||
+              onPageChange === undefined ||
+              onLimitChange === undefined
+            ) {
+              return <></>;
+            }
+            const pages = Math.ceil(totalCount / limit);
+            const currentPage = Math.ceil(offset / limit) || 1;
+            return (
+              <TablePagination
+                count={pages}
+                page={currentPage}
+                limit={limit}
+                offset={offset}
+                totalCount={totalCount}
+                onPageChange={onPageChange}
+                onLimitChange={onLimitChange}
+              />
+            );
+          },
         }}
       />
     </DataGridContainer>

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -3,20 +3,74 @@ import {
   PaginationProps as MuiPaginationProps,
   Stack,
 } from "@mui/material";
+import { DropdownMenuItem } from "../../DropDownMenu/DropdownMenuItem";
 import { Typography } from "../../Typography/Typography";
+import { DropDownButton, DropdownMenu } from "../../export";
 
 export type PaginationProps = {
-  pageStart: number;
-  pageEnd: number;
+  limit: number;
+  offset: number;
   totalCount: number;
+  onPageChange: (offset: number) => void;
+  onLimitChange: (limit: number) => void;
 } & MuiPaginationProps;
 
 export const TablePagination = (props: PaginationProps) => {
-  const { pageStart, pageEnd, totalCount } = props;
+  const { limit, offset, totalCount, onPageChange, onLimitChange } = props;
+
   return (
-    <Stack direction="row">
-      <Typography variant="caption">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
-      <MuiPagination {...props} variant="outlined" shape="rounded" />
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      width="100%"
+      padding="10px 30px"
+    >
+      <Typography variant="caption">{`Showing ${offset + 1} - ${offset + limit} rows of ${totalCount}`}</Typography>
+      <MuiPagination
+        {...props}
+        variant="outlined"
+        shape="rounded"
+        onChange={(e, v) => onPageChange(Number(v) * limit)}
+      />
+      <DropdownMenu
+        anchor={({ open }) => (
+          <DropDownButton
+            loading={false}
+            onClick={open}
+            sx={{ minWidth: "130px", padding: "10px 20px", maxHeight: "32px" }}
+          >
+            {limit} / Page
+          </DropDownButton>
+        )}
+        menuListProps={{
+          sx: {
+            minWidth: "130px",
+            "& li": {
+              minHeight: "32px !important",
+              padding: "10px 20px",
+            },
+          },
+        }}
+        menu={[
+          <DropdownMenuItem
+            label="20 / Page"
+            onClick={() => onLimitChange(Number(20))}
+          />,
+          <DropdownMenuItem
+            label="50 / Page"
+            onClick={() => onLimitChange(Number(50))}
+          />,
+          <DropdownMenuItem
+            label="100 / Page"
+            onClick={() => onLimitChange(Number(100))}
+          />,
+          <DropdownMenuItem
+            label="200 / Page"
+            onClick={() => onLimitChange(Number(200))}
+          />,
+        ]}
+      />
     </Stack>
   );
 };

package/src/components/DataDisplay/styles.tsx

@@ -2,4 +2,6 @@ import { Box, styled } from "@mui/material";
 
 export const DataGridContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
+  width: "100%",
+  margin: "10px",
 }));

package/src/components/DropDownMenu/DropDownButton.tsx

@@ -1,30 +1,8 @@
 import { KeyboardArrowDown } from "@mui/icons-material";
-import { ButtonProps, CircularProgress } from "@mui/material";
-import { StyledDropDownButton } from "./styles";
+import { Button, ButtonProps } from "../Input/Button/Button";
 
-export const DropDownButton = ({
-  button,
-  handleClick,
-  loading,
-}: {
-  loading?: boolean;
-  button?: {
-    label?: string;
-    buttonProps?: ButtonProps;
-  };
-  handleClick: any;
-}) => {
+export const DropDownButton = (props: ButtonProps) => {
   return (
-    <StyledDropDownButton
-      onClick={handleClick}
-      variant="outlined"
-      disabled={loading}
-      endIcon={
-        loading ? <CircularProgress size="20px" /> : <KeyboardArrowDown />
-      }
-      {...button?.buttonProps}
-    >
-      {button?.label}
-    </StyledDropDownButton>
+    <Button {...props} variant="outlined" endIcon={<KeyboardArrowDown />} />
   );
 };

package/src/components/DropDownMenu/DropDownMenu.stories.tsx

@@ -1,16 +1,16 @@
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { HelpIcon } from "../../assets/images/icons";
+import { Icons } from "../export";
 import { DropDownButton } from "./DropDownButton";
 import { DropDownIcon } from "./DropDownIcon";
-import { DropDownMenu, DropDownMenuProps } from "./DropDownMenu";
-import { MenuItemButton } from "./MenuItemButton";
+import { DropdownMenu, DropdownMenuProps } from "./DropDownMenu";
+import { DropdownMenuItem } from "./DropdownMenuItem";
 
 // Define the default export with Meta type including the component type
-const meta: Meta<typeof DropDownMenu> = {
+const meta: Meta<typeof DropdownMenu> = {
   title: "Navigation/DropDownMenu",
-  component: DropDownMenu,
+  component: DropdownMenu,
   tags: ["autodocs"],
   argTypes: {
     anchor: {
@@ -30,66 +30,69 @@ const meta: Meta<typeof DropDownMenu> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof DropDownMenu>;
+type Story = StoryObj<typeof DropdownMenu>;
 
 // Primary story
 export const Primary: Story = {
-  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
   args: {
     anchor: ({ open }: { open: (e: any) => void }) => (
       <DropDownButton
-        button={{
-          label: "Options",
-          buttonProps: { variant: "contained", color: "primary" },
-        }}
-        handleClick={open}
+        variant="contained"
+        color="primary"
+        onClick={open}
         loading={false}
-      />
+      >
+        Dropdown Button
+      </DropDownButton>
     ),
     menu: [
-      <MenuItemButton
-        icon={<HelpIcon />}
+      <DropdownMenuItem
+        icon={<Icons.HelpIcon />}
         label={"Register"}
         onClick={() => {
           console.log("hi");
         }}
       />,
 
-      <MenuItemButton
+      <DropdownMenuItem
         label={"Active Devices"}
         onClick={() => {
           console.log("hi");
         }}
       />,
     ],
+    menuListProps: {
+      sx: { width: "20px" },
+    },
   },
 };
 
 // Story with Button Loading
 export const WithButtonLoading: Story = {
-  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
   args: {
     anchor: ({ open }: { open: (e: any) => void }) => (
       <DropDownButton
-        button={{
-          label: "Options",
-          buttonProps: { variant: "contained", color: "primary" },
-        }}
-        handleClick={open}
-        loading={true}
-      />
+        variant="contained"
+        color="primary"
+        onClick={open}
+        loading={false}
+      >
+        Dropdown Button
+      </DropDownButton>
     ),
     menu: [
-      <MenuItemButton
-        icon={<HelpIcon />}
+      <DropdownMenuItem
+        icon={<Icons.HelpIcon />}
         label={"Register"}
         onClick={() => {
           window.open("/payment", "_blank");
         }}
       />,
 
-      <MenuItemButton
-        icon={<HelpIcon />}
+      <DropdownMenuItem
+        icon={<Icons.HelpIcon />}
         label={"Register"}
         onClick={() => {
           console.log("hi");
@@ -101,13 +104,13 @@ export const WithButtonLoading: Story = {
 
 // Story with Default Icon
 export const WithDefaultIcon: Story = {
-  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
   args: {
     anchor: ({ open }: { open: (e: any) => void }) => (
       <DropDownIcon handleClick={open} />
     ),
     menu: [
-      <MenuItemButton
+      <DropdownMenuItem
         label={"Student Payments"}
         onClick={() => {
           window.open("/payment", "_blank");
@@ -119,7 +122,7 @@ export const WithDefaultIcon: Story = {
 
 // Story with Icon
 export const WithIcon: Story = {
-  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
   args: {
     anchor: ({ open }: { open: (e: any) => void }) => (
       <DropDownIcon

package/src/components/DropDownMenu/DropDownMenu.tsx

@@ -1,19 +1,19 @@
 import { Divider, Menu, MenuListProps, MenuProps } from "@mui/material";
 import { ReactNode, useState } from "react";
 
-export interface DropDownMenuProps {
+export type DropdownMenuProps = {
   anchor: (props: { open: (e: any) => void }) => ReactNode;
   menu: ReactNode[];
   menuProps?: Omit<MenuProps, "open">;
   menuListProps?: MenuListProps;
-}
+};
 
-export const DropDownMenu = ({
+export const DropdownMenu = ({
   menuProps,
   menu = [],
   menuListProps,
   anchor,
-}: DropDownMenuProps) => {
+}: DropdownMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [open, setOpen] = useState(false);
 

package/src/components/DropDownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,25 @@
+import { ListItemIcon, MenuItemProps, SxProps } from "@mui/material";
+import { ReactNode } from "react";
+import { StyledMenuItem } from "./styles";
+
+export type DropdownMenuItemProps = {
+  icon?: ReactNode;
+  label: ReactNode;
+  sx?: SxProps;
+  onClick: () => void;
+} & MenuItemProps;
+
+export const DropdownMenuItem = ({
+  icon,
+  label,
+  onClick,
+  sx = {},
+  ...props
+}: DropdownMenuItemProps) => {
+  return (
+    <StyledMenuItem sx={sx} onClick={onClick} {...props}>
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      {label}
+    </StyledMenuItem>
+  );
+};

package/src/components/DropDownMenu/styles.tsx

@@ -1,9 +1,4 @@
-import { Button, IconButton, MenuItem, styled } from "@mui/material";
-
-export const StyledDropDownButton = styled(Button)(({}) => ({
-  minWidth: "180px",
-  justifyContent: "space-between",
-}));
+import { IconButton, MenuItem, styled } from "@mui/material";
 
 export const StyledIconButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== "outlined",
@@ -19,7 +14,6 @@ export const StyledIconButton = styled(IconButton, {
 export const StyledMenuItem = styled(MenuItem)(({}) => ({
   display: "flex",
   alignItems: "center",
-  padding: "10px 16px",
   gap: "5px",
   "& .MuiListItemIcon-root": {
     minWidth: "24px",

package/src/components/Icons/IconComponents/AppsIcon.tsx

@@ -0,0 +1,36 @@
+export const AppsIcon = () => {
+  return (
+    <svg
+      id="apps"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        id="Path_15109"
+        data-name="Path 15109"
+        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
+        fill="#d4483e"
+      />
+      <path
+        id="Path_15110"
+        data-name="Path 15110"
+        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#f8d759"
+      />
+      <path
+        id="Path_15111"
+        data-name="Path 15111"
+        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
+        fill="#88b053"
+      />
+      <path
+        id="Path_15112"
+        data-name="Path 15112"
+        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#4baabe"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/CareerIcon.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from "@mui/material";
+
+export const CareerIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18.3"
+      height="20.3"
+      viewBox="0 0 20.3 20.3"
+      style={{
+        fill: color,
+      }}
+    >
+      <path
+        id="briefcase"
+        d="M15.833,3.333h-.917A4.174,4.174,0,0,0,10.833,0H9.167A4.174,4.174,0,0,0,5.083,3.333H4.167A4.172,4.172,0,0,0,0,7.5v8.333A4.172,4.172,0,0,0,4.167,20H15.833A4.172,4.172,0,0,0,20,15.833V7.5a4.172,4.172,0,0,0-4.167-4.167ZM9.167,1.667h1.667A2.5,2.5,0,0,1,13.18,3.333H6.82A2.5,2.5,0,0,1,9.167,1.667ZM4.167,5H15.833a2.5,2.5,0,0,1,2.5,2.5V10H1.667V7.5A2.5,2.5,0,0,1,4.167,5ZM15.833,18.333H4.167a2.5,2.5,0,0,1-2.5-2.5V11.667h7.5V12.5a.833.833,0,0,0,1.667,0v-.833h7.5v4.167A2.5,2.5,0,0,1,15.833,18.333Z"
+        transform="translate(0.15 0.15)"
+        stroke-width="0.3"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/ClogWheelIcon.tsx

@@ -0,0 +1,38 @@
+import { useTheme } from "@mui/material";
+
+export const ClogWheelIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16.595"
+      height="20"
+      viewBox="0 0 17.995 20"
+      style={{
+        fill: color,
+      }}
+    >
+      <g
+        id="settings_11_"
+        data-name="settings (11)"
+        transform="translate(-1.203)"
+      >
+        <path
+          id="Path_1375"
+          data-name="Path 1375"
+          d="M11.333,8a3.333,3.333,0,1,0,3.333,3.333A3.333,3.333,0,0,0,11.333,8Zm0,5A1.667,1.667,0,1,1,13,11.333,1.667,1.667,0,0,1,11.333,13Z"
+          transform="translate(-1.133 -1.333)"
+          fill={color}
+        />
+        <path
+          id="Path_1376"
+          data-name="Path 1376"
+          d="M17.945,11.583l-.37-.213a7.583,7.583,0,0,0,0-2.742l.37-.213a2.5,2.5,0,1,0-2.5-4.333l-.371.214A7.481,7.481,0,0,0,12.7,2.927V2.5a2.5,2.5,0,1,0-5,0v.427A7.481,7.481,0,0,0,5.327,4.3l-.373-.216a2.5,2.5,0,1,0-2.5,4.333l.37.213a7.583,7.583,0,0,0,0,2.742l-.37.213a2.5,2.5,0,0,0,2.5,4.333l.371-.214A7.481,7.481,0,0,0,7.7,17.072V17.5a2.5,2.5,0,1,0,5,0v-.428A7.481,7.481,0,0,0,15.074,15.7l.373.215a2.5,2.5,0,1,0,2.5-4.333ZM15.822,8.437a5.873,5.873,0,0,1,0,3.125.833.833,0,0,0,.387.944l.9.522a.834.834,0,1,1-.833,1.444l-.9-.523a.833.833,0,0,0-1.012.138,5.82,5.82,0,0,1-2.7,1.563.833.833,0,0,0-.626.807V17.5a.833.833,0,0,1-1.667,0V16.457a.833.833,0,0,0-.626-.807,5.82,5.82,0,0,1-2.7-1.566.833.833,0,0,0-1.013-.138l-.9.523a.833.833,0,1,1-.833-1.443l.9-.522a.833.833,0,0,0,.387-.944,5.873,5.873,0,0,1,0-3.125.833.833,0,0,0-.388-.941l-.9-.522a.834.834,0,0,1,.833-1.444l.9.523a.833.833,0,0,0,1.012-.134,5.82,5.82,0,0,1,2.7-1.562.833.833,0,0,0,.626-.811V2.5a.833.833,0,1,1,1.667,0V3.543a.833.833,0,0,0,.626.808,5.82,5.82,0,0,1,2.7,1.566.833.833,0,0,0,1.012.137l.9-.522a.833.833,0,1,1,.833,1.443l-.9.522a.833.833,0,0,0-.386.941Z"
+          transform="translate(0 0)"
+          fill={color}
+        />
+      </g>
+    </svg>
+  );
+};