@khanacademy/wonder-blocks-tooltip 1.3.21 → 1.3.22

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -1,2684 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`wonder-blocks-tooltip example 1 1`] = `
-<span
-  aria-describedby="uid-tooltip-0-aria-content"
-  className=""
-  style={
-    {
-      "MozOsxFontSmoothing": "grayscale",
-      "WebkitFontSmoothing": "antialiased",
-    }
-  }
->
-  Some text
-</span>
-`;
-
-exports[`wonder-blocks-tooltip example 2 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  Some text
-  <input
-    aria-describedby="my-a11y-tooltip"
-  />
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 3 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      {
-        "alignItems": "stretch",
-        "border": "1px solid black",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": 100,
-        "margin": 10,
-        "minHeight": 0,
-        "minWidth": 0,
-        "overflow": "auto",
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": "200vh",
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <span
-        className=""
-        style={
-          {
-            "MozOsxFontSmoothing": "grayscale",
-            "WebkitFontSmoothing": "antialiased",
-            "display": "block",
-            "fontFamily": "Lato, "Noto Sans", sans-serif",
-            "fontSize": 16,
-            "fontWeight": 400,
-            "lineHeight": "22px",
-          }
-        }
-      >
-        This is a big long piece of text with a
-        <span
-          aria-describedby="uid-tooltip-1-aria-content"
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-            }
-          }
-        >
-          [tooltip]
-        </span>
-        <span>
-           
-        </span>
-        in the middle.
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 4 1`] = `
-<button
-  aria-disabled={false}
-  className=""
-  onBlur={[Function]}
-  onClick={[Function]}
-  onDragStart={[Function]}
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
-  onMouseDown={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onMouseUp={[Function]}
-  onTouchCancel={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
-  role="button"
-  style={
-    {
-      "::MozFocusInner": {
-        "border": 0,
-      },
-      ":focus": {
-        "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-      },
-      "alignItems": "center",
-      "background": "#1865f2",
-      "border": "none",
-      "borderRadius": 4,
-      "boxSizing": "border-box",
-      "color": "#ffffff",
-      "cursor": "pointer",
-      "display": "inline-flex",
-      "height": 40,
-      "justifyContent": "center",
-      "margin": 0,
-      "outline": "none",
-      "paddingBottom": 0,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 0,
-      "position": "relative",
-      "textDecoration": "none",
-      "touchAction": "manipulation",
-      "userSelect": "none",
-    }
-  }
-  tabIndex={0}
-  type="button"
->
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "alignItems": "center",
-        "display": "inline-block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 16,
-        "fontWeight": "bold",
-        "lineHeight": "20px",
-        "overflow": "hidden",
-        "pointerEvents": "none",
-        "textOverflow": "ellipsis",
-        "whiteSpace": "nowrap",
-      }
-    }
-  >
-    Click here!
-  </span>
-</button>
-`;
-
-exports[`wonder-blocks-tooltip example 5 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 14,
-        "fontWeight": 400,
-        "lineHeight": "18px",
-      }
-    }
-  >
-    Here, we can see that the first tooltip shown has an initial delay before it appears, as does the last tooltip shown, yet when moving between tooltipped items, the transition from one to another is instantaneous.
-  </span>
-  <div
-    className=""
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "row",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      aria-describedby="uid-tooltip-2-aria-content"
-      className=""
-      style={
-        {
-          "alignItems": "center",
-          "border": "solid 1px steelblue",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 32,
-          "justifyContent": "center",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 32,
-          "zIndex": 0,
-        }
-      }
-    >
-      A
-    </div>
-    <div
-      aria-describedby="uid-tooltip-3-aria-content"
-      className=""
-      style={
-        {
-          "alignItems": "center",
-          "border": "solid 1px steelblue",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 32,
-          "justifyContent": "center",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 32,
-          "zIndex": 0,
-        }
-      }
-    >
-      B
-    </div>
-    <div
-      aria-describedby="uid-tooltip-4-aria-content"
-      className=""
-      style={
-        {
-          "alignItems": "center",
-          "border": "solid 1px steelblue",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 32,
-          "justifyContent": "center",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 32,
-          "zIndex": 0,
-        }
-      }
-    >
-      C
-    </div>
-    <div
-      aria-describedby="uid-tooltip-5-aria-content"
-      className=""
-      style={
-        {
-          "alignItems": "center",
-          "border": "solid 1px steelblue",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 32,
-          "justifyContent": "center",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 32,
-          "zIndex": 0,
-        }
-      }
-    >
-      D
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 6 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "center",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "row",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <button
-    aria-describedby="uid-tooltip-6-aria-content"
-    aria-disabled={false}
-    className=""
-    onBlur={[Function]}
-    onClick={[Function]}
-    onDragStart={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
-    role="button"
-    style={
-      {
-        "::MozFocusInner": {
-          "border": 0,
-        },
-        ":focus": {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-        },
-        "alignItems": "center",
-        "background": "#1865f2",
-        "border": "none",
-        "borderRadius": 4,
-        "boxSizing": "border-box",
-        "color": "#ffffff",
-        "cursor": "pointer",
-        "display": "inline-flex",
-        "height": 40,
-        "justifyContent": "center",
-        "margin": 0,
-        "outline": "none",
-        "paddingBottom": 0,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 0,
-        "position": "relative",
-        "textDecoration": "none",
-        "touchAction": "manipulation",
-        "userSelect": "none",
-      }
-    }
-    tabIndex={0}
-    type="button"
-  >
-    <span
-      className=""
-      style={
-        {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "alignItems": "center",
-          "display": "inline-block",
-          "fontFamily": "Lato, "Noto Sans", sans-serif",
-          "fontSize": 16,
-          "fontWeight": "bold",
-          "lineHeight": "20px",
-          "overflow": "hidden",
-          "pointerEvents": "none",
-          "textOverflow": "ellipsis",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Click me!
-    </span>
-  </button>
-  <div
-    aria-hidden="true"
-    className=""
-    style={
-      {
-        "MsFlexBasis": 16,
-        "MsFlexPreferredSize": 16,
-        "WebkitFlexBasis": 16,
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexBasis": 16,
-        "flexDirection": "column",
-        "flexShrink": 0,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "width": 16,
-        "zIndex": 0,
-      }
-    }
-  />
-  <button
-    aria-describedby="uid-tooltip-7-aria-content"
-    aria-label="search"
-    className=""
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onDragStart={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
-    style={
-      {
-        "::MozFocusInner": {
-          "border": 0,
-        },
-        ":focus": {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-        },
-        "alignItems": "center",
-        "background": "none",
-        "border": "none",
-        "boxSizing": "border-box",
-        "color": "#1865f2",
-        "cursor": "pointer",
-        "display": "inline-flex",
-        "height": 40,
-        "justifyContent": "center",
-        "margin": -8,
-        "outline": "none",
-        "padding": 0,
-        "position": "relative",
-        "textDecoration": "none",
-        "touchAction": "manipulation",
-        "width": 40,
-      }
-    }
-    tabIndex={0}
-    type="button"
-  >
-    <svg
-      className=""
-      height={24}
-      style={
-        {
-          "display": "inline-block",
-          "flexGrow": 0,
-          "flexShrink": 0,
-          "verticalAlign": "text-bottom",
-        }
-      }
-      viewBox="0 0 24 24"
-      width={24}
-    >
-      <path
-        d="M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
-        fill="currentColor"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 7 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": "10px 16px",
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 16,
-        "fontWeight": 400,
-        "lineHeight": "20px",
-      }
-    }
-  >
-    Only the content
-  </span>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 8 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 16,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <h4
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 20,
-        "fontWeight": 700,
-        "lineHeight": "24px",
-        "marginBottom": 0,
-        "marginTop": 0,
-      }
-    }
-  >
-    Title text!
-  </h4>
-  <div
-    aria-hidden="true"
-    className=""
-    style={
-      {
-        "MsFlexBasis": 4,
-        "MsFlexPreferredSize": 4,
-        "WebkitFlexBasis": 4,
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexBasis": 4,
-        "flexDirection": "column",
-        "flexShrink": 0,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "width": 4,
-        "zIndex": 0,
-      }
-    }
-  />
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 16,
-        "fontWeight": 400,
-        "lineHeight": "20px",
-      }
-    }
-  >
-    Some content in my content
-  </span>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 9 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 16,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 16,
-        "fontWeight": 400,
-        "lineHeight": "22px",
-      }
-    }
-  >
-    Body text title!
-  </span>
-  <div
-    aria-hidden="true"
-    className=""
-    style={
-      {
-        "MsFlexBasis": 4,
-        "MsFlexPreferredSize": 4,
-        "WebkitFlexBasis": 4,
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexBasis": 4,
-        "flexDirection": "column",
-        "flexShrink": 0,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "width": 4,
-        "zIndex": 0,
-      }
-    }
-  />
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 16,
-        "fontWeight": 400,
-        "lineHeight": "22px",
-      }
-    }
-  >
-    Body text content!
-  </span>
-  <span
-    className=""
-    style={
-      {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, "Noto Sans", sans-serif",
-        "fontSize": 14,
-        "fontWeight": 400,
-        "lineHeight": "18px",
-      }
-    }
-  >
-    And LabelSmall!
-  </span>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 10 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="top"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": 20,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "pointerEvents": "none",
-        "position": "relative",
-        "top": -1,
-        "width": 40,
-        "zIndex": 0,
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="arrow_oo4scr"
-      height={12}
-      style={
-        {
-          "marginLeft": 8,
-          "marginRight": 8,
-          "paddingBottom": 8,
-        }
-      }
-      width={24}
-    >
-      <filter
-        height="200%"
-        id="tooltip-dropshadow-top-0"
-        width="200%"
-        x="-50%"
-        y="-50%"
-      >
-        <feGaussianBlur
-          in="SourceAlpha"
-          stdDeviation={3}
-        />
-        <feComponentTransfer>
-          <feFuncA
-            slope="0.3"
-            type="linear"
-          />
-        </feComponentTransfer>
-      </filter>
-      <g
-        transform="translate(0,5.5)"
-      >
-        <polyline
-          fill="rgba(33,36,44,0.16)"
-          filter="url(#tooltip-dropshadow-top-0)"
-          points="0,0 12,12 24,0"
-          stroke="rgba(33,36,44,0.32)"
-        />
-      </g>
-      <polyline
-        fill="#ffffff"
-        points="0,0 12,12 24,0"
-        stroke="#ffffff"
-      />
-      <polyline
-        fill="#ffffff"
-        points="0,0 12,12 24,0"
-        stroke="rgba(33,36,44,0.16)"
-      />
-      <polyline
-        points="0,-0.5 24,-0.5"
-        stroke="#ffffff"
-      />
-    </svg>
-  </div>
-  <div
-    className=""
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 4,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 8,
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "green",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 24,
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 8,
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      aria-hidden="true"
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "flexGrow": 1,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 11 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "row",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "width": 4,
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 8,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "green",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 24,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 8,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      aria-hidden="true"
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "flexGrow": 1,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-  </div>
-  <div
-    className=""
-    data-placement="right"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": 40,
-        "left": 1,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "pointerEvents": "none",
-        "position": "relative",
-        "width": 20,
-        "zIndex": 0,
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="arrow_oo4scr"
-      height={24}
-      style={
-        {
-          "marginBottom": 8,
-          "marginTop": 8,
-          "paddingLeft": 8,
-        }
-      }
-      width={12}
-    >
-      <filter
-        height="200%"
-        id="tooltip-dropshadow-right-1"
-        width="200%"
-        x="-100%"
-        y="-50%"
-      >
-        <feGaussianBlur
-          in="SourceAlpha"
-          stdDeviation={3}
-        />
-        <feComponentTransfer>
-          <feFuncA
-            slope="0.3"
-            type="linear"
-          />
-        </feComponentTransfer>
-      </filter>
-      <g
-        transform="translate(-1,5.5)"
-      >
-        <polyline
-          fill="rgba(33,36,44,0.16)"
-          filter="url(#tooltip-dropshadow-right-1)"
-          points="12,0 0,12 12,24"
-          stroke="rgba(33,36,44,0.32)"
-        />
-      </g>
-      <polyline
-        fill="#ffffff"
-        points="12,0 0,12 12,24"
-        stroke="#ffffff"
-      />
-      <polyline
-        fill="#ffffff"
-        points="12,0 0,12 12,24"
-        stroke="rgba(33,36,44,0.16)"
-      />
-      <polyline
-        points="12.5,0 12.5,24"
-        stroke="#ffffff"
-      />
-    </svg>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 12 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "row",
-        "height": 4,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 8,
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "green",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 24,
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "width": 8,
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      aria-hidden="true"
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "flexGrow": 1,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-  </div>
-  <div
-    className=""
-    data-placement="bottom"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": 20,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "pointerEvents": "none",
-        "position": "relative",
-        "top": 1,
-        "width": 40,
-        "zIndex": 0,
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="arrow_oo4scr"
-      height={12}
-      style={
-        {
-          "marginLeft": 8,
-          "marginRight": 8,
-          "paddingTop": 8,
-        }
-      }
-      width={24}
-    >
-      <polyline
-        fill="#ffffff"
-        points="0, 12 12,0 24,12"
-        stroke="#ffffff"
-      />
-      <polyline
-        fill="#ffffff"
-        points="0, 12 12,0 24,12"
-        stroke="rgba(33,36,44,0.16)"
-      />
-      <polyline
-        points="0, 12.5 24,12.5"
-        stroke="#ffffff"
-      />
-    </svg>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 13 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "row",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="left"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": 40,
-        "left": -1,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "pointerEvents": "none",
-        "position": "relative",
-        "width": 20,
-        "zIndex": 0,
-      }
-    }
-  >
-    <svg
-      aria-hidden={true}
-      className="arrow_oo4scr"
-      height={24}
-      style={
-        {
-          "marginBottom": 8,
-          "marginTop": 8,
-          "paddingRight": 8,
-        }
-      }
-      width={12}
-    >
-      <filter
-        height="200%"
-        id="tooltip-dropshadow-left-2"
-        width="200%"
-        x="0%"
-        y="-50%"
-      >
-        <feGaussianBlur
-          in="SourceAlpha"
-          stdDeviation={3}
-        />
-        <feComponentTransfer>
-          <feFuncA
-            slope="0.3"
-            type="linear"
-          />
-        </feComponentTransfer>
-      </filter>
-      <g
-        transform="translate(1,5.5)"
-      >
-        <polyline
-          fill="rgba(33,36,44,0.16)"
-          filter="url(#tooltip-dropshadow-left-2)"
-          points="0,0 12,12 0,24"
-          stroke="rgba(33,36,44,0.32)"
-        />
-      </g>
-      <polyline
-        fill="#ffffff"
-        points="0,0 12,12 0,24"
-        stroke="#ffffff"
-      />
-      <polyline
-        fill="#ffffff"
-        points="0,0 12,12 0,24"
-        stroke="rgba(33,36,44,0.16)"
-      />
-      <polyline
-        points="-0.5,0 -0.5,24"
-        stroke="#ffffff"
-      />
-    </svg>
-  </div>
-  <div
-    className=""
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "width": 4,
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 8,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "green",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 24,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "bisque",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 8,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-    <div
-      aria-hidden="true"
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "flexGrow": 1,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 14 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="top"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    role="tooltip"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "#ffffff",
-          "border": "solid 1px rgba(33,36,44,0.16)",
-          "borderRadius": 4,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "margin": 0,
-          "maxWidth": 472,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div
-        className=""
-        style={
-          {
-            "alignItems": "stretch",
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "margin": 0,
-            "minHeight": 0,
-            "minWidth": 0,
-            "padding": "10px 16px",
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <span
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "display": "block",
-              "fontFamily": "Lato, "Noto Sans", sans-serif",
-              "fontSize": 16,
-              "fontWeight": 400,
-              "lineHeight": "20px",
-            }
-          }
-        >
-          I'm on the top!
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      data-placement="top"
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 20,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "pointerEvents": "none",
-          "position": "relative",
-          "top": -1,
-          "width": 40,
-          "zIndex": 0,
-        }
-      }
-    >
-      <svg
-        aria-hidden={true}
-        className="arrow_oo4scr"
-        height={12}
-        style={
-          {
-            "marginLeft": 8,
-            "marginRight": 8,
-            "paddingBottom": 8,
-          }
-        }
-        width={24}
-      >
-        <filter
-          height="200%"
-          id="tooltip-dropshadow-top-3"
-          width="200%"
-          x="-50%"
-          y="-50%"
-        >
-          <feGaussianBlur
-            in="SourceAlpha"
-            stdDeviation={3}
-          />
-          <feComponentTransfer>
-            <feFuncA
-              slope="0.3"
-              type="linear"
-            />
-          </feComponentTransfer>
-        </filter>
-        <g
-          transform="translate(0,5.5)"
-        >
-          <polyline
-            fill="rgba(33,36,44,0.16)"
-            filter="url(#tooltip-dropshadow-top-3)"
-            points="0,0 12,12 24,0"
-            stroke="rgba(33,36,44,0.32)"
-          />
-        </g>
-        <polyline
-          fill="#ffffff"
-          points="0,0 12,12 24,0"
-          stroke="#ffffff"
-        />
-        <polyline
-          fill="#ffffff"
-          points="0,0 12,12 24,0"
-          stroke="rgba(33,36,44,0.16)"
-        />
-        <polyline
-          points="0,-0.5 24,-0.5"
-          stroke="#ffffff"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 15 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "flex-start",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="right"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    role="tooltip"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "row-reverse",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "#ffffff",
-          "border": "solid 1px rgba(33,36,44,0.16)",
-          "borderRadius": 4,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "margin": 0,
-          "maxWidth": 472,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div
-        className=""
-        style={
-          {
-            "alignItems": "stretch",
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "margin": 0,
-            "minHeight": 0,
-            "minWidth": 0,
-            "padding": "10px 16px",
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <span
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "display": "block",
-              "fontFamily": "Lato, "Noto Sans", sans-serif",
-              "fontSize": 16,
-              "fontWeight": 400,
-              "lineHeight": "20px",
-            }
-          }
-        >
-          I'm on the right!
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      data-placement="right"
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 40,
-          "left": 1,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "pointerEvents": "none",
-          "position": "relative",
-          "width": 20,
-          "zIndex": 0,
-        }
-      }
-    >
-      <svg
-        aria-hidden={true}
-        className="arrow_oo4scr"
-        height={24}
-        style={
-          {
-            "marginBottom": 8,
-            "marginTop": 8,
-            "paddingLeft": 8,
-          }
-        }
-        width={12}
-      >
-        <filter
-          height="200%"
-          id="tooltip-dropshadow-right-4"
-          width="200%"
-          x="-100%"
-          y="-50%"
-        >
-          <feGaussianBlur
-            in="SourceAlpha"
-            stdDeviation={3}
-          />
-          <feComponentTransfer>
-            <feFuncA
-              slope="0.3"
-              type="linear"
-            />
-          </feComponentTransfer>
-        </filter>
-        <g
-          transform="translate(-1,5.5)"
-        >
-          <polyline
-            fill="rgba(33,36,44,0.16)"
-            filter="url(#tooltip-dropshadow-right-4)"
-            points="12,0 0,12 12,24"
-            stroke="rgba(33,36,44,0.32)"
-          />
-        </g>
-        <polyline
-          fill="#ffffff"
-          points="12,0 0,12 12,24"
-          stroke="#ffffff"
-        />
-        <polyline
-          fill="#ffffff"
-          points="12,0 0,12 12,24"
-          stroke="rgba(33,36,44,0.16)"
-        />
-        <polyline
-          points="12.5,0 12.5,24"
-          stroke="#ffffff"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 16 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="bottom"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    role="tooltip"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column-reverse",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "#ffffff",
-          "border": "solid 1px rgba(33,36,44,0.16)",
-          "borderRadius": 4,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "margin": 0,
-          "maxWidth": 472,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div
-        className=""
-        style={
-          {
-            "alignItems": "stretch",
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "margin": 0,
-            "minHeight": 0,
-            "minWidth": 0,
-            "padding": "10px 16px",
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <span
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "display": "block",
-              "fontFamily": "Lato, "Noto Sans", sans-serif",
-              "fontSize": 16,
-              "fontWeight": 400,
-              "lineHeight": "20px",
-            }
-          }
-        >
-          I'm on the bottom!
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      data-placement="bottom"
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 20,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "pointerEvents": "none",
-          "position": "relative",
-          "top": 1,
-          "width": 40,
-          "zIndex": 0,
-        }
-      }
-    >
-      <svg
-        aria-hidden={true}
-        className="arrow_oo4scr"
-        height={12}
-        style={
-          {
-            "marginLeft": 8,
-            "marginRight": 8,
-            "paddingTop": 8,
-          }
-        }
-        width={24}
-      >
-        <polyline
-          fill="#ffffff"
-          points="0, 12 12,0 24,12"
-          stroke="#ffffff"
-        />
-        <polyline
-          fill="#ffffff"
-          points="0, 12 12,0 24,12"
-          stroke="rgba(33,36,44,0.16)"
-        />
-        <polyline
-          points="0, 12.5 24,12.5"
-          stroke="#ffffff"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 17 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="left"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    role="tooltip"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "row",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "#ffffff",
-          "border": "solid 1px rgba(33,36,44,0.16)",
-          "borderRadius": 4,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "margin": 0,
-          "maxWidth": 472,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div
-        className=""
-        style={
-          {
-            "alignItems": "stretch",
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "margin": 0,
-            "minHeight": 0,
-            "minWidth": 0,
-            "padding": "10px 16px",
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <span
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "display": "block",
-              "fontFamily": "Lato, "Noto Sans", sans-serif",
-              "fontSize": 16,
-              "fontWeight": 400,
-              "lineHeight": "20px",
-            }
-          }
-        >
-          I'm on the left!
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      data-placement="left"
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 40,
-          "left": -1,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "pointerEvents": "none",
-          "position": "relative",
-          "width": 20,
-          "zIndex": 0,
-        }
-      }
-    >
-      <svg
-        aria-hidden={true}
-        className="arrow_oo4scr"
-        height={24}
-        style={
-          {
-            "marginBottom": 8,
-            "marginTop": 8,
-            "paddingRight": 8,
-          }
-        }
-        width={12}
-      >
-        <filter
-          height="200%"
-          id="tooltip-dropshadow-left-5"
-          width="200%"
-          x="0%"
-          y="-50%"
-        >
-          <feGaussianBlur
-            in="SourceAlpha"
-            stdDeviation={3}
-          />
-          <feComponentTransfer>
-            <feFuncA
-              slope="0.3"
-              type="linear"
-            />
-          </feComponentTransfer>
-        </filter>
-        <g
-          transform="translate(1,5.5)"
-        >
-          <polyline
-            fill="rgba(33,36,44,0.16)"
-            filter="url(#tooltip-dropshadow-left-5)"
-            points="0,0 12,12 0,24"
-            stroke="rgba(33,36,44,0.32)"
-          />
-        </g>
-        <polyline
-          fill="#ffffff"
-          points="0,0 12,12 0,24"
-          stroke="#ffffff"
-        />
-        <polyline
-          fill="#ffffff"
-          points="0,0 12,12 0,24"
-          stroke="rgba(33,36,44,0.16)"
-        />
-        <polyline
-          points="-0.5,0 -0.5,24"
-          stroke="#ffffff"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 18 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="bottom"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    role="tooltip"
-    style={
-      {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column-reverse",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "#ffffff",
-          "border": "solid 1px rgba(33,36,44,0.16)",
-          "borderRadius": 4,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "margin": 0,
-          "maxWidth": 472,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div
-        className=""
-        style={
-          {
-            "alignItems": "stretch",
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "margin": 0,
-            "minHeight": 0,
-            "minWidth": 0,
-            "padding": "10px 16px",
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <span
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "display": "block",
-              "fontFamily": "Lato, "Noto Sans", sans-serif",
-              "fontSize": 16,
-              "fontWeight": 400,
-              "lineHeight": "20px",
-            }
-          }
-        >
-          I'm on the bottom with a tail 50px in!
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      data-placement="bottom"
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 20,
-          "left": 50,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "pointerEvents": "none",
-          "position": "relative",
-          "top": 1,
-          "width": 40,
-          "zIndex": 0,
-        }
-      }
-    >
-      <svg
-        aria-hidden={true}
-        className="arrow_oo4scr"
-        height={12}
-        style={
-          {
-            "marginLeft": 8,
-            "marginRight": 8,
-            "paddingTop": 8,
-          }
-        }
-        width={24}
-      >
-        <polyline
-          fill="#ffffff"
-          points="0, 12 12,0 24,12"
-          stroke="#ffffff"
-        />
-        <polyline
-          fill="#ffffff"
-          points="0, 12 12,0 24,12"
-          stroke="rgba(33,36,44,0.16)"
-        />
-        <polyline
-          points="0, 12.5 24,12.5"
-          stroke="#ffffff"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-tooltip example 19 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    data-placement="top"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    role="tooltip"
-    style={
-      {
-        "alignItems": "stretch",
-        "backgroundColor": "transparent",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "color": "transparent",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "opacity": 0,
-        "padding": 0,
-        "pointerEvents": "none",
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      style={
-        {
-          "alignItems": "stretch",
-          "backgroundColor": "#ffffff",
-          "border": "solid 1px rgba(33,36,44,0.16)",
-          "borderRadius": 4,
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxShadow": "0 8px 8px 0 rgba(33,36,44,0.08)",
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "margin": 0,
-          "maxWidth": 472,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      <div
-        className=""
-        style={
-          {
-            "alignItems": "stretch",
-            "borderStyle": "solid",
-            "borderWidth": 0,
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "margin": 0,
-            "minHeight": 0,
-            "minWidth": 0,
-            "padding": "10px 16px",
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <span
-          className=""
-          style={
-            {
-              "MozOsxFontSmoothing": "grayscale",
-              "WebkitFontSmoothing": "antialiased",
-              "display": "block",
-              "fontFamily": "Lato, "Noto Sans", sans-serif",
-              "fontSize": 16,
-              "fontWeight": 400,
-              "lineHeight": "20px",
-            }
-          }
-        >
-          I'm hidden. So hidden. Shhhhh!
-        </span>
-      </div>
-    </div>
-    <div
-      className=""
-      data-placement="top"
-      style={
-        {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "height": 20,
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "pointerEvents": "none",
-          "position": "relative",
-          "top": -1,
-          "width": 40,
-          "zIndex": 0,
-        }
-      }
-    >
-      <svg
-        aria-hidden={true}
-        className="arrow_oo4scr"
-        height={12}
-        style={
-          {
-            "marginLeft": 8,
-            "marginRight": 8,
-            "paddingBottom": 8,
-          }
-        }
-        width={24}
-      >
-        <filter
-          height="200%"
-          id="tooltip-dropshadow-top-6"
-          width="200%"
-          x="-50%"
-          y="-50%"
-        >
-          <feGaussianBlur
-            in="SourceAlpha"
-            stdDeviation={3}
-          />
-          <feComponentTransfer>
-            <feFuncA
-              slope="0.3"
-              type="linear"
-            />
-          </feComponentTransfer>
-        </filter>
-        <g
-          transform="translate(0,5.5)"
-        >
-          <polyline
-            fill="rgba(33,36,44,0.16)"
-            filter="url(#tooltip-dropshadow-top-6)"
-            points="0,0 12,12 24,0"
-            stroke="rgba(33,36,44,0.32)"
-          />
-        </g>
-        <polyline
-          fill="#ffffff"
-          points="0,0 12,12 24,0"
-          stroke="#ffffff"
-        />
-        <polyline
-          fill="#ffffff"
-          points="0,0 12,12 24,0"
-          stroke="rgba(33,36,44,0.16)"
-        />
-        <polyline
-          points="0,-0.5 24,-0.5"
-          stroke="#ffffff"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;