@pelcro/react-pelcro-js 3.2.0-beta.14 → 3.2.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +39 -16
  2. package/dist/index.esm.js +39 -16
  3. package/dist/pelcro.css +4 -3
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -6438,6 +6438,19 @@ if (process.env.NODE_ENV === "development") {
6438
6438
  c$1("Pelcro Store", usePelcro);
6439
6439
  }
6440
6440
 
6441
+ /**
6442
+ * List of zero-decimal currencies.
6443
+ * @see https://stripe.com/docs/currencies#zero-decimal
6444
+ *
6445
+ */
6446
+
6447
+ const ZERO_DECIMAL_CURRENCIES = ['BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'];
6448
+ /**
6449
+ * @param {string}
6450
+ * @return {boolean}
6451
+ */
6452
+
6453
+ const isCurrencyZeroDecimal = currency => ZERO_DECIMAL_CURRENCIES.includes(currency);
6441
6454
  const sortCountries = countries => {
6442
6455
  const sortable = [];
6443
6456
  delete countries.CA;
@@ -6524,7 +6537,7 @@ const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en") => {
6524
6537
  style: "currency",
6525
6538
  currency
6526
6539
  });
6527
- return formatter.format(amount / 100);
6540
+ return isCurrencyZeroDecimal(currency) ? formatter.format(amount) : formatter.format(amount / 100);
6528
6541
  };
6529
6542
  /** check wether or not the user have any addresses
6530
6543
  * @return {boolean} true if the user have at least one address, false otherwise
@@ -6541,7 +6554,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
6541
6554
  let totalWithoutDividingBy100 = 0;
6542
6555
 
6543
6556
  for (const item of items) {
6544
- totalWithoutDividingBy100 += parseFloat(item.price ? (item.price * item.quantity).toFixed(2) : item.amount.toFixed(2));
6557
+ totalWithoutDividingBy100 += parseFloat(item.price ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
6545
6558
  }
6546
6559
 
6547
6560
  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
@@ -6621,7 +6634,7 @@ const disableScroll = () => {
6621
6634
  }
6622
6635
  };
6623
6636
  const trackSubscriptionOnGA = () => {
6624
- var _ReactGA$set, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
6637
+ var _window$Pelcro$user$r5, _window$Pelcro$user$r6, _ReactGA$set, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
6625
6638
 
6626
6639
  const {
6627
6640
  product,
@@ -6642,13 +6655,14 @@ const trackSubscriptionOnGA = () => {
6642
6655
  return;
6643
6656
  }
6644
6657
 
6658
+ const currencyCode = (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency;
6645
6659
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$set = ReactGA.set) === null || _ReactGA$set === void 0 ? void 0 : _ReactGA$set.call(ReactGA, {
6646
- currencyCode: (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency
6660
+ currencyCode: currencyCode
6647
6661
  });
6648
6662
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin = ReactGA.plugin) === null || _ReactGA$plugin === void 0 ? void 0 : (_ReactGA$plugin$execu = _ReactGA$plugin.execute) === null || _ReactGA$plugin$execu === void 0 ? void 0 : _ReactGA$plugin$execu.call(_ReactGA$plugin, "ecommerce", "addTransaction", {
6649
6663
  id: lastSubscriptionId,
6650
6664
  affiliation: "Pelcro",
6651
- revenue: plan !== null && plan !== void 0 && plan.amount ? plan.amount / 100 : 0,
6665
+ revenue: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
6652
6666
  coupon: couponCode
6653
6667
  });
6654
6668
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin2 = ReactGA.plugin) === null || _ReactGA$plugin2 === void 0 ? void 0 : (_ReactGA$plugin2$exec = _ReactGA$plugin2.execute) === null || _ReactGA$plugin2$exec === void 0 ? void 0 : _ReactGA$plugin2$exec.call(_ReactGA$plugin2, "ecommerce", "addItem", {
@@ -6656,7 +6670,7 @@ const trackSubscriptionOnGA = () => {
6656
6670
  name: product.name,
6657
6671
  category: product.description,
6658
6672
  variant: plan.nickname,
6659
- price: plan !== null && plan !== void 0 && plan.amount ? plan.amount / 100 : 0,
6673
+ price: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
6660
6674
  quantity: 1
6661
6675
  });
6662
6676
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin3 = ReactGA.plugin) === null || _ReactGA$plugin3 === void 0 ? void 0 : (_ReactGA$plugin3$exec = _ReactGA$plugin3.execute) === null || _ReactGA$plugin3$exec === void 0 ? void 0 : _ReactGA$plugin3$exec.call(_ReactGA$plugin3, "ecommerce", "send");
@@ -16495,20 +16509,23 @@ const UserUpdateContainer = ({
16495
16509
  }, []);
16496
16510
 
16497
16511
  const loadUserDataIntoFields = () => {
16498
- var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9;
16512
+ var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
16499
16513
 
16500
16514
  const fields = [{
16515
+ type: SET_EMAIL,
16516
+ payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email
16517
+ }, {
16501
16518
  type: SET_FIRST_NAME,
16502
- payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.first_name
16519
+ payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.first_name
16503
16520
  }, {
16504
16521
  type: SET_LAST_NAME,
16505
- payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.last_name
16522
+ payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.last_name
16506
16523
  }, {
16507
16524
  type: SET_DISPLAY_NAME,
16508
- payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.display_name
16525
+ payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.display_name
16509
16526
  }, {
16510
16527
  type: SET_PHONE,
16511
- payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.phone
16528
+ payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.phone
16512
16529
  }];
16513
16530
  fields.filter(field => Boolean(field.payload)).forEach(field => {
16514
16531
  dispatch(field);
@@ -16516,6 +16533,7 @@ const UserUpdateContainer = ({
16516
16533
  };
16517
16534
 
16518
16535
  const handleUpdateUser = ({
16536
+ email,
16519
16537
  firstName,
16520
16538
  lastName,
16521
16539
  phone,
@@ -16524,6 +16542,7 @@ const UserUpdateContainer = ({
16524
16542
  }, dispatch) => {
16525
16543
  window.Pelcro.user.update({
16526
16544
  auth_token: window.Pelcro.user.read().auth_token,
16545
+ email: email,
16527
16546
  first_name: firstName,
16528
16547
  last_name: lastName,
16529
16548
  display_name: displayName,
@@ -16569,6 +16588,11 @@ const UserUpdateContainer = ({
16569
16588
  }
16570
16589
  });
16571
16590
 
16591
+ case SET_EMAIL:
16592
+ return lib_7({ ...state,
16593
+ email: action.payload
16594
+ });
16595
+
16572
16596
  case SET_FIRST_NAME:
16573
16597
  return lib_7({ ...state,
16574
16598
  firstName: action.payload
@@ -16626,7 +16650,6 @@ const UserUpdateContainer = ({
16626
16650
  };
16627
16651
 
16628
16652
  const UserUpdateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
16629
- disabled: true,
16630
16653
  store: store$d
16631
16654
  }, props));
16632
16655
 
@@ -16728,7 +16751,7 @@ const UserUpdateProfilePic = ({
16728
16751
  onClick: onClick
16729
16752
  }, otherProps)), /*#__PURE__*/React__default['default'].createElement(Button, {
16730
16753
  variant: "icon",
16731
- className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600",
16754
+ className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600 hover:plc-text-white",
16732
16755
  icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
16733
16756
  id: "pelcro-user-update-picture-button",
16734
16757
  onClick: onClick
@@ -16753,15 +16776,15 @@ const UserUpdateView = props => {
16753
16776
  }), /*#__PURE__*/React__default['default'].createElement("div", {
16754
16777
  className: "plc-flex plc-items-start"
16755
16778
  }, /*#__PURE__*/React__default['default'].createElement(UserUpdateEmail, {
16756
- label: t("labels.email")
16779
+ label: t("labels.email"),
16780
+ autoFocus: true
16757
16781
  })), /*#__PURE__*/React__default['default'].createElement("div", {
16758
16782
  className: "plc-flex plc-items-start"
16759
16783
  }, /*#__PURE__*/React__default['default'].createElement(UserUpdateFirstName, {
16760
16784
  autoComplete: "first-name",
16761
16785
  id: "pelcro-input-first-name",
16762
16786
  errorId: "pelcro-input-first-name-error",
16763
- label: t("labels.firstName"),
16764
- autoFocus: true
16787
+ label: t("labels.firstName")
16765
16788
  }), /*#__PURE__*/React__default['default'].createElement(UserUpdateLastName, {
16766
16789
  wrapperClassName: "plc-ml-3",
16767
16790
  autoComplete: "last-name",
package/dist/index.esm.js CHANGED
@@ -6408,6 +6408,19 @@ if (process.env.NODE_ENV === "development") {
6408
6408
  c$1("Pelcro Store", usePelcro);
6409
6409
  }
6410
6410
 
6411
+ /**
6412
+ * List of zero-decimal currencies.
6413
+ * @see https://stripe.com/docs/currencies#zero-decimal
6414
+ *
6415
+ */
6416
+
6417
+ const ZERO_DECIMAL_CURRENCIES = ['BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'];
6418
+ /**
6419
+ * @param {string}
6420
+ * @return {boolean}
6421
+ */
6422
+
6423
+ const isCurrencyZeroDecimal = currency => ZERO_DECIMAL_CURRENCIES.includes(currency);
6411
6424
  const sortCountries = countries => {
6412
6425
  const sortable = [];
6413
6426
  delete countries.CA;
@@ -6494,7 +6507,7 @@ const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en") => {
6494
6507
  style: "currency",
6495
6508
  currency
6496
6509
  });
6497
- return formatter.format(amount / 100);
6510
+ return isCurrencyZeroDecimal(currency) ? formatter.format(amount) : formatter.format(amount / 100);
6498
6511
  };
6499
6512
  /** check wether or not the user have any addresses
6500
6513
  * @return {boolean} true if the user have at least one address, false otherwise
@@ -6511,7 +6524,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
6511
6524
  let totalWithoutDividingBy100 = 0;
6512
6525
 
6513
6526
  for (const item of items) {
6514
- totalWithoutDividingBy100 += parseFloat(item.price ? (item.price * item.quantity).toFixed(2) : item.amount.toFixed(2));
6527
+ totalWithoutDividingBy100 += parseFloat(item.price ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
6515
6528
  }
6516
6529
 
6517
6530
  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
@@ -6591,7 +6604,7 @@ const disableScroll = () => {
6591
6604
  }
6592
6605
  };
6593
6606
  const trackSubscriptionOnGA = () => {
6594
- var _ReactGA$set, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
6607
+ var _window$Pelcro$user$r5, _window$Pelcro$user$r6, _ReactGA$set, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
6595
6608
 
6596
6609
  const {
6597
6610
  product,
@@ -6612,13 +6625,14 @@ const trackSubscriptionOnGA = () => {
6612
6625
  return;
6613
6626
  }
6614
6627
 
6628
+ const currencyCode = (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency;
6615
6629
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$set = ReactGA.set) === null || _ReactGA$set === void 0 ? void 0 : _ReactGA$set.call(ReactGA, {
6616
- currencyCode: (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency
6630
+ currencyCode: currencyCode
6617
6631
  });
6618
6632
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin = ReactGA.plugin) === null || _ReactGA$plugin === void 0 ? void 0 : (_ReactGA$plugin$execu = _ReactGA$plugin.execute) === null || _ReactGA$plugin$execu === void 0 ? void 0 : _ReactGA$plugin$execu.call(_ReactGA$plugin, "ecommerce", "addTransaction", {
6619
6633
  id: lastSubscriptionId,
6620
6634
  affiliation: "Pelcro",
6621
- revenue: plan !== null && plan !== void 0 && plan.amount ? plan.amount / 100 : 0,
6635
+ revenue: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
6622
6636
  coupon: couponCode
6623
6637
  });
6624
6638
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin2 = ReactGA.plugin) === null || _ReactGA$plugin2 === void 0 ? void 0 : (_ReactGA$plugin2$exec = _ReactGA$plugin2.execute) === null || _ReactGA$plugin2$exec === void 0 ? void 0 : _ReactGA$plugin2$exec.call(_ReactGA$plugin2, "ecommerce", "addItem", {
@@ -6626,7 +6640,7 @@ const trackSubscriptionOnGA = () => {
6626
6640
  name: product.name,
6627
6641
  category: product.description,
6628
6642
  variant: plan.nickname,
6629
- price: plan !== null && plan !== void 0 && plan.amount ? plan.amount / 100 : 0,
6643
+ price: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
6630
6644
  quantity: 1
6631
6645
  });
6632
6646
  ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin3 = ReactGA.plugin) === null || _ReactGA$plugin3 === void 0 ? void 0 : (_ReactGA$plugin3$exec = _ReactGA$plugin3.execute) === null || _ReactGA$plugin3$exec === void 0 ? void 0 : _ReactGA$plugin3$exec.call(_ReactGA$plugin3, "ecommerce", "send");
@@ -16465,20 +16479,23 @@ const UserUpdateContainer = ({
16465
16479
  }, []);
16466
16480
 
16467
16481
  const loadUserDataIntoFields = () => {
16468
- var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9;
16482
+ var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
16469
16483
 
16470
16484
  const fields = [{
16485
+ type: SET_EMAIL,
16486
+ payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email
16487
+ }, {
16471
16488
  type: SET_FIRST_NAME,
16472
- payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.first_name
16489
+ payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.first_name
16473
16490
  }, {
16474
16491
  type: SET_LAST_NAME,
16475
- payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.last_name
16492
+ payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.last_name
16476
16493
  }, {
16477
16494
  type: SET_DISPLAY_NAME,
16478
- payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.display_name
16495
+ payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.display_name
16479
16496
  }, {
16480
16497
  type: SET_PHONE,
16481
- payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.phone
16498
+ payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.phone
16482
16499
  }];
16483
16500
  fields.filter(field => Boolean(field.payload)).forEach(field => {
16484
16501
  dispatch(field);
@@ -16486,6 +16503,7 @@ const UserUpdateContainer = ({
16486
16503
  };
16487
16504
 
16488
16505
  const handleUpdateUser = ({
16506
+ email,
16489
16507
  firstName,
16490
16508
  lastName,
16491
16509
  phone,
@@ -16494,6 +16512,7 @@ const UserUpdateContainer = ({
16494
16512
  }, dispatch) => {
16495
16513
  window.Pelcro.user.update({
16496
16514
  auth_token: window.Pelcro.user.read().auth_token,
16515
+ email: email,
16497
16516
  first_name: firstName,
16498
16517
  last_name: lastName,
16499
16518
  display_name: displayName,
@@ -16539,6 +16558,11 @@ const UserUpdateContainer = ({
16539
16558
  }
16540
16559
  });
16541
16560
 
16561
+ case SET_EMAIL:
16562
+ return lib_7({ ...state,
16563
+ email: action.payload
16564
+ });
16565
+
16542
16566
  case SET_FIRST_NAME:
16543
16567
  return lib_7({ ...state,
16544
16568
  firstName: action.payload
@@ -16596,7 +16620,6 @@ const UserUpdateContainer = ({
16596
16620
  };
16597
16621
 
16598
16622
  const UserUpdateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
16599
- disabled: true,
16600
16623
  store: store$d
16601
16624
  }, props));
16602
16625
 
@@ -16698,7 +16721,7 @@ const UserUpdateProfilePic = ({
16698
16721
  onClick: onClick
16699
16722
  }, otherProps)), /*#__PURE__*/React__default.createElement(Button, {
16700
16723
  variant: "icon",
16701
- className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600",
16724
+ className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600 hover:plc-text-white",
16702
16725
  icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
16703
16726
  id: "pelcro-user-update-picture-button",
16704
16727
  onClick: onClick
@@ -16723,15 +16746,15 @@ const UserUpdateView = props => {
16723
16746
  }), /*#__PURE__*/React__default.createElement("div", {
16724
16747
  className: "plc-flex plc-items-start"
16725
16748
  }, /*#__PURE__*/React__default.createElement(UserUpdateEmail, {
16726
- label: t("labels.email")
16749
+ label: t("labels.email"),
16750
+ autoFocus: true
16727
16751
  })), /*#__PURE__*/React__default.createElement("div", {
16728
16752
  className: "plc-flex plc-items-start"
16729
16753
  }, /*#__PURE__*/React__default.createElement(UserUpdateFirstName, {
16730
16754
  autoComplete: "first-name",
16731
16755
  id: "pelcro-input-first-name",
16732
16756
  errorId: "pelcro-input-first-name-error",
16733
- label: t("labels.firstName"),
16734
- autoFocus: true
16757
+ label: t("labels.firstName")
16735
16758
  }), /*#__PURE__*/React__default.createElement(UserUpdateLastName, {
16736
16759
  wrapperClassName: "plc-ml-3",
16737
16760
  autoComplete: "last-name",
package/dist/pelcro.css CHANGED
@@ -827,7 +827,7 @@ Add the correct display in Chrome and Safari.
827
827
  }
828
828
 
829
829
  .pelcro-root .pelcro-input-wrapper {
830
- margin-bottom: 0.75rem;
830
+ margin-bottom: 1.5rem;
831
831
  width: 100%;
832
832
  }
833
833
 
@@ -838,10 +838,11 @@ Add the correct display in Chrome and Safari.
838
838
  }
839
839
 
840
840
  .pelcro-root .pelcro-input-error {
841
- height: 0.75rem;
841
+ height: auto;
842
842
  font-size: 0.875rem;
843
843
  line-height: 1.25rem;
844
- margin-top: 0.25rem;
844
+ margin-top: 0.125rem;
845
+ position: absolute;
845
846
  --tw-text-opacity: 1;
846
847
  color: rgba(180, 48, 43, var(--tw-text-opacity));
847
848
  text-transform: none;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pelcro/react-pelcro-js",
3
3
  "description": "Pelcro's React UI Elements",
4
- "version": "3.2.0-beta.14",
4
+ "version": "3.2.0-beta.18",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",