@bikdotai/bik-component-library 0.0.9994--beta-chatbot → 0.0.9998-beta-switch

package/dist/esm/components/dropShadow/DropShadow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const DropShadow: React.FC<{
+    level: 'z1' | 'z2';
+    position: 'up' | 'down';
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export default DropShadow;

package/dist/esm/components/dropShadow/DropShadow.js

@@ -0,0 +1 @@
+import{jsx as p}from"react/jsx-runtime";const x={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},e=e=>{let{level:t="z1",position:n="down",children:r,style:o}=e;const s=x[t][n];return p("div",Object.assign({style:Object.assign({boxShadow:s},null!=o?o:{})},{children:r}))};export{e as default};

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

@@ -4,5 +4,7 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small';
     disabled?: boolean;
+    noErrorHint?: boolean;
+    buttonWidth?: string;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,{placeHolder:h,size:v,onSelect:f,defaultOptions:g,disabled:b}=c,j=o(c,["placeHolder","size","onSelect","defaultOptions","disabled"]);const w=null!=v?v:"default",x=t(),[y,O]=n(null!=g?g:[]);r((()=>{var o;const e=[];null===(o=null==j?void 0:j.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),O([...e])}),[j.options]);const I=y.length?y.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===w?32:48,width:null!==(u=j.width)&&void 0!==u?u:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:x,onSelect:function(o){Array.isArray(o)?O([...o]):O([o]),null==f||f(o)},disabled:b},j,{children:e(s,{state:b?"disabled":"none",value:I,errorMessage:j.error,variant:w,placeholder:null!=h?h:"Select an option",width:null!==(m=j.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return e(l,{style:{transform:(null===(o=null==x?void 0:x.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===w?20:24,height:"small"===w?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as n,useState as e,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,h,{placeHolder:v,size:f,onSelect:g,defaultOptions:b,disabled:j,noErrorHint:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const y=null!=f?f:"default",H=n(),[O,E]=e(null!=b?b:[]);r((()=>{var o;const t=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&t.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&t.push(o)})),E([...t])}),[x.options]),r((()=>{b&&E([...b])}),[b]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return t(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===y?32:48,width:null!==(m=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==m?m:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t(d,Object.assign({ref:H,onSelect:function(o){Array.isArray(o)?E([...o]):E([o]),null==g||g(o)},disabled:j},x,{children:t(s,{noErrorHint:w,state:j?"disabled":"none",value:null!=I?I:"",errorMessage:x.error,variant:y,placeholder:null!=v?v:"Select an option",width:null!==(h=x.width)&&void 0!==h?h:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return t(l,{style:{transform:(null===(o=null==H?void 0:H.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===y?20:24,height:"small"===y?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-import{__rest as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as n}from"react/jsx-runtime";import t,{useState as l,useImperativeHandle as i,useEffect as p}from"react";import{usePopper as s}from"react-popper";import{OverLapAbs as c,OpenDropdownContainer as d}from"../Common.styled.js";import{OpenedDropdown as a}from"../OpenedDropdown/components/OpennedDropdown.js";const m=t.forwardRef(((t,m)=>{var{children:u}=t,f=e(t,["children"]);const v=m,[j,b]=l(!1),[O,w]=l(null),[D,g]=l(null),{styles:h,attributes:y}=s(O,D,{});return i(v,(()=>({openDropdown:j})),[]),p((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),o(r,{children:[o("div",Object.assign({style:{position:"relative"},ref:w},{children:[n(c,{onClick:e=>{j?e.preventDefault():f.disabled||b(!0)}}),u]})),j&&n(d,Object.assign({ref:g,style:Object.assign(Object.assign({},h.popper),{zIndex:3})},y.popper,{children:n(a,Object.assign({},f,{onSelect:e=>{var o;null===(o=f.onSelect)||void 0===o||o.call(f,e),b(!1)},onClose:function(){var e;b(!1),null===(e=null==f?void 0:f.onClose)||void 0===e||e.call(f)}}))}))]})}));m.displayName="DropdownPopover";export{m as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsxs as e,Fragment as r,jsx as n}from"react/jsx-runtime";import t,{useState as l,useImperativeHandle as i,useEffect as s}from"react";import{usePopper as p}from"react-popper";import d from"../../dropShadow/DropShadow.js";import{OverLapAbs as c,OpenDropdownContainer as a}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const u=t.forwardRef(((t,u)=>{var{children:f}=t,v=o(t,["children"]);const j=u,[b,w]=l(!1),[h,O]=l(null),[D,g]=l(null),{styles:y,attributes:C}=p(h,D,{});return i(j,(()=>({openDropdown:b})),[]),s((()=>{(null==j?void 0:j.current)&&(j.current.openDropdown=b)}),[b]),e(r,{children:[e("div",Object.assign({style:{position:"relative"},ref:O},{children:[n(c,{onClick:o=>{b?o.preventDefault():v.disabled||w(!0)}}),f]})),b&&n(a,Object.assign({ref:g,style:Object.assign(Object.assign({},y.popper),{zIndex:3})},C.popper,{children:n(d,Object.assign({level:"z2",position:"down",style:{borderRadius:4}},{children:n(m,Object.assign({},v,{onSelect:o=>{var e;null===(e=v.onSelect)||void 0===e||e.call(v,o),w(!1)},onClose:function(){var o;w(!1),null===(o=null==v?void 0:v.onClose)||void 0===o||o.call(v)}}))}))}))]})}));u.displayName="DropdownPopover";export{u as DropdownPopover};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useRef as n,useEffect as o}from"react";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as s}from"../utils/iterationOnOptions.js";import{Description as r}from"./description/Description.js";import{FreeFormMenu as c}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as d,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as h}from"./searchbox/SearchZeroState.js";const b=304,j=290,S=S=>{let{options:g,isSearchable:v,isMultiSelect:O,width:x,allowFreeForm:y,height:F,onClose:w,onSelect:M}=S;const[D,A]=l(null!=g?g:[]),[B,C]=l(null!=x?x:j),[W,k]=l(""),[E,H]=l(null),I=n(null);i(I,(()=>{H(null),null==w||w()}));const L=null!=F?F:b,Z="number"==typeof L?v&&O?L-96:v&&!O||!v&&O?L-48:L:L;function q(e){if(O){const t=s(D,{selected:e.selected},(t=>t.value===e.value));A([...t])}else null==M||M(e)}o((()=>{const e=null!=x?x:j;if(null===E)C(e);else if("number"==typeof e)C(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));C(t)}}),[E]);const z=D.map((e=>{var t;if(W){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(W))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(W))?e:null}return e})).filter((e=>null!==e)),G=!!v&&W&&0===z.length;return e(d,Object.assign({ref:I,style:{maxWidth:E?800:400,width:B}},{children:[e("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!v&&t(f,{onSearch:function(e){k(e)}}),e(m,Object.assign({maxHeight:Z},{children:[!!O&&!G&&t(a,{options:D,onSelect:function(e){if("selectAll"===e){const e=s(D,{selected:!0},(e=>!e.disabled));A([...e])}else if("notSelected"===e){const e=s(D,{selected:!1},(e=>!e.disabled));A([...e])}}}),!y&&G&&t(h,{searchedString:W}),y&&G&&t(c,{isMultiSelect:O,onSelect:function(e){if(!O)return void q({label:W,value:W,isFreeForm:!0,selected:!0});const t=D.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===W&&t.value===W&&e})));e&&(t.some((e=>e.label===W&&e.value===W))||t.unshift({label:W,value:W,isFreeForm:!0,selected:!0})),A([...t])},searchedString:W}),t(u,{onSelect:q,showDescription:function(e,t){H(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:z})]})),!!O&&t(p,{onClear:function(){const e=s(D,{selected:!1});A([...e])},onApply:function(){const e=[];D.forEach((t=>{if(t.options){const l=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...l]}))}else t.selected&&e.push(Object.assign({},t))})),null==M||M([...e])},list:D})]})),!!E&&t(r,{title:E.title,description:E.description})]}))};export{S as OpenedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useRef as o,useEffect as n}from"react";import{ZeroState as i}from"../../../zeroState/ZeroState.js";import{useOutside as s}from"../../../../hooks/useOutside.js";import{iterateOnOptions as r}from"../utils/iterationOnOptions.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as u}from"./menu/FreeFormMenu.js";import{MenuList as a}from"./menu/MenuList.js";import{SelectAllMenu as p}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as m,MenuListContainer as f}from"./OpennedDropdown.styled.js";import{SearchBox as h}from"./searchbox/SearchBox.js";import{SearchZeroState as b}from"./searchbox/SearchZeroState.js";const j=304,g=290,S=S=>{let{options:v,isSearchable:O,isMultiSelect:x,width:y,allowFreeForm:w,height:F,onClose:M,onSelect:D}=S;const[A,B]=l(null!=v?v:[]),[C,H]=l(null!=y?y:g),[W,Z]=l(""),[k,z]=l(null),E=o(null);s(E,(()=>{z(null),null==M||M()}));const I=null!=F?F:j,L="number"==typeof I?O&&x?I-96:O&&!x||!O&&x?I-48:I:I;function N(e){if(x){const t=r(A,{selected:e.selected},(t=>t.value===e.value));B([...t])}else null==D||D(e)}n((()=>{const e=null!=y?y:g;if(null===k)H(e);else if("number"==typeof e)H(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));H(t)}}),[k]);const T=A.map((e=>{var t;if(W){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(W))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(W))?e:null}return e})).filter((e=>null!==e)),q=!!O&&W&&0===T.length;return e(m,Object.assign({ref:E,style:{maxWidth:k?800:400,width:C}},{children:[e("div",Object.assign({style:{width:k?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!O&&t(h,{onSearch:function(e){Z(e)}}),T.length||W?e(f,Object.assign({minHeight:I,maxHeight:L},{children:[!!x&&!q&&t(p,{options:A,onSelect:function(e){if("selectAll"===e){const e=r(A,{selected:!0},(e=>!e.disabled));B([...e])}else if("notSelected"===e){const e=r(A,{selected:!1},(e=>!e.disabled));B([...e])}}}),!w&&q&&t(b,{searchedString:W}),w&&q&&t(u,{isMultiSelect:x,onSelect:function(e){if(!x)return void N({label:W,value:W,isFreeForm:!0,selected:!0});const t=A.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===W&&t.value===W?e:t.selected})));e&&(t.some((e=>e.label===W&&e.value===W))||t.unshift({label:W,value:W,isFreeForm:!0,selected:!0})),B([...t])},searchedString:W}),t(a,{onSelect:N,showDescription:function(e,t){z(e&&t?{title:e,description:t}:null)},isMultiSelect:x,options:T})]})):t("div",Object.assign({style:{height:I,display:"flex"}},{children:t(i,{title:"No options passed",subTitle:"Sorry we could not find any options to show"})})),!!x&&!(!T.length&&!W)&&t(d,{onClear:function(){const e=r(A,{selected:!1});B([...e])},onApply:function(){const e=[];A.forEach((t=>{if(t.options){const l=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...l]}))}else t.selected&&e.push(Object.assign({},t))})),null==D||D([...e])},list:A})]})),!!k&&t(c,{title:k.title,description:k.description})]}))};export{S as OpenedDropdown};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts

@@ -2,4 +2,5 @@ export declare const OpennedDropdownContainer: import("styled-components").Style
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {
     maxHeight: number | string;
+    minHeight: number | string;
 }, never>;

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js

@@ -1,4 +1,4 @@
-import o from"styled-components";import{COLORS as e}from"../../../../constants/Theme.js";const t=o.div`
+import o from"styled-components";import{COLORS as e}from"../../../../constants/Theme.js";const r=o.div`
 	border-radius: 4px;
 	border: 1px solid ${e.stroke.primary};
 	max-height: 640px;
@@ -14,11 +14,13 @@ import o from"styled-components";import{COLORS as e}from"../../../../constants/T
 	border-bottom-style: solid;
 	border-bottom-color: ${e.stroke.primary};
 	width: 100%;
-	heigth: 100%;
-`;const i=o.div`
+	height: 100%;
+`;const t=o.div`
 	max-height: ${o=>"number"==typeof o.maxHeight?`${o.maxHeight}px`:o.maxHeight};
+
 	overflow-y: auto;
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-`;export{i as MenuListContainer,t as OpennedDropdownContainer};
+	background-color: ${e.surface.standard};
+`;export{t as MenuListContainer,r as OpennedDropdownContainer};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as o}from"react";import{CheckBox as r}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as i}from"../../../../TypographyStyle.js";import{COLORS as c}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const s=s=>{let{searchedString:l,onSelect:a,isMultiSelect:p}=s;const[f,h]=o(!1);function u(){h(!f),a(!f)}return e(n,{onClick:e=>{e.preventDefault(),u()},listItem:{label:l,value:l},trailingIcon:p?e(r,{isChecked:f,onValueChange:u}):e(t,{}),leadingIcon:e(m,{children:e(i,Object.assign({style:{color:c.content.secondary}},{children:"Freeform"}))})})};export{s as FreeFormMenu};
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as o}from"react";import{CheckBox as r}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as i}from"../../../../TypographyStyle.js";import{COLORS as c}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const s=s=>{let{searchedString:l,onSelect:a,isMultiSelect:p}=s;const[f,h]=o(!1);function u(){h(!f),a(!f)}return e(n,{onClick:e=>{e.preventDefault(),u()},listItem:{label:l,value:l},leadingIcon:p?e(r,{isChecked:f,onValueChange:u}):e(t,{}),trailingIcon:e(m,{children:e(i,Object.assign({style:{color:c.content.secondary}},{children:"Freeform"}))})})};export{s as FreeFormMenu};

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

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

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

@@ -3,7 +3,7 @@ import { DropdownOption, SingleOption } from '../../type';
 export declare function iterateOnOptions(options: DropdownOption[], newVal: Partial<SingleOption>, checkCB?: (optionForValidation: SingleOption) => boolean): ({
     label: string;
     value: string;
-    descriptions?: string | null | undefined;
+    description?: string | null | undefined;
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     isFreeForm?: boolean | undefined;
@@ -13,7 +13,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
 } | {
     label?: string | undefined;
     value?: string | undefined;
-    descriptions?: string | null | undefined;
+    description?: string | null | undefined;
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     isFreeForm?: boolean | undefined;

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

@@ -18,7 +18,7 @@ export type GroupedOption = {
 export type SingleOption = {
     label: string;
     value: string;
-    descriptions?: string | null;
+    description?: string | null;
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DropdownOption } from '../dropdown/type';
 import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from '../floating-action-button/FloatingActionButton.styles';
-import { TooltipPlacement } from '../tooltips';
+import { Placement } from '../tooltips';
 export declare const FABMenu: React.FC<{
     onSelect: (selected: DropdownOption | DropdownOption[]) => void;
     menuOptions: DropdownOption[];
@@ -14,8 +14,9 @@ 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;

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

@@ -1 +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:u,buttonPosition:p,menuWidth:c,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:u,position:p,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j},{children:t(o,{options:d,height:s||90,width:`${c}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/floating-action-button/FloatingActionButton.d.ts

@@ -1,6 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
-import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
+import { Placement } from '../tooltips';
 import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
@@ -13,9 +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{useState as n}from"react";import{Dropdown as e}from"react-bootstrap";import{COLORS as r}from"../../constants/Theme.js";import{TooltipPlacement as l,CustomisedTooltip as c}from"../tooltips/CustomisedTooltip.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,FloatingActionButtonContainer as u}from"./FloatingActionButton.styles.js";const w=i=>{const{width:n,height:e,color:r,onClick:l,icon:d,tooltipPlacement:h,tooltipText:p,isRound:a,isDropdownOpen:g}=i;return p?o(c,{isTooltipVisible:!g,tooltipContent:o(t,{children:p}),tooltipTriggerContent:o(u,Object.assign({width:n,height:e,color:r,onClick:l,isRound:a},{children:d||o(s,{width:22,height:22})})),tooltipPlacement:h,showOnHover:!0}):o(t,{children:o(u,Object.assign({width:n,height:e,color:r,onClick:l,isRound:a},{children:d||o(s,{width:22,height:22})}))})},b=c=>{const{icon:s,onClick:u,children:b,tooltipText:O,isRound:P=!0,width:T=48,height:j=48,color:C=r.background.inverse,position:k=d.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:f=20,zIndex:R=1,tooltipPlacement:D=l.Auto,dropPosition:z=h.DOWN,menuAligment:v=p.END}=c,[A,H]=n(!1);return o(t,{children:o(a,Object.assign({width:T,height:j,color:C,position:k,buttonPaddingHorizontal:x,buttonPaddingVertical:f,zIndex:R},{children:o(g,Object.assign({onToggle:(o,t)=>{H(o)},drop:z,align:v},{children:b?i(t,{children:[o(m,Object.assign({drop:z},{children:o(w,{width:T,height:j,color:C,tooltipPlacement:D,onClick:u,tooltipText:O,icon:s,position:k,isRound:P,isDropdownOpen:A})})),o(e.Menu,{children:b})]}):o(w,{width:T,height:j,color:C,tooltipPlacement:D,onClick:u,tooltipText:O,icon:s,position:k,isRound:P,isDropdownOpen:A})}))}))})};export{b 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

@@ -21,7 +21,7 @@ export declare const FloatingActionButtonContainer: import("styled-components").
     width: number;
     height: number;
     color: string;
-    isRound: boolean;
+    isRound?: boolean | undefined;
 }, never>;
 export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
@@ -45,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 e}from"../../constants/Theme.js";var i,r,n;!function(t){t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right"}(i||(i={})),function(t){t.UP="up",t.UP_CENTERED="up-centered",t.START="start",t.END="end",t.DOWN="down",t.DOWN_CENTERED="down-centered"}(r||(r={})),function(t){t.START="start",t.END="end"}(n||(n={}));const d=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;
-`,a=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===i.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===i.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===i.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===i.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
-`,p=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;
@@ -26,7 +26,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 			justify-content: flex-start;
 			gap: 8px;
 			padding: 14px;
-			border-bottom: 1px solid ${e.stroke.primary};
+			border-bottom: 1px solid ${i.stroke.primary};
 
 			:last-child {
 				border-bottom: none !important;
@@ -35,15 +35,15 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	}
 	button {
 		border: 1px solid
-			${t=>"true"===t.active?e.stroke.positive.lightAlt:e.stroke.primary};
+			${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?e.background.positive.light:e.surface.standard};
-		color: ${t=>"true"===t.active?e.content.positive:e.content.primary};
+		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,
@@ -51,8 +51,8 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	.btn-primary:focus,
 	.btn-primary.dropdown-toggle,
 	.show > .btn-primary.dropdown-toggle {
-		color: ${t=>"true"===t.active?e.content.positive:e.content.primary};
-		background-color: ${t=>"true"===t.active?e.background.positive.light:"transparent"};
+		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 {
@@ -61,13 +61,13 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	}
 
 	.dropdown-toggle::after {
-		border-top: 0.3em solid ${e.content.primary};
-		display: none;
+		border-top: 0.3em solid ${i.content.primary};
+		display: none !important;
 	}
 
 	.dropdown-toggle::before {
-		border-top: 0.3em solid ${e.content.primary};
-		display: none;
+		border-top: 0.3em solid ${i.content.primary};
+		display: none !important;
 	}
 	.dropdown-menu {
 		min-width: 12rem;
@@ -75,9 +75,9 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 	}
 	.dropdown-item:active,
 	.dropdown-item:hover {
-		color: ${e.content.positive};
+		color: ${i.content.positive};
 		text-decoration: none;
-		background-color: ${e.background.positive.light};
+		background-color: ${i.background.positive.light};
 	}
 `,s=o(t.Toggle)`
 	border-radius: 4px;
@@ -89,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{r as DROP_POSITION,s as DropdownToggleContainer,i as FAB_POSITION,d as FloatingActionButtonContainer,a as FloatingActionButtonOuterContainer,n as MENU_ALIGNMENT,p 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/input/ChipInput.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const extractSingleValueIfAny: (nativeID: string) => string;
+export declare const getInputNode: (nativeID: string) => HTMLInputElement;
+export interface ChipInputProps {
+    onChipsChange: (chips: (string | number)[]) => void;
+    placeholder: string;
+    label?: string;
+    labelColor?: string;
+    hintText?: string;
+    hintTextColor?: string;
+    chipTheme?: () => void;
+    chips: string[];
+    error?: string;
+    inputHeight?: number;
+    createChipKeys?: (string | number)[];
+    chipsContainerCustomStyle?: React.CSSProperties;
+    nativeID?: string;
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

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

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

@@ -0,0 +1,66 @@
+export declare const chipTheme: {
+    chip: {
+        padding: string;
+        background: string;
+        border: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        borderRadius: number;
+        alignItems: string;
+        alignContent: string;
+        justifyContent: string;
+        cursor: string;
+        margin: string;
+        fontFamily: string;
+    };
+    chipRemove: {
+        fontSize: number;
+        fontFamily: string;
+        cursor: string;
+        fontWeight: string;
+        color: string;
+        marginLeft: number;
+        ':hover': {
+            color: string;
+        };
+    };
+};
+export declare const theme: (error?: boolean, height?: number, chipsContainerCustomStyle?: Object, focused?: boolean) => {
+    chipsContainer: {
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        display: string;
+        position: string;
+        border: string;
+        backgroundColor: string;
+        alignItems: string;
+        flexWrap: string;
+        padding: string;
+        borderRadius: number;
+        ':hover': {
+            border: string;
+        };
+    };
+    container: {
+        flex: number;
+    };
+    containerOpen: {};
+    input: {
+        border: string;
+        outline: string;
+        boxSizing: string;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: number;
+        height: number;
+        width: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

package/dist/esm/components/input/ChipInput.styled.js

@@ -0,0 +1 @@
+import{COLORS as e}from"../../constants/Theme.js";const n={chip:{padding:"0px 8px 0px 8px",background:e.surface.subdued,border:`1px solid ${e.stroke.primary}`,fontSize:12,color:e.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.content.secondary,marginLeft:6,":hover":{color:e.content.secondary}}},o=(n,o,r,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.stroke.brand:n?e.stroke.negative.vibrant:e.stroke.primary}`,backgroundColor:e.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.stroke.brand}`}},null!=r?r:{}),container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});export{n as chipTheme,o as theme};

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

@@ -3,6 +3,7 @@ export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
 export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
 export interface InputProps {
+    noErrorHint?: boolean;
     placeholder?: string;
     variant?: InputVariant;
     width?: string;
@@ -26,7 +27,7 @@ export interface InputProps {
         validate:  function takes the input and returns boolean + string (error message in case of invalid input)
      **/
     validate?: (input?: string | number) => [boolean, string];
-    onChangeText: (input: string) => void;
+    onChangeText: (input: string, event?: Event) => void;
     button?: {
         text: string;
         onClick?: () => void;
@@ -34,7 +35,9 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
-    onBlur?: () => void;
+    onBlur?: (e: any) => void;
     onFocus?: () => void;
+    isActive?: boolean;
+    id?: string;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as h,InputWrapper as v,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=i(((i,C)=>{var I,O,w;const{placeholder:T,leftIcon:k,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:F,type:z,state:A,validate:E,variant:K,button:M,suffixText:R,prefixText:q,onChangeText:H,value:N}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),P=null==k?void 0:k.icon,W=null==B?void 0:B.icon,[G,J]=l(""),[Q,U]=l(!1),[V,X]=l(!1),[Y,Z]=l(),$="small"===K?"18px":"22px",_=r(d);o((()=>{Z(i.errorMessage)}),[i.errorMessage]),o((()=>{U(!1),("invalid"===i.state||Y)&&U(!0)}),[i.state,Y]),o((()=>{U(!!Y)}),[Y]),o((()=>{if(H(G),!E||!j(E))return;const[e,t]=E(G);U(!e),Z(t)}),[G]);const ee=function(e){if(j(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},te=e=>{![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},ne=e=>{J(e.target.value)},ie=()=>{var l;return e(n,{children:["multiline"!==z&&t("input",{style:null!==(l=null==_?void 0:_.input)&&void 0!==l?l:{},ref:C,type:z,value:N,onFocus:()=>(X(!0),void ee(i.onFocus)),onBlur:()=>(X(!1),void ee(i.onBlur)),placeholder:T||"Enter here",onChange:ne,onKeyDown:e=>te(e)}),"multiline"===z&&t("textarea",{value:N,ref:C,onFocus:()=>X(!0),onBlur:()=>X(!1),placeholder:T||"Enter here",onChange:ne,onKeyDown:e=>te(e)})]})};return e(u,Object.assign({width:i.width,height:i.height,state:A,type:z,style:null!==(I=null==_?void 0:_.RootContainer)&&void 0!==I?I:{}},{children:[(!!F||!!Y)&&e(h,Object.assign({invalid:!!Y},{children:[!!Y&&t(c,{}),Y||F]})),e(v,Object.assign({variant:K,state:A,width:i.width,isActive:"active"===A||V,isInvalid:Q,style:null!==(O=null==_?void 0:_.InputWrapper)&&void 0!==O?O:{}},{children:[!!P&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==k?void 0:k.callback),isLeft:!0,style:null!==(w=null==_?void 0:_.IconHolder)&&void 0!==w?w:{}},{children:t(P,{})})),!!q&&t(f,Object.assign({variant:K},{children:q})),"default"===K&&t(g,{children:ie()}),"small"===K&&t(m,{children:ie()}),!!W&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==k?void 0:k.callback),isLeft:!1},{children:t(W,{})})),!!R&&t(x,Object.assign({variant:K},{children:R})),M&&M.text&&t(a,{buttonText:M.text,onClick:()=>ee(null==M?void 0:M.onClick)})]})),(!!L||!!S)&&"default"===K&&e(y,Object.assign({invalid:Q},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[G.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import{forwardRef as n,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as v,InputWrapper as h,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=n(((n,C)=>{var w,I,O,T;const{placeholder:k,leftIcon:A,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:E,type:F,state:z,validate:H,variant:K,button:M,suffixText:R,prefixText:q,onChangeText:N,value:P,noErrorHint:W}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},n),G=null==A?void 0:A.icon,J=null==B?void 0:B.icon,[Q,U]=l(!1),[V,X]=l(!1),[Y,Z]=l(),$="small"===K?"18px":"22px",_=r(d);o((()=>{X(!!n.isActive)}),[n.isActive]),o((()=>{Z(n.errorMessage)}),[n.errorMessage]),o((()=>{U(!1),("invalid"===n.state||Y)&&U(!0)}),[n.state,Y]),o((()=>{U(!!Y)}),[Y]);const ee=function(e){if(j(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},te=e=>{N(P||"",e),![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},ie=e=>{const t=e.target.value;if(N(t,e),!H||!j(H))return;const[i,n]=H(t);U(!i),Z(n)},ne=()=>{var l;return e(i,{children:["multiline"!==F&&t("input",{id:n.id,style:null!==(l=null==_?void 0:_.input)&&void 0!==l?l:{},ref:C,type:F,value:P,onFocus:()=>(X(!0),void ee(n.onFocus)),onBlur:e=>(e=>{var t;X(!1),ee(null===(t=n.onBlur)||void 0===t?void 0:t.call(n,e))})(e),placeholder:k||"Enter here",onChange:ie,onKeyDown:e=>te(e)}),"multiline"===F&&t("textarea",{value:P,ref:C,onFocus:()=>X(!0),onBlur:()=>X(!1),placeholder:k||"Enter here",onChange:ie,onKeyDown:e=>te(e)})]})};return e(u,Object.assign({width:n.width,height:n.height,state:z,type:F,style:null!==(w=null==_?void 0:_.RootContainer)&&void 0!==w?w:{}},{children:[!W&&(!!E||!!Y)&&e(v,Object.assign({invalid:!!Y},{children:[!!Y&&t(c,{width:16,height:16}),Y||E]})),e(h,Object.assign({variant:K,state:z,width:n.width,isActive:"active"===z||V,isInvalid:Q,style:null!==(I=null==_?void 0:_.InputWrapper)&&void 0!==I?I:{}},{children:[!!G&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==A?void 0:A.callback),isLeft:!0,style:null!==(O=null==_?void 0:_.IconHolder)&&void 0!==O?O:{}},{children:t(G,{})})),!!q&&t(f,Object.assign({variant:K},{children:q})),"default"===K&&t(g,{children:ne()}),"small"===K&&t(m,{children:ne()}),!!J&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==B?void 0:B.callback),isLeft:!1},{children:t(J,{})})),!!R&&t(x,Object.assign({variant:K},{children:R})),M&&M.text&&t(a,{buttonText:M.text,onClick:()=>ee(null==M?void 0:M.onClick)})]})),(!!L||!!S)&&"default"===K&&e(y,Object.assign({invalid:Q},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[null===(T=n.value)||void 0===T?void 0:T.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};