unifyedx-storybook-new 0.1.4 → 0.1.6

package/dist/unifyedx-storybook-new.css

@@ -1407,6 +1407,7 @@
   padding: 1rem;
   font-family: sans-serif;
   border-top: 1px solid #e5e7eb;
+  margin-right: 50px;
 }
 
 .pagination-left,
@@ -3459,6 +3460,54 @@
 .loader-spin {
   animation: spin 1s linear infinite;
 }
+
+.page-layout {
+  position: relative;
+  width: 100%;
+  padding: 1.25rem; /* py-5 */
+  z-index: 0;
+  box-sizing: border-box;
+}
+
+/* Modifier to add space for the fixed footer */
+
+.page-layout--with-footer {
+  padding-bottom: 80px; /* Space for the footer height */
+}
+
+/* Modifier to make the layout fill the viewport height */
+
+.page-layout--full-height {
+  height: calc(100vh - 52px); /* Example height, adjust as needed */
+  overflow-y: auto;
+}
+
+.page-layout-content {
+  /* This ensures content flows naturally */
+  width: 100%;
+}
+
+/* The fixed footer bar */
+
+.page-layout-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 30;
+  background-color: white;
+  padding: 0.75rem 1.75rem; /* p-3 pr-7 */
+  /* This is the custom shadow from your original component */
+  box-shadow: 2px -10px 14px -7px rgba(56, 56, 56, 0.25);
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.75rem; /* flex gap-3 */
+  margin-right: 50px;
+}
 .avatar-container {
   display: inline-flex;
   align-items: center;
@@ -5294,6 +5343,7 @@
   padding: 1rem;
   font-family: sans-serif;
   border-top: 1px solid #e5e7eb;
+  margin-right: 50px;
 }
 
 .pagination-left,
@@ -6571,3 +6621,47 @@
   white-space: nowrap;
   border-width: 0;
 }
+.page-layout {
+  position: relative;
+  width: 100%;
+  padding: 1.25rem; /* py-5 */
+  z-index: 0;
+  box-sizing: border-box;
+}
+
+/* Modifier to add space for the fixed footer */
+.page-layout--with-footer {
+  padding-bottom: 80px; /* Space for the footer height */
+}
+
+/* Modifier to make the layout fill the viewport height */
+.page-layout--full-height {
+  height: calc(100vh - 52px); /* Example height, adjust as needed */
+  overflow-y: auto;
+}
+
+.page-layout-content {
+  /* This ensures content flows naturally */
+  width: 100%;
+}
+
+/* The fixed footer bar */
+.page-layout-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 30;
+  background-color: white;
+  padding: 0.75rem 1.75rem; /* p-3 pr-7 */
+  /* This is the custom shadow from your original component */
+  box-shadow: 2px -10px 14px -7px rgba(56, 56, 56, 0.25);
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.75rem; /* flex gap-3 */
+  margin-right: 50px;
+}

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

@@ -954,7 +954,7 @@ function requireClassnames () {
 }
 
 var classnamesExports = requireClassnames();
-const y$1 = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+const classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 // Helper function to generate a random pastel color
 const generatePastelColor = () => {
@@ -984,7 +984,7 @@ const Avatar = ({
   const showImage = src && !hasError;
   const showInitials = !showImage && name;
   const showIcon = !showImage && !name;
-  const avatarClasses = y$1(
+  const avatarClasses = classNames(
     "avatar-container",
     `avatar--size-${size}`,
     className
@@ -1035,7 +1035,7 @@ const Badge = ({
   className,
   ...props
 }) => {
-  const badgeClasses = y$1(
+  const badgeClasses = classNames(
     "badge",
     `badge--variant-${variant}`,
     `badge--size-${size}`,
@@ -2315,7 +2315,7 @@ const UnifyedCoreButton = ({
 }) => {
   const isButtonDisabled = disabled || loader;
   const isIconOnly = Icon && !label;
-  const combinedClasses = y$1(
+  const combinedClasses = classNames(
     "btn-base",
     sizeClasses[size],
     categoryClasses[category],
@@ -2404,7 +2404,7 @@ const Checkbox = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: y$1("checkbox-box", {
+          className: classNames("checkbox-box", {
             "checkbox-box--checked": checked,
             "checkbox-box--error": !!error
           }),
@@ -9739,7 +9739,7 @@ const DatePicker = ({
     e.preventDefault();
     onClear?.();
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: y$1("datepicker-wrapper", className), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classNames("datepicker-wrapper", className), children: [
     label && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "datepicker-label", htmlFor: "datepicker-input", children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "datepicker-input-container", children: [
@@ -9748,7 +9748,7 @@ const DatePicker = ({
           {
             id: "datepicker-input",
             type: "button",
-            className: y$1("datepicker-trigger", {
+            className: classNames("datepicker-trigger", {
               "datepicker-trigger--error": !!error,
               "datepicker-trigger--disabled": disabled
             }),
@@ -9809,7 +9809,7 @@ const DateRangePicker$1 = ({
     " - ",
     format$1(to, "MMM d, y")
   ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "datepicker-placeholder", children: placeholder });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: y$1("datepicker-wrapper", className), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classNames("datepicker-wrapper", className), children: [
     label && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "datepicker-label", htmlFor: "daterangepicker-input", children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "datepicker-input-container", children: [
@@ -9818,7 +9818,7 @@ const DateRangePicker$1 = ({
           {
             id: "daterangepicker-input",
             type: "button",
-            className: y$1("datepicker-trigger", {
+            className: classNames("datepicker-trigger", {
               "datepicker-trigger--error": !!error,
               "datepicker-trigger--disabled": disabled
             }),
@@ -40008,7 +40008,7 @@ const Input = ({
           id: inputId,
           type,
           ref,
-          className: y$1("input-field", {
+          className: classNames("input-field", {
             "input-field--error": !!error,
             "input-field--with-icon": !!Icon
           }),
@@ -40242,7 +40242,7 @@ const RadioGroup = ({
           RadioGroup$1.Option,
           {
             value: option.value,
-            className: ({ active, checked }) => y$1("radiogroup-option", {
+            className: ({ active, checked }) => classNames("radiogroup-option", {
               "radiogroup-option--active": active,
               "radiogroup-option--checked": checked,
               "radiogroup-option--error": !!error
@@ -40294,7 +40294,7 @@ const Select = ({
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ListboxButton,
         {
-          className: y$1("select-button", {
+          className: classNames("select-button", {
             "select-button--error": !!error
           }),
           children: [
@@ -40411,7 +40411,7 @@ const NavItem = ({ item, isCollapsed, level = 0 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: y$1("nav-item-container", {
+      className: classNames("nav-item-container", {
         "nav-item-container--parent-active": isParentActive,
         [`nav-item-container--level-${level}`]: level > 0
       }),
@@ -40422,7 +40422,7 @@ const NavItem = ({ item, isCollapsed, level = 0 }) => {
             href: itemPath,
             target: item.target,
             rel: item.target === "_blank" ? "noopener noreferrer" : void 0,
-            className: y$1("nav-item", {
+            className: classNames("nav-item", {
               "nav-item--active": isActive,
               "nav-item--collapsed": isCollapsed
             }),
@@ -40440,7 +40440,7 @@ const NavItem = ({ item, isCollapsed, level = 0 }) => {
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     ChevronDown,
                     {
-                      className: y$1("nav-chevron", {
+                      className: classNames("nav-chevron", {
                         "nav-chevron--open": isSubMenuOpen
                       })
                     }
@@ -40453,7 +40453,7 @@ const NavItem = ({ item, isCollapsed, level = 0 }) => {
         item.children && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: y$1("sub-menu", {
+            className: classNames("sub-menu", {
               "sub-menu--open": isSubMenuOpen,
               "sub-menu--collapsed": isCollapsed
             }),
@@ -40495,7 +40495,7 @@ const Sidebar = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "aside",
       {
-        className: y$1("sidebar", {
+        className: classNames("sidebar", {
           "sidebar--collapsed": isCollapsed,
           "sidebar--mobile-open": isMobileOpen
         }),
@@ -40556,7 +40556,7 @@ const Spinner = ({
   className,
   ...props
 }) => {
-  const spinnerClasses = y$1(
+  const spinnerClasses = classNames(
     "spinner",
     `spinner--size-${size}`,
     `spinner--color-${color}`,
@@ -40625,7 +40625,7 @@ const Textarea = ({
       {
         id: textareaId,
         ref,
-        className: y$1("textarea-field", {
+        className: classNames("textarea-field", {
           "textarea-field--error": !!error
         }),
         maxLength,
@@ -40653,7 +40653,7 @@ const ToggleSwitch = ({
         {
           checked,
           onChange,
-          className: y$1("switch-element", {
+          className: classNames("switch-element", {
             // Renamed from switch-wrapper
             "switch-element--error": !!error
           }),
@@ -42267,7 +42267,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),_=(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=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={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},$=createContext({getTooltipData:()=>N});function z(e=x){return useContext($).getTooltipData(e)}var B={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(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=_(De,50),Ve=_(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(ee),i=L(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.createElement(g,{id:l,role:ie,className:y$1("react-tooltip",B.tooltip,D.tooltip,D[u],i,`react-tooltip__place-${ve.place}`,B[Ye?"show":"closing"],Ye?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B.fixed,$&&B.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.createElement(g,{className:y$1("react-tooltip-arrow",B.arrow,D.arrow,c,N&&B.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.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),M=React.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(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.createElement("div",{ref:Ie,className:"react-tooltip-content-wrapper"},t):null;}else ee&&($e=ee);oe&&($e=React.createElement(H,{content:oe}));const ze={forwardRef:Q,id:t,anchorId:l,anchorSelect:n,className:y$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.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),_=(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=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={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},$=createContext({getTooltipData:()=>N});function z(e=x){return useContext($).getTooltipData(e)}var B={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(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=_(De,50),Ve=_(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(ee),i=L(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.createElement(g,{id:l,role:ie,className:classNames("react-tooltip",B.tooltip,D.tooltip,D[u],i,`react-tooltip__place-${ve.place}`,B[Ye?"show":"closing"],Ye?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&B.fixed,$&&B.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.createElement(g,{className:classNames("react-tooltip-arrow",B.arrow,D.arrow,c,N&&B.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.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),M=React.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(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.createElement("div",{ref:Ie,className:"react-tooltip-content-wrapper"},t):null;}else ee&&($e=ee);oe&&($e=React.createElement(H,{content:oe}));const ze={forwardRef:Q,id:t,anchorId:l,anchorSelect:n,className:classNames(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.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 = ({
@@ -43082,6 +43082,107 @@ function requireDebounce () {
 	return debounce_1;
 }
 
-requireDebounce();
+var debounceExports = requireDebounce();
+const debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
 
-export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, Pagination, RadioGroup, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, WizardModal };
+const SearchBar = ({
+  value = "",
+  onDebouncedChange,
+  debounceDelay = 400,
+  placeholder = "Enter text...",
+  label = "Search",
+  // Added a default label for accessibility
+  customClass = "",
+  ...inputProps
+}) => {
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  const debouncedHandler = useCallback(
+    debounce((nextValue) => {
+      onDebouncedChange?.(nextValue);
+    }, debounceDelay),
+    [debounceDelay, onDebouncedChange]
+  );
+  useEffect(() => {
+    if (inputValue !== value) {
+      debouncedHandler(inputValue);
+    }
+    return () => {
+      debouncedHandler.cancel();
+    };
+  }, [inputValue, debouncedHandler, value]);
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `search-bar-wrapper ${customClass}`, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "search-field", className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "search-bar-icon-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { size: 20, className: "search-bar-icon", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        id: "search-field",
+        className: "search-bar-input",
+        placeholder,
+        type: "search",
+        name: "search",
+        value: inputValue,
+        onChange: handleChange,
+        ...inputProps
+      }
+    )
+  ] });
+};
+
+const PageLayout = ({
+  content,
+  isFooter = false,
+  footerContent,
+  save,
+  cancel,
+  tertiary,
+  fullHeight = false,
+  // A clearer prop name
+  ...props
+}) => {
+  const wrapperClasses = classNames(
+    "page-layout",
+    {
+      "page-layout--with-footer": isFooter,
+      "page-layout--full-height": fullHeight
+    },
+    props.className
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: wrapperClasses, ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "page-layout-content", children: content }),
+    isFooter && /* @__PURE__ */ jsxRuntimeExports.jsx("footer", { className: "page-layout-footer", children: footerContent ? footerContent : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "footer-actions", children: [
+      tertiary?.show && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        UnifyedCoreButton,
+        {
+          category: "secondary",
+          label: tertiary.label || "Tertiary",
+          ...tertiary
+        }
+      ),
+      cancel?.show && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        UnifyedCoreButton,
+        {
+          category: "secondary",
+          label: cancel.label || "Cancel",
+          ...cancel
+        }
+      ),
+      save?.show && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        UnifyedCoreButton,
+        {
+          category: "primary",
+          label: save.label || "Save",
+          ...save
+        }
+      )
+    ] }) })
+  ] });
+};
+
+export { Avatar, AvatarGroup, Badge, Breadcrumbs, Button$1 as Button, Checkbox, DatePicker, DateRangePicker$1 as DateRangePicker, FileUploadModal, FullScreenLoader, GenericFilter, Input, Modal, PageLayout, Pagination, RadioGroup, SearchBar, Select, Sidebar, Spinner, Textarea, ToggleSwitch, Tooltip, UnifyedCoreButton, WizardModal };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unifyedx-storybook-new",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/unifyedx-storybook-new.es.js",
   "module": "dist/unifyedx-storybook-new.es.js",