@bikdotai/bik-component-library 0.0.795-beta.3 → 0.0.796-beta.0

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 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};
+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,version:A}),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/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 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;
+	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"};
 `,h=s.div`

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

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as l}from"../tooltips/Tooltip.js";import{IconButton as s}from"./IconButton.styled.js";import{getIconColor as r}from"./theme.js";const d=i(((i,d)=>{var{id:n,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:u,svgStyle:g,iconColor:j,disabledTooltip:f}=i,B=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const T=r(c,y,h),I=e(s,Object.assign({id:n,ref:d,style:u,iconButtonType:c,bordered:m,disabled:y,isSelected:h},B,{children:o.createElement(a,{height:p,width:b,color:j||T,style:Object.assign({display:"block"},null!=g?g:{})})}));return y&&f?e(l,Object.assign({body:f},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:I}))})):I}));d.displayName="IconButton";export{d as IconButton};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as d}from"../tooltips/Tooltip.js";import{IconButton as l}from"./IconButton.styled.js";import{getIconColor as n}from"./theme.js";const s=i(((i,s)=>{var{id:r,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:g,svgStyle:u,iconColor:j,iconPadding:f,disabledTooltip:B}=i,T=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const I=n(c,y,h),S=e(l,Object.assign({id:r,ref:s,style:g,iconButtonType:c,bordered:m,disabled:y,isSelected:h,iconPadding:f},T,{children:o.createElement(a,{height:p,width:b,color:j||I,style:Object.assign({display:"block"},null!=u?u:{})})}));return y&&B?e(d,Object.assign({body:B},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:S}))})):S}));s.displayName="IconButton";export{s as IconButton};

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

@@ -3,4 +3,5 @@ export declare const IconButton: import("styled-components").StyledComponent<"bu
     bordered?: boolean | undefined;
     iconButtonType: IconButtonType;
     isSelected?: boolean | undefined;
+    iconPadding?: number | undefined;
 }, never>;

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

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

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

@@ -40,5 +40,10 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     isSelected?: boolean;
     iconColor?: string;
+    /**
+     * Custom padding for the icon button container
+     * @default 6
+     */
+    iconPadding?: number;
     disabledTooltip?: string;
 }

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as g}from"./Input-helper.js";import{Tooltip as v}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as C,MaxCharStyle as j,InputWrapper as T,IconHolder as O,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const A=l(((l,A)=>{var H,D,E,M,P,S,z,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ne,rangeValidation:ie,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ge,hightlightInputColor:ve,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:xe,minCharsToTrigger:fe,maxCharAlignment:ye,isDisabled:Ce=!1,allowUnsafeInput:je}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1},l),Te=null==N?void 0:N.icon,Oe=null==R?void 0:R.icon,[we,Ie]=r(!1),[ke,Be]=r(!1),[Le,Ae]=r(),He="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(f),[Ee,Me]=r(""),Pe=a(null),Se=null!=A?A:Pe;s((()=>{Me(ee||""),!ee&&se&&(Se.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;Se.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Se.current))}),[Se]),s((()=>{const e=Se.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ne,{passive:!1}),()=>{e.removeEventListener("wheel",Ne)}}),[]),s((()=>{ne&&Me("")}),[ne]),s((()=>{var e;Be(!!l.isActive),l.isActive&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Ae(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Ie(!1),("invalid"===l.state||Le||"disabled-invalid"===l.state)&&Ie(!0),"active"===l.state&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.state,Le]),s((()=>{Ie(!!Le||"invalid"===l.state)}),[Le,l.state]);const ze=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},Fe=()=>"zip"===U?6:2e3,Ke=e=>{const t=0!==W?W:Fe(),n=fe,i=e.target.value;pe&&(!i.length||i.length>=n)&&pe(e),le||i.length&&!(i.length>=n)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ne=e=>{e.preventDefault()},Re=e=>{let t=e.target.value;const n=0!==W?W+1:Fe(),i=fe;if(!je&&d(U)&&(t=u(t)),!oe&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),l.textControl||Me(t||""),i&&t&&t.length<i)return;Z(t,e),se&&(Se.current.style.height=`${Se.current.scrollHeight}px`,t||(Se.current.style.height=ce||"48px"));const r=$||g;if(!r||!h(r))return;const[o,a]=r(t,U,ie);Ie(!o),Ae(l.errorMessage?l.errorMessage:a)},Ge=e=>{var t;l.skipFocus||Be(!0),ze(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},We=e=>{var t;l.skipFocus||Be(!1),ze(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},_e=()=>{var i;return e(n,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==De?void 0:De.input)&&void 0!==i?i:{},ref:Se,disabled:Ce,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Ge(e),onBlur:e=>We(e),placeholder:K||"Enter here",onChange:Re,onClick:e=>ze(l.onClick),onKeyDown:e=>Ke(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:Se,onFocus:e=>Ge(e),onBlur:e=>We(e),onClick:e=>ze(l.onClick),disabled:Ce,placeholder:K||"Enter here",onChange:Re,onKeyDown:e=>Ke(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(H=null==De?void 0:De.RootContainer)&&void 0!==H?H:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Le)&&e(C,Object.assign({invalid:!!Le},{children:[!!Le&&t(x,{width:16,height:16}),Le||q]})),W>0&&"BOTTOM"===ge&&e(j,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(D=(null!=ee?ee:"").toString())||void 0===D?void 0:D.length)&&void 0!==E?E:0,"/",W]}))]})),e(T,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||ke,isInvalid:we,style:null!==(P=null!==(M=null==De?void 0:De.InputWrapper)&&void 0!==M?M:xe)&&void 0!==P?P:{},version:re,height:l.height,hightlightInputColor:ve,hideBorder:be},{children:[!!Te&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==N?void 0:N.callback),isLeft:!0,style:null!==(S=null==De?void 0:De.IconHolder)&&void 0!==S?S:{}},{children:t(Te,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:_e()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:_e()})),!!Oe&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==R?void 0:R.callback),isLeft:!1},{children:t(Oe,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,buttonType:Q.buttonType,onClick:()=>ze(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:we,maxCharAlignment:ye},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(v,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:we?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ge&&e(j,{children:[null!==(F=null===(z=(null!=ee?ee:"").toString())||void 0===z?void 0:z.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));A.displayName="Input";export{A as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as g}from"./Input-helper.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as T,IconHolder as O,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,InputContainerXSmall as B,SuffixHolder as L,InputHeader as A}from"./Input.styled.js";const H=l(((l,H)=>{var S,D,E,M,P,z,F,K;const{placeholder:N,leftIcon:R,rightIcon:G,labelText:W,maxCharLimit:_,isRequired:q,hintText:U,type:V,state:$,validate:J,variant:Q,button:X,suffixText:Y,prefixText:Z,onChangeText:ee,value:te,noErrorHint:ne,reset:ie,rangeValidation:le,noKeyDownChange:re,version:oe,noMaxCharCheck:ae,labelElement:se,autoGrow:ce,minHeight:he,maxHeight:de,labelTextBold:ue,truncateText:ge,maxCharLimitPosition:pe,hightlightInputColor:ve,onKeyDownEvent:me,hideInputHeader:be,hideBorder:xe,inputWrapperStyles:fe,minCharsToTrigger:ye,maxCharAlignment:je,isDisabled:Ce=!1,allowUnsafeInput:Te,leftIconStyle:Oe}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1},l),we=null==R?void 0:R.icon,Ie=null==G?void 0:G.icon,[ke,Be]=r(!1),[Le,Ae]=r(!1),[He,Se]=r(),De="x-small"===Q?"12px":"small"===Q?"18px":"22px",Ee=o(f),[Me,Pe]=r(""),ze=a(null),Fe=null!=H?H:ze;s((()=>{Pe(te||""),!te&&ce&&(Fe.current.style.height=he||"48px")}),[te]),s((()=>{var e;Fe.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Fe.current))}),[Fe]),s((()=>{const e=Fe.current;if(e&&["phonenumber","zip","number"].includes(V))return e.addEventListener("wheel",Ge,{passive:!1}),()=>{e.removeEventListener("wheel",Ge)}}),[]),s((()=>{ie&&Pe("")}),[ie]),s((()=>{var e;Ae(!!l.isActive),l.isActive&&(null===(e=Fe.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Se(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Be(!1),("invalid"===l.state||He||"disabled-invalid"===l.state)&&Be(!0),"active"===l.state&&(null===(e=Fe.current)||void 0===e||e.focus())}),[l.state,He]),s((()=>{Be(!!He||"invalid"===l.state)}),[He,l.state]);const Ke=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},Ne=()=>"zip"===V?6:2e3,Re=e=>{const t=0!==_?_:Ne(),n=ye,i=e.target.value;me&&(!i.length||i.length>=n)&&me(e),re||i.length&&!(i.length>=n)||ee(te||"",e),ae||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ge=e=>{e.preventDefault()},We=e=>{let t=e.target.value;const n=0!==_?_+1:Ne(),i=ye;if(!Te&&d(V)&&(t=u(t)),!ae&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),l.textControl||Pe(t||""),i&&t&&t.length<i)return;ee(t,e),ce&&(Fe.current.style.height=`${Fe.current.scrollHeight}px`,t||(Fe.current.style.height=he||"48px"));const r=J||g;if(!r||!h(r))return;const[o,a]=r(t,V,le);Be(!o),Se(l.errorMessage?l.errorMessage:a)},_e=e=>{var t;l.skipFocus||Ae(!0),Ke(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},qe=e=>{var t;l.skipFocus||Ae(!1),Ke(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ue=()=>{var i;return e(n,{children:["multiline"!==V&&t("input",{className:ge?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Ee?void 0:Ee.input)&&void 0!==i?i:{},ref:Fe,disabled:Ce,type:["phonenumber","zip","number"].includes(V)?"number":V,value:Me,onFocus:e=>_e(e),onBlur:e=>qe(e),placeholder:N||"Enter here",onChange:We,onClick:e=>Ke(l.onClick),onKeyDown:e=>Re(e)}),"multiline"===V&&t("textarea",{"data-test":l["data-test"],value:Me,ref:Fe,onFocus:e=>_e(e),onBlur:e=>qe(e),onClick:e=>Ke(l.onClick),disabled:Ce,placeholder:N||"Enter here",onChange:We,onKeyDown:e=>Re(e),maxLength:_>0?_:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:$,type:V,style:null!==(S=null==Ee?void 0:Ee.RootContainer)&&void 0!==S?S:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!ne&&(!!U||!!He)&&e(j,Object.assign({invalid:!!He},{children:[!!He&&t(x,{width:16,height:16}),He||U]})),_>0&&"BOTTOM"===pe&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(D=(null!=te?te:"").toString())||void 0===D?void 0:D.length)&&void 0!==E?E:0,"/",_]}))]})),e(T,Object.assign({variant:Q,state:$,width:l.width,isActive:"active"===$||Le,isInvalid:ke,style:null!==(P=null!==(M=null==Ee?void 0:Ee.InputWrapper)&&void 0!==M?M:fe)&&void 0!==P?P:{},version:oe,height:l.height,hightlightInputColor:ve,hideBorder:xe},{children:[!!we&&t(O,Object.assign({variant:Q,iconSize:De,onClick:()=>Ke(null==R?void 0:R.callback),isLeft:!0,style:Object.assign(Object.assign({},null!==(z=null==Ee?void 0:Ee.IconHolder)&&void 0!==z?z:{}),Oe)},{children:t(we,{})})),!!Z&&t(w,Object.assign({variant:Q},{children:Z})),"default"===Q&&t(I,Object.assign({height:l.height,type:l.type,minHeight:he,maxHeight:de,autoGrow:ce},{children:Ue()})),"small"===Q&&t(k,Object.assign({height:l.height,type:l.type},{children:Ue()})),"x-small"===Q&&t(B,Object.assign({height:l.height,type:l.type},{children:Ue()})),!!Ie&&t(O,Object.assign({variant:Q,iconSize:De,onClick:()=>Ke(null==G?void 0:G.callback),isLeft:!1},{children:t(Ie,{})})),!!Y&&t(L,Object.assign({variant:Q},{children:Y})),X&&X.text&&t(c,{buttonText:X.text,buttonType:X.buttonType,onClick:()=>Ke(null==X?void 0:X.onClick)}),X&&X.buttonProps&&t(c,Object.assign({},X.buttonProps))]})),!be&&(!!W||!!_)&&e(A,Object.assign({invalid:ke,maxCharAlignment:je},{children:[se&&se,e("div",Object.assign({className:"label__container"},{children:[e(ue?v:m,{children:[W,q?t("span",{children:"*"}):""]}),l.tooltipText&&t(p,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:ke?b.content.negative:b.content.primary})})}))]})),_>0&&"TOP"===pe&&e(C,{children:[null!==(K=null===(F=(null!=te?te:"").toString())||void 0===F?void 0:F.length)&&void 0!==K?K:0,"/",_]})]}))]}))}));H.displayName="Input";export{H as Input};

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

@@ -15,6 +15,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    leftIconStyle?: React.CSSProperties;
     rightIcon?: {
         icon: React.FC;
         callback?: () => void;
@@ -54,7 +55,7 @@ export interface InputProps {
     };
     noKeyDownChange?: boolean;
     skipFocus?: boolean;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     textControl?: boolean;
     noMaxCharCheck?: boolean;
     tooltipText?: string;

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

@@ -10,7 +10,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     hightlightInputColor?: string | undefined;
     hideBorder?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -55,6 +55,21 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
     height?: string | undefined;
     type?: InputTypeI | undefined;
 }, {}, {}>;
+export declare const InputContainerXSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+}, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;