@helpdice/ui 2.2.3 → 2.2.5

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/index.js CHANGED
@@ -1365,7 +1365,7 @@ var withScale = function withScale(Render) {
1365
1365
  return ScaleFC;
1366
1366
  };
1367
1367
 
1368
- var _excluded$1p = ["label", "labelRight", "color", "error", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
1368
+ var _excluded$1p = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "fullWidth"];
1369
1369
  var simulateChangeEvent = function simulateChangeEvent(el, event) {
1370
1370
  return _objectSpread2(_objectSpread2({}, event), {}, {
1371
1371
  target: el,
@@ -1375,9 +1375,10 @@ var simulateChangeEvent = function simulateChangeEvent(el, event) {
1375
1375
  var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1376
1376
  var label = _ref.label,
1377
1377
  labelRight = _ref.labelRight,
1378
- _ref$color = _ref.color,
1379
- _color = _ref$color === void 0 ? 'default' : _ref$color,
1380
1378
  error = _ref.error,
1379
+ _ref$color = _ref.color,
1380
+ _color = _ref$color === void 0 ? error ? 'error' : 'default' : _ref$color,
1381
+ helperText = _ref.helperText,
1381
1382
  _ref$type = _ref.type,
1382
1383
  type = _ref$type === void 0 ? 'text' : _ref$type,
1383
1384
  icon = _ref.icon,
@@ -1487,11 +1488,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1487
1488
  var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
1488
1489
  var defaultWidth = fullWidth ? '100%' : 'initial';
1489
1490
  return /*#__PURE__*/React.createElement("div", {
1490
- className: _JSXStyle.dynamic([["3970712841", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + "with-label"
1491
+ className: _JSXStyle.dynamic([["2582554466", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + "with-label"
1491
1492
  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
1492
- className: _JSXStyle.dynamic([["3970712841", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-container', className) || "")
1493
+ className: _JSXStyle.dynamic([["2582554466", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-container', className) || "")
1493
1494
  }, label && /*#__PURE__*/React.createElement(MemoInputLabel, null, label), /*#__PURE__*/React.createElement("div", {
1494
- className: _JSXStyle.dynamic([["3970712841", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-wrapper', {
1495
+ className: _JSXStyle.dynamic([["2582554466", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (theme.useClasses('input-wrapper', {
1495
1496
  hover: hover,
1496
1497
  disabled: disabled
1497
1498
  }, labelClasses) || "")
@@ -1508,7 +1509,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1508
1509
  onChange: changeHandler,
1509
1510
  autoComplete: autoComplete
1510
1511
  }, inputProps, {
1511
- className: _JSXStyle.dynamic([["3970712841", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
1512
+ className: _JSXStyle.dynamic([["2582554466", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || theme.useClasses({
1512
1513
  disabled: disabled
1513
1514
  }, iconClasses) || "")
1514
1515
  })), clearable && /*#__PURE__*/React.createElement(MemoInputIconClear, {
@@ -1520,8 +1521,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1520
1521
  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(MemoInputLabel, {
1521
1522
  isRight: true
1522
1523
  }, labelRight), /*#__PURE__*/React.createElement("br", {
1523
- className: _JSXStyle.dynamic([["3970712841", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]])
1524
- })), error && /*#__PURE__*/React.createElement("p", {
1524
+ className: _JSXStyle.dynamic([["2582554466", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]])
1525
+ })), helperText && /*#__PURE__*/React.createElement("p", {
1525
1526
  style: {
1526
1527
  marginTop: 0.4,
1527
1528
  marginRight: 0,
@@ -1529,11 +1530,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1529
1530
  marginBottom: '0.4rem',
1530
1531
  textAlign: 'left'
1531
1532
  },
1532
- className: _JSXStyle.dynamic([["3970712841", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + "input-error"
1533
- }, error), /*#__PURE__*/React.createElement(_JSXStyle, {
1534
- id: "3970712841",
1533
+ className: _JSXStyle.dynamic([["2582554466", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]]]) + " " + ((error ? "input-error" : '') || "")
1534
+ }, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
1535
+ id: "2582554466",
1535
1536
  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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme$1.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme$1.palette.accents_1, theme$1.palette.accents_2, hoverBorder, SCALES.font(0.875), color, theme$1.palette.accents_3, theme$1.palette.background, color]
1536
- }, ".with-label.__jsx-style-dynamic-selector{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), ";}.input-error.__jsx-style-dynamic-selector{color:#aa4a44;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme$1.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
1537
+ }, ".with-label.__jsx-style-dynamic-selector{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), ";}.input-error.__jsx-style-dynamic-selector{color:#e00;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme$1.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme$1.palette.accents_1, ";border-color:").concat(theme$1.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme$1.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme$1.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
1537
1538
  });
1538
1539
  InputComponent.displayName = 'Input';
1539
1540
  var Input = withScale(InputComponent);
@@ -3046,21 +3047,22 @@ function PhoneInput(_ref) {
3046
3047
  var defaultWidth = fullWidth ? '100%' : 'initial';
3047
3048
  return /*#__PURE__*/React.createElement("div", {
3048
3049
  ref: dropdownRef,
3049
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
3050
+ className: _JSXStyle.dynamic([["2480261071", [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' : '')
3050
3051
  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
3051
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
3052
+ className: _JSXStyle.dynamic([["2480261071", [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"
3052
3053
  }, /*#__PURE__*/React.createElement("div", {
3053
3054
  onClick: function onClick() {
3054
3055
  return setDropdownOpen(!dropdownOpen);
3055
3056
  },
3056
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
3057
+ className: _JSXStyle.dynamic([["2480261071", [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"
3057
3058
  }, /*#__PURE__*/React.createElement("span", {
3058
3059
  style: {
3059
3060
  display: 'flex',
3060
3061
  alignItems: 'center',
3061
- gap: 5
3062
+ gap: 5,
3063
+ paddingRight: '15px'
3062
3064
  },
3063
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
3065
+ className: _JSXStyle.dynamic([["2480261071", [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']]])
3064
3066
  }, /*#__PURE__*/React.createElement("img", {
3065
3067
  loading: "lazy",
3066
3068
  width: "20",
@@ -3068,9 +3070,9 @@ function PhoneInput(_ref) {
3068
3070
  src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
3069
3071
  srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
3070
3072
  alt: "".concat(selectedCountry.label, " Flag"),
3071
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
3073
+ className: _JSXStyle.dynamic([["2480261071", [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']]])
3072
3074
  }), /*#__PURE__*/React.createElement("span", {
3073
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
3075
+ className: _JSXStyle.dynamic([["2480261071", [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']]])
3074
3076
  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
3075
3077
  type: "tel",
3076
3078
  placeholder: placeholder,
@@ -3082,9 +3084,9 @@ function PhoneInput(_ref) {
3082
3084
  onBlur: function onBlur() {
3083
3085
  return setIsFocused(false);
3084
3086
  },
3085
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
3087
+ className: _JSXStyle.dynamic([["2480261071", [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"
3086
3088
  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
3087
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
3089
+ className: _JSXStyle.dynamic([["2480261071", [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"
3088
3090
  }, /*#__PURE__*/React.createElement("input", {
3089
3091
  type: "text",
3090
3092
  placeholder: "Search country...",
@@ -3092,23 +3094,23 @@ function PhoneInput(_ref) {
3092
3094
  onChange: function onChange(e) {
3093
3095
  return setSearchTerm(e.target.value);
3094
3096
  },
3095
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
3097
+ className: _JSXStyle.dynamic([["2480261071", [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"
3096
3098
  }), /*#__PURE__*/React.createElement("div", {
3097
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
3099
+ className: _JSXStyle.dynamic([["2480261071", [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"
3098
3100
  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
3099
3101
  return /*#__PURE__*/React.createElement("div", {
3100
3102
  key: c.code,
3101
3103
  onClick: function onClick() {
3102
3104
  return handleSelectCountry(c);
3103
3105
  },
3104
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
3106
+ className: _JSXStyle.dynamic([["2480261071", [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"
3105
3107
  }, /*#__PURE__*/React.createElement("span", {
3106
3108
  style: {
3107
3109
  display: 'flex',
3108
3110
  alignItems: 'center',
3109
3111
  gap: 5
3110
3112
  },
3111
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
3113
+ className: _JSXStyle.dynamic([["2480261071", [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']]])
3112
3114
  }, /*#__PURE__*/React.createElement("img", {
3113
3115
  loading: "lazy",
3114
3116
  width: "23",
@@ -3116,20 +3118,21 @@ function PhoneInput(_ref) {
3116
3118
  src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
3117
3119
  srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
3118
3120
  alt: "".concat(c.label, " Flag"),
3119
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
3121
+ className: _JSXStyle.dynamic([["2480261071", [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']]])
3120
3122
  }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
3121
3123
  style: {
3122
3124
  color: 'grey'
3123
3125
  },
3124
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
3126
+ className: _JSXStyle.dynamic([["2480261071", [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']]])
3125
3127
  }, c.label)));
3126
3128
  }) : /*#__PURE__*/React.createElement("div", {
3127
- className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
3129
+ className: _JSXStyle.dynamic([["2480261071", [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"
3128
3130
  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
3129
- id: "3237870810",
3130
- dynamic: [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']
3131
- }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;width:".concat(SCALES.width(1, defaultWidth), ";height:").concat(SCALES.height(2.25), ";}.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, ";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;}")));
3131
+ id: "2480261071",
3132
+ 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']
3133
+ }, ".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;}")));
3132
3134
  }
3135
+ var PhoneInput$1 = withScale(PhoneInput);
3133
3136
 
3134
3137
  /**
3135
3138
  * Escape regex char
@@ -3517,7 +3520,7 @@ var repositionCursor = function repositionCursor(_ref) {
3517
3520
  };
3518
3521
  };
3519
3522
 
3520
- var _excluded$1m = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
3523
+ var _excluded$1m = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
3521
3524
  var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3522
3525
  var _ref$allowDecimals = _ref.allowDecimals,
3523
3526
  allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3540,6 +3543,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3540
3543
  prefix = _ref.prefix,
3541
3544
  suffix = _ref.suffix,
3542
3545
  intlConfig = _ref.intlConfig,
3546
+ fullWidth = _ref.fullWidth,
3543
3547
  step = _ref.step,
3544
3548
  min = _ref.min,
3545
3549
  max = _ref.max,
@@ -3559,7 +3563,10 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3559
3563
  formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
3560
3564
  children = _ref.children,
3561
3565
  props = _objectWithoutProperties(_ref, _excluded$1m);
3566
+ var _useScale = useScale(),
3567
+ SCALES = _useScale.SCALES;
3562
3568
  var theme$1 = theme.useTheme();
3569
+ var defaultWidth = fullWidth ? '100%' : 'initial';
3563
3570
  if (_decimalSeparator && isNumber(_decimalSeparator)) {
3564
3571
  throw new Error('decimalSeparator cannot be a number');
3565
3572
  }
@@ -3827,14 +3834,9 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3827
3834
  var CustomInput = customInput;
3828
3835
  return /*#__PURE__*/React.createElement(CustomInput, inputProps);
3829
3836
  }
3830
- return /*#__PURE__*/React.createElement("div", null, children && /*#__PURE__*/React.createElement("label", {
3831
- style: {
3832
- display: 'block',
3833
- marginBottom: '0.7rem',
3834
- fontSize: '14px',
3835
- fontWeight: 'light'
3836
- }
3837
- }, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
3837
+ return /*#__PURE__*/React.createElement("div", {
3838
+ className: _JSXStyle.dynamic([["1592876518", [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)]]]) + " " + "with-label"
3839
+ }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
3838
3840
  style: {
3839
3841
  textAlign: 'right',
3840
3842
  border: "1px solid ".concat(theme$1.palette.border),
@@ -3846,15 +3848,23 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3846
3848
  width: 'auto',
3847
3849
  background: 'transparent',
3848
3850
  minWidth: '200px'
3849
- }
3850
- })));
3851
+ },
3852
+ className: _JSXStyle.dynamic([["1592876518", [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)]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
3853
+ })), /*#__PURE__*/React.createElement(_JSXStyle, {
3854
+ id: "1592876518",
3855
+ 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)]
3856
+ }, ".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), ";}")));
3851
3857
  });
3852
3858
 
3859
+ // CurrencyInput.displayName = 'CurrencyInput';
3860
+
3861
+ var CurrencyInput = withScale(InputCurrency);
3862
+
3853
3863
  /* "use client" */
3854
3864
  Input.Textarea = Textarea;
3855
3865
  Input.Password = InputPassword;
3856
- Input.Phone = PhoneInput;
3857
- Input.Currency = InputCurrency;
3866
+ Input.Phone = PhoneInput$1;
3867
+ Input.Currency = CurrencyInput;
3858
3868
 
3859
3869
  /* "use client" */
3860
3870
 
@@ -13266,7 +13276,7 @@ var GridContainer = withScale(GridContainerComponent);
13266
13276
 
13267
13277
  Grid.Container = GridContainer;
13268
13278
 
13269
- var _excluded$E = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "className"];
13279
+ var _excluded$E = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
13270
13280
  var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
13271
13281
  var Container = function Container(_ref) {
13272
13282
  var _ref$gap = _ref.gap,
@@ -13276,9 +13286,15 @@ var Container = function Container(_ref) {
13276
13286
  justify = _ref.justify,
13277
13287
  alignItems = _ref.alignItems,
13278
13288
  alignContent = _ref.alignContent,
13289
+ _ref$collapse = _ref.collapse,
13290
+ collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
13279
13291
  _ref$className = _ref.className,
13280
13292
  className = _ref$className === void 0 ? '' : _ref$className,
13281
13293
  props = _objectWithoutProperties(_ref, _excluded$E);
13294
+ var _useState = React.useState(false),
13295
+ _useState2 = _slicedToArray(_useState, 2),
13296
+ expand = _useState2[0],
13297
+ setExpand = _useState2[1];
13282
13298
  var _useScale = useScale(),
13283
13299
  unit = _useScale.unit,
13284
13300
  SCALES = _useScale.SCALES;
@@ -13297,7 +13313,21 @@ var Container = function Container(_ref) {
13297
13313
  var classes = theme.useClasses(resolveClassName, className);
13298
13314
  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
13299
13315
  className: classes
13300
- }, props), children, styles);
13316
+ }, props), collapse > 50 ? /*#__PURE__*/React.createElement(React.Fragment, null, expand ? children : (children === null || children === void 0 ? void 0 : children.toString().substring(0, collapse)) + '...', /*#__PURE__*/React.createElement(Button, {
13317
+ margin: 0,
13318
+ onClick: function onClick() {
13319
+ return setExpand(!expand);
13320
+ },
13321
+ style: {
13322
+ textTransform: 'lowercase'
13323
+ },
13324
+ effect: false,
13325
+ color: "abort",
13326
+ scale: 2 / 3,
13327
+ px: 0.2,
13328
+ py: 0,
13329
+ auto: true
13330
+ }, /*#__PURE__*/React.createElement("b", null, expand ? 'less' : 'more'))) : children, styles);
13301
13331
  };
13302
13332
  Container.displayName = 'Container';
13303
13333
  var Container$1 = withScale(Container);
@@ -1,4 +1,37 @@
1
- import { FC } from 'react';
1
+ import React, { FC } from 'react';
2
2
  import { CurrencyInputProps } from './CurrencyInputProps';
3
3
  export declare const InputCurrency: FC<Omit<CurrencyInputProps, 'ref'>>;
4
- export default InputCurrency;
4
+ declare const _default: React.ForwardRefExoticComponent<Omit<CurrencyInputProps, "ref"> & {
5
+ width?: string | number;
6
+ height?: string | number;
7
+ padding?: string | number;
8
+ margin?: string | number;
9
+ w?: string | number;
10
+ h?: string | number;
11
+ paddingLeft?: string | number;
12
+ paddingRight?: string | number;
13
+ paddingTop?: string | number;
14
+ paddingBottom?: string | number;
15
+ pl?: string | number;
16
+ pr?: string | number;
17
+ pt?: string | number;
18
+ pb?: string | number;
19
+ marginLeft?: string | number;
20
+ marginRight?: string | number;
21
+ marginTop?: string | number;
22
+ marginBottom?: string | number;
23
+ ml?: string | number;
24
+ mr?: string | number;
25
+ mt?: string | number;
26
+ mb?: string | number;
27
+ px?: string | number;
28
+ py?: string | number;
29
+ mx?: string | number;
30
+ my?: string | number;
31
+ font?: string | number;
32
+ unit?: string;
33
+ scale?: number;
34
+ children?: any;
35
+ className?: string;
36
+ } & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
37
+ export default _default;
@@ -156,5 +156,6 @@ export type CurrencyInputProps = Overwrite<React.ComponentPropsWithRef<'input'>,
156
156
  * Default = true
157
157
  */
158
158
  formatValueOnBlur?: boolean;
159
+ fullWidth?: boolean;
159
160
  }>;
160
161
  export {};