@wix/site-ui 1.29.0 → 1.31.0

package/dist/Autocomplete/index.js

@@ -1,7 +1,81 @@
 import { jsx } from "react/jsx-runtime";
-import { Autocomplete } from "@base-ui/react/autocomplete";
 import clsx from "clsx";
+import { ComboboxArrow_ComboboxArrow, ComboboxPositioner_ComboboxPositioner, ComboboxRow_ComboboxRow, ComboboxInputGroup_ComboboxInputGroup, AriaCombobox, ComboboxCollection, ComboboxBackdrop_ComboboxBackdrop, ComboboxClear_ComboboxClear, ComboboxIcon_ComboboxIcon, ComboboxTrigger_ComboboxTrigger, ComboboxGroup_ComboboxGroup, ComboboxGroupLabel_ComboboxGroupLabel, ComboboxPopup_ComboboxPopup, useCoreFilter, ComboboxStatus_ComboboxStatus, ComboboxInput_ComboboxInput, ComboboxEmpty_ComboboxEmpty, ComboboxPortal_ComboboxPortal, useComboboxInputValueContext, ComboboxItem_ComboboxItem, ComboboxList_ComboboxList } from "../6089.js";
+import { pointer } from "../2418.js";
+import { stringifyAsLabel } from "../7366.js";
+import { Separator } from "../9635.js";
 import * as __rspack_external_react from "react";
+const AutocompleteInputGroup = ComboboxInputGroup_ComboboxInputGroup;
+const AutocompleteItem = ComboboxItem_ComboboxItem;
+const AutocompleteTrigger = ComboboxTrigger_ComboboxTrigger;
+function AutocompleteRoot(props) {
+    const { openOnInputClick = false, value, defaultValue, onValueChange, mode = 'list', itemToStringValue, ...other } = props;
+    const enableInline = 'inline' === mode || 'both' === mode;
+    const staticItems = 'inline' === mode || 'none' === mode;
+    const isControlled = void 0 !== value;
+    const [internalValue, setInternalValue] = __rspack_external_react.useState(defaultValue ?? '');
+    const [inlineInputValue, setInlineInputValue] = __rspack_external_react.useState('');
+    __rspack_external_react.useEffect(()=>{
+        if (isControlled) setInlineInputValue('');
+    }, [
+        value,
+        isControlled
+    ]);
+    let resolvedInputValue;
+    resolvedInputValue = enableInline && '' !== inlineInputValue ? inlineInputValue : isControlled ? value ?? '' : internalValue;
+    const collator = useCoreFilter();
+    const baseFilter = __rspack_external_react.useMemo(()=>{
+        if (void 0 !== other.filter) return other.filter;
+        return collator.contains;
+    }, [
+        other.filter,
+        collator
+    ]);
+    const resolvedQuery = String(isControlled ? value : internalValue).trim();
+    const resolvedFilter = __rspack_external_react.useMemo(()=>{
+        if ('both' !== mode) return staticItems ? null : baseFilter;
+        if (null === baseFilter) return null;
+        return (item, _query, toString)=>baseFilter(item, resolvedQuery, toString);
+    }, [
+        baseFilter,
+        mode,
+        resolvedQuery,
+        staticItems
+    ]);
+    function handleValueChange(nextValue, eventDetails) {
+        setInlineInputValue('');
+        if (!isControlled) setInternalValue(nextValue);
+        onValueChange?.(nextValue, eventDetails);
+    }
+    function handleItemHighlighted(highlightedValue, eventDetails) {
+        props.onItemHighlighted?.(highlightedValue, eventDetails);
+        if (eventDetails.reason === pointer) return;
+        if (enableInline) null == highlightedValue ? setInlineInputValue('') : setInlineInputValue(stringifyAsLabel(highlightedValue, itemToStringValue));
+        else setInlineInputValue('');
+    }
+    return /*#__PURE__*/ jsx(AriaCombobox, {
+        ...other,
+        itemToStringLabel: itemToStringValue,
+        openOnInputClick: openOnInputClick,
+        selectionMode: "none",
+        fillInputOnItemPress: true,
+        filter: resolvedFilter,
+        autoComplete: mode,
+        inputValue: resolvedInputValue,
+        defaultInputValue: defaultValue,
+        onInputValueChange: handleValueChange,
+        onItemHighlighted: handleItemHighlighted
+    });
+}
+function AutocompleteValue(props) {
+    const { children } = props;
+    const inputValue = useComboboxInputValueContext();
+    let returnValue = null;
+    returnValue = 'function' == typeof children ? children(String(inputValue)) : null != children ? children : inputValue;
+    return /*#__PURE__*/ jsx(__rspack_external_react.Fragment, {
+        children: returnValue
+    });
+}
 const Autocomplete_module = {
     inputGroup: "inputGroup-II6FAN",
     input: "input-k82Te5",
@@ -11,88 +85,88 @@ const Autocomplete_module = {
     item: "item-MXqW1H",
     empty: "empty-P2WjlU"
 };
-const InputGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.InputGroup, {
+const InputGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AutocompleteInputGroup, {
         ref: ref,
         className: clsx(Autocomplete_module.inputGroup, className),
         ...props
     }));
-const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Item, {
+const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AutocompleteItem, {
         ref: ref,
         className: clsx(Autocomplete_module.item, className),
         ...props
     }));
-const Input = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Input, {
+const Input = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxInput_ComboboxInput, {
         ref: ref,
         className: clsx(Autocomplete_module.input, className),
         ...props
     }));
-const Icon = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Icon, {
+const Icon = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxIcon_ComboboxIcon, {
         ref: ref,
         className: clsx(Autocomplete_module.icon, className),
         ...props
     }));
-const Clear = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Clear, {
+const Clear = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxClear_ComboboxClear, {
         ref: ref,
         className: clsx(Autocomplete_module.clear, className),
         ...props
     }));
-const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.List, {
+const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxList_ComboboxList, {
         ref: ref,
         className: clsx(Autocomplete_module.list, className),
         ...props
     }));
-const Status = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Status, {
+const Status = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxStatus_ComboboxStatus, {
         ref: ref,
         className: clsx(Autocomplete_module.status, className),
         ...props
     }));
-const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Backdrop, {
+const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxBackdrop_ComboboxBackdrop, {
         ref: ref,
         className: clsx(Autocomplete_module.backdrop, className),
         ...props
     }));
-const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Positioner, {
+const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxPositioner_ComboboxPositioner, {
         ref: ref,
         className: clsx(Autocomplete_module.positioner, className),
         ...props
     }));
-const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Popup, {
+const Popup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxPopup_ComboboxPopup, {
         ref: ref,
         className: clsx(Autocomplete_module.popup, className),
         ...props
     }));
-const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Arrow, {
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxArrow_ComboboxArrow, {
         ref: ref,
         className: clsx(Autocomplete_module.arrow, className),
         ...props
     }));
-const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Group, {
+const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxGroup_ComboboxGroup, {
         ref: ref,
         className: clsx(Autocomplete_module.group, className),
         ...props
     }));
-const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.GroupLabel, {
+const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxGroupLabel_ComboboxGroupLabel, {
         ref: ref,
         className: clsx(Autocomplete_module.groupLabel, className),
         ...props
     }));
-const Row = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Row, {
+const Row = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxRow_ComboboxRow, {
         ref: ref,
         className: clsx(Autocomplete_module.row, className),
         ...props
     }));
-const Empty = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.Empty, {
+const Empty = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ComboboxEmpty_ComboboxEmpty, {
         ref: ref,
         className: clsx(Autocomplete_module.empty, className),
         ...props
     }));
 function Trigger({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Autocomplete.Trigger, {
+    return /*#__PURE__*/ jsx(AutocompleteTrigger, {
         ...props,
         className: clsx(Autocomplete_module.trigger, className)
     });
 }
-const Autocomplete_Autocomplete = {
+const Autocomplete = {
     InputGroup: InputGroup,
     Item: Item,
     Input: Input,
@@ -107,12 +181,12 @@ const Autocomplete_Autocomplete = {
     Group: Group,
     GroupLabel: GroupLabel,
     Row: Row,
-    Collection: Autocomplete.Collection,
+    Collection: ComboboxCollection,
     Empty: Empty,
-    Root: Autocomplete.Root,
+    Root: AutocompleteRoot,
     Trigger: Trigger,
-    Value: Autocomplete.Value,
-    Portal: Autocomplete.Portal,
-    Separator: Autocomplete.Separator
+    Value: AutocompleteValue,
+    Portal: ComboboxPortal_ComboboxPortal,
+    Separator: Separator
 };
-export { Autocomplete_Autocomplete as Autocomplete };
+export { Autocomplete };

package/dist/Avatar/index.d.ts

@@ -1,22 +1,93 @@
-import { AvatarFallbackProps } from '@base-ui/react/avatar';
-import { AvatarImageProps } from '@base-ui/react/avatar';
-import { AvatarRootProps } from '@base-ui/react/avatar';
+import { AvatarFallbackProps as AvatarFallbackProps_2 } from '@base-ui/react/avatar';
+import { AvatarImageProps as AvatarImageProps_2 } from '@base-ui/react/avatar';
+import { AvatarRootProps as AvatarRootProps_2 } from '@base-ui/react/avatar';
 import * as React_2 from 'react';
 
 export declare const Avatar: {
-    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarRootProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
+    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarRootProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & {
         size?: string | number | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Image: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarImageProps, "ref"> & React_2.RefAttributes<HTMLImageElement>, "ref">, "className"> & {
+    Image: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarImageProps_2, "ref"> & React_2.RefAttributes<HTMLImageElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLImageElement>>;
-    Fallback: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarFallbackProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
+    Fallback: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarFallbackProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+/**
+ * Rendered when the image fails to load or when no image is provided.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+export declare const AvatarFallback: React_2.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare namespace AvatarFallback {
+    export type State = AvatarFallbackState;
+    export type Props = AvatarFallbackProps;
+}
+
+export declare interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallbackState> {
+    /**
+     * How long to wait before showing the fallback. Specified in milliseconds.
+     */
+    delay?: number | undefined;
+}
+
+export declare interface AvatarFallbackState extends AvatarRootState {}
+
+/**
+ * The image to be displayed in the avatar.
+ * Renders an `<img>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+export declare const AvatarImage: React_2.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React_2.RefAttributes<HTMLImageElement>>;
+
+export declare namespace AvatarImage {
+    export type State = AvatarImageState;
+    export type Props = AvatarImageProps;
+}
+
+export declare interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState> {
+    /**
+     * Callback fired when the loading status changes.
+     */
+    onLoadingStatusChange?: ((status: ImageLoadingStatus_2) => void) | undefined;
+}
+
+export declare interface AvatarImageState extends AvatarRootState {
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Displays a user's profile picture, initials, or fallback icon.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
+ */
+export declare const AvatarRoot: React_2.ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare namespace AvatarRoot {
+    export type State = AvatarRootState;
+    export type Props = AvatarRootProps;
+}
+
+export declare interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRootState> {}
+
+export declare interface AvatarRootState {
+    /**
+     * The image loading status.
+     */
+    imageLoadingStatus: ImageLoadingStatus;
+}
+
 export declare const AvatarSize: {
     readonly xxSmall: 16;
     readonly xSmall: 20;
@@ -26,7 +97,58 @@ export declare const AvatarSize: {
     readonly xLarge: 60;
 };
 
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
+    /**
+     * CSS class applied to the element, or a function that
+     * returns a class based on the component's state.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+    /**
+     * Style applied to the element, or a function that
+     * returns a style object based on the component's state.
+     */
+    style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
+};
+
+declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
+
+declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
+export declare type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+declare type ImageLoadingStatus_2 = 'idle' | 'loading' | 'loaded' | 'error';
+
+declare type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
 
-export * from "@base-ui/react/avatar";
+declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 
 export { }

package/dist/Avatar/index.js

@@ -1,13 +1,156 @@
 import { jsx } from "react/jsx-runtime";
-import { Avatar } from "@base-ui/react/avatar";
 import clsx from "clsx";
+import { NOOP, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
+import { useStableCallback } from "../7541.js";
+import { useTimeout } from "../42.js";
 import * as __rspack_external_react from "react";
+const AvatarRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) AvatarRootContext.displayName = "AvatarRootContext";
+function useAvatarRootContext() {
+    const context = __rspack_external_react.useContext(AvatarRootContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>.' : esm_formatErrorMessage(13));
+    return context;
+}
+const avatarStateAttributesMapping = {
+    imageLoadingStatus: ()=>null
+};
+const AvatarRoot_AvatarRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, style, ...elementProps } = componentProps;
+    const [imageLoadingStatus, setImageLoadingStatus] = __rspack_external_react.useState('idle');
+    const state = {
+        imageLoadingStatus
+    };
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            imageLoadingStatus,
+            setImageLoadingStatus
+        }), [
+        imageLoadingStatus,
+        setImageLoadingStatus
+    ]);
+    const element = useRenderElement('span', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: elementProps,
+        stateAttributesMapping: avatarStateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(AvatarRootContext.Provider, {
+        value: contextValue,
+        children: element
+    });
+});
+if ("production" !== process.env.NODE_ENV) AvatarRoot_AvatarRoot.displayName = "AvatarRoot";
+function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
+    const [loadingStatus, setLoadingStatus] = __rspack_external_react.useState('idle');
+    useIsoLayoutEffect(()=>{
+        if (!src) {
+            setLoadingStatus('error');
+            return NOOP;
+        }
+        let isMounted = true;
+        const image = new window.Image();
+        const updateStatus = (status)=>()=>{
+                if (!isMounted) return;
+                setLoadingStatus(status);
+            };
+        setLoadingStatus('loading');
+        image.onload = updateStatus('loaded');
+        image.onerror = updateStatus('error');
+        if (referrerPolicy) image.referrerPolicy = referrerPolicy;
+        image.crossOrigin = crossOrigin ?? null;
+        image.src = src;
+        if (image.complete) setLoadingStatus(image.naturalWidth > 0 ? 'loaded' : 'error');
+        return ()=>{
+            isMounted = false;
+        };
+    }, [
+        src,
+        crossOrigin,
+        referrerPolicy
+    ]);
+    return loadingStatus;
+}
+const stateAttributesMapping = {
+    ...avatarStateAttributesMapping,
+    ...transitionStatusMapping
+};
+const AvatarImage_AvatarImage = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, onLoadingStatusChange: onLoadingStatusChangeProp, referrerPolicy, crossOrigin, style, ...elementProps } = componentProps;
+    const context = useAvatarRootContext();
+    const imageLoadingStatus = useImageLoadingStatus(componentProps.src, {
+        referrerPolicy,
+        crossOrigin
+    });
+    const isVisible = 'loaded' === imageLoadingStatus;
+    const { mounted, transitionStatus, setMounted } = useTransitionStatus(isVisible);
+    const imageRef = __rspack_external_react.useRef(null);
+    const handleLoadingStatusChange = useStableCallback((status)=>{
+        onLoadingStatusChangeProp?.(status);
+        context.setImageLoadingStatus(status);
+    });
+    useIsoLayoutEffect(()=>{
+        if ('idle' !== imageLoadingStatus) handleLoadingStatusChange(imageLoadingStatus);
+    }, [
+        imageLoadingStatus,
+        handleLoadingStatusChange
+    ]);
+    useOpenChangeComplete({
+        open: isVisible,
+        ref: imageRef,
+        onComplete () {
+            if (!isVisible) setMounted(false);
+        }
+    });
+    const state = {
+        imageLoadingStatus,
+        transitionStatus
+    };
+    const element = useRenderElement('img', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            imageRef
+        ],
+        props: elementProps,
+        stateAttributesMapping: stateAttributesMapping,
+        enabled: mounted
+    });
+    if (!mounted) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) AvatarImage_AvatarImage.displayName = "AvatarImage";
+const AvatarFallback_AvatarFallback = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, render, delay, style, ...elementProps } = componentProps;
+    const { imageLoadingStatus } = useAvatarRootContext();
+    const [delayPassed, setDelayPassed] = __rspack_external_react.useState(void 0 === delay);
+    const timeout = useTimeout();
+    __rspack_external_react.useEffect(()=>{
+        if (void 0 !== delay) timeout.start(delay, ()=>setDelayPassed(true));
+        return timeout.clear;
+    }, [
+        timeout,
+        delay
+    ]);
+    const state = {
+        imageLoadingStatus
+    };
+    const element = useRenderElement('span', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: elementProps,
+        stateAttributesMapping: avatarStateAttributesMapping,
+        enabled: 'loaded' !== imageLoadingStatus && delayPassed
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) AvatarFallback_AvatarFallback.displayName = "AvatarFallback";
 const Avatar_module = {
     root: "root-uFk_6F",
     image: "image-i3BrFP",
     fallback: "fallback-r0pagw"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size, style, ...props }, ref)=>/*#__PURE__*/ jsx(Avatar.Root, {
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size, style, ...props }, ref)=>/*#__PURE__*/ jsx(AvatarRoot_AvatarRoot, {
         ref: ref,
         className: clsx(Avatar_module.root, className),
         style: {
@@ -16,12 +159,12 @@ const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size
         },
         ...props
     }));
-const Image = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Avatar.Image, {
+const Image = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AvatarImage_AvatarImage, {
         ref: ref,
         className: clsx(Avatar_module.image, className),
         ...props
     }));
-const Fallback = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Avatar.Fallback, {
+const Fallback = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AvatarFallback_AvatarFallback, {
         ref: ref,
         className: clsx(Avatar_module.fallback, className),
         ...props
@@ -34,9 +177,9 @@ const AvatarSize = {
     large: 52,
     xLarge: 60
 };
-const Avatar_Avatar = {
+const Avatar = {
     Root: Root,
     Image: Image,
     Fallback: Fallback
 };
-export { AvatarSize, Avatar_Avatar as Avatar };
+export { Avatar, AvatarSize };

package/dist/Badge/index.css

@@ -0,0 +1,44 @@
+.root-ig2Z1s {
+  box-sizing: border-box;
+  font: var(--wst-paragraph-3-font);
+  border-radius: 12px;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 12px 5px;
+  display: inline-flex;
+}
+
+.root-ig2Z1s svg {
+  width: 20px;
+  height: 20px;
+}
+
+.default-nJusqF {
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-3-color) 10%,
+    transparent);
+  color: var(--wst-paragraph-3-color);
+}
+
+.light-qGxiE8 {
+  background-color: var(--wst-primary-background-color);
+  color: var(--wst-paragraph-3-color);
+  border-width: 1px;
+  border-color: color-mix(in srgb,
+    var(--wst-paragraph-3-color) 10%,
+    transparent);
+}
+
+.primary-bU68vw {
+  background-color: var(--wst-links-and-actions-color);
+  color: var(--wst-primary-background-color);
+}
+
+.secondary-dA1Wg2 {
+  background-color: color-mix(in srgb,
+    var(--wst-links-and-actions-color) 10%,
+    transparent);
+  color: var(--wst-links-and-actions-color);
+}
+

package/dist/Badge/index.d.ts

@@ -0,0 +1,22 @@
+import * as React_2 from 'react';
+
+export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface BadgeProps extends WithStringClassName<React_2.HTMLAttributes<HTMLSpanElement>> {
+    variant?: BadgeVariantType;
+}
+
+export declare const BadgeVariant: {
+    readonly default: "default";
+    readonly light: "light";
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+};
+
+export declare type BadgeVariantType = (typeof BadgeVariant)[keyof typeof BadgeVariant];
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
+export { }

package/dist/Badge/index.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as __rspack_external_react from "react";
+const Badge_module = {
+    root: "root-ig2Z1s",
+    default: "default-nJusqF",
+    light: "light-qGxiE8",
+    primary: "primary-bU68vw",
+    secondary: "secondary-dA1Wg2"
+};
+const BadgeVariant = {
+    default: 'default',
+    light: 'light',
+    primary: 'primary',
+    secondary: 'secondary'
+};
+const Badge = /*#__PURE__*/ __rspack_external_react.forwardRef(({ variant = BadgeVariant.default, className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: clsx(Badge_module.root, Badge_module[variant], className),
+        ...props
+    }));
+Badge.displayName = 'Badge';
+export { Badge, BadgeVariant };