monica-alexandria 2.8.0 → 2.8.1

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 (14) hide show
  1. package/dist/index.es.js +62 -62
  2. package/dist/index.js +62 -62
  3. package/package.json +1 -1
  4. package/src/export/components/elements/button/Cta_.js +2 -1
  5. package/src/export/components/elements/button/Edit_.js +2 -1
  6. package/src/export/components/elements/button/Focus_.js +2 -1
  7. package/src/export/components/elements/button/Focus_Plain.js +2 -1
  8. package/src/export/components/elements/button/Grey_.js +2 -1
  9. package/src/export/components/elements/button/Grey_Link.js +2 -1
  10. package/src/export/components/elements/button/Main_.js +2 -1
  11. package/src/export/components/elements/button/Main_Plain.js +17 -16
  12. package/src/export/components/elements/button/White_Plain.js +2 -1
  13. package/src/export/components/elements/card/Card_Button.js +1 -1
  14. package/src/export/components/forms/Form_Input.js +2 -1
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import"react";import r from"styled-components";const a=r.button`
1
+ import e from"react";import t from"styled-components";const r=t.button`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  gap: 1rem;
@@ -7,25 +7,25 @@ import"react";import r from"styled-components";const a=r.button`
7
7
  cursor: pointer;
8
8
  transition-property: background, border;
9
9
  transition-duration: .5s;
10
- padding: ${r=>"noPads"===r.pads?"0":"small"===r.size?"var(--smallPads)":"large"===r.size?"var(--largePads)":"var(--normalPads)"};
10
+ padding: ${e=>"noPads"===e.pads?"0":"small"===e.size?"var(--smallPads)":"large"===e.size?"var(--largePads)":"var(--normalPads)"};
11
11
 
12
12
  svg{
13
13
  transition-property: fill;
14
14
  transition-duration: .5s;
15
- width: ${r=>"small"===r.size?"var(--smallIcon)":"large"===r.size?"var(--largeIcon)":"var(--normalIcon)"};
15
+ width: ${e=>"small"===e.size?"var(--smallIcon)":"large"===e.size?"var(--largeIcon)":"var(--normalIcon)"};
16
16
  }
17
17
 
18
18
  span{
19
19
  white-space: nowrap;
20
20
  transition-property: color;
21
21
  transition-duration: .5s;
22
- font-size: ${r=>"small"===r.size?"var(--smallText)":"large"===r.size?"var(--largeText)":"var(--normalText)"};
22
+ font-size: ${e=>"small"===e.size?"var(--smallText)":"large"===e.size?"var(--largeText)":"var(--normalText)"};
23
23
  }
24
24
 
25
25
  &:active{
26
26
  transform: scale(.97);
27
27
  }
28
- `;r(a)`
28
+ `,n=t(r)`
29
29
  background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
30
30
  border-radius: var(--normalRadius);
31
31
 
@@ -36,8 +36,8 @@ import"react";import r from"styled-components";const a=r.button`
36
36
  &:hover{
37
37
  background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
38
38
  }
39
- `,r(a)`
40
- background: ${r=>r.theme.background};
39
+ `,o=t=>e.createElement(n,{size:t.size,onClick:t.onClick},e.createElement("span",null,t.buttonText));function a(e){return e.Icon,React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 323.35 324.14"},React.createElement("g",{"data-name":"Layer 2"},React.createElement("g",{"data-name":"Layer 1"},React.createElement("path",{d:"M85.67 167.78c11.46-11.7 23.12-23.58 34.76-35.49 4.15-4.24 8.62-6.81 14.46-3.06 7 4.48 7.53 11.3.83 18-11.81 11.79-23.93 23.25-35.57 34.51l41.29 40.78c10.92-11 22.55-22.85 34.39-34.51 6.9-6.79 13.45-6.6 18.13.14 4.27 6.17 1.3 10.86-3.19 15.27-11.65 11.46-23.28 23-34.76 34.29 10.11 14.86 10.11 14.86-1.91 26.87q-4.71 4.71-9.42 9.41c-25.59 25.45-53.14 30-85.84 14.09-.89-.43-1.87-.67-4.17-1.48l-35 37.55L0 304.52l35.46-33.29c-3.5-14.79-7.62-26.43-8.76-38.35-1.91-20.16 6-37.35 20.26-51.6q6.16-6.15 12.31-12.32c11.86-11.85 11.86-11.85 26.4-1.18ZM267.71 38l35.77-38 19.87 20.11c-10.19 9.76-20.6 20-31.39 29.9-4.65 4.25-5.74 7.49-2.6 13.79 13.3 26.62 8.35 56.13-12.18 77.6-6.14 6.42-12.55 12.57-18.82 18.86-5.35 5.37-10.6 5.33-16 0-26.31-26.34-52.82-52.48-78.73-79.19-2.67-2.75-4.2-11-2.29-13.11 15.4-16.71 29.81-35.06 54.26-39.72 18.32-3.54 35.18.11 52.11 9.76Z"}))))}const l=t(r)`
40
+ background: ${e=>e.theme.background};
41
41
  border: 1px solid var(--main);
42
42
  border-radius: var(--normalRadius);
43
43
  padding: 1rem ;
@@ -60,23 +60,23 @@ import"react";import r from"styled-components";const a=r.button`
60
60
  color: var(--mainLight);
61
61
  }
62
62
  }
63
- `,r(a)`
63
+ `,i=t=>e.createElement(l,{size:"normal",onClick:t.onClick},e.createElement(a,{Icon:t.buttonIcon})),c=t(r)`
64
64
  background: var(--focus);
65
65
  border-radius: var(--normalRadius);
66
66
  border: 1px solid var(--focus);
67
67
 
68
68
  span{
69
- color: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
69
+ color: ${e=>"dark"===e.theme?"var(--dark)":"var(--white)"};
70
70
  }
71
71
 
72
72
  svg{
73
- fill: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
73
+ fill: ${e=>"dark"===e.theme?"var(--dark)":"var(--white)"};
74
74
  }
75
75
 
76
76
  &:hover{
77
77
  background: var(--focusLight);
78
78
  }
79
- `,r(a)`
79
+ `,s=t=>e.createElement(c,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),d=t(r)`
80
80
  background: transparent;
81
81
  border: 1px solid transparent;
82
82
 
@@ -98,24 +98,24 @@ import"react";import r from"styled-components";const a=r.button`
98
98
  fill: var(--focusLight);
99
99
  }
100
100
  }
101
- `,r(a)`
102
- background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
103
- border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
101
+ `,u=t=>e.createElement(d,{size:t.size,onClick:t.onClick,onFocus:t.onFocus},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),m=t(r)`
102
+ background: ${e=>"dark"===e.theme?"var(--gloom)":"var(--grey)"};
103
+ border: 1px solid ${e=>"dark"===e.theme?"var(--gloom)":"var(--grey)"};
104
104
  border-radius: var(--normalRadius);
105
105
 
106
106
  span{
107
- color: ${r=>"dark"===r.theme?"var(--red)":"var(--black)"};
107
+ color: ${e=>"dark"===e.theme?"var(--red)":"var(--black)"};
108
108
  }
109
109
 
110
110
  svg{
111
- fill: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
111
+ fill: ${e=>"dark"===e.theme?"var(--blanc)":"var(--black)"};
112
112
  }
113
113
 
114
114
  &:hover{
115
- background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
116
- border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
115
+ background: ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyLight)"};
116
+ border: 1px solid ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyLight)"};
117
117
  }
118
- `,r(a)`
118
+ `,h=t=>e.createElement(m,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),g=t(r)`
119
119
  background: transparent;
120
120
  border: 1px solid transparent;
121
121
 
@@ -131,14 +131,14 @@ import"react";import r from"styled-components";const a=r.button`
131
131
  &:hover{
132
132
 
133
133
  span{
134
- color: ${r=>r.theme.low};
134
+ color: ${e=>e.theme.low};
135
135
  }
136
136
 
137
137
  svg{
138
- fill: ${r=>r.theme.low};
138
+ fill: ${e=>e.theme.low};
139
139
  }
140
140
  }
141
- `,r(a)`
141
+ `,b=t=>e.createElement(g,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),p=t(r)`
142
142
  background: var(--main);
143
143
  border-radius: var(--normalRadius);
144
144
  border: 1px solid var(--main);
@@ -155,52 +155,52 @@ import"react";import r from"styled-components";const a=r.button`
155
155
  background: var(--mainLight);
156
156
  border: 1px solid var(--mainLight);
157
157
  }
158
- `,r(a)`
159
- background: transparent;
160
- border: 1px solid transparent;
161
-
162
- span{
163
- color: var(--main);
164
- }
165
-
166
- svg{
167
- fill: var(--main);
168
- }
169
-
170
- &:hover{
158
+ `,v=t=>e.createElement(p,{className:t.className,size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),f=t(r)`
159
+ background: transparent;
160
+ border: 1px solid transparent;
171
161
 
172
162
  span{
173
- color: var(--mainLight);
163
+ color: var(--main);
174
164
  }
175
165
 
176
166
  svg{
177
- fill: var(--mainLight);
167
+ fill: var(--main);
168
+ }
169
+
170
+ &:hover{
171
+
172
+ span{
173
+ color: var(--mainLight);
174
+ }
175
+
176
+ svg{
177
+ fill: var(--mainLight);
178
+ }
178
179
  }
179
- }
180
- `,r(a)`
180
+ `,k=t=>e.createElement(f,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),I=t(r)`
181
181
  background: transparent;
182
182
  border: 1px solid transparent;
183
183
 
184
184
  span{
185
- color: ${r=>r.theme.background};
185
+ color: ${e=>e.theme.background};
186
186
  }
187
187
 
188
188
  svg{
189
- fill: ${r=>r.theme.background};
189
+ fill: ${e=>e.theme.background};
190
190
  }
191
191
 
192
192
  &:hover{
193
193
 
194
194
  span{
195
- color: ${r=>r.theme.low};
195
+ color: ${e=>e.theme.low};
196
196
  }
197
197
 
198
198
  svg{
199
- fill: ${r=>r.theme.low};
199
+ fill: ${e=>e.theme.low};
200
200
  }
201
201
  }
202
- `;const o=r.div`
203
- box-shadow: ${r=>r.theme.out};
202
+ `,x=t=>e.createElement(I,{size:t.size,onClick:t.onClick},t.buttonIconLeft?e.createElement(a,{Icon:t.buttonIconLeft}):null,t.buttonText?e.createElement("span",null,t.buttonText):null,t.buttonIconRight?e.createElement(a,{Icon:t.buttonIconRight}):null),E=t.div`
203
+ box-shadow: ${e=>e.theme.out};
204
204
  border-radius: var(--smallRadius);
205
205
  transition: box-shadow .5s;
206
206
  overflow: hidden;
@@ -221,23 +221,23 @@ svg{
221
221
  }
222
222
 
223
223
  &:hover{
224
- box-shadow: ${r=>r.theme.outFocus};
224
+ box-shadow: ${e=>e.theme.outFocus};
225
225
  transition: box-shadow .5s;
226
226
  }
227
- `,e=r(o)`
227
+ `,w=t(E)`
228
228
 
229
229
  header{
230
230
  display: flex;
231
231
  align-items: center;
232
232
  justify-content: center;
233
- background-color: ${r=>r.theme.low};
233
+ background-color: ${e=>e.theme.low};
234
234
 
235
235
  picture{
236
236
  height: 15rem;
237
237
  width: 15rem;
238
238
  border-radius: 50%;
239
239
  overflow: hidden;
240
- background-color: ${r=>r.theme.mid};
240
+ background-color: ${e=>e.theme.mid};
241
241
  display: flex;
242
242
  align-items: center;
243
243
  justify-content: center;
@@ -255,7 +255,7 @@ svg{
255
255
  align-items: center;
256
256
  justify-content: center;
257
257
  }
258
- `;r(o)`
258
+ `;t(E)`
259
259
  cursor: pointer;
260
260
 
261
261
  header{
@@ -296,7 +296,7 @@ svg{
296
296
  padding: 1rem 2rem;
297
297
 
298
298
  h5,h3{
299
- text-align: ${r=>r.center?"center":"left"};
299
+ text-align: ${e=>e.center?"center":"left"};
300
300
  }
301
301
 
302
302
  ul{
@@ -317,12 +317,12 @@ svg{
317
317
  padding: 1rem 0;
318
318
  }
319
319
  }
320
- `;const i=r.input`
320
+ `;const y=t.input`
321
321
  width: 100%;
322
322
  border: none;
323
- background: ${r=>r.theme.background};
324
- color: ${r=>r.theme.color};
325
- box-shadow: ${r=>r.theme.in};
323
+ background: ${e=>e.theme.background};
324
+ color: ${e=>e.theme.color};
325
+ box-shadow: ${e=>e.theme.in};
326
326
  border-radius: var(--smallRadius);
327
327
  transition-property: box-shadow;
328
328
  transition-duration: .5s;
@@ -336,15 +336,15 @@ svg{
336
336
 
337
337
  &:focus{
338
338
  outline: 0;
339
- box-shadow: ${r=>r.theme.inFocus};
339
+ box-shadow: ${e=>e.theme.inFocus};
340
340
  }
341
- `,t=r.label`
342
- color: ${r=>r.theme.color};
343
- `;r(i)`
341
+ `,L=t.label`
342
+ color: ${e=>e.theme.color};
343
+ `,$=t(y)`
344
344
  padding-top: 3rem;
345
- `,r(t)`
345
+ `,z=t(L)`
346
346
  font-size: var(--smallText);
347
- `,r.div`
347
+ `,R=t.div`
348
348
  position: relative;
349
349
 
350
350
  label{
@@ -396,4 +396,4 @@ svg{
396
396
  display: none;
397
397
  }
398
398
  }
399
- `;export{e as CardButton};
399
+ `,T=t=>e.createElement(R,null,e.createElement($,{placeholder:t.placeholder}),e.createElement(z,null,t.placeholder));export{w as CardButton,o as Cta_,i as Edit_,s as Focus_,u as Focus_Plain,T as Form_Input,h as Grey_,b as Grey_Link,v as Main_,k as Main_Plain,x as White_Plain};
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";function r(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}Object.defineProperty(exports,"__esModule",{value:!0}),require("react");var a=r(require("styled-components"));const e=a.default.button`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e),n=a(t);const o=n.default.button`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  gap: 1rem;
@@ -7,25 +7,25 @@
7
7
  cursor: pointer;
8
8
  transition-property: background, border;
9
9
  transition-duration: .5s;
10
- padding: ${r=>"noPads"===r.pads?"0":"small"===r.size?"var(--smallPads)":"large"===r.size?"var(--largePads)":"var(--normalPads)"};
10
+ padding: ${e=>"noPads"===e.pads?"0":"small"===e.size?"var(--smallPads)":"large"===e.size?"var(--largePads)":"var(--normalPads)"};
11
11
 
12
12
  svg{
13
13
  transition-property: fill;
14
14
  transition-duration: .5s;
15
- width: ${r=>"small"===r.size?"var(--smallIcon)":"large"===r.size?"var(--largeIcon)":"var(--normalIcon)"};
15
+ width: ${e=>"small"===e.size?"var(--smallIcon)":"large"===e.size?"var(--largeIcon)":"var(--normalIcon)"};
16
16
  }
17
17
 
18
18
  span{
19
19
  white-space: nowrap;
20
20
  transition-property: color;
21
21
  transition-duration: .5s;
22
- font-size: ${r=>"small"===r.size?"var(--smallText)":"large"===r.size?"var(--largeText)":"var(--normalText)"};
22
+ font-size: ${e=>"small"===e.size?"var(--smallText)":"large"===e.size?"var(--largeText)":"var(--normalText)"};
23
23
  }
24
24
 
25
25
  &:active{
26
26
  transform: scale(.97);
27
27
  }
28
- `;a.default(e)`
28
+ `,l=n.default(o)`
29
29
  background: linear-gradient(to right, var(--focus) -50%, var(--main) 150%);
30
30
  border-radius: var(--normalRadius);
31
31
 
@@ -36,8 +36,8 @@
36
36
  &:hover{
37
37
  background: linear-gradient(to right, var(--focus) -80%, var(--main) 120%);
38
38
  }
39
- `,a.default(e)`
40
- background: ${r=>r.theme.background};
39
+ `;function i(e){return e.Icon,React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 323.35 324.14"},React.createElement("g",{"data-name":"Layer 2"},React.createElement("g",{"data-name":"Layer 1"},React.createElement("path",{d:"M85.67 167.78c11.46-11.7 23.12-23.58 34.76-35.49 4.15-4.24 8.62-6.81 14.46-3.06 7 4.48 7.53 11.3.83 18-11.81 11.79-23.93 23.25-35.57 34.51l41.29 40.78c10.92-11 22.55-22.85 34.39-34.51 6.9-6.79 13.45-6.6 18.13.14 4.27 6.17 1.3 10.86-3.19 15.27-11.65 11.46-23.28 23-34.76 34.29 10.11 14.86 10.11 14.86-1.91 26.87q-4.71 4.71-9.42 9.41c-25.59 25.45-53.14 30-85.84 14.09-.89-.43-1.87-.67-4.17-1.48l-35 37.55L0 304.52l35.46-33.29c-3.5-14.79-7.62-26.43-8.76-38.35-1.91-20.16 6-37.35 20.26-51.6q6.16-6.15 12.31-12.32c11.86-11.85 11.86-11.85 26.4-1.18ZM267.71 38l35.77-38 19.87 20.11c-10.19 9.76-20.6 20-31.39 29.9-4.65 4.25-5.74 7.49-2.6 13.79 13.3 26.62 8.35 56.13-12.18 77.6-6.14 6.42-12.55 12.57-18.82 18.86-5.35 5.37-10.6 5.33-16 0-26.31-26.34-52.82-52.48-78.73-79.19-2.67-2.75-4.2-11-2.29-13.11 15.4-16.71 29.81-35.06 54.26-39.72 18.32-3.54 35.18.11 52.11 9.76Z"}))))}const c=n.default(o)`
40
+ background: ${e=>e.theme.background};
41
41
  border: 1px solid var(--main);
42
42
  border-radius: var(--normalRadius);
43
43
  padding: 1rem ;
@@ -60,23 +60,23 @@
60
60
  color: var(--mainLight);
61
61
  }
62
62
  }
63
- `,a.default(e)`
63
+ `,s=n.default(o)`
64
64
  background: var(--focus);
65
65
  border-radius: var(--normalRadius);
66
66
  border: 1px solid var(--focus);
67
67
 
68
68
  span{
69
- color: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
69
+ color: ${e=>"dark"===e.theme?"var(--dark)":"var(--white)"};
70
70
  }
71
71
 
72
72
  svg{
73
- fill: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
73
+ fill: ${e=>"dark"===e.theme?"var(--dark)":"var(--white)"};
74
74
  }
75
75
 
76
76
  &:hover{
77
77
  background: var(--focusLight);
78
78
  }
79
- `,a.default(e)`
79
+ `,d=n.default(o)`
80
80
  background: transparent;
81
81
  border: 1px solid transparent;
82
82
 
@@ -98,24 +98,24 @@
98
98
  fill: var(--focusLight);
99
99
  }
100
100
  }
101
- `,a.default(e)`
102
- background: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
103
- border: 1px solid ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
101
+ `,u=n.default(o)`
102
+ background: ${e=>"dark"===e.theme?"var(--gloom)":"var(--grey)"};
103
+ border: 1px solid ${e=>"dark"===e.theme?"var(--gloom)":"var(--grey)"};
104
104
  border-radius: var(--normalRadius);
105
105
 
106
106
  span{
107
- color: ${r=>"dark"===r.theme?"var(--red)":"var(--black)"};
107
+ color: ${e=>"dark"===e.theme?"var(--red)":"var(--black)"};
108
108
  }
109
109
 
110
110
  svg{
111
- fill: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
111
+ fill: ${e=>"dark"===e.theme?"var(--blanc)":"var(--black)"};
112
112
  }
113
113
 
114
114
  &:hover{
115
- background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
116
- border: 1px solid ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
115
+ background: ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyLight)"};
116
+ border: 1px solid ${e=>"dark"===e.theme?"var(--gloomDark)":"var(--greyLight)"};
117
117
  }
118
- `,a.default(e)`
118
+ `,m=n.default(o)`
119
119
  background: transparent;
120
120
  border: 1px solid transparent;
121
121
 
@@ -131,14 +131,14 @@
131
131
  &:hover{
132
132
 
133
133
  span{
134
- color: ${r=>r.theme.low};
134
+ color: ${e=>e.theme.low};
135
135
  }
136
136
 
137
137
  svg{
138
- fill: ${r=>r.theme.low};
138
+ fill: ${e=>e.theme.low};
139
139
  }
140
140
  }
141
- `,a.default(e)`
141
+ `,f=n.default(o)`
142
142
  background: var(--main);
143
143
  border-radius: var(--normalRadius);
144
144
  border: 1px solid var(--main);
@@ -155,52 +155,52 @@
155
155
  background: var(--mainLight);
156
156
  border: 1px solid var(--mainLight);
157
157
  }
158
- `,a.default(e)`
159
- background: transparent;
160
- border: 1px solid transparent;
161
-
162
- span{
163
- color: var(--main);
164
- }
165
-
166
- svg{
167
- fill: var(--main);
168
- }
169
-
170
- &:hover{
158
+ `,h=n.default(o)`
159
+ background: transparent;
160
+ border: 1px solid transparent;
171
161
 
172
162
  span{
173
- color: var(--mainLight);
163
+ color: var(--main);
174
164
  }
175
165
 
176
166
  svg{
177
- fill: var(--mainLight);
167
+ fill: var(--main);
168
+ }
169
+
170
+ &:hover{
171
+
172
+ span{
173
+ color: var(--mainLight);
174
+ }
175
+
176
+ svg{
177
+ fill: var(--mainLight);
178
+ }
178
179
  }
179
- }
180
- `,a.default(e)`
180
+ `,p=n.default(o)`
181
181
  background: transparent;
182
182
  border: 1px solid transparent;
183
183
 
184
184
  span{
185
- color: ${r=>r.theme.background};
185
+ color: ${e=>e.theme.background};
186
186
  }
187
187
 
188
188
  svg{
189
- fill: ${r=>r.theme.background};
189
+ fill: ${e=>e.theme.background};
190
190
  }
191
191
 
192
192
  &:hover{
193
193
 
194
194
  span{
195
- color: ${r=>r.theme.low};
195
+ color: ${e=>e.theme.low};
196
196
  }
197
197
 
198
198
  svg{
199
- fill: ${r=>r.theme.low};
199
+ fill: ${e=>e.theme.low};
200
200
  }
201
201
  }
202
- `;const o=a.default.div`
203
- box-shadow: ${r=>r.theme.out};
202
+ `,g=n.default.div`
203
+ box-shadow: ${e=>e.theme.out};
204
204
  border-radius: var(--smallRadius);
205
205
  transition: box-shadow .5s;
206
206
  overflow: hidden;
@@ -221,23 +221,23 @@ svg{
221
221
  }
222
222
 
223
223
  &:hover{
224
- box-shadow: ${r=>r.theme.outFocus};
224
+ box-shadow: ${e=>e.theme.outFocus};
225
225
  transition: box-shadow .5s;
226
226
  }
227
- `,t=a.default(o)`
227
+ `,b=n.default(g)`
228
228
 
229
229
  header{
230
230
  display: flex;
231
231
  align-items: center;
232
232
  justify-content: center;
233
- background-color: ${r=>r.theme.low};
233
+ background-color: ${e=>e.theme.low};
234
234
 
235
235
  picture{
236
236
  height: 15rem;
237
237
  width: 15rem;
238
238
  border-radius: 50%;
239
239
  overflow: hidden;
240
- background-color: ${r=>r.theme.mid};
240
+ background-color: ${e=>e.theme.mid};
241
241
  display: flex;
242
242
  align-items: center;
243
243
  justify-content: center;
@@ -255,7 +255,7 @@ svg{
255
255
  align-items: center;
256
256
  justify-content: center;
257
257
  }
258
- `;a.default(o)`
258
+ `;n.default(g)`
259
259
  cursor: pointer;
260
260
 
261
261
  header{
@@ -296,7 +296,7 @@ svg{
296
296
  padding: 1rem 2rem;
297
297
 
298
298
  h5,h3{
299
- text-align: ${r=>r.center?"center":"left"};
299
+ text-align: ${e=>e.center?"center":"left"};
300
300
  }
301
301
 
302
302
  ul{
@@ -317,12 +317,12 @@ svg{
317
317
  padding: 1rem 0;
318
318
  }
319
319
  }
320
- `;const i=a.default.input`
320
+ `;const v=n.default.input`
321
321
  width: 100%;
322
322
  border: none;
323
- background: ${r=>r.theme.background};
324
- color: ${r=>r.theme.color};
325
- box-shadow: ${r=>r.theme.in};
323
+ background: ${e=>e.theme.background};
324
+ color: ${e=>e.theme.color};
325
+ box-shadow: ${e=>e.theme.in};
326
326
  border-radius: var(--smallRadius);
327
327
  transition-property: box-shadow;
328
328
  transition-duration: .5s;
@@ -336,15 +336,15 @@ svg{
336
336
 
337
337
  &:focus{
338
338
  outline: 0;
339
- box-shadow: ${r=>r.theme.inFocus};
339
+ box-shadow: ${e=>e.theme.inFocus};
340
340
  }
341
- `,n=a.default.label`
342
- color: ${r=>r.theme.color};
343
- `;a.default(i)`
341
+ `,k=n.default.label`
342
+ color: ${e=>e.theme.color};
343
+ `,x=n.default(v)`
344
344
  padding-top: 3rem;
345
- `,a.default(n)`
345
+ `,I=n.default(k)`
346
346
  font-size: var(--smallText);
347
- `,a.default.div`
347
+ `,E=n.default.div`
348
348
  position: relative;
349
349
 
350
350
  label{
@@ -396,4 +396,4 @@ svg{
396
396
  display: none;
397
397
  }
398
398
  }
399
- `,exports.CardButton=t;
399
+ `;exports.CardButton=b,exports.Cta_=e=>r.default.createElement(l,{size:e.size,onClick:e.onClick},r.default.createElement("span",null,e.buttonText)),exports.Edit_=e=>r.default.createElement(c,{size:"normal",onClick:e.onClick},r.default.createElement(i,{Icon:e.buttonIcon})),exports.Focus_=e=>r.default.createElement(s,{size:e.size,onClick:e.onClick},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null),exports.Focus_Plain=e=>r.default.createElement(d,{size:e.size,onClick:e.onClick,onFocus:e.onFocus},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null),exports.Form_Input=e=>r.default.createElement(E,null,r.default.createElement(x,{placeholder:e.placeholder}),r.default.createElement(I,null,e.placeholder)),exports.Grey_=e=>r.default.createElement(u,{size:e.size,onClick:e.onClick},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null),exports.Grey_Link=e=>r.default.createElement(m,{size:e.size,onClick:e.onClick},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null),exports.Main_=e=>r.default.createElement(f,{className:e.className,size:e.size,onClick:e.onClick},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null),exports.Main_Plain=e=>r.default.createElement(h,{size:e.size,onClick:e.onClick},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null),exports.White_Plain=e=>r.default.createElement(p,{size:e.size,onClick:e.onClick},e.buttonIconLeft?r.default.createElement(i,{Icon:e.buttonIconLeft}):null,e.buttonText?r.default.createElement("span",null,e.buttonText):null,e.buttonIconRight?r.default.createElement(i,{Icon:e.buttonIconRight}):null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "monica-alexandria",
3
- "version": "2.8.0",
3
+ "version": "2.8.1",
4
4
  "description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/export/components/elements/button/Cta_.js CHANGED
@@ -15,10 +15,11 @@ const Cta = styled(Button)`
15
15
  }
16
16
  `
17
17
 
18
- export default function Cta_(props) {
18
+ export const Cta_ = (props) => {
19
19
  return (
20
20
  <Cta size={props.size} onClick={props.onClick}>
21
21
  <span>{props.buttonText}</span>
22
22
  </Cta>
23
23
  )
24
24
  }
25
+
package/src/export/components/elements/button/Edit_.js CHANGED
@@ -29,10 +29,11 @@ const Edit = styled(Button)`
29
29
  }
30
30
  `
31
31
 
32
- export default function Edit_(props) {
32
+ export const Edit_ = (props) => {
33
33
  return (
34
34
  <Edit size='normal' onClick={props.onClick}>
35
35
  <IconSvg Icon={props.buttonIcon} />
36
36
  </Edit>
37
37
  )
38
38
  }
39
+
package/src/export/components/elements/button/Focus_.js CHANGED
@@ -21,7 +21,7 @@ const Focus = styled(Button)`
21
21
  }
22
22
  `
23
23
 
24
- export default function Focus_(props) {
24
+ export const Focus_ = (props) => {
25
25
  return (
26
26
  <Focus size = {props.size} onClick={props.onClick}>
27
27
  {props.buttonIconLeft ?
@@ -42,3 +42,4 @@ export default function Focus_(props) {
42
42
  </Focus>
43
43
  )
44
44
  }
45
+
package/src/export/components/elements/button/Focus_Plain.js CHANGED
@@ -27,7 +27,7 @@ const FocusPlain = styled(Button)`
27
27
  }
28
28
  `
29
29
 
30
- export default function Focus_Plain(props) {
30
+ export const Focus_Plain = (props) => {
31
31
  return (
32
32
  <FocusPlain size = {props.size} onClick={props.onClick} onFocus={props.onFocus}>
33
33
  {props.buttonIconLeft ?
@@ -48,3 +48,4 @@ export default function Focus_Plain(props) {
48
48
  </FocusPlain>
49
49
  )
50
50
  }
51
+
package/src/export/components/elements/button/Grey_.js CHANGED
@@ -22,7 +22,7 @@ const Grey = styled(Button)`
22
22
  }
23
23
  `
24
24
 
25
- export default function Grey_(props) {
25
+ export const Grey_ = (props) => {
26
26
  return (
27
27
  <Grey size={props.size} onClick={props.onClick}>
28
28
  {props.buttonIconLeft ?
@@ -43,3 +43,4 @@ export default function Grey_(props) {
43
43
  </Grey>
44
44
  )
45
45
  }
46
+
package/src/export/components/elements/button/Grey_Link.js CHANGED
@@ -28,7 +28,7 @@ const GreyLink = styled(Button)`
28
28
  }
29
29
  `
30
30
 
31
- export default function Grey_Link(props) {
31
+ export const Grey_Link = (props) => {
32
32
  return (
33
33
  <GreyLink size={props.size} onClick={props.onClick}>
34
34
  {props.buttonIconLeft ?
@@ -49,3 +49,4 @@ export default function Grey_Link(props) {
49
49
  </GreyLink>
50
50
  )
51
51
  }
52
+
package/src/export/components/elements/button/Main_.js CHANGED
@@ -22,7 +22,7 @@ const Main = styled(Button)`
22
22
  }
23
23
  `
24
24
 
25
- export default function Main_(props) {
25
+ export const Main_ = (props) => {
26
26
  return (
27
27
  <Main className={props.className} size={props.size} onClick={props.onClick}>
28
28
  {props.buttonIconLeft ?
@@ -43,3 +43,4 @@ export default function Main_(props) {
43
43
  </Main>
44
44
  )
45
45
  }
46
+
package/src/export/components/elements/button/Main_Plain.js CHANGED
@@ -4,30 +4,30 @@ import IconSvg from '../../../../static/svg/IconSvg'
4
4
  import { Button } from '../../../helpers/Button'
5
5
 
6
6
  const MainPlain = styled(Button)`
7
- background: transparent;
8
- border: 1px solid transparent;
9
-
10
- span{
11
- color: var(--main);
12
- }
13
-
14
- svg{
15
- fill: var(--main);
16
- }
17
-
18
- &:hover{
7
+ background: transparent;
8
+ border: 1px solid transparent;
19
9
 
20
10
  span{
21
- color: var(--mainLight);
11
+ color: var(--main);
22
12
  }
23
13
 
24
14
  svg{
25
- fill: var(--mainLight);
15
+ fill: var(--main);
16
+ }
17
+
18
+ &:hover{
19
+
20
+ span{
21
+ color: var(--mainLight);
22
+ }
23
+
24
+ svg{
25
+ fill: var(--mainLight);
26
+ }
26
27
  }
27
- }
28
28
  `
29
29
 
30
- export default function Main_Plain(props) {
30
+ export const Main_Plain = (props) => {
31
31
  return (
32
32
  <MainPlain size={props.size} onClick={props.onClick}>
33
33
  {props.buttonIconLeft ?
@@ -48,3 +48,4 @@ export default function Main_Plain(props) {
48
48
  </MainPlain>
49
49
  )
50
50
  }
51
+
package/src/export/components/elements/button/White_Plain.js CHANGED
@@ -27,7 +27,7 @@ const WhitePlain = styled(Button)`
27
27
  }
28
28
  `
29
29
 
30
- export default function White_Plain(props) {
30
+ export const White_Plain = (props) => {
31
31
  return (
32
32
  <WhitePlain size={props.size} onClick={props.onClick}>
33
33
  {props.buttonIconLeft ?
@@ -48,3 +48,4 @@ export default function White_Plain(props) {
48
48
  </WhitePlain >
49
49
  )
50
50
  }
51
+
package/src/export/components/elements/card/Card_Button.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import styled from 'styled-components'
3
3
  import IconSvg from '../../../../static/svg/IconSvg'
4
4
  import { Card } from '../../../helpers/Card'
5
- import Focus_ from '../button/Focus_'
5
+ import { Focus_ } from '../button/Focus_'
6
6
 
7
7
  export const CardButton = styled(Card)`
8
8
 
package/src/export/components/forms/Form_Input.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { FormGroup, FormInput, FormLabel } from '../../styles/Form'
3
3
 
4
- export default function Form_Input(props) {
4
+ export const Form_Input = (props) => {
5
5
  return (
6
6
  <FormGroup>
7
7
  <FormInput placeholder={props.placeholder}/>
@@ -9,3 +9,4 @@ export default function Form_Input(props) {
9
9
  </FormGroup>
10
10
  )
11
11
  }
12
+