@bikdotai/bik-component-library 0.0.737 → 0.0.738-0

package/dist/cjs/components/icon-button/IconButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),l=require("./theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(o);const n=o.forwardRef(((o,s)=>{var{id:n,iconButtonType:c="default",Icon:a,height:u=20,width:b=20,bordered:y,disabled:p,isSelected:j,style:h,svgStyle:f,iconColor:g,disabledTooltip:v}=o,B=e.__rest(o,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const I=l.getIconColor(c,p,j),T=t.jsx(r.IconButton,Object.assign({id:n,ref:s,style:h,iconButtonType:c,bordered:y,disabled:p,isSelected:j},B,{children:d.default.createElement(a,{height:u,width:b,color:g||I,style:Object.assign({display:"block"},null!=f?f:{})})}));return p&&v?t.jsx(i.Tooltip,Object.assign({body:v},{children:t.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:T}))})):T}));n.displayName="IconButton",exports.IconButton=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("../../node_modules/react/jsx-runtime.js"),o=require("react"),i=require("../tooltips/Tooltip.js"),s=require("./IconButton.styled.js"),r=require("./theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(o);const d=o.forwardRef(((o,l)=>{var{id:d,iconButtonType:c="default",Icon:u,height:a=20,width:p=20,bordered:b,disabled:j,isSelected:y,style:h,svgStyle:x,iconColor:f,disabledTooltip:g}=o,m=e.__rest(o,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const v=r.getIconColor(c,j,y),B=t.jsxRuntimeExports.jsx(s.IconButton,Object.assign({id:d,ref:l,style:h,iconButtonType:c,bordered:b,disabled:j,isSelected:y},m,{children:n.default.createElement(u,{height:a,width:p,color:f||v,style:Object.assign({display:"block"},null!=x?x:{})})}));return j&&g?t.jsxRuntimeExports.jsx(i.Tooltip,Object.assign({body:g},{children:t.jsxRuntimeExports.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:B}))})):B}));d.displayName="IconButton",exports.IconButton=d;

package/dist/cjs/components/image-cropper/BikImageCropper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("react-image-crop"),o=require("../modals/styledModal.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(r);const d=r=>{const[a,d]=i.useState(!1),[l,c]=i.useState(void 0),[s,h]=i.useState({width:0,height:0}),[u,g]=i.useState(!1),v=(t,i,r,o)=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;const a=e.getContext("2d");if(!a)throw new Error("Failed to get 2D context of canvas.");a.drawImage(t,i.x*r,i.y*o,i.width*r,i.height*o,0,0,i.width,i.height);try{return e.toDataURL("image/png")}catch(e){throw new Error("Failed to create blob for cropped image.")}}));return t.jsx(o.StyledModal,Object.assign({open:!0,onClose:r.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:u,onClick:()=>{var t;t=l,e.__awaiter(void 0,void 0,void 0,(function*(){var e,i;if(g(!0),r.src&&(null==t?void 0:t.width)&&(null==t?void 0:t.height)){const i=new Image;i.src=r.src;const o=i.naturalWidth/s.width,n=i.naturalHeight/s.height,d=yield v(i,t,o,n);yield null===(e=null==r?void 0:r.onCropComplete)||void 0===e?void 0:e.call(r,d,a)}else yield null===(i=null==r?void 0:r.onCropComplete)||void 0===i?void 0:i.call(r,r.src,a);g(!1)}))}}},{children:t.jsx("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}},{children:t.jsx("div",{children:t.jsx(n.default,Object.assign({crop:l,onChange:e=>{c(e)},circularCrop:!1,onDragStart:()=>{d(!0)},aspect:r.aspectRatio},{children:t.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:r.src,alt:"image cropper",onLoad:e=>{const t=e.target,i=t.width;h({width:i,height:t.height})}})}))})}))}))};exports.BikImageCropper=d,exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("../../node_modules/react/jsx-runtime.js"),i=require("react"),o=require("react-image-crop"),r=require("../modals/styledModal.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(o);const s=o=>{const[a,s]=i.useState(!1),[d,l]=i.useState(void 0),[c,h]=i.useState({width:0,height:0}),[u,g]=i.useState(!1),p=(t,i,o,r)=>e.__awaiter(void 0,void 0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;const a=e.getContext("2d");if(!a)throw new Error("Failed to get 2D context of canvas.");a.drawImage(t,i.x*o,i.y*r,i.width*o,i.height*r,0,0,i.width,i.height);try{return e.toDataURL("image/png")}catch(e){throw new Error("Failed to create blob for cropped image.")}}));return t.jsxRuntimeExports.jsx(r.StyledModal,Object.assign({open:!0,onClose:o.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:u,onClick:()=>{var t;t=d,e.__awaiter(void 0,void 0,void 0,(function*(){var e,i;if(g(!0),o.src&&(null==t?void 0:t.width)&&(null==t?void 0:t.height)){const i=new Image;i.src=o.src;const r=i.naturalWidth/c.width,n=i.naturalHeight/c.height,s=yield p(i,t,r,n);yield null===(e=null==o?void 0:o.onCropComplete)||void 0===e?void 0:e.call(o,s,a)}else yield null===(i=null==o?void 0:o.onCropComplete)||void 0===i?void 0:i.call(o,o.src,a);g(!1)}))}}},{children:t.jsxRuntimeExports.jsx("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}},{children:t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(n.default,Object.assign({crop:d,onChange:e=>{l(e)},circularCrop:!1,onDragStart:()=>{s(!0)},aspect:o.aspectRatio},{children:t.jsxRuntimeExports.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:o.src,alt:"image cropper",onLoad:e=>{const t=e.target,i=t.width;h({width:i,height:t.height})}})}))})}))}))};exports.BikImageCropper=s,exports.default=s;

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),r=require("../../image-compress/ImageCompress.js"),t=require("../../states/StateComponent.js");require("../../../_virtual/_tslib.js");var s=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=i=>{let{cropOptions:l,fileTitle:n,compressionOptions:p,currentImage:c,options:u,onFinish:d,onCancel:m,fileUploadOptions:g,loadingStateOptions:h}=i;const j=o.useRef(null),[C,I]=o.useState(),[f,v]=o.useState(c),[x,S]=o.useState(!1);o.useEffect((()=>{u.upload?(I("upload"),setTimeout((()=>{y()}),500)):u.crop?I("crop"):u.compress?I("compress"):u.uploadToFirestorage?I("cloud-upload"):S(!0)}),[u.upload,u.crop,u.compress,u.uploadToFirestorage]);const F=o.useCallback(((e,o)=>{if(!u.uploadToFirestorage)return d(e,o),void S(!0);I("cloud-upload"),g&&g.uploadFile(o,g.path).then((r=>{d(e,o,r),S(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),b=e=>{e||m();const o=r.ImageService.base64ToImage(e);u.compress?(I("compress"),r.ImageService.compressImage(o,p).then((e=>{if(!e)return S(!0),void m();F(e.base64,e.compressedFile)}))):F(e,o)},y=()=>{j.current.click()};return x?e.jsx(e.Fragment,{}):"cloud-upload"===C?!g||g.success?e.jsx(e.Fragment,{}):g.error?e.jsx("div",{children:e.jsx(s.StateModalComponent,{states:t.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{S(!0),m()}})}):e.jsx("div",{children:e.jsx(s.StateModalComponent,{headerImage:null==h?void 0:h.headerImage,states:t.StateInterface.LOADING,heading:`Uploading your ${n||"photo"}`,subline:`Please wait while we upload your ${n||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxs(e.Fragment,{children:[u.upload&&e.jsx("input",{ref:j,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],r=new FileReader;r.onload=()=>{var e;v({src:r.result}),e=r.result,u.crop?I("crop"):b(e)},o&&r.readAsDataURL(o)}}),"crop"===C&&e.jsx(a.BikImageCropper,{src:f.src,onCropComplete:e=>{v({src:e}),b(e)},aspectRatio:l.aspectRatio,onCancel:m})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/react/jsx-runtime.js"),s=require("react"),t=require("../../image-compress/ImageCompress.js"),o=require("../../states/StateComponent.js");require("../../../_virtual/_tslib.js");var r=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=i=>{let{cropOptions:n,fileTitle:p,compressionOptions:l,currentImage:u,options:c,onFinish:d,onCancel:m,fileUploadOptions:x,loadingStateOptions:g}=i;const j=s.useRef(null),[h,R]=s.useState(),[E,C]=s.useState(u),[I,f]=s.useState(!1);s.useEffect((()=>{c.upload?(R("upload"),setTimeout((()=>{F()}),500)):c.crop?R("crop"):c.compress?R("compress"):c.uploadToFirestorage?R("cloud-upload"):f(!0)}),[c.upload,c.crop,c.compress,c.uploadToFirestorage]);const v=s.useCallback(((e,s)=>{if(!c.uploadToFirestorage)return d(e,s),void f(!0);R("cloud-upload"),x&&x.uploadFile(s,x.path).then((t=>{d(e,s,t),f(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),S=e=>{e||m();const s=t.ImageService.base64ToImage(e);c.compress?(R("compress"),t.ImageService.compressImage(s,l).then((e=>{if(!e)return f(!0),void m();v(e.base64,e.compressedFile)}))):v(e,s)},F=()=>{j.current.click()};return I?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}):"cloud-upload"===h?!x||x.success?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}):x.error?e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx(r.StateModalComponent,{states:o.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{f(!0),m()}})}):e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx(r.StateModalComponent,{headerImage:null==g?void 0:g.headerImage,states:o.StateInterface.LOADING,heading:`Uploading your ${p||"photo"}`,subline:`Please wait while we upload your ${p||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[c.upload&&e.jsxRuntimeExports.jsx("input",{ref:j,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const s=e.target.files[0],t=new FileReader;t.onload=()=>{var e;C({src:t.result}),e=t.result,c.crop?R("crop"):S(e)},s&&t.readAsDataURL(s)}}),"crop"===h&&e.jsxRuntimeExports.jsx(a.BikImageCropper,{src:E.src,onCropComplete:e=>{C({src:e}),S(e)},aspectRatio:n.aspectRatio,onCancel:m})]})};

package/dist/cjs/components/input/ChipInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-chips"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./ChipInput.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(r);exports.default=r=>{let{onChipsChange:c,placeholder:s,chips:a,label:u,labelColor:d,hintText:h,hintTextColor:p,error:y,inputHeight:C,createChipKeys:O,chipsContainerCustomStyle:j,nativeID:v}=r;const[f,g]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${v} input`))||void 0===e||e.addEventListener("focus",(()=>{g(!0)})),null===(t=document.querySelector(`#${v} input`))||void 0===t||t.addEventListener("blur",(()=>{g(!1)}))}),[]),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:v},{children:[u&&e.jsx(i.BodySecondary,Object.assign({style:{color:f?n.COLORS.content.brand:y?n.COLORS.content.negative:d||n.COLORS.content.primary}},{children:u})),e.jsx(l.default,{value:a,theme:o.theme(!!y,C,j,f),chipTheme:o.chipTheme,placeholder:0===a.length&&!!s&&!f&&s,onChange:e=>{c(e)},createChipKeys:O||","}),(!!h||!!y)&&e.jsx(i.BodyCaption,Object.assign({style:{color:y?n.COLORS.content.negative:p||n.COLORS.content.secondary}},{children:y||h}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),n=require("react-chips"),r=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),s=require("./ChipInput.styled.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(n);exports.default=n=>{let{onChipsChange:o,placeholder:c,chips:a,label:u,labelColor:d,hintText:p,hintTextColor:h,error:y,inputHeight:x,createChipKeys:j,chipsContainerCustomStyle:m,nativeID:C}=n;const[O,v]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${C} input`))||void 0===e||e.addEventListener("focus",(()=>{v(!0)})),null===(t=document.querySelector(`#${C} input`))||void 0===t||t.addEventListener("blur",(()=>{v(!1)}))}),[]),e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:C},{children:[u&&e.jsxRuntimeExports.jsx(i.BodySecondary,Object.assign({style:{color:O?r.COLORS.content.brand:y?r.COLORS.content.negative:d||r.COLORS.content.primary}},{children:u})),e.jsxRuntimeExports.jsx(l.default,{value:a,theme:s.theme(!!y,x,m,O),chipTheme:s.chipTheme,placeholder:0===a.length&&!!c&&!O&&c,onChange:e=>{o(e)},createChipKeys:j||","}),(!!p||!!y)&&e.jsxRuntimeExports.jsx(i.BodyCaption,Object.assign({style:{color:y?r.COLORS.content.negative:h||r.COLORS.content.secondary}},{children:y||p}))]}))};

package/dist/cjs/components/input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),l=require("./Input-helper.js"),s=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,g,p,x,j,f,m,b;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:T,maxCharLimit:I,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:q,button:B,suffixText:L,prefixText:M,onChangeText:F,value:P,noErrorHint:R,reset:D,rangeValidation:z,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:V,labelTextBold:$,truncateText:J,maxCharLimitPosition:Q,hightlightInputColor:U,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),ie=null==C?void 0:C.icon,le=null==O?void 0:O.icon,[se,re]=n.useState(!1),[ae,oe]=n.useState(!1),[ue,ce]=n.useState(),de="x-small"===q?"12px":"small"===q?"18px":"22px",he=n.useContext(u.InputStyleContext),[ve,ge]=n.useState(""),pe=n.useRef(null),xe=null!=h?h:pe;n.useEffect((()=>{ge(P||""),!P&&W&&(xe.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;xe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,xe.current))}),[xe]),n.useEffect((()=>{const e=xe.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",be,{passive:!1}),()=>{e.removeEventListener("wheel",be)}}),[]),n.useEffect((()=>{D&&ge("")}),[D]),n.useEffect((()=>{var e;oe(!!d.isActive),d.isActive&&(null===(e=xe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{ce(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;re(!1),("invalid"===d.state||ue||"disabled-invalid"===d.state)&&re(!0),"active"===d.state&&(null===(e=xe.current)||void 0===e||e.focus())}),[d.state,ue]),n.useEffect((()=>{re(!!ue||"invalid"===d.state)}),[ue,d.state]);const je=function(e){if(l.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},fe=()=>"zip"===E?6:2e3,me=e=>{const t=0!==I?I:fe(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||F(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},be=e=>{e.preventDefault()},ye=e=>{let t=e.target.value;const n=0!==I?I+1:fe(),i=te;if(!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||ge(t||""),i&&t&&t.length<i)return;F(t,e),W&&(xe.current.style.height=`${xe.current.scrollHeight}px`,t||(xe.current.style.height=G||"48px"));const s=H||l.validateInput;if(!s||!l.isFunction(s))return;const[r,a]=s(t,E,z);re(!r),ce(d.errorMessage?d.errorMessage:a)},Ce=e=>{var t;d.skipFocus||oe(!0),je(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Oe=e=>{var t;d.skipFocus||oe(!1),je(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Te=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:J?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==he?void 0:he.input)&&void 0!==t?t:{},ref:xe,disabled:ne,type:["phonenumber","zip","number"].includes(E)?"number":E,value:ve,onFocus:e=>Ce(e),onBlur:e=>Oe(e),placeholder:y||"Enter here",onChange:ye,onClick:e=>je(d.onClick),onKeyDown:e=>me(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:ve,ref:xe,onFocus:e=>Ce(e),onBlur:e=>Oe(e),onClick:e=>je(d.onClick),disabled:ne,placeholder:y||"Enter here",onChange:ye,onKeyDown:e=>me(e),maxLength:I>0?I:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==he?void 0:he.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!ue)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!ue},{children:[!!ue&&e.jsx(o.default,{width:16,height:16}),ue||w]})),I>0&&"BOTTOM"===Q&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(p=null===(g=(null!=P?P:"").toString())||void 0===g?void 0:g.length)&&void 0!==p?p:0,"/",I]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||ae,isInvalid:se,style:null!==(j=null!==(x=null==he?void 0:he.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:U,hideBorder:Z},{children:[!!ie&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:de,onClick:()=>je(null==C?void 0:C.callback),isLeft:!0,style:null!==(f=null==he?void 0:he.IconHolder)&&void 0!==f?f:{}},{children:e.jsx(ie,{})})),!!M&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:M})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:V,autoGrow:W},{children:Te()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Te()})),!!le&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:de,onClick:()=>je(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(le,{})})),!!L&&e.jsx(c.SuffixHolder,Object.assign({variant:q},{children:L})),B&&B.text&&e.jsx(i.Button,{buttonText:B.text,onClick:()=>je(null==B?void 0:B.onClick)}),B&&B.buttonProps&&e.jsx(i.Button,Object.assign({},B.buttonProps))]})),!Y&&(!!T||!!I)&&e.jsxs(c.InputHeader,Object.assign({invalid:se},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[$?e.jsxs(r.TitleSmall,{children:[T,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[T,S?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(s.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:se?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),I>0&&"TOP"===Q&&e.jsxs(c.MaxCharStyle,{children:[null!==(b=null===(m=(null!=P?P:"").toString())||void 0===m?void 0:m.length)&&void 0!==b?b:0,"/",I]})]}))]}))}));d.displayName="Input",exports.Input=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),r=require("../tooltips/Tooltip.js"),l=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),a=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const x=n.forwardRef(((x,d)=>{var h,p,j,v,g,m,f,E;const{placeholder:b,leftIcon:R,rightIcon:y,labelText:C,maxCharLimit:O,isRequired:T,hintText:I,type:S,state:w,validate:k,variant:H,button:q,suffixText:B,prefixText:L,onChangeText:M,value:F,noErrorHint:P,reset:D,rangeValidation:z,noKeyDownChange:A,version:_,noMaxCharCheck:K,labelElement:N,autoGrow:W,minHeight:G,maxHeight:V,labelTextBold:$,truncateText:J,maxCharLimitPosition:Q,hightlightInputColor:U,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},x),ie=null==R?void 0:R.icon,se=null==y?void 0:y.icon,[re,le]=n.useState(!1),[oe,ae]=n.useState(!1),[ue,ce]=n.useState(),xe="x-small"===H?"12px":"small"===H?"18px":"22px",de=n.useContext(u.InputStyleContext),[he,pe]=n.useState(),je=n.useRef(null),ve=null!=d?d:je;n.useEffect((()=>{pe(F),!F&&W&&(ve.current.style.height=G||"48px")}),[F]),n.useEffect((()=>{var e;ve.current&&(null===(e=x.onReferenceInit)||void 0===e||e.call(x,ve.current))}),[ve]),n.useEffect((()=>{const e=ve.current;if(e&&["phonenumber","zip","number"].includes(S))return e.addEventListener("wheel",Ee,{passive:!1}),()=>{e.removeEventListener("wheel",Ee)}}),[]),n.useEffect((()=>{D&&pe("")}),[D]),n.useEffect((()=>{var e;ae(!!x.isActive),x.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[x.isActive]),n.useEffect((()=>{ce(x.errorMessage)}),[x.errorMessage]),n.useEffect((()=>{var e;le(!1),("invalid"===x.state||ue||"disabled-invalid"===x.state)&&le(!0),"active"===x.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[x.state,ue]),n.useEffect((()=>{le(!!ue||"invalid"===x.state)}),[ue,x.state]);const ge=function(e){if(s.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},me=()=>"zip"===S?6:2e3,fe=e=>{const t=0!==O?O:me(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||M(F||"",e),K||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ee=e=>{e.preventDefault()},be=e=>{let t=e.target.value;const n=0!==O?O+1:me(),i=te;if(!K&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),x.textControl||pe(t),i&&t&&t.length<i)return;M(t,e),W&&(ve.current.style.height=`${ve.current.scrollHeight}px`,t||(ve.current.style.height=G||"48px"));const r=k||s.validateInput;if(!r||!s.isFunction(r))return;const[l,o]=r(t,S,z);le(!l),ce(x.errorMessage?x.errorMessage:o)},Re=e=>{var t;x.skipFocus||ae(!0),ge(null===(t=x.onFocus)||void 0===t?void 0:t.call(x,e))},ye=e=>{var t;x.skipFocus||ae(!1),ge(null===(t=x.onBlur)||void 0===t?void 0:t.call(x,e))},Ce=()=>{var t;return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:["multiline"!==S&&e.jsxRuntimeExports.jsx("input",{className:J?"truncate-class":"","data-test":x["data-test"],id:x.id,style:null!==(t=null==de?void 0:de.input)&&void 0!==t?t:{},ref:ve,disabled:ne,type:["phonenumber","zip","number"].includes(S)?"number":S,value:he,onFocus:e=>Re(e),onBlur:e=>ye(e),placeholder:b||"Enter here",onChange:be,onClick:e=>ge(x.onClick),onKeyDown:e=>fe(e)}),"multiline"===S&&e.jsxRuntimeExports.jsx("textarea",{"data-test":x["data-test"],value:he,ref:ve,onFocus:e=>Re(e),onBlur:e=>ye(e),onClick:e=>ge(x.onClick),disabled:ne,placeholder:b||"Enter here",onChange:be,onKeyDown:e=>fe(e),maxLength:O>0?O:void 0})]})};return e.jsxRuntimeExports.jsxs(c.RootContainer,Object.assign({width:x.width,height:x.height,state:w,type:S,style:null!==(h=null==de?void 0:de.RootContainer)&&void 0!==h?h:{}},{children:[e.jsxRuntimeExports.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!P&&(!!I||!!ue)&&e.jsxRuntimeExports.jsxs(c.InputFooter,Object.assign({invalid:!!ue},{children:[!!ue&&e.jsxRuntimeExports.jsx(a.default,{width:16,height:16}),ue||I]})),O>0&&"BOTTOM"===Q&&e.jsxRuntimeExports.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(j=null===(p=(null!=F?F:"").toString())||void 0===p?void 0:p.length)&&void 0!==j?j:0,"/",O]}))]})),e.jsxRuntimeExports.jsxs(c.InputWrapper,Object.assign({variant:H,state:w,width:x.width,isActive:"active"===w||oe,isInvalid:re,style:null!==(g=null!==(v=null==de?void 0:de.InputWrapper)&&void 0!==v?v:ee)&&void 0!==g?g:{},version:_,height:x.height,hightlightInputColor:U,hideBorder:Z},{children:[!!ie&&e.jsxRuntimeExports.jsx(c.IconHolder,Object.assign({variant:H,iconSize:xe,onClick:()=>ge(null==R?void 0:R.callback),isLeft:!0,style:null!==(m=null==de?void 0:de.IconHolder)&&void 0!==m?m:{}},{children:e.jsxRuntimeExports.jsx(ie,{})})),!!L&&e.jsxRuntimeExports.jsx(c.PrefixHolder,Object.assign({variant:H},{children:L})),"default"===H&&e.jsxRuntimeExports.jsx(c.InputContainer,Object.assign({height:x.height,type:x.type,minHeight:G,maxHeight:V,autoGrow:W},{children:Ce()})),["x-small","small"].includes(H)&&e.jsxRuntimeExports.jsx(c.InputContainerSmall,Object.assign({height:x.height,type:x.type},{children:Ce()})),!!se&&e.jsxRuntimeExports.jsx(c.IconHolder,Object.assign({variant:H,iconSize:xe,onClick:()=>ge(null==y?void 0:y.callback),isLeft:!1},{children:e.jsxRuntimeExports.jsx(se,{})})),!!B&&e.jsxRuntimeExports.jsx(c.SuffixHolder,Object.assign({variant:H},{children:B})),q&&q.text&&e.jsxRuntimeExports.jsx(i.Button,{buttonText:q.text,onClick:()=>ge(null==q?void 0:q.onClick)}),q&&q.buttonProps&&e.jsxRuntimeExports.jsx(i.Button,Object.assign({},q.buttonProps))]})),!Y&&(!!C||!!O)&&e.jsxRuntimeExports.jsxs(c.InputHeader,Object.assign({invalid:re},{children:[N&&N,e.jsxRuntimeExports.jsxs("div",Object.assign({className:"label__container"},{children:[$?e.jsxRuntimeExports.jsxs(l.TitleSmall,{children:[C,T?e.jsxRuntimeExports.jsx("span",{children:"*"}):""]}):e.jsxRuntimeExports.jsxs(l.BodySecondary,{children:[C,T?e.jsxRuntimeExports.jsx("span",{children:"*"}):""]}),x.tooltipText&&e.jsxRuntimeExports.jsx(r.Tooltip,Object.assign({body:x.tooltipText,placement:"top"},{children:e.jsxRuntimeExports.jsx("span",{children:e.jsxRuntimeExports.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:re?o.COLORS.content.negative:o.COLORS.content.primary})})}))]})),O>0&&"TOP"===Q&&e.jsxRuntimeExports.jsxs(c.MaxCharStyle,{children:[null!==(E=null===(f=(null!=F?F:"").toString())||void 0===f?void 0:f.length)&&void 0!==E?E:0,"/",O]})]}))]}))}));x.displayName="Input",exports.Input=x;

package/dist/cjs/components/input/Input.styled.d.ts

@@ -2,7 +2,7 @@
 import { InputStateI, InputTypeI, InputVariant } from "./Input";
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
 }, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     invalid?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const RootContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;