@bikdotai/bik-component-library 0.0.786-1 → 0.0.786-beta.1

package/dist/esm/components/bik-layout/SidebarPopup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Menu } from './SimpleSidebar';
+import { Menu } from './Sidebar.model';
 export interface SidebarPopupI {
     menuList: Menu[];
     width?: number;

package/dist/esm/components/bik-layout/SidebarSkeleton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTheme } from './SimpleSidebar';
+import { SidebarTheme } from './Sidebar.model';
 export interface BikSidebarShimmerProps {
     theme: SidebarTheme;
     width?: number;

package/dist/esm/components/bik-layout/SidebarStyles.d.ts

@@ -1,4 +1,4 @@
-import { SidebarTheme } from './SimpleSidebar';
+import { SidebarTheme } from './Sidebar.model';
 export declare const SideBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MainSideBarMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SibeBarMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/bik-layout/SimpleSidebar.d.ts

@@ -1,29 +1,3 @@
 /// <reference types="react" />
-export interface Menu {
-    key: string | number;
-    displayName: string;
-    description?: string;
-    path?: string;
-    page?: string;
-    isNew?: string;
-}
-export type SidebarTheme = 'brand' | 'white';
-export interface SimpleSidebarProps {
-    menuList: Menu[];
-    activeMenu: Menu;
-    theme: SidebarTheme;
-    showAccessUpgradePanel?: boolean;
-    header?: string;
-    width?: number;
-    zIndex?: number;
-    left?: number;
-    postion?: 'fixed' | 'sticky';
-    top?: number;
-    router: any;
-    onMouseLeaveOnMenu?: () => void;
-    onMouseEnterOnMenu?: () => void;
-    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
-    onUpgrade?: () => void;
-    isNewSidebar?: boolean;
-}
+import { SimpleSidebarProps } from './Sidebar.model';
 export declare const SimpleSidebar: React.FC<SimpleSidebarProps>;

package/dist/esm/components/bik-layout/index.d.ts

@@ -3,6 +3,8 @@ export * from './BikLayout';
 export * from './BikProfile';
 export * from './SimpleSidebar';
 export * from './BikSidebar';
+export * from './BikSidebarV2/BikSidebarV2';
+export * from './BikSidebarV2/SidebarV2.model';
 export * from './FeatureModal';
 export * from './SidebarSkeleton';
 export * from './ShowShopifyRestrictedModal';

package/dist/esm/components/button/Button.styled.d.ts

@@ -10,7 +10,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     inverse?: boolean | undefined;
     disabled?: boolean | undefined;
     matchParentWidth?: boolean | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     darkMode?: boolean | undefined;
     activated?: boolean | undefined;
     error?: boolean | undefined;

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

@@ -66,7 +66,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     matchParentWidth?: boolean;
     subtitle?: string;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     darkMode?: boolean;
     activated?: boolean;
     error?: boolean;

package/dist/esm/components/button/themes.d.ts

@@ -8,7 +8,7 @@ export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?:
     color?: string | undefined;
 }, never>;
 export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
-export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
 export declare const getLinearGradientValue: (size: Size) => string;
 /**
  * Adjusts the brightness of a given hex color by a specified percentage.

package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import React from 'react';
 import { CountryCode } from "./CountryCodePicker.modal";
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/esm/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     /**
      * Callback function when a country is selected
      */

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

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,w,b,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:S,noErrorHint:H,placeHolderHeight:T,showPlaceholderWhenSelected:D=!1,inputStyle:E={},inputType:P="default",onDeleteChip:C,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:k=!1,value:z,showSelected:A=!1}=m,_=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[N,U]=i(!1),[V,q]=i(!1),B=null!=O?O:"default",F=l(),[G,J]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==_?void 0:_.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),J([...o])}),[_.options]),r((()=>{y&&J([...y])}),[y]);const K=u(G),Q=D?j:null!==(g=null!=K?K:j)&&void 0!==g?g:"Select an option",R=_.buttonWidth,X=null!==(f=null!=R?R:_.width)&&void 0!==f?f:"100%",Y=null!==(w=_.dropdownWidth)&&void 0!==w?w:X;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:T||("x-small"===B?24:"small"===B?32:48),width:X},R?{maxWidth:R}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===B?"4px 8px":"6px 8px",backgroundColor:A&&void 0!==z?s.background.positive.light:V?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),E),input:{minHeight:"100%",maxWidth:"100%",color:A&&void 0!==z?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>q(!0),onMouseLeave:()=>q(!1),style:_.width?{width:_.width}:void 0},{children:t(h,Object.assign({"data-test":_["data-test"],ref:F,onSelect:function(e){Array.isArray(e)?J([...e]):J([e]),null==I||I(e)},disabled:S,onDropdownVisbilityChange:e=>U(e)},_,{width:Y},{children:["default"==P&&o(d,{version:_.version,noErrorHint:H,state:S?"disabled":"none",value:void 0===z?Q:z,errorMessage:_.error,variant:B,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(b=G[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=G[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=G[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:N?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===B?16:"small"===B?20:24,height:"x-small"===B?16:"small"===B?20:24,color:A?s.content.positive:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==P&&o(p,{placeholder:null!=j?j:"Select options",chips:G,onDeleteChip:e=>{null==C||C(e)},errorMessage:_.error,isDropdownOpened:N,sizeToUse:B,containerStyle:{width:null!==(x=_.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as l}from"react";import{COLORS as s,BASE_COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/chevronDown.svg.js";import{Input as c}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import h from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as v}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const g=g=>{var w,f,b,x,j,{placeHolder:O,size:I,onSelect:y,defaultOptions:S,disabled:H,noErrorHint:T,placeHolderHeight:D,showPlaceholderWhenSelected:P=!1,inputStyle:C={},inputType:M="default",onDeleteChip:W,truncatedText:E,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:k=!1,showLabelsOnMoreHover:z=!1,value:A,showSelected:_=!1}=g,N=e(g,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[U,V]=i(!1),[q,B]=i(!1),F=null!=I?I:"default",G=r(),[J,K]=i(null!=S?S:[]);l((()=>{var e;const o=[];null===(e=null==N?void 0:N.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),K([...o])}),[N.options]),l((()=>{S&&K([...S])}),[S]);const Q=v(J),R=P?O:null!==(w=null!=Q?Q:O)&&void 0!==w?w:"Select an option",X=N.buttonWidth,Y=null!==(f=null!=X?X:N.width)&&void 0!==f?f:"100%",Z=null!==(b=N.dropdownWidth)&&void 0!==b?b:Y;return o(n,{children:o(p.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:D||("x-small"===F?24:"small"===F?32:48),width:Y},X?{maxWidth:X}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===F?"4px 8px":"6px 8px",backgroundColor:"3.0"===N.version?U||q?s.surface.hovered:s.surface.standard:_&&void 0!==A?a.positive[100]:q?s.background.inactive:s.surface.standard,transition:"background-color 0.3s ease"}),C),input:{minHeight:"100%",maxWidth:"100%",color:_&&void 0!==A?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1),style:N.width?{width:N.width}:void 0},{children:t(u,Object.assign({"data-test":N["data-test"],ref:G,onSelect:function(e){Array.isArray(e)?K([...e]):K([e]),null==y||y(e)},disabled:H,onDropdownVisbilityChange:e=>V(e)},N,{width:Z},{children:["default"==M&&o(c,{version:N.version,noErrorHint:T,state:H?"disabled":"none",value:void 0===A?R:A,errorMessage:N.error,variant:F,placeholder:null!=O?O:"Select an option",onChangeText:m,leftIcon:L&&(null===(x=J[0])||void 0===x?void 0:x.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=J[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[k&&(null===(e=J[0])||void 0===e?void 0:e.trailingIcon),o(d,{style:{transform:U?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===F?16:"small"===F?20:24,height:"x-small"===F?16:"small"===F?20:24,color:_?s.content.positive:s.content.primary})]}))}},truncateText:null==E||E}),"chip"==M&&o(h,{placeholder:null!=O?O:"Select options",chips:J,onDeleteChip:e=>{null==W||W(e)},errorMessage:N.error,isDropdownOpened:U,sizeToUse:F,containerStyle:{width:null!==(j=N.width)&&void 0!==j?j:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};g.displayName="Dropdown";export{g as Dropdown};

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

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useState as r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]})};return e(t,{children:R||y||void 0===f?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useState as r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===g?4:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]})};return e(t,{children:R||y||void 0===f?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};

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 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,version:B}),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};

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

@@ -1,5 +1,5 @@
 export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {

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

@@ -1,7 +1,8 @@
 import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const e=o.div`
 	border-radius: ${o=>"2.0"===o.version?8:4}px;
-	border: ${o=>"2.0"===o.version?0:1}px solid
-		${r.stroke.primary};
+	border: ${o=>"2.0"===o.version||"3.0"===o.version?0:1}px
+		solid ${r.stroke.primary};
+	box-shadow: ${o=>"3.0"===o.version?"0px 2px 8px 0px rgba(0, 0, 0, 0.12)":"none"};
 	max-height: 480px;
 	overflow: hidden;
 	display: flex;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare const Description: React.FC<{
     title: string;
     description: string;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts

@@ -1,3 +1,3 @@
 export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;

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

@@ -3,5 +3,5 @@ export declare const FreeFormMenu: React.FC<{
     isMultiSelect?: boolean;
     searchedString: string;
     onSelect: (isChecked: boolean) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

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

@@ -7,7 +7,7 @@ interface MenuItemProps {
     onSelect: (option: SingleOption) => void;
     onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     useDefaultCursor?: boolean;
     isFocused?: boolean;
     dataIndex?: number;

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

@@ -1,5 +1,5 @@
-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)`
-	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
+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 s}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=l(a)`
+	padding: ${e=>"3.0"===e.version?"8px":"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
 `,v=l.div`
@@ -40,4 +40,4 @@ import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import t from"..
 	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=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:a,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(a.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=>{a.disabled||y(Object.assign(Object.assign({},a),{selected:e}))},U=k?{cursor:"default"}:{};return e(n,{children:e(d,Object.assign({body:"",tooltipContent:a.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:a.children.map((n=>{var o;return e(u,{version:O,style:"1.0"!==O&&(null!==(o=null==a?void 0:a.children)&&void 0!==o?o:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),z(n,a)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:a.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(a)},onMouseOver:()=>{a.description?x(a.label,a.description):x()},listItem:{value:a.value,label:a.label},subText:a.subText,"data-option-index":T,role:"option",id:`dropdown-option-${T}`,"aria-selected":!!a.selected,onDragOver:$?E:void 0,onDrop:$?F:void 0,leadingIcon:h?o(b,{children:[$&&e(j,{onDragStart:S,onDragEnd:M}),e(s,{size:"2.0"===O?"SMALL":"DEFAULT",isDisabled:null!==(B=a.disabled)&&void 0!==B&&B,isChecked:!!a.selected,onValueChange:R}),e(f,{children:a.leadingIcon})]}):$?o(D,{children:[e(j,{onDragStart:S,onDragEnd:M}),a.leadingIcon&&e("div",{children:a.leadingIcon})]}):a.leadingIcon?e(n,{children:a.leadingIcon}):void 0,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(n,{children:a.trailingIcon}):void 0,variant:a.disabled?"inactive":w||a.selected||!h&&A?"selected":"default"})}))})}));export{y as MenuItem};

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

@@ -5,7 +5,7 @@ interface MenuListProps {
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     onInfiniteScroll?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
     useDefaultCursor?: boolean;

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

@@ -2,5 +2,5 @@ export declare const StyledGroupedLabel: import("styled-components").StyledCompo
     numberOfLines?: number | undefined;
     color?: string | undefined;
 } & {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;

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

@@ -4,5 +4,5 @@ export type SelectAllCheckboxState = 'notSelected' | 'selectAll' | 'partiallySel
 export declare const SelectAllMenu: React.FC<{
     options: DropdownOption[];
     onSelect: (newState: SelectAllCheckboxState) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const SearchBox: React.FC<{
     onSearch: (searchString: string) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

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

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

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -6,4 +6,5 @@ export declare const SearchZeroState: React.FC<{
     containerWidth?: string;
     errorMessage?: string;
     onRetry?: () => void;
+    version?: '1.0' | '2.0' | '3.0';
 }>;

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

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";const o=o=>{let{searchedString:i,height:n,isLoading:r,containerWidth:s,errorMessage:a,onRetry:l}=o;const d=!!a&&!r;return t("div",Object.assign({style:{height:n,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:r,title:d?"Failed to load options":"No results found",subTitle:d?a:`Sorry we could not find any results for "${null!=i?i:""}"`,actionButton:d?{buttonText:"Try again",buttonType:"text",onClick:l}:void 0,containerWidth:s})}))};export{o as SearchZeroState};
+import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";import{COLORS as n}from"../../../../../constants/Theme.js";const o=o=>{let{searchedString:i,height:r,isLoading:s,containerWidth:l,errorMessage:a,onRetry:c,version:d}=o;const h=!!a&&!s;return t("div","3.0"!==d||h||s?Object.assign({style:{height:r,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:s,title:h?"Failed to load options":"No results found",subTitle:h?a:`Sorry we could not find any results for "${null!=i?i:""}"`,actionButton:h?{buttonText:"Try again",buttonType:"text",onClick:c}:void 0,containerWidth:l})}):Object.assign({style:{height:r,display:"flex",alignItems:"center",justifyContent:"center"}},{children:t("span",Object.assign({style:{fontFamily:"Inter",fontSize:"12px",fontWeight:400,lineHeight:"16px",color:n.content.placeholder,whiteSpace:"nowrap"}},{children:"No results found!"}))}))};export{o as SearchZeroState};

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

@@ -17,7 +17,7 @@ export interface OpenDropdownProps {
     placement?: Placement;
     strategy?: PositioningStrategy;
     onSearch?: (key: string) => Promise<DropdownOption[]>;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     skipSorting?: boolean;
     headerRef?: any;
     hideSelectAll?: boolean;

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

@@ -21,5 +21,5 @@ export declare const FABMenu: React.FC<{
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

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';
+import { InputProps } from '../input/Input.model';
 type DropdownProps = OpenDropdownProps & {
     isLoading?: boolean;
     children?: React.ReactNode;

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

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

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

@@ -0,0 +1,6 @@
+export interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
+    onCancel: () => void;
+}

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

@@ -1,5 +1,5 @@
 import { CompressImageOptions } from "../../image-compress";
-import { BikImageCropperProps } from "..";
+import { BikImageCropperProps } from '../BikImageCropper.model';
 /**
  * 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,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};
+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};

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

@@ -1,66 +1,6 @@
-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;
-    };
-};
+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;

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

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

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

@@ -1,4 +1,4 @@
-import { InputTypeI } from "./Input";
+import { InputTypeI } from './Input.model';
 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,74 +1,3 @@
 import React from 'react';
-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;
-}
+import { InputProps } from './Input.model';
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;