@saas-ui/react 3.0.0-next.37 → 3.0.0-next.38

package/dist/components/persona/index.d.ts

@@ -1,4 +1,3 @@
-export { Persona, PersonaAvatar } from './persona.tsx';
-export type { PersonaProps, PersonaAvatarProps } from './persona.tsx';
+export * as Persona from './persona.tsx';
 export { defaultPersonaPresenceOptions } from './presence.ts';
 export type { PersonaPresence, PersonaPresenceConfig } from './presence.ts';

package/dist/components/persona/index.js

@@ -1,2 +1,2 @@
-export { Persona, PersonaAvatar } from "./persona.js";
+export * as Persona from "./persona.js";
 export { defaultPersonaPresenceOptions } from "./presence.js";

package/dist/components/persona/persona-composed.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as PersonaPrimitive from './persona.tsx';
+import type { PersonaVariantProps } from './persona.recipe.ts';
+import type { PersonaPresence } from './presence.ts';
+interface PersonaOptions {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * The presence status of the person
+     *
+     * If set will add an AvatarBadge with color configured in `Presence`
+     * Default presence options:
+     * - online
+     * - offline
+     * - busy
+     * - dnd
+     * - away
+     */
+    presence?: PersonaPresence;
+    /**
+     * The icon shown in the AvatarBadge
+     */
+    presenceIcon?: React.ReactNode;
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * Primary label of the persona, defaults to the name
+     */
+    label?: React.ReactNode;
+    /**
+     * Secondary label, usually the role of the person
+     * Only visible from md size and up.
+     */
+    secondaryLabel?: React.ReactNode;
+    /**
+     * Tertiary label, usually the status of the person.
+     * Only visible from lg size and up.
+     */
+    tertiaryLabel?: React.ReactNode;
+    /**
+     * Hide the persona details next to the avatar.
+     */
+    hideDetails?: boolean;
+}
+export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
+}
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
+export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+}
+export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/persona/persona-composed.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PersonaPrimitive from "./persona.js";
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export const Persona = React.forwardRef((props, ref) => {
+    const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children, 
+    /** Avatar props */
+    getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
+    return (_jsxs(PersonaPrimitive.Root, { ref: ref, outOfOffice: isOutOfOffice, presence: presence, size: size, ...rest, children: [_jsx(PersonaPrimitive.Avatar, { name: name, size: size, getInitials: getInitials, icon: icon, loading: loading, onError: onError, src: src, srcSet: srcSet, fallback: fallback, children: presence ? (_jsx(PersonaPrimitive.PresenceBadge, { children: presenceIcon })) : null }), !hideDetails && (_jsxs(PersonaPrimitive.Details, { children: [_jsx(PersonaPrimitive.Label, { children: label || name }), secondaryLabel && (_jsx(PersonaPrimitive.SecondaryLabel, { children: secondaryLabel })), tertiaryLabel && (_jsx(PersonaPrimitive.TertiaryLabel, { children: tertiaryLabel })), children] }))] }));
+});
+Persona.displayName = 'Persona';
+export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
+    return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
+});

package/dist/components/persona/persona.context.d.ts

@@ -1 +1,9 @@
-export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>;
+export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, useRecipeResult: (props: any) => {
+    styles: Record<string, import("@chakra-ui/react").SystemStyleObject>;
+    classNames: Record<string, string>;
+    props: {
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    };
+}, usePropsContext: () => Record<string, any>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>, ClassNamesProvider: import("react").Provider<Record<string, string>>, PropsProvider: import("react").Provider<Record<string, any>>, StylesProvider: import("react").Provider<Record<string, import("@chakra-ui/react").SystemStyleObject>>;

package/dist/components/persona/persona.context.js

@@ -1,4 +1,4 @@
 import { createSlotRecipeContext } from '@chakra-ui/react';
-export const { useStyles: usePersonaStyles, withProvider, withContext, } = createSlotRecipeContext({
+export const { useStyles: usePersonaStyles, useRecipeResult, usePropsContext, withProvider, withContext, ClassNamesProvider, PropsProvider, StylesProvider, } = createSlotRecipeContext({
     key: 'suiPersona',
 });

package/dist/components/persona/persona.d.ts

@@ -1,63 +1,77 @@
-import * as React from 'react';
-import * as PersonaPrimitive from './persona-primitive.tsx';
+import React from 'react';
+import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
+import { type AvatarProps } from '../avatar/avatar.tsx';
 import type { PersonaVariantProps } from './persona.recipe.ts';
 import type { PersonaPresence } from './presence.ts';
-interface PersonaOptions {
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
     /**
-     * The name of the person in the avatar.
-     *
-     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
-     * - If `src` is not loaded, the name will be used to create the initials
+     * Indicates that a person is out of office. Changes the presence badge style.
      */
-    name?: string;
+    outOfOffice?: boolean;
     /**
      * The presence status of the person
-     *
-     * If set will add an AvatarBadge with color configured in `Presence`
-     * Default presence options:
-     * - online
-     * - offline
-     * - busy
-     * - dnd
-     * - away
      */
     presence?: PersonaPresence;
+}
+/**
+ * The root component that provides context and styles.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaAvatarOptions {
     /**
-     * The icon shown in the AvatarBadge
-     */
-    presenceIcon?: React.ReactNode;
-    /**
-     * Indicates that a person is out of office. Changes the presence badge style.
-     */
-    isOutOfOffice?: boolean;
-    /**
-     * Primary label of the persona, defaults to the name
-     */
-    label?: React.ReactNode;
-    /**
-     * Secondary label, usually the role of the person
-     * Only visible from md size and up.
-     */
-    secondaryLabel?: React.ReactNode;
-    /**
-     * Tertiary label, usually the status of the person.
-     * Only visible from lg size and up.
-     */
-    tertiaryLabel?: React.ReactNode;
-    /**
-     * Hide the persona details next to the avatar.
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
      */
-    hideDetails?: boolean;
+    name?: string;
+}
+interface PersonaAvatarProps extends PersonaAvatarOptions, AvatarProps {
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: React.ReactElement;
+    fallback?: React.ReactNode;
+    getInitials?: (name?: string | null) => string | null;
+}
+/**
+ * An avatar with optional status badge.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
 }
-export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
+declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
 }
 /**
- * The wrapper component that handles default composition.
+ * Wrapper component for the labels.
  *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ * @see Docs https://saas-ui.dev/docs/components/persona
  */
-export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
-export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaLabelProps extends HTMLChakraProps<'span'> {
 }
-export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * The secondary label, usually the role of a person.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaSecondaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * The tertiary label, typically a status message.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaTertiaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
+export type { PersonaRootProps as RootProps, PersonaAvatarProps as AvatarProps, PersonaPresenceBadgeProps as PresenceBadgeProps, PersonaDetailsProps as DetailsProps, PersonaLabelProps as LabelProps, };

package/dist/components/persona/persona.js

@@ -1,18 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import * as PersonaPrimitive from "./persona-primitive.js";
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { AvatarPropsProvider, chakra, mergeProps, } from '@chakra-ui/react';
+import { dataAttr } from '@saas-ui/core/utils';
+import { cx } from '@saas-ui/core/utils';
+import { Avatar } from "../avatar/avatar.js";
+import { ClassNamesProvider, StylesProvider, usePropsContext, useRecipeResult, withContext, } from "./persona.context.js";
 /**
- * The wrapper component that handles default composition.
+ * The root component that provides context and styles.
  *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ * @see Docs https://saas-ui.dev/docs/components/persona
  */
-export const Persona = React.forwardRef((props, ref) => {
-    const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children, 
-    /** Avatar props */
-    getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
-    return (_jsxs(PersonaPrimitive.Root, { ref: ref, outOfOffice: isOutOfOffice, presence: presence, size: size, ...rest, children: [_jsx(PersonaPrimitive.Avatar, { name: name, size: size, getInitials: getInitials, icon: icon, loading: loading, onError: onError, src: src, srcSet: srcSet, fallback: fallback, children: presence ? (_jsx(PersonaPrimitive.PresenceBadge, { children: presenceIcon })) : null }), !hideDetails && (_jsxs(PersonaPrimitive.Details, { children: [_jsx(PersonaPrimitive.Label, { children: label || name }), secondaryLabel && (_jsx(PersonaPrimitive.SecondaryLabel, { children: secondaryLabel })), tertiaryLabel && (_jsx(PersonaPrimitive.TertiaryLabel, { children: tertiaryLabel })), children] }))] }));
+const PersonaRoot = forwardRef((props, ref) => {
+    const propsContext = usePropsContext();
+    const mergedProps = useMemo(() => mergeProps(propsContext, props), [propsContext, props]);
+    const { styles, props: rootProps, classNames, } = useRecipeResult(mergedProps);
+    const className = classNames['root'];
+    const { outOfOffice, presence, ...rest } = rootProps;
+    return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(AvatarPropsProvider, { value: {
+                    size: props.size,
+                }, children: _jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
+                        presence
+                            ? {
+                                '--persona-presence': `colors.presence.${presence}`,
+                            }
+                            : undefined,
+                        styles['root'],
+                        rest.css,
+                    ], className: cx(className, rest.className) }) }) }) }));
 });
-Persona.displayName = 'Persona';
-export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
-    return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
+/**
+ * An avatar with optional status badge.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaAvatar = forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
 });
+const PersonaPresenceBadge = withContext('span', 'presence');
+/**
+ * Wrapper component for the labels.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaDetails = withContext('div', 'details');
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaLabel = withContext('span', 'label');
+PersonaLabel.displayName = 'PersonaLabel';
+/**
+ * The secondary label, usually the role of a person.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
+/**
+ * The tertiary label, typically a status message.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
+export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export { Menu } from './components/menu/index.ts';
 export { Page, usePageStyles } from './components/page/index.ts';
 export { Pagination } from './components/pagination/index.ts';
 export { PasswordInput, type PasswordInputProps, } from './components/password-input/index.ts';
-export { Persona, PersonaAvatar, type PersonaPresence, type PersonaAvatarProps, type PersonaPresenceConfig, type PersonaProps, defaultPersonaPresenceOptions, } from './components/persona/index.ts';
+export { Persona, type PersonaPresence, type PersonaPresenceConfig, defaultPersonaPresenceOptions, } from './components/persona/index.ts';
 export { PinInput, type PinInputProps } from './components/pin-input/index.ts';
 export { Popover } from './components/popover/index.ts';
 export { Progress } from './components/progress/index.ts';

package/dist/index.js

@@ -58,7 +58,7 @@ export { Menu } from "./components/menu/index.js";
 export { Page, usePageStyles } from "./components/page/index.js";
 export { Pagination } from "./components/pagination/index.js";
 export { PasswordInput, } from "./components/password-input/index.js";
-export { Persona, PersonaAvatar, defaultPersonaPresenceOptions, } from "./components/persona/index.js";
+export { Persona, defaultPersonaPresenceOptions, } from "./components/persona/index.js";
 export { PinInput } from "./components/pin-input/index.js";
 export { Popover } from "./components/popover/index.js";
 export { Progress } from "./components/progress/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.37",
+  "version": "3.0.0-next.38",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -62,7 +62,7 @@
   "dependencies": {
     "@ark-ui/react": "^5.9.1",
     "next-themes": "^0.4.6",
-    "@saas-ui/core": "3.0.0-next.10",
+    "@saas-ui/core": "3.0.0-next.11",
     "@saas-ui/hooks": "3.0.0-next.3"
   },
   "peerDependencies": {

package/dist/components/persona/persona-primitive.d.ts

@@ -1,77 +0,0 @@
-import React from 'react';
-import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
-import { type AvatarProps } from '../avatar/avatar.tsx';
-import type { PersonaVariantProps } from './persona.recipe.ts';
-import type { PersonaPresence } from './presence.ts';
-interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
-    /**
-     * Indicates that a person is out of office. Changes the presence badge style.
-     */
-    outOfOffice?: boolean;
-    /**
-     * The presence status of the person
-     */
-    presence?: PersonaPresence;
-}
-/**
- * The root component that provides context and styles.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
-interface PersonaAvatarOptions {
-    /**
-     * The name of the person in the avatar.
-     *
-     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
-     * - If `src` is not loaded, the name will be used to create the initials
-     */
-    name?: string;
-}
-interface PersonaAvatarProps extends PersonaAvatarOptions, AvatarProps {
-    src?: string;
-    srcSet?: string;
-    loading?: ImageProps['loading'];
-    icon?: React.ReactElement;
-    fallback?: React.ReactNode;
-    getInitials?: (name?: string | null) => string | null;
-}
-/**
- * An avatar with optional status badge.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
-interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
-}
-declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
-interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
-}
-/**
- * Wrapper component for the labels.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
-interface PersonaLabelProps extends HTMLChakraProps<'span'> {
-}
-/**
- * The main label, usually a name.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
-/**
- * The secondary label, usually the role of a person.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaSecondaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
-/**
- * The tertiary label, typically a status message.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-declare const PersonaTertiaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
-export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
-export type { PersonaRootProps as RootProps, PersonaAvatarProps as AvatarProps, PersonaPresenceBadgeProps as PresenceBadgeProps, PersonaDetailsProps as DetailsProps, PersonaLabelProps as LabelProps, };

package/dist/components/persona/persona-primitive.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { chakra, } from '@chakra-ui/react';
-import { dataAttr } from '@saas-ui/core/utils';
-import { Avatar } from "../avatar/avatar.js";
-import { withContext, withProvider } from "./persona.context.js";
-/**
- * The root component that provides context and styles.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaRoot = withProvider(forwardRef((props, ref) => {
-    const { outOfOffice, presence, ...rest } = props;
-    return (_jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
-            presence
-                ? {
-                    '--persona-presence': `colors.presence.${presence}`,
-                }
-                : undefined,
-            rest.css,
-        ] }));
-}), 'root');
-/**
- * An avatar with optional status badge.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaAvatar = forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
-});
-const PersonaPresenceBadge = withContext('span', 'presence');
-/**
- * Wrapper component for the labels.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaDetails = withContext('div', 'details');
-/**
- * The main label, usually a name.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaLabel = withContext('span', 'label');
-PersonaLabel.displayName = 'PersonaLabel';
-/**
- * The secondary label, usually the role of a person.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
-/**
- * The tertiary label, typically a status message.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
-export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };