@codezee/sixtify-brahma 0.2.2 → 0.2.6

package/packages/shared-components/src/FormFields/DatePicker/DatePicker.tsx

@@ -19,7 +19,7 @@ import { Skeleton } from "./Skeleton";
 export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> &
   MuiDatePickerProps<PickerValidDate> &
   Partial<{
-    label: string;
+    label?: string;
     required: boolean;
     disabled: boolean;
     format: string;
@@ -27,6 +27,7 @@ export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> &
     helperText: string;
     loading: boolean;
     clearable?: boolean;
+    disableKeyboardInput?: boolean;
     setError: (
       name: keyof P,
       error: FieldError | { type: string; message?: string }
@@ -84,6 +85,7 @@ export function DatePicker<P extends FieldValues>({
   required = false,
   clearable = true,
   rules,
+  disableKeyboardInput = false,
   format = dateFormats.dateWithEuropean,
   ...restProps
 }: DatePickerProps<P>) {
@@ -100,14 +102,14 @@ export function DatePicker<P extends FieldValues>({
   const finalValue = value ? DateTime.fromISO(value) : null;
 
   if (loading) {
-    return <Skeleton />;
+    return <Skeleton label={label} />;
   }
 
   const EmptyIcon = () => null;
 
   return (
     <Stack gap="10px">
-      <InputLabel required={required}>{label}</InputLabel>
+      {label && <InputLabel required={required}>{label}</InputLabel>}
 
       <MuiDatePicker<DateTime>
         {...restField}
@@ -123,6 +125,10 @@ export function DatePicker<P extends FieldValues>({
           field: {
             clearable,
             onClear: () => onChange(null),
+            readOnly: disableKeyboardInput,
+          },
+          clearButton: {
+            tabIndex: -1, // This will make the clear button skipped in the tab order
           },
           textField: {
             disabled,
@@ -141,6 +147,11 @@ export function DatePicker<P extends FieldValues>({
                 },
               },
             },
+            onKeyDown: (event) => {
+              if (!clearable && event.key === "Backspace") {
+                event.preventDefault();
+              }
+            },
           },
           day: {
             sx: {

package/packages/shared-components/src/FormFields/DatePicker/Skeleton.tsx

@@ -1,15 +1,22 @@
 import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
 
-export const Skeleton = () => {
+type SkeletonProps = {
+  label?: string;
+};
+
+export const Skeleton = ({ label }: SkeletonProps) => {
   return (
     <Stack gap="10px">
-      <MuiSkeleton
-        width={120}
-        height="23px"
-        sx={{
-          transform: "scale(1)",
-        }}
-      />
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+
       <MuiSkeleton
         height="40px"
         sx={{

package/packages/shared-components/src/FormFields/DateTimePicker/DateTimePicker.tsx

@@ -1,3 +1,5 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { Box, InputLabel, Stack, Tooltip, useTheme } from "@mui/material";
 import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker";
 import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
@@ -12,10 +14,8 @@ import type {
   UseControllerProps,
 } from "react-hook-form";
 import { useController } from "react-hook-form";
-import { Skeleton } from "./Skeleton";
 import { CalendarAction } from "../../Actions";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Skeleton } from "./Skeleton";
 
 export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
   MuiDateTimePickerProps<PickerValidDate> &
@@ -30,7 +30,7 @@ export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
     clearable?: boolean;
     helperIcon?: ReactElement;
     toolTipText?: string;
-
+    timeStepsMinutes?: number;
     setError: (
       name: keyof P,
       error: FieldError | { type: string; message?: string }
@@ -85,6 +85,7 @@ export function DateTimePicker<P extends FieldValues>({
   format = "dd-MM-yyyy HH:mm",
   helperIcon,
   toolTipText,
+  timeStepsMinutes = 1,
   ...restProps
 }: DateTimePickerProps<P>) {
   const {
@@ -138,6 +139,7 @@ export function DateTimePicker<P extends FieldValues>({
         open={open}
         ampm={false}
         value={pickerValue}
+        timeSteps={{ minutes: timeStepsMinutes }}
         format={format}
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}
@@ -161,6 +163,9 @@ export function DateTimePicker<P extends FieldValues>({
           },
           popper: {
             sx: {
+              "& .MuiMultiSectionDigitalClockSection-root::after": {
+                display: "unset",
+              },
               "& .MuiList-padding": {
                 padding: "10px",
               },

package/packages/shared-components/src/FormFields/FileUpload/FileNames.tsx

@@ -0,0 +1,32 @@
+import { AttachFile } from "@mui/icons-material";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import { IconButton, Stack, Typography } from "@mui/material";
+import { v4 as uuidv4 } from "uuid";
+
+type FileNamesProps = {
+  names: string[];
+  onDelete: (index: number) => void;
+};
+
+export const FileNames = ({ names, onDelete }: FileNamesProps) => {
+  return names.map((name: string, index: number) => {
+    return (
+      <Stack
+        key={uuidv4()}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack direction="row" gap="8x">
+          <AttachFile />
+
+          <Typography>{name}</Typography>
+        </Stack>
+
+        <IconButton onClick={() => onDelete(index)}>
+          <DeleteOutlineOutlinedIcon />
+        </IconButton>
+      </Stack>
+    );
+  });
+};

package/packages/shared-components/src/FormFields/FileUpload/FileUpload.tsx

@@ -1,5 +1,5 @@
 import { InputLabel, Stack, Typography, useTheme } from "@mui/material";
-import { drop, isFunction, join, last, remove, split } from "lodash";
+import { isFunction } from "lodash";
 import { useRef } from "react";
 import type {
   FieldValues,
@@ -7,42 +7,43 @@ import type {
   UseFormSetError,
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { v4 as uuidv4 } from "uuid";
 import { PadBox } from "../../PadBox";
 import { SvgsDrop } from "../../Svgs";
-import { isFileSizeValid, isFileTypeValid } from "../../utils";
+import {
+  isFileSizeValid,
+  isFileTypeValid,
+} from "./../../../../../apps/web/utils/file";
 import { FileInput, FileUploadContainer } from "./FileUpload.styled";
 import { Skeleton } from "./Skeleton";
-import { UploadedFileName } from "./UploadedFileName";
 
 export type FileUploadProps<P extends FieldValues> = UseControllerProps<P> & {
   multiple?: boolean;
   loading?: boolean;
   isDisabled?: boolean;
   onChange: (file: File[]) => void;
-  onDelete: (file: string[]) => void;
-  uploadedFiles: string[];
   error?: boolean;
   helperText?: string;
   label?: string;
   size?: number; //Note:- Size in MB
   accept?: string;
+  fileNames: JSX.Element;
+  acceptTitle?: string;
   setError?: UseFormSetError<FieldValues>;
 };
 
 export function FileUpload<P extends FieldValues>({
   loading = false,
-  uploadedFiles,
   onChange,
-  onDelete,
   isDisabled,
   multiple = false,
   error,
   helperText,
   label,
+  fileNames,
   size = 10,
   setError,
   accept = ".png,.jpg,.jpeg,.doc,.docx,.pdf",
+  acceptTitle = "Only JPG, PNG, PDF files are accepted.",
   ...restProps
 }: FileUploadProps<P>) {
   const theme = useTheme();
@@ -53,12 +54,6 @@ export function FileUpload<P extends FieldValues>({
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const getFileName = (url: string) => {
-    const imageName = join(drop(split(last(split(url, "/")), "_")), "_");
-
-    return imageName;
-  };
-
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       const files = Array.from(event.target.files);
@@ -105,41 +100,9 @@ export function FileUpload<P extends FieldValues>({
 
       if (uploadFiles?.length > 0) {
         onChange(uploadFiles);
-      }
-    }
-  };
-
-  const handleFileRemove = (index: number) => {
-    if (multiple && Array.isArray(uploadedFiles)) {
-      const copyOfUploadedFiles = [...uploadedFiles];
 
-      remove(copyOfUploadedFiles, (_, i) => i === index);
-
-      onDelete(copyOfUploadedFiles.length > 0 ? copyOfUploadedFiles : []);
-    } else {
-      onDelete([]);
-    }
-
-    if (inputRef.current) {
-      inputRef.current.value = "";
-    }
-  };
-
-  const renderFileNames = () => {
-    if (!uploadedFiles) {
-      return null;
-    }
-
-    if (Array.isArray(uploadedFiles)) {
-      return uploadedFiles.map((file: string, index: number) => {
-        return (
-          <UploadedFileName
-            key={uuidv4()}
-            fileName={getFileName(file)}
-            onDelete={() => handleFileRemove(index)}
-          />
-        );
-      });
+        event.target.value = "";
+      }
     }
   };
 
@@ -171,9 +134,7 @@ export function FileUpload<P extends FieldValues>({
 
             <Typography>Drag & drop files or Browse</Typography>
 
-            <Typography variant="caption">
-              Only JPG, PNG, PDF files are accepted.
-            </Typography>
+            <Typography variant="caption">{acceptTitle}</Typography>
           </Stack>
         </PadBox>
       </FileUploadContainer>
@@ -190,8 +151,7 @@ export function FileUpload<P extends FieldValues>({
           {helperText}
         </Typography>
       )}
-
-      {renderFileNames()}
+      {fileNames}
     </Stack>
   );
 }

package/packages/shared-components/src/FormFields/FileUpload/index.ts

@@ -1 +1,2 @@
+export * from "./FileNames";
 export * from "./FileUpload";

package/packages/shared-components/src/FormFields/ListItemButton/ListItemButton.tsx

@@ -1,5 +1,7 @@
 import {
   Stack,
+  Typography,
+  useTheme,
   type ListItemButtonProps as MuiListItemButtonProps,
 } from "@mui/material";
 import type { ReactNode } from "react";
@@ -9,14 +11,20 @@ import { StyledListItemButton } from "./ListItemButton.styled";
 export type ListItemButtonProps = MuiListItemButtonProps & {
   label: string;
   actions?: ReactNode;
+  companyName?: string;
 };
 
 export function ListItemButton({
   label,
   selected,
   actions,
+  companyName,
   ...restListItemButtonProps
 }: ListItemButtonProps) {
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
   return (
     <StyledListItemButton
       selected={selected}
@@ -29,7 +37,14 @@ export function ListItemButton({
         alignItems="center"
         justifyContent="space-between"
       >
-        <Tooltip toolTipLabel={label}>{label}</Tooltip>
+        <Stack gap="5px" direction="column">
+          <Tooltip toolTipLabel={label}>{label}</Tooltip>
+
+          <Typography variant="caption" color={iron[800]}>
+            {companyName}
+          </Typography>
+        </Stack>
+
         {actions}
       </Stack>
     </StyledListItemButton>

package/packages/shared-components/src/FormFields/TextField/Skeleton.tsx

@@ -2,19 +2,24 @@ import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
 
 type SkeletonProps = {
   rows?: number;
+  label?: string;
 };
-export const Skeleton = ({ rows }: SkeletonProps) => {
+
+export const Skeleton = ({ rows, label }: SkeletonProps) => {
   const height: number = rows === undefined ? 40 : rows * 23;
 
   return (
     <Stack gap="10px">
-      <MuiSkeleton
-        width={120}
-        height="23px"
-        sx={{
-          transform: "scale(1)",
-        }}
-      />
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+
       <MuiSkeleton
         height={`${height}px`}
         sx={{

package/packages/shared-components/src/FormFields/TextField/TextField.tsx

@@ -49,7 +49,7 @@ export function TextField<P extends FieldValues>({
   };
 
   if (loading) {
-    return <Skeleton rows={rows} />;
+    return <Skeleton label={label} rows={rows} />;
   }
 
   return (
@@ -83,7 +83,7 @@ export function TextField<P extends FieldValues>({
             onChange(value);
           }
         }}
-        value={typeof value === "string" ? value.trimStart() : value}
+        value={typeof value === "string" ? value.trimStart() : (value ?? "")}
         {...restField}
         {...inputFieldProps}
       />

package/packages/shared-components/src/FormFields/TimePicker/TimePicker.tsx

@@ -27,6 +27,7 @@ export type TimePickerProps<P extends FieldValues> = UseControllerProps<P> &
     isReturnDateWithTime: boolean;
     helperIcon?: ReactElement;
     toolTipText?: string;
+    timeStepsMinutes?: number;
   }>;
 
 export function TimePicker<P extends FieldValues>({
@@ -44,6 +45,7 @@ export function TimePicker<P extends FieldValues>({
   format = "HH:mm",
   isReturnLocalTime = false,
   isReturnDateWithTime = false,
+  timeStepsMinutes = 1,
   helperIcon,
   toolTipText,
   ...restProps
@@ -96,6 +98,7 @@ export function TimePicker<P extends FieldValues>({
         format={format}
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}
+        timeSteps={{ minutes: timeStepsMinutes }}
         slotProps={{
           textField: {
             disabled,
@@ -111,6 +114,9 @@ export function TimePicker<P extends FieldValues>({
           },
           popper: {
             sx: {
+              "& .MuiMultiSectionDigitalClockSection-root::after": {
+                display: "unset",
+              },
               "& .MuiList-padding": {
                 padding: "10px",
               },

package/packages/shared-components/src/Indicator/Indicator.tsx

@@ -4,13 +4,14 @@ import { type WorkDayType } from "../utils/colorVariant";
 
 type IndicatorProps = {
   label?: string;
-  variant: WorkDayType;
+  variant?: WorkDayType;
+  colourCode?: string;
 };
 
-export const Indicator = ({ label, variant }: IndicatorProps) => {
+export const Indicator = ({ label, variant, colourCode }: IndicatorProps) => {
   return (
     <Stack gap="10px" direction="row" alignItems="center">
-      <SvgsIndicator variant={variant} />
+      <SvgsIndicator variant={variant} colourCode={colourCode} />
       {label}
     </Stack>
   );

package/packages/shared-components/src/Layouts/FormGridLayout.tsx

@@ -0,0 +1,27 @@
+import { Grid } from "@mui/material";
+import { Children, type ReactNode } from "react";
+
+type FormGridLayoutProps = {
+  children: ReactNode;
+  columns?: number;
+};
+
+export const FormGridLayout = ({
+  children,
+  columns = 3,
+}: FormGridLayoutProps) => {
+  return (
+    <Grid container spacing={2}>
+      {Children.map(
+        children,
+        (child, index) =>
+          child && (
+            // eslint-disable-next-line sonarjs/no-array-index-key
+            <Grid item xs={12 / columns} key={index}>
+              {child}
+            </Grid>
+          )
+      )}
+    </Grid>
+  );
+};

package/packages/shared-components/src/Layouts/index.ts

@@ -1,3 +1,4 @@
+export * from "./FormContainer";
+export * from "./FormGridLayout";
 export * from "./FormRow";
 export * from "./FormSection";
-export * from "./FormContainer";

package/packages/shared-components/src/Pagination/Pagination.tsx

@@ -0,0 +1,42 @@
+import {
+  TablePagination,
+  type TablePaginationProps,
+  useTheme,
+} from "@mui/material";
+
+export const Pagination = ({
+  count,
+  page,
+  onPageChange,
+  rowsPerPage,
+  onRowsPerPageChange,
+  ...rest
+}: TablePaginationProps) => {
+  const theme = useTheme();
+
+  const { grey } = theme.palette;
+
+  return (
+    <TablePagination
+      sx={{
+        "& .MuiInputBase-root": {
+          paddingRight: "10px",
+        },
+        "& .MuiTablePagination-select": {
+          backgroundColor: "transparent !important",
+        },
+        "& .MuiTablePagination-input": {
+          border: `1.5px solid ${grey[400]}`,
+          borderRadius: "5px",
+        },
+      }}
+      component="div"
+      count={count}
+      page={page}
+      onPageChange={onPageChange}
+      rowsPerPage={rowsPerPage}
+      onRowsPerPageChange={onRowsPerPageChange}
+      {...rest}
+    />
+  );
+};

package/packages/shared-components/src/Pagination/index.ts

@@ -0,0 +1 @@
+export * from "./Pagination";

package/packages/shared-components/src/Stepper/Stepper.tsx

@@ -44,7 +44,7 @@ export const Stepper = ({
                 },
               }}
             >
-              <Typography variant="caption">{label}</Typography>
+              <Typography variant="body2">{label}</Typography>
             </StepLabel>
           </Step>
         ))}

package/packages/shared-components/src/Svgs/Drawer/SettingIcon.tsx

@@ -3,48 +3,28 @@ export const SettingIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={20}
-      height={20}
-      fill={props.fill ?? "currentColor"}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
       {...props}
+      style={{ color: "inherit" }}
     >
-      <mask
-        id="a"
-        width={20}
-        height={20}
-        x={0}
-        y={0}
-        maskUnits="userSpaceOnUse"
-        style={{
-          maskType: "luminance",
-        }}
-      >
-        <path
-          fill={props.fill ?? "currentColor"}
-          fillRule="evenodd"
-          stroke={props.fill ?? "currentColor"}
-          strokeWidth={0.5}
-          d="M1 1h18v18H1V1Z"
-          clipRule="evenodd"
-        />
-      </mask>
-      <g fill={props.fill ?? "currentColor"} mask="url(#a)">
-        <path
-          fillRule="evenodd"
-          d="M5.856 14.412c.214 0 .428.025.637.077.63.159 1.179.551 1.503 1.078.211.331.328.718.332 1.112 0 .565.487 1.018 1.086 1.018h1.17c.596 0 1.083-.45 1.086-1.005a2.205 2.205 0 0 1 .725-1.635 2.536 2.536 0 0 1 1.764-.675c.426.01.836.116 1.197.307.52.277 1.184.112 1.484-.366l.62-.961a.944.944 0 0 0 .104-.756 1.014 1.014 0 0 0-.502-.61 2.32 2.32 0 0 1-1.159-1.405 2.18 2.18 0 0 1 .253-1.754c.215-.348.53-.64.906-.842.506-.275.683-.891.39-1.37a.472.472 0 0 1-.033-.06l-.547-.883c-.298-.482-.96-.648-1.48-.373a2.6 2.6 0 0 1-1.873.24 2.442 2.442 0 0 1-1.514-1.065 2.105 2.105 0 0 1-.335-1.117.997.997 0 0 0-.307-.76 1.131 1.131 0 0 0-.78-.304H9.415c-.29 0-.56.105-.764.294a.959.959 0 0 0-.313.712c-.02 1.27-1.135 2.293-2.486 2.293a2.545 2.545 0 0 1-1.212-.315c-.509-.269-1.173-.103-1.471.38l-.632.966c-.29.467-.112 1.085.403 1.364.765.412 1.242 1.18 1.242 2.003 0 .824-.477 1.59-1.244 2.003-.512.277-.69.89-.392 1.368l.588.945c.146.245.384.421.66.493.274.071.576.04.828-.09.37-.202.802-.307 1.235-.307ZM10.583 19h-1.17c-1.37 0-2.486-1.037-2.486-2.313a.887.887 0 0 0-.14-.462 1.073 1.073 0 0 0-.658-.477 1.15 1.15 0 0 0-.814.102 2.693 2.693 0 0 1-1.907.213 2.48 2.48 0 0 1-1.493-1.103l-.583-.936c-.683-1.101-.277-2.513.905-3.149.335-.18.543-.515.543-.875s-.208-.695-.543-.875C1.054 8.485.649 7.07 1.331 5.969l.633-.967c.673-1.09 2.194-1.473 3.38-.84.162.09.337.136.515.137.582 0 1.068-.446 1.078-.995a2.207 2.207 0 0 1 .72-1.626A2.56 2.56 0 0 1 9.414 1h1.17c.668 0 1.317.255 1.783.7.465.446.721 1.058.702 1.68.002.14.051.3.14.442.15.235.383.4.662.468.278.064.569.03.816-.107 1.195-.635 2.716-.255 3.398.849l.581.937c.015.025.028.05.04.075.617 1.086.205 2.454-.943 3.08-.167.089-.303.214-.396.365a.959.959 0 0 0-.112.767c.075.26.253.477.504.61.567.304.99.815 1.158 1.404a2.183 2.183 0 0 1-.253 1.756l-.62.96c-.682 1.092-2.202 1.47-3.385.834a1.175 1.175 0 0 0-.52-.135h-.006c-.27 0-.547.107-.749.294a.96.96 0 0 0-.314.713C13.063 17.968 11.948 19 10.583 19Z"
-          clipRule="evenodd"
-        />
-        <path d="m6.493 14.49.06-.243-.06.242Zm1.503 1.077-.213.132.003.003.21-.135Zm.332 1.112h.25v-.002l-.25.002Zm3.342.013h.25v-.002l-.25.002Zm2.49-2.31-.007.25.006-.25Zm1.196.307.118-.22h-.001l-.117.22Zm1.484-.366-.21-.135-.002.002.212.133Zm.62-.961.21.135.002-.003-.212-.132Zm.104-.756-.24.068v.001l.24-.069Zm-.502-.61-.118.22v.001l.118-.22Zm-1.159-1.405.24-.069-.24.069Zm.253-1.754.212.132-.212-.132Zm.906-.842.118.22h.002l-.12-.22Zm.39-1.37.213-.131-.002-.004-.212.134Zm-.033-.06.228-.103-.007-.015-.009-.014-.212.131Zm-.547-.883-.213.131.213-.131Zm-1.48-.373-.117-.22-.004.001.12.22Zm-1.873.24.06-.242h-.001l-.059.243Zm-1.514-1.065.212-.133-.002-.002-.21.135Zm-.335-1.117-.25-.007v.01l.25-.003Zm-.307-.76-.173.18.173-.18Zm-2.713-.01-.17-.183h-.001l.17.183Zm-.313.712.25.004v-.005l-.25.001ZM5.851 5.602l-.002.25h.002v-.25ZM4.64 5.287l.122-.218-.005-.003-.117.221Zm-1.471.38.21.136.003-.005-.213-.132Zm-.632.966-.21-.137-.002.005.212.132Zm.403 1.364-.119.22.12-.22Zm-.002 4.006-.118-.22.118.22Zm-.392 1.368-.213.132.213-.132Zm.588.945.215-.128-.002-.004-.213.133Zm.66.493-.064.242.063-.242Zm.828-.09.115.223.005-.003-.12-.22Zm2.306 1.968h.25v-.003l-.25.003Zm-.14-.462-.214.13.003.004.21-.134Zm-.658-.477-.06.243.06-.242Zm-.814.102.115.222.004-.002-.119-.22Zm-1.907.213-.063.242.063-.242ZM1.915 14.96l.215-.129-.003-.003-.212.132Zm-.583-.936-.213.132.213-.132Zm.905-3.149-.118-.22.118.22Zm0-1.75-.119.22.119-.22Zm-.906-3.156-.21-.137-.003.005.213.132Zm.633-.967.209.137.003-.006-.212-.131Zm3.38-.84.121-.218-.003-.002-.118.22Zm.515.137-.002.25h.002V4.3Zm1.078-.995.25.004v-.006l-.25.002Zm.72-1.626-.17-.182.17.182Zm4.71.021.173-.18-.173.18Zm.702 1.68-.25-.008v.012l.25-.004Zm.14.443.212-.133-.211.133Zm.662.468-.06.243h.003l.057-.243Zm.816-.107-.117-.22h-.003l.12.22Zm3.398.849-.213.131.213-.131Zm.581.937.215-.128-.002-.004-.213.132Zm.04.075-.229.101.005.011.006.011.218-.123Zm-.943 3.08.118.22.001-.001-.12-.22Zm-.396.365.213.131-.213-.131Zm-.112.767-.24.068.24-.068Zm.504.61.118-.22-.118.22Zm1.158 1.404-.24.07.24-.07Zm-.253 1.756.21.135.002-.003-.212-.132Zm-.62.96-.21-.135-.001.003.212.133Zm-3.385.834.119-.22-.119.22Zm-.52-.135.006-.25h-.006v.25Zm-.755.294-.17-.184.17.184Zm-.314.713.25.001v-.003l-.25.002Zm-7.214-2.03c.194 0 .388.023.576.07l.121-.485a2.882 2.882 0 0 0-.697-.085v.5Zm.576.07a2.224 2.224 0 0 1 1.351.967l.426-.263a2.724 2.724 0 0 0-1.656-1.19l-.121.486Zm1.354.97c.186.292.288.633.292.98l.5-.005a2.361 2.361 0 0 0-.37-1.244l-.422.269Zm.292.977c0 .719.615 1.268 1.336 1.268v-.5c-.477 0-.836-.357-.836-.768h-.5Zm1.336 1.268h1.17v-.5h-1.17v.5Zm1.17 0c.716 0 1.332-.545 1.336-1.254l-.5-.003c-.002.4-.36.757-.836.757v.5Zm1.336-1.257a1.955 1.955 0 0 1 .646-1.45l-.341-.366a2.456 2.456 0 0 0-.805 1.819l.5-.003Zm.646-1.45a2.286 2.286 0 0 1 1.587-.608l.013-.5a2.787 2.787 0 0 0-1.941.742l.34.366Zm1.588-.608c.387.008.759.106 1.085.278l.234-.442a2.939 2.939 0 0 0-1.308-.336l-.011.5Zm1.084.278c.629.335 1.44.142 1.814-.453l-.424-.267c-.226.36-.743.498-1.154.279l-.236.44Zm1.812-.451.62-.962-.42-.27-.62.961.42.27Zm.622-.965c.175-.281.226-.633.133-.957l-.48.138a.694.694 0 0 1-.077.555l.424.264Zm.133-.956a1.264 1.264 0 0 0-.625-.762l-.235.441c.19.1.326.27.379.457l.48-.136Zm-.625-.762a2.07 2.07 0 0 1-1.037-1.254l-.48.137a2.57 2.57 0 0 0 1.281 1.558l.236-.441Zm-1.037-1.255a1.93 1.93 0 0 1 .225-1.552l-.424-.265a2.43 2.43 0 0 0-.281 1.956l.48-.139Zm.226-1.553c.19-.308.471-.57.811-.752l-.236-.441a2.636 2.636 0 0 0-1 .93l.425.263Zm.813-.753c.624-.34.856-1.113.483-1.721l-.427.261c.215.35.092.81-.295 1.02l.239.44Zm.48-1.725a.215.215 0 0 1-.015-.028l-.456.205a.719.719 0 0 0 .05.091l.422-.268Zm-.03-.057-.548-.883-.425.264.547.882.425-.263Zm-.548-.883c-.37-.601-1.181-.795-1.81-.462l.235.442c.41-.218.926-.08 1.15.283l.425-.263Zm-1.813-.46a2.35 2.35 0 0 1-1.692.217l-.12.486a2.85 2.85 0 0 0 2.053-.265l-.241-.438Zm-1.693.217a2.193 2.193 0 0 1-1.361-.956l-.424.266a2.692 2.692 0 0 0 1.668 1.176l.117-.486Zm-1.363-.958a1.855 1.855 0 0 1-.295-.985l-.5.005c.004.443.135.877.375 1.25l.42-.27Zm-.295-.975c.01-.367-.13-.702-.384-.947l-.346.36a.747.747 0 0 1 .23.573l.5.014Zm-.384-.947a1.381 1.381 0 0 0-.952-.374v.5c.231 0 .453.088.606.235l.346-.36Zm-.952-.374h-1.17v.5h1.17v-.5Zm-1.17 0c-.35 0-.682.127-.934.36l.34.368a.868.868 0 0 1 .594-.228v-.5Zm-.935.361a1.209 1.209 0 0 0-.392.897l.5-.003a.709.709 0 0 1 .233-.528l-.341-.365Zm-.392.892C8.07 4.424 7.081 5.352 5.851 5.352v.5c1.472 0 2.714-1.117 2.736-2.539l-.5-.007ZM5.854 5.352a2.295 2.295 0 0 1-1.093-.283l-.244.437c.4.223.859.341 1.332.346l.005-.5Zm-1.098-.286c-.619-.327-1.43-.131-1.8.469l.425.263c.225-.365.742-.5 1.141-.29l.234-.442Zm-1.797.463-.632.967.418.274.632-.967-.418-.274Zm-.635.972c-.372.6-.135 1.374.496 1.716l.238-.44c-.4-.216-.517-.677-.31-1.012L2.325 6.5Zm.497 1.716C3.51 8.588 3.93 9.275 3.93 10h.5c0-.922-.534-1.771-1.373-2.223l-.237.44ZM3.93 10c0 .725-.42 1.41-1.112 1.783l.237.44c.841-.453 1.375-1.3 1.375-2.223h-.5Zm-1.112 1.783c-.63.34-.865 1.112-.487 1.72l.425-.264c-.216-.347-.095-.803.3-1.016l-.238-.44Zm-.487 1.72.59.946.424-.265-.59-.945-.424.265Zm.587.942c.18.301.473.518.81.606l.127-.484a.837.837 0 0 1-.508-.379l-.43.257Zm.81.606c.333.086.698.05 1.007-.11l-.23-.444a.93.93 0 0 1-.65.07l-.126.484Zm1.012-.112a2.341 2.341 0 0 1 1.115-.277v-.5a2.84 2.84 0 0 0-1.355.338l.24.439Zm5.842 3.811h-1.17v.5h1.17v-.5Zm-1.17 0c-1.25 0-2.236-.942-2.236-2.063h-.5c0 1.43 1.245 2.563 2.737 2.563v-.5Zm-2.236-2.066a1.137 1.137 0 0 0-.18-.594l-.421.27c.066.103.1.22.101.33l.5-.006ZM7 16.094a1.323 1.323 0 0 0-.81-.588l-.12.485a.823.823 0 0 1 .504.365L7 16.093Zm-.81-.588a1.4 1.4 0 0 0-.992.124l.237.44a.9.9 0 0 1 .635-.079l.12-.485Zm-.989.122a2.443 2.443 0 0 1-1.728.193l-.127.484c.69.18 1.444.1 2.085-.233l-.23-.444Zm-1.728.193a2.23 2.23 0 0 1-1.342-.99l-.43.257a2.729 2.729 0 0 0 1.645 1.217l.127-.484Zm-1.345-.993-.583-.936-.424.264.583.936.424-.264Zm-.583-.935c-.602-.972-.251-2.226.811-2.798l-.236-.44c-1.3.7-1.763 2.27-1 3.5l.425-.262Zm.811-2.798c.41-.22.675-.636.675-1.095h-.5a.752.752 0 0 1-.411.655l.236.44ZM3.03 10c0-.457-.264-.875-.675-1.095l-.236.44c.26.14.411.394.411.655h.5Zm-.674-1.095C1.292 8.33.942 7.072 1.543 6.1l-.425-.263c-.762 1.232-.3 2.804 1 3.508l.238-.44Zm-.816-2.8.633-.966-.419-.274-.632.967.418.274Zm.636-.972c.6-.97 1.973-1.326 3.05-.75l.236-.44c-1.295-.693-2.964-.281-3.711.928l.425.262Zm3.047-.751c.198.11.414.165.634.167l.005-.5a.829.829 0 0 1-.397-.105l-.242.438Zm.636.167c.703 0 1.316-.541 1.328-1.241l-.5-.008c-.007.397-.367.75-.828.75v.5Zm1.328-1.247a1.957 1.957 0 0 1 .641-1.441l-.342-.365a2.456 2.456 0 0 0-.8 1.81l.5-.004Zm.64-1.44a2.31 2.31 0 0 1 1.587-.612v-.5a2.81 2.81 0 0 0-1.927.746l.34.365Zm1.587-.612h1.17v-.5h-1.17v.5Zm1.17 0c.606 0 1.193.232 1.61.63l.345-.362A2.852 2.852 0 0 0 10.583.75v.5Zm1.61.63c.416.4.642.944.625 1.491l.5.016a2.494 2.494 0 0 0-.779-1.868l-.346.36Zm.625 1.503c.002.191.068.397.18.573l.422-.267a.633.633 0 0 1-.102-.313l-.5.007Zm.18.573c.184.292.474.494.812.577l.119-.486a.824.824 0 0 1-.509-.358l-.422.267Zm.815.577c.335.078.69.037.994-.131l-.241-.438a.902.902 0 0 1-.64.082l-.113.487Zm.99-.13c1.087-.577 2.46-.224 3.068.76l.425-.263c-.756-1.223-2.424-1.63-3.727-.938l.235.442Zm3.068.76.582.938.425-.264-.582-.937-.425.263Zm.58.933a.49.49 0 0 1 .025.05l.457-.204a.947.947 0 0 0-.053-.1l-.43.254Zm.036.071c.545.958.188 2.175-.845 2.736l.24.44c1.263-.688 1.731-2.207 1.04-3.423l-.435.247Zm-.843 2.736a1.283 1.283 0 0 0-.49.454l.425.263a.783.783 0 0 1 .3-.277l-.235-.44Zm-.49.454c-.181.292-.233.642-.14.967l.48-.137a.709.709 0 0 1 .085-.567l-.425-.263Zm-.14.968c.094.329.319.598.627.762l.235-.441a.755.755 0 0 1-.382-.459l-.48.138Zm.626.762c.51.273.887.731 1.036 1.252l.48-.138a2.598 2.598 0 0 0-1.28-1.555l-.236.44Zm1.036 1.252c.15.52.068 1.086-.225 1.554l.424.265c.367-.586.47-1.298.282-1.957l-.48.138Zm-.223 1.551-.62.961.42.271.62-.96-.42-.272Zm-.621.964c-.609.973-1.982 1.323-3.055.746l-.237.44c1.291.694 2.96.289 3.716-.92l-.424-.266Zm-3.056.745a1.425 1.425 0 0 0-.632-.164l-.012.5c.144.003.287.04.409.105l.235-.44Zm-.638-.164h-.006v.5h.006v-.5Zm-.006 0c-.332 0-.67.13-.919.36l.34.367a.872.872 0 0 1 .579-.227v-.5Zm-.919.36a1.21 1.21 0 0 0-.394.899l.5-.004a.71.71 0 0 1 .235-.528l-.341-.366Zm-.394.896c-.006 1.122-.993 2.059-2.237 2.059v.5c1.486 0 2.73-1.127 2.737-2.557l-.5-.002Z" />
-      </g>
       <path
-        fill={props.fill ?? "currentColor"}
-        fillRule="evenodd"
-        d="M9.842 8.387a1.672 1.672 0 1 0 1.671 1.672c0-.921-.75-1.671-1.671-1.671Zm0 4.672c-1.654 0-3-1.345-3-3 0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.655-1.346 3-3 3Z"
-        clipRule="evenodd"
+        d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z"
+        stroke={props.fill ?? "currentColor"}
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
-        fill={props.fill ?? "currentColor"}
-        d="M9.842 8.137c-1.06 0-1.921.863-1.921 1.922h.5c0-.783.638-1.421 1.42-1.421v-.5ZM7.92 10.06c0 1.06.862 1.92 1.92 1.92v-.5a1.422 1.422 0 0 1-1.42-1.42h-.5Zm1.92 1.92c1.06 0 1.922-.86 1.922-1.92h-.5c0 .784-.638 1.42-1.421 1.42v.5Zm1.922-1.92c0-1.059-.861-1.921-1.921-1.921v.5c.783 0 1.42.638 1.42 1.421h.5Zm-1.921 2.75a2.753 2.753 0 0 1-2.75-2.75h-.5a3.253 3.253 0 0 0 3.25 3.25v-.5Zm-2.75-2.75a2.754 2.754 0 0 1 2.75-2.75v-.5a3.254 3.254 0 0 0-3.25 3.25h.5Zm2.75-2.75a2.754 2.754 0 0 1 2.75 2.75h.5a3.254 3.254 0 0 0-3.25-3.25v.5Zm2.75 2.75a2.753 2.753 0 0 1-2.75 2.75v.5a3.253 3.253 0 0 0 3.25-3.25h-.5Z"
+        d="M2.41701 6.46265L3.15034 5.19248C3.58368 4.44192 4.55545 4.17544 5.31322 4.61294C6.61947 5.36711 7.68685 4.75168 7.68429 3.23946C7.68401 2.37328 8.39523 1.65807 9.26863 1.66196L10.9297 1.66832C11.6956 1.65829 12.3151 2.28537 12.3251 3.05133L12.3253 3.23429C12.3207 4.74234 13.3888 5.359 14.6997 4.60512L14.8582 4.51383C15.5266 4.13953 16.3794 4.36246 16.7537 5.03082L17.5897 6.46613C18.0298 7.22057 17.766 8.19411 17.0157 8.62696C15.7048 9.38085 15.7055 10.6129 17.0118 11.3671C17.7623 11.8004 18.0288 12.7722 17.5913 13.53L16.858 14.8002C16.4247 15.5507 15.4529 15.8172 14.6951 15.3797C13.3889 14.6255 12.3215 15.241 12.324 16.7532C12.3202 17.6266 11.6131 18.3346 10.7397 18.3307L9.07868 18.3243C8.31271 18.3343 7.69325 17.7073 7.68323 16.9413L7.68301 16.7583C7.68765 15.2503 6.61956 14.6336 5.30865 15.3875L5.1501 15.4788C4.48174 15.8531 3.62895 15.6302 3.25465 14.9618L2.41863 13.5265C1.97856 12.7721 2.24234 11.7985 2.99262 11.3657C4.30352 10.6118 4.30281 9.37969 2.99655 8.62552C2.23878 8.18802 1.98368 7.21321 2.41701 6.46265Z"
+        stroke={props.fill ?? "currentColor"}
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );