ui-beyable 1.0.23 → 1.0.24-beta.0

package/lib/cjs/components/Section/Section.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ISection } from './types';
-declare function Section({ children, width }: ISection): JSX.Element;
+declare function Section({ children, width, backgroundColor }: ISection): JSX.Element;
 export { Section };

package/lib/cjs/components/Section/types.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface ISection {
     children: React.ReactNode;
-    width?: string;
+    width?: 's' | 'm' | 'l' | 'full';
+    backgroundColor: 'grey' | 'white';
 }
 export { ISection };

package/lib/cjs/index.js

@@ -119,6 +119,11 @@ function Article(_a) {
         React.createElement("div", { className: innerStyles.join(' ') }, children)));
 }
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -297,7 +302,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain positioning strategy.
+ * next to a given reference element.
  *
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
@@ -455,7 +460,7 @@ async function detectOverflow(state, options) {
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow = options => ({
+const arrow$1 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
@@ -538,7 +543,7 @@ const arrow = options => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip = function (options) {
+const flip$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -649,6 +654,7 @@ const flip = function (options) {
 
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
+
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -705,15 +711,27 @@ const offset = function (options) {
     name: 'offset',
     options,
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
       const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
-        data: diffCoords
+        data: {
+          ...diffCoords,
+          placement
+        }
       };
     }
   };
@@ -724,7 +742,7 @@ const offset = function (options) {
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = function (options) {
+const shift$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -804,7 +822,7 @@ function getNodeName(node) {
 }
 function getWindow(node) {
   var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 function getDocumentElement(node) {
   var _ref;
@@ -1243,7 +1261,14 @@ function getClippingRect(_ref) {
 }
 
 function getDimensions(element) {
-  return getCssDimensions(element);
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
 }
 
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
@@ -1489,10 +1514,31 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = arrow$1;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain CSS positioning
- * strategy.
+ * next to a given reference element.
  */
 const computePosition = (reference, floating, options) => {
   // This caches the expensive `getClippingElementAncestors` function so that
@@ -1532,39 +1578,57 @@ var classnames = {exports: {}};
 
 		var hasOwn = {}.hasOwnProperty;
 
-		function classNames() {
-			var classes = [];
+		function classNames () {
+			var classes = '';
 
 			for (var i = 0; i < arguments.length; i++) {
 				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
 				}
 			}
 
-			return classes.join(' ');
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
+				}
+			}
+
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
 		}
 
 		if (module.exports) {
@@ -1585,7 +1649,7 @@ var y = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 * @copyright ReactTooltip Team
 * @license MIT
 */
-const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,base:!1};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:c}=l;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);const i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const g=(e,t,o)=>{let l=null;return function(...r){const n=()=>{l=null,o||e.apply(this,r);};o&&!l&&(e.apply(this,r),l=setTimeout(n,t)),o||(l&&clearTimeout(l),l=setTimeout(n,t));}},_="DEFAULT_TOOLTIP_ID",A={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},O=React.createContext({getTooltipData:()=>A});function k(e=_){return React.useContext(O).getTooltipData(e)}const C="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,R=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},x=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(R(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},N=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:r=10,strategy:n="absolute",middlewares:c=[offset(Number(r)),flip(),shift({padding:5})],border:i})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=c;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:l,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=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",u=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...u,[d]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))};var $={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"},j={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 I=({forwardRef:t,id:r,className:n,classNameArrow:s,variant:d="dark",anchorId:u,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:E,delayShow:_=0,delayHide:A=0,float:O=!1,hidden:T=!1,noArrow:L=!1,clickable:R=!1,closeOnEsc:I=!1,closeOnScroll:B=!1,closeOnResize:z=!1,openEvents:D,closeEvents:q,globalCloseEvents:H,imperativeModeOnly:M,style:W,position:P,afterShow:F,afterHide:K,content:U,contentWrapperRef:X,isOpen:Y,setIsOpen:G,activeAnchor:V,setActiveAnchor:Z,border:J,opacity:Q,arrowColor:ee})=>{var te;const oe=React.useRef(null),le=React.useRef(null),re=React.useRef(null),ne=React.useRef(null),[ce,ie]=React.useState(v),[se,ae]=React.useState({}),[de,ue]=React.useState({}),[pe,ve]=React.useState(!1),[me,fe]=React.useState(!1),[ye,he]=React.useState(null),we=React.useRef(!1),be=React.useRef(null),{anchorRefs:Se,setActiveAnchor:Ee}=k(r),ge=React.useRef(!1),[_e,Ae]=React.useState([]),Oe=React.useRef(!1),Te=w||h.includes("click"),ke=Te||(null==D?void 0:D.click)||(null==D?void 0:D.dblclick)||(null==D?void 0:D.mousedown),Le=D?{...D}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!D&&Te&&Object.assign(Le,{mouseenter:!1,focus:!1,click:!0});const Ce=q?{...q}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!q&&Te&&Object.assign(Ce,{mouseleave:!1,blur:!1});const Re=H?{...H}:{escape:I||!1,scroll:B||!1,resize:z||!1,clickOutsideAnchor:ke||!1};M&&(Object.assign(Le,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Ce,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Re,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),C((()=>(Oe.current=!0,()=>{Oe.current=!1;})),[]);const xe=e=>{Oe.current&&(e&&fe(!0),setTimeout((()=>{Oe.current&&(null==G||G(e),void 0===Y&&ve(e));}),10));};React.useEffect((()=>{if(void 0===Y)return ()=>null;Y&&fe(!0);const e=setTimeout((()=>{ve(Y);}),10);return ()=>{clearTimeout(e);}}),[Y]),React.useEffect((()=>{pe!==we.current&&(we.current=pe,pe&&(null==F||F()));}),[pe]);const Ne=(e=_)=>{re.current&&clearTimeout(re.current),re.current=setTimeout((()=>{xe(!0);}),e);},$e=(e=A)=>{ne.current&&clearTimeout(ne.current),ne.current=setTimeout((()=>{ge.current||xe(!1);}),e);},je=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 Z(null),void Ee({current:null});_?Ne():xe(!0),Z(o),Ee({current:o}),ne.current&&clearTimeout(ne.current);},Ie=()=>{R?$e(A||100):A?$e():xe(!1),re.current&&clearTimeout(re.current);},Be=({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})};N({place:null!==(o=null==ye?void 0:ye.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:oe.current,tooltipArrowReference:le.current,strategy:b,middlewares:S,border:J}).then((e=>{Object.keys(e.tooltipStyles).length&&ae(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&ue(e.tooltipArrowStyles),ie(e.place);}));},ze=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};Be(o),be.current=o;},De=e=>{var t;if(!pe)return;const o=e.target;if(null===(t=oe.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${u}']`),..._e].some((e=>null==e?void 0:e.contains(o)))||(xe(!1),re.current&&clearTimeout(re.current));},qe=g(je,50,!0),He=g(Ie,50,!0),Me=React.useCallback((()=>{var e,t;const o=null!==(e=null==ye?void 0:ye.position)&&void 0!==e?e:P;o?Be(o):O?be.current&&Be(be.current):(null==V?void 0:V.isConnected)&&N({place:null!==(t=null==ye?void 0:ye.place)&&void 0!==t?t:v,offset:m,elementReference:V,tooltipReference:oe.current,tooltipArrowReference:le.current,strategy:b,middlewares:S,border:J}).then((e=>{Oe.current&&(Object.keys(e.tooltipStyles).length&&ae(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&ue(e.tooltipArrowStyles),ie(e.place));}));}),[pe,V,U,W,v,null==ye?void 0:ye.place,m,b,P,null==ye?void 0:ye.position,O]);React.useEffect((()=>{var e,t;const o=new Set(Se);_e.forEach((e=>{o.add({current:e});}));const l=document.querySelector(`[id='${u}']`);l&&o.add({current:l});const r=()=>{xe(!1);},n=x(V),c=x(oe.current);Re.scroll&&(window.addEventListener("scroll",r),null==n||n.addEventListener("scroll",r),null==c||c.addEventListener("scroll",r));let i=null;Re.resize?window.addEventListener("resize",r):V&&oe.current&&(i=autoUpdate(V,oe.current,Me,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&xe(!1);};Re.escape&&window.addEventListener("keydown",s),Re.clickOutsideAnchor&&window.addEventListener("click",De);const a=[],d=e=>{pe||je(e);},p=()=>{pe&&Ie();},v=["mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(Le).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:qe}):m.includes(e)&&a.push({event:e,listener:d}));})),Object.entries(Ce).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:He}):m.includes(e)&&a.push({event:e,listener:p}));})),O&&a.push({event:"mousemove",listener:ze});const y=()=>{ge.current=!0;},h=()=>{ge.current=!1,Ie();};return R&&!ke&&(null===(e=oe.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=oe.current)||void 0===t||t.addEventListener("mouseleave",h)),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;Re.scroll&&(window.removeEventListener("scroll",r),null==n||n.removeEventListener("scroll",r),null==c||c.removeEventListener("scroll",r)),Re.resize?window.removeEventListener("resize",r):null==i||i(),Re.clickOutsideAnchor&&window.removeEventListener("click",De),Re.escape&&window.removeEventListener("keydown",s),R&&!ke&&(null===(e=oe.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=oe.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t);}));}));}}),[V,Me,me,Se,_e,D,q,H,Te]),React.useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&r&&(o=`[data-tooltip-id='${r}']`);const l=new MutationObserver((e=>{const t=[],l=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===r&&t.push(e.target);}if("childList"===e.type){if(V){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{l.push(...t.filter((e=>e.matches(o)))),l.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,V))&&(fe(!1),xe(!1),Z(null),re.current&&clearTimeout(re.current),ne.current&&clearTimeout(ne.current),!0)}));}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||l.length)&&Ae((e=>[...e.filter((e=>!l.includes(e))),...t]));}));return l.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>{l.disconnect();}}),[r,p,null==ye?void 0:ye.anchorSelect,V]),React.useEffect((()=>{Me();}),[Me]),React.useEffect((()=>{if(!(null==X?void 0:X.current))return ()=>null;const e=new ResizeObserver((()=>{Me();}));return e.observe(X.current),()=>{e.disconnect();}}),[U,null==X?void 0:X.current]),React.useEffect((()=>{var e;const t=document.querySelector(`[id='${u}']`),o=[..._e,t];V&&o.includes(V)||Z(null!==(e=_e[0])&&void 0!==e?e:t);}),[u,_e,V]),React.useEffect((()=>()=>{re.current&&clearTimeout(re.current),ne.current&&clearTimeout(ne.current);}),[]),React.useEffect((()=>{var e;let t=null!==(e=null==ye?void 0:ye.anchorSelect)&&void 0!==e?e:p;if(!t&&r&&(t=`[data-tooltip-id='${r}']`),t)try{const e=Array.from(document.querySelectorAll(t));Ae(e);}catch(e){Ae([]);}}),[r,p,null==ye?void 0:ye.anchorSelect]);const We=null!==(te=null==ye?void 0:ye.content)&&void 0!==te?te:U,Pe=pe&&Object.keys(se).length>0;return React.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`)}he(null!=e?e:null),(null==e?void 0:e.delay)?Ne(e.delay):xe(!0);},close:e=>{(null==e?void 0:e.delay)?$e(e.delay):xe(!1);},activeAnchor:V,place:ce,isOpen:Boolean(me&&!T&&We&&Pe)}))),me&&!T&&We?React.createElement(E,{id:r,role:"tooltip",className:y("react-tooltip",$.tooltip,j.tooltip,j[d],n,`react-tooltip__place-${ce}`,$[Pe?"show":"closing"],Pe?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&$.fixed,R&&$.clickable),onTransitionEnd:e=>{pe||"opacity"!==e.propertyName||(fe(!1),he(null),null==K||K());},style:{...W,...se,opacity:void 0!==Q&&Pe?Q:void 0},ref:oe},We,React.createElement(E,{className:y("react-tooltip-arrow",$.arrow,j.arrow,s,L&&$.noArrow),style:{...de,background:ee?`linear-gradient(to right bottom, transparent 50%, ${ee} 50%)`:void 0},ref:le})):null},B=({content:t})=>React.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),z=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),D=React.forwardRef((({id:t,anchorId:l,anchorSelect:r,content:n,html:s,render:a,className:d,classNameArrow:u,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:y=null,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,delayShow:E=0,delayHide:g=0,float:_=!1,hidden:A=!1,noArrow:O=!1,clickable:T=!1,closeOnEsc:L=!1,closeOnScroll:C=!1,closeOnResize:R=!1,openEvents:x,closeEvents:N,globalCloseEvents:$,imperativeModeOnly:j=!1,style:D,position:q,isOpen:H,disableStyleInjection:M=!1,border:W,opacity:P,arrowColor:F,setIsOpen:K,afterShow:U,afterHide:X},Y)=>{const[G,V]=React.useState(n),[Z,J]=React.useState(s),[Q,ee]=React.useState(v),[te,oe]=React.useState(p),[le,re]=React.useState(m),[ne,ce]=React.useState(E),[ie,se]=React.useState(g),[ae,de]=React.useState(_),[ue,pe]=React.useState(A),[ve,me]=React.useState(f),[fe,ye]=React.useState(h),[he,we]=React.useState(b),[be,Se]=React.useState(null),Ee=React.useRef(M),{anchorRefs:ge,activeAnchor:_e}=k(t),Ae=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}),{}),Oe=e=>{const t={place:e=>{var t;ee(null!==(t=e)&&void 0!==t?t:v);},content:e=>{V(null!=e?e:n);},html:e=>{J(null!=e?e:s);},variant:e=>{var t;oe(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{re(null===e?m:Number(e));},wrapper:e=>{var t;me(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");ye(null!=t?t:h);},"position-strategy":e=>{var t;we(null!==(t=e)&&void 0!==t?t:b);},"delay-show":e=>{ce(null===e?E:Number(e));},"delay-hide":e=>{se(null===e?g:Number(e));},float:e=>{de(null===e?_:"true"===e);},hidden:e=>{pe(null===e?A:"true"===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);}));};React.useEffect((()=>{V(n);}),[n]),React.useEffect((()=>{J(s);}),[s]),React.useEffect((()=>{ee(v);}),[v]),React.useEffect((()=>{oe(p);}),[p]),React.useEffect((()=>{re(m);}),[m]),React.useEffect((()=>{ce(E);}),[E]),React.useEffect((()=>{se(g);}),[g]),React.useEffect((()=>{de(_);}),[_]),React.useEffect((()=>{pe(A);}),[A]),React.useEffect((()=>{we(b);}),[b]),React.useEffect((()=>{Ee.current!==M&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[M]),React.useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===M,disableBase:M}}));}),[]),React.useEffect((()=>{var e;const o=new Set(ge);let n=r;if(!n&&t&&(n=`[data-tooltip-id='${t}']`),n)try{document.querySelectorAll(n).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${n}" is not a valid CSS selector`);}const c=document.querySelector(`[id='${l}']`);if(c&&o.add({current:c}),!o.size)return ()=>null;const i=null!==(e=null!=be?be:c)&&void 0!==e?e:_e.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Ae(i);Oe(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Ae(i);Oe(e),s.observe(i,a);}return ()=>{s.disconnect();}}),[ge,_e,be,l,r]),React.useEffect((()=>{(null==D?void 0:D.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),W&&!z("border",`${W}`)&&console.warn(`[react-tooltip] "${W}" is not a valid \`border\`.`),(null==D?void 0:D.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),P&&!z("opacity",`${P}`)&&console.warn(`[react-tooltip] "${P}" is not a valid \`opacity\`.`);}),[]);let Te=y;const ke=React.useRef(null);if(a){const t=a({content:null!=G?G:null,activeAnchor:be});Te=t?React.createElement("div",{ref:ke,className:"react-tooltip-content-wrapper"},t):null;}else G&&(Te=G);Z&&(Te=React.createElement(B,{content:Z}));const Le={forwardRef:Y,id:t,anchorId:l,anchorSelect:r,className:d,classNameArrow:u,content:Te,contentWrapperRef:ke,place:Q,variant:te,offset:le,wrapper:ve,events:fe,openOnClick:w,positionStrategy:he,middlewares:S,delayShow:ne,delayHide:ie,float:ae,hidden:ue,noArrow:O,clickable:T,closeOnEsc:L,closeOnScroll:C,closeOnResize:R,openEvents:x,closeEvents:N,globalCloseEvents:$,imperativeModeOnly:j,style:D,position:q,isOpen:H,border:W,opacity:P,arrowColor:F,setIsOpen:K,afterShow:U,afterHide:X,activeAnchor:be,setActiveAnchor:e=>Se(e)};return React.createElement(I,{...Le})}));"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}.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}.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:!1,base:!1};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:c}=l;if(document.getElementById(t))return void console.warn(`[react-tooltip] Element with id '${t}' already exists. Call \`removeStyle()\` first`);const i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===c&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const g=(e,t,o)=>{let l=null;const r=function(...r){const n=()=>{l=null,o||e.apply(this,r);};o&&!l&&(e.apply(this,r),l=setTimeout(n,t)),o||(l&&clearTimeout(l),l=setTimeout(n,t));};return r.cancel=()=>{l&&(clearTimeout(l),l=null);},r},_="DEFAULT_TOOLTIP_ID",A={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},O=React.createContext({getTooltipData:()=>A});function k(e=_){return React.useContext(O).getTooltipData(e)}const C="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,R=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},x=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(R(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},N=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:r=10,strategy:n="absolute",middlewares:c=[offset(Number(r)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:i})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=c;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:l,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const c={left:`${e}px`,top:`${t}px`,border:i},{x:s,y:a}=null!==(r=l.arrow)&&void 0!==r?r:{x:0,y:0},u=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",d=i&&{borderBottom:i,borderRight:i};let p=0;if(i){const e=`${i}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:c,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))};var $={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"},I={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 j=({forwardRef:t,id:r,className:n,classNameArrow:s,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:E,delayShow:_=0,delayHide:A=0,float:O=!1,hidden:T=!1,noArrow:L=!1,clickable:R=!1,closeOnEsc:j=!1,closeOnScroll:B=!1,closeOnResize:z=!1,openEvents:D,closeEvents:q,globalCloseEvents:H,imperativeModeOnly:M,style:W,position:P,afterShow:V,afterHide:F,content:K,contentWrapperRef:U,isOpen:X,defaultIsOpen:Y=!1,setIsOpen:G,activeAnchor:Z,setActiveAnchor:J,border:Q,opacity:ee,arrowColor:te,role:oe="tooltip"})=>{var le;const re=React.useRef(null),ne=React.useRef(null),ce=React.useRef(null),ie=React.useRef(null),se=React.useRef(null),[ae,ue]=React.useState(v),[de,pe]=React.useState({}),[ve,me]=React.useState({}),[fe,ye]=React.useState(!1),[he,we]=React.useState(!1),[be,Se]=React.useState(null),Ee=React.useRef(!1),ge=React.useRef(null),{anchorRefs:_e,setActiveAnchor:Ae}=k(r),Oe=React.useRef(!1),[Te,ke]=React.useState([]),Le=React.useRef(!1),Ce=w||h.includes("click"),Re=Ce||(null==D?void 0:D.click)||(null==D?void 0:D.dblclick)||(null==D?void 0:D.mousedown),xe=D?{...D}:{mouseenter:!0,focus:!0,click:!1,dblclick:!1,mousedown:!1};!D&&Ce&&Object.assign(xe,{mouseenter:!1,focus:!1,click:!0});const Ne=q?{...q}:{mouseleave:!0,blur:!0,click:!1,dblclick:!1,mouseup:!1};!q&&Ce&&Object.assign(Ne,{mouseleave:!1,blur:!1});const $e=H?{...H}:{escape:j||!1,scroll:B||!1,resize:z||!1,clickOutsideAnchor:Re||!1};M&&(Object.assign(xe,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(Ne,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign($e,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),C((()=>(Le.current=!0,()=>{Le.current=!1;})),[]);const Ie=e=>{Le.current&&(e&&we(!0),setTimeout((()=>{Le.current&&(null==G||G(e),void 0===X&&ye(e));}),10));};React.useEffect((()=>{if(void 0===X)return ()=>null;X&&we(!0);const e=setTimeout((()=>{ye(X);}),10);return ()=>{clearTimeout(e);}}),[X]),React.useEffect((()=>{if(fe!==Ee.current)if(se.current&&clearTimeout(se.current),Ee.current=fe,fe)null==V||V();else {const e=(e=>{const t=e.match(/^([\d.]+)(m?s?)$/);if(!t)return 0;const[,o,l]=t;return "s"!==l&&"ms"!==l?0:Number(o)*("ms"===l?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));se.current=setTimeout((()=>{we(!1),Se(null),null==F||F();}),e+25);}}),[fe]);const je=(e=_)=>{ce.current&&clearTimeout(ce.current),ce.current=setTimeout((()=>{Ie(!0);}),e);},Be=(e=A)=>{ie.current&&clearTimeout(ie.current),ie.current=setTimeout((()=>{Oe.current||Ie(!1);}),e);},ze=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 J(null),void Ae({current:null});_?je():Ie(!0),J(o),Ae({current:o}),ie.current&&clearTimeout(ie.current);},De=()=>{R?Be(A||100):A?Be():Ie(!1),ce.current&&clearTimeout(ce.current);},qe=({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})};N({place:null!==(o=null==be?void 0:be.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:re.current,tooltipArrowReference:ne.current,strategy:b,middlewares:S,border:Q}).then((e=>{Object.keys(e.tooltipStyles).length&&pe(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&me(e.tooltipArrowStyles),ue(e.place);}));},He=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};qe(o),ge.current=o;},Me=e=>{var t;if(!fe)return;const o=e.target;if(null===(t=re.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...Te].some((e=>null==e?void 0:e.contains(o)))||(Ie(!1),ce.current&&clearTimeout(ce.current));},We=g(ze,50,!0),Pe=g(De,50,!0),Ve=e=>{Pe.cancel(),We(e);},Fe=()=>{We.cancel(),Pe();},Ke=React.useCallback((()=>{var e,t;const o=null!==(e=null==be?void 0:be.position)&&void 0!==e?e:P;o?qe(o):O?ge.current&&qe(ge.current):(null==Z?void 0:Z.isConnected)&&N({place:null!==(t=null==be?void 0:be.place)&&void 0!==t?t:v,offset:m,elementReference:Z,tooltipReference:re.current,tooltipArrowReference:ne.current,strategy:b,middlewares:S,border:Q}).then((e=>{Le.current&&(Object.keys(e.tooltipStyles).length&&pe(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&me(e.tooltipArrowStyles),ue(e.place));}));}),[fe,Z,K,W,v,null==be?void 0:be.place,m,b,P,null==be?void 0:be.position,O]);React.useEffect((()=>{var e,t;const o=new Set(_e);Te.forEach((e=>{o.add({current:e});}));const l=document.querySelector(`[id='${d}']`);l&&o.add({current:l});const r=()=>{Ie(!1);},n=x(Z),c=x(re.current);$e.scroll&&(window.addEventListener("scroll",r),null==n||n.addEventListener("scroll",r),null==c||c.addEventListener("scroll",r));let i=null;$e.resize?window.addEventListener("resize",r):Z&&re.current&&(i=autoUpdate(Z,re.current,Ke,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&Ie(!1);};$e.escape&&window.addEventListener("keydown",s),$e.clickOutsideAnchor&&window.addEventListener("click",Me);const a=[],u=e=>{fe&&(null==e?void 0:e.target)===Z||ze(e);},p=e=>{fe&&(null==e?void 0:e.target)===Z&&De();},v=["mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(xe).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Ve}):m.includes(e)&&a.push({event:e,listener:u}));})),Object.entries(Ne).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Fe}):m.includes(e)&&a.push({event:e,listener:p}));})),O&&a.push({event:"pointermove",listener:He});const y=()=>{Oe.current=!0;},h=()=>{Oe.current=!1,De();};return R&&!Re&&(null===(e=re.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=re.current)||void 0===t||t.addEventListener("mouseleave",h)),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==c||c.removeEventListener("scroll",r)),$e.resize?window.removeEventListener("resize",r):null==i||i(),$e.clickOutsideAnchor&&window.removeEventListener("click",Me),$e.escape&&window.removeEventListener("keydown",s),R&&!Re&&(null===(e=re.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=re.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t);}));}));}}),[Z,Ke,he,_e,Te,D,q,H,Ce]),React.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&&r&&(o=`[data-tooltip-id='${r}']`);const l=new MutationObserver((e=>{const t=[],l=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===r?t.push(e.target):e.oldValue===r&&l.push(e.target);}if("childList"===e.type){if(Z){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{l.push(...t.filter((e=>e.matches(o)))),l.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,Z))&&(we(!1),Ie(!1),J(null),ce.current&&clearTimeout(ce.current),ie.current&&clearTimeout(ie.current),!0)}));}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||l.length)&&ke((e=>[...e.filter((e=>!l.includes(e))),...t]));}));return l.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"],attributeOldValue:!0}),()=>{l.disconnect();}}),[r,p,null==be?void 0:be.anchorSelect,Z]),React.useEffect((()=>{Ke();}),[Ke]),React.useEffect((()=>{if(!(null==U?void 0:U.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ke()));}));return e.observe(U.current),()=>{e.disconnect();}}),[K,null==U?void 0:U.current]),React.useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...Te,t];Z&&o.includes(Z)||J(null!==(e=Te[0])&&void 0!==e?e:t);}),[d,Te,Z]),React.useEffect((()=>(Y&&Ie(!0),()=>{ce.current&&clearTimeout(ce.current),ie.current&&clearTimeout(ie.current);})),[]),React.useEffect((()=>{var e;let t=null!==(e=null==be?void 0:be.anchorSelect)&&void 0!==e?e:p;if(!t&&r&&(t=`[data-tooltip-id='${r}']`),t)try{const e=Array.from(document.querySelectorAll(t));ke(e);}catch(e){ke([]);}}),[r,p,null==be?void 0:be.anchorSelect]);const Ue=null!==(le=null==be?void 0:be.content)&&void 0!==le?le:K,Xe=fe&&Object.keys(de).length>0;return React.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(!0);},close:e=>{(null==e?void 0:e.delay)?Be(e.delay):Ie(!1);},activeAnchor:Z,place:ae,isOpen:Boolean(he&&!T&&Ue&&Xe)}))),he&&!T&&Ue?React.createElement(E,{id:r,role:oe,className:y("react-tooltip",$.tooltip,I.tooltip,I[u],n,`react-tooltip__place-${ae}`,$[Xe?"show":"closing"],Xe?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&$.fixed,R&&$.clickable),onTransitionEnd:e=>{se.current&&clearTimeout(se.current),fe||"opacity"!==e.propertyName||(we(!1),Se(null),null==F||F());},style:{...W,...de,opacity:void 0!==ee&&Xe?ee:void 0},ref:re},Ue,React.createElement(E,{className:y("react-tooltip-arrow",$.arrow,I.arrow,s,L&&$.noArrow),style:{...ve,background:te?`linear-gradient(to right bottom, transparent 50%, ${te} 50%)`:void 0},ref:ne})):null},B=({content:t})=>React.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),z=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),D=React.forwardRef((({id:t,anchorId:l,anchorSelect:r,content:n,html:s,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=!1,positionStrategy:S="absolute",middlewares:E,delayShow:g=0,delayHide:_=0,float:A=!1,hidden:O=!1,noArrow:T=!1,clickable:L=!1,closeOnEsc:C=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:D=!1,style:q,position:H,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,role:G="tooltip"},Z)=>{const[J,Q]=React.useState(n),[ee,te]=React.useState(s),[oe,le]=React.useState(v),[re,ne]=React.useState(p),[ce,ie]=React.useState(m),[se,ae]=React.useState(g),[ue,de]=React.useState(_),[pe,ve]=React.useState(A),[me,fe]=React.useState(O),[ye,he]=React.useState(f),[we,be]=React.useState(w),[Se,Ee]=React.useState(S),[ge,_e]=React.useState(null),[Ae,Oe]=React.useState(null),Te=React.useRef(P),{anchorRefs:ke,activeAnchor:Le}=k(t),Ce=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}),{}),Re=e=>{const t={place:e=>{var t;le(null!==(t=e)&&void 0!==t?t:v);},content:e=>{Q(null!=e?e:n);},html:e=>{te(null!=e?e:s);},variant:e=>{var t;ne(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{ie(null===e?m:Number(e));},wrapper:e=>{var t;he(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");be(null!=t?t:w);},"position-strategy":e=>{var t;Ee(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{ae(null===e?g:Number(e));},"delay-hide":e=>{de(null===e?_:Number(e));},float:e=>{ve(null===e?A:"true"===e);},hidden:e=>{fe(null===e?O:"true"===e);},"class-name":e=>{_e(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);}));};React.useEffect((()=>{Q(n);}),[n]),React.useEffect((()=>{te(s);}),[s]),React.useEffect((()=>{le(v);}),[v]),React.useEffect((()=>{ne(p);}),[p]),React.useEffect((()=>{ie(m);}),[m]),React.useEffect((()=>{ae(g);}),[g]),React.useEffect((()=>{de(_);}),[_]),React.useEffect((()=>{ve(A);}),[A]),React.useEffect((()=>{fe(O);}),[O]),React.useEffect((()=>{Ee(S);}),[S]),React.useEffect((()=>{Te.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),React.useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),React.useEffect((()=>{var e;const o=new Set(ke);let n=r;if(!n&&t&&(n=`[data-tooltip-id='${t}']`),n)try{document.querySelectorAll(n).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${n}" is not a valid CSS selector`);}const c=document.querySelector(`[id='${l}']`);if(c&&o.add({current:c}),!o.size)return ()=>null;const i=null!==(e=null!=Ae?Ae:c)&&void 0!==e?e:Le.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!i||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Ce(i);Re(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(i){const e=Ce(i);Re(e),s.observe(i,a);}return ()=>{s.disconnect();}}),[ke,Le,Ae,l,r]),React.useEffect((()=>{(null==q?void 0:q.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!z("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==q?void 0:q.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!z("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let xe=h;const Ne=React.useRef(null);if(a){const t=a({content:null!=J?J:null,activeAnchor:Ae});xe=t?React.createElement("div",{ref:Ne,className:"react-tooltip-content-wrapper"},t):null;}else J&&(xe=J);ee&&(xe=React.createElement(B,{content:ee}));const $e={forwardRef:Z,id:t,anchorId:l,anchorSelect:r,className:y(u,ge),classNameArrow:d,content:xe,contentWrapperRef:Ne,place:oe,variant:re,offset:ce,wrapper:ye,events:we,openOnClick:b,positionStrategy:Se,middlewares:E,delayShow:se,delayHide:ue,float:pe,hidden:me,noArrow:T,clickable:L,closeOnEsc:C,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:D,style:q,position:H,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,activeAnchor:Ae,setActiveAnchor:e=>Oe(e),role:G};return React.createElement(j,{...$e})}));"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}.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}.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:8px;height:8px}[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"});}));
 
 function Tooltip(_a) {
@@ -3264,12 +3328,13 @@ function Picto(_a) {
         React.createElement("i", { className: icon + ' fa-fw' })));
 }
 
-var css_248z$2 = ".section-module_outer__DvzIc{padding-block:40px;padding-inline:40px}.section-module_inner__neFCT{margin:0 auto}.section-module_inner_width_s__RGBtS{max-width:580px}.section-module_inner_width_m__ZpM9L{max-width:1000px}.section-module_inner_width_l__9iWZ0{max-width:1400px}.section-module_inner_width_full__wHKTe{max-width:0}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY3Rpb24ubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw2QkFFSSxrQkFBbUIsQ0FEbkIsbUJBRUosQ0FDQSw2QkFDSSxhQUNKLENBQ0EscUNBQ0ksZUFDSixDQUNBLHFDQUNJLGdCQUNKLENBQ0EscUNBQ0ksZ0JBQ0osQ0FDQSx3Q0FDSSxXQUNKIiwiZmlsZSI6InNlY3Rpb24ubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5vdXRlciB7XHJcbiAgICBwYWRkaW5nLWlubGluZTogNDBweDtcclxuICAgIHBhZGRpbmctYmxvY2s6IDQwcHg7XHJcbn1cclxuLmlubmVyIHtcclxuICAgIG1hcmdpbjogMCBhdXRvO1xyXG59XHJcbi5pbm5lcl93aWR0aF9zIHtcclxuICAgIG1heC13aWR0aDogNTgwcHg7XHJcbn1cclxuLmlubmVyX3dpZHRoX20ge1xyXG4gICAgbWF4LXdpZHRoOiAxMDAwcHg7XHJcbn1cclxuLmlubmVyX3dpZHRoX2wge1xyXG4gICAgbWF4LXdpZHRoOiAxNDAwcHg7XHJcbn1cclxuLmlubmVyX3dpZHRoX2Z1bGwge1xyXG4gICAgbWF4LXdpZHRoOiAwO1xyXG59Il19 */";
-var styles = {"outer":"section-module_outer__DvzIc","inner":"section-module_inner__neFCT","inner_width_s":"section-module_inner_width_s__RGBtS","inner_width_m":"section-module_inner_width_m__ZpM9L","inner_width_l":"section-module_inner_width_l__9iWZ0","inner_width_full":"section-module_inner_width_full__wHKTe","innerWidthS":"section-module_inner_width_s__RGBtS","innerWidthM":"section-module_inner_width_m__ZpM9L","innerWidthL":"section-module_inner_width_l__9iWZ0","innerWidthFull":"section-module_inner_width_full__wHKTe"};
+var css_248z$2 = ".section-module_outer__DvzIc{padding-block:40px;padding-inline:40px}.section-module_outer_grey__Q-2pJ{background-color:var(--main-bg-color)}.section-module_inner__neFCT{margin:0 auto}.section-module_inner_width_s__RGBtS{max-width:580px}.section-module_inner_width_m__ZpM9L{max-width:1000px}.section-module_inner_width_l__9iWZ0{max-width:1400px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlY3Rpb24ubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw2QkFFSSxrQkFBbUIsQ0FEbkIsbUJBRUosQ0FDQSxrQ0FDSSxxQ0FDSixDQUVBLDZCQUNJLGFBQ0osQ0FDQSxxQ0FDSSxlQUNKLENBQ0EscUNBQ0ksZ0JBQ0osQ0FDQSxxQ0FDSSxnQkFDSiIsImZpbGUiOiJzZWN0aW9uLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIub3V0ZXIge1xyXG4gICAgcGFkZGluZy1pbmxpbmU6IDQwcHg7XHJcbiAgICBwYWRkaW5nLWJsb2NrOiA0MHB4O1xyXG59XHJcbi5vdXRlcl9ncmV5IHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLW1haW4tYmctY29sb3IpO1xyXG59XHJcblxyXG4uaW5uZXIge1xyXG4gICAgbWFyZ2luOiAwIGF1dG87XHJcbn1cclxuLmlubmVyX3dpZHRoX3Mge1xyXG4gICAgbWF4LXdpZHRoOiA1ODBweDtcclxufVxyXG4uaW5uZXJfd2lkdGhfbSB7XHJcbiAgICBtYXgtd2lkdGg6IDEwMDBweDtcclxufVxyXG4uaW5uZXJfd2lkdGhfbCB7XHJcbiAgICBtYXgtd2lkdGg6IDE0MDBweDtcclxufVxyXG4uaW5uZXJfd2lkdGhfZnVsbCB7XHJcbiAgICBcclxufSJdfQ== */";
+var styles = {"outer":"section-module_outer__DvzIc","outer_grey":"section-module_outer_grey__Q-2pJ","inner":"section-module_inner__neFCT","inner_width_s":"section-module_inner_width_s__RGBtS","inner_width_m":"section-module_inner_width_m__ZpM9L","inner_width_l":"section-module_inner_width_l__9iWZ0","inner_width_full":"section-module_inner_width_full__wHKTe","outerGrey":"section-module_outer_grey__Q-2pJ","innerWidthS":"section-module_inner_width_s__RGBtS","innerWidthM":"section-module_inner_width_m__ZpM9L","innerWidthL":"section-module_inner_width_l__9iWZ0","innerWidthFull":"section-module_inner_width_full__wHKTe"};
 styleInject(css_248z$2);
 
 function Section(_a) {
-    var children = _a.children, _b = _a.width, width = _b === void 0 ? 'l' : _b;
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? 'l' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'white' : _c;
+    var outerClass = [styles.outer];
     var innerClass = [styles.inner];
     var widthClass = {
         full: styles.inner_width_full,
@@ -3280,7 +3345,10 @@ function Section(_a) {
     if (width && width in widthClass) {
         innerClass.push(widthClass[width]);
     }
-    return (React.createElement("section", { className: styles.outer },
+    if (backgroundColor == 'grey') {
+        outerClass.push(styles.outer_grey);
+    }
+    return (React.createElement("section", { className: outerClass.join(' ') },
         React.createElement("div", { className: innerClass.join(' ') }, children)));
 }