1  import { Box, styled } from "@mui/material";
  2  import clsx from "clsx";
  3  
  4  const StyledBox = styled(Box)(({ ellipsis }) => ({
  5    textTransform: "none",
  6    ...(ellipsis && { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" })
  7  }));
  8  
  9  /**
 10   * @typedef {import("@mui/material").BoxProps} Other
 11   * @param {Other & {ellipsis: boolean}}
 12   * @returns {JSX.Element}
 13   */
 14  export const H1 = ({ children, className, ellipsis, ...props }) => {
 15    return (
 16      <StyledBox
 17        mb={0}
 18        mt={0}
 19        component="h1"
 20        fontSize="28px"
 21        fontWeight="500"
 22        lineHeight="1.5"
 23        ellipsis={ellipsis}
 24        className={clsx({ [className || ""]: true })}
 25        {...props}>
 26        {children}
 27      </StyledBox>
 28    );
 29  };
 30  
 31  /**
 32   * @typedef {import("@mui/material").BoxProps} Other
 33   * @param {Other & {ellipsis: boolean}}
 34   * @returns {JSX.Element}
 35   */
 36  export const H2 = ({ children, className, ellipsis, ...props }) => {
 37    return (
 38      <StyledBox
 39        mb={0}
 40        mt={0}
 41        component="h2"
 42        fontSize="24px"
 43        fontWeight="500"
 44        lineHeight="1.5"
 45        ellipsis={ellipsis}
 46        className={clsx({ [className || ""]: true })}
 47        {...props}>
 48        {children}
 49      </StyledBox>
 50    );
 51  };
 52  
 53  /**
 54   * @typedef {import("@mui/material").BoxProps} Other
 55   * @param {Other & {ellipsis: boolean}}
 56   * @returns {JSX.Element}
 57   */
 58  export const H3 = ({ children, className, ellipsis, ...props }) => {
 59    return (
 60      <StyledBox
 61        mb={0}
 62        mt={0}
 63        component="h3"
 64        fontSize="18px"
 65        fontWeight="500"
 66        lineHeight="1.5"
 67        ellipsis={ellipsis}
 68        className={clsx({ [className || ""]: true })}
 69        {...props}>
 70        {children}
 71      </StyledBox>
 72    );
 73  };
 74  
 75  /**
 76   * @typedef {import("@mui/material").BoxProps} Other
 77   * @param {Other & {ellipsis: boolean}}
 78   * @returns {JSX.Element}
 79   */
 80  export const H4 = ({ children, className, ellipsis, ...props }) => {
 81    return (
 82      <StyledBox
 83        mb={0}
 84        mt={0}
 85        component="h4"
 86        fontSize="16px"
 87        fontWeight="500"
 88        lineHeight="1.5"
 89        ellipsis={ellipsis}
 90        className={clsx({ [className || ""]: true })}
 91        {...props}>
 92        {children}
 93      </StyledBox>
 94    );
 95  };
 96  
 97  /**
 98   * @typedef {import("@mui/material").BoxProps} Other
 99   * @param {Other & {ellipsis: boolean}}
100   * @returns {JSX.Element}
101   */
102  export const H5 = ({ children, className, ellipsis, ...props }) => {
103    return (
104      <StyledBox
105        mb={0}
106        mt={0}
107        component="h5"
108        fontSize="14px"
109        fontWeight="500"
110        lineHeight="1.5"
111        ellipsis={ellipsis}
112        className={clsx({ [className || ""]: true })}
113        {...props}>
114        {children}
115      </StyledBox>
116    );
117  };
118  
119  /**
120   * @typedef {import("@mui/material").BoxProps} Other
121   * @param {Other & {ellipsis: boolean}}
122   * @returns {JSX.Element}
123   */
124  export const H6 = ({ children, className, ellipsis, ...props }) => {
125    return (
126      <StyledBox
127        mb={0}
128        mt={0}
129        component="h6"
130        fontSize="13px"
131        fontWeight="500"
132        lineHeight="1.5"
133        ellipsis={ellipsis}
134        className={clsx({ [className || ""]: true })}
135        {...props}>
136        {children}
137      </StyledBox>
138    );
139  };
140  
141  /**
142   * @typedef {import("@mui/material").BoxProps} Other
143   * @param {Other & {ellipsis: boolean}}
144   * @returns {JSX.Element}
145   */
146  export const Paragraph = ({ children, className, ellipsis, ...props }) => {
147    return (
148      <StyledBox
149        mb={0}
150        mt={0}
151        component="p"
152        fontSize="14px"
153        ellipsis={ellipsis}
154        className={clsx({ [className || ""]: true })}
155        {...props}>
156        {children}
157      </StyledBox>
158    );
159  };
160  
161  /**
162   * @typedef {import("@mui/material").BoxProps} Other
163   * @param {Other & {ellipsis: boolean}}
164   * @returns {JSX.Element}
165   */
166  export const Small = ({ children, className, ellipsis, ...props }) => {
167    return (
168      <StyledBox
169        fontSize="12px"
170        fontWeight="500"
171        lineHeight="1.5"
172        component="small"
173        ellipsis={ellipsis}
174        className={clsx({ [className || ""]: true })}
175        {...props}>
176        {children}
177      </StyledBox>
178    );
179  };
180  
181  /**
182   * @typedef {import("@mui/material").BoxProps} Other
183   * @param {Other & {ellipsis: boolean}}
184   * @returns {JSX.Element}
185   */
186  export const Span = ({ children, className, ellipsis, ...props }) => {
187    return (
188      <StyledBox
189        component="span"
190        lineHeight="1.5"
191        ellipsis={ellipsis}
192        className={clsx({ [className || ""]: true })}
193        {...props}>
194        {children}
195      </StyledBox>
196    );
197  };
198  
199  /**
200   * @typedef {import("@mui/material").BoxProps} Other
201   * @param {Other & {ellipsis: boolean}}
202   * @returns {JSX.Element}
203   */
204  export const Tiny = ({ children, className, ellipsis, ...props }) => {
205    return (
206      <StyledBox
207        fontSize="10px"
208        lineHeight="1.5"
209        component="small"
210        ellipsis={ellipsis}
211        className={clsx({ [className || ""]: true })}
212        {...props}>
213        {children}
214      </StyledBox>
215    );
216  };