canny-ui-react 4.0.0 → 6.0.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import type { SxProp } from '../Layout/sx';
 type RootSingle = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
     type: 'single';
 };
@@ -8,19 +9,37 @@ type RootMultiple = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
 };
 export type AccordionProps = (RootSingle | RootMultiple) & {
     variant?: 'plain' | 'bordered' | 'separated';
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 };
 export declare const Accordion: import("react").ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     type: "single";
 } & {
     variant?: "plain" | "bordered" | "separated";
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }) | (Omit<AccordionPrimitive.AccordionMultipleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     type: "multiple";
 } & {
     variant?: "plain" | "bordered" | "separated";
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 })) & import("react").RefAttributes<HTMLDivElement>>;
 export type AccordionItemProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
 export declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export interface AccordionTriggerProps extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+export interface AccordionTriggerProps extends ComponentPropsWithoutRef<'button'> {
     /** Optional leading icon in the trigger row. */
     icon?: ReactNode;
     /** Hide the chevron indicator. */

package/dist/components/Alert/Alert.types.d.ts

@@ -1,8 +1,15 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type AlertColor = 'info' | 'success' | 'warning' | 'danger';
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     color?: AlertColor;
     solid?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     title?: ReactNode;
     children?: ReactNode;
     /** Custom icon node. Pass `false` to hide the default icon. */

package/dist/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface AutocompleteOption {
     /** Stable identifier — what gets stored in `value`. */
     value: string;
@@ -46,6 +47,15 @@ interface AutocompleteBase {
     'aria-label'?: string;
     /** Custom className on the trigger. */
     className?: string;
+    /** Inline style applied to the trigger (the inline field). */
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Applied to the
+     * trigger. Scalar-only sx merges into inline style; responsive sx injects
+     * a scoped class.
+     */
+    sx?: SxProp;
 }
 export interface AutocompleteSingleProps extends AutocompleteBase {
     multiple?: false;

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
 export type AvatarStatus = 'online' | 'busy' | 'offline';
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
@@ -6,6 +7,12 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: AvatarStatus;
     src?: string;
     alt?: string;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }
 export interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type BadgeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
@@ -16,6 +17,12 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     placement?: BadgePlacement;
     /** Render the indicator inline with no anchored child. */
     standalone?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface BreadcrumbItem {
     label: ReactNode;
     href?: string;
@@ -10,5 +11,11 @@ export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     /** Separator node between items. Default: chevron. */
     separator?: ReactNode;
     size?: 'sm' | 'md';
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Button/Button.types.d.ts

@@ -1,4 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ButtonVariant = 'solid' | 'secondary' | 'outline' | 'dashed' | 'ghost' | 'soft' | 'link';
 export type ButtonColor = 'primary' | 'danger' | 'warning' | 'success' | 'info';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -23,5 +24,11 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: ButtonIconPosition;
     /** Disable the MUI-style click ripple. Default: `false`. */
     disableRipple?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children?: ReactNode;
 }

package/dist/components/Button/ToggleButton.d.ts

@@ -1,8 +1,12 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { Root as RadixToggle } from '@radix-ui/react-toggle';
 import type { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from './Button.types';
-type RadixToggleProps = ComponentPropsWithoutRef<typeof RadixToggle>;
-export interface ToggleButtonProps extends Omit<RadixToggleProps, 'asChild'> {
+export interface ToggleButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /** Controlled pressed state. */
+    pressed?: boolean;
+    /** Uncontrolled initial pressed state. */
+    defaultPressed?: boolean;
+    /** Fires when the pressed state changes. */
+    onPressedChange?: (pressed: boolean) => void;
     variant?: Extract<ButtonVariant, 'ghost' | 'outline' | 'soft' | 'dashed'>;
     color?: ButtonColor;
     size?: ButtonSize;
@@ -15,4 +19,3 @@ export interface ToggleButtonProps extends Omit<RadixToggleProps, 'asChild'> {
  * Handles `aria-pressed` / `data-state` natively; CSS hooks into both.
  */
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/components/Card/Card.types.d.ts

@@ -1,6 +1,13 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type CardColor = 'default' | 'danger' | 'warning' | 'success' | 'info';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     color?: CardColor;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     children: ReactNode;
 }

package/dist/components/Charts/BarChart.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface BarSeries {
     /** Key into each datum for this series' value. */
     key: string;
@@ -27,5 +29,13 @@ export interface BarChartProps<D extends Record<string, unknown> = Record<string
         datum: D;
     }) => ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
 }
-export declare function BarChart<D extends Record<string, unknown>>({ data, xKey, series, height, stacked, grid, legend, yTickFormatter, xTickFormatter, renderTooltip, className, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart<D extends Record<string, unknown>>({ data, xKey, series, height, stacked, grid, legend, yTickFormatter, xTickFormatter, renderTooltip, className, style, sx, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/LineChart.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 import type { BarSeries } from './BarChart';
 export interface LineChartProps<D extends Record<string, unknown> = Record<string, unknown>> {
     data: D[];
@@ -20,6 +22,14 @@ export interface LineChartProps<D extends Record<string, unknown> = Record<strin
         datum: D;
     }) => ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
 }
 export declare function LineChart<D extends Record<string, unknown>>(props: LineChartProps<D>): import("react/jsx-runtime").JSX.Element;
 export declare function AreaChart<D extends Record<string, unknown>>(props: LineChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/PieChart.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface PieDatum {
     label: string;
     value: number;
@@ -18,5 +20,13 @@ export interface PieChartProps {
     /** Center label (e.g. a total) for donut charts. */
     centerLabel?: ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
 }
-export declare function PieChart({ data, height, innerRadius, legend, renderTooltip, centerLabel, className, }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function PieChart({ data, height, innerRadius, legend, renderTooltip, centerLabel, className, style, sx, }: PieChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/ResponsiveContainer.d.ts

@@ -1,12 +1,21 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface ResponsiveContainerProps {
     /** Chart height in px. */
     height?: number;
     children: ReactNode;
     className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the sizing wrapper.
+     */
+    sx?: SxProp;
 }
 /**
  * Sizing wrapper kept for `recharts` compatibility. Canny charts already fill
  * their parent's width; this passes `height` down and stretches to 100% width.
  */
-export declare function ResponsiveContainer({ height, children, className }: ResponsiveContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResponsiveContainer({ height, children, className, style, sx, }: ResponsiveContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,9 +1,17 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import type { SxProp } from '../Layout/sx';
 type CheckboxRootProps = ComponentPropsWithoutRef<typeof RadixCheckbox.Root>;
 export interface CheckboxProps extends Omit<CheckboxRootProps, 'children'> {
     /** Label text or node rendered next to the box. */
     children?: ReactNode;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the outer label wrapper, or the checkbox itself when there is no label.
+     */
+    sx?: SxProp;
 }
 /** Accessible checkbox — tri-state (`checked | 'indeterminate' | false`). */
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Chip/Chip.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type ChipColor = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
 export type ChipSize = 'sm' | 'md';
 export type ChipVariant = 'soft' | 'outline' | 'solid';
@@ -21,6 +22,12 @@ export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onSele
     onClick?: MouseEventHandler<HTMLSpanElement>;
     /** Disabled visual + non-interactive. */
     disabled?: boolean;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
     /** The chip's text/content. */
     children: ReactNode;
 }

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export interface ConfirmDialogProps {
     /** Controlled open state. */
     open: boolean;
@@ -23,9 +24,18 @@ export interface ConfirmDialogProps {
     /** Fired when the cancel button is clicked (before close). */
     onCancel?: () => void;
     className?: string;
+    /** Inline style forwarded to the underlying Dialog content panel. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS forwarded to the underlying Dialog content panel, same as
+     * `Box`'s `sx`: each value may be a scalar or a responsive breakpoint map
+     * (`{ base, sm, md, lg, xl }`). Scalar-only sx merges into inline style;
+     * responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 /**
  * ConfirmDialog — a small Dialog preset for destructive / confirmation prompts.
  * Composes the base `Dialog` and `Button`.
  */
-export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, onConfirm, onCancel, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, title, message, children, confirmLabel, cancelLabel, danger, loading, onConfirm, onCancel, className, style, sx, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
-import type { ReactElement, ReactNode, Ref } from 'react';
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type DataTableAlign = 'left' | 'center' | 'right';
 export type RowId = string | number;
 export interface DataTableColumn<R = Record<string, unknown>> {
@@ -63,6 +64,15 @@ export interface DataTableProps<R = Record<string, unknown>> {
     /** Turn off column resizing for every column. */
     disableColumnResize?: boolean;
     className?: string;
+    /** Inline style applied to the outer table container. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Applied to the
+     * outer table container. Scalar-only sx merges into inline style; responsive
+     * sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const DataTable: <R = Record<string, unknown>>(props: DataTableProps<R> & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 import type { WeekDay } from './dateUtils';
 export type DatePickerSize = 'sm' | 'md' | 'lg';
 export type DatePickerColor = 'primary' | 'danger' | 'warning' | 'success';
@@ -80,4 +81,11 @@ export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
     open?: boolean;
     /** Called when open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Applied to the
+     * outer field wrapper (not the popover calendar). Scalar-only sx merges into
+     * inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }

package/dist/components/Dialog/Dialog.d.ts

@@ -1,7 +1,17 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import type { SxProp } from '../Layout/sx';
+import type { CSSProperties } from 'react';
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export interface DialogProps extends ComponentPropsWithoutRef<typeof RadixDialog.Root> {
+export interface DialogProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Fires when the open state changes (Esc, backdrop, or close button). */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the dialog blocks interaction with the rest of the page. Default: true. */
+    modal?: boolean;
     /** Title rendered as the visible h2. Required for accessibility. */
     title: ReactNode;
     /** Optional descriptive subhead under the title. */
@@ -16,6 +26,14 @@ export interface DialogProps extends ComponentPropsWithoutRef<typeof RadixDialog
     hideClose?: boolean;
     /** Extra className on the dialog content. */
     className?: string;
+    /** Inline style on the dialog content panel. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS for the dialog content panel, same as `Box`'s `sx`: each value
+     * may be a scalar or a responsive breakpoint map (`{ base, sm, md, lg, xl }`).
+     * Scalar-only sx merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 /**
  * Modal dialog built on @radix-ui/react-dialog. Includes a backdrop, focus trap,

package/dist/components/Drawer/Drawer.d.ts

@@ -1,8 +1,18 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import type { SxProp } from '../Layout/sx';
+import type { CSSProperties } from 'react';
 export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
-export interface DrawerProps extends ComponentPropsWithoutRef<typeof RadixDialog.Root> {
+export interface DrawerProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Fires when the open state changes (Esc, backdrop, or close button). */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the drawer blocks interaction with the rest of the page. Default: true. */
+    modal?: boolean;
     /** Visible heading for the drawer. Required for AT. */
     title: ReactNode;
     /** Optional subhead under the title. */
@@ -19,6 +29,14 @@ export interface DrawerProps extends ComponentPropsWithoutRef<typeof RadixDialog
     hideClose?: boolean;
     /** Extra className on the drawer content. */
     className?: string;
+    /** Inline style on the drawer content panel. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS for the drawer content panel, same as `Box`'s `sx`: each value
+     * may be a scalar or a responsive breakpoint map (`{ base, sm, md, lg, xl }`).
+     * Scalar-only sx merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 /**
  * Off-canvas drawer / sheet. Slides in from any edge. Built on

package/dist/components/Field/Field.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 export type FieldValidationState = 'default' | 'danger' | 'warning' | 'success';
 export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Label text. */
@@ -17,6 +18,13 @@ export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     maxLength?: number;
     /** Override validation styling explicitly. */
     state?: FieldValidationState;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied
+     * to the outer field wrapper.
+     */
+    sx?: SxProp;
     /** Single form control element. The `id` is threaded to the label and aria-describedby. */
     children: ReactElement;
 }
@@ -28,4 +36,4 @@ export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
  *  • ARIA wiring: `htmlFor`, `aria-describedby`, `aria-invalid`
  *  • Validation state propagation to the child control via className
  */
-export declare function Field({ label, hint, error, required, optional, counter, maxLength, state, className, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ label, hint, error, required, optional, counter, maxLength, state, className, style, sx, children, ...rest }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FileUploader/FileUploader.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
 import type { FileRejection, UseFileDropOptions } from './useFileDrop';
 export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | 'onDropAccepted' | 'onDropRejected'> {
     /** Fired with `(accepted, rejected)` after each drop or browse. */
@@ -15,5 +16,13 @@ export interface FileUploaderProps extends Omit<UseFileDropOptions, 'onDrop' | '
     buttonLabel?: ReactNode | false;
     size?: 'sm' | 'md';
     className?: string;
+    /** Inline style applied to the dropzone root. */
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class.
+     */
+    sx?: SxProp;
 }
 export declare const FileUploader: import("react").ForwardRefExoticComponent<FileUploaderProps & import("react").RefAttributes<HTMLDivElement>>;