@fluentui/react-tree 9.0.0-beta.30 → 9.0.0-beta.31

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

@@ -33,15 +33,15 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const selectionRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.selectionRef);
     const expandIconRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
     const actionsRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef);
-    var _ctx_checked;
-    const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>(_ctx_checked = ctx.checked) !== null && _ctx_checked !== void 0 ? _ctx_checked : false);
+    const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.checked);
     const isBranch = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
-    const expandIcon = (0, _reactUtilities.resolveShorthand)(props.expandIcon, {
-        required: isBranch,
+    const expandIcon = _reactUtilities.slot.optional(props.expandIcon, {
+        renderByDefault: isBranch,
         defaultProps: {
             children: /*#__PURE__*/ _react.createElement(_treeItemChevron.TreeItemChevron, null),
             'aria-hidden': true
-        }
+        },
+        elementType: 'div'
     });
     const expandIconRefs = (0, _reactUtilities.useMergedRefs)(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
     if (expandIcon) {
@@ -51,11 +51,12 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         circular: true,
         axis: 'horizontal'
     });
-    const actions = isActionsVisible ? (0, _reactUtilities.resolveShorthand)(actionsShorthand, {
+    const actions = isActionsVisible ? _reactUtilities.slot.optional(actionsShorthand, {
         defaultProps: {
             ...arrowNavigationProps,
             role: 'toolbar'
-        }
+        },
+        elementType: 'div'
     }) : undefined;
     const actionsRefs = (0, _reactUtilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
     if (actions) {
@@ -76,34 +77,41 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         buttonContextValue: {
             size: 'small'
         },
-        root: (0, _reactUtilities.getNativeElementProps)(as, {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)(as, {
             ...props,
             ref: (0, _reactUtilities.useMergedRefs)(ref, layoutRef)
+        }), {
+            elementType: 'div'
         }),
-        iconBefore: (0, _reactUtilities.resolveShorthand)(iconBefore, {
+        iconBefore: _reactUtilities.slot.optional(iconBefore, {
             defaultProps: {
                 'aria-hidden': true
-            }
+            },
+            elementType: 'div'
         }),
-        main: (0, _reactUtilities.resolveShorthand)(main, {
-            required: true
+        main: _reactUtilities.slot.always(main, {
+            elementType: 'div'
         }),
-        iconAfter: (0, _reactUtilities.resolveShorthand)(iconAfter, {
+        iconAfter: _reactUtilities.slot.optional(iconAfter, {
             defaultProps: {
                 'aria-hidden': true
-            }
+            },
+            elementType: 'div'
         }),
-        aside: isAsideVisible ? (0, _reactUtilities.resolveShorthand)(props.aside) : undefined,
+        aside: isAsideVisible ? _reactUtilities.slot.optional(props.aside, {
+            elementType: 'div'
+        }) : undefined,
         actions,
         expandIcon,
-        selector: (0, _reactUtilities.resolveShorthand)(props.selector, {
-            required: selectionMode !== 'none',
+        selector: _reactUtilities.slot.optional(props.selector, {
+            renderByDefault: selectionMode !== 'none',
             defaultProps: {
                 checked,
                 tabIndex: -1,
                 'aria-hidden': true,
                 ref: selectionRef
-            }
+            },
+            elementType: selectionMode === 'multiselect' ? _reactCheckbox.Checkbox : _reactRadio.Radio
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main , iconAfter , iconBefore , as ='span'  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);\n    var _ctx_checked;\n    const checked = useTreeItemContext_unstable((ctx)=>(_ctx_checked = ctx.checked) !== null && _ctx_checked !== void 0 ? _ctx_checked : false);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const expandIcon = resolveShorthand(props.expandIcon, {\n        required: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        }\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? resolveShorthand(actionsShorthand, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        }\n    }) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);\n    if (actions) {\n        actions.ref = actionsRefs;\n    }\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            main: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div',\n            // Casting here to a union between checkbox and radio\n            selector: selectionMode === 'multiselect' ? Checkbox : Radio\n        },\n        buttonContextValue: {\n            size: 'small'\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        main: resolveShorthand(main, {\n            required: true\n        }),\n        iconAfter: resolveShorthand(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            }\n        }),\n        aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n        actions,\n        expandIcon,\n        selector: resolveShorthand(props.selector, {\n            required: selectionMode !== 'none',\n            defaultProps: {\n                checked,\n                tabIndex: -1,\n                'aria-hidden': true,\n                ref: selectionRef\n            }\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","as","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","_ctx_checked","checked","isBranch","itemType","expandIcon","resolveShorthand","required","defaultProps","children","React","createElement","TreeItemChevron","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","getNativeElementProps","tabIndex"],"mappings":";;;;+BAeiBA;;aAAAA;;;6DAfM;gCACqE;0BACvB;+BAC5C;4BACH;iCACU;8BACQ;AAS7B,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,KAAI,EAAGC,UAAS,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAG,GAAGL;IACxD,MAAMM,YAAYC,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBC,IAAAA,iCAAuB,EAAC,CAACF,MAAMA,IAAIC,aAAa;IACtE,MAAM,CAACE,0BAA0BC,iBAAiB,GAAGC,IAAAA,mCAAmB,EAACb,MAAMc,OAAO,IAAI;QACtFd,MAAMc,OAAO,CAACC,OAAO;QACrB;YACI,GAAGf,MAAMc,OAAO;YAChBC,SAASC;QACb;KACH,GAAG;QACAA;QACAhB,MAAMc,OAAO;KAChB;IACD,MAAMG,mBAAmBV,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIS,gBAAgB,KAAKN;IACrF,MAAMO,iBAAiBX,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIU,cAAc;IAC5E,MAAMC,eAAeZ,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIW,YAAY;IACxE,MAAMC,gBAAgBb,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIY,aAAa;IAC1E,MAAMC,aAAad,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIa,UAAU;IACpE,IAAIC;IACJ,MAAMC,UAAUhB,IAAAA,qCAA2B,EAAC,CAACC,MAAM,AAACc,CAAAA,eAAed,IAAIe,OAAO,AAAD,MAAO,IAAI,IAAID,iBAAiB,KAAK,IAAIA,eAAe,KAAK;IAC1I,MAAME,WAAWjB,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIiB,QAAQ,KAAK;IACrE,MAAMC,aAAaC,IAAAA,gCAAgB,EAAC3B,MAAM0B,UAAU,EAAE;QAClDE,UAAUJ;QACVK,cAAc;YACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;YACjE,eAAe,IAAI;QACvB;IACJ;IACA,MAAMC,iBAAiBC,IAAAA,6BAAa,EAACT,eAAe,IAAI,IAAIA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWzB,GAAG,EAAEmB;IAC7G,IAAIM,YAAY;QACZA,WAAWzB,GAAG,GAAGiC;IACrB,CAAC;IACD,MAAME,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU,IAAI;QACdC,MAAM;IACV;IACA,MAAMzB,UAAUG,mBAAmBU,IAAAA,gCAAgB,EAACf,kBAAkB;QAClEiB,cAAc;YACV,GAAGO,oBAAoB;YACvBI,MAAM;QACV;IACJ,KAAKxB,SAAS;IACd,MAAMyB,cAAcN,IAAAA,6BAAa,EAACrB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQb,GAAG,EAAEoB;IACjG,IAAIP,SAAS;QACTA,QAAQb,GAAG,GAAGwC;IAClB,CAAC;IACD,OAAO;QACHC,YAAY;YACRC,MAAM;YACNjB,YAAY;YACZtB,YAAY;YACZF,MAAM;YACNC,WAAW;YACXW,SAAS;YACT8B,OAAO;YACP,qDAAqD;YACrDC,UAAUpC,kBAAkB,gBAAgBqC,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,oBAAoB;YAChBC,MAAM;QACV;QACAN,MAAMO,IAAAA,qCAAqB,EAAC7C,IAAI;YAC5B,GAAGL,KAAK;YACRC,KAAKkC,IAAAA,6BAAa,EAAClC,KAAKK;QAC5B;QACAF,YAAYuB,IAAAA,gCAAgB,EAACvB,YAAY;YACrCyB,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACA3B,MAAMyB,IAAAA,gCAAgB,EAACzB,MAAM;YACzB0B,UAAU,IAAI;QAClB;QACAzB,WAAWwB,IAAAA,gCAAgB,EAACxB,WAAW;YACnC0B,cAAc;gBACV,eAAe,IAAI;YACvB;QACJ;QACAe,OAAO1B,iBAAiBS,IAAAA,gCAAgB,EAAC3B,MAAM4C,KAAK,IAAI5B,SAAS;QACjEF;QACAY;QACAmB,UAAUlB,IAAAA,gCAAgB,EAAC3B,MAAM6C,QAAQ,EAAE;YACvCjB,UAAUnB,kBAAkB;YAC5BoB,cAAc;gBACVN;gBACA4B,UAAU,CAAC;gBACX,eAAe,IAAI;gBACnBlD,KAAKkB;YACT;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main , iconAfter , iconBefore , as ='span'  } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;\n    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);\n    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);\n    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);\n    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);\n    const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(actionsShorthand, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);\n    if (actions) {\n        actions.ref = actionsRefs;\n    }\n    return {\n        components: {\n            root: 'div',\n            expandIcon: 'div',\n            iconBefore: 'div',\n            main: 'div',\n            iconAfter: 'div',\n            actions: 'div',\n            aside: 'div',\n            // Casting here to a union between checkbox and radio\n            selector: selectionMode === 'multiselect' ? Checkbox : Radio\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(getNativeElementProps(as, {\n            ...props,\n            ref: useMergedRefs(ref, layoutRef)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: isAsideVisible ? slot.optional(props.aside, {\n            elementType: 'div'\n        }) : undefined,\n        actions,\n        expandIcon,\n        selector: slot.optional(props.selector, {\n            renderByDefault: selectionMode !== 'none',\n            defaultProps: {\n                checked,\n                tabIndex: -1,\n                'aria-hidden': true,\n                ref: selectionRef\n            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","as","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleExternal","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","slot","optional","renderByDefault","defaultProps","children","React","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getNativeElementProps","tabIndex"],"mappings":";;;;+BAeiBA;;aAAAA;;;6DAfM;gCACyD;0BACX;+BAC5C;4BACH;iCACU;8BACQ;AAS7B,MAAMA,6BAA6B,CAACC,OAAOC,MAAM;IACxD,MAAM,EAAEC,KAAI,EAAGC,UAAS,EAAGC,WAAU,EAAGC,IAAI,OAAM,EAAG,GAAGL;IACxD,MAAMM,YAAYC,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBC,IAAAA,iCAAuB,EAAC,CAACF,MAAMA,IAAIC,aAAa;IACtE,MAAM,CAACE,0BAA0BC,iBAAiB,GAAGC,IAAAA,mCAAmB,EAACb,MAAMc,OAAO,IAAI;QACtFd,MAAMc,OAAO,CAACC,OAAO;QACrB;YACI,GAAGf,MAAMc,OAAO;YAChBC,SAASC;QACb;KACH,GAAG;QACAA;QACAhB,MAAMc,OAAO;KAChB;IACD,MAAMG,mBAAmBV,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIS,gBAAgB,KAAKN;IACrF,MAAMO,iBAAiBX,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIU,cAAc;IAC5E,MAAMC,eAAeZ,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIW,YAAY;IACxE,MAAMC,gBAAgBb,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIY,aAAa;IAC1E,MAAMC,aAAad,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIa,UAAU;IACpE,MAAMC,UAAUf,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIc,OAAO;IAC9D,MAAMC,WAAWhB,IAAAA,qCAA2B,EAAC,CAACC,MAAMA,IAAIgB,QAAQ,KAAK;IACrE,MAAMC,aAAaC,oBAAI,CAACC,QAAQ,CAAC3B,MAAMyB,UAAU,EAAE;QAC/CG,iBAAiBL;QACjBM,cAAc;YACVC,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;YACjE,eAAe,IAAI;QACvB;QACAC,aAAa;IACjB;IACA,MAAMC,iBAAiBC,IAAAA,6BAAa,EAACX,eAAe,IAAI,IAAIA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWxB,GAAG,EAAEmB;IAC7G,IAAIK,YAAY;QACZA,WAAWxB,GAAG,GAAGkC;IACrB,CAAC;IACD,MAAME,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU,IAAI;QACdC,MAAM;IACV;IACA,MAAM1B,UAAUG,mBAAmBS,oBAAI,CAACC,QAAQ,CAACf,kBAAkB;QAC/DiB,cAAc;YACV,GAAGQ,oBAAoB;YACvBI,MAAM;QACV;QACAP,aAAa;IACjB,KAAKlB,SAAS;IACd,MAAM0B,cAAcN,IAAAA,6BAAa,EAACtB,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQb,GAAG,EAAEoB;IACjG,IAAIP,SAAS;QACTA,QAAQb,GAAG,GAAGyC;IAClB,CAAC;IACD,OAAO;QACHC,YAAY;YACRC,MAAM;YACNnB,YAAY;YACZrB,YAAY;YACZF,MAAM;YACNC,WAAW;YACXW,SAAS;YACT+B,OAAO;YACP,qDAAqD;YACrDC,UAAUrC,kBAAkB,gBAAgBsC,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,oBAAoB;YAChBC,MAAM;QACV;QACAN,MAAMlB,oBAAI,CAACyB,MAAM,CAACC,IAAAA,qCAAqB,EAAC/C,IAAI;YACxC,GAAGL,KAAK;YACRC,KAAKmC,IAAAA,6BAAa,EAACnC,KAAKK;QAC5B,IAAI;YACA4B,aAAa;QACjB;QACA9B,YAAYsB,oBAAI,CAACC,QAAQ,CAACvB,YAAY;YAClCyB,cAAc;gBACV,eAAe,IAAI;YACvB;YACAK,aAAa;QACjB;QACAhC,MAAMwB,oBAAI,CAACyB,MAAM,CAACjD,MAAM;YACpBgC,aAAa;QACjB;QACA/B,WAAWuB,oBAAI,CAACC,QAAQ,CAACxB,WAAW;YAChC0B,cAAc;gBACV,eAAe,IAAI;YACvB;YACAK,aAAa;QACjB;QACAW,OAAO3B,iBAAiBQ,oBAAI,CAACC,QAAQ,CAAC3B,MAAM6C,KAAK,EAAE;YAC/CX,aAAa;QACjB,KAAKlB,SAAS;QACdF;QACAW;QACAqB,UAAUpB,oBAAI,CAACC,QAAQ,CAAC3B,MAAM8C,QAAQ,EAAE;YACpClB,iBAAiBnB,kBAAkB;YACnCoB,cAAc;gBACVP;gBACA+B,UAAU,CAAC;gBACX,eAAe,IAAI;gBACnBpD,KAAKkB;YACT;YACAe,aAAazB,kBAAkB,gBAAgBsC,uBAAQ,GAAGC,iBAAK;QACnE;IACJ;AACJ"}

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

@@ -97,14 +97,14 @@ const treeItemLayoutClassNames = {
     }
 }, {
     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;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
         ".f1nxs5xn{min-height:32px;}",
         ".f1ewtqcl{box-sizing:border-box;}",
-        ".f15ws6j{-ms-grid-row:layout;grid-row-start:layout;}",
-        ".f135tdbu{-ms-grid-column:layout;grid-column-start:layout;}",
-        ".f2e2169{-ms-grid-row-span:layout;grid-row-end:layout;}",
-        ".f4rqp6x{-ms-grid-column-span:layout;grid-column-end:layout;}",
+        ".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);}",
@@ -165,15 +165,15 @@ const treeItemLayoutClassNames = {
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f22iagw{display:flex;}",
         ".fcgxt0o{margin-left:auto;}",
         ".f1ujusj6{margin-right:auto;}",
         ".f10pi13n{position:relative;}",
         ".f19g0ac{z-index:1;}",
-        ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}",
-        ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}",
-        ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}",
-        ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}",
+        ".fobksn0{grid-row-start:aside;}",
+        ".fmy5l6f{grid-column-start:aside;}",
+        ".fzqypwc{grid-row-end:aside;}",
+        ".f1tmftl3{grid-column-end:aside;}",
         ".f1g0x7ka{padding-top:0;}",
         ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
@@ -210,20 +210,20 @@ const treeItemLayoutClassNames = {
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f22iagw{display:flex;}",
         ".fcgxt0o{margin-left:auto;}",
         ".f1ujusj6{margin-right:auto;}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".f122n59{align-items:center;}",
         ".f11zp4z2{z-index:0;}",
-        ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}",
-        ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}",
-        ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}",
-        ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}",
+        ".fobksn0{grid-row-start:aside;}",
+        ".fmy5l6f{grid-column-start:aside;}",
+        ".fzqypwc{grid-row-end:aside;}",
+        ".f1tmftl3{grid-column-end:aside;}",
         ".f1g0x7ka{padding-top:0;}",
         ".fw5db7e{padding-right:var(--spacingHorizontalM);}",
         ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
         ".f1qch9an{padding-bottom:0;}",
-        ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}",
+        ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
         ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"
     ]
 });
@@ -253,15 +253,15 @@ const treeItemLayoutClassNames = {
     }
 }, {
     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;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f4d9j23{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;}",
+        ".f1jhi6b8{flex-grow:0;}",
+        ".fi64zpg{flex-shrink:0;}",
+        ".f1rmlqtg{flex-basis:auto;}",
         ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
         ".fhxju0i{padding-right:0;}",
         ".f1cnd47f{padding-left:0;}",
@@ -303,8 +303,8 @@ const treeItemLayoutClassNames = {
     }
 }, {
     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;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
         ".fkfq4zb{color:var(--colorNeutralForeground2);}",
         ".f106mvju{line-height:var(--lineHeightBase500);}",
         ".f1pp30po{font-size:var(--fontSizeBase500);}"

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

@@ -1 +1 @@
-{"version":3,"sources":["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  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector'\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    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\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{-ms-grid-row:layout;grid-row-start:layout;}\", \".f135tdbu{-ms-grid-column:layout;grid-column-start:layout;}\", \".f2e2169{-ms-grid-row-span:layout;grid-row-end:layout;}\", \".f4rqp6x{-ms-grid-column-span:layout;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));}\", \".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);}\"],\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 action icon slot\n */\nconst useActionsStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    qhf8xq: \"f10pi13n\",\n    Bj3rh1h: \"f19g0ac\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f10pi13n{position:relative;}\", \".f19g0ac{z-index:1;}\", \".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}\", \".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}\", \".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}\", \".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    Bt984gj: \"f122n59\",\n    Bj3rh1h: \"f11zp4z2\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f11zp4z2{z-index:0;}\", \".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}\", \".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}\", \".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}\", \".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".f1qch9an{padding-bottom:0;}\", \".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\"]\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 content slot\n */\nconst useMainStyles = /*#__PURE__*/__styles({\n  base: {\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"ffczdla\", \"fgiv446\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".f1g0x7ka{padding-top:0;}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".f1qch9an{padding-bottom:0;}\"]\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}, {\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});\nconst useIconBeforeStyles = /*#__PURE__*/__styles({\n  medium: {\n    z189sj: [\"f7x41pl\", \"fruq291\"]\n  },\n  small: {\n    z189sj: [\"ffczdla\", \"fgiv446\"]\n  }\n}, {\n  d: [\".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\"]\n});\nconst useIconAfterStyles = /*#__PURE__*/__styles({\n  medium: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"]\n  },\n  small: {\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n  const {\n    main,\n    iconAfter,\n    iconBefore,\n    expandIcon,\n    root,\n    aside,\n    actions,\n    selector\n  } = state;\n  const rootStyles = useRootStyles();\n  const actionsStyles = useActionsStyles();\n  const asideStyles = useAsideStyles();\n  const mainStyles = useMainStyles();\n  const expandIconStyles = useExpandIconStyles();\n  const iconStyles = useIconStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\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  main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.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, iconBeforeStyles[size], iconBefore.className);\n  }\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n  }\n  if (actions) {\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n  }\n  if (aside) {\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n  }\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n  }\n  if (selector) {\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","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","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useMainStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","state","rootStyles","actionsStyles","asideStyles","mainStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["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  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector'\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    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\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:flex;}\", \".f122n59{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));}\", \".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);}\"],\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 action icon slot\n */\nconst useActionsStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    qhf8xq: \"f10pi13n\",\n    Bj3rh1h: \"f19g0ac\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f10pi13n{position:relative;}\", \".f19g0ac{z-index:1;}\", \".fobksn0{grid-row-start:aside;}\", \".fmy5l6f{grid-column-start:aside;}\", \".fzqypwc{grid-row-end:aside;}\", \".f1tmftl3{grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    Bt984gj: \"f122n59\",\n    Bj3rh1h: \"f11zp4z2\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f122n59{align-items:center;}\", \".f11zp4z2{z-index:0;}\", \".fobksn0{grid-row-start:aside;}\", \".fmy5l6f{grid-column-start:aside;}\", \".fzqypwc{grid-row-end:aside;}\", \".f1tmftl3{grid-column-end:aside;}\", \".f1g0x7ka{padding-top:0;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".f1qch9an{padding-bottom:0;}\", \".f1ufnopg{column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\"]\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:flex;}\", \".f122n59{align-items:center;}\", \".f4d9j23{justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1jhi6b8{flex-grow:0;}\", \".fi64zpg{flex-shrink:0;}\", \".f1rmlqtg{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 content slot\n */\nconst useMainStyles = /*#__PURE__*/__styles({\n  base: {\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"ffczdla\", \"fgiv446\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".f1g0x7ka{padding-top:0;}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".f1qch9an{padding-bottom:0;}\"]\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}, {\n  d: [\".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\", \".fkfq4zb{color:var(--colorNeutralForeground2);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\"]\n});\nconst useIconBeforeStyles = /*#__PURE__*/__styles({\n  medium: {\n    z189sj: [\"f7x41pl\", \"fruq291\"]\n  },\n  small: {\n    z189sj: [\"ffczdla\", \"fgiv446\"]\n  }\n}, {\n  d: [\".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\"]\n});\nconst useIconAfterStyles = /*#__PURE__*/__styles({\n  medium: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"]\n  },\n  small: {\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n  const {\n    main,\n    iconAfter,\n    iconBefore,\n    expandIcon,\n    root,\n    aside,\n    actions,\n    selector\n  } = state;\n  const rootStyles = useRootStyles();\n  const actionsStyles = useActionsStyles();\n  const asideStyles = useAsideStyles();\n  const mainStyles = useMainStyles();\n  const expandIconStyles = useExpandIconStyles();\n  const iconStyles = useIconStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\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  main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.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, iconBeforeStyles[size], iconBefore.className);\n  }\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n  }\n  if (actions) {\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n  }\n  if (aside) {\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n  }\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n  }\n  if (selector) {\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","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","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useMainStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","state","rootStyles","actionsStyles","asideStyles","mainStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":"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"}

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

@@ -11,10 +11,10 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const _reactAvatar = require("@fluentui/react-avatar");
 const _reactButton = require("@fluentui/react-button");
 const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.selector, slotProps.selector), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactAvatar.AvatarContextProvider, {
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.expandIcon, null), state.selector && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.selector, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactAvatar.AvatarContextProvider, {
         value: contextValues.avatar
-    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.media, slotProps.media)), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.main, slotProps.main), slots.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.description, slotProps.description), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
+    }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.media, null)), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.main, null), state.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.description, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactButton.ButtonContextProvider, {
         value: state.buttonContextValue
-    }, slots.actions && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.aside, slotProps.aside)));
+    }, state.actions && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.actions, null), state.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.aside, null)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["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';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), /*#__PURE__*/ createElement(AvatarContextProvider, {\n        value: contextValues.avatar\n    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {\n        value: state.buttonContextValue\n    }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));\n};\n"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","expandIcon","selector","AvatarContextProvider","value","avatar","media","main","description","ButtonContextProvider","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;iCANkE;gCACtD;6BACS;6BACA;AAG3B,MAAMA,uCAAuC,CAACC,OAAOC,gBAAgB;IAC5E,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGL,MAAMM,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,QAAQ,EAAEL,UAAUK,QAAQ,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACI,kCAAqB,EAAE;QAC1RC,OAAOT,cAAcU,MAAM;IAC/B,GAAG,WAAW,GAAGN,IAAAA,8BAAa,EAACH,MAAMU,KAAK,EAAET,UAAUS,KAAK,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMW,IAAI,EAAEV,UAAUU,IAAI,GAAGX,MAAMY,WAAW,IAAI,WAAW,GAAGT,IAAAA,8BAAa,EAACH,MAAMY,WAAW,EAAEX,UAAUW,WAAW,GAAG,WAAW,GAAGT,IAAAA,8BAAa,EAACU,kCAAqB,EAAE;QACnQL,OAAOV,MAAMgB,kBAAkB;IACnC,GAAGd,MAAMe,OAAO,IAAI,WAAW,GAAGZ,IAAAA,8BAAa,EAACH,MAAMe,OAAO,EAAEd,UAAUc,OAAO,GAAGf,MAAMgB,KAAK,IAAI,WAAW,GAAGb,IAAAA,8BAAa,EAACH,MAAMgB,KAAK,EAAEf,UAAUe,KAAK;AAC9J"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, state.expandIcon && /*#__PURE__*/ createElement(state.expandIcon, null), state.selector && /*#__PURE__*/ createElement(state.selector, null), /*#__PURE__*/ createElement(AvatarContextProvider, {\n        value: contextValues.avatar\n    }, /*#__PURE__*/ createElement(state.media, null)), /*#__PURE__*/ createElement(state.main, null), state.description && /*#__PURE__*/ createElement(state.description, null), /*#__PURE__*/ createElement(ButtonContextProvider, {\n        value: state.buttonContextValue\n    }, state.actions && /*#__PURE__*/ createElement(state.actions, null), state.aside && /*#__PURE__*/ createElement(state.aside, null)));\n};\n"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","assertSlots","createElement","root","expandIcon","selector","AvatarContextProvider","value","avatar","media","main","description","ButtonContextProvider","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;iCANkE;gCACvD;6BACU;6BACA;AAG3B,MAAMA,uCAAuC,CAACC,OAAOC,gBAAgB;IAC5EC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAE,IAAI,GAAGL,MAAMM,QAAQ,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,QAAQ,EAAE,IAAI,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACI,kCAAqB,EAAE;QAClPC,OAAOP,cAAcQ,MAAM;IAC/B,GAAG,WAAW,GAAGN,IAAAA,8BAAa,EAACH,MAAMU,KAAK,EAAE,IAAI,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMW,IAAI,EAAE,IAAI,GAAGX,MAAMY,WAAW,IAAI,WAAW,GAAGT,IAAAA,8BAAa,EAACH,MAAMY,WAAW,EAAE,IAAI,GAAG,WAAW,GAAGT,IAAAA,8BAAa,EAACU,kCAAqB,EAAE;QAC7NL,OAAOR,MAAMc,kBAAkB;IACnC,GAAGd,MAAMe,OAAO,IAAI,WAAW,GAAGZ,IAAAA,8BAAa,EAACH,MAAMe,OAAO,EAAE,IAAI,GAAGf,MAAMgB,KAAK,IAAI,WAAW,GAAGb,IAAAA,8BAAa,EAACH,MAAMgB,KAAK,EAAE,IAAI;AACtI"}

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

@@ -37,15 +37,17 @@ const useTreeItemPersonaLayout_unstable = (props, ref)=>{
             selector: selectionMode === 'multiselect' ? _reactCheckbox.Checkbox : _reactRadio.Radio
         },
         avatarSize: _tokens.treeAvatarSize[size],
-        main: (0, _reactUtilities.resolveShorthand)(main, {
-            required: true,
+        main: _reactUtilities.slot.always(main, {
             defaultProps: {
                 children
-            }
+            },
+            elementType: 'div'
         }),
-        media: (0, _reactUtilities.resolveShorthand)(media, {
-            required: true
+        media: _reactUtilities.slot.always(media, {
+            elementType: 'div'
         }),
-        description: (0, _reactUtilities.resolveShorthand)(description)
+        description: _reactUtilities.slot.optional(description, {
+            elementType: 'div'
+        })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["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';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\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 */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{\n    const { media , children , main , description  } = 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    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\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\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        description: resolveShorthand(description)\n    };\n};\n"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","useTreeItemLayout_unstable","iconBefore","iconAfter","size","useTreeContext_unstable","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","Checkbox","Radio","avatarSize","treeAvatarSize","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAeiBA;;aAAAA;;;6DAfM;gCACU;0BACO;wBACT;mCACY;+BAClB;4BACH;AASX,MAAMA,oCAAoC,CAACC,OAAOC,MAAM;IAC/D,MAAM,EAAEC,MAAK,EAAGC,SAAQ,EAAGC,KAAI,EAAGC,YAAW,EAAG,GAAGL;IACnD,MAAMM,sBAAsBC,IAAAA,6CAA0B,EAAC;QACnD,GAAGP,KAAK;QACRQ,YAAY,IAAI;QAChBC,WAAW,IAAI;IACnB,GAAGR;IACH,MAAMS,OAAOC,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAIF,IAAI;IACpD,MAAMG,gBAAgBF,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACtE,OAAO;QACH,GAAGP,mBAAmB;QACtBQ,YAAY;YACRC,YAAY;YACZX,MAAM;YACNC,aAAa;YACbW,MAAM;YACNd,OAAO;YACPe,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAUN,kBAAkB,gBAAgBO,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,YAAYC,sBAAc,CAACb,KAAK;QAChCN,MAAMoB,IAAAA,gCAAgB,EAACpB,MAAM;YACzBqB,UAAU,IAAI;YACdC,cAAc;gBACVvB;YACJ;QACJ;QACAD,OAAOsB,IAAAA,gCAAgB,EAACtB,OAAO;YAC3BuB,UAAU,IAAI;QAClB;QACApB,aAAamB,IAAAA,gCAAgB,EAACnB;IAClC;AACJ"}
+{"version":3,"sources":["useTreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\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 */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{\n    const { media , children , main , description  } = 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    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\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\n        },\n        avatarSize: treeAvatarSize[size],\n        main: slot.always(main, {\n            defaultProps: {\n                children\n            },\n            elementType: 'div'\n        }),\n        media: slot.always(media, {\n            elementType: 'div'\n        }),\n        description: slot.optional(description, {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","useTreeItemLayout_unstable","iconBefore","iconAfter","size","useTreeContext_unstable","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","Checkbox","Radio","avatarSize","treeAvatarSize","slot","always","defaultProps","elementType","optional"],"mappings":";;;;+BAeiBA;;aAAAA;;;6DAfM;gCACF;0BACmB;wBACT;mCACY;+BAClB;4BACH;AASX,MAAMA,oCAAoC,CAACC,OAAOC,MAAM;IAC/D,MAAM,EAAEC,MAAK,EAAGC,SAAQ,EAAGC,KAAI,EAAGC,YAAW,EAAG,GAAGL;IACnD,MAAMM,sBAAsBC,IAAAA,6CAA0B,EAAC;QACnD,GAAGP,KAAK;QACRQ,YAAY,IAAI;QAChBC,WAAW,IAAI;IACnB,GAAGR;IACH,MAAMS,OAAOC,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAIF,IAAI;IACpD,MAAMG,gBAAgBF,IAAAA,iCAAuB,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACtE,OAAO;QACH,GAAGP,mBAAmB;QACtBQ,YAAY;YACRC,YAAY;YACZX,MAAM;YACNC,aAAa;YACbW,MAAM;YACNd,OAAO;YACPe,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAUN,kBAAkB,gBAAgBO,uBAAQ,GAAGC,iBAAK;QAChE;QACAC,YAAYC,sBAAc,CAACb,KAAK;QAChCN,MAAMoB,oBAAI,CAACC,MAAM,CAACrB,MAAM;YACpBsB,cAAc;gBACVvB;YACJ;YACAwB,aAAa;QACjB;QACAzB,OAAOsB,oBAAI,CAACC,MAAM,CAACvB,OAAO;YACtByB,aAAa;QACjB;QACAtB,aAAamB,oBAAI,CAACI,QAAQ,CAACvB,aAAa;YACpCsB,aAAa;QACjB;IACJ;AACJ"}

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

@@ -58,11 +58,11 @@ const treeItemPersonaLayoutClassNames = {
     }
 }, {
     d: [
-        ".f13qh94s{display:-ms-grid;display:grid;}",
-        ".f1y0tuzo{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto;}",
-        ".fellwe7{-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;}",
+        ".f13qh94s{display:grid;}",
+        ".f1y0tuzo{grid-template-rows:1fr auto;}",
+        ".fellwe7{grid-template-columns:auto auto 1fr auto;}",
         ".f1pam7zy{grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".f122n59{align-items:center;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fkhj508{font-size:var(--fontSizeBase300);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
@@ -108,14 +108,14 @@ const treeItemPersonaLayoutClassNames = {
     }
 }, {
     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;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
         ".f1szoe96{width:32px;}",
         ".f1d2rq10{height:32px;}",
-        ".f11uok23{-ms-grid-row:media;grid-row-start:media;}",
-        ".f1qdfnnj{-ms-grid-column:media;grid-column-start:media;}",
-        ".f1s27gz{-ms-grid-row-span:media;grid-row-end:media;}",
-        ".f86d0yl{-ms-grid-column-span:media;grid-column-end:media;}",
+        ".f11uok23{grid-row-start:media;}",
+        ".f1qdfnnj{grid-column-start:media;}",
+        ".f1s27gz{grid-row-end:media;}",
+        ".f86d0yl{grid-column-end:media;}",
         ".f1g0x7ka{padding-top:0;}",
         ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
         ".fruq291{padding-left:var(--spacingHorizontalXS);}",
@@ -155,10 +155,10 @@ const useMainStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".f17iroih{-ms-grid-row:main;grid-row-start:main;}",
-        ".fppdkoh{-ms-grid-column:main;grid-column-start:main;}",
-        ".fsb8d6n{-ms-grid-row-span:main;grid-row-end:main;}",
-        ".f6k5g14{-ms-grid-column-span:main;grid-column-end:main;}",
+        ".f17iroih{grid-row-start:main;}",
+        ".fppdkoh{grid-column-start:main;}",
+        ".fsb8d6n{grid-row-end:main;}",
+        ".f6k5g14{grid-column-end:main;}",
         ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
         ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
         ".fruq291{padding-left:var(--spacingHorizontalXS);}",
@@ -191,10 +191,10 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".ffekjdo{-ms-grid-row:description;grid-row-start:description;}",
-        ".f12wtlaa{-ms-grid-column:description;grid-column-start:description;}",
-        ".f1blqr63{-ms-grid-row-span:description;grid-row-end:description;}",
-        ".f2ve1i{-ms-grid-column-span:description;grid-column-end:description;}",
+        ".ffekjdo{grid-row-start:description;}",
+        ".f12wtlaa{grid-column-start:description;}",
+        ".f1blqr63{grid-row-end:description;}",
+        ".f2ve1i{grid-column-end:description;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fy9rknc{font-size:var(--fontSizeBase200);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
@@ -235,15 +235,15 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f22iagw{display:flex;}",
         ".fcgxt0o{margin-left:auto;}",
         ".f1ujusj6{margin-right:auto;}",
         ".f10pi13n{position:relative;}",
         ".f19g0ac{z-index:1;}",
-        ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}",
-        ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}",
-        ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}",
-        ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}",
+        ".fobksn0{grid-row-start:aside;}",
+        ".fmy5l6f{grid-column-start:aside;}",
+        ".fzqypwc{grid-row-end:aside;}",
+        ".f1tmftl3{grid-column-end:aside;}",
         ".f1g0x7ka{padding-top:0;}",
         ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
@@ -280,20 +280,20 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f22iagw{display:flex;}",
         ".fcgxt0o{margin-left:auto;}",
         ".f1ujusj6{margin-right:auto;}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
+        ".f122n59{align-items:center;}",
         ".f11zp4z2{z-index:0;}",
-        ".fobksn0{-ms-grid-row:aside;grid-row-start:aside;}",
-        ".fmy5l6f{-ms-grid-column:aside;grid-column-start:aside;}",
-        ".fzqypwc{-ms-grid-row-span:aside;grid-row-end:aside;}",
-        ".f1tmftl3{-ms-grid-column-span:aside;grid-column-end:aside;}",
+        ".fobksn0{grid-row-start:aside;}",
+        ".fmy5l6f{grid-column-start:aside;}",
+        ".fzqypwc{grid-row-end:aside;}",
+        ".f1tmftl3{grid-column-end:aside;}",
         ".f1g0x7ka{padding-top:0;}",
         ".fw5db7e{padding-right:var(--spacingHorizontalM);}",
         ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
         ".f1qch9an{padding-bottom:0;}",
-        ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}",
+        ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
         ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"
     ]
 });
@@ -327,19 +327,19 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
     }
 }, {
     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;}",
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f4d9j23{justify-content:center;}",
         ".f17fgpbq{min-width:24px;}",
         ".f1ewtqcl{box-sizing:border-box;}",
         ".f11d4kpn{color:var(--colorNeutralForeground3);}",
-        ".f1e6rimv{-ms-grid-row:expandIcon;grid-row-start:expandIcon;}",
-        ".f10hsf66{-ms-grid-column:expandIcon;grid-column-start:expandIcon;}",
-        ".foflfm0{-ms-grid-row-span:expandIcon;grid-row-end:expandIcon;}",
-        ".f1b3ebjb{-ms-grid-column-span:expandIcon;grid-column-end:expandIcon;}",
-        ".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;}",
+        ".f1e6rimv{grid-row-start:expandIcon;}",
+        ".f10hsf66{grid-column-start:expandIcon;}",
+        ".foflfm0{grid-row-end:expandIcon;}",
+        ".f1b3ebjb{grid-column-end:expandIcon;}",
+        ".f1jhi6b8{flex-grow:0;}",
+        ".fi64zpg{flex-shrink:0;}",
+        ".f1rmlqtg{flex-basis:auto;}",
         ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
         ".fhxju0i{padding-right:0;}",
         ".f1cnd47f{padding-left:0;}",