@terraware/web-components 5.0.27-rc.0 → 5.0.27

package/components/TimelineSliderV2/index.js

@@ -1,122 +1,104 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTheme } from "@mui/material";
-import ClusterBadge from "./ClusterBadge.js";
-import TimelineDot from "./TimelineDot.js";
-import TimelineRail from "./TimelineRail.js";
-import { DEFAULT_CLUSTER_THRESHOLD_PX, buildLayout } from "./layout.js";
-import "./styles.scss";
-const TimelineSliderV2 = ({ clusterThresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX, labelEnd, labelStart, marks, onSelect, selectedMarkId })=>{
-    const theme = useTheme();
-    const containerRef = useRef(null);
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [expandedClusterId, setExpandedClusterId] = useState();
-    useEffect(()=>{
-        const node = containerRef.current;
-        if (null === node) return;
-        const measure = ()=>setContainerWidth(node.clientWidth);
-        measure();
-        const observer = new ResizeObserver(measure);
-        observer.observe(node);
-        return ()=>observer.disconnect();
-    }, []);
-    const layout = useMemo(()=>buildLayout({
-            containerWidth,
-            expandedClusterId,
-            marks,
-            thresholdPx: clusterThresholdPx
-        }), [
-        clusterThresholdPx,
-        containerWidth,
-        expandedClusterId,
-        marks
-    ]);
-    useEffect(()=>{
-        if (containerWidth > 0 && void 0 !== expandedClusterId && void 0 === layout.band) setExpandedClusterId(void 0);
-    }, [
-        containerWidth,
-        expandedClusterId,
-        layout.band
-    ]);
-    const selectedLabel = useMemo(()=>marks.find((mark)=>mark.id === selectedMarkId)?.label, [
-        marks,
-        selectedMarkId
-    ]);
-    const markNames = useMemo(()=>new Map(marks.map((mark)=>[
-                mark.id,
-                mark.ariaLabel ?? mark.label
-            ])), [
-        marks
-    ]);
-    const nodeAriaLabel = useCallback((node)=>{
-        const names = node.markIds.map((markId)=>markNames.get(markId)).filter((name)=>void 0 !== name);
-        return names.length > 0 ? names.join(', ') : void 0;
-    }, [
-        markNames
-    ]);
-    const handleNodeClick = useCallback((node)=>{
-        if (node.markIds.length > 1) setExpandedClusterId(node.id);
-        else onSelect?.(node.markIds[0]);
-    }, [
-        onSelect
-    ]);
-    const handleCollapse = useCallback(()=>setExpandedClusterId(void 0), []);
-    return /*#__PURE__*/ jsxs("div", {
-        className: "timeline-v2",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "timeline-v2-label",
-                style: {
-                    marginRight: theme.spacing(2)
-                },
-                children: labelStart
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "timeline-v2-container",
-                ref: containerRef,
-                children: [
-                    /*#__PURE__*/ jsx(TimelineRail, {}),
-                    layout.band && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx("div", {
-                                className: "timeline-v2-band",
-                                style: {
-                                    left: `${layout.band.leftPx}px`,
-                                    width: `${layout.band.widthPx}px`
-                                }
-                            }),
-                            /*#__PURE__*/ jsx(ClusterBadge, {
-                                count: layout.band.memberCount,
-                                leftPx: layout.band.leftPx + layout.band.widthPx / 2,
-                                onClose: handleCollapse
-                            })
-                        ]
-                    }),
-                    layout.nodes.map((node)=>/*#__PURE__*/ jsx(TimelineDot, {
-                            ariaLabel: nodeAriaLabel(node),
-                            colorWeights: node.colorWeights,
-                            dimmed: node.dimmed,
-                            leftPx: node.leftPx,
-                            markCount: node.markIds.length,
-                            onClick: ()=>handleNodeClick(node),
-                            selected: void 0 !== selectedMarkId && node.markIds.includes(selectedMarkId),
-                            sizePx: node.sizePx
-                        }, node.id))
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "timeline-v2-label",
-                style: {
-                    marginLeft: theme.spacing(2)
-                },
-                children: labelEnd
-            }),
-            selectedLabel && /*#__PURE__*/ jsx("div", {
-                className: "timeline-v2-selected-label",
-                children: selectedLabel
-            })
-        ]
-    });
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useTheme } from '@mui/material';
+import ClusterBadge from './ClusterBadge.js';
+import TimelineDot from './TimelineDot.js';
+import TimelineRail from './TimelineRail.js';
+import { buildLayout, DEFAULT_CLUSTER_THRESHOLD_PX } from './layout.js';
+import './styles.scss';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+const TimelineSliderV2 = ({
+  clusterThresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX,
+  labelEnd,
+  labelStart,
+  marks,
+  onSelect,
+  selectedMarkId
+}) => {
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [expandedClusterId, setExpandedClusterId] = useState();
+  useEffect(() => {
+    const node = containerRef.current;
+    if (node === null) {
+      return;
+    }
+    const measure = () => setContainerWidth(node.clientWidth);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const layout = useMemo(() => buildLayout({
+    containerWidth,
+    expandedClusterId,
+    marks,
+    thresholdPx: clusterThresholdPx
+  }), [clusterThresholdPx, containerWidth, expandedClusterId, marks]);
+  useEffect(() => {
+    if (containerWidth > 0 && expandedClusterId !== undefined && layout.band === undefined) {
+      setExpandedClusterId(undefined);
+    }
+  }, [containerWidth, expandedClusterId, layout.band]);
+  const selectedLabel = useMemo(() => marks.find(mark => mark.id === selectedMarkId)?.label, [marks, selectedMarkId]);
+  const markNames = useMemo(() => new Map(marks.map(mark => [mark.id, mark.ariaLabel ?? mark.label])), [marks]);
+  const nodeAriaLabel = useCallback(node => {
+    const names = node.markIds.map(markId => markNames.get(markId)).filter(name => name !== undefined);
+    return names.length > 0 ? names.join(', ') : undefined;
+  }, [markNames]);
+  const handleNodeClick = useCallback(node => {
+    if (node.markIds.length > 1) {
+      setExpandedClusterId(node.id);
+    } else {
+      onSelect?.(node.markIds[0]);
+    }
+  }, [onSelect]);
+  const handleCollapse = useCallback(() => setExpandedClusterId(undefined), []);
+  return /*#__PURE__*/jsxs("div", {
+    className: "timeline-v2",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "timeline-v2-label",
+      style: {
+        marginRight: theme.spacing(2)
+      },
+      children: labelStart
+    }), /*#__PURE__*/jsxs("div", {
+      className: "timeline-v2-container",
+      ref: containerRef,
+      children: [/*#__PURE__*/jsx(TimelineRail, {}), layout.band && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: "timeline-v2-band",
+          style: {
+            left: `${layout.band.leftPx}px`,
+            width: `${layout.band.widthPx}px`
+          }
+        }), /*#__PURE__*/jsx(ClusterBadge, {
+          count: layout.band.memberCount,
+          leftPx: layout.band.leftPx + layout.band.widthPx / 2,
+          onClose: handleCollapse
+        })]
+      }), layout.nodes.map(node => /*#__PURE__*/jsx(TimelineDot, {
+        ariaLabel: nodeAriaLabel(node),
+        colorWeights: node.colorWeights,
+        dimmed: node.dimmed,
+        leftPx: node.leftPx,
+        markCount: node.markIds.length,
+        onClick: () => handleNodeClick(node),
+        selected: selectedMarkId !== undefined && node.markIds.includes(selectedMarkId),
+        sizePx: node.sizePx
+      }, node.id))]
+    }), /*#__PURE__*/jsx("div", {
+      className: "timeline-v2-label",
+      style: {
+        marginLeft: theme.spacing(2)
+      },
+      children: labelEnd
+    }), selectedLabel && /*#__PURE__*/jsx("div", {
+      className: "timeline-v2-selected-label",
+      children: selectedLabel
+    })]
+  });
 };
-const components_TimelineSliderV2 = TimelineSliderV2;
-export default components_TimelineSliderV2;
+
+export { TimelineSliderV2 as default };

package/components/TimelineSliderV2/layout.js

@@ -7,139 +7,162 @@ const SQUEEZE_GAP_PX = 12;
 const MAX_BAND_RATIO = 0.8;
 const DEFAULT_CLUSTER_THRESHOLD_PX = 16;
 const DIMMED_OPACITY = 0.35;
-const normalizePositions = (marks, containerWidth)=>{
-    if (0 === marks.length) return [];
-    const values = marks.map((mark)=>mark.value);
-    const minValue = Math.min(...values);
-    const maxValue = Math.max(...values);
-    const range = maxValue - minValue;
-    return marks.map((mark)=>({
-            color: mark.color,
-            id: mark.id,
-            positionPx: (0 === range ? 1 : (mark.value - minValue) / range) * containerWidth
-        })).sort((a, b)=>a.positionPx - b.positionPx);
+const normalizePositions = (marks, containerWidth) => {
+  if (marks.length === 0) {
+    return [];
+  }
+  const values = marks.map(mark => mark.value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const range = maxValue - minValue;
+
+  // Mirrors TimelineSlider's behavior: when every mark shares one value, they all land at the right edge.
+  return marks.map(mark => ({
+    color: mark.color,
+    id: mark.id,
+    positionPx: (range === 0 ? 1 : (mark.value - minValue) / range) * containerWidth
+  })).sort((a, b) => a.positionPx - b.positionPx);
 };
-const toColorWeights = (colors)=>{
-    const weights = new Map();
-    colors.forEach((color)=>{
-        weights.set(color, (weights.get(color) ?? 0) + 1);
-    });
-    return [
-        ...weights.entries()
-    ].map(([color, weight])=>({
-            color,
-            weight
-        }));
+const toColorWeights = colors => {
+  const weights = new Map();
+  colors.forEach(color => {
+    weights.set(color, (weights.get(color) ?? 0) + 1);
+  });
+  return [...weights.entries()].map(([color, weight]) => ({
+    color,
+    weight
+  }));
 };
-const buildClusters = (marks, containerWidth, thresholdPx)=>{
-    const positioned = normalizePositions(marks, containerWidth);
-    const clusters = [];
-    let current = [];
-    const flush = ()=>{
-        if (0 === current.length) return;
-        const total = current.reduce((sum, member)=>sum + member.positionPx, 0);
-        clusters.push({
-            anchorPx: total / current.length,
-            id: `cluster-${current[0].id}`,
-            members: current
-        });
-        current = [];
-    };
-    positioned.forEach((mark)=>{
-        const previous = current[current.length - 1];
-        if (void 0 !== previous && mark.positionPx - previous.positionPx >= thresholdPx) flush();
-        current.push(mark);
+const buildClusters = (marks, containerWidth, thresholdPx) => {
+  const positioned = normalizePositions(marks, containerWidth);
+  const clusters = [];
+  let current = [];
+  const flush = () => {
+    if (current.length === 0) {
+      return;
+    }
+    const total = current.reduce((sum, member) => sum + member.positionPx, 0);
+    clusters.push({
+      anchorPx: total / current.length,
+      id: `cluster-${current[0].id}`,
+      members: current
     });
-    flush();
-    return clusters;
+    current = [];
+  };
+  positioned.forEach(mark => {
+    const previous = current[current.length - 1];
+    if (previous !== undefined && mark.positionPx - previous.positionPx >= thresholdPx) {
+      flush();
+    }
+    current.push(mark);
+  });
+  flush();
+  return clusters;
 };
-const toConicGradient = (colorWeights)=>{
-    if (colorWeights.length <= 1) return colorWeights[0]?.color ?? 'transparent';
-    const total = colorWeights.reduce((sum, { weight })=>sum + weight, 0);
-    let consumed = 0;
-    const stops = colorWeights.map(({ color, weight })=>{
-        const startDeg = consumed / total * 360;
-        consumed += weight;
-        const endDeg = consumed / total * 360;
-        return `${color} ${startDeg}deg ${endDeg}deg`;
-    });
-    return `conic-gradient(${stops.join(', ')})`;
+const toConicGradient = colorWeights => {
+  if (colorWeights.length <= 1) {
+    return colorWeights[0]?.color ?? 'transparent';
+  }
+  const total = colorWeights.reduce((sum, {
+    weight
+  }) => sum + weight, 0);
+  let consumed = 0;
+  const stops = colorWeights.map(({
+    color,
+    weight
+  }) => {
+    const startDeg = consumed / total * 360;
+    consumed += weight;
+    const endDeg = consumed / total * 360;
+    return `${color} ${startDeg}deg ${endDeg}deg`;
+  });
+  return `conic-gradient(${stops.join(', ')})`;
 };
-const toCollapsedNode = (cluster, dimmed)=>({
-        colorWeights: toColorWeights(cluster.members.map((member)=>member.color)),
-        dimmed,
-        id: cluster.id,
-        leftPx: cluster.anchorPx,
-        markIds: cluster.members.map((member)=>member.id),
-        sizePx: cluster.members.length > 1 ? CLUSTER_DOT_SIZE_PX : DOT_SIZE_PX
-    });
-const clamp = (value, min, max)=>Math.min(Math.max(value, min), max);
-const expandedSpacing = (memberCount, containerWidth, maxBandWidth)=>{
-    if (memberCount <= 1) return EXPANDED_SPACING_PX;
-    const cap = Math.min(containerWidth * MAX_BAND_RATIO, maxBandWidth);
-    const fitted = (cap - DOT_SIZE_PX - 2 * BAND_PADDING_PX) / (memberCount - 1);
-    return Math.max(0, Math.min(EXPANDED_SPACING_PX, fitted));
+const toCollapsedNode = (cluster, dimmed) => ({
+  colorWeights: toColorWeights(cluster.members.map(member => member.color)),
+  dimmed,
+  id: cluster.id,
+  leftPx: cluster.anchorPx,
+  markIds: cluster.members.map(member => member.id),
+  sizePx: cluster.members.length > 1 ? CLUSTER_DOT_SIZE_PX : DOT_SIZE_PX
+});
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const expandedSpacing = (memberCount, containerWidth, maxBandWidth) => {
+  if (memberCount <= 1) {
+    return EXPANDED_SPACING_PX;
+  }
+  const cap = Math.min(containerWidth * MAX_BAND_RATIO, maxBandWidth);
+  const fitted = (cap - DOT_SIZE_PX - 2 * BAND_PADDING_PX) / (memberCount - 1);
+  return Math.max(0, Math.min(EXPANDED_SPACING_PX, fitted));
 };
-const rescale = (value, fromStart, fromEnd, toStart, toEnd)=>{
-    const fromSpan = fromEnd - fromStart;
-    if (fromSpan <= 0) return toStart;
-    return toStart + (value - fromStart) / fromSpan * (toEnd - toStart);
+const rescale = (value, fromStart, fromEnd, toStart, toEnd) => {
+  const fromSpan = fromEnd - fromStart;
+  if (fromSpan <= 0) {
+    return toStart;
+  }
+  return toStart + (value - fromStart) / fromSpan * (toEnd - toStart);
 };
-const buildLayout = ({ containerWidth, expandedClusterId, marks, thresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX })=>{
-    if (containerWidth <= 0 || 0 === marks.length) return {
-        nodes: []
-    };
-    const clusters = buildClusters(marks, containerWidth, thresholdPx);
-    const expanded = clusters.find((cluster)=>cluster.id === expandedClusterId && cluster.members.length > 1);
-    if (void 0 === expanded) return {
-        nodes: clusters.map((cluster)=>toCollapsedNode(cluster, false))
-    };
-    const sideClusters = clusters.filter((cluster)=>cluster.id !== expanded.id);
-    const leftCount = sideClusters.filter((cluster)=>cluster.anchorPx < expanded.anchorPx).length;
-    const rightCount = sideClusters.length - leftCount;
-    const reserve = (count)=>0 === count ? 0 : SQUEEZE_GAP_PX + (count - 1) * MIN_SQUEEZE_PITCH_PX;
-    const leftReserve = reserve(leftCount);
-    const rightReserve = reserve(rightCount);
-    const minBandWidth = DOT_SIZE_PX + 2 * BAND_PADDING_PX;
-    const maxBandWidth = Math.max(minBandWidth, containerWidth - leftReserve - rightReserve);
-    const spacing = expandedSpacing(expanded.members.length, containerWidth, maxBandWidth);
-    const widthPx = Math.min(maxBandWidth, (expanded.members.length - 1) * spacing + minBandWidth);
-    const leftPx = clamp(expanded.anchorPx - widthPx / 2, leftReserve, Math.max(leftReserve, containerWidth - widthPx - rightReserve));
-    const band = {
-        leftPx,
-        memberCount: expanded.members.length,
-        widthPx
+const buildLayout = ({
+  containerWidth,
+  expandedClusterId,
+  marks,
+  thresholdPx = DEFAULT_CLUSTER_THRESHOLD_PX
+}) => {
+  if (containerWidth <= 0 || marks.length === 0) {
+    return {
+      nodes: []
     };
-    const leftLimit = Math.max(0, leftPx - SQUEEZE_GAP_PX);
-    const rightLimit = Math.min(containerWidth, leftPx + widthPx + SQUEEZE_GAP_PX);
-    const nodes = clusters.flatMap((cluster)=>{
-        if (cluster.id === expanded.id) return cluster.members.map((member, index)=>({
-                colorWeights: [
-                    {
-                        color: member.color,
-                        weight: 1
-                    }
-                ],
-                dimmed: false,
-                id: member.id,
-                leftPx: leftPx + BAND_PADDING_PX + DOT_SIZE_PX / 2 + index * spacing,
-                markIds: [
-                    member.id
-                ],
-                sizePx: DOT_SIZE_PX
-            }));
-        const collapsed = toCollapsedNode(cluster, true);
-        const squeezed = cluster.anchorPx < expanded.anchorPx ? rescale(cluster.anchorPx, 0, expanded.anchorPx, 0, leftLimit) : rescale(cluster.anchorPx, expanded.anchorPx, containerWidth, rightLimit, containerWidth);
-        return [
-            {
-                ...collapsed,
-                leftPx: squeezed
-            }
-        ];
-    });
+  }
+  const clusters = buildClusters(marks, containerWidth, thresholdPx);
+  const expanded = clusters.find(cluster => cluster.id === expandedClusterId && cluster.members.length > 1);
+  if (expanded === undefined) {
     return {
-        band,
-        nodes
+      nodes: clusters.map(cluster => toCollapsedNode(cluster, false))
     };
+  }
+  const sideClusters = clusters.filter(cluster => cluster.id !== expanded.id);
+  const leftCount = sideClusters.filter(cluster => cluster.anchorPx < expanded.anchorPx).length;
+  const rightCount = sideClusters.length - leftCount;
+  const reserve = count => count === 0 ? 0 : SQUEEZE_GAP_PX + (count - 1) * MIN_SQUEEZE_PITCH_PX;
+  const leftReserve = reserve(leftCount);
+  const rightReserve = reserve(rightCount);
+  const minBandWidth = DOT_SIZE_PX + 2 * BAND_PADDING_PX;
+  const maxBandWidth = Math.max(minBandWidth, containerWidth - leftReserve - rightReserve);
+  const spacing = expandedSpacing(expanded.members.length, containerWidth, maxBandWidth);
+  const widthPx = Math.min(maxBandWidth, (expanded.members.length - 1) * spacing + minBandWidth);
+  const leftPx = clamp(expanded.anchorPx - widthPx / 2, leftReserve, Math.max(leftReserve, containerWidth - widthPx - rightReserve));
+  const band = {
+    leftPx,
+    memberCount: expanded.members.length,
+    widthPx
+  };
+  const leftLimit = Math.max(0, leftPx - SQUEEZE_GAP_PX);
+  const rightLimit = Math.min(containerWidth, leftPx + widthPx + SQUEEZE_GAP_PX);
+  const nodes = clusters.flatMap(cluster => {
+    if (cluster.id === expanded.id) {
+      return cluster.members.map((member, index) => ({
+        colorWeights: [{
+          color: member.color,
+          weight: 1
+        }],
+        dimmed: false,
+        id: member.id,
+        leftPx: leftPx + BAND_PADDING_PX + DOT_SIZE_PX / 2 + index * spacing,
+        markIds: [member.id],
+        sizePx: DOT_SIZE_PX
+      }));
+    }
+    const collapsed = toCollapsedNode(cluster, true);
+    const squeezed = cluster.anchorPx < expanded.anchorPx ? rescale(cluster.anchorPx, 0, expanded.anchorPx, 0, leftLimit) : rescale(cluster.anchorPx, expanded.anchorPx, containerWidth, rightLimit, containerWidth);
+    return [{
+      ...collapsed,
+      leftPx: squeezed
+    }];
+  });
+  return {
+    band,
+    nodes
+  };
 };
+
 export { BAND_PADDING_PX, CLUSTER_DOT_SIZE_PX, DEFAULT_CLUSTER_THRESHOLD_PX, DIMMED_OPACITY, DOT_SIZE_PX, EXPANDED_SPACING_PX, MAX_BAND_RATIO, MIN_SQUEEZE_PITCH_PX, SQUEEZE_GAP_PX, buildClusters, buildLayout, normalizePositions, toColorWeights, toConicGradient };

package/components/TimelineSliderV2/types.js

@@ -0,0 +1 @@
+

package/components/Tooltip/Tooltip.js

@@ -1,48 +1,57 @@
-import { jsx } from "react/jsx-runtime";
-import react from "react";
-import { Tooltip, useTheme } from "@mui/material";
-import { useDeviceInfo } from "../../utils/index.js";
-function Tooltip_Tooltip({ children, placement = 'top-start', slotProps, sx, title }) {
-    const [open, setOpen] = react.useState(false);
-    const { isMobile } = useDeviceInfo();
-    const theme = useTheme();
-    const handleTooltipClose = ()=>{
-        setOpen(false);
-    };
-    const handleTooltipOpen = (event)=>{
-        if ('click' === event.type || 'mouseover' === event.type && !isMobile) setOpen(true);
-    };
-    return /*#__PURE__*/ jsx(Tooltip, {
-        arrow: true,
-        onOpen: handleTooltipOpen,
-        onClose: handleTooltipClose,
-        open: open,
-        placement: placement,
-        slotProps: slotProps,
-        sx: [
-            {
-                maxWidth: isMobile ? '342px' : '464px',
-                '& .MuiTooltip-arrow': {
-                    color: theme.palette.TwClrBaseGray800
-                },
-                '& .MuiTooltip-tooltip': {
-                    backgroundColor: theme.palette.TwClrBaseGray800,
-                    color: theme.palette.TwClrBaseWhite,
-                    padding: '8px',
-                    '& a': {
-                        color: theme.palette.TwClrBaseWhite
-                    }
-                }
-            },
-            ...Array.isArray(sx) ? sx : [
-                sx
-            ]
-        ],
-        title: title,
-        children: /*#__PURE__*/ jsx("span", {
-            onClick: handleTooltipOpen,
-            children: children
-        })
-    });
+import React from 'react';
+import { useTheme, Tooltip as Tooltip$1 } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import { jsx } from 'react/jsx-runtime';
+
+function Tooltip({
+  children,
+  placement = 'top-start',
+  slotProps,
+  sx,
+  title
+}) {
+  const [open, setOpen] = React.useState(false);
+  const {
+    isMobile
+  } = useDeviceInfo();
+  const theme = useTheme();
+  const handleTooltipClose = () => {
+    setOpen(false);
+  };
+  const handleTooltipOpen = event => {
+    if (event.type === 'click' || event.type === 'mouseover' && !isMobile) {
+      setOpen(true);
+    }
+  };
+  return /*#__PURE__*/jsx(Tooltip$1, {
+    arrow: true,
+    onOpen: handleTooltipOpen,
+    onClose: handleTooltipClose,
+    open: open,
+    placement: placement,
+    slotProps: slotProps,
+    sx: [{
+      maxWidth: isMobile ? '342px' : '464px',
+      '& .MuiTooltip-arrow': {
+        color: theme.palette.TwClrBaseGray800
+      },
+      '& .MuiTooltip-tooltip': {
+        backgroundColor: theme.palette.TwClrBaseGray800,
+        color: theme.palette.TwClrBaseWhite,
+        padding: '8px',
+        '& a': {
+          color: theme.palette.TwClrBaseWhite
+        }
+      }
+    }, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title,
+    children: /*#__PURE__*/jsx("span", {
+      onClick: handleTooltipOpen,
+      children: children
+    })
+  });
 }
-export default Tooltip_Tooltip;
+
+export { Tooltip as default };