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';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AACzG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IACxCL,4BAA4B,2CAA2CK;IAEvE,MAAMC,gBAAgBP,+CAA+CM;IAErE,OAAOR,qCAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering TreeItemPersonaLayout
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AA8BA;;CAEC,GACD,WAGE"}

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

@@ -0,0 +1,4 @@
+export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';
+export { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';
+export { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';
+export { treeItemPersonaLayoutClassNames, useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n  treeItemPersonaLayoutClassNames,\n  useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAOhE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}

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

@@ -0,0 +1,28 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { AvatarContextProvider } from '@fluentui/react-avatar';
+import { ButtonContextProvider } from '@fluentui/react-button';
+/**
+ * Render the final JSX of TreeItemPersonaLayout
+ */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+            state.selector && /*#__PURE__*/ _jsx(state.selector, {}),
+            /*#__PURE__*/ _jsx(AvatarContextProvider, {
+                value: contextValues.avatar,
+                children: /*#__PURE__*/ _jsx(state.media, {})
+            }),
+            /*#__PURE__*/ _jsx(state.main, {}),
+            state.description && /*#__PURE__*/ _jsx(state.description, {}),
+            /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+                value: state.buttonContextValue,
+                children: [
+                    state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
+                    state.aside && /*#__PURE__*/ _jsx(state.aside, {})
+                ]
+            })
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n): JSXElement => {\n  assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <state.media />\n      </AvatarContextProvider>\n      <state.main />\n      {state.description && <state.description />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;YACrCH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;0BAClC,KAACP;gBAAsBQ,OAAOJ,cAAcK,MAAM;0BAChD,cAAA,KAACN,MAAMO,KAAK;;0BAEd,KAACP,MAAMQ,IAAI;YACVR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;0BACxC,MAACX;gBAAsBO,OAAOL,MAAMU,kBAAkB;;oBACnDV,MAAMW,OAAO,kBAAI,KAACX,MAAMW,OAAO;oBAC/BX,MAAMY,KAAK,kBAAI,KAACZ,MAAMY,KAAK;;;;;AAIpC,EAAE"}

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

@@ -0,0 +1,53 @@
+'use client';
+import * as React from 'react';
+import { slot } from '@fluentui/react-utilities';
+import { useTreeContext_unstable } from '../../contexts';
+import { treeAvatarSize } from '../../utils/tokens';
+import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
+/**
+ * Create the state required to render TreeItemPersonaLayout.
+ *
+ * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,
+ * before being passed to renderTreeItemPersonaLayout_unstable.
+ *
+ * @param props - props from this instance of TreeItemPersonaLayout
+ * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
+ */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
+    const { media, children, main, description } = props;
+    const treeItemLayoutState = useTreeItemLayout_unstable({
+        ...props,
+        iconBefore: null,
+        iconAfter: null
+    }, ref);
+    const size = useTreeContext_unstable((ctx)=>ctx.size);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
+    return {
+        ...treeItemLayoutState,
+        components: {
+            expandIcon: 'div',
+            main: 'div',
+            description: 'div',
+            root: 'div',
+            media: 'div',
+            aside: 'div',
+            actions: 'div',
+            // Casting here to a union between checkbox and radio
+            selector: selectionMode === 'multiselect' ? Checkbox : Radio
+        },
+        avatarSize: treeAvatarSize[size],
+        main: slot.always(main, {
+            defaultProps: {
+                children
+            },
+            elementType: 'div'
+        }),
+        media: slot.always(media, {
+            elementType: 'div'
+        }),
+        description: slot.optional(description, {
+            elementType: 'div'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}

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

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+export function useTreeItemPersonaLayoutContextValues_unstable(state) {
+    const { avatarSize } = state;
+    const avatar = React.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["'use client';\n\nimport type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AAAA;AAGA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+export const treeItemPersonaLayoutClassNames = {
+  root: 'fui-TreeItemPersonaLayout',
+  media: 'fui-TreeItemPersonaLayout__media',
+  description: 'fui-TreeItemPersonaLayout__description',
+  main: 'fui-TreeItemPersonaLayout__main',
+  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
+  aside: 'fui-TreeItemPersonaLayout__aside',
+  actions: 'fui-TreeItemPersonaLayout__actions',
+  selector: 'fui-TreeItemPersonaLayout__selector'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1r98egg", null, [".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  leaf: {
+    uwmqm3: ["f1k1erfc", "faevyjx"]
+  },
+  branch: {
+    uwmqm3: ["fo100m9", "f6yw3pu"]
+  },
+  medium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  small: {
+    sshi5w: "f1pha7fy",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  subtle: {},
+  "subtle-alpha": {
+    Jwef8y: "f146ro5n",
+    ecr2s2: "fkam630"
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    Jwef8y: "fjxutwb",
+    ecr2s2: "fophhak"
+  }
+}, {
+  d: [".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  h: [".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
+  a: [".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"]
+});
+/**
+ * Styles for the expand icon slot
+ */
+const useMediaBaseStyles = /*#__PURE__*/__resetStyles("rkcde6g", "r1e986zr", [".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}", ".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}"]);
+const useMainBaseStyles = /*#__PURE__*/__resetStyles("r1qjtz99", "rob5fcp", [".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
+const useMainStyles = /*#__PURE__*/__styles({
+  withDescription: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f1625emv", "f5y9hxg"]
+  }
+}, {
+  d: [[".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}", {
+    p: -1
+  }]]
+});
+const useDescriptionBaseStyles = /*#__PURE__*/__resetStyles("r1bnsn1b", "r13x7gq", [".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
+/**
+ * Styles for the action icon slot
+ */
+const useActionsBaseStyles = /*#__PURE__*/__resetStyles("rzvs2in", "r17h8a29", [".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}", ".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"]);
+/**
+ * Styles for the action icon slot
+ */
+const useAsideBaseStyles = /*#__PURE__*/__resetStyles("r1825u21", "rezy0yk", [".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}", ".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"]);
+/**
+ * Styles for the expand icon slot
+ */
+const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rn61xvs", null, [".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"]);
+/**
+ * Apply styling to the TreeItemPersonaLayout slots based on the state
+ */
+export const useTreeItemPersonaLayoutStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseStyles = useRootBaseStyles();
+  const rootStyles = useRootStyles();
+  const mediaBaseStyles = useMediaBaseStyles();
+  const descriptionBaseStyles = useDescriptionBaseStyles();
+  const actionsBaseStyles = useActionsBaseStyles();
+  const asideBaseStyles = useAsideBaseStyles();
+  const expandIconBaseStyles = useExpandIconBaseStyles();
+  const mainBaseStyles = useMainBaseStyles();
+  const mainStyles = useMainStyles();
+  const size = useTreeContext_unstable(ctx => ctx.size);
+  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
+  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);
+  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
+  if (state.main) {
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
+  }
+  if (state.description) {
+    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
+  }
+  if (state.actions) {
+    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
+  }
+  if (state.aside) {
+    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
+  }
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
+  }
+  if (state.selector) {
+    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,176 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+export const treeItemPersonaLayoutClassNames = {
+    root: 'fui-TreeItemPersonaLayout',
+    media: 'fui-TreeItemPersonaLayout__media',
+    description: 'fui-TreeItemPersonaLayout__description',
+    main: 'fui-TreeItemPersonaLayout__main',
+    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
+    aside: 'fui-TreeItemPersonaLayout__aside',
+    actions: 'fui-TreeItemPersonaLayout__actions',
+    selector: 'fui-TreeItemPersonaLayout__selector'
+};
+const useRootBaseStyles = makeResetStyles({
+    display: 'grid',
+    gridTemplateRows: '1fr auto',
+    gridTemplateColumns: 'auto auto 1fr auto',
+    gridTemplateAreas: `
+    "expandIcon media main        aside"
+    "expandIcon media description aside"
+  `,
+    alignItems: 'center',
+    ...typographyStyles.body1,
+    ':active': {
+        color: tokens.colorNeutralForeground2Pressed,
+        backgroundColor: tokens.colorSubtleBackgroundPressed,
+        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling
+        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {
+            color: tokens.colorNeutralForeground3Pressed
+        }
+    },
+    ':hover': {
+        color: tokens.colorNeutralForeground2Hover,
+        backgroundColor: tokens.colorSubtleBackgroundHover,
+        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling
+        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {
+            color: tokens.colorNeutralForeground3Hover
+        }
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useRootStyles = makeStyles({
+    leaf: {
+        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`
+    },
+    branch: {
+        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`
+    },
+    // Size variations
+    medium: {
+        ...typographyStyles.body1
+    },
+    small: {
+        minHeight: '24px',
+        ...typographyStyles.caption1
+    },
+    // Appearance variations
+    subtle: {},
+    'subtle-alpha': {
+        ':hover': {
+            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed
+        }
+    },
+    transparent: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed
+        }
+    }
+});
+/**
+ * Styles for the expand icon slot
+ */ const useMediaBaseStyles = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    width: '32px',
+    height: '32px',
+    gridArea: 'media',
+    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`
+});
+const useMainBaseStyles = makeResetStyles({
+    gridArea: 'main',
+    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`
+});
+const useMainStyles = makeStyles({
+    withDescription: {
+        padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`
+    }
+});
+const useDescriptionBaseStyles = makeResetStyles({
+    gridArea: 'description',
+    ...typographyStyles.caption1,
+    padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`
+});
+/**
+ * Styles for the action icon slot
+ */ const useActionsBaseStyles = makeResetStyles({
+    display: 'flex',
+    marginLeft: 'auto',
+    position: 'relative',
+    zIndex: 1,
+    gridArea: 'aside',
+    padding: `0 ${tokens.spacingHorizontalS}`
+});
+/**
+ * Styles for the action icon slot
+ */ const useAsideBaseStyles = makeResetStyles({
+    display: 'flex',
+    marginLeft: 'auto',
+    alignItems: 'center',
+    zIndex: 0,
+    gridArea: 'aside',
+    padding: `0 ${tokens.spacingHorizontalM}`,
+    gap: tokens.spacingHorizontalXS
+});
+/**
+ * Styles for the expand icon slot
+ */ const useExpandIconBaseStyles = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '24px',
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground3,
+    gridArea: 'expandIcon',
+    flex: `0 0 auto`,
+    padding: `${tokens.spacingVerticalXS} 0`
+});
+/**
+ * Apply styling to the TreeItemPersonaLayout slots based on the state
+ */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyles = useRootBaseStyles();
+    const rootStyles = useRootStyles();
+    const mediaBaseStyles = useMediaBaseStyles();
+    const descriptionBaseStyles = useDescriptionBaseStyles();
+    const actionsBaseStyles = useActionsBaseStyles();
+    const asideBaseStyles = useAsideBaseStyles();
+    const expandIconBaseStyles = useExpandIconBaseStyles();
+    const mainBaseStyles = useMainBaseStyles();
+    const mainStyles = useMainStyles();
+    const size = useTreeContext_unstable((ctx)=>ctx.size);
+    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);
+    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);
+    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);
+    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
+    if (state.main) {
+        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
+    }
+    if (state.description) {
+        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
+    }
+    if (state.actions) {
+        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
+    }
+    if (state.aside) {
+        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
+    }
+    if (state.expandIcon) {
+        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
+    }
+    if (state.selector) {
+        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
+    }
+    return state;
+};