@bikdotai/bik-component-library 0.0.762 → 0.0.763-beta.1

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"),s=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),r=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,f=290;exports.OpenedDropdown=S=>{let{options:b,isSearchable:j,isMultiSelect:g,maxSelections:v,width:x,allowFreeForm:O,height:m,onClose:w,onSelect:y,onSearch:D,version:C,skipSorting:q,headerRef:M,hideSelectAll:k,primaryButtonText:L,onInfiniteScroll:A,onMultiSelectClear:E,onDropdownItemClick:I,buttonOptions:F,isSearchLoading:T,disableSearchOptions:B,disableSearchedOptionExcept:R,useDefaultCursor:H,containerStyle:Z={},zeroState:z}=S;const{dropdownOptions:P,search:V,searchedString:W,searchedOptions:$,onApplyHandler:_,selectAllHandler:K,onMultiSelectClear:N,onFreeFormSelect:U,onMultiSelectApply:G,latestDropdownOptionsRef:J,getSelectedOptions:Q,getCurrentSelectionCount:X}=o.useDropdown(C,b,y,q,g,D,B,R,v),[Y,ee]=t.useState(null!=x?x:f),[te,ne]=t.useState(null),[se,oe]=t.useState(-1),re=t.useRef(null),ie=t.useRef([]),le=t.useRef(null);s.useOutside(re,(()=>{if(ne(null),g&&"2.0"===C){const e=Q(J.current);null==w||w(e)}else null==w||w(P)}),[M,ie]),t.useEffect((()=>{const e=setTimeout((()=>{re.current&&re.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);t.useEffect((()=>{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 n=e;n.disabled||t.push(n)}})),t})(W&&D?$:P);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),oe((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=le.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),oe((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=le.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&se>=0){e.preventDefault();const n=t[se];n&&(_(Object.assign(Object.assign({},n),{selected:!n.selected})),I&&I(n))}},t=re.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[se,W,$,P,D,_,I]);const ue=null!=m?m:h,ce="number"==typeof ue?j&&g?ue-96:j&&!g||!j&&g?ue-48:ue:ue;t.useEffect((()=>{const e=null!=x?x:f;if(null===te)ee(e);else if("number"==typeof e)ee(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));ee(t)}}),[te]);const ae=[],de=(e=>{if(!g||!v&&0!==v)return e;const t=X(e)>=v;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 n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((W&&D?$:P).map((e=>{var t,n;if(W&&!D){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(W.toLowerCase()))&&(ae.push(!W||e.label===W),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(W.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(W.toLowerCase()))?(ae.push(!W||e.label===W),e):null}return e})).filter((e=>null!==e))),pe=!!j&&W&&0===de.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:C,ref:re,tabIndex:-1,style:Object.assign(Object.assign({width:Y},Z),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:te?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&e.jsx(d.SearchBox,{onSearch:V,version:C}),de.length||W?e.jsxs(a.MenuListContainer,Object.assign({minHeight:ue,maxHeight:ce,ref:le},{children:[!!g&&!pe&&!k&&e.jsx(u.SelectAllMenu,{version:C,options:W&&D?$:P,onSelect:K}),!O&&pe&&e.jsx(p.SearchZeroState,{isLoading:T,height:ce,searchedString:W,containerWidth:x}),O&&(pe||!!ae.length&&ae.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:C,isMultiSelect:g,onSelect:U,searchedString:W}),e.jsx(l.MenuList,{onInfiniteScroll:A,onDropdownItemClick:I,version:C,onSelect:_,showDescription:function(e,t){ne(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:de,useDefaultCursor:H,ref:ie,focusedIndex:se})]})):e.jsx("div",Object.assign({style:{height:ue,display:"flex"}},{children:e.jsx(n.ZeroState,Object.assign({},z,{title:(null==z?void 0:z.title)||"No results found",subTitle:(null==z?void 0:z.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!g&&!(!de.length&&!W)&&"2.0"!==C&&e.jsx(c.default,{onClear:()=>{N(),null==E||E()},onApply:G,list:W&&D?$:P,buttonText:L,buttonOptions:F})]})),!!te&&e.jsx(r.Description,{title:te.title,description:te.description,version:C})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),r=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,f=290;exports.OpenedDropdown=b=>{let{options:S,isSearchable:g,isMultiSelect:j,maxSelections:v,width:x,allowFreeForm:O,height:m,onClose:w,onSelect:y,onSearch:D,version:C,skipSorting:k,headerRef:q,hideSelectAll:M,primaryButtonText:L,onInfiniteScroll:E,onMultiSelectClear:A,onDropdownItemClick:I,buttonOptions:F,isSearchLoading:T,disableSearchOptions:R,disableSearchedOptionExcept:B,useDefaultCursor:H,containerStyle:Z={},zeroState:z,isDraggable:P=!1,onOptionsReorder:V}=b;const W=t.useCallback((e=>{if(!P||!j)return e;const t=[],n=[];return e.forEach((e=>{if(e.options)n.push(e);else{e.selected?t.push(e):n.push(e)}})),[...t,...n]}),[P,j]),[$,_]=t.useState((()=>W(S)));t.useEffect((()=>{_(W(S))}),[S,W]);const K=t.useCallback((e=>{const t=W(e);_(t),null==V||V(t)}),[V,W]),N=P?$:S,{dropdownOptions:U,search:G,searchedString:J,searchedOptions:Q,onApplyHandler:X,selectAllHandler:Y,onMultiSelectClear:ee,onFreeFormSelect:te,onMultiSelectApply:ne,latestDropdownOptionsRef:se,getSelectedOptions:oe,getCurrentSelectionCount:re}=o.useDropdown(C,N,y,k||P,j,D,R,B,v),[ie,le]=t.useState(null!=x?x:f),[ue,ce]=t.useState(null),[ae,de]=t.useState(-1),pe=t.useRef(null),he=t.useRef([]),fe=t.useRef(null);s.useOutside(pe,(()=>{if(ce(null),j&&"2.0"===C){const e=oe(se.current);null==w||w(e)}else null==w||w(U)}),[q,he]),t.useEffect((()=>{const e=setTimeout((()=>{pe.current&&pe.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);t.useEffect((()=>{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 n=e;n.disabled||t.push(n)}})),t})(J&&D?Q:U);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),de((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=fe.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),de((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=fe.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&ae>=0){e.preventDefault();const n=t[ae];n&&(X(Object.assign(Object.assign({},n),{selected:!n.selected})),I&&I(n))}},t=pe.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[ae,J,Q,U,D,X,I]);const be=null!=m?m:h,Se="number"==typeof be?g&&j?be-96:g&&!j||!g&&j?be-48:be:be;t.useEffect((()=>{const e=null!=x?x:f;if(null===ue)le(e);else if("number"==typeof e)le(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));le(t)}}),[ue]);const ge=[],je=(e=>{if(!j||!v&&0!==v)return e;const t=re(e)>=v;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 n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((J&&D?Q:U).map((e=>{var t,n;if(J&&!D){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(J.toLowerCase()))&&(ge.push(!J||e.label===J),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(J.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(J.toLowerCase()))?(ge.push(!J||e.label===J),e):null}return e})).filter((e=>null!==e))),ve=!!g&&J&&0===je.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:C,ref:pe,tabIndex:-1,style:Object.assign(Object.assign({width:ie},Z),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:ue?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!g&&e.jsx(d.SearchBox,{onSearch:G,version:C}),je.length||J?e.jsxs(a.MenuListContainer,Object.assign({minHeight:be,maxHeight:Se,ref:fe},{children:[!!j&&!ve&&!M&&e.jsx(u.SelectAllMenu,{version:C,options:J&&D?Q:U,onSelect:Y}),!O&&ve&&e.jsx(p.SearchZeroState,{isLoading:T,height:Se,searchedString:J,containerWidth:x}),O&&(ve||!!ge.length&&ge.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:C,isMultiSelect:j,onSelect:te,searchedString:J}),e.jsx(l.MenuList,{onInfiniteScroll:E,onDropdownItemClick:I,version:C,onSelect:X,showDescription:function(e,t){ce(e&&t?{title:e,description:t}:null)},isMultiSelect:j,options:je,useDefaultCursor:H,ref:he,focusedIndex:ae,isDraggable:P,onOptionsReorder:K})]})):e.jsx("div",Object.assign({style:{height:be,display:"flex"}},{children:e.jsx(n.ZeroState,Object.assign({},z,{title:(null==z?void 0:z.title)||"No results found",subTitle:(null==z?void 0:z.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!j&&!(!je.length&&!J)&&"2.0"!==C&&e.jsx(c.default,{onClear:()=>{ee(),null==A||A()},onApply:ne,list:J&&D?Q:U,buttonText:L,buttonOptions:F})]})),!!ue&&e.jsx(r.Description,{title:ue.title,description:ue.description,version:C})]}))};

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

@@ -11,6 +11,12 @@ interface MenuItemProps {
     useDefaultCursor?: boolean;
     isFocused?: boolean;
     dataIndex?: number;
+    isDraggable?: boolean;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
+    isDraggedOver?: boolean;
 }
 export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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

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

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

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

package/dist/cjs/components/dropdown/hooks/useDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/debounce"),t=require("react"),s=require("../OpenedDropdown/utils/iterationOnOptions.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e);exports.useDropdown=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",n=arguments.length>1?arguments[1]:void 0,c=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0,o=arguments.length>4?arguments[4]:void 0,a=arguments.length>5?arguments[5]:void 0,u=arguments.length>6?arguments[6]:void 0,r=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[],d=arguments.length>8?arguments[8]:void 0;const[f,p]=t.useState(null!=n?n:[]),[v,O]=t.useState([]),[g,b]=t.useState(""),h=t.useRef(f),j=t.useRef(a);t.useEffect((()=>{j.current=a}),[a]),t.useEffect((()=>{if(h.current=f,v.length&&g&&a){let e=[...v];const t=f.map((e=>{if(e.options)return e.options.map((e=>({value:e.value,selected:e.selected})));const t=e;return{value:t.value,selected:t.selected}})).flat();e=e.map((e=>{const s=t.find((t=>e.value===t.value));return s?Object.assign(Object.assign({},e),{selected:s.selected}):e})),u&&(e=e.map((e=>Object.assign(Object.assign({},e),{disabled:!r.includes(e.value)})))),O(o&&!i?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[f]),t.useEffect((()=>{if(n){const e=[...n];p(o&&!i?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[n]);const m=e=>{const t=[];return e.forEach((e=>{if(e.options){const s=e.options.filter((e=>!0===e.selected));t.push(Object.assign(Object.assign({},e),{options:[...s]}))}else e.selected&&t.push(Object.assign({},e))})),t},S=e=>{let t=0;return e.forEach((e=>{e.options?t+=e.options.filter((e=>!0===e.selected)).length:e.selected&&t++})),t},E=e=>!(!o||!d&&0!==d)&&S(e)>=d,w=t.useCallback((e=>{const t=j.current;if(!e||!t)return;const n=[];s.iterateOnOptionsRaw(h.current,(e=>{e.selected&&!n.includes(e.value)&&n.push(e.value)})),t(e).then((e=>{if(e){const t=e.map((e=>{if(e.options){const t=e;return Object.assign(Object.assign({},t),{options:t.options.map((e=>Object.assign(Object.assign({},e),{selected:n.includes(e.value)})))})}return Object.assign(Object.assign({},e),{selected:n.includes(e.value)})}));O([...t])}}))}),[]),C=t.useMemo((()=>l.default(w,300)),[w]);function F(t,n){if(o){if(t.selected&&d&&E(f))return;if(v.length&&g&&a)if(t.selected){if(d&&E(f))return;let l=!1;const c=s.iterateOnOptions(f,{selected:t.selected},(e=>e.value===t.value&&(l=!0,!0)));if(l||c.push(t),n)return[...c];p([...c]),"2.0"===e&&A(c)}else{let l=!1,c=s.iterateOnOptions(f,{selected:t.selected},(e=>e.value===t.value&&(l=!0,!0)));if(l&&(c=c.filter((e=>e.value!==t.value))),n)return[...c];p([...c]),"2.0"===e&&A(c)}else{const l=s.iterateOnOptions(f,{selected:t.selected},(e=>e.value===t.value));if(n)return[...l];p([...l]),"2.0"===e&&A(l)}}else null==c||c(t)}function A(e){const t=m(null!=e?e:h.current);null==c||c([...t])}return t.useEffect((()=>()=>null==C?void 0:C.cancel()),[C]),{latestDropdownOptionsRef:h,dropdownOptions:f,search:function(e){b(e),O([]),e?C(e):null==C||C.cancel()},searchedString:g,searchedOptions:v,onApplyHandler:F,selectAllHandler:function(t){if(v.length&&g&&a)!function(t){let s=[...f];t?v.forEach((e=>{let t=!1;s=s.map((s=>{const n=e;return void 0!==n.value&&n.value===s.value?(t=!0,Object.assign(Object.assign({},s),{selected:!0})):s})),t||s.push(Object.assign(Object.assign({},e),{selected:!0}))})):v.forEach((e=>{s=s.map((t=>{const s=e;return void 0!==s.value&&s.value===t.value?Object.assign(Object.assign({},t),{selected:!1}):t}))})),p([...s]),"2.0"===e&&A(s)}("selectAll"===t);else if("selectAll"===t){const t=s.iterateOnOptions(f,{selected:!0},(e=>{var t;return g?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(g.toLowerCase()))&&!e.disabled:!e.disabled}));p([...t]),"2.0"===e&&A(t)}else if("notSelected"===t){const t=s.iterateOnOptions(f,{selected:!1},(e=>!e.disabled));p([...t]),"2.0"===e&&A(t)}},onMultiSelectClear:function(){const t=s.iterateOnOptions(f,{selected:!1});p([...t]),"2.0"===e&&A(t)},onFreeFormSelect:function(t){if(!o)return void F({label:g,value:g,isFreeForm:!0,selected:!0});const s=f.map((e=>e.options?e:Object.assign(Object.assign({},e),{selected:e.label===g&&e.value===g?t:e.selected})));t&&(s.some((e=>e.label===g&&e.value===g))||s.unshift({label:g,value:g,isFreeForm:!0,selected:!0})),p([...s]),"2.0"===e&&A(s)},onMultiSelectApply:A,getSelectedOptions:m,getCurrentSelectionCount:S,isMaxSelectionsReached:E,maxSelections:d}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../OpenedDropdown/utils/iterationOnOptions.js");exports.useDropdown=function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",n=arguments.length>1?arguments[1]:void 0,l=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0,c=arguments.length>4?arguments[4]:void 0,o=arguments.length>5?arguments[5]:void 0,a=arguments.length>6?arguments[6]:void 0,u=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[],r=arguments.length>8?arguments[8]:void 0;const[d,p]=e.useState(null!=n?n:[]),[v,f]=e.useState([]),[O,g]=e.useState(""),b=e.useRef(d);e.useEffect((()=>{if(b.current=d,v.length&&O&&o){let e=[...v];const t=d.map((e=>{if(e.options)return e.options.map((e=>({value:e.value,selected:e.selected})));const t=e;return{value:t.value,selected:t.selected}})).flat();e=e.map((e=>{const s=t.find((t=>e.value===t.value));return s?Object.assign(Object.assign({},e),{selected:s.selected}):e})),a&&(e=e.map((e=>Object.assign(Object.assign({},e),{disabled:!u.includes(e.value)})))),f(c&&!i?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[d]),e.useEffect((()=>{if(n){const e=[...n];p(c&&!i?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[n]);const h=e=>{const t=[];return e.forEach((e=>{if(e.options){const s=e.options.filter((e=>!0===e.selected));t.push(Object.assign(Object.assign({},e),{options:[...s]}))}else e.selected&&t.push(Object.assign({},e))})),t},j=e=>{let t=0;return e.forEach((e=>{e.options?t+=e.options.filter((e=>!0===e.selected)).length:e.selected&&t++})),t},m=e=>!(!c||!r&&0!==r)&&j(e)>=r;function S(e,n){if(c){if(e.selected&&r&&m(d))return;if(v.length&&O&&o)if(e.selected){if(r&&m(d))return;let l=!1;const i=t.iterateOnOptions(d,{selected:e.selected},(t=>t.value===e.value&&(l=!0,!0)));if(l||i.push(e),n)return[...i];p([...i]),"2.0"===s&&w(i)}else{let l=!1,i=t.iterateOnOptions(d,{selected:e.selected},(t=>t.value===e.value&&(l=!0,!0)));if(l&&(i=i.filter((t=>t.value!==e.value))),n)return[...i];p([...i]),"2.0"===s&&w(i)}else{const l=t.iterateOnOptions(d,{selected:e.selected},(t=>t.value===e.value));if(n)return[...l];p([...l]),"2.0"===s&&w(l)}}else null==l||l(e)}function w(e){const t=h(null!=e?e:b.current);null==l||l([...t])}return{latestDropdownOptionsRef:b,dropdownOptions:d,search:function(e){if(g(e),f([]),e&&o){const s=[];t.iterateOnOptionsRaw(d,(e=>{e.selected&&!s.includes(e.value)&&s.push(e.value)})),o(e).then((e=>{if(e){const t=e.map((e=>{if(e.options){const t=e;return Object.assign(Object.assign({},t),{options:t.options.map((e=>Object.assign(Object.assign({},e),{selected:s.includes(e.value)})))})}return Object.assign(Object.assign({},e),{selected:s.includes(e.value)})}));f([...t])}}))}},searchedString:O,searchedOptions:v,onApplyHandler:S,selectAllHandler:function(e){if(v.length&&O&&o)!function(e){let t=[...d];e?v.forEach((e=>{let s=!1;t=t.map((t=>{const n=e;return void 0!==n.value&&n.value===t.value?(s=!0,Object.assign(Object.assign({},t),{selected:!0})):t})),s||t.push(Object.assign(Object.assign({},e),{selected:!0}))})):v.forEach((e=>{t=t.map((t=>{const s=e;return void 0!==s.value&&s.value===t.value?Object.assign(Object.assign({},t),{selected:!1}):t}))})),p([...t]),"2.0"===s&&w(t)}("selectAll"===e);else if("selectAll"===e){const e=t.iterateOnOptions(d,{selected:!0},(e=>{var t;return O?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(O.toLowerCase()))&&!e.disabled:!e.disabled}));p([...e]),"2.0"===s&&w(e)}else if("notSelected"===e){const e=t.iterateOnOptions(d,{selected:!1},(e=>!e.disabled));p([...e]),"2.0"===s&&w(e)}},onMultiSelectClear:function(){const e=t.iterateOnOptions(d,{selected:!1});p([...e]),"2.0"===s&&w(e)},onFreeFormSelect:function(e){if(!c)return void S({label:O,value:O,isFreeForm:!0,selected:!0});const t=d.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===O&&t.value===O?e:t.selected})));e&&(t.some((e=>e.label===O&&e.value===O))||t.unshift({label:O,value:O,isFreeForm:!0,selected:!0})),p([...t]),"2.0"===s&&w(t)},onMultiSelectApply:w,getSelectedOptions:h,getCurrentSelectionCount:j,isMaxSelectionsReached:m,maxSelections:r}};

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

@@ -39,6 +39,10 @@ export interface OpenDropdownProps {
         title: string;
         subTitle?: string;
     };
+    /** Enable drag-and-drop reordering of options */
+    isDraggable?: boolean;
+    /** Callback when options are reordered via drag-and-drop */
+    onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
 }
 export type GroupedOption = {
     label?: string;

package/dist/cjs/components/dropdown-button/DropdownButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("lodash/debounce"),require("../TypographyStyle.js"),require("../../constants/Theme.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js");var n=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var t=require("../button/themes.js"),s=require("../spinner/Spinner.js"),i=require("./DropdownButton.style.js");exports.DropdownButton=d=>{var p,u;const a=d.buttonProps,l=e.__rest(a,["onClick"]);return o.jsxs(i.DropdownButtonStyle,Object.assign({type:d.buttonProps.buttonType,disabled:d.buttonProps.disabled},{children:[(null===(p=d.buttonProps)||void 0===p?void 0:p.isLoading)&&o.jsx(i.LoaderContainer,{children:o.jsx(s.Spinner,{className:"spinner",size:"small",color:t.SpinnerColorMap(d.buttonProps.buttonType||"primary",d.buttonProps.inverse)})}),o.jsx(n.Button,Object.assign({},d.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),o.jsx("div",{className:"dd-button-divider"}),o.jsx(r.DropdownPopover,Object.assign({},d.dropdownProps,{isChildLoading:null===(u=d.buttonProps)||void 0===u?void 0:u.isLoading},{children:o.jsx(n.Button,Object.assign({},l,{isLoading:!1,buttonText:"",TrailingIcon:d.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("../TypographyStyle.js"),require("../../constants/Theme.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js");var n=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var t=require("../button/themes.js"),s=require("../spinner/Spinner.js"),i=require("./DropdownButton.style.js");exports.DropdownButton=d=>{var p,u;const a=d.buttonProps,l=e.__rest(a,["onClick"]);return o.jsxs(i.DropdownButtonStyle,Object.assign({type:d.buttonProps.buttonType,disabled:d.buttonProps.disabled},{children:[(null===(p=d.buttonProps)||void 0===p?void 0:p.isLoading)&&o.jsx(i.LoaderContainer,{children:o.jsx(s.Spinner,{className:"spinner",size:"small",color:t.SpinnerColorMap(d.buttonProps.buttonType||"primary",d.buttonProps.inverse)})}),o.jsx(n.Button,Object.assign({},d.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),o.jsx("div",{className:"dd-button-divider"}),o.jsx(r.DropdownPopover,Object.assign({},d.dropdownProps,{isChildLoading:null===(u=d.buttonProps)||void 0===u?void 0:u.isLoading},{children:o.jsx(n.Button,Object.assign({},l,{isLoading:!1,buttonText:"",TrailingIcon:d.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};

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

@@ -2,7 +2,7 @@
 import { InputStateI, InputTypeI, InputVariant } from "./Input";
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
 }, {}, {}>;
 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;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     invalid?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 export declare const RootContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;

package/dist/cjs/components/keywords-input/KeywordsInput.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const ChipStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -2,7 +2,7 @@
 import type { Variant } from './ListItem';
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     variant: Variant;
     borderBottom?: string | undefined;

package/dist/cjs/components/modals/modal.styled.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 export declare const RootContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     zIndex?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CentralContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CloseButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CloseButtonWithTimer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     timerExists?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/pagination/Pagination.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const Pagination: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/plans/DurationSelectorStyles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const DurationSelectorStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/plans/SubscriptionPlanSelector.d.ts

@@ -30,11 +30,11 @@ type Props = {
 };
 export declare const HeaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BottomWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const defaultTabs: {
     key: string;

package/dist/cjs/components/plans/SubscriptionPlanStyled.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 export declare const SubscriptionPlanStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isSelected: boolean;
     isManifestPlan?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NewSubscriptionStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     showMostPopularChip: boolean;
     height?: string | undefined;

package/dist/cjs/components/product-picker/ProductPicker.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const StyledZeroState: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledProductPickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/progress-bar/ProgressBarComponent.d.ts

@@ -8,7 +8,7 @@ export interface ProgressBarProps {
 export declare const ProgressBarComponent: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ProgressCompletedBar: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/radioList/RadioList.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const RadioListStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/sample-button/SampleButton.styled.d.ts

@@ -2,7 +2,7 @@
 import type { Color, Variant } from './SampleButton';
 export declare const SampleButton: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     $color: Color;
     variant: Variant;

package/dist/cjs/components/shimmer/ShimmerComponent/ShimmerStyled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isBrand?: boolean | undefined;
     direction?: "row" | "column" | undefined;
@@ -9,7 +9,7 @@ export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ShimmerComponentStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isBrand?: boolean | undefined;
     height: number;

package/dist/cjs/components/switch/Switch.d.ts

@@ -3,7 +3,7 @@ import { SwitchColorProps, SwitchProps } from './Switch.d';
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     trackLength: number;
     trackHeight: number;
@@ -16,7 +16,7 @@ export declare const SwitchContainer: import("@emotion/styled").StyledComponent<
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Thumb: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     value: boolean;
     duration: number;
@@ -24,7 +24,7 @@ export declare const Thumb: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Loader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     value: boolean;
     trackColor: SwitchColorProps;

package/dist/cjs/components/tabs/Tabs.styles.d.ts

@@ -2,17 +2,17 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     bgColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TabItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & TabItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TrailingNumberContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selected: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -30,9 +30,9 @@ export declare const TabItemText: import("@emotion/styled").StyledComponent<{
 } & TabItemTextProps, {}, {}>;
 export declare const EmptyTab: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const RightComponent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/tag/Tag.styled.d.ts

@@ -2,7 +2,7 @@
 import { TagTheme, TagType, TagVariant } from './model';
 export declare const Tag: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     theme: TagTheme;
     type: TagType;

package/dist/cjs/components/testimonial-card/TestimonialCard.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const TestimonialCardStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -9,35 +9,35 @@ export declare const TestimonialCardStyle: import("@emotion/styled").StyledCompo
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileCard: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileInfo2: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Logo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const TestimonialProfileInfo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TestimonialProfileFooter: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FooterText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FooterStat: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const FooterArrow: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/cjs/components/toaster/Toaster.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/alert_triangle.svg.js"),o=require("../../assets/icons/check.svg.js"),n=require("../../assets/icons/cross.svg.js"),s=require("../../assets/icons/errorInfo.svg.js"),i=require("../../assets/icons/info.svg.js"),r=require("react"),l=require("react-dom"),d=require("react-toastify"),a=require("../button/Button.js"),u=require("./Toaster.styled.js"),c=require("../TypographyStyle.js"),x=require("../../constants/Theme.js");function h(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=h(r),y=h(l);const g=e=>t.jsxs(c.BodySecondary,Object.assign({color:"#9E9E9E",customStyles:{fontWeight:600,fontSize:14,width:25}},{children:[e.duration,"s"]})),v=e=>{const o="default"===e.type?x.COLORS.content.primary:"success"===e.type?x.COLORS.content.positive:"error"===e.type?x.COLORS.content.negative:"warning"===e.type?x.COLORS.content.warning:x.COLORS.content.brand,[s,i]=r.useState(e.duration||-1);r.useEffect((()=>{if(!e.duration||e.duration<=0)return void i(-1);i(e.duration);const t=setInterval((()=>{i((e=>{const o=e-1;return o<=0?(clearInterval(t),-1):o}))}),1e3);return()=>clearInterval(t)}),[e.duration]);const l=(!e.blocking||-1!==s)&&(e.blocking&&s>0);return t.jsx("div",Object.assign({tabIndex:l?-1:0,role:"button",style:{width:s>0?25:20,display:"flex",cursor:l?"not-allowed":"pointer",alignSelf:""+(e.alignTop?"flex-start":"center"),opacity:l?.5:1},onClick:()=>{!l&&e.closeToast&&e.closeToast()},onKeyDown:t=>{"Enter"===t.key&&!l&&e.closeToast&&e.closeToast()}},{children:s>0?t.jsx(g,{duration:s}):t.jsx(n.default,{height:20,width:20,color:o})}))},b=e=>{var o,n;const s=x.COLORS.content.placeholder,{toasterText:i}=r.useContext(f);return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1,maxWidth:"100%"}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:16,display:"flex",alignItems:"center",minWidth:0,overflow:"hidden"}},{children:t.jsxs("div",Object.assign({style:{width:"100%",minWidth:0,wordBreak:"break-word",overflowWrap:"break-word"}},{children:[e.subText?t.jsx(c.TitleSmall,Object.assign({color:"inherit"},{children:null!==(o=e.toastText)&&void 0!==o?o:i})):t.jsx(c.BodySecondary,Object.assign({color:"inherit"},{children:null!==(n=e.toastText)&&void 0!==n?n:i})),e.subText&&t.jsx("div",Object.assign({style:{marginTop:2}},{children:t.jsx(c.BodyCaption,Object.assign({color:x.COLORS.content.secondary},{children:e.subText}))}))]}))})),e.showButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 0px",minWidth:e.subText?"fit-content":"auto",marginRight:e.showSecondButton?4:0}},{children:t.jsx(a.Button,{buttonText:e.buttonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:e.onButtonClick})})),e.showSecondButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 0px",minWidth:e.subText?"fit-content":"auto"}},{children:t.jsx(a.Button,{buttonText:e.secondButtonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:e.onSecondButtonClick})})),e.showButton||e.showSecondButton?t.jsx("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${s}`,borderRadius:1}}):null]}))})},f=p.default.createContext({toasterText:""});exports.Toaster=n=>{const l=r.useRef(n.toastId||"default-toast"),[a,c]=r.useState(n.text),h=d.cssTransition({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),p="default"===n.type?null:"success"===n.type?t.jsx(o.default,{width:20,height:20,color:x.COLORS.content.positive}):"error"===n.type?t.jsx(s.default,{width:20,height:20,color:x.COLORS.content.negative}):"warning"===n.type?t.jsx(e.default,{width:20,height:20,color:x.COLORS.content.warning}):t.jsx(i.default,{width:20,height:20,color:x.COLORS.content.brand});r.useEffect((()=>{l.current&&l.current===n.toastId?(c(n.text),d.toast.update(l.current,{autoClose:n.autoClose})):l.current&&l.current!==n.toastId&&g(n.text)}),[n.toastId,n.text]);const g=e=>{var o,s,i,r,a,u,c,x,y,g,f,j,T,B,O,C;void 0!==n.hideLeftIcon||n.leftIcon?d.toast(t.jsx(b,{toastText:e,type:n.type||"info",buttonText:null===(o=n.buttonProps)||void 0===o?void 0:o.buttonText,secondButtonText:null===(s=n.secondButtonProps)||void 0===s?void 0:s.buttonText,showButton:null===(i=n.buttonProps)||void 0===i?void 0:i.showButton,showSecondButton:null===(r=n.secondButtonProps)||void 0===r?void 0:r.showButton,onButtonClick:null===(a=n.buttonProps)||void 0===a?void 0:a.onButtonClick,onSecondButtonClick:null===(u=n.secondButtonProps)||void 0===u?void 0:u.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),icon:!0!==n.hideLeftIcon&&(n.leftIcon?n.leftIcon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p}))),type:n.type,closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(c=n.buttonProps)||void 0===c?void 0:c.showButton)||(null===(x=n.secondButtonProps)||void 0===x?void 0:x.showButton)),blocking:n.blocking,duration:n.duration}),toastId:n.toastId||"default-toast",transition:h}):l.current=d.toast(t.jsx(b,{toastText:e,type:n.type||"info",buttonText:null===(y=n.buttonProps)||void 0===y?void 0:y.buttonText,secondButtonText:null===(g=n.secondButtonProps)||void 0===g?void 0:g.buttonText,showButton:null===(f=n.buttonProps)||void 0===f?void 0:f.showButton,showSecondButton:null===(j=n.secondButtonProps)||void 0===j?void 0:j.showButton,onButtonClick:null===(T=n.buttonProps)||void 0===T?void 0:T.onButtonClick,onSecondButtonClick:null===(B=n.secondButtonProps)||void 0===B?void 0:B.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),type:n.type,icon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p})),closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(O=n.buttonProps)||void 0===O?void 0:O.showButton)||(null===(C=n.secondButtonProps)||void 0===C?void 0:C.showButton)),blocking:n.blocking,duration:n.duration}),toastId:n.toastId||"default-toast",transition:h})};return r.useEffect((()=>{g()}),[]),y.default.createPortal(t.jsx(u.ToasterStyled,Object.assign({width:n.width,height:n.height,zIndex:n.zIndex,isSubTextIncluded:!!n.subText,type:n.type},{children:t.jsx(f.Provider,Object.assign({value:{toasterText:a}},{children:t.jsx(d.ToastContainer,{position:n.position||"top-right",closeOnClick:n.closeOnClick||!1,hideProgressBar:n.hideProgressBar||!1,draggable:!1,autoClose:n.autoClose||!1,theme:"colored"})}))})),document.body)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/alert_triangle.svg.js"),e=require("../../assets/icons/check.svg.js"),n=require("../../assets/icons/cross.svg.js"),s=require("../../assets/icons/errorInfo.svg.js"),i=require("../../assets/icons/info.svg.js"),r=require("react"),l=require("react-dom"),d=require("react-toastify"),u=require("../button/Button.js"),a=require("./Toaster.styled.js"),c=require("../TypographyStyle.js"),x=require("../../constants/Theme.js");function h(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=h(r),y=h(l);const g=o=>t.jsxs(c.BodySecondary,Object.assign({color:"#9E9E9E",customStyles:{fontWeight:600,fontSize:14,width:25}},{children:[o.duration,"s"]})),v=o=>{const e="default"===o.type?x.COLORS.content.primary:"success"===o.type?x.COLORS.content.positive:"error"===o.type?x.COLORS.content.negative:"warning"===o.type?x.COLORS.content.warning:x.COLORS.content.brand,[s,i]=r.useState(o.duration||-1);r.useEffect((()=>{if(!o.duration||o.duration<=0)return void i(-1);i(o.duration);const t=setInterval((()=>{i((o=>{const e=o-1;return e<=0?(clearInterval(t),-1):e}))}),1e3);return()=>clearInterval(t)}),[o.duration]);const l=(!o.blocking||-1!==s)&&(o.blocking&&s>0);return t.jsx("div",Object.assign({tabIndex:l?-1:0,role:"button",style:{width:s>0?25:20,display:"flex",cursor:l?"not-allowed":"pointer",alignSelf:""+(o.alignTop?"flex-start":"center"),opacity:l?.5:1},onClick:()=>{!l&&o.closeToast&&o.closeToast()},onKeyDown:t=>{"Enter"===t.key&&!l&&o.closeToast&&o.closeToast()}},{children:s>0?t.jsx(g,{duration:s}):t.jsx(n.default,{height:20,width:20,color:e})}))},b=o=>{var e,n;const s=x.COLORS.content.placeholder,{toasterText:i}=r.useContext(f);return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1,maxWidth:"100%"}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:32,display:"flex",alignItems:"center",minWidth:0,overflow:"hidden"}},{children:t.jsxs("div",Object.assign({style:{width:"100%",minWidth:0,wordBreak:"break-word",overflowWrap:"break-word"}},{children:[o.subText?t.jsx(c.TitleSmall,Object.assign({color:"inherit"},{children:null!==(e=o.toastText)&&void 0!==e?e:i})):t.jsx(c.BodySecondary,Object.assign({color:"inherit"},{children:null!==(n=o.toastText)&&void 0!==n?n:i})),o.subText&&t.jsx("div",Object.assign({style:{marginTop:2}},{children:t.jsx(c.BodyCaption,Object.assign({color:x.COLORS.content.secondary},{children:o.subText}))}))]}))})),o.showButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px",marginRight:{showSecondButton:4,showButton:0}[o.showSecondButton?"showSecondButton":"showButton"]}},{children:t.jsx(u.Button,{buttonText:o.buttonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:o.onButtonClick})})),o.showSecondButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px"}},{children:t.jsx(u.Button,{buttonText:o.secondButtonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:o.onSecondButtonClick})})),o.showButton||o.showSecondButton?t.jsx("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${s}`,borderRadius:1}}):null]}))})},f=p.default.createContext({toasterText:""});exports.Toaster=n=>{const l=r.useRef(n.toastId||"default-toast"),[u,c]=r.useState(n.text),h=d.cssTransition({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),p="default"===n.type?null:"success"===n.type?t.jsx(e.default,{width:20,height:20,color:x.COLORS.content.positive}):"error"===n.type?t.jsx(s.default,{width:20,height:20,color:x.COLORS.content.negative}):"warning"===n.type?t.jsx(o.default,{width:20,height:20,color:x.COLORS.content.warning}):t.jsx(i.default,{width:20,height:20,color:x.COLORS.content.brand});r.useEffect((()=>{l.current&&l.current===n.toastId?(c(n.text),d.toast.update(l.current,{autoClose:n.autoClose})):l.current&&l.current!==n.toastId&&g(n.text)}),[n.toastId,n.text]);const g=o=>{var e,s,i,r,u,a,c,x,y,g,f,j,T,B,w,O;void 0!==n.hideLeftIcon||n.leftIcon?d.toast(t.jsx(b,{toastText:o,type:n.type||"info",buttonText:null===(e=n.buttonProps)||void 0===e?void 0:e.buttonText,secondButtonText:null===(s=n.secondButtonProps)||void 0===s?void 0:s.buttonText,showButton:null===(i=n.buttonProps)||void 0===i?void 0:i.showButton,showSecondButton:null===(r=n.secondButtonProps)||void 0===r?void 0:r.showButton,onButtonClick:null===(u=n.buttonProps)||void 0===u?void 0:u.onButtonClick,onSecondButtonClick:null===(a=n.secondButtonProps)||void 0===a?void 0:a.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),icon:!0!==n.hideLeftIcon&&(n.leftIcon?n.leftIcon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p}))),type:n.type,closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(c=n.buttonProps)||void 0===c?void 0:c.showButton)||(null===(x=n.secondButtonProps)||void 0===x?void 0:x.showButton)),blocking:n.blocking,duration:n.duration}),toastId:n.toastId||"default-toast",transition:h}):l.current=d.toast(t.jsx(b,{toastText:o,type:n.type||"info",buttonText:null===(y=n.buttonProps)||void 0===y?void 0:y.buttonText,secondButtonText:null===(g=n.secondButtonProps)||void 0===g?void 0:g.buttonText,showButton:null===(f=n.buttonProps)||void 0===f?void 0:f.showButton,showSecondButton:null===(j=n.secondButtonProps)||void 0===j?void 0:j.showButton,onButtonClick:null===(T=n.buttonProps)||void 0===T?void 0:T.onButtonClick,onSecondButtonClick:null===(B=n.secondButtonProps)||void 0===B?void 0:B.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),type:n.type,icon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p})),closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(w=n.buttonProps)||void 0===w?void 0:w.showButton)||(null===(O=n.secondButtonProps)||void 0===O?void 0:O.showButton)),blocking:n.blocking,duration:n.duration}),toastId:n.toastId||"default-toast",transition:h})};return r.useEffect((()=>{g()}),[]),y.default.createPortal(t.jsx(a.ToasterStyled,Object.assign({width:n.width,height:n.height,zIndex:n.zIndex,isSubTextIncluded:!!n.subText,type:n.type},{children:t.jsx(f.Provider,Object.assign({value:{toasterText:u}},{children:t.jsx(d.ToastContainer,{position:n.position||"top-right",closeOnClick:n.closeOnClick||!1,hideProgressBar:n.hideProgressBar||!1,draggable:!1,autoClose:n.autoClose||!1,theme:"colored"})}))})),document.body)};

package/dist/cjs/components/toaster/Toaster.styled.d.ts

@@ -2,7 +2,7 @@
 import { TypeOptions } from 'react-toastify';
 export declare const ToasterStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;