@bikdotai/bik-component-library 0.0.13-beta.4 → 0.0.13-jazz

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MultiSelectOption, SingleOption } from '../../../type';
+export declare const MenuItem: React.FC<{
+    option: SingleOption | MultiSelectOption;
+    isMultiSelect?: boolean;
+    showDescription: (title?: string, description?: string) => void;
+    onSelect: (option: SingleOption) => void;
+    last?: boolean;
+}>;

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),s=require("../../../../checkBox/CheckBox.js"),n=require("../../../../list-item/ListItem.js"),r=require("../../../../TypographyStyle.js"),i=require("../../../../../constants/Theme.js"),o=require("./FreeFormMenu.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=l(t).default(n.ListItem)`
+	padding: 14px 16px !important;
+	cursor: default;
+`;exports.MenuItem=t=>{let{option:n,isMultiSelect:l,showDescription:a,onSelect:u,last:d}=t;var m;function p(e){n.disabled||u(Object.assign(Object.assign({},n),{selected:e}))}return e.jsx(c,{style:d?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),p(!n.selected)},onMouseOver:function(){n.description?a(n.label,n.description):a()},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:l?e.jsx(s.CheckBox,{isDisabled:null!==(m=n.disabled)&&void 0!==m&&m,isChecked:!!n.selected,onValueChange:p}):e.jsx(e.Fragment,{}),customComponent:n.customComponent,trailingIcon:n.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(r.BodyCaption,Object.assign({style:{color:i.COLORS.content.secondary}},{children:"Freeform"}))}):n.trailingIcon?e.jsx(e.Fragment,{children:n.trailingIcon}):e.jsx(e.Fragment,{}),variant:n.disabled?"inactive":n.selected?"selected":"default"})};

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=i=>{let{options:n,isMultiSelect:r,showDescription:o,onSelect:l}=i;return e.jsx(e.Fragment,{children:n.map(((i,u)=>{const c=u===n.length-1;if(i.options){const n=i;return e.jsxs("div",{children:[e.jsx(s.StyledGroupedLabel,{children:n.label}),n.options.map(((s,i)=>e.jsx(t.MenuItem,{last:c,onSelect:l,showDescription:o,isMultiSelect:r,option:s},i)))]},u)}return e.jsx(t.MenuItem,{last:c,onSelect:l,showDescription:o,isMultiSelect:r,option:i},u)}))})};

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),c=require("../../../../checkBox/CheckBox.js"),o=require("../../../../list-item/ListItem.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=r(l).default(o.ListItem)``;exports.SelectAllMenu=l=>{let{options:o,onSelect:r}=l;const[i,n]=t.useState("notSelected");function a(){"partiallySelected"===i&&r("notSelected"),"selectAll"===i&&r("notSelected"),"notSelected"===i&&r("selectAll")}return t.useEffect((()=>{const e=[];o.filter((e=>!e.disabled)).forEach((t=>{t.options?t.options.filter((e=>!e.disabled)).forEach((t=>{e.push(t.selected||!1)})):e.push(t.selected||!1)})),e.every(Boolean)?n("selectAll"):e.filter(Boolean).length>0?n("partiallySelected"):n("notSelected")}),[o]),e.jsx(s,{onClick:e=>{e.preventDefault(),a()},listItem:{label:"Select All",value:"All"},leadingIcon:e.jsx(c.CheckBox,{isChecked:"selectAll"===i||"partiallySelected"===i,isPartiallyChecked:"partiallySelected"===i,onValueChange:a}),variant:"default"})};

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../input/Input.js"),s=require("../../../../input/context/InputStyleProvider.js"),o=require("../../../../../constants/Theme.js"),n=require("../../../../../assets/icons/cross.svg.js"),i=require("../../../../../assets/icons/search.svg.js");exports.SearchBox=c=>{let{onSearch:a}=c;const[u,l]=r.useState(""),[p,d]=r.useState(!1);return e.jsx(s.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+o.COLORS.stroke.primary,padding:"14px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:e.jsx(t.Input,{placeholder:"Search",leftIcon:{icon:()=>e.jsx(i.default,{width:24,height:24,color:o.COLORS.content.placeholder})},rightIcon:{icon:()=>u?e.jsx(n.default,{onClick:()=>{d(!0),a(""),l("")},width:24,height:24,color:o.COLORS.content.placeholder}):e.jsx(e.Fragment,{})},reset:p,onChangeText:e=>{d(!1),l(e),a(e)}})}))};

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=t=>{let{searchedString:s}=t;return e.jsx("div",Object.assign({style:{margin:"28px auto"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=s?s:""}"`})}))};

package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { DropdownOption, SingleOption } from '../../type';
+export declare function iterateOnOptions(options: DropdownOption[], newVal: Partial<SingleOption>, checkCB?: (optionForValidation: SingleOption) => boolean): ({
+    label: string;
+    value: string;
+    description?: string | null | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+} | {
+    label?: string | undefined;
+    value?: string | undefined;
+    description?: string | null | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+    options: SingleOption[];
+})[];

package/dist/cjs/components/dropdown/index.d.ts

@@ -1 +1,4 @@
 export * from './Dropdown';
+export * from './DropdownPopover';
+export * from './OpenedDropdown';
+export * from './MenuItem/MenuItem';

package/dist/cjs/components/dropdown/type.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { Placement } from '@popperjs/core';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -9,6 +11,7 @@ export interface OpenDropdownProps {
     allowFreeForm?: boolean;
     onClose?: () => void;
     onSelect?: (option: DropdownOption | DropdownOption[]) => void;
+    placement?: Placement;
 }
 export type GroupedOption = {
     label?: string;
@@ -17,10 +20,13 @@ export type GroupedOption = {
 export type SingleOption = {
     label: string;
     value: string;
-    descriptions?: string | null;
+    description?: string | null;
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/cjs/components/fab-menu/FABMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DropdownOption } from '../dropdown/type';
-import { FAB_POSITION } from '../floating-action-button/FloatingActionButton.styles';
-import { TooltipPlacement } from '../tooltips';
+import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from '../floating-action-button/FloatingActionButton.styles';
+import { Placement } from '../tooltips';
 export declare const FABMenu: React.FC<{
     onSelect: (selected: DropdownOption | DropdownOption[]) => void;
     menuOptions: DropdownOption[];
@@ -14,8 +14,11 @@ export declare const FABMenu: React.FC<{
     buttonIcon?: JSX.Element;
     buttonPaddingHorizontal?: number;
     buttonPaddingVertical?: number;
-    tooltipPlacement?: TooltipPlacement;
+    tooltipPlacement?: Placement;
     tooltipText?: string;
+    tooltipWidth?: number;
     zIndex?: number;
     isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
 }>;

package/dist/cjs/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P},{children:t.jsx(o.OpennedDropdown,{options:r,height:a||90,width:`${c}px`,onSelect:i})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:p,menuHeight:c,buttonIcon:a,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tooltipWidth:A}=i;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:a,width:r,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tootipWidth:A},{children:t.jsx(o.OpenedDropdown,{options:d,height:c||90,width:`${p}px`,onSelect:e})}))})};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FileUploaderProps } from "./Models";
+declare const FileUploader: React.FC<FileUploaderProps>;
+export default FileUploader;

package/dist/cjs/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/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,7 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
-import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
-import { FAB_POSITION } from './FloatingActionButton.styles';
+import { Placement } from '../tooltips';
+import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
     children?: React.ReactNode;
@@ -13,7 +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-bootstrap"),i=require("../../constants/Theme.js"),n=require("../tooltips/CustomisedTooltip.js"),e=require("../../assets/icons/question-mark.svg.js"),r=require("./FloatingActionButton.styles.js");const s=o=>{const{width:i,height:s,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u}=o;return h?t.jsx(n.CustomisedTooltip,{tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:l,onClick:c,children:d,tooltipText:a,isRound:h=!0,width:u=48,height:g=48,color:p=i.COLORS.background.inverse,position:j=r.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:m=20,zIndex:C=1,tooltipPlacement:w=n.TooltipPlacement.Auto}=e;return t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonOuterContainer,Object.assign({width:u,height:g,color:p,position:j,buttonPaddingHorizontal:x,buttonPaddingVertical:m,zIndex:C},{children:t.jsx(r.StyledDropdown,{children:d?t.jsxs(t.Fragment,{children:[t.jsx(r.DropdownToggleContainer,{children:t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})}),t.jsx(o.Dropdown.Menu,{children:d})]}):t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})})}))})};
+"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

@@ -5,6 +5,18 @@ export declare enum FAB_POSITION {
     BOTTOM_LEFT = "bottom left",
     BOTTOM_RIGHT = "botton right"
 }
+export declare enum DROP_POSITION {
+    UP = "up",
+    UP_CENTERED = "up-centered",
+    START = "start",
+    END = "end",
+    DOWN = "down",
+    DOWN_CENTERED = "down-centered"
+}
+export declare enum MENU_ALIGNMENT {
+    START = "start",
+    END = "end"
+}
 export declare const FloatingActionButtonContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
     height: number;
@@ -33,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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right";const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n,d,p=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right",exports.DROP_POSITION=void 0,(n=exports.DROP_POSITION||(exports.DROP_POSITION={})).UP="up",n.UP_CENTERED="up-centered",n.START="start",n.END="end",n.DOWN="down",n.DOWN_CENTERED="down-centered",exports.MENU_ALIGNMENT=void 0,(d=exports.MENU_ALIGNMENT||(exports.MENU_ALIGNMENT={})).START="start",d.END="end";const a=p.default.div`
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	background: ${t=>t.color};
@@ -7,7 +7,7 @@
 	align-items: center;
 	cursor: pointer;
 	display: flex;
-`,a=n.default.div`
+`,s=p.default.div`
 	display: flex;
 	border-radius: 50%;
 	flex-direction: column;
@@ -17,7 +17,7 @@
 	height: ${t=>t.height}px;
 	z-index: ${t=>t.zIndex};
 	${t=>t.position===exports.FAB_POSITION.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
-`,p=n.default(t.Dropdown)`
+`,l=p.default(t.Dropdown)`
 	.filter-container {
 		.single-row {
 			display: flex;
@@ -41,7 +41,7 @@
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding: 6px 8px;
+		padding: 6px 0px;
 		background: ${t=>"true"===t.active?e.COLORS.background.positive.light:e.COLORS.surface.standard};
 		color: ${t=>"true"===t.active?e.COLORS.content.positive:e.COLORS.content.primary};
 	}
@@ -62,7 +62,12 @@
 
 	.dropdown-toggle::after {
 		border-top: 0.3em solid ${e.COLORS.content.primary};
-		display: none;
+		display: none !important;
+	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${e.COLORS.content.primary};
+		display: none !important;
 	}
 	.dropdown-menu {
 		min-width: 12rem;
@@ -74,7 +79,7 @@
 		text-decoration: none;
 		background-color: ${e.COLORS.background.positive.light};
 	}
-`,s=n.default(t.Dropdown.Toggle)`
+`,c=p.default(t.Dropdown.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -84,4 +89,11 @@
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`;exports.DropdownToggleContainer=s,exports.FloatingActionButtonContainer=d,exports.FloatingActionButtonOuterContainer=a,exports.StyledDropdown=p;
+`,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/helpers/FileUploaderHelper.d.ts

@@ -0,0 +1,12 @@
+export declare const FILE_TYPE_NOT_SUPPORT = "File type no 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(file: Blob): string | undefined;
+}

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

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

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:n,compressionOptions:l,currentImage:p,options:c,onFinish:u,onCancel:d,fileUploadOptions:m}=i;const g=o.useRef(null),[h,j]=o.useState(),[C,f]=o.useState(p),[x,I]=o.useState(!1);o.useEffect((()=>{c.upload?(j("upload"),setTimeout((()=>{F()}),500)):c.crop?j("crop"):c.compress?j("compress"):c.uploadToFirestorage?j("cloud-upload"):I(!0)}),[c.upload,c.crop,c.compress,c.uploadToFirestorage]);const S=o.useCallback(((e,o)=>{if(!c.uploadToFirestorage)return u(e,o),void I(!0);j("cloud-upload"),m&&m.uploadFile(o,m.path).then((s=>{u(e,o,s),I(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),v=e=>{e||d();const o=s.ImageService.base64ToImage(e);c.compress?(j("compress"),s.ImageService.compressImage(o,l).then((e=>{if(!e)return I(!0),void d();S(e.base64,e.compressedFile)}))):S(e,o)},F=()=>{g.current.click()};return x?e.jsx(e.Fragment,{}):"cloud-upload"===h?!m||m.success?e.jsx(e.Fragment,{}):m.error?e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:r.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{I(!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(e.Fragment,{children:[c.upload&&e.jsx("input",{ref:g,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],s=new FileReader;s.onload=()=>{var e;f({src:s.result}),e=s.result,c.crop?j("crop"):v(e)},o&&s.readAsDataURL(o)}}),"crop"===h&&e.jsx(a.BikImageCropper,{src:C.src,onCropComplete:e=>{f({src:e}),v(e)},aspectRatio:n.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.js

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

package/dist/cjs/components/input/Input-helper.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/cjs/components/input/Input-helper.js

@@ -0,0 +1 @@
+"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 u=["phonenumber","zip","number"].includes(r),a=u?n?Number(n):null:n;if(null==a||""===a)return[!0,""];if(u&&String(a).length&&(i.min&&a<i.min||i.max&&a>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,a.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^(https?:\/\/)?([a-z.]{2,6})([\/\w.-]*)*\/?(\?([\w.-]+=[\w.-]+&?)*)?$/,a.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return a>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(a).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(a));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==a?void 0:a.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};