@dxos/react-ui 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -85,17 +85,18 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/debug": "0.9.1-main.c7dcc2e112",
-    "@dxos/lit-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-error-boundary": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-input": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-hooks": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-list": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-types": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112"
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/i18n": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-error-boundary": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-hooks": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-input": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-list": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -103,20 +104,20 @@
     "@dnd-kit/utilities": "^3.2.0",
     "@phosphor-icons/react": "2.1.10",
     "@tanstack/react-virtual": "^3.13.18",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "tabster": "^8.5.5",
     "vite": "^8.0.16",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112"
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -11,7 +11,7 @@ import { hexToFallback } from '@dxos/util';
 import { withTheme } from '../../testing';
 import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
 
-type DefaultStoryProps = PropsWithChildren<{
+type StoryArgs = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -24,7 +24,7 @@ type DefaultStoryProps = PropsWithChildren<{
   hue?: ChromaticPalette;
 }>;
 
-const DefaultStory = (props: DefaultStoryProps) => {
+const DefaultStory = (props: StoryArgs) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,

package/src/components/Avatars/Avatar.theme.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { mx, getSize, getHeight } from '@dxos/ui-theme';
+import { getHeight, getSize, mx } from '@dxos/ui-theme';
 import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
 
 export type AvatarStyleProps = Partial<{

package/src/components/Avatars/Avatar.tsx

@@ -101,11 +101,11 @@ export const Avatar = {
 export { useAvatarContext };
 
 export type {
-  AvatarStatus,
-  AvatarVariant,
   AvatarAnimation,
   AvatarContentProps,
-  AvatarLabelProps,
   AvatarDescriptionProps,
+  AvatarLabelProps,
+  AvatarStatus,
+  AvatarVariant,
   NaturalDxAvatar as DxAvatar,
 };

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -4,7 +4,7 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -13,7 +13,7 @@ import { Link, type LinkProps } from '../Link';
 
 type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   'aria-label': string;
-  asChild?: boolean;
+  'asChild'?: boolean;
 };
 
 const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
@@ -101,10 +101,10 @@ export const Breadcrumb = {
 };
 
 export type {
-  BreadcrumbRootProps,
-  BreadcrumbListProps,
-  BreadcrumbListItemProps,
-  BreadcrumbLinkProps,
   BreadcrumbCurrentProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListItemProps,
+  BreadcrumbListProps,
+  BreadcrumbRootProps,
   BreadcrumbSeparatorProps,
 };

package/src/components/Button/Button.tsx

@@ -109,6 +109,6 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
 
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
-export { Button, ButtonGroup, BUTTON_GROUP_NAME, useButtonGroupContext };
+export { Button, BUTTON_GROUP_NAME, ButtonGroup, useButtonGroupContext };
 
-export type { ButtonProps, ButtonGroupProps };
+export type { ButtonGroupProps, ButtonProps };

package/src/components/Button/MicButton.stories.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { Tooltip } from '../Tooltip';
+import { MicButton, type MicButtonProps } from './MicButton';
+
+const DefaultStory = ({ mode = 'toggle', ...props }: MicButtonProps) => {
+  const [recording, setRecording] = useState(false);
+
+  return (
+    <Tooltip.Provider>
+      <MicButton
+        iconOnly
+        variant='ghost'
+        {...props}
+        mode={mode}
+        // `label`/`recording`/handlers are driven by story state so the demo reacts to interaction.
+        label={recording ? 'Stop recording' : mode === 'hold' ? 'Hold to record' : 'Start recording'}
+        recording={recording}
+        onToggle={() => setRecording((value) => !value)}
+        onPressStart={() => setRecording(true)}
+        onPressEnd={() => setRecording(false)}
+      />
+    </Tooltip.Provider>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/MicButton',
+  decorators: [withTheme()],
+  component: MicButton,
+  render: DefaultStory,
+  args: { label: 'Record', mode: 'toggle' },
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof MicButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Toggle: Story = {
+  args: {
+    mode: 'toggle',
+  },
+};
+
+export const Hold: Story = {
+  args: {
+    mode: 'hold',
+  },
+};

package/src/components/Button/MicButton.tsx

@@ -0,0 +1,117 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type KeyboardEvent, type PointerEvent, forwardRef, useCallback, useRef } from 'react';
+
+import { IconButton, type IconButtonProps } from './IconButton';
+
+export type MicButtonMode = 'toggle' | 'hold';
+
+export type MicButtonProps = Omit<IconButtonProps, 'icon' | 'onClick'> & {
+  /** Defaults to a microphone glyph. */
+  icon?: IconButtonProps['icon'];
+  /** `toggle`: click flips recording. `hold`: records only while held (push-to-talk). */
+  mode?: MicButtonMode;
+  /** Whether recording is active; drives the active (recording) styling. */
+  recording?: boolean;
+  /** Fired in `toggle` mode on click. */
+  onToggle?: () => void;
+  /** Fired in `hold` mode when the press begins. */
+  onPressStart?: () => void;
+  /** Fired in `hold` mode when the press ends (release, cancel, or lost capture). */
+  onPressEnd?: () => void;
+};
+
+/**
+ * Microphone record button. In `toggle` mode a click flips recording; in `hold` mode recording is
+ * active only while the button is held (push-to-talk), using pointer capture so the release still
+ * fires if the pointer leaves the button. Presentational — the caller owns recording state.
+ */
+export const MicButton = forwardRef<HTMLButtonElement, MicButtonProps>(
+  (
+    {
+      classNames,
+      icon = 'ph--microphone--regular',
+      mode = 'toggle',
+      recording,
+      onToggle,
+      onPressStart,
+      onPressEnd,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    // A press spans pointer down→up (or key down→up). The guard makes start/end fire exactly once
+    // even though release surfaces as both `pointerup` and `lostpointercapture`.
+    const pressedRef = useRef(false);
+    const beginPress = useCallback(() => {
+      if (!pressedRef.current) {
+        pressedRef.current = true;
+        onPressStart?.();
+      }
+    }, [onPressStart]);
+
+    const endPress = useCallback(() => {
+      if (pressedRef.current) {
+        pressedRef.current = false;
+        onPressEnd?.();
+      }
+    }, [onPressEnd]);
+    const handlePointerDown = useCallback(
+      (event: PointerEvent<HTMLButtonElement>) => {
+        // Capture so the matching release fires on this button even if the pointer leaves it.
+        event.currentTarget.setPointerCapture(event.pointerId);
+        beginPress();
+      },
+      [beginPress],
+    );
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLButtonElement>) => {
+        // Keyboard push-to-talk: hold Space/Enter to record. Ignore auto-repeat.
+        if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
+          event.preventDefault();
+          beginPress();
+        }
+      },
+      [beginPress],
+    );
+    const handleKeyUp = useCallback(
+      (event: KeyboardEvent<HTMLButtonElement>) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          endPress();
+        }
+      },
+      [endPress],
+    );
+
+    // Highlight with the error (rose) tone while recording.
+    const recordingClassNames = recording ? 'bg-error-surface' : undefined;
+    const holdHandlers =
+      mode === 'hold'
+        ? {
+            onPointerDown: handlePointerDown,
+            onPointerUp: endPress,
+            onPointerCancel: endPress,
+            onLostPointerCapture: endPress,
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+            // Releasing focus mid-hold (e.g. tabbing away) must still end the press.
+            onBlur: endPress,
+          }
+        : {
+            onClick: onToggle,
+          };
+
+    return (
+      <IconButton
+        {...props}
+        {...holdHandlers}
+        classNames={[recordingClassNames, classNames]}
+        icon={icon}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/components/Button/SystemIconButton.stories.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { Toolbar } from '../Toolbar';
+import { Tooltip } from '../Tooltip';
+import { SystemIconButton } from './SystemIconButton';
+
+const iconOnly = { iconOnly: true, variant: 'ghost' as const };
+
+const ToolbarStory = () => {
+  const [state, setState] = useState({ star: false, bookmark: false, expander: false });
+
+  return (
+    <Tooltip.Provider>
+      <Toolbar.Root>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Star
+            {...iconOnly}
+            active={state.star}
+            onClick={() => setState((prev) => ({ ...prev, star: !prev.star }))}
+          />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Bookmark
+            {...iconOnly}
+            active={state.bookmark}
+            onClick={() => setState((prev) => ({ ...prev, bookmark: !prev.bookmark }))}
+          />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Expander
+            {...iconOnly}
+            active={state.expander}
+            onClick={() => setState((prev) => ({ ...prev, expander: !prev.expander }))}
+          />
+        </Toolbar.Button>
+        <Toolbar.Separator variant='line' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Add {...iconOnly} />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Edit {...iconOnly} />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Delete {...iconOnly} />
+        </Toolbar.Button>
+        <Toolbar.Separator variant='line' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Clipboard {...iconOnly} onCopy={() => 'Copied from toolbar'} />
+        </Toolbar.Button>
+        <SystemIconButton.Upload {...iconOnly} accept='*/*' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Download
+            {...iconOnly}
+            filename='example.txt'
+            onDownload={() => new Blob(['Hello from SystemIconButton'])}
+          />
+        </Toolbar.Button>
+        <Toolbar.Separator variant='line' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Close {...iconOnly} />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    </Tooltip.Provider>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/SystemIconButton',
+  component: SystemIconButton.Add,
+  render: ToolbarStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof SystemIconButton.Add>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/Button/SystemIconButton.tsx

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { InputHTMLAttributes, forwardRef, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { translationKey } from '#translations';
@@ -136,6 +136,108 @@ const CloseIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ labe
 
 CloseIconButton.displayName = 'SystemIconButton.Close';
 
+//
+// Clipboard
+//
+
+type ClipboardIconButtonProps = StaticPresetProps & {
+  onCopy: () => string;
+};
+
+const ClipboardIconButton = forwardRef<HTMLButtonElement, ClipboardIconButtonProps>(
+  ({ label, onCopy, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const handleCopy = useCallback(() => {
+      const text = onCopy();
+      if (text) {
+        void navigator.clipboard.writeText(text);
+      }
+    }, [onCopy]);
+    return (
+      <IconButton
+        {...props}
+        icon='ph--clipboard--regular'
+        label={label ?? t('system-button.clipboard.label')}
+        onClick={handleCopy}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ClipboardIconButton.displayName = 'SystemIconButton.Clipboard';
+
+//
+// Upload
+//
+
+type UploadIconButtonProps = StaticPresetProps &
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'accept'> & {
+    onFileChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
+  };
+
+const UploadIconButton = forwardRef<HTMLButtonElement, UploadIconButtonProps>(
+  ({ accept, onFileChange, label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    return (
+      <>
+        <input className='sr-only' type='file' accept={accept} onChange={onFileChange} ref={fileInputRef} />
+        <IconButton
+          icon='ph--upload-simple--regular'
+          label={label ?? t('system-button.upload.label')}
+          {...props}
+          onClick={() => fileInputRef.current?.click()}
+          ref={forwardedRef}
+        />
+      </>
+    );
+  },
+);
+
+UploadIconButton.displayName = 'SystemIconButton.Upload';
+
+//
+// Download
+//
+
+type DownloadIconButtonProps = StaticPresetProps & {
+  filename: string;
+  onDownload: () => Blob | null;
+};
+
+const DownloadIconButton = forwardRef<HTMLButtonElement, DownloadIconButtonProps>(
+  ({ filename, onDownload, label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const handleDownload = useCallback(() => {
+      const blob = onDownload();
+      if (!blob) {
+        return;
+      }
+
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+
+      URL.revokeObjectURL(url);
+    }, [onDownload]);
+    return (
+      <IconButton
+        icon='ph--download-simple--regular'
+        label={label ?? t('system-button.download.label')}
+        {...props}
+        onClick={handleDownload}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+DownloadIconButton.displayName = 'SystemIconButton.Download';
+
 //
 // Namespace
 //
@@ -148,6 +250,15 @@ export const SystemIconButton = {
   Delete: DeleteIconButton,
   Edit: EditIconButton,
   Close: CloseIconButton,
+  Clipboard: ClipboardIconButton,
+  Upload: UploadIconButton,
+  Download: DownloadIconButton,
 };
 
-export type { StaticPresetProps, TogglePresetProps };
+export type {
+  ClipboardIconButtonProps,
+  DownloadIconButtonProps,
+  StaticPresetProps,
+  TogglePresetProps,
+  UploadIconButtonProps,
+};

package/src/components/Button/ToggleGroup.tsx

@@ -46,5 +46,5 @@ const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemPro
   },
 );
 
-export { ToggleGroup, ToggleGroupItem, ToggleGroupIconItem };
-export type { ToggleGroupProps, ToggleGroupItemProps };
+export { ToggleGroup, ToggleGroupIconItem, ToggleGroupItem };
+export type { ToggleGroupItemProps, ToggleGroupProps };

package/src/components/Button/index.ts

@@ -4,6 +4,7 @@
 
 export * from './Button';
 export * from './IconButton';
+export * from './MicButton';
 export * from './SystemIconButton';
 export * from './Toggle';
 export * from './ToggleGroup';

package/src/components/Calendar/Calendar.theme.ts

@@ -51,6 +51,8 @@ const day: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
     'outline-none',
     'data-[hovered]:bg-hover-surface',
     'data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500',
+    // Highlight today (overridden by the selected style below when today is also the selected day).
+    'data-[today]:text-orange-500 data-[today]:font-medium',
     'data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500',
     'data-[outside-month]:text-description/40',
     'data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',

package/src/components/Calendar/Calendar.tsx

@@ -3,20 +3,20 @@
 //
 
 import { CalendarDate, parseDate } from '@internationalized/date';
-import React, { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import React, { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from 'react';
 import {
+  type DateValue,
   Button as RACButton,
   Calendar as RACCalendar,
   CalendarCell as RACCalendarCell,
-  type CalendarProps as RACCalendarProps,
   CalendarGrid as RACCalendarGrid,
   CalendarGridBody as RACCalendarGridBody,
   CalendarGridHeader as RACCalendarGridHeader,
   CalendarHeaderCell as RACCalendarHeaderCell,
+  type CalendarProps as RACCalendarProps,
   Heading as RACHeading,
   RangeCalendar as RACRangeCalendar,
   type RangeCalendarProps as RACRangeCalendarProps,
-  type DateValue,
 } from 'react-aria-components';
 
 import { type ClassNameValue } from '@dxos/ui-types';

package/src/components/Card/Card.stories.tsx

@@ -13,14 +13,14 @@ import { Card } from './Card';
 
 random.seed(0);
 
-type DefaultStoryProps = {
+type StoryArgs = {
   title: string;
   description?: string;
   image?: string;
   fullWidth?: boolean;
 };
 
-const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProps) => {
+const DefaultStory = ({ title, description, image, fullWidth }: StoryArgs) => {
   const handleRef = useRef<HTMLButtonElement>(null);
   console.log(title);
   return (

package/src/components/Card/Card.tsx

@@ -30,13 +30,13 @@ import { type ToolbarActionIconButtonProps, type ToolbarDragHandleProps, type To
 const CARD_ROOT_NAME = 'Card.Root';
 
 type CardRootProps = {
-  id?: string;
-  border?: boolean;
-  fullWidth?: boolean;
-  density?: Density;
-  style?: CSSProperties;
-  tabIndex?: number;
-  onClick?: MouseEventHandler<HTMLDivElement>;
+  'id'?: string;
+  'border'?: boolean;
+  'fullWidth'?: boolean;
+  'density'?: Density;
+  'style'?: CSSProperties;
+  'tabIndex'?: number;
+  'onClick'?: MouseEventHandler<HTMLDivElement>;
   'data-selected'?: boolean;
   'data-testid'?: string;
 };
@@ -60,7 +60,7 @@ const CardRoot = composable<HTMLDivElement, CardRootProps>(
     return (
       <Column.Root
         asChild
-        gutter={density === 'lg' ? 'lg' : density === 'sm' || density === 'xs' ? 'sm' : 'md'}
+        gutter='lg'
         classNames={tx('card.root', { border, fullWidth }, className)}
         role={role ?? 'group'}
       >
@@ -552,11 +552,11 @@ export const Card = {
 };
 
 export type {
-  CardRootProps,
-  CardHeaderProps,
+  CardActionIconButtonProps,
   CardBlockProps,
   CardDragHandleProps,
-  CardActionIconButtonProps,
+  CardHeaderProps,
   CardMenuProps,
+  CardRootProps,
   CardSectionProps,
 };