@box-kite/react 1.0.0 → 2.0.0

package/components/slider.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs");let r=require("react"),i=require("react/jsx-runtime");var a;(function(e){function t(e){let t=String(Math.abs(e));if(t.includes(`e`))return 12;let n=t.indexOf(`.`);return n===-1?0:t.length-n-1}e.decimals=t;function n(e,t){return Number(e.toFixed(Math.min(t,15)))}function r(e,t,n){return Math.min(Math.max(e,t),n)}e.clamp=r;function i(e,i){let{min:a,max:o,step:s}=i,c=r(e,a,o);return s>0?r(n(a+Math.round((c-a)/s)*s,t(s)+t(a)),a,o):c}e.snap=i;function a(e,t,n){return n<=t?0:(r(e,t,n)-t)*(100/(n-t))}e.percent=a;function o(e,t,n){return`${Math.round(a(e,t,n)*100)/100}%`}e.percentage=o;function s(e){return typeof e==`number`?[e]:[...e]}e.thumbs=s;function c(e,t){return typeof e==`number`?t[0]:[...t]}e.shaped=c;function l(e,t,n,a){let o=t>0?e[t-1]:a.min,s=t<e.length-1?e[t+1]:a.max,c=[...e];return c[t]=r(i(n,a),o,s),c}e.move=l;function u(e,t){return e.length===t.length&&e.every((e,n)=>e===t[n])}e.same=u;function d(e,t){let n=0,r=1/0;return e.forEach((e,i)=>{let a=Math.abs(e-t);a<=r&&(n=i,r=a)}),n}e.nearest=d;function f(e,t,n,r,i){let a=r===`vertical`?e.height===0?0:(e.bottom-n)/e.height:e.width===0?0:i?(e.right-t)/e.width:(t-e.left)/e.width;return Math.min(Math.max(a,0),1)}e.valueAt=f;function p(e,t=!1){if(e===`Home`)return{kind:`edge`,delta:-1};if(e===`End`)return{kind:`edge`,delta:1};if(e===`PageUp`)return{kind:`page`,delta:1};if(e===`PageDown`)return{kind:`page`,delta:-1};if(e===`ArrowUp`)return{kind:`step`,delta:1};if(e===`ArrowDown`)return{kind:`step`,delta:-1};if(e===`ArrowRight`)return{kind:`step`,delta:t?-1:1};if(e===`ArrowLeft`)return{kind:`step`,delta:t?1:-1}}e.moveFor=p;function m(e,t,n,r){if(t.kind===`edge`)return t.delta>0?n.max:n.min;let i=t.kind===`page`?r:n.step;return e+t.delta*i}e.moved=m})(a||={});var o=a,s=`data-index`;function c(e,t,n){return{min:e,max:t,step:n}}function l(e,t){return t?{insetBlockEnd:e}:{insetInlineStart:e}}function u(e,t,n){let r=e.length>1?Math.min(...e):t.min,i=Math.max(...e),a=o.percent(r,t.min,t.max),s=`${Math.round((o.percent(i,t.min,t.max)-a)*100)/100}%`;return n?{insetBlockEnd:`${Math.round(a*100)/100}%`,blockSize:s}:{insetInlineStart:`${Math.round(a*100)/100}%`,inlineSize:s}}function d(a){let{value:d,defaultValue:f,onValueChange:p,onValueCommit:m,min:h=0,max:g=100,step:_=1,largeStep:v=_*10,orientation:y=`horizontal`,disabled:b=!1,label:x,labelledBy:S,thumbLabels:C,format:w,name:T,props:E,...D}=a,O=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null),j=(0,r.useRef)(!1),[M,N]=(0,r.useState)(!1),[P,F]=n.i({value:d,defaultValue:f??h,onChange:p}),I=c(h,g,_),L=y===`vertical`,R=o.thumbs(P),z=n.o(P),B=n.a(m),V=n.a((e,t)=>{F(t=>o.same(o.thumbs(t),e)?t:o.shaped(t,e),t)}),H=t=>{let n=k.current;if(!n)return;let r=o.valueAt(n.getBoundingClientRect(),t.clientX,t.clientY,y,e.u(n));return h+r*(g-h)},U=e=>O.current?.querySelectorAll(`[role="slider"]`)[e],W=n.a(e=>{if(b||e.button!==0||e.defaultPrevented)return;let t=H(e);if(t===void 0)return;let n=o.thumbs(z.current),r=o.nearest(n,t);A.current=r,e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),U(r)?.focus(),V(o.move(n,r,t,I),{reason:`pointer`,event:e})}),G=n.a(e=>{let t=A.current;if(t===null)return;let n=H(e);n!==void 0&&(N(!0),V(o.move(o.thumbs(z.current),t,n,I),{reason:`pointer`,event:e}))}),K=n.a(e=>{A.current!==null&&(A.current=null,N(!1),e.currentTarget.releasePointerCapture?.(e.pointerId),B(z.current,{reason:`pointer`,event:e}))}),q=n.a(t=>{if(b||t.defaultPrevented)return;let n=t.target?.closest(`[role="slider"]`),r=Number(n?.getAttribute(s)??-1);if(!n||r<0)return;let i=o.moveFor(t.key,e.u(n));if(!i)return;t.preventDefault(),j.current=!0,N(!0);let a=o.thumbs(z.current);V(o.move(a,r,o.moved(a[r],i,I,v),I),{reason:`keyboard`,event:t})}),J=n.a(e=>{j.current&&(j.current=!1,N(!1),B(z.current,{reason:`keyboard`,event:e}))}),Y=R.length>1;return(0,i.jsxs)(t.default,{ref:O,component:`slider`,...D,variant:[D.variant,{vertical:L,disabled:b}],props:{role:Y?`group`:void 0,"aria-label":Y?x:void 0,"aria-labelledby":Y?S:void 0,...E,onPointerDown:W,onPointerMove:G,onPointerUp:K,onPointerCancel:K,onKeyDown:q,onKeyUp:J},children:[(0,i.jsx)(t.default,{ref:k,component:`slider.track`,variant:{vertical:L},children:(0,i.jsx)(t.default,{component:`slider.fill`,variant:{vertical:L,tracking:M},style:u(R,I,L)})}),R.map((e,n)=>(0,i.jsx)(t.default,{component:`slider.thumb`,variant:{vertical:L,disabled:b,tracking:M},style:l(o.percentage(e,h,g),L),props:{role:`slider`,tabIndex:b?-1:0,"aria-valuemin":h,"aria-valuemax":g,"aria-valuenow":e,"aria-valuetext":w?.(e),"aria-orientation":y,"aria-label":C?.[n]??(Y?void 0:x),"aria-labelledby":C?.[n]||Y?void 0:S,"aria-disabled":b||void 0,[s]:n}},n)),T!==void 0&&R.map((e,t)=>(0,i.jsx)(`input`,{type:`hidden`,name:T,value:e,readOnly:!0},t))]})}var f=d;f.displayName=`Slider`,exports.default=f;

package/components/slider.d.ts

@@ -0,0 +1,98 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+import { SliderOrientation } from '../utils/slider/sliderUtils';
+export type { SliderOrientation };
+/** What a slider takes and reports: one number, or one per thumb. The shape it is given is the shape it gives back. */
+export type SliderValue = number | number[];
+/** Why the value changed. A drag and the arrow keys want different things from a consumer — a live preview against a request. */
+export type SliderReason = 'pointer' | 'keyboard';
+type SliderBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange' | 'disabled'>;
+export interface SliderProps<TKey extends keyof ComponentsAndVariants = 'slider', TValue extends SliderValue = number> extends SliderBoxProps<TKey> {
+    /** Controlled value. A number is one thumb and an array is one per entry; leave it out and the widget owns it. */
+    value?: TValue;
+    /** What it starts at, and what decides how many thumbs there are. Default `min`. */
+    defaultValue?: TValue;
+    /** Fires on every step of a drag and every arrow key, in the shape the value was given in. */
+    onValueChange?: ChangeHandler<TValue, SliderReason>;
+    /** Fires once when the interaction ends — the place for a request the live value is too noisy for. */
+    onValueCommit?: ChangeHandler<TValue, SliderReason>;
+    /** The bottom of the range. Default `0`. */
+    min?: number;
+    /** The top of the range. Default `100`. */
+    max?: number;
+    /** The grid every value lands on. Default `1`; `0` is a continuous slider. */
+    step?: number;
+    /** What Page Up and Page Down move by. Default ten steps. */
+    largeStep?: number;
+    /** Which way the thumbs run. Default `horizontal`, whose arrows follow the reading order. */
+    orientation?: SliderOrientation;
+    /** Not adjustable, by pointer or by key. It is `aria-disabled`, so the thumb keeps its place in the tab order and stays readable. */
+    disabled?: boolean;
+    /** What the slider is called. On one thumb it names the thumb; on several it names the group around them. */
+    label?: string;
+    /** The same, naming an element that already says it. */
+    labelledBy?: string;
+    /** One name per thumb — "Minimum", "Maximum". A range wants them: `label` names the group, not the thumbs. */
+    thumbLabels?: readonly string[];
+    /** The value as it should be read out, when the number alone is not it: a currency, a date, a rating. */
+    format?: (value: number) => string;
+    /** What the value submits under. One hidden input per thumb, so a range posts two values of that name. */
+    name?: string;
+}
+/**
+ * A value chosen by dragging a thumb along a track.
+ * Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/slider/ and .../slider-multithumb/
+ *
+ * ```tsx
+ * <Slider label="Volume" defaultValue={40} onValueChange={(value) => setVolume(value)} />
+ * <Slider label="Price" defaultValue={[20, 80]} thumbLabels={['Lowest', 'Highest']} />
+ * ```
+ *
+ * **A number in is a number out.** `defaultValue={40}` makes a one-thumb slider whose `onValueChange`
+ * hands back a `number`; `defaultValue={[20, 80]}` makes a range whose handler takes a `number[]`. The
+ * number of thumbs is the value's own shape, so there is no second prop saying which kind this is.
+ *
+ * **This is not `<input type="range">`, and that is the one place the platform loses.** A range input
+ * cannot hold two thumbs, and its track and thumb are vendor pseudo-elements (`::-webkit-slider-thumb`)
+ * that no typed prop can reach — so a styled one is a rewrite of the parts, at which point the native
+ * element is only the keyboard. `name` still submits: a hidden input per thumb, so a form posts the
+ * value whether or not JavaScript ran the drag.
+ *
+ * **The position is an inline style, deliberately.** Everything a slider paints is a shared class except
+ * where its thumbs are — that is a per-frame value, and a class for it would be a rule per frame of a
+ * drag, never freed. It is the exception `useAnchorPosition`'s anchor name and the travelling tab
+ * indicator already take, and the reason a `ProgressRing` can round its fraction into a class where this
+ * cannot: nobody drags a ring.
+ *
+ * **It mirrors for free.** The fill and the thumbs are placed with `inset-inline-start`, so a
+ * right-to-left page draws the minimum on the right with no second stylesheet. The half that is not free
+ * is the keyboard, which is why the sideways arrows swap and Up and Down never do.
+ *
+ * **A press travels; a nudge does not.** A press on the track is the one move the eye has to follow, so
+ * the thumb animates the whole way. Every other move — a drag, an arrow key, a held arrow — is the
+ * `tracking` variant instead: 60ms `ease-out` on both the thumb and the fill, which must both carry it
+ * or they come apart (#144). Short rather than *off*, because off is exact and steps — a 1-in-100 slider
+ * moves 3.2px at a time on a 320px track. **Eased out rather than linear or eased**: a repeat restarts
+ * the transition every 33ms, so only its first half is ever seen, and on this curve that half is the
+ * straight part — it glides while the key is held and still decelerates on the last transition, the one
+ * allowed to finish. Measured against linear, which rode **1.4 steps** behind the value and stopped at
+ * full speed, this rides 0.9 behind and lands at 0.6 of cruising (#146).
+ *
+ * @pattern https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ * @a11y Each thumb is a `role="slider"` carrying `aria-valuemin`, `aria-valuemax`, `aria-valuenow` and
+ * `aria-orientation`; `format` writes `aria-valuetext` for a value a bare number does not read as.
+ * @a11y A thumb has to be named, so `label` names the one on a single slider — and on a range it names
+ * the `role="group"` around the thumbs, where `thumbLabels` names them one at a time.
+ * @a11y `disabled` is `aria-disabled` rather than the attribute: a slider a reader cannot reach is a
+ * value they cannot read, and a div takes no `disabled` anyway.
+ * @keyboard Tab — Every thumb is its own tab stop, so a range is two of them.
+ * @keyboard Right / Up — One step towards the maximum. In a right-to-left page Left is the increase, and
+ * Up never changes: the block axis has no reading order.
+ * @keyboard Left / Down — One step towards the minimum.
+ * @keyboard PageUp / PageDown — `largeStep`, ten steps unless it says otherwise.
+ * @keyboard Home / End — The minimum and the maximum themselves, on or off the step grid.
+ */
+declare function SliderImpl<TKey extends keyof ComponentsAndVariants = 'slider', TValue extends SliderValue = number>(props: SliderProps<TKey, TValue>): import("react").JSX.Element;
+declare const Slider: typeof SliderImpl;
+export default Slider;

package/components/slider.mjs

@@ -0,0 +1,250 @@
+"use client";
+import { u as e } from "../platform.mjs";
+import t from "../box.mjs";
+import { a as n, i as r, o as i } from "../behavior.mjs";
+import { useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/utils/slider/sliderUtils.ts
+var l;
+(function(e) {
+	function t(e) {
+		let t = String(Math.abs(e));
+		if (t.includes("e")) return 12;
+		let n = t.indexOf(".");
+		return n === -1 ? 0 : t.length - n - 1;
+	}
+	e.decimals = t;
+	function n(e, t) {
+		return Number(e.toFixed(Math.min(t, 15)));
+	}
+	function r(e, t, n) {
+		return Math.min(Math.max(e, t), n);
+	}
+	e.clamp = r;
+	function i(e, i) {
+		let { min: a, max: o, step: s } = i, c = r(e, a, o);
+		return s > 0 ? r(n(a + Math.round((c - a) / s) * s, t(s) + t(a)), a, o) : c;
+	}
+	e.snap = i;
+	function a(e, t, n) {
+		return n <= t ? 0 : (r(e, t, n) - t) * (100 / (n - t));
+	}
+	e.percent = a;
+	function o(e, t, n) {
+		return `${Math.round(a(e, t, n) * 100) / 100}%`;
+	}
+	e.percentage = o;
+	function s(e) {
+		return typeof e == "number" ? [e] : [...e];
+	}
+	e.thumbs = s;
+	function c(e, t) {
+		return typeof e == "number" ? t[0] : [...t];
+	}
+	e.shaped = c;
+	function l(e, t, n, a) {
+		let o = t > 0 ? e[t - 1] : a.min, s = t < e.length - 1 ? e[t + 1] : a.max, c = [...e];
+		return c[t] = r(i(n, a), o, s), c;
+	}
+	e.move = l;
+	function u(e, t) {
+		return e.length === t.length && e.every((e, n) => e === t[n]);
+	}
+	e.same = u;
+	function d(e, t) {
+		let n = 0, r = Infinity;
+		return e.forEach((e, i) => {
+			let a = Math.abs(e - t);
+			a <= r && (n = i, r = a);
+		}), n;
+	}
+	e.nearest = d;
+	function f(e, t, n, r, i) {
+		let a = r === "vertical" ? e.height === 0 ? 0 : (e.bottom - n) / e.height : e.width === 0 ? 0 : i ? (e.right - t) / e.width : (t - e.left) / e.width;
+		return Math.min(Math.max(a, 0), 1);
+	}
+	e.valueAt = f;
+	function p(e, t = !1) {
+		if (e === "Home") return {
+			kind: "edge",
+			delta: -1
+		};
+		if (e === "End") return {
+			kind: "edge",
+			delta: 1
+		};
+		if (e === "PageUp") return {
+			kind: "page",
+			delta: 1
+		};
+		if (e === "PageDown") return {
+			kind: "page",
+			delta: -1
+		};
+		if (e === "ArrowUp") return {
+			kind: "step",
+			delta: 1
+		};
+		if (e === "ArrowDown") return {
+			kind: "step",
+			delta: -1
+		};
+		if (e === "ArrowRight") return {
+			kind: "step",
+			delta: t ? -1 : 1
+		};
+		if (e === "ArrowLeft") return {
+			kind: "step",
+			delta: t ? 1 : -1
+		};
+	}
+	e.moveFor = p;
+	function m(e, t, n, r) {
+		if (t.kind === "edge") return t.delta > 0 ? n.max : n.min;
+		let i = t.kind === "page" ? r : n.step;
+		return e + t.delta * i;
+	}
+	e.moved = m;
+})(l ||= {});
+var u = l, d = "data-index";
+function f(e, t, n) {
+	return {
+		min: e,
+		max: t,
+		step: n
+	};
+}
+function p(e, t) {
+	return t ? { insetBlockEnd: e } : { insetInlineStart: e };
+}
+function m(e, t, n) {
+	let r = e.length > 1 ? Math.min(...e) : t.min, i = Math.max(...e), a = u.percent(r, t.min, t.max), o = `${Math.round((u.percent(i, t.min, t.max) - a) * 100) / 100}%`;
+	return n ? {
+		insetBlockEnd: `${Math.round(a * 100) / 100}%`,
+		blockSize: o
+	} : {
+		insetInlineStart: `${Math.round(a * 100) / 100}%`,
+		inlineSize: o
+	};
+}
+function h(l) {
+	let { value: h, defaultValue: g, onValueChange: _, onValueCommit: v, min: y = 0, max: b = 100, step: x = 1, largeStep: S = x * 10, orientation: C = "horizontal", disabled: w = !1, label: T, labelledBy: E, thumbLabels: D, format: O, name: k, props: A, ...j } = l, M = a(null), N = a(null), P = a(null), F = a(!1), [I, L] = o(!1), [R, z] = r({
+		value: h,
+		defaultValue: g ?? y,
+		onChange: _
+	}), B = f(y, b, x), V = C === "vertical", H = u.thumbs(R), U = i(R), W = n(v), G = n((e, t) => {
+		z((t) => u.same(u.thumbs(t), e) ? t : u.shaped(t, e), t);
+	}), K = (t) => {
+		let n = N.current;
+		if (!n) return;
+		let r = u.valueAt(n.getBoundingClientRect(), t.clientX, t.clientY, C, e(n));
+		return y + r * (b - y);
+	}, q = (e) => M.current?.querySelectorAll("[role=\"slider\"]")[e], J = n((e) => {
+		if (w || e.button !== 0 || e.defaultPrevented) return;
+		let t = K(e);
+		if (t === void 0) return;
+		let n = u.thumbs(U.current), r = u.nearest(n, t);
+		P.current = r, e.preventDefault(), e.currentTarget.setPointerCapture?.(e.pointerId), q(r)?.focus(), G(u.move(n, r, t, B), {
+			reason: "pointer",
+			event: e
+		});
+	}), Y = n((e) => {
+		let t = P.current;
+		if (t === null) return;
+		let n = K(e);
+		n !== void 0 && (L(!0), G(u.move(u.thumbs(U.current), t, n, B), {
+			reason: "pointer",
+			event: e
+		}));
+	}), X = n((e) => {
+		P.current !== null && (P.current = null, L(!1), e.currentTarget.releasePointerCapture?.(e.pointerId), W(U.current, {
+			reason: "pointer",
+			event: e
+		}));
+	}), Z = n((t) => {
+		if (w || t.defaultPrevented) return;
+		let n = t.target?.closest("[role=\"slider\"]"), r = Number(n?.getAttribute(d) ?? -1);
+		if (!n || r < 0) return;
+		let i = u.moveFor(t.key, e(n));
+		if (!i) return;
+		t.preventDefault(), F.current = !0, L(!0);
+		let a = u.thumbs(U.current);
+		G(u.move(a, r, u.moved(a[r], i, B, S), B), {
+			reason: "keyboard",
+			event: t
+		});
+	}), Q = n((e) => {
+		F.current && (F.current = !1, L(!1), W(U.current, {
+			reason: "keyboard",
+			event: e
+		}));
+	}), $ = H.length > 1;
+	return /* @__PURE__ */ c(t, {
+		ref: M,
+		component: "slider",
+		...j,
+		variant: [j.variant, {
+			vertical: V,
+			disabled: w
+		}],
+		props: {
+			role: $ ? "group" : void 0,
+			"aria-label": $ ? T : void 0,
+			"aria-labelledby": $ ? E : void 0,
+			...A,
+			onPointerDown: J,
+			onPointerMove: Y,
+			onPointerUp: X,
+			onPointerCancel: X,
+			onKeyDown: Z,
+			onKeyUp: Q
+		},
+		children: [
+			/* @__PURE__ */ s(t, {
+				ref: N,
+				component: "slider.track",
+				variant: { vertical: V },
+				children: /* @__PURE__ */ s(t, {
+					component: "slider.fill",
+					variant: {
+						vertical: V,
+						tracking: I
+					},
+					style: m(H, B, V)
+				})
+			}),
+			H.map((e, n) => /* @__PURE__ */ s(t, {
+				component: "slider.thumb",
+				variant: {
+					vertical: V,
+					disabled: w,
+					tracking: I
+				},
+				style: p(u.percentage(e, y, b), V),
+				props: {
+					role: "slider",
+					tabIndex: w ? -1 : 0,
+					"aria-valuemin": y,
+					"aria-valuemax": b,
+					"aria-valuenow": e,
+					"aria-valuetext": O?.(e),
+					"aria-orientation": C,
+					"aria-label": D?.[n] ?? ($ ? void 0 : T),
+					"aria-labelledby": D?.[n] || $ ? void 0 : E,
+					"aria-disabled": w || void 0,
+					[d]: n
+				}
+			}, n)),
+			k !== void 0 && H.map((e, t) => /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: k,
+				value: e,
+				readOnly: !0
+			}, t))
+		]
+	});
+}
+var g = h;
+g.displayName = "Slider";
+//#endregion
+export { g as default };

package/components/svg.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e,t){let{props:n,...r}=e,i=r,a;for(let e of t)e in i&&((a??={})[e]=i[e],delete i[e]);return{styleProps:i,tagProps:a?{...n,...a}:n}}function o(e,o=[],s){let c=o,l=(0,n.forwardRef)((t,n)=>{let{styleProps:o,tagProps:s}=a(t,c);return(0,r.jsx)(i.default,{tag:e,ref:n,component:e,...o,props:s})});return l.displayName=s??t.n.capitalize(e),t.a(l),l}var s=`http://www.w3.org/2000/svg`,c=[`viewBox`,`preserveAspectRatio`,`width`,`height`];function l(e,n){let{label:o,...l}=e,{styleProps:u,tagProps:d}=a(l,c);return(0,r.jsx)(i.default,{tag:`svg`,ref:n,component:`svg`,...u,props:{xmlns:s,...t.r(o,d),...d}})}var u=t.a((0,n.forwardRef)(l));u.displayName=`Svg`;var d=o(`g`,[`transform`]),f=o(`defs`),p=o(`path`,[`d`,`transform`,`pathLength`]),m=o(`circle`,[`transform`,`pathLength`]),h=o(`ellipse`,[`transform`,`pathLength`]),g=o(`rect`,[`width`,`height`,`transform`,`pathLength`]),_=o(`line`,[`x1`,`y1`,`x2`,`y2`,`transform`,`pathLength`]),v=o(`polyline`,[`points`,`transform`,`pathLength`]),y=o(`polygon`,[`points`,`transform`,`pathLength`]),b=o(`text`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`,`transform`],`SvgText`),x=o(`tspan`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`],`TSpan`),S=o(`linearGradient`,[`x1`,`y1`,`x2`,`y2`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),C=o(`radialGradient`,[`cx`,`cy`,`r`,`fx`,`fy`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),w=o(`stop`,[`offset`,`stopColor`,`stopOpacity`]),T=o(`clipPath`,[`clipPathUnits`,`transform`]),E=o(`mask`,[`maskUnits`,`maskContentUnits`,`x`,`y`,`width`,`height`]),D=o(`use`,[`href`,`width`,`height`,`transform`]),O=o(`symbol`,[`viewBox`,`preserveAspectRatio`,`x`,`y`,`width`,`height`],`SvgSymbol`),k=o(`marker`,[`markerWidth`,`markerHeight`,`refX`,`refY`,`orient`,`markerUnits`,`viewBox`]);exports.Circle=m,exports.ClipPath=T,exports.Defs=f,exports.Ellipse=h,exports.G=d,exports.Line=_,exports.LinearGradient=S,exports.Marker=k,exports.Mask=E,exports.Path=p,exports.Polygon=y,exports.Polyline=v,exports.RadialGradient=C,exports.Rect=g,exports.Stop=w,exports.Svg=u,exports.SvgSymbol=O,exports.SvgText=b,exports.TSpan=x,exports.Use=D;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@box-kite/react");i=e.t(i,1);function a(e,t){let{props:n,...r}=e,i=r,a;for(let e of t)e in i&&((a??={})[e]=i[e],delete i[e]);return{styleProps:i,tagProps:a?{...n,...a}:n}}function o(e,o=[],s){let c=o,l=(0,n.forwardRef)((t,n)=>{let{styleProps:o,tagProps:s}=a(t,c);return(0,r.jsx)(i.default,{tag:e,ref:n,component:e,...o,props:s})});return l.displayName=s??t.a.capitalize(e),t.c(l),l}var s=`http://www.w3.org/2000/svg`,c=[`viewBox`,`preserveAspectRatio`,`width`,`height`];function l(e,n){let{label:o,...l}=e,{styleProps:u,tagProps:d}=a(l,c);return(0,r.jsx)(i.default,{tag:`svg`,ref:n,component:`svg`,...u,props:{xmlns:s,...t.o(o,d),...d}})}var u=t.c((0,n.forwardRef)(l));u.displayName=`Svg`;var d=o(`g`,[`transform`]),f=o(`defs`),p=o(`path`,[`d`,`transform`,`pathLength`]),m=o(`circle`,[`transform`,`pathLength`]),h=o(`ellipse`,[`transform`,`pathLength`]),g=o(`rect`,[`width`,`height`,`transform`,`pathLength`]),_=o(`line`,[`x1`,`y1`,`x2`,`y2`,`transform`,`pathLength`]),v=o(`polyline`,[`points`,`transform`,`pathLength`]),y=o(`polygon`,[`points`,`transform`,`pathLength`]),b=o(`text`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`,`transform`],`SvgText`),x=o(`tspan`,[`x`,`y`,`dx`,`dy`,`textLength`,`lengthAdjust`],`TSpan`),S=o(`linearGradient`,[`x1`,`y1`,`x2`,`y2`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),C=o(`radialGradient`,[`cx`,`cy`,`r`,`fx`,`fy`,`gradientUnits`,`gradientTransform`,`spreadMethod`]),w=o(`stop`,[`offset`,`stopColor`,`stopOpacity`]),T=o(`clipPath`,[`clipPathUnits`,`transform`]),E=o(`mask`,[`maskUnits`,`maskContentUnits`,`x`,`y`,`width`,`height`]),D=o(`use`,[`href`,`width`,`height`,`transform`]),O=o(`symbol`,[`viewBox`,`preserveAspectRatio`,`x`,`y`,`width`,`height`],`SvgSymbol`),k=o(`marker`,[`markerWidth`,`markerHeight`,`refX`,`refY`,`orient`,`markerUnits`,`viewBox`]);exports.Circle=m,exports.ClipPath=T,exports.Defs=f,exports.Ellipse=h,exports.G=d,exports.Line=_,exports.LinearGradient=S,exports.Marker=k,exports.Mask=E,exports.Path=p,exports.Polygon=y,exports.Polyline=v,exports.RadialGradient=C,exports.Rect=g,exports.Stop=w,exports.Svg=u,exports.SvgSymbol=O,exports.SvgText=b,exports.TSpan=x,exports.Use=D;

package/components/svg.d.ts

@@ -13,7 +13,7 @@ import { ComponentsAndVariants } from '@box-kite/core/types';
 type Attribute<TTag extends keyof React.JSX.IntrinsicElements> = keyof React.JSX.IntrinsicElements[TTag];
 /** Box's props for the tag, minus the names this element claims as attributes, plus those attributes. */
 type SvgElementProps<TTag extends keyof React.JSX.IntrinsicElements, TAttribute extends Attribute<TTag>, TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<TTag, TKey>, 'tag' | TAttribute> & Pick<React.JSX.IntrinsicElements[TTag], TAttribute>;
-type SvgElementType<TTag extends keyof React.JSX.IntrinsicElements, TAttribute extends Attribute<TTag>, TKey extends keyof ComponentsAndVariants = never> = (props: SvgElementProps<TTag, TAttribute, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+type SvgElementType<TTag extends keyof React.JSX.IntrinsicElements, TAttribute extends Attribute<TTag>> = <TKey extends keyof ComponentsAndVariants = never>(props: SvgElementProps<TTag, TAttribute, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 interface SvgOwnProps {
     /** The coordinate system every number inside the drawing is measured in — `"0 0 24 24"`. */
     viewBox?: string;
@@ -27,37 +27,39 @@ interface SvgOwnProps {
     label?: string;
 }
 /** The `width`/`height` here are the SVG attributes, not the ÷4 layout props they are on a `<div>`. */
-type Props = Omit<BoxProps<'svg'>, 'tag' | 'width' | 'height'> & SvgOwnProps;
+type Props<TKey extends keyof ComponentsAndVariants = never> = Omit<BoxProps<'svg', TKey>, 'tag' | 'width' | 'height'> & SvgOwnProps;
 /** The root `<svg>`: the coordinate system, the size, and whether a screen reader is told about it. */
-export declare const Svg: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & RefAttributes<SVGSVGElement>>;
-export type SvgProps = React.ComponentProps<typeof Svg>;
+export declare const Svg: (<TKey extends keyof ComponentsAndVariants = never>(props: Props<TKey> & RefAttributes<SVGSVGElement>) => React.ReactNode) & {
+    displayName?: string;
+};
+export type SvgProps = Props & RefAttributes<SVGSVGElement>;
 /**
  * The rest of the elements, each with the attributes it owns — everything CSS styles on it stays a Box
  * prop. `transform` is an attribute everywhere, because SVG's version carries its own centre of rotation
  * (`rotate(-90 48 48)`) and the CSS `rotate` prop cannot say that without a `transformOrigin` we lack.
  */
-export declare const G: SvgElementType<"g", "transform", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Defs: SvgElementType<"defs", keyof import('react').SVGProps<SVGDefsElement>, "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Path: SvgElementType<"path", "transform" | "d" | "pathLength", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Circle: SvgElementType<"circle", "transform" | "pathLength", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Ellipse: SvgElementType<"ellipse", "transform" | "pathLength", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Rect: SvgElementType<"rect", "transform" | "height" | "width" | "pathLength", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Line: SvgElementType<"line", "transform" | "pathLength" | "x1" | "x2" | "y1" | "y2", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Polyline: SvgElementType<"polyline", "transform" | "pathLength" | "points", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Polygon: SvgElementType<"polygon", "transform" | "pathLength" | "points", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const G: SvgElementType<"g", "transform">;
+export declare const Defs: SvgElementType<"defs", keyof import('react').SVGProps<SVGDefsElement>>;
+export declare const Path: SvgElementType<"path", "transform" | "d" | "pathLength">;
+export declare const Circle: SvgElementType<"circle", "transform" | "pathLength">;
+export declare const Ellipse: SvgElementType<"ellipse", "transform" | "pathLength">;
+export declare const Rect: SvgElementType<"rect", "width" | "height" | "transform" | "pathLength">;
+export declare const Line: SvgElementType<"line", "transform" | "pathLength" | "x1" | "x2" | "y1" | "y2">;
+export declare const Polyline: SvgElementType<"polyline", "transform" | "pathLength" | "points">;
+export declare const Polygon: SvgElementType<"polygon", "transform" | "pathLength" | "points">;
 /**
  * `SvgText`, not `Text`, which a future HTML text component would want. Its `x`/`y` are attributes: the
  * CSS geometry properties do not apply to `<text>`, so the Box props of that name would move nothing.
  */
-export declare const SvgText: SvgElementType<"text", "transform" | "x" | "y" | "dx" | "dy" | "lengthAdjust" | "textLength", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const TSpan: SvgElementType<"tspan", "x" | "y" | "dx" | "dy" | "lengthAdjust" | "textLength", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const LinearGradient: SvgElementType<"linearGradient", "gradientTransform" | "gradientUnits" | "spreadMethod" | "x1" | "x2" | "y1" | "y2", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const RadialGradient: SvgElementType<"radialGradient", "cx" | "cy" | "r" | "fx" | "fy" | "gradientTransform" | "gradientUnits" | "spreadMethod", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Stop: SvgElementType<"stop", "stopColor" | "stopOpacity" | "offset", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const ClipPath: SvgElementType<"clipPath", "transform" | "clipPathUnits", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Mask: SvgElementType<"mask", "height" | "width" | "x" | "y" | "maskContentUnits" | "maskUnits", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Use: SvgElementType<"use", "transform" | "height" | "width" | "href", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const SvgText: SvgElementType<"text", "transform" | "x" | "y" | "dx" | "dy" | "lengthAdjust" | "textLength">;
+export declare const TSpan: SvgElementType<"tspan", "x" | "y" | "dx" | "dy" | "lengthAdjust" | "textLength">;
+export declare const LinearGradient: SvgElementType<"linearGradient", "gradientTransform" | "gradientUnits" | "spreadMethod" | "x1" | "x2" | "y1" | "y2">;
+export declare const RadialGradient: SvgElementType<"radialGradient", "cx" | "cy" | "r" | "fx" | "fy" | "gradientTransform" | "gradientUnits" | "spreadMethod">;
+export declare const Stop: SvgElementType<"stop", "stopColor" | "stopOpacity" | "offset">;
+export declare const ClipPath: SvgElementType<"clipPath", "transform" | "clipPathUnits">;
+export declare const Mask: SvgElementType<"mask", "width" | "height" | "x" | "y" | "maskContentUnits" | "maskUnits">;
+export declare const Use: SvgElementType<"use", "width" | "height" | "transform" | "href">;
 /** `SvgSymbol`, not `Symbol` — the global of that name is not something a module should shadow. */
-export declare const SvgSymbol: SvgElementType<"symbol", "height" | "width" | "x" | "y" | "preserveAspectRatio" | "viewBox", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
-export declare const Marker: SvgElementType<"marker", "markerHeight" | "markerUnits" | "markerWidth" | "orient" | "refX" | "refY" | "viewBox", "button" | "checkbox" | "textarea" | "tooltip" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "textbox" | "datagrid" | "radioButton" | "switch" | "dropdown" | "label" | "datagrid.filter" | "datagrid.filter.cell" | "datagrid.filter.cell.input" | "datagrid.filter.row" | "datagrid.content" | "datagrid.loader" | "datagrid.loader.track" | "datagrid.loader.track.bar" | "datagrid.topBar" | "datagrid.topBar.globalFilter" | "datagrid.topBar.globalFilter.stats" | "datagrid.topBar.columnGroups" | "datagrid.topBar.columnGroups.icon" | "datagrid.topBar.columnGroups.separator" | "datagrid.topBar.columnGroups.item" | "datagrid.topBar.columnGroups.item.icon" | "datagrid.topBar.columnVisibility" | "datagrid.topBar.columnVisibility.badge" | "datagrid.header" | "datagrid.header.cell" | "datagrid.header.cell.resizer" | "datagrid.header.cell.contextMenu" | "datagrid.header.cell.contextMenu.icon" | "datagrid.header.cell.contextMenu.tooltip" | "datagrid.header.cell.contextMenu.tooltip.item" | "datagrid.header.cell.contextMenu.tooltip.item.icon" | "datagrid.header.cell.contextMenu.tooltip.item.separator" | "datagrid.body" | "datagrid.body.empty" | "datagrid.body.cell" | "datagrid.body.cell.text" | "datagrid.body.cell.rowDetail" | "datagrid.body.row" | "datagrid.body.detailRow" | "datagrid.body.detailRow.content" | "datagrid.body.groupRow" | "datagrid.body.groupRow.expandButton" | "datagrid.emptyColumns" | "datagrid.bottomBar" | "datagrid.bottomBar.info" | "datagrid.bottomBar.clearFilters" | "datagrid.bottomBar.pagination" | "datagrid.bottomBar.pagination.button" | "datagrid.bottomBar.pagination.info" | "datagrid.bottomBar.pagination.pageSize" | "dropdown.icon" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem">;
+export declare const SvgSymbol: SvgElementType<"symbol", "width" | "height" | "x" | "y" | "preserveAspectRatio" | "viewBox">;
+export declare const Marker: SvgElementType<"marker", "markerHeight" | "markerUnits" | "markerWidth" | "orient" | "refX" | "refY" | "viewBox">;
 export {};

package/components/svg.mjs

@@ -1,4 +1,4 @@
-import { a as e, n as t, r as n } from "../react-shared.mjs";
+import { a as e, c as t, o as n } from "../react-shared.mjs";
 import { forwardRef as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import a from "@box-kite/react";
@@ -25,7 +25,7 @@ function s(n, s = [], c) {
 			props: s
 		});
 	});
-	return u.displayName = c ?? t.capitalize(n), e(u), u;
+	return u.displayName = c ?? e.capitalize(n), t(u), u;
 }
 var c = "http://www.w3.org/2000/svg", l = [
 	"viewBox",
@@ -47,7 +47,7 @@ function u(e, t) {
 		}
 	});
 }
-var d = /* @__PURE__ */ e(r(u));
+var d = /* @__PURE__ */ t(r(u));
 d.displayName = "Svg";
 var f = /* @__PURE__ */ s("g", ["transform"]), p = /* @__PURE__ */ s("defs"), m = /* @__PURE__ */ s("path", [
 	"d",

package/components/switch.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./checkbox.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(n,i){let{props:a,...o}=n,s=e.o(a?.onKeyDown),c=e.o(e=>{s(e),!(e.key!==`Enter`||e.defaultPrevented)&&(e.preventDefault(),e.currentTarget.click())});return(0,r.jsx)(t.default,{ref:i,component:`switch`,...o,props:{...a,role:`switch`,onKeyDown:c}})}var a=(0,n.forwardRef)(i);a.displayName=`Switch`,exports.default=a;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./checkbox.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(n,i){let{props:a,...o}=n,s=e.a(a?.onKeyDown),c=e.a(e=>{s(e),!(e.key!==`Enter`||e.defaultPrevented)&&(e.preventDefault(),e.currentTarget.click())});return(0,r.jsx)(t.default,{ref:i,component:`switch`,...o,props:{...a,role:`switch`,onKeyDown:c}})}var a=(0,n.forwardRef)(i);a.displayName=`Switch`,exports.default=a;

package/components/switch.d.ts

@@ -4,16 +4,25 @@ import { OmitTagProps } from '../react/boxProps';
 import { ComponentsAndVariants } from '@box-kite/core/types';
 type SwitchProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props' | 'indeterminate'>;
 interface Props<TKey extends keyof ComponentsAndVariants> extends SwitchProps<TKey> {
+    /** What the switch submits under. Needed for a form; a controlled switch can do without one. */
     name?: string;
+    /** Attributes for the `<input>` itself. `type` is the component's, and `role` is already `switch`. */
     props?: OmitTagProps<BoxTagProps<'input'>, 'type'>;
+    /** Fires on every keystroke or click. On a checkbox this is the same moment as `onChange`. */
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Fires when the switch is toggled. `e.target.checked` is the new state. */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The value the form submits when it is on. Defaults to `"on"`, as HTML does. */
     value?: string | number;
+    /** Focus it on mount. One per page at most — a stolen focus is a lost place in the document. */
     autoFocus?: boolean;
+    /** Rendered and read, but not toggleable. Unlike `disabled` it stays in the tab order and submits. */
     readOnly?: boolean;
+    /** The state it starts in when the switch is uncontrolled. Pass `checked` instead to control it. */
     defaultChecked?: boolean;
     /** The text beside the switch, rendered inside a label that wraps the input. */
     label?: React.ReactNode;
+    /** Styles for the wrapping `<label>`: the row's layout, not the track's own appearance. */
     labelProps?: BoxProps<'label'>;
 }
 declare const _default: <TKey extends keyof ComponentsAndVariants = "switch">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;

package/components/switch.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { o as e } from "../behavior.mjs";
+import { a as e } from "../behavior.mjs";
 import t from "./checkbox.mjs";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";