@luscii-healthtech/web-ui 46.2.2 → 46.2.4

package/dist/index.development.js

@@ -32,11 +32,10 @@ var ReactSelect = require('react-select');
 var RadixSwitch = require('@radix-ui/react-switch');
 var Quill = require('quill');
 require('quill-paste-smart');
-require('quill/dist/quill.snow.css');
+var solid = require('@heroicons/react/20/solid');
 var isFunction = require('lodash/isFunction');
 var isObjectLike = require('lodash/isObjectLike');
 var react = require('@headlessui/react');
-var solid = require('@heroicons/react/20/solid');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -1799,8 +1798,24 @@ const SearchInput = React__namespace.default.forwardRef((props, ref) => {
 });
 
 const Content$2 = (_a) => {
-  var { container, children, className } = _a, contentProps = __rest(_a, ["container", "children", "className"]);
-  return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui:fill-secondary-background" })] })) });
+  var { container, children, className, backgroundColor } = _a, contentProps = __rest(_a, ["container", "children", "className", "backgroundColor"]);
+  const getBackgroundColor = () => {
+    switch (backgroundColor) {
+      case "transparent":
+        return void 0;
+      default:
+        return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "secondary-background";
+    }
+  };
+  const getArrowBackgroundColor = () => {
+    switch (backgroundColor) {
+      case "transparent":
+        return "ui:fill-transparent";
+      default:
+        return "ui:fill-secondary-background";
+    }
+  };
+  return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: getBackgroundColor(), px: "m", py: "xs", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: getArrowBackgroundColor() })] })) });
 };
 Content$2.displayName = "Tooltip.Content";
 const Root$1 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
@@ -5231,7 +5246,119 @@ const Textarea = React__namespace.default.forwardRef((_a, ref) => {
   ]), style, ref }));
 });
 
-var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}";
+const LinkTooltip = ({ linkElement, quillInstance, onClose }) => {
+  const dialogRef = React.useRef(null);
+  const anchorName = React.useRef(`link-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
+  React.useEffect(() => {
+    var _a;
+    linkElement.style.setProperty("anchor-name", `--${anchorName.current}`);
+    (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.show();
+    return () => {
+      linkElement.style.removeProperty("anchor-name");
+    };
+  }, [linkElement]);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      if (linkElement.contains(target) || ((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+        return;
+      }
+      (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.close();
+      onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [linkElement, onClose]);
+  const handleEditLink = () => {
+    const currentUrl = linkElement.getAttribute("href") || "";
+    const newUrl = prompt("Link URL:", currentUrl);
+    if (newUrl !== null) {
+      const blot = quillInstance.scroll.find(linkElement);
+      if (blot) {
+        const index = quillInstance.getIndex(blot);
+        const length = blot.length();
+        quillInstance.setSelection(index, length);
+        quillInstance.format("link", newUrl || false);
+      }
+    }
+    onClose();
+  };
+  const handleRemoveLink = () => {
+    const blot = quillInstance.scroll.find(linkElement);
+    if (blot) {
+      const index = quillInstance.getIndex(blot);
+      const length = blot.length();
+      quillInstance.setSelection(index, length);
+      quillInstance.format("link", false);
+    }
+    onClose();
+  };
+  const url = linkElement.getAttribute("href") || "";
+  return jsxRuntime.jsx("dialog", { ref: dialogRef, className: "ui:m-0 ui:p-0 ui:border-0 ui:bg-transparent", style: {
+    position: "absolute",
+    // @ts-expect-error - CSS anchor positioning is not yet in TypeScript types
+    positionAnchor: `--${anchorName.current}`,
+    top: "anchor(bottom)",
+    left: "anchor(left)",
+    marginTop: "8px"
+  }, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { p: "xs", children: jsxRuntime.jsxs(Text, { children: ["Visit URL:", " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: "xs", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, text: "Edit", size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, text: "Remove", size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, text: "Close", size: "medium" })] })] }) }) });
+};
+
+const TextEditorToolbarButton = ({ option, hasTextSelected }) => {
+  const buttonClasses = "ui:aria-pressed:bg-primary-background ui:aria-disabled:cursor-not-allowed";
+  if (typeof option === "string") {
+    switch (option) {
+      case "bold":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "bold", className: `ql-bold ${buttonClasses}`, children: jsxRuntime.jsx(solid.BoldIcon, { width: 16 }) });
+      case "italic":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "italic", className: `ql-italic ${buttonClasses}`, children: jsxRuntime.jsx(solid.ItalicIcon, { width: 16 }) });
+      case "underline":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "underline", className: `ql-underline ${buttonClasses}`, children: jsxRuntime.jsx(solid.UnderlineIcon, { width: 16 }) });
+      case "strike":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "strike", className: `ql-strike ${buttonClasses}`, children: jsxRuntime.jsx(solid.StrikethroughIcon, { width: 16 }) });
+      case "link":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "link", className: `ql-link ${buttonClasses}`, disabled: !hasTextSelected, children: jsxRuntime.jsx(solid.LinkIcon, { width: 16 }) });
+      case "video":
+        return jsxRuntime.jsx(TertiaryIconButton, { label: "video", className: `ql-video ${buttonClasses}`, children: jsxRuntime.jsx(solid.VideoCameraIcon, { width: 16 }) });
+      default:
+        return null;
+    }
+  } else if (typeof option === "object" && "list" in option) {
+    if (option.list === "ordered") {
+      return jsxRuntime.jsx(TertiaryIconButton, { label: "ordered list", className: `ql-list ${buttonClasses}`, value: "ordered", children: jsxRuntime.jsx(solid.NumberedListIcon, { width: 16 }) });
+    } else if (option.list === "bullet") {
+      return jsxRuntime.jsx(TertiaryIconButton, { label: "bullet list", className: `ql-list ${buttonClasses}`, value: "bullet", children: jsxRuntime.jsx(solid.ListBulletIcon, { width: 16 }) });
+    }
+  }
+  return null;
+};
+
+const getOptionKey = (option, index) => {
+  if (typeof option === "string") {
+    return option;
+  } else if (typeof option === "object" && "list" in option) {
+    return `list-${option.list}`;
+  }
+  return `option-${index}`;
+};
+const getGroupKey = (group) => {
+  return group.map((option) => {
+    if (typeof option === "string") {
+      return option;
+    } else if (typeof option === "object" && "list" in option) {
+      return `list-${option.list}`;
+    }
+    return "";
+  }).join("-");
+};
+const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected }) => {
+  return jsxRuntime.jsx(Stack, { axis: "x", gap: "m", px: "xxxs", id: toolbarId, children: toolbar.map((group) => jsxRuntime.jsx(Stack, { axis: "x", gap: "xxxxs", children: group.map((option, optionIndex) => jsxRuntime.jsx(TextEditorToolbarButton, { option, hasTextSelected }, getOptionKey(option, optionIndex))) }, getGroupKey(group))) });
+};
+
+var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n}\n.ql-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.ql-editor ul,\n.ql-editor ol {\n  padding-left: 1.5rem;\n}\n.ql-editor ul {\n  list-style-type: disc;\n}\n.ql-editor ol {\n  list-style-type: decimal;\n}\n.ql-editor li {\n  margin-bottom: 0.25rem;\n}\n.ql-editor strong {\n  font-weight: 600;\n}\n.ql-editor em {\n  font-style: italic;\n}\n.ql-editor u {\n  text-decoration: underline;\n}\n.ql-editor s {\n  text-decoration: line-through;\n}\n.ql-editor h1,\n.ql-editor h2,\n.ql-editor h3,\n.ql-editor h4,\n.ql-editor h5,\n.ql-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.ql-editor h1:first-child,\n.ql-editor h2:first-child,\n.ql-editor h3:first-child,\n.ql-editor h4:first-child,\n.ql-editor h5:first-child,\n.ql-editor h6:first-child {\n  margin-top: 0;\n}\n.ql-editor h1 {\n  font-size: 2rem;\n}\n.ql-editor h2 {\n  font-size: 1.5rem;\n}\n.ql-editor h3 {\n  font-size: 1.25rem;\n}\n.ql-editor h4 {\n  font-size: 1.125rem;\n}\n.ql-editor h5,\n.ql-editor h6 {\n  font-size: 1rem;\n}";
 styleInject(css_248z$1);
 
 const TextEditor = (_a) => {
@@ -5240,36 +5367,62 @@ const TextEditor = (_a) => {
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
   ], placeholder, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "onValueChange"]);
+  const rawId = React.useId();
+  const toolbarId = `toolbar-${rawId.replace(/:/g, "")}`;
   const defaultValueRef = React.useRef(defaultValue);
   const onTextChangeRef = React.useRef(onValueChange);
   const editorRef = React.useRef(null);
   const quillRef = React.useRef(null);
+  const [linkTooltip, setLinkTooltip] = React.useState(null);
+  const [hasTextSelected, setHasTextSelected] = React.useState(false);
   React.useLayoutEffect(() => {
     onTextChangeRef.current = onValueChange;
   });
   React.useEffect(() => {
-    if (editorRef.current) {
-      const quill = new Quill__default.default(editorRef.current, {
-        theme: "snow",
-        formats,
-        modules: {
-          toolbar
-        },
-        placeholder
-      });
-      quill.on(Quill__default.default.events.TEXT_CHANGE, (value, _, source) => {
-        var _a2;
-        (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, quill.getSemanticHTML(), value, source);
-      });
-      if (defaultValueRef.current) {
-        quill.setContents(quill.clipboard.convert({
-          html: defaultValueRef.current
-        }));
-      }
-      quillRef.current = quill;
+    if (!editorRef.current || quillRef.current) {
+      return void 0;
+    }
+    const editor = editorRef.current;
+    const quill = new Quill__default.default(editor, {
+      formats,
+      modules: {
+        toolbar: `#${toolbarId}`
+      },
+      placeholder
+    });
+    quill.on(Quill__default.default.events.TEXT_CHANGE, (value, _, source) => {
+      var _a2;
+      (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, quill.getSemanticHTML(), value, source);
+    });
+    const handleSelectionChange = () => {
+      const selection = quill.getSelection();
+      setHasTextSelected(selection ? selection.length > 0 : false);
+    };
+    quill.on(Quill__default.default.events.SELECTION_CHANGE, handleSelectionChange);
+    if (defaultValueRef.current) {
+      quill.setContents(quill.clipboard.convert({
+        html: defaultValueRef.current
+      }));
+    }
+    quillRef.current = quill;
+    const qlEditor = editor.querySelector(".ql-editor");
+    if (qlEditor) {
+      qlEditor.classList.add("ui:overflow-auto", "ui:resize-y", "ui:min-h-40");
     }
+    const handleEditorClick = (e) => {
+      const target = e.target;
+      if (target.tagName === "A") {
+        e.preventDefault();
+        const anchor = target;
+        setLinkTooltip(anchor);
+      }
+    };
+    editor.addEventListener("click", handleEditorClick);
+    return () => {
+      editor.removeEventListener("click", handleEditorClick);
+    };
   }, []);
-  return jsxRuntime.jsx("div", Object.assign({}, attrs, { children: jsxRuntime.jsx("div", { ref: editorRef }) }));
+  return jsxRuntime.jsxs(Card, Object.assign({ padding: false, border: true, borderRadius: "xs", backgroundColor: "base" }, attrs, { children: [jsxRuntime.jsx(Card.TopBar, { children: jsxRuntime.jsx(Card.Actions, { className: "ui:justify-start", children: jsxRuntime.jsx(TextEditorToolbar, { toolbarId, toolbar, hasTextSelected }) }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsx("div", { className: "editor", ref: editorRef }), jsxRuntime.jsx("div", { children: linkTooltip && quillRef.current && jsxRuntime.jsx(LinkTooltip, { linkElement: linkTooltip, quillInstance: quillRef.current, onClose: () => setLinkTooltip(null) }) })] }));
 };
 
 const TextLink = (props) => {
@@ -6151,49 +6304,14 @@ const generateIntermediateTicks = (args) => {
   }
   return Array.from(tickSet).sort((a, b) => isDescending ? b - a : a - b);
 };
-const colorsAreEqual = (colorA, colorB) => {
-  const aIsStriped = isColorTuple(colorA);
-  const bIsStriped = isColorTuple(colorB);
-  if (aIsStriped !== bIsStriped) {
-    return false;
-  }
-  if (aIsStriped && bIsStriped) {
-    return colorA[0] === colorB[0] && colorA[1] === colorB[1];
-  }
-  return colorA === colorB;
-};
-const mergeAdjacentSections = (sections) => {
-  if (sections.length === 0) {
-    return [];
-  }
-  const sorted = [...sections].sort((a, b) => {
-    const aStart = Math.min(a.from, a.to);
-    const bStart = Math.min(b.from, b.to);
-    return aStart - bStart;
-  });
-  const merged = [Object.assign({}, sorted[0])];
-  for (let i = 1; i < sorted.length; i++) {
-    const current = sorted[i];
-    const previous = merged[merged.length - 1];
-    const prevEnd = Math.max(previous.from, previous.to);
-    const currentStart = Math.min(current.from, current.to);
-    const currentEnd = Math.max(current.from, current.to);
-    if (prevEnd === currentStart && colorsAreEqual(previous.color, current.color)) {
-      previous.to = currentEnd;
-    } else {
-      merged.push(Object.assign({}, current));
-    }
-  }
-  return merged;
-};
-const calculateSegments = (sections, start, end) => {
+const calculateSegments = (args) => {
+  const { sections, start, end } = args;
   const isDescending = start > end;
   const rangeMin = Math.min(start, end);
   const rangeMax = Math.max(start, end);
   const totalRange = Math.abs(end - start);
   const segments = [];
-  const mergedSections = mergeAdjacentSections(sections);
-  const normalizedSections = mergedSections.map((section) => {
+  const normalizedSections = sections.map((section) => {
     const clampedFrom = Math.max(rangeMin, Math.min(rangeMax, section.from));
     const clampedTo = Math.max(rangeMin, Math.min(rangeMax, section.to));
     const higher = Math.max(clampedFrom, clampedTo);
@@ -6203,7 +6321,8 @@ const calculateSegments = (sections, start, end) => {
     return {
       startPos,
       width,
-      color: section.color
+      color: section.color,
+      originalSection: section
     };
   }).filter((s) => s.width > 0).sort((a, b) => a.startPos - b.startPos);
   let currentPos = 0;
@@ -6211,19 +6330,26 @@ const calculateSegments = (sections, start, end) => {
     if (section.startPos > currentPos) {
       segments.push({
         widthPercent: section.startPos - currentPos,
-        color: "transparent"
+        color: "transparent",
+        originalSection: section.originalSection
       });
     }
     segments.push({
       widthPercent: section.width,
-      color: section.color
+      color: section.color,
+      originalSection: section.originalSection
     });
     currentPos = section.startPos + section.width;
   }
   if (currentPos < 100) {
     segments.push({
       widthPercent: 100 - currentPos,
-      color: "transparent"
+      color: "transparent",
+      originalSection: {
+        from: end,
+        to: end,
+        color: "transparent"
+      }
     });
   }
   return segments;
@@ -6287,11 +6413,11 @@ const ticksContainerStyle = {
   height: "20px"
 };
 const RangeCoverageComponent = (_a) => {
-  var { sections, start, end, ticks = [], tickFormatter, title, legendSwatches, translations, className } = _a, rest = __rest(_a, ["sections", "start", "end", "ticks", "tickFormatter", "title", "legendSwatches", "translations", "className"]);
+  var { sections, start, end, ticks = [], tickFormatter, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "ticks", "tickFormatter", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
   if (hasSectionOverlaps(sections)) {
     return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
   }
-  const segments = calculateSegments(sections, start, end);
+  const segments = calculateSegments({ sections, start, end });
   return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", gap: "m", children: jsxRuntime.jsx(Stack, { axis: "x", gap: "xxs", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
     const background = isColorTuple(swatch.color) ? createStripedPattern({
       colorA: swatch.color[0],
@@ -6299,7 +6425,39 @@ const RangeCoverageComponent = (_a) => {
       startOffset: -6
     }) : swatch.color;
     return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
-  }) }) })] }), jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment, index) => jsxRuntime.jsx("div", { style: Object.assign({ flexBasis: `${segment.widthPercent}%`, flexGrow: 0, flexShrink: 0 }, getSegmentStyle(segment.color)) }, index)) }) }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
+  }) }) })] }), jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
+    var _a2;
+    const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
+    const renderedTooltipContent = (_a2 = slots === null || slots === void 0 ? void 0 : slots.renderTooltipContent) === null || _a2 === void 0 ? void 0 : _a2.call(slots, sectionDataWithBackground);
+    const segmentStyle = Object.assign({ flexBasis: `calc(${segment.widthPercent}% - 1px)`, flexGrow: 0, flexShrink: 0, marginRight: "1px" }, getSegmentStyle(segment.color));
+    const ariaLabel = `${segment.originalSection.from} - ${segment.originalSection.to}`;
+    if (!renderedTooltipContent && !onSectionFocus) {
+      return jsxRuntime.jsx("div", { style: segmentStyle, "aria-label": ariaLabel }, ariaLabel);
+    }
+    if (!renderedTooltipContent) {
+      return jsxRuntime.jsx("button", { style: segmentStyle, "aria-label": ariaLabel, onFocus: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onBlur: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      }, onMouseEnter: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onMouseLeave: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      } }, ariaLabel);
+    }
+    return (
+      // Sections cannot overlap, so from-to should be unique
+      jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, style: segmentStyle, onFocus: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onBlur: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      }, onMouseEnter: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onMouseLeave: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      } }) }), jsxRuntime.jsx(Tooltip.Content, { backgroundColor: "transparent", side: "bottom", sideOffset: 16, children: jsxRuntime.jsx(Card, { border: true, elevation: "medium", children: renderedTooltipContent }) })] }, ariaLabel)
+    );
+  }) }) }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
     const totalRange = Math.abs(end - start);
     const isDescending = start > end;
     const position = isDescending ? (start - tick) / totalRange * 100 : (tick - start) / totalRange * 100;