@structyl/primitives 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -6496,7 +6496,7 @@ var Timeline = {
   Content: TimelineContent
 };
 var ClickAwayListener = React62__namespace.forwardRef(
-  ({ children, onClickAway }, ref) => {
+  ({ children, onClickAway, style, ...rest }, ref) => {
     const localRef = React62__namespace.useRef(null);
     const composedRef = hooks.useComposedRefs(ref, localRef);
     React62__namespace.useEffect(() => {
@@ -6514,7 +6514,7 @@ var ClickAwayListener = React62__namespace.forwardRef(
         document.removeEventListener("touchstart", handlePointer);
       };
     }, [onClickAway]);
-    return /* @__PURE__ */ React62__namespace.createElement("span", { ref: composedRef, style: { display: "contents" } }, children);
+    return /* @__PURE__ */ React62__namespace.createElement("span", { ref: composedRef, ...rest, style: { display: "contents", ...style } }, children);
   }
 );
 ClickAwayListener.displayName = "ClickAwayListener";
@@ -6541,7 +6541,7 @@ function parsePlacement(placement) {
   return { side, align: align ?? "center" };
 }
 var Popper8 = React62__namespace.forwardRef(
-  ({ open, anchorEl: anchorElProp, placement = "bottom", children, className, style, keepMounted = false, disablePortal = false, container }, ref) => {
+  ({ open, anchorEl: anchorElProp, placement = "bottom", children, className, style, keepMounted = false, disablePortal = false, container, ...rest }, ref) => {
     const virtualRef = React62__namespace.useRef({ getBoundingClientRect: () => getAnchorEl(anchorElProp)?.getBoundingClientRect() ?? new DOMRect() });
     React62__namespace.useEffect(() => {
       virtualRef.current.getBoundingClientRect = () => getAnchorEl(anchorElProp)?.getBoundingClientRect() ?? new DOMRect();
@@ -6555,6 +6555,7 @@ var Popper8 = React62__namespace.forwardRef(
         side,
         align,
         sideOffset: 4,
+        ...rest,
         style: { display: !open ? "none" : void 0, ...style },
         className
       },
@@ -7632,39 +7633,40 @@ var NextButton = React62__namespace.forwardRef((props, forwardedRef) => {
   );
 });
 NextButton.displayName = "Calendar.NextButton";
-var Heading = ({
-  format = { month: "long", year: "numeric" },
-  locale
-}) => {
+var Heading = React62__namespace.forwardRef((props, forwardedRef) => {
+  const { format = { month: "long", year: "numeric" }, locale, ...rest } = props;
   const ctx = useCalendarContext("Calendar.Heading");
-  return /* @__PURE__ */ React62__namespace.createElement("span", { "aria-live": "polite" }, new Intl.DateTimeFormat(locale ?? ctx.locale, format).format(ctx.displayMonth));
-};
+  return /* @__PURE__ */ React62__namespace.createElement(core.Primitive.span, { ...rest, ref: forwardedRef, "aria-live": "polite" }, new Intl.DateTimeFormat(locale ?? ctx.locale, format).format(ctx.displayMonth));
+});
 Heading.displayName = "Calendar.Heading";
 var Grid2 = React62__namespace.forwardRef(
   (props, forwardedRef) => /* @__PURE__ */ React62__namespace.createElement("table", { role: "grid", ...props, ref: forwardedRef })
 );
 Grid2.displayName = "Calendar.Grid";
-var GridHead = ({
-  locale,
-  format = "narrow"
-}) => {
-  const ctx = useCalendarContext("Calendar.GridHead");
-  const fmt3 = new Intl.DateTimeFormat(locale ?? ctx.locale, { weekday: format });
-  const days = Array.from({ length: 7 }, (_, i) => {
-    const d = addDays(new Date(2024, 0, 7), i + ctx.weekStartsOn);
-    return {
-      label: ctx.dayOfWeekFormatter?.(d) ?? fmt3.format(d),
-      date: d
-    };
-  });
-  return /* @__PURE__ */ React62__namespace.createElement("thead", null, /* @__PURE__ */ React62__namespace.createElement("tr", null, ctx.displayWeekNumber ? /* @__PURE__ */ React62__namespace.createElement("th", { scope: "col", "aria-label": "Week number" }, "#") : null, days.map((day, i) => /* @__PURE__ */ React62__namespace.createElement("th", { key: i, scope: "col", "aria-label": new Intl.DateTimeFormat(locale ?? ctx.locale, { weekday: "long" }).format(day.date) }, day.label))));
-};
+var GridHead = React62__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { locale, format = "narrow", ...rest } = props;
+    const ctx = useCalendarContext("Calendar.GridHead");
+    const fmt3 = new Intl.DateTimeFormat(locale ?? ctx.locale, { weekday: format });
+    const days = Array.from({ length: 7 }, (_, i) => {
+      const d = addDays(new Date(2024, 0, 7), i + ctx.weekStartsOn);
+      return {
+        label: ctx.dayOfWeekFormatter?.(d) ?? fmt3.format(d),
+        date: d
+      };
+    });
+    return /* @__PURE__ */ React62__namespace.createElement("thead", { ...rest, ref: forwardedRef }, /* @__PURE__ */ React62__namespace.createElement("tr", null, ctx.displayWeekNumber ? /* @__PURE__ */ React62__namespace.createElement("th", { scope: "col", "aria-label": "Week number" }, "#") : null, days.map((day, i) => /* @__PURE__ */ React62__namespace.createElement("th", { key: i, scope: "col", "aria-label": new Intl.DateTimeFormat(locale ?? ctx.locale, { weekday: "long" }).format(day.date) }, day.label))));
+  }
+);
 GridHead.displayName = "Calendar.GridHead";
-var GridBody = ({ children }) => {
-  const ctx = useCalendarContext("Calendar.GridBody");
-  const weeks = getDaysGrid(ctx.displayMonth, ctx.weekStartsOn, ctx.fixedWeekNumber);
-  return /* @__PURE__ */ React62__namespace.createElement("tbody", null, weeks.map((week, wi) => /* @__PURE__ */ React62__namespace.createElement("tr", { key: wi }, ctx.displayWeekNumber ? /* @__PURE__ */ React62__namespace.createElement("td", { role: "gridcell", "aria-label": `Week ${getWeekNumber(week[0] ?? ctx.displayMonth)}` }, getWeekNumber(week[0] ?? ctx.displayMonth)) : null, week.map((day, di) => /* @__PURE__ */ React62__namespace.createElement("td", { key: di, role: "gridcell" }, children(day, { isOutsideMonth: !isSameMonth(day, ctx.displayMonth) }))))));
-};
+var GridBody = React62__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { children, ...rest } = props;
+    const ctx = useCalendarContext("Calendar.GridBody");
+    const weeks = getDaysGrid(ctx.displayMonth, ctx.weekStartsOn, ctx.fixedWeekNumber);
+    return /* @__PURE__ */ React62__namespace.createElement("tbody", { ...rest, ref: forwardedRef }, weeks.map((week, wi) => /* @__PURE__ */ React62__namespace.createElement("tr", { key: wi }, ctx.displayWeekNumber ? /* @__PURE__ */ React62__namespace.createElement("td", { role: "gridcell", "aria-label": `Week ${getWeekNumber(week[0] ?? ctx.displayMonth)}` }, getWeekNumber(week[0] ?? ctx.displayMonth)) : null, week.map((day, di) => /* @__PURE__ */ React62__namespace.createElement("td", { key: di, role: "gridcell" }, children(day, { isOutsideMonth: !isSameMonth(day, ctx.displayMonth) }))))));
+  }
+);
 GridBody.displayName = "Calendar.GridBody";
 function getWeekNumber(date) {
   const target = startOfDay(date);
@@ -9318,10 +9320,12 @@ var List5 = React62__namespace.forwardRef(
   (props, forwardedRef) => /* @__PURE__ */ React62__namespace.createElement(core.Primitive.ul, { ...props, ref: forwardedRef })
 );
 List5.displayName = "FileUpload.List";
-var Item13 = ({ file, children }) => {
-  const ctx = useFileUploadContext("FileUpload.Item");
-  return /* @__PURE__ */ React62__namespace.createElement(core.Primitive.li, { "data-file-name": file.name }, children ?? /* @__PURE__ */ React62__namespace.createElement(React62__namespace.Fragment, null, /* @__PURE__ */ React62__namespace.createElement("span", null, file.name), " ", /* @__PURE__ */ React62__namespace.createElement("button", { type: "button", onClick: () => ctx.removeFile(file), "aria-label": `Remove ${file.name}` }, "\xD7")));
-};
+var Item13 = React62__namespace.forwardRef(
+  ({ file, children, ...rest }, forwardedRef) => {
+    const ctx = useFileUploadContext("FileUpload.Item");
+    return /* @__PURE__ */ React62__namespace.createElement(core.Primitive.li, { ...rest, "data-file-name": file.name, ref: forwardedRef }, children ?? /* @__PURE__ */ React62__namespace.createElement(React62__namespace.Fragment, null, /* @__PURE__ */ React62__namespace.createElement("span", null, file.name), " ", /* @__PURE__ */ React62__namespace.createElement("button", { type: "button", onClick: () => ctx.removeFile(file), "aria-label": `Remove ${file.name}` }, "\xD7")));
+  }
+);
 Item13.displayName = "FileUpload.Item";
 var Trigger18 = React62__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -10233,11 +10237,11 @@ var Input8 = React62__namespace.forwardRef(
   }
 );
 Input8.displayName = "TagsInput.Input";
-var Tag = ({ index, children }) => {
+var Tag = ({ index, children, ...rest }) => {
   const ctx = useTagsInputContext("TagsInput.Tag");
   const tag = ctx.tags[index];
   if (tag === void 0) return null;
-  return /* @__PURE__ */ React62__namespace.createElement(core.Primitive.span, { "data-tag-index": index }, children ?? /* @__PURE__ */ React62__namespace.createElement(React62__namespace.Fragment, null, tag, " ", /* @__PURE__ */ React62__namespace.createElement("button", { type: "button", onClick: () => ctx.removeTag(index), "aria-label": `Remove ${tag}` }, "\xD7")));
+  return /* @__PURE__ */ React62__namespace.createElement(core.Primitive.span, { "data-tag-index": index, ...rest }, children ?? /* @__PURE__ */ React62__namespace.createElement(React62__namespace.Fragment, null, tag, " ", /* @__PURE__ */ React62__namespace.createElement("button", { type: "button", onClick: () => ctx.removeTag(index), "aria-label": `Remove ${tag}` }, "\xD7")));
 };
 Tag.displayName = "TagsInput.Tag";
 var Items = ({ children }) => {
@@ -10363,15 +10367,16 @@ var Items2 = ({ children }) => {
   return /* @__PURE__ */ React62__namespace.createElement(React62__namespace.Fragment, null, items.map((item, i) => children(item, i, ctx.highlighted === i)));
 };
 Items2.displayName = "Mentions.Items";
-var Item15 = ({ suggestion, index, children }) => {
+var Item15 = ({ suggestion, index, children, ...rest }) => {
   const ctx = useMentionsContext("Mentions.Item");
   return /* @__PURE__ */ React62__namespace.createElement(
     core.Primitive.div,
     {
       role: "option",
       "data-highlighted": ctx.highlighted === index ? "" : void 0,
-      onPointerMove: () => ctx.setHighlighted(index),
-      onClick: () => ctx.selectSuggestion(suggestion)
+      ...rest,
+      onPointerMove: utils.composeEventHandlers(rest.onPointerMove, () => ctx.setHighlighted(index)),
+      onClick: utils.composeEventHandlers(rest.onClick, () => ctx.selectSuggestion(suggestion))
     },
     children ?? suggestion.label
   );
@@ -11482,9 +11487,11 @@ var Root44 = React62__namespace.forwardRef(
     height: heightProp = 300,
     margin: marginProp,
     className,
+    style,
     accessibilityLabel = "Chart",
     accessibilityMode = false,
-    children
+    children,
+    ...rest
   }, ref) => {
     const containerRef = React62__namespace.useRef(null);
     const composedRef = useMergedRef(ref, containerRef);
@@ -11647,8 +11654,10 @@ var Root44 = React62__namespace.forwardRef(
           width: widthProp ? width : "100%",
           display: "flex",
           flexDirection: isRow ? "row" : "column",
-          alignItems: isRow ? "center" : "stretch"
-        }
+          alignItems: isRow ? "center" : "stretch",
+          ...style
+        },
+        ...rest
       },
       accessibilityMode && /* @__PURE__ */ React62__namespace.createElement(A11yPatternDefs, null),
       /* @__PURE__ */ React62__namespace.createElement(
@@ -11676,13 +11685,14 @@ var Grid3 = React62__namespace.forwardRef(
     horizontal = true,
     vertical = false,
     strokeDasharray = "3 3",
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.Grid");
     const { dimensions, yDomain, xDomain, isBand, xScale } = ctx;
     const { innerWidth, innerHeight } = dimensions;
     const yTicks = niceLinearTicks(yDomain[0], yDomain[1], 5);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, "aria-hidden": "true", className }, horizontal && yTicks.map((tick) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { "aria-hidden": "true", ...rest, ref, className }, horizontal && yTicks.map((tick) => {
       const y = linearScale2(yDomain, [innerHeight, 0])(tick);
       return /* @__PURE__ */ React62__namespace.createElement(
         "line",
@@ -11724,7 +11734,8 @@ var XAxis = React62__namespace.forwardRef(
     tickFormatter,
     hideLine = false,
     hideTicks = false,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.XAxis");
     const { dimensions, xDomain, isBand, xScale } = ctx;
@@ -11739,7 +11750,7 @@ var XAxis = React62__namespace.forwardRef(
       if (tickFormatter) return tickFormatter(v);
       return String(v);
     };
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, transform: `translate(0, ${innerHeight})`, className }, !hideLine && /* @__PURE__ */ React62__namespace.createElement("line", { x1: 0, y1: 0, x2: innerWidth, y2: 0, stroke: "currentColor", strokeOpacity: 0.3 }), !hideTicks && displayTicks.map((tick, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, transform: `translate(0, ${innerHeight})`, className }, !hideLine && /* @__PURE__ */ React62__namespace.createElement("line", { x1: 0, y1: 0, x2: innerWidth, y2: 0, stroke: "currentColor", strokeOpacity: 0.3 }), !hideTicks && displayTicks.map((tick, i) => {
       const x = xScale(tick);
       return /* @__PURE__ */ React62__namespace.createElement("g", { key: i, transform: `translate(${x}, 0)` }, /* @__PURE__ */ React62__namespace.createElement("line", { y1: 0, y2: 4, stroke: "currentColor", strokeOpacity: 0.5 }), /* @__PURE__ */ React62__namespace.createElement(
         "text",
@@ -11774,7 +11785,8 @@ var YAxis = React62__namespace.forwardRef(
     tickFormatter,
     hideLine = false,
     hideTicks = false,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.YAxis");
     const { yDomain, dimensions } = ctx;
@@ -11787,7 +11799,7 @@ var YAxis = React62__namespace.forwardRef(
       return String(v);
     };
     const yScale = linearScale2(yDomain, [innerHeight, 0]);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, !hideLine && /* @__PURE__ */ React62__namespace.createElement("line", { x1: 0, y1: 0, x2: 0, y2: innerHeight, stroke: "currentColor", strokeOpacity: 0.3 }), !hideTicks && ticks.map((tick) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, !hideLine && /* @__PURE__ */ React62__namespace.createElement("line", { x1: 0, y1: 0, x2: 0, y2: innerHeight, stroke: "currentColor", strokeOpacity: 0.3 }), !hideTicks && ticks.map((tick) => {
       const y = yScale(tick);
       return /* @__PURE__ */ React62__namespace.createElement("g", { key: tick, transform: `translate(0, ${y})` }, /* @__PURE__ */ React62__namespace.createElement("line", { x1: -4, y1: 0, x2: 0, y2: 0, stroke: "currentColor", strokeOpacity: 0.5 }), /* @__PURE__ */ React62__namespace.createElement(
         "text",
@@ -11909,7 +11921,8 @@ var Bar = React62__namespace.forwardRef(
     labelFormatter,
     highlightScope,
     onClick,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.Bar");
     const {
@@ -11934,7 +11947,7 @@ var Bar = React62__namespace.forwardRef(
     if (orientation === "horizontal") {
       const xValueScale = linearScale2(yDomain, [0, innerWidth]);
       const x0 = xValueScale(0);
-      return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? dataKey }, data.map((row, i) => {
+      return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? dataKey }, data.map((row, i) => {
         const value = row[dataKey];
         if (typeof value !== "number") return null;
         const xVal = isBand ? row[xDataKey] : i;
@@ -12010,7 +12023,7 @@ var Bar = React62__namespace.forwardRef(
       }));
     }
     const y0 = yScale(0);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? dataKey }, data.map((row, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? dataKey }, data.map((row, i) => {
       const value = row[dataKey];
       if (typeof value !== "number") return null;
       const xVal = isBand ? row[xDataKey] : i;
@@ -12100,7 +12113,8 @@ var Line = React62__namespace.forwardRef(
     strokeDasharray,
     highlightScope,
     onClick,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.Line");
     const {
@@ -12139,7 +12153,7 @@ var Line = React62__namespace.forwardRef(
     const validPoints = rawPoints.filter((p) => p !== null);
     if (validPoints.length === 0) return null;
     const lineOpacity = highlightScope && activeIndex !== null ? resolveOpacity(seriesIndex, seriesIndex, seriesIndex, activeIndex, highlightScope) : 1;
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? dataKey }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? dataKey }, /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
         d: pathD,
@@ -12221,7 +12235,9 @@ var Area2 = React62__namespace.forwardRef(
     connectNulls: _connectNulls = false,
     highlightScope,
     fillByValue = false,
-    className
+    className,
+    style,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.Area");
     const {
@@ -12253,7 +12269,7 @@ var Area2 = React62__namespace.forwardRef(
     const aboveColor = resolvedColor;
     const belowColor = palette[2] ?? "hsl(var(--chart-3))";
     const areaOpacity = highlightScope && activeIndex !== null ? resolveOpacity(seriesIndex, seriesIndex, seriesIndex, activeIndex, highlightScope) : 1;
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? dataKey, style: { opacity: areaOpacity, transition: "opacity 150ms ease" } }, fillByValue && /* @__PURE__ */ React62__namespace.createElement("defs", null, /* @__PURE__ */ React62__namespace.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React62__namespace.createElement("stop", { offset: `${zeroY / innerHeight * 100}%`, stopColor: aboveColor, stopOpacity: fillOpacity }), /* @__PURE__ */ React62__namespace.createElement("stop", { offset: `${zeroY / innerHeight * 100}%`, stopColor: belowColor, stopOpacity: fillOpacity }))), /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? dataKey, style: { opacity: areaOpacity, transition: "opacity 150ms ease", ...style } }, fillByValue && /* @__PURE__ */ React62__namespace.createElement("defs", null, /* @__PURE__ */ React62__namespace.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React62__namespace.createElement("stop", { offset: `${zeroY / innerHeight * 100}%`, stopColor: aboveColor, stopOpacity: fillOpacity }), /* @__PURE__ */ React62__namespace.createElement("stop", { offset: `${zeroY / innerHeight * 100}%`, stopColor: belowColor, stopOpacity: fillOpacity }))), /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
         d: areaD,
@@ -12284,7 +12300,8 @@ var Scatter = React62__namespace.forwardRef(
     markerShape = "circle",
     highlightScope,
     onClick,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.Scatter");
     const {
@@ -12298,7 +12315,7 @@ var Scatter = React62__namespace.forwardRef(
     } = ctx;
     const seriesIndex = ctx.registerSeries(name ?? xKey);
     const resolvedColor = color ?? palette[seriesIndex % palette.length] ?? palette[0] ?? "hsl(var(--chart-1))";
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? `${xKey} vs ${yKey}` }, data.map((row, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? `${xKey} vs ${yKey}` }, data.map((row, i) => {
       const xVal = row[xKey];
       const yVal = row[yKey];
       if (typeof xVal !== "number" || typeof yVal !== "number") return null;
@@ -12367,7 +12384,8 @@ var Bubble = React62__namespace.forwardRef(
     minRadius = 4,
     maxRadius = 40,
     onClick,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.Bubble");
     const {
@@ -12389,7 +12407,7 @@ var Bubble = React62__namespace.forwardRef(
     const maxSize = Math.max(...sizeValues);
     const sizeRange = maxSize - minSize || 1;
     const sizeScale = (value) => minRadius + (value - minSize) / sizeRange * (maxRadius - minRadius);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? `${xKey} vs ${yKey}` }, data.map((row, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? `${xKey} vs ${yKey}` }, data.map((row, i) => {
       const xVal = row[xKey];
       const yVal = row[yKey];
       const sizeVal = row[sizeKey];
@@ -12458,7 +12476,9 @@ var Tooltip = React62__namespace.forwardRef(
     border,
     borderRadius = 8,
     boxShadow = "0 4px 12px rgba(0,0,0,0.15)",
-    fontSize = 12
+    fontSize = 12,
+    style: styleProp,
+    ...rest
   }, ref) => {
     const ctx = useSharedTooltip("Chart.Tooltip");
     const { tooltip } = ctx;
@@ -12470,6 +12490,7 @@ var Tooltip = React62__namespace.forwardRef(
       return /* @__PURE__ */ React62__namespace.createElement(
         "div",
         {
+          ...rest,
           ref,
           role: "status",
           "aria-live": "polite",
@@ -12485,14 +12506,16 @@ var Tooltip = React62__namespace.forwardRef(
       top: tooltip.y,
       transform: "translate(-50%, calc(-100% - 8px))",
       pointerEvents: "none",
-      zIndex: 50
+      zIndex: 50,
+      ...styleProp
     };
     if (content) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, style, className }, content(tooltip));
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, style, className }, content(tooltip));
     }
     return /* @__PURE__ */ React62__namespace.createElement(
       "div",
       {
+        ...rest,
         ref,
         style,
         className
@@ -12536,7 +12559,9 @@ var Legend = React62__namespace.forwardRef(
     renderEntry,
     iconType = "square",
     iconSize = 12,
-    className
+    className,
+    style,
+    ...rest
   }, ref) => {
     const ctx = useSharedTooltip("Chart.Legend");
     const entries = ctx.legendEntries;
@@ -12588,11 +12613,12 @@ var Legend = React62__namespace.forwardRef(
     const order = position === "top" || position === "left" ? -1 : 1;
     const isVertical = position === "left" || position === "right";
     if (content) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { order }, "aria-label": "Chart legend" }, content(entries));
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { order, ...style }, "aria-label": "Chart legend" }, content(entries));
     }
     return /* @__PURE__ */ React62__namespace.createElement(
       "div",
       {
+        ...rest,
         ref,
         className,
         style: {
@@ -12602,7 +12628,8 @@ var Legend = React62__namespace.forwardRef(
           gap: 12,
           justifyContent: "center",
           padding: isVertical ? "0 8px" : "8px 0",
-          order
+          order,
+          ...style
         },
         "aria-label": "Chart legend"
       },
@@ -12619,8 +12646,10 @@ var PieRoot = React62__namespace.forwardRef(
     width = 400,
     height = 400,
     className,
+    style,
     accessibilityLabel = "Pie chart",
-    children
+    children,
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -12649,13 +12678,15 @@ var PieRoot = React62__namespace.forwardRef(
     return /* @__PURE__ */ React62__namespace.createElement(SharedTooltipProvider, { tooltip, setTooltip, legendEntries }, /* @__PURE__ */ React62__namespace.createElement(PieProvider, { ...contextValue }, /* @__PURE__ */ React62__namespace.createElement(
       "div",
       {
+        ...rest,
         ref,
         className,
         style: {
           position: "relative",
           display: "inline-flex",
           flexDirection: isRow ? "row" : "column",
-          alignItems: isRow ? "center" : "center"
+          alignItems: isRow ? "center" : "center",
+          ...style
         }
       },
       /* @__PURE__ */ React62__namespace.createElement(
@@ -12689,7 +12720,8 @@ var Pie = React62__namespace.forwardRef(
     arcLabel,
     arcLabelMinAngle = 5,
     onClick,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = usePieContext("Chart.Pie");
     const { data, cx, cy, palette, setTooltip } = ctx;
@@ -12717,7 +12749,7 @@ var Pie = React62__namespace.forwardRef(
       const sliceAngleDeg = Math.abs(sliceAngle * (180 / Math.PI));
       return { startAngle: sliceStart, endAngle: sliceEnd, value, name: sliceName, color: sliceColor, index: i, d, sliceAngleDeg };
     });
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, slices.map((slice) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, slices.map((slice) => {
       const isHovered = hovered === slice.index;
       const expandedRadius = isHovered ? radius + 6 : radius;
       const expandedInner = isHovered && innerRadius > 0 ? innerRadius - 2 : innerRadius;
@@ -12808,8 +12840,10 @@ var RadarRoot = React62__namespace.forwardRef(
     width = 400,
     height = 400,
     className,
+    style,
     accessibilityLabel = "Radar chart",
-    children
+    children,
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -12853,13 +12887,15 @@ var RadarRoot = React62__namespace.forwardRef(
     return /* @__PURE__ */ React62__namespace.createElement(SharedTooltipProvider, { tooltip, setTooltip, legendEntries }, /* @__PURE__ */ React62__namespace.createElement(RadarProvider, { ...contextValue }, /* @__PURE__ */ React62__namespace.createElement(
       "div",
       {
+        ...rest,
         ref,
         className,
         style: {
           position: "relative",
           display: "inline-flex",
           flexDirection: isRow ? "row" : "column",
-          alignItems: "center"
+          alignItems: "center",
+          ...style
         }
       },
       /* @__PURE__ */ React62__namespace.createElement(
@@ -12880,12 +12916,12 @@ var RadarRoot = React62__namespace.forwardRef(
 );
 RadarRoot.displayName = "Chart.RadarRoot";
 var PolarGrid = React62__namespace.forwardRef(
-  ({ rings = 5, shape = "sharp", className }, ref) => {
+  ({ rings = 5, shape = "sharp", className, ...rest }, ref) => {
     const ctx = useRadarContext("Chart.PolarGrid");
     const { cx, cy, radius, angleKeys } = ctx;
     const angleStep = 2 * Math.PI / Math.max(angleKeys.length, 3);
     const spokeCount = Math.max(angleKeys.length, 3);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-hidden": "true" }, Array.from({ length: rings }, (_, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-hidden": "true" }, Array.from({ length: rings }, (_, i) => {
       const r = radius / rings * (i + 1);
       if (shape === "circular") {
         return /* @__PURE__ */ React62__namespace.createElement(
@@ -12938,11 +12974,11 @@ var PolarGrid = React62__namespace.forwardRef(
 );
 PolarGrid.displayName = "Chart.PolarGrid";
 var PolarAngleAxis = React62__namespace.forwardRef(
-  ({ dataKey: _dataKey, className }, ref) => {
+  ({ dataKey: _dataKey, className, ...rest }, ref) => {
     const ctx = useRadarContext("Chart.PolarAngleAxis");
     const { cx, cy, radius, angleKeys } = ctx;
     const angleStep = 2 * Math.PI / Math.max(angleKeys.length, 1);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, angleKeys.map((key, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, angleKeys.map((key, i) => {
       const angle = i * angleStep - Math.PI / 2;
       const labelRadius = radius + 18;
       const x = Math.round((cx + labelRadius * Math.cos(angle)) * 1e4) / 1e4;
@@ -12966,7 +13002,7 @@ var PolarAngleAxis = React62__namespace.forwardRef(
 );
 PolarAngleAxis.displayName = "Chart.PolarAngleAxis";
 var Radar = React62__namespace.forwardRef(
-  ({ dataKey, color, name, fillOpacity = 0.25, fillArea = true, showMark: showMarkProp = true, dot: dotAlias, className }, ref) => {
+  ({ dataKey, color, name, fillOpacity = 0.25, fillArea = true, showMark: showMarkProp = true, dot: dotAlias, className, ...rest }, ref) => {
     const showMark = dotAlias !== void 0 ? dotAlias : showMarkProp;
     const ctx = useRadarContext("Chart.Radar");
     const { data, cx, cy, radius, angleKeys, palette } = ctx;
@@ -12983,7 +13019,7 @@ var Radar = React62__namespace.forwardRef(
     const normalised = values.map((v) => v / maxVal);
     const seriesColor = color ?? palette[0] ?? "hsl(var(--chart-1))";
     const pathD = buildRadarPath(normalised, cx, cy, radius);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? dataKey }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? dataKey }, /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
         d: pathD,
@@ -13022,7 +13058,9 @@ var Heatmap = React62__namespace.forwardRef(
     height = 300,
     margin: marginProp,
     className,
-    accessibilityLabel = "Heatmap"
+    style,
+    accessibilityLabel = "Heatmap",
+    ...rest
   }, ref) => {
     const margin = { ...DEFAULT_MARGIN, ...marginProp };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
@@ -13046,7 +13084,7 @@ var Heatmap = React62__namespace.forwardRef(
       return colorRange[0];
     };
     const cellOpacity = (norm) => 0.1 + norm * 0.9;
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -13107,8 +13145,10 @@ var Treemap = React62__namespace.forwardRef(
     padding = 4,
     colors,
     className,
+    style,
     accessibilityLabel = "Treemap",
-    onNodeClick
+    onNodeClick,
+    ...rest
   }, ref) => {
     const palette = colors ?? DEFAULT_PALETTE;
     const nodes = squarifyTreemap(data, 0, 0, width, height, padding);
@@ -13153,7 +13193,7 @@ var Treemap = React62__namespace.forwardRef(
         node.name
       ), node.children?.map((child) => renderNode(child, depth + 1)));
     };
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -13211,14 +13251,16 @@ var Funnel = React62__namespace.forwardRef(
     curve = "linear",
     gap = 0,
     className,
+    style,
     accessibilityLabel = "Funnel chart",
-    onSegmentClick
+    onSegmentClick,
+    ...rest
   }, ref) => {
     const margin = { top: 10, right: 80, bottom: 10, left: 80 };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
     const innerHeight = Math.max(0, height - margin.top - margin.bottom);
     const segments = computeFunnelLayout(data, margin.left, margin.top, innerWidth, innerHeight, Math.max(gap, 0));
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -13311,7 +13353,9 @@ var Gauge = React62__namespace.forwardRef(
     width = 200,
     height = 150,
     className,
-    accessibilityLabel
+    style,
+    accessibilityLabel,
+    ...rest
   }, ref) => {
     const outerRadius = Math.min(width, height * 1.3) / 2 - 4;
     const gaugeData = computeGaugeArcs(
@@ -13344,7 +13388,7 @@ var Gauge = React62__namespace.forwardRef(
       return value.toLocaleString();
     })();
     const a11yLabel = accessibilityLabel ?? `Gauge: ${value} out of ${max}`;
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -13421,8 +13465,10 @@ var GaugeContainer = React62__namespace.forwardRef(
     height = 200,
     thickness = 20,
     className,
+    style,
     accessibilityLabel,
-    children
+    children,
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -13442,7 +13488,7 @@ var GaugeContainer = React62__namespace.forwardRef(
       innerRadius,
       fraction
     };
-    return /* @__PURE__ */ React62__namespace.createElement(GaugeProvider, { ...contextValue }, /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement(GaugeProvider, { ...contextValue }, /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -13458,7 +13504,7 @@ var GaugeContainer = React62__namespace.forwardRef(
 );
 GaugeContainer.displayName = "Chart.GaugeContainer";
 var GaugeValueArc = React62__namespace.forwardRef(
-  ({ color, colorStops, className }, ref) => {
+  ({ color, colorStops, className, style, ...rest }, ref) => {
     const ctx = useGaugeContext("Chart.GaugeValueArc");
     const { cx, cy, outerRadius, innerRadius, fraction, startAngle, endAngle } = ctx;
     let fillColor = color ?? DEFAULT_PALETTE[0] ?? "hsl(var(--chart-1))";
@@ -13479,18 +13525,19 @@ var GaugeValueArc = React62__namespace.forwardRef(
     return /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
+        ...rest,
         ref,
         d: fillPath,
         fill: fillColor,
         className,
-        style: { transition: "d 400ms ease" }
+        style: { transition: "d 400ms ease", ...style }
       }
     );
   }
 );
 GaugeValueArc.displayName = "Chart.GaugeValueArc";
 var GaugeReferenceArc = React62__namespace.forwardRef(
-  ({ color, className }, ref) => {
+  ({ color, className, ...rest }, ref) => {
     const ctx = useGaugeContext("Chart.GaugeReferenceArc");
     const { cx, cy, outerRadius, innerRadius, startAngle, endAngle } = ctx;
     const toRad = (deg) => deg * Math.PI / 180;
@@ -13500,6 +13547,7 @@ var GaugeReferenceArc = React62__namespace.forwardRef(
     return /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
+        ...rest,
         ref,
         d: trackPath,
         fill: color ?? "currentColor",
@@ -13541,7 +13589,9 @@ var CandlestickChart = React62__namespace.forwardRef(
     bullColor = "hsl(var(--chart-2, 160 60% 45%))",
     bearColor = "hsl(var(--chart-5, 340 75% 55%))",
     className,
-    accessibilityLabel = "Candlestick chart"
+    style,
+    accessibilityLabel = "Candlestick chart",
+    ...rest
   }, ref) => {
     const margin = { ...DEFAULT_MARGIN, ...marginProp };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
@@ -13564,7 +13614,7 @@ var CandlestickChart = React62__namespace.forwardRef(
       candleWidth
     );
     const yTicks = niceLinearTicks(minPrice, maxPrice, 5);
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -13661,11 +13711,15 @@ var SparkLine = React62__namespace.forwardRef(
     showHighlight = false,
     yMin,
     yMax,
-    className
+    className,
+    style,
+    onMouseMove,
+    onMouseLeave,
+    ...rest
   }, ref) => {
     const [hoverState, setHoverState] = React62__namespace.useState(null);
     if (data.length === 0) {
-      return /* @__PURE__ */ React62__namespace.createElement("svg", { ref, width, height, className });
+      return /* @__PURE__ */ React62__namespace.createElement("svg", { ...rest, ref, width, height, className, style, onMouseMove, onMouseLeave });
     }
     const minVal = yMin !== void 0 ? yMin : Math.min(...data);
     const maxVal = yMax !== void 0 ? yMax : Math.max(...data);
@@ -13680,12 +13734,15 @@ var SparkLine = React62__namespace.forwardRef(
       return /* @__PURE__ */ React62__namespace.createElement(
         "svg",
         {
+          ...rest,
           ref,
           width,
           height,
           className,
           "aria-hidden": "true",
-          style: { display: "block" }
+          style: { display: "block", ...style },
+          onMouseMove,
+          onMouseLeave
         },
         data.map((v, i) => {
           const barH = Math.max(1, (v - minVal) / range * innerH);
@@ -13741,14 +13798,15 @@ var SparkLine = React62__namespace.forwardRef(
     return /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
+        ...rest,
         ref,
         width,
         height,
         className,
         "aria-hidden": "true",
-        style: { display: "block", position: "relative" },
-        onMouseMove: showTooltip || showHighlight ? handleMouseMove : void 0,
-        onMouseLeave: showTooltip || showHighlight ? handleMouseLeave : void 0
+        style: { display: "block", position: "relative", ...style },
+        onMouseMove: utils.composeEventHandlers(onMouseMove, showTooltip || showHighlight ? handleMouseMove : void 0),
+        onMouseLeave: utils.composeEventHandlers(onMouseLeave, showTooltip || showHighlight ? handleMouseLeave : void 0)
       },
       area && /* @__PURE__ */ React62__namespace.createElement("polygon", { points: areaPoints, fill: color, fillOpacity: 0.15 }),
       /* @__PURE__ */ React62__namespace.createElement(
@@ -13807,7 +13865,8 @@ var RangeBar = React62__namespace.forwardRef(
     color,
     name,
     radius = 3,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.RangeBar");
     const {
@@ -13823,7 +13882,7 @@ var RangeBar = React62__namespace.forwardRef(
     const { innerHeight: _innerHeight } = dimensions;
     const seriesIndex = ctx.registerSeries(name ?? lowKey);
     const resolvedColor = color ?? palette[seriesIndex % palette.length] ?? palette[0] ?? "hsl(var(--chart-1))";
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? `${lowKey}\u2013${highKey}` }, data.map((row, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? `${lowKey}\u2013${highKey}` }, data.map((row, i) => {
       const low = row[lowKey];
       const high = row[highKey];
       if (typeof low !== "number" || typeof high !== "number") return null;
@@ -13860,14 +13919,15 @@ var ReferenceLine = React62__namespace.forwardRef(
     label,
     stroke = "hsl(var(--chart-5, 340 75% 55%))",
     strokeDasharray = "4 4",
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.ReferenceLine");
     const { dimensions, yScale, xScale } = ctx;
     const { innerWidth, innerHeight } = dimensions;
     if (yValue !== void 0) {
       const y = yScale(yValue);
-      return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": label ? `Reference: ${label}` : "Reference line" }, /* @__PURE__ */ React62__namespace.createElement(
+      return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": label ? `Reference: ${label}` : "Reference line" }, /* @__PURE__ */ React62__namespace.createElement(
         "line",
         {
           x1: 0,
@@ -13893,7 +13953,7 @@ var ReferenceLine = React62__namespace.forwardRef(
     }
     if (xValue !== void 0) {
       const x = xScale(xValue);
-      return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": label ? `Reference: ${label}` : "Reference line" }, /* @__PURE__ */ React62__namespace.createElement(
+      return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": label ? `Reference: ${label}` : "Reference line" }, /* @__PURE__ */ React62__namespace.createElement(
         "line",
         {
           x1: x,
@@ -13929,7 +13989,8 @@ var ReferenceArea = React62__namespace.forwardRef(
     x2: x2Prop,
     fill = "hsl(var(--chart-1))",
     fillOpacity = 0.15,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.ReferenceArea");
     const { dimensions, yScale, xScale } = ctx;
@@ -13942,7 +14003,7 @@ var ReferenceArea = React62__namespace.forwardRef(
     const rectY = Math.min(y1, y2);
     const rectW = Math.abs(x2 - x1);
     const rectH = Math.abs(y2 - y1);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-hidden": "true" }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-hidden": "true" }, /* @__PURE__ */ React62__namespace.createElement(
       "rect",
       {
         x: rectX,
@@ -13964,8 +14025,10 @@ var RadialBarRoot = React62__namespace.forwardRef(
     height = 400,
     gap = 4,
     className,
+    style,
     accessibilityLabel = "Radial bar chart",
-    children
+    children,
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -13980,7 +14043,7 @@ var RadialBarRoot = React62__namespace.forwardRef(
         palette: DEFAULT_PALETTE,
         gap
       },
-      /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+      /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
         "svg",
         {
           role: "img",
@@ -14004,7 +14067,8 @@ var RadialBar = React62__namespace.forwardRef(
     innerRadius: innerRadiusFraction = 0.2,
     outerRadius: outerRadiusFraction = 0.9,
     layout = "vertical",
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useRadialBarContext("Chart.RadialBar");
     const { data, cx, cy, maxRadius, palette, gap } = ctx;
@@ -14022,7 +14086,7 @@ var RadialBar = React62__namespace.forwardRef(
     const barThickness = trackThickness;
     const startAngle = -Math.PI / 2;
     const fullAngle = 2 * Math.PI;
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, data.map((row, i) => {
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, data.map((row, i) => {
       const value = values[i] ?? 0;
       const fraction = value / maxValue;
       const trackOuterR = outerR - i * (trackThickness + gap);
@@ -14102,13 +14166,15 @@ var Waterfall = React62__namespace.forwardRef(
     height = 300,
     margin: marginProp,
     className,
-    accessibilityLabel = "Waterfall chart"
+    style,
+    accessibilityLabel = "Waterfall chart",
+    ...rest
   }, ref) => {
     const margin = { top: 20, right: 20, bottom: 40, left: 50, ...marginProp };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
     const innerHeight = Math.max(0, height - margin.top - margin.bottom);
     if (data.length === 0) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className });
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style });
     }
     const bars = [];
     let running = 0;
@@ -14130,7 +14196,7 @@ var Waterfall = React62__namespace.forwardRef(
     const yScale = linearScale2(yDomain, [innerHeight, 0]);
     const y0 = yScale(0);
     const barW = xScale.bandwidth * 0.7;
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -14238,7 +14304,9 @@ var Sankey = React62__namespace.forwardRef(
     nodeAlignment = "justify",
     showLinkValues = false,
     className,
-    accessibilityLabel = "Sankey diagram"
+    style,
+    accessibilityLabel = "Sankey diagram",
+    ...rest
   }, ref) => {
     const nodeMap = /* @__PURE__ */ new Map();
     for (const n of nodes) {
@@ -14384,7 +14452,7 @@ var Sankey = React62__namespace.forwardRef(
         midY: (y1 + y2) / 2
       });
     }
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -14453,15 +14521,17 @@ var Pyramid = React62__namespace.forwardRef(
     height = 300,
     labelPosition: _labelPosition = "center",
     className,
+    style,
     accessibilityLabel = "Pyramid chart",
-    onSegmentClick
+    onSegmentClick,
+    ...rest
   }, ref) => {
     const margin = { top: 10, right: 80, bottom: 10, left: 80 };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
     const innerHeight = Math.max(0, height - margin.top - margin.bottom);
     const reversed = [...data].reverse();
     const segments = computeFunnelLayout(reversed, margin.left, margin.top, innerWidth, innerHeight, 4);
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -14534,13 +14604,15 @@ var Gantt = React62__namespace.forwardRef(
     height = 300,
     margin: marginProp,
     className,
-    accessibilityLabel = "Gantt chart"
+    style,
+    accessibilityLabel = "Gantt chart",
+    ...rest
   }, ref) => {
     const margin = { top: 10, right: 20, bottom: 30, left: 120, ...marginProp };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
     const innerHeight = Math.max(0, height - margin.top - margin.bottom);
     if (tasks.length === 0) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className });
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style });
     }
     const timeMin = Math.min(...tasks.map((t) => t.start));
     const timeMax = Math.max(...tasks.map((t) => t.end));
@@ -14550,7 +14622,7 @@ var Gantt = React62__namespace.forwardRef(
     const rowHeight = Math.max(12, innerHeight / tasks.length - 4);
     const barPad = Math.min(4, rowHeight * 0.15);
     const timeTicks = niceLinearTicks(timeDomain[0], timeDomain[1], 6);
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -14636,8 +14708,10 @@ var RadialLineRoot = React62__namespace.forwardRef(
     width = 400,
     height = 400,
     className,
+    style,
     accessibilityLabel = "Radial line chart",
-    children
+    children,
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -14682,13 +14756,15 @@ var RadialLineRoot = React62__namespace.forwardRef(
       /* @__PURE__ */ React62__namespace.createElement(
         "div",
         {
+          ...rest,
           ref,
           className,
           style: {
             position: "relative",
             display: "inline-flex",
             flexDirection: isRow ? "row" : "column",
-            alignItems: "center"
+            alignItems: "center",
+            ...style
           }
         },
         /* @__PURE__ */ React62__namespace.createElement(
@@ -14721,7 +14797,8 @@ var RadialLine = React62__namespace.forwardRef(
     dot = false,
     dotRadius = 3,
     strokeWidth = 2,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useRadialLineContext("Chart.RadialLine");
     const { data, cx, cy, radius, nameKeys, palette } = ctx;
@@ -14763,7 +14840,7 @@ var RadialLine = React62__namespace.forwardRef(
       }
       areaD += " Z";
     }
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": dataKey }, area && areaD && /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": dataKey }, area && areaD && /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
         d: areaD,
@@ -14804,13 +14881,15 @@ var Histogram = React62__namespace.forwardRef(
     margin: marginProp,
     showGrid = true,
     className,
-    accessibilityLabel = "Histogram"
+    style,
+    accessibilityLabel = "Histogram",
+    ...rest
   }, ref) => {
     const margin = { top: 10, right: 20, bottom: 40, left: 50, ...marginProp };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
     const innerHeight = Math.max(0, height - margin.top - margin.bottom);
     if (data.length === 0) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className });
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style });
     }
     const minVal = Math.min(...data);
     const maxVal = Math.max(...data);
@@ -14824,7 +14903,7 @@ var Histogram = React62__namespace.forwardRef(
     const yScale = linearScale2([0, maxCount], [innerHeight, 0]);
     const barW = innerWidth / binCount;
     const yTicks = niceLinearTicks(0, maxCount, 5);
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -14906,13 +14985,15 @@ var Boxplot = React62__namespace.forwardRef(
     margin: marginProp,
     orientation = "vertical",
     className,
-    accessibilityLabel = "Box plot"
+    style,
+    accessibilityLabel = "Box plot",
+    ...rest
   }, ref) => {
     const margin = { top: 20, right: 20, bottom: 40, left: 50, ...marginProp };
     const innerWidth = Math.max(0, width - margin.left - margin.right);
     const innerHeight = Math.max(0, height - margin.top - margin.bottom);
     if (data.length === 0) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className });
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style });
     }
     const allVals = data.flatMap((d) => [d.min, d.q1, d.median, d.q3, d.max, ...d.outliers ?? []]);
     const yMin = Math.min(...allVals);
@@ -14925,7 +15006,7 @@ var Boxplot = React62__namespace.forwardRef(
     if (isHorizontal) {
       const yBand = bandScale(names, [0, innerHeight], 0.2, 0.2);
       const xValueScale = linearScale2(yDomain, [0, innerWidth]);
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement("svg", { role: "img", "aria-label": accessibilityLabel, width, height, style: { display: "block" } }, /* @__PURE__ */ React62__namespace.createElement("title", null, accessibilityLabel), /* @__PURE__ */ React62__namespace.createElement("g", { transform: `translate(${margin.left},${margin.top})` }, valueTicks.map((tick) => {
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement("svg", { role: "img", "aria-label": accessibilityLabel, width, height, style: { display: "block" } }, /* @__PURE__ */ React62__namespace.createElement("title", null, accessibilityLabel), /* @__PURE__ */ React62__namespace.createElement("g", { transform: `translate(${margin.left},${margin.top})` }, valueTicks.map((tick) => {
         const x = xValueScale(tick);
         return /* @__PURE__ */ React62__namespace.createElement("g", { key: tick, transform: `translate(${x}, 0)` }, /* @__PURE__ */ React62__namespace.createElement("line", { x1: 0, y1: 0, x2: 0, y2: innerHeight, stroke: "currentColor", strokeOpacity: 0.08 }), /* @__PURE__ */ React62__namespace.createElement("text", { x: 0, y: innerHeight + 14, textAnchor: "middle", fontSize: 10, fill: "currentColor", fillOpacity: 0.6 }, tick));
       }), data.map((entry, i) => {
@@ -14942,7 +15023,7 @@ var Boxplot = React62__namespace.forwardRef(
     }
     const xBand = bandScale(names, [0, innerWidth], 0.2, 0.2);
     const yScale = linearScale2(yDomain, [innerHeight, 0]);
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -15099,8 +15180,10 @@ var Sunburst = React62__namespace.forwardRef(
     height = 400,
     innerRadius = 0,
     className,
+    style,
     accessibilityLabel = "Sunburst chart",
-    onNodeClick
+    onNodeClick,
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -15109,7 +15192,7 @@ var Sunburst = React62__namespace.forwardRef(
     layoutSunburst(data, 0, 2 * Math.PI, 0, layoutNodes);
     const maxD = maxDepth(data);
     const ringThickness = maxD > 0 ? (outerRadius - innerRadius) / (maxD + 1) : outerRadius - innerRadius;
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -15187,7 +15270,9 @@ var Chord = React62__namespace.forwardRef(
     height = 500,
     padAngle = 0.05,
     className,
-    accessibilityLabel = "Chord diagram"
+    style,
+    accessibilityLabel = "Chord diagram",
+    ...rest
   }, ref) => {
     const cx = width / 2;
     const cy = height / 2;
@@ -15195,7 +15280,7 @@ var Chord = React62__namespace.forwardRef(
     const innerRadius = outerRadius * 0.85;
     const n = Math.min(data.length, labels.length);
     if (n === 0) {
-      return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className });
+      return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style });
     }
     const palette = colors ?? DEFAULT_PALETTE;
     const rowSums = data.slice(0, n).map(
@@ -15256,7 +15341,7 @@ var Chord = React62__namespace.forwardRef(
         chordPaths.push({ path, color: group.color });
       }
     }
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "img",
@@ -15314,7 +15399,8 @@ var RangeArea = React62__namespace.forwardRef(
     name,
     fillOpacity = 0.3,
     curve = "catmullRom",
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useCartesianContext("Chart.RangeArea");
     const {
@@ -15339,7 +15425,7 @@ var RangeArea = React62__namespace.forwardRef(
     });
     if (highPoints.length === 0) return null;
     const areaD = buildAreaPath(highPoints, lowPoints, curve);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className, "aria-label": name ?? `${highKey}\u2013${lowKey}` }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className, "aria-label": name ?? `${highKey}\u2013${lowKey}` }, /* @__PURE__ */ React62__namespace.createElement(
       "path",
       {
         d: areaD,
@@ -15364,7 +15450,9 @@ var LinearGauge = React62__namespace.forwardRef(
     label,
     cornerRadius = 8,
     className,
-    accessibilityLabel
+    style,
+    accessibilityLabel,
+    ...rest
   }, ref) => {
     const fraction = Math.min(1, Math.max(0, (value - min) / (max - min)));
     const labelPad = showLabel ? 52 : 8;
@@ -15388,7 +15476,7 @@ var LinearGauge = React62__namespace.forwardRef(
       return `${Math.round(fraction * 100)}%`;
     })();
     const a11yLabel = accessibilityLabel ?? `Gauge: ${value} of ${max}`;
-    return /* @__PURE__ */ React62__namespace.createElement("div", { ref, className, style: { display: "inline-block" } }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("div", { ...rest, ref, className, style: { display: "inline-block", ...style } }, /* @__PURE__ */ React62__namespace.createElement(
       "svg",
       {
         role: "progressbar",
@@ -15443,11 +15531,11 @@ var LinearGauge = React62__namespace.forwardRef(
 );
 LinearGauge.displayName = "Chart.LinearGauge";
 var PieCenterLabel = React62__namespace.forwardRef(
-  ({ children, className }, ref) => {
+  ({ children, className, ...rest }, ref) => {
     const ctx = usePieContext("Chart.PieCenterLabel");
     const { cx, cy } = ctx;
     if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, /* @__PURE__ */ React62__namespace.createElement(
+      return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, /* @__PURE__ */ React62__namespace.createElement(
         "text",
         {
           x: cx,
@@ -15461,7 +15549,7 @@ var PieCenterLabel = React62__namespace.forwardRef(
         children
       ));
     }
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, /* @__PURE__ */ React62__namespace.createElement(
       "foreignObject",
       {
         x: cx - 50,
@@ -15493,7 +15581,8 @@ var GaugePointer = React62__namespace.forwardRef(
     color = "currentColor",
     length: lengthFraction = 0.7,
     width: baseWidth = 6,
-    className
+    className,
+    ...rest
   }, ref) => {
     const ctx = useGaugeContext("Chart.GaugePointer");
     const { cx, cy, outerRadius, fraction, startAngle, endAngle } = ctx;
@@ -15511,7 +15600,7 @@ var GaugePointer = React62__namespace.forwardRef(
     const by1 = cy + halfBase * Math.sin(perpAngle);
     const bx2 = cx - halfBase * Math.cos(perpAngle);
     const by2 = cy - halfBase * Math.sin(perpAngle);
-    return /* @__PURE__ */ React62__namespace.createElement("g", { ref, className }, /* @__PURE__ */ React62__namespace.createElement(
+    return /* @__PURE__ */ React62__namespace.createElement("g", { ...rest, ref, className }, /* @__PURE__ */ React62__namespace.createElement(
       "polygon",
       {
         points: `${fmt(bx1)},${fmt(by1)} ${fmt(bx2)},${fmt(by2)} ${fmt(tipX)},${fmt(tipY)}`,