@fluentui/react-tree 9.0.0-beta.12 → 9.0.0-beta.13

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (props, ref) => {\n  const {\n    iconAfter,\n    iconBefore,\n    aside,\n    as = 'span'\n  } = props;\n  const treeItemContext = useTreeItemContext_unstable();\n  return {\n    ...treeItemContext,\n    components: {\n      root: 'span',\n      iconBefore: 'span',\n      iconAfter: 'span',\n      aside: 'span'\n    },\n    root: getNativeElementProps(as, {\n      ...props,\n      ref\n    }),\n    iconBefore: resolveShorthand(iconBefore, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    iconAfter: resolveShorthand(iconAfter, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    aside: resolveShorthand(aside, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    })\n  };\n};\n//# sourceMappingURL=useTreeItemLayout.js.map"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","useTreeItemContext_unstable","components","root","getNativeElementProps","resolveShorthand","defaultProps"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;gCACiC;iCACZ;AAUrC,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAM,EACJC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,IAAK,OAAM,EACZ,GAAGL;IACJ,MAAMM,kBAAkBC,IAAAA,4CAA2B;IACnD,OAAO;QACL,GAAGD,eAAe;QAClBE,YAAY;YACVC,MAAM;YACNN,YAAY;YACZD,WAAW;YACXE,OAAO;QACT;QACAK,MAAMC,IAAAA,qCAAqB,EAACL,IAAI;YAC9B,GAAGL,KAAK;YACRC;QACF;QACAE,YAAYQ,IAAAA,gCAAgB,EAACR,YAAY;YACvCS,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAV,WAAWS,IAAAA,gCAAgB,EAACT,WAAW;YACrCU,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAR,OAAOO,IAAAA,gCAAgB,EAACP,OAAO;YAC7BQ,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;IACF;AACF,GACA,6CAA6C"}
+{"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (props, ref) => {\n  const {\n    iconAfter,\n    iconBefore,\n    expandIcon,\n    as = 'span'\n  } = props;\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div'\n    },\n    root: getNativeElementProps(as, {\n      ...props,\n      ref: useMergedRefs(ref, layoutRef)\n    }),\n    iconBefore: resolveShorthand(iconBefore, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    iconAfter: resolveShorthand(iconAfter, {\n      defaultProps: {\n        'aria-hidden': true\n      }\n    }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: /*#__PURE__*/React.createElement(TreeItemChevron, null),\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n      }\n    })\n  };\n};\n//# sourceMappingURL=useTreeItemLayout.js.map"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","useTreeItemContext_unstable","ctx","expandIconRef","isBranch","itemType","components","root","getNativeElementProps","useMergedRefs","resolveShorthand","defaultProps","required","children","React","createElement","TreeItemChevron","isResolvedShorthand","undefined"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACqE;iCAChD;iCACZ;AAUzB,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAM,EACJC,UAAS,EACTC,WAAU,EACVC,WAAU,EACVC,IAAK,OAAM,EACZ,GAAGL;IACJ,MAAMM,YAAYC,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBF,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,WAAWH,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIG,QAAQ,KAAK;IACrE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNT,YAAY;YACZD,YAAY;YACZD,WAAW;QACb;QACAW,MAAMC,IAAAA,qCAAqB,EAACT,IAAI;YAC9B,GAAGL,KAAK;YACRC,KAAKc,IAAAA,6BAAa,EAACd,KAAKK;QAC1B;QACAH,YAAYa,IAAAA,gCAAgB,EAACb,YAAY;YACvCc,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAf,WAAWc,IAAAA,gCAAgB,EAACd,WAAW;YACrCe,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAb,YAAYY,IAAAA,gCAAgB,EAACZ,YAAY;YACvCc,UAAUR;YACVO,cAAc;gBACZE,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;gBAChE,eAAe,IAAI;gBACnBrB,KAAKc,IAAAA,6BAAa,EAACQ,IAAAA,mCAAmB,EAACnB,cAAcA,WAAWH,GAAG,GAAGuB,SAAS,EAAEf;YACnF;QACF;IACF;AACF,GACA,6CAA6C"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    treeItemLayoutClassNames: ()=>treeItemLayoutClassNames,
+    useTreeItemLayoutStyles_unstable: ()=>useTreeItemLayoutStyles_unstable
+});
+const _react = require("@griffel/react");
+const _treeContext = require("../../contexts/treeContext");
+const _treeItemContext = require("../../contexts/treeItemContext");
+const treeItemLayoutClassNames = {
+    root: 'fui-TreeItemLayout',
+    expandIcon: 'fui-TreeItemLayout__expandIcon',
+    iconBefore: 'fui-TreeItemLayout__iconBefore',
+    iconAfter: 'fui-TreeItemLayout__iconAfter'
+};
+/**
+ * Styles for the root slot
+ */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        sshi5w: "f1nxs5xn",
+        B7ck84d: "f1ewtqcl",
+        Ijaq50: "f15ws6j",
+        Br312pm: "f135tdbu",
+        nk6f5a: "f2e2169",
+        Bw0ie65: "f4rqp6x",
+        Bbmb7ep: [
+            "f1aa9q02",
+            "f16jpd5f"
+        ],
+        Beyfa6y: [
+            "f16jpd5f",
+            "f1aa9q02"
+        ],
+        B7oj6ja: [
+            "f1jar5jt",
+            "fyu767a"
+        ],
+        Btl43ni: [
+            "fyu767a",
+            "f1jar5jt"
+        ],
+        lj723h: "flvvhsy",
+        ecr2s2: "f1wfn5kd",
+        qya0sb: "f1ih54s9",
+        Bi91k9c: "fnwyq0v",
+        Jwef8y: "f1t94bn6",
+        Becwuud: "f1jk1nfw"
+    },
+    leaf: {
+        uwmqm3: [
+            "f1k1erfc",
+            "faevyjx"
+        ]
+    },
+    branch: {
+        uwmqm3: [
+            "fo100m9",
+            "f6yw3pu"
+        ]
+    },
+    medium: {
+        i8kkvl: "f1rjii52",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi"
+    },
+    small: {
+        i8kkvl: "f1ufnopg",
+        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: [
+        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".f1nxs5xn{min-height:32px;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f15ws6j{grid-row-start:layout;}",
+        ".f135tdbu{grid-column-start:layout;}",
+        ".f2e2169{grid-row-end:layout;}",
+        ".f4rqp6x{grid-column-end:layout;}",
+        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
+        ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".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));}",
+        ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}",
+        ".f1pha7fy{min-height:24px;}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
+    ],
+    a: [
+        ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}",
+        ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}",
+        ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}",
+        ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}",
+        ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"
+    ],
+    h: [
+        ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
+        ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
+        ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}",
+        ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}",
+        ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"
+    ]
+});
+/**
+ * Styles for the expand icon slot
+ */ const useExpandIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        Brf1p80: "f4d9j23",
+        Bf4jedk: "f17fgpbq",
+        B7ck84d: "f1ewtqcl",
+        sj55zd: "f11d4kpn",
+        Bh6795r: "f1jhi6b8",
+        Bnnss6s: "fi64zpg",
+        xawz: "f1rmlqtg",
+        z8tnut: "f1ywm7hm",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f14wxoun",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
+    }
+}, {
+    d: [
+        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}",
+        ".f17fgpbq{min-width:24px;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}",
+        ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
+        ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"
+    ]
+});
+/**
+ * Styles for the before/after icon slot
+ */ const useIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        sj55zd: "fkfq4zb",
+        Bg96gwp: "f106mvju",
+        Be2twd7: "f1pp30po"
+    },
+    iconBefore: {},
+    iconAfter: {}
+}, {
+    d: [
+        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f106mvju{line-height:var(--lineHeightBase500);}",
+        ".f1pp30po{font-size:var(--fontSizeBase500);}"
+    ]
+});
+const useTreeItemLayoutStyles_unstable = (state)=>{
+    const { iconAfter , iconBefore , expandIcon , root  } = state;
+    const rootStyles = useRootStyles();
+    const iconStyles = useIconStyles();
+    const expandIconStyles = useExpandIconStyles();
+    const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
+    const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
+    const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
+    root.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+    if (expandIcon) {
+        expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
+    }
+    if (iconBefore) {
+        iconBefore.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);
+    }
+    if (iconAfter) {
+        iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);
+    }
+    return state;
+}; //# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map
+
+//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n  root: 'fui-TreeItemLayout',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  iconAfter: 'fui-TreeItemLayout__iconAfter'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    sshi5w: \"f1nxs5xn\",\n    B7ck84d: \"f1ewtqcl\",\n    Ijaq50: \"f15ws6j\",\n    Br312pm: \"f135tdbu\",\n    nk6f5a: \"f2e2169\",\n    Bw0ie65: \"f4rqp6x\",\n    Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n    Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n    B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n    Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n    lj723h: \"flvvhsy\",\n    ecr2s2: \"f1wfn5kd\",\n    qya0sb: \"f1ih54s9\",\n    Bi91k9c: \"fnwyq0v\",\n    Jwef8y: \"f1t94bn6\",\n    Becwuud: \"f1jk1nfw\"\n  },\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  },\n  medium: {\n    i8kkvl: \"f1rjii52\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\n    i8kkvl: \"f1ufnopg\",\n    sshi5w: \"f1pha7fy\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  },\n  subtle: {},\n  \"subtle-alpha\": {\n    Jwef8y: \"f146ro5n\",\n    ecr2s2: \"fkam630\"\n  },\n  transparent: {\n    De3pzq: \"f1c21dwh\",\n    Jwef8y: \"fjxutwb\",\n    ecr2s2: \"fophhak\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1nxs5xn{min-height:32px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f15ws6j{grid-row-start:layout;}\", \".f135tdbu{grid-column-start:layout;}\", \".f2e2169{grid-row-end:layout;}\", \".f4rqp6x{grid-column-end:layout;}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".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));}\", \".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f1pha7fy{min-height:24px;}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\"],\n  a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}\", \".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\"],\n  h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\", \".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}\", \".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bf4jedk: \"f17fgpbq\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f11d4kpn\",\n    Bh6795r: \"f1jhi6b8\",\n    Bnnss6s: \"fi64zpg\",\n    xawz: \"f1rmlqtg\",\n    z8tnut: \"f1ywm7hm\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f14wxoun\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    sj55zd: \"fkfq4zb\",\n    Bg96gwp: \"f106mvju\",\n    Be2twd7: \"f1pp30po\"\n  },\n  iconBefore: {},\n  iconAfter: {}\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n  const {\n    iconAfter,\n    iconBefore,\n    expandIcon,\n    root\n  } = state;\n  const rootStyles = useRootStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n  }\n  if (iconBefore) {\n    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);\n  }\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","expandIcon","iconBefore","iconAfter","useRootStyles","__styles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","z8tnut","z189sj","Byoj8tv","useIconStyles","state","rootStyles","iconStyles","expandIconStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":"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"}

package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js

@@ -10,11 +10,11 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
 const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
-const _useTreeItemPersonaLayoutStyles = require("./useTreeItemPersonaLayoutStyles");
+const _useTreeItemPersonaLayoutStylesStyles = require("./useTreeItemPersonaLayoutStyles.styles");
 const _useTreeItemPersonaLayoutContextValues = require("./useTreeItemPersonaLayoutContextValues");
 const TreeItemPersonaLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable)(props, ref);
-    (0, _useTreeItemPersonaLayoutStyles.useTreeItemPersonaLayoutStyles_unstable)(state);
+    (0, _useTreeItemPersonaLayoutStylesStyles.useTreeItemPersonaLayoutStyles_unstable)(state);
     const contextValues = (0, _useTreeItemPersonaLayoutContextValues.useTreeItemPersonaLayoutContextValues_unstable)(state);
     return (0, _renderTreeItemPersonaLayout.renderTreeItemPersonaLayout_unstable)(state, contextValues);
 });

package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n//# sourceMappingURL=TreeItemPersonaLayout.js.map"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;0CAC2B;6CACG;gDACG;uDACO;AAMxD,MAAMA,wBAAwB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,uEAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACrD;AACAR,sBAAsBW,WAAW,GAAG,yBACpC,iDAAiD"}
+{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n//# sourceMappingURL=TreeItemPersonaLayout.js.map"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;0CAC2B;6CACG;sDACG;uDACO;AAMxD,MAAMA,wBAAwB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,6EAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACrD;AACAR,sBAAsBW,WAAW,GAAG,yBACpC,iDAAiD"}

package/lib-commonjs/components/TreeItemPersonaLayout/index.js

@@ -7,7 +7,7 @@ _exportStar(require("./TreeItemPersonaLayout"), exports);
 _exportStar(require("./TreeItemPersonaLayout.types"), exports);
 _exportStar(require("./renderTreeItemPersonaLayout"), exports);
 _exportStar(require("./useTreeItemPersonaLayout"), exports);
-_exportStar(require("./useTreeItemPersonaLayoutStyles"), exports);
+_exportStar(require("./useTreeItemPersonaLayoutStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/index.js"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/index.js"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -10,11 +10,10 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _reactAvatar = require("@fluentui/react-avatar");
 const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
-    const { isActionsVisible  } = state;
     const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.media && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactAvatar.AvatarContextProvider, {
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactAvatar.AvatarContextProvider, {
         value: contextValues.avatar
-    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.media, slotProps.media)), slots.content && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, slots.main && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.main, slotProps.main), slots.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.description, slotProps.description)), !isActionsVisible && slots.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.aside, slotProps.aside));
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.media, slotProps.media)), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.main, slotProps.main), slots.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.description, slotProps.description)));
 }; //# sourceMappingURL=renderTreeItemPersonaLayout.js.map
 
 //# sourceMappingURL=renderTreeItemPersonaLayout.js.map

package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (state, contextValues) => {\n  const {\n    isActionsVisible\n  } = state;\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.media && /*#__PURE__*/createElement(AvatarContextProvider, {\n    value: contextValues.avatar\n  }, /*#__PURE__*/createElement(slots.media, slotProps.media)), slots.content && /*#__PURE__*/createElement(slots.content, slotProps.content, slots.main && /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)), !isActionsVisible && slots.aside && /*#__PURE__*/createElement(slots.aside, slotProps.aside));\n};\n//# sourceMappingURL=renderTreeItemPersonaLayout.js.map"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","isActionsVisible","slots","slotProps","getSlotsNext","createElement","root","media","AvatarContextProvider","value","avatar","content","main","description","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMrCA;;aAAAA;;iCANqE;gCACrD;6BACS;AAI/B,MAAMA,uCAAuC,CAACC,OAAOC,gBAAkB;IAC5E,MAAM,EACJC,iBAAgB,EACjB,GAAGF;IACJ,MAAM,EACJG,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACL;IACjB,OAAO,WAAW,GAAEM,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,KAAK,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACG,kCAAqB,EAAE;QAC7HC,OAAOT,cAAcU,MAAM;IAC7B,GAAG,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMK,KAAK,EAAEJ,UAAUI,KAAK,IAAIL,MAAMS,OAAO,IAAI,WAAW,GAAEN,IAAAA,8BAAa,EAACH,MAAMS,OAAO,EAAER,UAAUQ,OAAO,EAAET,MAAMU,IAAI,IAAI,WAAW,GAAEP,IAAAA,8BAAa,EAACH,MAAMU,IAAI,EAAET,UAAUS,IAAI,GAAGV,MAAMW,WAAW,IAAI,WAAW,GAAER,IAAAA,8BAAa,EAACH,MAAMW,WAAW,EAAEV,UAAUU,WAAW,IAAI,CAACZ,oBAAoBC,MAAMY,KAAK,IAAI,WAAW,GAAET,IAAAA,8BAAa,EAACH,MAAMY,KAAK,EAAEX,UAAUW,KAAK;AAC3Y,GACA,uDAAuD"}
+{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlotsNext(state);\n  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/createElement(AvatarContextProvider, {\n    value: contextValues.avatar\n  }, /*#__PURE__*/createElement(slots.media, slotProps.media)), /*#__PURE__*/createElement(slots.content, slotProps.content, /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)));\n};\n//# sourceMappingURL=renderTreeItemPersonaLayout.js.map"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","expandIcon","AvatarContextProvider","value","avatar","media","content","main","description"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMrCA;;aAAAA;;iCANqE;gCACrD;6BACS;AAI/B,MAAMA,uCAAuC,CAACC,OAAOC,gBAAkB;IAC5E,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAG,WAAW,GAAEF,IAAAA,8BAAa,EAACG,kCAAqB,EAAE;QACtMC,OAAOR,cAAcS,MAAM;IAC7B,GAAG,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMS,KAAK,EAAER,UAAUQ,KAAK,IAAI,WAAW,GAAEN,IAAAA,8BAAa,EAACH,MAAMU,OAAO,EAAET,UAAUS,OAAO,EAAE,WAAW,GAAEP,IAAAA,8BAAa,EAACH,MAAMW,IAAI,EAAEV,UAAUU,IAAI,GAAGX,MAAMY,WAAW,IAAI,WAAW,GAAET,IAAAA,8BAAa,EAACH,MAAMY,WAAW,EAAEX,UAAUW,WAAW;AAC7Q,GACA,uDAAuD"}

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -11,25 +11,26 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
 const _contexts = require("../../contexts");
 const _tokens = require("../../utils/tokens");
+const _useTreeItemLayout = require("../TreeItemLayout/useTreeItemLayout");
 const useTreeItemPersonaLayout_unstable = (props, ref)=>{
-    const { media , content , children , main , description , aside , as ='span'  } = props;
+    const { media , content , children , main , description  } = props;
+    const treeItemLayoutState = (0, _useTreeItemLayout.useTreeItemLayout_unstable)({
+        ...props,
+        iconBefore: null,
+        iconAfter: null
+    }, ref);
     const size = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.size);
-    const { isActionsVisible  } = (0, _contexts.useTreeItemContext_unstable)();
     return {
+        ...treeItemLayoutState,
         components: {
+            expandIcon: 'div',
             content: 'div',
-            main: 'span',
-            description: 'span',
-            root: 'span',
-            media: 'span',
-            aside: 'span'
+            main: 'div',
+            description: 'div',
+            root: 'div',
+            media: 'div'
         },
-        isActionsVisible,
         avatarSize: _tokens.treeAvatarSize[size],
-        root: (0, _reactUtilities.getNativeElementProps)(as, {
-            ...props,
-            ref
-        }),
         main: (0, _reactUtilities.resolveShorthand)(main, {
             required: true,
             defaultProps: {
@@ -42,8 +43,7 @@ const useTreeItemPersonaLayout_unstable = (props, ref)=>{
         content: (0, _reactUtilities.resolveShorthand)(content, {
             required: true
         }),
-        description: (0, _reactUtilities.resolveShorthand)(description),
-        aside: (0, _reactUtilities.resolveShorthand)(aside)
+        description: (0, _reactUtilities.resolveShorthand)(description)
     };
 }; //# sourceMappingURL=useTreeItemPersonaLayout.js.map
 

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\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 = (props, ref) => {\n  const {\n    media,\n    content,\n    children,\n    main,\n    description,\n    aside,\n    as = 'span'\n  } = props;\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const {\n    isActionsVisible\n  } = useTreeItemContext_unstable();\n  return {\n    components: {\n      content: 'div',\n      main: 'span',\n      description: 'span',\n      root: 'span',\n      media: 'span',\n      aside: 'span'\n    },\n    isActionsVisible,\n    avatarSize: treeAvatarSize[size],\n    root: getNativeElementProps(as, {\n      ...props,\n      ref\n    }),\n    main: resolveShorthand(main, {\n      required: true,\n      defaultProps: {\n        children\n      }\n    }),\n    media: resolveShorthand(media, {\n      required: true\n    }),\n    content: resolveShorthand(content, {\n      required: true\n    }),\n    description: resolveShorthand(description),\n    aside: resolveShorthand(aside)\n  };\n};\n//# sourceMappingURL=useTreeItemPersonaLayout.js.map"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","aside","as","size","useTreeContext_unstable","ctx","isActionsVisible","useTreeItemContext_unstable","components","root","avatarSize","treeAvatarSize","getNativeElementProps","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACiC;0BACa;wBACtC;AAUxB,MAAMA,oCAAoC,CAACC,OAAOC,MAAQ;IAC/D,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,YAAW,EACXC,MAAK,EACLC,IAAK,OAAM,EACZ,GAAGR;IACJ,MAAMS,OAAOC,IAAAA,iCAAuB,EAACC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,MAAM,EACJG,iBAAgB,EACjB,GAAGC,IAAAA,qCAA2B;IAC/B,OAAO;QACLC,YAAY;YACVX,SAAS;YACTE,MAAM;YACNC,aAAa;YACbS,MAAM;YACNb,OAAO;YACPK,OAAO;QACT;QACAK;QACAI,YAAYC,sBAAc,CAACR,KAAK;QAChCM,MAAMG,IAAAA,qCAAqB,EAACV,IAAI;YAC9B,GAAGR,KAAK;YACRC;QACF;QACAI,MAAMc,IAAAA,gCAAgB,EAACd,MAAM;YAC3Be,UAAU,IAAI;YACdC,cAAc;gBACZjB;YACF;QACF;QACAF,OAAOiB,IAAAA,gCAAgB,EAACjB,OAAO;YAC7BkB,UAAU,IAAI;QAChB;QACAjB,SAASgB,IAAAA,gCAAgB,EAAChB,SAAS;YACjCiB,UAAU,IAAI;QAChB;QACAd,aAAaa,IAAAA,gCAAgB,EAACb;QAC9BC,OAAOY,IAAAA,gCAAgB,EAACZ;IAC1B;AACF,GACA,oDAAoD"}
+{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\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 = (props, ref) => {\n  const {\n    media,\n    content,\n    children,\n    main,\n    description\n  } = props;\n  const treeItemLayoutState = useTreeItemLayout_unstable({\n    ...props,\n    iconBefore: null,\n    iconAfter: null\n  }, ref);\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div'\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, {\n      required: true,\n      defaultProps: {\n        children\n      }\n    }),\n    media: resolveShorthand(media, {\n      required: true\n    }),\n    content: resolveShorthand(content, {\n      required: true\n    }),\n    description: resolveShorthand(description)\n  };\n};\n//# sourceMappingURL=useTreeItemPersonaLayout.js.map"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","treeItemLayoutState","useTreeItemLayout_unstable","iconBefore","iconAfter","size","useTreeContext_unstable","ctx","components","expandIcon","root","avatarSize","treeAvatarSize","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;gCACU;0BACO;wBACT;mCACY;AAUpC,MAAMA,oCAAoC,CAACC,OAAOC,MAAQ;IAC/D,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,YAAW,EACZ,GAAGN;IACJ,MAAMO,sBAAsBC,IAAAA,6CAA0B,EAAC;QACrD,GAAGR,KAAK;QACRS,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GAAGT;IACH,MAAMU,OAAOC,IAAAA,iCAAuB,EAACC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,OAAO;QACL,GAAGJ,mBAAmB;QACtBO,YAAY;YACVC,YAAY;YACZZ,SAAS;YACTE,MAAM;YACNC,aAAa;YACbU,MAAM;YACNd,OAAO;QACT;QACAe,YAAYC,sBAAc,CAACP,KAAK;QAChCN,MAAMc,IAAAA,gCAAgB,EAACd,MAAM;YAC3Be,UAAU,IAAI;YACdC,cAAc;gBACZjB;YACF;QACF;QACAF,OAAOiB,IAAAA,gCAAgB,EAACjB,OAAO;YAC7BkB,UAAU,IAAI;QAChB;QACAjB,SAASgB,IAAAA,gCAAgB,EAAChB,SAAS;YACjCiB,UAAU,IAAI;QAChB;QACAd,aAAaa,IAAAA,gCAAgB,EAACb;IAChC;AACF,GACA,oDAAoD"}

package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.js → useTreeItemPersonaLayoutStyles.styles.js}

@@ -13,35 +13,74 @@ _export(exports, {
     useTreeItemPersonaLayoutStyles_unstable: ()=>useTreeItemPersonaLayoutStyles_unstable
 });
 const _react = require("@griffel/react");
+const _treeItemContext = require("../../contexts/treeItemContext");
 const treeItemPersonaLayoutClassNames = {
     root: 'fui-TreeItemPersonaLayout',
+    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
     media: 'fui-TreeItemPersonaLayout__media',
     content: 'fui-TreeItemPersonaLayout__content',
     description: 'fui-TreeItemPersonaLayout__description',
-    aside: 'fui-TreeItemPersonaLayout__aside',
     main: 'fui-TreeItemPersonaLayout__main'
 };
 /**
  * Styles for the root slot
  */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
     base: {
-        a9b677: "fly5x3f",
         mc9l5x: "f22iagw",
         Bt984gj: "f122n59",
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
         Bhrd7zp: "figsok6",
-        Bg96gwp: "f1i3iumi"
+        Bg96gwp: "f1i3iumi",
+        Ijaq50: "f15ws6j",
+        Br312pm: "f135tdbu",
+        nk6f5a: "f2e2169",
+        Bw0ie65: "f4rqp6x",
+        lj723h: "flvvhsy",
+        ecr2s2: "f1wfn5kd",
+        zt0xaq: "f5na5aj",
+        Bi91k9c: "fnwyq0v",
+        Jwef8y: "f1t94bn6",
+        tbva4x: "f1oboesa"
+    },
+    leaf: {
+        uwmqm3: [
+            "f1k1erfc",
+            "faevyjx"
+        ]
+    },
+    branch: {
+        uwmqm3: [
+            "fo100m9",
+            "f6yw3pu"
+        ]
     }
 }, {
     d: [
-        ".fly5x3f{width:100%;}",
         ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
         ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fkhj508{font-size:var(--fontSizeBase300);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
-        ".f1i3iumi{line-height:var(--lineHeightBase300);}"
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f15ws6j{grid-row-start:layout;}",
+        ".f135tdbu{grid-column-start:layout;}",
+        ".f2e2169{grid-row-end:layout;}",
+        ".f4rqp6x{grid-column-end:layout;}",
+        ".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));}"
+    ],
+    a: [
+        ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}",
+        ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}",
+        ".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"
+    ],
+    h: [
+        ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
+        ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
+        ".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"
     ]
 });
 /**
@@ -125,31 +164,45 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".fwrc4pm{line-height:var(--lineHeightBase200);}"
     ]
 });
-const useAsideStyles = /*#__PURE__*/ (0, _react["__styles"])({
+/**
+ * Styles for the expand icon slot
+ */ const useExpandIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
     base: {
         mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        Huce71: "fz5stix",
+        Bt984gj: "f122n59",
+        Brf1p80: "f4d9j23",
+        Bf4jedk: "f17fgpbq",
+        B7ck84d: "f1ewtqcl",
+        sj55zd: "f11d4kpn",
+        Bh6795r: "f1jhi6b8",
+        Bnnss6s: "fi64zpg",
+        xawz: "f1rmlqtg",
+        z8tnut: "f1ywm7hm",
         z189sj: [
-            "fw5db7e",
-            "f1uw59to"
+            "fhxju0i",
+            "f1cnd47f"
         ],
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fy9rknc",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "fwrc4pm"
+        Byoj8tv: "f14wxoun",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
     }
 }, {
     d: [
         ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
-        ".fz5stix{white-space:nowrap;}",
-        ".fw5db7e{padding-right:var(--spacingHorizontalM);}",
-        ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
-        ".fk6fouc{font-family:var(--fontFamilyBase);}",
-        ".fy9rknc{font-size:var(--fontSizeBase200);}",
-        ".figsok6{font-weight:var(--fontWeightRegular);}",
-        ".fwrc4pm{line-height:var(--lineHeightBase200);}"
+        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}",
+        ".f17fgpbq{min-width:24px;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}",
+        ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
+        ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"
     ]
 });
 const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
@@ -157,8 +210,9 @@ const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
     const mediaStyles = useMediaStyles();
     const contentStyles = useContentStyles();
     const descriptionStyles = useDescriptionStyles();
-    const asideStyles = useAsideStyles();
-    state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
+    const expandIconStyles = useExpandIconStyles();
+    const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
+    state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
     state.media.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
     if (state.content) {
         state.content.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
@@ -169,10 +223,10 @@ const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
     if (state.description) {
         state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
     }
-    if (state.aside) {
-        state.aside.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+    if (state.expandIcon) {
+        state.expandIcon.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
     }
     return state;
-}; //# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
+}; //# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map
 
-//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
+//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  media: 'fui-TreeItemPersonaLayout__media',\n  content: 'fui-TreeItemPersonaLayout__content',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Ijaq50: \"f15ws6j\",\n    Br312pm: \"f135tdbu\",\n    nk6f5a: \"f2e2169\",\n    Bw0ie65: \"f4rqp6x\",\n    lj723h: \"flvvhsy\",\n    ecr2s2: \"f1wfn5kd\",\n    zt0xaq: \"f5na5aj\",\n    Bi91k9c: \"fnwyq0v\",\n    Jwef8y: \"f1t94bn6\",\n    tbva4x: \"f1oboesa\"\n  },\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f15ws6j{grid-row-start:layout;}\", \".f135tdbu{grid-column-start:layout;}\", \".f2e2169{grid-row-end:layout;}\", \".f4rqp6x{grid-column-end:layout;}\", \".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));}\"],\n  a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\"],\n  h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    a9b677: \"f1szoe96\",\n    Bqenvij: \"f1d2rq10\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1szoe96{width:32px;}\", \".f1d2rq10{height:32px;}\", \".f1g0x7ka{padding-top:0;}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f1qch9an{padding-bottom:0;}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\nconst useContentStyles = /*#__PURE__*/__styles({\n  base: {\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    i8kkvl: \"f1fps8zv\",\n    Belr9w4: \"fws515f\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}\", \".fws515f{row-gap:var(--spacingHorizontalNone);}\"]\n});\nconst useDescriptionStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bf4jedk: \"f17fgpbq\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f11d4kpn\",\n    Bh6795r: \"f1jhi6b8\",\n    Bnnss6s: \"fi64zpg\",\n    xawz: \"f1rmlqtg\",\n    z8tnut: \"f1ywm7hm\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f14wxoun\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const contentStyles = useContentStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const expandIconStyles = useExpandIconStyles();\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n  if (state.content) {\n    state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);\n  }\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","expandIcon","media","content","description","main","useRootStyles","__styles","base","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","expandIconStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}