@terraware/web-components 5.0.27 → 5.1.0

package/components/TimelineSliderV2/index.js

@@ -1,104 +1,122 @@
-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
-    })]
-  });
+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
+            })
+        ]
+    });
 };
-
-export { TimelineSliderV2 as default };
+const components_TimelineSliderV2 = TimelineSliderV2;
+export default components_TimelineSliderV2;

package/components/TimelineSliderV2/layout.js

@@ -7,162 +7,139 @@ 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 (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 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 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 (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
+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);
     });
-    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;
+    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 || marks.length === 0) {
-    return {
-      nodes: []
+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 clusters = buildClusters(marks, containerWidth, thresholdPx);
-  const expanded = clusters.find(cluster => cluster.id === expandedClusterId && cluster.members.length > 1);
-  if (expanded === undefined) {
+    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 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 {
-      nodes: clusters.map(cluster => toCollapsedNode(cluster, false))
+        band,
+        nodes
     };
-  }
-  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

@@ -1 +0,0 @@
-

package/components/Tooltip/Tooltip.js

@@ -1,57 +1,48 @@
-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
-    })
-  });
+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
+        })
+    });
 }
-
-export { Tooltip as default };
+export default Tooltip_Tooltip;