@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Pagination/Pagination.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentPropsWithRef, Fragment, useState } from 'react';
-import classes from './Pagination.module.scss';
-import readyclasses from '../readyclasses.module.scss';
-import { IconButton } from '../Button/IconButton';
-import { Icons, Icon } from '../Icon/Icon';
-import { Input } from '../Form/Input/Input';
-import { Select } from '../Form/Select/Select';
-import { Option } from '../Form/Select/Option';
-import { Label } from '../Form/Label/Label';
+import React, { ComponentPropsWithRef, Fragment, useState } from "react";
+import classes from "./Pagination.module.scss";
+import readyclasses from "../readyclasses.module.scss";
+import { IconButton } from "../Button/IconButton";
+import { Icons, Icon } from "../Icon/Icon";
+import { Input } from "../Form/Input/Input";
+import { Select } from "../Form/Select/Select";
+import { Option } from "../Form/Select/Option";
+import { Label } from "../Form/Label/Label";
 
 export type PaginationTranslations = {
   totalItems: string;
@@ -16,19 +16,19 @@ export type PaginationTranslations = {
   currentPageLabel: string;
 };
 
-export type PageChangeLabels = 'next' | 'previous' | 'first' | 'last';
+export type PageChangeLabels = "next" | "previous" | "first" | "last";
 
 enum DefaultTranslations {
-  totalItems = 'Total items',
-  itemsPerPage = 'Items per page',
-  currentPage = 'Page %1 of %2',
-  itemsPerPageLabel = 'Select how many items per page you want to see.',
-  currentPageLabel = 'What page you are currently on.',
+  totalItems = "Total items",
+  itemsPerPage = "Items per page",
+  currentPage = "Page %1 of %2",
+  itemsPerPageLabel = "Select how many items per page you want to see.",
+  currentPageLabel = "What page you are currently on."
 }
 
 export type PageSize = 10 | 25 | 50;
 
-export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'translate'> {
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
   currentPage?: number;
   totalElements?: number;
   pageSize?: PageSize;
@@ -52,7 +52,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
     ref
   ) => {
     /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
-    const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || '1');
+    const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || "1");
     const calculateAmountOfPages = () => {
       if (!totalElements) return 1;
 
@@ -64,7 +64,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
     };
 
     const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (event.code === 'Enter') {
+      if (event.code === "Enter") {
         onPageChange(Number(internalCurrentPage));
       }
     };
@@ -73,16 +73,16 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
       const amountOfPages = calculateAmountOfPages();
 
       if (amountOfPages) {
-        const splitCurrentPageTranslation = translate.currentPage.split(' ');
+        const splitCurrentPageTranslation = translate.currentPage.split(" ");
 
-        return splitCurrentPageTranslation.map((string) => {
-          if (string.includes('%1')) {
+        return splitCurrentPageTranslation.map(string => {
+          if (string.includes("%1")) {
             return (
               <Fragment key={string}>
                 <Label
                   id="current-value-input-label"
                   htmlFor="current-value-input"
-                  className={`${readyclasses['sr-only']} ${classes['current-value-input-label']}`}
+                  className={`${readyclasses["sr-only"]} ${classes["current-value-input-label"]}`}
                 >
                   {translate.currentPageLabel}
                 </Label>
@@ -93,7 +93,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
                   type="text"
                   size={currentPage?.toString().length}
                   max={calculateAmountOfPages()}
-                  wrapperProps={{ className: classes['current-value-input'] }}
+                  wrapperProps={{ className: classes["current-value-input"] }}
                   onKeyUp={onEnterListener}
                   onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
                     onPageChange(Number(event.target.value))
@@ -103,16 +103,16 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
                   }
                   name="current-value-input"
                   value={internalCurrentPage}
-                  className={`${classes['form-element']} ${classes['current-page-input']}`}
+                  className={`${classes["form-element"]} ${classes["current-page-input"]}`}
                 />
               </Fragment>
             );
           }
 
-          if (string.includes('%2')) {
+          if (string.includes("%2")) {
             return (
               <div key={string}>
-                <strong>{string.replace('%2', amountOfPages.toString())}</strong>&nbsp;
+                <strong>{string.replace("%2", amountOfPages.toString())}</strong>&nbsp;
               </div>
             );
           }
@@ -137,22 +137,22 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
       <div
         {...rest}
         ref={ref}
-        className={`${classes['pagination-wrapper']} ${className ? className : ''}`}
+        className={`${classes["pagination-wrapper"]} ${className ? className : ""}`}
       >
         {totalElements && (
-          <div className={classes['total']}>
+          <div className={classes["total"]}>
             <span tabIndex={0}>
               {translate.totalItems}: <span>{totalElements}</span>
             </span>
           </div>
         )}
-        <div className={classes['pagination']}>
+        <div className={classes["pagination"]}>
           {pageSize && (
-            <div className={classes['per-page']}>
+            <div className={classes["per-page"]}>
               <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
               <Select
                 labeledBy="page-size-select-label"
-                className={`${classes['form-element']} ${classes['page-size-select']}`}
+                className={`${classes["form-element"]} ${classes["page-size-select"]}`}
                 value={pageSize.toString()}
                 onChange={onPageSizeChangeHandler}
               >
@@ -164,7 +164,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
           )}
           <Fragment>
             {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
-              <div className={classes['previous']}>
+              <div className={classes["previous"]}>
                 {currentPage > 2 && (
                   <IconButton
                     title="first"
@@ -185,10 +185,10 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
                 )}
               </div>
             )}
-            {totalElements && calculateAmountOfPages() && (
-              <div className={classes['page']}>{renderCurrentPageTranslation()}</div>
+            {totalElements && !!calculateAmountOfPages() && (
+              <div className={classes["page"]}>{renderCurrentPageTranslation()}</div>
             )}
-            <div className={classes['next']}>
+            <div className={classes["next"]}>
               {!!(
                 (currentPage !== undefined && currentPage < calculateAmountOfPages()!) ||
                 (currentPage !== undefined && !totalElements)

package/src/Popover/Popover.test.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment, useRef } from 'react';
-import { Popover, Props } from './Popover';
-import { render } from '@testing-library/react';
-import { usePosition } from '../hooks/usePosition';
+import React, { Fragment, useRef } from "react";
+import { Popover, Props } from "./Popover";
+import { render } from "@testing-library/react";
+import { usePosition } from "../hooks/usePosition";
 
 const createPopover = (params?: (defaultParams: Props) => Props) => {
   const Component = () => {
@@ -17,7 +17,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
         </ul>
       ),
       show: false,
-      placement: { vertical: 'top', horizontal: 'left' },
+      placement: { vertical: "top", horizontal: "left" }
     };
     let parameters: Props = defaultParams;
 
@@ -28,7 +28,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
     const { top, left, bottom, right, calculatePosition } = usePosition({
       elementToBePositioned: elementToBePositioned,
       relativeElement: relativeElement,
-      ...parameters,
+      ...parameters
     });
 
     return (
@@ -49,34 +49,34 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
   };
 
   const queries = render(<Component />);
-  const button = queries.getByTestId('button');
-  const popover = queries.getByTestId('popover');
+  const button = queries.getByTestId("button");
+  const popover = queries.getByTestId("popover");
 
   /** Let the hacking begin */
-  Object.defineProperty(button, 'offsetHeight', { configurable: true, value: 500 });
-  Object.defineProperty(button, 'offsetWidth', { configurable: true, value: 500 });
+  Object.defineProperty(button, "offsetHeight", { configurable: true, value: 500 });
+  Object.defineProperty(button, "offsetWidth", { configurable: true, value: 500 });
 
-  Object.defineProperty(window, 'innerHeight', {
+  Object.defineProperty(window, "innerHeight", {
     configurable: true,
-    value: 1000,
+    value: 1000
   });
-  Object.defineProperty(window, 'innerWidth', {
+  Object.defineProperty(window, "innerWidth", {
     configurable: true,
-    value: 1000,
+    value: 1000
   });
 
-  Object.defineProperty(popover, 'offsetHeight', { configurable: true, value: 100 });
-  Object.defineProperty(popover, 'offsetWidth', { configurable: true, value: 100 });
+  Object.defineProperty(popover, "offsetHeight", { configurable: true, value: 100 });
+  Object.defineProperty(popover, "offsetWidth", { configurable: true, value: 100 });
 
   return {
     ...queries,
     popover,
-    button,
+    button
   };
 };
 
-describe('Popover should render', () => {
-  it('renders without crashing and has default left and top attributes', () => {
+describe("Popover should render", () => {
+  it("renders without crashing and has default left and top attributes", () => {
     const { popover } = createPopover();
 
     expect(popover).toBeTruthy();

package/src/Popover/Popover.tsx

@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithRef, ReactNode, RefObject, useEffect, useRef } from 'react';
-import { Offset, Placement, usePosition } from '../hooks/usePosition';
-import classes from './Popover.module.scss';
+import React, { ComponentPropsWithRef, ReactNode, RefObject, useEffect, useRef } from "react";
+import { Offset, Placement, usePosition } from "../hooks/usePosition";
+import classes from "./Popover.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children?: ReactNode;
   show?: boolean;
-  anchorEl?: RefObject<HTMLOrSVGElement>;
+  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
   placement?: Placement;
   offset?: Offset;
   transformOrigin?: Placement;
@@ -24,7 +24,7 @@ export const Popover = React.forwardRef<HTMLDivElement, Props>(
       relativeElement: anchorEl,
       offset: offset,
       placement: placement,
-      transformOrigin: transformOrigin,
+      transformOrigin: transformOrigin
     });
 
     useEffect(() => {
@@ -35,7 +35,7 @@ export const Popover = React.forwardRef<HTMLDivElement, Props>(
       <div ref={ref} {...rest}>
         <div
           ref={elToBePositioned}
-          className={`${classes.popover} ${className ?? ''} ${show ? classes.show : ''}`}
+          className={`${classes.popover} ${className ?? ""} ${show ? classes.show : ""}`}
           style={{ top: top, left: left, right: right, bottom: bottom }}
         >
           {children}

package/src/Skeleton/Skeleton.module.scss

@@ -1,4 +1,4 @@
-@import '../mixins.module.scss';
+@import "../mixins.module.scss";
 
 .skeleton {
   display: block;
@@ -7,7 +7,7 @@
 }
 
 .no-height::before {
-  content: ' ';
+  content: " ";
   white-space: pre-wrap;
 }
 

package/src/Skeleton/Skeleton.test.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
-import { Skeleton, Props } from './Skeleton';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { Skeleton, Props } from "./Skeleton";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {};
 
@@ -10,70 +10,70 @@ const createSkeleton = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Skeleton {...parameters} data-testid="skeleton" />);
-  const skeleton = queries.getByTestId('skeleton');
+  const skeleton = queries.getByTestId("skeleton");
 
   return {
     ...queries,
-    skeleton,
+    skeleton
   };
 };
 
-describe('Skeleton should render', () => {
-  it('renders without crashing', () => {
+describe("Skeleton should render", () => {
+  it("renders without crashing", () => {
     const { skeleton } = createSkeleton();
 
-    expect(skeleton).toHaveClass('skeleton text no-height', { exact: true });
+    expect(skeleton).toHaveClass("skeleton text no-height", { exact: true });
 
     expect(skeleton).toBeDefined();
   });
 
-  it('renders with properties passed', () => {
-    const testClass = 'testclass';
-    const { skeleton } = createSkeleton((defaultParams) => ({
+  it("renders with properties passed", () => {
+    const testClass = "testclass";
+    const { skeleton } = createSkeleton(defaultParams => ({
       ...defaultParams,
-      className: testClass,
+      className: testClass
     }));
 
     expect(skeleton).toHaveClass(`skeleton text no-height ${testClass}`, { exact: true });
   });
 
-  it('renders text variant with width and height', () => {
-    const width = '10rem';
+  it("renders text variant with width and height", () => {
+    const width = "10rem";
     const height = 10;
-    const { skeleton } = createSkeleton((defaultParams) => ({
+    const { skeleton } = createSkeleton(defaultParams => ({
       ...defaultParams,
-      variant: 'text',
+      variant: "text",
       width,
-      height,
+      height
     }));
 
     expect(skeleton).toHaveClass(`skeleton text`, { exact: true });
-    expect(skeleton).toHaveStyle({ width, height: '10px' });
+    expect(skeleton).toHaveStyle({ width, height: "10px" });
   });
 
-  it('renders rectangle variant', () => {
-    const { skeleton } = createSkeleton((defaultParams) => ({
+  it("renders rectangle variant", () => {
+    const { skeleton } = createSkeleton(defaultParams => ({
       ...defaultParams,
-      variant: 'rectangle',
+      variant: "rectangle"
     }));
 
     expect(skeleton).toHaveClass(`skeleton no-height`, { exact: true });
   });
 
-  it('renders circular variant', () => {
-    const { skeleton } = createSkeleton((defaultParams) => ({
+  it("renders circular variant", () => {
+    const { skeleton } = createSkeleton(defaultParams => ({
       ...defaultParams,
-      variant: 'circular',
+      variant: "circular"
     }));
 
     expect(skeleton).toHaveClass(`skeleton no-height circular`, { exact: true });
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -87,10 +87,10 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
-    const container = document.createElement('tbody');
+    const container = document.createElement("tbody");
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });

package/src/Skeleton/Skeleton.tsx

@@ -1,18 +1,18 @@
-import React, { ComponentPropsWithRef } from 'react';
-import classes from './Skeleton.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import classes from "./Skeleton.module.scss";
 
-export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
-  variant?: 'circular' | 'rectangle' | 'text';
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  variant?: "circular" | "rectangle" | "text";
   height?: number | string;
   width?: number | string;
 }
 
 export const Skeleton = React.forwardRef<HTMLDivElement, Props>(
-  ({ variant = 'text', height, width, className, style, ...rest }: Props, ref) => {
-    const classNames = [classes['skeleton']];
-    !height && classNames.push(classes['no-height']);
-    variant === 'text' && classNames.push(classes['text']);
-    variant === 'circular' && classNames.push(classes['circular']);
+  ({ variant = "text", height, width, className, style, ...rest }: Props, ref) => {
+    const classNames = [classes["skeleton"]];
+    !height && classNames.push(classes["no-height"]);
+    variant === "text" && classNames.push(classes["text"]);
+    variant === "circular" && classNames.push(classes["circular"]);
     className && classNames.push(className);
 
     return (
@@ -22,7 +22,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, Props>(
         aria-hidden="true"
         ref={ref}
         style={{ ...style, width, height }}
-        className={classNames.join(' ')}
+        className={classNames.join(" ")}
       ></span>
     );
   }

package/src/StatusIndicator/StatusIndicator.test.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
-import { StatusIndicator, Props } from './StatusIndicator';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { StatusIndicator, Props } from "./StatusIndicator";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  status: 'active',
+  status: "active"
 };
 
 const createStatusIndicator = (params?: (defaultParams: Props) => Props) => {
@@ -16,92 +16,92 @@ const createStatusIndicator = (params?: (defaultParams: Props) => Props) => {
       content
     </StatusIndicator>
   );
-  const statusIndicator = queries.getByTestId('StatusIndicator');
+  const statusIndicator = queries.getByTestId("StatusIndicator");
 
   return {
     ...queries,
-    statusIndicator,
+    statusIndicator
   };
 };
 
-describe('StatusIndicator should render', () => {
-  it('renders without crashing', () => {
+describe("StatusIndicator should render", () => {
+  it("renders without crashing", () => {
     const { statusIndicator, getByText } = createStatusIndicator();
 
     expect(statusIndicator).toBeDefined();
-    expect(getByText('content')).toBeInTheDocument();
+    expect(getByText("content")).toBeInTheDocument();
   });
 
-  it('passes through custom typography props', () => {
-    const { statusIndicator, getByText } = createStatusIndicator((params) => ({
+  it("passes through custom typography props", () => {
+    const { statusIndicator, getByText } = createStatusIndicator(params => ({
       ...params,
       typographyProps: {
-        variant: 'body',
-        children: <strong>custom children</strong>,
-      },
+        variant: "body",
+        children: <strong>custom children</strong>
+      }
     }));
 
     expect(statusIndicator).toBeDefined();
-    expect(getByText('custom children')).toBeInTheDocument();
+    expect(getByText("custom children")).toBeInTheDocument();
   });
 
-  it('passes through custom props', () => {
-    const { statusIndicator } = createStatusIndicator((params) => ({
+  it("passes through custom props", () => {
+    const { statusIndicator } = createStatusIndicator(params => ({
       ...params,
-      'aria-label': 'status indicator',
+      "aria-label": "status indicator"
     }));
 
     expect(statusIndicator).toBeDefined();
-    expect(statusIndicator).toHaveAttribute('aria-label', 'status indicator');
+    expect(statusIndicator).toHaveAttribute("aria-label", "status indicator");
   });
 
   it('should set "active" class on status badge', () => {
-    const { statusIndicator } = createStatusIndicator((params) => ({
+    const { statusIndicator } = createStatusIndicator(params => ({
       ...params,
-      status: 'active',
+      status: "active"
     }));
 
-    expect(statusIndicator.firstChild).toHaveClass('active');
+    expect(statusIndicator.firstChild).toHaveClass("active");
   });
 
   it('should set "error" class on status badge', () => {
-    const { statusIndicator } = createStatusIndicator((params) => ({ ...params, status: 'error' }));
+    const { statusIndicator } = createStatusIndicator(params => ({ ...params, status: "error" }));
 
-    expect(statusIndicator.firstChild).toHaveClass('error');
+    expect(statusIndicator.firstChild).toHaveClass("error");
   });
 
   it('should set "neutral" class on status badge', () => {
-    const { statusIndicator } = createStatusIndicator((params) => ({
+    const { statusIndicator } = createStatusIndicator(params => ({
       ...params,
-      status: 'neutral',
+      status: "neutral"
     }));
 
-    expect(statusIndicator.firstChild).toHaveClass('neutral');
+    expect(statusIndicator.firstChild).toHaveClass("neutral");
   });
 
   it('should pass "warning" class to status badge', () => {
-    const { statusIndicator } = createStatusIndicator((params) => ({
+    const { statusIndicator } = createStatusIndicator(params => ({
       ...params,
-      status: 'warning',
+      status: "warning"
     }));
 
-    expect(statusIndicator.firstChild).toHaveClass('warning');
+    expect(statusIndicator.firstChild).toHaveClass("warning");
   });
 
-  it('should pass custom class to status badge', () => {
-    const { statusIndicator } = createStatusIndicator((params) => ({
+  it("should pass custom class to status badge", () => {
+    const { statusIndicator } = createStatusIndicator(params => ({
       ...params,
-      badgeProps: { className: 'custom' },
+      badgeProps: { className: "custom" }
     }));
 
-    expect(statusIndicator.firstChild).toHaveClass('custom');
+    expect(statusIndicator.firstChild).toHaveClass("custom");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -119,7 +119,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/StatusIndicator/StatusIndicator.tsx

@@ -1,22 +1,22 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
-import { Typography, Props as TypographyProps } from '../Typography/Typography';
-import classes from './StatusIndicator.module.scss';
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+import { Typography, Props as TypographyProps } from "../Typography/Typography";
+import classes from "./StatusIndicator.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   children?: ReactNode;
-  status: 'active' | 'error' | 'neutral' | 'warning';
-  badgeProps?: ComponentPropsWithRef<'div'>;
+  status: "active" | "error" | "neutral" | "warning";
+  badgeProps?: ComponentPropsWithRef<"div">;
   typographyProps?: TypographyProps;
 }
 
 export const StatusIndicator = React.forwardRef<HTMLDivElement, Props>(
   ({ children, status, badgeProps, typographyProps, ...rest }: Props, ref) => {
     return (
-      <div {...rest} className={classes['status-indicator']} ref={ref}>
+      <div {...rest} className={classes["status-indicator"]} ref={ref}>
         <div
-          className={`${classes['status-badge']} ${classes[status]} ${badgeProps?.className ?? ''}`}
+          className={`${classes["status-badge"]} ${classes[status]} ${badgeProps?.className ?? ""}`}
         />
-        <Typography {...typographyProps} spacing={{ margin: '0' }} variant="body" tag="div">
+        <Typography {...typographyProps} spacing={{ margin: "0" }} variant="body" tag="div">
           {typographyProps?.children || children}
         </Typography>
       </div>