@app-studio/web 0.2.0 → 0.3.3
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/components/Form/Checkbox/Checkbox/Checkbox.props.d.ts +1 -1
- package/dist/components/Form/CountryPicker/CountryPicker/CountryPicker.props.d.ts +1 -1
- package/dist/components/Form/DatePicker/DatePicker/DatePicker.props.d.ts +1 -1
- package/dist/components/Form/Select/Select/Select.props.d.ts +1 -1
- package/dist/components/Form/Switch/Switch/Switch.props.d.ts +1 -1
- package/dist/components/Form/TextArea/TextArea/TextArea.props.d.ts +1 -1
- package/dist/components/Form/TextField/TextField/TextField.props.d.ts +1 -1
- package/dist/components/Layout/Input/FieldContent/FieldContent/FieldContent.props.d.ts +1 -1
- package/dist/components/Modal/Modal/Modal.props.d.ts +1 -1
- package/dist/web.cjs.development.js +187 -180
- package/dist/web.cjs.development.js.map +1 -1
- package/dist/web.cjs.production.min.js +1 -1
- package/dist/web.cjs.production.min.js.map +1 -1
- package/dist/web.esm.js +187 -180
- package/dist/web.esm.js.map +1 -1
- package/package.json +1 -2
package/dist/web.esm.js
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
import 'core-js/modules/es6.object.assign.js';
|
|
2
1
|
import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
|
|
3
2
|
import { View, Element, Typography, useTheme, Input } from 'app-studio';
|
|
4
3
|
export { View } from 'app-studio';
|
|
5
4
|
import { Link as Link$1 } from 'react-router-dom';
|
|
6
|
-
import 'core-js/modules/es6.array.map.js';
|
|
7
|
-
import 'core-js/modules/es6.array.filter.js';
|
|
8
|
-
import 'core-js/modules/es6.string.starts-with.js';
|
|
9
|
-
import 'core-js/modules/es6.array.slice.js';
|
|
10
5
|
import format from 'date-fns/format';
|
|
11
|
-
import '
|
|
12
|
-
import 'core-js/modules/es7.array.includes.js';
|
|
13
|
-
import { useModalStore } from './store/useModalStore';
|
|
6
|
+
import { useModalStore } from 'src/store/useModalStore';
|
|
14
7
|
|
|
15
8
|
var useButtonState = function useButtonState() {
|
|
16
9
|
var _React$useState = React.useState(false),
|
|
@@ -22,6 +15,20 @@ var useButtonState = function useButtonState() {
|
|
|
22
15
|
};
|
|
23
16
|
};
|
|
24
17
|
|
|
18
|
+
function _extends() {
|
|
19
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
20
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
21
|
+
var source = arguments[i];
|
|
22
|
+
for (var key in source) {
|
|
23
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
24
|
+
target[key] = source[key];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return target;
|
|
29
|
+
};
|
|
30
|
+
return _extends.apply(this, arguments);
|
|
31
|
+
}
|
|
25
32
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
26
33
|
if (source == null) return {};
|
|
27
34
|
var target = {};
|
|
@@ -55,7 +62,7 @@ var HorizontalView = function HorizontalView(_ref) {
|
|
|
55
62
|
_ref$isReversed = _ref.isReversed,
|
|
56
63
|
isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
|
|
57
64
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
58
|
-
return
|
|
65
|
+
return React.createElement(View, Object.assign({
|
|
59
66
|
display: "flex",
|
|
60
67
|
flexWrap: wrap,
|
|
61
68
|
flexDirection: isReversed ? 'row-reverse' : 'row',
|
|
@@ -67,7 +74,7 @@ var HorizontalView = function HorizontalView(_ref) {
|
|
|
67
74
|
* Horizontal layout aligns all the elements in a container on the horizontal axis.
|
|
68
75
|
*/
|
|
69
76
|
var HorizontalComponent = function HorizontalComponent(props) {
|
|
70
|
-
return
|
|
77
|
+
return React.createElement(HorizontalView, Object.assign({}, props));
|
|
71
78
|
};
|
|
72
79
|
var Horizontal = HorizontalComponent;
|
|
73
80
|
|
|
@@ -76,7 +83,7 @@ var CenterView = function CenterView(_ref) {
|
|
|
76
83
|
var children = _ref.children,
|
|
77
84
|
wrap = _ref.wrap,
|
|
78
85
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
79
|
-
return
|
|
86
|
+
return React.createElement(View, Object.assign({
|
|
80
87
|
display: "flex",
|
|
81
88
|
justifyContent: "center",
|
|
82
89
|
alignItems: "center",
|
|
@@ -88,7 +95,7 @@ var CenterView = function CenterView(_ref) {
|
|
|
88
95
|
* The Center component is a React functional component that provides a centered layout for its children using flexbox.
|
|
89
96
|
*/
|
|
90
97
|
var CenterComponent = function CenterComponent(props) {
|
|
91
|
-
return
|
|
98
|
+
return React.createElement(CenterView, Object.assign({}, props));
|
|
92
99
|
};
|
|
93
100
|
var Center = CenterComponent;
|
|
94
101
|
|
|
@@ -97,36 +104,36 @@ var ArrowDownSvg = function ArrowDownSvg(_ref) {
|
|
|
97
104
|
var _ref$size = _ref.size,
|
|
98
105
|
size = _ref$size === void 0 ? 64 : _ref$size,
|
|
99
106
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
100
|
-
return
|
|
107
|
+
return React.createElement(Center, {
|
|
101
108
|
width: size + "px",
|
|
102
109
|
height: size + "px"
|
|
103
|
-
},
|
|
110
|
+
}, React.createElement("svg", Object.assign({
|
|
104
111
|
viewBox: "0 -4.5 20 20",
|
|
105
112
|
version: "1.1",
|
|
106
113
|
fill: "#000000"
|
|
107
|
-
}, props),
|
|
114
|
+
}, props), React.createElement("g", {
|
|
108
115
|
id: "SVGRepo_bgCarrier",
|
|
109
116
|
strokeWidth: "0"
|
|
110
|
-
}),
|
|
117
|
+
}), React.createElement("g", {
|
|
111
118
|
id: "SVGRepo_tracerCarrier",
|
|
112
119
|
strokeLinecap: "round",
|
|
113
120
|
strokeLinejoin: "round"
|
|
114
|
-
}),
|
|
121
|
+
}), React.createElement("g", {
|
|
115
122
|
id: "SVGRepo_iconCarrier"
|
|
116
|
-
},
|
|
123
|
+
}, React.createElement("title", null, "arrow_down [#338]"), " ", React.createElement("desc", null, "Created with Sketch."), React.createElement("defs", null, " "), React.createElement("g", {
|
|
117
124
|
id: "Page-1",
|
|
118
125
|
stroke: "none",
|
|
119
126
|
strokeWidth: "1",
|
|
120
127
|
fill: "none",
|
|
121
128
|
fillRule: "evenodd"
|
|
122
|
-
},
|
|
129
|
+
}, React.createElement("g", {
|
|
123
130
|
id: "Dribbble-Light-Preview",
|
|
124
131
|
transform: "translate(-220.000000, -6684.000000)",
|
|
125
132
|
fill: "#000000"
|
|
126
|
-
},
|
|
133
|
+
}, React.createElement("g", {
|
|
127
134
|
id: "icons",
|
|
128
135
|
transform: "translate(56.000000, 160.000000)"
|
|
129
|
-
},
|
|
136
|
+
}, React.createElement("path", {
|
|
130
137
|
d: "M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583",
|
|
131
138
|
id: "arrow_down-[#338]"
|
|
132
139
|
})))))));
|
|
@@ -137,38 +144,38 @@ var ArrowUpSvg = function ArrowUpSvg(_ref) {
|
|
|
137
144
|
var _ref$size = _ref.size,
|
|
138
145
|
size = _ref$size === void 0 ? 64 : _ref$size,
|
|
139
146
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
140
|
-
return
|
|
147
|
+
return React.createElement(Center, {
|
|
141
148
|
width: size + "px",
|
|
142
149
|
height: size + "px"
|
|
143
|
-
},
|
|
150
|
+
}, React.createElement("svg", Object.assign({
|
|
144
151
|
width: size + "px",
|
|
145
152
|
height: size + "px",
|
|
146
153
|
viewBox: "0 -4.5 20 20",
|
|
147
154
|
version: "1.1",
|
|
148
155
|
fill: "#000000"
|
|
149
|
-
}, props),
|
|
156
|
+
}, props), React.createElement("g", {
|
|
150
157
|
id: "SVGRepo_bgCarrier",
|
|
151
158
|
strokeWidth: "0"
|
|
152
|
-
}),
|
|
159
|
+
}), React.createElement("g", {
|
|
153
160
|
id: "SVGRepo_tracerCarrier",
|
|
154
161
|
strokeLinecap: "round",
|
|
155
162
|
strokeLinejoin: "round"
|
|
156
|
-
}),
|
|
163
|
+
}), React.createElement("g", {
|
|
157
164
|
id: "SVGRepo_iconCarrier"
|
|
158
|
-
},
|
|
165
|
+
}, React.createElement("title", null, "arrow_up [#337]"), " ", React.createElement("desc", null, "Created with Sketch."), React.createElement("defs", null, " "), React.createElement("g", {
|
|
159
166
|
id: "Page-1",
|
|
160
167
|
stroke: "none",
|
|
161
168
|
strokeWidth: "1",
|
|
162
169
|
fill: "none",
|
|
163
170
|
fillRule: "evenodd"
|
|
164
|
-
},
|
|
171
|
+
}, React.createElement("g", {
|
|
165
172
|
id: "Dribbble-Light-Preview",
|
|
166
173
|
transform: "translate(-260.000000, -6684.000000)",
|
|
167
174
|
fill: "#000000"
|
|
168
|
-
},
|
|
175
|
+
}, React.createElement("g", {
|
|
169
176
|
id: "icons",
|
|
170
177
|
transform: "translate(56.000000, 160.000000)"
|
|
171
|
-
},
|
|
178
|
+
}, React.createElement("path", {
|
|
172
179
|
d: "M223.707692,6534.63378 L223.707692,6534.63378 C224.097436,6534.22888 224.097436,6533.57338 223.707692,6533.16951 L215.444127,6524.60657 C214.66364,6523.79781 213.397472,6523.79781 212.616986,6524.60657 L204.29246,6533.23165 C203.906714,6533.6324 203.901717,6534.27962 204.282467,6534.68555 C204.671211,6535.10081 205.31179,6535.10495 205.70653,6534.69695 L213.323521,6526.80297 C213.714264,6526.39807 214.346848,6526.39807 214.737591,6526.80297 L222.294621,6534.63378 C222.684365,6535.03868 223.317949,6535.03868 223.707692,6534.63378",
|
|
173
180
|
id: "arrow_up-[#337]"
|
|
174
181
|
})))))));
|
|
@@ -181,27 +188,27 @@ var CheckSvg = function CheckSvg(_ref) {
|
|
|
181
188
|
_ref$color = _ref.color,
|
|
182
189
|
color = _ref$color === void 0 ? 'white' : _ref$color,
|
|
183
190
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
184
|
-
return
|
|
191
|
+
return React.createElement(Center, {
|
|
185
192
|
width: size + "px",
|
|
186
193
|
height: size + "px"
|
|
187
|
-
},
|
|
194
|
+
}, React.createElement("svg", Object.assign({
|
|
188
195
|
width: size + "px",
|
|
189
196
|
height: size + "px",
|
|
190
197
|
viewBox: "0 0 24 24",
|
|
191
198
|
fill: "none",
|
|
192
199
|
xmlns: "http://www.w3.org/2000/svg"
|
|
193
|
-
}, props),
|
|
200
|
+
}, props), React.createElement("g", {
|
|
194
201
|
id: "SVGRepo_bgCarrier",
|
|
195
202
|
strokeWidth: "0"
|
|
196
|
-
}),
|
|
203
|
+
}), React.createElement("g", {
|
|
197
204
|
id: "SVGRepo_tracerCarrier",
|
|
198
205
|
strokeLinecap: "round",
|
|
199
206
|
strokeLinejoin: "round",
|
|
200
207
|
stroke: "#CCCCCC",
|
|
201
208
|
strokeWidth: "0.048"
|
|
202
|
-
}),
|
|
209
|
+
}), React.createElement("g", {
|
|
203
210
|
id: "SVGRepo_iconCarrier"
|
|
204
|
-
},
|
|
211
|
+
}, React.createElement("path", {
|
|
205
212
|
d: "M17.0001 9L10 16L7 13",
|
|
206
213
|
stroke: color,
|
|
207
214
|
strokeWidth: "1.5",
|
|
@@ -217,25 +224,25 @@ var CloseSvg = function CloseSvg(_ref) {
|
|
|
217
224
|
_ref$color = _ref.color,
|
|
218
225
|
color = _ref$color === void 0 ? 'white' : _ref$color,
|
|
219
226
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
220
|
-
return
|
|
227
|
+
return React.createElement(Center, {
|
|
221
228
|
width: size + "px",
|
|
222
229
|
height: size + "px"
|
|
223
|
-
},
|
|
230
|
+
}, React.createElement("svg", Object.assign({
|
|
224
231
|
width: size + "px",
|
|
225
232
|
height: size + "px",
|
|
226
233
|
viewBox: "0 0 1024 1024",
|
|
227
234
|
xmlns: "http://www.w3.org/2000/svg",
|
|
228
235
|
fill: "#000000"
|
|
229
|
-
}, props),
|
|
236
|
+
}, props), React.createElement("g", {
|
|
230
237
|
id: "SVGRepo_bgCarrier",
|
|
231
238
|
strokeWidth: "0"
|
|
232
|
-
}),
|
|
239
|
+
}), React.createElement("g", {
|
|
233
240
|
id: "SVGRepo_tracerCarrier",
|
|
234
241
|
strokeLinecap: "round",
|
|
235
242
|
strokeLinejoin: "round"
|
|
236
|
-
}),
|
|
243
|
+
}), React.createElement("g", {
|
|
237
244
|
id: "SVGRepo_iconCarrier"
|
|
238
|
-
},
|
|
245
|
+
}, React.createElement("path", {
|
|
239
246
|
fill: color,
|
|
240
247
|
d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
|
|
241
248
|
}))));
|
|
@@ -248,30 +255,30 @@ var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
|
|
|
248
255
|
_ref$color = _ref.color,
|
|
249
256
|
color = _ref$color === void 0 ? 'white' : _ref$color,
|
|
250
257
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
251
|
-
return
|
|
258
|
+
return React.createElement(Center, {
|
|
252
259
|
width: size + "px",
|
|
253
260
|
height: size + "px"
|
|
254
|
-
},
|
|
261
|
+
}, React.createElement("svg", Object.assign({
|
|
255
262
|
fill: color,
|
|
256
263
|
width: size + "px",
|
|
257
264
|
height: size + "px",
|
|
258
265
|
viewBox: "0 0 50 50",
|
|
259
266
|
xmlns: "http://www.w3.org/2000/svg",
|
|
260
267
|
stroke: color
|
|
261
|
-
}, props),
|
|
268
|
+
}, props), React.createElement("g", {
|
|
262
269
|
id: "SVGRepo_bgCarrier",
|
|
263
270
|
strokeWidth: "0"
|
|
264
|
-
}),
|
|
271
|
+
}), React.createElement("g", {
|
|
265
272
|
id: "SVGRepo_tracerCarrier",
|
|
266
273
|
strokeLinecap: "round",
|
|
267
274
|
strokeLinejoin: "round"
|
|
268
|
-
}),
|
|
275
|
+
}), React.createElement("g", {
|
|
269
276
|
id: "SVGRepo_iconCarrier"
|
|
270
|
-
},
|
|
277
|
+
}, React.createElement("path", {
|
|
271
278
|
d: "M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z"
|
|
272
|
-
}),
|
|
279
|
+
}), React.createElement("path", {
|
|
273
280
|
d: "M40 20h-2v-8h-8v-2h10z"
|
|
274
|
-
}),
|
|
281
|
+
}), React.createElement("path", {
|
|
275
282
|
d: "M35 38H15c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3h11v2H15c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V24h2v11c0 1.7-1.3 3-3 3z"
|
|
276
283
|
}))));
|
|
277
284
|
};
|
|
@@ -283,23 +290,23 @@ var IndeterminateSvg = function IndeterminateSvg(_ref) {
|
|
|
283
290
|
_ref$color = _ref.color,
|
|
284
291
|
color = _ref$color === void 0 ? 'white' : _ref$color,
|
|
285
292
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
286
|
-
return
|
|
293
|
+
return React.createElement(Center, {
|
|
287
294
|
width: size + "px",
|
|
288
295
|
height: size + "px"
|
|
289
|
-
},
|
|
296
|
+
}, React.createElement("svg", Object.assign({
|
|
290
297
|
viewBox: "0 0 24 24",
|
|
291
298
|
fill: "none",
|
|
292
299
|
xmlns: "http://www.w3.org/2000/svg"
|
|
293
|
-
}, props),
|
|
300
|
+
}, props), React.createElement("g", {
|
|
294
301
|
id: "SVGRepo_bgCarrier",
|
|
295
302
|
strokeWidth: "0"
|
|
296
|
-
}),
|
|
303
|
+
}), React.createElement("g", {
|
|
297
304
|
id: "SVGRepo_tracerCarrier",
|
|
298
305
|
strokeLinecap: "round",
|
|
299
306
|
strokeLinejoin: "round"
|
|
300
|
-
}),
|
|
307
|
+
}), React.createElement("g", {
|
|
301
308
|
id: "SVGRepo_iconCarrier"
|
|
302
|
-
},
|
|
309
|
+
}, React.createElement("path", {
|
|
303
310
|
d: "M7 12L17 12",
|
|
304
311
|
stroke: color,
|
|
305
312
|
strokeWidth: "1.5",
|
|
@@ -347,19 +354,19 @@ var LinkView = function LinkView(_ref) {
|
|
|
347
354
|
var handleHover = function handleHover() {
|
|
348
355
|
if (underline === 'hover') setIsHovered(true);
|
|
349
356
|
};
|
|
350
|
-
return
|
|
357
|
+
return React.createElement(Link$1, {
|
|
351
358
|
to: href,
|
|
352
359
|
target: isExternal ? '_blank' : '_self'
|
|
353
|
-
},
|
|
360
|
+
}, React.createElement(Element, Object.assign({
|
|
354
361
|
color: colorScheme,
|
|
355
362
|
onMouseEnter: handleHover,
|
|
356
363
|
onMouseLeave: handleHover,
|
|
357
364
|
textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
|
|
358
|
-
}, styles.text, props),
|
|
365
|
+
}, styles.text, props), React.createElement(Horizontal, {
|
|
359
366
|
gap: 3,
|
|
360
367
|
alignItems: "center",
|
|
361
368
|
wrap: "nowrap"
|
|
362
|
-
}, children, isExternal &&
|
|
369
|
+
}, children, isExternal && React.createElement(ExternalLinkSvg, {
|
|
363
370
|
color: colorScheme,
|
|
364
371
|
size: IconSizes[iconSize],
|
|
365
372
|
style: styles.icon
|
|
@@ -368,7 +375,7 @@ var LinkView = function LinkView(_ref) {
|
|
|
368
375
|
|
|
369
376
|
var LinkComponent = function LinkComponent(props) {
|
|
370
377
|
var linkStates = useLinkState();
|
|
371
|
-
return
|
|
378
|
+
return React.createElement(LinkView, Object.assign({}, linkStates, props));
|
|
372
379
|
};
|
|
373
380
|
/**
|
|
374
381
|
* Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
|
|
@@ -533,8 +540,8 @@ var ButtonView = function ButtonView(_ref) {
|
|
|
533
540
|
var changePadding = {
|
|
534
541
|
padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
|
|
535
542
|
};
|
|
536
|
-
var content =
|
|
537
|
-
return
|
|
543
|
+
var content = React.createElement(React.Fragment, null, icon && iconPosition === 'left' && !isLoader && icon, children, icon && iconPosition === 'right' && !isLoader && icon);
|
|
544
|
+
return React.createElement(Element, Object.assign({
|
|
538
545
|
gap: 8,
|
|
539
546
|
as: "button",
|
|
540
547
|
role: "button",
|
|
@@ -548,7 +555,7 @@ var ButtonView = function ButtonView(_ref) {
|
|
|
548
555
|
borderRadius: ButtonShapes[shape],
|
|
549
556
|
onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
|
|
550
557
|
cursor: isActive ? 'pointer' : 'default'
|
|
551
|
-
}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ?
|
|
558
|
+
}, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? React.createElement(Link, {
|
|
552
559
|
href: externalHref,
|
|
553
560
|
textDecorationColor: colorScheme,
|
|
554
561
|
colorScheme: colorScheme,
|
|
@@ -563,7 +570,7 @@ var ButtonComponent = function ButtonComponent(props) {
|
|
|
563
570
|
var handleHover = function handleHover() {
|
|
564
571
|
return setIsHovered(!isHovered);
|
|
565
572
|
};
|
|
566
|
-
return
|
|
573
|
+
return React.createElement(ButtonView, Object.assign({
|
|
567
574
|
onMouseEnter: handleHover,
|
|
568
575
|
onMouseLeave: handleHover,
|
|
569
576
|
filter: isHovered ? 'brightness(0.85)' : 'brightness(1)'
|
|
@@ -640,7 +647,7 @@ var LabelView = function LabelView(_ref) {
|
|
|
640
647
|
size = _ref$size === void 0 ? 'sm' : _ref$size,
|
|
641
648
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
642
649
|
var headingStyles = heading ? HeadingSizes[heading] : {};
|
|
643
|
-
return
|
|
650
|
+
return React.createElement(Element, Object.assign({
|
|
644
651
|
as: "label",
|
|
645
652
|
width: "100%",
|
|
646
653
|
fontSize: size,
|
|
@@ -651,7 +658,7 @@ var LabelView = function LabelView(_ref) {
|
|
|
651
658
|
};
|
|
652
659
|
|
|
653
660
|
var LabelComponent = function LabelComponent(props) {
|
|
654
|
-
return
|
|
661
|
+
return React.createElement(LabelView, Object.assign({}, props));
|
|
655
662
|
};
|
|
656
663
|
var Label = LabelComponent;
|
|
657
664
|
|
|
@@ -760,7 +767,7 @@ var CheckboxView = function CheckboxView(_ref) {
|
|
|
760
767
|
}
|
|
761
768
|
};
|
|
762
769
|
var checkboxStyle = {
|
|
763
|
-
container:
|
|
770
|
+
container: _extends({
|
|
764
771
|
gap: 10,
|
|
765
772
|
display: 'flex',
|
|
766
773
|
alignItems: 'center',
|
|
@@ -769,7 +776,7 @@ var CheckboxView = function CheckboxView(_ref) {
|
|
|
769
776
|
color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
|
|
770
777
|
cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
|
|
771
778
|
}, styles['label']),
|
|
772
|
-
checkbox:
|
|
779
|
+
checkbox: _extends({}, isDisabled ? {
|
|
773
780
|
backgroundColor: 'theme.disabled'
|
|
774
781
|
} : (isChecked || isSelected) && !isIndeterminate || isIndeterminate ? {
|
|
775
782
|
backgroundColor: colorScheme
|
|
@@ -782,21 +789,21 @@ var CheckboxView = function CheckboxView(_ref) {
|
|
|
782
789
|
filter: isHovered ? 'brightness(0.9)' : undefined
|
|
783
790
|
}, Sizes[size], shadow, styles['checkbox'])
|
|
784
791
|
};
|
|
785
|
-
return
|
|
792
|
+
return React.createElement(Label, Object.assign({
|
|
786
793
|
htmlFor: id,
|
|
787
794
|
as: "div",
|
|
788
795
|
onClick: handleChange,
|
|
789
796
|
onMouseEnter: handleHover,
|
|
790
797
|
onMouseLeave: handleHover,
|
|
791
798
|
size: Typography.fontSizes[size]
|
|
792
|
-
}, checkboxStyle.container, props),
|
|
799
|
+
}, checkboxStyle.container, props), React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React.createElement(CheckSvg, {
|
|
793
800
|
size: IconSizes$2[size]
|
|
794
801
|
}))), label);
|
|
795
802
|
};
|
|
796
803
|
|
|
797
804
|
var CheckboxComponent = function CheckboxComponent(props) {
|
|
798
805
|
var checkboxStates = useCheckboxState(props);
|
|
799
|
-
return
|
|
806
|
+
return React.createElement(CheckboxView, Object.assign({}, checkboxStates, props));
|
|
800
807
|
};
|
|
801
808
|
/**
|
|
802
809
|
* Checkbox allows users to select one or more options from a list of choices.
|
|
@@ -2299,7 +2306,7 @@ var VerticalView = function VerticalView(_ref) {
|
|
|
2299
2306
|
_ref$isReversed = _ref.isReversed,
|
|
2300
2307
|
isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
|
|
2301
2308
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
2302
|
-
return
|
|
2309
|
+
return React.createElement(View, Object.assign({
|
|
2303
2310
|
display: "flex",
|
|
2304
2311
|
flexWrap: wrap,
|
|
2305
2312
|
flexDirection: isReversed ? 'column-reverse' : 'column',
|
|
@@ -2311,7 +2318,7 @@ var VerticalView = function VerticalView(_ref) {
|
|
|
2311
2318
|
* Vertical layout aligns all the elements in a container on the vertical axis.
|
|
2312
2319
|
*/
|
|
2313
2320
|
var VerticalComponent = function VerticalComponent(props) {
|
|
2314
|
-
return
|
|
2321
|
+
return React.createElement(VerticalView, Object.assign({}, props));
|
|
2315
2322
|
};
|
|
2316
2323
|
var Vertical = VerticalComponent;
|
|
2317
2324
|
|
|
@@ -2353,7 +2360,7 @@ var TextContent = function TextContent(_ref) {
|
|
|
2353
2360
|
var children = _ref.children,
|
|
2354
2361
|
isSub = _ref.isSub,
|
|
2355
2362
|
isSup = _ref.isSup;
|
|
2356
|
-
return
|
|
2363
|
+
return React.createElement(React.Fragment, null, typeof children === 'string' ? React.createElement(React.Fragment, null, isSub && React.createElement("sup", null, children), isSup && React.createElement("sup", null, children), !isSub && !isSup && React.createElement(React.Fragment, null, children)) : children);
|
|
2357
2364
|
};
|
|
2358
2365
|
var TruncateText = function TruncateText(_ref2) {
|
|
2359
2366
|
var text = _ref2.text,
|
|
@@ -2381,7 +2388,7 @@ var TruncateText = function TruncateText(_ref2) {
|
|
|
2381
2388
|
setContent(textContent);
|
|
2382
2389
|
}
|
|
2383
2390
|
}, [maxLines, text, containerRef, content]);
|
|
2384
|
-
return
|
|
2391
|
+
return React.createElement("div", {
|
|
2385
2392
|
ref: containerRef
|
|
2386
2393
|
}, content);
|
|
2387
2394
|
};
|
|
@@ -2411,24 +2418,24 @@ var TextView = function TextView(_ref3) {
|
|
|
2411
2418
|
display: 'inline'
|
|
2412
2419
|
} : {};
|
|
2413
2420
|
var fontSize = Typography.fontSizes[size];
|
|
2414
|
-
return
|
|
2421
|
+
return React.createElement(Element, Object.assign({
|
|
2415
2422
|
role: "text",
|
|
2416
2423
|
fontSize: fontSize,
|
|
2417
2424
|
lineHeight: Typography.lineHeights[size],
|
|
2418
2425
|
fontStyle: isItalic ? 'italic' : 'normal',
|
|
2419
2426
|
fontWeight: Typography.fontWeights[weight],
|
|
2420
2427
|
textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
|
|
2421
|
-
}, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ?
|
|
2428
|
+
}, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? React.createElement(TruncateText, {
|
|
2422
2429
|
text: children,
|
|
2423
2430
|
maxLines: maxLines
|
|
2424
|
-
}) :
|
|
2431
|
+
}) : React.createElement(TextContent, Object.assign({
|
|
2425
2432
|
isSub: isSub,
|
|
2426
2433
|
isSup: isSup
|
|
2427
2434
|
}, props), children));
|
|
2428
2435
|
};
|
|
2429
2436
|
|
|
2430
2437
|
var TextComponent = function TextComponent(props) {
|
|
2431
|
-
return
|
|
2438
|
+
return React.createElement(TextView, Object.assign({}, props));
|
|
2432
2439
|
};
|
|
2433
2440
|
/**
|
|
2434
2441
|
* The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
|
|
@@ -2445,7 +2452,7 @@ var HelperText = function HelperText(_ref) {
|
|
|
2445
2452
|
_ref$error = _ref.error,
|
|
2446
2453
|
error = _ref$error === void 0 ? false : _ref$error,
|
|
2447
2454
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
2448
|
-
return
|
|
2455
|
+
return React.createElement(Text, Object.assign({
|
|
2449
2456
|
size: "xs",
|
|
2450
2457
|
marginVertical: 0,
|
|
2451
2458
|
marginHorizontal: 0,
|
|
@@ -2461,10 +2468,10 @@ var FieldContainer = function FieldContainer(_ref) {
|
|
|
2461
2468
|
error = _ref$error === void 0 ? false : _ref$error,
|
|
2462
2469
|
styles = _ref.styles,
|
|
2463
2470
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
|
|
2464
|
-
return
|
|
2471
|
+
return React.createElement(Vertical, Object.assign({
|
|
2465
2472
|
gap: 5,
|
|
2466
2473
|
position: "relative"
|
|
2467
|
-
}, props), children, helperText &&
|
|
2474
|
+
}, props), children, helperText && React.createElement(HelperText, Object.assign({
|
|
2468
2475
|
error: error
|
|
2469
2476
|
}, styles), helperText));
|
|
2470
2477
|
};
|
|
@@ -2549,7 +2556,7 @@ var FieldContent = function FieldContent(_ref) {
|
|
|
2549
2556
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
2550
2557
|
var isInteractive = (isHovered || isFocused) && !isDisabled;
|
|
2551
2558
|
var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
|
|
2552
|
-
return
|
|
2559
|
+
return React.createElement(Horizontal, Object.assign({
|
|
2553
2560
|
gap: 10,
|
|
2554
2561
|
width: "100%",
|
|
2555
2562
|
display: "flex",
|
|
@@ -2570,7 +2577,7 @@ var _excluded$h = ["children"];
|
|
|
2570
2577
|
var FieldIcons = function FieldIcons(_ref) {
|
|
2571
2578
|
var children = _ref.children,
|
|
2572
2579
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
2573
|
-
return
|
|
2580
|
+
return React.createElement(Center, Object.assign({
|
|
2574
2581
|
gap: 10,
|
|
2575
2582
|
top: "50%",
|
|
2576
2583
|
right: 16,
|
|
@@ -2595,7 +2602,7 @@ var FieldLabel = function FieldLabel(_ref) {
|
|
|
2595
2602
|
label: {}
|
|
2596
2603
|
} : _ref$styles,
|
|
2597
2604
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
2598
|
-
return
|
|
2605
|
+
return React.createElement(Label, Object.assign({
|
|
2599
2606
|
top: 4,
|
|
2600
2607
|
zIndex: 1000,
|
|
2601
2608
|
lineHeight: 15,
|
|
@@ -2611,7 +2618,7 @@ var _excluded$j = ["children"];
|
|
|
2611
2618
|
var FieldWrapper = function FieldWrapper(_ref) {
|
|
2612
2619
|
var children = _ref.children,
|
|
2613
2620
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
|
|
2614
|
-
return
|
|
2621
|
+
return React.createElement(Vertical, Object.assign({
|
|
2615
2622
|
width: "100%"
|
|
2616
2623
|
}, props), children);
|
|
2617
2624
|
};
|
|
@@ -2626,17 +2633,17 @@ var IconSizes$3 = {
|
|
|
2626
2633
|
|
|
2627
2634
|
var _excluded$k = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
|
|
2628
2635
|
var CountryList = function CountryList(props) {
|
|
2629
|
-
return
|
|
2636
|
+
return React.createElement(Element, Object.assign({
|
|
2630
2637
|
as: "ul"
|
|
2631
2638
|
}, props));
|
|
2632
2639
|
};
|
|
2633
2640
|
var CountrySelector = function CountrySelector(props) {
|
|
2634
|
-
return
|
|
2641
|
+
return React.createElement(Input, Object.assign({
|
|
2635
2642
|
type: "country"
|
|
2636
2643
|
}, props));
|
|
2637
2644
|
};
|
|
2638
2645
|
var CountryItem = function CountryItem(props) {
|
|
2639
|
-
return
|
|
2646
|
+
return React.createElement(Element, Object.assign({
|
|
2640
2647
|
as: "li"
|
|
2641
2648
|
}, props));
|
|
2642
2649
|
};
|
|
@@ -2660,7 +2667,7 @@ var DropDownItem = function DropDownItem(_ref) {
|
|
|
2660
2667
|
var handleHover = function handleHover() {
|
|
2661
2668
|
return setIsHovered(!isHovered);
|
|
2662
2669
|
};
|
|
2663
|
-
return
|
|
2670
|
+
return React.createElement(CountryItem, Object.assign({
|
|
2664
2671
|
margin: 0,
|
|
2665
2672
|
role: "DropDownItem",
|
|
2666
2673
|
listStyleType: "none",
|
|
@@ -2685,7 +2692,7 @@ var DropDown = function DropDown(_ref2) {
|
|
|
2685
2692
|
var handleCallback = function handleCallback(option) {
|
|
2686
2693
|
return callback(option);
|
|
2687
2694
|
};
|
|
2688
|
-
return
|
|
2695
|
+
return React.createElement(CountryList, Object.assign({
|
|
2689
2696
|
role: "dropDown",
|
|
2690
2697
|
margin: 0,
|
|
2691
2698
|
padding: 0,
|
|
@@ -2701,7 +2708,7 @@ var DropDown = function DropDown(_ref2) {
|
|
|
2701
2708
|
backgroundColor: "white",
|
|
2702
2709
|
boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
|
|
2703
2710
|
}, styles['dropDown']), options.map(function (option) {
|
|
2704
|
-
return
|
|
2711
|
+
return React.createElement(DropDownItem, Object.assign({
|
|
2705
2712
|
key: option.code,
|
|
2706
2713
|
size: size,
|
|
2707
2714
|
option: option.name,
|
|
@@ -2801,7 +2808,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
|
|
|
2801
2808
|
if (onChange) onChange(selected); // Call onChange when selectedCountry changes
|
|
2802
2809
|
}, [onChange, selected]);
|
|
2803
2810
|
var isWithLabel = !!(isFocused && label);
|
|
2804
|
-
var fieldStyles =
|
|
2811
|
+
var fieldStyles = _extends({
|
|
2805
2812
|
margin: 0,
|
|
2806
2813
|
paddingVerical: 8,
|
|
2807
2814
|
paddingHorizonatl: 0,
|
|
@@ -2818,12 +2825,12 @@ var CountryPickerView = function CountryPickerView(_ref3) {
|
|
|
2818
2825
|
color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
|
|
2819
2826
|
cursor: isDisabled ? 'not-allowed' : 'auto'
|
|
2820
2827
|
}, styles['field']);
|
|
2821
|
-
return
|
|
2828
|
+
return React.createElement(FieldContainer, {
|
|
2822
2829
|
helperText: helperText,
|
|
2823
2830
|
error: error,
|
|
2824
2831
|
styles: styles,
|
|
2825
2832
|
onClick: handleClick
|
|
2826
|
-
},
|
|
2833
|
+
}, React.createElement(FieldContent, {
|
|
2827
2834
|
label: label,
|
|
2828
2835
|
size: size,
|
|
2829
2836
|
error: error,
|
|
@@ -2841,11 +2848,11 @@ var CountryPickerView = function CountryPickerView(_ref3) {
|
|
|
2841
2848
|
colorScheme: colorScheme,
|
|
2842
2849
|
onMouseEnter: handleHover,
|
|
2843
2850
|
onMouseLeave: handleHover
|
|
2844
|
-
},
|
|
2851
|
+
}, React.createElement(FieldWrapper, null, isWithLabel && React.createElement(FieldLabel, Object.assign({
|
|
2845
2852
|
htmlFor: id,
|
|
2846
2853
|
color: colorScheme,
|
|
2847
2854
|
error: error
|
|
2848
|
-
}, styles), label),
|
|
2855
|
+
}, styles), label), React.createElement(CountrySelector, Object.assign({
|
|
2849
2856
|
id: id,
|
|
2850
2857
|
name: name,
|
|
2851
2858
|
placeholder: placeholder,
|
|
@@ -2857,15 +2864,15 @@ var CountryPickerView = function CountryPickerView(_ref3) {
|
|
|
2857
2864
|
}, fieldStyles, props, {
|
|
2858
2865
|
value: selected,
|
|
2859
2866
|
onChange: handleChange
|
|
2860
|
-
}))),
|
|
2867
|
+
}))), React.createElement(FieldIcons, null, hide ? React.createElement(ArrowDownSvg, {
|
|
2861
2868
|
size: IconSizes$3[size],
|
|
2862
2869
|
color: IconColor,
|
|
2863
2870
|
style: styles['icon']
|
|
2864
|
-
}) :
|
|
2871
|
+
}) : React.createElement(ArrowUpSvg, {
|
|
2865
2872
|
size: IconSizes$3[size],
|
|
2866
2873
|
color: IconColor,
|
|
2867
2874
|
style: styles['icon']
|
|
2868
|
-
}))), !hide &&
|
|
2875
|
+
}))), !hide && React.createElement(DropDown, {
|
|
2869
2876
|
size: size,
|
|
2870
2877
|
styles: styles,
|
|
2871
2878
|
options: newOptions,
|
|
@@ -2875,7 +2882,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
|
|
|
2875
2882
|
|
|
2876
2883
|
var CountryPickerComponent = function CountryPickerComponent(props) {
|
|
2877
2884
|
var countryPickerStates = useCountryPickerState(props);
|
|
2878
|
-
return
|
|
2885
|
+
return React.createElement(CountryPickerView, Object.assign({}, countryPickerStates, props));
|
|
2879
2886
|
};
|
|
2880
2887
|
/**
|
|
2881
2888
|
* Country picker allows users to select a country from a dropdown list or search field.
|
|
@@ -2904,7 +2911,7 @@ var useDatePickerState = function useDatePickerState() {
|
|
|
2904
2911
|
|
|
2905
2912
|
var _excluded$l = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
|
|
2906
2913
|
var DatePickerContent = function DatePickerContent(props) {
|
|
2907
|
-
return
|
|
2914
|
+
return React.createElement(Input, Object.assign({
|
|
2908
2915
|
type: "date"
|
|
2909
2916
|
}, props));
|
|
2910
2917
|
};
|
|
@@ -2967,7 +2974,7 @@ var DatePickerView = function DatePickerView(_ref) {
|
|
|
2967
2974
|
if (onChange) onChange(event);
|
|
2968
2975
|
}
|
|
2969
2976
|
};
|
|
2970
|
-
var fieldStyles =
|
|
2977
|
+
var fieldStyles = _extends({
|
|
2971
2978
|
margin: 0,
|
|
2972
2979
|
paddingVertical: 8,
|
|
2973
2980
|
paddingHorizontal: 0,
|
|
@@ -2985,11 +2992,11 @@ var DatePickerView = function DatePickerView(_ref) {
|
|
|
2985
2992
|
color: isDisabled ? 'trueGray.600' : 'blueGray.700',
|
|
2986
2993
|
cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
|
|
2987
2994
|
}, styles['field']);
|
|
2988
|
-
return
|
|
2995
|
+
return React.createElement(FieldContainer, {
|
|
2989
2996
|
helperText: helperText,
|
|
2990
2997
|
error: error,
|
|
2991
2998
|
styles: styles
|
|
2992
|
-
},
|
|
2999
|
+
}, React.createElement(FieldContent, {
|
|
2993
3000
|
label: label,
|
|
2994
3001
|
size: size,
|
|
2995
3002
|
error: error,
|
|
@@ -3007,11 +3014,11 @@ var DatePickerView = function DatePickerView(_ref) {
|
|
|
3007
3014
|
colorScheme: colorScheme,
|
|
3008
3015
|
onMouseEnter: handleHover,
|
|
3009
3016
|
onMouseLeave: handleHover
|
|
3010
|
-
},
|
|
3017
|
+
}, React.createElement(FieldWrapper, null, isWithLabel && React.createElement(FieldLabel, Object.assign({
|
|
3011
3018
|
htmlFor: id,
|
|
3012
3019
|
color: colorScheme,
|
|
3013
3020
|
error: error
|
|
3014
|
-
}, styles), label),
|
|
3021
|
+
}, styles), label), React.createElement(DatePickerContent, Object.assign({
|
|
3015
3022
|
id: id,
|
|
3016
3023
|
name: name,
|
|
3017
3024
|
value: date,
|
|
@@ -3026,7 +3033,7 @@ var DatePickerView = function DatePickerView(_ref) {
|
|
|
3026
3033
|
|
|
3027
3034
|
var DatePickerComponent = function DatePickerComponent(props) {
|
|
3028
3035
|
var datePickerStates = useDatePickerState();
|
|
3029
|
-
return
|
|
3036
|
+
return React.createElement(DatePickerView, Object.assign({}, datePickerStates, props));
|
|
3030
3037
|
};
|
|
3031
3038
|
/**
|
|
3032
3039
|
* Date picker allows users to select a date from a calendar view.
|
|
@@ -3073,7 +3080,7 @@ var useTextFieldState = function useTextFieldState(_ref) {
|
|
|
3073
3080
|
|
|
3074
3081
|
var _excluded$m = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
|
|
3075
3082
|
var TextFieldInput = function TextFieldInput(props) {
|
|
3076
|
-
return
|
|
3083
|
+
return React.createElement(Input, Object.assign({
|
|
3077
3084
|
type: "text"
|
|
3078
3085
|
}, props));
|
|
3079
3086
|
};
|
|
@@ -3140,7 +3147,7 @@ var TextFieldView = function TextFieldView(_ref) {
|
|
|
3140
3147
|
useMemo(function () {
|
|
3141
3148
|
setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
|
|
3142
3149
|
}, [inputValue, isFocused, label, placeholder]);
|
|
3143
|
-
var fieldStyles =
|
|
3150
|
+
var fieldStyles = _extends({
|
|
3144
3151
|
margin: 0,
|
|
3145
3152
|
paddingVertical: 8,
|
|
3146
3153
|
padddingHorizontal: 0,
|
|
@@ -3198,11 +3205,11 @@ var TextFieldView = function TextFieldView(_ref) {
|
|
|
3198
3205
|
//for ios and android
|
|
3199
3206
|
if (typeof document === 'undefined' && onChangeText) onChangeText('');
|
|
3200
3207
|
};
|
|
3201
|
-
return
|
|
3208
|
+
return React.createElement(FieldContainer, {
|
|
3202
3209
|
helperText: helperText,
|
|
3203
3210
|
error: error,
|
|
3204
3211
|
styles: styles
|
|
3205
|
-
},
|
|
3212
|
+
}, React.createElement(FieldContent, {
|
|
3206
3213
|
label: label,
|
|
3207
3214
|
size: size,
|
|
3208
3215
|
error: error,
|
|
@@ -3220,11 +3227,11 @@ var TextFieldView = function TextFieldView(_ref) {
|
|
|
3220
3227
|
colorScheme: colorScheme,
|
|
3221
3228
|
onMouseEnter: handleHover,
|
|
3222
3229
|
onMouseLeave: handleHover
|
|
3223
|
-
}, leftChild,
|
|
3230
|
+
}, leftChild, React.createElement(FieldWrapper, null, isWithLabel && React.createElement(FieldLabel, Object.assign({
|
|
3224
3231
|
htmlFor: id,
|
|
3225
3232
|
color: colorScheme,
|
|
3226
3233
|
error: error
|
|
3227
|
-
}, styles), label),
|
|
3234
|
+
}, styles), label), React.createElement(TextFieldInput, Object.assign({
|
|
3228
3235
|
id: id,
|
|
3229
3236
|
name: name,
|
|
3230
3237
|
value: inputValue,
|
|
@@ -3239,7 +3246,7 @@ var TextFieldView = function TextFieldView(_ref) {
|
|
|
3239
3246
|
onChange: handleChange
|
|
3240
3247
|
}, onChangeText && {
|
|
3241
3248
|
onChangeText: handleChange
|
|
3242
|
-
}))), (rightChild || isClearable && inputValue) &&
|
|
3249
|
+
}))), (rightChild || isClearable && inputValue) && React.createElement(FieldIcons, null, rightChild && React.createElement(React.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && React.createElement(CloseSvg, {
|
|
3243
3250
|
size: Typography.fontSizes[size],
|
|
3244
3251
|
color: IconColor,
|
|
3245
3252
|
onClick: handleClear
|
|
@@ -3248,7 +3255,7 @@ var TextFieldView = function TextFieldView(_ref) {
|
|
|
3248
3255
|
|
|
3249
3256
|
var TextFieldComponent = function TextFieldComponent(props) {
|
|
3250
3257
|
var textFieldStates = useTextFieldState(props);
|
|
3251
|
-
return
|
|
3258
|
+
return React.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
|
|
3252
3259
|
};
|
|
3253
3260
|
/**
|
|
3254
3261
|
* TextField is used to capture text data from users.
|
|
@@ -3267,10 +3274,10 @@ var PasswordView = function PasswordView(_ref) {
|
|
|
3267
3274
|
_ref$setIsVisible = _ref.setIsVisible,
|
|
3268
3275
|
setIsVisible = _ref$setIsVisible === void 0 ? function () {} : _ref$setIsVisible,
|
|
3269
3276
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
|
|
3270
|
-
return
|
|
3277
|
+
return React.createElement(TextField, Object.assign({
|
|
3271
3278
|
name: name,
|
|
3272
3279
|
type: isVisible ? 'text' : 'password',
|
|
3273
|
-
rightChild:
|
|
3280
|
+
rightChild: React.createElement(View, {
|
|
3274
3281
|
onClick: function onClick() {
|
|
3275
3282
|
if (!isDisabled) setIsVisible(!isVisible);
|
|
3276
3283
|
}
|
|
@@ -3281,7 +3288,7 @@ var PasswordView = function PasswordView(_ref) {
|
|
|
3281
3288
|
|
|
3282
3289
|
var PasswordComponent = function PasswordComponent(props) {
|
|
3283
3290
|
var passwordState = usePasswordState();
|
|
3284
|
-
return
|
|
3291
|
+
return React.createElement(PasswordView, Object.assign({}, passwordState, props));
|
|
3285
3292
|
};
|
|
3286
3293
|
/**
|
|
3287
3294
|
* To allow users to securely enter sensitive information
|
|
@@ -3353,7 +3360,7 @@ var Item = function Item(_ref) {
|
|
|
3353
3360
|
var handleHover = function handleHover() {
|
|
3354
3361
|
return setIsHovered(!isHovered);
|
|
3355
3362
|
};
|
|
3356
|
-
return
|
|
3363
|
+
return React.createElement(Element, Object.assign({
|
|
3357
3364
|
as: "li",
|
|
3358
3365
|
margin: 0,
|
|
3359
3366
|
paddingVertical: 8,
|
|
@@ -3381,7 +3388,7 @@ var SelectBox = function SelectBox(_ref2) {
|
|
|
3381
3388
|
placeholder = _ref2.placeholder,
|
|
3382
3389
|
_ref2$removeOption = _ref2.removeOption,
|
|
3383
3390
|
removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
|
|
3384
|
-
var fieldStyles =
|
|
3391
|
+
var fieldStyles = _extends({
|
|
3385
3392
|
margin: 0,
|
|
3386
3393
|
width: '95%',
|
|
3387
3394
|
heigth: '100%',
|
|
@@ -3393,10 +3400,10 @@ var SelectBox = function SelectBox(_ref2) {
|
|
|
3393
3400
|
color: isDisabled ? 'trueGray.600' : 'blueGray.700',
|
|
3394
3401
|
cursor: isDisabled ? 'not-allowed' : 'auto'
|
|
3395
3402
|
}, styles['field'], styles['text']);
|
|
3396
|
-
return
|
|
3403
|
+
return React.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && React.createElement(Horizontal, {
|
|
3397
3404
|
gap: 6
|
|
3398
3405
|
}, selected.map(function (option) {
|
|
3399
|
-
return
|
|
3406
|
+
return React.createElement(MultiSelect, {
|
|
3400
3407
|
key: option,
|
|
3401
3408
|
option: option,
|
|
3402
3409
|
removeOption: removeOption
|
|
@@ -3420,7 +3427,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
|
|
|
3420
3427
|
var handleChange = function handleChange(event) {
|
|
3421
3428
|
if (onChange) onChange(event);
|
|
3422
3429
|
};
|
|
3423
|
-
return
|
|
3430
|
+
return React.createElement(Element, Object.assign({
|
|
3424
3431
|
id: id,
|
|
3425
3432
|
name: name,
|
|
3426
3433
|
as: "select",
|
|
@@ -3434,7 +3441,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
|
|
|
3434
3441
|
onChange: handleChange,
|
|
3435
3442
|
multiple: isMulti
|
|
3436
3443
|
}, props), options.map(function (option) {
|
|
3437
|
-
return
|
|
3444
|
+
return React.createElement("option", {
|
|
3438
3445
|
key: option,
|
|
3439
3446
|
value: option
|
|
3440
3447
|
}, option);
|
|
@@ -3465,7 +3472,7 @@ var DropDown$1 = function DropDown(_ref4) {
|
|
|
3465
3472
|
shadowOpacity: 1,
|
|
3466
3473
|
shadowRadius: 1
|
|
3467
3474
|
};
|
|
3468
|
-
return
|
|
3475
|
+
return React.createElement(Element, Object.assign({
|
|
3469
3476
|
as: "ul",
|
|
3470
3477
|
role: "dropdown",
|
|
3471
3478
|
top: "100%",
|
|
@@ -3484,7 +3491,7 @@ var DropDown$1 = function DropDown(_ref4) {
|
|
|
3484
3491
|
backgroundColor: "white",
|
|
3485
3492
|
justifyContent: "space-evenly"
|
|
3486
3493
|
}, shadow, styles['dropDown']), options.map(function (option) {
|
|
3487
|
-
return
|
|
3494
|
+
return React.createElement(Item, Object.assign({
|
|
3488
3495
|
key: option,
|
|
3489
3496
|
size: size,
|
|
3490
3497
|
option: option,
|
|
@@ -3502,7 +3509,7 @@ var MultiSelect = function MultiSelect(_ref5) {
|
|
|
3502
3509
|
var handleClick = function handleClick() {
|
|
3503
3510
|
return removeOption(option);
|
|
3504
3511
|
};
|
|
3505
|
-
return
|
|
3512
|
+
return React.createElement(Horizontal, Object.assign({
|
|
3506
3513
|
gap: 10,
|
|
3507
3514
|
padding: 6,
|
|
3508
3515
|
borderRadius: 4,
|
|
@@ -3512,9 +3519,9 @@ var MultiSelect = function MultiSelect(_ref5) {
|
|
|
3512
3519
|
onClick: function onClick(event) {
|
|
3513
3520
|
return event.stopPropagation();
|
|
3514
3521
|
}
|
|
3515
|
-
}, props),
|
|
3522
|
+
}, props), React.createElement(Text, {
|
|
3516
3523
|
size: size
|
|
3517
|
-
}, option),
|
|
3524
|
+
}, option), React.createElement(CloseSvg, {
|
|
3518
3525
|
role: "close-button",
|
|
3519
3526
|
color: "inherit",
|
|
3520
3527
|
size: IconSizes$4[size],
|
|
@@ -3602,13 +3609,13 @@ var SelectView = function SelectView(_ref6) {
|
|
|
3602
3609
|
setSelected(newSelected.length === 0 ? [] : newSelected);
|
|
3603
3610
|
}
|
|
3604
3611
|
};
|
|
3605
|
-
return
|
|
3612
|
+
return React.createElement(FieldContainer, {
|
|
3606
3613
|
role: "SelectBox",
|
|
3607
3614
|
helperText: helperText,
|
|
3608
3615
|
error: error,
|
|
3609
3616
|
styles: styles,
|
|
3610
3617
|
onClick: isDisabled || isReadOnly ? function () {} : handleClick
|
|
3611
|
-
},
|
|
3618
|
+
}, React.createElement(FieldContent, {
|
|
3612
3619
|
label: label,
|
|
3613
3620
|
size: size,
|
|
3614
3621
|
error: error,
|
|
@@ -3626,11 +3633,11 @@ var SelectView = function SelectView(_ref6) {
|
|
|
3626
3633
|
colorScheme: colorScheme,
|
|
3627
3634
|
onMouseEnter: handleHover,
|
|
3628
3635
|
onMouseLeave: handleHover
|
|
3629
|
-
},
|
|
3636
|
+
}, React.createElement(FieldWrapper, null, isWithLabel && React.createElement(FieldLabel, Object.assign({
|
|
3630
3637
|
htmlFor: id,
|
|
3631
3638
|
color: colorScheme,
|
|
3632
3639
|
error: error
|
|
3633
|
-
}, styles), label),
|
|
3640
|
+
}, styles), label), React.createElement(HiddenSelect, Object.assign({
|
|
3634
3641
|
id: id,
|
|
3635
3642
|
name: name,
|
|
3636
3643
|
options: options,
|
|
@@ -3640,22 +3647,22 @@ var SelectView = function SelectView(_ref6) {
|
|
|
3640
3647
|
isReadOnly: isReadOnly,
|
|
3641
3648
|
isMulti: isMulti,
|
|
3642
3649
|
onFocus: handleFocus
|
|
3643
|
-
}, props)),
|
|
3650
|
+
}, props)), React.createElement(SelectBox, {
|
|
3644
3651
|
size: size,
|
|
3645
3652
|
styles: styles,
|
|
3646
3653
|
selected: selected,
|
|
3647
3654
|
isDisabled: isDisabled,
|
|
3648
3655
|
placeholder: placeholder,
|
|
3649
3656
|
removeOption: handleRemoveOption
|
|
3650
|
-
})),
|
|
3657
|
+
})), React.createElement(FieldIcons, null, !isReadOnly && !isDisabled && React.createElement(React.Fragment, null, hide ? React.createElement(ArrowDownSvg, {
|
|
3651
3658
|
color: "inherit",
|
|
3652
3659
|
size: IconSizes$4[size],
|
|
3653
3660
|
style: styles.icon
|
|
3654
|
-
}) :
|
|
3661
|
+
}) : React.createElement(ArrowUpSvg, {
|
|
3655
3662
|
color: "inherit",
|
|
3656
3663
|
size: IconSizes$4[size],
|
|
3657
3664
|
style: styles.icon
|
|
3658
|
-
})))), !hide &&
|
|
3665
|
+
})))), !hide && React.createElement(DropDown$1, {
|
|
3659
3666
|
size: size,
|
|
3660
3667
|
styles: styles,
|
|
3661
3668
|
options: options,
|
|
@@ -3665,7 +3672,7 @@ var SelectView = function SelectView(_ref6) {
|
|
|
3665
3672
|
|
|
3666
3673
|
var SelectComponent = function SelectComponent(props) {
|
|
3667
3674
|
var selectStates = useSelectState(props);
|
|
3668
|
-
return
|
|
3675
|
+
return React.createElement(SelectView, Object.assign({}, selectStates, props));
|
|
3669
3676
|
};
|
|
3670
3677
|
/**
|
|
3671
3678
|
* Select provides a dropdown list of options for the user to choose from.
|
|
@@ -3818,7 +3825,7 @@ var SliderPadding = {
|
|
|
3818
3825
|
|
|
3819
3826
|
var _excluded$p = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
|
|
3820
3827
|
var SwitchContent = function SwitchContent(props) {
|
|
3821
|
-
return
|
|
3828
|
+
return React.createElement(Input, Object.assign({
|
|
3822
3829
|
type: "checkbox"
|
|
3823
3830
|
}, props));
|
|
3824
3831
|
};
|
|
@@ -3862,11 +3869,11 @@ var SwitchView = function SwitchView(_ref) {
|
|
|
3862
3869
|
var handleHover = function handleHover() {
|
|
3863
3870
|
return setIsHovered(!isHovered);
|
|
3864
3871
|
};
|
|
3865
|
-
return
|
|
3872
|
+
return React.createElement(Label, {
|
|
3866
3873
|
htmlFor: id,
|
|
3867
3874
|
onMouseEnter: handleHover,
|
|
3868
3875
|
onMouseLeave: handleHover
|
|
3869
|
-
},
|
|
3876
|
+
}, React.createElement(SwitchContent, Object.assign({
|
|
3870
3877
|
id: id,
|
|
3871
3878
|
name: name,
|
|
3872
3879
|
opacity: 0,
|
|
@@ -3878,7 +3885,7 @@ var SwitchView = function SwitchView(_ref) {
|
|
|
3878
3885
|
readOnly: isReadOnly
|
|
3879
3886
|
}, onValueChange && {
|
|
3880
3887
|
onValueChange: handleToggle
|
|
3881
|
-
}, props)),
|
|
3888
|
+
}, props)), React.createElement(View, Object.assign({
|
|
3882
3889
|
display: "flex",
|
|
3883
3890
|
cursor: "pointer",
|
|
3884
3891
|
alignItems: "center",
|
|
@@ -3887,15 +3894,15 @@ var SwitchView = function SwitchView(_ref) {
|
|
|
3887
3894
|
transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3888
3895
|
backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
|
|
3889
3896
|
justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
|
|
3890
|
-
}, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on &&
|
|
3897
|
+
}, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React.createElement(View, null, activeChild), React.createElement(View, Object.assign({
|
|
3891
3898
|
borderRadius: "50%",
|
|
3892
3899
|
backgroundColor: "white"
|
|
3893
|
-
}, KnobSizes[size], styles['circle'])), inActiveChild && !on &&
|
|
3900
|
+
}, KnobSizes[size], styles['circle'])), inActiveChild && !on && React.createElement(View, null, inActiveChild)));
|
|
3894
3901
|
};
|
|
3895
3902
|
|
|
3896
3903
|
var SwitchComponent = function SwitchComponent(props) {
|
|
3897
3904
|
var switchStates = useSwitchState(props);
|
|
3898
|
-
return
|
|
3905
|
+
return React.createElement(SwitchView, Object.assign({}, switchStates, props));
|
|
3899
3906
|
};
|
|
3900
3907
|
var Switch = SwitchComponent;
|
|
3901
3908
|
|
|
@@ -3991,7 +3998,7 @@ var TextAreaView = function TextAreaView(_ref) {
|
|
|
3991
3998
|
useMemo(function () {
|
|
3992
3999
|
setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
|
|
3993
4000
|
}, [inputValue, isFocused, label, placeholder]);
|
|
3994
|
-
var fieldStyles =
|
|
4001
|
+
var fieldStyles = _extends({
|
|
3995
4002
|
margin: 0,
|
|
3996
4003
|
paddingVertical: 8,
|
|
3997
4004
|
paddingHorizontal: 0,
|
|
@@ -4029,11 +4036,11 @@ var TextAreaView = function TextAreaView(_ref) {
|
|
|
4029
4036
|
if (onChange) onChange(event);
|
|
4030
4037
|
}
|
|
4031
4038
|
};
|
|
4032
|
-
return
|
|
4039
|
+
return React.createElement(FieldContainer, {
|
|
4033
4040
|
helperText: helperText,
|
|
4034
4041
|
error: error,
|
|
4035
4042
|
styles: styles
|
|
4036
|
-
},
|
|
4043
|
+
}, React.createElement(FieldContent, {
|
|
4037
4044
|
label: label,
|
|
4038
4045
|
size: size,
|
|
4039
4046
|
error: error,
|
|
@@ -4051,11 +4058,11 @@ var TextAreaView = function TextAreaView(_ref) {
|
|
|
4051
4058
|
colorScheme: colorScheme,
|
|
4052
4059
|
onMouseEnter: handleHover,
|
|
4053
4060
|
onMouseLeave: handleHover
|
|
4054
|
-
},
|
|
4061
|
+
}, React.createElement(FieldWrapper, null, isWithLabel && React.createElement(FieldLabel, Object.assign({
|
|
4055
4062
|
htmlFor: id,
|
|
4056
4063
|
color: colorScheme,
|
|
4057
4064
|
error: error
|
|
4058
|
-
}, styles), label),
|
|
4065
|
+
}, styles), label), React.createElement(Element, Object.assign({
|
|
4059
4066
|
as: "textarea",
|
|
4060
4067
|
id: id,
|
|
4061
4068
|
name: name,
|
|
@@ -4078,7 +4085,7 @@ var TextAreaView = function TextAreaView(_ref) {
|
|
|
4078
4085
|
|
|
4079
4086
|
var TextAreaComponent = function TextAreaComponent(props) {
|
|
4080
4087
|
var textAreaState = useTextAreaState(props);
|
|
4081
|
-
return
|
|
4088
|
+
return React.createElement(TextAreaView, Object.assign({}, textAreaState, props));
|
|
4082
4089
|
};
|
|
4083
4090
|
/**
|
|
4084
4091
|
* Text Area is an component used to create a multi-line input field.
|
|
@@ -4131,7 +4138,7 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
|
|
|
4131
4138
|
return clearInterval(intervalId);
|
|
4132
4139
|
};
|
|
4133
4140
|
}, [speed]);
|
|
4134
|
-
return
|
|
4141
|
+
return React.createElement("svg", Object.assign({
|
|
4135
4142
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4136
4143
|
width: sizeStyle + "px",
|
|
4137
4144
|
height: sizeStyle + "px",
|
|
@@ -4144,16 +4151,16 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
|
|
|
4144
4151
|
style: {
|
|
4145
4152
|
transform: "rotate(" + angle + "deg)"
|
|
4146
4153
|
}
|
|
4147
|
-
}, props),
|
|
4154
|
+
}, props), React.createElement("g", {
|
|
4148
4155
|
id: "SVGRepo_bgCarrier",
|
|
4149
4156
|
strokeWidth: "0"
|
|
4150
|
-
}),
|
|
4157
|
+
}), React.createElement("g", {
|
|
4151
4158
|
id: "SVGRepo_tracerCarrier",
|
|
4152
4159
|
strokeLinecap: "round",
|
|
4153
4160
|
strokeLinejoin: "round"
|
|
4154
|
-
}),
|
|
4161
|
+
}), React.createElement("g", {
|
|
4155
4162
|
id: "SVGRepo_iconCarrier"
|
|
4156
|
-
},
|
|
4163
|
+
}, React.createElement("path", {
|
|
4157
4164
|
d: "M21 12a9 9 0 11-6.219-8.56"
|
|
4158
4165
|
})));
|
|
4159
4166
|
};
|
|
@@ -4181,7 +4188,7 @@ var Dotted = function Dotted(_ref2) {
|
|
|
4181
4188
|
return clearInterval(intervalId);
|
|
4182
4189
|
};
|
|
4183
4190
|
}, [speed]);
|
|
4184
|
-
return
|
|
4191
|
+
return React.createElement("svg", Object.assign({
|
|
4185
4192
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4186
4193
|
viewBox: "0 0 50 50",
|
|
4187
4194
|
width: sizeStyle + "px",
|
|
@@ -4189,17 +4196,17 @@ var Dotted = function Dotted(_ref2) {
|
|
|
4189
4196
|
style: {
|
|
4190
4197
|
transform: "rotate(" + angle + "deg)"
|
|
4191
4198
|
}
|
|
4192
|
-
}, props),
|
|
4199
|
+
}, props), React.createElement("circle", {
|
|
4193
4200
|
cx: "10",
|
|
4194
4201
|
cy: "25",
|
|
4195
4202
|
r: "4",
|
|
4196
4203
|
fill: colorStyle
|
|
4197
|
-
}),
|
|
4204
|
+
}), React.createElement("circle", {
|
|
4198
4205
|
cx: "25",
|
|
4199
4206
|
cy: "25",
|
|
4200
4207
|
r: "4",
|
|
4201
4208
|
fill: colorStyle
|
|
4202
|
-
}),
|
|
4209
|
+
}), React.createElement("circle", {
|
|
4203
4210
|
cx: "40",
|
|
4204
4211
|
cy: "25",
|
|
4205
4212
|
r: "4",
|
|
@@ -4230,7 +4237,7 @@ var Quarter = function Quarter(_ref3) {
|
|
|
4230
4237
|
return clearInterval(intervalId);
|
|
4231
4238
|
};
|
|
4232
4239
|
}, [speed]);
|
|
4233
|
-
return
|
|
4240
|
+
return React.createElement("svg", Object.assign({
|
|
4234
4241
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4235
4242
|
viewBox: "0 0 50 50",
|
|
4236
4243
|
width: sizeStyle + "px",
|
|
@@ -4238,7 +4245,7 @@ var Quarter = function Quarter(_ref3) {
|
|
|
4238
4245
|
style: {
|
|
4239
4246
|
transform: "rotate(" + angle + "deg)"
|
|
4240
4247
|
}
|
|
4241
|
-
}, props),
|
|
4248
|
+
}, props), React.createElement("circle", {
|
|
4242
4249
|
cx: "25",
|
|
4243
4250
|
cy: "25",
|
|
4244
4251
|
r: "20",
|
|
@@ -4266,22 +4273,22 @@ var LoaderView = function LoaderView(_ref4) {
|
|
|
4266
4273
|
color: loaderColor
|
|
4267
4274
|
};
|
|
4268
4275
|
var variants = {
|
|
4269
|
-
default:
|
|
4270
|
-
dotted:
|
|
4271
|
-
quarter:
|
|
4276
|
+
default: React.createElement(DefaultSpinner, Object.assign({}, style)),
|
|
4277
|
+
dotted: React.createElement(Dotted, Object.assign({}, style)),
|
|
4278
|
+
quarter: React.createElement(Quarter, Object.assign({}, style))
|
|
4272
4279
|
};
|
|
4273
|
-
return
|
|
4280
|
+
return React.createElement(Center, Object.assign({
|
|
4274
4281
|
gap: 10,
|
|
4275
4282
|
flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
|
|
4276
|
-
}, props), (textPosition === 'left' || textPosition === 'top') && children &&
|
|
4283
|
+
}, props), (textPosition === 'left' || textPosition === 'top') && children && React.createElement(View, {
|
|
4277
4284
|
color: textColor
|
|
4278
|
-
}, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children &&
|
|
4285
|
+
}, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && React.createElement(View, {
|
|
4279
4286
|
color: textColor
|
|
4280
4287
|
}, children));
|
|
4281
4288
|
};
|
|
4282
4289
|
|
|
4283
4290
|
var LoaderComponent = function LoaderComponent(props) {
|
|
4284
|
-
return
|
|
4291
|
+
return React.createElement(LoaderView, Object.assign({}, props));
|
|
4285
4292
|
};
|
|
4286
4293
|
/**
|
|
4287
4294
|
* It gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
|
|
@@ -4355,7 +4362,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
|
|
|
4355
4362
|
var handleClick = function handleClick() {
|
|
4356
4363
|
if (!isClosePrevented) onClose();
|
|
4357
4364
|
};
|
|
4358
|
-
return
|
|
4365
|
+
return React.createElement(Center, {
|
|
4359
4366
|
position: "fixed",
|
|
4360
4367
|
top: 0,
|
|
4361
4368
|
left: 0,
|
|
@@ -4364,7 +4371,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
|
|
|
4364
4371
|
zIndex: 1000,
|
|
4365
4372
|
onClick: handleClick,
|
|
4366
4373
|
visibility: isOpen ? 'visible' : 'hidden'
|
|
4367
|
-
},
|
|
4374
|
+
}, React.createElement(View, Object.assign({
|
|
4368
4375
|
cursor: "pointer",
|
|
4369
4376
|
position: "absolute",
|
|
4370
4377
|
top: 0,
|
|
@@ -4401,7 +4408,7 @@ var ModalContainer = function ModalContainer(_ref2) {
|
|
|
4401
4408
|
var handleClick = function handleClick(event) {
|
|
4402
4409
|
return event.stopPropagation();
|
|
4403
4410
|
};
|
|
4404
|
-
return
|
|
4411
|
+
return React.createElement(Vertical, Object.assign({
|
|
4405
4412
|
cursor: "default",
|
|
4406
4413
|
overflow: "hidden",
|
|
4407
4414
|
backgroundColor: "white",
|
|
@@ -4422,10 +4429,10 @@ var ModalHeader = function ModalHeader(_ref3) {
|
|
|
4422
4429
|
var onClose = useModalStore(function (state) {
|
|
4423
4430
|
return state.onClose;
|
|
4424
4431
|
});
|
|
4425
|
-
var buttonIcon =
|
|
4432
|
+
var buttonIcon = React.createElement(Button, {
|
|
4426
4433
|
onClick: onClose,
|
|
4427
4434
|
colorScheme: "transparent",
|
|
4428
|
-
icon:
|
|
4435
|
+
icon: React.createElement(CloseSvg, {
|
|
4429
4436
|
size: HeaderIconSizes[iconSize],
|
|
4430
4437
|
color: buttonColor
|
|
4431
4438
|
}),
|
|
@@ -4434,7 +4441,7 @@ var ModalHeader = function ModalHeader(_ref3) {
|
|
|
4434
4441
|
filter: "none",
|
|
4435
4442
|
isAuto: true
|
|
4436
4443
|
});
|
|
4437
|
-
return
|
|
4444
|
+
return React.createElement(Horizontal, Object.assign({
|
|
4438
4445
|
justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
|
|
4439
4446
|
alignItems: "center",
|
|
4440
4447
|
paddingVertical: 15,
|
|
@@ -4450,7 +4457,7 @@ var ModalBody = function ModalBody(_ref4) {
|
|
|
4450
4457
|
borderColor: 'rgba(250, 250, 250, 1)',
|
|
4451
4458
|
borderStyle: 'solid'
|
|
4452
4459
|
};
|
|
4453
|
-
return
|
|
4460
|
+
return React.createElement(View, Object.assign({
|
|
4454
4461
|
overflowY: "auto",
|
|
4455
4462
|
paddingVertical: 15,
|
|
4456
4463
|
paddingHorizontal: 20
|
|
@@ -4459,7 +4466,7 @@ var ModalBody = function ModalBody(_ref4) {
|
|
|
4459
4466
|
var ModalFooter = function ModalFooter(_ref5) {
|
|
4460
4467
|
var children = _ref5.children,
|
|
4461
4468
|
props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
|
|
4462
|
-
return
|
|
4469
|
+
return React.createElement(Horizontal, Object.assign({
|
|
4463
4470
|
marginTop: "auto",
|
|
4464
4471
|
alignItems: "center",
|
|
4465
4472
|
justifyContent: "flex-end",
|
|
@@ -4474,7 +4481,7 @@ var ModalFooter = function ModalFooter(_ref5) {
|
|
|
4474
4481
|
// eslint-disable-next-line react/prop-types
|
|
4475
4482
|
var Modal = function Modal(_ref) {
|
|
4476
4483
|
var children = _ref.children;
|
|
4477
|
-
return
|
|
4484
|
+
return React.createElement(React.Fragment, null, children);
|
|
4478
4485
|
};
|
|
4479
4486
|
Modal.Overlay = ModalOverlay;
|
|
4480
4487
|
Modal.Container = ModalContainer;
|