@graphprotocol/gds-react 0.1.2 → 0.2.1

package/dist/tailwind-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin.js","sourceRoot":"","sources":["../src/tailwind-plugin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin.js","sourceRoot":"","sources":["../src/tailwind-plugin.ts"],"names":[],"mappings":"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"}

package/dist/utils/InlineCounter.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from 'react';
+export declare function InlineCounter(props: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InlineCounter.d.ts.map

package/dist/utils/InlineCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCounter.d.ts","sourceRoot":"","sources":["../../src/utils/InlineCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAErD,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAc1D"}

package/dist/utils/InlineCounter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export function InlineCounter(props) {
+    const [count, setCount] = useState(0);
+    return (_jsxs("span", { ...props, children: [count, ' ', _jsx("button", { type: "button", onClick: () => setCount((prev) => prev + 1), className: "inline hover:underline", children: "(increment)" })] }));
+}
+//# sourceMappingURL=InlineCounter.js.map

package/dist/utils/InlineCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCounter.js","sourceRoot":"","sources":["../../src/utils/InlineCounter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAErD,MAAM,UAAU,aAAa,CAAC,KAA6B;IACzD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACrC,OAAO,CACL,mBAAU,KAAK,aACZ,KAAK,EAAE,GAAG,EACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,EAC3C,SAAS,EAAC,wBAAwB,4BAG3B,IACJ,CACR,CAAA;AACH,CAAC"}

package/dist/utils/RenderCount.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from 'react';
+export declare function RenderCount(props: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RenderCount.d.ts.map

package/dist/utils/RenderCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderCount.d.ts","sourceRoot":"","sources":["../../src/utils/RenderCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,2CAGxD"}

package/dist/utils/RenderCount.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRenderCount } from '@react-hookz/web';
+export function RenderCount(props) {
+    const renderCount = useRenderCount();
+    return _jsx("span", { ...props, children: renderCount });
+}
+//# sourceMappingURL=RenderCount.js.map

package/dist/utils/RenderCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderCount.js","sourceRoot":"","sources":["../../src/utils/RenderCount.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,UAAU,WAAW,CAAC,KAA6B;IACvD,MAAM,WAAW,GAAG,cAAc,EAAE,CAAA;IACpC,OAAO,kBAAU,KAAK,YAAG,WAAW,GAAQ,CAAA;AAC9C,CAAC"}

package/dist/utils/cn.d.ts

@@ -3,7 +3,9 @@
  *
  * @example
  *
- *     cn('base-class', condition && 'conditional-class', className)
+ * ```ts
+ * cn('base-class', condition && 'conditional-class', className)
+ * ```
  */
 export declare function cn(...classes: (string | undefined | null | false)[]): string;
 //# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E"}
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E"}

package/dist/utils/cn.js

@@ -3,7 +3,9 @@
  *
  * @example
  *
- *     cn('base-class', condition && 'conditional-class', className)
+ * ```ts
+ * cn('base-class', condition && 'conditional-class', className)
+ * ```
  */
 export function cn(...classes) {
     return classes.filter(Boolean).join(' ');

package/dist/utils/cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,OAA8C;IAClE,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC1C,CAAC"}
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,OAA8C;IAClE,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC1C,CAAC"}

package/dist/utils/getCSSPropsAttributes.d.ts

@@ -3,12 +3,19 @@ import { type ComponentCSSProps, type ComponentCSSPropsConfig, type GDSComponent
 type AllCSSProps<C extends GDSComponent> = {
     [K in keyof ComponentCSSProps<C>]-?: ComponentCSSProps<C>[K] | undefined;
 };
+/**
+ * Validates the passed values object:
+ *
+ * - Rejects keys that are not CSS props.
+ * - For props with a `defaultValue`, ensures they can be `undefined` (preventing destructuring
+ *   defaults, which would break `default-*` utilities).
+ * - For props without a `defaultValue`, allows any value since they're required.
+ */
 type ValidatePassedValues<C extends GDSComponent, T extends AllCSSProps<C>> = {
-    [K in keyof T]: K extends keyof ComponentCSSPropsConfig<C> ? 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K] ? undefined extends T[K] ? T[K] : never : T[K] : T[K];
+    [K in keyof T]: K extends keyof ComponentCSSPropsConfig<C> ? 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K] ? undefined extends T[K] ? T[K] : never : T[K] : `"${K & string}" is not a CSS prop of this component`;
 };
 /**
- * Returns attributes to spread on the root element of a component that supports CSS Props. This
- * enables the CSS Props system to apply prop-based styling.
+ * Returns attributes to spread on the root element of a component that supports CSS props.
  *
  * @param component The component metadata object created with createComponent.
  * @param passedValues Object containing all the CSS prop values from the component props.

package/dist/utils/getCSSPropsAttributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getCSSPropsAttributes.d.ts","sourceRoot":"","sources":["../../src/utils/getCSSPropsAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAG/B,KAAK,WAAW,CAAC,CAAC,SAAS,YAAY,IAAI;KACxC,CAAC,IAAI,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;CACzE,CAAA;AAID,KAAK,oBAAoB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,IAAI;KAC3E,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,MAAM,uBAAuB,CAAC,CAAC,CAAC,GACtD,cAAc,SAAS,MAAM,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GACpB,CAAC,CAAC,CAAC,CAAC,GACJ,KAAK,GACP,CAAC,CAAC,CAAC,CAAC,GACN,CAAC,CAAC,CAAC,CAAC;CACT,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,EACpF,SAAS,EAAE,CAAC,EACZ,YAAY,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,EACxC,KAAK,EAAE,aAAa,GAAG,SAAS,GAC/B;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,CAa1B"}
+{"version":3,"file":"getCSSPropsAttributes.d.ts","sourceRoot":"","sources":["../../src/utils/getCSSPropsAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EAClB,MAAM,wBAAwB,CAAA;AAG/B,KAAK,WAAW,CAAC,CAAC,SAAS,YAAY,IAAI;KACxC,CAAC,IAAI,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS;CACzE,CAAA;AAED;;;;;;;GAOG;AACH,KAAK,oBAAoB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,IAAI;KAC3E,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,MAAM,uBAAuB,CAAC,CAAC,CAAC,GACtD,cAAc,SAAS,MAAM,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GACpB,CAAC,CAAC,CAAC,CAAC,GACJ,KAAK,GACP,CAAC,CAAC,CAAC,CAAC,GACN,IAAI,CAAC,GAAG,MAAM,uCAAuC;CAC1D,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,YAAY,EAAE,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,EACpF,SAAS,EAAE,CAAC,EACZ,YAAY,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,EACxC,KAAK,EAAE,aAAa,GAAG,SAAS,GAC/B;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,CAa1B"}

package/dist/utils/getCSSPropsAttributes.js

@@ -1,7 +1,6 @@
 import { getCSSPropRawValue, } from '@graphprotocol/gds-css';
 /**
- * Returns attributes to spread on the root element of a component that supports CSS Props. This
- * enables the CSS Props system to apply prop-based styling.
+ * Returns attributes to spread on the root element of a component that supports CSS props.
  *
  * @param component The component metadata object created with createComponent.
  * @param passedValues Object containing all the CSS prop values from the component props.
@@ -11,14 +10,14 @@ import { getCSSPropRawValue, } from '@graphprotocol/gds-css';
 export function getCSSPropsAttributes(component, passedValues, style) {
     const customProperties = {};
     for (const propName in passedValues) {
-        const prop = component.getCSSPropByName(propName);
+        const cssProp = component.getCSSPropByName(propName);
         const value = passedValues[propName];
         if (value === undefined)
             continue;
-        customProperties[`--gds-passed-${prop.kebabName}`] = getCSSPropRawValue(prop, value);
+        customProperties[`--gds-passed-${cssProp.kebabName}`] = getCSSPropRawValue(cssProp, value);
     }
     return {
-        style: { ...style, ...customProperties },
+        style: { ...customProperties, ...style },
     };
 }
 //# sourceMappingURL=getCSSPropsAttributes.js.map

package/dist/utils/getCSSPropsAttributes.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCSSPropsAttributes.js","sourceRoot":"","sources":["../../src/utils/getCSSPropsAttributes.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,GAInB,MAAM,wBAAwB,CAAA;AAmB/B;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CACnC,SAAY,EACZ,YAAwC,EACxC,KAAgC;IAEhC,MAAM,gBAAgB,GAA2B,EAAE,CAAA;IAEnD,KAAK,MAAM,QAAQ,IAAI,YAAY,EAAE,CAAC;QACpC,MAAM,IAAI,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QACjD,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;QACpC,IAAI,KAAK,KAAK,SAAS;YAAE,SAAQ;QACjC,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IACtF,CAAC;IAED,OAAO;QACL,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,GAAG,gBAAgB,EAAE;KACzC,CAAA;AACH,CAAC"}
+{"version":3,"file":"getCSSPropsAttributes.js","sourceRoot":"","sources":["../../src/utils/getCSSPropsAttributes.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,kBAAkB,GAInB,MAAM,wBAAwB,CAAA;AAyB/B;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CACnC,SAAY,EACZ,YAAwC,EACxC,KAAgC;IAEhC,MAAM,gBAAgB,GAA2B,EAAE,CAAA;IAEnD,KAAK,MAAM,QAAQ,IAAI,YAAY,EAAE,CAAC;QACpC,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QACpD,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;QACpC,IAAI,KAAK,KAAK,SAAS;YAAE,SAAQ;QACjC,gBAAgB,CAAC,gBAAgB,OAAO,CAAC,SAAS,EAAE,CAAC,GAAG,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC5F,CAAC;IAED,OAAO;QACL,KAAK,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,KAAK,EAAE;KACzC,CAAA;AACH,CAAC"}

package/dist/utils/index.d.ts

@@ -2,8 +2,10 @@ export { cn } from './cn.ts';
 export { getAssetUrl } from './getAssetUrl.ts';
 export { getCSSPropsAttributes } from './getCSSPropsAttributes.ts';
 export { getReactNodeKey } from './getReactNodeKey.ts';
+export { InlineCounter } from './InlineCounter.tsx';
 export { isReactNode } from './isReactNode.ts';
 export { reactNodeToString } from './reactNodeToString.ts';
+export { RenderCount } from './RenderCount.tsx';
 export { splitProps } from './splitProps.ts';
 export { styleScheduler } from './styleScheduler.ts';
 export { trimReactNode } from './trimReactNode.tsx';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/utils/index.js

@@ -2,8 +2,10 @@ export { cn } from "./cn.js";
 export { getAssetUrl } from "./getAssetUrl.js";
 export { getCSSPropsAttributes } from "./getCSSPropsAttributes.js";
 export { getReactNodeKey } from "./getReactNodeKey.js";
+export { InlineCounter } from "./InlineCounter.js";
 export { isReactNode } from "./isReactNode.js";
 export { reactNodeToString } from "./reactNodeToString.js";
+export { RenderCount } from "./RenderCount.js";
 export { splitProps } from "./splitProps.js";
 export { styleScheduler } from "./styleScheduler.js";
 export { trimReactNode } from "./trimReactNode.js";

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAA"}

package/dist/utils/splitProps.d.ts

@@ -10,12 +10,9 @@
  * destructured), `style`, `inert`, `hidden`, and `aria-hidden` go in `rootProps`, along with data
  * attributes, since they can be coupled to the `className` to apply styles conditionally, e.g.
  * `<Button data-highlighted={highlighted} className="data-[highlighted]:prop-variant-primary" />`.
- * However, data attributes can also be needed on the underlying element in some cases, so they are
- * also included in the `nestedProps`, except the ones starting with `data-gds-`, to avoid messing
- * with the CSS props or states systems.
  */
 export declare function splitProps<T extends Record<string, unknown>>(props: T): {
     rootProps: { [K in keyof T as K extends "className" | "style" | "inert" | "hidden" | "aria-hidden" | `data-${string}` ? K : never]: T[K]; };
-    nestedProps: { [K in keyof T as K extends "className" | "style" | "inert" | "hidden" | "aria-hidden" ? never : K]: T[K]; };
+    nestedProps: { [K in keyof T as K extends "className" | "style" | "inert" | "hidden" | "aria-hidden" | `data-${string}` ? never : K]: T[K]; };
 };
 //# sourceMappingURL=splitProps.d.ts.map

package/dist/utils/splitProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"splitProps.d.ts","sourceRoot":"","sources":["../../src/utils/splitProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,GAsB/B;IACnC,SAAS,EAAE,GACR,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SACd,WAAW,GACX,OAAO,GACP,OAAO,GACP,QAAQ,GACR,aAAa,GACb,QAAQ,MAAM,EAAE,GAChB,CAAC,GACD,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GACjB,CAAA;IACD,WAAW,EAAE,GACV,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GACjF,KAAK,GACL,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACb,CAAA;CACF,CACF"}
+{"version":3,"file":"splitProps.d.ts","sourceRoot":"","sources":["../../src/utils/splitProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,GAmB/B;IACnC,SAAS,EAAE,GACR,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SACd,WAAW,GACX,OAAO,GACP,OAAO,GACP,QAAQ,GACR,aAAa,GACb,QAAQ,MAAM,EAAE,GAChB,CAAC,GACD,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GACjB,CAAA;IACD,WAAW,EAAE,GACV,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SACd,WAAW,GACX,OAAO,GACP,OAAO,GACP,QAAQ,GACR,aAAa,GACb,QAAQ,MAAM,EAAE,GAChB,KAAK,GACL,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GACb,CAAA;CACF,CACF"}

package/dist/utils/splitProps.js

@@ -10,26 +10,21 @@
  * destructured), `style`, `inert`, `hidden`, and `aria-hidden` go in `rootProps`, along with data
  * attributes, since they can be coupled to the `className` to apply styles conditionally, e.g.
  * `<Button data-highlighted={highlighted} className="data-[highlighted]:prop-variant-primary" />`.
- * However, data attributes can also be needed on the underlying element in some cases, so they are
- * also included in the `nestedProps`, except the ones starting with `data-gds-`, to avoid messing
- * with the CSS props or states systems.
  */
 export function splitProps(props) {
     const rootProps = {};
     const nestedProps = {};
     for (const [key, value] of Object.entries(props)) {
-        const isDataAttribute = key.startsWith('data-');
-        const isGDSDataAttribute = key.startsWith('data-gds-');
         const isRootProp = key === 'className' ||
             key === 'style' ||
             key === 'inert' ||
             key === 'hidden' ||
             key === 'aria-hidden' ||
-            isDataAttribute;
+            key.startsWith('data-');
         if (isRootProp) {
             rootProps[key] = value;
         }
-        if (!isRootProp || (isDataAttribute && !isGDSDataAttribute)) {
+        else {
             nestedProps[key] = value;
         }
     }

package/dist/utils/splitProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"splitProps.js","sourceRoot":"","sources":["../../src/utils/splitProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,UAAU,CAAoC,KAAQ;IACpE,MAAM,SAAS,GAA4B,EAAE,CAAA;IAC7C,MAAM,WAAW,GAA4B,EAAE,CAAA;IAE/C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,eAAe,GAAG,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QAC/C,MAAM,kBAAkB,GAAG,GAAG,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;QACtD,MAAM,UAAU,GACd,GAAG,KAAK,WAAW;YACnB,GAAG,KAAK,OAAO;YACf,GAAG,KAAK,OAAO;YACf,GAAG,KAAK,QAAQ;YAChB,GAAG,KAAK,aAAa;YACrB,eAAe,CAAA;QACjB,IAAI,UAAU,EAAE,CAAC;YACf,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACxB,CAAC;QACD,IAAI,CAAC,UAAU,IAAI,CAAC,eAAe,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC5D,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,EAAE,SAAS,EAAE,WAAW,EAiB9B,CAAA;AACH,CAAC"}
+{"version":3,"file":"splitProps.js","sourceRoot":"","sources":["../../src/utils/splitProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAoC,KAAQ;IACpE,MAAM,SAAS,GAA4B,EAAE,CAAA;IAC7C,MAAM,WAAW,GAA4B,EAAE,CAAA;IAE/C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,UAAU,GACd,GAAG,KAAK,WAAW;YACnB,GAAG,KAAK,OAAO;YACf,GAAG,KAAK,OAAO;YACf,GAAG,KAAK,QAAQ;YAChB,GAAG,KAAK,aAAa;YACrB,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACzB,IAAI,UAAU,EAAE,CAAC;YACf,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACxB,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,EAAE,SAAS,EAAE,WAAW,EAuB9B,CAAA;AACH,CAAC"}

package/dist/utils/trimReactNode.d.ts

@@ -11,14 +11,16 @@ import { type ReactNode } from 'react';
  *
  * @example
  *
- *     trimReactNode('  hello  ') // 'hello'
- *     trimReactNode(
- *       <>
- *         {' '}
- *         <span>test</span>{' '}
- *       </>,
- *     ) // <><span>test</span></>
- *     trimReactNode([' ', <div>content</div>, ' ']) // [<div>content</div>]
+ * ```tsx
+ * trimReactNode('  hello  ') // 'hello'
+ * trimReactNode(
+ *   <>
+ *     {' '}
+ *     <span>test</span>{' '}
+ *   </>,
+ * ) // <><span>test</span></>
+ * trimReactNode([' ', <div>content</div>, ' ']) // [<div>content</div>]
+ * ```
  *
  * @param node - The `ReactNode` to trim.
  * @returns A new `ReactNode` with leading and trailing whitespace removed.

package/dist/utils/trimReactNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trimReactNode.d.ts","sourceRoot":"","sources":["../../src/utils/trimReactNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CA0D7D"}
+{"version":3,"file":"trimReactNode.d.ts","sourceRoot":"","sources":["../../src/utils/trimReactNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CA0D7D"}

package/dist/utils/trimReactNode.js

@@ -11,14 +11,16 @@ import { Children, isValidElement } from 'react';
  *
  * @example
  *
- *     trimReactNode('  hello  ') // 'hello'
- *     trimReactNode(
- *       <>
- *         {' '}
- *         <span>test</span>{' '}
- *       </>,
- *     ) // <><span>test</span></>
- *     trimReactNode([' ', <div>content</div>, ' ']) // [<div>content</div>]
+ * ```tsx
+ * trimReactNode('  hello  ') // 'hello'
+ * trimReactNode(
+ *   <>
+ *     {' '}
+ *     <span>test</span>{' '}
+ *   </>,
+ * ) // <><span>test</span></>
+ * trimReactNode([' ', <div>content</div>, ' ']) // [<div>content</div>]
+ * ```
  *
  * @param node - The `ReactNode` to trim.
  * @returns A new `ReactNode` with leading and trailing whitespace removed.

package/dist/utils/trimReactNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"trimReactNode.js","sourceRoot":"","sources":["../../src/utils/trimReactNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAqC,MAAM,OAAO,CAAA;AAEnF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,aAAa,CAAC,SAAoB;IAChD,oBAAoB;IACpB,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,OAAO,SAAS,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IACD,IACE,OAAO,SAAS,KAAK,QAAQ;QAC7B,OAAO,SAAS,KAAK,SAAS;QAC9B,SAAS,KAAK,IAAI;QAClB,SAAS,KAAK,SAAS,EACvB,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,gBAAgB;IAChB,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,CAAC,GAAG,SAAS,CAAC,CAAA;QAE/B,uCAAuC;QACvC,KAAK,MAAM,SAAS,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;YACtC,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC3B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;gBACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAE7B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;oBAC9B,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;oBAC/D,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;wBACnB,IAAI,SAAS,EAAE,CAAC;4BACd,QAAQ,CAAC,KAAK,EAAE,CAAA;wBAClB,CAAC;6BAAM,CAAC;4BACN,QAAQ,CAAC,GAAG,EAAE,CAAA;wBAChB,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;wBACzB,MAAK;oBACP,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,QAAQ,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;oBACtC,MAAK;gBACP,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,8CAA8C;IAC9C,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,SAAmD,CAAA;QAEnE,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YAC9D,MAAM,eAAe,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;YACpD,OAAO,EAAE,GAAG,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,CAAA;QAC/E,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC"}
+{"version":3,"file":"trimReactNode.js","sourceRoot":"","sources":["../../src/utils/trimReactNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAqC,MAAM,OAAO,CAAA;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,aAAa,CAAC,SAAoB;IAChD,oBAAoB;IACpB,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,OAAO,SAAS,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IACD,IACE,OAAO,SAAS,KAAK,QAAQ;QAC7B,OAAO,SAAS,KAAK,SAAS;QAC9B,SAAS,KAAK,IAAI;QAClB,SAAS,KAAK,SAAS,EACvB,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,gBAAgB;IAChB,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,CAAC,GAAG,SAAS,CAAC,CAAA;QAE/B,uCAAuC;QACvC,KAAK,MAAM,SAAS,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;YACtC,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC3B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;gBACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAE7B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;oBAC9B,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;oBAC/D,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;wBACnB,IAAI,SAAS,EAAE,CAAC;4BACd,QAAQ,CAAC,KAAK,EAAE,CAAA;wBAClB,CAAC;6BAAM,CAAC;4BACN,QAAQ,CAAC,GAAG,EAAE,CAAA;wBAChB,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;wBACzB,MAAK;oBACP,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,QAAQ,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;oBACtC,MAAK;gBACP,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,8CAA8C;IAC9C,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,SAAmD,CAAA;QAEnE,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YAC9D,MAAM,eAAe,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;YACpD,OAAO,EAAE,GAAG,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,CAAA;QAC/E,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphprotocol/gds-react",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "React components for The Graph Design System",
   "author": "Edge & Node and contributors",
   "license": "MIT",
@@ -43,43 +43,43 @@
     "tailwindcss": "^4.1.14"
   },
   "dependencies": {
-    "@base-ui/react": "^1.0.0",
-    "@base-ui/utils": "^0.2.3",
+    "@base-ui/react": "^1.1.0",
+    "@base-ui/utils": "^0.2.4",
     "@react-aria/utils": "^3.32.0",
     "@react-hookz/web": "^25.2.0",
     "@ver0/deep-equal": "^1.0.1",
     "escape-string-regexp": "^5.0.0",
-    "motion": "^12.23.26",
+    "motion": "^12.29.2",
     "react-aria": "^3.45.0",
     "react-keyed-flatten-children": "^5.1.1",
-    "shiki": "^3.20.0",
+    "shiki": "^3.21.0",
     "style-observer": "^0.1.2",
-    "ts-extras": "^0.16.0",
-    "type-fest": "^5.3.1",
-    "@graphprotocol/gds-css": "0.1.2",
+    "ts-extras": "^0.16.1",
+    "type-fest": "^5.4.2",
     "@graphprotocol/gds-icons": "0.1.1",
-    "@graphprotocol/gds-utils": "0.1.0"
+    "@graphprotocol/gds-utils": "0.2.1",
+    "@graphprotocol/gds-css": "0.2.1"
   },
   "devDependencies": {
-    "@storybook/addon-themes": "^10.1.10",
-    "@storybook/addon-vitest": "^10.1.10",
-    "@storybook/react": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
+    "@storybook/addon-themes": "^10.2.1",
+    "@storybook/addon-vitest": "^10.2.1",
+    "@storybook/react": "^10.2.1",
+    "@storybook/react-vite": "^10.2.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^24.10.4",
-    "@types/react": "^19.2.7",
+    "@types/node": "^24.10.9",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "@types/react-is": "^19.2.0",
-    "@web3icons/react": "^4.1.7",
-    "lightningcss": "^1.30.2",
+    "@web3icons/react": "^4.1.14",
+    "lightningcss": "^1.31.1",
     "postcss": "^8.5.6",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-is": "^19.2.3",
-    "storybook": "^10.1.10",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-is": "^19.2.4",
+    "storybook": "^10.2.1",
     "storybook-addon-rtl": "^3.0.1"
   },
   "scripts": {

package/src/GDSContext.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import { createContext, type ComponentProps } from 'react'
+import type { DirectionProvider } from '@base-ui/react/direction-provider'
+
+type Theme = 'dark' | 'light' | 'system'
+type ResolvedTheme = Exclude<Theme, 'system'>
+
+export interface GDSContextValue {
+  theme: Theme
+  activeTheme: ResolvedTheme
+  direction: NonNullable<ComponentProps<typeof DirectionProvider>['direction']>
+  language: string
+}
+
+export const GDSContext = createContext<GDSContextValue | null>(null)

package/src/GDSProvider.tsx

@@ -1,18 +1,12 @@
 'use client'
 
-import {
-  createContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ComponentProps,
-} from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentProps } from 'react'
 import { DirectionProvider } from '@base-ui/react/direction-provider'
 import { Tooltip } from '@base-ui/react/tooltip'
 
 import { ButtonOrLink, type ButtonOrLinkConfigProps } from './components/base/ButtonOrLink.tsx'
+import { Pane } from './components/Pane.tsx'
+import { GDSContext } from './GDSContext.ts'
 import { cn } from './utils/index.ts'
 
 type Theme = 'dark' | 'light' | 'system'
@@ -48,19 +42,12 @@ export interface GDSProviderProps extends Omit<ComponentProps<'div'>, 'dir'> {
   theme?: Theme | undefined
   /** @default 'ltr' */
   direction?: ComponentProps<typeof DirectionProvider>['direction'] | undefined
-  /** Defaults to `en` if `direction` is `ltr`, or `ar` if `direction` is `rtl`. */
+  /** @default 'en' // or if `direction` is `rtl`, 'ar' */
   language?: string | undefined
   buttonOrLinkConfig?: Omit<ButtonOrLinkConfigProps, 'children'> | undefined
 }
 
-export interface GDSContextValue {
-  theme: NonNullable<GDSProviderProps['theme']>
-  activeTheme: ResolvedTheme
-  direction: NonNullable<GDSProviderProps['direction']>
-  language: NonNullable<GDSProviderProps['language']>
-}
-
-export const GDSContext = createContext<GDSContextValue | null>(null)
+export type { GDSContextValue } from './GDSContext.ts'
 
 /**
  * Provides global configuration and enhancements for GDS components.
@@ -77,15 +64,17 @@ export const GDSContext = createContext<GDSContextValue | null>(null)
  *
  * @example
  *
- *     import { GDSProvider } from '@graphprotocol/gds-react'
+ * ```tsx
+ * import { GDSProvider } from '@graphprotocol/gds-react'
  *
- *     function App() {
- *       return (
- *         <GDSProvider theme="dark">
- *           <YourApp />
- *         </GDSProvider>
- *       )
- *     }
+ * function App() {
+ *   return (
+ *     <GDSProvider theme="dark">
+ *       <YourApp />
+ *     </GDSProvider>
+ *   )
+ * }
+ * ```
  */
 export function GDSProvider({
   theme = DEFAULT_THEME,
@@ -221,20 +210,22 @@ export function GDSProvider({
   return (
     <GDSContext.Provider value={gdsContextValue}>
       <DirectionProvider direction={direction}>
-        <Tooltip.Provider timeout={300}>
-          <ButtonOrLink.Config {...buttonOrLinkConfig}>
-            {/* Prevent a flash of incorrect theme in server-side rendered apps (e.g. Next.js) */}
-            <PreHydrationStyle>{THEME_SSR_CSS[theme]}</PreHydrationStyle>
-            <div
-              dir={direction}
-              lang={language}
-              className={cn('gds-provider isolate', themeClass, className)}
-              {...props}
-            >
-              {children}
-            </div>
-          </ButtonOrLink.Config>
-        </Tooltip.Provider>
+        <Pane.Provider>
+          <Tooltip.Provider timeout={300}>
+            <ButtonOrLink.Config {...buttonOrLinkConfig}>
+              {/* Prevent a flash of incorrect theme in server-side rendered apps (e.g. Next.js) */}
+              <PreHydrationStyle>{THEME_SSR_CSS[theme]}</PreHydrationStyle>
+              <div
+                dir={direction}
+                lang={language}
+                className={cn('gds-provider isolate', themeClass, className)}
+                {...props}
+              >
+                {children}
+              </div>
+            </ButtonOrLink.Config>
+          </Tooltip.Provider>
+        </Pane.Provider>
       </DirectionProvider>
     </GDSContext.Provider>
   )

package/src/components/Address.tsx

@@ -68,10 +68,10 @@ export function Address({
     <span
       ref={cssPropsPolyfillStateRef}
       className={cn(
-        `gds-address isolate root-grid *:col-span-full *:row-span-full u:size-max u:max-w-full
+        `gds-address root-grid *:col-span-full *:row-span-full u:size-max u:max-w-full
         u:state-[show-copy=false]
-        u:hover:state-[show-copy]
         u:hover:state-hover
+        u:hover:state-[show-copy]
         u:has-copy-button-focus:state-[show-copy]
         u:has-nested-not-clickable/address-ref:cursor-default
         u:has-nested-focus-visible/address-ref:expose-focus

package/src/components/Avatar.tsx

@@ -87,18 +87,14 @@ export function Avatar({
       {...getCSSPropsAttributes(AvatarMeta, { shape, size }, style)}
       {...cssPropsPolyfillAttributes}
       {...props}
-      render={(renderProps, { Element, category }) => {
-        let tooltipProps: Omit<TooltipProps, 'children'> = {
-          content: category !== 'other' ? alt : undefined,
-        }
-        if (tooltip !== undefined) {
-          tooltipProps = isReactNode(tooltip)
-            ? { content: tooltip }
-            : { ...tooltipProps, ...tooltip }
-        }
+      render={(renderProps, { Element, elementProps, category }) => {
         return (
-          <Tooltip {...tooltipProps}>
-            <Element {...renderProps}>
+          <Tooltip
+            content={category !== 'other' ? alt : undefined}
+            {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}
+            triggerProps={renderProps}
+          >
+            <Element {...elementProps}>
               <span className="nested/avatar-paint pointer-events-none shrink-0">
                 <span
                   className={`
@@ -134,7 +130,7 @@ export function Avatar({
                         className="[[src^='data:image/bmp']]:[image-rendering:pixelated]"
                       />
                     ) : (
-                      src
+                      <Tooltip.Collector>{src}</Tooltip.Collector>
                     )
                   ) : null}
                   {alt ? <span className="sr-only">{alt}</span> : null}

package/src/components/Breadcrumbs.meta.ts

@@ -11,4 +11,6 @@ export const BreadcrumbsMeta = createComponent('Breadcrumbs', {
   },
 })
 
-export const BreadcrumbsItemMeta = createComponent('BreadcrumbsItem')
+export const BreadcrumbsItemMeta = createComponent('BreadcrumbsItem', {
+  isolate: 'allow-inheritance',
+})