@jars-labs/jars-components 1.0.10 → 1.0.12

package/README.md

@@ -44,6 +44,28 @@ Build the storybook:
 yarn build-storybook
 ```
 
+## Local development
+
+### Testing changes to the library locally
+
+### with yarn link
+
+1. go to the jars-components root folder
+2. run `yarn link`
+3. go to the project folder that you want to test on, for example `/admin`
+4. run `yarn link @jars-labs/jars-components`
+5. run `yarn` in `/admin`
+6. start and test
+
+### or with yarn pack
+
+1. `yarn pack` in jars-components root
+2. copy the location of the generated tarball
+3. got to the target project dependency
+4. `yarn workspace admin add file:/Users/<your_user>/e14/jars-components/jars-labs-jars-components-<version>.tgz`
+5. run `yarn`
+6. start and test
+
 ## Publishing a New Version to npm
 
 Follow these steps to publish a new version of the **`@jars-labs/jars-components`** package:
@@ -97,7 +119,7 @@ npm publish --access public
 ```
 
 ### 6. Push the tag
-    
+
 ```bash
 git push --follow-tags
 ```

package/dist/{index-SJDXCSJk.js → index-8sE755zt.js}

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Accordion as Accordion$1, AccordionItem as AccordionItem$1, AccordionControl as AccordionControl$1, AccordionPanel as AccordionPanel$1, ActionIcon as ActionIcon$1, Group, Combobox, useCombobox, Flex, TextInput, Loader as Loader$1, Checkbox as Checkbox$1, Divider, Modal as Modal$1, Pagination as Pagination$1, Radio, SegmentedControl as SegmentedControl$1, Select as Select$1, Table as Table$1, Tabs as Tabs$1, Textarea as Textarea$1, Tooltip as Tooltip$1, Box } from '@mantine/core';
-import t, { useRef, useState, useEffect, forwardRef, useMemo, useReducer, isValidElement, cloneElement, useLayoutEffect } from 'react';
+import React, { useRef, useState, useEffect, forwardRef, useMemo } from 'react';
 import { DateInput as DateInput$1 } from '@mantine/dates';
+import { ToastContainer as ToastContainer$1 } from 'react-toastify';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -160,7 +161,7 @@ var Animation = function (_a) {
     var refVector = useRef(null);
     var _b = useState(null), lottie = _b[0], setLottie = _b[1];
     useEffect(function () {
-        import('./lottie-CMIUDj7j.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
+        import('./lottie-CIpbn_2e.js').then(function (n) { return n.l; }).then(function (Lottie) { return setLottie(Lottie.default); });
     }, []);
     useEffect(function () {
         if (lottie && refVector.current) {
@@ -345,11 +346,11 @@ var elementType = {
     h3: 'h3',
     h4: 'h4',
 };
-var Text = t.forwardRef(function (props, ref) {
+var Text = React.forwardRef(function (props, ref) {
     var as = props.as, children = props.children, className = props.className, color = props.color, style = props.style, variant = props.variant, weight = props.weight, rest = __rest(props, ["as", "children", "className", "color", "style", "variant", "weight"]);
     var combinedStyle = __assign(__assign({}, style), { color: color });
     var combinedClassName = classNames(className, styles$j['text'], styles$j[variant || ''], styles$j[weight || '']);
-    return t.createElement(as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
+    return React.createElement(as || elementType[variant] || 'p', __assign({ ref: ref, className: combinedClassName, style: combinedStyle }, rest), children);
 });
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -707,7 +708,7 @@ var DateInput = function (_a) {
 
 var styles$d = {"code-input":"EnterCodeInput-module_code-input__bCj-T","code-input--2":"EnterCodeInput-module_code-input--2__yoYWJ","code-input--3":"EnterCodeInput-module_code-input--3__0xXFa","code-input--4":"EnterCodeInput-module_code-input--4__stWlP","code-input-error":"EnterCodeInput-module_code-input-error__l8yKQ"};
 
-var EnterCodeInput = t.forwardRef(function (props, ref) {
+var EnterCodeInput = React.forwardRef(function (props, ref) {
     var className = [
         styles$d['code-input'],
         styles$d["code-input--".concat(props.inline)],
@@ -978,7 +979,7 @@ var Modal = function (_a) {
 };
 
 var LinkModal = function (props) {
-    var _a = t.useState(false), modalIsOpen = _a[0], setModalIsOpen = _a[1];
+    var _a = React.useState(false), modalIsOpen = _a[0], setModalIsOpen = _a[1];
     return (jsxs(Fragment, { children: [jsx("a", { onClick: function () { return setModalIsOpen(!modalIsOpen); }, children: jsx(Text, { variant: "xs-light", style: {
                         color: 'var(--color-primary-300)',
                         textDecoration: 'underline',
@@ -1031,8 +1032,8 @@ var Umbrello = function (props) {
 };
 
 var NavBar = function (_a) {
-    var children = _a.children;
-    return (jsxs(Flex, { p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", children: [jsx("a", { href: "/dashboard/management-companies", children: jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" }) }), children] }));
+    var children = _a.children, logo = _a.logo, homePath = _a.homePath, rest = __rest(_a, ["children", "logo", "homePath"]);
+    return (jsxs(Flex, __assign({ p: "24px 120px", bg: "var(--color-white)", align: "center", justify: "space-between", component: "nav" }, rest, { children: [jsx("a", { href: homePath || '/', children: logo || (jsx(Umbrello, { fill: "var(--color-neutral-600)", width: "200", height: "40", viewBox: "0 0 200 40" })) }), children] })));
 };
 
 var Pagination = function (_a) {
@@ -1272,14 +1273,10 @@ var Textarea = function (_a) {
                     }, placeholder: placeHolderValue, name: name, error: ErrorSection, description: !error && jsx(Text, { variant: "xs", children: description }), descriptionProps: { className: styles$k.description }, errorProps: { className: styles$k.error }, inputWrapperOrder: ['label', 'input', 'description', 'error'], value: value, onChange: onChange }, rest)) })] }));
 };
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-const u=t=>"number"==typeof t&&!isNaN(t),d=t=>"string"==typeof t,p=t=>"function"==typeof t,m=t=>d(t)||p(t)?t:null,f=t=>isValidElement(t)||d(t)||p(t)||u(t);function g(t,e,n){ undefined===n&&(n=300);const{scrollHeight:o,style:s}=t;requestAnimationFrame(()=>{s.minHeight="initial",s.height=o+"px",s.transition=`all ${n}ms`,requestAnimationFrame(()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(e,n);});});}function h(e){let{enter:a,exit:r,appendPosition:i=false,collapse:l=true,collapseDuration:c=300}=e;return function(e){let{children:u,position:d,preventExitTransition:p,done:m,nodeRef:f,isIn:h}=e;const y=i?`${a}--${d}`:a,v=i?`${r}--${d}`:r,T=useRef(0);return useLayoutEffect(()=>{const t=f.current,e=y.split(" "),n=o=>{o.target===f.current&&(t.dispatchEvent(new Event("d")),t.removeEventListener("animationend",n),t.removeEventListener("animationcancel",n),0===T.current&&"animationcancel"!==o.type&&t.classList.remove(...e));};t.classList.add(...e),t.addEventListener("animationend",n),t.addEventListener("animationcancel",n);},[]),useEffect(()=>{const t=f.current,e=()=>{t.removeEventListener("animationend",e),l?g(t,m,c):m();};h||(p?e():(T.current=1,t.className+=` ${v}`,t.addEventListener("animationend",e)));},[h]),t.createElement(t.Fragment,null,u)}}function y(t,e){return null!=t?{content:t.content,containerId:t.props.containerId,id:t.props.toastId,theme:t.props.theme,type:t.props.type,data:t.props.data||{},isLoading:t.props.isLoading,icon:t.props.icon,status:e}:{}}const v={list:new Map,emitQueue:new Map,on(t,e){return this.list.has(t)||this.list.set(t,[]),this.list.get(t).push(e),this},off(t,e){if(e){const n=this.list.get(t).filter(t=>t!==e);return this.list.set(t,n),this}return this.list.delete(t),this},cancelEmit(t){const e=this.emitQueue.get(t);return e&&(e.forEach(clearTimeout),this.emitQueue.delete(t)),this},emit(t){this.list.has(t)&&this.list.get(t).forEach(e=>{const n=setTimeout(()=>{e(...[].slice.call(arguments,1));},0);this.emitQueue.has(t)||this.emitQueue.set(t,[]),this.emitQueue.get(t).push(n);});}},T=e=>{let{theme:n,type:o,...s}=e;return t.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===n?"currentColor":`var(--toastify-icon-color-${o})`,...s})},E={info:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return t.createElement("div",{className:"Toastify__spinner"})}};function C(t){const[,o]=useReducer(t=>t+1,0),[l,c]=useState([]),g=useRef(null),h=useRef(new Map).current,T=t=>-1!==l.indexOf(t),C=useRef({toastKey:1,displayedToast:0,count:0,queue:[],props:t,containerId:null,isToastActive:T,getToast:t=>h.get(t)}).current;function b(t){let{containerId:e}=t;const{limit:n}=C.props;!n||e&&C.containerId!==e||(C.count-=C.queue.length,C.queue=[]);}function I(t){c(e=>null==t?[]:e.filter(e=>e!==t));}function _(){const{toastContent:t,toastProps:e,staleId:n}=C.queue.shift();O(t,e,n);}function L(t,n){let{delay:s,staleId:r,...i}=n;if(!f(t)||function(t){return !g.current||C.props.enableMultiContainer&&t.containerId!==C.props.containerId||h.has(t.toastId)&&null==t.updateId}(i))return;const{toastId:l,updateId:c,data:T}=i,{props:b}=C,L=()=>I(l),N=null==c;N&&C.count++;const M={...b,style:b.toastStyle,key:C.toastKey++,...Object.fromEntries(Object.entries(i).filter(t=>{let[e,n]=t;return null!=n})),toastId:l,updateId:c,data:T,closeToast:L,isIn:false,className:m(i.className||b.toastClassName),bodyClassName:m(i.bodyClassName||b.bodyClassName),progressClassName:m(i.progressClassName||b.progressClassName),autoClose:!i.isLoading&&(R=i.autoClose,w=b.autoClose,false===R||u(R)&&R>0?R:w),deleteToast(){const t=y(h.get(l),"removed");h.delete(l),v.emit(4,t);const e=C.queue.length;if(C.count=null==l?C.count-C.displayedToast:C.count-1,C.count<0&&(C.count=0),e>0){const t=null==l?C.props.limit:1;if(1===e||1===t)C.displayedToast++,_();else {const n=t>e?e:t;C.displayedToast=n;for(let t=0;t<n;t++)_();}}else o();}};var R,w;M.iconOut=function(t){let{theme:n,type:o,isLoading:s,icon:r}=t,i=null;const l={theme:n,type:o};return  false===r||(p(r)?i=r(l):isValidElement(r)?i=cloneElement(r,l):d(r)||u(r)?i=r:s?i=E.spinner():(t=>t in E)(o)&&(i=E[o](l))),i}(M),p(i.onOpen)&&(M.onOpen=i.onOpen),p(i.onClose)&&(M.onClose=i.onClose),M.closeButton=b.closeButton,false===i.closeButton||f(i.closeButton)?M.closeButton=i.closeButton:true===i.closeButton&&(M.closeButton=!f(b.closeButton)||b.closeButton);let x=t;isValidElement(t)&&!d(t.type)?x=cloneElement(t,{closeToast:L,toastProps:M,data:T}):p(t)&&(x=t({closeToast:L,toastProps:M,data:T})),b.limit&&b.limit>0&&C.count>b.limit&&N?C.queue.push({toastContent:x,toastProps:M,staleId:r}):u(s)?setTimeout(()=>{O(x,M,r);},s):O(x,M,r);}function O(t,e,n){const{toastId:o}=e;n&&h.delete(n);const s={content:t,props:e};h.set(o,s),c(t=>[...t,o].filter(t=>t!==n)),v.emit(4,y(s,null==s.props.updateId?"added":"updated"));}return useEffect(()=>(C.containerId=t.containerId,v.cancelEmit(3).on(0,L).on(1,t=>g.current&&I(t)).on(5,b).emit(2,C),()=>{h.clear(),v.emit(3,C);}),[]),useEffect(()=>{C.props=t,C.isToastActive=T,C.displayedToast=l.length;}),{getToastToRender:function(e){const n=new Map,o=Array.from(h.values());return t.newestOnTop&&o.reverse(),o.forEach(t=>{const{position:e}=t.props;n.has(e)||n.set(e,[]),n.get(e).push(t);}),Array.from(n,t=>e(t[0],t[1]))},containerRef:g,isToastActive:T}}function b(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}function I(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}function _(t){const[o,a]=useState(false),[r,l]=useState(false),c=useRef(null),u=useRef({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:true,canDrag:false,boundingRect:null,didMove:false}).current,d=useRef(t),{autoClose:m,pauseOnHover:f,closeToast:g,onClick:h,closeOnClick:y}=t;function v(e){if(t.draggable){"touchstart"===e.nativeEvent.type&&e.nativeEvent.preventDefault(),u.didMove=false,document.addEventListener("mousemove",_),document.addEventListener("mouseup",L),document.addEventListener("touchmove",_),document.addEventListener("touchend",L);const n=c.current;u.canCloseOnClick=true,u.canDrag=true,u.boundingRect=n.getBoundingClientRect(),n.style.transition="",u.x=b(e.nativeEvent),u.y=I(e.nativeEvent),"x"===t.draggableDirection?(u.start=u.x,u.removalDistance=n.offsetWidth*(t.draggablePercent/100)):(u.start=u.y,u.removalDistance=n.offsetHeight*(80===t.draggablePercent?1.5*t.draggablePercent:t.draggablePercent/100));}}function T(e){if(u.boundingRect){const{top:n,bottom:o,left:s,right:a}=u.boundingRect;"touchend"!==e.nativeEvent.type&&t.pauseOnHover&&u.x>=s&&u.x<=a&&u.y>=n&&u.y<=o?C():E();}}function E(){a(true);}function C(){a(false);}function _(e){const n=c.current;u.canDrag&&n&&(u.didMove=true,o&&C(),u.x=b(e),u.y=I(e),u.delta="x"===t.draggableDirection?u.x-u.start:u.y-u.start,u.start!==u.x&&(u.canCloseOnClick=false),n.style.transform=`translate${t.draggableDirection}(${u.delta}px)`,n.style.opacity=""+(1-Math.abs(u.delta/u.removalDistance)));}function L(){document.removeEventListener("mousemove",_),document.removeEventListener("mouseup",L),document.removeEventListener("touchmove",_),document.removeEventListener("touchend",L);const e=c.current;if(u.canDrag&&u.didMove&&e){if(u.canDrag=false,Math.abs(u.delta)>u.removalDistance)return l(true),void t.closeToast();e.style.transition="transform 0.2s, opacity 0.2s",e.style.transform=`translate${t.draggableDirection}(0)`,e.style.opacity="1";}}useEffect(()=>{d.current=t;}),useEffect(()=>(c.current&&c.current.addEventListener("d",E,{once:true}),p(t.onOpen)&&t.onOpen(isValidElement(t.children)&&t.children.props),()=>{const t=d.current;p(t.onClose)&&t.onClose(isValidElement(t.children)&&t.children.props);}),[]),useEffect(()=>(t.pauseOnFocusLoss&&(document.hasFocus()||C(),window.addEventListener("focus",E),window.addEventListener("blur",C)),()=>{t.pauseOnFocusLoss&&(window.removeEventListener("focus",E),window.removeEventListener("blur",C));}),[t.pauseOnFocusLoss]);const O={onMouseDown:v,onTouchStart:v,onMouseUp:T,onTouchEnd:T};return m&&f&&(O.onMouseEnter=C,O.onMouseLeave=E),y&&(O.onClick=t=>{h&&h(t),u.canCloseOnClick&&g();}),{playToast:E,pauseToast:C,isRunning:o,preventExitTransition:r,toastRef:c,eventHandlers:O}}function L(e){let{closeToast:n,theme:o,ariaLabel:s="close"}=e;return t.createElement("button",{className:`Toastify__close-button Toastify__close-button--${o}`,type:"button",onClick:t=>{t.stopPropagation(),n(t);},"aria-label":s},t.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},t.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function O(e){let{delay:n,isRunning:o,closeToast:s,type:a="default",hide:r,className:i,style:l,controlledProgress:u,progress:d,rtl:m,isIn:f,theme:g}=e;const h=r||u&&0===d,y={...l,animationDuration:`${n}ms`,animationPlayState:o?"running":"paused",opacity:h?0:1};u&&(y.transform=`scaleX(${d})`);const v=clsx("Toastify__progress-bar",u?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${g}`,`Toastify__progress-bar--${a}`,{"Toastify__progress-bar--rtl":m}),T=p(i)?i({rtl:m,type:a,defaultClassName:v}):clsx(v,i);return t.createElement("div",{role:"progressbar","aria-hidden":h?"true":"false","aria-label":"notification timer",className:T,style:y,[u&&d>=1?"onTransitionEnd":"onAnimationEnd"]:u&&d<1?null:()=>{f&&s();}})}const N=n=>{const{isRunning:o,preventExitTransition:s,toastRef:r,eventHandlers:i}=_(n),{closeButton:l,children:u,autoClose:d,onClick:m,type:f,hideProgressBar:g,closeToast:h,transition:y,position:v,className:T,style:E,bodyClassName:C,bodyStyle:b,progressClassName:I,progressStyle:N,updateId:M,role:R,progress:w,rtl:x,toastId:$,deleteToast:k,isIn:P,isLoading:B,iconOut:D,closeOnClick:A,theme:z}=n,F=clsx("Toastify__toast",`Toastify__toast-theme--${z}`,`Toastify__toast--${f}`,{"Toastify__toast--rtl":x},{"Toastify__toast--close-on-click":A}),H=p(T)?T({rtl:x,position:v,type:f,defaultClassName:F}):clsx(F,T),S=!!w||!d,q={closeToast:h,type:f,theme:z};let Q=null;return  false===l||(Q=p(l)?l(q):isValidElement(l)?cloneElement(l,q):L(q)),t.createElement(y,{isIn:P,done:k,position:v,preventExitTransition:s,nodeRef:r},t.createElement("div",{id:$,onClick:m,className:H,...i,style:E,ref:r},t.createElement("div",{...P&&{role:R},className:p(C)?C({type:f}):clsx("Toastify__toast-body",C),style:b},null!=D&&t.createElement("div",{className:clsx("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!B})},D),t.createElement("div",null,u)),Q,t.createElement(O,{...M&&!S?{key:`pb-${M}`}:{},rtl:x,theme:z,delay:d,isRunning:o,isIn:P,closeToast:h,hide:g,type:f,style:N,className:I,controlledProgress:S,progress:w||0})))},M=function(t,e){return undefined===e&&(e=false),{enter:`Toastify--animate Toastify__${t}-enter`,exit:`Toastify--animate Toastify__${t}-exit`,appendPosition:e}},R=h(M("bounce",true));h(M("slide",true));h(M("zoom"));h(M("flip"));const k=forwardRef((e,n)=>{const{getToastToRender:o,containerRef:a,isToastActive:r}=C(e),{className:i,style:l,rtl:u,containerId:d}=e;function f(t){const e=clsx("Toastify__toast-container",`Toastify__toast-container--${t}`,{"Toastify__toast-container--rtl":u});return p(i)?i({position:t,rtl:u,defaultClassName:e}):clsx(e,m(i))}return useEffect(()=>{n&&(n.current=a.current);},[]),t.createElement("div",{ref:a,className:"Toastify",id:d},o((e,n)=>{const o=n.length?{...l}:{...l,pointerEvents:"none"};return t.createElement("div",{className:f(e),style:o,key:`container-${e}`},n.map((e,o)=>{let{content:s,props:a}=e;return t.createElement(N,{...a,isIn:r(a.toastId),style:{...a.style,"--nth":o+1,"--len":n.length},key:`toast-${a.key}`},s)}))}))});k.displayName="ToastContainer",k.defaultProps={position:"top-right",transition:R,autoClose:5e3,closeButton:L,pauseOnHover:true,pauseOnFocusLoss:true,closeOnClick:true,draggable:true,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let P,B=new Map,D=[];v.on(2,t=>{P=t.containerId||t,B.set(P,t),D.forEach(t=>{v.emit(0,t.content,t.options);}),D=[];}).on(3,t=>{B.delete(t.containerId||t),0===B.size&&v.off(0).off(1).off(5);});
-
 var styles$1 = {"toast-container":"ToastContainer-module_toast-container__4KBx3"};
 
 var ToastContainer = function () {
-    return (jsx(k, { theme: "dark", className: styles$1['toast-container'], progressStyle: {
+    return (jsx(ToastContainer$1, { theme: "dark", className: styles$1['toast-container'], progressStyle: {
             borderRadius: 999,
         }, closeButton: false, autoClose: 300000 }));
 };
@@ -1293,7 +1290,7 @@ var Tooltip = function (_a) {
         }, offset: 4, children: children })));
 };
 
-var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT"};
+var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","inputFocused":"Multiselect-module_inputFocused__rm-OP","disabled":"Multiselect-module_disabled__DyqLt","pill":"Multiselect-module_pill__NwXcT"};
 
 /**
  * MultiSelect component, use it to select multiple options from a list of options
@@ -1305,99 +1302,160 @@ var multiselectStyles = {"input":"Multiselect-module_input__lwmrJ","disabled":"M
  * @param {string} placeholder - The placeholder of the select
  * @param {string} error - The error message to display
  * @param {string} description - The description to display
+ * @param {boolean} disabled - Whether the select is disabled
+ * @param {number} maxPills - The maximum number of pills to display, the rest will be displayed as a single pill with the number of remaining items
  *
  * @returns {React.ReactElement} The MultiSelect component
  *
  */
 var Multiselect = function (_a) {
-    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === undefined ? false : _b;
+    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, _b = _a.disabled, disabled = _b === undefined ? false : _b, _c = _a.maxPills, maxPills = _c === undefined ? 3 : _c;
     var dataKey = useMemo(function () { return data.map(function (o) { return o.value; }).join('_'); }, [data]);
-    return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled }, dataKey));
+    return (jsx(MultiselectInternal, { data: data, onApply: onApply, error: error, description: description, label: label, placeholder: placeholder, onBlur: onBlur, disabled: disabled, maxPills: maxPills }, dataKey));
 };
 /**
- * Private component that holds the local state (`temporaryOptions`)
+ * The internal component that maintains:
+ * - committedOptions (pills shown when dropdown is closed)
+ * - temporaryOptions (draft selection while dropdown is open)
+ * - searchTerm (to filter the dropdown’s list)
  */
 var MultiselectInternal = function (_a) {
-    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled;
-    var _b = useState(data), temporaryOptions = _b[0], setTemporaryOptions = _b[1];
-    var _c = useState(false), isFocused = _c[0], setIsFocused = _c[1];
-    var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var hasSelectedOptions = temporaryOptions.some(function (option) { return option.selected; });
-    // Handlers
-    var handleOptionClick = function (option) {
-        var newOptions = temporaryOptions.map(function (selectedOption) {
-            if (selectedOption.value === option.value) {
-                return __assign(__assign({}, selectedOption), { selected: !selectedOption.selected });
-            }
-            return selectedOption;
+    var data = _a.data, onApply = _a.onApply, error = _a.error, description = _a.description, label = _a.label, placeholder = _a.placeholder, onBlur = _a.onBlur, disabled = _a.disabled, maxPills = _a.maxPills;
+    // Final selection that shows up as pills when closed / after Apply
+    var _b = useState(data), committedOptions = _b[0], setCommittedOptions = _b[1];
+    // Draft selection while dropdown is open
+    var _c = useState(data), temporaryOptions = _c[0], setTemporaryOptions = _c[1];
+    var _d = useState(''), searchTerm = _d[0], setSearchTerm = _d[1];
+    var _e = useState(false), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = useState(false), isHovered = _f[0], setIsHovered = _f[1];
+    var hasSelectedOptions = committedOptions.some(function (opt) { return opt.selected; });
+    /* -----------------------------------
+     * Handlers
+     * ----------------------------------- */
+    var handleBlur = function () {
+        setIsFocused(false);
+        onBlur === null || onBlur === undefined ? undefined : onBlur();
+    };
+    /** Toggle a checkbox in the *draft* list */
+    var handleDraftToggle = function (option) {
+        setTemporaryOptions(function (prev) {
+            return prev.map(function (o) {
+                return o.value === option.value ? __assign(__assign({}, o), { selected: !o.selected }) : o;
+            });
         });
-        setTemporaryOptions(newOptions);
     };
+    /** Click "Apply" => copy draft to pills (committed) and call onApply */
     var handleApply = function (closeDropdown) {
+        setCommittedOptions(temporaryOptions);
         onApply(temporaryOptions);
         closeDropdown();
     };
+    /** Click "Clear" => reset the *draft* selection (not pills yet) */
     var handleClear = function () {
-        var newOptions = data.map(function (option) { return (__assign(__assign({}, option), { selected: false })); });
-        setTemporaryOptions(newOptions);
+        var reset = data.map(function (o) { return (__assign(__assign({}, o), { selected: false })); });
+        setTemporaryOptions(reset);
     };
-    var handleBlur = function () {
-        setIsFocused(false);
-        if (onBlur) {
-            onBlur();
-        }
-    };
-    var handleDeselect = function (optionId) {
-        var newOptions = temporaryOptions.map(function (option) {
-            if (option.value === optionId) {
-                return __assign(__assign({}, option), { selected: false });
-            }
-            return option;
+    /** Clicking the "X" on a pill => remove from *committed* immediately */
+    var handleDeselectPill = function (optionId) {
+        var newCommitted = committedOptions.map(function (o) {
+            return o.value === optionId ? __assign(__assign({}, o), { selected: false }) : o;
         });
-        setTemporaryOptions(newOptions);
-        onApply(newOptions);
+        setCommittedOptions(newCommitted);
+        setTemporaryOptions(newCommitted);
+        onApply(newCommitted);
     };
-    // Sections
-    var PillListSection = function (_a) {
-        var store = _a.store;
-        var selected = temporaryOptions.filter(function (option) { return option.selected; });
-        return (jsx("div", { style: {
-                display: 'flex',
-                flexGrow: 1,
-                gap: 8,
-                alignItems: 'center',
-            }, children: selected.length === 0 ? (jsx(Text, { variant: "s", children: store.dropdownOpened ? placeholder : label })) : (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", children: [selected.slice(0, 3).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, onClick: function (e) {
-                            handleOptionClick(option);
-                            e.stopPropagation();
-                        }, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
-                                    handleDeselect(option.value);
-                                    e.stopPropagation();
-                                }, children: jsx(Close, { height: "20px", width: "20px" }) })] }, option.value)); }), selected.length > 3 && (jsx(Tooltip, { label: selected
-                            .slice(3)
-                            .map(function (option) { return option.label; })
-                            .join(', '), children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+ ", selected.length - 3] }) }, selected.length) }))] })) }));
+    /* -----------------------------------
+     * Search / Filtering
+     * ----------------------------------- */
+    var filteredTempOptions = useMemo(function () {
+        if (!searchTerm.trim())
+            return temporaryOptions;
+        return temporaryOptions.filter(function (o) {
+            return o.label.toLowerCase().includes(searchTerm.toLowerCase());
+        });
+    }, [searchTerm, temporaryOptions]);
+    // Build the actual dropdown checkboxes from the filtered list
+    var dropdownOptions = useMemo(function () {
+        var allSelected = filteredTempOptions.length > 0 &&
+            filteredTempOptions.every(function (o) { return o.selected; });
+        var selectAllOption = (jsx(Dropdown.Option, { value: "select_all", py: 12, onClick: function (e) { return e.stopPropagation(); }, children: jsx(Checkbox, { label: "Select All", checked: allSelected, onChange: function (e) {
+                    e.stopPropagation();
+                    setTemporaryOptions(function (prev) {
+                        return prev.map(function (item) { return (__assign(__assign({}, item), { selected: !allSelected })); });
+                    });
+                }, w: "100%" }) }, "select_all"));
+        // Now build the rest of the normal checkboxes
+        var normalOptions = filteredTempOptions.map(function (option) { return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, 
+            // Don’t close on click
+            onClick: function (e) { return e.stopPropagation(); }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
+                    e.stopPropagation();
+                    handleDraftToggle(option);
+                }, w: "100%" }, option.value) }, option.value)); });
+        var emptyOptions = (jsx(Dropdown.Option, { value: "No options found", style: { cursor: 'not-allowed', pointerEvents: 'none' }, children: "No matches found, try something else." }));
+        return normalOptions.length > 0
+            ? __spreadArray([selectAllOption], normalOptions, true) : [emptyOptions];
+    }, [filteredTempOptions]);
+    /* -----------------------------------
+     * Sections
+     * ----------------------------------- */
+    /**
+     * The main "input" area, showing:
+     * - Pills (from committedOptions) if the dropdown is closed (or open),
+     *   but we specifically adjust layout if open.
+     * - If the dropdown is open, also show a search input alongside the pills.
+     */
+    var PillAndSearchSection = function (_a) {
+        var store = _a.store, _b = _a.maxPills, maxPills = _b === undefined ? 3 : _b;
+        var selected = committedOptions.filter(function (opt) { return opt.selected; });
+        var dropdownOpened = store.dropdownOpened;
+        var allSelected = selected.length === data.length;
+        var searchInputRef = useRef(null);
+        useEffect(function () {
+            var _a;
+            if (dropdownOpened) {
+                (_a = searchInputRef.current) === null || _a === undefined ? undefined : _a.focus();
+            }
+        }, [dropdownOpened]);
+        // If the dropdown is closed and everything is selected => single "All {placeholder}" pill
+        if (!dropdownOpened && allSelected) {
+            return (jsx(Flex, { gap: 8, align: "center", wrap: "wrap", style: { flexGrow: 1, minHeight: 32 }, children: jsxs("span", { className: multiselectStyles.pill, children: [jsxs(Text, { variant: "xs", children: ["All ", placeholder] }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
+                                e.stopPropagation();
+                                var newCommitted = committedOptions.map(function (o) { return (__assign(__assign({}, o), { selected: false })); });
+                                setCommittedOptions(newCommitted);
+                                setTemporaryOptions(newCommitted);
+                                onApply(newCommitted);
+                            }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }) }));
+        }
+        // Otherwise, render original logic:
+        return (jsxs(Flex, { gap: 8, align: "center", wrap: "wrap", style: { flexGrow: 1, minHeight: 32 }, children: [selected.length === 0 && !dropdownOpened && (jsx(Text, { variant: "s", children: label })), selected.slice(0, maxPills).map(function (option) { return (jsxs("span", { className: multiselectStyles.pill, children: [jsx(Text, { variant: "xs", children: option.label }), jsx(ActionIcon$1, { variant: "transparent", onClick: function (e) {
+                                e.stopPropagation();
+                                handleDeselectPill(option.value);
+                            }, children: jsx(Close, { height: "20px", width: "20px", stroke: "var(--color-neutral-600)" }) })] }, option.value)); }), selected.length > maxPills && (jsx(Tooltip, { label: selected
+                        .slice(maxPills, selected.length)
+                        .map(function (o) { return o.label; })
+                        .join(', '), position: "bottom", children: jsx("span", { className: multiselectStyles.pill, children: jsxs(Text, { variant: "xs", children: ["+", selected.length - maxPills] }) }, "more") })), dropdownOpened && (jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search ".concat(placeholder, "..."), value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, style: {
+                        flexGrow: 1,
+                        minWidth: 80,
+                        border: '1px solid var(--color-gray-200)',
+                        borderRadius: 4,
+                        padding: '4px 8px',
+                        outline: 'none',
+                    }, onClick: function (e) { return e.stopPropagation(); } }))] }));
     };
     var ErrorSection = (jsxs(Flex, { className: styles$k.error, gap: 4, ml: 16, mt: 8, style: { visibility: error ? 'visible' : 'hidden' }, children: [jsx(Info, { width: "18px", height: "18px", viewBox: "0 0 24 24", stroke: "var(--color-red-300)" }), jsx(Text, { variant: "xs", className: classNames(styles$k.errorText), children: error })] }));
     var DescriptionSection = (jsx(Flex, { className: styles$k.description, gap: 4, ml: 16, mt: 8, style: { visibility: description ? 'visible' : 'hidden' }, children: jsx(Text, { variant: "xs", children: description }) }));
-    var options = useMemo(function () {
-        return temporaryOptions.map(function (option) {
-            return (jsx(Dropdown.Option, { value: option.value, py: 12, disabled: option.disabled, onClick: function (e) {
-                    e.stopPropagation();
-                }, children: jsx(Checkbox, { label: option.label, checked: option.selected, disabled: option.disabled, onChange: function (e) {
-                        handleOptionClick(option);
-                        e.stopPropagation();
-                    }, w: "100%" }, option.value) }, option.value));
-        });
-    }, [temporaryOptions]);
-    return (jsx(Dropdown, { options: options, maxHeight: 300, footer: function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); }, children: function (store) {
+    var dropdownFooter = function (store) { return (jsxs(Flex, { justify: "flex-end", py: 8, gap: 8, children: [jsx(Button, { variant: "outlined", label: "Clear", size: "small", onClick: handleClear }), jsx(Button, { variant: "filled", label: "Apply", size: "small", onClick: function () { return handleApply(store.closeDropdown); } })] })); };
+    return (jsx(Dropdown, { options: dropdownOptions, maxHeight: 300, footer: dropdownFooter, children: function (store) {
             var _a, _b;
-            return (jsxs("div", { className: styles$k.container, children: [(store.dropdownOpened || hasSelectedOptions) && (jsx("label", { className: classNames(styles$k.label, (_a = {},
+            var floatLabel = store.dropdownOpened || hasSelectedOptions;
+            return (jsxs("div", { className: styles$k.container, children: [floatLabel && (jsx("label", { className: classNames(styles$k.label, (_a = {},
                             _a[styles$k.labelError] = error && !isFocused,
                             _a[styles$k.labelFocused] = isFocused || isHovered,
                             _a)), children: label })), jsxs(Box, { className: classNames(styles$k.input, multiselectStyles.input, (_b = {},
                             _b[styles$k.inputError] = error && !isFocused,
+                            _b[multiselectStyles.inputFocused] = isFocused || store.dropdownOpened,
                             _b[multiselectStyles.disabled] = disabled,
-                            _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsx(PillListSection, { store: store }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
+                            _b)), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onClick: function () { return store.toggleDropdown(); }, onFocus: function () { return setIsFocused(true); }, onBlur: handleBlur, tabIndex: 0, children: [jsx(PillAndSearchSection, { store: store, maxPills: maxPills }), jsx(Chevron, { rotate: store.dropdownOpened ? 90 : 270 })] }), error ? ErrorSection : DescriptionSection] }));
         } }));
 };
 
@@ -1537,4 +1595,4 @@ var World = function (_a) {
 };
 
 export { Document as $, Accordion as A, Badge as B, Card as C, DateInput as D, EnterCodeInput as E, FileInput as F, Multiselect as G, Alert as H, IncrementNumber as I, Arrow as J, Attachment as K, Link as L, Message as M, NavBar as N, AvatarPlaceholder as O, PasswordInput as P, Bell as Q, RadioButton as R, SegmentedControl as S, Table as T, Calendar as U, Cat as V, Chevron as W, Clock as X, Close as Y, Cloud as Z, Delete as _, AccordionItem as a, Dog as a0, EyeHide as a1, EyeShow as a2, Fingerprint as a3, Google as a4, Grid as a5, HappyFace as a6, House as a7, HouseTime as a8, Identification as a9, Info as aa, Location as ab, Mail as ac, Menu as ad, MenuTouched as ae, Notification as af, Open as ag, Pets as ah, Phone as ai, Plaid as aj, Plus as ak, Remove as al, Search as am, ThreeDots as an, ThumbsDown as ao, Tick as ap, Umbrello as aq, Upload as ar, Visa as as, Warning as at, World as au, capitalizeFirstSentenceLetter as av, AccordionControl as b, AccordionPanel as c, ActionIcon as d, Animation as e, Autocomplete as f, getDefaultExportFromCjs as g, badgeVariantMap as h, Button as i, cardStatusVariantMap as j, CardStatus as k, Checkbox as l, Dropdown as m, FileUpload as n, Input as o, LinkModal as p, Loader as q, Modal as r, Pagination as s, Select as t, StatusBadge as u, Tabs as v, Text as w, Textarea as x, ToastContainer as y, Tooltip as z };
-//# sourceMappingURL=index-SJDXCSJk.js.map
+//# sourceMappingURL=index-8sE755zt.js.map