@khanacademy/wonder-blocks-tooltip 4.1.11 → 4.1.13

package/dist/index.js

@@ -2,19 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var aphrodite = require('aphrodite');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
-var _extends = require('@babel/runtime/helpers/extends');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var reactPopper = require('react-popper');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -35,873 +33,26 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 
-class ActiveTracker {
-  constructor() {
-    this._subscribers = [];
-    this._active = false;
-  }
-  _getIndex(who) {
-    return this._subscribers.findIndex(v => v === who);
-  }
-  steal(who) {
-    const wasActive = !!this._active;
-    this._active = true;
-    for (const anchor of this._subscribers) {
-      if (anchor === who) {
-        continue;
-      }
-      anchor.activeStateStolen();
-    }
-    return wasActive;
-  }
-  giveup() {
-    this._active = false;
-  }
-  subscribe(who) {
-    if (this._getIndex(who) >= 0) {
-      throw new Error("Already subscribed.");
-    }
-    this._subscribers.push(who);
-    const unsubscribe = () => {
-      const index = this._getIndex(who);
-      this._subscribers.splice(index, 1);
-    };
-    return unsubscribe;
-  }
-}
+class ActiveTracker{_getIndex(who){return this._subscribers.findIndex(v=>v===who)}steal(who){const wasActive=!!this._active;this._active=true;for(const anchor of this._subscribers){if(anchor===who){continue}anchor.activeStateStolen();}return wasActive}giveup(){this._active=false;}subscribe(who){if(this._getIndex(who)>=0){throw new Error("Already subscribed.")}this._subscribers.push(who);const unsubscribe=()=>{const index=this._getIndex(who);this._subscribers.splice(index,1);};return unsubscribe}constructor(){this._subscribers=[];this._active=false;}}
 
-const TooltipAppearanceDelay = 100;
-const TooltipDisappearanceDelay = 75;
+const TooltipAppearanceDelay=100;const TooltipDisappearanceDelay=75;
 
-const TRACKER = new ActiveTracker();
-class TooltipAnchor extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this._weSetFocusivity = void 0;
-    this._anchorNode = void 0;
-    this._focused = void 0;
-    this._hovered = void 0;
-    this._stolenFromUs = void 0;
-    this._unsubscribeFromTracker = void 0;
-    this._timeoutID = void 0;
-    this.activeStateStolen = () => {
-      this._stolenFromUs = this.state.active || !!this._timeoutID;
-      this._focused = false;
-      this._setActiveState(false, true);
-    };
-    this._handleFocusIn = () => {
-      this._updateActiveState(this._hovered, true);
-    };
-    this._handleFocusOut = () => {
-      this._updateActiveState(this._hovered, false);
-    };
-    this._handleMouseEnter = () => {
-      this._updateActiveState(true, this._focused);
-    };
-    this._handleMouseLeave = () => {
-      this._updateActiveState(false, this._focused);
-    };
-    this._handleKeyUp = e => {
-      if (e.key === "Escape" && this.state.active) {
-        e.preventDefault();
-        e.stopPropagation();
-        this._updateActiveState(false, false);
-      }
-    };
-    this._focused = false;
-    this._hovered = false;
-    this.state = {
-      active: false
-    };
-  }
-  componentDidMount() {
-    const anchorNode = ReactDOM__namespace.findDOMNode(this);
-    if (anchorNode instanceof Text) {
-      throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.");
-    }
-    this._unsubscribeFromTracker = TRACKER.subscribe(this);
-    this._anchorNode = anchorNode;
-    this._updateFocusivity();
-    if (anchorNode) {
-      anchorNode.addEventListener("focusin", this._handleFocusIn);
-      anchorNode.addEventListener("focusout", this._handleFocusOut);
-      anchorNode.addEventListener("mouseenter", this._handleMouseEnter);
-      anchorNode.addEventListener("mouseleave", this._handleMouseLeave);
-      this.props.anchorRef(this._anchorNode);
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.forceAnchorFocusivity !== this.props.forceAnchorFocusivity || prevProps.children !== this.props.children) {
-      this._updateFocusivity();
-    }
-  }
-  componentWillUnmount() {
-    if (this._unsubscribeFromTracker) {
-      this._unsubscribeFromTracker();
-    }
-    this._clearPendingAction();
-    const anchorNode = this._anchorNode;
-    if (anchorNode) {
-      anchorNode.removeEventListener("focusin", this._handleFocusIn);
-      anchorNode.removeEventListener("focusout", this._handleFocusOut);
-      anchorNode.removeEventListener("mouseenter", this._handleMouseEnter);
-      anchorNode.removeEventListener("mouseleave", this._handleMouseLeave);
-    }
-    if (this.state.active) {
-      document.removeEventListener("keyup", this._handleKeyUp);
-    }
-  }
-  _updateFocusivity() {
-    const anchorNode = this._anchorNode;
-    if (!anchorNode) {
-      return;
-    }
-    const {
-      forceAnchorFocusivity
-    } = this.props;
-    const currentTabIndex = anchorNode.getAttribute("tabindex");
-    if (forceAnchorFocusivity && !currentTabIndex) {
-      anchorNode.setAttribute("tabindex", "0");
-      this._weSetFocusivity = true;
-    } else if (!forceAnchorFocusivity && currentTabIndex) {
-      if (this._weSetFocusivity) {
-        anchorNode.removeAttribute("tabindex");
-        this._weSetFocusivity = false;
-      }
-    }
-  }
-  _updateActiveState(hovered, focused) {
-    this._hovered = hovered;
-    this._focused = focused;
-    this._setActiveState(hovered || focused);
-  }
-  _clearPendingAction() {
-    if (this._timeoutID) {
-      clearTimeout(this._timeoutID);
-      this._timeoutID = null;
-    }
-  }
-  _setActiveState(active, instant) {
-    if (this._stolenFromUs || active !== this.state.active || !this.state.active && this._timeoutID) {
-      this._clearPendingAction();
-    } else if (active === this.state.active) {
-      if (this._timeoutID) {
-        this._clearPendingAction();
-      }
-      return;
-    }
-    instant = instant || active && TRACKER.steal(this);
-    if (instant) {
-      if (active) {
-        document.addEventListener("keyup", this._handleKeyUp);
-      } else {
-        document.removeEventListener("keyup", this._handleKeyUp);
-      }
-      this.setState({
-        active
-      });
-      this.props.onActiveChanged(active);
-      if (!this._stolenFromUs && !active) {
-        TRACKER.giveup();
-      }
-      this._stolenFromUs = false;
-    } else {
-      const delay = active ? TooltipAppearanceDelay : TooltipDisappearanceDelay;
-      this._timeoutID = setTimeout(() => {
-        this._timeoutID = null;
-        this._setActiveState(active, true);
-      }, delay);
-    }
-  }
-  _renderAnchorableChildren() {
-    const {
-      children
-    } = this.props;
-    return typeof children === "string" ? React__namespace.createElement(wonderBlocksCore.Text, null, children) : children;
-  }
-  _renderAccessibleChildren(uniqueId) {
-    const anchorableChildren = this._renderAnchorableChildren();
-    return React__namespace.cloneElement(anchorableChildren, {
-      "aria-describedby": `${uniqueId}-${TooltipAnchor.ariaContentId}`
-    });
-  }
-  render() {
-    if (this.props.id) {
-      return this._renderAccessibleChildren(this.props.id);
-    }
-    return this._renderAnchorableChildren();
-  }
-}
-TooltipAnchor.defaultProps = {
-  forceAnchorFocusivity: true
-};
-TooltipAnchor.ariaContentId = "aria-content";
+const TRACKER=new ActiveTracker;class TooltipAnchor extends React__namespace.Component{componentDidMount(){const anchorNode=ReactDOM__namespace.findDOMNode(this);if(anchorNode instanceof Text){throw new Error("TooltipAnchor must be applied to an Element. Text content is not supported.")}this._unsubscribeFromTracker=TRACKER.subscribe(this);this._anchorNode=anchorNode;this._updateFocusivity();if(anchorNode){anchorNode.addEventListener("focusin",this._handleFocusIn);anchorNode.addEventListener("focusout",this._handleFocusOut);anchorNode.addEventListener("mouseenter",this._handleMouseEnter);anchorNode.addEventListener("mouseleave",this._handleMouseLeave);this.props.anchorRef(this._anchorNode);}}componentDidUpdate(prevProps){if(prevProps.forceAnchorFocusivity!==this.props.forceAnchorFocusivity||prevProps.children!==this.props.children){this._updateFocusivity();}}componentWillUnmount(){if(this._unsubscribeFromTracker){this._unsubscribeFromTracker();}this._clearPendingAction();const anchorNode=this._anchorNode;if(anchorNode){anchorNode.removeEventListener("focusin",this._handleFocusIn);anchorNode.removeEventListener("focusout",this._handleFocusOut);anchorNode.removeEventListener("mouseenter",this._handleMouseEnter);anchorNode.removeEventListener("mouseleave",this._handleMouseLeave);}if(this.state.active){document.removeEventListener("keyup",this._handleKeyUp);}}_updateFocusivity(){const anchorNode=this._anchorNode;if(!anchorNode){return}const{forceAnchorFocusivity}=this.props;const currentTabIndex=anchorNode.getAttribute("tabindex");if(forceAnchorFocusivity&&!currentTabIndex){anchorNode.setAttribute("tabindex","0");this._weSetFocusivity=true;}else if(!forceAnchorFocusivity&&currentTabIndex){if(this._weSetFocusivity){anchorNode.removeAttribute("tabindex");this._weSetFocusivity=false;}}}_updateActiveState(hovered,focused){this._hovered=hovered;this._focused=focused;this._setActiveState(hovered||focused);}_clearPendingAction(){if(this._timeoutID){clearTimeout(this._timeoutID);this._timeoutID=null;}}_setActiveState(active,instant){if(this._stolenFromUs||active!==this.state.active||!this.state.active&&this._timeoutID){this._clearPendingAction();}else if(active===this.state.active){if(this._timeoutID){this._clearPendingAction();}return}instant=instant||active&&TRACKER.steal(this);if(instant){if(active){document.addEventListener("keyup",this._handleKeyUp);}else {document.removeEventListener("keyup",this._handleKeyUp);}this.setState({active});this.props.onActiveChanged(active);if(!this._stolenFromUs&&!active){TRACKER.giveup();}this._stolenFromUs=false;}else {const delay=active?TooltipAppearanceDelay:TooltipDisappearanceDelay;this._timeoutID=setTimeout(()=>{this._timeoutID=null;this._setActiveState(active,true);},delay);}}_renderAnchorableChildren(){const{children}=this.props;return typeof children==="string"?jsxRuntime.jsx(wonderBlocksCore.Text,{children:children}):children}render(){const{"aria-describedby":ariaDescribedBy}=this.props;const anchorableChildren=this._renderAnchorableChildren();return React__namespace.cloneElement(anchorableChildren,{"aria-describedby":ariaDescribedBy})}constructor(props){super(props),this.activeStateStolen=()=>{this._stolenFromUs=this.state.active||!!this._timeoutID;this._focused=false;this._setActiveState(false,true);},this._handleFocusIn=()=>{this._updateActiveState(this._hovered,true);},this._handleFocusOut=()=>{this._updateActiveState(this._hovered,false);},this._handleMouseEnter=()=>{this._updateActiveState(true,this._focused);},this._handleMouseLeave=()=>{this._updateActiveState(false,this._focused);},this._handleKeyUp=e=>{if(e.key==="Escape"&&this.state.active){e.preventDefault();e.stopPropagation();this._updateActiveState(false,false);}};this._focused=false;this._hovered=false;this.state={active:false};}}TooltipAnchor.defaultProps={forceAnchorFocusivity:true};
 
-let tempIdCounter = 0;
-class TooltipTail extends React__namespace.Component {
-  _calculateDimensionsFromPlacement() {
-    const {
-      placement
-    } = this.props;
-    const trimlineOffset = 0.5;
-    switch (placement) {
-      case "top":
-        return {
-          trimlinePoints: [`0,-${trimlineOffset}`, `${ARROW_WIDTH},-${trimlineOffset}`],
-          points: ["0,0", `${ARROW_WIDTH / 2},${ARROW_HEIGHT}`, `${ARROW_WIDTH},0`],
-          height: ARROW_HEIGHT,
-          width: ARROW_WIDTH
-        };
-      case "right":
-        return {
-          trimlinePoints: [`${ARROW_HEIGHT + trimlineOffset},0`, `${ARROW_HEIGHT + trimlineOffset},${ARROW_WIDTH}`],
-          points: [`${ARROW_HEIGHT},0`, `0,${ARROW_WIDTH / 2}`, `${ARROW_HEIGHT},${ARROW_WIDTH}`],
-          width: ARROW_HEIGHT,
-          height: ARROW_WIDTH
-        };
-      case "bottom":
-        return {
-          trimlinePoints: [`0, ${ARROW_HEIGHT + trimlineOffset}`, `${ARROW_WIDTH},${ARROW_HEIGHT + trimlineOffset}`],
-          points: [`0, ${ARROW_HEIGHT}`, `${ARROW_WIDTH / 2},0`, `${ARROW_WIDTH},${ARROW_HEIGHT}`],
-          width: ARROW_WIDTH,
-          height: ARROW_HEIGHT
-        };
-      case "left":
-        return {
-          trimlinePoints: [`-${trimlineOffset},0`, `-${trimlineOffset},${ARROW_WIDTH}`],
-          points: [`0,0`, `${ARROW_HEIGHT},${ARROW_WIDTH / 2}`, `0,${ARROW_WIDTH}`],
-          width: ARROW_HEIGHT,
-          height: ARROW_WIDTH
-        };
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-  _getFilterPositioning() {
-    const {
-      placement
-    } = this.props;
-    switch (placement) {
-      case "top":
-        return {
-          y: "-50%",
-          x: "-50%",
-          offsetShadowX: 0
-        };
-      case "bottom":
-        return null;
-      case "left":
-        return {
-          y: "-50%",
-          x: "0%",
-          offsetShadowX: 1
-        };
-      case "right":
-        return {
-          y: "-50%",
-          x: "-100%",
-          offsetShadowX: -1
-        };
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-  _maybeRenderDropshadow(points) {
-    const position = this._getFilterPositioning();
-    if (!position) {
-      return null;
-    }
-    const {
-      placement
-    } = this.props;
-    const {
-      y,
-      x,
-      offsetShadowX
-    } = position;
-    const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
-    return [React__namespace.createElement("filter", {
-      key: "filter",
-      id: dropShadowFilterId,
-      width: "200%",
-      height: "200%",
-      x: x,
-      y: y
-    }, React__namespace.createElement("feGaussianBlur", {
-      in: "SourceAlpha",
-      stdDeviation: wonderBlocksTokens.spacing.xxSmall_6 / 2
-    }), React__namespace.createElement("feComponentTransfer", null, React__namespace.createElement("feFuncA", {
-      type: "linear",
-      slope: "0.3"
-    }))), React__namespace.createElement("g", {
-      key: "dropshadow",
-      transform: `translate(${offsetShadowX},5.5)`
-    }, React__namespace.createElement("polyline", {
-      fill: wonderBlocksTokens.color.offBlack16,
-      points: points.join(" "),
-      stroke: wonderBlocksTokens.color.offBlack32,
-      filter: `url(#${dropShadowFilterId})`
-    }))];
-  }
-  _getFullTailWidth() {
-    return ARROW_WIDTH + 2 * MIN_DISTANCE_FROM_CORNERS;
-  }
-  _getFullTailHeight() {
-    return ARROW_HEIGHT + DISTANCE_FROM_ANCHOR;
-  }
-  _getContainerStyle() {
-    const {
-      placement
-    } = this.props;
-    const fullTailWidth = this._getFullTailWidth();
-    const fullTailHeight = this._getFullTailHeight();
-    switch (placement) {
-      case "top":
-        return {
-          top: -1,
-          width: fullTailWidth,
-          height: fullTailHeight
-        };
-      case "right":
-        return {
-          left: 1,
-          width: fullTailHeight,
-          height: fullTailWidth
-        };
-      case "bottom":
-        return {
-          top: 1,
-          width: fullTailWidth,
-          height: fullTailHeight
-        };
-      case "left":
-        return {
-          left: -1,
-          width: fullTailHeight,
-          height: fullTailWidth
-        };
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-  _getArrowStyle() {
-    const {
-      placement
-    } = this.props;
-    switch (placement) {
-      case "top":
-        return {
-          marginLeft: MIN_DISTANCE_FROM_CORNERS,
-          marginRight: MIN_DISTANCE_FROM_CORNERS,
-          paddingBottom: DISTANCE_FROM_ANCHOR
-        };
-      case "right":
-        return {
-          marginTop: MIN_DISTANCE_FROM_CORNERS,
-          marginBottom: MIN_DISTANCE_FROM_CORNERS,
-          paddingLeft: DISTANCE_FROM_ANCHOR
-        };
-      case "bottom":
-        return {
-          marginLeft: MIN_DISTANCE_FROM_CORNERS,
-          marginRight: MIN_DISTANCE_FROM_CORNERS,
-          paddingTop: DISTANCE_FROM_ANCHOR
-        };
-      case "left":
-        return {
-          marginTop: MIN_DISTANCE_FROM_CORNERS,
-          marginBottom: MIN_DISTANCE_FROM_CORNERS,
-          paddingRight: DISTANCE_FROM_ANCHOR
-        };
-      default:
-        throw new Error(`Unknown placement: ${placement}`);
-    }
-  }
-  _renderArrow() {
-    const {
-      trimlinePoints,
-      points,
-      height,
-      width
-    } = this._calculateDimensionsFromPlacement();
-    const {
-      color: arrowColor,
-      show
-    } = this.props;
-    if (!show) {
-      return React__namespace.createElement(wonderBlocksLayout.Strut, {
-        size: height
-      });
-    }
-    return React__namespace.createElement("svg", {
-      className: aphrodite.css(styles$2.arrow),
-      style: this._getArrowStyle(),
-      width: width,
-      height: height,
-      "aria-hidden": true
-    }, this._maybeRenderDropshadow(points), React__namespace.createElement("polyline", {
-      fill: wonderBlocksTokens.color[arrowColor],
-      stroke: wonderBlocksTokens.color[arrowColor],
-      points: points.join(" ")
-    }), React__namespace.createElement("polyline", {
-      fill: wonderBlocksTokens.color[arrowColor],
-      points: points.join(" "),
-      stroke: wonderBlocksTokens.color.offBlack16
-    }), React__namespace.createElement("polyline", {
-      stroke: wonderBlocksTokens.color[arrowColor],
-      points: trimlinePoints.join(" ")
-    }));
-  }
-  render() {
-    const {
-      offset,
-      placement,
-      updateRef
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$2.tailContainer, _extends__default["default"]({}, offset), this._getContainerStyle()],
-      "data-placement": placement,
-      ref: updateRef
-    }, this._renderArrow());
-  }
-}
-TooltipTail.defaultProps = {
-  color: "white",
-  show: true
-};
-const DISTANCE_FROM_ANCHOR = wonderBlocksTokens.spacing.xSmall_8;
-const MIN_DISTANCE_FROM_CORNERS = wonderBlocksTokens.spacing.xSmall_8;
-const ARROW_WIDTH = wonderBlocksTokens.spacing.large_24;
-const ARROW_HEIGHT = wonderBlocksTokens.spacing.small_12;
-const styles$2 = aphrodite.StyleSheet.create({
-  tailContainer: {
-    position: "relative",
-    pointerEvents: "none"
-  },
-  arrow: {
-    overflow: "visible"
-  }
-});
+let tempIdCounter=0;class TooltipTail extends React__namespace.Component{_calculateDimensionsFromPlacement(){const{placement}=this.props;const trimlineOffset=.5;switch(placement){case"top":return {trimlinePoints:[`0,-${trimlineOffset}`,`${ARROW_WIDTH},-${trimlineOffset}`],points:["0,0",`${ARROW_WIDTH/2},${ARROW_HEIGHT}`,`${ARROW_WIDTH},0`],height:ARROW_HEIGHT,width:ARROW_WIDTH};case"right":return {trimlinePoints:[`${ARROW_HEIGHT+trimlineOffset},0`,`${ARROW_HEIGHT+trimlineOffset},${ARROW_WIDTH}`],points:[`${ARROW_HEIGHT},0`,`0,${ARROW_WIDTH/2}`,`${ARROW_HEIGHT},${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};case"bottom":return {trimlinePoints:[`0, ${ARROW_HEIGHT+trimlineOffset}`,`${ARROW_WIDTH},${ARROW_HEIGHT+trimlineOffset}`],points:[`0, ${ARROW_HEIGHT}`,`${ARROW_WIDTH/2},0`,`${ARROW_WIDTH},${ARROW_HEIGHT}`],width:ARROW_WIDTH,height:ARROW_HEIGHT};case"left":return {trimlinePoints:[`-${trimlineOffset},0`,`-${trimlineOffset},${ARROW_WIDTH}`],points:[`0,0`,`${ARROW_HEIGHT},${ARROW_WIDTH/2}`,`0,${ARROW_WIDTH}`],width:ARROW_HEIGHT,height:ARROW_WIDTH};default:throw new Error(`Unknown placement: ${placement}`)}}_getFilterPositioning(){const{placement}=this.props;switch(placement){case"top":return {y:"-50%",x:"-50%",offsetShadowX:0};case"bottom":return null;case"left":return {y:"-50%",x:"0%",offsetShadowX:1};case"right":return {y:"-50%",x:"-100%",offsetShadowX:-1};default:throw new Error(`Unknown placement: ${placement}`)}}_maybeRenderDropshadow(points){const position=this._getFilterPositioning();if(!position){return null}const{placement}=this.props;const{y,x,offsetShadowX}=position;const dropShadowFilterId=`tooltip-dropshadow-${placement}-${tempIdCounter++}`;return [jsxRuntime.jsxs("filter",{id:dropShadowFilterId,width:"200%",height:"200%",x:x,y:y,children:[jsxRuntime.jsx("feGaussianBlur",{in:"SourceAlpha",stdDeviation:wonderBlocksTokens.spacing.xxSmall_6/2}),jsxRuntime.jsx("feComponentTransfer",{children:jsxRuntime.jsx("feFuncA",{type:"linear",slope:"0.3"})})]},"filter"),jsxRuntime.jsx("g",{transform:`translate(${offsetShadowX},5.5)`,children:jsxRuntime.jsx("polyline",{fill:wonderBlocksTokens.color.offBlack16,points:points.join(" "),stroke:wonderBlocksTokens.color.offBlack32,filter:`url(#${dropShadowFilterId})`})},"dropshadow")]}_getFullTailWidth(){return ARROW_WIDTH+2*MIN_DISTANCE_FROM_CORNERS}_getFullTailHeight(){return ARROW_HEIGHT+DISTANCE_FROM_ANCHOR}_getContainerStyle(){const{placement}=this.props;const fullTailWidth=this._getFullTailWidth();const fullTailHeight=this._getFullTailHeight();switch(placement){case"top":return {top:-1,width:fullTailWidth,height:fullTailHeight};case"right":return {left:1,width:fullTailHeight,height:fullTailWidth};case"bottom":return {top:1,width:fullTailWidth,height:fullTailHeight};case"left":return {left:-1,width:fullTailHeight,height:fullTailWidth};default:throw new Error(`Unknown placement: ${placement}`)}}_getArrowStyle(){const{placement}=this.props;switch(placement){case"top":return {marginLeft:MIN_DISTANCE_FROM_CORNERS,marginRight:MIN_DISTANCE_FROM_CORNERS,paddingBottom:DISTANCE_FROM_ANCHOR};case"right":return {marginTop:MIN_DISTANCE_FROM_CORNERS,marginBottom:MIN_DISTANCE_FROM_CORNERS,paddingLeft:DISTANCE_FROM_ANCHOR};case"bottom":return {marginLeft:MIN_DISTANCE_FROM_CORNERS,marginRight:MIN_DISTANCE_FROM_CORNERS,paddingTop:DISTANCE_FROM_ANCHOR};case"left":return {marginTop:MIN_DISTANCE_FROM_CORNERS,marginBottom:MIN_DISTANCE_FROM_CORNERS,paddingRight:DISTANCE_FROM_ANCHOR};default:throw new Error(`Unknown placement: ${placement}`)}}_renderArrow(){const{trimlinePoints,points,height,width}=this._calculateDimensionsFromPlacement();const{color:arrowColor,show}=this.props;if(!show){return jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:height})}return jsxRuntime.jsxs("svg",{className:aphrodite.css(styles$2.arrow),style:this._getArrowStyle(),width:width,height:height,"aria-hidden":true,children:[this._maybeRenderDropshadow(points),jsxRuntime.jsx("polyline",{fill:wonderBlocksTokens.color[arrowColor],stroke:wonderBlocksTokens.color[arrowColor],points:points.join(" ")}),jsxRuntime.jsx("polyline",{fill:wonderBlocksTokens.color[arrowColor],points:points.join(" "),stroke:wonderBlocksTokens.color.offBlack16}),jsxRuntime.jsx("polyline",{stroke:wonderBlocksTokens.color[arrowColor],points:trimlinePoints.join(" ")})]})}render(){const{offset,placement,updateRef}=this.props;return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$2.tailContainer,{...offset},this._getContainerStyle()],"data-placement":placement,ref:updateRef,children:this._renderArrow()})}}TooltipTail.defaultProps={color:"white",show:true};const DISTANCE_FROM_ANCHOR=wonderBlocksTokens.spacing.xSmall_8;const MIN_DISTANCE_FROM_CORNERS=wonderBlocksTokens.spacing.xSmall_8;const ARROW_WIDTH=wonderBlocksTokens.spacing.large_24;const ARROW_HEIGHT=wonderBlocksTokens.spacing.small_12;const styles$2=aphrodite.StyleSheet.create({tailContainer:{position:"relative",pointerEvents:"none"},arrow:{overflow:"visible"}});
 
-class TooltipBubble extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      active: false
-    };
-    this.handleMouseEnter = () => {
-      this._setActiveState(true);
-    };
-    this.handleMouseLeave = () => {
-      this.props.onActiveChanged(false);
-    };
-  }
-  _setActiveState(active) {
-    this.setState({
-      active
-    });
-    this.props.onActiveChanged(active);
-  }
-  render() {
-    const {
-      id,
-      children,
-      updateBubbleRef,
-      placement,
-      isReferenceHidden,
-      style,
-      updateTailRef,
-      tailOffset,
-      backgroundColor
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      id: id,
-      role: "tooltip",
-      "data-placement": placement,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave,
-      ref: updateBubbleRef,
-      style: [isReferenceHidden && styles$1.hide, styles$1.bubble, styles$1[`content-${placement}`], style]
-    }, React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$1.content, backgroundColor && {
-        backgroundColor: wonderBlocksTokens.color[backgroundColor]
-      }]
-    }, children), React__namespace.createElement(TooltipTail, {
-      updateRef: updateTailRef,
-      placement: placement,
-      offset: tailOffset,
-      color: backgroundColor
-    }));
-  }
-}
-const styles$1 = aphrodite.StyleSheet.create({
-  bubble: {
-    position: "absolute"
-  },
-  hide: {
-    pointerEvents: "none",
-    opacity: 0,
-    backgroundColor: "transparent",
-    color: "transparent"
-  },
-  "content-top": {
-    flexDirection: "column"
-  },
-  "content-right": {
-    flexDirection: "row-reverse"
-  },
-  "content-bottom": {
-    flexDirection: "column-reverse"
-  },
-  "content-left": {
-    flexDirection: "row"
-  },
-  content: {
-    maxWidth: 472,
-    borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    border: `solid 1px ${wonderBlocksTokens.semanticColor.border.primary}`,
-    backgroundColor: wonderBlocksTokens.semanticColor.surface.primary,
-    boxShadow: `0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,
-    justifyContent: "center"
-  }
-});
+class TooltipBubble extends React__namespace.Component{_setActiveState(active){this.setState({active});this.props.onActiveChanged(active);}render(){const{id,children,updateBubbleRef,placement,isReferenceHidden,style,updateTailRef,tailOffset,backgroundColor}=this.props;return jsxRuntime.jsxs(wonderBlocksCore.View,{id:id,role:"tooltip","data-placement":placement,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,ref:updateBubbleRef,style:[isReferenceHidden&&styles$1.hide,styles$1.bubble,styles$1[`content-${placement}`],style],children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,backgroundColor&&{backgroundColor:wonderBlocksTokens.color[backgroundColor]}],children:children}),jsxRuntime.jsx(TooltipTail,{updateRef:updateTailRef,placement:placement,offset:tailOffset,color:backgroundColor})]})}constructor(...args){super(...args),this.state={active:false},this.handleMouseEnter=()=>{this._setActiveState(true);},this.handleMouseLeave=()=>{this.props.onActiveChanged(false);};}}const styles$1=aphrodite.StyleSheet.create({bubble:{position:"absolute"},hide:{pointerEvents:"none",opacity:0,backgroundColor:"transparent",color:"transparent"},"content-top":{flexDirection:"column"},"content-right":{flexDirection:"row-reverse"},"content-bottom":{flexDirection:"column-reverse"},"content-left":{flexDirection:"row"},content:{maxWidth:472,borderRadius:wonderBlocksTokens.border.radius.radius_040,border:`solid 1px ${wonderBlocksTokens.semanticColor.border.primary}`,backgroundColor:wonderBlocksTokens.semanticColor.surface.primary,boxShadow:`0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,justifyContent:"center"}});
 
-class TooltipContent extends React__namespace.Component {
-  _renderTitle() {
-    const {
-      title
-    } = this.props;
-    if (title) {
-      if (typeof title === "string") {
-        return React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, title);
-      } else {
-        return title;
-      }
-    }
-    return null;
-  }
-  _renderChildren() {
-    const {
-      children
-    } = this.props;
-    if (typeof children === "string") {
-      return React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, children);
-    } else {
-      return children;
-    }
-  }
-  render() {
-    const title = this._renderTitle();
-    const children = this._renderChildren();
-    const containerStyle = title ? styles.withTitle : styles.withoutTitle;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [containerStyle, this.props.contentStyle],
-      testId: this.props.testId
-    }, title, title && children && React__namespace.createElement(wonderBlocksLayout.Strut, {
-      size: wonderBlocksTokens.spacing.xxxSmall_4
-    }), children);
-  }
-}
-const styles = aphrodite.StyleSheet.create({
-  withoutTitle: {
-    padding: `10px ${wonderBlocksTokens.spacing.medium_16}px`
-  },
-  withTitle: {
-    padding: wonderBlocksTokens.spacing.medium_16
-  }
-});
+class TooltipContent extends React__namespace.Component{_renderTitle(){const{title}=this.props;if(title){if(typeof title==="string"){return jsxRuntime.jsx(wonderBlocksTypography.HeadingSmall,{children:title})}else {return title}}return null}_renderChildren(){const{children}=this.props;if(typeof children==="string"){return jsxRuntime.jsx(wonderBlocksTypography.LabelMedium,{children:children})}else {return children}}render(){const title=this._renderTitle();const children=this._renderChildren();const containerStyle=title?styles.withTitle:styles.withoutTitle;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[containerStyle,this.props.contentStyle],testId:this.props.testId,children:[title,title&&children&&jsxRuntime.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),children]})}}const styles=aphrodite.StyleSheet.create({withoutTitle:{padding:`10px ${wonderBlocksTokens.spacing.medium_16}px`},withTitle:{padding:wonderBlocksTokens.spacing.medium_16}});
 
 var t=e=>null==e||"object"!=typeof e?e:Array.isArray(e)?e.map(t):Object.keys(e).reduce(((n,r)=>(n[r]=t(e[r]),n)),{}),n=Object.freeze({Unknown:"Unknown",Internal:"Internal",InvalidInput:"InvalidInput",InvalidUse:"InvalidUse",NotFound:"NotFound",NotAllowed:"NotAllowed",Unauthorized:"Unauthorized",NotImplemented:"NotImplemented"});function r(t,e,n){return (e=function(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return ("string"===e?String:Number)(t)}(t,"string");return "symbol"==typeof e?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}class s{constructor(t,e,n){r(this,"_name",void 0),r(this,"_message",void 0),r(this,"_stackFrames",void 0),this._name=t,this._message=e,this._stackFrames=[...n];}get message(){return this._message}get name(){return this._name}get messageWithName(){return "".concat(this.name,": ").concat(this.message)}get stack(){return [...this._stackFrames]}get standardizedStack(){return "".concat(this.messageWithName,"\n").concat(this._stackFrames.join("\n"))}static fromConsequenceAndCause(t,e){var n;if("production"!==process.env.NODE_ENV){if(!(t instanceof s))throw new Error("consequence must be an instance of ErrorInfo");if(!(e instanceof s))throw new Error("cause must be an instance of ErrorInfo");if(e===t)throw new Error("cause and consequence must be different")}for(var r=[],i=e.stack,a=null!==(n=null==t?void 0:t.stack)&&void 0!==n?n:[],o=i.length-1,c=a.length-1;o>=0&&c>=0&&i[o]===a[c];)r.unshift(i[o]),o--,c--;for(;o>=0;o--)r.unshift(i[o]);for(;c>=0;c--)r.unshift(a[c]);return new s(t.name,((t,e)=>{var n=t=>(null==t?void 0:t.trim())||"(empty message)",r=n(t);return null==e?r:"".concat(r,"\n\tcaused by\n\t\t").concat(n(e))})(t.message,e.messageWithName),r)}static normalize(t){var e,n,r,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if("production"!==process.env.NODE_ENV){if(!(t instanceof Error))throw new Error("Error must be an instance of Error");if(i<0)throw new Error("stripFrames must be >= 0");if(a<0)throw new Error("minimumFrameCount must be >= 0")}var o=null!==(e=t.message.toString().split("\n").find((t=>t.trim().length)))&&void 0!==e?e:"(empty message)",c=t.toString(),u=(null!==(n=t.stack)&&void 0!==n&&n.startsWith(c)&&t.stack!==c?t.stack.substring(c.length):null!==(r=t.stack)&&void 0!==r?r:"").split("\n").filter((t=>t.trim().length)),l=u.length>=i+a?i:0;return new s(t.name,o,u.slice(l))}static from(t){var e,n;if("production"!==process.env.NODE_ENV&&!(t instanceof Error))throw new Error("Error must be an instance of Error");var r=t.toString(),i=(null!==(e=t.stack)&&void 0!==e&&e.startsWith(r)&&t.stack!==r?t.stack.substring(r.length):null!==(n=t.stack)&&void 0!==n?n:"").split("\n").filter((t=>t.trim().length));return new s(t.name,t.message,i)}}class i extends Error{constructor(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.Unknown,{cause:a,prefix:o,name:c,metadata:u,stripStackFrames:l,minimumFrameCount:m,compositeStack:d}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Object.freeze({});if("production"!==process.env.NODE_ENV){if(a&&!(a instanceof Error))throw new Error("cause must be an instance of Error");if(null!=c&&/\s/g.test(c))throw new Error("name must not contain whitespace");if(/\s/g.test(i))throw new Error("kind must not contain whitespace");if(null!=o&&/\s/g.test(o))throw new Error("prefix must not contain whitespace");if(null!=l&&l<0)throw new Error("stripStackFrames must be >= 0");if(null!=m&&m<0)throw new Error("minimumFrameCount must be >= 0")}super(e),r(this,"kind",void 0),r(this,"originalMessage",void 0),r(this,"originalStack",void 0),r(this,"metadata",void 0),r(this,"cause",void 0),this.originalMessage=e,this.metadata=(e=>{if(null==e)return e;var n=t(e);return Object.freeze(n)})(u),this.name="".concat(null!=o?o:"").concat(i).concat(null!=c?c:"","Error"),this.kind=i,this.originalStack=this.stack,this.cause=a;var f=s.normalize(this,null!=l?l:0,null!=m?m:1);if(delete this.stack,this.stack=f.standardizedStack,null!=a){var h=s.from(a),v=s.fromConsequenceAndCause(f,h);this.message=v.message,!0===d&&(this.stack=v.standardizedStack);}}}Object.freeze({ConsequenceFirst:"consequence-first",CauseFirst:"cause-first"});class w extends i{constructor(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.InvalidInput,r=arguments.length>2?arguments[2]:void 0;super("Unhandled case for '".concat(t,"'"),e,r);}}
 
-class RefTracker {
-  constructor() {
-    this._lastRef = void 0;
-    this._targetFn = void 0;
-    this.updateRef = ref => {
-      if (ref) {
-        const domNode = ReactDOM__namespace.findDOMNode(ref);
-        if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
-          var _this$_targetFn;
-          this._lastRef = domNode;
-          (_this$_targetFn = this._targetFn) == null || _this$_targetFn.call(this, domNode);
-        }
-      }
-    };
-    this.setCallback = targetFn => {
-      if (this._targetFn !== targetFn) {
-        if (targetFn && typeof targetFn !== "function") {
-          throw new Error("targetFn must be a function");
-        }
-        this._targetFn = targetFn || undefined;
-        if (this._lastRef && this._targetFn) {
-          this._targetFn(this._lastRef);
-        }
-      }
-    };
-  }
-}
+class RefTracker{constructor(){this.updateRef=ref=>{if(ref){const domNode=ReactDOM__namespace.findDOMNode(ref);if(domNode instanceof HTMLElement&&domNode!==this._lastRef){this._lastRef=domNode;this._targetFn?.(domNode);}}};this.setCallback=targetFn=>{if(this._targetFn!==targetFn){if(targetFn&&typeof targetFn!=="function"){throw new Error("targetFn must be a function")}this._targetFn=targetFn||undefined;if(this._lastRef&&this._targetFn){this._targetFn(this._lastRef);}}};}}
 
-const filterPopperPlacement = placement => {
-  switch (placement) {
-    case "auto":
-    case "auto-start":
-    case "auto-end":
-    case "top":
-    case "top-start":
-    case "top-end":
-      return "top";
-    case "bottom":
-    case "bottom-start":
-    case "bottom-end":
-      return "bottom";
-    case "right":
-    case "right-start":
-    case "right-end":
-      return "right";
-    case "left":
-    case "left-start":
-    case "left-end":
-      return "left";
-    default:
-      throw new w(placement);
-  }
-};
-function _modifyPosition({
-  state
-}) {
-  const popperHeight = state.rects.popper.height + state.rects.reference.height;
-  const minHeight = document.documentElement.clientHeight;
-  if (minHeight < popperHeight && state.modifiersData.hide) {
-    state.modifiersData.hide = _extends__default["default"]({}, state.modifiersData.hide, {
-      isReferenceHidden: false
-    });
-  }
-}
-const smallViewportModifier = {
-  name: "smallViewport",
-  enabled: true,
-  phase: "main",
-  fn: _modifyPosition
-};
-class TooltipPopper extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this._bubbleRefTracker = new RefTracker();
-    this._tailRefTracker = new RefTracker();
-    this._observer = null;
-    this._popperUpdate = null;
-    this.handleFirstUpdate = () => {
-      this.setState({
-        isReady: true
-      });
-    };
-    this.state = {
-      isReady: false
-    };
-  }
-  componentDidMount() {
-    const {
-      anchorElement,
-      autoUpdate
-    } = this.props;
-    if (!anchorElement || !autoUpdate) {
-      return;
-    }
-    this._observer = new MutationObserver(() => {
-      var _this$_popperUpdate;
-      (_this$_popperUpdate = this._popperUpdate) == null || _this$_popperUpdate.call(this);
-    });
-    this._observer.observe(anchorElement, {
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
-  }
-  componentWillUnmount() {
-    var _this$_observer;
-    (_this$_observer = this._observer) == null || _this$_observer.disconnect();
-  }
-  _renderPositionedContent(popperProps) {
-    const {
-      children
-    } = this.props;
-    const {
-      isReady
-    } = this.state;
-    const placement = filterPopperPlacement(popperProps.placement) || this.props.placement;
-    this._bubbleRefTracker.setCallback(popperProps.ref);
-    this._tailRefTracker.setCallback(popperProps.arrowProps.ref);
-    this._popperUpdate = popperProps.update;
-    const bubbleProps = {
-      placement,
-      style: {
-        top: popperProps.style.top,
-        left: popperProps.style.left,
-        bottom: popperProps.style.bottom,
-        right: popperProps.style.right,
-        position: popperProps.style.position,
-        transform: popperProps.style.transform,
-        visibility: !isReady ? "hidden" : undefined
-      },
-      updateBubbleRef: this._bubbleRefTracker.updateRef,
-      tailOffset: {
-        bottom: popperProps.arrowProps.style.bottom,
-        right: popperProps.arrowProps.style.right,
-        top: popperProps.arrowProps.style.top,
-        left: popperProps.arrowProps.style.left,
-        transform: popperProps.arrowProps.style.transform
-      },
-      updateTailRef: this._tailRefTracker.updateRef,
-      isReferenceHidden: popperProps.isReferenceHidden
-    };
-    return children(bubbleProps);
-  }
-  render() {
-    const {
-      anchorElement,
-      placement,
-      rootBoundary,
-      viewportPadding
-    } = this.props;
-    const modifiers = [smallViewportModifier];
-    if (rootBoundary === "viewport") {
-      modifiers.push({
-        name: "preventOverflow",
-        options: {
-          rootBoundary: "viewport",
-          padding: viewportPadding
-        }
-      });
-    } else {
-      modifiers.push({
-        name: "flip",
-        options: {
-          rootBoundary: "document"
-        }
-      });
-    }
-    return React__namespace.createElement(reactPopper.Popper, {
-      referenceElement: anchorElement,
-      strategy: "fixed",
-      placement: placement,
-      modifiers: modifiers,
-      onFirstUpdate: this.handleFirstUpdate
-    }, props => this._renderPositionedContent(props));
-  }
-}
-TooltipPopper.defaultProps = {
-  rootBoundary: "viewport",
-  viewportPadding: wonderBlocksTokens.spacing.small_12
-};
+const filterPopperPlacement=placement=>{switch(placement){case"auto":case"auto-start":case"auto-end":case"top":case"top-start":case"top-end":return "top";case"bottom":case"bottom-start":case"bottom-end":return "bottom";case"right":case"right-start":case"right-end":return "right";case"left":case"left-start":case"left-end":return "left";default:throw new w(placement)}};function _modifyPosition({state}){const popperHeight=state.rects.popper.height+state.rects.reference.height;const minHeight=document.documentElement.clientHeight;if(minHeight<popperHeight&&state.modifiersData.hide){state.modifiersData.hide={...state.modifiersData.hide,isReferenceHidden:false};}}const smallViewportModifier={name:"smallViewport",enabled:true,phase:"main",fn:_modifyPosition};class TooltipPopper extends React__namespace.Component{componentDidMount(){const{anchorElement,autoUpdate}=this.props;if(!anchorElement||!autoUpdate){return}this._observer=new MutationObserver(()=>{this._popperUpdate?.();});this._observer.observe(anchorElement,{attributes:true,childList:true,subtree:true});}componentWillUnmount(){this._observer?.disconnect();}_renderPositionedContent(popperProps){const{children}=this.props;const{isReady}=this.state;const placement=filterPopperPlacement(popperProps.placement)||this.props.placement;this._bubbleRefTracker.setCallback(popperProps.ref);this._tailRefTracker.setCallback(popperProps.arrowProps.ref);this._popperUpdate=popperProps.update;const bubbleProps={placement,style:{top:popperProps.style.top,left:popperProps.style.left,bottom:popperProps.style.bottom,right:popperProps.style.right,position:popperProps.style.position,transform:popperProps.style.transform,visibility:!isReady?"hidden":undefined},updateBubbleRef:this._bubbleRefTracker.updateRef,tailOffset:{bottom:popperProps.arrowProps.style.bottom,right:popperProps.arrowProps.style.right,top:popperProps.arrowProps.style.top,left:popperProps.arrowProps.style.left,transform:popperProps.arrowProps.style.transform},updateTailRef:this._tailRefTracker.updateRef,isReferenceHidden:popperProps.isReferenceHidden};return children(bubbleProps)}render(){const{anchorElement,placement,rootBoundary,viewportPadding}=this.props;const modifiers=[smallViewportModifier];if(rootBoundary==="viewport"){modifiers.push({name:"preventOverflow",options:{rootBoundary:"viewport",padding:viewportPadding}});}else {modifiers.push({name:"flip",options:{rootBoundary:"document"}});}return jsxRuntime.jsx(reactPopper.Popper,{referenceElement:anchorElement,strategy:"fixed",placement:placement,modifiers:modifiers,onFirstUpdate:this.handleFirstUpdate,children:props=>this._renderPositionedContent(props)})}constructor(props){super(props),this._bubbleRefTracker=new RefTracker,this._tailRefTracker=new RefTracker,this._observer=null,this._popperUpdate=null,this.handleFirstUpdate=()=>{this.setState({isReady:true});};this.state={isReady:false};}}TooltipPopper.defaultProps={rootBoundary:"viewport",viewportPadding:wonderBlocksTokens.spacing.small_12};
 
-class Tooltip extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      active: false,
-      activeBubble: false
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    return {
-      active: typeof props.opened === "boolean" ? props.opened : state.active
-    };
-  }
-  _updateAnchorElement(ref) {
-    if (ref && ref !== this.state.anchorElement) {
-      this.setState({
-        anchorElement: ref
-      });
-    }
-  }
-  _renderBubbleContent() {
-    const {
-      title,
-      content,
-      contentStyle,
-      testId
-    } = this.props;
-    if (typeof content === "string") {
-      return React__namespace.createElement(TooltipContent, {
-        title: title,
-        contentStyle: contentStyle,
-        testId: testId ? `${testId}-content` : undefined
-      }, content);
-    } else if (title) {
-      return React__namespace.cloneElement(content, {
-        title
-      });
-    } else {
-      return content;
-    }
-  }
-  _renderPopper(bubbleId) {
-    const {
-      backgroundColor,
-      placement
-    } = this.props;
-    return React__namespace.createElement(TooltipPopper, {
-      anchorElement: this.state.anchorElement,
-      placement: placement,
-      autoUpdate: this.props.autoUpdate,
-      viewportPadding: this.props.viewportPadding
-    }, props => React__namespace.createElement(TooltipBubble, {
-      id: bubbleId,
-      style: props.style,
-      backgroundColor: backgroundColor,
-      tailOffset: props.tailOffset,
-      isReferenceHidden: props.isReferenceHidden,
-      placement: props.placement,
-      updateTailRef: props.updateTailRef,
-      updateBubbleRef: props.updateBubbleRef,
-      onActiveChanged: active => this.setState({
-        activeBubble: active
-      })
-    }, this._renderBubbleContent()));
-  }
-  _getHost() {
-    const {
-      anchorElement
-    } = this.state;
-    return wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
-  }
-  _renderTooltipAnchor(uniqueId) {
-    const {
-      autoUpdate,
-      children,
-      forceAnchorFocusivity
-    } = this.props;
-    const {
-      active,
-      activeBubble
-    } = this.state;
-    const popperHost = this._getHost();
-    const shouldAnchorExist = autoUpdate ? this.state.anchorElement : true;
-    const shouldBeVisible = popperHost && (active || activeBubble) && shouldAnchorExist;
-    return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(TooltipAnchor, {
-      forceAnchorFocusivity: forceAnchorFocusivity,
-      anchorRef: r => this._updateAnchorElement(r),
-      onActiveChanged: active => this.setState({
-        active
-      }),
-      id: `${uniqueId}-anchor`
-    }, children), shouldBeVisible && ReactDOM__namespace.createPortal(this._renderPopper(uniqueId), popperHost));
-  }
-  render() {
-    const {
-      id
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.Id, {
-      id: id
-    }, uniqueId => this._renderTooltipAnchor(uniqueId));
-  }
-}
-Tooltip.defaultProps = {
-  forceAnchorFocusivity: true,
-  placement: "top"
-};
+class Tooltip extends React__namespace.Component{static getDerivedStateFromProps(props,state){return {active:typeof props.opened==="boolean"?props.opened:state.active}}_updateAnchorElement(ref){if(ref&&ref!==this.state.anchorElement){this.setState({anchorElement:ref});}}_renderBubbleContent(){const{title,content,contentStyle,testId}=this.props;if(typeof content==="string"){return jsxRuntime.jsx(TooltipContent,{title:title,contentStyle:contentStyle,testId:testId?`${testId}-content`:undefined,children:content})}else if(title){return React__namespace.cloneElement(content,{title})}else {return content}}_renderPopper(ariaContentId){const{backgroundColor,placement}=this.props;return jsxRuntime.jsx(TooltipPopper,{anchorElement:this.state.anchorElement,placement:placement,autoUpdate:this.props.autoUpdate,viewportPadding:this.props.viewportPadding,children:props=>jsxRuntime.jsx(TooltipBubble,{id:ariaContentId,style:props.style,backgroundColor:backgroundColor,tailOffset:props.tailOffset,isReferenceHidden:props.isReferenceHidden,placement:props.placement,updateTailRef:props.updateTailRef,updateBubbleRef:props.updateBubbleRef,onActiveChanged:active=>this.setState({activeBubble:active}),children:this._renderBubbleContent()})})}_getHost(){const{anchorElement}=this.state;return wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement)||document.body}_renderTooltipAnchor(uniqueId){const{autoUpdate,children,forceAnchorFocusivity}=this.props;const{active,activeBubble}=this.state;const popperHost=this._getHost();const shouldAnchorExist=autoUpdate?this.state.anchorElement:true;const shouldBeVisible=popperHost&&(active||activeBubble)&&shouldAnchorExist;const ariaContentId=`${uniqueId}-aria-content`;return jsxRuntime.jsxs(React__namespace.Fragment,{children:[jsxRuntime.jsx(TooltipAnchor,{forceAnchorFocusivity:forceAnchorFocusivity,anchorRef:r=>this._updateAnchorElement(r),onActiveChanged:active=>this.setState({active}),"aria-describedby":shouldBeVisible?ariaContentId:undefined,children:children}),shouldBeVisible&&ReactDOM__namespace.createPortal(this._renderPopper(ariaContentId),popperHost)]})}render(){const{id}=this.props;return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>this._renderTooltipAnchor(uniqueId)})}constructor(...args){super(...args),this.state={active:false,activeBubble:false};}}Tooltip.defaultProps={forceAnchorFocusivity:true,placement:"top"};
 
 exports.TooltipContent = TooltipContent;
 exports.TooltipPopper = TooltipPopper;