@pelcro/react-pelcro-js 3.43.0 → 3.44.0

package/dist/index.cjs.js

@@ -10049,8 +10049,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n=/\n+/g,o=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o(c,n):n+"{"+o(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o(c,t?t.replace(/([^,])+/g,e=>n.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o.p?o.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},i$1=(e,t,r,i,p)=>{let u=s(e),d=c[u]||(c[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n," ").trim();return o[0]})(e);c[d]=o(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c.g?c.g:null;return r&&(c.g=c[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o(e,""):!1===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i$1(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}let d,f,g;u.bind({g:1});let h=u.bind({k:1});function m(e,t,r,l){o.p=t,d=e,f=r,g=l;}function j(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=u.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=e;return e[0]&&(i=c.as||e,delete c.as),g&&i[0]&&g(c),d(i,c)}return t?t(a):a}}
 
-function _extends$C() {
-  _extends$C = Object.assign || function (target) {
+function _extends$E() {
+  _extends$E = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -10064,7 +10064,7 @@ function _extends$C() {
     return target;
   };
 
-  return _extends$C.apply(this, arguments);
+  return _extends$E.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -10154,7 +10154,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -10164,9 +10164,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$C({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$E({}, t, action.toast) : t;
         })
       });
 
@@ -10193,9 +10193,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$C({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$E({}, t, {
             visible: false
           }) : t;
         })
@@ -10203,28 +10203,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$C({}, state, {
+        return _extends$E({}, state, {
           toasts: []
         });
       }
 
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$C({}, t, {
+          return _extends$E({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -10271,12 +10271,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$C({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$E({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$C({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$E({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$C({}, state, {
+  return _extends$E({}, state, {
     toasts: mergedToasts
   });
 };
@@ -10286,7 +10286,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$C({
+  return _extends$E({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -10336,14 +10336,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$C({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$E({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$C({
+    toast.success(resolveValue(msgs.success, p), _extends$E({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$C({
+    toast.error(resolveValue(msgs.error, e), _extends$E({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -10682,7 +10682,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$C({}, animationStyle, style, toast.style)
+    style: _extends$E({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -10712,7 +10712,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$C({
+  return _extends$E({
     left: 0,
     right: 0,
     display: 'flex',
@@ -10739,7 +10739,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$C({
+    style: _extends$E({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -10774,77 +10774,77 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$z;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var _path$B;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$A;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 function SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$z;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$w;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+var _path$y;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 function SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$v, _path2$4;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$x, _path2$5;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 function SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
     d: "M12 19a7 7 0 100-14 7 7 0 000 14zm0 3c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M2 12C2 6.477 6.477 2 12 2v3a7 7 0 00-7 7H2z"
   })));
 }
@@ -13025,7 +13025,41 @@ function UserNameInput(_ref) {
   }, otherProps));
 }
 
+var _path$w, _path2$4;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function SvgEyePasswordHide(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 30",
+    fill: "none"
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.293 2.293a1 1 0 011.414 0L8.146 6.73c3.649-1.445 8.002-.748 10.973 2.09l2.572 2.456a1 1 0 010 1.446l-2.572 2.457c-.44.42-.91.793-1.405 1.12l3.993 3.993a1 1 0 01-1.414 1.414l-18-18a1 1 0 010-1.414zm13.97 12.556a8.064 8.064 0 001.475-1.116L19.552 12l-1.814-1.733a8.069 8.069 0 00-1.734-1.262C16.629 9.84 17 10.876 17 12c0 1.02-.305 1.967-.828 2.757l.091.092zm-1.555-1.556l-4.001-4a3 3 0 014.001 4.001z",
+    fill: "#000"
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M4.88 8.82c.09-.085.182-.17.274-.251l1.418 1.417a8.15 8.15 0 00-.31.28L4.448 12l1.814 1.733c1.726 1.649 4.042 2.398 6.305 2.248l1.76 1.76c-3.284.743-6.88-.11-9.446-2.561l-2.572-2.457a1 1 0 010-1.446L4.881 8.82z",
+    fill: "#000"
+  })));
+}
+
+var _path$v;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+function SvgEyePasswordShow(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 40",
+    fill: "none"
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M26.814 12.432c-5.974-5.91-15.655-5.91-21.628 0l-2.89 2.857a1 1 0 000 1.422l2.89 2.857c5.973 5.91 15.654 5.91 21.628 0l2.89-2.857a1 1 0 000-1.422l-2.89-2.857zm-6.055-1.565a13.27 13.27 0 014.649 2.986L27.578 16l-2.17 2.146a13.27 13.27 0 01-4.649 2.987A6.981 6.981 0 0023 16a6.981 6.981 0 00-2.24-5.133zm-9.518 0a13.27 13.27 0 00-4.649 2.986L4.422 16l2.17 2.146a13.27 13.27 0 004.649 2.987A6.981 6.981 0 019 16c0-2.028.862-3.855 2.24-5.133zM11 16a5 5 0 1110 0 5 5 0 01-10 0z",
+    fill: "#000"
+  })));
+}
+
 function Password(_ref) {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     store,
     ...otherProps
@@ -13042,6 +13076,7 @@ function Password(_ref) {
   } = React.useContext(store);
   const [password, setPassword] = React.useState(statePassword);
   const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
   const handleInputChange = React.useCallback(value => {
     setPassword(value);
     if (password.length) {
@@ -13059,14 +13094,26 @@ function Password(_ref) {
   React.useEffect(() => {
     handleInputChange(password);
   }, [finishedTyping, password, handleInputChange]);
-  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
-    type: "password",
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-relative"
+  }, /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
+    type: showPassword ? "text" : "password",
     error: passwordError,
     value: password,
     onChange: e => handleInputChange(e.target.value),
     onBlur: () => setFinishedTyping(true),
     onFocus: () => setFinishedTyping(false)
-  }, otherProps));
+  }, otherProps)), ((_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.showPassword) && /*#__PURE__*/React__default['default'].createElement("span", {
+    onClick: () => setShowPassword(!showPassword),
+    className: "plc-absolute plc-right-2  plc-transform plc--translate-y-1/2 plc-cursor-pointer plc-opacity-50 plc-w-6 plc-h-6",
+    style: {
+      top: "70%"
+    }
+  }, showPassword ? /*#__PURE__*/React__default['default'].createElement(SvgEyePasswordHide, {
+    className: "plc-w-full plc-h-full"
+  }) : /*#__PURE__*/React__default['default'].createElement(SvgEyePasswordShow, {
+    className: "plc-w-full plc-h-full"
+  })));
 }
 
 /**

package/dist/index.esm.js

@@ -10019,8 +10019,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n=/\n+/g,o=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o(c,n):n+"{"+o(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o(c,t?t.replace(/([^,])+/g,e=>n.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o.p?o.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},i$1=(e,t,r,i,p)=>{let u=s(e),d=c[u]||(c[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n," ").trim();return o[0]})(e);c[d]=o(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c.g?c.g:null;return r&&(c.g=c[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o(e,""):!1===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i$1(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}let d,f,g;u.bind({g:1});let h=u.bind({k:1});function m(e,t,r,l){o.p=t,d=e,f=r,g=l;}function j(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=u.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=e;return e[0]&&(i=c.as||e,delete c.as),g&&i[0]&&g(c),d(i,c)}return t?t(a):a}}
 
-function _extends$C() {
-  _extends$C = Object.assign || function (target) {
+function _extends$E() {
+  _extends$E = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -10034,7 +10034,7 @@ function _extends$C() {
     return target;
   };
 
-  return _extends$C.apply(this, arguments);
+  return _extends$E.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -10124,7 +10124,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -10134,9 +10134,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$C({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$E({}, t, action.toast) : t;
         })
       });
 
@@ -10163,9 +10163,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$C({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$E({}, t, {
             visible: false
           }) : t;
         })
@@ -10173,28 +10173,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$C({}, state, {
+        return _extends$E({}, state, {
           toasts: []
         });
       }
 
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$C({}, state, {
+      return _extends$E({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$C({}, t, {
+          return _extends$E({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -10241,12 +10241,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$C({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$E({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$C({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$E({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$C({}, state, {
+  return _extends$E({}, state, {
     toasts: mergedToasts
   });
 };
@@ -10256,7 +10256,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$C({
+  return _extends$E({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -10306,14 +10306,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$C({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$E({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$C({
+    toast.success(resolveValue(msgs.success, p), _extends$E({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$C({
+    toast.error(resolveValue(msgs.error, e), _extends$E({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -10652,7 +10652,7 @@ var ToastBar = /*#__PURE__*/memo(function (_ref2) {
   var message = createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$C({}, animationStyle, style, toast.style)
+    style: _extends$E({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -10682,7 +10682,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$C({
+  return _extends$E({
     left: 0,
     right: 0,
     display: 'flex',
@@ -10709,7 +10709,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return createElement("div", {
-    style: _extends$C({
+    style: _extends$E({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -10744,77 +10744,77 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$z;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var _path$B;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$A;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 function SvgXIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  return /*#__PURE__*/React.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$z;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$w;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+var _path$y;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 function SvgExclamation(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$v, _path2$4;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$x, _path2$5;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 function SvgSpinner(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
     d: "M12 19a7 7 0 100-14 7 7 0 000 14zm0 3c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
     d: "M2 12C2 6.477 6.477 2 12 2v3a7 7 0 00-7 7H2z"
   })));
 }
@@ -12995,7 +12995,41 @@ function UserNameInput(_ref) {
   }, otherProps));
 }
 
+var _path$w, _path2$4;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function SvgEyePasswordHide(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 30",
+    fill: "none"
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.293 2.293a1 1 0 011.414 0L8.146 6.73c3.649-1.445 8.002-.748 10.973 2.09l2.572 2.456a1 1 0 010 1.446l-2.572 2.457c-.44.42-.91.793-1.405 1.12l3.993 3.993a1 1 0 01-1.414 1.414l-18-18a1 1 0 010-1.414zm13.97 12.556a8.064 8.064 0 001.475-1.116L19.552 12l-1.814-1.733a8.069 8.069 0 00-1.734-1.262C16.629 9.84 17 10.876 17 12c0 1.02-.305 1.967-.828 2.757l.091.092zm-1.555-1.556l-4.001-4a3 3 0 014.001 4.001z",
+    fill: "#000"
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
+    d: "M4.88 8.82c.09-.085.182-.17.274-.251l1.418 1.417a8.15 8.15 0 00-.31.28L4.448 12l1.814 1.733c1.726 1.649 4.042 2.398 6.305 2.248l1.76 1.76c-3.284.743-6.88-.11-9.446-2.561l-2.572-2.457a1 1 0 010-1.446L4.881 8.82z",
+    fill: "#000"
+  })));
+}
+
+var _path$v;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+function SvgEyePasswordShow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 40",
+    fill: "none"
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M26.814 12.432c-5.974-5.91-15.655-5.91-21.628 0l-2.89 2.857a1 1 0 000 1.422l2.89 2.857c5.973 5.91 15.654 5.91 21.628 0l2.89-2.857a1 1 0 000-1.422l-2.89-2.857zm-6.055-1.565a13.27 13.27 0 014.649 2.986L27.578 16l-2.17 2.146a13.27 13.27 0 01-4.649 2.987A6.981 6.981 0 0023 16a6.981 6.981 0 00-2.24-5.133zm-9.518 0a13.27 13.27 0 00-4.649 2.986L4.422 16l2.17 2.146a13.27 13.27 0 004.649 2.987A6.981 6.981 0 019 16c0-2.028.862-3.855 2.24-5.133zM11 16a5 5 0 1110 0 5 5 0 01-10 0z",
+    fill: "#000"
+  })));
+}
+
 function Password(_ref) {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     store,
     ...otherProps
@@ -13012,6 +13046,7 @@ function Password(_ref) {
   } = useContext(store);
   const [password, setPassword] = useState(statePassword);
   const [finishedTyping, setFinishedTyping] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const handleInputChange = useCallback(value => {
     setPassword(value);
     if (password.length) {
@@ -13029,14 +13064,26 @@ function Password(_ref) {
   useEffect(() => {
     handleInputChange(password);
   }, [finishedTyping, password, handleInputChange]);
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({
-    type: "password",
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-relative"
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    type: showPassword ? "text" : "password",
     error: passwordError,
     value: password,
     onChange: e => handleInputChange(e.target.value),
     onBlur: () => setFinishedTyping(true),
     onFocus: () => setFinishedTyping(false)
-  }, otherProps));
+  }, otherProps)), ((_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.showPassword) && /*#__PURE__*/React__default.createElement("span", {
+    onClick: () => setShowPassword(!showPassword),
+    className: "plc-absolute plc-right-2  plc-transform plc--translate-y-1/2 plc-cursor-pointer plc-opacity-50 plc-w-6 plc-h-6",
+    style: {
+      top: "70%"
+    }
+  }, showPassword ? /*#__PURE__*/React__default.createElement(SvgEyePasswordHide, {
+    className: "plc-w-full plc-h-full"
+  }) : /*#__PURE__*/React__default.createElement(SvgEyePasswordShow, {
+    className: "plc-w-full plc-h-full"
+  })));
 }
 
 /**

package/dist/pelcro.css

@@ -2443,6 +2443,10 @@ apple-pay-button {
   object-fit: contain;
 }
 
+.pelcro-root .plc-opacity-50 {
+  opacity: 0.5;
+}
+
 .pelcro-root .plc-outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3162,6 +3166,10 @@ apple-pay-button {
   --tw-translate-x: 100%;
 }
 
+.pelcro-root .plc--translate-y-1\/2 {
+  --tw-translate-y: -50%;
+}
+
 .pelcro-root .plc-group:hover .group-hover\:plc-translate-x-1 {
   --tw-translate-x: 0.25rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.43.0",
+  "version": "3.44.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",