@gearbox-protocol/permissionless-ui 1.2.32 → 1.3.0

package/dist/cjs/components/form/form-field.js

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_field_exports = {};
+__export(form_field_exports, {
+  FormField: () => FormField
+});
+module.exports = __toCommonJS(form_field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_a11y = require('../../utils/a11y.js');
+var import_cn = require('../../utils/cn.js');
+var import_input = require('../input.js');
+var import_label = require('../label.js');
+function FormField({
+  label,
+  error,
+  required,
+  helperText,
+  inputProps,
+  className
+}) {
+  const { inputId, errorId, helperId } = (0, import_a11y.useFormFieldIds)(label);
+  const hasError = !!error;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_label.Label,
+      {
+        htmlFor: inputId,
+        required,
+        variant: hasError ? "error" : "default",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input.Input,
+      {
+        ...inputProps,
+        id: inputId,
+        hasError,
+        errorMessage: error,
+        "aria-invalid": hasError,
+        "aria-describedby": hasError ? errorId : helperText ? helperId : void 0,
+        "aria-required": required
+      }
+    ),
+    !hasError && helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormField
+});

package/dist/cjs/components/{editable-table → form}/index.js

@@ -13,14 +13,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var editable_table_exports = {};
-module.exports = __toCommonJS(editable_table_exports);
-__reExport(editable_table_exports, require('./edit-button.js'), module.exports);
-__reExport(editable_table_exports, require('./editable-table.js'), module.exports);
-__reExport(editable_table_exports, require('./updated-value.js'), module.exports);
+var form_exports = {};
+module.exports = __toCommonJS(form_exports);
+__reExport(form_exports, require('./form-field.js'), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require('./edit-button.js'),
-  ...require('./editable-table.js'),
-  ...require('./updated-value.js')
+  ...require('./form-field.js')
 });

package/dist/cjs/components/graph/default-config.js

@@ -0,0 +1,158 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var default_config_exports = {};
+__export(default_config_exports, {
+  DEFAULT_AREA_SERIES: () => DEFAULT_AREA_SERIES,
+  DEFAULT_OPTIONS: () => DEFAULT_OPTIONS,
+  DEFAULT_VERTICAL_LINE: () => DEFAULT_VERTICAL_LINE,
+  getDefaultOptions: () => getDefaultOptions,
+  getDefaultSeries: () => getDefaultSeries,
+  getDefaultVerticalLine: () => getDefaultVerticalLine
+});
+module.exports = __toCommonJS(default_config_exports);
+var import_colors = require('../../utils/colors.js');
+const DEFAULT_AREA_SERIES = {
+  topColor: "rgba(76, 175, 80, 0.56)",
+  bottomColor: "rgba(76, 175, 80, 0.04)",
+  lineColor: "#02c39a",
+  lineWidth: 2
+};
+const DEFAULT_VERTICAL_LINE = {
+  showLabel: true,
+  color: "#02c39a",
+  labelBackgroundColor: "#02c39a",
+  width: 2
+};
+function getDefaultOptions() {
+  return {
+    timeScale: {
+      borderVisible: true,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      visible: true
+    },
+    rightPriceScale: {
+      autoScale: true,
+      alignLabels: true,
+      borderVisible: true,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      entireTextOnly: false
+    },
+    layout: {
+      background: {
+        color: "transparent"
+      },
+      textColor: (0, import_colors.resolveCSSColor)("hsl(var(--foreground))", "rgb(0, 0, 0)"),
+      fontSize: 14
+    },
+    crosshair: {
+      horzLine: {
+        width: 2,
+        color: "rgba(224, 227, 235, 0.1)",
+        style: 0,
+        labelVisible: false
+      },
+      vertLine: {
+        width: 2,
+        color: "rgba(224, 227, 235, 0.1)",
+        style: 0,
+        labelVisible: false
+      }
+    },
+    grid: {
+      vertLines: {
+        visible: false
+      },
+      horzLines: {
+        visible: false
+      }
+    }
+  };
+}
+function getDefaultSeries() {
+  return {
+    topColor: "rgba(76, 175, 80, 0.56)",
+    bottomColor: "rgba(76, 175, 80, 0.04)",
+    lineColor: DEFAULT_AREA_SERIES.lineColor,
+    lineWidth: 2
+  };
+}
+function getDefaultVerticalLine() {
+  const primaryColor = (0, import_colors.resolveCSSColor)(
+    "hsl(var(--primary))",
+    "rgb(76, 175, 80)"
+  );
+  return {
+    showLabel: true,
+    color: primaryColor,
+    labelBackgroundColor: primaryColor,
+    width: 2
+  };
+}
+const DEFAULT_OPTIONS = {
+  timeScale: {
+    borderVisible: true,
+    borderColor: "rgba(224, 227, 235, 0.1)",
+    visible: true
+  },
+  rightPriceScale: {
+    autoScale: true,
+    alignLabels: true,
+    borderVisible: true,
+    borderColor: "rgba(224, 227, 235, 0.1)",
+    entireTextOnly: false
+  },
+  layout: {
+    background: {
+      color: "transparent"
+    },
+    textColor: "rgb(0, 0, 0)",
+    fontSize: 14
+  },
+  crosshair: {
+    horzLine: {
+      width: 2,
+      color: "rgba(224, 227, 235, 0.1)",
+      style: 0,
+      labelVisible: false
+    },
+    vertLine: {
+      width: 2,
+      color: "rgba(224, 227, 235, 0.1)",
+      style: 0,
+      labelVisible: false
+    }
+  },
+  grid: {
+    vertLines: {
+      visible: false
+    },
+    horzLines: {
+      visible: false
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_AREA_SERIES,
+  DEFAULT_OPTIONS,
+  DEFAULT_VERTICAL_LINE,
+  getDefaultOptions,
+  getDefaultSeries,
+  getDefaultVerticalLine
+});

package/dist/cjs/components/graph/formatters.js

@@ -0,0 +1,175 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var formatters_exports = {};
+__export(formatters_exports, {
+  getXFormatter: () => getXFormatter,
+  getYFormatter: () => getYFormatter
+});
+module.exports = __toCommonJS(formatters_exports);
+var import_luxon = require("luxon");
+const MAX_EXPONENTIAL_MONEY_THRESHOLD = 1e11;
+const EPSILON = 1e-10;
+const MIN_DISPLAY_THRESHOLD = 1e-4;
+function formatMoneyAmount({
+  amount,
+  maxExponentialThreshold,
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 0,
+  format = "full"
+}) {
+  const absAmount = Math.abs(amount);
+  if (format === "short") {
+    if (absAmount >= 1e9) {
+      return `${(amount / 1e9).toFixed(maximumFractionDigits)}B`;
+    }
+    if (absAmount >= 1e6) {
+      return `${(amount / 1e6).toFixed(maximumFractionDigits)}M`;
+    }
+    if (absAmount >= 1e3) {
+      return `${(amount / 1e3).toFixed(maximumFractionDigits)}K`;
+    }
+  }
+  if (maxExponentialThreshold && absAmount > maxExponentialThreshold && absAmount > 0) {
+    return amount.toExponential(2);
+  }
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits,
+    maximumFractionDigits
+  }).format(amount);
+}
+function toSignificant(value, decimals) {
+  const divisor = 10n ** BigInt(decimals);
+  const result = Number(value) / Number(divisor);
+  return result.toFixed(decimals).replace(/\.?0+$/, "");
+}
+const formatGraphMoney = (value, symbol, format = "full") => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return symbol ? `<${MIN_DISPLAY_THRESHOLD}${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return symbol ? `0${symbol}` : "0";
+  }
+  const f = formatMoneyAmount({
+    amount: value,
+    maxExponentialThreshold: MAX_EXPONENTIAL_MONEY_THRESHOLD,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    format
+  });
+  if (symbol) return `${f}${symbol}`;
+  return f;
+};
+const PERCENT_DECIMALS = 2;
+const formatGraphPercent = (value, symbol) => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return symbol ? `<${MIN_DISPLAY_THRESHOLD}${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return symbol ? `0${symbol}` : "0";
+  }
+  const f = toSignificant(
+    BigInt(Math.floor(value * 10 ** PERCENT_DECIMALS)),
+    PERCENT_DECIMALS
+  );
+  if (symbol) return `${f}${symbol}`;
+  return f;
+};
+const DEFAULT_DECIMALS = 4;
+const defaultFormatter = (value) => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return "0";
+  }
+  const f = toSignificant(
+    BigInt(Math.floor(value * 10 ** DEFAULT_DECIMALS)),
+    DEFAULT_DECIMALS
+  );
+  return f;
+};
+const formatGraphToken = (value, symbol) => {
+  const absValue = Math.abs(value);
+  if (absValue < EPSILON && absValue > 0) {
+    return symbol ? `<${MIN_DISPLAY_THRESHOLD} ${symbol}` : `<${MIN_DISPLAY_THRESHOLD}`;
+  }
+  if (absValue === 0) {
+    return symbol ? `0 ${symbol}` : "0";
+  }
+  const isWholeNumber = Number.isInteger(value);
+  const amountAbs = Math.abs(value);
+  const shouldUseShortFormat = isWholeNumber && amountAbs >= 1e3;
+  const f = formatMoneyAmount({
+    amount: value,
+    maxExponentialThreshold: MAX_EXPONENTIAL_MONEY_THRESHOLD,
+    minimumFractionDigits: isWholeNumber ? 0 : 2,
+    maximumFractionDigits: shouldUseShortFormat ? 1 : isWholeNumber ? 0 : 2,
+    format: shouldUseShortFormat ? "short" : "full"
+  });
+  if (symbol) return `${f} ${symbol}`;
+  return f;
+};
+const Y_FORMATTERS = {
+  "%": formatGraphPercent,
+  $: formatGraphMoney,
+  token: formatGraphToken,
+  none: defaultFormatter
+};
+const getYFormatter = (unit) => Y_FORMATTERS[unit] || Y_FORMATTERS.token;
+const formatXTime = (time) => import_luxon.DateTime.fromSeconds(Number(time)).toFormat("dd/LL/yyyy HH:mm");
+const formatXTimeOnly = (time) => import_luxon.DateTime.fromSeconds(Number(time)).toFormat("HH:mm");
+const createMultiDayFormatter = () => {
+  let lastShownDay = null;
+  return (time) => {
+    const dateTime = import_luxon.DateTime.fromSeconds(Number(time));
+    const currentDay = dateTime.toFormat("yyyy-MM-dd");
+    if (currentDay !== lastShownDay) {
+      lastShownDay = currentDay;
+      return dateTime.toFormat("dd MMM");
+    }
+    return dateTime.toFormat("HH:mm");
+  };
+};
+const formatXPercent = (time, symbol) => formatGraphPercent(Number(time), symbol);
+const X_FORMATTERS = {
+  time: formatXTime,
+  "%": formatXPercent
+};
+const getXFormatter = (unit, points) => {
+  if (unit === "time" && points && points.length > 0) {
+    const firstDate = import_luxon.DateTime.fromSeconds(Number(points[0].time));
+    const lastDate = import_luxon.DateTime.fromSeconds(
+      Number(points[points.length - 1].time)
+    );
+    const isSameDay = firstDate.hasSame(lastDate, "day");
+    if (isSameDay) {
+      return formatXTimeOnly;
+    }
+    return createMultiDayFormatter();
+  }
+  return X_FORMATTERS[unit] || X_FORMATTERS.time;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getXFormatter,
+  getYFormatter
+});

package/dist/cjs/components/graph/graph-current-value.js

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var graph_current_value_exports = {};
+__export(graph_current_value_exports, {
+  GraphCurrentValue: () => GraphCurrentValue
+});
+module.exports = __toCommonJS(graph_current_value_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require('../../utils/cn.js');
+var import_formatters = require('./formatters.js');
+function GraphCurrentValue({
+  point,
+  xMeasureUnit,
+  yMeasureUnit,
+  className
+}) {
+  const xFormatter = (0, import_formatters.getXFormatter)(xMeasureUnit);
+  const yFormatter = (0, import_formatters.getYFormatter)(yMeasureUnit);
+  const xFormatted = xFormatter(point.time, xMeasureUnit);
+  const yFormatted = yFormatter(point.value, yMeasureUnit);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "absolute top-2 left-2 right-2 z-[100] pointer-events-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: yFormatted }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-muted-foreground whitespace-nowrap overflow-hidden text-ellipsis mt-0.5", children: xFormatted })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GraphCurrentValue
+});

package/dist/cjs/components/graph/graph-tooltip.js

@@ -0,0 +1,141 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var graph_tooltip_exports = {};
+__export(graph_tooltip_exports, {
+  GraphTooltip: () => GraphTooltip
+});
+module.exports = __toCommonJS(graph_tooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_cn = require('../../utils/cn.js');
+var import_formatters = require('./formatters.js');
+var import_graph = require('./graph.js');
+function GraphTooltip({
+  points,
+  series,
+  xMeasureUnit,
+  yMeasureUnit,
+  className,
+  position,
+  containerRef
+}) {
+  const tooltipRef = (0, import_react.useRef)(null);
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react.useState)(position);
+  const xFormatter = (0, import_formatters.getXFormatter)(xMeasureUnit);
+  (0, import_react.useEffect)(() => {
+    if (!position) {
+      setAdjustedPosition(position);
+      return;
+    }
+    const container = containerRef?.current;
+    if (!container) {
+      setAdjustedPosition(position);
+      return;
+    }
+    const tooltip = tooltipRef.current;
+    if (!tooltip) {
+      setAdjustedPosition(position);
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    let x = position.x;
+    let y = position.y;
+    const tooltipWidth = tooltipRect.width;
+    const tooltipHeight = tooltipRect.height;
+    const padding = 8;
+    if (x - tooltipWidth / 2 < padding) {
+      x = tooltipWidth / 2 + padding;
+    } else if (x + tooltipWidth / 2 > containerRect.width - padding) {
+      x = containerRect.width - tooltipWidth / 2 - padding;
+    }
+    const offsetY = tooltipHeight + 8;
+    if (y - offsetY < padding) {
+      y = position.y + 20;
+    } else {
+      y = position.y - offsetY;
+    }
+    setAdjustedPosition({ x, y });
+  }, [position, containerRef]);
+  const positionStyles = adjustedPosition ? {
+    left: `${adjustedPosition.x}px`,
+    top: `${adjustedPosition.y}px`,
+    transform: "translate(-50%, 0)"
+    // Center horizontally
+  } : {};
+  if (points.size === 0) {
+    return null;
+  }
+  const firstPoint = Array.from(points.values())[0];
+  const xFormatted = xFormatter(firstPoint.time, xMeasureUnit);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: tooltipRef,
+      className: (0, import_cn.cn)(
+        "absolute z-[100] pointer-events-none whitespace-nowrap",
+        className
+      ),
+      style: positionStyles,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-background/90 backdrop-blur-sm rounded border border-border p-2 space-y-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-muted-foreground mb-1 whitespace-nowrap", children: xFormatted }),
+        series.map((s, index) => {
+          const pointData = points.get(s.label);
+          if (!pointData) return null;
+          const colorPalette = import_graph.DEFAULT_SERIES_COLORS[index % import_graph.DEFAULT_SERIES_COLORS.length];
+          const lineColor = s.color || colorPalette.line;
+          const seriesYMeasureUnit = s.yMeasureUnit || yMeasureUnit;
+          const seriesYFormatter = (0, import_formatters.getYFormatter)(seriesYMeasureUnit);
+          let yFormatted = seriesYFormatter(
+            pointData.value,
+            seriesYMeasureUnit === "none" ? void 0 : seriesYMeasureUnit
+          );
+          if (yFormatted.endsWith(" none")) {
+            yFormatted = yFormatted.slice(0, -5);
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: "flex items-center gap-2 text-sm whitespace-nowrap",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "w-2 h-2 rounded-full flex-shrink-0",
+                    style: { backgroundColor: lineColor }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground whitespace-nowrap", children: [
+                  s.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-foreground whitespace-nowrap", children: yFormatted })
+              ]
+            },
+            s.label
+          );
+        })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GraphTooltip
+});