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

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

@@ -0,0 +1 @@
+import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{MenuItem as i}from"./MenuItem.js";import{StyledGroupedLabel as n}from"./MenuList.styled.js";const s=s=>{let{options:r,isMultiSelect:l,showDescription:c,onSelect:p}=s;return t(e,{children:r.map(((e,s)=>{const m=s===r.length-1;if(e.options){const r=e;return o("div",{children:[t(n,{children:r.label}),r.options.map(((e,o)=>t(i,{last:m,onSelect:p,showDescription:c,isMultiSelect:l,option:e},o)))]},s)}return t(i,{last:m,onSelect:p,showDescription:c,isMultiSelect:l,option:e},s)}))})};export{s as MenuList};

package/dist/esm/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/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as l}from"react";import o from"styled-components";import{CheckBox as c}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";const r=o(i)``,n=o=>{let{options:i,onSelect:n}=o;const[a,s]=t("notSelected");function d(){"partiallySelected"===a&&n("notSelected"),"selectAll"===a&&n("notSelected"),"notSelected"===a&&n("selectAll")}return l((()=>{const e=[];i.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)?s("selectAll"):e.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")}),[i]),e(r,{onClick:e=>{e.preventDefault(),d()},listItem:{label:"Select All",value:"All"},leadingIcon:e(c,{isChecked:"selectAll"===a||"partiallySelected"===a,isPartiallyChecked:"partiallySelected"===a,onValueChange:d}),variant:"default"})};export{n as SelectAllMenu};

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

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

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{ZeroState as r}from"../../../../zeroState/ZeroState.js";const e=e=>{let{searchedString:o}=e;return t("div",Object.assign({style:{margin:"28px auto"}},{children:t(r,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=o?o:""}"`})}))};export{e as SearchZeroState};

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

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

package/dist/esm/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/esm/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/esm/components/fab-menu/FABMenu.js

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

package/dist/esm/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/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";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;
+	}
+`,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;
+				}
+			}
+		}
+	}
+`;

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/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/esm/components/floating-action-button/FloatingActionButton.js

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

package/dist/esm/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/esm/components/floating-action-button/FloatingActionButton.styles.js

@@ -1,4 +1,4 @@
-import{Dropdown as t}from"react-bootstrap";import o from"styled-components";import{COLORS as i}from"../../constants/Theme.js";var e;!function(t){t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right"}(e||(e={}));const r=o.div`
+import{Dropdown as t}from"react-bootstrap";import o from"styled-components";import{COLORS as i}from"../../constants/Theme.js";var r,e,n;!function(t){t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right"}(r||(r={})),function(t){t.UP="up",t.UP_CENTERED="up-centered",t.START="start",t.END="end",t.DOWN="down",t.DOWN_CENTERED="down-centered"}(e||(e={})),function(t){t.START="start",t.END="end"}(n||(n={}));const d=o.div`
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	background: ${t=>t.color};
@@ -7,7 +7,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	align-items: center;
 	cursor: pointer;
 	display: flex;
-`,n=o.div`
+`,p=o.div`
 	display: flex;
 	border-radius: 50%;
 	flex-direction: column;
@@ -16,8 +16,8 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	z-index: ${t=>t.zIndex};
-	${t=>t.position===e.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===e.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===e.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===e.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
-`,d=o(t)`
+	${t=>t.position===r.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===r.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===r.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===r.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
+`,a=o(t)`
 	.filter-container {
 		.single-row {
 			display: flex;
@@ -41,7 +41,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding: 6px 8px;
+		padding: 6px 0px;
 		background: ${t=>"true"===t.active?i.background.positive.light:i.surface.standard};
 		color: ${t=>"true"===t.active?i.content.positive:i.content.primary};
 	}
@@ -62,7 +62,12 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 
 	.dropdown-toggle::after {
 		border-top: 0.3em solid ${i.content.primary};
-		display: none;
+		display: none !important;
+	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${i.content.primary};
+		display: none !important;
 	}
 	.dropdown-menu {
 		min-width: 12rem;
@@ -74,7 +79,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 		text-decoration: none;
 		background-color: ${i.background.positive.light};
 	}
-`,a=o(t.Toggle)`
+`,s=o(t.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -84,4 +89,11 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`;export{a as DropdownToggleContainer,e as FAB_POSITION,r as FloatingActionButtonContainer,n as FloatingActionButtonOuterContainer,d as StyledDropdown};
+`,l=o.div`
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	border-radius: 4px;
+	padding: 8px;
+	background-color: ${i.content.primary};
+	color: ${i.content.primaryInverse};
+	width: ${t=>t.tooltipWidth?t.tooltipWidth+"px":"120px"};
+`;export{e as DROP_POSITION,s as DropdownToggleContainer,r as FAB_POSITION,d as FloatingActionButtonContainer,p as FloatingActionButtonOuterContainer,n as MENU_ALIGNMENT,a as StyledDropdown,l as TooltipStyled};

package/dist/esm/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/esm/components/helpers/FileUploaderHelper.js

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

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

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

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

@@ -0,0 +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/ChipInput.js

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

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?:\/\/)?([a-z.]{2,6})([\/\w.-]*)*\/?(\?([\w.-]+=[\w.-]+&?)*)?$/,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};