@graphprotocol/gds-react 0.1.1 → 0.2.0

package/src/components/Chip.parts.tsx

@@ -0,0 +1,319 @@
+'use client'
+
+import { createContext, useContext, type ComponentProps, type ReactNode } from 'react'
+import { Checkbox } from '@base-ui/react/checkbox'
+import { CheckboxGroup } from '@base-ui/react/checkbox-group'
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup } from '@base-ui/react/radio-group'
+
+import type { GDSComponentProps } from '@graphprotocol/gds-css'
+
+import { useAutoValue, useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
+import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
+import { renderAddon, type AddonValue } from './base/Addon.tsx'
+import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
+import { ChipGroupMeta, ChipMeta } from './Chip.meta.ts'
+
+type ExtractFn<T> = T extends (...args: infer A) => infer R ? (...args: A) => R : never
+
+export declare namespace ChipProps {
+  interface BaseProps extends GDSComponentProps<typeof ChipMeta> {
+    /** Name used to submit the chip's value when inside a `<Chip.Group type="checkbox">` in a form. */
+    name?: string | undefined
+    /** Value used to identify this chip when inside a `<Chip.Group>`. */
+    value?: string | undefined
+    addonBefore?: AddonValue | undefined
+    addonAfter?: AddonValue | undefined
+    count?: ReactNode | undefined
+  }
+  interface ButtonProps
+    extends
+      BaseProps,
+      Omit<ButtonOrLinkProps.ButtonProps, 'value'>,
+      ButtonOrLinkProps.DisableableProps {}
+  interface LinkProps
+    extends BaseProps, ButtonOrLinkProps.LinkProps, ButtonOrLinkProps.DisableableProps {}
+}
+
+export type ChipProps = ChipProps.ButtonProps | ChipProps.LinkProps
+
+interface ChipGroupContextValue {
+  type: 'checkbox' | 'radio'
+}
+
+const ChipGroupContext = createContext<ChipGroupContextValue | null>(null)
+
+export function ChipRoot({
+  size,
+  name,
+  value: passedValue,
+  addonBefore,
+  addonAfter,
+  count,
+  disabled = false,
+  className,
+  style,
+  children,
+  ...props
+}: ChipProps) {
+  useGDS()
+
+  const { rootProps, nestedProps } = splitProps(props)
+
+  const autoValue = useAutoValue(children)
+  const value = passedValue !== undefined ? passedValue : autoValue
+
+  const groupContext = useContext(ChipGroupContext)
+
+  const [stateRef, state] = useCSSState({
+    pointer: undefined,
+    focus: undefined,
+    checked: undefined,
+    disabled: Boolean(disabled),
+  })
+  const [cssPropsPolyfillStateRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
+    ChipMeta,
+    { size },
+    { ref: stateRef },
+  )
+
+  return (
+    <div
+      ref={cssPropsPolyfillStateRef}
+      data-type={groupContext?.type ?? 'plain'}
+      className={cn(
+        `gds-chip root-flex flex-col u:size-max u:max-w-full
+        u:has-nested-checked/chip-ref:expose-checked
+        u:has-nested-hover/chip-ref:expose-hover
+        u:has-nested-focus-visible/chip-ref:expose-focus
+        u:has-nested-disabled/chip-ref:expose-disabled
+        u:i:has-nested-checked/chip-ref:data-[type=radio]:state-idle`,
+        className,
+      )}
+      {...state.exposedAttributes}
+      {...state.polyfillAttributes}
+      {...getCSSPropsAttributes(ChipMeta, { size }, style)}
+      {...cssPropsPolyfillAttributes}
+      {...rootProps}
+    >
+      {(() => {
+        if (!groupContext || props.href !== undefined) {
+          return renderButtonOrLink({})
+        }
+
+        if (groupContext.type === 'checkbox') {
+          return (
+            <Checkbox.Root
+              name={name ?? (undefined as never)}
+              value={typeof value === 'string' ? value : (undefined as never)}
+              disabled={Boolean(disabled)}
+              nativeButton
+              render={renderButtonOrLink}
+            />
+          )
+        } else {
+          return (
+            <Radio.Root
+              value={value}
+              disabled={Boolean(disabled)}
+              nativeButton
+              render={renderButtonOrLink}
+            />
+          )
+        }
+
+        function renderButtonOrLink({
+          tabIndex: _tabIndex,
+          defaultChecked: _defaultChecked,
+          ...renderProps
+        }: Parameters<
+          ExtractFn<ComponentProps<typeof Checkbox.Root | typeof Radio.Root>['render']>
+        >[0]) {
+          return (
+            <ButtonOrLink
+              {...renderProps}
+              disabled={disabled}
+              className={cn(
+                renderProps.className,
+                `nested/chip-ref flex grow items-center justify-center
+                rounded-full border border-default text-muted transition
+                @state-checked/chip:border-brand-muted
+                @state-checked/chip:bg-brand-subtlest
+                @state-checked/chip:text-default
+                @state-hover/chip:border-strong
+                @state-hover/chip:text-default
+                @state-hover/chip:@state-checked/chip:border-brand-default
+                @state-hover/chip:@state-checked/chip:bg-brand-subtler
+                @prop-size-small/chip:h-6
+                @prop-size-small/chip:px-1
+                @prop-size-small/chip:text-12
+                @prop-size-medium/chip:h-8
+                @prop-size-medium/chip:px-1.5
+                @prop-size-medium/chip:text-14
+                @prop-size-large/chip:h-10
+                @prop-size-large/chip:px-2
+                @prop-size-large/chip:text-16
+                u:*:transition-opacity
+                u:*:@state-disabled/chip:opacity-disabled
+                u:*:@state-disabled/chip:grayscale
+                u:@prop-size-small/chip:addon-small
+                u:@prop-size-medium/chip:addon-medium
+                u:@prop-size-large/chip:addon-large
+                i:@state-disabled/chip:border-muted
+                i:@state-disabled/chip:bg-transparent
+                i:@state-disabled/chip:text-muted
+                i:@state-disabled/chip:@state-checked/chip:border-transparent
+                i:@state-disabled/chip:@state-checked/chip:bg-brand-subtlest`,
+              )}
+              {...nestedProps}
+            >
+              {/* Ensure rounded corners are clickable */}
+              <span className="absolute inset-0 not-in-clickable:hidden" />
+              {addonBefore ? <ChipAddon side="before">{renderAddon(addonBefore)}</ChipAddon> : null}
+              <span className="flex items-baseline gap-1 px-1">
+                <span className="truncate">{children}</span>
+                {count ? (
+                  <span
+                    className={`
+                      max-w-full shrink-0 truncate text-subtle transition
+                      @state-enabled/chip:@state-checked/chip:text-current
+                      @state-enabled/chip:@state-hover/chip:text-current
+                      @prop-size-small/chip:text-10
+                      @prop-size-medium/chip:text-12
+                      @prop-size-large/chip:text-14
+                    `}
+                  >
+                    {count}
+                  </span>
+                ) : null}
+              </span>
+              {addonAfter ? <ChipAddon side="after">{renderAddon(addonAfter)}</ChipAddon> : null}
+            </ButtonOrLink>
+          )
+        }
+      })()}
+    </div>
+  )
+}
+ChipRoot.displayName = 'Chip'
+
+function ChipAddon({
+  side,
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'> & { side: 'before' | 'after' }) {
+  return (
+    <span
+      data-side={side}
+      className={cn(
+        `gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0
+        u:has-avatar-group:data-[side=after]:ps-0.5
+        u:has-tag:data-[side=after]:ps-0.5
+        u:has-avatar-group:data-[side=before]:pe-0.5
+        u:has-tag:data-[side=before]:pe-0.5`,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export declare namespace ChipGroupProps {
+  interface BaseProps
+    extends Omit<ComponentProps<'div'>, 'onChange'>, GDSComponentProps<typeof ChipGroupMeta> {}
+  interface CheckboxProps extends BaseProps {
+    type: 'checkbox'
+    name?: undefined
+    /** Array of checked/selected chip values. */
+    value?: string[] | undefined
+    defaultValue?: string[] | undefined
+    onChange?: ((value: string[]) => void) | undefined
+  }
+  interface RadioProps extends BaseProps {
+    type: 'radio'
+    /** Name used to submit the checked/selected chip value when inside a form. */
+    name?: string | undefined
+    /** Checked/selected chip value. */
+    value?: string | undefined
+    defaultValue?: string | undefined
+    onChange?: ((value: string) => void) | undefined
+  }
+}
+
+export type ChipGroupProps = ChipGroupProps.CheckboxProps | ChipGroupProps.RadioProps
+
+export function ChipGroup({
+  ref: passedRef,
+  type,
+  name,
+  value,
+  defaultValue,
+  onChange,
+  size,
+  className,
+  style,
+  children,
+  ...props
+}: ChipGroupProps) {
+  useGDS()
+
+  if (props['aria-label'] === undefined && props['aria-labelledby'] === undefined) {
+    // oxlint-disable-next-line no-console
+    console.warn(
+      '[Chip.Group] One of `aria-label` or `aria-labelledby` should be set for accessibility',
+    )
+  }
+
+  const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
+    ChipGroupMeta,
+    { size },
+    { ref: passedRef, returnPropValues: { size } },
+  )
+
+  const sharedProps = {
+    ref: cssPropsPolyfillPassedRef,
+    'data-size': cssProps.size,
+    className: cn(
+      `gds-chip-group root-flex u:flex-wrap
+      u:data-[size=large]:gap-2
+      u:data-[size=medium]:gap-1.5
+      u:data-[size=small]:gap-1
+      u:**:chip:@prop-size-small/chip-group:prop-size-small
+      u:**:chip:@prop-size-medium/chip-group:prop-size-medium
+      u:**:chip:@prop-size-large/chip-group:prop-size-large`,
+      className,
+    ),
+    ...getCSSPropsAttributes(ChipGroupMeta, { size }, style),
+    ...cssPropsPolyfillAttributes,
+    ...props,
+  }
+
+  return (
+    <ChipGroupContext.Provider value={{ type }}>
+      {type === 'checkbox' ? (
+        <CheckboxGroup
+          {...sharedProps}
+          {...(value !== undefined && { value })}
+          {...(defaultValue !== undefined && { defaultValue })}
+          {...(onChange !== undefined && { onValueChange: onChange })}
+        >
+          {children}
+        </CheckboxGroup>
+      ) : (
+        <RadioGroup
+          name={name ?? (undefined as never)}
+          {...sharedProps}
+          {...(value !== undefined && { value })}
+          {...(defaultValue !== undefined && { defaultValue })}
+          {...(onChange !== undefined && { onValueChange: onChange as (value: unknown) => void })}
+        >
+          {children}
+        </RadioGroup>
+      )}
+    </ChipGroupContext.Provider>
+  )
+}
+ChipGroup.displayName = 'Chip.Group'

package/src/components/Chip.tsx

@@ -0,0 +1,7 @@
+import { ChipGroup, ChipRoot } from './Chip.parts.tsx'
+
+export const Chip = Object.assign(ChipRoot, {
+  Group: ChipGroup,
+})
+
+export type { ChipProps, ChipGroupProps } from './Chip.parts.tsx'

package/src/components/CodeBlock.parts.tsx

@@ -39,7 +39,9 @@ import {
 
 import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes, type Stringifiable } from '../utils/index.ts'
+import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { Button } from './Button.tsx'
+import { ButtonGroup } from './ButtonGroup.tsx'
 import { CodeBlockMeta } from './CodeBlock.meta.ts'
 import { CopyButton } from './CopyButton.tsx'
 import { TabSet, TabSetContext, type TabSetTabProps } from './TabSet.tsx'
@@ -150,8 +152,21 @@ function CodeBlockHeader({ buttons, className, children, ...props }: CodeBlockHe
         )}
         {...props}
       >
-        <div className="grow">{children}</div>
-        {buttons ? <div className="flex shrink-0 items-center gap-3 pe-2.5">{buttons}</div> : null}
+        <div className="min-w-em grow">{children}</div>
+        {buttons ? (
+          <ButtonGroup
+            variant="naked"
+            size="medium"
+            /**
+             * The `not-has-button:hidden` class prevents an empty `ButtonGroup` from taking space
+             * in the layout, which can happen when the stuff that `CodeBlockTabs` passes as
+             * `buttons` ends up rendering nothing (which we can't know in advance).
+             */
+            className="me-2 shrink-0 self-center not-has-button:hidden"
+          >
+            {buttons}
+          </ButtonGroup>
+        ) : null}
         <div className="absolute inset-x-0 bottom-0 border-b border-subtle" />
       </figcaption>
     </CodeBlockHeaderContext.Provider>
@@ -162,8 +177,8 @@ export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'onCopy'>, S
   /** @default 'text' */
   language?: Language | undefined
   /** Defaults to an icon that matches the `language`. */
-  icon?: ReactNode | undefined
-  label?: string | undefined
+  icon?: AddonValue | undefined
+  label?: ReactNode | undefined
   children: Stringifiable
 }
 
@@ -314,64 +329,74 @@ export function CodeBlockRoot({
     })
   }, [highlighter, childrenString, activeTheme, language, highlights, secrets, diff])
 
-  const buttons = (
-    <>
-      {secrets.length > 0 ? (
-        <Button variant="naked" size="medium" onClick={() => setMasked(!masked)}>
-          {masked ? (
-            <EyeIcon alt={`Reveal secret${secrets.length > 1 ? 's' : ''}`} />
-          ) : (
-            <EyeClosedIcon alt={`Hide secret${secrets.length > 1 ? 's' : ''}`} />
-          )}
-        </Button>
-      ) : null}
-      {copy ? (
-        <CopyButton
-          variant="naked"
-          size="medium"
-          value={typeof copy === 'string' ? copy : codeToCopy}
-          onCopy={onCopy}
-        />
-      ) : null}
-    </>
-  )
+  const buttonElements = [
+    secrets.length > 0 && (
+      <Button key="reveal" onClick={() => setMasked(!masked)}>
+        {masked ? (
+          <EyeIcon alt={`Reveal secret${secrets.length > 1 ? 's' : ''}`} />
+        ) : (
+          <EyeClosedIcon alt={`Hide secret${secrets.length > 1 ? 's' : ''}`} />
+        )}
+      </Button>
+    ),
+    copy && (
+      <CopyButton key="copy" value={typeof copy === 'string' ? copy : codeToCopy} onCopy={onCopy} />
+    ),
+  ].filter(Boolean)
+
+  const buttons = buttonElements.length > 0 ? <>{buttonElements}</> : null
 
   if (hasAncestorHeader) {
     return buttons
   }
 
   const Wrapper = hasAncestorTabs ? 'div' : CodeBlockWrapper
-  const headerContent = (
-    <div className="flex h-full items-center gap-2 ps-2">
-      {icon ? (
-        <span className="flex size-4 shrink-0 items-center justify-center **:icon:default-size-3.5">
-          {icon}
-        </span>
-      ) : null}
-      {label ? <span className="truncate text-14 text-muted">{label}</span> : null}
-    </div>
-  )
+  const headerContent =
+    label || passedIcon ? (
+      <div className="flex h-full items-center gap-2 ps-2">
+        {icon ? (
+          <span className="flex size-4 shrink-0 items-center justify-center **:icon:default-size-3.5">
+            {renderAddon(icon)}
+          </span>
+        ) : null}
+        {label ? <span className="truncate text-14 text-muted">{label}</span> : null}
+      </div>
+    ) : null
 
   return (
     <Wrapper
       ref={cssPropsPolyfillPassedRef}
+      data-has-header={Boolean(headerContent) || undefined}
       className={cn(
-        `gds-code-block isolate root-flex flex-col
-        u:not-in-code-block-tabs:min-h-24
-        u:not-in-code-block-tabs:rounded-8`,
+        `gds-code-block group/code-block root-flex flex-col
+        u:not-in-code-block-tabs:rounded-8
+        u:not-in-code-block-tabs:not-data-has-header:min-h-13
+        u:not-in-code-block-tabs:data-has-header:min-h-24`,
         className,
       )}
       {...getCSSPropsAttributes(CodeBlockMeta, { wrap, lineNumbers, rows }, style)}
       {...cssPropsPolyfillAttributes}
       {...props}
     >
-      {!hasAncestorTabs ? (
-        <CodeBlockHeader buttons={buttons}>{headerContent}</CodeBlockHeader>
-      ) : null}
-      {hasAncestorTabs && label ? (
-        <div className="flex h-10 shrink-0 px-2">
-          <div className="absolute inset-0 border-b border-subtle" />
-          {headerContent}
+      {headerContent ? (
+        hasAncestorTabs ? (
+          <div className="flex h-10 shrink-0 px-2">
+            <div className="absolute inset-0 border-b border-subtle" />
+            {headerContent}
+          </div>
+        ) : (
+          <CodeBlockHeader buttons={buttons}>{headerContent}</CodeBlockHeader>
+        )
+      ) : !hasAncestorTabs && buttons ? (
+        <div
+          className={`
+            absolute end-3 top-3 z-10 opacity-0 transition
+            group-not-hover/code-block:pointer-events-none
+            group-hover/code-block:opacity-100
+            has-focus-visible:opacity-100
+          `}
+        >
+          <ButtonGroup size="xsmall">{buttons}</ButtonGroup>
         </div>
       ) : null}
       <pre
@@ -384,7 +409,7 @@ export function CodeBlockRoot({
          * that case, so it should be fine.
          */
         className={`
-          h-(--max-height) max-h-max grow overflow-auto font-mono text-14
+          isolate scrollbar-thin h-(--max-height) max-h-max grow overflow-auto font-mono text-14
           [--max-height:calc(9999px-min(9999px,var(--gds-code-block-rows)*9999px)+var(--gds-code-block-rows)*1lh+2*var(--padding))]
           [--padding:--spacing(4)]
           firefox:h-auto
@@ -427,8 +452,8 @@ export function CodeBlockRoot({
               <span
                 aria-hidden
                 className={`
-                  hidden min-w-4 text-center text-12 text-subtle select-none
-                  @prop-line-numbers-true/code-block:block
+                  min-w-4 text-center text-12 text-subtle select-none
+                  @prop-line-numbers-false/code-block:hidden
                 `}
               >
                 {lineIndex + 1}
@@ -544,7 +569,7 @@ export function CodeBlockTabs<const Tabs extends readonly Tab[], T extends TabVa
   className,
   children,
   ...props
-}: CodeBlockTabsProps<Tabs, T> & { ref?: React.Ref<HTMLDivElement> }) {
+}: CodeBlockTabsProps<Tabs, T>) {
   if (passedTabs.length === 0) {
     throw new Error('[CodeBlock.Tabs] At least 1 tab is required')
   }
@@ -583,7 +608,7 @@ export function CodeBlockTabs<const Tabs extends readonly Tab[], T extends TabVa
       defaultValue={defaultValue ?? (tabs[0]!.value as T)}
       onChange={onChange}
       className={cn(
-        `gds-code-block-tabs isolate root-flex flex-col u:min-h-24 u:rounded-8
+        `gds-code-block-tabs root-flex flex-col u:min-h-24 u:rounded-8
         u:[--saved-default-line-numbers:var(--gds-default-line-numbers)]
         u:[--saved-default-rows:var(--gds-default-rows)]
         u:[--saved-default-wrap:var(--gds-default-wrap)]

package/src/components/CodeInline.tsx

@@ -15,8 +15,8 @@ export function CodeInline({ className, children, ...props }: CodeInlineProps) {
   return (
     <span
       className={cn(
-        `gds-code-inline root-inline
-        u:font-mono u:font-regular u:wrap-anywhere u:whitespace-pre-wrap u:text-code u:in-link:text-link-idle
+        `gds-code-inline root-inline u:font-mono u:text-size-inherit u:wrap-anywhere u:whitespace-pre-wrap u:text-code
+        u:in-link:text-link-idle
         ${/* If inside a link, ensure the underline of the link appears over the background and border by default */ ''}
         u:in-link:-z-10
         ${/* Prevent messing with the line height (this needs to be set on the root _and_ on the inner element) */ ''}
@@ -44,7 +44,7 @@ export function CodeInline({ className, children, ...props }: CodeInlineProps) {
           in-link:transition-[border-radius]
           in-link-hover:rounded-b-none
           ${/* Prevent incorrect alignment when empty */ ''}
-          empty:after:content-(--content-nbsp)
+          empty:after:content-nbsp
         `}
         {...props}
       >

package/src/components/CopyButton.meta.ts

@@ -5,17 +5,12 @@ import { ButtonMeta } from './Button.meta.ts'
 type ButtonVariant = (typeof ButtonMeta.cssProps.variant.values)[number]
 
 export const CopyButtonMeta = createComponent('CopyButton', {
-  containerName: 'gds-button',
+  extends: ButtonMeta,
   cssProps: {
-    /** @default 'secondary' */
     variant: {
       type: 'values',
       values: ['secondary', 'tertiary', 'inverse', 'naked'] as const satisfies ButtonVariant[],
       defaultValue: 'secondary',
     },
-    /** @default 'medium' */
-    size: ButtonMeta.cssProps.size,
-    /** @default false */
-    hideLabel: ButtonMeta.cssProps.hideLabel,
   },
 })

package/src/components/CopyButton.tsx

@@ -42,7 +42,7 @@ export function CopyButton({
     if (newStatus === 'copied') {
       timeoutRef.current = window.setTimeout(() => setStatus('copied-exit'), 1000)
     } else if (newStatus === 'copied-exit') {
-      timeoutRef.current = window.setTimeout(() => setStatus('idle'), 100)
+      timeoutRef.current = window.setTimeout(() => setStatus('idle'), 150)
     }
   }
 
@@ -57,9 +57,8 @@ export function CopyButton({
 
   return (
     <Tooltip
-      {...(status !== 'idle'
-        ? { content: 'Copied!', open: status === 'copied' }
-        : { content: null })}
+      content="Copied!"
+      {...(status !== 'idle' ? { open: status === 'copied' } : { disabled: true })}
       {...tooltipCSSProps}
     >
       <Button

package/src/components/CurrencyInput.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const CurrencyInputMeta = createComponent('CurrencyInput', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })

package/src/components/DescriptionList.parts.tsx

@@ -56,6 +56,7 @@ export function DescriptionListRoot({
     </div>
   )
 }
+DescriptionListRoot.displayName = 'DescriptionList'
 
 export interface DescriptionListItemProps
   extends ComponentProps<'div'>, GDSComponentProps<typeof DescriptionListItemMeta> {
@@ -189,7 +190,7 @@ export function DescriptionListItem({
         <span
           className={`
             absolute inset-y-0 flex items-center justify-center
-            not-group-data-loading/description-list-item:hidden
+            group-not-data-loading/description-list-item:hidden
             @prop-orientation-horizontal/description-list:start-0
             @prop-orientation-vertical/description-list:end-0
             @prop-orientation-vertical/description-list:w-(--gds-addon-size)

package/src/components/Icon.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const IconMeta = createComponent('Icon', {
+  isolate: 'allow-inheritance',
   addonCompatible: true,
   cssProps: {
     /** @default '1em' */

package/src/components/Icon.tsx

@@ -13,7 +13,7 @@ import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { IconMeta } from './Icon.meta.ts'
-import { useCollectTooltip } from './Tooltip.tsx'
+import { useTooltipCollector } from './Tooltip.tsx'
 
 export interface IconProps
   extends Omit<ComponentProps<'span'>, 'children' | 'color'>, GDSComponentProps<typeof IconMeta> {
@@ -35,10 +35,10 @@ export function Icon({ src, alt, size, color, className, style, ...props }: Icon
   useGDS()
 
   const iconContent = isValidElement(src) ? src : createElement(src)
-  const collectTooltip = useCollectTooltip()
+  const collectTooltipContent = useTooltipCollector()
 
-  if (collectTooltip && alt) {
-    collectTooltip(alt)
+  if (collectTooltipContent && alt) {
+    collectTooltipContent(alt)
   }
 
   if ('variant' in props) {

package/src/components/Input.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const InputMeta = createComponent('Input', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })