@bikdotai/bik-component-library 0.3.0-bik-layout-beta → 0.4.0-bik-layout-beta

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/index.d.ts

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

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/OpenedDropdown/utils/iterationOnOptions.js

@@ -0,0 +1 @@
+function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...i]})}return!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)}))}export{s as iterateOnOptions};

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

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

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { Placement } from '@popperjs/core';
+export interface OpenDropdownProps {
+    defaultOptions?: DropdownOption[];
+    options: DropdownOption[];
+    isSearchable?: boolean;
+    error?: string;
+    isMultiSelect?: boolean;
+    width?: string;
+    height?: number | string;
+    allowFreeForm?: boolean;
+    onClose?: () => void;
+    onSelect?: (option: DropdownOption | DropdownOption[]) => void;
+    placement?: Placement;
+}
+export type GroupedOption = {
+    label?: string;
+    options: (SingleOption | MultiSelectOption)[];
+};
+export type SingleOption = {
+    label: string;
+    value: string;
+    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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DropdownOption } from '../dropdown/type';
+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[];
+    buttonWidth?: number;
+    buttonHeight?: number;
+    buttonColor?: string;
+    buttonPosition?: FAB_POSITION;
+    menuWidth?: number;
+    menuHeight?: number;
+    buttonIcon?: JSX.Element;
+    buttonPaddingHorizontal?: number;
+    buttonPaddingVertical?: number;
+    tooltipPlacement?: Placement;
+    tooltipText?: string;
+    tooltipWidth?: number;
+    zIndex?: number;
+    isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
+}>;

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

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

@@ -0,0 +1 @@
+export * from './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

@@ -0,0 +1,22 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+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;
+    width?: number;
+    height?: number;
+    icon?: JSX.Element;
+    color?: string;
+    position?: FAB_POSITION;
+    buttonPaddingHorizontal?: number;
+    buttonPaddingVertical?: number;
+    tooltipText?: string;
+    tooltipPlacement?: Placement;
+    zIndex?: number;
+    isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
+    tootipWidth?: number;
+}>;

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

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+export declare enum FAB_POSITION {
+    TOP_LEFT = "top left",
+    TOP_RIGHT = "top right",
+    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;
+    color: string;
+    isRound?: boolean | undefined;
+}, never>;
+export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
+    width: number;
+    height: number;
+    color: string;
+    position: FAB_POSITION;
+    buttonPaddingHorizontal: number;
+    buttonPaddingVertical: number;
+    zIndex: number;
+}, never>;
+export declare const StyledDropdown: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap").DropdownProps> & {
+    Toggle: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>;
+    Menu: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/DropdownMenu").DropdownMenuProps>;
+    Item: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<import("@restart/ui/esm/types").DynamicRefForwardingComponent<import("react").ForwardRefExoticComponent<import("@restart/ui/esm/Button").ButtonProps & import("react").RefAttributes<HTMLElement>>, import("@restart/ui/esm/DropdownItem").DropdownItemProps>, import("react-bootstrap/esm/DropdownItem").DropdownItemProps>;
+    ItemText: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"span", unknown>;
+    Divider: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"hr", unknown>;
+    Header: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", unknown>;
+}, any, {
+    active?: string | undefined;
+    width?: string | undefined;
+    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

@@ -0,0 +1,99 @@
+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};
+	${t=>t.isRound?"border-radius: 50%;":"border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;"}
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	display: flex;
+`,p=o.div`
+	display: flex;
+	border-radius: 50%;
+	flex-direction: column;
+	align-items: flex-end;
+	position: fixed;
+	width: ${t=>t.width}px;
+	height: ${t=>t.height}px;
+	z-index: ${t=>t.zIndex};
+	${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;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-start;
+			gap: 8px;
+			padding: 14px;
+			border-bottom: 1px solid ${i.stroke.primary};
+
+			:last-child {
+				border-bottom: none !important;
+			}
+		}
+	}
+	button {
+		border: 1px solid
+			${t=>"true"===t.active?i.stroke.positive.lightAlt:i.stroke.primary};
+		border-radius: 4px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		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};
+	}
+
+	.btn-primary:hover,
+	.btn-primary:active,
+	.btn-primary:focus,
+	.btn-primary.dropdown-toggle,
+	.show > .btn-primary.dropdown-toggle {
+		color: ${t=>"true"===t.active?i.content.positive:i.content.primary};
+		background-color: ${t=>"true"===t.active?i.background.positive.light:"transparent"};
+		border: none;
+	}
+	.btn:focus {
+		outline: 0;
+		box-shadow: 0 0 0 0.25rem transparent !important;
+	}
+
+	.dropdown-toggle::after {
+		border-top: 0.3em solid ${i.content.primary};
+		display: none !important;
+	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${i.content.primary};
+		display: none !important;
+	}
+	.dropdown-menu {
+		min-width: 12rem;
+		padding: 0 0;
+	}
+	.dropdown-item:active,
+	.dropdown-item:hover {
+		color: ${i.content.positive};
+		text-decoration: none;
+		background-color: ${i.background.positive.light};
+	}
+`,s=o(t.Toggle)`
+	border-radius: 4px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 8px;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+`,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/floating-action-button/index.d.ts

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

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/icon-button/IconButton.d.ts

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

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

@@ -0,0 +1 @@
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{IconButton as r}from"./IconButton.styled.js";import{getIconColor as d}from"./theme.js";const s=i(((i,s)=>{var{id:n,iconButtonType:c="default",Icon:l,height:a=20,width:m=20,bordered:h,disabled:p,isSelected:u,style:y}=i,b=e(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style"]);const f=d(c,p,u);return t(r,Object.assign({id:n,ref:s,style:y,iconButtonType:c,bordered:h,disabled:p,isSelected:u},b,{children:o.createElement(l,{height:a,width:m,color:f,style:{display:"block"}})}))}));s.displayName="IconButton";export{s as IconButton};

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

@@ -0,0 +1,6 @@
+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/esm/components/icon-button/IconButton.styled.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+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/esm/components/image-compress/ImageCompress.js

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

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

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};