anima-ds-nucleus 1.0.25 → 1.0.27
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.
- package/dist/anima-ds-nucleus.css +1 -1
- package/dist/anima-ds.cjs.js +52 -52
- package/dist/anima-ds.esm.js +332 -307
- package/package.json +1 -1
- package/src/components/DataDisplay/Card/CardError.jsx +21 -18
- package/src/components/DataDisplay/Card/CardSkeleton.jsx +7 -7
- package/src/components/DataDisplay/Card/CardTituloCorto.jsx +14 -12
- package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx +15 -13
- package/src/components/DataDisplay/Card/CardTituloLargo.jsx +14 -12
- package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx +15 -13
- package/src/components/DataDisplay/Card/CardVacia.jsx +16 -13
- package/src/components/Layout/Header/HeaderCore.jsx +1 -1
- package/src/components/Layout/NavPoint/NavPoint.jsx +2 -1
- package/src/components/Layout/Sidebar/SidebarCore.jsx +14 -9
- package/src/components/Views/ForgotPassword/ForgotPassword.jsx +10 -2
- package/src/components/Views/NewPassword/NewPassword.jsx +4 -1
- package/src/style.css +24 -0
package/package.json
CHANGED
|
@@ -9,32 +9,32 @@ export const CardError = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
return (
|
|
11
11
|
<div
|
|
12
|
-
className={`bg-white ${className}`}
|
|
12
|
+
className={`bg-white w-full ${className}`}
|
|
13
13
|
style={{
|
|
14
|
-
|
|
15
|
-
height: '476px',
|
|
14
|
+
minHeight: '476px',
|
|
16
15
|
borderRadius: '14px',
|
|
17
16
|
border: '1px solid #C4C4C4',
|
|
18
|
-
opacity: 1
|
|
17
|
+
opacity: 1,
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
19
20
|
}}
|
|
20
21
|
{...props}
|
|
21
22
|
>
|
|
22
23
|
<div
|
|
23
24
|
style={{
|
|
24
|
-
width: '379.5px',
|
|
25
|
-
height: '60px',
|
|
26
25
|
paddingTop: '24px',
|
|
27
26
|
paddingRight: '24px',
|
|
28
27
|
paddingBottom: '6px',
|
|
29
28
|
paddingLeft: '24px',
|
|
30
|
-
opacity: 1
|
|
29
|
+
opacity: 1,
|
|
30
|
+
flexShrink: 0
|
|
31
31
|
}}
|
|
32
32
|
className="flex items-start justify-between"
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
style={{
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
flex: 1,
|
|
37
|
+
minWidth: 0,
|
|
38
38
|
opacity: 1
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
@@ -47,16 +47,19 @@ export const CardError = ({
|
|
|
47
47
|
</div>
|
|
48
48
|
</div>
|
|
49
49
|
<div
|
|
50
|
-
className="flex flex-col items-center justify-center"
|
|
50
|
+
className="flex flex-col items-center justify-center flex-1"
|
|
51
51
|
style={{
|
|
52
52
|
paddingTop: '80px',
|
|
53
53
|
paddingBottom: '24px',
|
|
54
|
+
paddingLeft: '24px',
|
|
55
|
+
paddingRight: '24px',
|
|
54
56
|
display: 'flex',
|
|
55
|
-
justifyContent: 'flex-start'
|
|
57
|
+
justifyContent: 'flex-start',
|
|
58
|
+
minHeight: 0
|
|
56
59
|
}}
|
|
57
60
|
>
|
|
58
61
|
<div
|
|
59
|
-
className="mb-4 flex items-center justify-center border-2 rounded-full"
|
|
62
|
+
className="mb-4 flex items-center justify-center border-2 rounded-full flex-shrink-0"
|
|
60
63
|
style={{
|
|
61
64
|
borderColor: '#374151',
|
|
62
65
|
width: '48px',
|
|
@@ -73,8 +76,8 @@ export const CardError = ({
|
|
|
73
76
|
</div>
|
|
74
77
|
<div
|
|
75
78
|
style={{
|
|
76
|
-
width: '
|
|
77
|
-
|
|
79
|
+
width: '100%',
|
|
80
|
+
maxWidth: '331.5px',
|
|
78
81
|
opacity: 1,
|
|
79
82
|
display: 'flex',
|
|
80
83
|
alignItems: 'center',
|
|
@@ -101,8 +104,9 @@ export const CardError = ({
|
|
|
101
104
|
<div
|
|
102
105
|
className="border flex items-center justify-center"
|
|
103
106
|
style={{
|
|
104
|
-
width: '
|
|
105
|
-
|
|
107
|
+
width: '100%',
|
|
108
|
+
maxWidth: '331.5px',
|
|
109
|
+
minHeight: '128px',
|
|
106
110
|
borderRadius: '10px',
|
|
107
111
|
borderWidth: '1px',
|
|
108
112
|
borderColor: '#EF4444',
|
|
@@ -116,8 +120,7 @@ export const CardError = ({
|
|
|
116
120
|
>
|
|
117
121
|
<div
|
|
118
122
|
style={{
|
|
119
|
-
width: '
|
|
120
|
-
height: '96px',
|
|
123
|
+
width: '100%',
|
|
121
124
|
opacity: 1
|
|
122
125
|
}}
|
|
123
126
|
>
|
|
@@ -4,13 +4,14 @@ export const CardSkeleton = ({
|
|
|
4
4
|
}) => {
|
|
5
5
|
return (
|
|
6
6
|
<div
|
|
7
|
-
className={`bg-white ${className}`}
|
|
7
|
+
className={`bg-white w-full ${className}`}
|
|
8
8
|
style={{
|
|
9
|
-
|
|
10
|
-
height: '476px',
|
|
9
|
+
minHeight: '476px',
|
|
11
10
|
borderRadius: '14px',
|
|
12
11
|
border: '1px solid #C4C4C4',
|
|
13
|
-
opacity: 1
|
|
12
|
+
opacity: 1,
|
|
13
|
+
display: 'flex',
|
|
14
|
+
flexDirection: 'column'
|
|
14
15
|
}}
|
|
15
16
|
{...props}
|
|
16
17
|
>
|
|
@@ -31,13 +32,12 @@ export const CardSkeleton = ({
|
|
|
31
32
|
{/* Header skeleton - placeholder para el título */}
|
|
32
33
|
<div
|
|
33
34
|
style={{
|
|
34
|
-
width: '379.5px',
|
|
35
|
-
height: '60px',
|
|
36
35
|
paddingTop: '24px',
|
|
37
36
|
paddingRight: '24px',
|
|
38
37
|
paddingBottom: '6px',
|
|
39
38
|
paddingLeft: '24px',
|
|
40
|
-
opacity: 1
|
|
39
|
+
opacity: 1,
|
|
40
|
+
flexShrink: 0
|
|
41
41
|
}}
|
|
42
42
|
>
|
|
43
43
|
<div
|
|
@@ -8,32 +8,32 @@ export const CardTituloCorto = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
|
-
className={`bg-white ${className}`}
|
|
11
|
+
className={`bg-white w-full ${className}`}
|
|
12
12
|
style={{
|
|
13
|
-
|
|
14
|
-
height: '476px',
|
|
13
|
+
minHeight: '476px',
|
|
15
14
|
borderRadius: '14px',
|
|
16
15
|
border: '1px solid #C4C4C4',
|
|
17
|
-
opacity: 1
|
|
16
|
+
opacity: 1,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column'
|
|
18
19
|
}}
|
|
19
20
|
{...props}
|
|
20
21
|
>
|
|
21
22
|
<div
|
|
22
23
|
style={{
|
|
23
|
-
width: '379.5px',
|
|
24
|
-
height: '60px',
|
|
25
24
|
paddingTop: '24px',
|
|
26
25
|
paddingRight: '24px',
|
|
27
26
|
paddingBottom: '6px',
|
|
28
27
|
paddingLeft: '24px',
|
|
29
|
-
opacity: 1
|
|
28
|
+
opacity: 1,
|
|
29
|
+
flexShrink: 0
|
|
30
30
|
}}
|
|
31
31
|
className="flex items-start justify-between"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
34
|
style={{
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
flex: 1,
|
|
36
|
+
minWidth: 0,
|
|
37
37
|
opacity: 1
|
|
38
38
|
}}
|
|
39
39
|
>
|
|
@@ -58,14 +58,16 @@ export const CardTituloCorto = ({
|
|
|
58
58
|
{children && (
|
|
59
59
|
<div
|
|
60
60
|
style={{
|
|
61
|
-
|
|
62
|
-
height: '416px',
|
|
61
|
+
flex: 1,
|
|
63
62
|
paddingRight: '24px',
|
|
64
63
|
paddingLeft: '24px',
|
|
64
|
+
paddingBottom: '24px',
|
|
65
65
|
gap: '16px',
|
|
66
66
|
opacity: 1,
|
|
67
67
|
display: 'flex',
|
|
68
|
-
flexDirection: 'column'
|
|
68
|
+
flexDirection: 'column',
|
|
69
|
+
minHeight: 0,
|
|
70
|
+
overflow: 'auto'
|
|
69
71
|
}}
|
|
70
72
|
>
|
|
71
73
|
{children}
|
|
@@ -9,32 +9,32 @@ export const CardTituloCortoMasEstado = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
return (
|
|
11
11
|
<div
|
|
12
|
-
className={`bg-white ${className}`}
|
|
12
|
+
className={`bg-white w-full ${className}`}
|
|
13
13
|
style={{
|
|
14
|
-
|
|
15
|
-
height: '476px',
|
|
14
|
+
minHeight: '476px',
|
|
16
15
|
borderRadius: '14px',
|
|
17
16
|
border: '1px solid #C4C4C4',
|
|
18
|
-
opacity: 1
|
|
17
|
+
opacity: 1,
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
19
20
|
}}
|
|
20
21
|
{...props}
|
|
21
22
|
>
|
|
22
23
|
<div
|
|
23
24
|
style={{
|
|
24
|
-
width: '379.5px',
|
|
25
|
-
height: '60px',
|
|
26
25
|
paddingTop: '24px',
|
|
27
26
|
paddingRight: '24px',
|
|
28
27
|
paddingBottom: '6px',
|
|
29
28
|
paddingLeft: '24px',
|
|
30
|
-
opacity: 1
|
|
29
|
+
opacity: 1,
|
|
30
|
+
flexShrink: 0
|
|
31
31
|
}}
|
|
32
32
|
className="flex items-start justify-between"
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
style={{
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
flex: 1,
|
|
37
|
+
minWidth: 0,
|
|
38
38
|
opacity: 1
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
@@ -58,7 +58,7 @@ export const CardTituloCortoMasEstado = ({
|
|
|
58
58
|
<span
|
|
59
59
|
className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
|
|
60
60
|
style={{
|
|
61
|
-
|
|
61
|
+
minWidth: '90px',
|
|
62
62
|
height: '24px',
|
|
63
63
|
borderRadius: '12px',
|
|
64
64
|
paddingTop: '2px',
|
|
@@ -76,14 +76,16 @@ export const CardTituloCortoMasEstado = ({
|
|
|
76
76
|
{children && (
|
|
77
77
|
<div
|
|
78
78
|
style={{
|
|
79
|
-
|
|
80
|
-
height: '416px',
|
|
79
|
+
flex: 1,
|
|
81
80
|
paddingRight: '24px',
|
|
82
81
|
paddingLeft: '24px',
|
|
82
|
+
paddingBottom: '24px',
|
|
83
83
|
gap: '16px',
|
|
84
84
|
opacity: 1,
|
|
85
85
|
display: 'flex',
|
|
86
|
-
flexDirection: 'column'
|
|
86
|
+
flexDirection: 'column',
|
|
87
|
+
minHeight: 0,
|
|
88
|
+
overflow: 'auto'
|
|
87
89
|
}}
|
|
88
90
|
>
|
|
89
91
|
{children}
|
|
@@ -8,32 +8,32 @@ export const CardTituloLargo = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
|
-
className={`bg-white ${className}`}
|
|
11
|
+
className={`bg-white w-full ${className}`}
|
|
12
12
|
style={{
|
|
13
|
-
|
|
14
|
-
height: '476px',
|
|
13
|
+
minHeight: '476px',
|
|
15
14
|
borderRadius: '14px',
|
|
16
15
|
border: '1px solid #C4C4C4',
|
|
17
|
-
opacity: 1
|
|
16
|
+
opacity: 1,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column'
|
|
18
19
|
}}
|
|
19
20
|
{...props}
|
|
20
21
|
>
|
|
21
22
|
<div
|
|
22
23
|
style={{
|
|
23
|
-
width: '379.5px',
|
|
24
|
-
height: '60px',
|
|
25
24
|
paddingTop: '24px',
|
|
26
25
|
paddingRight: '24px',
|
|
27
26
|
paddingBottom: '6px',
|
|
28
27
|
paddingLeft: '24px',
|
|
29
|
-
opacity: 1
|
|
28
|
+
opacity: 1,
|
|
29
|
+
flexShrink: 0
|
|
30
30
|
}}
|
|
31
31
|
className="flex items-start justify-between"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
34
|
style={{
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
flex: 1,
|
|
36
|
+
minWidth: 0,
|
|
37
37
|
opacity: 1
|
|
38
38
|
}}
|
|
39
39
|
>
|
|
@@ -58,14 +58,16 @@ export const CardTituloLargo = ({
|
|
|
58
58
|
{children && (
|
|
59
59
|
<div
|
|
60
60
|
style={{
|
|
61
|
-
|
|
62
|
-
height: '416px',
|
|
61
|
+
flex: 1,
|
|
63
62
|
paddingRight: '24px',
|
|
64
63
|
paddingLeft: '24px',
|
|
64
|
+
paddingBottom: '24px',
|
|
65
65
|
gap: '16px',
|
|
66
66
|
opacity: 1,
|
|
67
67
|
display: 'flex',
|
|
68
|
-
flexDirection: 'column'
|
|
68
|
+
flexDirection: 'column',
|
|
69
|
+
minHeight: 0,
|
|
70
|
+
overflow: 'auto'
|
|
69
71
|
}}
|
|
70
72
|
>
|
|
71
73
|
{children}
|
|
@@ -9,32 +9,32 @@ export const CardTituloLargoMasEstado = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
return (
|
|
11
11
|
<div
|
|
12
|
-
className={`bg-white ${className}`}
|
|
12
|
+
className={`bg-white w-full ${className}`}
|
|
13
13
|
style={{
|
|
14
|
-
|
|
15
|
-
height: '476px',
|
|
14
|
+
minHeight: '476px',
|
|
16
15
|
borderRadius: '14px',
|
|
17
16
|
border: '1px solid #C4C4C4',
|
|
18
|
-
opacity: 1
|
|
17
|
+
opacity: 1,
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
19
20
|
}}
|
|
20
21
|
{...props}
|
|
21
22
|
>
|
|
22
23
|
<div
|
|
23
24
|
style={{
|
|
24
|
-
width: '379.5px',
|
|
25
|
-
height: '90px',
|
|
26
25
|
paddingTop: '24px',
|
|
27
26
|
paddingRight: '24px',
|
|
28
27
|
paddingBottom: '6px',
|
|
29
28
|
paddingLeft: '24px',
|
|
30
|
-
opacity: 1
|
|
29
|
+
opacity: 1,
|
|
30
|
+
flexShrink: 0
|
|
31
31
|
}}
|
|
32
32
|
className="flex items-start justify-between"
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
style={{
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
flex: 1,
|
|
37
|
+
minWidth: 0,
|
|
38
38
|
opacity: 1
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
@@ -58,7 +58,7 @@ export const CardTituloLargoMasEstado = ({
|
|
|
58
58
|
<span
|
|
59
59
|
className="text-sm font-medium flex-shrink-0 ml-2 flex items-center justify-center"
|
|
60
60
|
style={{
|
|
61
|
-
|
|
61
|
+
minWidth: '90px',
|
|
62
62
|
height: '24px',
|
|
63
63
|
borderRadius: '12px',
|
|
64
64
|
paddingTop: '2px',
|
|
@@ -76,14 +76,16 @@ export const CardTituloLargoMasEstado = ({
|
|
|
76
76
|
{children && (
|
|
77
77
|
<div
|
|
78
78
|
style={{
|
|
79
|
-
|
|
80
|
-
height: '416px',
|
|
79
|
+
flex: 1,
|
|
81
80
|
paddingRight: '24px',
|
|
82
81
|
paddingLeft: '24px',
|
|
82
|
+
paddingBottom: '24px',
|
|
83
83
|
gap: '16px',
|
|
84
84
|
opacity: 1,
|
|
85
85
|
display: 'flex',
|
|
86
|
-
flexDirection: 'column'
|
|
86
|
+
flexDirection: 'column',
|
|
87
|
+
minHeight: 0,
|
|
88
|
+
overflow: 'auto'
|
|
87
89
|
}}
|
|
88
90
|
>
|
|
89
91
|
{children}
|
|
@@ -8,32 +8,32 @@ export const CardVacia = ({
|
|
|
8
8
|
}) => {
|
|
9
9
|
return (
|
|
10
10
|
<div
|
|
11
|
-
className={`bg-white ${className}`}
|
|
11
|
+
className={`bg-white w-full ${className}`}
|
|
12
12
|
style={{
|
|
13
|
-
|
|
14
|
-
height: '476px',
|
|
13
|
+
minHeight: '476px',
|
|
15
14
|
borderRadius: '14px',
|
|
16
15
|
border: '1px solid #C4C4C4',
|
|
17
|
-
opacity: 1
|
|
16
|
+
opacity: 1,
|
|
17
|
+
display: 'flex',
|
|
18
|
+
flexDirection: 'column'
|
|
18
19
|
}}
|
|
19
20
|
{...props}
|
|
20
21
|
>
|
|
21
22
|
<div
|
|
22
23
|
style={{
|
|
23
|
-
width: '379.5px',
|
|
24
|
-
height: '60px',
|
|
25
24
|
paddingTop: '24px',
|
|
26
25
|
paddingRight: '24px',
|
|
27
26
|
paddingBottom: '6px',
|
|
28
27
|
paddingLeft: '24px',
|
|
29
|
-
opacity: 1
|
|
28
|
+
opacity: 1,
|
|
29
|
+
flexShrink: 0
|
|
30
30
|
}}
|
|
31
31
|
className="flex items-start justify-between"
|
|
32
32
|
>
|
|
33
33
|
<div
|
|
34
34
|
style={{
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
flex: 1,
|
|
36
|
+
minWidth: 0,
|
|
37
37
|
opacity: 1
|
|
38
38
|
}}
|
|
39
39
|
>
|
|
@@ -46,18 +46,21 @@ export const CardVacia = ({
|
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
48
|
<div
|
|
49
|
-
className="flex flex-col items-center justify-center"
|
|
49
|
+
className="flex flex-col items-center justify-center flex-1"
|
|
50
50
|
style={{
|
|
51
51
|
paddingTop: '80px',
|
|
52
52
|
paddingBottom: '24px',
|
|
53
|
+
paddingLeft: '24px',
|
|
54
|
+
paddingRight: '24px',
|
|
53
55
|
display: 'flex',
|
|
54
|
-
justifyContent: 'flex-start'
|
|
56
|
+
justifyContent: 'flex-start',
|
|
57
|
+
minHeight: 0
|
|
55
58
|
}}
|
|
56
59
|
>
|
|
57
60
|
<div
|
|
58
|
-
className="mb-4 flex items-center justify-center"
|
|
61
|
+
className="mb-4 flex items-center justify-center flex-shrink-0"
|
|
59
62
|
style={{
|
|
60
|
-
width: '
|
|
63
|
+
width: '64px',
|
|
61
64
|
height: '64px',
|
|
62
65
|
borderRadius: '12px',
|
|
63
66
|
paddingTop: '8px',
|
|
@@ -194,7 +194,7 @@ export const HeaderCore = ({
|
|
|
194
194
|
}
|
|
195
195
|
`}</style>
|
|
196
196
|
|
|
197
|
-
<div className="w-full"
|
|
197
|
+
<div className="w-full">
|
|
198
198
|
{/* Layout Desktop (más de 1365px) */}
|
|
199
199
|
<div
|
|
200
200
|
className={`header-desktop-layout flex items-center justify-between h-16 ${desktopLayoutClassName}`}
|
|
@@ -118,9 +118,10 @@ export const NavPoint = ({
|
|
|
118
118
|
/>
|
|
119
119
|
<Typography
|
|
120
120
|
variant="body-sm"
|
|
121
|
-
className=
|
|
121
|
+
className={`mt-1 ${isActive ? 'font-medium' : 'font-regular'} nav-point-text`}
|
|
122
122
|
style={{
|
|
123
123
|
color: isActive ? TEXT_COLOR_ACTIVE : TEXT_COLOR_INACTIVE,
|
|
124
|
+
fontSize: '1rem',
|
|
124
125
|
whiteSpace: 'nowrap',
|
|
125
126
|
overflow: 'hidden',
|
|
126
127
|
textOverflow: 'ellipsis',
|
|
@@ -306,8 +306,7 @@ const SidebarCoreMobile = ({
|
|
|
306
306
|
{/* Título de la sección */}
|
|
307
307
|
<div className="px-4 mb-2">
|
|
308
308
|
<Typography
|
|
309
|
-
|
|
310
|
-
className="color-gray-500 uppercase font-medium tracking-wider"
|
|
309
|
+
className="text-sidebar-core color-gray-500 uppercase font-medium tracking-wider"
|
|
311
310
|
>
|
|
312
311
|
{section.title}
|
|
313
312
|
</Typography>
|
|
@@ -404,7 +403,7 @@ const SidebarCoreMobile = ({
|
|
|
404
403
|
<div
|
|
405
404
|
style={{
|
|
406
405
|
position: 'absolute',
|
|
407
|
-
top: '
|
|
406
|
+
top: '0px',
|
|
408
407
|
left: '16px',
|
|
409
408
|
right: '16px',
|
|
410
409
|
height: '1px',
|
|
@@ -416,6 +415,7 @@ const SidebarCoreMobile = ({
|
|
|
416
415
|
if (enableOptimisticActiveItem) {
|
|
417
416
|
setOptimisticActiveItem(configSectionId);
|
|
418
417
|
}
|
|
418
|
+
onItemClick && onItemClick(configSectionId);
|
|
419
419
|
onConfigClick && onConfigClick(configSectionId);
|
|
420
420
|
if (controlledOnClose) {
|
|
421
421
|
if (closeOnItemClickAnimationFrame) {
|
|
@@ -1103,8 +1103,7 @@ export const SidebarCore = ({
|
|
|
1103
1103
|
{!isCollapsed && (
|
|
1104
1104
|
<div className="px-4 mb-2">
|
|
1105
1105
|
<Typography
|
|
1106
|
-
|
|
1107
|
-
className="color-gray-500 uppercase font-medium tracking-wider"
|
|
1106
|
+
className="text-sidebar-core color-gray-500 uppercase font-medium tracking-wider"
|
|
1108
1107
|
>
|
|
1109
1108
|
{section.title}
|
|
1110
1109
|
</Typography>
|
|
@@ -1295,7 +1294,7 @@ export const SidebarCore = ({
|
|
|
1295
1294
|
<div
|
|
1296
1295
|
style={{
|
|
1297
1296
|
position: 'absolute',
|
|
1298
|
-
top: '
|
|
1297
|
+
top: '0px',
|
|
1299
1298
|
left: '16px',
|
|
1300
1299
|
right: '16px',
|
|
1301
1300
|
height: '1px',
|
|
@@ -1303,7 +1302,10 @@ export const SidebarCore = ({
|
|
|
1303
1302
|
}}
|
|
1304
1303
|
/>
|
|
1305
1304
|
<button
|
|
1306
|
-
onClick={() =>
|
|
1305
|
+
onClick={() => {
|
|
1306
|
+
onItemClick && onItemClick(configSectionId);
|
|
1307
|
+
onConfigClick && onConfigClick(configSectionId);
|
|
1308
|
+
}}
|
|
1307
1309
|
className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
|
|
1308
1310
|
activeItem === configSectionId
|
|
1309
1311
|
? ''
|
|
@@ -1372,7 +1374,7 @@ export const SidebarCore = ({
|
|
|
1372
1374
|
<div
|
|
1373
1375
|
style={{
|
|
1374
1376
|
position: 'absolute',
|
|
1375
|
-
top: '
|
|
1377
|
+
top: '0px',
|
|
1376
1378
|
left: '8px',
|
|
1377
1379
|
right: '8px',
|
|
1378
1380
|
height: '1px',
|
|
@@ -1390,7 +1392,10 @@ export const SidebarCore = ({
|
|
|
1390
1392
|
title={configSectionLabel}
|
|
1391
1393
|
>
|
|
1392
1394
|
<button
|
|
1393
|
-
onClick={() =>
|
|
1395
|
+
onClick={() => {
|
|
1396
|
+
onItemClick && onItemClick(configSectionId);
|
|
1397
|
+
onConfigClick && onConfigClick(configSectionId);
|
|
1398
|
+
}}
|
|
1394
1399
|
className="flex items-center justify-center transition-all duration-200"
|
|
1395
1400
|
style={{
|
|
1396
1401
|
width: '100%',
|
|
@@ -289,7 +289,7 @@ export const ForgotPassword = ({
|
|
|
289
289
|
{/* Error general */}
|
|
290
290
|
{error && (
|
|
291
291
|
<div
|
|
292
|
-
className="rounded-lg p-4 border"
|
|
292
|
+
className="rounded-lg p-4 border anima-forgotpassword__errorBox"
|
|
293
293
|
style={{
|
|
294
294
|
backgroundColor: '#fecaca',
|
|
295
295
|
borderColor: '#ef4444',
|
|
@@ -298,7 +298,15 @@ export const ForgotPassword = ({
|
|
|
298
298
|
<Typography
|
|
299
299
|
variant="body2"
|
|
300
300
|
className="font-bold"
|
|
301
|
-
style={{
|
|
301
|
+
style={{
|
|
302
|
+
color: '#b91c1c',
|
|
303
|
+
fontFamily: "'IBM Plex Mono', monospace",
|
|
304
|
+
fontWeight: 400,
|
|
305
|
+
fontStyle: 'normal',
|
|
306
|
+
fontSize: '14px',
|
|
307
|
+
lineHeight: '21px',
|
|
308
|
+
letterSpacing: '0.02em',
|
|
309
|
+
}}
|
|
302
310
|
>
|
|
303
311
|
{error}
|
|
304
312
|
</Typography>
|
|
@@ -300,7 +300,10 @@ export const NewPassword = ({
|
|
|
300
300
|
t('form.passwordRequirementOther') || 'Una mayúscula, un número, un carácter especial',
|
|
301
301
|
];
|
|
302
302
|
|
|
303
|
-
|
|
303
|
+
if (defaultItems.length > 0) {
|
|
304
|
+
return `${prefix}\n\n${defaultItems.map(item => `• ${item}`).join('\n')}`;
|
|
305
|
+
}
|
|
306
|
+
return prefix;
|
|
304
307
|
})()}
|
|
305
308
|
</Typography>
|
|
306
309
|
</div>
|
package/src/style.css
CHANGED
|
@@ -81,6 +81,13 @@
|
|
|
81
81
|
font-weight: 400; /* Regular */
|
|
82
82
|
letter-spacing: -0.02em; /* -2% */
|
|
83
83
|
}
|
|
84
|
+
.text-sidebar-core {
|
|
85
|
+
font-family: 'IBM Plex Sans', sans-serif;
|
|
86
|
+
font-size: 0.875rem; /* 12px */
|
|
87
|
+
line-height: 1.125rem; /* 18px */
|
|
88
|
+
font-weight: 400; /* Regular */
|
|
89
|
+
letter-spacing: 1px; /* -2% */
|
|
90
|
+
}
|
|
84
91
|
|
|
85
92
|
/* --- TEXT SIZES ADICIONALES --- */
|
|
86
93
|
.text-xsm {
|
|
@@ -863,6 +870,23 @@
|
|
|
863
870
|
font-family: var(--anima-hexa-login-font-family, 'IBM Plex Sans', sans-serif) !important;
|
|
864
871
|
}
|
|
865
872
|
|
|
873
|
+
/* Excepción: Caja de error debe usar IBM Plex Mono */
|
|
874
|
+
.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__errorBox,
|
|
875
|
+
.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__errorBox p,
|
|
876
|
+
.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__errorBox span {
|
|
877
|
+
font-family: 'IBM Plex Mono', monospace !important;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
/* Excepción: Caja de error en ForgotPassword debe usar IBM Plex Mono */
|
|
881
|
+
.anima-forgotpassword__errorBox,
|
|
882
|
+
.anima-forgotpassword__errorBox p,
|
|
883
|
+
.anima-forgotpassword__errorBox span,
|
|
884
|
+
[data-variant="hexa-login"] .anima-forgotpassword__errorBox,
|
|
885
|
+
[data-variant="hexa-login"] .anima-forgotpassword__errorBox p,
|
|
886
|
+
[data-variant="hexa-login"] .anima-forgotpassword__errorBox span {
|
|
887
|
+
font-family: 'IBM Plex Mono', monospace !important;
|
|
888
|
+
}
|
|
889
|
+
|
|
866
890
|
/* 2. Tamaño fijo de iconos en botones sociales de LoginForm (variante hexa-login) */
|
|
867
891
|
.anima-loginform__container[data-variant="hexa-login"] .anima-loginform__socialButton svg {
|
|
868
892
|
width: var(--anima-hexa-login-social-icon-size, 18px) !important;
|