feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tree/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+import { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
+import { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';
+import { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';
+import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
+ * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
+ * This component should only be used as a direct child of `TreeItem`.
+ */ export const TreeItemPersonaLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemPersonaLayout_unstable(props, ref);
+    useTreeItemPersonaLayoutStyles_unstable(state);
+    useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);
+    const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);
+    return renderTreeItemPersonaLayout_unstable(state, contextValues);
+});
+TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';