@bikdotai/bik-component-library 0.0.484-beta.0 → 0.0.484

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"),s=require("../../states/StateComponent.js");require("../../../_virtual/_tslib.js");var t=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=({cropOptions:i,fileTitle:l,compressionOptions:n,currentImage:p,options:c,onFinish:u,onCancel:d,fileUploadOptions:m})=>{const g=o.useRef(null),[h,j]=o.useState(),[C,f]=o.useState(p),[v,x]=o.useState(!1);o.useEffect((()=>{c.upload?(j("upload"),setTimeout((()=>{F()}),500)):c.crop?j("crop"):c.compress?j("compress"):c.uploadToFirestorage?j("cloud-upload"):x(!0)}),[c.upload,c.crop,c.compress,c.uploadToFirestorage]);const I=o.useCallback(((e,o)=>{if(!c.uploadToFirestorage)return u(e,o),void x(!0);j("cloud-upload"),m&&m.uploadFile(o,m.path).then((r=>{u(e,o,r),x(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),S=e=>{e||d();const o=r.ImageService.base64ToImage(e);c.compress?(j("compress"),r.ImageService.compressImage(o,n).then((e=>{if(!e)return x(!0),void d();I(e.base64,e.compressedFile)}))):I(e,o)},F=()=>{g.current.click()};return v?e.jsx(e.Fragment,{}):"cloud-upload"===h?!m||m.success?e.jsx(e.Fragment,{}):m.error?e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{x(!0),d()}})}):e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.StateInterface.LOADING,heading:`Uploading your ${l||"photo"}`,subline:`Please wait while we upload your ${l||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxs(e.Fragment,{children:[c.upload&&e.jsx("input",{ref:g,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],r=new FileReader;r.onload=()=>{var e;f({src:r.result}),e=r.result,c.crop?j("crop"):S(e)},o&&r.readAsDataURL(o)}}),"crop"===h&&e.jsx(a.BikImageCropper,{src:C.src,onCropComplete:e=>{f({src:e}),S(e)},aspectRatio:i.aspectRatio,onCancel:d})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),r=require("../../image-compress/ImageCompress.js"),s=require("../../states/StateComponent.js");require("../../../_virtual/_tslib.js");var t=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}=i;const h=o.useRef(null),[j,C]=o.useState(),[f,v]=o.useState(c),[x,I]=o.useState(!1);o.useEffect((()=>{u.upload?(C("upload"),setTimeout((()=>{b()}),500)):u.crop?C("crop"):u.compress?C("compress"):u.uploadToFirestorage?C("cloud-upload"):I(!0)}),[u.upload,u.crop,u.compress,u.uploadToFirestorage]);const S=o.useCallback(((e,o)=>{if(!u.uploadToFirestorage)return d(e,o),void I(!0);C("cloud-upload"),g&&g.uploadFile(o,g.path).then((r=>{d(e,o,r),I(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),F=e=>{e||m();const o=r.ImageService.base64ToImage(e);u.compress?(C("compress"),r.ImageService.compressImage(o,p).then((e=>{if(!e)return I(!0),void m();S(e.base64,e.compressedFile)}))):S(e,o)},b=()=>{h.current.click()};return x?e.jsx(e.Fragment,{}):"cloud-upload"===j?!g||g.success?e.jsx(e.Fragment,{}):g.error?e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{I(!0),m()}})}):e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.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:h,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?C("crop"):F(e)},o&&r.readAsDataURL(o)}}),"crop"===j&&e.jsx(a.BikImageCropper,{src:f.src,onCropComplete:e=>{v({src:e}),F(e)},aspectRatio:l.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 s=c(r);exports.default=({onChipsChange:r,placeholder:c,chips:l,label:a,labelColor:u,hintText:d,hintTextColor:h,error:p,inputHeight:y,createChipKeys:C,chipsContainerCustomStyle:O,nativeID:j})=>{const[v,f]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${j} input`))||void 0===e||e.addEventListener("focus",(()=>{f(!0)})),null===(t=document.querySelector(`#${j} input`))||void 0===t||t.addEventListener("blur",(()=>{f(!1)}))}),[]),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:j},{children:[a&&e.jsx(i.BodySecondary,Object.assign({style:{color:v?n.COLORS.content.brand:p?n.COLORS.content.negative:u||n.COLORS.content.primary}},{children:a})),e.jsx(s.default,{value:l,theme:o.theme(!!p,y,O,v),chipTheme:o.chipTheme,placeholder:0===l.length&&!!c&&!v&&c,onChange:e=>{r(e)},createChipKeys:C||","}),(!!d||!!p)&&e.jsx(i.BodyCaption,Object.assign({style:{color:p?n.COLORS.content.negative:h||n.COLORS.content.secondary}},{children:p||d}))]}))};
+"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}))]}))};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("phone");exports.isFunction=e=>e&&"function"==typeof e,exports.validateInput=(n,r,t={})=>{let i;const a=["phonenumber","zip","number"].includes(r),u=a?n?Number(n):null:n;if(null==u||""===u)return[!0,""];if(a&&String(u).length&&(t.min&&u<t.min||t.max&&u>t.max))return[!1,`Enter valid number between ${t.min} and ${t.max}`];if("email"===r)return i=/(.+)@(.+){2,}\.(.+){2,}/,u.match(i)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return i=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,u.match(i)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return u>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(u).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(u));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==u?void 0:u.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("phone");exports.isFunction=e=>e&&"function"==typeof e,exports.validateInput=function(n,r){let t,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(r),u=a?n?Number(n):null:n;if(null==u||""===u)return[!0,""];if(a&&String(u).length&&(i.min&&u<i.min||i.max&&u>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,u.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,u.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return u>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(u).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(u));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==u?void 0:u.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};

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

@@ -53,6 +53,7 @@ export interface InputProps {
     version?: '1.0' | '2.0';
     textControl?: boolean;
     noMaxCharCheck?: boolean;
+    tooltipText?: string;
     autoGrow?: boolean;
     minHeight?: string;
     maxHeight?: string;

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("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),l=require("../../assets/icons/errorInfo.svg.js"),s=require("./context/InputStyleProvider.js"),a=require("./Input.styled.js");const o=t.forwardRef(((o,u)=>{var c,d,h,v,p;const{placeholder:x,leftIcon:g,rightIcon:f,labelText:j,maxCharLimit:y,isRequired:b,hintText:m,type:C,state:I,validate:w,variant:E,button:k,suffixText:S,prefixText:H,onChangeText:O,value:q,noErrorHint:F,reset:L,rangeValidation:M,noKeyDownChange:T,version:B,noMaxCharCheck:R,labelElement:z,autoGrow:D,minHeight:A,maxHeight:K}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),P=null==g?void 0:g.icon,G=null==f?void 0:f.icon,[W,_]=t.useState(!1),[N,V]=t.useState(!1),[$,J]=t.useState(),Q="small"===E?"18px":"22px",U=t.useContext(s.InputStyleContext),[X,Y]=t.useState(),Z=t.useRef(null),ee=null!=u?u:Z;t.useEffect((()=>{Y(q),!q&&D&&(ee.current.style.height=A||"48px")}),[q]),t.useEffect((()=>{var e;ee.current&&(null===(e=o.onReferenceInit)||void 0===e||e.call(o,ee.current))}),[ee]),t.useEffect((()=>{const e=ee.current;if(e&&["phonenumber","zip","number"].includes(C))return e.addEventListener("wheel",re,{passive:!1}),()=>{e.removeEventListener("wheel",re)}}),[]),t.useEffect((()=>{L&&Y("")}),[L]),t.useEffect((()=>{var e;V(!!o.isActive),o.isActive&&(null===(e=ee.current)||void 0===e||e.focus())}),[o.isActive]),t.useEffect((()=>{J(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{var e;_(!1),("invalid"===o.state||$||"disabled-invalid"===o.state)&&_(!0),"active"===o.state&&(null===(e=ee.current)||void 0===e||e.focus())}),[o.state,$]),t.useEffect((()=>{_(!!$)}),[$]);const te=(e,...t)=>{i.isFunction(e)&&e(...t)},ne=()=>"zip"===C?6:60,ie=e=>{const t=0!==y?y:ne();if(T||O(q||"",e),R)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},re=e=>{e.preventDefault()},le=e=>{let t=e.target.value;const n=0!==y?y+1:ne();!R&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),O(t,e),o.textControl||Y(t),D&&(ee.current.style.height=`${ee.current.scrollHeight}px`,t||(ee.current.style.height=A||"48px"));const r=w||i.validateInput;if(!r||!i.isFunction(r))return;const[l,s]=r(t,C,M);_(!l),J(o.errorMessage?o.errorMessage:s)},se=e=>{var t;o.skipFocus||V(!0),te(null===(t=o.onFocus)||void 0===t?void 0:t.call(o,e))},ae=e=>{var t;o.skipFocus||V(!1),te(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))},oe=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==C&&e.jsx("input",{"data-test":o["data-test"],id:o.id,style:null!==(t=null==U?void 0:U.input)&&void 0!==t?t:{},ref:ee,type:["phonenumber","zip","number"].includes(C)?"number":C,value:X,onFocus:e=>se(e),onBlur:e=>ae(e),placeholder:x||"Enter here",onChange:le,onClick:e=>te(o.onClick),onKeyDown:e=>ie(e)}),"multiline"===C&&e.jsx("textarea",{"data-test":o["data-test"],value:X,ref:ee,onFocus:e=>se(e),onBlur:e=>ae(e),onClick:e=>te(o.onClick),placeholder:x||"Enter here",onChange:le,onKeyDown:e=>ie(e),maxLength:y>0?y:void 0})]})};return e.jsxs(a.RootContainer,Object.assign({width:o.width,height:o.height,state:I,type:C,style:null!==(c=null==U?void 0:U.RootContainer)&&void 0!==c?c:{}},{children:[!F&&(!!m||!!$)&&e.jsxs(a.InputFooter,Object.assign({invalid:!!$},{children:[!!$&&e.jsx(l.default,{width:16,height:16}),$||m]})),e.jsxs(a.InputWrapper,Object.assign({variant:E,state:I,width:o.width,isActive:"active"===I||N,isInvalid:W,style:null!==(d=null==U?void 0:U.InputWrapper)&&void 0!==d?d:{},version:B,height:o.height},{children:[!!P&&e.jsx(a.IconHolder,Object.assign({variant:E,iconSize:Q,onClick:()=>te(null==g?void 0:g.callback),isLeft:!0,style:null!==(h=null==U?void 0:U.IconHolder)&&void 0!==h?h:{}},{children:e.jsx(P,{})})),!!H&&e.jsx(a.PrefixHolder,Object.assign({variant:E},{children:H})),"default"===E&&e.jsx(a.InputContainer,Object.assign({height:o.height,type:o.type,minHeight:A,maxHeight:K,autoGrow:D},{children:oe()})),"small"===E&&e.jsx(a.InputContainerSmall,Object.assign({height:o.height,type:o.type},{children:oe()})),!!G&&e.jsx(a.IconHolder,Object.assign({variant:E,iconSize:Q,onClick:()=>te(null==f?void 0:f.callback),isLeft:!1},{children:e.jsx(G,{})})),!!S&&e.jsx(a.SuffixHolder,Object.assign({variant:E},{children:S})),k&&k.text&&e.jsx(n.Button,{buttonText:k.text,onClick:()=>te(null==k?void 0:k.onClick)})]})),(!!j||!!y)&&e.jsxs(a.InputHeader,Object.assign({invalid:W},{children:[z&&z,e.jsxs(r.BodySecondary,{children:[j,b?e.jsx("span",{children:"*"}):""]}),y>0&&e.jsxs(a.MaxCharStyle,{children:[null!==(p=null===(v=o.value)||void 0===v?void 0:v.length)&&void 0!==p?p:0,"/",y]})]}))]}))}));o.displayName="Input",exports.Input=o;
+"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"),r=require("./Input-helper.js"),s=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 d=n.forwardRef(((d,h)=>{var v,p,x,g,f;const{placeholder:j,leftIcon:y,rightIcon:b,labelText:m,maxCharLimit:C,isRequired:I,hintText:O,type:w,state:S,validate:E,variant:k,button:T,suffixText:q,prefixText:H,onChangeText:F,value:L,noErrorHint:R,reset:M,rangeValidation:B,noKeyDownChange:z,version:A,noMaxCharCheck:D,labelElement:_,autoGrow:K,minHeight:P,maxHeight:G}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},d),N=null==y?void 0:y.icon,W=null==b?void 0:b.icon,[V,$]=n.useState(!1),[J,Q]=n.useState(!1),[U,X]=n.useState(),Y="small"===k?"18px":"22px",Z=n.useContext(u.InputStyleContext),[ee,te]=n.useState(),ne=n.useRef(null),ie=null!=h?h:ne;n.useEffect((()=>{te(L),!L&&K&&(ie.current.style.height=P||"48px")}),[L]),n.useEffect((()=>{var e;ie.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,ie.current))}),[ie]),n.useEffect((()=>{const e=ie.current;if(e&&["phonenumber","zip","number"].includes(w))return e.addEventListener("wheel",oe,{passive:!1}),()=>{e.removeEventListener("wheel",oe)}}),[]),n.useEffect((()=>{M&&te("")}),[M]),n.useEffect((()=>{var e;Q(!!d.isActive),d.isActive&&(null===(e=ie.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{X(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;$(!1),("invalid"===d.state||U||"disabled-invalid"===d.state)&&$(!0),"active"===d.state&&(null===(e=ie.current)||void 0===e||e.focus())}),[d.state,U]),n.useEffect((()=>{$(!!U)}),[U]);const re=function(e){if(r.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)}},se=()=>"zip"===w?6:60,le=e=>{const t=0!==C?C:se();if(z||F(L||"",e),D)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},oe=e=>{e.preventDefault()},ae=e=>{let t=e.target.value;const n=0!==C?C+1:se();!D&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),F(t,e),d.textControl||te(t),K&&(ie.current.style.height=`${ie.current.scrollHeight}px`,t||(ie.current.style.height=P||"48px"));const i=E||r.validateInput;if(!i||!r.isFunction(i))return;const[s,l]=i(t,w,B);$(!s),X(d.errorMessage?d.errorMessage:l)},ue=e=>{var t;d.skipFocus||Q(!0),re(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},ce=e=>{var t;d.skipFocus||Q(!1),re(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},de=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==w&&e.jsx("input",{"data-test":d["data-test"],id:d.id,style:null!==(t=null==Z?void 0:Z.input)&&void 0!==t?t:{},ref:ie,type:["phonenumber","zip","number"].includes(w)?"number":w,value:ee,onFocus:e=>ue(e),onBlur:e=>ce(e),placeholder:j||"Enter here",onChange:ae,onClick:e=>re(d.onClick),onKeyDown:e=>le(e)}),"multiline"===w&&e.jsx("textarea",{"data-test":d["data-test"],value:ee,ref:ie,onFocus:e=>ue(e),onBlur:e=>ce(e),onClick:e=>re(d.onClick),placeholder:j||"Enter here",onChange:ae,onKeyDown:e=>le(e),maxLength:C>0?C:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:S,type:w,style:null!==(v=null==Z?void 0:Z.RootContainer)&&void 0!==v?v:{}},{children:[!R&&(!!O||!!U)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!U},{children:[!!U&&e.jsx(a.default,{width:16,height:16}),U||O]})),e.jsxs(c.InputWrapper,Object.assign({variant:k,state:S,width:d.width,isActive:"active"===S||J,isInvalid:V,style:null!==(p=null==Z?void 0:Z.InputWrapper)&&void 0!==p?p:{},version:A,height:d.height},{children:[!!N&&e.jsx(c.IconHolder,Object.assign({variant:k,iconSize:Y,onClick:()=>re(null==y?void 0:y.callback),isLeft:!0,style:null!==(x=null==Z?void 0:Z.IconHolder)&&void 0!==x?x:{}},{children:e.jsx(N,{})})),!!H&&e.jsx(c.PrefixHolder,Object.assign({variant:k},{children:H})),"default"===k&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:P,maxHeight:G,autoGrow:K},{children:de()})),"small"===k&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:de()})),!!W&&e.jsx(c.IconHolder,Object.assign({variant:k,iconSize:Y,onClick:()=>re(null==b?void 0:b.callback),isLeft:!1},{children:e.jsx(W,{})})),!!q&&e.jsx(c.SuffixHolder,Object.assign({variant:k},{children:q})),T&&T.text&&e.jsx(i.Button,{buttonText:T.text,onClick:()=>re(null==T?void 0:T.onClick)})]})),(!!m||!!C)&&e.jsxs(c.InputHeader,Object.assign({invalid:V},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[e.jsxs(l.BodySecondary,{children:[m,I?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:V?o.COLORS.content.negative:o.COLORS.content.primary})})}))]})),C>0&&e.jsxs(c.MaxCharStyle,{children:[null!==(f=null===(g=d.value)||void 0===g?void 0:g.length)&&void 0!==f?f:0,"/",C]})]}))]}))}));d.displayName="Input",exports.Input=d;

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;
@@ -14,15 +14,21 @@ 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;
     variant?: InputVariant | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputContainer: import("@emotion/styled").StyledComponent<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -32,9 +38,15 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<i
     minHeight?: string | undefined;
     maxHeight?: string | undefined;
 }, {}, {}>;
-export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
+export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -43,19 +55,31 @@ 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>, {}>;
-export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
+export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const InputFooter: import("@emotion/styled").StyledComponent<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
+export declare const InputFooter: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
@@ -63,24 +87,36 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<impo
 }, {}, {}>;
 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;
     state?: InputStateI | undefined;
     type: InputTypeI;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PrefixHolder: import("@emotion/styled").StyledComponent<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
+export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     variant?: InputVariant | undefined;
 }, {}, {}>;
-export declare const SuffixHolder: import("@emotion/styled").StyledComponent<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
+export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {