@surflane/ui 0.9.0 → 0.10.1

package/dist/autocomplete.d.ts

@@ -4,44 +4,72 @@ declare const AutocompleteRoot: typeof BaseAutocomplete.Root;
 export declare const Autocomplete: {
     Root: typeof BaseAutocomplete.Root;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & {
+    Content: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
         positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLInputElement>>;
-    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Empty: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Status: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Group: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    GroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Clear: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    InputGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
+    } & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Popup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Positioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Input: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLInputElement> | undefined;
+    }) => React.JSX.Element;
+    List: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Empty: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Status: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Group: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    GroupLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Clear: ({ ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Clear> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    Trigger: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Trigger> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => React.JSX.Element;
+    InputGroup: ({ ref, ...props }: Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Item: ({ ref, ...props }: Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
+    Separator: ({ ref, ...props }: Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLDivElement> | undefined;
+    }) => React.JSX.Element;
     Value: typeof BaseAutocomplete.Value;
     Icon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -52,28 +80,56 @@ export declare const Autocomplete: {
     useFilteredItems: typeof BaseAutocomplete.useFilteredItems;
 };
 export { AutocompleteRoot };
-export declare const AutocompleteArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteClear: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteCollection: typeof BaseAutocomplete.Collection, AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteIcon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>, AutocompleteInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLInputElement>>, AutocompleteInputGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompletePopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompletePortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompletePositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteRow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteStatus: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & {
+export declare const AutocompleteArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteClear: ({ ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Clear> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, AutocompleteCollection: typeof BaseAutocomplete.Collection, AutocompleteEmpty: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteGroup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteGroupLabel: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteIcon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>, AutocompleteInput: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLInputElement> | undefined;
+}) => React.JSX.Element, AutocompleteInputGroup: ({ ref, ...props }: Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteInputGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteItem: ({ ref, ...props }: Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteList: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompletePopup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompletePortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompletePositioner: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteRow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteSeparator: ({ ref, ...props }: Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteStatus: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => React.JSX.Element, AutocompleteTrigger: ({ className, children, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Trigger> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
     positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
-} & React.RefAttributes<HTMLDivElement>>;
+} & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/autocomplete.js

@@ -15,12 +15,12 @@ const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defa
                 setQuery(next);
         }, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
 };
-const AutoTrigger = /* @__PURE__ */ React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
-    return (_jsx(BaseAutocomplete.Trigger, { "aria-label": 'Show suggestions', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
-});
-const AutoClear = /* @__PURE__ */ React.forwardRef(function AutoClear(props, ref) {
+const AutoTrigger = function AutoTrigger({ className, children, ref, ...props }) {
+    return (_jsx(BaseAutocomplete.Trigger, { "aria-label": 'Show suggestions', ...props, ref: ref, className: skin('surf-combobox-action', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
+};
+const AutoClear = function AutoClear({ ref, ...props }) {
     return _jsx(Combobox.Clear, { "aria-label": 'Clear input', ...props, ref: ref });
-});
+};
 export const Autocomplete = {
     ...BaseAutocomplete,
     Root: AutocompleteRoot,
@@ -36,9 +36,9 @@ export const Autocomplete = {
     GroupLabel: Combobox.GroupLabel,
     Clear: AutoClear,
     Trigger: AutoTrigger,
-    InputGroup: /* @__PURE__ */ part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
-    Item: /* @__PURE__ */ part(BaseAutocomplete.Item, 'pui-combobox-item'),
-    Separator: /* @__PURE__ */ part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
+    InputGroup: /* @__PURE__ */ part(BaseAutocomplete.InputGroup, 'surf-combobox-group'),
+    Item: /* @__PURE__ */ part(BaseAutocomplete.Item, 'surf-combobox-item'),
+    Separator: /* @__PURE__ */ part(BaseAutocomplete.Separator, 'surf-combobox-separator'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { AutocompleteRoot };

package/dist/avatar.d.ts

@@ -1,24 +1,41 @@
 import * as React from 'react';
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 import { type ComponentSizeAlias } from './sizing.js';
-declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+declare const AvatarRoot: ({ size, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> & {
     size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+} & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Root>>;
+}) => React.JSX.Element;
+declare const AvatarFallback: ({ children, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback> & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Fallback>>;
+}) => React.JSX.Element;
 export declare const Avatar: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    Root: ({ size, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> & {
         size?: ComponentSizeAlias;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Status: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
-    Fallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Image: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLImageElement>>;
+    } & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Root>>;
+    }) => React.JSX.Element;
+    Status: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
+    Fallback: ({ children, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback> & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseAvatar.Fallback>>;
+    }) => React.JSX.Element;
+    Image: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLImageElement> | undefined;
+    }) => React.JSX.Element;
 };
 export { AvatarFallback, AvatarRoot };
-export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLImageElement>>, AvatarStatus: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarImage: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLImageElement> | undefined;
+}) => React.JSX.Element, AvatarStatus: ({ ref, ...props }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element;

package/dist/avatar.js

@@ -1,23 +1,22 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 import { useComponentSize } from './sizing.js';
 import { sizeName, skin, part } from './parts.js';
-const AvatarRoot = /* @__PURE__ */ React.forwardRef(function AvatarRoot({ size, className, ...props }, ref) {
+const AvatarRoot = function AvatarRoot({ size, className, ref, ...props }) {
     const scheme = useComponentSize(size);
-    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": sizeName(size), "data-ui-size": scheme, className: skin('pui-avatar', className) }));
-});
-const AvatarFallback = /* @__PURE__ */ React.forwardRef(function AvatarFallback({ children, className, ...props }, ref) {
-    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('pui-avatar-fallback', className), children: children ?? _jsx(Icon, { name: 'user' }) }));
-});
+    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": sizeName(size), "data-ui-size": scheme, className: skin('surf-avatar', className) }));
+};
+const AvatarFallback = function AvatarFallback({ children, className, ref, ...props }) {
+    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('surf-avatar-fallback', className), children: children ?? _jsx(Icon, { name: 'user' }) }));
+};
 export const Avatar = {
     ...BaseAvatar,
     Root: AvatarRoot,
-    Status: /* @__PURE__ */ part('span', 'pui-avatar-status'),
+    Status: /* @__PURE__ */ part('span', 'surf-avatar-status'),
     Fallback: AvatarFallback,
-    Image: /* @__PURE__ */ part(BaseAvatar.Image, 'pui-avatar-image'),
+    Image: /* @__PURE__ */ part(BaseAvatar.Image, 'surf-avatar-image'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { AvatarFallback, AvatarRoot };

package/dist/badge.d.ts

@@ -6,15 +6,11 @@ export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
     tone?: StatusTone;
     icon?: React.ReactNode;
 };
-export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Badge: ({ tone, icon, children, className, size, ref, ...props }: BadgeProps & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element;
 /** Domain status labels and live announcements remain the caller's responsibility. */
-export declare const StatusBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    size?: ComponentSize;
-    tone?: StatusTone;
-    icon?: React.ReactNode;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const StatusBadge: ({ tone, icon, ref, ...props }: BadgeProps & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element;
 export type { StatusTone } from './status.js';

package/dist/badge.js

@@ -1,16 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { useComponentSize } from './sizing.js';
 import { useToneTransition } from './tone-transition.js';
 import { cx } from './parts.js';
 import { StatusIcon } from './status.js';
-export const Badge = /* @__PURE__ */ React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
+export const Badge = function Badge({ tone = 'neutral', icon, children, className, size, ref, ...props }) {
     const scheme = useComponentSize(size);
     const elementRef = useToneTransition(tone, ref);
-    return (_jsxs("span", { ...props, ref: elementRef, className: cx('pui-badge', className), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
-});
+    return (_jsxs("span", { ...props, ref: elementRef, className: cx('surf-badge', className), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'surf-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
+};
 /** Domain status labels and live announcements remain the caller's responsibility. */
-export const StatusBadge = /* @__PURE__ */ React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
+export const StatusBadge = function StatusBadge({ tone = 'neutral', icon, ref, ...props }) {
     return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
-});
+};

package/dist/bottom-navigation.d.ts

@@ -22,45 +22,15 @@ export type BottomNavigationItemProps = Omit<useRender.ComponentProps<'a'>, 'ref
     badgeLabel?: string;
 };
 export declare const BottomNavigation: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-        /** Names the navigation, such as "Primary". */
-        'aria-label': string;
-        /** mobile: shown at 760px and narrower, where AppShell hides its sidebar. always:
-         * at every width. */
-        visible?: "mobile" | "always";
-        /** fixed: pinned to the bottom of the viewport, above the safe area. static: in the
-         * flow, for a frame of your own. */
-        position?: "fixed" | "static";
-    } & React.RefAttributes<HTMLElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import("@base-ui/react/types").HTMLProps>, "children" | "ref"> & {
-        icon: React.ReactNode;
-        label: string;
-        /** Marks the current destination with aria-current="page". */
-        current?: boolean;
-        /** A count, shown up to 99+, or true for a dot. */
-        badge?: number | boolean;
-        /** What the badge means, read after the label, such as "3 unread". A count reads
-         * as its number without it; a dot needs it. */
-        badgeLabel?: string;
-    } & React.RefAttributes<HTMLAnchorElement>>;
+    Root: ({ visible, position, className, children, ref, ...props }: BottomNavigationRootProps & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element;
+    Item: ({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }: BottomNavigationItemProps & {
+        ref?: React.Ref<HTMLAnchorElement>;
+    }) => React.JSX.Element;
 };
-export declare const BottomNavigationRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    /** Names the navigation, such as "Primary". */
-    'aria-label': string;
-    /** mobile: shown at 760px and narrower, where AppShell hides its sidebar. always:
-     * at every width. */
-    visible?: "mobile" | "always";
-    /** fixed: pinned to the bottom of the viewport, above the safe area. static: in the
-     * flow, for a frame of your own. */
-    position?: "fixed" | "static";
-} & React.RefAttributes<HTMLElement>>, BottomNavigationItem: React.ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import("@base-ui/react/types").HTMLProps>, "children" | "ref"> & {
-    icon: React.ReactNode;
-    label: string;
-    /** Marks the current destination with aria-current="page". */
-    current?: boolean;
-    /** A count, shown up to 99+, or true for a dot. */
-    badge?: number | boolean;
-    /** What the badge means, read after the label, such as "3 unread". A count reads
-     * as its number without it; a dot needs it. */
-    badgeLabel?: string;
-} & React.RefAttributes<HTMLAnchorElement>>;
+export declare const BottomNavigationRoot: ({ visible, position, className, children, ref, ...props }: BottomNavigationRootProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element, BottomNavigationItem: ({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }: BottomNavigationItemProps & {
+    ref?: React.Ref<HTMLAnchorElement>;
+}) => React.JSX.Element;

package/dist/bottom-navigation.js

@@ -1,16 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { cx } from './parts.js';
 /** A phone's primary destinations along the bottom edge, within thumb reach. Pad the
- * scrolling content by --size-bottom-navigation so the last line stays visible. */
-const Root = /* @__PURE__ */ React.forwardRef(function BottomNavigationRoot({ visible = 'mobile', position = 'fixed', className, children, ...props }, ref) {
-    return (_jsx("nav", { ...props, ref: ref, "data-visible": visible, "data-position": position, className: cx('pui-bottom-nav', className), children: _jsx("ul", { role: 'list', className: 'pui-bottom-nav-list', children: children }) }));
-});
+ * scrolling content by --surf-size-bottom-navigation so the last line stays visible. */
+const Root = function BottomNavigationRoot({ visible = 'mobile', position = 'fixed', className, children, ref, ...props }) {
+    return (_jsx("nav", { ...props, ref: ref, "data-visible": visible, "data-position": position, className: cx('surf-bottom-nav', className), children: _jsx("ul", { role: 'list', className: 'surf-bottom-nav-list', children: children }) }));
+};
 /** One destination: an icon above its label. Pass a router's link element as
  * `render` to keep client navigation. */
-const Item = /* @__PURE__ */ React.forwardRef(function BottomNavigationItem({ icon, label, current, badge, badgeLabel, render, className, ...props }, ref) {
+const Item = function BottomNavigationItem({ icon, label, current, badge, badgeLabel, render, className, ref, ...props }) {
     const count = typeof badge === 'number' && badge > 0
         ? badge > 99
             ? '99+'
@@ -25,12 +24,12 @@ const Item = /* @__PURE__ */ React.forwardRef(function BottomNavigationItem({ ic
         props: {
             ...props,
             'aria-current': current ? 'page' : props['aria-current'],
-            className: cx('pui-bottom-nav-item', className),
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'pui-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'pui-bottom-nav-badge', "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'pui-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'pui-feedback-sr', children: [", ", spoken] }))] })),
+            className: cx('surf-bottom-nav-item', className),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'surf-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'surf-bottom-nav-badge', "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'surf-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'surf-feedback-sr', children: [", ", spoken] }))] })),
         },
     });
-    return _jsx("li", { className: 'pui-bottom-nav-entry', children: link });
-});
+    return _jsx("li", { className: 'surf-bottom-nav-entry', children: link });
+};
 export const BottomNavigation = { Root, Item };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: BottomNavigationRoot, Item: BottomNavigationItem } = BottomNavigation;

package/dist/breadcrumbs.d.ts

@@ -2,12 +2,28 @@ import * as React from 'react';
 declare function BreadcrumbSeparator({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 declare function BreadcrumbCurrent({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 export declare const Breadcrumbs: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
-    List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-    Link: React.ForwardRefExoticComponent<import("./link.js").LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Root: ({ className, "aria-label": label, ref, ...props }: React.ComponentPropsWithoutRef<"nav"> & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element;
+    List: ({ className, role, ref, ...props }: React.ComponentPropsWithoutRef<"ol"> & {
+        ref?: React.Ref<HTMLOListElement>;
+    }) => React.JSX.Element;
+    Item: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"li"> & {
+        ref?: React.Ref<HTMLLIElement>;
+    }) => React.JSX.Element;
+    Link: ({ render, className, ref, ...props }: import("./link.js").LinkProps & {
+        ref?: React.Ref<HTMLAnchorElement>;
+    }) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     Separator: typeof BreadcrumbSeparator;
     Current: typeof BreadcrumbCurrent;
 };
-export declare const BreadcrumbsRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, BreadcrumbsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>, BreadcrumbsItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>, BreadcrumbsLink: React.ForwardRefExoticComponent<import("./link.js").LinkProps & React.RefAttributes<HTMLAnchorElement>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: typeof BreadcrumbCurrent;
+export declare const BreadcrumbsRoot: ({ className, "aria-label": label, ref, ...props }: React.ComponentPropsWithoutRef<"nav"> & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element, BreadcrumbsList: ({ className, role, ref, ...props }: React.ComponentPropsWithoutRef<"ol"> & {
+    ref?: React.Ref<HTMLOListElement>;
+}) => React.JSX.Element, BreadcrumbsItem: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<"li"> & {
+    ref?: React.Ref<HTMLLIElement>;
+}) => React.JSX.Element, BreadcrumbsLink: ({ render, className, ref, ...props }: import("./link.js").LinkProps & {
+    ref?: React.Ref<HTMLAnchorElement>;
+}) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: typeof BreadcrumbCurrent;
 export {};

package/dist/breadcrumbs.js

@@ -1,23 +1,21 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
-import { cx } from './parts.js';
+import { cx } from './class-names.js';
 import { Link } from './link.js';
-const BreadcrumbRoot = /* @__PURE__ */ React.forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: cx('pui-breadcrumbs', className) }));
-});
-const BreadcrumbList = /* @__PURE__ */ React.forwardRef(function BreadcrumbList({ className, role = 'list', ...props }, ref) {
-    return (_jsx("ol", { ...props, role: role, ref: ref, className: cx('pui-breadcrumb-list', className) }));
-});
-const BreadcrumbItem = /* @__PURE__ */ React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, className: cx('pui-breadcrumb-item', className) }));
-});
+const BreadcrumbRoot = function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ref, ...props }) {
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: cx('surf-breadcrumbs', className) }));
+};
+const BreadcrumbList = function BreadcrumbList({ className, role = 'list', ref, ...props }) {
+    return (_jsx("ol", { ...props, role: role, ref: ref, className: cx('surf-breadcrumb-list', className) }));
+};
+const BreadcrumbItem = function BreadcrumbItem({ className, ref, ...props }) {
+    return (_jsx("li", { ...props, ref: ref, className: cx('surf-breadcrumb-item', className) }));
+};
 function BreadcrumbSeparator({ className, ...props }) {
-    return (_jsx("span", { ...props, className: cx('pui-breadcrumb-separator', className), "aria-hidden": 'true', children: _jsx(Icon, { name: 'chevron-forward' }) }));
+    return (_jsx("span", { ...props, className: cx('surf-breadcrumb-separator', className), "aria-hidden": 'true', children: _jsx(Icon, { name: 'chevron-forward' }) }));
 }
 function BreadcrumbCurrent({ className, ...props }) {
-    return (_jsx("span", { ...props, className: cx('pui-breadcrumb-current', className), "aria-current": 'page' }));
+    return (_jsx("span", { ...props, className: cx('surf-breadcrumb-current', className), "aria-current": 'page' }));
 }
 export const Breadcrumbs = {
     Root: BreadcrumbRoot,