@app-studio/web 0.1.7 → 0.1.9

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 (8) hide show
  1. package/dist/components/Form/TextArea/TextArea/TextArea.state.d.ts +2 -2
  2. package/dist/web.cjs.development.js +4054 -151
  3. package/dist/web.cjs.development.js.map +1 -1
  4. package/dist/web.cjs.production.min.js +1 -1
  5. package/dist/web.cjs.production.min.js.map +1 -1
  6. package/dist/web.esm.js +4036 -17
  7. package/dist/web.esm.js.map +1 -1
  8. package/package.json +1 -1
package/dist/web.cjs.development.js CHANGED
@@ -2,160 +2,4063 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Button = require('./components/Button/Button');
6
- var Checkbox = require('./components/Form/Checkbox/Checkbox');
7
- var CountryPicker = require('./components/Form/CountryPicker/CountryPicker');
8
- var DatePicker = require('./components/Form/DatePicker/DatePicker');
9
- var Password = require('./components/Form/Password/Password');
10
- var Select = require('./components/Form/Select/Select');
11
- var Switch = require('./components/Form/Switch/Switch');
12
- var TextArea = require('./components/Form/TextArea/TextArea');
13
- var TextField = require('./components/Form/TextField/TextField');
14
- var Center = require('./components/Layout/Center/Center');
15
- var Horizontal = require('./components/Layout/Horizontal/Horizontal');
16
- var Vertical = require('./components/Layout/Vertical/Vertical');
5
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
+
7
+ require('core-js/modules/es6.object.assign.js');
8
+ var React = require('react');
9
+ var React__default = _interopDefault(React);
10
+ var appStudio = require('app-studio');
11
+ var components = require('src/components');
12
+ var Label = require('./components/Form/Label/Label');
13
+ var Svg = require('./components/Svg');
14
+ require('core-js/modules/es6.array.map.js');
15
+ require('core-js/modules/es6.array.filter.js');
16
+ require('core-js/modules/es6.string.starts-with.js');
17
+ var Input = require('./components/Layout/Input');
18
+ var ArrowDown = require('./components/Svg/ArrowDown');
19
+ var ArrowUp = require('./components/Svg/ArrowUp');
20
+ var format = _interopDefault(require('date-fns/format'));
21
+ var FieldContainer = require('./components/Layout/Input/FieldContainer/FieldContainer');
22
+ var FieldContent = require('./components/Layout/Input/FieldContent/FieldContent');
23
+ var FieldLabel = require('./components/Layout/Input/FieldLabel/FieldLabel');
24
+ var FieldWrapper = require('./components/Layout/Input/FieldWrapper/FieldWrapper');
25
+ require('core-js/modules/es6.string.includes.js');
26
+ require('core-js/modules/es7.array.includes.js');
27
+ var FieldIcons = require('./components/Layout/Input/FieldIcons/FieldIcons');
17
28
  var View = require('./components/Layout/View/View');
18
- var Link = require('./components/Link/Link');
19
- var Loader = require('./components/Loader/Loader');
20
- var Modal = require('./components/Modal/Modal');
21
- var Text = require('./components/Text/Text');
29
+ var reactRouterDom = require('react-router-dom');
30
+ var useModalStore = require('src/store/useModalStore');
31
+ require('core-js/modules/es6.array.slice.js');
22
32
 
33
+ var useButtonState = function useButtonState() {
34
+ var _React$useState = React__default.useState(false),
35
+ isHovered = _React$useState[0],
36
+ setIsHovered = _React$useState[1];
37
+ return {
38
+ isHovered: isHovered,
39
+ setIsHovered: setIsHovered
40
+ };
41
+ };
23
42
 
43
+ function _objectWithoutPropertiesLoose(source, excluded) {
44
+ if (source == null) return {};
45
+ var target = {};
46
+ var sourceKeys = Object.keys(source);
47
+ var key, i;
48
+ for (i = 0; i < sourceKeys.length; i++) {
49
+ key = sourceKeys[i];
50
+ if (excluded.indexOf(key) >= 0) continue;
51
+ target[key] = source[key];
52
+ }
53
+ return target;
54
+ }
24
55
 
25
- Object.keys(Button).forEach(function (k) {
26
- if (k !== 'default') Object.defineProperty(exports, k, {
27
- enumerable: true,
28
- get: function () {
29
- return Button[k];
30
- }
31
- });
32
- });
33
- Object.keys(Checkbox).forEach(function (k) {
34
- if (k !== 'default') Object.defineProperty(exports, k, {
35
- enumerable: true,
36
- get: function () {
37
- return Checkbox[k];
38
- }
39
- });
40
- });
41
- Object.keys(CountryPicker).forEach(function (k) {
42
- if (k !== 'default') Object.defineProperty(exports, k, {
43
- enumerable: true,
44
- get: function () {
45
- return CountryPicker[k];
46
- }
47
- });
48
- });
49
- Object.keys(DatePicker).forEach(function (k) {
50
- if (k !== 'default') Object.defineProperty(exports, k, {
51
- enumerable: true,
52
- get: function () {
53
- return DatePicker[k];
54
- }
55
- });
56
- });
57
- Object.keys(Password).forEach(function (k) {
58
- if (k !== 'default') Object.defineProperty(exports, k, {
59
- enumerable: true,
60
- get: function () {
61
- return Password[k];
62
- }
63
- });
64
- });
65
- Object.keys(Select).forEach(function (k) {
66
- if (k !== 'default') Object.defineProperty(exports, k, {
67
- enumerable: true,
68
- get: function () {
69
- return Select[k];
70
- }
71
- });
72
- });
73
- Object.keys(Switch).forEach(function (k) {
74
- if (k !== 'default') Object.defineProperty(exports, k, {
75
- enumerable: true,
76
- get: function () {
77
- return Switch[k];
78
- }
79
- });
80
- });
81
- Object.keys(TextArea).forEach(function (k) {
82
- if (k !== 'default') Object.defineProperty(exports, k, {
83
- enumerable: true,
84
- get: function () {
85
- return TextArea[k];
86
- }
87
- });
88
- });
89
- Object.keys(TextField).forEach(function (k) {
90
- if (k !== 'default') Object.defineProperty(exports, k, {
91
- enumerable: true,
92
- get: function () {
93
- return TextField[k];
94
- }
95
- });
96
- });
97
- Object.keys(Center).forEach(function (k) {
98
- if (k !== 'default') Object.defineProperty(exports, k, {
99
- enumerable: true,
100
- get: function () {
101
- return Center[k];
102
- }
103
- });
104
- });
105
- Object.keys(Horizontal).forEach(function (k) {
106
- if (k !== 'default') Object.defineProperty(exports, k, {
107
- enumerable: true,
108
- get: function () {
109
- return Horizontal[k];
110
- }
111
- });
112
- });
113
- Object.keys(Vertical).forEach(function (k) {
114
- if (k !== 'default') Object.defineProperty(exports, k, {
115
- enumerable: true,
116
- get: function () {
117
- return Vertical[k];
118
- }
119
- });
120
- });
121
- Object.keys(View).forEach(function (k) {
122
- if (k !== 'default') Object.defineProperty(exports, k, {
123
- enumerable: true,
124
- get: function () {
125
- return View[k];
126
- }
127
- });
128
- });
129
- Object.keys(Link).forEach(function (k) {
130
- if (k !== 'default') Object.defineProperty(exports, k, {
131
- enumerable: true,
132
- get: function () {
133
- return Link[k];
134
- }
135
- });
136
- });
137
- Object.keys(Loader).forEach(function (k) {
138
- if (k !== 'default') Object.defineProperty(exports, k, {
139
- enumerable: true,
140
- get: function () {
141
- return Loader[k];
142
- }
143
- });
144
- });
145
- Object.keys(Modal).forEach(function (k) {
146
- if (k !== 'default') Object.defineProperty(exports, k, {
147
- enumerable: true,
148
- get: function () {
149
- return Modal[k];
150
- }
151
- });
152
- });
153
- Object.keys(Text).forEach(function (k) {
154
- if (k !== 'default') Object.defineProperty(exports, k, {
155
- enumerable: true,
156
- get: function () {
157
- return Text[k];
158
- }
159
- });
56
+ var ButtonSizes = {
57
+ xs: {
58
+ width: 79,
59
+ paddingTop: 8,
60
+ paddingBottom: 8,
61
+ paddingLeft: 12,
62
+ paddingRight: 12,
63
+ fontWeight: 600,
64
+ fontSize: 'xs',
65
+ lineHeight: 16,
66
+ letterSpacing: 1.25
67
+ },
68
+ sm: {
69
+ width: 128,
70
+ paddingTop: 10,
71
+ paddingBottom: 10,
72
+ paddingLeft: 16,
73
+ paddingRight: 16,
74
+ fontWeight: 600,
75
+ fontSize: 'sm',
76
+ lineHeight: 20,
77
+ letterSpacing: 1.25
78
+ },
79
+ md: {
80
+ width: 144,
81
+ paddingTop: 12,
82
+ paddingBottom: 12,
83
+ paddingLeft: 18,
84
+ paddingRight: 18,
85
+ fontWeight: 600,
86
+ fontSize: 'md',
87
+ lineHeight: 24,
88
+ letterSpacing: 1.25
89
+ },
90
+ lg: {
91
+ width: 178,
92
+ paddingTop: 14,
93
+ paddingBottom: 14,
94
+ paddingLeft: 22,
95
+ paddingRight: 22,
96
+ fontWeight: 600,
97
+ fontSize: 'lg',
98
+ lineHeight: 24,
99
+ letterSpacing: 1.25
100
+ },
101
+ xl: {
102
+ width: 220,
103
+ paddingTop: 16,
104
+ paddingBottom: 16,
105
+ paddingLeft: 26,
106
+ paddingRight: 26,
107
+ fontWeight: 600,
108
+ fontSize: 'xl',
109
+ lineHeight: 24,
110
+ letterSpacing: 1.25
111
+ }
112
+ };
113
+ var ButtonShapes = {
114
+ sharp: 0,
115
+ rounded: 4,
116
+ pillShaped: 24
117
+ };
118
+ var IconSizes = {
119
+ xs: {
120
+ width: 24,
121
+ height: 24,
122
+ padding: 12
123
+ },
124
+ sm: {
125
+ width: 24,
126
+ height: 24,
127
+ padding: 15
128
+ },
129
+ md: {
130
+ width: 36,
131
+ height: 36,
132
+ padding: 15
133
+ },
134
+ lg: {
135
+ width: 36,
136
+ height: 36,
137
+ padding: 18
138
+ },
139
+ xl: {
140
+ width: 36,
141
+ height: 36,
142
+ padding: 24
143
+ }
144
+ };
145
+
146
+ var _excluded = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
147
+ var ButtonView = function ButtonView(_ref) {
148
+ var _props$onClick;
149
+ var icon = _ref.icon,
150
+ shadow = _ref.shadow,
151
+ children = _ref.children,
152
+ ariaLabel = _ref.ariaLabel,
153
+ externalHref = _ref.externalHref,
154
+ _ref$isAuto = _ref.isAuto,
155
+ isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
156
+ _ref$isFilled = _ref.isFilled,
157
+ isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
158
+ _ref$isIconRounded = _ref.isIconRounded,
159
+ isIconRounded = _ref$isIconRounded === void 0 ? false : _ref$isIconRounded,
160
+ _ref$isLoading = _ref.isLoading,
161
+ isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
162
+ _ref$isDisabled = _ref.isDisabled,
163
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
164
+ _ref$size = _ref.size,
165
+ size = _ref$size === void 0 ? 'md' : _ref$size,
166
+ _ref$variant = _ref.variant,
167
+ variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
168
+ _ref$iconPosition = _ref.iconPosition,
169
+ iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
170
+ _ref$colorScheme = _ref.colorScheme,
171
+ colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
172
+ _ref$shape = _ref.shape,
173
+ shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
174
+ _ref$onClick = _ref.onClick,
175
+ onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
176
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
177
+ var isActive = !(isDisabled || isLoading);
178
+ var defaultNativeProps = {
179
+ disabled: !isActive
180
+ };
181
+ var buttonColor = isActive ? colorScheme : 'theme.disabled';
182
+ var ButtonVariants = {
183
+ filled: {
184
+ backgroundColor: buttonColor,
185
+ color: 'color.white'
186
+ },
187
+ outline: {
188
+ backgroundColor: 'transparent',
189
+ borderWidth: 1,
190
+ borderStyle: 'solid',
191
+ borderColor: colorScheme,
192
+ color: buttonColor
193
+ },
194
+ link: {
195
+ backgroundColor: 'transparent',
196
+ border: 'none',
197
+ color: buttonColor,
198
+ textDecorationLine: 'underline'
199
+ },
200
+ ghost: {
201
+ backgroundColor: 'transparent',
202
+ border: 'none',
203
+ color: buttonColor
204
+ }
205
+ };
206
+ var buttonSizeStyles = ButtonSizes[size];
207
+ var buttonVariant = ButtonVariants[variant];
208
+ var scaleWidth = {
209
+ width: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
210
+ };
211
+ var changePadding = {
212
+ padding: isIconRounded ? IconSizes[size].padding : ButtonSizes[size].padding
213
+ };
214
+ var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon);
215
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
216
+ gap: 8,
217
+ as: "button",
218
+ role: "button",
219
+ border: "none",
220
+ color: "color.white",
221
+ display: "flex",
222
+ alignItems: "center",
223
+ justifyContent: "center",
224
+ ariaLabel: ariaLabel,
225
+ backgroundColor: buttonColor,
226
+ borderRadius: ButtonShapes[shape],
227
+ onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
228
+ cursor: isActive ? 'pointer' : 'default'
229
+ }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? /*#__PURE__*/React__default.createElement(components.Link, {
230
+ href: externalHref,
231
+ textDecorationColor: colorScheme,
232
+ colorScheme: colorScheme,
233
+ isExternal: true
234
+ }, content) : content);
235
+ };
236
+
237
+ var ButtonComponent = function ButtonComponent(props) {
238
+ var _useButtonState = useButtonState(),
239
+ isHovered = _useButtonState.isHovered,
240
+ setIsHovered = _useButtonState.setIsHovered;
241
+ var handleHover = function handleHover() {
242
+ return setIsHovered(!isHovered);
243
+ };
244
+ return /*#__PURE__*/React__default.createElement(ButtonView, Object.assign({
245
+ onMouseEnter: handleHover,
246
+ onMouseLeave: handleHover,
247
+ filter: isHovered ? 'brightness(0.85)' : 'brightness(1)'
248
+ }, props));
249
+ };
250
+ /**
251
+ * Buttons allow us to trigger an event or an action with a single click.
252
+ */
253
+ var Button = ButtonComponent;
254
+
255
+ var useCheckboxState = function useCheckboxState(_ref) {
256
+ var _ref$defaultIsSelecte = _ref.defaultIsSelected,
257
+ defaultIsSelected = _ref$defaultIsSelecte === void 0 ? false : _ref$defaultIsSelecte;
258
+ var _React$useState = React__default.useState(false),
259
+ isHovered = _React$useState[0],
260
+ setIsHovered = _React$useState[1];
261
+ var _React$useState2 = React__default.useState(defaultIsSelected),
262
+ isSelected = _React$useState2[0],
263
+ setIsSelected = _React$useState2[1];
264
+ return {
265
+ isHovered: isHovered,
266
+ setIsHovered: setIsHovered,
267
+ isSelected: isSelected,
268
+ setIsSelected: setIsSelected
269
+ };
270
+ };
271
+
272
+ var Sizes = {
273
+ xs: {
274
+ height: 8,
275
+ width: 8
276
+ },
277
+ sm: {
278
+ height: 12,
279
+ width: 12
280
+ },
281
+ md: {
282
+ height: 18,
283
+ width: 18
284
+ },
285
+ lg: {
286
+ height: 24,
287
+ width: 24
288
+ },
289
+ xl: {
290
+ height: 30,
291
+ width: 30
292
+ },
293
+ '2xl': {
294
+ height: 36,
295
+ width: 36
296
+ },
297
+ '3xl': {
298
+ height: 42,
299
+ width: 42
300
+ },
301
+ '4xl': {
302
+ height: 48,
303
+ width: 48
304
+ },
305
+ '5xl': {
306
+ height: 54,
307
+ width: 54
308
+ },
309
+ '6xl': {
310
+ height: 60,
311
+ width: 60
312
+ }
313
+ };
314
+ var IconSizes$1 = {
315
+ xs: 6,
316
+ sm: 12,
317
+ md: 18,
318
+ lg: 24,
319
+ xl: 30,
320
+ '2xl': 36,
321
+ '3xl': 42,
322
+ '4xl': 48,
323
+ '5xl': 54,
324
+ '6xl': 60
325
+ };
326
+
327
+ var _excluded$1 = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
328
+ var CheckboxView = function CheckboxView(_ref) {
329
+ var id = _ref.id,
330
+ icon = _ref.icon,
331
+ label = _ref.label,
332
+ isChecked = _ref.isChecked,
333
+ onChange = _ref.onChange,
334
+ onValueChange = _ref.onValueChange,
335
+ _ref$shadow = _ref.shadow,
336
+ shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
337
+ _ref$size = _ref.size,
338
+ size = _ref$size === void 0 ? 'md' : _ref$size,
339
+ _ref$colorScheme = _ref.colorScheme,
340
+ colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
341
+ _ref$error = _ref.error,
342
+ error = _ref$error === void 0 ? false : _ref$error,
343
+ _ref$isSelected = _ref.isSelected,
344
+ isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
345
+ _ref$isHovered = _ref.isHovered,
346
+ isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
347
+ _ref$isDisabled = _ref.isDisabled,
348
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
349
+ _ref$isReadOnly = _ref.isReadOnly,
350
+ isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
351
+ _ref$isIndeterminate = _ref.isIndeterminate,
352
+ isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
353
+ _ref$setIsSelected = _ref.setIsSelected,
354
+ setIsSelected = _ref$setIsSelected === void 0 ? function () {} : _ref$setIsSelected,
355
+ _ref$setIsHovered = _ref.setIsHovered,
356
+ setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
357
+ _ref$styles = _ref.styles,
358
+ styles = _ref$styles === void 0 ? {
359
+ checkbox: {},
360
+ label: {}
361
+ } : _ref$styles,
362
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
363
+ var handleHover = function handleHover() {
364
+ return setIsHovered(!isHovered);
365
+ };
366
+ var handleChange = function handleChange() {
367
+ if (!isReadOnly && !isDisabled) {
368
+ if (isChecked === undefined) {
369
+ setIsSelected(!isSelected);
370
+ } else {
371
+ if (onChange) onChange(!isChecked);
372
+ if (onValueChange) onValueChange(!isChecked);
373
+ }
374
+ }
375
+ };
376
+ var checkboxStyle = {
377
+ container: Object.assign({
378
+ gap: 10,
379
+ display: 'flex',
380
+ alignItems: 'center',
381
+ height: 'fit-content',
382
+ width: 'fit-content',
383
+ color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
384
+ cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
385
+ }, styles['label']),
386
+ checkbox: Object.assign({}, isDisabled ? {
387
+ backgroundColor: 'theme.disabled'
388
+ } : (isChecked || isSelected) && !isIndeterminate || isIndeterminate ? {
389
+ backgroundColor: colorScheme
390
+ } : {
391
+ borderWidth: 2,
392
+ borderColor: error ? 'theme.error' : isHovered ? 'color.gray.500' : 'color.gray.300',
393
+ borderStyle: 'solid'
394
+ }, {
395
+ borderRadius: 3,
396
+ filter: isHovered ? 'brightness(0.9)' : undefined
397
+ }, Sizes[size], shadow, styles['checkbox'])
398
+ };
399
+ return /*#__PURE__*/React__default.createElement(Label.Label, Object.assign({
400
+ htmlFor: id,
401
+ as: "div",
402
+ onClick: handleChange,
403
+ onMouseEnter: handleHover,
404
+ onMouseLeave: handleHover,
405
+ size: appStudio.Typography.fontSizes[size]
406
+ }, checkboxStyle.container, props), /*#__PURE__*/React__default.createElement(components.Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? /*#__PURE__*/React__default.createElement(Svg.IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(Svg.CheckSvg, {
407
+ size: IconSizes$1[size]
408
+ }))), label);
409
+ };
410
+
411
+ var CheckboxComponent = function CheckboxComponent(props) {
412
+ var checkboxStates = useCheckboxState(props);
413
+ return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, props));
414
+ };
415
+ /**
416
+ * Checkbox allows users to select one or more options from a list of choices.
417
+ */
418
+ var Checkbox = CheckboxComponent;
419
+
420
+ var countryList = [
421
+ {
422
+ name: "Afghanistan",
423
+ dial_code: "+93",
424
+ emoji: "🇦🇫",
425
+ code: "AF"
426
+ },
427
+ {
428
+ name: "Aland Islands",
429
+ dial_code: "+358",
430
+ emoji: "🇦🇽",
431
+ code: "AX"
432
+ },
433
+ {
434
+ name: "Albania",
435
+ dial_code: "+355",
436
+ emoji: "🇦🇱",
437
+ code: "AL"
438
+ },
439
+ {
440
+ name: "Algeria",
441
+ dial_code: "+213",
442
+ emoji: "🇩🇿",
443
+ code: "DZ"
444
+ },
445
+ {
446
+ name: "AmericanSamoa",
447
+ dial_code: "+1684",
448
+ emoji: "🇦🇸",
449
+ code: "AS"
450
+ },
451
+ {
452
+ name: "Andorra",
453
+ dial_code: "+376",
454
+ emoji: "🇦🇩",
455
+ code: "AD"
456
+ },
457
+ {
458
+ name: "Angola",
459
+ dial_code: "+244",
460
+ emoji: "🇦🇴",
461
+ code: "AO"
462
+ },
463
+ {
464
+ name: "Anguilla",
465
+ dial_code: "+1264",
466
+ emoji: "🇦🇮",
467
+ code: "AI"
468
+ },
469
+ {
470
+ name: "Antarctica",
471
+ dial_code: "+672",
472
+ emoji: "🇦🇶",
473
+ code: "AQ"
474
+ },
475
+ {
476
+ name: "Antigua and Barbuda",
477
+ dial_code: "+1268",
478
+ emoji: "🇦🇬",
479
+ code: "AG"
480
+ },
481
+ {
482
+ name: "Argentina",
483
+ dial_code: "+54",
484
+ emoji: "🇦🇷",
485
+ code: "AR"
486
+ },
487
+ {
488
+ name: "Armenia",
489
+ dial_code: "+374",
490
+ emoji: "🇦🇲",
491
+ code: "AM"
492
+ },
493
+ {
494
+ name: "Aruba",
495
+ dial_code: "+297",
496
+ emoji: "🇦🇼",
497
+ code: "AW"
498
+ },
499
+ {
500
+ name: "Australia",
501
+ dial_code: "+61",
502
+ emoji: "🇦🇺",
503
+ code: "AU"
504
+ },
505
+ {
506
+ name: "Austria",
507
+ dial_code: "+43",
508
+ emoji: "🇦🇹",
509
+ code: "AT"
510
+ },
511
+ {
512
+ name: "Azerbaijan",
513
+ dial_code: "+994",
514
+ emoji: "🇦🇿",
515
+ code: "AZ"
516
+ },
517
+ {
518
+ name: "Bahamas",
519
+ dial_code: "+1242",
520
+ emoji: "🇧🇸",
521
+ code: "BS"
522
+ },
523
+ {
524
+ name: "Bahrain",
525
+ dial_code: "+973",
526
+ emoji: "🇧🇭",
527
+ code: "BH"
528
+ },
529
+ {
530
+ name: "Bangladesh",
531
+ dial_code: "+880",
532
+ emoji: "🇧🇩",
533
+ code: "BD"
534
+ },
535
+ {
536
+ name: "Barbados",
537
+ dial_code: "+1246",
538
+ emoji: "🇧🇧",
539
+ code: "BB"
540
+ },
541
+ {
542
+ name: "Belarus",
543
+ dial_code: "+375",
544
+ emoji: "🇧🇾",
545
+ code: "BY"
546
+ },
547
+ {
548
+ name: "Belgium",
549
+ dial_code: "+32",
550
+ emoji: "🇧🇪",
551
+ code: "BE"
552
+ },
553
+ {
554
+ name: "Belize",
555
+ dial_code: "+501",
556
+ emoji: "🇧🇿",
557
+ code: "BZ"
558
+ },
559
+ {
560
+ name: "Benin",
561
+ dial_code: "+229",
562
+ emoji: "🇧🇯",
563
+ code: "BJ"
564
+ },
565
+ {
566
+ name: "Bermuda",
567
+ dial_code: "+1441",
568
+ emoji: "🇧🇲",
569
+ code: "BM"
570
+ },
571
+ {
572
+ name: "Bhutan",
573
+ dial_code: "+975",
574
+ emoji: "🇧🇹",
575
+ code: "BT"
576
+ },
577
+ {
578
+ name: "Bolivia, Plurinational State of",
579
+ dial_code: "+591",
580
+ emoji: "🇧🇴",
581
+ code: "BO"
582
+ },
583
+ {
584
+ name: "Bosnia and Herzegovina",
585
+ dial_code: "+387",
586
+ emoji: "🇧🇦",
587
+ code: "BA"
588
+ },
589
+ {
590
+ name: "Botswana",
591
+ dial_code: "+267",
592
+ emoji: "🇧🇼",
593
+ code: "BW"
594
+ },
595
+ {
596
+ name: "Brazil",
597
+ dial_code: "+55",
598
+ emoji: "🇧🇷",
599
+ code: "BR"
600
+ },
601
+ {
602
+ name: "British Indian Ocean Territory",
603
+ dial_code: "+246",
604
+ emoji: "🇮🇴",
605
+ code: "IO"
606
+ },
607
+ {
608
+ name: "Brunei Darussalam",
609
+ dial_code: "+673",
610
+ emoji: "🇧🇳",
611
+ code: "BN"
612
+ },
613
+ {
614
+ name: "Bulgaria",
615
+ dial_code: "+359",
616
+ emoji: "🇧🇬",
617
+ code: "BG"
618
+ },
619
+ {
620
+ name: "Burkina Faso",
621
+ dial_code: "+226",
622
+ emoji: "🇧🇫",
623
+ code: "BF"
624
+ },
625
+ {
626
+ name: "Burundi",
627
+ dial_code: "+257",
628
+ emoji: "🇧🇮",
629
+ code: "BI"
630
+ },
631
+ {
632
+ name: "Cambodia",
633
+ dial_code: "+855",
634
+ emoji: "🇰🇭",
635
+ code: "KH"
636
+ },
637
+ {
638
+ name: "Cameroon",
639
+ dial_code: "+237",
640
+ emoji: "🇨🇲",
641
+ code: "CM"
642
+ },
643
+ {
644
+ name: "Canada",
645
+ dial_code: "+1",
646
+ emoji: "🇨🇦",
647
+ code: "CA"
648
+ },
649
+ {
650
+ name: "Cape Verde",
651
+ dial_code: "+238",
652
+ emoji: "🇨🇻",
653
+ code: "CV"
654
+ },
655
+ {
656
+ name: "Cayman Islands",
657
+ dial_code: "+345",
658
+ emoji: "🇰🇾",
659
+ code: "KY"
660
+ },
661
+ {
662
+ name: "Central African Republic",
663
+ dial_code: "+236",
664
+ emoji: "🇨🇫",
665
+ code: "CF"
666
+ },
667
+ {
668
+ name: "Chad",
669
+ dial_code: "+235",
670
+ emoji: "🇹🇩",
671
+ code: "TD"
672
+ },
673
+ {
674
+ name: "Chile",
675
+ dial_code: "+56",
676
+ emoji: "🇨🇱",
677
+ code: "CL"
678
+ },
679
+ {
680
+ name: "China",
681
+ dial_code: "+86",
682
+ emoji: "🇨🇳",
683
+ code: "CN"
684
+ },
685
+ {
686
+ name: "Christmas Island",
687
+ dial_code: "+61",
688
+ emoji: "🇨🇽",
689
+ code: "CX"
690
+ },
691
+ {
692
+ name: "Cocos (Keeling) Islands",
693
+ dial_code: "+61",
694
+ emoji: "🇨🇨",
695
+ code: "CC"
696
+ },
697
+ {
698
+ name: "Colombia",
699
+ dial_code: "+57",
700
+ emoji: "🇨🇴",
701
+ code: "CO"
702
+ },
703
+ {
704
+ name: "Comoros",
705
+ dial_code: "+269",
706
+ emoji: "🇰🇲",
707
+ code: "KM"
708
+ },
709
+ {
710
+ name: "Congo",
711
+ dial_code: "+242",
712
+ emoji: "🇨🇬",
713
+ code: "CG"
714
+ },
715
+ {
716
+ name: "Congo, The Democratic Republic of the Congo",
717
+ dial_code: "+243",
718
+ emoji: "🇨🇩",
719
+ code: "CD"
720
+ },
721
+ {
722
+ name: "Cook Islands",
723
+ dial_code: "+682",
724
+ emoji: "🇨🇰",
725
+ code: "CK"
726
+ },
727
+ {
728
+ name: "Costa Rica",
729
+ dial_code: "+506",
730
+ emoji: "🇨🇷",
731
+ code: "CR"
732
+ },
733
+ {
734
+ name: "Cote d'Ivoire",
735
+ dial_code: "+225",
736
+ emoji: "🇨🇮",
737
+ code: "CI"
738
+ },
739
+ {
740
+ name: "Croatia",
741
+ dial_code: "+385",
742
+ emoji: "🇭🇷",
743
+ code: "HR"
744
+ },
745
+ {
746
+ name: "Cuba",
747
+ dial_code: "+53",
748
+ emoji: "🇨🇺",
749
+ code: "CU"
750
+ },
751
+ {
752
+ name: "Cyprus",
753
+ dial_code: "+357",
754
+ emoji: "🇨🇾",
755
+ code: "CY"
756
+ },
757
+ {
758
+ name: "Czech Republic",
759
+ dial_code: "+420",
760
+ emoji: "🇨🇿",
761
+ code: "CZ"
762
+ },
763
+ {
764
+ name: "Denmark",
765
+ dial_code: "+45",
766
+ emoji: "🇩🇰",
767
+ code: "DK"
768
+ },
769
+ {
770
+ name: "Djibouti",
771
+ dial_code: "+253",
772
+ emoji: "🇩🇯",
773
+ code: "DJ"
774
+ },
775
+ {
776
+ name: "Dominica",
777
+ dial_code: "+1767",
778
+ emoji: "🇩🇲",
779
+ code: "DM"
780
+ },
781
+ {
782
+ name: "Dominican Republic",
783
+ dial_code: "+1849",
784
+ emoji: "🇩🇴",
785
+ code: "DO"
786
+ },
787
+ {
788
+ name: "Ecuador",
789
+ dial_code: "+593",
790
+ emoji: "🇪🇨",
791
+ code: "EC"
792
+ },
793
+ {
794
+ name: "Egypt",
795
+ dial_code: "+20",
796
+ emoji: "🇪🇬",
797
+ code: "EG"
798
+ },
799
+ {
800
+ name: "El Salvador",
801
+ dial_code: "+503",
802
+ emoji: "🇸🇻",
803
+ code: "SV"
804
+ },
805
+ {
806
+ name: "Equatorial Guinea",
807
+ dial_code: "+240",
808
+ emoji: "🇬🇶",
809
+ code: "GQ"
810
+ },
811
+ {
812
+ name: "Eritrea",
813
+ dial_code: "+291",
814
+ emoji: "🇪🇷",
815
+ code: "ER"
816
+ },
817
+ {
818
+ name: "Estonia",
819
+ dial_code: "+372",
820
+ emoji: "🇪🇪",
821
+ code: "EE"
822
+ },
823
+ {
824
+ name: "Ethiopia",
825
+ dial_code: "+251",
826
+ emoji: "🇪🇹",
827
+ code: "ET"
828
+ },
829
+ {
830
+ name: "Falkland Islands (Malvinas)",
831
+ dial_code: "+500",
832
+ emoji: "🇫🇰",
833
+ code: "FK"
834
+ },
835
+ {
836
+ name: "Faroe Islands",
837
+ dial_code: "+298",
838
+ emoji: "🇫🇴",
839
+ code: "FO"
840
+ },
841
+ {
842
+ name: "Fiji",
843
+ dial_code: "+679",
844
+ emoji: "🇫🇯",
845
+ code: "FJ"
846
+ },
847
+ {
848
+ name: "Finland",
849
+ dial_code: "+358",
850
+ emoji: "🇫🇮",
851
+ code: "FI"
852
+ },
853
+ {
854
+ name: "France",
855
+ dial_code: "+33",
856
+ emoji: "🇫🇷",
857
+ code: "FR"
858
+ },
859
+ {
860
+ name: "French Guiana",
861
+ dial_code: "+594",
862
+ emoji: "🇬🇫",
863
+ code: "GF"
864
+ },
865
+ {
866
+ name: "French Polynesia",
867
+ dial_code: "+689",
868
+ emoji: "🇵🇫",
869
+ code: "PF"
870
+ },
871
+ {
872
+ name: "Gabon",
873
+ dial_code: "+241",
874
+ emoji: "🇬🇦",
875
+ code: "GA"
876
+ },
877
+ {
878
+ name: "Gambia",
879
+ dial_code: "+220",
880
+ emoji: "🇬🇲",
881
+ code: "GM"
882
+ },
883
+ {
884
+ name: "Georgia",
885
+ dial_code: "+995",
886
+ emoji: "🇬🇪",
887
+ code: "GE"
888
+ },
889
+ {
890
+ name: "Germany",
891
+ dial_code: "+49",
892
+ emoji: "🇩🇪",
893
+ code: "DE"
894
+ },
895
+ {
896
+ name: "Ghana",
897
+ dial_code: "+233",
898
+ emoji: "🇬🇭",
899
+ code: "GH"
900
+ },
901
+ {
902
+ name: "Gibraltar",
903
+ dial_code: "+350",
904
+ emoji: "🇬🇮",
905
+ code: "GI"
906
+ },
907
+ {
908
+ name: "Greece",
909
+ dial_code: "+30",
910
+ emoji: "🇬🇷",
911
+ code: "GR"
912
+ },
913
+ {
914
+ name: "Greenland",
915
+ dial_code: "+299",
916
+ emoji: "🇬🇱",
917
+ code: "GL"
918
+ },
919
+ {
920
+ name: "Grenada",
921
+ dial_code: "+1473",
922
+ emoji: "🇬🇩",
923
+ code: "GD"
924
+ },
925
+ {
926
+ name: "Guadeloupe",
927
+ dial_code: "+590",
928
+ emoji: "🇬🇵",
929
+ code: "GP"
930
+ },
931
+ {
932
+ name: "Guam",
933
+ dial_code: "+1671",
934
+ emoji: "🇬🇺",
935
+ code: "GU"
936
+ },
937
+ {
938
+ name: "Guatemala",
939
+ dial_code: "+502",
940
+ emoji: "🇬🇹",
941
+ code: "GT"
942
+ },
943
+ {
944
+ name: "Guernsey",
945
+ dial_code: "+44",
946
+ emoji: "🇬🇬",
947
+ code: "GG"
948
+ },
949
+ {
950
+ name: "Guinea",
951
+ dial_code: "+224",
952
+ emoji: "🇬🇳",
953
+ code: "GN"
954
+ },
955
+ {
956
+ name: "Guinea-Bissau",
957
+ dial_code: "+245",
958
+ emoji: "🇬🇼",
959
+ code: "GW"
960
+ },
961
+ {
962
+ name: "Guyana",
963
+ dial_code: "+595",
964
+ emoji: "🇬🇾",
965
+ code: "GY"
966
+ },
967
+ {
968
+ name: "Haiti",
969
+ dial_code: "+509",
970
+ emoji: "🇭🇹",
971
+ code: "HT"
972
+ },
973
+ {
974
+ name: "Holy See (Vatican City State)",
975
+ dial_code: "+379",
976
+ emoji: "🇻🇦",
977
+ code: "VA"
978
+ },
979
+ {
980
+ name: "Honduras",
981
+ dial_code: "+504",
982
+ emoji: "🇭🇳",
983
+ code: "HN"
984
+ },
985
+ {
986
+ name: "Hong Kong",
987
+ dial_code: "+852",
988
+ emoji: "🇭🇰",
989
+ code: "HK"
990
+ },
991
+ {
992
+ name: "Hungary",
993
+ dial_code: "+36",
994
+ emoji: "🇭🇺",
995
+ code: "HU"
996
+ },
997
+ {
998
+ name: "Iceland",
999
+ dial_code: "+354",
1000
+ emoji: "🇮🇸",
1001
+ code: "IS"
1002
+ },
1003
+ {
1004
+ name: "India",
1005
+ dial_code: "+91",
1006
+ emoji: "🇮🇳",
1007
+ code: "IN"
1008
+ },
1009
+ {
1010
+ name: "Indonesia",
1011
+ dial_code: "+62",
1012
+ emoji: "🇮🇩",
1013
+ code: "ID"
1014
+ },
1015
+ {
1016
+ name: "Iran, Islamic Republic of Persian Gulf",
1017
+ dial_code: "+98",
1018
+ emoji: "🇮🇷",
1019
+ code: "IR"
1020
+ },
1021
+ {
1022
+ name: "Iraq",
1023
+ dial_code: "+964",
1024
+ emoji: "🇮🇷",
1025
+ code: "IQ"
1026
+ },
1027
+ {
1028
+ name: "Ireland",
1029
+ dial_code: "+353",
1030
+ emoji: "🇮🇪",
1031
+ code: "IE"
1032
+ },
1033
+ {
1034
+ name: "Isle of Man",
1035
+ dial_code: "+44",
1036
+ emoji: "🇮🇲",
1037
+ code: "IM"
1038
+ },
1039
+ {
1040
+ name: "Israel",
1041
+ dial_code: "+972",
1042
+ emoji: "🇮🇱",
1043
+ code: "IL"
1044
+ },
1045
+ {
1046
+ name: "Italy",
1047
+ dial_code: "+39",
1048
+ emoji: "🇮🇹",
1049
+ code: "IT"
1050
+ },
1051
+ {
1052
+ name: "Jamaica",
1053
+ dial_code: "+1876",
1054
+ emoji: "🇯🇲",
1055
+ code: "JM"
1056
+ },
1057
+ {
1058
+ name: "Japan",
1059
+ dial_code: "+81",
1060
+ emoji: "🇯🇵",
1061
+ code: "JP"
1062
+ },
1063
+ {
1064
+ name: "Jersey",
1065
+ dial_code: "+44",
1066
+ emoji: "🇯🇪",
1067
+ code: "JE"
1068
+ },
1069
+ {
1070
+ name: "Jordan",
1071
+ dial_code: "+962",
1072
+ emoji: "🇯🇴",
1073
+ code: "JO"
1074
+ },
1075
+ {
1076
+ name: "Kazakhstan",
1077
+ dial_code: "+77",
1078
+ emoji: "🇰🇿",
1079
+ code: "KZ"
1080
+ },
1081
+ {
1082
+ name: "Kenya",
1083
+ dial_code: "+254",
1084
+ emoji: "🇰🇪",
1085
+ code: "KE"
1086
+ },
1087
+ {
1088
+ name: "Kiribati",
1089
+ dial_code: "+686",
1090
+ emoji: "🇰🇮",
1091
+ code: "KI"
1092
+ },
1093
+ {
1094
+ name: "Korea, Democratic People's Republic of Korea",
1095
+ dial_code: "+850",
1096
+ emoji: "🇰🇵",
1097
+ code: "KP"
1098
+ },
1099
+ {
1100
+ name: "Korea, Republic of South Korea",
1101
+ dial_code: "+82",
1102
+ emoji: "🇰🇷",
1103
+ code: "KR"
1104
+ },
1105
+ {
1106
+ name: "Kuwait",
1107
+ dial_code: "+965",
1108
+ emoji: "🇰🇼",
1109
+ code: "KW"
1110
+ },
1111
+ {
1112
+ name: "Kyrgyzstan",
1113
+ dial_code: "+996",
1114
+ emoji: "🇰🇬",
1115
+ code: "KG"
1116
+ },
1117
+ {
1118
+ name: "Laos",
1119
+ dial_code: "+856",
1120
+ emoji: "🇱🇦",
1121
+ code: "LA"
1122
+ },
1123
+ {
1124
+ name: "Latvia",
1125
+ dial_code: "+371",
1126
+ emoji: "🇱🇻",
1127
+ code: "LV"
1128
+ },
1129
+ {
1130
+ name: "Lebanon",
1131
+ dial_code: "+961",
1132
+ emoji: "🇱🇧",
1133
+ code: "LB"
1134
+ },
1135
+ {
1136
+ name: "Lesotho",
1137
+ dial_code: "+266",
1138
+ emoji: "🇱🇸",
1139
+ code: "LS"
1140
+ },
1141
+ {
1142
+ name: "Liberia",
1143
+ dial_code: "+231",
1144
+ emoji: "🇱🇷",
1145
+ code: "LR"
1146
+ },
1147
+ {
1148
+ name: "Libyan Arab Jamahiriya",
1149
+ dial_code: "+218",
1150
+ emoji: "🇱🇾",
1151
+ code: "LY"
1152
+ },
1153
+ {
1154
+ name: "Liechtenstein",
1155
+ dial_code: "+423",
1156
+ emoji: "🇱🇮",
1157
+ code: "LI"
1158
+ },
1159
+ {
1160
+ name: "Lithuania",
1161
+ dial_code: "+370",
1162
+ emoji: "🇱🇹",
1163
+ code: "LT"
1164
+ },
1165
+ {
1166
+ name: "Luxembourg",
1167
+ dial_code: "+352",
1168
+ emoji: "🇱🇺",
1169
+ code: "LU"
1170
+ },
1171
+ {
1172
+ name: "Macao",
1173
+ dial_code: "+853",
1174
+ emoji: "🇲🇴",
1175
+ code: "MO"
1176
+ },
1177
+ {
1178
+ name: "Macedonia",
1179
+ dial_code: "+389",
1180
+ emoji: "🇲🇰",
1181
+ code: "MK"
1182
+ },
1183
+ {
1184
+ name: "Madagascar",
1185
+ dial_code: "+261",
1186
+ emoji: "🇲🇬",
1187
+ code: "MG"
1188
+ },
1189
+ {
1190
+ name: "Malawi",
1191
+ dial_code: "+265",
1192
+ emoji: "🇲🇼",
1193
+ code: "MW"
1194
+ },
1195
+ {
1196
+ name: "Malaysia",
1197
+ dial_code: "+60",
1198
+ emoji: "🇲🇾",
1199
+ code: "MY"
1200
+ },
1201
+ {
1202
+ name: "Maldives",
1203
+ dial_code: "+960",
1204
+ emoji: "🇲🇻",
1205
+ code: "MV"
1206
+ },
1207
+ {
1208
+ name: "Mali",
1209
+ dial_code: "+223",
1210
+ emoji: "🇲🇱",
1211
+ code: "ML"
1212
+ },
1213
+ {
1214
+ name: "Malta",
1215
+ dial_code: "+356",
1216
+ emoji: "🇲🇹",
1217
+ code: "MT"
1218
+ },
1219
+ {
1220
+ name: "Marshall Islands",
1221
+ dial_code: "+692",
1222
+ emoji: "🇲🇭",
1223
+ code: "MH"
1224
+ },
1225
+ {
1226
+ name: "Martinique",
1227
+ dial_code: "+596",
1228
+ emoji: "🇲🇶",
1229
+ code: "MQ"
1230
+ },
1231
+ {
1232
+ name: "Mauritania",
1233
+ dial_code: "+222",
1234
+ emoji: "🇲🇷",
1235
+ code: "MR"
1236
+ },
1237
+ {
1238
+ name: "Mauritius",
1239
+ dial_code: "+230",
1240
+ emoji: "🇲🇺",
1241
+ code: "MU"
1242
+ },
1243
+ {
1244
+ name: "Mayotte",
1245
+ dial_code: "+262",
1246
+ emoji: "🇾🇹",
1247
+ code: "YT"
1248
+ },
1249
+ {
1250
+ name: "Mexico",
1251
+ dial_code: "+52",
1252
+ emoji: "🇲🇽",
1253
+ code: "MX"
1254
+ },
1255
+ {
1256
+ name: "Micronesia, Federated States of Micronesia",
1257
+ dial_code: "+691",
1258
+ emoji: "🇫🇲",
1259
+ code: "FM"
1260
+ },
1261
+ {
1262
+ name: "Moldova",
1263
+ dial_code: "+373",
1264
+ emoji: "🇲🇩",
1265
+ code: "MD"
1266
+ },
1267
+ {
1268
+ name: "Monaco",
1269
+ dial_code: "+377",
1270
+ emoji: "🇲🇨",
1271
+ code: "MC"
1272
+ },
1273
+ {
1274
+ name: "Mongolia",
1275
+ dial_code: "+976",
1276
+ emoji: "🇲🇳",
1277
+ code: "MN"
1278
+ },
1279
+ {
1280
+ name: "Montenegro",
1281
+ dial_code: "+382",
1282
+ emoji: "🇲🇪",
1283
+ code: "ME"
1284
+ },
1285
+ {
1286
+ name: "Montserrat",
1287
+ dial_code: "+1664",
1288
+ emoji: "🇲🇸",
1289
+ code: "MS"
1290
+ },
1291
+ {
1292
+ name: "Morocco",
1293
+ dial_code: "+212",
1294
+ emoji: "🇲🇦",
1295
+ code: "MA"
1296
+ },
1297
+ {
1298
+ name: "Mozambique",
1299
+ dial_code: "+258",
1300
+ emoji: "🇲🇿",
1301
+ code: "MZ"
1302
+ },
1303
+ {
1304
+ name: "Myanmar",
1305
+ dial_code: "+95",
1306
+ emoji: "🇲🇲",
1307
+ code: "MM"
1308
+ },
1309
+ {
1310
+ name: "Namibia",
1311
+ emoji: "🇳🇦",
1312
+ dial_code: "+264",
1313
+ code: "NA"
1314
+ },
1315
+ {
1316
+ name: "Nauru",
1317
+ dial_code: "+674",
1318
+ emoji: "🇳🇷",
1319
+ code: "NR"
1320
+ },
1321
+ {
1322
+ name: "Nepal",
1323
+ dial_code: "+977",
1324
+ emoji: "🇳🇵",
1325
+ code: "NP"
1326
+ },
1327
+ {
1328
+ name: "Netherlands",
1329
+ dial_code: "+31",
1330
+ emoji: "🇳🇱",
1331
+ code: "NL"
1332
+ },
1333
+ {
1334
+ name: "Netherlands Antilles",
1335
+ dial_code: "+599",
1336
+ emoji: "🇧🇶",
1337
+ code: "AN"
1338
+ },
1339
+ {
1340
+ name: "New Caledonia",
1341
+ dial_code: "+687",
1342
+ emoji: "🇳🇨",
1343
+ code: "NC"
1344
+ },
1345
+ {
1346
+ name: "New Zealand",
1347
+ dial_code: "+64",
1348
+ emoji: "🇳🇿",
1349
+ code: "NZ"
1350
+ },
1351
+ {
1352
+ name: "Nicaragua",
1353
+ dial_code: "+505",
1354
+ emoji: "🇳🇮",
1355
+ code: "NI"
1356
+ },
1357
+ {
1358
+ name: "Niger",
1359
+ dial_code: "+227",
1360
+ emoji: "🇳🇪",
1361
+ code: "NE"
1362
+ },
1363
+ {
1364
+ name: "Nigeria",
1365
+ dial_code: "+234",
1366
+ emoji: "🇳🇬",
1367
+ code: "NG"
1368
+ },
1369
+ {
1370
+ name: "Niue",
1371
+ dial_code: "+683",
1372
+ emoji: "🇳🇺",
1373
+ code: "NU"
1374
+ },
1375
+ {
1376
+ name: "Norfolk Island",
1377
+ dial_code: "+672",
1378
+ emoji: "🇳🇫",
1379
+ code: "NF"
1380
+ },
1381
+ {
1382
+ name: "Northern Mariana Islands",
1383
+ dial_code: "+1670",
1384
+ emoji: "🇲🇵",
1385
+ code: "MP"
1386
+ },
1387
+ {
1388
+ name: "Norway",
1389
+ dial_code: "+47",
1390
+ emoji: "🇳🇴",
1391
+ code: "NO"
1392
+ },
1393
+ {
1394
+ name: "Oman",
1395
+ dial_code: "+968",
1396
+ emoji: "🇴🇲",
1397
+ code: "OM"
1398
+ },
1399
+ {
1400
+ name: "Pakistan",
1401
+ dial_code: "+92",
1402
+ emoji: "🇵🇰",
1403
+ code: "PK"
1404
+ },
1405
+ {
1406
+ name: "Palau",
1407
+ dial_code: "+680",
1408
+ emoji: "🇵🇼",
1409
+ code: "PW"
1410
+ },
1411
+ {
1412
+ name: "Palestinian Territory, Occupied",
1413
+ dial_code: "+970",
1414
+ emoji: "🇵🇸",
1415
+ code: "PS"
1416
+ },
1417
+ {
1418
+ name: "Panama",
1419
+ dial_code: "+507",
1420
+ emoji: "🇵🇦",
1421
+ code: "PA"
1422
+ },
1423
+ {
1424
+ name: "Papua New Guinea",
1425
+ dial_code: "+675",
1426
+ emoji: "🇵🇬",
1427
+ code: "PG"
1428
+ },
1429
+ {
1430
+ name: "Paraguay",
1431
+ dial_code: "+595",
1432
+ emoji: "🇵🇾",
1433
+ code: "PY"
1434
+ },
1435
+ {
1436
+ name: "Peru",
1437
+ dial_code: "+51",
1438
+ emoji: "🇵🇪",
1439
+ code: "PE"
1440
+ },
1441
+ {
1442
+ name: "Philippines",
1443
+ dial_code: "+63",
1444
+ emoji: "🇵🇭",
1445
+ code: "PH"
1446
+ },
1447
+ {
1448
+ name: "Pitcairn",
1449
+ dial_code: "+872",
1450
+ emoji: "🇵🇳",
1451
+ code: "PN"
1452
+ },
1453
+ {
1454
+ name: "Poland",
1455
+ dial_code: "+48",
1456
+ emoji: "🇵🇱",
1457
+ code: "PL"
1458
+ },
1459
+ {
1460
+ name: "Portugal",
1461
+ dial_code: "+351",
1462
+ emoji: "🇵🇹",
1463
+ code: "PT"
1464
+ },
1465
+ {
1466
+ name: "Puerto Rico",
1467
+ dial_code: "+1939",
1468
+ emoji: "🇵🇷",
1469
+ code: "PR"
1470
+ },
1471
+ {
1472
+ name: "Qatar",
1473
+ dial_code: "+974",
1474
+ emoji: "🇶🇦",
1475
+ code: "QA"
1476
+ },
1477
+ {
1478
+ name: "Romania",
1479
+ dial_code: "+40",
1480
+ emoji: "🇷🇴",
1481
+ code: "RO"
1482
+ },
1483
+ {
1484
+ name: "Russia",
1485
+ dial_code: "+7",
1486
+ emoji: "🇷🇺",
1487
+ code: "RU"
1488
+ },
1489
+ {
1490
+ name: "Rwanda",
1491
+ dial_code: "+250",
1492
+ emoji: "🇷🇼",
1493
+ code: "RW"
1494
+ },
1495
+ {
1496
+ name: "Reunion",
1497
+ dial_code: "+262",
1498
+ emoji: "🇷🇪",
1499
+ code: "RE"
1500
+ },
1501
+ {
1502
+ name: "Saint Barthelemy",
1503
+ dial_code: "+590",
1504
+ emoji: "🇧🇱",
1505
+ code: "BL"
1506
+ },
1507
+ {
1508
+ name: "Saint Helena, Ascension and Tristan Da Cunha",
1509
+ dial_code: "+290",
1510
+ emoji: "🇸🇭",
1511
+ code: "SH"
1512
+ },
1513
+ {
1514
+ name: "Saint Kitts and Nevis",
1515
+ dial_code: "+1869",
1516
+ emoji: "🇰🇳",
1517
+ code: "KN"
1518
+ },
1519
+ {
1520
+ name: "Saint Lucia",
1521
+ dial_code: "+1758",
1522
+ emoji: "🇱🇨",
1523
+ code: "LC"
1524
+ },
1525
+ {
1526
+ name: "Saint Martin",
1527
+ dial_code: "+590",
1528
+ emoji: "🇲🇫",
1529
+ code: "MF"
1530
+ },
1531
+ {
1532
+ name: "Saint Pierre and Miquelon",
1533
+ dial_code: "+508",
1534
+ emoji: "🇵🇲",
1535
+ code: "PM"
1536
+ },
1537
+ {
1538
+ name: "Saint Vincent and the Grenadines",
1539
+ dial_code: "+1784",
1540
+ emoji: "🇻🇨",
1541
+ code: "VC"
1542
+ },
1543
+ {
1544
+ name: "Samoa",
1545
+ dial_code: "+685",
1546
+ emoji: "🇼🇸",
1547
+ code: "WS"
1548
+ },
1549
+ {
1550
+ name: "San Marino",
1551
+ dial_code: "+378",
1552
+ emoji: "🇸🇲",
1553
+ code: "SM"
1554
+ },
1555
+ {
1556
+ name: "Sao Tome and Principe",
1557
+ dial_code: "+239",
1558
+ emoji: "🇸🇹",
1559
+ code: "ST"
1560
+ },
1561
+ {
1562
+ name: "Saudi Arabia",
1563
+ dial_code: "+966",
1564
+ emoji: "🇸🇦",
1565
+ code: "SA"
1566
+ },
1567
+ {
1568
+ name: "Senegal",
1569
+ dial_code: "+221",
1570
+ emoji: "🇸🇳",
1571
+ code: "SN"
1572
+ },
1573
+ {
1574
+ name: "Serbia",
1575
+ dial_code: "+381",
1576
+ emoji: "🇷🇸",
1577
+ code: "RS"
1578
+ },
1579
+ {
1580
+ name: "Seychelles",
1581
+ dial_code: "+248",
1582
+ emoji: "🇸🇨",
1583
+ code: "SC"
1584
+ },
1585
+ {
1586
+ name: "Sierra Leone",
1587
+ dial_code: "+232",
1588
+ emoji: "🇸🇱",
1589
+ code: "SL"
1590
+ },
1591
+ {
1592
+ name: "Singapore",
1593
+ dial_code: "+65",
1594
+ emoji: "🇸🇬",
1595
+ code: "SG"
1596
+ },
1597
+ {
1598
+ name: "Slovakia",
1599
+ dial_code: "+421",
1600
+ emoji: "🇸🇰",
1601
+ code: "SK"
1602
+ },
1603
+ {
1604
+ name: "Slovenia",
1605
+ dial_code: "+386",
1606
+ emoji: "🇸🇮",
1607
+ code: "SI"
1608
+ },
1609
+ {
1610
+ name: "Solomon Islands",
1611
+ dial_code: "+677",
1612
+ emoji: "🇸🇧",
1613
+ code: "SB"
1614
+ },
1615
+ {
1616
+ name: "Somalia",
1617
+ dial_code: "+252",
1618
+ emoji: "🇸🇴",
1619
+ code: "SO"
1620
+ },
1621
+ {
1622
+ name: "South Africa",
1623
+ dial_code: "+27",
1624
+ emoji: "🇿🇦",
1625
+ code: "ZA"
1626
+ },
1627
+ {
1628
+ name: "South Sudan",
1629
+ dial_code: "+211",
1630
+ emoji: "🇸🇸",
1631
+ code: "SS"
1632
+ },
1633
+ {
1634
+ name: "South Georgia and the South Sandwich Islands",
1635
+ dial_code: "+500",
1636
+ emoji: "🇬🇸",
1637
+ code: "GS"
1638
+ },
1639
+ {
1640
+ name: "Spain",
1641
+ dial_code: "+34",
1642
+ emoji: "🇪🇸",
1643
+ code: "ES"
1644
+ },
1645
+ {
1646
+ name: "Sri Lanka",
1647
+ dial_code: "+94",
1648
+ emoji: "🇱🇰",
1649
+ code: "LK"
1650
+ },
1651
+ {
1652
+ name: "Sudan",
1653
+ dial_code: "+249",
1654
+ emoji: "🇸🇩",
1655
+ code: "SD"
1656
+ },
1657
+ {
1658
+ name: "Suriname",
1659
+ dial_code: "+597",
1660
+ emoji: "🇸🇷",
1661
+ code: "SR"
1662
+ },
1663
+ {
1664
+ name: "Svalbard and Jan Mayen",
1665
+ dial_code: "+47",
1666
+ emoji: "🇸🇯",
1667
+ code: "SJ"
1668
+ },
1669
+ {
1670
+ name: "Swaziland",
1671
+ dial_code: "+268",
1672
+ emoji: "🇸🇿",
1673
+ code: "SZ"
1674
+ },
1675
+ {
1676
+ name: "Sweden",
1677
+ dial_code: "+46",
1678
+ emoji: "🇸🇪",
1679
+ code: "SE"
1680
+ },
1681
+ {
1682
+ name: "Switzerland",
1683
+ dial_code: "+41",
1684
+ emoji: "🇨🇭",
1685
+ code: "CH"
1686
+ },
1687
+ {
1688
+ name: "Syrian Arab Republic",
1689
+ dial_code: "+963",
1690
+ emoji: "🇸🇾",
1691
+ code: "SY"
1692
+ },
1693
+ {
1694
+ name: "Taiwan",
1695
+ dial_code: "+886",
1696
+ emoji: "🇹🇼",
1697
+ code: "TW"
1698
+ },
1699
+ {
1700
+ name: "Tajikistan",
1701
+ dial_code: "+992",
1702
+ emoji: "🇹🇯",
1703
+ code: "TJ"
1704
+ },
1705
+ {
1706
+ name: "Tanzania, United Republic of Tanzania",
1707
+ dial_code: "+255",
1708
+ emoji: "🇹🇿",
1709
+ code: "TZ"
1710
+ },
1711
+ {
1712
+ name: "Thailand",
1713
+ dial_code: "+66",
1714
+ emoji: "🇹🇭",
1715
+ code: "TH"
1716
+ },
1717
+ {
1718
+ name: "Timor-Leste",
1719
+ dial_code: "+670",
1720
+ emoji: "🇹🇱",
1721
+ code: "TL"
1722
+ },
1723
+ {
1724
+ name: "Togo",
1725
+ dial_code: "+228",
1726
+ emoji: "🇹🇬",
1727
+ code: "TG"
1728
+ },
1729
+ {
1730
+ name: "Tokelau",
1731
+ dial_code: "+690",
1732
+ emoji: "🇹🇰",
1733
+ code: "TK"
1734
+ },
1735
+ {
1736
+ name: "Tonga",
1737
+ dial_code: "+676",
1738
+ emoji: "🇹🇴",
1739
+ code: "TO"
1740
+ },
1741
+ {
1742
+ name: "Trinidad and Tobago",
1743
+ dial_code: "+1868",
1744
+ emoji: "🇹🇹",
1745
+ code: "TT"
1746
+ },
1747
+ {
1748
+ name: "Tunisia",
1749
+ dial_code: "+216",
1750
+ emoji: "🇹🇳",
1751
+ code: "TN"
1752
+ },
1753
+ {
1754
+ name: "Turkey",
1755
+ dial_code: "+90",
1756
+ emoji: "🇹🇷",
1757
+ code: "TR"
1758
+ },
1759
+ {
1760
+ name: "Turkmenistan",
1761
+ dial_code: "+993",
1762
+ emoji: "🇹🇲",
1763
+ code: "TM"
1764
+ },
1765
+ {
1766
+ name: "Turks and Caicos Islands",
1767
+ dial_code: "+1649",
1768
+ emoji: "🇹🇨",
1769
+ code: "TC"
1770
+ },
1771
+ {
1772
+ name: "Tuvalu",
1773
+ dial_code: "+688",
1774
+ emoji: "🇹🇻",
1775
+ code: "TV"
1776
+ },
1777
+ {
1778
+ name: "Uganda",
1779
+ dial_code: "+256",
1780
+ emoji: "🇺🇬",
1781
+ code: "UG"
1782
+ },
1783
+ {
1784
+ name: "Ukraine",
1785
+ dial_code: "+380",
1786
+ emoji: "🇺🇦",
1787
+ code: "UA"
1788
+ },
1789
+ {
1790
+ name: "United Arab Emirates",
1791
+ dial_code: "+971",
1792
+ emoji: "🇦🇪",
1793
+ code: "AE"
1794
+ },
1795
+ {
1796
+ name: "United Kingdom",
1797
+ dial_code: "+44",
1798
+ emoji: "🇬🇧",
1799
+ code: "GB"
1800
+ },
1801
+ {
1802
+ name: "United States",
1803
+ dial_code: "+1",
1804
+ emoji: "🇺🇸",
1805
+ code: "US"
1806
+ },
1807
+ {
1808
+ name: "Uruguay",
1809
+ dial_code: "+598",
1810
+ emoji: "🇺🇾",
1811
+ code: "UY"
1812
+ },
1813
+ {
1814
+ name: "Uzbekistan",
1815
+ dial_code: "+998",
1816
+ emoji: "🇺🇿",
1817
+ code: "UZ"
1818
+ },
1819
+ {
1820
+ name: "Vanuatu",
1821
+ dial_code: "+678",
1822
+ emoji: "🇻🇺",
1823
+ code: "VU"
1824
+ },
1825
+ {
1826
+ name: "Venezuela, Bolivarian Republic of Venezuela",
1827
+ dial_code: "+58",
1828
+ emoji: "🇻🇪",
1829
+ code: "VE"
1830
+ },
1831
+ {
1832
+ name: "Vietnam",
1833
+ dial_code: "+84",
1834
+ emoji: "🇻🇳",
1835
+ code: "VN"
1836
+ },
1837
+ {
1838
+ name: "Virgin Islands, British",
1839
+ dial_code: "+1284",
1840
+ emoji: "🇻🇬",
1841
+ code: "VG"
1842
+ },
1843
+ {
1844
+ name: "Virgin Islands, U.S.",
1845
+ dial_code: "+1340",
1846
+ emoji: "🇻🇮",
1847
+ code: "VI"
1848
+ },
1849
+ {
1850
+ name: "Wallis and Futuna",
1851
+ dial_code: "+681",
1852
+ emoji: "🇼🇫",
1853
+ code: "WF"
1854
+ },
1855
+ {
1856
+ name: "Yemen",
1857
+ dial_code: "+967",
1858
+ emoji: "🇾🇪",
1859
+ code: "YE"
1860
+ },
1861
+ {
1862
+ name: "Zambia",
1863
+ dial_code: "+260",
1864
+ emoji: "🇿🇲",
1865
+ code: "ZM"
1866
+ },
1867
+ {
1868
+ name: "Zimbabwe",
1869
+ dial_code: "+263",
1870
+ emoji: "🇿🇼",
1871
+ code: "ZW"
1872
+ }
1873
+ ];
1874
+
1875
+ var useCountryPickerState = function useCountryPickerState(_ref) {
1876
+ var placeholder = _ref.placeholder;
1877
+ var _React$useState = React__default.useState(countryList),
1878
+ newOptions = _React$useState[0],
1879
+ setNewOptions = _React$useState[1];
1880
+ var _React$useState2 = React__default.useState(placeholder != null ? placeholder : countryList[0].name),
1881
+ selected = _React$useState2[0],
1882
+ setSelected = _React$useState2[1];
1883
+ var _React$useState3 = React__default.useState(true),
1884
+ hide = _React$useState3[0],
1885
+ setHide = _React$useState3[1];
1886
+ var _React$useState4 = React__default.useState(false),
1887
+ isFocused = _React$useState4[0],
1888
+ setIsFocused = _React$useState4[1];
1889
+ var _React$useState5 = React__default.useState(false),
1890
+ isHovered = _React$useState5[0],
1891
+ setIsHovered = _React$useState5[1];
1892
+ return {
1893
+ hide: hide,
1894
+ setHide: setHide,
1895
+ newOptions: newOptions,
1896
+ setNewOptions: setNewOptions,
1897
+ isHovered: isHovered,
1898
+ setIsHovered: setIsHovered,
1899
+ isFocused: isFocused,
1900
+ setIsFocused: setIsFocused,
1901
+ selected: selected,
1902
+ setSelected: setSelected
1903
+ };
1904
+ };
1905
+
1906
+ var IconSizes$2 = {
1907
+ xs: 8,
1908
+ sm: 10,
1909
+ md: 12,
1910
+ lg: 14,
1911
+ xl: 16
1912
+ };
1913
+
1914
+ var _excluded$2 = ["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"];
1915
+ var CountryList = function CountryList(props) {
1916
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
1917
+ as: "ul"
1918
+ }, props));
1919
+ };
1920
+ var CountrySelector = function CountrySelector(props) {
1921
+ return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
1922
+ type: "country"
1923
+ }, props));
1924
+ };
1925
+ var CountryItem = function CountryItem(props) {
1926
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
1927
+ as: "li"
1928
+ }, props));
1929
+ };
1930
+ var DropDownItem = function DropDownItem(_ref) {
1931
+ var option = _ref.option,
1932
+ _ref$size = _ref.size,
1933
+ size = _ref$size === void 0 ? 'md' : _ref$size,
1934
+ _ref$callback = _ref.callback,
1935
+ callback = _ref$callback === void 0 ? function () {} : _ref$callback,
1936
+ _ref$styles = _ref.styles,
1937
+ styles = _ref$styles === void 0 ? {
1938
+ text: {}
1939
+ } : _ref$styles;
1940
+ var _useState = React.useState(false),
1941
+ isHovered = _useState[0],
1942
+ setIsHovered = _useState[1];
1943
+ var handleOptionClick = function handleOptionClick(event) {
1944
+ event.stopPropagation();
1945
+ callback(option);
1946
+ };
1947
+ var handleHover = function handleHover() {
1948
+ return setIsHovered(!isHovered);
1949
+ };
1950
+ return /*#__PURE__*/React__default.createElement(CountryItem, Object.assign({
1951
+ margin: 0,
1952
+ role: "DropDownItem",
1953
+ listStyleType: "none",
1954
+ paddingVertical: 6,
1955
+ paddingHorizontal: 12,
1956
+ onMouseEnter: handleHover,
1957
+ onMouseLeave: handleHover,
1958
+ onClick: handleOptionClick,
1959
+ fontSize: appStudio.Typography.fontSizes[size],
1960
+ backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
1961
+ }, styles['text']), option);
1962
+ };
1963
+ var DropDown = function DropDown(_ref2) {
1964
+ var size = _ref2.size,
1965
+ _ref2$styles = _ref2.styles,
1966
+ styles = _ref2$styles === void 0 ? {
1967
+ dropDown: {}
1968
+ } : _ref2$styles,
1969
+ options = _ref2.options,
1970
+ _ref2$callback = _ref2.callback,
1971
+ callback = _ref2$callback === void 0 ? function () {} : _ref2$callback;
1972
+ var handleCallback = function handleCallback(option) {
1973
+ return callback(option);
1974
+ };
1975
+ return /*#__PURE__*/React__default.createElement(CountryList, Object.assign({
1976
+ role: "dropDown",
1977
+ margin: 0,
1978
+ padding: 0,
1979
+ top: "100%",
1980
+ width: "100%",
1981
+ display: "flex",
1982
+ zIndex: 1000,
1983
+ overflow: "auto",
1984
+ maxHeight: "300px",
1985
+ borderRadius: 4,
1986
+ position: "absolute",
1987
+ flexDirection: "column",
1988
+ backgroundColor: "white",
1989
+ 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"
1990
+ }, styles['dropDown']), options.map(function (option) {
1991
+ return /*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
1992
+ key: option.code,
1993
+ size: size,
1994
+ option: option.name,
1995
+ callback: handleCallback
1996
+ }, styles['text']));
1997
+ }));
1998
+ };
1999
+ var CountryPickerView = function CountryPickerView(_ref3) {
2000
+ var id = _ref3.id,
2001
+ name = _ref3.name,
2002
+ label = _ref3.label,
2003
+ selected = _ref3.selected,
2004
+ placeholder = _ref3.placeholder,
2005
+ helperText = _ref3.helperText,
2006
+ _ref3$hide = _ref3.hide,
2007
+ hide = _ref3$hide === void 0 ? false : _ref3$hide,
2008
+ _ref3$error = _ref3.error,
2009
+ error = _ref3$error === void 0 ? false : _ref3$error,
2010
+ _ref3$isHovered = _ref3.isHovered,
2011
+ isHovered = _ref3$isHovered === void 0 ? false : _ref3$isHovered,
2012
+ _ref3$isFocused = _ref3.isFocused,
2013
+ isFocused = _ref3$isFocused === void 0 ? false : _ref3$isFocused,
2014
+ _ref3$isAutoFocus = _ref3.isAutoFocus,
2015
+ isAutoFocus = _ref3$isAutoFocus === void 0 ? false : _ref3$isAutoFocus,
2016
+ _ref3$isDisabled = _ref3.isDisabled,
2017
+ isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
2018
+ _ref3$isReadOnly = _ref3.isReadOnly,
2019
+ isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
2020
+ _ref3$shadow = _ref3.shadow,
2021
+ shadow = _ref3$shadow === void 0 ? {} : _ref3$shadow,
2022
+ _ref3$newOptions = _ref3.newOptions,
2023
+ newOptions = _ref3$newOptions === void 0 ? [] : _ref3$newOptions,
2024
+ _ref3$size = _ref3.size,
2025
+ size = _ref3$size === void 0 ? 'md' : _ref3$size,
2026
+ _ref3$variant = _ref3.variant,
2027
+ variant = _ref3$variant === void 0 ? 'default' : _ref3$variant,
2028
+ _ref3$shape = _ref3.shape,
2029
+ shape = _ref3$shape === void 0 ? 'default' : _ref3$shape,
2030
+ _ref3$colorScheme = _ref3.colorScheme,
2031
+ colorScheme = _ref3$colorScheme === void 0 ? 'theme.primary' : _ref3$colorScheme,
2032
+ onChange = _ref3.onChange,
2033
+ _ref3$onBlur = _ref3.onBlur,
2034
+ onBlur = _ref3$onBlur === void 0 ? function () {} : _ref3$onBlur,
2035
+ _ref3$setHide = _ref3.setHide,
2036
+ setHide = _ref3$setHide === void 0 ? function () {} : _ref3$setHide,
2037
+ _ref3$setNewOptions = _ref3.setNewOptions,
2038
+ setNewOptions = _ref3$setNewOptions === void 0 ? function () {} : _ref3$setNewOptions,
2039
+ _ref3$setIsHovered = _ref3.setIsHovered,
2040
+ setIsHovered = _ref3$setIsHovered === void 0 ? function () {} : _ref3$setIsHovered,
2041
+ _ref3$setIsFocused = _ref3.setIsFocused,
2042
+ setIsFocused = _ref3$setIsFocused === void 0 ? function () {} : _ref3$setIsFocused,
2043
+ _ref3$setSelected = _ref3.setSelected,
2044
+ setSelected = _ref3$setSelected === void 0 ? function () {} : _ref3$setSelected,
2045
+ _ref3$styles = _ref3.styles,
2046
+ styles = _ref3$styles === void 0 ? {
2047
+ text: {},
2048
+ icon: {},
2049
+ label: {},
2050
+ dropDown: {},
2051
+ helperText: {},
2052
+ box: {}
2053
+ } : _ref3$styles,
2054
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
2055
+ var _useTheme = appStudio.useTheme(),
2056
+ getColor = _useTheme.getColor;
2057
+ var IconColor = getColor('color.blueGray.700');
2058
+ var handleHover = function handleHover() {
2059
+ return setIsHovered(!isHovered);
2060
+ };
2061
+ var handleFocus = function handleFocus() {
2062
+ return setIsFocused(true);
2063
+ };
2064
+ var handleCallback = function handleCallback(option) {
2065
+ setHide(!hide);
2066
+ setSelected(option);
2067
+ };
2068
+ var handleClick = function handleClick() {
2069
+ if (!isDisabled && !isReadOnly) {
2070
+ setHide(!hide);
2071
+ }
2072
+ };
2073
+ var handleChange = function handleChange(event) {
2074
+ var selectedCountry = event.target.value;
2075
+ var filteredCountries = countryList.filter(function (country) {
2076
+ return country.name.toLowerCase().startsWith(selectedCountry.toLowerCase());
2077
+ });
2078
+ if (hide) setHide(false);
2079
+ setSelected(event.target.value);
2080
+ setNewOptions(filteredCountries);
2081
+ if (onChange) onChange(event);
2082
+ };
2083
+ var handleBlur = function handleBlur(event) {
2084
+ onBlur(event);
2085
+ setIsFocused(false);
2086
+ };
2087
+ React.useEffect(function () {
2088
+ if (onChange) onChange(selected); // Call onChange when selectedCountry changes
2089
+ }, [onChange, selected]);
2090
+ var isWithLabel = !!(isFocused && label);
2091
+ var fieldStyles = Object.assign({
2092
+ margin: 0,
2093
+ paddingVerical: 8,
2094
+ paddingHorizonatl: 0,
2095
+ width: '100%',
2096
+ heigth: '100%',
2097
+ border: 'none',
2098
+ on: {
2099
+ focus: {
2100
+ outline: 'none'
2101
+ }
2102
+ },
2103
+ fontSize: appStudio.Typography.fontSizes[size],
2104
+ backgroundColor: 'transparent',
2105
+ color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
2106
+ cursor: isDisabled ? 'not-allowed' : 'auto'
2107
+ }, styles['field']);
2108
+ return /*#__PURE__*/React__default.createElement(Input.FieldContainer, {
2109
+ helperText: helperText,
2110
+ error: error,
2111
+ styles: styles,
2112
+ onClick: handleClick
2113
+ }, /*#__PURE__*/React__default.createElement(Input.FieldContent, {
2114
+ label: label,
2115
+ size: size,
2116
+ error: error,
2117
+ shape: shape,
2118
+ styles: styles,
2119
+ shadow: shadow,
2120
+ variant: variant,
2121
+ value: selected,
2122
+ color: colorScheme,
2123
+ isHovered: isHovered,
2124
+ isDisabled: isDisabled,
2125
+ isReadOnly: isReadOnly,
2126
+ isFocused: isFocused,
2127
+ isWithLabel: isWithLabel,
2128
+ colorScheme: colorScheme,
2129
+ onMouseEnter: handleHover,
2130
+ onMouseLeave: handleHover
2131
+ }, /*#__PURE__*/React__default.createElement(Input.FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(Input.FieldLabel, Object.assign({
2132
+ htmlFor: id,
2133
+ color: colorScheme,
2134
+ error: error
2135
+ }, styles), label), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
2136
+ id: id,
2137
+ name: name,
2138
+ placeholder: placeholder,
2139
+ readOnly: isReadOnly,
2140
+ disabled: isDisabled,
2141
+ autoFocus: isAutoFocus,
2142
+ onBlur: handleBlur,
2143
+ onFocus: handleFocus
2144
+ }, fieldStyles, props, {
2145
+ value: selected,
2146
+ onChange: handleChange
2147
+ }))), /*#__PURE__*/React__default.createElement(Input.FieldIcons, null, hide ? /*#__PURE__*/React__default.createElement(ArrowDown.ArrowDownSvg, {
2148
+ size: IconSizes$2[size],
2149
+ color: IconColor,
2150
+ style: styles['icon']
2151
+ }) : /*#__PURE__*/React__default.createElement(ArrowUp.ArrowUpSvg, {
2152
+ size: IconSizes$2[size],
2153
+ color: IconColor,
2154
+ style: styles['icon']
2155
+ }))), !hide && /*#__PURE__*/React__default.createElement(DropDown, {
2156
+ size: size,
2157
+ styles: styles,
2158
+ options: newOptions,
2159
+ callback: handleCallback
2160
+ }));
2161
+ };
2162
+
2163
+ var CountryPickerComponent = function CountryPickerComponent(props) {
2164
+ var countryPickerStates = useCountryPickerState(props);
2165
+ return /*#__PURE__*/React__default.createElement(CountryPickerView, Object.assign({}, countryPickerStates, props));
2166
+ };
2167
+ /**
2168
+ * Country picker allows users to select a country from a dropdown list or search field.
2169
+ */
2170
+ var CountryPicker = CountryPickerComponent;
2171
+
2172
+ var useDatePickerState = function useDatePickerState() {
2173
+ var _React$useState = React__default.useState(false),
2174
+ isHovered = _React$useState[0],
2175
+ setIsHovered = _React$useState[1];
2176
+ var _React$useState2 = React__default.useState(false),
2177
+ isFocused = _React$useState2[0],
2178
+ setIsFocused = _React$useState2[1];
2179
+ var _React$useState3 = React__default.useState(format(new Date(), 'yyyy-MM-dd')),
2180
+ date = _React$useState3[0],
2181
+ setDate = _React$useState3[1];
2182
+ return {
2183
+ date: date,
2184
+ setDate: setDate,
2185
+ isHovered: isHovered,
2186
+ setIsHovered: setIsHovered,
2187
+ isFocused: isFocused,
2188
+ setIsFocused: setIsFocused
2189
+ };
2190
+ };
2191
+
2192
+ var _excluded$3 = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
2193
+ var DatePickerContent = function DatePickerContent(props) {
2194
+ return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
2195
+ type: "date"
2196
+ }, props));
2197
+ };
2198
+ var DatePickerView = function DatePickerView(_ref) {
2199
+ var id = _ref.id,
2200
+ name = _ref.name,
2201
+ label = _ref.label,
2202
+ date = _ref.date,
2203
+ helperText = _ref.helperText,
2204
+ _ref$shadow = _ref.shadow,
2205
+ shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
2206
+ _ref$size = _ref.size,
2207
+ size = _ref$size === void 0 ? 'md' : _ref$size,
2208
+ _ref$variant = _ref.variant,
2209
+ variant = _ref$variant === void 0 ? 'default' : _ref$variant,
2210
+ _ref$shape = _ref.shape,
2211
+ shape = _ref$shape === void 0 ? 'default' : _ref$shape,
2212
+ _ref$colorScheme = _ref.colorScheme,
2213
+ colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
2214
+ _ref$styles = _ref.styles,
2215
+ styles = _ref$styles === void 0 ? {
2216
+ box: {},
2217
+ label: {},
2218
+ helperText: {},
2219
+ text: {},
2220
+ field: {}
2221
+ } : _ref$styles,
2222
+ _ref$error = _ref.error,
2223
+ error = _ref$error === void 0 ? false : _ref$error,
2224
+ _ref$isHovered = _ref.isHovered,
2225
+ isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
2226
+ _ref$isFocused = _ref.isFocused,
2227
+ isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
2228
+ _ref$isDisabled = _ref.isDisabled,
2229
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
2230
+ _ref$isReadOnly = _ref.isReadOnly,
2231
+ isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
2232
+ _ref$setDate = _ref.setDate,
2233
+ setDate = _ref$setDate === void 0 ? function () {} : _ref$setDate,
2234
+ _ref$setIsFocused = _ref.setIsFocused,
2235
+ setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
2236
+ _ref$setIsHovered = _ref.setIsHovered,
2237
+ setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
2238
+ onChange = _ref.onChange,
2239
+ onChangeText = _ref.onChangeText,
2240
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
2241
+ var isWithLabel = !!(isFocused && label);
2242
+ var handleHover = function handleHover() {
2243
+ return setIsHovered(!isHovered);
2244
+ };
2245
+ var handleFocus = function handleFocus() {
2246
+ return setIsFocused(true);
2247
+ };
2248
+ var handleDateChange = function handleDateChange(event) {
2249
+ if (typeof event === 'string') {
2250
+ setDate(event);
2251
+ if (onChangeText) onChangeText(event);
2252
+ } else {
2253
+ setDate(event.target.value);
2254
+ if (onChange) onChange(event);
2255
+ }
2256
+ };
2257
+ var fieldStyles = Object.assign({
2258
+ margin: 0,
2259
+ paddingVertical: 8,
2260
+ paddingHorizontal: 0,
2261
+ width: '100%',
2262
+ heigth: '100%',
2263
+ border: 'none',
2264
+ on: {
2265
+ focus: {
2266
+ outline: 'none',
2267
+ backgroundColor: 'transparent'
2268
+ }
2269
+ },
2270
+ fontSize: appStudio.Typography.fontSizes[size],
2271
+ backgroundColor: 'transparent',
2272
+ color: isDisabled ? 'trueGray.600' : 'blueGray.700',
2273
+ cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
2274
+ }, styles['field']);
2275
+ return /*#__PURE__*/React__default.createElement(FieldContainer.FieldContainer, {
2276
+ helperText: helperText,
2277
+ error: error,
2278
+ styles: styles
2279
+ }, /*#__PURE__*/React__default.createElement(FieldContent.FieldContent, {
2280
+ label: label,
2281
+ size: size,
2282
+ error: error,
2283
+ shape: shape,
2284
+ styles: styles,
2285
+ shadow: shadow,
2286
+ variant: variant,
2287
+ value: date,
2288
+ color: colorScheme,
2289
+ isHovered: isHovered,
2290
+ isDisabled: isDisabled,
2291
+ isReadOnly: isReadOnly,
2292
+ isFocused: isFocused,
2293
+ isWithLabel: isWithLabel,
2294
+ colorScheme: colorScheme,
2295
+ onMouseEnter: handleHover,
2296
+ onMouseLeave: handleHover
2297
+ }, /*#__PURE__*/React__default.createElement(FieldWrapper.FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel.FieldLabel, Object.assign({
2298
+ htmlFor: id,
2299
+ color: colorScheme,
2300
+ error: error
2301
+ }, styles), label), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
2302
+ id: id,
2303
+ name: name,
2304
+ value: date,
2305
+ onFocus: handleFocus,
2306
+ onChange: handleDateChange,
2307
+ disabled: isDisabled,
2308
+ readOnly: isReadOnly
2309
+ }, fieldStyles, onChangeText && {
2310
+ onChangeText: handleDateChange
2311
+ }, props)))));
2312
+ };
2313
+
2314
+ var DatePickerComponent = function DatePickerComponent(props) {
2315
+ var datePickerStates = useDatePickerState();
2316
+ return /*#__PURE__*/React__default.createElement(DatePickerView, Object.assign({}, datePickerStates, props));
2317
+ };
2318
+ /**
2319
+ * Date picker allows users to select a date from a calendar view.
2320
+ */
2321
+ var DatePicker = DatePickerComponent;
2322
+
2323
+ var usePasswordState = function usePasswordState() {
2324
+ var _useState = React.useState(false),
2325
+ isVisible = _useState[0],
2326
+ setIsVisible = _useState[1];
2327
+ return {
2328
+ isVisible: isVisible,
2329
+ setIsVisible: setIsVisible
2330
+ };
2331
+ };
2332
+
2333
+ var _excluded$4 = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
2334
+ var PasswordView = function PasswordView(_ref) {
2335
+ var name = _ref.name,
2336
+ visibleIcon = _ref.visibleIcon,
2337
+ hiddenIcon = _ref.hiddenIcon,
2338
+ _ref$isDisabled = _ref.isDisabled,
2339
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
2340
+ _ref$isVisible = _ref.isVisible,
2341
+ isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
2342
+ _ref$setIsVisible = _ref.setIsVisible,
2343
+ setIsVisible = _ref$setIsVisible === void 0 ? function () {} : _ref$setIsVisible,
2344
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
2345
+ return /*#__PURE__*/React__default.createElement(components.TextField, Object.assign({
2346
+ name: name,
2347
+ type: isVisible ? 'text' : 'password',
2348
+ rightChild: /*#__PURE__*/React__default.createElement(components.View, {
2349
+ onClick: function onClick() {
2350
+ if (!isDisabled) setIsVisible(!isVisible);
2351
+ }
2352
+ }, isVisible ? visibleIcon : hiddenIcon),
2353
+ isClearable: false
2354
+ }, props));
2355
+ };
2356
+
2357
+ var PasswordComponent = function PasswordComponent(props) {
2358
+ var passwordState = usePasswordState();
2359
+ return /*#__PURE__*/React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
2360
+ };
2361
+ /**
2362
+ * To allow users to securely enter sensitive information
2363
+ */
2364
+ var Password = PasswordComponent;
2365
+
2366
+ var useSelectState = function useSelectState(_ref) {
2367
+ var placeholder = _ref.placeholder,
2368
+ isMulti = _ref.isMulti,
2369
+ options = _ref.options;
2370
+ var defaultSelected = placeholder ? isMulti ? [] : '' : options[0];
2371
+ var _React$useState = React__default.useState(true),
2372
+ hide = _React$useState[0],
2373
+ setHide = _React$useState[1];
2374
+ var _React$useState2 = React__default.useState(false),
2375
+ isHovered = _React$useState2[0],
2376
+ setIsHovered = _React$useState2[1];
2377
+ var _React$useState3 = React__default.useState(false),
2378
+ isFocused = _React$useState3[0],
2379
+ setIsFocused = _React$useState3[1];
2380
+ var _React$useState4 = React__default.useState(defaultSelected),
2381
+ selected = _React$useState4[0],
2382
+ setSelected = _React$useState4[1];
2383
+ return {
2384
+ selected: selected,
2385
+ setSelected: setSelected,
2386
+ hide: hide,
2387
+ setHide: setHide,
2388
+ isHovered: isHovered,
2389
+ setIsHovered: setIsHovered,
2390
+ isFocused: isFocused,
2391
+ setIsFocused: setIsFocused
2392
+ };
2393
+ };
2394
+ var useItemState = function useItemState() {
2395
+ var _React$useState5 = React__default.useState(false),
2396
+ isHovered = _React$useState5[0],
2397
+ setIsHovered = _React$useState5[1];
2398
+ return {
2399
+ isHovered: isHovered,
2400
+ setIsHovered: setIsHovered
2401
+ };
2402
+ };
2403
+
2404
+ var IconSizes$3 = {
2405
+ xs: 8,
2406
+ sm: 10,
2407
+ md: 12,
2408
+ lg: 14,
2409
+ xl: 16
2410
+ };
2411
+
2412
+ var _excluded$5 = ["isHovered", "setIsHovered", "option", "size", "callback"],
2413
+ _excluded2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
2414
+ _excluded3 = ["option", "size", "removeOption"],
2415
+ _excluded4 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
2416
+ var Item = function Item(_ref) {
2417
+ var isHovered = _ref.isHovered,
2418
+ setIsHovered = _ref.setIsHovered,
2419
+ option = _ref.option,
2420
+ _ref$size = _ref.size,
2421
+ size = _ref$size === void 0 ? 'md' : _ref$size,
2422
+ _ref$callback = _ref.callback,
2423
+ callback = _ref$callback === void 0 ? function () {} : _ref$callback,
2424
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
2425
+ var handleOptionClick = function handleOptionClick(option) {
2426
+ return callback(option);
2427
+ };
2428
+ var handleHover = function handleHover() {
2429
+ return setIsHovered(!isHovered);
2430
+ };
2431
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
2432
+ as: "li",
2433
+ margin: 0,
2434
+ paddingVertical: 8,
2435
+ paddingHorizontal: 12,
2436
+ listStyleType: "none",
2437
+ onMouseEnter: handleHover,
2438
+ onMouseLeave: handleHover,
2439
+ fontSize: appStudio.Typography.fontSizes[size],
2440
+ onClick: function onClick() {
2441
+ return handleOptionClick(option);
2442
+ },
2443
+ backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
2444
+ }, props), option);
2445
+ };
2446
+ var SelectBox = function SelectBox(_ref2) {
2447
+ var _ref2$size = _ref2.size,
2448
+ size = _ref2$size === void 0 ? 'md' : _ref2$size,
2449
+ _ref2$styles = _ref2.styles,
2450
+ styles = _ref2$styles === void 0 ? {
2451
+ field: {},
2452
+ text: {}
2453
+ } : _ref2$styles,
2454
+ selected = _ref2.selected,
2455
+ isDisabled = _ref2.isDisabled,
2456
+ placeholder = _ref2.placeholder,
2457
+ _ref2$removeOption = _ref2.removeOption,
2458
+ removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
2459
+ var fieldStyles = Object.assign({
2460
+ margin: 0,
2461
+ width: '95%',
2462
+ heigth: '100%',
2463
+ border: 'none',
2464
+ paddingVertical: 8,
2465
+ paddingHorizontal: 0,
2466
+ fontSize: appStudio.Typography.fontSizes[size],
2467
+ backgroundColor: 'transparent',
2468
+ color: isDisabled ? 'trueGray.600' : 'blueGray.700',
2469
+ cursor: isDisabled ? 'not-allowed' : 'auto'
2470
+ }, styles['field'], styles['text']);
2471
+ return /*#__PURE__*/React__default.createElement(components.Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && /*#__PURE__*/React__default.createElement(components.Horizontal, {
2472
+ gap: 6
2473
+ }, selected.map(function (option) {
2474
+ return /*#__PURE__*/React__default.createElement(MultiSelect, {
2475
+ key: option,
2476
+ option: option,
2477
+ removeOption: removeOption
2478
+ });
2479
+ }))));
2480
+ };
2481
+ var HiddenSelect = function HiddenSelect(_ref3) {
2482
+ var id = _ref3.id,
2483
+ name = _ref3.name,
2484
+ selected = _ref3.selected,
2485
+ onChange = _ref3.onChange,
2486
+ _ref3$isMulti = _ref3.isMulti,
2487
+ isMulti = _ref3$isMulti === void 0 ? false : _ref3$isMulti,
2488
+ _ref3$isDisabled = _ref3.isDisabled,
2489
+ isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
2490
+ _ref3$isReadOnly = _ref3.isReadOnly,
2491
+ isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
2492
+ _ref3$options = _ref3.options,
2493
+ options = _ref3$options === void 0 ? [] : _ref3$options,
2494
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
2495
+ var handleChange = function handleChange(event) {
2496
+ if (onChange) onChange(event);
2497
+ };
2498
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
2499
+ id: id,
2500
+ name: name,
2501
+ as: "select",
2502
+ opacity: 0,
2503
+ width: 0,
2504
+ height: 0,
2505
+ position: "absolute",
2506
+ value: selected,
2507
+ disabled: isDisabled,
2508
+ readOnly: isReadOnly,
2509
+ onChange: handleChange,
2510
+ multiple: isMulti
2511
+ }, props), options.map(function (option) {
2512
+ return /*#__PURE__*/React__default.createElement("option", {
2513
+ key: option,
2514
+ value: option
2515
+ }, option);
2516
+ }));
2517
+ };
2518
+ var DropDown$1 = function DropDown(_ref4) {
2519
+ var size = _ref4.size,
2520
+ _ref4$styles = _ref4.styles,
2521
+ styles = _ref4$styles === void 0 ? {
2522
+ dropDown: {}
2523
+ } : _ref4$styles,
2524
+ options = _ref4.options,
2525
+ _ref4$callback = _ref4.callback,
2526
+ callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
2527
+ var itemStates = useItemState();
2528
+ var handleCallback = function handleCallback(option) {
2529
+ return callback(option);
2530
+ };
2531
+ var shadow = typeof document !== undefined ? {
2532
+ 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'
2533
+ } : {
2534
+ elevation: 2,
2535
+ shadowColor: 'rgba(0, 0, 0, 0.07)',
2536
+ shadowOffset: {
2537
+ width: 0,
2538
+ height: 1
2539
+ },
2540
+ shadowOpacity: 1,
2541
+ shadowRadius: 1
2542
+ };
2543
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
2544
+ as: "ul",
2545
+ role: "dropdown",
2546
+ top: "100%",
2547
+ width: "100%",
2548
+ display: "flex",
2549
+ zIndex: 1000,
2550
+ overflowY: "auto",
2551
+ marginTop: 5,
2552
+ marginLeft: 0,
2553
+ marginRight: 0,
2554
+ marginBottom: 0,
2555
+ padding: 0,
2556
+ borderRadius: 4,
2557
+ position: "absolute",
2558
+ flexDirection: "column",
2559
+ backgroundColor: "white",
2560
+ justifyContent: "space-evenly"
2561
+ }, shadow, styles['dropDown']), options.map(function (option) {
2562
+ return /*#__PURE__*/React__default.createElement(Item, Object.assign({
2563
+ key: option,
2564
+ size: size,
2565
+ option: option,
2566
+ callback: handleCallback
2567
+ }, itemStates, styles['text']));
2568
+ }));
2569
+ };
2570
+ var MultiSelect = function MultiSelect(_ref5) {
2571
+ var option = _ref5.option,
2572
+ _ref5$size = _ref5.size,
2573
+ size = _ref5$size === void 0 ? 'md' : _ref5$size,
2574
+ _ref5$removeOption = _ref5.removeOption,
2575
+ removeOption = _ref5$removeOption === void 0 ? function () {} : _ref5$removeOption,
2576
+ props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
2577
+ var handleClick = function handleClick() {
2578
+ return removeOption(option);
2579
+ };
2580
+ return /*#__PURE__*/React__default.createElement(components.Horizontal, Object.assign({
2581
+ gap: 10,
2582
+ padding: 6,
2583
+ borderRadius: 4,
2584
+ alignItems: "center",
2585
+ fontSize: appStudio.Typography.fontSizes[size],
2586
+ backgroundColor: "trueGray.300",
2587
+ onClick: function onClick(event) {
2588
+ return event.stopPropagation();
2589
+ }
2590
+ }, props), /*#__PURE__*/React__default.createElement(components.Text, {
2591
+ size: size
2592
+ }, option), /*#__PURE__*/React__default.createElement(Svg.CloseSvg, {
2593
+ role: "close-button",
2594
+ color: "inherit",
2595
+ size: IconSizes$3[size],
2596
+ onClick: handleClick
2597
+ }));
2598
+ };
2599
+ var SelectView = function SelectView(_ref6) {
2600
+ var id = _ref6.id,
2601
+ name = _ref6.name,
2602
+ label = _ref6.label,
2603
+ selected = _ref6.selected,
2604
+ placeholder = _ref6.placeholder,
2605
+ helperText = _ref6.helperText,
2606
+ _ref6$hide = _ref6.hide,
2607
+ hide = _ref6$hide === void 0 ? false : _ref6$hide,
2608
+ _ref6$error = _ref6.error,
2609
+ error = _ref6$error === void 0 ? false : _ref6$error,
2610
+ _ref6$isMulti = _ref6.isMulti,
2611
+ isMulti = _ref6$isMulti === void 0 ? false : _ref6$isMulti,
2612
+ _ref6$isFocused = _ref6.isFocused,
2613
+ isFocused = _ref6$isFocused === void 0 ? false : _ref6$isFocused,
2614
+ _ref6$isHovered = _ref6.isHovered,
2615
+ isHovered = _ref6$isHovered === void 0 ? false : _ref6$isHovered,
2616
+ _ref6$isDisabled = _ref6.isDisabled,
2617
+ isDisabled = _ref6$isDisabled === void 0 ? false : _ref6$isDisabled,
2618
+ _ref6$isReadOnly = _ref6.isReadOnly,
2619
+ isReadOnly = _ref6$isReadOnly === void 0 ? false : _ref6$isReadOnly,
2620
+ _ref6$options = _ref6.options,
2621
+ options = _ref6$options === void 0 ? [] : _ref6$options,
2622
+ _ref6$shadow = _ref6.shadow,
2623
+ shadow = _ref6$shadow === void 0 ? {} : _ref6$shadow,
2624
+ _ref6$size = _ref6.size,
2625
+ size = _ref6$size === void 0 ? 'md' : _ref6$size,
2626
+ _ref6$colorScheme = _ref6.colorScheme,
2627
+ colorScheme = _ref6$colorScheme === void 0 ? 'theme.primary' : _ref6$colorScheme,
2628
+ _ref6$shape = _ref6.shape,
2629
+ shape = _ref6$shape === void 0 ? 'default' : _ref6$shape,
2630
+ _ref6$variant = _ref6.variant,
2631
+ variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
2632
+ _ref6$styles = _ref6.styles,
2633
+ styles = _ref6$styles === void 0 ? {
2634
+ text: {},
2635
+ icon: {},
2636
+ dropDown: {},
2637
+ selectBox: {},
2638
+ label: {},
2639
+ helperText: {}
2640
+ } : _ref6$styles,
2641
+ _ref6$onChange = _ref6.onChange,
2642
+ onChange = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
2643
+ _ref6$setHide = _ref6.setHide,
2644
+ setHide = _ref6$setHide === void 0 ? function () {} : _ref6$setHide,
2645
+ _ref6$setSelected = _ref6.setSelected,
2646
+ setSelected = _ref6$setSelected === void 0 ? function () {} : _ref6$setSelected,
2647
+ _ref6$setIsHovered = _ref6.setIsHovered,
2648
+ setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
2649
+ _ref6$setIsFocused = _ref6.setIsFocused,
2650
+ setIsFocused = _ref6$setIsFocused === void 0 ? function () {} : _ref6$setIsFocused,
2651
+ props = _objectWithoutPropertiesLoose(_ref6, _excluded4);
2652
+ var isWithLabel = !!(isFocused && label);
2653
+ var handleHover = function handleHover() {
2654
+ return setIsHovered(!isHovered);
2655
+ };
2656
+ var handleFocus = function handleFocus() {
2657
+ return setIsFocused(true);
2658
+ };
2659
+ var handleClick = function handleClick(event) {
2660
+ event.stopPropagation();
2661
+ setHide(!hide);
2662
+ setIsFocused(!isFocused);
2663
+ };
2664
+ var handleCallback = React.useCallback(function (option) {
2665
+ setHide(!hide);
2666
+ if (isMulti && Array.isArray(selected)) {
2667
+ !selected.includes(option) && setSelected([].concat(selected, [option]));
2668
+ } else {
2669
+ setSelected(option);
2670
+ }
2671
+ }, [hide, isMulti, selected]);
2672
+ var handleRemoveOption = function handleRemoveOption(selectedOption) {
2673
+ if (Array.isArray(selected) && selected.includes(selectedOption)) {
2674
+ var newSelected = selected.filter(function (option) {
2675
+ return option !== selectedOption;
2676
+ });
2677
+ setSelected(newSelected.length === 0 ? [] : newSelected);
2678
+ }
2679
+ };
2680
+ return /*#__PURE__*/React__default.createElement(FieldContainer.FieldContainer, {
2681
+ role: "SelectBox",
2682
+ helperText: helperText,
2683
+ error: error,
2684
+ styles: styles,
2685
+ onClick: isDisabled || isReadOnly ? function () {} : handleClick
2686
+ }, /*#__PURE__*/React__default.createElement(FieldContent.FieldContent, {
2687
+ label: label,
2688
+ size: size,
2689
+ error: error,
2690
+ shape: shape,
2691
+ styles: styles,
2692
+ shadow: shadow,
2693
+ variant: variant,
2694
+ value: selected,
2695
+ color: colorScheme,
2696
+ isHovered: isHovered,
2697
+ isDisabled: isDisabled,
2698
+ isReadOnly: isReadOnly,
2699
+ isFocused: isFocused,
2700
+ isWithLabel: isWithLabel,
2701
+ colorScheme: colorScheme,
2702
+ onMouseEnter: handleHover,
2703
+ onMouseLeave: handleHover
2704
+ }, /*#__PURE__*/React__default.createElement(FieldWrapper.FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel.FieldLabel, Object.assign({
2705
+ htmlFor: id,
2706
+ color: colorScheme,
2707
+ error: error
2708
+ }, styles), label), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
2709
+ id: id,
2710
+ name: name,
2711
+ options: options,
2712
+ onChange: onChange,
2713
+ selected: selected,
2714
+ isDisabled: isDisabled,
2715
+ isReadOnly: isReadOnly,
2716
+ isMulti: isMulti,
2717
+ onFocus: handleFocus
2718
+ }, props)), /*#__PURE__*/React__default.createElement(SelectBox, {
2719
+ size: size,
2720
+ styles: styles,
2721
+ selected: selected,
2722
+ isDisabled: isDisabled,
2723
+ placeholder: placeholder,
2724
+ removeOption: handleRemoveOption
2725
+ })), /*#__PURE__*/React__default.createElement(FieldIcons.FieldIcons, null, !isReadOnly && !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? /*#__PURE__*/React__default.createElement(Svg.ArrowDownSvg, {
2726
+ color: "inherit",
2727
+ size: IconSizes$3[size],
2728
+ style: styles.icon
2729
+ }) : /*#__PURE__*/React__default.createElement(Svg.ArrowUpSvg, {
2730
+ color: "inherit",
2731
+ size: IconSizes$3[size],
2732
+ style: styles.icon
2733
+ })))), !hide && /*#__PURE__*/React__default.createElement(DropDown$1, {
2734
+ size: size,
2735
+ styles: styles,
2736
+ options: options,
2737
+ callback: handleCallback
2738
+ }));
2739
+ };
2740
+
2741
+ var SelectComponent = function SelectComponent(props) {
2742
+ var selectStates = useSelectState(props);
2743
+ return /*#__PURE__*/React__default.createElement(SelectView, Object.assign({}, selectStates, props));
2744
+ };
2745
+ /**
2746
+ * Select provides a dropdown list of options for the user to choose from.
2747
+ */
2748
+ var Select = SelectComponent;
2749
+
2750
+ var useSwitchState = function useSwitchState(_ref) {
2751
+ var isDisabled = _ref.isDisabled,
2752
+ isChecked = _ref.isChecked;
2753
+ var _React$useState = React__default.useState(false),
2754
+ isHovered = _React$useState[0],
2755
+ setIsHovered = _React$useState[1];
2756
+ var _React$useState2 = React__default.useState(isDisabled ? !isDisabled : isChecked),
2757
+ on = _React$useState2[0],
2758
+ setOn = _React$useState2[1];
2759
+ return {
2760
+ isHovered: isHovered,
2761
+ setIsHovered: setIsHovered,
2762
+ on: on,
2763
+ setOn: setOn
2764
+ };
2765
+ };
2766
+
2767
+ var KnobSizes = {
2768
+ xs: {
2769
+ height: 6,
2770
+ width: 6
2771
+ },
2772
+ sm: {
2773
+ height: 9,
2774
+ width: 9
2775
+ },
2776
+ md: {
2777
+ height: 12,
2778
+ width: 12
2779
+ },
2780
+ lg: {
2781
+ height: 15,
2782
+ width: 15
2783
+ },
2784
+ xl: {
2785
+ height: 18,
2786
+ width: 18
2787
+ },
2788
+ '2xl': {
2789
+ height: 21,
2790
+ width: 21
2791
+ },
2792
+ '3xl': {
2793
+ height: 24,
2794
+ width: 24
2795
+ },
2796
+ '4xl': {
2797
+ height: 27,
2798
+ width: 27
2799
+ },
2800
+ '5xl': {
2801
+ height: 30,
2802
+ width: 30
2803
+ },
2804
+ '6xl': {
2805
+ height: 33,
2806
+ width: 33
2807
+ }
2808
+ };
2809
+ var SliderSizes = {
2810
+ xs: {
2811
+ height: 16,
2812
+ width: 28
2813
+ },
2814
+ sm: {
2815
+ height: 20,
2816
+ width: 36
2817
+ },
2818
+ md: {
2819
+ height: 24,
2820
+ width: 44
2821
+ },
2822
+ lg: {
2823
+ height: 28,
2824
+ width: 52
2825
+ },
2826
+ xl: {
2827
+ height: 32,
2828
+ width: 60
2829
+ },
2830
+ '2xl': {
2831
+ height: 36,
2832
+ width: 68
2833
+ },
2834
+ '3xl': {
2835
+ height: 40,
2836
+ width: 76
2837
+ },
2838
+ '4xl': {
2839
+ height: 44,
2840
+ width: 84
2841
+ },
2842
+ '5xl': {
2843
+ height: 48,
2844
+ width: 92
2845
+ },
2846
+ '6xl': {
2847
+ height: 52,
2848
+ width: 100
2849
+ }
2850
+ };
2851
+ var SliderPadding = {
2852
+ xs: {
2853
+ paddingVertical: 0,
2854
+ paddingHorizontal: 2
2855
+ },
2856
+ sm: {
2857
+ paddingVertical: 0,
2858
+ paddingHorizontal: 3
2859
+ },
2860
+ md: {
2861
+ paddingVertical: 0,
2862
+ paddingHorizontal: 5
2863
+ },
2864
+ lg: {
2865
+ paddingVertical: 0,
2866
+ paddingHorizontal: 6
2867
+ },
2868
+ xl: {
2869
+ paddingVertical: 0,
2870
+ paddingHorizontal: 8
2871
+ },
2872
+ '2xl': {
2873
+ paddingVertical: 0,
2874
+ paddingHorizontal: 9
2875
+ },
2876
+ '3xl': {
2877
+ paddingVertical: 0,
2878
+ paddingHorizontal: 10
2879
+ },
2880
+ '4xl': {
2881
+ paddingVertical: 0,
2882
+ paddingHorizontal: 13
2883
+ },
2884
+ '5xl': {
2885
+ paddingVertical: 0,
2886
+ paddingHorizontal: 15
2887
+ },
2888
+ '6xl': {
2889
+ paddingVertical: 0,
2890
+ paddingHorizontal: 16
2891
+ }
2892
+ };
2893
+
2894
+ var _excluded$6 = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
2895
+ var SwitchContent = function SwitchContent(props) {
2896
+ return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
2897
+ type: "checkbox"
2898
+ }, props));
2899
+ };
2900
+ var SwitchView = function SwitchView(_ref) {
2901
+ var id = _ref.id,
2902
+ name = _ref.name,
2903
+ inActiveChild = _ref.inActiveChild,
2904
+ activeChild = _ref.activeChild,
2905
+ _ref$shadow = _ref.shadow,
2906
+ shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
2907
+ _ref$size = _ref.size,
2908
+ size = _ref$size === void 0 ? 'sm' : _ref$size,
2909
+ _ref$colorScheme = _ref.colorScheme,
2910
+ colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
2911
+ _ref$on = _ref.on,
2912
+ on = _ref$on === void 0 ? false : _ref$on,
2913
+ _ref$isHovered = _ref.isHovered,
2914
+ isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
2915
+ _ref$isDisabled = _ref.isDisabled,
2916
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
2917
+ _ref$isReadOnly = _ref.isReadOnly,
2918
+ isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
2919
+ onChange = _ref.onChange,
2920
+ onValueChange = _ref.onValueChange,
2921
+ _ref$setOn = _ref.setOn,
2922
+ setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
2923
+ _ref$setIsHovered = _ref.setIsHovered,
2924
+ setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
2925
+ _ref$styles = _ref.styles,
2926
+ styles = _ref$styles === void 0 ? {
2927
+ slider: {},
2928
+ circle: {}
2929
+ } : _ref$styles,
2930
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
2931
+ var handleToggle = function handleToggle(event) {
2932
+ if (!isReadOnly) {
2933
+ setOn(!on);
2934
+ if (onChange) onChange(event);
2935
+ }
2936
+ };
2937
+ var handleHover = function handleHover() {
2938
+ return setIsHovered(!isHovered);
2939
+ };
2940
+ return /*#__PURE__*/React__default.createElement(Label.Label, {
2941
+ htmlFor: id,
2942
+ onMouseEnter: handleHover,
2943
+ onMouseLeave: handleHover
2944
+ }, /*#__PURE__*/React__default.createElement(SwitchContent, Object.assign({
2945
+ id: id,
2946
+ name: name,
2947
+ opacity: 0,
2948
+ width: 0,
2949
+ height: 0,
2950
+ checked: on,
2951
+ onChange: handleToggle,
2952
+ disabled: isDisabled,
2953
+ readOnly: isReadOnly
2954
+ }, onValueChange && {
2955
+ onValueChange: handleToggle
2956
+ }, props)), /*#__PURE__*/React__default.createElement(View.View, Object.assign({
2957
+ display: "flex",
2958
+ cursor: "pointer",
2959
+ alignItems: "center",
2960
+ borderRadius: 24,
2961
+ filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
2962
+ transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
2963
+ backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
2964
+ justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
2965
+ }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && /*#__PURE__*/React__default.createElement(View.View, null, activeChild), /*#__PURE__*/React__default.createElement(View.View, Object.assign({
2966
+ borderRadius: "50%",
2967
+ backgroundColor: "white"
2968
+ }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React__default.createElement(View.View, null, inActiveChild)));
2969
+ };
2970
+
2971
+ var SwitchComponent = function SwitchComponent(props) {
2972
+ var switchStates = useSwitchState(props);
2973
+ return /*#__PURE__*/React__default.createElement(SwitchView, Object.assign({}, switchStates, props));
2974
+ };
2975
+ var Switch = SwitchComponent;
2976
+
2977
+ var useTextAreaState = function useTextAreaState(_ref) {
2978
+ var label = _ref.label,
2979
+ placeholder = _ref.placeholder,
2980
+ defaultValue = _ref.defaultValue,
2981
+ value = _ref.value;
2982
+ var _useState = React.useState(label != null ? label : placeholder),
2983
+ hint = _useState[0],
2984
+ setHint = _useState[1];
2985
+ var _useState2 = React.useState(false),
2986
+ isHovered = _useState2[0],
2987
+ setIsHovered = _useState2[1];
2988
+ var _useState3 = React.useState(value || defaultValue || ''),
2989
+ inputValue = _useState3[0],
2990
+ setInputValue = _useState3[1];
2991
+ var _useState4 = React.useState(false),
2992
+ isFocused = _useState4[0],
2993
+ setIsFocused = _useState4[1];
2994
+ return {
2995
+ hint: hint,
2996
+ setHint: setHint,
2997
+ isHovered: isHovered,
2998
+ setIsHovered: setIsHovered,
2999
+ inputValue: inputValue,
3000
+ setInputValue: setInputValue,
3001
+ isFocused: isFocused,
3002
+ setIsFocused: setIsFocused
3003
+ };
3004
+ };
3005
+
3006
+ var _excluded$7 = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
3007
+ var TextAreaView = function TextAreaView(_ref) {
3008
+ var id = _ref.id,
3009
+ name = _ref.name,
3010
+ hint = _ref.hint,
3011
+ error = _ref.error,
3012
+ label = _ref.label,
3013
+ shadow = _ref.shadow,
3014
+ inputValue = _ref.inputValue,
3015
+ helperText = _ref.helperText,
3016
+ placeholder = _ref.placeholder,
3017
+ _ref$size = _ref.size,
3018
+ size = _ref$size === void 0 ? 'sm' : _ref$size,
3019
+ _ref$shape = _ref.shape,
3020
+ shape = _ref$shape === void 0 ? 'default' : _ref$shape,
3021
+ _ref$variant = _ref.variant,
3022
+ variant = _ref$variant === void 0 ? 'default' : _ref$variant,
3023
+ _ref$colorScheme = _ref.colorScheme,
3024
+ colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
3025
+ _ref$isHovered = _ref.isHovered,
3026
+ isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
3027
+ _ref$isFocused = _ref.isFocused,
3028
+ isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
3029
+ _ref$isEditable = _ref.isEditable,
3030
+ isEditable = _ref$isEditable === void 0 ? false : _ref$isEditable,
3031
+ _ref$isReadOnly = _ref.isReadOnly,
3032
+ isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
3033
+ _ref$isDisabled = _ref.isDisabled,
3034
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
3035
+ _ref$isAutoFocus = _ref.isAutoFocus,
3036
+ isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
3037
+ _ref$isMultiline = _ref.isMultiline,
3038
+ isMultiline = _ref$isMultiline === void 0 ? false : _ref$isMultiline,
3039
+ _ref$maxRows = _ref.maxRows,
3040
+ maxRows = _ref$maxRows === void 0 ? 3 : _ref$maxRows,
3041
+ _ref$maxCols = _ref.maxCols,
3042
+ maxCols = _ref$maxCols === void 0 ? 30 : _ref$maxCols,
3043
+ _ref$onBlur = _ref.onBlur,
3044
+ onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
3045
+ onChange = _ref.onChange,
3046
+ onFocus = _ref.onFocus,
3047
+ onChangeText = _ref.onChangeText,
3048
+ _ref$setHint = _ref.setHint,
3049
+ setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
3050
+ _ref$setInputValue = _ref.setInputValue,
3051
+ setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
3052
+ _ref$setIsFocused = _ref.setIsFocused,
3053
+ setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
3054
+ _ref$setIsHovered = _ref.setIsHovered,
3055
+ setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
3056
+ _ref$styles = _ref.styles,
3057
+ styles = _ref$styles === void 0 ? {
3058
+ box: {},
3059
+ text: {},
3060
+ label: {},
3061
+ helperText: {},
3062
+ field: {}
3063
+ } : _ref$styles,
3064
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
3065
+ var isWithLabel = !!(isFocused && label);
3066
+ React.useMemo(function () {
3067
+ setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
3068
+ }, [inputValue, isFocused, label, placeholder]);
3069
+ var fieldStyles = Object.assign({
3070
+ margin: 0,
3071
+ paddingVertical: 8,
3072
+ paddingHorizontal: 0,
3073
+ width: '100%',
3074
+ heigth: '100%',
3075
+ border: 'none',
3076
+ on: {
3077
+ focus: {
3078
+ outline: 'none'
3079
+ }
3080
+ },
3081
+ fontSize: appStudio.Typography.fontSizes[size],
3082
+ backgroundColor: 'transparent',
3083
+ color: isDisabled ? 'trueGray.600' : 'blueGray.700',
3084
+ cursor: isDisabled ? 'not-allowed' : 'auto'
3085
+ }, styles['field']);
3086
+ var handleHover = function handleHover() {
3087
+ return setIsHovered(!isHovered);
3088
+ };
3089
+ var handleFocus = function handleFocus() {
3090
+ setIsFocused(true);
3091
+ if (onFocus) onFocus();
3092
+ };
3093
+ var handleBlur = function handleBlur(event) {
3094
+ onBlur(event);
3095
+ setIsFocused(false);
3096
+ };
3097
+ var handleChange = function handleChange(event) {
3098
+ if (typeof event === 'string') {
3099
+ //for ios and android
3100
+ setInputValue(event);
3101
+ if (onChangeText) onChangeText(event);
3102
+ } else {
3103
+ setInputValue(event.target.value);
3104
+ if (onChange) onChange(event);
3105
+ }
3106
+ };
3107
+ return /*#__PURE__*/React__default.createElement(Input.FieldContainer, {
3108
+ helperText: helperText,
3109
+ error: error,
3110
+ styles: styles
3111
+ }, /*#__PURE__*/React__default.createElement(Input.FieldContent, {
3112
+ label: label,
3113
+ size: size,
3114
+ error: error,
3115
+ shape: shape,
3116
+ styles: styles,
3117
+ shadow: shadow,
3118
+ variant: variant,
3119
+ value: inputValue,
3120
+ color: colorScheme,
3121
+ isHovered: isHovered,
3122
+ isDisabled: isDisabled,
3123
+ isReadOnly: isReadOnly,
3124
+ isFocused: isFocused,
3125
+ isWithLabel: isWithLabel,
3126
+ colorScheme: colorScheme,
3127
+ onMouseEnter: handleHover,
3128
+ onMouseLeave: handleHover
3129
+ }, /*#__PURE__*/React__default.createElement(Input.FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(Input.FieldLabel, Object.assign({
3130
+ htmlFor: id,
3131
+ color: colorScheme,
3132
+ error: error
3133
+ }, styles), label), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
3134
+ as: "textarea",
3135
+ id: id,
3136
+ name: name,
3137
+ rows: maxRows,
3138
+ cols: maxCols,
3139
+ value: inputValue,
3140
+ readOnly: isReadOnly,
3141
+ disabled: isDisabled,
3142
+ autoFocus: isAutoFocus,
3143
+ editable: isEditable,
3144
+ placeholder: hint,
3145
+ onBlur: handleBlur,
3146
+ onFocus: handleFocus,
3147
+ onChange: handleChange,
3148
+ multiline: isMultiline
3149
+ }, fieldStyles, props, onChangeText && {
3150
+ onChangeText: handleChange
3151
+ })))));
3152
+ };
3153
+
3154
+ var TextAreaComponent = function TextAreaComponent(props) {
3155
+ var textAreaState = useTextAreaState(props);
3156
+ return /*#__PURE__*/React__default.createElement(TextAreaView, Object.assign({}, textAreaState, props));
3157
+ };
3158
+ /**
3159
+ * Text Area is an component used to create a multi-line input field.
3160
+ */
3161
+ var TextArea = TextAreaComponent;
3162
+
3163
+ var useTextFieldState = function useTextFieldState(_ref) {
3164
+ var label = _ref.label,
3165
+ placeholder = _ref.placeholder,
3166
+ value = _ref.value;
3167
+ var _useState = React.useState(label != null ? label : placeholder),
3168
+ hint = _useState[0],
3169
+ setHint = _useState[1];
3170
+ var _useState2 = React.useState(false),
3171
+ isFocused = _useState2[0],
3172
+ setIsFocused = _useState2[1];
3173
+ var _useState3 = React.useState(false),
3174
+ isHovered = _useState3[0],
3175
+ setIsHovered = _useState3[1];
3176
+ var _useState4 = React.useState(value || ''),
3177
+ inputValue = _useState4[0],
3178
+ setInputValue = _useState4[1];
3179
+ return {
3180
+ hint: hint,
3181
+ setHint: setHint,
3182
+ isFocused: isFocused,
3183
+ setIsFocused: setIsFocused,
3184
+ isHovered: isHovered,
3185
+ setIsHovered: setIsHovered,
3186
+ inputValue: inputValue,
3187
+ setInputValue: setInputValue
3188
+ };
3189
+ };
3190
+
3191
+ var _excluded$8 = ["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"];
3192
+ var TextFieldInput = function TextFieldInput(props) {
3193
+ return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
3194
+ type: "text"
3195
+ }, props));
3196
+ };
3197
+ var TextFieldView = function TextFieldView(_ref) {
3198
+ var id = _ref.id,
3199
+ name = _ref.name,
3200
+ label = _ref.label,
3201
+ hint = _ref.hint,
3202
+ inputValue = _ref.inputValue,
3203
+ onChange = _ref.onChange,
3204
+ leftChild = _ref.leftChild,
3205
+ rightChild = _ref.rightChild,
3206
+ helperText = _ref.helperText,
3207
+ placeholder = _ref.placeholder,
3208
+ onChangeText = _ref.onChangeText,
3209
+ _ref$shadow = _ref.shadow,
3210
+ shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
3211
+ _ref$styles = _ref.styles,
3212
+ styles = _ref$styles === void 0 ? {
3213
+ box: {},
3214
+ field: {},
3215
+ label: {},
3216
+ helperText: {},
3217
+ text: {}
3218
+ } : _ref$styles,
3219
+ _ref$size = _ref.size,
3220
+ size = _ref$size === void 0 ? 'md' : _ref$size,
3221
+ _ref$shape = _ref.shape,
3222
+ shape = _ref$shape === void 0 ? 'default' : _ref$shape,
3223
+ _ref$variant = _ref.variant,
3224
+ variant = _ref$variant === void 0 ? 'default' : _ref$variant,
3225
+ _ref$colorScheme = _ref.colorScheme,
3226
+ colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
3227
+ _ref$error = _ref.error,
3228
+ error = _ref$error === void 0 ? false : _ref$error,
3229
+ _ref$isFocused = _ref.isFocused,
3230
+ isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
3231
+ _ref$isHovered = _ref.isHovered,
3232
+ isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
3233
+ _ref$isDisabled = _ref.isDisabled,
3234
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
3235
+ _ref$isReadOnly = _ref.isReadOnly,
3236
+ isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
3237
+ _ref$isClearable = _ref.isClearable,
3238
+ isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
3239
+ _ref$isAutoFocus = _ref.isAutoFocus,
3240
+ isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
3241
+ _ref$setHint = _ref.setHint,
3242
+ setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
3243
+ _ref$setIsFocused = _ref.setIsFocused,
3244
+ setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
3245
+ _ref$setIsHovered = _ref.setIsHovered,
3246
+ setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
3247
+ _ref$setInputValue = _ref.setInputValue,
3248
+ setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
3249
+ onFocus = _ref.onFocus,
3250
+ _ref$onBlur = _ref.onBlur,
3251
+ onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
3252
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
3253
+ var _useTheme = appStudio.useTheme(),
3254
+ getColor = _useTheme.getColor;
3255
+ var IconColor = getColor('color.blueGray.700');
3256
+ var isWithLabel = !!(isFocused && label);
3257
+ React.useMemo(function () {
3258
+ setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
3259
+ }, [inputValue, isFocused, label, placeholder]);
3260
+ var fieldStyles = Object.assign({
3261
+ margin: 0,
3262
+ paddingVertical: 8,
3263
+ padddingHorizontal: 0,
3264
+ width: '100%',
3265
+ heigth: '100%',
3266
+ border: 'none',
3267
+ on: {
3268
+ focus: {
3269
+ outline: 'none'
3270
+ }
3271
+ },
3272
+ fontSize: appStudio.Typography.fontSizes[size],
3273
+ backgroundColor: 'transparent',
3274
+ color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
3275
+ cursor: isDisabled ? 'not-allowed' : 'auto'
3276
+ }, styles['field']);
3277
+ var handleFocus = function handleFocus() {
3278
+ setIsFocused(true);
3279
+ if (onFocus) onFocus();
3280
+ };
3281
+ var handleHover = function handleHover() {
3282
+ return setIsHovered(!isHovered);
3283
+ };
3284
+ var handleBlur = function handleBlur(event) {
3285
+ onBlur(event);
3286
+ setIsFocused(false);
3287
+ };
3288
+ var handleChange = function handleChange(event) {
3289
+ if (typeof event === 'string') {
3290
+ //for ios and android
3291
+ setInputValue(event);
3292
+ if (onChangeText) onChangeText(event);
3293
+ } else {
3294
+ //Web
3295
+ setInputValue(event.target.value);
3296
+ if (onChange) onChange(event);
3297
+ }
3298
+ };
3299
+ var handleClear = function handleClear() {
3300
+ setInputValue('');
3301
+ //Web
3302
+ if (onChange) {
3303
+ onBlur({
3304
+ target: {
3305
+ name: name
3306
+ }
3307
+ });
3308
+ onChange({
3309
+ target: {
3310
+ name: name,
3311
+ value: ''
3312
+ }
3313
+ });
3314
+ }
3315
+ //for ios and android
3316
+ if (typeof document === 'undefined' && onChangeText) onChangeText('');
3317
+ };
3318
+ return /*#__PURE__*/React__default.createElement(FieldContainer.FieldContainer, {
3319
+ helperText: helperText,
3320
+ error: error,
3321
+ styles: styles
3322
+ }, /*#__PURE__*/React__default.createElement(FieldContent.FieldContent, {
3323
+ label: label,
3324
+ size: size,
3325
+ error: error,
3326
+ shape: shape,
3327
+ styles: styles,
3328
+ shadow: shadow,
3329
+ variant: variant,
3330
+ value: inputValue,
3331
+ color: colorScheme,
3332
+ isHovered: isHovered,
3333
+ isDisabled: isDisabled,
3334
+ isReadOnly: isReadOnly,
3335
+ isFocused: isFocused,
3336
+ isWithLabel: isWithLabel,
3337
+ colorScheme: colorScheme,
3338
+ onMouseEnter: handleHover,
3339
+ onMouseLeave: handleHover
3340
+ }, leftChild, /*#__PURE__*/React__default.createElement(FieldWrapper.FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel.FieldLabel, Object.assign({
3341
+ htmlFor: id,
3342
+ color: colorScheme,
3343
+ error: error
3344
+ }, styles), label), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
3345
+ id: id,
3346
+ name: name,
3347
+ value: inputValue,
3348
+ readOnly: isReadOnly,
3349
+ disabled: isDisabled,
3350
+ autoFocus: isAutoFocus,
3351
+ placeholder: hint,
3352
+ onFocus: handleFocus,
3353
+ onBlur: handleBlur,
3354
+ autoComplete: "off"
3355
+ }, fieldStyles, props, {
3356
+ onChange: handleChange
3357
+ }, onChangeText && {
3358
+ onChangeText: handleChange
3359
+ }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React__default.createElement(FieldIcons.FieldIcons, null, rightChild && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React__default.createElement(Svg.CloseSvg, {
3360
+ size: appStudio.Typography.fontSizes[size],
3361
+ color: IconColor,
3362
+ onClick: handleClear
3363
+ }))));
3364
+ };
3365
+
3366
+ var TextFieldComponent = function TextFieldComponent(props) {
3367
+ var textFieldStates = useTextFieldState(props);
3368
+ return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
3369
+ };
3370
+ /**
3371
+ * TextField is used to capture text data from users.
3372
+ */
3373
+ var TextField = TextFieldComponent;
3374
+
3375
+ var _excluded$9 = ["children", "wrap"];
3376
+ var CenterView = function CenterView(_ref) {
3377
+ var children = _ref.children,
3378
+ wrap = _ref.wrap,
3379
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
3380
+ return /*#__PURE__*/React__default.createElement(View.View, Object.assign({
3381
+ display: "flex",
3382
+ justifyContent: "center",
3383
+ alignItems: "center",
3384
+ flexWrap: wrap
3385
+ }, props), children);
3386
+ };
3387
+
3388
+ /**
3389
+ * The Center component is a React functional component that provides a centered layout for its children using flexbox.
3390
+ */
3391
+ var CenterComponent = function CenterComponent(props) {
3392
+ return /*#__PURE__*/React__default.createElement(CenterView, Object.assign({}, props));
3393
+ };
3394
+ var Center = CenterComponent;
3395
+
3396
+ var _excluded$a = ["children", "wrap", "justify", "isReversed"];
3397
+ var HorizontalView = function HorizontalView(_ref) {
3398
+ var children = _ref.children,
3399
+ _ref$wrap = _ref.wrap,
3400
+ wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
3401
+ _ref$justify = _ref.justify,
3402
+ justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
3403
+ _ref$isReversed = _ref.isReversed,
3404
+ isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
3405
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
3406
+ return /*#__PURE__*/React__default.createElement(components.View, Object.assign({
3407
+ display: "flex",
3408
+ flexWrap: wrap,
3409
+ flexDirection: isReversed ? 'row-reverse' : 'row',
3410
+ justifyContent: justify
3411
+ }, props), children);
3412
+ };
3413
+
3414
+ /**
3415
+ * Horizontal layout aligns all the elements in a container on the horizontal axis.
3416
+ */
3417
+ var HorizontalComponent = function HorizontalComponent(props) {
3418
+ return /*#__PURE__*/React__default.createElement(HorizontalView, Object.assign({}, props));
3419
+ };
3420
+ var Horizontal = HorizontalComponent;
3421
+
3422
+ var _excluded$b = ["children", "wrap", "justify", "isReversed"];
3423
+ var VerticalView = function VerticalView(_ref) {
3424
+ var children = _ref.children,
3425
+ _ref$wrap = _ref.wrap,
3426
+ wrap = _ref$wrap === void 0 ? 'nowrap' : _ref$wrap,
3427
+ _ref$justify = _ref.justify,
3428
+ justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
3429
+ _ref$isReversed = _ref.isReversed,
3430
+ isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
3431
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
3432
+ return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
3433
+ display: "flex",
3434
+ flexWrap: wrap,
3435
+ flexDirection: isReversed ? 'column-reverse' : 'column',
3436
+ justifyContent: justify
3437
+ }, props), children);
3438
+ };
3439
+
3440
+ /**
3441
+ * Vertical layout aligns all the elements in a container on the vertical axis.
3442
+ */
3443
+ var VerticalComponent = function VerticalComponent(props) {
3444
+ return /*#__PURE__*/React__default.createElement(VerticalView, Object.assign({}, props));
3445
+ };
3446
+ var Vertical = VerticalComponent;
3447
+
3448
+ var useLinkState = function useLinkState() {
3449
+ var _useState = React.useState(false),
3450
+ isHovered = _useState[0],
3451
+ setIsHovered = _useState[1];
3452
+ return {
3453
+ isHovered: isHovered,
3454
+ setIsHovered: setIsHovered
3455
+ };
3456
+ };
3457
+
3458
+ var IconSizes$4 = {
3459
+ xs: 12,
3460
+ sm: 14,
3461
+ md: 16,
3462
+ lg: 18,
3463
+ xl: 20,
3464
+ '2xl': 24,
3465
+ '3xl': 30,
3466
+ '4xl': 36,
3467
+ '5xl': 48,
3468
+ '6xl': 64
3469
+ };
3470
+
3471
+ var _excluded$c = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
3472
+ var LinkView = function LinkView(_ref) {
3473
+ var children = _ref.children,
3474
+ _ref$href = _ref.href,
3475
+ href = _ref$href === void 0 ? '/' : _ref$href,
3476
+ _ref$iconSize = _ref.iconSize,
3477
+ iconSize = _ref$iconSize === void 0 ? 'sm' : _ref$iconSize,
3478
+ _ref$underline = _ref.underline,
3479
+ underline = _ref$underline === void 0 ? 'default' : _ref$underline,
3480
+ _ref$isHovered = _ref.isHovered,
3481
+ isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
3482
+ _ref$isExternal = _ref.isExternal,
3483
+ isExternal = _ref$isExternal === void 0 ? false : _ref$isExternal,
3484
+ _ref$colorScheme = _ref.colorScheme,
3485
+ colorScheme = _ref$colorScheme === void 0 ? '#0072F5' : _ref$colorScheme,
3486
+ _ref$styles = _ref.styles,
3487
+ styles = _ref$styles === void 0 ? {
3488
+ icon: {},
3489
+ text: {}
3490
+ } : _ref$styles,
3491
+ _ref$setIsHovered = _ref.setIsHovered,
3492
+ setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
3493
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
3494
+ var handleHover = function handleHover() {
3495
+ if (underline === 'hover') setIsHovered(true);
3496
+ };
3497
+ return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
3498
+ to: href,
3499
+ target: isExternal ? '_blank' : '_self'
3500
+ }, /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
3501
+ color: colorScheme,
3502
+ onMouseEnter: handleHover,
3503
+ onMouseLeave: handleHover,
3504
+ textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
3505
+ }, styles.text, props), /*#__PURE__*/React__default.createElement(components.Horizontal, {
3506
+ gap: 3,
3507
+ alignItems: "center",
3508
+ wrap: "nowrap"
3509
+ }, children, isExternal && /*#__PURE__*/React__default.createElement(Svg.ExternalLinkSvg, {
3510
+ color: colorScheme,
3511
+ size: IconSizes$4[iconSize],
3512
+ style: styles.icon
3513
+ }))));
3514
+ };
3515
+
3516
+ var LinkComponent = function LinkComponent(props) {
3517
+ var linkStates = useLinkState();
3518
+ return /*#__PURE__*/React__default.createElement(LinkView, Object.assign({}, linkStates, props));
3519
+ };
3520
+ /**
3521
+ * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
3522
+ */
3523
+ var Link = LinkComponent;
3524
+
3525
+ var DefaultSizes = {
3526
+ xs: 14,
3527
+ sm: 18,
3528
+ md: 22,
3529
+ lg: 26,
3530
+ xl: 30,
3531
+ '2xl': 40,
3532
+ '3xl': 50,
3533
+ '4xl': 60,
3534
+ '5xl': 70,
3535
+ '6xl': 80
3536
+ };
3537
+ var DefaultSpeeds = {
3538
+ fast: 50,
3539
+ normal: 100,
3540
+ slow: 300
3541
+ };
3542
+
3543
+ var _excluded$d = ["size", "speed", "color"],
3544
+ _excluded2$1 = ["size", "speed", "color"],
3545
+ _excluded3$1 = ["size", "speed", "color"],
3546
+ _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
3547
+ var DefaultSpinner = function DefaultSpinner(_ref) {
3548
+ var _ref$size = _ref.size,
3549
+ size = _ref$size === void 0 ? 'md' : _ref$size,
3550
+ _ref$speed = _ref.speed,
3551
+ speed = _ref$speed === void 0 ? 'normal' : _ref$speed,
3552
+ _ref$color = _ref.color,
3553
+ color = _ref$color === void 0 ? 'theme.loading' : _ref$color,
3554
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
3555
+ var theme = appStudio.useTheme();
3556
+ var colorStyle = theme.getColor(color);
3557
+ var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
3558
+ var _useState = React.useState(0),
3559
+ angle = _useState[0],
3560
+ setAngle = _useState[1];
3561
+ React.useEffect(function () {
3562
+ var intervalId = setInterval(function () {
3563
+ setAngle(function (prevAngle) {
3564
+ return prevAngle + 45;
3565
+ });
3566
+ }, DefaultSpeeds[speed]);
3567
+ return function () {
3568
+ return clearInterval(intervalId);
3569
+ };
3570
+ }, [speed]);
3571
+ return /*#__PURE__*/React__default.createElement("svg", Object.assign({
3572
+ xmlns: "http://www.w3.org/2000/svg",
3573
+ width: sizeStyle + "px",
3574
+ height: sizeStyle + "px",
3575
+ viewBox: "0 0 24 24",
3576
+ fill: "none",
3577
+ stroke: colorStyle,
3578
+ strokeWidth: "2",
3579
+ strokeLinecap: "round",
3580
+ strokeLinejoin: "round",
3581
+ style: {
3582
+ transform: "rotate(" + angle + "deg)"
3583
+ }
3584
+ }, props), /*#__PURE__*/React__default.createElement("g", {
3585
+ id: "SVGRepo_bgCarrier",
3586
+ strokeWidth: "0"
3587
+ }), /*#__PURE__*/React__default.createElement("g", {
3588
+ id: "SVGRepo_tracerCarrier",
3589
+ strokeLinecap: "round",
3590
+ strokeLinejoin: "round"
3591
+ }), /*#__PURE__*/React__default.createElement("g", {
3592
+ id: "SVGRepo_iconCarrier"
3593
+ }, /*#__PURE__*/React__default.createElement("path", {
3594
+ d: "M21 12a9 9 0 11-6.219-8.56"
3595
+ })));
3596
+ };
3597
+ var Dotted = function Dotted(_ref2) {
3598
+ var _ref2$size = _ref2.size,
3599
+ size = _ref2$size === void 0 ? 'md' : _ref2$size,
3600
+ _ref2$speed = _ref2.speed,
3601
+ speed = _ref2$speed === void 0 ? 'normal' : _ref2$speed,
3602
+ _ref2$color = _ref2.color,
3603
+ color = _ref2$color === void 0 ? 'theme.loading' : _ref2$color,
3604
+ props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
3605
+ var theme = appStudio.useTheme();
3606
+ var colorStyle = theme.getColor(color);
3607
+ var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
3608
+ var _useState2 = React.useState(0),
3609
+ angle = _useState2[0],
3610
+ setAngle = _useState2[1];
3611
+ React.useEffect(function () {
3612
+ var intervalId = setInterval(function () {
3613
+ setAngle(function (prevAngle) {
3614
+ return prevAngle + 45;
3615
+ });
3616
+ }, DefaultSpeeds[speed]);
3617
+ return function () {
3618
+ return clearInterval(intervalId);
3619
+ };
3620
+ }, [speed]);
3621
+ return /*#__PURE__*/React__default.createElement("svg", Object.assign({
3622
+ xmlns: "http://www.w3.org/2000/svg",
3623
+ viewBox: "0 0 50 50",
3624
+ width: sizeStyle + "px",
3625
+ height: sizeStyle + "px",
3626
+ style: {
3627
+ transform: "rotate(" + angle + "deg)"
3628
+ }
3629
+ }, props), /*#__PURE__*/React__default.createElement("circle", {
3630
+ cx: "10",
3631
+ cy: "25",
3632
+ r: "4",
3633
+ fill: colorStyle
3634
+ }), /*#__PURE__*/React__default.createElement("circle", {
3635
+ cx: "25",
3636
+ cy: "25",
3637
+ r: "4",
3638
+ fill: colorStyle
3639
+ }), /*#__PURE__*/React__default.createElement("circle", {
3640
+ cx: "40",
3641
+ cy: "25",
3642
+ r: "4",
3643
+ fill: colorStyle
3644
+ }));
3645
+ };
3646
+ var Quarter = function Quarter(_ref3) {
3647
+ var _ref3$size = _ref3.size,
3648
+ size = _ref3$size === void 0 ? 'md' : _ref3$size,
3649
+ _ref3$speed = _ref3.speed,
3650
+ speed = _ref3$speed === void 0 ? 'normal' : _ref3$speed,
3651
+ _ref3$color = _ref3.color,
3652
+ color = _ref3$color === void 0 ? 'theme.loading' : _ref3$color,
3653
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
3654
+ var theme = appStudio.useTheme();
3655
+ var colorStyle = theme.getColor(color);
3656
+ var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
3657
+ var _useState3 = React.useState(0),
3658
+ angle = _useState3[0],
3659
+ setAngle = _useState3[1];
3660
+ React.useEffect(function () {
3661
+ var intervalId = setInterval(function () {
3662
+ setAngle(function (prevAngle) {
3663
+ return prevAngle + 45;
3664
+ });
3665
+ }, DefaultSpeeds[speed]);
3666
+ return function () {
3667
+ return clearInterval(intervalId);
3668
+ };
3669
+ }, [speed]);
3670
+ return /*#__PURE__*/React__default.createElement("svg", Object.assign({
3671
+ xmlns: "http://www.w3.org/2000/svg",
3672
+ viewBox: "0 0 50 50",
3673
+ width: sizeStyle + "px",
3674
+ height: sizeStyle + "px",
3675
+ style: {
3676
+ transform: "rotate(" + angle + "deg)"
3677
+ }
3678
+ }, props), /*#__PURE__*/React__default.createElement("circle", {
3679
+ cx: "25",
3680
+ cy: "25",
3681
+ r: "20",
3682
+ fill: "none",
3683
+ stroke: colorStyle,
3684
+ strokeWidth: "5",
3685
+ strokeDasharray: "1,10"
3686
+ }));
3687
+ };
3688
+ var LoaderView = function LoaderView(_ref4) {
3689
+ var size = _ref4.size,
3690
+ children = _ref4.children,
3691
+ textColor = _ref4.textColor,
3692
+ loaderColor = _ref4.loaderColor,
3693
+ _ref4$type = _ref4.type,
3694
+ type = _ref4$type === void 0 ? 'default' : _ref4$type,
3695
+ _ref4$speed = _ref4.speed,
3696
+ speed = _ref4$speed === void 0 ? 'normal' : _ref4$speed,
3697
+ _ref4$textPosition = _ref4.textPosition,
3698
+ textPosition = _ref4$textPosition === void 0 ? 'right' : _ref4$textPosition,
3699
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
3700
+ var style = {
3701
+ size: size,
3702
+ speed: speed,
3703
+ color: loaderColor
3704
+ };
3705
+ var variants = {
3706
+ default: /*#__PURE__*/React__default.createElement(DefaultSpinner, Object.assign({}, style)),
3707
+ dotted: /*#__PURE__*/React__default.createElement(Dotted, Object.assign({}, style)),
3708
+ quarter: /*#__PURE__*/React__default.createElement(Quarter, Object.assign({}, style))
3709
+ };
3710
+ return /*#__PURE__*/React__default.createElement(components.Center, Object.assign({
3711
+ gap: 10,
3712
+ flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
3713
+ }, props), (textPosition === 'left' || textPosition === 'top') && children && /*#__PURE__*/React__default.createElement(components.View, {
3714
+ color: textColor
3715
+ }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && /*#__PURE__*/React__default.createElement(components.View, {
3716
+ color: textColor
3717
+ }, children));
3718
+ };
3719
+
3720
+ var LoadingComponent = function LoadingComponent(props) {
3721
+ return /*#__PURE__*/React__default.createElement(LoaderView, Object.assign({}, props));
3722
+ };
3723
+ /**
3724
+ * It gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
3725
+ */
3726
+ var Loading = LoadingComponent;
3727
+
3728
+ var ContainerShapes = {
3729
+ sharp: {
3730
+ borderRadius: 0
3731
+ },
3732
+ rounded: {
3733
+ borderRadius: 4
3734
+ }
3735
+ };
3736
+ var OverlayAlignments = {
3737
+ center: {
3738
+ justifyContent: 'center',
3739
+ alignItems: 'center'
3740
+ },
3741
+ top: {
3742
+ justifyContent: 'center'
3743
+ },
3744
+ right: {
3745
+ justifyContent: 'flex-end',
3746
+ alignItems: 'center'
3747
+ },
3748
+ bottom: {
3749
+ justifyContent: 'center',
3750
+ alignItems: 'flex-end'
3751
+ },
3752
+ left: {
3753
+ alignItems: 'center'
3754
+ }
3755
+ };
3756
+ var HeaderIconSizes = {
3757
+ xs: 12,
3758
+ sm: 16,
3759
+ md: 20,
3760
+ lg: 24,
3761
+ xl: 28
3762
+ };
3763
+
3764
+ var _excluded$e = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
3765
+ _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
3766
+ _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
3767
+ _excluded4$2 = ["children"],
3768
+ _excluded5 = ["children"];
3769
+ var ModalOverlay = function ModalOverlay(_ref) {
3770
+ var children = _ref.children,
3771
+ blur = _ref.blur,
3772
+ _ref$isOpen = _ref.isOpen,
3773
+ isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
3774
+ _ref$isClosePrevented = _ref.isClosePrevented,
3775
+ isClosePrevented = _ref$isClosePrevented === void 0 ? false : _ref$isClosePrevented,
3776
+ _ref$onClose = _ref.onClose,
3777
+ onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
3778
+ _ref$position = _ref.position,
3779
+ position = _ref$position === void 0 ? 'center' : _ref$position,
3780
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
3781
+ var setOpen = useModalStore.useModalStore(function (state) {
3782
+ return state.setOpen;
3783
+ });
3784
+ var setOnClose = useModalStore.useModalStore(function (state) {
3785
+ return state.setOnClose;
3786
+ });
3787
+ React.useEffect(function () {
3788
+ setOnClose(onClose);
3789
+ if (isOpen) setOpen();
3790
+ });
3791
+ if (!isOpen) return null;
3792
+ var handleClick = function handleClick() {
3793
+ if (!isClosePrevented) onClose();
3794
+ };
3795
+ return /*#__PURE__*/React__default.createElement(components.Center, {
3796
+ position: "fixed",
3797
+ top: 0,
3798
+ left: 0,
3799
+ width: "100%",
3800
+ height: "100%",
3801
+ zIndex: 1000,
3802
+ onClick: handleClick,
3803
+ visibility: isOpen ? 'visible' : 'hidden'
3804
+ }, /*#__PURE__*/React__default.createElement(View.View, Object.assign({
3805
+ cursor: "pointer",
3806
+ position: "absolute",
3807
+ top: 0,
3808
+ left: 0,
3809
+ zIndex: 1000,
3810
+ width: "100vw",
3811
+ height: "100vh",
3812
+ display: "flex",
3813
+ backgroundColor: "blackAlpha.500",
3814
+ backdropFilter: blur ? "blur(" + blur + "px)" : undefined,
3815
+ onClick: handleClick
3816
+ }, OverlayAlignments[position], props), children));
3817
+ };
3818
+ var ModalContainer = function ModalContainer(_ref2) {
3819
+ var children = _ref2.children,
3820
+ shadow = _ref2.shadow,
3821
+ _ref2$isFullScreen = _ref2.isFullScreen,
3822
+ isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
3823
+ _ref2$shape = _ref2.shape,
3824
+ shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
3825
+ props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
3826
+ var defaultShadow = typeof document !== undefined ? {
3827
+ boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
3828
+ } : {
3829
+ elevation: 5,
3830
+ shadowColor: 'rgba(0, 0, 0, 0.3)',
3831
+ shadowOffset: {
3832
+ width: 0,
3833
+ height: 2
3834
+ },
3835
+ shadowOpacity: 1,
3836
+ shadowRadius: 8
3837
+ };
3838
+ var handleClick = function handleClick(event) {
3839
+ return event.stopPropagation();
3840
+ };
3841
+ return /*#__PURE__*/React__default.createElement(components.Vertical, Object.assign({
3842
+ cursor: "default",
3843
+ overflow: "hidden",
3844
+ backgroundColor: "white",
3845
+ width: isFullScreen ? '100%' : 600,
3846
+ height: isFullScreen ? '100%' : 'fit-content',
3847
+ onClick: handleClick
3848
+ }, shadow ? shadow : defaultShadow, ContainerShapes[shape], props), children);
3849
+ };
3850
+ var ModalHeader = function ModalHeader(_ref3) {
3851
+ var children = _ref3.children,
3852
+ _ref3$buttonColor = _ref3.buttonColor,
3853
+ buttonColor = _ref3$buttonColor === void 0 ? 'theme.primary' : _ref3$buttonColor,
3854
+ _ref3$iconSize = _ref3.iconSize,
3855
+ iconSize = _ref3$iconSize === void 0 ? 'md' : _ref3$iconSize,
3856
+ _ref3$buttonPosition = _ref3.buttonPosition,
3857
+ buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
3858
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
3859
+ var onClose = useModalStore.useModalStore(function (state) {
3860
+ return state.onClose;
3861
+ });
3862
+ var buttonIcon = /*#__PURE__*/React__default.createElement(components.Button, {
3863
+ onClick: onClose,
3864
+ colorScheme: "transparent",
3865
+ icon: /*#__PURE__*/React__default.createElement(Svg.CloseSvg, {
3866
+ size: HeaderIconSizes[iconSize],
3867
+ color: buttonColor
3868
+ }),
3869
+ padding: 0,
3870
+ margin: 0,
3871
+ filter: "none",
3872
+ isAuto: true
3873
+ });
3874
+ return /*#__PURE__*/React__default.createElement(components.Horizontal, Object.assign({
3875
+ justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
3876
+ alignItems: "center",
3877
+ paddingVertical: 15,
3878
+ paddingHorizontal: 20
3879
+ }, props), buttonPosition === 'left' && buttonIcon, children, buttonPosition === 'right' && buttonIcon);
3880
+ };
3881
+ var ModalBody = function ModalBody(_ref4) {
3882
+ var children = _ref4.children,
3883
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
3884
+ var defaultBorder = {
3885
+ borderBottomWidth: 2,
3886
+ borderTopWidth: 2,
3887
+ borderColor: 'rgba(250, 250, 250, 1)',
3888
+ borderStyle: 'solid'
3889
+ };
3890
+ return /*#__PURE__*/React__default.createElement(View.View, Object.assign({
3891
+ overflowY: "auto",
3892
+ paddingVertical: 15,
3893
+ paddingHorizontal: 20
3894
+ }, defaultBorder, props), children);
3895
+ };
3896
+ var ModalFooter = function ModalFooter(_ref5) {
3897
+ var children = _ref5.children,
3898
+ props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
3899
+ return /*#__PURE__*/React__default.createElement(components.Horizontal, Object.assign({
3900
+ marginTop: "auto",
3901
+ alignItems: "center",
3902
+ justifyContent: "flex-end",
3903
+ paddingVertical: 15,
3904
+ paddingHorizontal: 20
3905
+ }, props), children);
3906
+ };
3907
+
3908
+ /**
3909
+ * It is a custom content overlay that appears on top of the main screen.
3910
+ */
3911
+ // eslint-disable-next-line react/prop-types
3912
+ var Modal = function Modal(_ref) {
3913
+ var children = _ref.children;
3914
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
3915
+ };
3916
+ Modal.Overlay = ModalOverlay;
3917
+ Modal.Container = ModalContainer;
3918
+ Modal.Header = ModalHeader;
3919
+ Modal.Body = ModalBody;
3920
+ Modal.Footer = ModalFooter;
3921
+
3922
+ var HeadingSizes = {
3923
+ h1: {
3924
+ fontSize: 96,
3925
+ lineHeight: 112,
3926
+ letterSpacing: -1.5
3927
+ },
3928
+ h2: {
3929
+ fontSize: 60,
3930
+ lineHeight: 71,
3931
+ letterSpacing: -0.5
3932
+ },
3933
+ h3: {
3934
+ fontSize: 48,
3935
+ lineHeight: 57,
3936
+ letterSpacing: 0
3937
+ },
3938
+ h4: {
3939
+ fontSize: 34,
3940
+ lineHeight: 40,
3941
+ letterSpacing: 0.25
3942
+ },
3943
+ h5: {
3944
+ fontSize: 24,
3945
+ lineHeight: 28,
3946
+ letterSpacing: 0
3947
+ },
3948
+ h6: {
3949
+ fontSize: 20,
3950
+ lineHeight: 24,
3951
+ letterSpacing: 0.15
3952
+ }
3953
+ };
3954
+
3955
+ var _excluded$f = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
3956
+ var TextContent = function TextContent(_ref) {
3957
+ var children = _ref.children,
3958
+ isSub = _ref.isSub,
3959
+ isSup = _ref.isSup;
3960
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSub && /*#__PURE__*/React__default.createElement("sup", null, children), isSup && /*#__PURE__*/React__default.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children)) : children);
3961
+ };
3962
+ var TruncateText = function TruncateText(_ref2) {
3963
+ var text = _ref2.text,
3964
+ _ref2$maxLines = _ref2.maxLines,
3965
+ maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
3966
+ var containerRef = React.useRef(null);
3967
+ var _useState = React.useState(text),
3968
+ content = _useState[0],
3969
+ setContent = _useState[1];
3970
+ React.useEffect(function () {
3971
+ var textContent = content;
3972
+ var textNode = containerRef.current;
3973
+ if (textNode) {
3974
+ var contentHeight = textNode.offsetHeight;
3975
+ var comLineHeight = getComputedStyle(textNode).lineHeight;
3976
+ var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
3977
+ var maxHeight = Math.ceil(lineHeight * maxLines);
3978
+ if (contentHeight > maxHeight) {
3979
+ textContent = textContent.slice(0, -1);
3980
+ } else if (contentHeight === maxHeight) {
3981
+ if (content.length !== text.length) {
3982
+ textContent = textContent.slice(0, -3) + '...';
3983
+ }
3984
+ }
3985
+ setContent(textContent);
3986
+ }
3987
+ }, [maxLines, text, containerRef, content]);
3988
+ return /*#__PURE__*/React__default.createElement("div", {
3989
+ ref: containerRef
3990
+ }, content);
3991
+ };
3992
+ var TextView = function TextView(_ref3) {
3993
+ var children = _ref3.children,
3994
+ heading = _ref3.heading,
3995
+ maxLines = _ref3.maxLines,
3996
+ _ref3$isItalic = _ref3.isItalic,
3997
+ isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
3998
+ _ref3$isUnderlined = _ref3.isUnderlined,
3999
+ isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
4000
+ _ref3$isSub = _ref3.isSub,
4001
+ isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
4002
+ _ref3$isSup = _ref3.isSup,
4003
+ isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
4004
+ _ref3$isStriked = _ref3.isStriked,
4005
+ isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
4006
+ _ref3$isTruncated = _ref3.isTruncated,
4007
+ isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
4008
+ _ref3$weight = _ref3.weight,
4009
+ weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
4010
+ _ref3$size = _ref3.size,
4011
+ size = _ref3$size === void 0 ? 'md' : _ref3$size,
4012
+ props = _objectWithoutPropertiesLoose(_ref3, _excluded$f);
4013
+ var headingStyles = heading ? HeadingSizes[heading] : {};
4014
+ var noLineBreak = isSub || isSup ? {
4015
+ display: 'inline'
4016
+ } : {};
4017
+ var fontSize = appStudio.Typography.fontSizes[size];
4018
+ return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
4019
+ role: "text",
4020
+ fontSize: fontSize,
4021
+ lineHeight: appStudio.Typography.lineHeights[size],
4022
+ fontStyle: isItalic ? 'italic' : 'normal',
4023
+ fontWeight: appStudio.Typography.fontWeights[weight],
4024
+ textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
4025
+ }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React__default.createElement(TruncateText, {
4026
+ text: children,
4027
+ maxLines: maxLines
4028
+ }) : /*#__PURE__*/React__default.createElement(TextContent, Object.assign({
4029
+ isSub: isSub,
4030
+ isSup: isSup
4031
+ }, props), children));
4032
+ };
4033
+
4034
+ var TextComponent = function TextComponent(props) {
4035
+ return /*#__PURE__*/React__default.createElement(TextView, Object.assign({}, props));
4036
+ };
4037
+ /**
4038
+ * 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.
4039
+ */
4040
+ var Text = TextComponent;
4041
+
4042
+ Object.defineProperty(exports, 'View', {
4043
+ enumerable: true,
4044
+ get: function () {
4045
+ return appStudio.View;
4046
+ }
160
4047
  });
4048
+ exports.Button = Button;
4049
+ exports.Center = Center;
4050
+ exports.Checkbox = Checkbox;
4051
+ exports.CountryPicker = CountryPicker;
4052
+ exports.DatePicker = DatePicker;
4053
+ exports.Horizontal = Horizontal;
4054
+ exports.Link = Link;
4055
+ exports.Loading = Loading;
4056
+ exports.Modal = Modal;
4057
+ exports.Password = Password;
4058
+ exports.Select = Select;
4059
+ exports.Switch = Switch;
4060
+ exports.Text = Text;
4061
+ exports.TextArea = TextArea;
4062
+ exports.TextField = TextField;
4063
+ exports.Vertical = Vertical;
161
4064
  //# sourceMappingURL=web.cjs.development.js.map