@bikdotai/bik-component-library 0.0.552-beta.1 → 0.0.552-beta.10

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -9,7 +9,5 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolderHeight?: string;
     showPlaceholderWhenSelected?: boolean;
     inputStyle?: React.CSSProperties;
-    inputType?: 'chip' | 'default';
-    onDeleteChip?: (chip: string, index: number) => void;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),i=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),d=require("./DropdownPopover/index.js"),u=require("./OpenedDropdown/utils/iterationOnOptions.js");function a(){}const p=p=>{var c,h,v,g,j,{placeHolder:f,size:w,onSelect:b,defaultOptions:x,disabled:y,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:D=!1,inputStyle:q={},inputType:H="default",onDeleteChip:m}=p,C=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[I,E]=n.useState(!1),P=null!=w?w:"default",T=n.useRef(),[A,_]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==C?void 0:C.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),_([...t])}),[C.options]),n.useEffect((()=>{x&&_([...x])}),[x]);const z=u.getSelectedOptionsAsText(A),W=u.getSelectedOptionsAsArray(A);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:S||("small"===P?32:48),width:null!==(h=null!==(c=C.buttonWidth)&&void 0!==c?c:C.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},q),input:{minHeight:"100%"}}},{children:t.jsxs(d.DropdownPopover,Object.assign({ref:T,onSelect:function(e){Array.isArray(e)?_([...e]):_([e]),null==b||b(e)},disabled:y,onDropdownVisbilityChange:e=>E(e)},C,{hideOverLapAbs:"chip"===H},{children:["default"==H&&t.jsx(r.Input,{version:C.version,noErrorHint:O,state:y?"disabled":"none",value:D?f:null!=z?z:"",errorMessage:C.error,variant:P,placeholder:null!=f?f:"Select an option",width:null!==(v=C.width)&&void 0!==v?v:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(o.default,{style:{transform:I?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===P?20:24,height:"small"===P?20:24,color:i.COLORS.content.primary})},truncateText:!0}),"chip"==H&&t.jsx(s.default,{chips:W,onDeleteChip:(e,t)=>{null==m||m(e,t)},isDropdownOpened:I,sizeToUse:P,containerStyle:{width:null!==(g=C.width)&&void 0!==g?g:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==T?void 0:T.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./DropdownPopover/index.js");function a(){}const d=d=>{var u,c,p,{placeHolder:h,size:v,onSelect:g,defaultOptions:j,disabled:b,noErrorHint:f,placeHolderHeight:x,showPlaceholderWhenSelected:w=!1,inputStyle:S={}}=d,y=e.__rest(d,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle"]);const[m,H]=n.useState(!1),O=null!=v?v:"default",q=n.useRef(),[E,I]=n.useState(null!=j?j:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==y?void 0:y.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),I([...t])}),[y.options]),n.useEffect((()=>{j&&I([...j])}),[j]);const P=E.length?E.map((e=>e.label)).join(", "):void 0;return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===O?32:48),width:null!==(c=null!==(u=y.buttonWidth)&&void 0!==u?u:y.width)&&void 0!==c?c:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},S),input:{minHeight:"100%"}}},{children:t.jsx(s.DropdownPopover,Object.assign({ref:q,onSelect:function(e){Array.isArray(e)?I([...e]):I([e]),null==g||g(e)},disabled:b,onDropdownVisbilityChange:e=>H(e)},y,{children:t.jsx(i.Input,{version:y.version,noErrorHint:f,state:b?"disabled":"none",value:w?h:null!=P?P:"",errorMessage:y.error,variant:O,placeholder:null!=h?h:"Select an option",width:null!==(p=y.width)&&void 0!==p?p:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(o.default,{style:{transform:m?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===O?20:24,height:"small"===O?20:24,color:r.COLORS.content.primary})},truncateText:!0})}))}))};d.displayName="Dropdown",exports.Dropdown=d;

package/dist/cjs/components/dropdown/DropdownPopover/index.d.ts

@@ -10,7 +10,6 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
     tooltipContent?: string | undefined;
     tooltipDirection?: Placement | undefined;
     showTooltipArrow?: boolean | undefined;
-    hideOverLapAbs?: boolean | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("react"),n=require("react-popper"),t=require("../../dropShadow/DropShadow.js"),i=require("../../tooltips/Tooltip.js"),l=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=d(r).default.forwardRef(((d,p)=>{var{children:a,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w}=d,b=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const f=p,[h,D]=r.useState(!1),[O,y]=r.useState(null),[g,x]=r.useState(null),m=r.useRef(null),{styles:S,attributes:C}=n.usePopper(O,g,{placement:b.placement,strategy:b.strategy}),q=e=>{var o,r;"2.0"===u&&b.isMultiSelect&&e&&(null===(o=b.onSelect)||void 0===o||o.call(b,[...e])),D(!1),null===(r=null==b?void 0:b.onClose)||void 0===r||r.call(b)};r.useImperativeHandle(f,(()=>({openDropdown:h,closeDropdown:()=>D(!1),openDropdownFn:()=>D(!0),setDropdownVisibility:D})),[]),r.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=h)}),[h]),r.useEffect((()=>{null==c||c(h)}),[h]);const _=()=>o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:y},{children:[!b.hideOverLapAbs&&o.jsx(l.OverLapAbs,{ref:m,disabled:b.disabled,onClick:e=>{var o;null===(o=b.onDropdownOpen)||void 0===o||o.call(b),h?(D(!1),e.preventDefault()):b.disabled||D(!0)}}),a]})),h&&o.jsx(l.OpenDropdownContainer,Object.assign({ref:x,style:Object.assign(Object.assign({},S.popper),{zIndex:3})},C.popper,{children:o.jsx(t.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},b,{onSelect:e=>{var o;"2.0"===u&&b.isMultiSelect||(null===(o=b.onSelect)||void 0===o||o.call(b,e),D(!1))},onClose:q,version:u,headerRef:m}))}))}))]});return o.jsx(o.Fragment,{children:h||void 0===v?_():o.jsx(i.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",{children:_()})}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("react"),t=require("react-popper"),n=require("../../dropShadow/DropShadow.js"),l=require("../../tooltips/Tooltip.js"),i=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=d(r).default.forwardRef(((d,p)=>{var{children:a,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w}=d,b=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const f=p,[h,D]=r.useState(!1),[O,g]=r.useState(null),[x,y]=r.useState(null),m=r.useRef(null),{styles:S,attributes:C}=t.usePopper(O,x,{placement:b.placement,strategy:b.strategy}),q=e=>{var o,r;"2.0"===u&&b.isMultiSelect&&e&&(null===(o=b.onSelect)||void 0===o||o.call(b,[...e])),D(!1),null===(r=null==b?void 0:b.onClose)||void 0===r||r.call(b)};r.useImperativeHandle(f,(()=>({openDropdown:h})),[]),r.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=h)}),[h]),r.useEffect((()=>{null==c||c(h)}),[h]);const _=()=>o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:g},{children:[o.jsx(i.OverLapAbs,{ref:m,disabled:b.disabled,onClick:e=>{var o;null===(o=b.onDropdownOpen)||void 0===o||o.call(b),h?(D(!1),e.preventDefault()):b.disabled||D(!0)}}),a]})),h&&o.jsx(i.OpenDropdownContainer,Object.assign({ref:y,style:Object.assign(Object.assign({},S.popper),{zIndex:3})},C.popper,{children:o.jsx(n.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},b,{onSelect:e=>{var o;"2.0"===u&&b.isMultiSelect||(null===(o=b.onSelect)||void 0===o||o.call(b,e),D(!1))},onClose:q,version:u,headerRef:m}))}))}))]});return o.jsx(o.Fragment,{children:h||void 0===v?_():o.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",{children:_()})}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),r=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),s=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),p=require("./searchbox/SearchBox.js"),d=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:f,isSearchable:x,isMultiSelect:g,width:w,allowFreeForm:b,height:v,onClose:m,onSelect:y,onSearch:O,version:M,skipSorting:q,headerRef:C,hideSelectAll:D,primaryButtonText:L,onInfiniteScroll:F,onMultiSelectClear:k,onDropdownItemClick:A,buttonOptions:B}=j;const{dropdownOptions:I,search:H,searchedString:Z,searchedOptions:R,onApplyHandler:T,selectAllHandler:P,onMultiSelectClear:_,onFreeFormSelect:z,onMultiSelectApply:E,latestDropdownOptionsRef:K,getSelectedOptions:N}=o.useDropdown(M,f,y,q,g,O),[W,G]=t.useState(null!=w?w:S),[J,Q]=t.useState(null),U=t.useRef(null);r.useOutside(U,(()=>{if(Q(null),g&&"2.0"===M){const e=N(K.current);null==m||m(e)}else null==m||m(I)}),[C]);const V=null!=v?v:h,X="number"==typeof V?x&&g?V-96:x&&!g||!x&&g?V-48:V:V;t.useEffect((()=>{const e=null!=w?w:S;if(null===J)G(e);else if("number"==typeof e)G(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));G(t)}}),[J]);const Y=[],$=(Z&&O?R:I).map((e=>{var t,n;if(Z&&!O){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(Z.toLowerCase()))&&(Y.push(!Z||e.label===Z),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(Z.toLowerCase()))?(Y.push(!Z||e.label===Z),e):null}return e})).filter((e=>null!==e)),ee=!!x&&Z&&0===$.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:M,ref:U,style:{width:W}},{children:[e.jsxs("div",Object.assign({style:{width:J?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!x&&e.jsx(p.SearchBox,{onSearch:H,version:M}),$.length||Z?e.jsxs(a.MenuListContainer,Object.assign({minHeight:V,maxHeight:X},{children:[!!g&&!ee&&!D&&e.jsx(u.SelectAllMenu,{version:M,options:Z&&O?R:I,onSelect:P}),!b&&ee&&e.jsx(d.SearchZeroState,{height:X,searchedString:Z}),b&&(ee||!!Y.length&&Y.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:M,isMultiSelect:g,onSelect:z,searchedString:Z}),e.jsx(l.MenuList,{onInfiniteScroll:F,onDropdownItemClick:A,version:M,onSelect:T,showDescription:function(e,t){Q(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:$})]})):e.jsx("div",Object.assign({style:{height:V,display:"flex"}},{children:e.jsx(n.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!$.length&&!Z)&&"2.0"!==M&&e.jsx(c.default,{onClear:()=>{_(),null==k||k()},onApply:E,list:Z&&O?R:I,buttonText:L,buttonOptions:B})]})),!!J&&e.jsx(s.Description,{title:J.title,description:J.description,version:M})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),n=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:x,isSearchable:f,isMultiSelect:g,width:v,allowFreeForm:w,height:b,onClose:y,onSelect:m,onSearch:O,version:q,skipSorting:M,headerRef:C,hideSelectAll:D,primaryButtonText:L}=j;const{dropdownOptions:F,search:A,searchedString:k,searchedOptions:B,onApplyHandler:H,selectAllHandler:Z,onMultiSelectClear:R,onFreeFormSelect:T,onMultiSelectApply:P,latestDropdownOptionsRef:_,getSelectedOptions:z}=n.useDropdown(q,x,m,M,g,O),[E,I]=t.useState(null!=v?v:S),[K,N]=t.useState(null),W=t.useRef(null);s.useOutside(W,(()=>{if(N(null),g&&"2.0"===q){const e=z(_.current);null==y||y(e)}else null==y||y(F)}),[C]);const G=null!=b?b:h,J="number"==typeof G?f&&g?G-96:f&&!g||!f&&g?G-48:G:G;t.useEffect((()=>{const e=null!=v?v:S;if(null===K)I(e);else if("number"==typeof e)I(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));I(t)}}),[K]);const Q=[],U=(k&&O?B:F).map((e=>{var t,r;if(k&&!O){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(k.toLowerCase()))&&(Q.push(!k||e.label===k),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(k.toLowerCase()))||(null===(r=e.searchKey)||void 0===r?void 0:r.toLowerCase().includes(k.toLowerCase()))?(Q.push(!k||e.label===k),e):null}return e})).filter((e=>null!==e)),V=!!f&&k&&0===U.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:q,ref:W,style:{width:E}},{children:[e.jsxs("div",Object.assign({style:{width:K?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!f&&e.jsx(d.SearchBox,{onSearch:A,version:q}),U.length||k?e.jsxs(a.MenuListContainer,Object.assign({minHeight:G,maxHeight:J},{children:[!!g&&!V&&!D&&e.jsx(u.SelectAllMenu,{version:q,options:k&&O?B:F,onSelect:Z}),!w&&V&&e.jsx(p.SearchZeroState,{height:J,searchedString:k}),w&&(V||!!Q.length&&Q.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:q,isMultiSelect:g,onSelect:T,searchedString:k}),e.jsx(l.MenuList,{version:q,onSelect:H,showDescription:function(e,t){N(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:U})]})):e.jsx("div",Object.assign({style:{height:G,display:"flex"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!U.length&&!k)&&"2.0"!==q&&e.jsx(c.default,{onClear:R,onApply:P,list:k&&O?B:F,buttonText:L})]})),!!K&&e.jsx(o.Description,{title:K.title,description:K.description,version:q})]}))};

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

@@ -1,13 +1,10 @@
 import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-interface MenuItemProps {
+export declare const MenuItem: React.FC<{
     option: SingleOption | MultiSelectOption;
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (option: SingleOption) => void;
-    onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
     version?: '1.0' | '2.0';
-}
-export declare const MenuItem: React.FC<MenuItemProps>;
-export {};
+}>;

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

@@ -2,4 +2,4 @@
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`;exports.MenuItem=t=>{let{option:i,isMultiSelect:l,showDescription:a,onSelect:d,last:u,version:p,onDropdownItemClick:m}=t;var x;function g(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(c,{version:p,style:u?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),g(!i.selected),null==m||m(i)},onMouseOver:function(){i.description?a(i.label,i.description):a()},listItem:{value:i.value,label:i.label},subText:i.subText,leadingIcon:l?e.jsxs("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e.jsx(n.CheckBox,{size:"2.0"===p?"SMALL":"DEFAULT",isDisabled:null!==(x=i.disabled)&&void 0!==x&&x,isChecked:!!i.selected,onValueChange:g}),e.jsx("div",Object.assign({style:{marginRight:"-4px"}},{children:i.leadingIcon}))]})):i.leadingIcon?e.jsx(e.Fragment,{children:i.leadingIcon}):e.jsx(e.Fragment,{}),customComponent:i.customComponent,trailingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(s.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Freeform"}))}):i.trailingIcon?e.jsx(e.Fragment,{children:i.trailingIcon}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":i.selected?"selected":"default"})};
+`;exports.MenuItem=t=>{let{option:i,isMultiSelect:l,showDescription:a,onSelect:d,last:u,version:p}=t;var x;function g(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(c,{version:p,style:u?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),g(!i.selected)},onMouseOver:function(){i.description?a(i.label,i.description):a()},listItem:{value:i.value,label:i.label},subText:i.subText,leadingIcon:l?e.jsxs("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e.jsx(n.CheckBox,{size:"2.0"===p?"SMALL":"DEFAULT",isDisabled:null!==(x=i.disabled)&&void 0!==x&&x,isChecked:!!i.selected,onValueChange:g}),e.jsx("div",Object.assign({style:{marginRight:"-4px"}},{children:i.leadingIcon}))]})):i.leadingIcon?e.jsx(e.Fragment,{children:i.leadingIcon}):e.jsx(e.Fragment,{}),customComponent:i.customComponent,trailingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(s.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Freeform"}))}):i.trailingIcon?e.jsx(e.Fragment,{children:i.trailingIcon}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":i.selected?"selected":"default"})};

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

@@ -1,13 +1,9 @@
 import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
-interface MenuListProps {
+export declare const MenuList: React.FC<{
     options: DropdownOption[];
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
     version?: '1.0' | '2.0';
-    onInfiniteScroll?: () => void;
-    onDropdownItemClick?: (option: DropdownOption) => void;
-}
-export declare const MenuList: React.FC<MenuListProps>;
-export {};
+}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=r=>{let{options:i,isMultiSelect:o,showDescription:l,onSelect:c,version:u,onInfiniteScroll:a,onDropdownItemClick:p}=r;const d=n.useRef(null),j=n.useRef(null),g=n.useCallback((()=>{d.current&&d.current.disconnect(),d.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==a||a())})),j.current&&d.current.observe(j.current)}),[a]);return n.useEffect((()=>(g(),()=>{d.current&&d.current.disconnect()})),[g,i]),e.jsx(e.Fragment,{children:i.map(((n,r)=>{const a=r===i.length-1;if(n.options){const i=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===u?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:u},{children:[i.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):e.jsx(e.Fragment,{}),i.label]})),i.options.map(((n,s)=>e.jsx(t.MenuItem,{version:u,last:s===i.options.length-1,onSelect:c,showDescription:l,onDropdownItemClick:p,isMultiSelect:o,option:n},`${r}-${s}`))),a?e.jsx("span",{ref:j}):null]}),r)}return e.jsxs("div",{children:[e.jsx(t.MenuItem,{version:u,last:a,onSelect:c,showDescription:l,onDropdownItemClick:p,isMultiSelect:o,option:n},r),a?e.jsx("span",{ref:j}):null]},r)}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=n=>{let{options:i,isMultiSelect:r,showDescription:o,onSelect:l,version:c}=n;return e.jsx(e.Fragment,{children:i.map(((n,a)=>{const u=a===i.length-1;if(n.options){const i=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===c?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:c},{children:[i.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):e.jsx(e.Fragment,{}),i.label]})),i.options.map(((s,n)=>e.jsx(t.MenuItem,{version:c,last:n===i.options.length-1,onSelect:l,showDescription:o,isMultiSelect:r,option:s},`${a}-${n}`)))]}),a)}return e.jsx(t.MenuItem,{version:c,last:u,onSelect:l,showDescription:o,isMultiSelect:r,option:n},a)}))})};

package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import { ButtonOptions, DropdownOption } from '../../../type';
-interface MultiSelectDropdownBottomBarProps {
+import { DropdownOption } from '../../../type';
+declare const MultiSelectDropdownBottomBar: React.FC<{
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
     buttonText?: string;
-    buttonOptions?: ButtonOptions;
-}
-declare const MultiSelectDropdownBottomBar: React.FC<MultiSelectDropdownBottomBarProps>;
+}>;
 export default MultiSelectDropdownBottomBar;

package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),n=require("../../../../../constants/Theme.js"),o=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=s=>{const{onClear:i,onApply:l,list:u,buttonText:a,buttonOptions:c}=s,{primaryButtonText:p,primaryButtonType:y,secondaryButtonText:d,secondaryButtonType:x}=null!=c?c:{},j=u.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(o.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:n.COLORS.content.primary}},{children:j?`${j} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:x||"primary",buttonText:d||"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:p||a||"Apply",buttonType:y||"primary",onClick:()=>{l()}})]}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:u,buttonText:a}=o;const c=u.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{l()}})]}))]}))};

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

@@ -12,7 +12,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
-    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -25,9 +24,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
-    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
-export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;
-export declare function getSelectedOptionsAsArray(selectedOption: DropdownOption[]): string[];

package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getSelectedOptionsAsArray=function(e){return e&&e.length?e.map((e=>{var t;const n=e;return null!==(t=n.selectedLabel)&&void 0!==t?t:n.label})):[]},exports.getSelectedOptionsAsText=function(e){if(e&&e.length)return e.map((e=>{var t;const n=e;return null!==(t=n.selectedLabel)&&void 0!==t?t:n.label})).join(", ")},exports.iterateOnOptions=function(e,t,n){return e.map((e=>{if(e.options){const s=e.options.map((e=>!n||n(e)?Object.assign(Object.assign({},e),t):Object.assign({},e)));return Object.assign(Object.assign({},e),{options:[...s]})}return!n||n(e)?Object.assign(Object.assign({},e),t):Object.assign({},e)}))},exports.iterateOnOptionsRaw=function(e,t){e.forEach((e=>{e.options?e.options.forEach(t):t(e)}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.iterateOnOptions=function(t,s,e){return t.map((t=>{if(t.options){const n=t.options.map((t=>!e||e(t)?Object.assign(Object.assign({},t),s):Object.assign({},t)));return Object.assign(Object.assign({},t),{options:[...n]})}return!e||e(t)?Object.assign(Object.assign({},t),s):Object.assign({},t)}))},exports.iterateOnOptionsRaw=function(t,s){t.forEach((t=>{t.options?t.options.forEach(s):s(t)}))};

package/dist/cjs/components/dropdown/hooks/useDropdown.d.ts

@@ -19,7 +19,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
-        selectedLabel?: string | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -32,7 +31,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
-        selectedLabel?: string | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Placement, PositioningStrategy } from '@popperjs/core';
-import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -20,10 +19,6 @@ export interface OpenDropdownProps {
     headerRef?: any;
     hideSelectAll?: boolean;
     primaryButtonText?: string;
-    onInfiniteScroll?: () => void;
-    onMultiSelectClear?: () => void;
-    onDropdownItemClick?: (option: DropdownOption) => void;
-    buttonOptions?: ButtonOptions;
 }
 export type GroupedOption = {
     label?: string;
@@ -42,14 +37,7 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
-    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
-export interface ButtonOptions {
-    primaryButtonText?: string;
-    primaryButtonType?: Type;
-    secondaryButtonText?: string;
-    secondaryButtonType?: Type;
-}
 export type { Placement };

package/dist/cjs/components/side-modal/SideModal.style.js

@@ -30,7 +30,6 @@
 	border-bottom: 1px solid ${t.COLORS.stroke.primary};
 	svg:hover {
 		cursor: pointer;
-		background: ${t.COLORS.background.base};
 	}
 	${t=>{let{headerStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}

package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:O,currentVariableList:v,CTAoptions:x,QRBoptions:f}=p;var y,L,h,R,U;const[V,T]=l.useState(""),[C,I]=l.useState(),{isError:q,disableEditVariable:w,pod:P,selectedCarouselIndex:E,originalVariableList:N,setOriginalVariableList:S,isProductCarouselType:_}=c.useTemplateModalContext();function B(e){if(T(e),null!=E&&E>-1&&_){const l=t.cloneDeep(N);if("URL"===m.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==S||S((e=>Object.assign(Object.assign({},e),{cards:t}))),null==g||g(`https://${e}`,"custom",j)}return}let l=v.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(a.buttons=s,null!=E&&E>-1){const e=[...N.cards];e[E]=a,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==g||g(`https://${e}`,"custom",j)}return l.useEffect((()=>{var e;if(m.buttonVariable&&n.editableVarPattern.test(m.buttonVariable))I(i.CUSTOM_URL_NAME),T((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&I(t[e])}}),[]),P!==o.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:w,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,l){const s=e;I(s);const a=("URL"===m.type?x:f).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=E&&E>-1&&_){const e=t.cloneDeep(N);if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=v.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j)}else{let t=v.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=v.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",j)}const l=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(l.buttons=e,null!=E&&E>-1){const e=[...N.cards];e[E]=l,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else B("")},defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),"custom_link"===(null==C?void 0:C.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:w?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:B,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(y=m.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(L=m.example)||void 0===L?void 0:L[0]}`:null!==(h=m.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(R=m.index)&&void 0!==R?R:0,queryParams:null!==(U=m.queryParams)&&void 0!==U?U:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:m.type,CTAoptions:x})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),o=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:O,currentVariableList:v,CTAoptions:x,QRBoptions:f}=p;var y,L,h,R,U;const[V,T]=l.useState(""),[C,I]=l.useState(),{isError:q,disableEditVariable:w,pod:P,selectedCarouselIndex:E,originalVariableList:N,setOriginalVariableList:S,isProductCarouselType:_}=c.useTemplateModalContext();function B(e){if(T(e),null!=E&&E>-1&&_){const l=t.cloneDeep(N);if("URL"===m.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==S||S((e=>Object.assign(Object.assign({},e),{cards:t}))),null==g||g(`https://${e}`,"custom",j)}return}let l=v.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(a.buttons=s,null!=E&&E>-1){const e=[...N.cards];e[E]=a,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==g||g(`https://${e}`,"custom",j)}return l.useEffect((()=>{var e;if(console.log("button: ",m),m.buttonVariable&&n.editableVarPattern.test(m.buttonVariable))console.log("button pattern match: ",!0),I(o.CUSTOM_URL_NAME),T((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),console.log("button index: ",e,t[e]),e>-1&&I(t[e])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:w,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,l){const s=e;I(s);const a=("URL"===m.type?x:f).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=E&&E>-1&&_){const e=t.cloneDeep(N);if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=v.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j)}else{let t=v.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=v.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",j)}const l=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(l.buttons=e,null!=E&&E>-1){const e=[...N.cards];e[E]=l,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else B("")},defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),"custom_link"===(null==C?void 0:C.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:w?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:B,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(y=m.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(L=m.example)||void 0===L?void 0:L[0]}`:null!==(h=m.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(R=m.index)&&void 0!==R?R:0,queryParams:null!==(U=m.queryParams)&&void 0!==U?U:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:m.type,CTAoptions:x})};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -9,7 +9,5 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolderHeight?: string;
     showPlaceholderWhenSelected?: boolean;
     inputStyle?: React.CSSProperties;
-    inputType?: 'chip' | 'default';
-    onDeleteChip?: (chip: string, index: number) => void;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

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

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as n,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as d}from"../input/context/InputStyleProvider.js";import a from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u,getSelectedOptionsAsArray as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,b,w,j,{placeHolder:y,size:O,onSelect:D,defaultOptions:H,disabled:S,noErrorHint:x,placeHolderHeight:C,showPlaceholderWhenSelected:I=!1,inputStyle:T={},inputType:E="default",onDeleteChip:P}=v,z=e(v,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[W,A]=i(!1),V=null!=O?O:"default",_=n(),[k,L]=i(null!=H?H:[]);r((()=>{var e;const o=[];null===(e=null==z?void 0:z.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)})),L([...o])}),[z.options]),r((()=>{H&&L([...H])}),[H]);const M=u(k),N=h(k);return o(d.Provider,Object.assign({value:{InputWrapper:Object.assign({height:C||("small"===V?32:48),width:null!==(g=null!==(f=z.buttonWidth)&&void 0!==f?f:z.width)&&void 0!==g?g:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},T),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:_,onSelect:function(e){Array.isArray(e)?L([...e]):L([e]),null==D||D(e)},disabled:S,onDropdownVisbilityChange:e=>A(e)},z,{hideOverLapAbs:"chip"===E},{children:["default"==E&&o(p,{version:z.version,noErrorHint:x,state:S?"disabled":"none",value:I?y:null!=M?M:"",errorMessage:z.error,variant:V,placeholder:null!=y?y:"Select an option",width:null!==(b=z.width)&&void 0!==b?b:"100%",onChangeText:m,rightIcon:{icon:()=>o(s,{style:{transform:W?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"small"===V?20:24,height:"small"===V?20:24,color:l.content.primary})},truncateText:!0}),"chip"==E&&o(a,{chips:N,onDeleteChip:(e,o)=>{null==P||P(e,o)},isDropdownOpened:W,sizeToUse:V,containerStyle:{width:null!==(w=z.width)&&void 0!==w?w:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==_?void 0:_.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};v.displayName="Dropdown";export{v as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,h,m,{placeHolder:g,size:v,onSelect:f,defaultOptions:b,disabled:j,noErrorHint:w,placeHolderHeight:H,showPlaceholderWhenSelected:x=!1,inputStyle:y={}}=c,S=e(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle"]);const[O,E]=t(!1),I=null!=v?v:"default",P=n(),[D,W]=t(null!=b?b:[]);r((()=>{var e;const o=[];null===(e=null==S?void 0:S.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)})),W([...o])}),[S.options]),r((()=>{b&&W([...b])}),[b]);const z=D.length?D.map((e=>e.label)).join(", "):void 0;return o(a.Provider,Object.assign({value:{InputWrapper:Object.assign({height:H||("small"===I?32:48),width:null!==(h=null!==(u=S.buttonWidth)&&void 0!==u?u:S.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},y),input:{minHeight:"100%"}}},{children:o(d,Object.assign({ref:P,onSelect:function(e){Array.isArray(e)?W([...e]):W([e]),null==f||f(e)},disabled:j,onDropdownVisbilityChange:e=>E(e)},S,{children:o(s,{version:S.version,noErrorHint:w,state:j?"disabled":"none",value:x?g:null!=z?z:"",errorMessage:S.error,variant:I,placeholder:null!=g?g:"Select an option",width:null!==(m=S.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>o(l,{style:{transform:O?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===I?20:24,height:"small"===I?20:24,color:i.content.primary})},truncateText:!0})}))}))};c.displayName="Dropdown";export{c as Dropdown};

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

@@ -10,7 +10,6 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
     tooltipContent?: string | undefined;
     tooltipDirection?: Placement | undefined;
     showTooltipArrow?: boolean | undefined;
-    hideOverLapAbs?: boolean | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

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

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

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as r}from"react";import{ZeroState as i}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as p}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as m,MenuListContainer as h}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,w=w=>{let{options:v,isSearchable:j,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:k,version:L,skipSorting:A,headerRef:F,hideSelectAll:I,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:R,buttonOptions:Z}=w;const{dropdownOptions:q,search:z,searchedString:K,searchedOptions:N,onApplyHandler:P,selectAllHandler:W,onMultiSelectClear:E,onFreeFormSelect:G,onMultiSelectApply:J,latestDropdownOptionsRef:Q,getSelectedOptions:U}=s(L,v,D,A,y,k),[V,X]=o(null!=x?x:b),[Y,$]=o(null),_=n(null);l(_,(()=>{if($(null),y&&"2.0"===L){const e=U(Q.current);null==M||M(e)}else null==M||M(q)}),[F]);const ee=null!=C?C:g,te="number"==typeof ee?j&&y?ee-96:j&&!y||!j&&y?ee-48:ee:ee;r((()=>{const e=null!=x?x:b;if(null===Y)X(e);else if("number"==typeof e)X(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));X(t)}}),[Y]);const oe=[],ne=(K&&k?N:q).map((e=>{var t,o;if(K&&!k){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(K.toLowerCase()))&&(oe.push(!K||e.label===K),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(K.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(K.toLowerCase()))?(oe.push(!K||e.label===K),e):null}return e})).filter((e=>null!==e)),re=!!j&&K&&0===ne.length;return e(m,Object.assign({version:L,ref:_,style:{width:V}},{children:[e("div",Object.assign({style:{width:Y?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:z,version:L}),ne.length||K?e(h,Object.assign({minHeight:ee,maxHeight:te},{children:[!!y&&!re&&!I&&t(a,{version:L,options:K&&k?N:q,onSelect:W}),!O&&re&&t(S,{height:te,searchedString:K}),O&&(re||!!oe.length&&oe.every((e=>!1===e)))&&t(p,{version:L,isMultiSelect:y,onSelect:G,searchedString:K}),t(u,{onInfiniteScroll:H,onDropdownItemClick:R,version:L,onSelect:P,showDescription:function(e,t){$(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ne})]})):t("div",Object.assign({style:{height:ee,display:"flex"}},{children:t(i,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!ne.length&&!K)&&"2.0"!==L&&t(d,{onClear:()=>{E(),null==T||T()},onApply:J,list:K&&k?N:q,buttonText:B,buttonOptions:Z})]})),!!Y&&t(c,{title:Y.title,description:Y.description,version:L})]}))};export{w as OpenedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as r,useEffect as i}from"react";import{ZeroState as n}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as p}from"./menu/MenuList.js";import{SelectAllMenu as u}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,v=v=>{let{options:j,isSearchable:w,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:A,skipSorting:F,headerRef:k,hideSelectAll:B,primaryButtonText:H}=v;const{dropdownOptions:T,search:R,searchedString:Z,searchedOptions:q,onApplyHandler:z,selectAllHandler:I,onMultiSelectClear:K,onFreeFormSelect:N,onMultiSelectApply:P,latestDropdownOptionsRef:W,getSelectedOptions:E}=s(A,j,D,F,y,L),[G,J]=o(null!=x?x:b),[Q,U]=o(null),V=r(null);l(V,(()=>{if(U(null),y&&"2.0"===A){const e=E(W.current);null==M||M(e)}else null==M||M(T)}),[k]);const X=null!=C?C:g,Y="number"==typeof X?w&&y?X-96:w&&!y||!w&&y?X-48:X:X;i((()=>{const e=null!=x?x:b;if(null===Q)J(e);else if("number"==typeof e)J(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));J(t)}}),[Q]);const $=[],_=(Z&&L?q:T).map((e=>{var t,o;if(Z&&!L){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(Z.toLowerCase()))&&($.push(!Z||e.label===Z),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Z.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(Z.toLowerCase()))?($.push(!Z||e.label===Z),e):null}return e})).filter((e=>null!==e)),ee=!!w&&Z&&0===_.length;return e(h,Object.assign({version:A,ref:V,style:{width:G}},{children:[e("div",Object.assign({style:{width:Q?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(f,{onSearch:R,version:A}),_.length||Z?e(m,Object.assign({minHeight:X,maxHeight:Y},{children:[!!y&&!ee&&!B&&t(u,{version:A,options:Z&&L?q:T,onSelect:I}),!O&&ee&&t(S,{height:Y,searchedString:Z}),O&&(ee||!!$.length&&$.every((e=>!1===e)))&&t(a,{version:A,isMultiSelect:y,onSelect:N,searchedString:Z}),t(p,{version:A,onSelect:z,showDescription:function(e,t){U(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:_})]})):t("div",Object.assign({style:{height:X,display:"flex"}},{children:t(n,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!_.length&&!Z)&&"2.0"!==A&&t(d,{onClear:K,onApply:P,list:Z&&L?q:T,buttonText:H})]})),!!Q&&t(c,{title:Q.title,description:Q.description,version:A})]}))};export{v as OpenedDropdown};

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

@@ -1,13 +1,10 @@
 import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-interface MenuItemProps {
+export declare const MenuItem: React.FC<{
     option: SingleOption | MultiSelectOption;
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (option: SingleOption) => void;
-    onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
     version?: '1.0' | '2.0';
-}
-export declare const MenuItem: React.FC<MenuItemProps>;
-export {};
+}>;

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

@@ -2,4 +2,4 @@ import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"st
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u,onDropdownItemClick:b}=i;var f;function h(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),h(!s.selected),null==b||b(s)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(f=s.disabled)&&void 0!==f&&f,isChecked:!!s.selected,onValueChange:h}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};
+`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u}=i;var b;function f(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),f(!s.selected)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(b=s.disabled)&&void 0!==b&&b,isChecked:!!s.selected,onValueChange:f}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};

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

@@ -1,13 +1,9 @@
 import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
-interface MenuListProps {
+export declare const MenuList: React.FC<{
     options: DropdownOption[];
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
     version?: '1.0' | '2.0';
-    onInfiniteScroll?: () => void;
-    onDropdownItemClick?: (option: DropdownOption) => void;
-}
-export declare const MenuList: React.FC<MenuListProps>;
-export {};
+}>;

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

@@ -1 +1 @@
-import{jsx as n,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useCallback as o,useEffect as i}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as c}from"./MenuList.styled.js";const l=l=>{let{options:p,isMultiSelect:u,showDescription:a,onSelect:m,version:d,onInfiniteScroll:g,onDropdownItemClick:h}=l;const I=r(null),f=r(null),v=o((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((n=>{n[0].isIntersecting&&(null==g||g())})),f.current&&I.current.observe(f.current)}),[g]);return i((()=>(v(),()=>{I.current&&I.current.disconnect()})),[v,p]),n(e,{children:p.map(((r,o)=>{const i=o===p.length-1;if(r.options){const l=r;return t("div",Object.assign({style:{marginTop:"2.0"===d?2:0}},{children:[t(c,Object.assign({version:d},{children:[l.leadingIcon?n("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):n(e,{}),l.label]})),l.options.map(((e,t)=>n(s,{version:d,last:t===l.options.length-1,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:e},`${o}-${t}`))),i?n("span",{ref:f}):null]}),o)}return t("div",{children:[n(s,{version:d,last:i,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:r},o),i?n("span",{ref:f}):null]},o)}))})};export{l as MenuList};
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{MenuItem as n}from"./MenuItem.js";import{StyledGroupedLabel as o}from"./MenuList.styled.js";const s=s=>{let{options:r,isMultiSelect:l,showDescription:c,onSelect:p,version:a}=s;return e(t,{children:r.map(((s,m)=>{const g=m===r.length-1;if(s.options){const r=s;return i("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[i(o,Object.assign({version:a},{children:[r.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:r.leadingIcon})):e(t,{}),r.label]})),r.options.map(((t,i)=>e(n,{version:a,last:i===r.options.length-1,onSelect:p,showDescription:c,isMultiSelect:l,option:t},`${m}-${i}`)))]}),m)}return e(n,{version:a,last:g,onSelect:p,showDescription:c,isMultiSelect:l,option:s},m)}))})};export{s as MenuList};

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import { ButtonOptions, DropdownOption } from '../../../type';
-interface MultiSelectDropdownBottomBarProps {
+import { DropdownOption } from '../../../type';
+declare const MultiSelectDropdownBottomBar: React.FC<{
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
     buttonText?: string;
-    buttonOptions?: ButtonOptions;
-}
-declare const MultiSelectDropdownBottomBar: React.FC<MultiSelectDropdownBottomBarProps>;
+}>;
 export default MultiSelectDropdownBottomBar;

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as n}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{BottomBarContainer as s}from"./MultiSelectDropdownBottomBar.styled.js";const l=l=>{const{onClear:i,onApply:p,list:a,buttonText:c,buttonOptions:y}=l,{primaryButtonText:u,primaryButtonType:m,secondaryButtonText:d,secondaryButtonType:f}=null!=y?y:{},b=a.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(s,Object.assign({style:{justifyContent:"space-between"}},{children:[e(n,Object.assign({style:{flex:1,color:r.content.primary}},{children:b?`${b} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:f||"primary",buttonText:d||"Clear",onClick:i}),e(o,{size:"small",buttonText:u||c||"Apply",buttonType:m||"primary",onClick:()=>{p()}})]}))]}))};export{l as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{BottomBarContainer as n}from"./MultiSelectDropdownBottomBar.styled.js";const s=s=>{let{onApply:i,onClear:c,list:p,buttonText:a}=s;const m=p.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(n,Object.assign({style:{justifyContent:"space-between"}},{children:[e(r,Object.assign({style:{flex:1,color:l.content.primary}},{children:m?`${m} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:c}),e(o,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{i()}})]}))]}))};export{s as default};

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

@@ -12,7 +12,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
-    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -25,9 +24,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
-    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
-export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;
-export declare function getSelectedOptionsAsArray(selectedOption: DropdownOption[]): string[];

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-function n(n,t,e){return n.map((n=>{if(n.options){const s=n.options.map((n=>!e||e(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)));return Object.assign(Object.assign({},n),{options:[...s]})}return!e||e(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)}))}function t(n,t){n.forEach((n=>{n.options?n.options.forEach(t):t(n)}))}function e(n){if(n&&n.length)return n.map((n=>{var t;const e=n;return null!==(t=e.selectedLabel)&&void 0!==t?t:e.label})).join(", ")}function s(n){return n&&n.length?n.map((n=>{var t;const e=n;return null!==(t=e.selectedLabel)&&void 0!==t?t:e.label})):[]}export{s as getSelectedOptionsAsArray,e as getSelectedOptionsAsText,n as iterateOnOptions,t as iterateOnOptionsRaw};
+function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...i]})}return!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)}))}function n(s,n){s.forEach((s=>{s.options?s.options.forEach(n):n(s)}))}export{s as iterateOnOptions,n as iterateOnOptionsRaw};

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -19,7 +19,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
-        selectedLabel?: string | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -32,7 +31,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
-        selectedLabel?: string | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Placement, PositioningStrategy } from '@popperjs/core';
-import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -20,10 +19,6 @@ export interface OpenDropdownProps {
     headerRef?: any;
     hideSelectAll?: boolean;
     primaryButtonText?: string;
-    onInfiniteScroll?: () => void;
-    onMultiSelectClear?: () => void;
-    onDropdownItemClick?: (option: DropdownOption) => void;
-    buttonOptions?: ButtonOptions;
 }
 export type GroupedOption = {
     label?: string;
@@ -42,14 +37,7 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
-    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
-export interface ButtonOptions {
-    primaryButtonText?: string;
-    primaryButtonType?: Type;
-    secondaryButtonText?: string;
-    secondaryButtonType?: Type;
-}
 export type { Placement };

package/dist/esm/components/side-modal/SideModal.style.js

@@ -1,8 +1,8 @@
-import e,{css as t}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{ComponentZindex as i}from"../../constants/zindex.js";const r=e.div`
+import e,{css as t}from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as o}from"../../constants/zindex.js";const r=e.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${e=>e.zIndex||i.SIDE_MODAL};
+	z-index: ${e=>e.zIndex||o.SIDE_MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.4);
@@ -12,7 +12,7 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 `,n=e.div`
 	height: 100%;
 	width: ${e=>e.width||"566px"};
-	background: ${o.surface.standard};
+	background: ${i.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -25,24 +25,23 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	background: ${o.surface.standard};
+	background: ${i.surface.standard};
 	padding: 0px 24px;
-	border-bottom: 1px solid ${o.stroke.primary};
+	border-bottom: 1px solid ${i.stroke.primary};
 	svg:hover {
 		cursor: pointer;
-		background: ${o.background.base};
 	}
-	${e=>{let{headerStyle:o}=e;return t`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	${e=>{let{headerStyle:i}=e;return t`
+		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
 	`}}
 `,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
 	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
-	${e=>{let{bodyStyle:o}=e;return t`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	${e=>{let{bodyStyle:i}=e;return t`
+		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
 	`}}
-`,a=e.div`
+`,p=e.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -51,14 +50,14 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 	flex-direction: ${e=>e.footerDirection||"row"};
 	justify-content: space-between;
 	align-items: center;
-	background: ${o.surface.standard};
-	border-top: 1px solid ${o.stroke.primary};
+	background: ${i.surface.standard};
+	border-top: 1px solid ${i.stroke.primary};
 	padding: 0px 24px;
-	${e=>{let{footerStyle:o}=e;return t`
-		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	${e=>{let{footerStyle:i}=e;return t`
+		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
 	`}}
-`,p=e.div`
+`,a=e.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
+`;export{a as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,p as SideModalFooter,d as SideModalHeader,r as SideModalStyle};

package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as j}from"./VariableConnector.js";const f=f=>{let{variableListIndex:g,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:h,QRBoptions:L}=f;var R,U,V,T,w;const[I,C]=s(""),[P,E]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K}=p();function Y(t){if(C(t),null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==S||S((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",g)}return}let e=x.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=a,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",g)}return a((()=>{var t;if(O.buttonVariable&&i.test(O.buttonVariable))E(r),C((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),t>-1&&E(e[t])}}),[]),B!==c.CHATBOT?t(j,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(t,e){const s=t;E(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==y||y({flowName:s.label,flowId:s.value},"placeholder",g),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=x.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g)}else{let e=x.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=x.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==y||y({flowName:s.label,flowId:s.value},"placeholder",g)}const e=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(e.buttons=t,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=e,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else Y("")},defaultOptions:P?[Object.assign(Object.assign({},P),{selected:!0})]:[]})})),"custom_link"===(null==P?void 0:P.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?I?b(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):e(m,{index:g,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{f as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as g}from"./VariableConnector.js";const j=j=>{let{variableListIndex:f,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:x,currentVariableList:y,CTAoptions:h,QRBoptions:L}=j;var R,U,V,T,w;const[I,C]=s(""),[P,E]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K}=p();function Y(t){if(C(t),null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==S||S((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",f)}return}let e=y.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=y.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=a,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",f)}return a((()=>{var t;if(console.log("button: ",O),O.buttonVariable&&i.test(O.buttonVariable))console.log("button pattern match: ",!0),E(r),C((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),console.log("button index: ",t,e[t]),t>-1&&E(e[t])}}),[]),B!==c.CHATBOT?t(g,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(t,e){const s=t;E(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==x||x({flowName:s.label,flowId:s.value},"placeholder",f),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=y.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=y.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let e=y.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=y.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==x||x({flowName:s.label,flowId:s.value},"placeholder",f)}const e=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(e.buttons=t,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=e,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else Y("")},defaultOptions:P?[Object.assign(Object.assign({},P),{selected:!0})]:[]})})),"custom_link"===(null==P?void 0:P.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?I?b(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):e(m,{index:f,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{j as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.552-beta.1",
+	"version": "0.0.552-beta.10",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",

package/dist/cjs/components/dropdown/ChipInput.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface ChipInputProps {
-    chips: string[];
-    onDeleteChip: (chip: string, index: number) => void;
-    containerStyle?: React.CSSProperties;
-    isDropdownOpened?: boolean;
-    sizeToUse?: 'default' | 'small';
-    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-declare const ChipInput: React.FC<ChipInputProps>;
-export default ChipInput;

package/dist/cjs/components/dropdown/ChipInput.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),i=require("../../assets/icons/cross.svg.js"),r=require("../tag/Tag.js"),n=require("../TypographyStyle.js");exports.default=l=>{let{chips:o,onDeleteChip:a,containerStyle:c={},sizeToUse:d="default",isDropdownOpened:p,setDropdownVisibility:g}=l;return e.jsxs("div",Object.assign({style:Object.assign({border:`1px solid ${s.COLORS.stroke.primary}`,width:"360px",height:"100%",padding:"8px",display:"flex",justifyContent:"space-between",alignItems:"center",borderRadius:"4px"},c)},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}},{children:[o.slice(0,2).map(((s,t)=>e.jsx("div",{children:e.jsx(r.Tag,Object.assign({tagText:s,TrailingIcon:()=>e.jsx(i.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>a(s,t)})},{children:s}))},t))),o.length>2&&e.jsx(n.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${o.length-2} more`})),0===o.length&&e.jsx(n.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:"Select.."}))]})),e.jsx("div",Object.assign({onClick:()=>null==g?void 0:g(!p)},{children:e.jsx(t.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:"small"===d?20:24,height:"small"===d?20:24,color:s.COLORS.content.primary})}))]}))};

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

@@ -1,11 +0,0 @@
-import React from 'react';
-interface ChipInputProps {
-    chips: string[];
-    onDeleteChip: (chip: string, index: number) => void;
-    containerStyle?: React.CSSProperties;
-    isDropdownOpened?: boolean;
-    sizeToUse?: 'default' | 'small';
-    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-declare const ChipInput: React.FC<ChipInputProps>;
-export default ChipInput;

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

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import i from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as o}from"../tag/Tag.js";import{BodyCaption as n}from"../TypographyStyle.js";const l=l=>{let{chips:a,onDeleteChip:c,containerStyle:d={},sizeToUse:p="default",isDropdownOpened:g,setDropdownVisibility:h}=l;return e("div",Object.assign({style:Object.assign({border:`1px solid ${s.stroke.primary}`,width:"360px",height:"100%",padding:"8px",display:"flex",justifyContent:"space-between",alignItems:"center",borderRadius:"4px"},d)},{children:[e("div",Object.assign({style:{display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}},{children:[a.slice(0,2).map(((e,s)=>t("div",{children:t(o,Object.assign({tagText:e,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>c(e,s)})},{children:e}))},s))),a.length>2&&t(n,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t(n,Object.assign({color:s.content.placeholder},{children:"Select.."}))]})),t("div",Object.assign({onClick:()=>null==h?void 0:h(!g)},{children:t(i,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===p?20:24,height:"small"===p?20:24,color:s.content.primary})}))]}))};export{l as default};