@nuskin/foundation-ui-components 1.30.1 → 1.30.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/common/card/CardButton.tsx +8 -10
  3. package/src/common/card/NsAwardCard.tsx +27 -29
  4. package/src/common/card/NsBrandWrapper.tsx +16 -18
  5. package/src/common/card/NsCheckoutCard.tsx +46 -48
  6. package/src/common/card/NsHeroCardLevel2.tsx +44 -46
  7. package/src/common/card/NsIconText.tsx +32 -34
  8. package/src/common/card/NsPost.tsx +45 -47
  9. package/src/common/card/NsSmallFullCard.tsx +47 -49
  10. package/src/common/card/NsXLargeCard.tsx +43 -45
  11. package/src/common/input/InputFieldWrapper.tsx +1 -1
  12. package/src/common/progress/NsProgress.styled.tsx +22 -23
  13. package/src/common/search-bar/NsSearchBar.tsx +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuskin/foundation-ui-components",
3
- "version": "1.30.1",
3
+ "version": "1.30.2",
4
4
  "description": "It is a foundation library written in react, that provides common components to all UI pages",
5
5
  "main": "src/common/index.ts",
6
6
  "repository": {
package/src/common/card/CardButton.tsx CHANGED
@@ -6,16 +6,14 @@ import { styled } from '@nuskin/foundation-theme';
6
6
  import { NsButton, NsIcon } from '../';
7
7
  import { NsCardButton } from './types';
8
8
 
9
- const ButtonTextVariant = styled(Button)(() => {
10
- return {
11
- padding: 0,
12
- borderBottom: '1px solid black',
13
- borderRadius: 0,
14
- textTransform: 'none',
15
- fontSize: '14px',
16
- fontWeight: 600,
17
- };
18
- });
9
+ const ButtonTextVariant = styled(Button)`
10
+ padding: 0;
11
+ border-bottom: 1px solid black;
12
+ border-radius: 0;
13
+ text-transform: none;
14
+ font-size: 14px;
15
+ font-weight: 600;
16
+ `;
19
17
 
20
18
  const CardButton = ({
21
19
  url,
package/src/common/card/NsAwardCard.tsx CHANGED
@@ -15,35 +15,33 @@ type NsAwardCardProps = {
15
15
  className?: string;
16
16
  };
17
17
 
18
- const CardContainer = styled(Box)(() => {
19
- return {
20
- display: 'flex',
21
- flexDirection: 'column',
22
- position: 'relative',
23
- alignItems: 'center',
24
- width: '160px',
25
- height: 'auto',
26
- '.image': {
27
- width: '160px',
28
- height: 'auto',
29
- objectFit: 'cover',
30
- },
31
- '.content': {
32
- display: 'flex',
33
- flexDirection: 'column',
34
- textAlign: 'center',
35
- alignItems: 'center',
36
- marginTop: '25px',
37
- },
38
- '.content-text': {
39
- marginTop: '20px',
40
- },
41
- '.action-link': {
42
- marginTop: '10px',
43
- alignSelf: 'start',
44
- },
45
- };
46
- });
18
+ const CardContainer = styled(Box)`
19
+ display: flex;
20
+ flex-direction: column;
21
+ position: relative;
22
+ align-items: center;
23
+ width: 160px;
24
+ height: auto;
25
+ .image {
26
+ width: 160px;
27
+ height: auto;
28
+ object-fit: cover;
29
+ }
30
+ .content {
31
+ display: flex;
32
+ flex-direction: column;
33
+ text-align: center;
34
+ align-items: center;
35
+ margin-top: 25px;
36
+ }
37
+ .content-text: {
38
+ margin-top: 20px;
39
+ }
40
+ .action-link {
41
+ margin-top: 10px;
42
+ align-self: start;
43
+ },
44
+ `;
47
45
 
48
46
  export default function NsAwardCard({
49
47
  title,
package/src/common/card/NsBrandWrapper.tsx CHANGED
@@ -3,24 +3,22 @@ import { PropsWithChildren, ReactElement } from 'react';
3
3
  import Box from '@mui/material/Box';
4
4
  import { styled } from '@nuskin/foundation-theme';
5
5
 
6
- const Wrapper = styled(Box)(() => {
7
- return {
8
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
9
- width: '100%',
10
- height: '100%',
11
- zIndex: 100,
12
- display: 'flex',
13
- flexDirection: 'column',
14
- alignItems: 'center',
15
- justifyContent: 'center',
16
- '&:hover': {
17
- backgroundColor: 'rgba(0, 0, 0, 0)',
18
- '& img': {
19
- visibility: 'hidden',
20
- },
21
- },
22
- };
23
- });
6
+ const Wrapper = styled(Box)`
7
+ background-color: rgba(0, 0, 0, 0.5);
8
+ width: 100%;
9
+ height: 100%;
10
+ z-index: 100;
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ justify-content: center;
15
+ &:hover {
16
+ background-color: rgba(0, 0, 0, 0);
17
+ & img {
18
+ visibility: hidden;
19
+ }
20
+ }
21
+ `;
24
22
 
25
23
  export default function NsBrandWrapper({ children }: PropsWithChildren): ReactElement {
26
24
  return <Wrapper className="logo-wrapper">{children}</Wrapper>;
package/src/common/card/NsCheckoutCard.tsx CHANGED
@@ -13,54 +13,52 @@ type NsCheckoutCardProps = {
13
13
  className?: string;
14
14
  };
15
15
 
16
- const CardContainer = styled(Box)(() => {
17
- return {
18
- backgroundColor: '#fff',
19
- display: 'flex',
20
- maxWidth: '345px',
21
- height: 'auto',
22
- border: '2px solid #B2B2B2',
23
- borderRadius: '2px',
24
- '.left-bar': {
25
- width: '4px',
26
- height: 'auto',
27
- backgroundColor: '#22D55C',
28
- },
29
- '.content': {
30
- display: 'flex',
31
- flexDirection: 'row',
32
- gap: '10px',
33
- margin: '10px',
34
- width: '100%',
35
- },
36
- '.text-content': {
37
- width: '100%',
38
- },
39
- '.title': {
40
- fontSize: '14px',
41
- fontWeight: '700',
42
- },
43
- '.address': {
44
- fontSize: '13px',
45
- fontWeight: '400',
46
- },
47
- '.action-link': {
48
- color: '#7123D9',
49
- fontSize: '14px',
50
- fontWeight: '700',
51
- letterSpacing: '0.7',
52
- },
53
- '.icon-right': {
54
- marginLeft: 'auto',
55
- },
56
- '.icon': {
57
- ':hover': {
58
- cursor: 'pointer',
59
- },
60
- },
61
- };
62
- });
63
-
16
+ const CardContainer = styled(Box)`
17
+ background-color: #fff;
18
+ display: flex;
19
+ max-width: 345px;
20
+ height: auto;
21
+ border: 2px solid #B2B2B2;
22
+ border-radius: 2px;
23
+ .left-bar {
24
+ width: 4px;
25
+ height: auto;
26
+ background-color: #22D55C;
27
+ }
28
+ .content {
29
+ display: flex;
30
+ flex-direction: row;
31
+ gap: 10px;
32
+ margin: 10px;
33
+ width: 100%;
34
+ }
35
+ .text-content {
36
+ width: 100%;
37
+ }
38
+ .title {
39
+ font-size: 14px;
40
+ font-weight: 700;
41
+ }
42
+ .address {
43
+ font-size: 13px;
44
+ font-weight: 400;
45
+ }
46
+ .action-link {
47
+ color: #7123D9;
48
+ font-size: 14px;
49
+ font-weight: 700;
50
+ letter-spacing: 0.7;
51
+ }
52
+ .icon-right {
53
+ margin-left: auto;
54
+ }
55
+ .icon {
56
+ &:hover {
57
+ cursor: pointer;
58
+ }
59
+ }
60
+ `;
61
+
64
62
  export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps): ReactElement {
65
63
  const [dropdownIcon, setDropdownIcon] = useState(false);
66
64
  const handleClick = () => {
package/src/common/card/NsHeroCardLevel2.tsx CHANGED
@@ -17,52 +17,50 @@ type NsHeroCardLevel2Props = {
17
17
  className?: string;
18
18
  };
19
19
 
20
- const CardContainer = styled(Box)(() => {
21
- return {
22
- backgroundClip: 'border-box',
23
- display: 'flex',
24
- flexDirection: 'row' as 'row',
25
- wordWrap: 'break-word' as 'break-word',
26
- position: 'relative',
27
- overflow: 'hidden',
28
- height: '236px',
29
- maxWidth: '536px',
30
- '.content': {
31
- height: '100%',
32
- padding: '50px',
33
- display: 'flex',
34
- flexDirection: 'column' as 'column',
35
- position: 'absolute',
36
- top: 0,
37
- left: 0,
38
- boxSizing: 'border-box',
39
- },
40
- '.bg-image': {
41
- objectFit: 'cover',
42
- },
43
- '.brand-container': {
44
- backgroundColor: '#fff',
45
- width: 'fit-content',
46
- paddingLeft: '10px',
47
- paddingRight: '10px',
48
- },
49
- '.body-title': {
50
- fontSize: '26px',
51
- lineHeight: '44px',
52
- marginBottom: '5px',
53
- },
54
- '.body-text': {
55
- fontSize: '12px',
56
- fontWeight: 700,
57
- marginBottom: '5px',
58
- },
59
- '@media (max-width:768px)': {
60
- '.content': {
61
- padding: '5%',
62
- },
63
- },
64
- };
65
- });
20
+ const CardContainer = styled(Box)`
21
+ background-clip: border-box;
22
+ display: flex;
23
+ flex-direction: row;
24
+ word-wrap: break-word;
25
+ position: relative;
26
+ overflow: hidden;
27
+ height: 236px;
28
+ max-width: 536px;
29
+ .content {
30
+ height: 100%;
31
+ padding: 50px;
32
+ display: flex;
33
+ flex-direction: column;
34
+ position: absolute;
35
+ top: 0;
36
+ left: 0;
37
+ box-sizing: border-box;
38
+ }
39
+ .bg-image {
40
+ object-fit: cover;
41
+ }
42
+ .brand-container {
43
+ background-color: #fff;
44
+ width: fit-content;
45
+ padding-left: 10px;
46
+ padding-right: 10px;
47
+ }
48
+ .body-title {
49
+ font-size: 26px;
50
+ line-height: 44px;
51
+ margin-bottom: 5px;
52
+ }
53
+ .body-text {
54
+ font-size: 12px;
55
+ font-weight: 700;
56
+ margin-bottom: 5px;
57
+ }
58
+ @media (max-width:768px) {
59
+ .content {
60
+ padding: 5%;
61
+ }
62
+ }
63
+ `
66
64
 
67
65
  const NsHeroCardLevel2 = ({
68
66
  brandName,
package/src/common/card/NsIconText.tsx CHANGED
@@ -9,40 +9,38 @@ type NsIconTextProps = {
9
9
  className?: string;
10
10
  };
11
11
 
12
- const CardContainer = styled(Box)(() => {
13
- return {
14
- backgroundClip: 'border-box',
15
- display: 'flex',
16
- flexDirection: 'column' as 'column',
17
- wordWrap: 'break-word' as 'break-word',
18
- position: 'relative',
19
- overflow: 'hidden',
20
- height: 'auto',
21
- maxWidth: '222px',
22
- backgroundColor: '#F5F5F5',
23
- padding: '20px',
24
- justifyContent: 'center',
25
- gap: '30px',
26
- '.icon': {
27
- display: 'flex',
28
- width: '100%',
29
- },
30
- '.divider': {
31
- width: '182px',
32
- height: '1px',
33
- background: '#B2B2B2',
34
- },
35
- '.title': {
36
- fontSize: '26px',
37
- fontWeight: 400,
38
- marginTop: '-10px',
39
- },
40
- '.text': {
41
- fontWeight: 400,
42
- fontSize: '14px',
43
- },
44
- };
45
- });
12
+ const CardContainer = styled(Box)`
13
+ background-clip: border-box;
14
+ display: flex;
15
+ flex-direction: column;
16
+ word-wrap: break-word;
17
+ position: relative;
18
+ overflow: hidden;
19
+ height: auto;
20
+ max-width: 222px;
21
+ background-color: #F5F5F5;
22
+ padding: 20px;
23
+ justify-content: center;
24
+ gap: 30px;
25
+ .icon {
26
+ display: flex;
27
+ width: 100%;
28
+ }
29
+ .divider {
30
+ width: 182px;
31
+ height: 1px;
32
+ background: #B2B2B2;
33
+ }
34
+ .title {
35
+ font-size: 26px;
36
+ font-weight: 400;
37
+ margin-top: -10px;
38
+ }
39
+ .text {
40
+ font-weight: 400;
41
+ font-size: 14px;
42
+ }
43
+ `;
46
44
 
47
45
  const Icon = (): ReactElement => {
48
46
  return (
package/src/common/card/NsPost.tsx CHANGED
@@ -13,53 +13,51 @@ type NsPostProps = {
13
13
  className?: string;
14
14
  };
15
15
 
16
- const CardContainer = styled(Box)(() => {
17
- return {
18
- backgroundClip: 'border-box',
19
- display: 'flex',
20
- flexDirection: 'column' as 'column',
21
- wordWrap: 'break-word' as 'break-word',
22
- position: 'relative',
23
- overflow: 'hidden',
24
- maxWidth: '165px',
25
- height: '272px',
26
- backgroundColor: '#fff',
27
- '.image': {
28
- height: '180px',
29
- overflow: 'hidden',
30
- objectFit: 'contain',
31
- },
32
- '.content': {
33
- padding: '20px',
34
- display: 'flex',
35
- flexDirection: 'column',
36
- minHeight: '92px',
37
- maxHeight: '92px',
38
- justifyContent: 'space-around',
39
- },
40
- '.body-title': {
41
- fontSize: '18px',
42
- fontWeight: 600,
43
- display: '-webkit-box',
44
- '-webkit-box-orient': 'vertical',
45
- '-webkit-line-clamp': '1',
46
- overflow: 'hidden',
47
- textOverflow: 'ellipsis',
48
- margin: 0,
49
- },
50
- '.body-text': {
51
- fontSize: '12px',
52
- fontWeight: 700,
53
- display: '-webkit-box',
54
- '-webkit-box-orient': 'vertical',
55
- '-webkit-line-clamp': '1',
56
- overflow: 'hidden',
57
- textOverflow: 'ellipsis',
58
- color: '#8C8C8C',
59
- margin: 0,
60
- },
61
- };
62
- });
16
+ const CardContainer = styled(Box)`
17
+ background-clip: border-box;
18
+ display: flex;
19
+ flex-direction: column;
20
+ word-wrap: break-word;
21
+ position: relative;
22
+ overflow: hidden;
23
+ max-width: 165px;
24
+ height: 272px;
25
+ background-color: #fff;
26
+ .image {
27
+ height: 180px;
28
+ overflow: hidden;
29
+ object-fit: contain
30
+ }
31
+ .content {
32
+ padding: 20px;
33
+ display: flex;
34
+ flex-direction: column;
35
+ min-height: 92px;
36
+ max-height: 92px;
37
+ justify-content: space-around
38
+ }
39
+ .body-title {
40
+ font-size: 18px;
41
+ font-weight: 600;
42
+ display: -webkit-box;
43
+ -webkit-box-orient: vertical;
44
+ -webkit-line-clamp: 1;
45
+ overflow: hidden;
46
+ text-overflow: ellipsis;
47
+ margin: 0
48
+ }
49
+ .body-text {
50
+ font-size: 12px;
51
+ font-weight: 700;
52
+ display: -webkit-box;
53
+ -webkit-box-orient: vertical;
54
+ -webkit-line-clamp: 1;
55
+ overflow: hidden;
56
+ text-overflow: ellipsis;
57
+ color: #8C8C8C;
58
+ margin: 0
59
+ }
60
+ `;
63
61
 
64
62
  const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps): ReactElement => {
65
63
  return (
package/src/common/card/NsSmallFullCard.tsx CHANGED
@@ -16,55 +16,53 @@ type NsSmallFullCardProps = {
16
16
  className?: string;
17
17
  };
18
18
 
19
- const CardContainer = styled(Box)(() => {
20
- return {
21
- backgroundColor: '#fff',
22
- display: 'flex',
23
- maxHeight: '320px',
24
- maxWidth: '375px',
25
- overflow: 'hidden',
26
- position: 'relative',
27
- '.image': {
28
- width: '100%',
29
- height: '100%',
30
- objectFit: 'cover',
31
- },
32
- '.gradientOverlay': {
33
- position: 'absolute',
34
- top: 0,
35
- left: 0,
36
- width: '100%',
37
- height: '100%',
38
- background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
39
- },
40
- '.content': {
41
- position: 'absolute',
42
- height: '100%',
43
- width: '100%',
44
- padding: '40px 40px 25px 30px',
45
- display: 'flex',
46
- flexDirection: 'column',
47
- },
48
- '.subtitle': {
49
- color: '#fff',
50
- fontSize: '11px',
51
- fontWeight: '400',
52
- marginTop: 'auto',
53
- },
54
- '.title': {
55
- color: '#fff',
56
- fontSize: '26px',
57
- fontWeight: '400',
58
- marginTop: '20px',
59
- },
60
- '.cta': {
61
- marginTop: '20px',
62
- maxWidth: '208px',
63
- borderRadius: '4px',
64
- overflow: 'hidden',
65
- },
66
- };
67
- });
19
+ const CardContainer = styled(Box)`
20
+ background-color: #fff;
21
+ display: flex;
22
+ max-height: 320px;
23
+ max-width: 375px;
24
+ overflow: hidden;
25
+ position: relative;
26
+ .image {
27
+ width: 100%;
28
+ height: 100%;
29
+ object-fit: cover
30
+ }
31
+ .gradientOverlay {
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ width: 100%;
36
+ height: 100%;
37
+ background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
38
+ }
39
+ .content {
40
+ position: absolute;
41
+ height: 100%;
42
+ width: 100%;
43
+ padding: 40px 40px 25px 30px;
44
+ display: flex;
45
+ flex-direction: column
46
+ }
47
+ .subtitle {
48
+ color: #fff;
49
+ font-size: 11px;
50
+ font-weight: 400;
51
+ margin-top: auto
52
+ }
53
+ .title {
54
+ color: #fff;
55
+ font-size: 26px;
56
+ font-weight: 400;
57
+ margin-top: 20px
58
+ }
59
+ .cta {
60
+ margin-top: 20px;
61
+ max-width: 208px;
62
+ border-radius: 4px;
63
+ overflow: hidden
64
+ }
65
+ `
68
66
 
69
67
  export default function NsSmallFullCard({
70
68
  title,
package/src/common/card/NsXLargeCard.tsx CHANGED
@@ -16,51 +16,49 @@ type NsXLargeCardProps = {
16
16
  className?: string;
17
17
  };
18
18
 
19
- const CardContainer = styled(Box)(() => {
20
- return {
21
- backgroundColor: '#fff',
22
- display: 'flex',
23
- height: '620px',
24
- width: '450px',
25
- position: 'relative',
26
- '.image': {
27
- width: '100%',
28
- height: '100%',
29
- objectFit: 'cover',
30
- },
31
- '.gradientOverlay': {
32
- position: 'absolute',
33
- top: 0,
34
- left: 0,
35
- width: '100%',
36
- height: '100%',
37
- background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);',
38
- },
39
- '.content': {
40
- position: 'absolute',
41
- height: '100%',
42
- width: '100%',
43
- padding: '40px 40px 25px 30px',
44
- display: 'flex',
45
- flexDirection: 'column',
46
- },
47
- '.subtitle': {
48
- color: '#fff',
49
- fontSize: '11px',
50
- fontWeight: '400',
51
- marginTop: 'auto',
52
- },
53
- '.title': {
54
- color: '#fff',
55
- fontSize: '26px',
56
- fontWeight: '400',
57
- marginTop: '20px',
58
- },
59
- '.cta': {
60
- marginTop: '20px',
61
- },
62
- };
63
- });
19
+ const CardContainer = styled(Box)`
20
+ background-color: #fff;
21
+ display: flex;
22
+ height: 620px;
23
+ width: 450px;
24
+ position: relative;
25
+ .image {
26
+ width: 100%;
27
+ height: 100%;
28
+ object-fit: cover;
29
+ }
30
+ .gradientOverlay {
31
+ position: absolute;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
37
+ }
38
+ .content {
39
+ position: absolute;
40
+ height: 100%;
41
+ width: 100%;
42
+ padding: 40px 40px 25px 30px;
43
+ display: flex;
44
+ flex-direction: column;
45
+ }
46
+ .subtitle {
47
+ color: #fff;
48
+ font-size: 11px;
49
+ font-weight: 400;
50
+ margin-top: auto;
51
+ }
52
+ .title {
53
+ color: #fff;
54
+ font-size: 26px;
55
+ font-weight: 400;
56
+ margin-top: 20px;
57
+ }
58
+ .cta {
59
+ margin-top: 20px;
60
+ }
61
+ `
64
62
 
65
63
  export default function NsXLargeCard({
66
64
  title,
package/src/common/input/InputFieldWrapper.tsx CHANGED
@@ -5,7 +5,7 @@ const { color, paletteColor } = ColorUtils;
5
5
  const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
6
6
  return {
7
7
  display: 'flex',
8
- flexDirection: 'column',
8
+ flexDirection: 'column' as 'column',
9
9
  gap: '7px',
10
10
  '.MuiFormHelperText-root': {
11
11
  fontSize: '11px',
package/src/common/progress/NsProgress.styled.tsx CHANGED
@@ -32,26 +32,25 @@ export const StyledLinearProgress = styled(LinearProgress)<Omit<NsProgressProps,
32
32
  },
33
33
  })
34
34
  );
35
- export const StyledProgress = styled('div')(() => {
36
- return {
37
- display: 'grid',
38
- gridTemplateRows: '30px 30px',
39
- '.progress-info': {
40
- justifyContent: 'flex-end',
41
- display: 'flex',
42
- alignItems: 'center',
43
- },
44
- '.progress-bar': {
45
- display: 'flex',
46
- alignItems: 'center',
47
- '.MuiSvgIcon-root': {
48
- padding: '0',
49
- margin: '0',
50
- height: '100%',
51
- position: 'relative',
52
- left: '-4px',
53
- scale: '1.3',
54
- },
55
- },
56
- };
57
- });
35
+ export const StyledProgress = styled('div')`
36
+ display: grid;
37
+ grid-template-rows: 30px 30px;
38
+ .progress-info {
39
+ justify-content: flex-end;
40
+ display: flex;
41
+ align-items: center;
42
+ }
43
+ .progress-bar {
44
+ display: flex;
45
+ align-items: center;
46
+ .MuiSvgIcon-root {
47
+ padding: 0;
48
+ margin: 0;
49
+ height: 100%;
50
+ position: relative;
51
+ left: -4px;
52
+ scale: 1.3
53
+ }
54
+ }
55
+ `;
56
+
package/src/common/search-bar/NsSearchBar.tsx CHANGED
@@ -12,14 +12,14 @@ const Search = styled('div')`
12
12
  width: 100%;
13
13
  )`;
14
14
 
15
- const SearchIconWrapper = styled('div')(() => ({
16
- height: '100%',
17
- position: 'absolute',
18
- pointerEvents: 'none',
19
- display: 'flex',
20
- alignItems: 'center',
21
- justifyContent: 'center',
22
- }));
15
+ const SearchIconWrapper = styled('div')`
16
+ height: 100%;
17
+ position: absolute;
18
+ pointer-events: none;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ `;
23
23
 
24
24
  const StyledInputBase = styled(InputBase)(() => ({
25
25
  color: 'inherit',