@luscii-healthtech/web-ui 58.5.0 → 58.6.1

package/dist/index.development.js

@@ -2556,8 +2556,22 @@ const LabelText = (props) => {
 };
 
 const StyledCheckbox = React__namespace.default.forwardRef((props, ref) => {
-  const { className } = props, attributes = __rest(props, ["className"]);
-  return jsxRuntime.jsx("input", Object.assign({ ref, type: "checkbox" }, attributes, { className: classNames__default.default(
+  const { className, indeterminate } = props, attributes = __rest(props, ["className", "indeterminate"]);
+  const inputRef = React__namespace.default.useRef(null);
+  const setRefs = React__namespace.default.useCallback((node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  React__namespace.default.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = !!indeterminate;
+    }
+  });
+  return jsxRuntime.jsx("input", Object.assign({ ref: setRefs }, attributes, { type: "checkbox", className: classNames__default.default(
     "ui:block ui:appearance-none ui:w-6 ui:h-6 ui:rounded",
     "ui:cursor-pointer ui:disabled:cursor-not-allowed",
     // Default styles
@@ -2566,15 +2580,21 @@ const StyledCheckbox = React__namespace.default.forwardRef((props, ref) => {
     "ui:hover:border-border-neutral-primary-hovered",
     // Checked styles
     "ui:checked:bg-icon-brand-primary-default ui:checked:border-border-brand-primary-default ui:checked:before:scale-[1]",
+    // Indeterminate styles
+    "ui:indeterminate:bg-icon-brand-primary-default ui:indeterminate:border-border-brand-primary-default ui:indeterminate:before:scale-[1]",
     // Disabled styles
     "ui:disabled:border-border-neutral-primary-disabled",
     // Disabled and checked styles
     "ui:disabled:checked:bg-icon-brand-primary-disabled",
+    // Disabled and indeterminate styles
+    "ui:disabled:indeterminate:bg-icon-brand-primary-disabled",
     // Checked and hovered styles
     "ui:checked:hover:bg-icon-brand-primary-hover",
+    // Indeterminate and hovered styles
+    "ui:indeterminate:hover:bg-icon-brand-primary-hover",
     "ui:transition-colors ui:duration-150 ui:ease-in-out",
     "ui:before:content-[''] ui:before:block ui:before:w-full ui:before:h-full",
-    "ui:before:bg-[url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.0421%200.43918C13.3233%200.720471%2013.4812%201.10193%2013.4812%201.49968C13.4812%201.89743%2013.3233%202.27889%2013.0421%202.56018L5.54207%2010.0602C5.26078%2010.3414%204.87931%2010.4994%204.48157%2010.4994C4.08382%2010.4994%203.70236%2010.3414%203.42107%2010.0602L0.421068%207.06018C0.147831%206.77728%20-0.00336092%206.39837%205.6704e-05%206.00508C0.00347433%205.61178%200.161228%205.23556%200.43934%204.95745C0.717452%204.67934%201.09367%204.52159%201.48697%204.51817C1.88026%204.51475%202.25916%204.66594%202.54207%204.93918L4.48157%206.87868L10.9211%200.43918C11.2024%200.157973%2011.5838%200%2011.9816%200C12.3793%200%2012.7608%200.157973%2013.0421%200.43918Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')] ui:before:bg-center ui:before:bg-no-repeat",
+    "ui:not-indeterminate:before:bg-[url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.0421%200.43918C13.3233%200.720471%2013.4812%201.10193%2013.4812%201.49968C13.4812%201.89743%2013.3233%202.27889%2013.0421%202.56018L5.54207%2010.0602C5.26078%2010.3414%204.87931%2010.4994%204.48157%2010.4994C4.08382%2010.4994%203.70236%2010.3414%203.42107%2010.0602L0.421068%207.06018C0.147831%206.77728%20-0.00336092%206.39837%205.6704e-05%206.00508C0.00347433%205.61178%200.161228%205.23556%200.43934%204.95745C0.717452%204.67934%201.09367%204.52159%201.48697%204.51817C1.88026%204.51475%202.25916%204.66594%202.54207%204.93918L4.48157%206.87868L10.9211%200.43918C11.2024%200.157973%2011.5838%200%2011.9816%200C12.3793%200%2012.7608%200.157973%2013.0421%200.43918Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')] ui:indeterminate:before:bg-[url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2210%22%20height%3D%222%22%20viewBox%3D%220%200%2010%202%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%20-4.37114e-08C9.55228%20-1.95703e-08%2010%200.447715%2010%201C10%201.55228%209.55228%202%209%202L1%202C0.447716%202%20-6.78525e-08%201.55228%20-4.37114e-08%201C-1.95703e-08%200.447715%200.447715%20-4.17544e-07%201%20-3.93402e-07L9%20-4.37114e-08Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')] ui:before:bg-center ui:before:bg-no-repeat",
     "ui:before:scale-[0] ui:before:transition-[scale] ui:before:duration-200 ui:before:ease-[cubic-bezier(.17,.67,.16,1.5)]",
     className
   ) }));
@@ -3864,46 +3884,25 @@ var CheckboxState;
 })(CheckboxState || (CheckboxState = {}));
 
 const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCollapsed = true, collapsible = true }) => {
-  const [groupCheckboxState, setGroupCheckboxState] = React.useState(CheckboxState.UNCHECKED);
+  const groupCheckboxId = React__namespace.default.useId();
   const [collapsed, setCollapsed] = React.useState(collapsible ? isCollapsed : false);
-  const [isDisabled, setIsDisabled] = React.useState(false);
-  React.useEffect(() => {
-    if (items.length === 0) {
-      return;
-    }
-    const enabledItems = items.filter((item) => !item.isDisabled);
-    const allItemsChecked = items.every((item) => item.isChecked);
-    if (enabledItems.length === 0) {
-      setGroupCheckboxState(allItemsChecked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED);
-      setIsDisabled(true);
-      return;
-    }
-    const indeterminate = enabledItems.some((item) => item.isChecked !== enabledItems[0].isChecked);
-    if (indeterminate) {
-      setGroupCheckboxState(CheckboxState.INDETERMINATE);
-      return;
-    }
-    if (enabledItems[0].isChecked) {
-      setGroupCheckboxState(CheckboxState.CHECKED);
-    } else if (!enabledItems[0].isChecked) {
-      setGroupCheckboxState(CheckboxState.UNCHECKED);
-    }
-    setIsDisabled(!enabledItems.some((item) => !item.isDisabled));
-  }, [items]);
+  const enabledItems = items.filter((item) => !item.isDisabled);
+  const isDisabled = items.length > 0 && enabledItems.length === 0;
+  const groupCheckboxState = getGroupCheckboxState({ items, enabledItems });
   const handleGroupClick = (event) => {
     event.stopPropagation();
-    const enabledItems = [];
+    const itemsToChange = [];
     const newState = [];
     items.forEach((item) => {
       if (item.isDisabled) {
         newState.push(item);
         return;
       }
-      enabledItems.push(item);
+      itemsToChange.push(item);
       newState.push(Object.assign(Object.assign({}, item), { isChecked: event.currentTarget.checked }));
     });
     const newCheckedValue = event.currentTarget.checked;
-    enabledItems.forEach((item) => onChange === null || onChange === void 0 ? void 0 : onChange({ id: item.id, newCheckedValue }));
+    itemsToChange.forEach((item) => onChange === null || onChange === void 0 ? void 0 : onChange({ id: item.id, newCheckedValue }));
     onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(newState);
   };
   const handleGroupCollapse = (event) => {
@@ -3913,6 +3912,7 @@ const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCol
     }
   };
   const handleCheckboxChange = (e) => {
+    e.stopPropagation();
     onChange === null || onChange === void 0 ? void 0 : onChange({
       id: e.target.id,
       newCheckedValue: e.target.checked
@@ -3926,14 +3926,31 @@ const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCol
   };
   const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
   const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col", className), children: [title && jsxRuntime.jsxs("div", { className: "ui:flex ui:w-full ui:flex-row ui:items-center", children: [jsxRuntime.jsx(Checkbox, { renderLabel: () => jsxRuntime.jsx(Text, { variant: "strong", children: groupTitle }), onChange: handleGroupClick, isChecked: groupCheckboxState === CheckboxState.CHECKED, isDisabled, isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, className: "ui:flex-1 ui:py-3" }, title), collapsible && jsxRuntime.jsx(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col", className), children: [title && jsxRuntime.jsxs("div", { className: "ui:flex ui:w-full ui:flex-row ui:items-center", children: [jsxRuntime.jsx(LabeledCheckbox, { id: groupCheckboxId, onChange: handleGroupClick, checked: groupCheckboxState === CheckboxState.CHECKED, indeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, disabled: isDisabled, className: "ui:flex-1 ui:py-3", children: jsxRuntime.jsx(Text, { as: "span", variant: "strong", children: groupTitle }) }), collapsible && jsxRuntime.jsx(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
     groupTitle: title,
     collapsed
-  }), collapsed, type: "button", onClick: handleGroupCollapse })] }), !collapsed && items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", {
-    "ui:ml-10": collapsible,
-    "ui:ml-5": !collapsible
-  }) })))] });
+  }), collapsed, type: "button", onClick: handleGroupCollapse })] }), !collapsed && items.map((item) => {
+    var _a;
+    return jsxRuntime.jsx(LabeledCheckbox, { id: item.id, name: item.name, value: item.value, label: item.label, helperText: item.explanation, checked: (_a = item.isChecked) !== null && _a !== void 0 ? _a : false, disabled: item.isDisabled, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", {
+      "ui:ml-10": collapsible,
+      "ui:ml-5": !collapsible
+    }, item.className) }, item.id);
+  })] });
 };
+function getGroupCheckboxState(args) {
+  const { items, enabledItems } = args;
+  if (items.length === 0) {
+    return CheckboxState.UNCHECKED;
+  }
+  if (enabledItems.length === 0) {
+    return items.every((item) => item.isChecked) ? CheckboxState.CHECKED : CheckboxState.UNCHECKED;
+  }
+  const isIndeterminate = enabledItems.some((item) => item.isChecked !== enabledItems[0].isChecked);
+  if (isIndeterminate) {
+    return CheckboxState.INDETERMINATE;
+  }
+  return enabledItems[0].isChecked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED;
+}
 function getGroupCollapseButtonAriaLabel(args) {
   const { groupTitle, collapsed } = args;
   const localizedActionLabel = collapsed ? "Expand" : "Collapse";
@@ -3956,6 +3973,7 @@ function GroupCollapseButton(props) {
 
 const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
   const handleCheckboxChange = (e) => {
+    e.stopPropagation();
     onChange === null || onChange === void 0 ? void 0 : onChange({
       id: e.target.id,
       newCheckedValue: e.target.checked
@@ -3984,7 +4002,10 @@ const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
       const groupTitle = group.title;
       return jsxRuntime.jsx(CheckboxGroup, { items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange, onStateChange: (items) => handleGroupChange({ groupTitle, items }) }, group.title);
     } else {
-      return group.items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, classNameCheckboxLabel: "ui:py-3" })));
+      return group.items.map((item) => {
+        var _a;
+        return jsxRuntime.jsx(LabeledCheckbox, { id: item.id, name: item.name, value: item.value, label: item.label, helperText: item.explanation, checked: (_a = item.isChecked) !== null && _a !== void 0 ? _a : false, disabled: item.isDisabled, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", item.className) }, item.id);
+      });
     }
   }) });
 };
@@ -6753,6 +6774,12 @@ const calculateHighlightPosition = (args) => {
   const leftFraction = isDescending ? (start - higher) / totalRange : (lower - start) / totalRange;
   return { leftFraction, widthFraction };
 };
+const calculateTickPosition = (args) => {
+  const { tick, start, end } = args;
+  const totalRange = Math.abs(end - start);
+  const isDescending = start > end;
+  return isDescending ? (start - tick) / totalRange * 100 : (tick - start) / totalRange * 100;
+};
 const createStripedPattern = (options) => {
   const { colorA, colorB, startOffset = 0 } = options;
   const STRIPE_THICKNESS = 4;
@@ -6761,7 +6788,7 @@ const createStripedPattern = (options) => {
 };
 const getSegmentStyle = (color) => {
   const baseStyle = {
-    height: "18px",
+    height: "24px",
     boxSizing: "content-box"
   };
   if (isColorTuple(color)) {
@@ -6780,20 +6807,27 @@ const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";
 const COLOR_RED = "var(--ui-color-border-error-primary-default)";
 const COLOR_AMBER = "var(--ui-color-icon-warning-secondary-default)";
 const COLOR_BLUE = COLOR_GREY_LIGHT;
-const BORDER_COLOR = "var(--ui-color-border-neutral-secondary-default)";
-const BORDER_RADIUS = "var(--ui-radius-sm, 4px)";
-const COLOR_GAP = [
-  "var(--ui-color-background-info-secondary-hovered)",
-  "var(--ui-color-background-info-primary-hovered)"
-];
+const BORDER_RADIUS = "var(--ui-semantic-radius-s, 4px)";
+const COLOR_GAP = "var(--ui-color-background-brand-secondary-default)";
 const COLOR_OVERLAP = [
   "var(--ui-color-background-info-secondary-hovered)",
   "var(--ui-color-border-neutral-primary-default)"
 ];
 const COLOR_FILL = "var(--ui-color-background-info-secondary-hovered)";
+const COLOR_ALERT_HIGH_SALMON = "var(--ui-color-icon-alerts-high-salmon)";
+const COLOR_ALERT_HIGH_CRIMSON = "var(--ui-color-icon-alerts-high-crimson)";
+const COLOR_ALERT_HIGH_RED = "var(--ui-color-icon-alerts-high-red)";
+const COLOR_ALERT_MEDIUM_SUN = "var(--ui-color-icon-alerts-medium-sun)";
+const COLOR_ALERT_MEDIUM_OAK = "var(--ui-color-icon-alerts-medium-oak)";
+const COLOR_ALERT_MEDIUM_AMBER = "var(--ui-color-icon-alerts-medium-amber)";
+const COLOR_ALERT_LOW_MINT = "var(--ui-color-icon-alerts-low-mint)";
+const COLOR_ALERT_LOW_LEAF = "var(--ui-color-icon-alerts-low-leaf)";
+const COLOR_ALERT_LOW_GREEN = "var(--ui-color-icon-alerts-low-green)";
+const COLOR_ALERT_NONE_FOG = "var(--ui-color-icon-alerts-neutral-fog)";
+const COLOR_ALERT_NONE_NEUTRAL = "var(--ui-color-icon-alerts-neutral-neutral)";
+const COLOR_ALERT_NONE_GRAPHITE = "var(--ui-color-icon-alerts-neutral-graphite)";
 const barContainerStyle = {
   width: "100%",
-  border: `1px solid ${BORDER_COLOR}`,
   borderRadius: BORDER_RADIUS,
   overflow: "hidden"
 };
@@ -6802,14 +6836,13 @@ const barStyle = {
   alignItems: "center",
   width: "100%",
   height: "24px",
-  padding: "0 3px",
-  // 3px looks better than 4px
+  // Must match the segments' own height so they fill the rounded container flush, with no gap.
   boxSizing: "border-box"
 };
 const HIGHLIGHT_RING_COLOR = "var(--ui-color-border-brand-primary-selected)";
 const HIGHLIGHT_RING_WIDTH = 2;
 const HIGHLIGHT_RING_INSET = 4;
-const BAR_HORIZONTAL_PADDING = 3;
+const BAR_HORIZONTAL_PADDING = 0;
 const getHighlightStyle = (position) => ({
   position: "absolute",
   top: -HIGHLIGHT_RING_INSET,
@@ -6826,10 +6859,37 @@ const ticksContainerStyle = {
   width: "100%",
   height: "20px"
 };
+const AXIS_LINE_COLOR = "var(--ui-color-border-neutral-secondary-default)";
+const TICK_MARK_HEIGHT = 8;
+const axisStyle = {
+  position: "relative",
+  width: "100%",
+  height: `${TICK_MARK_HEIGHT}px`
+};
+const axisLineStyle = {
+  position: "absolute",
+  top: "50%",
+  left: 0,
+  right: 0,
+  height: "1px",
+  background: AXIS_LINE_COLOR,
+  transform: "translateY(-50%)"
+};
+const tickMarkStyle = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: "1px",
+  background: AXIS_LINE_COLOR,
+  transform: "translateX(-50%)"
+};
 const RangeCoverageComponent = (_a) => {
-  var { sections, start, end, highlightedRange, ticks = [], tickFormatter, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "highlightedRange", "ticks", "tickFormatter", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
+  var _b, _c;
+  var { sections, start, end, highlightedRange, ticks = [], tickFormatter, showEdgeTickMarks, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "highlightedRange", "ticks", "tickFormatter", "showEdgeTickMarks", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
   const { tooltipContent } = slots !== null && slots !== void 0 ? slots : {};
   const idPrefix = React.useId();
+  const showStartTickMark = (_b = showEdgeTickMarks === null || showEdgeTickMarks === void 0 ? void 0 : showEdgeTickMarks.start) !== null && _b !== void 0 ? _b : true;
+  const showEndTickMark = (_c = showEdgeTickMarks === null || showEdgeTickMarks === void 0 ? void 0 : showEdgeTickMarks.end) !== null && _c !== void 0 ? _c : true;
   if (hasSectionOverlaps(sections)) {
     return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
   }
@@ -6846,11 +6906,19 @@ const RangeCoverageComponent = (_a) => {
       startOffset: -6
     }) : swatch.color;
     return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { id: legendIdByLabel.get(swatch.label), role: "img", "aria-label": swatch.label, style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
-  }) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
-    var _a2, _b;
+  }) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment, index) => {
+    var _a2, _b2;
+    const isLastSegment = index === segments.length - 1;
     const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
     const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
-    const segmentStyle = Object.assign({ flexBasis: `calc(${segment.widthPercent}% - 1px)`, flexGrow: 0, flexShrink: 0, marginRight: "1px" }, getSegmentStyle(segment.color));
+    const segmentStyle = Object.assign({
+      // Subtract the gap from the width, except for the last segment,
+      // which has no following gap and should reach the container's edge.
+      flexBasis: isLastSegment ? `${segment.widthPercent}%` : `calc(${segment.widthPercent}% - 1px)`,
+      flexGrow: 0,
+      flexShrink: 0,
+      marginRight: isLastSegment ? 0 : "1px"
+    }, getSegmentStyle(segment.color));
     const ariaLabel = `${segment.originalSection.from} - ${segment.originalSection.to}`;
     const legendId = segment.originalSection.legendLabel ? legendIdByLabel.get(segment.originalSection.legendLabel) : void 0;
     if (!renderedTooltipContent && !onSectionFocus) {
@@ -6869,7 +6937,7 @@ const RangeCoverageComponent = (_a) => {
     }
     return (
       // Sections cannot overlap, so from-to should be unique
-      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b !== void 0 ? _b : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, "aria-describedby": legendId, style: segmentStyle, onFocus: () => {
+      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b2 !== void 0 ? _b2 : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, "aria-describedby": legendId, style: segmentStyle, onFocus: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
       }, onBlur: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
@@ -6882,10 +6950,19 @@ const RangeCoverageComponent = (_a) => {
         maxWidth: 600
       }, children: jsxRuntime.jsx(Card, { border: true, elevation: "medium", width: "full", children: renderedTooltipContent }) })] }, ariaLabel)
     );
-  }) }) }), highlightPosition && highlightedRange && jsxRuntime.jsx("div", { role: "img", "aria-label": highlightedRange.label ? `${highlightedRange.label} (${highlightedRange.from} - ${highlightedRange.to})` : `${highlightedRange.from} - ${highlightedRange.to}`, style: getHighlightStyle(highlightPosition) })] }), 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;
+  }) }) }), highlightPosition && highlightedRange && jsxRuntime.jsx("div", { role: "img", "aria-label": highlightedRange.label ? `${highlightedRange.label} (${highlightedRange.from} - ${highlightedRange.to})` : `${highlightedRange.from} - ${highlightedRange.to}`, style: getHighlightStyle(highlightPosition) })] }), ticks.length > 0 && jsxRuntime.jsxs(Stack, { _gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: axisStyle, children: [jsxRuntime.jsx("div", { style: axisLineStyle }), ticks.map((tick, index) => {
+    const isFirst = index === 0;
+    const isLast = index === ticks.length - 1;
+    if (isFirst && !showStartTickMark) {
+      return null;
+    }
+    if (isLast && !showEndTickMark) {
+      return null;
+    }
+    const position = calculateTickPosition({ tick, start, end });
+    return jsxRuntime.jsx("div", { "aria-hidden": "true", style: Object.assign(Object.assign({}, tickMarkStyle), { left: `${position}%` }) }, tick);
+  })] }), jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
+    const position = calculateTickPosition({ tick, start, end });
     const isFirst = index === 0;
     const isLast = index === ticks.length - 1;
     const content = tickFormatter ? tickFormatter(tick) : tick;
@@ -6896,7 +6973,7 @@ const RangeCoverageComponent = (_a) => {
       left: `${position}%`,
       transform: isFirst ? "translateX(0%)" : isLast ? "translateX(-100%)" : "translateX(-50%)"
     }, children: content }, tick);
-  }) })] })] }) }));
+  }) })] })] })] }) }));
 };
 const RangeCoverage = Object.assign(RangeCoverageComponent, {
   Colors: {
@@ -6907,7 +6984,33 @@ const RangeCoverage = Object.assign(RangeCoverageComponent, {
     BLUE: COLOR_BLUE,
     FILL: COLOR_FILL,
     GAP: COLOR_GAP,
-    OVERLAP: COLOR_OVERLAP
+    OVERLAP: COLOR_OVERLAP,
+    ALERT: {
+      HIGH: {
+        DEFAULT: COLOR_ALERT_HIGH_SALMON,
+        SALMON: COLOR_ALERT_HIGH_SALMON,
+        CRIMSON: COLOR_ALERT_HIGH_CRIMSON,
+        RED: COLOR_ALERT_HIGH_RED
+      },
+      MEDIUM: {
+        DEFAULT: COLOR_ALERT_MEDIUM_SUN,
+        SUN: COLOR_ALERT_MEDIUM_SUN,
+        OAK: COLOR_ALERT_MEDIUM_OAK,
+        AMBER: COLOR_ALERT_MEDIUM_AMBER
+      },
+      LOW: {
+        DEFAULT: COLOR_ALERT_LOW_MINT,
+        MINT: COLOR_ALERT_LOW_MINT,
+        LEAF: COLOR_ALERT_LOW_LEAF,
+        GREEN: COLOR_ALERT_LOW_GREEN
+      },
+      NONE: {
+        DEFAULT: COLOR_ALERT_NONE_FOG,
+        FOG: COLOR_ALERT_NONE_FOG,
+        NEUTRAL: COLOR_ALERT_NONE_NEUTRAL,
+        GRAPHITE: COLOR_ALERT_NONE_GRAPHITE
+      }
+    }
   },
   useAdaptiveTicks
 });