unifyedx-storybook-new 0.1.66 → 0.1.67

package/dist/unifyedx-storybook-new.es.js

@@ -42982,7 +42982,7 @@ const computePosition = (reference, floating, options) => {
 * @copyright ReactTooltip Team
 * @license MIT
 */
-const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:false,base:false};function S({css:e,id:t=w,type:o="base",ref:l}){var r,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(r=null===process||void 0===process?void 0:process.env)||void 0===r?void 0:r.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),l||(l={});const{insertAt:i}=l;if(document.getElementById(t))return;const c=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===i&&c.firstChild?c.insertBefore(s,c.firstChild):c.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=true;}const E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:r=10,strategy:n="absolute",middlewares:i=[offset(Number(r)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:c,arrowSize:s=8})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};const a=i;return o?(a.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:l,strategy:n,middleware:a}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const i={left:`${e}px`,top:`${t}px`,border:c},{x:a,y:u}=null!==(r=l.arrow)&&void 0!==r?r:{x:0,y:0},d=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",p=c&&{borderBottom:c,borderRight:c};let v=0;if(c){const e=`${c}`.match(/(\d+)px/);v=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:i,tooltipArrowStyles:{left:null!=a?`${a}px`:"",top:null!=u?`${u}px`:"",right:"",bottom:"",...p,[d]:`-${s/2+v}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:a}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_$2=(e,t,o)=>{let l=null;const r=function(...r){const n=()=>{l=null;};!l&&(e.apply(this,r),l=setTimeout(n,t));};return r.cancel=()=>{l&&(clearTimeout(l),l=null);},r},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,k=(e,t)=>{if(e===t)return  true;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>k(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return  false;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),l=Object.keys(t);return o.length===l.length&&o.every((o=>k(e[o],t[o])))},T=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return  false;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},L$1=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(T(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},C="undefined"!=typeof window?useLayoutEffect:useEffect,R=e=>{e.current&&(clearTimeout(e.current),e.current=null);},x="DEFAULT_TOOLTIP_ID",N$1={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},$$1=createContext({getTooltipData:()=>N$1});function z$1(e=x){return useContext($$1).getTooltipData(e)}var B$1={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},D={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const q=({forwardRef:t,id:l,className:i,classNameArrow:c,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=false,positionStrategy:b="absolute",middlewares:S,wrapper:g,delayShow:A=0,delayHide:O=0,float:T=false,hidden:x=false,noArrow:N=false,clickable:$=false,closeOnEsc:I=false,closeOnScroll:j=false,closeOnResize:q=false,openEvents:H,closeEvents:M,globalCloseEvents:W,imperativeModeOnly:P,style:V,position:F,afterShow:K,afterHide:U,disableTooltip:X,content:Y,contentWrapperRef:G,isOpen:Z,defaultIsOpen:J=false,setIsOpen:Q,activeAnchor:ee,setActiveAnchor:te,border:oe,opacity:le,arrowColor:re,arrowSize:ne=8,role:ie="tooltip"})=>{var ce;const se=useRef(null),ae=useRef(null),ue=useRef(null),de=useRef(null),pe=useRef(null),[ve,me]=useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[fe,ye]=useState(false),[he,we]=useState(false),[be,Se]=useState(null),ge=useRef(false),Ee=useRef(null),{anchorRefs:Ae,setActiveAnchor:_e}=z$1(l),Oe=useRef(false),[ke,Te]=useState([]),Le=useRef(false),Ce=w||h.includes("click"),Re=Ce||(null==H?void 0:H.click)||(null==H?void 0:H.dblclick)||(null==H?void 0:H.mousedown),xe=H?{...H}:{mouseover:true,focus:true,mouseenter:false,click:false,dblclick:false,mousedown:false};!H&&Ce&&Object.assign(xe,{mouseenter:false,focus:false,mouseover:false,click:true});const Ne=M?{...M}:{mouseout:true,blur:true,mouseleave:false,click:false,dblclick:false,mouseup:false};!M&&Ce&&Object.assign(Ne,{mouseleave:false,blur:false,mouseout:false});const $e=W?{...W}:{escape:I||false,scroll:j||false,resize:q||false,clickOutsideAnchor:Re||false};P&&(Object.assign(xe,{mouseover:false,focus:false,mouseenter:false,click:false,dblclick:false,mousedown:false}),Object.assign(Ne,{mouseout:false,blur:false,mouseleave:false,click:false,dblclick:false,mouseup:false}),Object.assign($e,{escape:false,scroll:false,resize:false,clickOutsideAnchor:false})),C((()=>(Le.current=true,()=>{Le.current=false;})),[]);const Ie=e=>{Le.current&&(e&&we(true),setTimeout((()=>{Le.current&&(null==Q||Q(e),void 0===Z&&ye(e));}),10));};useEffect((()=>{if(void 0===Z)return ()=>null;Z&&we(true);const e=setTimeout((()=>{ye(Z);}),10);return ()=>{clearTimeout(e);}}),[Z]),useEffect((()=>{if(fe!==ge.current)if(R(pe),ge.current=fe,fe)null==K||K();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,l]=t;return Number(o)*("ms"===l?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));pe.current=setTimeout((()=>{we(false),Se(null),null==U||U();}),e+25);}}),[fe]);const ze=e=>{me((t=>k(t,e)?t:e));},je=(e=A)=>{R(ue),he?Ie(true):ue.current=setTimeout((()=>{Ie(true);}),e);},Be=(e=O)=>{R(de),de.current=setTimeout((()=>{Oe.current||Ie(false);}),e);},De=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return te(null),void _e({current:null});A?je():Ie(true),te(o),_e({current:o}),R(de);},qe=()=>{$?Be(O||100):O?Be():Ie(false),R(ue);},He=({x:e,y:t})=>{var o;const l={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};E({place:null!==(o=null==be?void 0:be.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:se.current,tooltipArrowReference:ae.current,strategy:b,middlewares:S,border:oe,arrowSize:ne}).then((e=>{ze(e);}));},Me=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};He(o),Ee.current=o;},We=e=>{var t;if(!fe)return;const o=e.target;if(!o.isConnected)return;if(null===(t=se.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...ke].some((e=>null==e?void 0:e.contains(o)))||(Ie(false),R(ue));},Pe=_$2(De,50),Ve=_$2(qe,50),Fe=e=>{Ve.cancel(),Pe(e);},Ke=()=>{Pe.cancel(),Ve();},Ue=useCallback((()=>{var e,t;const o=null!==(e=null==be?void 0:be.position)&&void 0!==e?e:F;o?He(o):T?Ee.current&&He(Ee.current):(null==ee?void 0:ee.isConnected)&&E({place:null!==(t=null==be?void 0:be.place)&&void 0!==t?t:v,offset:m,elementReference:ee,tooltipReference:se.current,tooltipArrowReference:ae.current,strategy:b,middlewares:S,border:oe,arrowSize:ne}).then((e=>{Le.current&&ze(e);}));}),[fe,ee,Y,V,v,null==be?void 0:be.place,m,b,F,null==be?void 0:be.position,T,ne]);useEffect((()=>{var e,t;const o=new Set(Ae);ke.forEach((e=>{(null==X?void 0:X(e))||o.add({current:e});}));const l=document.querySelector(`[id='${d}']`);l&&!(null==X?void 0:X(l))&&o.add({current:l});const r=()=>{Ie(false);},n=L$1(ee),i=L$1(se.current);$e.scroll&&(window.addEventListener("scroll",r),null==n||n.addEventListener("scroll",r),null==i||i.addEventListener("scroll",r));let c=null;$e.resize?window.addEventListener("resize",r):ee&&se.current&&(c=autoUpdate(ee,se.current,Ue,{ancestorResize:true,elementResize:true,layoutShift:true}));const s=e=>{"Escape"===e.key&&Ie(false);};$e.escape&&window.addEventListener("keydown",s),$e.clickOutsideAnchor&&window.addEventListener("click",We);const a=[],u=e=>Boolean((null==e?void 0:e.target)&&(null==ee?void 0:ee.contains(e.target))),p=e=>{fe&&u(e)||De(e);},v=e=>{fe&&u(e)&&qe();},m=["mouseover","mouseout","mouseenter","mouseleave","focus","blur"],y=["click","dblclick","mousedown","mouseup"];Object.entries(xe).forEach((([e,t])=>{t&&(m.includes(e)?a.push({event:e,listener:Fe}):y.includes(e)&&a.push({event:e,listener:p}));})),Object.entries(Ne).forEach((([e,t])=>{t&&(m.includes(e)?a.push({event:e,listener:Ke}):y.includes(e)&&a.push({event:e,listener:v}));})),T&&a.push({event:"pointermove",listener:Me});const h=()=>{Oe.current=true;},w=()=>{Oe.current=false,qe();},b=$&&(Ne.mouseout||Ne.mouseleave);return b&&(null===(e=se.current)||void 0===e||e.addEventListener("mouseover",h),null===(t=se.current)||void 0===t||t.addEventListener("mouseout",w)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.addEventListener(e,t);}));})),()=>{var e,t;$e.scroll&&(window.removeEventListener("scroll",r),null==n||n.removeEventListener("scroll",r),null==i||i.removeEventListener("scroll",r)),$e.resize?window.removeEventListener("resize",r):null==c||c(),$e.clickOutsideAnchor&&window.removeEventListener("click",We),$e.escape&&window.removeEventListener("keydown",s),b&&(null===(e=se.current)||void 0===e||e.removeEventListener("mouseover",h),null===(t=se.current)||void 0===t||t.removeEventListener("mouseout",w)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t);}));}));}}),[ee,Ue,he,Ae,ke,H,M,W,Ce,A,O]),useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==be?void 0:be.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&l&&(o=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`);const r=new MutationObserver((e=>{const t=[],r=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===l?t.push(e.target):e.oldValue===l&&r.push(e.target);}if("childList"===e.type){if(ee){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{r.push(...t.filter((e=>e.matches(o)))),r.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,ee))&&(we(false),Ie(false),te(null),R(ue),R(de),true)}));}if(o)try{const l=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...l.filter((e=>e.matches(o)))),t.push(...l.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||r.length)&&Te((e=>[...e.filter((e=>!r.includes(e))),...t]));}));return r.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:["data-tooltip-id"],attributeOldValue:true}),()=>{r.disconnect();}}),[l,p,null==be?void 0:be.anchorSelect,ee]),useEffect((()=>{Ue();}),[Ue]),useEffect((()=>{if(!(null==G?void 0:G.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ue()));}));return e.observe(G.current),()=>{e.disconnect();}}),[Y,null==G?void 0:G.current]),useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...ke,t];ee&&o.includes(ee)||te(null!==(e=ke[0])&&void 0!==e?e:t);}),[d,ke,ee]),useEffect((()=>(J&&Ie(true),()=>{R(ue),R(de);})),[]),useEffect((()=>{var e;let t=null!==(e=null==be?void 0:be.anchorSelect)&&void 0!==e?e:p;if(!t&&l&&(t=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`),t)try{const e=Array.from(document.querySelectorAll(t));Te(e);}catch(e){Te([]);}}),[l,p,null==be?void 0:be.anchorSelect]),useEffect((()=>{ue.current&&(R(ue),je(A));}),[A]);const Xe=null!==(ce=null==be?void 0:be.content)&&void 0!==ce?ce:Y,Ye=fe&&Object.keys(ve.tooltipStyles).length>0;return useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}Se(null!=e?e:null),(null==e?void 0:e.delay)?je(e.delay):Ie(true);},close:e=>{(null==e?void 0:e.delay)?Be(e.delay):Ie(false);},activeAnchor:ee,place:ve.place,isOpen:Boolean(he&&!x&&Xe&&Ye)}))),he&&!x&&Xe?React__default.createElement(g,{id:l,role:ie,className:classNames$1("react-tooltip",B$1.tooltip,D.tooltip,D[u],i,`react-tooltip__place-${ve.place}`,B$1[Ye?"show":"closing"],Ye?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B$1.fixed,$&&B$1.clickable),onTransitionEnd:e=>{R(pe),fe||"opacity"!==e.propertyName||(we(false),Se(null),null==U||U());},style:{...V,...ve.tooltipStyles,opacity:void 0!==le&&Ye?le:void 0},ref:se},Xe,React__default.createElement(g,{className:classNames$1("react-tooltip-arrow",B$1.arrow,D.arrow,c,N&&B$1.noArrow),style:{...ve.tooltipArrowStyles,background:re?`linear-gradient(to right bottom, transparent 50%, ${re} 50%)`:void 0,"--rt-arrow-size":`${ne}px`},ref:ae})):null},H=({content:t})=>React__default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),M=React__default.forwardRef((({id:t,anchorId:l,anchorSelect:n,content:i,html:c,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=false,positionStrategy:S="absolute",middlewares:g,delayShow:E=0,delayHide:_=0,float:O=false,hidden:k=false,noArrow:T=false,clickable:L=false,closeOnEsc:C=false,closeOnScroll:R=false,closeOnResize:x=false,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:j=false,style:B,position:D,isOpen:M,defaultIsOpen:W=false,disableStyleInjection:P=false,border:V,opacity:F,arrowColor:K,arrowSize:U,setIsOpen:X,afterShow:Y,afterHide:G,disableTooltip:Z,role:J="tooltip"},Q)=>{const[ee,te]=useState(i),[oe,le]=useState(c),[re,ne]=useState(v),[ie,ce]=useState(p),[se,ae]=useState(m),[ue,de]=useState(E),[pe,ve]=useState(_),[me,fe]=useState(O),[ye,he]=useState(k),[we,be]=useState(f),[Se,ge]=useState(w),[Ee,Ae]=useState(S),[_e,Oe]=useState(null),[ke,Te]=useState(null),Le=useRef(P),{anchorRefs:Ce,activeAnchor:Re}=z$1(t),xe=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var l;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(l=null==e?void 0:e.getAttribute(o))&&void 0!==l?l:null;}return t}),{}),Ne=e=>{const t={place:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:v);},content:e=>{te(null!=e?e:i);},html:e=>{le(null!=e?e:c);},variant:e=>{var t;ce(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{ae(null===e?m:Number(e));},wrapper:e=>{var t;be(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");ge(null!=t?t:w);},"position-strategy":e=>{var t;Ae(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{de(null===e?E:Number(e));},"delay-hide":e=>{ve(null===e?_:Number(e));},float:e=>{fe(null===e?O:"true"===e);},hidden:e=>{he(null===e?k:"true"===e);},"class-name":e=>{Oe(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var l;null===(l=t[e])||void 0===l||l.call(t,o);}));};useEffect((()=>{te(i);}),[i]),useEffect((()=>{le(c);}),[c]),useEffect((()=>{ne(v);}),[v]),useEffect((()=>{ce(p);}),[p]),useEffect((()=>{ae(m);}),[m]),useEffect((()=>{de(E);}),[E]),useEffect((()=>{ve(_);}),[_]),useEffect((()=>{fe(O);}),[O]),useEffect((()=>{he(k);}),[k]),useEffect((()=>{Ae(S);}),[S]),useEffect((()=>{Le.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),useEffect((()=>{var e;const o=new Set(Ce);let r=n;if(!r&&t&&(r=`[data-tooltip-id='${t.replace(/'/g,"\\'")}']`),r)try{document.querySelectorAll(r).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${r}" is not a valid CSS selector`);}const i=document.querySelector(`[id='${l}']`);if(i&&o.add({current:i}),!o.size)return ()=>null;const c=null!==(e=null!=ke?ke:i)&&void 0!==e?e:Re.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!c||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=xe(c);Ne(o);}));})),a={attributes:true,childList:false,subtree:false};if(c){const e=xe(c);Ne(e),s.observe(c,a);}return ()=>{s.disconnect();}}),[Ce,Re,ke,l,n]),useEffect((()=>{(null==B?void 0:B.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==B?void 0:B.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let $e=h;const Ie=useRef(null);if(a){const t=a({content:(null==ke?void 0:ke.getAttribute("data-tooltip-content"))||ee||null,activeAnchor:ke});$e=t?React__default.createElement("div",{ref:Ie,className:"react-tooltip-content-wrapper"},t):null;}else ee&&($e=ee);oe&&($e=React__default.createElement(H,{content:oe}));const ze={forwardRef:Q,id:t,anchorId:l,anchorSelect:n,className:classNames$1(u,_e),classNameArrow:d,content:$e,contentWrapperRef:Ie,place:re,variant:ie,offset:se,wrapper:we,events:Se,openOnClick:b,positionStrategy:Ee,middlewares:g,delayShow:ue,delayHide:pe,float:me,hidden:ye,noArrow:T,clickable:L,closeOnEsc:C,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:j,style:B,position:D,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,arrowSize:U,setIsOpen:X,afterShow:Y,afterHide:G,disableTooltip:Z,activeAnchor:ke,setActiveAnchor:e=>Te(e),role:J};return React__default.createElement(q,{...ze})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s;--rt-arrow-size:8px}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit;z-index:-1}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
+const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:false,base:false};function S({css:e,id:t=w,type:o="base",ref:l}){var r,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(r=null===process||void 0===process?void 0:process.env)||void 0===r?void 0:r.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),l||(l={});const{insertAt:i}=l;if(document.getElementById(t))return;const c=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===i&&c.firstChild?c.insertBefore(s,c.firstChild):c.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=true;}const E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:r=10,strategy:n="absolute",middlewares:i=[offset(Number(r)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:c,arrowSize:s=8})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};const a=i;return o?(a.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:l,strategy:n,middleware:a}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const i={left:`${e}px`,top:`${t}px`,border:c},{x:a,y:u}=null!==(r=l.arrow)&&void 0!==r?r:{x:0,y:0},d=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",p=c&&{borderBottom:c,borderRight:c};let v=0;if(c){const e=`${c}`.match(/(\d+)px/);v=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:i,tooltipArrowStyles:{left:null!=a?`${a}px`:"",top:null!=u?`${u}px`:"",right:"",bottom:"",...p,[d]:`-${s/2+v}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:a}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_$1=(e,t,o)=>{let l=null;const r=function(...r){const n=()=>{l=null;};!l&&(e.apply(this,r),l=setTimeout(n,t));};return r.cancel=()=>{l&&(clearTimeout(l),l=null);},r},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,k=(e,t)=>{if(e===t)return  true;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>k(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return  false;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),l=Object.keys(t);return o.length===l.length&&o.every((o=>k(e[o],t[o])))},T=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return  false;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},L$1=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(T(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},C="undefined"!=typeof window?useLayoutEffect:useEffect,R=e=>{e.current&&(clearTimeout(e.current),e.current=null);},x="DEFAULT_TOOLTIP_ID",N$1={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},$$1=createContext({getTooltipData:()=>N$1});function z$1(e=x){return useContext($$1).getTooltipData(e)}var B$1={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},D={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const q=({forwardRef:t,id:l,className:i,classNameArrow:c,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=false,positionStrategy:b="absolute",middlewares:S,wrapper:g,delayShow:A=0,delayHide:O=0,float:T=false,hidden:x=false,noArrow:N=false,clickable:$=false,closeOnEsc:I=false,closeOnScroll:j=false,closeOnResize:q=false,openEvents:H,closeEvents:M,globalCloseEvents:W,imperativeModeOnly:P,style:V,position:F,afterShow:K,afterHide:U,disableTooltip:X,content:Y,contentWrapperRef:G,isOpen:Z,defaultIsOpen:J=false,setIsOpen:Q,activeAnchor:ee,setActiveAnchor:te,border:oe,opacity:le,arrowColor:re,arrowSize:ne=8,role:ie="tooltip"})=>{var ce;const se=useRef(null),ae=useRef(null),ue=useRef(null),de=useRef(null),pe=useRef(null),[ve,me]=useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[fe,ye]=useState(false),[he,we]=useState(false),[be,Se]=useState(null),ge=useRef(false),Ee=useRef(null),{anchorRefs:Ae,setActiveAnchor:_e}=z$1(l),Oe=useRef(false),[ke,Te]=useState([]),Le=useRef(false),Ce=w||h.includes("click"),Re=Ce||(null==H?void 0:H.click)||(null==H?void 0:H.dblclick)||(null==H?void 0:H.mousedown),xe=H?{...H}:{mouseover:true,focus:true,mouseenter:false,click:false,dblclick:false,mousedown:false};!H&&Ce&&Object.assign(xe,{mouseenter:false,focus:false,mouseover:false,click:true});const Ne=M?{...M}:{mouseout:true,blur:true,mouseleave:false,click:false,dblclick:false,mouseup:false};!M&&Ce&&Object.assign(Ne,{mouseleave:false,blur:false,mouseout:false});const $e=W?{...W}:{escape:I||false,scroll:j||false,resize:q||false,clickOutsideAnchor:Re||false};P&&(Object.assign(xe,{mouseover:false,focus:false,mouseenter:false,click:false,dblclick:false,mousedown:false}),Object.assign(Ne,{mouseout:false,blur:false,mouseleave:false,click:false,dblclick:false,mouseup:false}),Object.assign($e,{escape:false,scroll:false,resize:false,clickOutsideAnchor:false})),C((()=>(Le.current=true,()=>{Le.current=false;})),[]);const Ie=e=>{Le.current&&(e&&we(true),setTimeout((()=>{Le.current&&(null==Q||Q(e),void 0===Z&&ye(e));}),10));};useEffect((()=>{if(void 0===Z)return ()=>null;Z&&we(true);const e=setTimeout((()=>{ye(Z);}),10);return ()=>{clearTimeout(e);}}),[Z]),useEffect((()=>{if(fe!==ge.current)if(R(pe),ge.current=fe,fe)null==K||K();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,l]=t;return Number(o)*("ms"===l?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));pe.current=setTimeout((()=>{we(false),Se(null),null==U||U();}),e+25);}}),[fe]);const ze=e=>{me((t=>k(t,e)?t:e));},je=(e=A)=>{R(ue),he?Ie(true):ue.current=setTimeout((()=>{Ie(true);}),e);},Be=(e=O)=>{R(de),de.current=setTimeout((()=>{Oe.current||Ie(false);}),e);},De=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return te(null),void _e({current:null});A?je():Ie(true),te(o),_e({current:o}),R(de);},qe=()=>{$?Be(O||100):O?Be():Ie(false),R(ue);},He=({x:e,y:t})=>{var o;const l={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};E({place:null!==(o=null==be?void 0:be.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:se.current,tooltipArrowReference:ae.current,strategy:b,middlewares:S,border:oe,arrowSize:ne}).then((e=>{ze(e);}));},Me=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};He(o),Ee.current=o;},We=e=>{var t;if(!fe)return;const o=e.target;if(!o.isConnected)return;if(null===(t=se.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...ke].some((e=>null==e?void 0:e.contains(o)))||(Ie(false),R(ue));},Pe=_$1(De,50),Ve=_$1(qe,50),Fe=e=>{Ve.cancel(),Pe(e);},Ke=()=>{Pe.cancel(),Ve();},Ue=useCallback((()=>{var e,t;const o=null!==(e=null==be?void 0:be.position)&&void 0!==e?e:F;o?He(o):T?Ee.current&&He(Ee.current):(null==ee?void 0:ee.isConnected)&&E({place:null!==(t=null==be?void 0:be.place)&&void 0!==t?t:v,offset:m,elementReference:ee,tooltipReference:se.current,tooltipArrowReference:ae.current,strategy:b,middlewares:S,border:oe,arrowSize:ne}).then((e=>{Le.current&&ze(e);}));}),[fe,ee,Y,V,v,null==be?void 0:be.place,m,b,F,null==be?void 0:be.position,T,ne]);useEffect((()=>{var e,t;const o=new Set(Ae);ke.forEach((e=>{(null==X?void 0:X(e))||o.add({current:e});}));const l=document.querySelector(`[id='${d}']`);l&&!(null==X?void 0:X(l))&&o.add({current:l});const r=()=>{Ie(false);},n=L$1(ee),i=L$1(se.current);$e.scroll&&(window.addEventListener("scroll",r),null==n||n.addEventListener("scroll",r),null==i||i.addEventListener("scroll",r));let c=null;$e.resize?window.addEventListener("resize",r):ee&&se.current&&(c=autoUpdate(ee,se.current,Ue,{ancestorResize:true,elementResize:true,layoutShift:true}));const s=e=>{"Escape"===e.key&&Ie(false);};$e.escape&&window.addEventListener("keydown",s),$e.clickOutsideAnchor&&window.addEventListener("click",We);const a=[],u=e=>Boolean((null==e?void 0:e.target)&&(null==ee?void 0:ee.contains(e.target))),p=e=>{fe&&u(e)||De(e);},v=e=>{fe&&u(e)&&qe();},m=["mouseover","mouseout","mouseenter","mouseleave","focus","blur"],y=["click","dblclick","mousedown","mouseup"];Object.entries(xe).forEach((([e,t])=>{t&&(m.includes(e)?a.push({event:e,listener:Fe}):y.includes(e)&&a.push({event:e,listener:p}));})),Object.entries(Ne).forEach((([e,t])=>{t&&(m.includes(e)?a.push({event:e,listener:Ke}):y.includes(e)&&a.push({event:e,listener:v}));})),T&&a.push({event:"pointermove",listener:Me});const h=()=>{Oe.current=true;},w=()=>{Oe.current=false,qe();},b=$&&(Ne.mouseout||Ne.mouseleave);return b&&(null===(e=se.current)||void 0===e||e.addEventListener("mouseover",h),null===(t=se.current)||void 0===t||t.addEventListener("mouseout",w)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.addEventListener(e,t);}));})),()=>{var e,t;$e.scroll&&(window.removeEventListener("scroll",r),null==n||n.removeEventListener("scroll",r),null==i||i.removeEventListener("scroll",r)),$e.resize?window.removeEventListener("resize",r):null==c||c(),$e.clickOutsideAnchor&&window.removeEventListener("click",We),$e.escape&&window.removeEventListener("keydown",s),b&&(null===(e=se.current)||void 0===e||e.removeEventListener("mouseover",h),null===(t=se.current)||void 0===t||t.removeEventListener("mouseout",w)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t);}));}));}}),[ee,Ue,he,Ae,ke,H,M,W,Ce,A,O]),useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==be?void 0:be.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&l&&(o=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`);const r=new MutationObserver((e=>{const t=[],r=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===l?t.push(e.target):e.oldValue===l&&r.push(e.target);}if("childList"===e.type){if(ee){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{r.push(...t.filter((e=>e.matches(o)))),r.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,ee))&&(we(false),Ie(false),te(null),R(ue),R(de),true)}));}if(o)try{const l=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...l.filter((e=>e.matches(o)))),t.push(...l.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||r.length)&&Te((e=>[...e.filter((e=>!r.includes(e))),...t]));}));return r.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:["data-tooltip-id"],attributeOldValue:true}),()=>{r.disconnect();}}),[l,p,null==be?void 0:be.anchorSelect,ee]),useEffect((()=>{Ue();}),[Ue]),useEffect((()=>{if(!(null==G?void 0:G.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ue()));}));return e.observe(G.current),()=>{e.disconnect();}}),[Y,null==G?void 0:G.current]),useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...ke,t];ee&&o.includes(ee)||te(null!==(e=ke[0])&&void 0!==e?e:t);}),[d,ke,ee]),useEffect((()=>(J&&Ie(true),()=>{R(ue),R(de);})),[]),useEffect((()=>{var e;let t=null!==(e=null==be?void 0:be.anchorSelect)&&void 0!==e?e:p;if(!t&&l&&(t=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`),t)try{const e=Array.from(document.querySelectorAll(t));Te(e);}catch(e){Te([]);}}),[l,p,null==be?void 0:be.anchorSelect]),useEffect((()=>{ue.current&&(R(ue),je(A));}),[A]);const Xe=null!==(ce=null==be?void 0:be.content)&&void 0!==ce?ce:Y,Ye=fe&&Object.keys(ve.tooltipStyles).length>0;return useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}Se(null!=e?e:null),(null==e?void 0:e.delay)?je(e.delay):Ie(true);},close:e=>{(null==e?void 0:e.delay)?Be(e.delay):Ie(false);},activeAnchor:ee,place:ve.place,isOpen:Boolean(he&&!x&&Xe&&Ye)}))),he&&!x&&Xe?React__default.createElement(g,{id:l,role:ie,className:classNames$1("react-tooltip",B$1.tooltip,D.tooltip,D[u],i,`react-tooltip__place-${ve.place}`,B$1[Ye?"show":"closing"],Ye?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B$1.fixed,$&&B$1.clickable),onTransitionEnd:e=>{R(pe),fe||"opacity"!==e.propertyName||(we(false),Se(null),null==U||U());},style:{...V,...ve.tooltipStyles,opacity:void 0!==le&&Ye?le:void 0},ref:se},Xe,React__default.createElement(g,{className:classNames$1("react-tooltip-arrow",B$1.arrow,D.arrow,c,N&&B$1.noArrow),style:{...ve.tooltipArrowStyles,background:re?`linear-gradient(to right bottom, transparent 50%, ${re} 50%)`:void 0,"--rt-arrow-size":`${ne}px`},ref:ae})):null},H=({content:t})=>React__default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),M=React__default.forwardRef((({id:t,anchorId:l,anchorSelect:n,content:i,html:c,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=false,positionStrategy:S="absolute",middlewares:g,delayShow:E=0,delayHide:_=0,float:O=false,hidden:k=false,noArrow:T=false,clickable:L=false,closeOnEsc:C=false,closeOnScroll:R=false,closeOnResize:x=false,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:j=false,style:B,position:D,isOpen:M,defaultIsOpen:W=false,disableStyleInjection:P=false,border:V,opacity:F,arrowColor:K,arrowSize:U,setIsOpen:X,afterShow:Y,afterHide:G,disableTooltip:Z,role:J="tooltip"},Q)=>{const[ee,te]=useState(i),[oe,le]=useState(c),[re,ne]=useState(v),[ie,ce]=useState(p),[se,ae]=useState(m),[ue,de]=useState(E),[pe,ve]=useState(_),[me,fe]=useState(O),[ye,he]=useState(k),[we,be]=useState(f),[Se,ge]=useState(w),[Ee,Ae]=useState(S),[_e,Oe]=useState(null),[ke,Te]=useState(null),Le=useRef(P),{anchorRefs:Ce,activeAnchor:Re}=z$1(t),xe=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var l;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(l=null==e?void 0:e.getAttribute(o))&&void 0!==l?l:null;}return t}),{}),Ne=e=>{const t={place:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:v);},content:e=>{te(null!=e?e:i);},html:e=>{le(null!=e?e:c);},variant:e=>{var t;ce(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{ae(null===e?m:Number(e));},wrapper:e=>{var t;be(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");ge(null!=t?t:w);},"position-strategy":e=>{var t;Ae(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{de(null===e?E:Number(e));},"delay-hide":e=>{ve(null===e?_:Number(e));},float:e=>{fe(null===e?O:"true"===e);},hidden:e=>{he(null===e?k:"true"===e);},"class-name":e=>{Oe(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var l;null===(l=t[e])||void 0===l||l.call(t,o);}));};useEffect((()=>{te(i);}),[i]),useEffect((()=>{le(c);}),[c]),useEffect((()=>{ne(v);}),[v]),useEffect((()=>{ce(p);}),[p]),useEffect((()=>{ae(m);}),[m]),useEffect((()=>{de(E);}),[E]),useEffect((()=>{ve(_);}),[_]),useEffect((()=>{fe(O);}),[O]),useEffect((()=>{he(k);}),[k]),useEffect((()=>{Ae(S);}),[S]),useEffect((()=>{Le.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),useEffect((()=>{var e;const o=new Set(Ce);let r=n;if(!r&&t&&(r=`[data-tooltip-id='${t.replace(/'/g,"\\'")}']`),r)try{document.querySelectorAll(r).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${r}" is not a valid CSS selector`);}const i=document.querySelector(`[id='${l}']`);if(i&&o.add({current:i}),!o.size)return ()=>null;const c=null!==(e=null!=ke?ke:i)&&void 0!==e?e:Re.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!c||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=xe(c);Ne(o);}));})),a={attributes:true,childList:false,subtree:false};if(c){const e=xe(c);Ne(e),s.observe(c,a);}return ()=>{s.disconnect();}}),[Ce,Re,ke,l,n]),useEffect((()=>{(null==B?void 0:B.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==B?void 0:B.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let $e=h;const Ie=useRef(null);if(a){const t=a({content:(null==ke?void 0:ke.getAttribute("data-tooltip-content"))||ee||null,activeAnchor:ke});$e=t?React__default.createElement("div",{ref:Ie,className:"react-tooltip-content-wrapper"},t):null;}else ee&&($e=ee);oe&&($e=React__default.createElement(H,{content:oe}));const ze={forwardRef:Q,id:t,anchorId:l,anchorSelect:n,className:classNames$1(u,_e),classNameArrow:d,content:$e,contentWrapperRef:Ie,place:re,variant:ie,offset:se,wrapper:we,events:Se,openOnClick:b,positionStrategy:Ee,middlewares:g,delayShow:ue,delayHide:pe,float:me,hidden:ye,noArrow:T,clickable:L,closeOnEsc:C,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:j,style:B,position:D,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,arrowSize:U,setIsOpen:X,afterShow:Y,afterHide:G,disableTooltip:Z,activeAnchor:ke,setActiveAnchor:e=>Te(e),role:J};return React__default.createElement(q,{...ze})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s;--rt-arrow-size:8px}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit;z-index:-1}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
 .styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:var(--rt-arrow-size);height:var(--rt-arrow-size)}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
 
 const Tooltip = ({
@@ -69682,7 +69682,7 @@ function requireLodash () {
 }
 
 var lodashExports = requireLodash();
-const _$1 = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
+const _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
 // src/hooks/useDebounce.js
 
@@ -70681,9 +70681,9 @@ const AddUserGroupsRolesModal = ({
   const handleBack = (changedExistingShares) => {
     console.log("changedExistingShares", changedExistingShares);
     setShares(changedExistingShares);
-    const hasPermissionChanged = !_$1.isEqual(
-      _$1.mapValues(existingShares, (arr) => arr.map((o) => ({ id: o.id, permission: o.permission }))),
-      _$1.mapValues(changedExistingShares, (arr) => arr.map((o) => ({ id: o.id, permission: o.permission })))
+    const hasPermissionChanged = !_.isEqual(
+      _.mapValues(existingShares, (arr) => arr.map((o) => ({ id: o.id, permission: o.permission }))),
+      _.mapValues(changedExistingShares, (arr) => arr.map((o) => ({ id: o.id, permission: o.permission })))
     );
     setDataChanged(hasPermissionChanged);
     setView(view === ModalView.MEMBERS ? returnView : ModalView.INVITE);
@@ -75241,11 +75241,9 @@ function TreeView({
 }
 
 function SectionRenderer({ item, data: initialData, updateHandler, validationErrors = {} }) {
-  console.log(item);
   const [section, setSection] = React__default.useState(item);
   const [data, setData] = React__default.useState(() => {
     const sectionData = initialData && initialData[item.key] || (item.type === "datatable" ? [] : {});
-    console.log("Initial Section data for", item.key, sectionData);
     return sectionData;
   });
   const getOptions = React__default.useCallback((field) => {
@@ -75254,6 +75252,8 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
       const configData = initialData[config];
       if (Array.isArray(configData)) {
         return configData.map((item2) => ({
+          id: item2[valueField],
+          // Add id for backward compatibility
           value: item2[valueField],
           label: item2[labelField]
         }));
@@ -75262,6 +75262,15 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     }
     return field.options || [];
   }, [initialData]);
+  const handleFieldChange = React__default.useCallback((fieldKey, value) => {
+    setData((prevData) => {
+      const newData = { ...prevData, [fieldKey]: value };
+      if (updateHandler) {
+        updateHandler(section.key, newData);
+      }
+      return newData;
+    });
+  }, [updateHandler, section.key]);
   React__default.useEffect(() => {
     if (initialData && initialData[item.key]) {
       setData(initialData[item.key]);
@@ -75272,18 +75281,9 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     if (prevInitialDataRef.current !== initialData) {
       prevInitialDataRef.current = initialData;
       const sectionData = initialData && initialData[item.key] || {};
-      console.log("Updated Section data for", item.key, sectionData);
       setData(sectionData);
     }
   }, [initialData, item.key]);
-  console.log("Section data", data);
-  const prevDataRef = useRef(data);
-  useEffect(() => {
-    if (prevDataRef.current !== data && updateHandler && typeof updateHandler === "function") {
-      prevDataRef.current = data;
-      updateHandler(section.key, data);
-    }
-  }, [section.key, data, updateHandler]);
   const shouldShowField = (field) => {
     if (!field.dependsOn) return true;
     const { field: dependentField, value: requiredValue, operator = "equals" } = field.dependsOn;
@@ -75346,13 +75346,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             placeholder: field.placeholder,
             value: data[field.key] || field.default || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75367,13 +75361,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             placeholder: field.placeholder,
             value: data[field.key] || field.default || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             rows: 3,
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
@@ -75390,13 +75378,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             placeholder: field.placeholder,
             value: data[field.key] || field.default || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75410,13 +75392,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           {
             name: field.key,
             checked: Boolean(data[field.key] || field.default),
-            onChange: (checked) => {
-              const newData = { ...data, [field.key]: checked };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (checked) => handleFieldChange(field.key, checked),
             label: field.placeholder || field.label,
             disabled: field.disabled ? field.disabled : false,
             className: "w-full"
@@ -75430,13 +75406,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           {
             name: field.key,
             value: data[field.key] || field.default || "",
-            onChange: (value) => {
-              const newData = { ...data, [field.key]: value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (value) => handleFieldChange(field.key, value),
             options: getOptions(field),
             placeholder: field.placeholder || `Select ${field.label}`,
             required: field.required,
@@ -75455,13 +75425,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Enter email address",
             value: data[field.key] || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75478,13 +75442,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Enter URL",
             value: data[field.key] || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75501,13 +75459,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Enter password",
             value: data[field.key] || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             disabled: field.disabled ? field.disabled : false,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75520,13 +75472,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           MultiSelect,
           {
             selectedItems: data[field.key] || [],
-            onSelectionChange: (selectedItems) => {
-              const newData = { ...data, [field.key]: selectedItems };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onSelectionChange: (selectedItems) => handleFieldChange(field.key, selectedItems),
             options: field.options || [],
             placeholder: field.placeholder || `Select ${field.label}`,
             disabled: field.disabled ? field.disabled : false,
@@ -75540,14 +75486,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           ToggleSwitch,
           {
             checked: typeof data[field.key] === "boolean" ? data[field.key] : field.default,
-            onChange: (isOn) => {
-              console.log("Toggle changed:", field.key, isOn);
-              const newData = { ...data, [field.key]: isOn };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (isOn) => handleFieldChange(field.key, isOn),
             label: field.placeholder || field.label,
             disabled: field.disabled ? field.disabled : false
           }
@@ -75559,13 +75498,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         {
           label: field.label,
           value: data[field.key] ? new Date(data[field.key]) : null,
-          onChange: (date) => {
-            const newData = { ...data, [field.key]: date ? date.toISOString().split("T")[0] : "" };
-            setData(newData);
-            if (updateHandler) {
-              updateHandler(section.key, newData);
-            }
-          },
+          onChange: (date) => handleFieldChange(field.key, date ? date.toISOString().split("T")[0] : ""),
           placeholder: field.placeholder || "Select date",
           disabled: field.disabled ? field.disabled : false,
           error: validationErrors[section.key]?.[field.key],
@@ -75577,13 +75510,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
         {
           label: field.label,
           value: data[field.key] || { from: null, to: null },
-          onChange: (dateRange) => {
-            const newData = { ...data, [field.key]: dateRange };
-            setData(newData);
-            if (updateHandler) {
-              updateHandler(section.key, newData);
-            }
-          },
+          onChange: (dateRange) => handleFieldChange(field.key, dateRange),
           placeholder: field.placeholder || "Select date range",
           disabled: field.disabled ? field.disabled : false,
           error: validationErrors[section.key]?.[field.key],
@@ -75641,13 +75568,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
           SearchBar,
           {
             value: data[field.key] || "",
-            onChange: (value) => {
-              const newData = { ...data, [field.key]: value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (value) => handleFieldChange(field.key, value),
             placeholder: field.placeholder || `Search ${field.label}`,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
@@ -75663,13 +75584,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Select date and time",
             value: data[field.key] || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
@@ -75685,13 +75600,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             defaultValue: field.default,
             placeholder: field.placeholder || "Select time",
             value: data[field.key] || "",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             required: field.required,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
@@ -75706,13 +75615,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             defaultValue: field.default || "#000000",
             value: data[field.key] || "#000000",
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             className: `w-full h-10 ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
           }
         ),
@@ -75726,13 +75629,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             defaultValue: field.default || field.min || 0,
             value: data[field.key] || field.min || 0,
-            onChange: (e) => {
-              const newData = { ...data, [field.key]: e.target.value };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onChange: (e) => handleFieldChange(field.key, e.target.value),
             min: field.min || 0,
             max: field.max || 100,
             step: field.step || 1,
@@ -75757,11 +75654,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             name: field.key,
             onChange: (e) => {
               const file = e.target.files[0];
-              const newData = { ...data, [field.key]: file ? file.name : "" };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
+              handleFieldChange(field.key, file ? file.name : "");
             },
             accept: field.accept,
             className: `w-full ${validationErrors[section.key]?.[field.key] ? "border-red-500" : ""}`
@@ -75776,13 +75669,7 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
             endpoints: field.endpoints || {},
             initialData: data[field.key] || field.initialData || [],
             className: field.className || "",
-            onCollectionChange: (newCollections) => {
-              const newData = { ...data, [field.key]: newCollections };
-              setData(newData);
-              if (updateHandler) {
-                updateHandler(section.key, newData);
-              }
-            },
+            onCollectionChange: (newCollections) => handleFieldChange(field.key, newCollections),
             showSearch: field.showSearch !== false,
             allowAdd: field.allowAdd !== false,
             allowEdit: field.allowEdit !== false,
@@ -75806,6 +75693,9 @@ function SectionRenderer({ item, data: initialData, updateHandler, validationErr
     ] }, idx)) })
   ] }) });
 }
+const SectionRenderer$1 = React__default.memo(SectionRenderer, (prevProps, nextProps) => {
+  return prevProps.item === nextProps.item && prevProps.data === nextProps.data && prevProps.updateHandler === nextProps.updateHandler && JSON.stringify(prevProps.validationErrors) === JSON.stringify(nextProps.validationErrors);
+});
 
 const AvatarGroup = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children });
 function DataTableRenderer({ item, data: initialData, updateHandler, validationErrors = {} }) {
@@ -75813,6 +75703,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
   const [section, setSection] = useState(item);
   const [audienceRowId, setAudienceRowId] = useState(null);
   const [audienceFieldName, setAudienceFieldName] = useState(null);
+  const isStructuralChangeRef = useRef(false);
   const [data, setData] = useState(() => {
     const existingData = initialData && initialData[section.key] || [];
     return existingData.length > 0 ? existingData : [{ id: 0 }];
@@ -75820,32 +75711,35 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
   useEffect(() => {
     const existingData = initialData && initialData[section.key] || [];
     const newData = existingData.length > 0 ? existingData : [{ id: 0 }];
-    console.log(`[DataTableRenderer] ${section.key} - Data update:`, {
-      existingData,
-      newData,
-      initialData
+    setData((prevData) => {
+      if (JSON.stringify(prevData) !== JSON.stringify(newData)) {
+        return newData;
+      }
+      return prevData;
     });
-    setData(newData);
   }, [initialData, section.key]);
+  const debounce = React__default.useCallback((func, delay) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => func.apply(null, args), delay);
+    };
+  }, []);
   const debouncedUpdate = React__default.useCallback(
-    _.debounce((newData) => {
+    debounce((newData) => {
       if (updateHandler && typeof updateHandler === "function") {
         updateHandler(section.key, newData);
       }
     }, 300),
-    [section.key, updateHandler]
+    [section.key, updateHandler, debounce]
   );
   useEffect(() => {
-    debouncedUpdate(data);
-    return () => debouncedUpdate.cancel();
+    if (!isStructuralChangeRef.current) {
+      debouncedUpdate(data);
+    } else {
+      isStructuralChangeRef.current = false;
+    }
   }, [data, debouncedUpdate]);
-  useEffect(() => {
-    return () => {
-      if (updateTimeoutRef.current) {
-        clearTimeout(updateTimeoutRef.current);
-      }
-    };
-  }, []);
   const updateFieldValue = React__default.useCallback((field, rowIndex, value) => {
     setData((prevData) => {
       const newData = [...prevData];
@@ -75853,14 +75747,14 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
       return newData;
     });
   }, []);
+  const getFieldError = React__default.useCallback((field, rowIndex) => {
+    return validationErrors[section.key]?.[rowIndex]?.[field.key];
+  }, [validationErrors, section.key]);
+  const renderError = React__default.useCallback((field, rowIndex) => {
+    const error = getFieldError(field, rowIndex);
+    return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
+  }, [getFieldError]);
   const getFieldRenderer = React__default.useCallback((field) => {
-    const getFieldError = React__default.useCallback((rowIndex) => {
-      return validationErrors[section.key]?.[rowIndex]?.[field.key];
-    }, [validationErrors, section.key, field.key]);
-    const renderError = React__default.useCallback((rowIndex) => {
-      const error = getFieldError(rowIndex);
-      return error ? /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error }) : null;
-    }, [getFieldError]);
     switch (field.fieldtype) {
       case "text":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75871,10 +75765,10 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
       case "textarea":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75885,11 +75779,11 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`,
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`,
               rows: 3
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
       case "number":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75901,10 +75795,10 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
       case "email":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75916,10 +75810,10 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || "Enter email address",
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
       case "url":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75931,10 +75825,10 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || "Enter URL",
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
       case "password":
         return (props, rowIndex) => /* @__PURE__ */ jsxs("div", { children: [
@@ -75946,48 +75840,44 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || "Enter password",
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
       case "select":
-      case "dropdown": {
-        const options = React__default.useMemo(() => {
+      case "dropdown":
+        return (props, rowIndex) => {
+          let options = [];
           if (field.optionsFrom && initialData) {
             const { config, valueField, labelField } = field.optionsFrom;
             const configData = initialData[config] || [];
             if (Array.isArray(configData)) {
-              return configData.map((item2) => ({
+              options = configData.map((item2) => ({
+                id: item2[valueField] || "",
+                // Add id for backward compatibility
                 value: item2[valueField] || "",
                 label: item2[labelField] || ""
               }));
             }
+          } else {
+            options = field.options || [];
           }
-          return field.options || [];
-        }, [field.optionsFrom, initialData?.[field.optionsFrom?.config], field.options]);
-        const SelectField = React__default.memo(({ props, rowIndex }) => {
-          const handleChange = React__default.useCallback((value) => {
-            updateFieldValue(field, rowIndex, value);
-          }, [rowIndex]);
-          const error = getFieldError(rowIndex);
           return /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx(
               Select,
               {
                 value: props[field.key] || "",
-                onChange: handleChange,
+                onChange: (value) => updateFieldValue(field, rowIndex, value),
                 options,
                 placeholder: field.placeholder || `Select ${field.label}`,
                 required: field.required,
-                className: `w-full ${error ? "border-red-500" : ""}`
+                className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
               }
             ),
-            error && /* @__PURE__ */ jsx("div", { className: "text-red-500 text-xs mt-1", children: error })
+            renderError(field, rowIndex)
           ] });
-        });
-        return (props, rowIndex) => /* @__PURE__ */ jsx(SelectField, { props, rowIndex });
-      }
+        };
       case "multiselect":
         return (props, rowIndex) => {
           const currentValue = props[field.key] || [];
@@ -76167,17 +76057,16 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
               onChange: (e) => updateFieldValue(field, rowIndex, e.target.value),
               placeholder: field.placeholder || `Enter ${field.label}`,
               required: field.required,
-              className: `w-full ${getFieldError(rowIndex) ? "border-red-500" : ""}`
+              className: `w-full ${getFieldError(field, rowIndex) ? "border-red-500" : ""}`
             }
           ),
-          renderError(rowIndex)
+          renderError(field, rowIndex)
         ] });
     }
   }, [updateFieldValue, validationErrors, section.key, initialData]);
   const addBlankRow = useCallback(() => {
-    console.log("[DataTableRenderer] Adding blank row");
+    isStructuralChangeRef.current = true;
     setData((prevData) => {
-      console.log("[DataTableRenderer] Current data before add:", prevData);
       const blankRow = {
         id: prevData.length
         // Assign next available ID
@@ -76189,22 +76078,31 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           blankRow[field.key] = "";
         }
       });
-      console.log("[DataTableRenderer] New blank row:", blankRow);
       const newData = [...prevData, blankRow];
-      console.log("[DataTableRenderer] Updated data:", newData);
+      setTimeout(() => {
+        if (updateHandler && typeof updateHandler === "function") {
+          updateHandler(section.key, newData);
+        }
+      }, 0);
       return newData;
     });
-  }, [section.fields]);
+  }, [section.fields, updateHandler, section.key]);
   const removeRow = useCallback((index) => {
+    isStructuralChangeRef.current = true;
     setData((prevData) => {
       if (prevData.length <= 1) {
         return prevData;
       }
       const newData = [...prevData];
       newData.splice(index, 1);
+      setTimeout(() => {
+        if (updateHandler && typeof updateHandler === "function") {
+          updateHandler(section.key, newData);
+        }
+      }, 0);
       return newData;
     });
-  }, []);
+  }, [updateHandler, section.key]);
   const [draggedIndex, setDraggedIndex] = useState(null);
   const handleDragStart = useCallback((e, index) => {
     setDraggedIndex(index);
@@ -76231,7 +76129,6 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
     setDraggedIndex(null);
   }, []);
   const handleAddAudience = useCallback((selectedEntities) => {
-    console.log("[DataTableRenderer] handleAddAudience called with:", selectedEntities);
     setData((prevData) => {
       const newData = [...prevData];
       if (audienceRowId !== null && audienceFieldName && newData[audienceRowId]) {
@@ -76244,7 +76141,6 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           groups: [...newData[audienceRowId][audienceFieldName]?.groups || [], ...groups],
           roles: [...newData[audienceRowId][audienceFieldName]?.roles || [], ...roles]
         };
-        console.log("[DataTableRenderer] Updated audience data:", newData[audienceRowId][audienceFieldName]);
       }
       return newData;
     });
@@ -76290,7 +76186,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
           onDragEnd: handleDragEnd,
           children: [
             /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx("div", { className: "cursor-move text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx(GripVertical, { size: 16 }) }) }),
-            section.fields.map((field, fieldIndex) => /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: getFieldRenderer(field)(row, rowIndex) }, fieldIndex)),
+            section.fields.map((field, fieldIndex) => /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: getFieldRenderer(field)(row, rowIndex) }, `field-${rowIndex}-${fieldIndex}-${field.key}`)),
             /* @__PURE__ */ jsx("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ jsx(
               "button",
               {
@@ -76302,7 +76198,7 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
             ) })
           ]
         },
-        rowIndex
+        `row-${rowIndex}-${row.id || "empty"}`
       )) })
     ] }) }),
     audienceRowId !== null && (() => {
@@ -76311,9 +76207,6 @@ function DataTableRenderer({ item, data: initialData, updateHandler, validationE
         groups: data[audienceRowId][audienceFieldName].groups || [],
         roles: data[audienceRowId][audienceFieldName].roles || []
       } : { users: [], groups: [], roles: [] };
-      console.log("[DataTableRenderer] Opening modal with existing data:", existingAudienceData);
-      console.log("[DataTableRenderer] Row data:", data[audienceRowId]);
-      console.log("[DataTableRenderer] Field name:", audienceFieldName);
       return /* @__PURE__ */ jsx(
         AddUserGroupsRolesModal,
         {
@@ -76769,7 +76662,7 @@ const UnknownType = ({ item }) => /* @__PURE__ */ jsxs("div", { className: "p-3
   /* @__PURE__ */ jsx("span", { className: "font-mono", children: String(item?.type ?? "N/A") })
 ] });
 const REGISTRY = /* @__PURE__ */ Object.create(null);
-REGISTRY.section = SectionRenderer;
+REGISTRY.section = SectionRenderer$1;
 REGISTRY.datatable = DataTableRenderer$1;
 REGISTRY.managecollectionlist = ManageCollectionListRenderer;
 REGISTRY["manage-collection-list"] = ManageCollectionListRenderer;
@@ -76939,16 +76832,10 @@ function DynamicConfig({
       }
     }
   }, [configdata, reload, appid, disableApi]);
-  const handleSectionChange = (name, sectiondata) => {
-    console.log("Section change:", { name, sectiondata });
+  const handleSectionChange = React__default.useCallback((name, sectiondata) => {
     setData((prev) => {
       const newData = JSON.parse(JSON.stringify(prev || {}));
       newData[name] = sectiondata;
-      console.log("Complete data after update:", {
-        updatedSection: name,
-        sectionData: sectiondata,
-        allData: newData
-      });
       return newData;
     });
     setValidationErrors((prevErrors) => {
@@ -76958,7 +76845,7 @@ function DynamicConfig({
       }
       return newErrors;
     });
-  };
+  }, []);
   const validateRequiredFields = () => {
     const errors = {};
     if (!config || !data) {