@bikdotai/bik-component-library 0.0.687-beta.4 → 0.0.687-beta.6

package/dist/esm/components/floating-input-dropdown/FloatingInputDropdown.js

@@ -1,5 +1,5 @@
-import{jsxs as e,Fragment as o,jsx as r}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as l}from"react";import{usePopper as i}from"react-popper";import s from"styled-components";import{DropShadow as p}from"../dropShadow/DropShadow.js";import{OpenDropdownContainer as a}from"../dropdown/Common.styled.js";import{OpenedDropdown as c}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{Floater as d}from"../floater/floater.js";import{Input as m}from"../input/Input.js";var u=Object.defineProperty,f=Object.defineProperties,v=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,h=(e,o,r)=>o in e?u(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,O=(e,o)=>{for(var r in o||(o={}))y.call(o,r)&&h(e,r,o[r]);if(b)for(var r of b(o))w.call(o,r)&&h(e,r,o[r]);return e},j=(e,o)=>f(e,v(o));const g=s(a)`
-	opacity: ${e=>{let{visible:o}=e;return o?1:0}};
-	visibility: ${e=>{let{visible:o}=e;return o?"visible":"hidden"}};
+import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{useRef as r,useState as n,useEffect as i}from"react";import{usePopper as s}from"react-popper";import l from"styled-components";import{DropShadow as p}from"../dropShadow/DropShadow.js";import{OpenDropdownContainer as d}from"../dropdown/Common.styled.js";import{OpenedDropdown as c}from"../dropdown/OpenedDropdown/components/OpennedDropdown.js";import{Floater as m}from"../floater/floater.js";import{Input as a}from"../input/Input.js";const f=l(d)`
+	opacity: ${({visible:e})=>e?1:0};
+	visibility: ${({visible:e})=>e?"visible":"hidden"};
 	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-`,P=s=>{let{inputProps:a,dropdownProps:u,floaterProps:f,children:v,isVisible:b,onDropdownOptionClick:y,onChangeText:w}=s;const h=t(null),P=t(null),[C,S]=n(!1),[D,x]=n(null),[k,z]=n(null),[I,R]=n(!1),{styles:T,attributes:E,update:M,forceUpdate:$}=i(k,D,{placement:u.placement,strategy:u.strategy,modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"preventOverflow",options:{padding:{top:0,bottom:10,left:0,right:0}}},{name:"flip",options:{fallbackPlacements:["bottom","top"]}}]});l((()=>{if(!C){const e=setTimeout((()=>R(!1)),200);return()=>clearTimeout(e)}R(!0),M&&M()}),[C,M]),l((()=>{if(h.current){const e=new ResizeObserver((()=>{M&&M()}));return e.observe(h.current),()=>{e.disconnect()}}}),[h.current,M]);return e(o,{children:[b&&e(d,j(O({},f),{refElement:P,children:[r("div",{style:{position:"relative"},ref:z,children:r(p,{level:"z2",position:"down",style:{borderRadius:8},children:r(m,j(O({},a),{onClick:()=>{var e;null==(e=u.onDropdownOpen)||e.call(u),C?S(!1):u.disabled||S(!0),null==$||$()},ref:h,onChangeText:(e,o)=>{null==w||w(e,o),M&&M()}}))})}),r(g,j(O({ref:x,style:j(O({},T.popper),{zIndex:3})},E.popper),{visible:C||I,children:r(p,{level:"z2",position:"down",style:{borderRadius:8},children:r(c,j(O({},u),{onSelect:e=>{var o;"2.0"===u.version&&u.isMultiSelect||(null==(o=u.onSelect)||o.call(u,e),S(!1))},onClose:e=>{var o,r;"2.0"===u.version&&u.isMultiSelect&&e&&(null==(o=u.onSelect)||o.call(u,[...e])),S(!1),null==(r=null==u?void 0:u.onClose)||r.call(u)},version:u.version,headerRef:h,onDropdownItemClick:e=>{null==y||y(e)}}))})}))]})),r("div",{ref:P,children:v&&r("div",{children:v})})]})};export{P as FloatingInputDropdown};
+`,u=({inputProps:l,dropdownProps:d,floaterProps:u,children:v,isVisible:b,onDropdownOptionClick:h,onChangeText:w})=>{const y=r(null),C=r(null),[S,g]=n(!1),[j,D]=n(null),[O,x]=n(null),[k,z]=n(!1),{styles:P,attributes:R,update:T,forceUpdate:I}=s(O,j,{placement:d.placement,strategy:d.strategy,modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"preventOverflow",options:{padding:{top:0,bottom:10,left:0,right:0}}},{name:"flip",options:{fallbackPlacements:["bottom","top"]}}]});i((()=>{if(!S){const e=setTimeout((()=>z(!1)),200);return()=>clearTimeout(e)}z(!0),T&&T()}),[S,T]),i((()=>{if(y.current){const e=new ResizeObserver((()=>{T&&T()}));return e.observe(y.current),()=>{e.disconnect()}}}),[y.current,T]);return e(o,{children:[b&&e(m,{...u,refElement:C,children:[t("div",{style:{position:"relative"},ref:x,children:t(p,{level:"z2",position:"down",style:{borderRadius:8},children:t(a,{...l,onClick:()=>{d.onDropdownOpen?.(),S?g(!1):d.disabled||g(!0),I?.()},ref:y,onChangeText:(e,o)=>{w?.(e,o),T&&T()}})})}),t(f,{ref:D,style:{...P.popper,zIndex:3},...R.popper,visible:S||k,children:t(p,{level:"z2",position:"down",style:{borderRadius:8},children:t(c,{...d,onSelect:e=>{"2.0"===d.version&&d.isMultiSelect||(d.onSelect?.(e),g(!1))},onClose:e=>{"2.0"===d.version&&d.isMultiSelect&&e&&d.onSelect?.([...e]),g(!1),d?.onClose?.()},version:d.version,headerRef:y,onDropdownItemClick:e=>{h?.(e)}})})})]}),t("div",{ref:C,children:v&&t("div",{children:v})})]})};export{u as FloatingInputDropdown};

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { IconButtonProps } from './model.js';
+
+declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton };

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import t,{forwardRef as o}from"react";import{Tooltip as r}from"../tooltips/Tooltip.js";import{IconButton as l}from"./IconButton.styled.js";import{getIconColor as i}from"./theme.js";var n=Object.defineProperty,d=Object.defineProperties,c=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,y=(e,t,o)=>t in e?n(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))a.call(t,o)&&y(e,o,t[o]);if(s)for(var o of s(t))p.call(t,o)&&y(e,o,t[o]);return e};const f=o(((o,n)=>{var y=o,{id:f,iconButtonType:u="default",Icon:m,height:h=20,width:v=20,bordered:O,disabled:j,isSelected:g,style:w,svgStyle:B,iconColor:I,disabledTooltip:S}=y,T=((e,t)=>{var o={};for(var r in e)a.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&s)for(var r of s(e))t.indexOf(r)<0&&p.call(e,r)&&(o[r]=e[r]);return o})(y,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const P=i(u,j,g),x=e(l,(k=b({id:f,ref:n,style:w,iconButtonType:u,bordered:O,disabled:j,isSelected:g},T),C={children:t.createElement(m,{height:h,width:v,color:I||P,style:b({display:"block"},null!=B?B:{})})},d(k,c(C))));var k,C;return j&&S?e(r,{body:S,children:e("span",{style:{display:"inline-block",cursor:"not-allowed"},children:x})}):x}));f.displayName="IconButton";export{f as IconButton};
+import{jsx as o}from"react/jsx-runtime";import t,{forwardRef as e}from"react";import{Tooltip as i}from"../tooltips/Tooltip.js";import{IconButton as l}from"./IconButton.styled.js";import{getIconColor as r}from"./theme.js";const d=e((({id:e,iconButtonType:d="default",Icon:n,height:s=20,width:c=20,bordered:p,disabled:a,isSelected:m,style:y,svgStyle:h,iconColor:u,disabledTooltip:b,...f},B)=>{const j=r(d,a,m),I=o(l,{id:e,ref:B,style:y,iconButtonType:d,bordered:p,disabled:a,isSelected:m,...f,children:t.createElement(n,{height:s,width:c,color:u||j,style:{display:"block",...h??{}}})});return a&&b?o(i,{body:b,children:o("span",{style:{display:"inline-block",cursor:"not-allowed"},children:I})}):I}));d.displayName="IconButton";export{d as IconButton};

package/dist/esm/components/icon-button/model.d.ts

@@ -0,0 +1,45 @@
+type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Icon to render
+     */
+    Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * Custom styles which can be added to the icon button
+     * @default default undefined
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom styles which can be added to the svg
+     * @default default undefined
+     */
+    svgStyle?: React.CSSProperties;
+    /**
+     * Custom height for the svg icon
+     * @default default 20
+     */
+    height?: number;
+    /**
+     * Custom width for the svg icon
+     * @default default 20
+     */
+    width?: number;
+    /**
+     * Custom height for the svg icon
+     * @default default default
+     */
+    iconButtonType?: IconButtonType;
+    /**
+     * Add border to the button
+     * @default default false
+     */
+    bordered?: boolean;
+    /**
+     * Flag to check if icon button is selected/clicked
+     */
+    isSelected?: boolean;
+    iconColor?: string;
+    disabledTooltip?: string;
+}
+
+export type { IconButtonProps, IconButtonType };

package/dist/esm/components/image-compress/ImageCompress.d.ts

@@ -0,0 +1,14 @@
+interface CompressImageOptions {
+    maxSizeMB?: number;
+}
+interface CompressImageReturnType {
+    base64: string;
+    compressedFile: File;
+}
+declare class ImageService {
+    static base64ToImage: (base64String: string) => File;
+    static compressImage: (file: File, options?: CompressImageOptions) => Promise<CompressImageReturnType>;
+}
+
+export { ImageService };
+export type { CompressImageOptions, CompressImageReturnType };

package/dist/esm/components/image-compress/ImageCompress.js

@@ -1 +1 @@
-import e from"browser-image-compression";var r=Object.defineProperty,t=(e,t,o)=>((e,t,o)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o)(e,"symbol"!=typeof t?t+"":t,o);const o=class{};t(o,"base64ToImage",(e=>{const r=atob(e.split(",")[1]),t=e.split(",")[0].split(":")[1].split(";")[0],o=new ArrayBuffer(r.length),l=new Uint8Array(o);for(let e=0;e<r.length;e++)l[e]=r.charCodeAt(e);const n=new Blob([o],{type:t});return new File([n],"image",{type:t})})),t(o,"compressImage",((r,t)=>{return o=null,l=null,n=function*(){let o=r,l="";const n=t?t.maxSizeMB:r.size/1024/1024*.8;try{const t={maxSizeMB:n,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>.1&&(o=yield e(r,t)),l=yield e.getDataUrlFromFile(o)}catch(e){console.error(e)}return{base64:l,compressedFile:o}},new Promise(((e,r)=>{var t=e=>{try{s(n.next(e))}catch(e){r(e)}},a=e=>{try{s(n.throw(e))}catch(e){r(e)}},s=r=>r.done?e(r.value):Promise.resolve(r.value).then(t,a);s((n=n.apply(o,l)).next())}));var o,l,n}));let l=o;export{l as ImageService};
+import e from"browser-image-compression";var r=Object.defineProperty,t=(e,t,a)=>((e,t,a)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a)(e,"symbol"!=typeof t?t+"":t,a);class a{}t(a,"base64ToImage",(e=>{const r=atob(e.split(",")[1]),t=e.split(",")[0].split(":")[1].split(";")[0],a=new ArrayBuffer(r.length),o=new Uint8Array(a);for(let e=0;e<r.length;e++)o[e]=r.charCodeAt(e);const s=new Blob([a],{type:t});return new File([s],"image",{type:t})})),t(a,"compressImage",(async(r,t)=>{let a=r,o="";const s=t?t.maxSizeMB:r.size/1024/1024*.8;try{const t={maxSizeMB:s,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>.1&&(a=await e(r,t)),o=await e.getDataUrlFromFile(a)}catch(e){console.error(e)}return{base64:o,compressedFile:a}}));export{a as ImageService};

package/dist/esm/components/image-cropper/BikImageCropper.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
+    onCancel: () => void;
+}
+declare const BikImageCropper: (props: BikImageCropperProps) => react_jsx_runtime.JSX.Element;
+
+export { BikImageCropper, BikImageCropper as default };
+export type { BikImageCropperProps };

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

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

package/dist/esm/components/image-cropper/BikImagePipeline/BikImagePipeline.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CompressImageOptions } from '../../image-compress/ImageCompress.js';
+import { BikImageCropperProps } from '../BikImageCropper.js';
+
+/**
+ * Todos
+ * 	- Add option to pass https url in the src / edit an image
+ */
+interface BikImagePipelineProps {
+    fileTitle?: string;
+    cropOptions?: Partial<BikImageCropperProps>;
+    compressionOptions?: CompressImageOptions;
+    currentImage: {
+        src?: string;
+    };
+    options: {
+        upload: boolean;
+        crop?: boolean;
+        compress?: boolean;
+        uploadToFirestorage?: boolean;
+    };
+    onCancel: () => void;
+    onFinish: (base64String: string, file?: File, url?: string) => void;
+    fileUploadOptions?: {
+        path: string;
+        uploadProgress: number;
+        uploadFile: (file: File, path: string) => Promise<string>;
+        error?: string;
+        success?: boolean;
+    };
+    loadingStateOptions?: {
+        headerImage?: string;
+    };
+}
+declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, loadingStateOptions, }: BikImagePipelineProps) => react_jsx_runtime.JSX.Element;
+
+export { BikImagePipeline };
+export type { BikImagePipelineProps };

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

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

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

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

package/dist/esm/components/input/ChipInput.styled.js

@@ -1 +1 @@
-import{COLORS as e}from"../../constants/Theme.js";var r=Object.defineProperty,o=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable,i=(e,o,n)=>o in e?r(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,a=(e,r)=>{for(var a in r||(r={}))n.call(r,a)&&i(e,a,r[a]);if(o)for(var a of o(r))t.call(r,a)&&i(e,a,r[a]);return e};const p={chip:{padding:"0px 8px 0px 8px",background:e.surface.subdued,border:`1px solid ${e.stroke.primary}`,fontSize:12,color:e.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.content.secondary,marginLeft:6,":hover":{color:e.content.secondary}}},d=(r,o,n,t)=>({chipsContainer:a({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.stroke.brand:r?e.stroke.negative.vibrant:e.stroke.primary}`,backgroundColor:e.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.stroke.brand}`}},null!=n?n:{}),container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});export{p as chipTheme,d as theme};
+import{COLORS as e}from"../../constants/Theme.js";const o={chip:{padding:"0px 8px 0px 8px",background:e.surface.subdued,border:`1px solid ${e.stroke.primary}`,fontSize:12,color:e.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.content.secondary,marginLeft:6,":hover":{color:e.content.secondary}}},n=(o,n,r,t)=>({chipsContainer:{display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.stroke.brand:o?e.stroke.negative.vibrant:e.stroke.primary}`,backgroundColor:e.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.stroke.brand}`},...r??{}},container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:n||32,width:"100%",paddingTop:0,paddingBottom:0}});export{o as chipTheme,n as theme};

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

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

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

@@ -0,0 +1,76 @@
+import React__default from 'react';
+import { ButtonProps } from '../button/model.js';
+
+type InputVariant = 'default' | 'small' | 'x-small';
+type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+interface InputProps {
+    'data-test'?: string;
+    noErrorHint?: boolean;
+    placeholder?: string;
+    variant?: InputVariant;
+    width?: string;
+    height?: string;
+    leftIcon?: {
+        icon: React__default.FC;
+        callback?: () => void;
+    };
+    rightIcon?: {
+        icon: React__default.FC;
+        callback?: () => void;
+    };
+    labelElement?: React__default.ReactNode;
+    labelText?: string;
+    maxCharLimit?: number;
+    isRequired?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    state?: InputStateI;
+    type?: InputTypeI;
+    /**
+        validate:  function takes the input and returns boolean + string (error message in case of invalid input)
+     **/
+    validate?: (input?: string | number) => [boolean, string];
+    onChangeText: (input: string, event?: Event) => void;
+    button?: {
+        text: string;
+        onClick?: () => void;
+        buttonProps?: ButtonProps;
+    };
+    suffixText?: string;
+    prefixText?: string;
+    value?: string;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
+    tooltipText?: string;
+    autoGrow?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
+    hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
+    hideInputHeader?: boolean;
+    hideBorder?: boolean;
+    inputWrapperStyles?: React__default.CSSProperties;
+    minCharsToTrigger?: number;
+}
+declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+
+export { Input };
+export type { InputProps, InputStateI, InputTypeI, InputVariant };

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

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