@helpdice/ui 2.6.0-beta.3 → 2.6.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/auto-complete/index.js +26 -18
- package/dist/index.js +26 -18
- package/dist/input/index.js +26 -18
- package/dist/input/input-phone.d.ts +3 -0
- package/dist/table/index.js +26 -18
- package/esm/input/input-block-label.js +2 -1
- package/esm/input/input-phone.d.ts +3 -0
- package/esm/input/input-phone.js +28 -20
- package/package.json +1 -1
|
@@ -1791,7 +1791,8 @@ var InputError = function InputError(_ref) {
|
|
|
1791
1791
|
marginRight: 0,
|
|
1792
1792
|
marginLeft: 0,
|
|
1793
1793
|
marginBottom: '0.4rem',
|
|
1794
|
-
textAlign: 'left'
|
|
1794
|
+
textAlign: 'left',
|
|
1795
|
+
zIndex: 0
|
|
1795
1796
|
},
|
|
1796
1797
|
color: error ? "error" : 'default',
|
|
1797
1798
|
children: ["\xA0", text]
|
|
@@ -3317,7 +3318,10 @@ function PhoneInput(_ref) {
|
|
|
3317
3318
|
_ref$color = _ref.color,
|
|
3318
3319
|
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
3319
3320
|
children = _ref.children,
|
|
3320
|
-
fullWidth = _ref.fullWidth
|
|
3321
|
+
fullWidth = _ref.fullWidth,
|
|
3322
|
+
required = _ref.required,
|
|
3323
|
+
error = _ref.error,
|
|
3324
|
+
helperText = _ref.helperText;
|
|
3321
3325
|
var theme$1 = theme.useTheme();
|
|
3322
3326
|
var _useScale = useScale(),
|
|
3323
3327
|
SCALES = _useScale.SCALES;
|
|
@@ -3379,16 +3383,17 @@ function PhoneInput(_ref) {
|
|
|
3379
3383
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
3380
3384
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3381
3385
|
ref: dropdownRef,
|
|
3382
|
-
className: _JSXStyle.dynamic([["
|
|
3386
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : ''),
|
|
3383
3387
|
children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
|
|
3388
|
+
required: required,
|
|
3384
3389
|
children: children
|
|
3385
3390
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3386
|
-
className: _JSXStyle.dynamic([["
|
|
3391
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper",
|
|
3387
3392
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3388
3393
|
onClick: function onClick() {
|
|
3389
3394
|
return setDropdownOpen(!dropdownOpen);
|
|
3390
3395
|
},
|
|
3391
|
-
className: _JSXStyle.dynamic([["
|
|
3396
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle",
|
|
3392
3397
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3393
3398
|
style: {
|
|
3394
3399
|
display: 'flex',
|
|
@@ -3396,7 +3401,7 @@ function PhoneInput(_ref) {
|
|
|
3396
3401
|
gap: 5,
|
|
3397
3402
|
paddingRight: '15px'
|
|
3398
3403
|
},
|
|
3399
|
-
className: _JSXStyle.dynamic([["
|
|
3404
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3400
3405
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3401
3406
|
loading: "lazy",
|
|
3402
3407
|
width: "20",
|
|
@@ -3404,9 +3409,9 @@ function PhoneInput(_ref) {
|
|
|
3404
3409
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
3405
3410
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
3406
3411
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
3407
|
-
className: _JSXStyle.dynamic([["
|
|
3412
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3408
3413
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3409
|
-
className: _JSXStyle.dynamic([["
|
|
3414
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3410
3415
|
children: selectedCountry.phone
|
|
3411
3416
|
})]
|
|
3412
3417
|
})
|
|
@@ -3421,10 +3426,13 @@ function PhoneInput(_ref) {
|
|
|
3421
3426
|
onBlur: function onBlur() {
|
|
3422
3427
|
return setIsFocused(false);
|
|
3423
3428
|
},
|
|
3424
|
-
className: _JSXStyle.dynamic([["
|
|
3429
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
3425
3430
|
})]
|
|
3431
|
+
}), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
|
|
3432
|
+
error: error,
|
|
3433
|
+
text: helperText
|
|
3426
3434
|
}), dropdownOpen && /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3427
|
-
className: _JSXStyle.dynamic([["
|
|
3435
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown",
|
|
3428
3436
|
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
3429
3437
|
type: "text",
|
|
3430
3438
|
placeholder: "Search country...",
|
|
@@ -3432,22 +3440,22 @@ function PhoneInput(_ref) {
|
|
|
3432
3440
|
onChange: function onChange(e) {
|
|
3433
3441
|
return setSearchTerm(e.target.value);
|
|
3434
3442
|
},
|
|
3435
|
-
className: _JSXStyle.dynamic([["
|
|
3443
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
3436
3444
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3437
|
-
className: _JSXStyle.dynamic([["
|
|
3445
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list",
|
|
3438
3446
|
children: filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
3439
3447
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3440
3448
|
onClick: function onClick() {
|
|
3441
3449
|
return handleSelectCountry(c);
|
|
3442
3450
|
},
|
|
3443
|
-
className: _JSXStyle.dynamic([["
|
|
3451
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item",
|
|
3444
3452
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3445
3453
|
style: {
|
|
3446
3454
|
display: 'flex',
|
|
3447
3455
|
alignItems: 'center',
|
|
3448
3456
|
gap: 5
|
|
3449
3457
|
},
|
|
3450
|
-
className: _JSXStyle.dynamic([["
|
|
3458
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3451
3459
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3452
3460
|
loading: "lazy",
|
|
3453
3461
|
width: "23",
|
|
@@ -3455,23 +3463,23 @@ function PhoneInput(_ref) {
|
|
|
3455
3463
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
3456
3464
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
3457
3465
|
alt: "".concat(c.label, " Flag"),
|
|
3458
|
-
className: _JSXStyle.dynamic([["
|
|
3466
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3459
3467
|
}), c.phone, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3460
3468
|
style: {
|
|
3461
3469
|
color: 'grey'
|
|
3462
3470
|
},
|
|
3463
|
-
className: _JSXStyle.dynamic([["
|
|
3471
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3464
3472
|
children: c.label
|
|
3465
3473
|
})]
|
|
3466
3474
|
})
|
|
3467
3475
|
}, c.code);
|
|
3468
3476
|
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3469
|
-
className: _JSXStyle.dynamic([["
|
|
3477
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled",
|
|
3470
3478
|
children: "No results"
|
|
3471
3479
|
})
|
|
3472
3480
|
})]
|
|
3473
3481
|
}), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
|
|
3474
|
-
id: "
|
|
3482
|
+
id: "1442942756",
|
|
3475
3483
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef'],
|
|
3476
3484
|
children: ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme$1.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")
|
|
3477
3485
|
})]
|
package/dist/index.js
CHANGED
|
@@ -2122,7 +2122,8 @@ var InputError = function InputError(_ref) {
|
|
|
2122
2122
|
marginRight: 0,
|
|
2123
2123
|
marginLeft: 0,
|
|
2124
2124
|
marginBottom: '0.4rem',
|
|
2125
|
-
textAlign: 'left'
|
|
2125
|
+
textAlign: 'left',
|
|
2126
|
+
zIndex: 0
|
|
2126
2127
|
},
|
|
2127
2128
|
color: error ? "error" : 'default',
|
|
2128
2129
|
children: ["\xA0", text]
|
|
@@ -3654,7 +3655,10 @@ function PhoneInput(_ref) {
|
|
|
3654
3655
|
_ref$color = _ref.color,
|
|
3655
3656
|
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
3656
3657
|
children = _ref.children,
|
|
3657
|
-
fullWidth = _ref.fullWidth
|
|
3658
|
+
fullWidth = _ref.fullWidth,
|
|
3659
|
+
required = _ref.required,
|
|
3660
|
+
error = _ref.error,
|
|
3661
|
+
helperText = _ref.helperText;
|
|
3658
3662
|
var theme$1 = theme.useTheme();
|
|
3659
3663
|
var _useScale = useScale(),
|
|
3660
3664
|
SCALES = _useScale.SCALES;
|
|
@@ -3716,16 +3720,17 @@ function PhoneInput(_ref) {
|
|
|
3716
3720
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
3717
3721
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3718
3722
|
ref: dropdownRef,
|
|
3719
|
-
className: _JSXStyle.dynamic([["
|
|
3723
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : ''),
|
|
3720
3724
|
children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
|
|
3725
|
+
required: required,
|
|
3721
3726
|
children: children
|
|
3722
3727
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3723
|
-
className: _JSXStyle.dynamic([["
|
|
3728
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper",
|
|
3724
3729
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3725
3730
|
onClick: function onClick() {
|
|
3726
3731
|
return setDropdownOpen(!dropdownOpen);
|
|
3727
3732
|
},
|
|
3728
|
-
className: _JSXStyle.dynamic([["
|
|
3733
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle",
|
|
3729
3734
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3730
3735
|
style: {
|
|
3731
3736
|
display: 'flex',
|
|
@@ -3733,7 +3738,7 @@ function PhoneInput(_ref) {
|
|
|
3733
3738
|
gap: 5,
|
|
3734
3739
|
paddingRight: '15px'
|
|
3735
3740
|
},
|
|
3736
|
-
className: _JSXStyle.dynamic([["
|
|
3741
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3737
3742
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3738
3743
|
loading: "lazy",
|
|
3739
3744
|
width: "20",
|
|
@@ -3741,9 +3746,9 @@ function PhoneInput(_ref) {
|
|
|
3741
3746
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
3742
3747
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
3743
3748
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
3744
|
-
className: _JSXStyle.dynamic([["
|
|
3749
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3745
3750
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3746
|
-
className: _JSXStyle.dynamic([["
|
|
3751
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3747
3752
|
children: selectedCountry.phone
|
|
3748
3753
|
})]
|
|
3749
3754
|
})
|
|
@@ -3758,10 +3763,13 @@ function PhoneInput(_ref) {
|
|
|
3758
3763
|
onBlur: function onBlur() {
|
|
3759
3764
|
return setIsFocused(false);
|
|
3760
3765
|
},
|
|
3761
|
-
className: _JSXStyle.dynamic([["
|
|
3766
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
3762
3767
|
})]
|
|
3768
|
+
}), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
|
|
3769
|
+
error: error,
|
|
3770
|
+
text: helperText
|
|
3763
3771
|
}), dropdownOpen && /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3764
|
-
className: _JSXStyle.dynamic([["
|
|
3772
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown",
|
|
3765
3773
|
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
3766
3774
|
type: "text",
|
|
3767
3775
|
placeholder: "Search country...",
|
|
@@ -3769,22 +3777,22 @@ function PhoneInput(_ref) {
|
|
|
3769
3777
|
onChange: function onChange(e) {
|
|
3770
3778
|
return setSearchTerm(e.target.value);
|
|
3771
3779
|
},
|
|
3772
|
-
className: _JSXStyle.dynamic([["
|
|
3780
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
3773
3781
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3774
|
-
className: _JSXStyle.dynamic([["
|
|
3782
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list",
|
|
3775
3783
|
children: filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
3776
3784
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3777
3785
|
onClick: function onClick() {
|
|
3778
3786
|
return handleSelectCountry(c);
|
|
3779
3787
|
},
|
|
3780
|
-
className: _JSXStyle.dynamic([["
|
|
3788
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item",
|
|
3781
3789
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3782
3790
|
style: {
|
|
3783
3791
|
display: 'flex',
|
|
3784
3792
|
alignItems: 'center',
|
|
3785
3793
|
gap: 5
|
|
3786
3794
|
},
|
|
3787
|
-
className: _JSXStyle.dynamic([["
|
|
3795
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3788
3796
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3789
3797
|
loading: "lazy",
|
|
3790
3798
|
width: "23",
|
|
@@ -3792,23 +3800,23 @@ function PhoneInput(_ref) {
|
|
|
3792
3800
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
3793
3801
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
3794
3802
|
alt: "".concat(c.label, " Flag"),
|
|
3795
|
-
className: _JSXStyle.dynamic([["
|
|
3803
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3796
3804
|
}), c.phone, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3797
3805
|
style: {
|
|
3798
3806
|
color: 'grey'
|
|
3799
3807
|
},
|
|
3800
|
-
className: _JSXStyle.dynamic([["
|
|
3808
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3801
3809
|
children: c.label
|
|
3802
3810
|
})]
|
|
3803
3811
|
})
|
|
3804
3812
|
}, c.code);
|
|
3805
3813
|
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3806
|
-
className: _JSXStyle.dynamic([["
|
|
3814
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled",
|
|
3807
3815
|
children: "No results"
|
|
3808
3816
|
})
|
|
3809
3817
|
})]
|
|
3810
3818
|
}), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
|
|
3811
|
-
id: "
|
|
3819
|
+
id: "1442942756",
|
|
3812
3820
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef'],
|
|
3813
3821
|
children: ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme$1.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")
|
|
3814
3822
|
})]
|
package/dist/input/index.js
CHANGED
|
@@ -1777,7 +1777,8 @@ var InputError = function InputError(_ref) {
|
|
|
1777
1777
|
marginRight: 0,
|
|
1778
1778
|
marginLeft: 0,
|
|
1779
1779
|
marginBottom: '0.4rem',
|
|
1780
|
-
textAlign: 'left'
|
|
1780
|
+
textAlign: 'left',
|
|
1781
|
+
zIndex: 0
|
|
1781
1782
|
},
|
|
1782
1783
|
color: error ? "error" : 'default',
|
|
1783
1784
|
children: ["\xA0", text]
|
|
@@ -3303,7 +3304,10 @@ function PhoneInput(_ref) {
|
|
|
3303
3304
|
_ref$color = _ref.color,
|
|
3304
3305
|
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
3305
3306
|
children = _ref.children,
|
|
3306
|
-
fullWidth = _ref.fullWidth
|
|
3307
|
+
fullWidth = _ref.fullWidth,
|
|
3308
|
+
required = _ref.required,
|
|
3309
|
+
error = _ref.error,
|
|
3310
|
+
helperText = _ref.helperText;
|
|
3307
3311
|
var theme$1 = theme.useTheme();
|
|
3308
3312
|
var _useScale = useScale(),
|
|
3309
3313
|
SCALES = _useScale.SCALES;
|
|
@@ -3365,16 +3369,17 @@ function PhoneInput(_ref) {
|
|
|
3365
3369
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
3366
3370
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3367
3371
|
ref: dropdownRef,
|
|
3368
|
-
className: _JSXStyle.dynamic([["
|
|
3372
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : ''),
|
|
3369
3373
|
children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
|
|
3374
|
+
required: required,
|
|
3370
3375
|
children: children
|
|
3371
3376
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3372
|
-
className: _JSXStyle.dynamic([["
|
|
3377
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper",
|
|
3373
3378
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3374
3379
|
onClick: function onClick() {
|
|
3375
3380
|
return setDropdownOpen(!dropdownOpen);
|
|
3376
3381
|
},
|
|
3377
|
-
className: _JSXStyle.dynamic([["
|
|
3382
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle",
|
|
3378
3383
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3379
3384
|
style: {
|
|
3380
3385
|
display: 'flex',
|
|
@@ -3382,7 +3387,7 @@ function PhoneInput(_ref) {
|
|
|
3382
3387
|
gap: 5,
|
|
3383
3388
|
paddingRight: '15px'
|
|
3384
3389
|
},
|
|
3385
|
-
className: _JSXStyle.dynamic([["
|
|
3390
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3386
3391
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3387
3392
|
loading: "lazy",
|
|
3388
3393
|
width: "20",
|
|
@@ -3390,9 +3395,9 @@ function PhoneInput(_ref) {
|
|
|
3390
3395
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
3391
3396
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
3392
3397
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
3393
|
-
className: _JSXStyle.dynamic([["
|
|
3398
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3394
3399
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3395
|
-
className: _JSXStyle.dynamic([["
|
|
3400
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3396
3401
|
children: selectedCountry.phone
|
|
3397
3402
|
})]
|
|
3398
3403
|
})
|
|
@@ -3407,10 +3412,13 @@ function PhoneInput(_ref) {
|
|
|
3407
3412
|
onBlur: function onBlur() {
|
|
3408
3413
|
return setIsFocused(false);
|
|
3409
3414
|
},
|
|
3410
|
-
className: _JSXStyle.dynamic([["
|
|
3415
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
3411
3416
|
})]
|
|
3417
|
+
}), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
|
|
3418
|
+
error: error,
|
|
3419
|
+
text: helperText
|
|
3412
3420
|
}), dropdownOpen && /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3413
|
-
className: _JSXStyle.dynamic([["
|
|
3421
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown",
|
|
3414
3422
|
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
3415
3423
|
type: "text",
|
|
3416
3424
|
placeholder: "Search country...",
|
|
@@ -3418,22 +3426,22 @@ function PhoneInput(_ref) {
|
|
|
3418
3426
|
onChange: function onChange(e) {
|
|
3419
3427
|
return setSearchTerm(e.target.value);
|
|
3420
3428
|
},
|
|
3421
|
-
className: _JSXStyle.dynamic([["
|
|
3429
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
3422
3430
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3423
|
-
className: _JSXStyle.dynamic([["
|
|
3431
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list",
|
|
3424
3432
|
children: filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
3425
3433
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3426
3434
|
onClick: function onClick() {
|
|
3427
3435
|
return handleSelectCountry(c);
|
|
3428
3436
|
},
|
|
3429
|
-
className: _JSXStyle.dynamic([["
|
|
3437
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item",
|
|
3430
3438
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3431
3439
|
style: {
|
|
3432
3440
|
display: 'flex',
|
|
3433
3441
|
alignItems: 'center',
|
|
3434
3442
|
gap: 5
|
|
3435
3443
|
},
|
|
3436
|
-
className: _JSXStyle.dynamic([["
|
|
3444
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3437
3445
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3438
3446
|
loading: "lazy",
|
|
3439
3447
|
width: "23",
|
|
@@ -3441,23 +3449,23 @@ function PhoneInput(_ref) {
|
|
|
3441
3449
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
3442
3450
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
3443
3451
|
alt: "".concat(c.label, " Flag"),
|
|
3444
|
-
className: _JSXStyle.dynamic([["
|
|
3452
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3445
3453
|
}), c.phone, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3446
3454
|
style: {
|
|
3447
3455
|
color: 'grey'
|
|
3448
3456
|
},
|
|
3449
|
-
className: _JSXStyle.dynamic([["
|
|
3457
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3450
3458
|
children: c.label
|
|
3451
3459
|
})]
|
|
3452
3460
|
})
|
|
3453
3461
|
}, c.code);
|
|
3454
3462
|
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3455
|
-
className: _JSXStyle.dynamic([["
|
|
3463
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled",
|
|
3456
3464
|
children: "No results"
|
|
3457
3465
|
})
|
|
3458
3466
|
})]
|
|
3459
3467
|
}), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
|
|
3460
|
-
id: "
|
|
3468
|
+
id: "1442942756",
|
|
3461
3469
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef'],
|
|
3462
3470
|
children: ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme$1.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")
|
|
3463
3471
|
})]
|
|
@@ -8,6 +8,9 @@ type PhoneInputProps = {
|
|
|
8
8
|
country?: string;
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
color?: InputTypes;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
error?: boolean;
|
|
13
|
+
helperText?: string;
|
|
11
14
|
};
|
|
12
15
|
declare const _default: React.ForwardRefExoticComponent<PhoneInputProps & {
|
|
13
16
|
width?: string | number;
|
package/dist/table/index.js
CHANGED
|
@@ -1827,7 +1827,8 @@ var InputError = function InputError(_ref) {
|
|
|
1827
1827
|
marginRight: 0,
|
|
1828
1828
|
marginLeft: 0,
|
|
1829
1829
|
marginBottom: '0.4rem',
|
|
1830
|
-
textAlign: 'left'
|
|
1830
|
+
textAlign: 'left',
|
|
1831
|
+
zIndex: 0
|
|
1831
1832
|
},
|
|
1832
1833
|
color: error ? "error" : 'default',
|
|
1833
1834
|
children: ["\xA0", text]
|
|
@@ -3353,7 +3354,10 @@ function PhoneInput(_ref) {
|
|
|
3353
3354
|
_ref$color = _ref.color,
|
|
3354
3355
|
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
3355
3356
|
children = _ref.children,
|
|
3356
|
-
fullWidth = _ref.fullWidth
|
|
3357
|
+
fullWidth = _ref.fullWidth,
|
|
3358
|
+
required = _ref.required,
|
|
3359
|
+
error = _ref.error,
|
|
3360
|
+
helperText = _ref.helperText;
|
|
3357
3361
|
var theme$1 = theme.useTheme();
|
|
3358
3362
|
var _useScale = useScale(),
|
|
3359
3363
|
SCALES = _useScale.SCALES;
|
|
@@ -3415,16 +3419,17 @@ function PhoneInput(_ref) {
|
|
|
3415
3419
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
3416
3420
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3417
3421
|
ref: dropdownRef,
|
|
3418
|
-
className: _JSXStyle.dynamic([["
|
|
3422
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : ''),
|
|
3419
3423
|
children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
|
|
3424
|
+
required: required,
|
|
3420
3425
|
children: children
|
|
3421
3426
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3422
|
-
className: _JSXStyle.dynamic([["
|
|
3427
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper",
|
|
3423
3428
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3424
3429
|
onClick: function onClick() {
|
|
3425
3430
|
return setDropdownOpen(!dropdownOpen);
|
|
3426
3431
|
},
|
|
3427
|
-
className: _JSXStyle.dynamic([["
|
|
3432
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle",
|
|
3428
3433
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3429
3434
|
style: {
|
|
3430
3435
|
display: 'flex',
|
|
@@ -3432,7 +3437,7 @@ function PhoneInput(_ref) {
|
|
|
3432
3437
|
gap: 5,
|
|
3433
3438
|
paddingRight: '15px'
|
|
3434
3439
|
},
|
|
3435
|
-
className: _JSXStyle.dynamic([["
|
|
3440
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3436
3441
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3437
3442
|
loading: "lazy",
|
|
3438
3443
|
width: "20",
|
|
@@ -3440,9 +3445,9 @@ function PhoneInput(_ref) {
|
|
|
3440
3445
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
3441
3446
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
3442
3447
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
3443
|
-
className: _JSXStyle.dynamic([["
|
|
3448
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3444
3449
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3445
|
-
className: _JSXStyle.dynamic([["
|
|
3450
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3446
3451
|
children: selectedCountry.phone
|
|
3447
3452
|
})]
|
|
3448
3453
|
})
|
|
@@ -3457,10 +3462,13 @@ function PhoneInput(_ref) {
|
|
|
3457
3462
|
onBlur: function onBlur() {
|
|
3458
3463
|
return setIsFocused(false);
|
|
3459
3464
|
},
|
|
3460
|
-
className: _JSXStyle.dynamic([["
|
|
3465
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
3461
3466
|
})]
|
|
3467
|
+
}), helperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
|
|
3468
|
+
error: error,
|
|
3469
|
+
text: helperText
|
|
3462
3470
|
}), dropdownOpen && /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3463
|
-
className: _JSXStyle.dynamic([["
|
|
3471
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown",
|
|
3464
3472
|
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
3465
3473
|
type: "text",
|
|
3466
3474
|
placeholder: "Search country...",
|
|
@@ -3468,22 +3476,22 @@ function PhoneInput(_ref) {
|
|
|
3468
3476
|
onChange: function onChange(e) {
|
|
3469
3477
|
return setSearchTerm(e.target.value);
|
|
3470
3478
|
},
|
|
3471
|
-
className: _JSXStyle.dynamic([["
|
|
3479
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
3472
3480
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3473
|
-
className: _JSXStyle.dynamic([["
|
|
3481
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list",
|
|
3474
3482
|
children: filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
3475
3483
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3476
3484
|
onClick: function onClick() {
|
|
3477
3485
|
return handleSelectCountry(c);
|
|
3478
3486
|
},
|
|
3479
|
-
className: _JSXStyle.dynamic([["
|
|
3487
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item",
|
|
3480
3488
|
children: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
3481
3489
|
style: {
|
|
3482
3490
|
display: 'flex',
|
|
3483
3491
|
alignItems: 'center',
|
|
3484
3492
|
gap: 5
|
|
3485
3493
|
},
|
|
3486
|
-
className: _JSXStyle.dynamic([["
|
|
3494
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3487
3495
|
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3488
3496
|
loading: "lazy",
|
|
3489
3497
|
width: "23",
|
|
@@ -3491,23 +3499,23 @@ function PhoneInput(_ref) {
|
|
|
3491
3499
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
3492
3500
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
3493
3501
|
alt: "".concat(c.label, " Flag"),
|
|
3494
|
-
className: _JSXStyle.dynamic([["
|
|
3502
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
3495
3503
|
}), c.phone, " ", /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3496
3504
|
style: {
|
|
3497
3505
|
color: 'grey'
|
|
3498
3506
|
},
|
|
3499
|
-
className: _JSXStyle.dynamic([["
|
|
3507
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]),
|
|
3500
3508
|
children: c.label
|
|
3501
3509
|
})]
|
|
3502
3510
|
})
|
|
3503
3511
|
}, c.code);
|
|
3504
3512
|
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3505
|
-
className: _JSXStyle.dynamic([["
|
|
3513
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled",
|
|
3506
3514
|
children: "No results"
|
|
3507
3515
|
})
|
|
3508
3516
|
})]
|
|
3509
3517
|
}), /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
|
|
3510
|
-
id: "
|
|
3518
|
+
id: "1442942756",
|
|
3511
3519
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef'],
|
|
3512
3520
|
children: ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme$1.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme$1.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")
|
|
3513
3521
|
})]
|
|
@@ -8,6 +8,9 @@ type PhoneInputProps = {
|
|
|
8
8
|
country?: string;
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
color?: InputTypes;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
error?: boolean;
|
|
13
|
+
helperText?: string;
|
|
11
14
|
};
|
|
12
15
|
declare const _default: React.ForwardRefExoticComponent<PhoneInputProps & {
|
|
13
16
|
width?: string | number;
|
package/esm/input/input-phone.js
CHANGED
|
@@ -5,7 +5,7 @@ import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
|
5
5
|
import { useTheme } from '@helpdice/theme';
|
|
6
6
|
import { getColors } from './styles';
|
|
7
7
|
import useScale, { withScale } from '../use-scale';
|
|
8
|
-
import InputBlockLabel from './input-block-label';
|
|
8
|
+
import InputBlockLabel, { InputError } from './input-block-label';
|
|
9
9
|
var countries = [{
|
|
10
10
|
"code": "AD",
|
|
11
11
|
"label": "Andorra",
|
|
@@ -1015,7 +1015,10 @@ function PhoneInput(_ref) {
|
|
|
1015
1015
|
_ref$color = _ref.color,
|
|
1016
1016
|
_color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
1017
1017
|
children = _ref.children,
|
|
1018
|
-
fullWidth = _ref.fullWidth
|
|
1018
|
+
fullWidth = _ref.fullWidth,
|
|
1019
|
+
required = _ref.required,
|
|
1020
|
+
error = _ref.error,
|
|
1021
|
+
helperText = _ref.helperText;
|
|
1019
1022
|
var theme = useTheme();
|
|
1020
1023
|
var _useScale = useScale(),
|
|
1021
1024
|
SCALES = _useScale.SCALES;
|
|
@@ -1077,14 +1080,16 @@ function PhoneInput(_ref) {
|
|
|
1077
1080
|
var defaultWidth = fullWidth ? '100%' : 'initial';
|
|
1078
1081
|
return /*#__PURE__*/React.createElement("div", {
|
|
1079
1082
|
ref: dropdownRef,
|
|
1080
|
-
className: _JSXStyle.dynamic([["
|
|
1081
|
-
}, children && /*#__PURE__*/React.createElement(InputBlockLabel,
|
|
1082
|
-
|
|
1083
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
|
|
1084
|
+
}, children && /*#__PURE__*/React.createElement(InputBlockLabel, {
|
|
1085
|
+
required: required
|
|
1086
|
+
}, children), /*#__PURE__*/React.createElement("div", {
|
|
1087
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
|
|
1083
1088
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1084
1089
|
onClick: function onClick() {
|
|
1085
1090
|
return setDropdownOpen(!dropdownOpen);
|
|
1086
1091
|
},
|
|
1087
|
-
className: _JSXStyle.dynamic([["
|
|
1092
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
|
|
1088
1093
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1089
1094
|
style: {
|
|
1090
1095
|
display: 'flex',
|
|
@@ -1092,7 +1097,7 @@ function PhoneInput(_ref) {
|
|
|
1092
1097
|
gap: 5,
|
|
1093
1098
|
paddingRight: '15px'
|
|
1094
1099
|
},
|
|
1095
|
-
className: _JSXStyle.dynamic([["
|
|
1100
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
1096
1101
|
}, /*#__PURE__*/React.createElement("img", {
|
|
1097
1102
|
loading: "lazy",
|
|
1098
1103
|
width: "20",
|
|
@@ -1100,9 +1105,9 @@ function PhoneInput(_ref) {
|
|
|
1100
1105
|
src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
|
|
1101
1106
|
srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
|
|
1102
1107
|
alt: "".concat(selectedCountry.label, " Flag"),
|
|
1103
|
-
className: _JSXStyle.dynamic([["
|
|
1108
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
1104
1109
|
}), /*#__PURE__*/React.createElement("span", {
|
|
1105
|
-
className: _JSXStyle.dynamic([["
|
|
1110
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
1106
1111
|
}, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
|
|
1107
1112
|
type: "tel",
|
|
1108
1113
|
placeholder: placeholder,
|
|
@@ -1114,9 +1119,12 @@ function PhoneInput(_ref) {
|
|
|
1114
1119
|
onBlur: function onBlur() {
|
|
1115
1120
|
return setIsFocused(false);
|
|
1116
1121
|
},
|
|
1117
|
-
className: _JSXStyle.dynamic([["
|
|
1118
|
-
})),
|
|
1119
|
-
|
|
1122
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
|
|
1123
|
+
})), helperText && /*#__PURE__*/React.createElement(InputError, {
|
|
1124
|
+
error: error,
|
|
1125
|
+
text: helperText
|
|
1126
|
+
}), dropdownOpen && /*#__PURE__*/React.createElement("div", {
|
|
1127
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
|
|
1120
1128
|
}, /*#__PURE__*/React.createElement("input", {
|
|
1121
1129
|
type: "text",
|
|
1122
1130
|
placeholder: "Search country...",
|
|
@@ -1124,23 +1132,23 @@ function PhoneInput(_ref) {
|
|
|
1124
1132
|
onChange: function onChange(e) {
|
|
1125
1133
|
return setSearchTerm(e.target.value);
|
|
1126
1134
|
},
|
|
1127
|
-
className: _JSXStyle.dynamic([["
|
|
1135
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
|
|
1128
1136
|
}), /*#__PURE__*/React.createElement("div", {
|
|
1129
|
-
className: _JSXStyle.dynamic([["
|
|
1137
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
|
|
1130
1138
|
}, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
|
|
1131
1139
|
return /*#__PURE__*/React.createElement("div", {
|
|
1132
1140
|
key: c.code,
|
|
1133
1141
|
onClick: function onClick() {
|
|
1134
1142
|
return handleSelectCountry(c);
|
|
1135
1143
|
},
|
|
1136
|
-
className: _JSXStyle.dynamic([["
|
|
1144
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
|
|
1137
1145
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1138
1146
|
style: {
|
|
1139
1147
|
display: 'flex',
|
|
1140
1148
|
alignItems: 'center',
|
|
1141
1149
|
gap: 5
|
|
1142
1150
|
},
|
|
1143
|
-
className: _JSXStyle.dynamic([["
|
|
1151
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
1144
1152
|
}, /*#__PURE__*/React.createElement("img", {
|
|
1145
1153
|
loading: "lazy",
|
|
1146
1154
|
width: "23",
|
|
@@ -1148,17 +1156,17 @@ function PhoneInput(_ref) {
|
|
|
1148
1156
|
src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
|
|
1149
1157
|
srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
|
|
1150
1158
|
alt: "".concat(c.label, " Flag"),
|
|
1151
|
-
className: _JSXStyle.dynamic([["
|
|
1159
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
1152
1160
|
}), c.phone, " ", /*#__PURE__*/React.createElement("span", {
|
|
1153
1161
|
style: {
|
|
1154
1162
|
color: 'grey'
|
|
1155
1163
|
},
|
|
1156
|
-
className: _JSXStyle.dynamic([["
|
|
1164
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
|
|
1157
1165
|
}, c.label)));
|
|
1158
1166
|
}) : /*#__PURE__*/React.createElement("div", {
|
|
1159
|
-
className: _JSXStyle.dynamic([["
|
|
1167
|
+
className: _JSXStyle.dynamic([["1442942756", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
|
|
1160
1168
|
}, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
1161
|
-
id: "
|
|
1169
|
+
id: "1442942756",
|
|
1162
1170
|
dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
|
|
1163
1171
|
}, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
|
|
1164
1172
|
}
|