@bikdotai/bik-component-library 0.0.63 → 0.0.64-0.beta.help-attr-2

package/dist/esm/components/file-uploader/FileUploaderStyle.d.ts

@@ -0,0 +1,7 @@
+export declare const FileUploaderStyle: import("styled-components").StyledComponent<"div", any, {
+    showProgressBar: boolean;
+    width?: string | undefined;
+}, never>;
+export declare const FileUploadedStyle: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;

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

@@ -0,0 +1,166 @@
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const r=e.div`
+	height: 100%;
+	width: 440px;
+	border: 1px dashed ${i.stroke.primary};
+	border-radius: 4px;
+	gap: 24px;
+	align-items: cneter;
+	background-color: ${i.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.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.stroke.primary};
+					flex-grow: 1;
+					margin-top: 8px;
+					margin-right: 8px;
+				}
+				.right {
+					border-top: 1px solid ${i.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.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.content.brand};
+						gap: 10px;
+					}
+				}
+			}
+			&__cancel-button {
+				align-self: center;
+			}
+		}
+	}
+
+	.fileUploadError {
+		height: 36px;
+		width: 100%;
+		position: relative;
+	}
+`,t=e.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 440px;
+	border: 1px dashed ${i.stroke.primary};
+	border-radius: 4px;
+	gap: 24px;
+	align-items: cneter;
+	background-color: ${i.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.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.surface.standard};
+				border: 1px solid ${i.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;
+				}
+			}
+		}
+	}
+`;export{t as FileUploadedStyle,r as FileUploaderStyle};

package/dist/esm/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/esm/components/file-uploader/index.d.ts

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

package/dist/esm/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/esm/components/floater/floater.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type FloaterProps = {
+    children?: React.ReactNode;
+    refElement: React.MutableRefObject<any>;
+    leftOffset?: number;
+    topOffset?: number;
+    useDefaultOffsets?: boolean;
+};
+export declare const Floater: (props: FloaterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/floater/floater.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{useRef as e,useState as n,useEffect as f}from"react";const i=i=>{const o=e(null),[r,s]=n(0),[l,d]=n(0),[c,u]=n(!1);return f((()=>{if(i.refElement.current){const t=i.refElement.current.getBoundingClientRect();(t=>{if(i.useDefaultOffsets)return void d(t.left);let e=0;e=i.leftOffset?t.left+i.leftOffset:t.left+t.width+30;const n=null==o?void 0:o.current;n?(e>window.innerWidth-n.offsetWidth&&(e=window.innerWidth-n.offsetWidth-50),d(e)):d(e)})(t),(t=>{if(i.useDefaultOffsets)return void s(t.top);let e=t.top;i.topOffset&&(e=t.top+i.topOffset);const n=null==o?void 0:o.current;if(!n)return void s(e);const f=window.innerHeight;t.top+n.offsetHeight>f&&(e=t.top-(t.top+n.offsetHeight-f)-10),s(e)})(t),u(!0)}})),c?t("div",Object.assign({style:{top:r,left:l,position:"fixed",zIndex:1e3}},{children:t("div",Object.assign({ref:o},{children:i.children}))})):null};export{i as Floater};

package/dist/esm/components/floater/index.d.ts

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

package/dist/esm/components/floating-input-dropdown/FloatingInputDropdown.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Placement } from "../tooltips";
+import { DropdownOption, OpenDropdownProps } from '../dropdown/type';
+import { FloaterProps } from '../floater/floater';
+import { InputProps } from '../input';
+type DropdownProps = OpenDropdownProps & {
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onDropdownOpen?: () => void;
+    onDropdownVisbilityChange?: (isOpen: boolean) => void;
+    tooltipContent?: string;
+    tooltipDirection?: Placement;
+    showTooltipArrow?: boolean;
+};
+type FloatingInputDropdownProps = {
+    inputProps: InputProps;
+    dropdownProps: DropdownProps;
+    floaterProps: FloaterProps;
+    children?: React.ReactNode;
+    isVisible?: boolean;
+    onDropdownOptionClick?: (option: DropdownOption) => void;
+    onChangeText?: (text: string, event?: Event) => void;
+};
+export declare const FloatingInputDropdown: React.FC<FloatingInputDropdownProps>;
+export {};

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

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

package/dist/esm/components/floating-input-dropdown/index.d.ts

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

package/dist/esm/components/helpers/FileUploaderHelper.d.ts

@@ -1,4 +1,4 @@
-export declare const FILE_TYPE_NOT_SUPPORT = "File type no supported";
+export declare const FILE_TYPE_NOT_SUPPORT = "File type not supported";
 export declare const FILE_SIZE_REACHED: (size: number) => string;
 export declare const getFileFormatErrorMessage: (format: string) => string;
 export declare const SIZE_LIMIT_MAP: {
@@ -8,5 +8,11 @@ export declare const SIZE_LIMIT_MAP: {
 };
 export declare const SUPPORTED_FILE_FORMAT: string[];
 export declare class FileUploaderHelper {
-    validate(file: Blob): string | undefined;
+    validate(inputData: {
+        file?: Blob;
+        linkData?: {
+            type: string;
+            size: number;
+        };
+    }): string | undefined;
 }

package/dist/esm/components/helpers/FileUploaderHelper.js

@@ -1 +1 @@
-import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",p=e=>`Max file size of ${e}mb is allowed`,t=e=>`Only ${e.toUpperCase()} format allowed`,o={image:5,video:16,application:100},r=["mp4","png","jpeg","jpg","pdf"];class a{validate(a){const l=a.size,[s,n]=a.type.split("/");if(!o[s])return i;if(e(l)>o[s])return p(o[s]);if(!r.includes(n.toLocaleLowerCase())){if("video"===s)return t("mp4");if("image"===s)return t("png, jpeg, jpg");if("application"===s)return t("pdf")}}}export{p as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,a as FileUploaderHelper,o as SIZE_LIMIT_MAP,r as SUPPORTED_FILE_FORMAT,t as getFileFormatErrorMessage};
+import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type not supported",t=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,l={image:5,video:16,application:100},o=["mp4","png","jpeg","jpg","pdf"];class s{validate(s){const{file:r,linkData:a}=s;let n=0,f="",d="";if(r)n=r.size,f=r.type.split("/")[0],d=r.type.split("/")[1];else{if(!a)return i;n=a.size,f=a.type.split("/")[0],d=a.type.split("/")[1]}if(!l[f])return i;if(e(n)>l[f])return t(l[f]);if(!o.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}}export{t as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,s as FileUploaderHelper,l as SIZE_LIMIT_MAP,o as SUPPORTED_FILE_FORMAT,p as getFileFormatErrorMessage};

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

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

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

@@ -1,3 +1,3 @@
 import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
-	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground-color: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
+	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
 `;export{r as IconButton};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning';
+export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Icon to render
@@ -10,6 +10,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * @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
@@ -34,4 +39,6 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Flag to check if icon button is selected/clicked
      */
     isSelected?: boolean;
+    iconColor?: string;
+    disabledTooltip?: string;
 }

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

@@ -1 +1 @@
-import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};
+import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:"ai"===n?t.surface.aiLight:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};

package/dist/esm/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/esm/components/image-compress/ImageCompress.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import r from"browser-image-compression";class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:i=>e(void 0,void 0,void 0,(function*(){let e=i,o="";try{const t={maxSizeMB:i.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};i.size/1024/1024>1&&(e=yield r(i,t)),o=yield r.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:o,compressedFile:e}}))});export{i as ImageService};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import r from"browser-image-compression";class t{}Object.defineProperty(t,"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),o=new Uint8Array(i);for(let e=0;e<r.length;e++)o[e]=r.charCodeAt(e);const l=new Blob([i],{type:t});return new File([l],"image",{type:t})}}),Object.defineProperty(t,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:(t,i)=>e(void 0,void 0,void 0,(function*(){let e=t,o="";const l=i?i.maxSizeMB:t.size/1024/1024*.8;try{const i={maxSizeMB:l,maxWidthOrHeight:1920,useWebWorker:!0};t.size/1024/1024>.1&&(e=yield r(t,i)),o=yield r.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:o,compressedFile:e}}))});export{t as ImageService};

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

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

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

@@ -0,0 +1 @@
+import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import o from"react-image-crop";import{StyledModal as r}from"../modals/styledModal.js";const n=n=>{const[a,d]=i(!1),[l,c]=i(void 0),[h,s]=i({width:0,height:0}),[g,m]=i(!1),p=(e,i,o,r)=>t(void 0,void 0,void 0,(function*(){const t=document.createElement("canvas");t.width=i.width,t.height=i.height;const n=t.getContext("2d");if(!n)throw new Error("Failed to get 2D context of canvas.");n.drawImage(e,i.x*o,i.y*r,i.width*o,i.height*r,0,0,i.width,i.height);try{return t.toDataURL("image/png")}catch(t){throw new Error("Failed to create blob for cropped image.")}}));return e(r,Object.assign({open:!0,onClose:n.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:g,onClick:()=>{var e;e=l,t(void 0,void 0,void 0,(function*(){var t,i;if(m(!0),n.src&&(null==e?void 0:e.width)&&(null==e?void 0:e.height)){const i=new Image;i.src=n.src;const o=i.naturalWidth/h.width,r=i.naturalHeight/h.height,d=yield p(i,e,o,r);yield null===(t=null==n?void 0:n.onCropComplete)||void 0===t?void 0:t.call(n,d,a)}else yield null===(i=null==n?void 0:n.onCropComplete)||void 0===i?void 0:i.call(n,n.src,a);m(!1)}))}}},{children:e("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}},{children:e("div",{children:e(o,Object.assign({crop:l,onChange:t=>{c(t)},circularCrop:!1,onDragStart:()=>{d(!0)},aspect:n.aspectRatio},{children:e("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};

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

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

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

@@ -0,0 +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 l}from"../../image-compress/ImageCompress.js";import{StateInterface as p}from"../../states/StateComponent.js";import"../../../_virtual/_tslib.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 b=t(null),[j,v]=s(),[F,R]=s(h),[O,T]=s(!1);a((()=>{f.upload?(v("upload"),setTimeout((()=>{B()}),500)):f.crop?v("crop"):f.compress?v("compress"):f.uploadToFirestorage?v("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);v("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=l.base64ToImage(o);f.compress?(v("compress"),l.compressImage(e,g).then((o=>{if(!o)return T(!0),void w();E(o.base64,o.compressedFile)}))):E(o,e)},B=()=>{b.current.click()};return O?o(e,{}):"cloud-upload"===j?!y||y.success?o(e,{}):y.error?o("div",{children:o(n,{states:p.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:p.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:b,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{const e=o.target.files[0],r=new FileReader;r.onload=()=>{var o;R({src:r.result}),o=r.result,f.crop?v("crop"):k(o)},e&&r.readAsDataURL(e)}}),"crop"===j&&o(c,{src:F.src,onCropComplete:o=>{R({src:o}),k(o)},aspectRatio:m.aspectRatio,onCancel:w})]})};export{d as BikImagePipeline};

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

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

package/dist/esm/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/esm/components/input/Input-helper.d.ts

@@ -0,0 +1,6 @@
+import { InputTypeI } from "./Input";
+export declare const isFunction: (fn: any) => boolean;
+export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {
+    min?: number;
+    max?: number;
+}) => [boolean, string];

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

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

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

@@ -1,8 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
+import { ButtonProps } from '../button/model';
 export type InputVariant = 'default' | 'small';
-export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
-export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
+export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
 export interface InputProps {
+    'data-test'?: string;
     noErrorHint?: boolean;
     placeholder?: string;
     variant?: InputVariant;
@@ -16,6 +18,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    labelElement?: React.ReactNode;
     labelText?: string;
     maxCharLimit?: number;
     isRequired?: boolean;
@@ -31,13 +34,36 @@ export interface InputProps {
     button?: {
         text: string;
         onClick?: () => void;
+        buttonProps?: ButtonProps;
     };
     suffixText?: string;
     prefixText?: string;
     value?: string;
+    reset?: boolean;
     onBlur?: (e: any) => void;
-    onFocus?: () => 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;
 }
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{forwardRef as n,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as v,InputWrapper as h,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=n(((n,C)=>{var w,I,O,T;const{placeholder:k,leftIcon:A,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:E,type:F,state:z,validate:H,variant:K,button:M,suffixText:R,prefixText:q,onChangeText:N,value:P,noErrorHint:W}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},n),G=null==A?void 0:A.icon,J=null==B?void 0:B.icon,[Q,U]=l(!1),[V,X]=l(!1),[Y,Z]=l(),$="small"===K?"18px":"22px",_=r(d);o((()=>{X(!!n.isActive)}),[n.isActive]),o((()=>{Z(n.errorMessage)}),[n.errorMessage]),o((()=>{U(!1),("invalid"===n.state||Y)&&U(!0)}),[n.state,Y]),o((()=>{U(!!Y)}),[Y]);const ee=function(e){if(j(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},te=e=>{N(P||"",e),![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},ie=e=>{const t=e.target.value;if(N(t,e),!H||!j(H))return;const[i,n]=H(t);U(!i),Z(n)},ne=()=>{var l;return e(i,{children:["multiline"!==F&&t("input",{id:n.id,style:null!==(l=null==_?void 0:_.input)&&void 0!==l?l:{},ref:C,type:F,value:P,onFocus:()=>(X(!0),void ee(n.onFocus)),onBlur:e=>(e=>{var t;X(!1),ee(null===(t=n.onBlur)||void 0===t?void 0:t.call(n,e))})(e),placeholder:k||"Enter here",onChange:ie,onKeyDown:e=>te(e)}),"multiline"===F&&t("textarea",{value:P,ref:C,onFocus:()=>X(!0),onBlur:()=>X(!1),placeholder:k||"Enter here",onChange:ie,onKeyDown:e=>te(e)})]})};return e(u,Object.assign({width:n.width,height:n.height,state:z,type:F,style:null!==(w=null==_?void 0:_.RootContainer)&&void 0!==w?w:{}},{children:[!W&&(!!E||!!Y)&&e(v,Object.assign({invalid:!!Y},{children:[!!Y&&t(c,{width:16,height:16}),Y||E]})),e(h,Object.assign({variant:K,state:z,width:n.width,isActive:"active"===z||V,isInvalid:Q,style:null!==(I=null==_?void 0:_.InputWrapper)&&void 0!==I?I:{}},{children:[!!G&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==A?void 0:A.callback),isLeft:!0,style:null!==(O=null==_?void 0:_.IconHolder)&&void 0!==O?O:{}},{children:t(G,{})})),!!q&&t(f,Object.assign({variant:K},{children:q})),"default"===K&&t(g,{children:ne()}),"small"===K&&t(m,{children:ne()}),!!J&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==B?void 0:B.callback),isLeft:!1},{children:t(J,{})})),!!R&&t(x,Object.assign({variant:K},{children:R})),M&&M.text&&t(a,{buttonText:M.text,onClick:()=>ee(null==M?void 0:M.onClick)})]})),(!!L||!!S)&&"default"===K&&e(y,Object.assign({invalid:Q},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[null===(T=n.value)||void 0===T?void 0:T.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};
+import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,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 v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as b}from"./context/InputStyleProvider.js";import{RootContainer as f,InputFooter as x,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const L=l(((l,L)=>{var H,B,E,M,P,D,S;const{placeholder:z,leftIcon:A,rightIcon:F,labelText:K,maxCharLimit:N,isRequired:R,hintText:G,type:_,state:q,validate:V,variant:W,button:$,suffixText:J,prefixText:Q,onChangeText:U,value:X,noErrorHint:Y,reset:Z,rangeValidation:tt,noKeyDownChange:et,version:nt,noMaxCharCheck:it,labelElement:lt,autoGrow:rt,minHeight:ot,maxHeight:at,labelTextBold:st,truncateText:ct,maxCharLimitPosition:ht,hightlightInputColor:ut,onKeyDownEvent:dt,hideInputHeader:vt}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),pt=null==A?void 0:A.icon,gt=null==F?void 0:F.icon,[mt,bt]=r(!1),[ft,xt]=r(!1),[yt,jt]=r(),Ct="small"===W?"18px":"22px",Ot=o(b),[Tt,wt]=r(),It=a(null),kt=null!=L?L:It;s((()=>{wt(X),!X&&rt&&(kt.current.style.height=ot||"48px")}),[X]),s((()=>{var t;kt.current&&(null===(t=l.onReferenceInit)||void 0===t||t.call(l,kt.current))}),[kt]),s((()=>{const t=kt.current;if(t&&["phonenumber","zip","number"].includes(_))return t.addEventListener("wheel",Et,{passive:!1}),()=>{t.removeEventListener("wheel",Et)}}),[]),s((()=>{Z&&wt("")}),[Z]),s((()=>{var t;xt(!!l.isActive),l.isActive&&(null===(t=kt.current)||void 0===t||t.focus())}),[l.isActive]),s((()=>{jt(l.errorMessage)}),[l.errorMessage]),s((()=>{var t;bt(!1),("invalid"===l.state||yt||"disabled-invalid"===l.state)&&bt(!0),"active"===l.state&&(null===(t=kt.current)||void 0===t||t.focus())}),[l.state,yt]),s((()=>{bt(!!yt||"invalid"===l.state)}),[yt,l.state]);const Lt=function(t){if(h(t)){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];t(...n)}},Ht=()=>"zip"===_?6:2e3,Bt=t=>{const e=0!==N?N:Ht();if(dt&&dt(t),et||U(X||"",t),it)return;const n=t.target.value;![8].includes(t.which)&&e>0&&n.length>=e&&t.preventDefault()},Et=t=>{t.preventDefault()},Mt=t=>{let e=t.target.value;const n=0!==N?N+1:Ht();!it&&n>0&&e.length>=n&&(e=e.substring(0,n-1)),U(e,t),l.textControl||wt(e),rt&&(kt.current.style.height=`${kt.current.scrollHeight}px`,e||(kt.current.style.height=ot||"48px"));const i=V||u;if(!i||!h(i))return;const[r,o]=i(e,_,tt);bt(!r),jt(l.errorMessage?l.errorMessage:o)},Pt=t=>{var e;l.skipFocus||xt(!0),Lt(null===(e=l.onFocus)||void 0===e?void 0:e.call(l,t))},Dt=t=>{var e;l.skipFocus||xt(!1),Lt(null===(e=l.onBlur)||void 0===e?void 0:e.call(l,t))},St=()=>{var i;return t(n,{children:["multiline"!==_&&e("input",{className:ct?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Ot?void 0:Ot.input)&&void 0!==i?i:{},ref:kt,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Tt,onFocus:t=>Pt(t),onBlur:t=>Dt(t),placeholder:z||"Enter here",onChange:Mt,onClick:t=>Lt(l.onClick),onKeyDown:t=>Bt(t)}),"multiline"===_&&e("textarea",{"data-test":l["data-test"],value:Tt,ref:kt,onFocus:t=>Pt(t),onBlur:t=>Dt(t),onClick:t=>Lt(l.onClick),placeholder:z||"Enter here",onChange:Mt,onKeyDown:t=>Bt(t),maxLength:N>0?N:void 0})]})};return t(f,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(H=null==Ot?void 0:Ot.RootContainer)&&void 0!==H?H:{}},{children:[t("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!yt)&&t(x,Object.assign({invalid:!!yt},{children:[!!yt&&e(m,{width:16,height:16}),yt||G]})),N>0&&"BOTTOM"===ht&&t(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(B=(null!=X?X:"").toString())||void 0===B?void 0:B.length)&&void 0!==E?E:0,"/",N]}))]})),t(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||ft,isInvalid:mt,style:null!==(M=null==Ot?void 0:Ot.InputWrapper)&&void 0!==M?M:{},version:nt,height:l.height,hightlightInputColor:ut},{children:[!!pt&&e(C,Object.assign({variant:W,iconSize:Ct,onClick:()=>Lt(null==A?void 0:A.callback),isLeft:!0,style:null!==(P=null==Ot?void 0:Ot.IconHolder)&&void 0!==P?P:{}},{children:e(pt,{})})),!!Q&&e(O,Object.assign({variant:W},{children:Q})),"default"===W&&e(T,Object.assign({height:l.height,type:l.type,minHeight:ot,maxHeight:at,autoGrow:rt},{children:St()})),"small"===W&&e(w,Object.assign({height:l.height,type:l.type},{children:St()})),!!gt&&e(C,Object.assign({variant:W,iconSize:Ct,onClick:()=>Lt(null==F?void 0:F.callback),isLeft:!1},{children:e(gt,{})})),!!J&&e(I,Object.assign({variant:W},{children:J})),$&&$.text&&e(c,{buttonText:$.text,onClick:()=>Lt(null==$?void 0:$.onClick)}),$&&$.buttonProps&&e(c,Object.assign({},$.buttonProps))]})),!vt&&(!!K||!!N)&&t(k,Object.assign({invalid:mt},{children:[lt&&lt,t("div",Object.assign({className:"label__container"},{children:[t(st?v:p,{children:[K,R?e("span",{children:"*"}):""]}),l.tooltipText&&e(d,Object.assign({body:l.tooltipText,placement:"top"},{children:e("span",{children:e(i,{style:{marginTop:-3},width:18,height:18,color:mt?g.content.negative:g.content.primary})})}))]})),N>0&&"TOP"===ht&&t(y,{children:[null!==(S=null===(D=(null!=X?X:"").toString())||void 0===D?void 0:D.length)&&void 0!==S?S:0,"/",N]})]}))]}))}));L.displayName="Input";export{L as Input};

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

@@ -10,6 +10,8 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
+    version?: "1.0" | "2.0" | undefined;
+    hightlightInputColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -30,6 +32,12 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+    autoGrow?: boolean | undefined;
+    minHeight?: string | undefined;
+    maxHeight?: string | undefined;
 }, {}, {}>;
 export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -42,6 +50,9 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
 }, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -60,6 +71,8 @@ export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    position?: string | undefined;
 }, {}, {}>;
 export declare const InputFooter: import("@emotion/styled").StyledComponent<{
     [x: string]: any;