@bikdotai/bik-component-library 0.1.2-analytics-chips-beta → 0.2.0-bik-layout-beta

package/dist/cjs/components/file-uploader/FileUploaderStyle.js

@@ -0,0 +1,166 @@
+"use strict";var e=require("styled-components"),i=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);r.default.div`
+	height: 100%;
+	width: 440px;
+	border: 1px dashed ${i.COLORS.stroke.primary};
+	border-radius: 4px;
+	gap: 24px;
+	align-items: cneter;
+	background-color: ${i.COLORS.surface.subdued};
+	.fileUploader {
+		display: flex;
+		flex-direction: column;
+		padding: 24px;
+		gap: 32px;
+		&__header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 8px;
+			&__icon {
+				cursor: default;
+				display: flex;
+				width: 80px;
+				height: 80px;
+				background-color: ${i.COLORS.background.base};
+				border-radius: 50%;
+				align-items: center;
+				justify-content: center;
+			}
+			&__title {
+				cursor: default;
+				display: flex;
+				width: calc(100% - 24px);
+				justify-content: center;
+				padding-top: 8px;
+			}
+			&__caption {
+				cursor: default;
+			}
+		}
+		&__body {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			&__divider {
+				display: flex;
+				.left {
+					border-top: 1px solid ${i.COLORS.stroke.primary};
+					flex-grow: 1;
+					margin-top: 8px;
+					margin-right: 8px;
+				}
+				.right {
+					border-top: 1px solid ${i.COLORS.stroke.primary};
+					flex-grow: 1;
+					margin-top: 8px;
+					margin-left: 8px;
+				}
+			}
+			&__upload {
+				display: flex;
+				flex-direction: row;
+				width: 100%;
+				height: 40px;
+				border: 1px solid ${i.COLORS.content.brand};
+				border-radius: 4px;
+				label {
+					width: 100%;
+					height: 100%;
+					cursor: pointer;
+					.file-uploader {
+						display: flex;
+						flex-direction: row;
+						width: 100%;
+						height: 100%;
+						align-items: center;
+						justify-content: center;
+						color: ${i.COLORS.content.brand};
+						gap: 10px;
+					}
+				}
+			}
+			&__cancel-button {
+				align-self: center;
+			}
+		}
+	}
+
+	.fileUploadError {
+		height: 36px;
+		width: 100%;
+		position: relative;
+	}
+`,r.default.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 440px;
+	border: 1px dashed ${i.COLORS.stroke.primary};
+	border-radius: 4px;
+	gap: 24px;
+	align-items: cneter;
+	background-color: ${i.COLORS.surface.subdued};
+	padding: 60px 16px;
+	.fileUploaded {
+		width: 100%;
+		&__header {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			align-items: center;
+			justify-content: center;
+			gap: 16px;
+			&__icon {
+				display: flex;
+				width: 80px;
+				height: 80px;
+				background-color: ${i.COLORS.background.positive.vibrant};
+				border-radius: 50%;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+		&__body {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			gap: 24px;
+			&__file-detail {
+				display: flex;
+				flex-direction: row;
+				height: 56px;
+				background-color: ${i.COLORS.surface.standard};
+				border: 1px solid ${i.COLORS.stroke.primary};
+				border-radius: 4px;
+				align-items: center;
+				padding: 16px;
+				gap: 12px;
+				&__icon {
+					display: flex;
+					width: fit-content;
+				}
+				&__name {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+				&__size {
+					display: flex;
+					margin-left: auto;
+					width: fit-content;
+				}
+			}
+			&__buttons {
+				display: flex;
+				flex-direction: row;
+				gap: 12px;
+				&__edit,
+				&__done {
+					display: flex;
+					flex: 1;
+				}
+			}
+		}
+	}
+`;

package/dist/cjs/components/file-uploader/Models.d.ts

@@ -0,0 +1,34 @@
+export interface FileMetaData {
+    fileId: string;
+    fileName: string;
+    fileSize: string;
+    fileType: string;
+    fileUrl: string;
+    uploadType: 'URL' | 'FileUpload';
+    uploadDate: Date;
+}
+export interface FileUploadRules {
+    allowedFormats: string;
+    allowedSize: {
+        [key: string]: number;
+    };
+}
+export interface FileUploaderInterface {
+    onFileUpload: (file: File, metaData: FileMetaData) => void;
+    fileUploadRules: FileUploadRules;
+    onError: (error: string) => void;
+}
+export interface FileMetaFromUrl {
+    type: string;
+    size: number;
+}
+export interface FileUploaderProps {
+    uploadFile?: (file: File, fileName: string) => Promise<string>;
+    getFileMetaFromUrl?: (url: string) => Promise<FileMetaFromUrl>;
+    fileUploadRules: FileUploadRules;
+    onError: (error: string) => void;
+    uploadProgress: number;
+    onCancel: () => void;
+    onSuccess: (file: File, fileMeta: FileMetaData) => void;
+    fileName?: string;
+}

package/dist/cjs/components/file-uploader/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUploader';

package/dist/cjs/components/file-uploader/useMockUrlUpload.d.ts

@@ -0,0 +1,8 @@
+import { FileMetaFromUrl } from "./Models";
+interface URLUploadOptions {
+    getFileMetaFromUrl: (url: string) => Promise<FileMetaFromUrl>;
+    error?: string;
+    success?: boolean;
+}
+declare const useMockUrlUpload: () => URLUploadOptions;
+export default useMockUrlUpload;

package/dist/cjs/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,6 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
-import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
+import { Placement } from '../tooltips';
 import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
@@ -13,9 +13,10 @@ export declare const FloatingActionButton: React.FC<{
     buttonPaddingHorizontal?: number;
     buttonPaddingVertical?: number;
     tooltipText?: string;
-    tooltipPlacement?: TooltipPlacement;
+    tooltipPlacement?: Placement;
     zIndex?: number;
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
+    tootipWidth?: number;
 }>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react"),i=require("react-bootstrap"),n=require("../../constants/Theme.js"),e=require("../tooltips/CustomisedTooltip.js"),r=require("../../assets/icons/question-mark.svg.js"),s=require("./FloatingActionButton.styles.js");const l=o=>{const{width:i,height:n,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u,isDropdownOpen:g}=o;return h?t.jsx(e.CustomisedTooltip,{isTooltipVisible:!g,tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})}))})};exports.FloatingActionButton=r=>{const{icon:c,onClick:d,children:a,tooltipText:h,isRound:u=!0,width:g=48,height:p=48,color:j=n.COLORS.background.inverse,position:x=s.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:O=20,buttonPaddingVertical:m=20,zIndex:T=1,tooltipPlacement:w=e.TooltipPlacement.Auto,dropPosition:P=s.DROP_POSITION.DOWN,menuAligment:C=s.MENU_ALIGNMENT.END}=r,[b,F]=o.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonOuterContainer,Object.assign({width:g,height:p,color:j,position:x,buttonPaddingHorizontal:O,buttonPaddingVertical:m,zIndex:T},{children:t.jsx(s.StyledDropdown,Object.assign({onToggle:(t,o)=>{F(t)},drop:P,align:C},{children:a?t.jsxs(t.Fragment,{children:[t.jsx(s.DropdownToggleContainer,Object.assign({drop:P},{children:t.jsx(l,{width:g,height:p,color:j,tooltipPlacement:w,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:b})})),t.jsx(i.Dropdown.Menu,{children:a})]}):t.jsx(l,{width:g,height:p,color:j,tooltipPlacement:w,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:b})}))}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react"),i=require("react-bootstrap"),n=require("../../constants/Theme.js"),e=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/question-mark.svg.js"),l=require("./FloatingActionButton.styles.js");const c=o=>{const{width:i,height:c,color:d,onClick:a,icon:h,tooltipPlacement:p,tooltipText:g,tootipWidth:u,isRound:j}=o;return g?t.jsx(e.Tooltip,Object.assign({tooltipContent:t.jsx(l.TooltipStyled,Object.assign({tooltipWidth:u},{children:t.jsx(r.BodyCaption,Object.assign({color:n.COLORS.content.primaryInverse},{children:o.tooltipText}))})),placement:p,body:""},{children:t.jsx(l.FloatingActionButtonContainer,Object.assign({width:i,height:c,color:d,onClick:a,isRound:j},{children:h||t.jsx(s.default,{width:22,height:22})}))})):t.jsx(t.Fragment,{children:t.jsx(l.FloatingActionButtonContainer,Object.assign({width:i,height:c,color:d,onClick:a,isRound:j},{children:h||t.jsx(s.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:r,onClick:s,children:d,tooltipText:a,isRound:h=!0,width:p=48,height:g=48,color:u=n.COLORS.background.inverse,position:j=l.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:O=20,zIndex:T=1,tooltipPlacement:b="right",dropPosition:m=l.DROP_POSITION.DOWN,menuAligment:w=l.MENU_ALIGNMENT.END,tootipWidth:C}=e,[P,y]=o.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(l.FloatingActionButtonOuterContainer,Object.assign({width:p,height:g,color:u,position:j,buttonPaddingHorizontal:x,buttonPaddingVertical:O,zIndex:T},{children:t.jsx(l.StyledDropdown,Object.assign({onToggle:(t,o)=>{y(t)},drop:m,align:w},{children:d?t.jsxs(t.Fragment,{children:[t.jsx(l.DropdownToggleContainer,Object.assign({drop:m},{children:t.jsx(c,{width:p,height:g,color:u,tooltipPlacement:b,onClick:s,tooltipText:a,icon:r,position:j,isRound:h,isDropdownOpen:P,tootipWidth:C})})),t.jsx(i.Dropdown.Menu,{children:d})]}):t.jsx(c,{width:p,height:g,color:u,tooltipPlacement:b,onClick:s,tooltipText:a,icon:r,position:j,isRound:h,isDropdownOpen:P,tootipWidth:C})}))}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.d.ts

@@ -21,7 +21,7 @@ export declare const FloatingActionButtonContainer: import("styled-components").
     width: number;
     height: number;
     color: string;
-    isRound: boolean;
+    isRound?: boolean | undefined;
 }, never>;
 export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
@@ -45,3 +45,6 @@ export declare const StyledDropdown: import("styled-components").StyledComponent
     height?: string | undefined;
 }, never>;
 export declare const DropdownToggleContainer: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>, any, {}, never>;
+export declare const TooltipStyled: import("styled-components").StyledComponent<"div", any, {
+    tooltipWidth?: number | undefined;
+}, never>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js

@@ -79,7 +79,7 @@
 		text-decoration: none;
 		background-color: ${e.COLORS.background.positive.light};
 	}
-`,O=p.default(t.Dropdown.Toggle)`
+`,c=p.default(t.Dropdown.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -89,4 +89,11 @@
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`;exports.DropdownToggleContainer=O,exports.FloatingActionButtonContainer=a,exports.FloatingActionButtonOuterContainer=s,exports.StyledDropdown=l;
+`,O=p.default.div`
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	border-radius: 4px;
+	padding: 8px;
+	background-color: ${e.COLORS.content.primary};
+	color: ${e.COLORS.content.primaryInverse};
+	width: ${t=>t.tooltipWidth?t.tooltipWidth+"px":"120px"};
+`;exports.DropdownToggleContainer=c,exports.FloatingActionButtonContainer=a,exports.FloatingActionButtonOuterContainer=s,exports.StyledDropdown=l,exports.TooltipStyled=O;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:r=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,i="";try{const a={maxSizeMB:r.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>1&&(e=yield t.default(r,a)),i=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:i,compressedFile:e}}))}),exports.ImageService=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"base64ToImage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const r=atob(e.split(",")[1]),t=e.split(",")[0].split(":")[1].split(";")[0],i=new ArrayBuffer(r.length),a=new Uint8Array(i);for(let e=0;e<r.length;e++)a[e]=r.charCodeAt(e);const o=new Blob([i],{type:t});return new File([o],"image",{type:t})}}),Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:(r,i)=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,a="";const o=i?i.maxSizeMB:r.size/1024/1024*.8;try{const i={maxSizeMB:o,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>.1&&(e=yield t.default(r,i)),a=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:a,compressedFile:e}}))}),exports.ImageService=i;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import 'react-image-crop/dist/ReactCrop.css';
+export interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void;
+    onCancel: () => void;
+}
+export declare const BikImageCropper: (props: BikImageCropperProps) => JSX.Element;
+export default BikImageCropper;

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

@@ -0,0 +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 l=r=>{const[a,l]=i.useState(!1),[c,d]=i.useState(void 0),[s,h]=i.useState({width:0,height:0}),u=(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",onClick:()=>{var t;t=c,e.__awaiter(void 0,void 0,void 0,(function*(){var e,i;if(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,l=yield u(i,t,o,n);null===(e=null==r?void 0:r.onCropComplete)||void 0===e||e.call(r,l,a)}else null===(i=null==r?void 0:r.onCropComplete)||void 0===i||i.call(r,r.src,a)}))}}},{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:c,onChange:e=>{d(e)},circularCrop:!1,onDragStart:()=>{l(!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=l,exports.default=l;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CompressImageOptions } from "../../image-compress";
+import { BikImageCropperProps } from "..";
+/**
+ * Todos
+ * 	- Add option to pass https url in the src / edit an image
+ */
+export interface BikImagePipelineProps {
+    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;
+    };
+}
+export declare const BikImagePipeline: ({ cropOptions, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, }: BikImagePipelineProps) => JSX.Element;

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

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

package/dist/cjs/components/image-cropper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BikImageCropper';
+export * from './BikImagePipeline/BikImagePipeline';

package/dist/cjs/components/image-cropper/useMockFileUpload.d.ts

@@ -0,0 +1,8 @@
+interface FileUploadOptions {
+    uploadProgress: number;
+    uploadFile: (file: File, path: string) => Promise<string>;
+    error?: string;
+    success?: boolean;
+}
+declare const useMockFileUpload: () => FileUploadOptions;
+export default useMockFileUpload;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const extractSingleValueIfAny: (nativeID: string) => string;
+export declare const getInputNode: (nativeID: string) => HTMLInputElement;
+export interface ChipInputProps {
+    onChipsChange: (chips: (string | number)[]) => void;
+    placeholder: string;
+    label?: string;
+    labelColor?: string;
+    hintText?: string;
+    hintTextColor?: string;
+    chipTheme?: () => void;
+    chips: string[];
+    error?: string;
+    inputHeight?: number;
+    createChipKeys?: (string | number)[];
+    chipsContainerCustomStyle?: React.CSSProperties;
+    nativeID?: string;
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

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

@@ -0,0 +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}))]}))};

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

@@ -0,0 +1,66 @@
+export declare const chipTheme: {
+    chip: {
+        padding: string;
+        background: string;
+        border: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        borderRadius: number;
+        alignItems: string;
+        alignContent: string;
+        justifyContent: string;
+        cursor: string;
+        margin: string;
+        fontFamily: string;
+    };
+    chipRemove: {
+        fontSize: number;
+        fontFamily: string;
+        cursor: string;
+        fontWeight: string;
+        color: string;
+        marginLeft: number;
+        ':hover': {
+            color: string;
+        };
+    };
+};
+export declare const theme: (error?: boolean, height?: number, chipsContainerCustomStyle?: Object, focused?: boolean) => {
+    chipsContainer: {
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        display: string;
+        position: string;
+        border: string;
+        backgroundColor: string;
+        alignItems: string;
+        flexWrap: string;
+        padding: string;
+        borderRadius: number;
+        ':hover': {
+            border: string;
+        };
+    };
+    container: {
+        flex: number;
+    };
+    containerOpen: {};
+    input: {
+        border: string;
+        outline: string;
+        boxSizing: string;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: number;
+        height: number;
+        width: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");const r={chip:{padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.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.COLORS.content.secondary,marginLeft:6,":hover":{color:e.COLORS.content.secondary}}};exports.chipTheme=r,exports.theme=(r,o,n,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.COLORS.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}});

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
 export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
 export interface InputProps {
+    noErrorHint?: boolean;
     placeholder?: string;
     variant?: InputVariant;
     width?: string;
@@ -34,9 +35,14 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
+    reset?: boolean;
     onBlur?: (e: any) => void;
     onFocus?: () => void;
     isActive?: boolean;
     id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const Input: {
+    (props: InputProps): JSX.Element;
+    displayName: 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("../TypographyStyle.js"),l=require("../../assets/icons/errorInfo.svg.js"),r=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=t.forwardRef(((o,u)=>{var c,d,v,x;const{placeholder:h,leftIcon:j,rightIcon:p,labelText:f,maxCharLimit:g,isRequired:y,hintText:I,type:b,state:C,validate:m,variant:S,button:O,suffixText:w,prefixText:q,onChangeText:T,value:k}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),B=null==j?void 0:j.icon,E=null==p?void 0:p.icon,[H,F]=t.useState(!1),[A,L]=t.useState(!1),[M,R]=t.useState(),D="small"===S?"18px":"22px",P=t.useContext(r.InputStyleContext);t.useEffect((()=>{L(!!o.isActive)}),[o.isActive]),t.useEffect((()=>{R(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{F(!1),("invalid"===o.state||M)&&F(!0)}),[o.state,M]),t.useEffect((()=>{F(!!M)}),[M]);const z=function(e){if(a(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)}},K=e=>{![8].includes(e.which)&&g>0&&e.target.value.length===g&&e.preventDefault()},W=e=>{const t=e.target.value;if(T(t,e),!m||!a(m))return;const[n,i]=m(t);F(!n),R(i)},_=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==b&&e.jsx("input",{id:o.id,style:null!==(t=null==P?void 0:P.input)&&void 0!==t?t:{},ref:u,type:b,value:k,onFocus:()=>(L(!0),void z(o.onFocus)),onBlur:e=>(e=>{var t;L(!1),z(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))})(e),placeholder:h||"Enter here",onChange:W,onKeyDown:e=>K(e)}),"multiline"===b&&e.jsx("textarea",{value:k,ref:u,onFocus:()=>L(!0),onBlur:()=>L(!1),placeholder:h||"Enter here",onChange:W,onKeyDown:e=>K(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:C,type:b,style:null!==(c=null==P?void 0:P.RootContainer)&&void 0!==c?c:{}},{children:[(!!I||!!M)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!M},{children:[!!M&&e.jsx(l.default,{}),M||I]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:C,width:o.width,isActive:"active"===C||A,isInvalid:H,style:null!==(d=null==P?void 0:P.InputWrapper)&&void 0!==d?d:{}},{children:[!!B&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:D,onClick:()=>z(null==j?void 0:j.callback),isLeft:!0,style:null!==(v=null==P?void 0:P.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(B,{})})),!!q&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:q})),"default"===S&&e.jsx(s.InputContainer,{children:_()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:_()}),!!E&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:D,onClick:()=>z(null==p?void 0:p.callback),isLeft:!1},{children:e.jsx(E,{})})),!!w&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:w})),O&&O.text&&e.jsx(n.Button,{buttonText:O.text,onClick:()=>z(null==O?void 0:O.onClick)})]})),(!!f||!!g)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:H},{children:[e.jsxs(i.BodySecondary,{children:[f,y?e.jsx("span",{children:"*"}):""]}),g>0&&e.jsxs(s.MaxCharStyle,{children:[null===(x=o.value)||void 0===x?void 0:x.length,"/",g]})]}))]}))}));o.displayName="Input",exports.Input=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=o=>{var u,c,d,v;const{placeholder:x,leftIcon:h,rightIcon:f,labelText:j,maxCharLimit:p,isRequired:g,hintText:y,type:I,state:b,validate:C,variant:S,button:m,suffixText:E,prefixText:O,onChangeText:w,value:q,noErrorHint:H,reset:T}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==h?void 0:h.icon,B=null==f?void 0:f.icon,[A,F]=t.useState(!1),[R,L]=t.useState(!1),[M,D]=t.useState(),P="small"===S?"18px":"22px",z=t.useContext(l.InputStyleContext),[K,W]=t.useState(),_=t.useRef();t.useEffect((()=>{W(q)}),[q]),t.useEffect((()=>{var e;_.current&&(null===(e=o.onReferenceInit)||void 0===e||e.call(o,_.current))}),[_]),t.useEffect((()=>{T&&W("")}),[T]),t.useEffect((()=>{var e;L(!!o.isActive),o.isActive&&(null===(e=_.current)||void 0===e||e.focus())}),[o.isActive]),t.useEffect((()=>{D(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{var e;F(!1),("invalid"===o.state||M)&&F(!0),"active"===o.state&&(null===(e=_.current)||void 0===e||e.focus())}),[o.state,M]),t.useEffect((()=>{F(!!M)}),[M]);const N=function(e){if(a(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)}},G=e=>{const t=p||125;w(q||"",e),![8].includes(e.which)&&t>0&&e.target.value.length===t&&e.preventDefault()},J=e=>{const t=e.target.value;if(w(t,e),W(t),!C||!a(C))return;const[n,i]=C(t);F(!n),D(i)},Q=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{id:o.id,style:null!==(t=null==z?void 0:z.input)&&void 0!==t?t:{},ref:_,type:I,value:K,onFocus:()=>(L(!0),void N(o.onFocus)),onBlur:e=>(e=>{var t;L(!1),N(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))})(e),placeholder:x||"Enter here",onChange:J,onKeyDown:e=>G(e)}),"multiline"===I&&e.jsx("textarea",{value:K,ref:_,onFocus:()=>L(!0),onBlur:()=>L(!1),placeholder:x||"Enter here",onChange:J,onKeyDown:e=>G(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:b,type:I,style:null!==(u=null==z?void 0:z.RootContainer)&&void 0!==u?u:{}},{children:[!H&&(!!y||!!M)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!M},{children:[!!M&&e.jsx(r.default,{width:16,height:16}),M||y]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:b,width:o.width,isActive:"active"===b||R,isInvalid:A,style:null!==(c=null==z?void 0:z.InputWrapper)&&void 0!==c?c:{}},{children:[!!k&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:P,onClick:()=>N(null==h?void 0:h.callback),isLeft:!0,style:null!==(d=null==z?void 0:z.IconHolder)&&void 0!==d?d:{}},{children:e.jsx(k,{})})),!!O&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:O})),"default"===S&&e.jsx(s.InputContainer,{children:Q()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:Q()}),!!B&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:P,onClick:()=>N(null==f?void 0:f.callback),isLeft:!1},{children:e.jsx(B,{})})),!!E&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:E})),m&&m.text&&e.jsx(n.Button,{buttonText:m.text,onClick:()=>N(null==m?void 0:m.onClick)})]})),(!!j||!!p)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:A},{children:[e.jsxs(i.BodySecondary,{children:[j,g?e.jsx("span",{children:"*"}):""]}),p>0&&e.jsxs(s.MaxCharStyle,{children:[null===(v=o.value)||void 0===v?void 0:v.length,"/",p]})]}))]}))};o.displayName="Input",exports.Input=o;