@bikdotai/bik-component-library 0.0.656-9 → 0.0.656-beta.0

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

@@ -1,2 +0,0 @@
-export * from './FloatingActionButton';
-export * from './FloatingActionButton.styles';

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

@@ -1,26 +0,0 @@
-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/cjs/components/floating-input-dropdown/FloatingInputDropdown.js

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

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

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

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

@@ -1,18 +0,0 @@
-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: {
-    image: number;
-    video: number;
-    application: number;
-};
-export declare const SUPPORTED_FILE_FORMAT: string[];
-export declare class FileUploaderHelper {
-    validate(inputData: {
-        file?: Blob;
-        linkData?: {
-            type: string;
-            size: number;
-        };
-    }): string | undefined;
-}

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

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

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

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

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

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

package/dist/cjs/components/icon-button/IconButton.styled.d.ts

@@ -1,6 +0,0 @@
-import { IconButtonType } from './model';
-export declare const IconButton: import("styled-components").StyledComponent<"button", any, {
-    bordered?: boolean | undefined;
-    iconButtonType: IconButtonType;
-    isSelected?: boolean | undefined;
-}, never>;

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

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=r(t).default.button`
-	${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 ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${n.generateBackgroundColor(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`}
-`;exports.IconButton=o;

package/dist/cjs/components/icon-button/index.d.ts

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

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

@@ -1,44 +0,0 @@
-/// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
-export 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;
-}

package/dist/cjs/components/icon-button/theme.d.ts

@@ -1,3 +0,0 @@
-import { IconButtonType } from './model';
-export declare const getIconColor: (type: IconButtonType, disabled?: boolean, isSelected?: boolean) => string;
-export declare const generateBackgroundColor: (type: IconButtonType) => string;

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.generateBackgroundColor=t=>"default"===t?e.COLORS.background.brandLight:"negative"===t?e.COLORS.background.negative.light:"positive"===t?e.COLORS.background.positive.light:"ai"===t?e.COLORS.surface.aiLight:e.COLORS.background.warning.light,exports.getIconColor=(t,n,r)=>{if(n)return e.COLORS.content.inactive;switch(t){case"default":return r?e.COLORS.content.brand:e.COLORS.content.primary;case"negative":return e.COLORS.content.negative;case"positive":return e.COLORS.content.positive;case"warning":return r?e.COLORS.content.warning:e.COLORS.content.primary;default:return e.COLORS.content.primary}};

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

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

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

@@ -1 +0,0 @@
-"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-compress/index.d.ts

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-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/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js

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

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,66 +0,0 @@
-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

@@ -1 +0,0 @@
-"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-helper.d.ts

@@ -1,6 +0,0 @@
-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/cjs/components/input/Input-helper.js

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

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

@@ -1,69 +0,0 @@
-import React from 'react';
-import { ButtonProps } from '../button/model';
-export type InputVariant = 'default' | 'small' | 'x-small';
-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;
-    width?: string;
-    height?: string;
-    leftIcon?: {
-        icon: React.FC;
-        callback?: () => void;
-    };
-    rightIcon?: {
-        icon: React.FC;
-        callback?: () => void;
-    };
-    labelElement?: React.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;
-}
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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

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

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

@@ -1,127 +0,0 @@
-/// <reference types="react" />
-import { InputStateI, InputTypeI, InputVariant } from "./Input";
-export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    width?: string | undefined;
-    height?: string | undefined;
-    isActive?: boolean | undefined;
-    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;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isLeft?: boolean | undefined;
-    iconSize?: string | undefined;
-    variant?: InputVariant | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputContainer: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    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;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    height?: string | undefined;
-    type?: InputTypeI | undefined;
-}, {}, {}>;
-export declare const InputHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    invalid?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    position?: string | undefined;
-}, {}, {}>;
-export declare const InputFooter: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    invalid?: boolean | undefined;
-}, {}, {}>;
-export declare const RootContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    width?: string | undefined;
-    height?: string | undefined;
-    state?: InputStateI | undefined;
-    type: InputTypeI;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    variant?: InputVariant | undefined;
-}, {}, {}>;
-export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    variant?: InputVariant | undefined;
-}, {}, {}>;