@bikdotai/bik-component-library 0.0.783-beta.6 → 0.0.783-beta.7

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as f}from"./menu/SelectAllMenu.js";import m from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const O=304,y=290,w=w=>{let{options:x,isSearchable:k,isMultiSelect:C,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:M,onSelect:E,onSearch:A,version:B,skipSorting:F,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1}=w;var ee;const te=r((e=>{if(!X||!C)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,C]),[oe,ne]=i((()=>te(x))),re=s(oe),ie=s(!1),se=s(Y);l((()=>{ne(te(x))}),[x,te]),l((()=>{re.current=oe}),[oe]),l((()=>{se.current=Y}),[Y]),l((()=>()=>{ie.current&&se.current&&se.current(re.current)}),[]);const le=r((e=>{ne(e),"2.0"===B?null==Y||Y(e):ie.current=!0}),[Y,B]),ce=X?oe:x,{dropdownOptions:ae,search:ue,searchedString:de,searchedOptions:pe,searchError:he,retrySearch:ge,onApplyHandler:fe,selectAllHandler:me,onMultiSelectClear:be,onFreeFormSelect:ve,onMultiSelectApply:Se,latestDropdownOptionsRef:je,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(B,ce,E,F||X,C,A,N,U,D),[we,xe]=i(null!=L?L:y),[ke,Ce]=i(null),[De,Le]=i(-1),Ie=s(null),Te=s([]),Me=s(null);a(Ie,(()=>{if(Ce(null),C&&"2.0"===B){const e=Oe(je.current);null==M||M(e)}else null==M||M(ae)}),[H,Te]),l((()=>{const e=setTimeout((()=>{Ie.current&&Ie.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(de&&A?pe:ae);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Le((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Le((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&De>=0){e.preventDefault();const o=t[De];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Ie.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[De,de,pe,ae,A,fe,V]);const Ee=null!=T?T:O,Ae="number"==typeof Ee?k&&C?Ee-96:k&&!C||!k&&C?Ee-48:Ee:Ee;l((()=>{const e=null!=L?L:y;if(null===ke)xe(e);else if("number"==typeof e)xe(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));xe(t)}}),[ke]);const Be=[],Fe=(e=>{if(!C||!D&&0!==D)return e;const t=ye(ae)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((de&&A?pe:ae).map((e=>{var t,o;if(de&&!A){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.toLowerCase().includes(de.toLowerCase()))&&(Be.push(!de||e.label===de),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(de.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(de.toLowerCase()))?(Be.push(!de||e.label===de),e):null}return e})).filter((e=>null!==e))),He=!!k&&de&&0===Fe.length,Re=!de&&!!$,qe=!de&&!!K&&!Re,ze=!(de||Fe.length||Re||qe),Pe=Re||qe||ze,Ve=(null==Q?void 0:Q.title)||"No results found",We=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",Ze=(null==K?void 0:K.title)||"Failed to load options",$e=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ke={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ne=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ne.actionButton=Object.assign(Object.assign({},Ke),null!==(ee=null==K?void 0:K.actionButton)&&void 0!==ee?ee:{});const Ue=Re?void 0:qe?Ne:Q;return t(b,Object.assign({version:B,ref:Ie,tabIndex:-1,style:Object.assign(Object.assign({width:we},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!k&&e(S,{onSearch:ue,version:B}),Pe?e("div",Object.assign({style:{height:Ee,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ue?Ue:{},{isLoading:Re,title:qe?Ze:Ve,subTitle:qe?$e:We}))})):t(v,Object.assign({minHeight:Ee,maxHeight:Ae,ref:Me},{children:[!!C&&!He&&!R&&e(f,{version:B,options:de&&A?pe:ae,onSelect:me}),!I&&He&&e(j,{isLoading:Z,errorMessage:he,onRetry:ge,height:Ae,searchedString:de,containerWidth:L}),I&&(He||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:B,isMultiSelect:C,onSelect:ve,searchedString:de}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:B,onSelect:fe,showDescription:function(e,t){Ce(e&&t?{title:e,description:t}:null)},isMultiSelect:C,options:Fe,useDefaultCursor:G,ref:Te,focusedIndex:De,isDraggable:X,onOptionsReorder:le})]})),!!C&&!Pe&&"2.0"!==B&&e(m,{onClear:()=>{be(),null==P||P()},onApply:Se,list:de&&A?pe:ae,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:B})]}))};export{w as OpenedDropdown};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){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.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};

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

@@ -17,6 +17,7 @@ interface MenuItemProps {
     onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
     onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
     isDraggedOver?: boolean;
+    showCheckboxForCustomElement?: boolean;
 }
 export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,16 +1,16 @@
-import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import l from"styled-components";import{CheckBox as a}from"../../../../checkBox/CheckBox.js";import{ListItem as s}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=l(s)`
+import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import s from"styled-components";import{CheckBox as l}from"../../../../checkBox/CheckBox.js";import{ListItem as a}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=s(a)`
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,v=l.div`
+`,h=s.div`
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: ${e=>{let{version:n}=e;return"1.0"===n?"0":"8px"}};
-	padding: ${e=>{let{version:n}=e;return"1.0"===n?"0":"4px"}};
+	border-radius: ${e=>{let{version:o}=e;return"1.0"===o?"0":"8px"}};
+	padding: ${e=>{let{version:o}=e;return"1.0"===o?"0":"4px"}};
 	min-width: 148px;
-	border: ${e=>{let{version:n}=e;return"1.0"===n?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
+	border: ${e=>{let{version:o}=e;return"1.0"===o?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
 	max-height: 248px;
 	overflow-y: auto;
-`,h=l.div`
+`,v=s.div`
 	display: grid;
 	grid-template-columns: repeat(2, 2.86px);
 	grid-template-rows: repeat(3, 2.86px);
@@ -22,22 +22,22 @@ import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import t from"..
 	align-self: center;
 	height: fit-content;
 	min-height: 18px;
-`,x=l.div`
+`,b=s.div`
 	width: 2.86px;
 	height: 2.86px;
 	border-radius: 50%;
 	background-color: ${g.content.inactive};
 	flex-shrink: 0;
-`,b=l.div`
+`,x=s.div`
 	display: flex;
 	align-content: center;
 	justify-content: center;
 	gap: 8px;
-`,f=l.div`
+`,f=s.div`
 	margin-right: -4px;
-`,D=l.div`
+`,D=s.div`
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	flex: 1;
-`,j=n=>{let{onDragStart:t,onDragEnd:r}=n;return o(h,Object.assign({draggable:!0,onDragStart:t,onDragEnd:r},{children:[e(x,{}),e(x,{}),e(x,{}),e(x,{}),e(x,{}),e(x,{})]}))},y=r(((r,l)=>{let{option:s,isMultiSelect:h,showDescription:x,onSelect:y,last:I,version:O,onDropdownItemClick:C,useDefaultCursor:k,isFocused:w=!1,dataIndex:T=-1,isDraggable:$=!1,onDragStart:S,onDragOver:E,onDrop:F,onDragEnd:M,isDraggedOver:L=!1}=r;var B;const[A,V]=i(s.selected),z=(e,n)=>{if(!e.children){R(!e.selected);const o=n?Object.assign(Object.assign({},e),{parent:n}):e;null==C||C(o)}},R=e=>{s.disabled||y(Object.assign(Object.assign({},s),{selected:e}))},U=k?{cursor:"default"}:{};return e(n,{children:e(d,Object.assign({body:"",tooltipContent:s.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:l,onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:e(v,Object.assign({version:null!=O?O:"2.0"},{children:s.children.map((n=>{var o;return e(u,{version:O,style:"1.0"!==O&&(null!==(o=null==s?void 0:s.children)&&void 0!==o?o:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),z(n,s)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:s.disabled?"inactive":n.selected?"selected":"default"},n.value)}))}))})):e(n,{}),placement:"right-start",hideArrow:!0},{children:e(u,{version:O,style:I?Object.assign(Object.assign({borderBottom:0},U),L?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},U),L?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),z(s)},onMouseOver:()=>{s.description?x(s.label,s.description):x()},listItem:{value:s.value,label:s.label},subText:s.subText,"data-option-index":T,role:"option",id:`dropdown-option-${T}`,"aria-selected":!!s.selected,onDragOver:$?E:void 0,onDrop:$?F:void 0,leadingIcon:h?o(b,{children:[$&&e(j,{onDragStart:S,onDragEnd:M}),e(a,{size:"2.0"===O?"SMALL":"DEFAULT",isDisabled:null!==(B=s.disabled)&&void 0!==B&&B,isChecked:!!s.selected,onValueChange:R}),e(f,{children:s.leadingIcon})]}):$?o(D,{children:[e(j,{onDragStart:S,onDragEnd:M}),s.leadingIcon&&e("div",{children:s.leadingIcon})]}):s.leadingIcon?e(n,{children:s.leadingIcon}):void 0,customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(m,{children:e(c,Object.assign({style:{color:g.content.secondary}},{children:"Freeform"}))}):s.children?e(t,{width:12,height:12}):s.trailingIcon?e(n,{children:s.trailingIcon}):void 0,variant:s.disabled?"inactive":w||s.selected||!h&&A?"selected":"default"})}))})}));export{y as MenuItem};
+`,j=o=>{let{onDragStart:t,onDragEnd:r}=o;return n(v,Object.assign({draggable:!0,onDragStart:t,onDragEnd:r},{children:[e(b,{}),e(b,{}),e(b,{}),e(b,{}),e(b,{}),e(b,{})]}))},C=r(((r,s)=>{let{option:a,isMultiSelect:v,showDescription:b,onSelect:C,last:y,version:I,onDropdownItemClick:O,useDefaultCursor:k,isFocused:w=!1,dataIndex:S=-1,isDraggable:T=!1,onDragStart:E,onDragOver:$,onDrop:F,onDragEnd:L,isDraggedOver:M=!1,showCheckboxForCustomElement:A=!1}=r;var B,V;const[z,U]=i(a.selected),R=(e,o)=>{if(!e.children){q(!e.selected);const n=o?Object.assign(Object.assign({},e),{parent:o}):e;null==O||O(n)}},q=e=>{a.disabled||C(Object.assign(Object.assign({},a),{selected:e}))},G=k?{cursor:"default"}:{};return e(o,{children:e(d,Object.assign({body:"",tooltipContent:a.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:s,onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1)},{children:e(h,Object.assign({version:null!=I?I:"2.0"},{children:a.children.map((o=>{var n;return e(u,{version:I,style:"1.0"!==I&&(null!==(n=null==a?void 0:a.children)&&void 0!==n?n:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),R(o,a)},listItem:{value:o.value,label:o.label},subText:o.subText,leadingIcon:o.leadingIcon||void 0,customComponent:o.customComponent,trailingIcon:o.trailingIcon||void 0,variant:a.disabled?"inactive":o.selected?"selected":"default"},o.value)}))}))})):e(o,{}),placement:"right-start",hideArrow:!0},{children:e(u,{version:I,style:y?Object.assign(Object.assign({borderBottom:0},G),M?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},G),M?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),R(a)},onMouseOver:()=>{a.description?b(a.label,a.description):b()},listItem:{value:a.value,label:a.label},subText:a.subText,"data-option-index":S,role:"option",id:`dropdown-option-${S}`,"aria-selected":!!a.selected,onDragOver:T?$:void 0,onDrop:T?F:void 0,leadingIcon:!v||A&&a.customComponent?T?n(D,{children:[e(j,{onDragStart:E,onDragEnd:L}),a.leadingIcon&&e("div",{children:a.leadingIcon})]}):a.leadingIcon?e(o,{children:a.leadingIcon}):void 0:n(x,{children:[T&&e(j,{onDragStart:E,onDragEnd:L}),e(l,{size:"2.0"===I?"SMALL":"DEFAULT",isDisabled:null!==(B=a.disabled)&&void 0!==B&&B,isChecked:!!a.selected,onValueChange:q}),e(f,{children:a.leadingIcon})]}),customComponent:v&&A&&a.customComponent?n(x,{children:[T&&e(j,{onDragStart:E,onDragEnd:L}),e(l,{size:"2.0"===I?"SMALL":"DEFAULT",isDisabled:null!==(V=a.disabled)&&void 0!==V&&V,isChecked:!!a.selected,onValueChange:q}),a.customComponent]}):a.customComponent,trailingIcon:a.isFreeForm?e(m,{children:e(c,Object.assign({style:{color:g.content.secondary}},{children:"Freeform"}))}):a.children?e(t,{width:12,height:12}):a.trailingIcon?e(o,{children:a.trailingIcon}):void 0,variant:a.disabled?"inactive":w||a.selected||!v&&z?"selected":"default"})}))})}));export{C as MenuItem};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts

@@ -12,6 +12,7 @@ interface MenuListProps {
     focusedIndex?: number;
     isDraggable?: boolean;
     onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
+    showCheckboxForCustomElement?: boolean;
 }
 export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement[]>>;
 export {};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as a}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:d,isMultiSelect:p,showDescription:f,onSelect:g,version:m,onInfiniteScroll:D,onDropdownItemClick:b,useDefaultCursor:v,focusedIndex:h=-1,isDraggable:I=!1,onOptionsReorder:w}=r;const j=o(null),S=o(null),[O,C]=s(null),[M,x]=s(null),y=l((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==D||D())})),S.current&&j.current.observe(S.current)}),[D]);i((()=>(y(),()=>{j.current&&j.current.disconnect()})),[y,d]);const E=l((e=>n=>{I&&(C(e),n.dataTransfer.effectAllowed="move")}),[I]),k=l((e=>n=>{I&&(n.preventDefault(),n.dataTransfer.dropEffect="move",x(e))}),[I]),T=l((e=>n=>{if(I&&null!==O){if(n.preventDefault(),O!==e){const n=[...d],[t]=n.splice(O,1);n.splice(e,0,t),null==w||w(n)}C(null),x(null)}}),[I,O,d,w]),F=l((()=>{C(null),x(null)}),[]),R=new Map;let $=-1;return d.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||($++,R.set(e,$))}));else{const n=e;n.disabled||($++,R.set(n,$))}})),e(n,{children:d.map(((n,r)=>{const o=r===d.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===m?2:0}},{children:[t(a,Object.assign({version:m},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=R.get(n),l=o===h&&!n.disabled;return e(c,{version:m,last:t===s.options.length-1,onSelect:g,showDescription:f,onDropdownItemClick:b,isMultiSelect:p,option:n,useDefaultCursor:v,isFocused:l,dataIndex:o,isDraggable:!1,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:S}):null]}),r)}const s=n,l=R.get(s),i=l===h&&!s.disabled;return t("div",{children:[e(c,{version:m,last:o,onSelect:g,showDescription:f,onDropdownItemClick:b,isMultiSelect:p,option:s,useDefaultCursor:v,isFocused:i,dataIndex:l,isDraggable:I,onDragStart:E(r),onDragOver:k(r),onDrop:T(r),onDragEnd:F,isDraggedOver:M===r,ref:e=>{u&&"object"==typeof u&&u.current&&e&&(u.current[r]=e)}},s.value),o?e("span",{ref:S}):null]},r)}))})}));export{u as MenuList};
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as u}from"./MenuList.styled.js";const a=r(((r,a)=>{let{options:d,isMultiSelect:p,showDescription:f,onSelect:m,version:g,onInfiniteScroll:h,onDropdownItemClick:D,useDefaultCursor:b,focusedIndex:v=-1,isDraggable:w=!1,onOptionsReorder:C,showCheckboxForCustomElement:I=!1}=r;const j=o(null),x=o(null),[S,E]=s(null),[O,k]=s(null),M=l((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==h||h())})),x.current&&j.current.observe(x.current)}),[h]);i((()=>(M(),()=>{j.current&&j.current.disconnect()})),[M,d]);const y=l((e=>n=>{w&&(E(e),n.dataTransfer.effectAllowed="move")}),[w]),F=l((e=>n=>{w&&(n.preventDefault(),n.dataTransfer.dropEffect="move",k(e))}),[w]),T=l((e=>n=>{if(w&&null!==S){if(n.preventDefault(),S!==e){const n=[...d],[t]=n.splice(S,1);n.splice(e,0,t),null==C||C(n)}E(null),k(null)}}),[w,S,d,C]),R=l((()=>{E(null),k(null)}),[]),$=new Map;let A=-1;return d.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(A++,$.set(e,A))}));else{const n=e;n.disabled||(A++,$.set(n,A))}})),e(n,{children:d.map(((n,r)=>{const o=r===d.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===g?2:0}},{children:[t(u,Object.assign({version:g},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=$.get(n),l=o===v&&!n.disabled;return e(c,{version:g,last:t===s.options.length-1,onSelect:m,showDescription:f,onDropdownItemClick:D,isMultiSelect:p,option:n,useDefaultCursor:b,isFocused:l,dataIndex:o,isDraggable:!1,showCheckboxForCustomElement:I,ref:e=>{a&&"object"==typeof a&&a.current&&e&&e&&e&&e&&(a.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:x}):null]}),r)}const s=n,l=$.get(s),i=l===v&&!s.disabled;return t("div",{children:[e(c,{version:g,last:o,onSelect:m,showDescription:f,onDropdownItemClick:D,isMultiSelect:p,option:s,useDefaultCursor:b,isFocused:i,dataIndex:l,isDraggable:w,onDragStart:y(r),onDragOver:F(r),onDrop:T(r),onDragEnd:R,isDraggedOver:O===r,showCheckboxForCustomElement:I,ref:e=>{a&&"object"==typeof a&&a.current&&e&&(a.current[r]=e)}},s.value),o?e("span",{ref:x}):null]},r)}))})}));export{a as MenuList};

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

@@ -56,6 +56,8 @@ export interface OpenDropdownProps {
     onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
     /** z-index of the dropdown popover. Defaults to 3. */
     dropdownZIndex?: number;
+    /** When true, renders a checkbox alongside the customComponent in multiselect mode */
+    showCheckboxForCustomElement?: boolean;
 }
 export type GroupedOption = {
     label?: string;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Placement } from "../tooltips";
 import { DropdownOption, OpenDropdownProps } from '../dropdown/type';
 import { FloaterProps } from '../floater/floater';
-import { InputProps } from '../input/Input.model';
+import { InputProps } from '../input';
 type DropdownProps = OpenDropdownProps & {
     isLoading?: boolean;
     children?: React.ReactNode;

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

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

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

@@ -1,5 +1,5 @@
 import { CompressImageOptions } from "../../image-compress";
-import { BikImageCropperProps } from '../BikImageCropper.model';
+import { BikImageCropperProps } from "..";
 /**
  * Todos
  * 	- Add option to pass https url in the src / edit an image

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r}from"react";import{COLORS as o}from"../../constants/Theme.js";import{BodySecondary as s,BodyCaption as l}from"../TypographyStyle.js";import{getContainerStyle as i,getContainerHoverStyle as c,getChipStyle as a,getChipRemoveStyle as u,getInputStyle as d}from"./ChipInput.styled.js";const p=p=>{let{onChipsChange:y,placeholder:h,chips:g,label:m,labelColor:v,hintText:b,hintTextColor:f,error:C,inputHeight:j,createChipKeys:k,chipsContainerCustomStyle:x,nativeID:T}=p;const[O,D]=n(""),[M,E]=n(!1),w=r(null),B=k||[",",188,"Enter",13],I=i(!!C,j,x,M),K=M?{}:c(),L=a(),S=u(),$=d(j);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:T},{children:[m&&t(s,Object.assign({style:{color:M?o.content.brand:C?o.content.negative:v||o.content.primary}},{children:m})),e("div",Object.assign({style:I,onClick:()=>{var e;null===(e=w.current)||void 0===e||e.focus()},onMouseEnter:e=>{M||Object.assign(e.currentTarget.style,K)},onMouseLeave:e=>{M||(e.currentTarget.style.border=`1px solid ${C?o.stroke.negative.vibrant:o.stroke.primary}`)}},{children:[g.map(((n,r)=>e("div",Object.assign({style:L},{children:[t("span",{children:n}),t("button",Object.assign({style:S,onClick:e=>{var t;e.stopPropagation(),t=r,y(g.filter(((e,n)=>n!==t)))},onMouseEnter:e=>{e.currentTarget.style.color=o.content.secondary},onMouseLeave:e=>{e.currentTarget.style.color=o.content.secondary},"aria-label":`Remove ${n}`},{children:"×"}))]}),r))),t("input",{ref:w,type:"text",value:O,onChange:e=>D(e.target.value),onKeyDown:e=>{if(B.includes(e.key)||B.includes(e.keyCode)||B.includes(e.which)){e.preventDefault();const t=O.trim();t&&!g.includes(t)&&(y([...g,t]),D(""))}else"Backspace"===e.key&&""===O&&g.length>0&&y(g.slice(0,-1))},onFocus:()=>{E(!0)},onBlur:()=>{E(!1);const e=O.trim();e&&!g.includes(e)&&(y([...g,e]),D(""))},placeholder:0===g.length&&h&&!M?h:void 0,style:$})]})),(!!b||!!C)&&t(l,Object.assign({style:{color:C?o.content.negative:f||o.content.secondary}},{children:C||b}))]}))};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/ChipInput.styled.d.ts

@@ -1,6 +1,66 @@
-import React from 'react';
-export declare const getChipStyle: () => React.CSSProperties;
-export declare const getChipRemoveStyle: () => React.CSSProperties;
-export declare const getContainerStyle: (error?: boolean, height?: number, chipsContainerCustomStyle?: React.CSSProperties, focused?: boolean) => React.CSSProperties;
-export declare const getContainerHoverStyle: () => React.CSSProperties;
-export declare const getInputStyle: (height?: number) => React.CSSProperties;
+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

@@ -1 +1 @@
-import{COLORS as n}from"../../constants/Theme.js";const e=()=>({padding:"0px 8px 0px 8px",background:n.surface.subdued,border:`1px solid ${n.stroke.primary}`,fontSize:12,color:n.content.secondary,fontWeight:400,borderRadius:4,display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter",marginBottom:"2px",marginTop:"2px",height:24}),r=()=>({fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:n.content.secondary,marginLeft:6,background:"none",border:"none",padding:0,display:"inline-flex",alignItems:"center"}),o=(e,r,o,t)=>Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?n.stroke.brand:e?n.stroke.negative.vibrant:n.stroke.primary}`,backgroundColor:n.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,cursor:"text",minHeight:r||32},o),t=()=>({border:`2px solid ${n.stroke.brand}`}),i=n=>({border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:n||32,flex:1,minWidth:120,paddingTop:0,paddingBottom:0,backgroundColor:"transparent"});export{r as getChipRemoveStyle,e as getChipStyle,t as getContainerHoverStyle,o as getContainerStyle,i as getInputStyle};
+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-helper.d.ts

@@ -1,4 +1,4 @@
-import { InputTypeI } from './Input.model';
+import { InputTypeI } from "./Input";
 export declare const isFunction: (fn: any) => boolean;
 export declare const sanitizeUnsafeInput: (input: string) => string;
 export declare const shouldSanitizeForType: (type: InputTypeI) => boolean;

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

@@ -1,3 +1,74 @@
 import React from 'react';
-import { InputProps } from './Input.model';
+import { ButtonProps } from '../button/model';
+export type InputVariant = 'default' | 'small' | 'x-small';
+export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+export interface InputProps {
+    'data-test'?: string;
+    noErrorHint?: boolean;
+    placeholder?: string;
+    variant?: InputVariant;
+    width?: string;
+    height?: string;
+    leftIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    rightIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    labelElement?: React.ReactNode;
+    labelText?: string;
+    maxCharLimit?: number;
+    isRequired?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    state?: InputStateI;
+    type?: InputTypeI;
+    /**
+        validate:  function takes the input and returns boolean + string (error message in case of invalid input)
+     **/
+    validate?: (input?: string | number) => [boolean, string];
+    onChangeText: (input: string, event?: Event) => void;
+    button?: {
+        text: string;
+        onClick?: () => void;
+        buttonProps?: ButtonProps;
+    };
+    suffixText?: string;
+    prefixText?: string;
+    value?: string;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
+    tooltipText?: string;
+    autoGrow?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
+    hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
+    hideInputHeader?: boolean;
+    hideBorder?: boolean;
+    inputWrapperStyles?: React.CSSProperties;
+    minCharsToTrigger?: number;
+    isDisabled?: boolean;
+    allowUnsafeInput?: boolean;
+}
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputStateI, InputTypeI, InputVariant } from './Input.model';
+import { InputStateI, InputTypeI, InputVariant } from "./Input";
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/dist/esm/components/input-with-vars/InputWithVariables.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
-import { InputTypeI } from '../input/Input.model';
+import { InputTypeI } from '../input';
 import { PickerType } from '../variable-picker-v3/model';
 export interface InputWithVariablesProps {
     type?: InputTypeI;

package/dist/esm/components/list-item/ListItem.d.ts

@@ -1,3 +1,19 @@
 /// <reference types="react" />
-import { ListItemProps } from './List.model';
+export type Variant = 'default' | 'selected' | 'inactive' | 'error' | 'readonly' | 'placeholder' | 'separator';
+export interface ListItemElement {
+    label: string;
+    value: string;
+}
+export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: Variant;
+    subText?: string;
+    listItem: ListItemElement;
+    onSelect?: (ListItemElement: any) => void;
+    leadingIcon?: JSX.Element;
+    trailingIcon?: JSX.Element;
+    borderBottom?: string;
+    customComponent?: JSX.Element;
+    customListItemLabel?: JSX.Element;
+    version?: '1.0' | '2.0';
+}
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/list-item/ListItem.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Variant } from './List.model';
+import type { Variant } from './ListItem';
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/dist/esm/components/list-item/themes.d.ts

@@ -1,3 +1,3 @@
-import type { Variant } from './List.model';
+import type { Variant } from './ListItem';
 export declare function getColor(variant: Variant): string;
 export declare function getTheme(variant: Variant, version?: '1.0' | '2.0'): import("@emotion/utils").SerializedStyles;

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupedOption, MultiLevelDropdownOption, RenderNestedMenu } from './type';
+import { GroupedOption, MultiLevelDropdownOption } from './type';
 export declare const GroupedMenuList: React.FC<{
     width: string;
     onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
@@ -9,5 +9,4 @@ export declare const GroupedMenuList: React.FC<{
     maxLevels?: number;
     hideGroupLabel?: boolean;
     currentLevel: number;
-    renderNestedMenu: RenderNestedMenu;
 }>;

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as o}from"../../constants/Theme.js";import{BodyTiny as r}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const p=p=>{let{width:i,onDropdownItemClick:s,option:a,parents:m,allowParentSelection:d,maxLevels:c,hideGroupLabel:u,currentLevel:h,renderNestedMenu:x}=p;return e(l,{children:[!u&&t(r,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:o.content.placeholder},{children:a.label})),a.options.map(((e,o)=>t(n,{width:i,onDropdownItemClick:s,option:e,parents:m,allowParentSelection:d,maxLevels:c,currentLevel:h,renderNestedMenu:x},o)))]})};export{p as GroupedMenuList};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as t}from"../../constants/Theme.js";import{BodyTiny as r}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const p=p=>{let{width:i,onDropdownItemClick:a,option:m,parents:s,allowParentSelection:c,maxLevels:d,hideGroupLabel:u,currentLevel:h}=p;return e(l,{children:[!u&&o(r,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:t.content.placeholder},{children:m.label})),m.options.map(((e,t)=>o(n,{width:i,onDropdownItemClick:a,option:e,parents:s,allowParentSelection:c,maxLevels:d,currentLevel:h},t)))]})};export{p as GroupedMenuList};

package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MultiLevelDropdownOption, RenderNestedMenu, SingleOption } from './type';
+import { MultiLevelDropdownOption, SingleOption } from './type';
 export declare const MenuItem: React.FC<{
     width: string;
     onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
@@ -8,5 +8,4 @@ export declare const MenuItem: React.FC<{
     allowParentSelection?: boolean;
     maxLevels?: number;
     currentLevel: number;
-    renderNestedMenu: RenderNestedMenu;
 }>;

package/dist/esm/components/multi-level-dropdown/MenuItem.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l}from"react";import{COLORS as r}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:j,option:y,parents:w,allowParentSelection:M,maxLevels:O,currentLevel:S,renderNestedMenu:x}=b;var C,I,T,L,k,D,E;const[N,P]=i.useState(!1),[R,B]=i.useState(!1),[H,W]=i.useState({top:0,left:0}),q=l({top:0,left:0}),z=!!y.children&&y.children.length>0,A=z&&(void 0===O||S<O);return e(d,Object.assign({onMouseEnter:e=>{A&&(P(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();W({top:t.top,left:t.right}),q.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{P(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!j||null!==(e=y.disabled)&&void 0!==e&&e||z&&!M||j(y,w)})()},id:"menuItemWrapper",style:{cursor:null!==(C=y.disabled)&&void 0!==C&&C?"not-allowed":"pointer",backgroundColor:null!==(I=y.disabled)&&void 0!==I&&I?r.surface.standard:"transparent"}},{children:[y.customComponent?y.customComponent:e(a,Object.assign({isSelected:y.selected,isSubMenuOpen:N,isHovered:R,isDisabled:null!==(T=y.disabled)&&void 0!==T&&T},{children:[e(p,{children:[y.leadingIcon&&t(u,{children:y.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(L=y.disabled)&&void 0!==L&&L?r.content.inactive:y.selected||R?r.content.positive:r.content.primary}},{children:y.label})),y.subText&&t(c,Object.assign({style:{color:null!==(k=y.disabled)&&void 0!==k&&k?r.content.inactive:y.selected||R?r.content.positive:r.content.secondary,marginTop:"2px"}},{children:y.subText}))]})]}),z?t(h,{children:t(o,{width:16,height:16,color:!A||null!==(D=y.disabled)&&void 0!==D&&D?r.content.inactive:y.selected||R?r.content.positive:r.content.primary})}):y.trailingIcon?t(h,{children:y.trailingIcon}):t(n,{})]})),!(null!==(E=y.disabled)&&void 0!==E&&E)&&y.children&&y.children.length>0&&A&&N&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},{children:t(v,Object.assign({width:f,top:H.top,left:H.left},{children:t(g,{children:x(y.children,[...w,y],S+1)})}))}))]}))};export{b as MenuItem};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l,Suspense as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as c,BodyTiny as d}from"../TypographyStyle.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as u,LeadingIconContainer as h,TrailingIconContainer as m,SubMenuContainer as v,StyledSubMenuWrapper as g,SubMenuListContainer as b}from"./MultiLevelDropdown.styled.js";const f=i.lazy((()=>import("./MenuList.js").then((e=>({default:e.MenuList}))))),j=j=>{let{width:w,onDropdownItemClick:y,option:L,parents:M,allowParentSelection:O,maxLevels:S,currentLevel:x}=j;var C,I,T,k,D,P,E;const[R,z]=i.useState(!1),[B,H]=i.useState(!1),[N,W]=i.useState({top:0,left:0}),q=l({top:0,left:0}),A=!!L.children&&L.children.length>0,F=A&&(void 0===S||x<S);return e(a,Object.assign({onMouseEnter:e=>{F&&(z(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();W({top:t.top,left:t.right}),q.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{z(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!y||null!==(e=L.disabled)&&void 0!==e&&e||A&&!O||y(L,M)})()},id:"menuItemWrapper",style:{cursor:null!==(C=L.disabled)&&void 0!==C&&C?"not-allowed":"pointer",backgroundColor:null!==(I=L.disabled)&&void 0!==I&&I?s.surface.standard:"transparent"}},{children:[L.customComponent?L.customComponent:e(p,Object.assign({isSelected:L.selected,isSubMenuOpen:R,isHovered:B,isDisabled:null!==(T=L.disabled)&&void 0!==T&&T},{children:[e(u,{children:[L.leadingIcon&&t(h,{children:L.leadingIcon}),e("div",{children:[t(c,Object.assign({style:{color:null!==(k=L.disabled)&&void 0!==k&&k?s.content.inactive:L.selected||B?s.content.positive:s.content.primary}},{children:L.label})),L.subText&&t(d,Object.assign({style:{color:null!==(D=L.disabled)&&void 0!==D&&D?s.content.inactive:L.selected||B?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:L.subText}))]})]}),A?t(m,{children:t(o,{width:16,height:16,color:!F||null!==(P=L.disabled)&&void 0!==P&&P?s.content.inactive:L.selected||B?s.content.positive:s.content.primary})}):L.trailingIcon?t(m,{children:L.trailingIcon}):t(n,{})]})),!(null!==(E=L.disabled)&&void 0!==E&&E)&&L.children&&L.children.length>0&&F&&R&&t(v,Object.assign({width:w,className:"submenu",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:t(g,Object.assign({width:w,top:N.top,left:N.left},{children:t(b,{children:t(r,Object.assign({fallback:t("div",{children:"Loading..."})},{children:t(f,{width:w,onDropdownItemClick:y,options:L.children,parents:[...M,L],allowParentSelection:O,maxLevels:S,currentLevel:x+1})}))})}))}))]}))};export{j as MenuItem};

package/dist/esm/components/multi-level-dropdown/MenuList.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{GroupedMenuList as o}from"./GroupedMenuList.js";import{MenuItem as t}from"./MenuItem.js";import{StyledMenuList as n}from"./MultiLevelDropdown.styled.js";const r=l=>{let{width:i,onDropdownItemClick:p,options:a,parents:s,allowParentSelection:d,maxLevels:m,hideGroupLabel:c,currentLevel:u}=l;const w=(o,t,n)=>e(r,{width:i,onDropdownItemClick:p,options:o,parents:t,allowParentSelection:d,maxLevels:m,hideGroupLabel:c,currentLevel:n});return e(n,{children:a.map(((n,r)=>"value"in n?e(t,{width:i,onDropdownItemClick:p,option:n,parents:s,allowParentSelection:d,maxLevels:m,currentLevel:u,renderNestedMenu:w},r):"options"in n&&n.options.length>0?e(o,{width:i,onDropdownItemClick:p,option:n,parents:s,allowParentSelection:d,maxLevels:m,hideGroupLabel:c,currentLevel:u,renderNestedMenu:w},r):void 0))})};export{r as MenuList};
+import{jsx as e}from"react/jsx-runtime";import{GroupedMenuList as o}from"./GroupedMenuList.js";import{MenuItem as t}from"./MenuItem.js";import{StyledMenuList as n}from"./MultiLevelDropdown.styled.js";const r=r=>{let{width:i,onDropdownItemClick:l,options:p,parents:a,allowParentSelection:m,maxLevels:s,hideGroupLabel:d,currentLevel:c}=r;return e(n,{children:p.map(((n,r)=>"value"in n?e(t,{width:i,onDropdownItemClick:l,option:n,parents:a,allowParentSelection:m,maxLevels:s,currentLevel:c},r):"options"in n&&n.options.length>0?e(o,{width:i,onDropdownItemClick:l,option:n,parents:a,allowParentSelection:m,maxLevels:s,hideGroupLabel:d,currentLevel:c},r):void 0))})};export{r as MenuList};

package/dist/esm/components/multi-level-dropdown/type.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import { FloaterProps } from '../floater/floater';
 export interface MultiLevelDropdownProps extends FloaterProps {
     options: MultiLevelDropdownOption[];
@@ -29,4 +29,3 @@ export type SingleOption = {
     children?: SingleOption[];
 };
 export type MultiLevelDropdownOption = SingleOption | GroupedOption;
-export type RenderNestedMenu = (options: MultiLevelDropdownOption[], parents: MultiLevelDropdownOption[], currentLevel: number) => ReactNode;

package/dist/esm/components/product-picker-v2/ProductPickerTag.d.ts

@@ -1,5 +1,5 @@
-import type { TagType } from '../tag/model';
-import type { Product, ProductVariant } from './type';
+import { TagType } from '../tag/model';
+import { Product, ProductVariant } from './modal';
 export type ProductPickerTagType = {
     isVariant: boolean;
     data: Product | ProductVariant;

package/dist/esm/components/product-picker-v2/collectionScreen.d.ts

@@ -1,7 +1,7 @@
-import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
 import React from 'react';
-import type { CollectionsActions, SelectedCollectionsActions } from './reducers';
-import type { Collection, CollectionFetcherReturn, SelectedItems } from './type';
+import { Collection, CollectionFetcherReturn, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
 export declare const truncate: (str: string, n: number, useWordBoundary: boolean) => string;
 interface CollectionsScreenInterface {
     customCollectionRestriction?: boolean;

package/dist/esm/components/product-picker-v2/helpers/ProductHelper.d.ts

@@ -1,6 +1,7 @@
-import type { TagType } from "../../tag/model";
-import { OUT_OF_STOCK_ACTION, type Product, type ProductVariant, type SelectedItems } from '../type';
-import type { ProductVariantForRearrange } from '../type';
+import { TagType } from "../../tag/model";
+import { Product, ProductVariant, SelectedItems } from '../modal';
+import { OUT_OF_STOCK_ACTION } from '../type';
+import { ProductVariantForRearrange } from '../variant';
 export declare class ProductHelper {
     /**
      * how to know if a product is out of stock? currentCombination.quantity === 0 (OOS)

package/dist/esm/components/product-picker-v2/index.d.ts

@@ -1,2 +1,2 @@
 export * from './modal';
-export * from './type';
+export { ScreenName } from './type';

package/dist/esm/components/product-picker-v2/modal.d.ts

@@ -1,7 +1,63 @@
 /// <reference types="react" />
 import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
-import type { ButtonProps } from '../button/model';
-import { type CollectionFetcherReturn, type FbStatusFetcherReturn, type FooterForNonModalI, OUT_OF_STOCK_ACTION, type ProductFetcherReturn, ScreenName, type SearchedItems, type SelectedItems } from './type';
+import { ButtonProps } from '../button/model';
+import { FooterForNonModalI, OUT_OF_STOCK_ACTION, ScreenName } from './type';
+export interface ProductVariant {
+    name: string;
+    price: string;
+    image: string;
+    quantity: number;
+    skipSync?: boolean;
+    displayOrder?: number | null;
+    fbStatus?: FbProductStatus;
+    description?: string;
+    id?: string;
+    actualPrice?: string;
+    currency?: string;
+    skuId?: string;
+}
+export interface Product {
+    name: string;
+    image: string;
+    description?: string;
+    variants?: {
+        [key: string]: ProductVariant;
+    };
+    id?: string;
+    handle?: string;
+    currency?: string;
+}
+export interface Collection {
+    name: string;
+    image: string;
+    isSmartCollection: boolean;
+    products?: {
+        [key: string]: Product;
+    };
+}
+export type SelectedItems = {
+    [key: string]: Collection;
+};
+export type SearchedItems = {
+    collections: SelectedItems;
+    products: SelectedItems;
+};
+export type CollectionFetcherReturn = Promise<{
+    collections: {
+        [key: string]: {
+            image: string;
+            name: string;
+            isSmartCollection: string;
+        };
+    };
+}>;
+export type ProductFetcherReturn = Promise<{
+    [key: string]: Product;
+}>;
+export type FbStatusFetcherReturn = Promise<{
+    [key: string]: FbProductStatus;
+}>;
+export type FbProductStatus = 'APPROVED' | 'REJECTED';
 export type ProductPickerInterface = {
     hideGlobalSearch?: boolean;
     hideInCollectionSearch?: boolean;