@ballistix.digital/react-components 0.3.4 → 0.4.1

package/dist/index.d.ts

@@ -126,6 +126,7 @@ declare const base$d: {
     input: string;
     trailing: string;
     description: string;
+    error: string;
 };
 type TInputGroupStyles = DeepPartial$1<typeof base$d>;
 
@@ -138,11 +139,17 @@ type TProps$b = {
     leading?: string;
     trailing?: string;
     value: string;
+    error?: string;
+    mask?: string;
+    replacementCharacter?: string;
     type: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     isValid?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
+    isTouched?: boolean;
+    isSolo?: boolean;
     onChange: any;
+    onBlur: any;
     styles?: TInputGroupStyles;
 };
 declare const InputGroupForm: FC<TProps$b>;

package/dist/index.esm.js

@@ -2,9 +2,10 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ExclamationCircleIcon, CheckIcon, ChevronDownIcon, EllipsisVerticalIcon, ChevronLeftIcon, ChevronRightIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
 import { set, get } from 'lodash';
 import get$1 from 'lodash/get';
-import React, { Children, Fragment, useState, useCallback, useMemo, useEffect } from 'react';
+import n, { Children, Fragment, useRef, useCallback, useEffect, forwardRef, useState, useMemo } from 'react';
 import { Menu, Transition, Dialog } from '@headlessui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { unstable_batchedUpdates } from 'react-dom';
 import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon } from '@heroicons/react/24/outline';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { isValid, parse } from 'date-fns';
@@ -502,8 +503,24 @@ var IconElement = function (props) {
     return component;
 };
 
+var a=function(e,t){return a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t;}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);},a(e,t)};var l$1=function(){return l$1=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},l$1.apply(this,arguments)};function o(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]]);}return r}var i$1=function(e){function t(t,r){var n=e.call(this,t)||this;return n.name="SyntheticChangeError",n.cause=r,n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e;}a(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r);}(t,e),t}(Error);function u$1(e,t){var r=t.value,n=t.selectionStart,a=t.selectionEnd;void 0!==r&&(e.value=r),void 0!==n&&void 0!==a&&e.setSelectionRange(n,a);}var c$1=function(e){return null!==e&&"text"===e.type};function s$1(a){var l=a.init,o=a.tracking,s=a.customInputEventType,p=a.customInputEventHandler,v=useRef(null),d=useRef({requestID:-1,fallbackRequestID:-1,cachedRequestID:-1,start:0,end:0}),f=function(r,a,l){var o=useRef(!0),i=useCallback((function(e){if(null!==r.current&&a&&l){var t=r.current,i=t.value,c=t.selectionStart,s=t.selectionEnd;o.current=!1,setTimeout((function(){if(null!==r.current){u$1(r.current,{value:i,selectionStart:null!=c?c:i.length,selectionEnd:null!=s?s:i.length});var t=new CustomEvent(a,{bubbles:!0,cancelable:!1,composed:!0,detail:e});r.current.dispatchEvent(t),unstable_batchedUpdates?unstable_batchedUpdates(l,t):l(t),o.current=!0;}}));}}),[r,a,l]);return [o,i]}(v,s,p),h=f[0],m=f[1];return useEffect((function(){"production"!==process.env.NODE_ENV&&(null===v.current&&console.error(new Error("Input element does not exist.")),null!==v.current&&"text"!==v.current.type&&console.error(new Error('The type of the input element does not match the type "text".')));}),[]),useEffect((function(){var e;if(null!==v.current&&c$1(v.current)){var t=null!==(e=v.current._wrapperState)&&void 0!==e?e:{},r=t.controlled,n=void 0!==r&&r,a=t.initialValue,o=l({controlled:n,initialValue:void 0===a?"":a});u$1(v.current,{value:o.value});}}),[]),useEffect((function(){var e=function(e){var t,r,n,a,l,s,p,f,h,y,g,k,b,w,E,O;if(c$1(v.current))try{if(null===v.current)throw new i$1("Reference to input element is not initialized.");if(d.current.cachedRequestID===d.current.requestID)throw new i$1("The input selection has not been updated.");d.current.cachedRequestID=d.current.requestID;var _=v.current,I=_.value,S=_.selectionStart,R=_.selectionEnd;if(null===S||null===R)throw new i$1("The selection attributes have not been initialized.");var j=null!==(n=null===(r=null===(t=v.current._valueTracker)||void 0===t?void 0:t.getValue)||void 0===r?void 0:r.call(t))&&void 0!==n?n:"",x="initial";if(S>d.current.start?x="insert":S<=d.current.start&&S<d.current.end?x="deleteBackward":S===d.current.end&&I.length<j.length&&(x="deleteForward"),("deleteBackward"===x||"deleteForward"===x)&&I.length>j.length)throw new i$1("Input type detection error.");var q="",D="",T=d.current.start,P=d.current.end;switch(x){case"insert":q=I.slice(d.current.start,S);break;case"deleteBackward":case"deleteForward":var V=j.length-I.length;T=S,P=S+V,D=j.slice(T,P);break;default:throw new i$1("The input type is undefined.")}var C=o({inputType:x,added:q,deleted:D,previousValue:j,selectionStartRange:T,selectionEndRange:P,value:I,selectionStart:S,selectionEnd:R});u$1(v.current,{value:C.value,selectionStart:C.selectionStart,selectionEnd:C.selectionEnd}),m(C.__detail),null===(l=null===(a=v.current._valueTracker)||void 0===a?void 0:a.setValue)||void 0===l||l.call(a,j),d.current.start=C.selectionStart,d.current.end=C.selectionEnd;}catch(t){var F=t,z=F.name,A=F.cause;if(null!==v.current&&u$1(v.current,{value:null!==(y=null!==(p=null===(s=null==A?void 0:A.__attributes)||void 0===s?void 0:s.value)&&void 0!==p?p:null===(h=null===(f=v.current._valueTracker)||void 0===f?void 0:f.getValue)||void 0===h?void 0:h.call(f))&&void 0!==y?y:"",selectionStart:null!==(k=null===(g=null==A?void 0:A.__attributes)||void 0===g?void 0:g.selectionStart)&&void 0!==k?k:d.current.start,selectionEnd:null!==(w=null===(b=null==A?void 0:A.__attributes)||void 0===b?void 0:b.selectionEnd)&&void 0!==w?w:d.current.end}),void 0!==(null===(E=null==A?void 0:A.__attributes)||void 0===E?void 0:E.selectionStart)&&(d.current.start=A.__attributes.selectionStart),void 0!==(null===(O=null==A?void 0:A.__attributes)||void 0===O?void 0:O.selectionEnd)&&(d.current.end=A.__attributes.selectionEnd),e.preventDefault(),e.stopPropagation(),"SyntheticChangeError"!==z)throw t}},t=v.current;return null==t||t.addEventListener("input",e),function(){null==t||t.removeEventListener("input",e);}}),[o,m]),useEffect((function(){var e=function(){if(c$1(v.current)){var e=function(){var t,r,n,a;h.current?(d.current.start=null!==(r=null===(t=v.current)||void 0===t?void 0:t.selectionStart)&&void 0!==r?r:0,d.current.end=null!==(a=null===(n=v.current)||void 0===n?void 0:n.selectionEnd)&&void 0!==a?a:0,d.current.requestID=requestAnimationFrame(e)):d.current.fallbackRequestID=requestAnimationFrame(e);};d.current.requestID=requestAnimationFrame(e);}};null!==v.current&&document.activeElement===v.current&&e();var t=v.current;return null==t||t.addEventListener("focus",e),function(){null==t||t.removeEventListener("focus",e);}}),[]),useEffect((function(){var e=function(){c$1(v.current)&&(cancelAnimationFrame(d.current.requestID),cancelAnimationFrame(d.current.fallbackRequestID),d.current.requestID=-1,d.current.fallbackRequestID=-1,d.current.cachedRequestID=-1);},t=v.current;return null==t||t.addEventListener("blur",e),function(){null==t||t.removeEventListener("blur",e);}}),[]),v}function p$1(e){var t=e.value,r=e.replacementChars,n=e.replacement,a=e.separate,l=r;return t.split("").reduce((function(e,t){var r,o=!Object.prototype.hasOwnProperty.call(n,t)&&(null===(r=n[l[0]])||void 0===r?void 0:r.test(t));return a&&t===l[0]||o?(l=l.slice(1),e+t):e}),"")}function v(e,t,r){var n=["[","]","\\","/","^","$",".","|","?","*","+","(",")","{","}"];return e.split("").reduce((function(e,a,l,o){var i=Object.prototype.hasOwnProperty.call(t,a),u=r?"(?!".concat(a,")"):"",c=e+(i?u+t[a].toString().slice(1,-1):n.includes(a)?"\\".concat(a):a);return l+1===o.length?"".concat(c,"$"):c}),"^")}function d(e,t){var r=t.mask,n=t.replacement,a=t.showMask,l=function(e,t){var r=t.mask,n=t.replacement,a=0;return r.split("").reduce((function(t,r){return Object.prototype.hasOwnProperty.call(n,r)&&void 0!==e[a]?t+e[a++]:t+r}),"")}(e,{mask:r,replacement:n}),o=function(e,t){var r=t.mask,n=t.replacement;return e.split("").map((function(e,t){return {type:Object.prototype.hasOwnProperty.call(n,e)?"replacement":e===r[t]?"mask":"input",value:e,index:t}}))}(l,{mask:r,replacement:n});if(!a){for(var i=-1,u=o.length-1;u>=0;u--)if("input"===o[u].type){i=o[u].index;break}l=l.slice(0,i+1);}var c=v(r,n,!1),s=v(r,n,!0);return {value:l,input:e,parts:o,pattern:c,isValid:RegExp(s).test(l)}}function f$1(e){var t=e.value,r=e.start,n=void 0===r?0:r,a=e.end,l=e.mask,o=e.replacement,i=e.separate,u=l.slice(n,a),c=t.slice(n,a);return u.split("").reduce((function(e,t,r){var n=Object.prototype.hasOwnProperty.call(o,t);return n&&void 0!==c[r]&&c[r]!==t?e+c[r]:n&&i?e+t:e}),"")}var h=function(e,t){var r="".concat(e,"\n\n").concat(t,"\n");return new Error(r)};var m=function(e){var t;return e.length>0?((t={})[e]=/./,t):{}};function y(n){var a=null!=n?n:{},l=a.mask,o=void 0===l?"":l,u=a.replacement,c=void 0===u?{}:u,v=a.showMask,y=void 0!==v&&v,g=a.separate,k=void 0!==g&&g,b=a.modify,w=a.onMask,E="string"==typeof c?m(c):c,O=useRef(null),_=JSON.stringify(E,(function(e,t){return t instanceof RegExp?t.toString():t})),I=useCallback((function(e){var t=e.controlled,r=e.initialValue;r=t||r?r:y?o:"";var n={mask:o,replacement:E,showMask:y,separate:k};return O.current={value:r,props:n,fallbackProps:n},{value:r}}),[]),S=useCallback((function(e){var t,r=e.inputType,n=e.added,a=e.previousValue,l=e.selectionStartRange,u=e.selectionEndRange;if(null===O.current)throw new i$1("The state has not been initialized.");O.current.value!==a?O.current.props=O.current.fallbackProps:O.current.fallbackProps=O.current.props;var c=f$1({value:a,end:l,mask:O.current.props.mask,replacement:O.current.props.replacement,separate:O.current.props.separate}),s=RegExp("[^".concat(Object.keys(O.current.props.replacement),"]"),"g"),v=O.current.props.mask.replace(s,"");if(c&&(c=p$1({value:c,replacementChars:v,replacement:O.current.props.replacement,separate:O.current.props.separate})),n&&(n=p$1({value:n,replacementChars:v.slice(c.length),replacement:O.current.props.replacement,separate:!1})),"insert"===r&&""===n)throw new i$1("The character does not match the key value of the `replacement` object.");var h=f$1({value:a,start:u,mask:O.current.props.mask,replacement:O.current.props.replacement,separate:O.current.props.separate});if(O.current.props.separate){var g=O.current.props.mask.slice(l,u).replace(s,""),w=g.length-n.length;w<0?h=h.slice(-w):w>0&&(h=g.slice(-w)+h);}h&&(h=p$1({value:h,replacementChars:v.slice(c.length+n.length),replacement:O.current.props.replacement,separate:O.current.props.separate}));var _=c+n+h,I=null!==(t=null==b?void 0:b(_))&&void 0!==t?t:{},S=I.mask,R=void 0===S?o:S,j=I.replacement,x=void 0===j?E:j,q=I.showMask,D=void 0===q?y:q,T=I.separate,P=void 0===T?k:T;"string"==typeof x&&(x=m(x));var V=d(_,{mask:R,replacement:x,showMask:D}),C=function(e){var t,r,n,a=e.inputType,l=e.added,o=e.beforeRange;e.afterRange;var i=e.value,u=e.parts,c=e.replacement,s=e.separate,p=u.filter((function(e){var t=e.type;return "input"===t||s&&"replacement"===t})),v=null===(t=p[o.length+l.length-1])||void 0===t?void 0:t.index,d=null===(r=p[o.length-1])||void 0===r?void 0:r.index,f=null===(n=p[o.length+l.length])||void 0===n?void 0:n.index;if("insert"===a){if(void 0!==v)return v+1;if(void 0!==f)return f;if(void 0!==d)return d+1}if("deleteForward"===a){if(void 0!==f)return f;if(void 0!==d)return d+1}if("deleteBackward"===a){if(void 0!==d)return d+1;if(void 0!==f)return f}var h=i.split("").findIndex((function(e){return Object.prototype.hasOwnProperty.call(c,e)}));return -1!==h?h:i.length}({inputType:r,added:n,beforeRange:c,afterRange:h,value:V.value,parts:V.parts,replacement:x,separate:P});return O.current.value=V.value,O.current.props={mask:R,replacement:x,showMask:D,separate:P},{value:V.value,selectionStart:C,selectionEnd:C,__detail:V}}),[o,_,y,k,b]),R=s$1({init:I,tracking:S,customInputEventType:"input-mask",customInputEventHandler:w});return function(e){var t=e.inputRef,n=e.mask,a=e.replacement;useEffect((function(){var e,r,l;if("production"!==process.env.NODE_ENV){var o=null!==(l=null===(r=null===(e=t.current)||void 0===e?void 0:e._wrapperState)||void 0===r?void 0:r.initialValue)&&void 0!==l?l:"";o.length>n.length&&console.error(h("The initialized value of the `value` or `defaultValue` property is longer than the value specified in the `mask` property. Check the correctness of the initialized value in the specified property.",'Invalid value: "'.concat(o,'".')));var i=Object.keys(a).filter((function(e){return e.length>1}));i.length>0&&console.error(h("Object keys in the `replacement` property are longer than one character. Replacement keys must be one character long. Check the correctness of the value in the specified property.","Invalid keys: ".concat(i.join(", "),".")));var u=n.slice(0,o.length).split("").findIndex((function(e,t){var r=Object.prototype.hasOwnProperty.call(a,e),n=e!==o[t];return r?!!n&&!a[e].test(o[t]):n}));-1!==u&&console.error(h("An invalid character was found in the initialized property value `value` or `defaultValue` (index: ".concat(u,"). Check the correctness of the initialized value in the specified property."),'Invalid value: "'.concat(o,'".')));}}),[]);}({inputRef:R,mask:o,replacement:E}),R}
+
+var i,s={},c={};var u,f,l={};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */function p(){return u||(u=1,"production"!==process.env.NODE_ENV&&function(){var e=n,r=Symbol.for("react.element"),t=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),v=Symbol.iterator,g="@@iterator";var b=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function h(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=b.ReactDebugCurrentFrame,o=n.getStackAddendum();""!==o&&(r+="%s",t=t.concat([o]));var a=t.map((function(e){return String(e)}));a.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,a);}("error",e,t);}var _,k=!1,w=!1,S=!1,j=!1,O=!1;function R(e){return e.displayName||"Context"}function E(e){if(null==e)return null;if("number"==typeof e.tag&&h("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return "Fragment";case t:return "Portal";case i:return "Profiler";case a:return "StrictMode";case f:return "Suspense";case p:return "SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return R(e)+".Consumer";case s:return R(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return ""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case y:var r=e.displayName||null;return null!==r?r:E(e.type)||"Memo";case d:var n=e,l=n._payload,m=n._init;try{return E(m(l))}catch(e){return null}}return null}_=Symbol.for("react.module.reference");var P,T,x,$,N,C,D,F=Object.assign,I=0;function M(){}M.__reactDisabledLog=!0;var L,W=b.ReactCurrentDispatcher;function U(e,r,t){if(void 0===L)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);L=n&&n[1]||"";}return "\n"+L+e}var A,z=!1,Y="function"==typeof WeakMap?WeakMap:Map;function B(e,r){if(!e||z)return "";var t,n=A.get(e);if(void 0!==n)return n;z=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=W.current,W.current=null,function(){if(0===I){P=console.log,T=console.info,x=console.warn,$=console.error,N=console.group,C=console.groupCollapsed,D=console.groupEnd;var e={configurable:!0,enumerable:!0,value:M,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e});}I++;}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[]);}catch(e){t=e;}Reflect.construct(e,[],i);}else {try{i.call();}catch(e){t=e;}e.call(i.prototype);}}else {try{throw Error()}catch(e){t=e;}e();}}catch(r){if(r&&t&&"string"==typeof r.stack){for(var s=r.stack.split("\n"),c=t.stack.split("\n"),u=s.length-1,f=c.length-1;u>=1&&f>=0&&s[u]!==c[f];)f--;for(;u>=1&&f>=0;u--,f--)if(s[u]!==c[f]){if(1!==u||1!==f)do{if(u--,--f<0||s[u]!==c[f]){var l="\n"+s[u].replace(" at new "," at ");return e.displayName&&l.includes("<anonymous>")&&(l=l.replace("<anonymous>",e.displayName)),"function"==typeof e&&A.set(e,l),l}}while(u>=1&&f>=0);break}}}finally{z=!1,W.current=o,function(){if(0==--I){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:F({},e,{value:P}),info:F({},e,{value:T}),warn:F({},e,{value:x}),error:F({},e,{value:$}),group:F({},e,{value:N}),groupCollapsed:F({},e,{value:C}),groupEnd:F({},e,{value:D})});}I<0&&h("disabledDepth fell below zero. This is a bug in React. Please file an issue.");}(),Error.prepareStackTrace=a;}var p=e?e.displayName||e.name:"",y=p?U(p):"";return "function"==typeof e&&A.set(e,y),y}function V(e,r,t){if(null==e)return "";if("function"==typeof e)return B(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return U(e);switch(e){case f:return U("Suspense");case p:return U("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return B(e.render,!1);case y:return V(e.type,r,t);case d:var o=e,a=o._payload,i=o._init;try{return V(i(a),r,t)}catch(e){}}return ""}A=new Y;var q=Object.prototype.hasOwnProperty,H={},J=b.ReactDebugCurrentFrame;function X(e){if(e){var r=e._owner,t=V(e.type,e._source,r?r.type:null);J.setExtraStackFrame(t);}else J.setExtraStackFrame(null);}var G=Array.isArray;function K(e){return G(e)}function Q(e){return ""+e}function Z(e){if(function(e){try{return Q(e),!1}catch(e){return !0}}(e))return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return "function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Q(e)}var ee,re,te,ne=b.ReactCurrentOwner,oe={key:!0,ref:!0,__self:!0,__source:!0};te={};var ae=function(e,t,n,o,a,i,s){var c={$$typeof:r,type:e,key:t,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c};function ie(e,r,t,n,o){var a,i={},s=null,c=null;for(a in void 0!==t&&(Z(t),s=""+t),function(e){if(q.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return !1}return void 0!==e.key}(r)&&(Z(r.key),s=""+r.key),function(e){if(q.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return !1}return void 0!==e.ref}(r)&&(c=r.ref,function(e,r){if("string"==typeof e.ref&&ne.current&&r&&ne.current.stateNode!==r){var t=E(ne.current.type);te[t]||(h('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',E(ne.current.type),e.ref),te[t]=!0);}}(r,o)),r)q.call(r,a)&&!oe.hasOwnProperty(a)&&(i[a]=r[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===i[a]&&(i[a]=u[a]);}if(s||c){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,r){var t=function(){ee||(ee=!0,h("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r));};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0});}(i,f),c&&function(e,r){var t=function(){re||(re=!0,h("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r));};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0});}(i,f);}return ae(e,s,c,o,n,ne.current,i)}var se,ce=b.ReactCurrentOwner,ue=b.ReactDebugCurrentFrame;function fe(e){if(e){var r=e._owner,t=V(e.type,e._source,r?r.type:null);ue.setExtraStackFrame(t);}else ue.setExtraStackFrame(null);}function le(e){return "object"==typeof e&&null!==e&&e.$$typeof===r}function pe(){if(ce.current){var e=E(ce.current.type);if(e)return "\n\nCheck the render method of `"+e+"`."}return ""}se=!1;var ye={};function de(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=pe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.");}return r}(r);if(!ye[t]){ye[t]=!0;var n="";e&&e._owner&&e._owner!==ce.current&&(n=" It was passed a child from "+E(e._owner.type)+"."),fe(e),h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),fe(null);}}}function me(e,r){if("object"==typeof e)if(K(e))for(var t=0;t<e.length;t++){var n=e[t];le(n)&&de(n,r);}else if(le(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=v&&e[v]||e[g];return "function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)le(a.value)&&de(a.value,r);}}function ve(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else {if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==y)return;r=t.propTypes;}if(r){var n=E(t);!function(e,r,t,n,o){var a=Function.call.bind(q);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");}catch(e){s=e;}!s||s instanceof Error||(X(o),h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),X(null)),s instanceof Error&&!(s.message in H)&&(H[s.message]=!0,X(o),h("Failed %s type: %s",t,s.message),X(null));}}(r,e.props,"prop",n,e);}else if(void 0!==t.PropTypes&&!se){se=!0,h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",E(t)||"Unknown");}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");}}function ge(e,t,n,l,v,g){var b=function(e){return "string"==typeof e||"function"==typeof e||!!(e===o||e===i||O||e===a||e===f||e===p||j||e===m||k||w||S)||"object"==typeof e&&null!==e&&(e.$$typeof===d||e.$$typeof===y||e.$$typeof===s||e.$$typeof===c||e.$$typeof===u||e.$$typeof===_||void 0!==e.getModuleId)}(e);if(!b){var R="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(R+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var P,T=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(v);R+=T||pe(),null===e?P="null":K(e)?P="array":void 0!==e&&e.$$typeof===r?(P="<"+(E(e.type)||"Unknown")+" />",R=" Did you accidentally export a JSX literal instead of a component?"):P=typeof e,h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",P,R);}var x=ie(e,t,n,v,g);if(null==x)return x;if(b){var $=t.children;if(void 0!==$)if(l)if(K($)){for(var N=0;N<$.length;N++)me($[N],e);Object.freeze&&Object.freeze($);}else h("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else me($,e);}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){fe(e),h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),fe(null);break}}null!==e.ref&&(fe(e),h("Invalid attribute `ref` supplied to `React.Fragment`."),fe(null));}(x):ve(x),x}var be=function(e,r,t){return ge(e,r,t,!1)},he=function(e,r,t){return ge(e,r,t,!0)};l.Fragment=o,l.jsx=be,l.jsxs=he;}()),l}f={get exports(){return s},set exports(e){s=e;}},"production"===process.env.NODE_ENV?f.exports=function(){if(i)return c;i=1;var e=n,r=Symbol.for("react.element"),t=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,a=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,n){var i,c={},u=null,f=null;for(i in void 0!==n&&(u=""+n),void 0!==t.key&&(u=""+t.key),void 0!==t.ref&&(f=t.ref),t)o.call(t,i)&&!s.hasOwnProperty(i)&&(c[i]=t[i]);if(e&&e.defaultProps)for(i in t=e.defaultProps)void 0===c[i]&&(c[i]=t[i]);return {$$typeof:r,type:e,key:u,ref:f,props:c,_owner:a.current}}return c.Fragment=t,c.jsx=u,c.jsxs=u,c}():f.exports=p();forwardRef((function(n,a){var i,c,u=n.component,f=n.mask,l=n.replacement,p=n.showMask,y$1=n.separate,d=n.modify,m=n.onMask,v=o(n,["component","mask","replacement","showMask","separate","modify","onMask"]),g=y({mask:f,replacement:l,showMask:p,separate:y$1,modify:d,onMask:m}),b=useCallback((function(e){i.current=e,"function"==typeof c?c(e):"object"==typeof c&&null!==c&&(c.current=e);}),[i=g,c=a]);return u?s.jsx(u,l$1({ref:b},v)):s.jsx("input",l$1({ref:b},v))}));
+
 var InputGroupForm = function (props) {
-    var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.isValid, isValid = _c === void 0 ? true : _c, isDisabled = props.isDisabled, isRequired = props.isRequired, onChange = props.onChange, stylesOverrides = props.styles;
+    var _a;
+    var name = props.name, _b = props.htmlType, htmlType = _b === void 0 ? 'text' : _b, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, mask = props.mask, _c = props.replacementCharacter, replacementCharacter = _c === void 0 ? 'X' : _c, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, isRequired = props.isRequired, isTouched = props.isTouched, _e = props.isSolo, isSolo = _e === void 0 ? false : _e, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var isValid = error === undefined;
+    var ref = y({ mask: mask, replacement: (_a = {}, _a[replacementCharacter] = /\d/, _a) });
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$e.base);
         var keys = calculateNestedKeys(styles$e.base);
@@ -514,7 +531,7 @@ var InputGroupForm = function (props) {
     };
     var styles = handleGenerateStyle();
     var invalidIcon = (jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
-    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: value, disabled: isDisabled, onChange: onChange }), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsx("div", __assign({ className: styles.foot }, { children: description && jsx("p", __assign({ className: styles.description }, { children: description })) }))] })));
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: mask !== '' ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
 var base$d = {
@@ -527,7 +544,8 @@ var base$d = {
     leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
     input: 'block w-full',
     trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-500 text-xs',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
 };
 var leading = {
     input: 'pl-10',
@@ -749,7 +767,7 @@ var MediaObjectLayout = function (props) {
     var handleGenerateComponent = function () {
         var result = (jsx("svg", __assign({ className: styles.svg, preserveAspectRatio: "none", stroke: "currentColor", fill: "none", viewBox: "0 0 200 200", "aria-hidden": "true" }, { children: jsx("path", { vectorEffect: "non-scaling-stroke", strokeWidth: 1, d: "M0 0l200 200M0 200L200 0" }) })));
         if (customFigure) {
-            result = React.cloneElement(customFigure, {
+            result = n.cloneElement(customFigure, {
                 className: styles.svg,
             });
         }