npm - @fluentui/react-drawer - Versions diffs - 9.0.0-beta.27 → 9.0.0-beta.29 - Mend

@fluentui/react-drawer 9.0.0-beta.27 → 9.0.0-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { ~~__styles~~, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/*\n Styles for the root slot\n /\nconst useStyles = /#__PURE__/~~__styles~~({\~~n root: {\n z8tnut: \~~"~~f1ggmyuv~~\"~~,\n z189sj: [\"fnbas0t\"~~, \"~~f1mswpri~~\"~~],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1mswpri\"~~, ~~\"fnbas0t\"],\n i8kkvl: \"fsnqrgy\",\n Belr9w4: \"fylz90v\",\n qb2dma: \"f1ub7u0d\",\n mc9l5x: \"f22iagw\",\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d:~~ [\".~~f1ggmyuv~~{padding-top:var(--spacingVerticalXXL);~~}\", \".fnbas0t{~~padding-right:var(--spacingHorizontalXXL);~~}\", \".f1mswpri{~~padding-left:var(--spacingHorizontalXXL);}\", \".~~f5b47ha~~{padding-bottom:var(--spacingVerticalS);~~}\", \".fsnqrgy{~~column-gap:var(--spacingHorizontalS);~~}\", \".fylz90v{~~row-gap:var(--spacingHorizontalS);~~}\", \".f1ub7u0d{~~align-self:stretch;~~}\", \".f22iagw{~~display:flex;~~}\", \".f1vx9l62{~~flex-direction:column;}\"]~~\n}~~);\n/\n Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles~~.root~~, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","~~__styles~~","~~z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","qb2dma","mc9l5x","Beiy3e4","d","~~state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;~~IAwBAC~~,8BAA8B;eAA9BA;;;~~uBA1BsC~~;~~AAE5C~~,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,~~eAAQ~~,EAAC~~;IACtCF~~,~~MAAM;QACJG,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;~~YAAY~~;SAAU;QAC/BC~~,~~QAAQ~~;~~QACRC,SAAS~~;~~QACTC,QAAQ~~;~~QACRC,QAAQ~~;~~QACRC~~,~~SAAS;IACX;AACF~~,~~GAAG;IACDC~~,~~GAAG;QAAC;QAAqD;QAAwD;QAAwD;QAAqD;QAAmD;QAAgD;QAAkC;QAA2B;KAAoC;AACpa;AAIO,MAAMb,iCAAiCc,~~CAAAA;IAC5C,MAAMC,~~SAASb~~;~~IACfY~~,~~MAAMb~~,IAAI,~~CAACe~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAClB~~,uBAAuBE,IAAI,~~EAAEc~~,~~OAAOd~~,~~IAAI~~,~~EAAEa,MAAMb,~~IAAI,~~CAACe~~,SAAS;~~IAClG~~,OAAOF;AACT,GACA,wDAAwD"}
1	+ {"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n root: 'fui-DrawerHeader'\n};\n/*\n Styles for the root slot\n /\nconst useStyles = /#__PURE__/__resetStyles(\"r10tpwon\", \"r53n3g6\", [\".r10tpwon{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}\", \".r53n3g6{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}\"]);\n/\n Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ2C;AAEjD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAA4S;CAA0S;AAIppB,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}

package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js CHANGED Viewed

@@ -22,31 +22,12 @@ const drawerHeaderNavigationClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        B6of3ja: "f19304h5",
-        t21cq0: [
-            "f1qb19o0",
-            "f1p10pdi"
-        ],
-        jrapky: "f118i8d9",
-        Frg6f3: [
-            "f1p10pdi",
-            "f1qb19o0"
-        ],
-        Bxn5svx: "f1ftwmyh"
-    }
-}, {
-    d: [
-        ".f19304h5{margin-top:calc(var(--spacingVerticalS) * -1);}",
-        ".f1qb19o0{margin-right:calc(var(--spacingHorizontalL) * -1);}",
-        ".f1p10pdi{margin-left:calc(var(--spacingHorizontalL) * -1);}",
-        ".f118i8d9{margin-bottom:calc(var(--spacingVerticalS) * -1);}",
-        ".f1ftwmyh{order:0;}"
-    ]
-});
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rfs9jc2", "r4yk2e8", [
+    ".rfs9jc2{margin-top:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);}",
+    ".r4yk2e8{margin-top:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);}"
+]);
 const useDrawerHeaderNavigationStyles_unstable = (state)=>{
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(drawerHeaderNavigationClassNames.root, styles.root, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderNavigationClassNames.root, styles, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerHeaderNavigationStyles.styles.js.map

package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { ~~__styles~~, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/*\n Styles for the root slot\n /\nconst useStyles = /#__PURE__/~~__styles~~({\~~n root: {\n B6of3ja: \~~"~~f19304h5~~\"~~,\n t21cq0: [\"f1qb19o0\"~~, \"~~f1p10pdi~~\"~~],\n jrapky: \"f118i8d9\",\n Frg6f3: [\"f1p10pdi\"~~, ~~\"f1qb19o0\"],\n Bxn5svx: \"f1ftwmyh\"\n }\n}, {\n d:~~ [\".~~f19304h5~~{margin-top:calc(var(--spacingVerticalS) -1);~~}\", \".f1qb19o0{~~margin-right:calc(var(--spacingHorizontalL) * -1);~~}\",~~ ~~\".f1p10pdi{~~margin-left:calc(var(--spacingHorizontalL) * -1);}\", \".~~f118i8d9~~{margin-~~bottom~~:calc(var(--spacingVerticalS) * -1);~~}\",~~ ~~\".f1ftwmyh{order~~:0;}\"]~~\n}~~);\n/*\n Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles~~.root~~, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerHeaderNavigationStyles.styles.js.map"],"names":["drawerHeaderNavigationClassNames","useDrawerHeaderNavigationStyles_unstable","root","useStyles","~~__styles~~","~~B6of3ja","t21cq0","jrapky","Frg6f3","Bxn5svx","d","~~state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,gCAAgC;eAAhCA;;~~IAoBAC~~,wCAAwC;eAAxCA;;;~~uBAtBsC~~;~~AAE5C~~,MAAMD,mCAAmC;IAC9CE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,~~eAAQ~~,EAAC~~;IACtCF~~,~~MAAM;QACJG~~,~~SAAS~~;~~QACTC,QAAQ~~;~~YAAC~~;~~YAAY~~;~~SAAW;QAChCC~~,~~QAAQ;QACRC~~,~~QAAQ;YAAC;YAAY;SAAW;QAChCC~~,~~SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA6D;QAAiE;QAAgE;QAAgE;KAAsB;AAC1R;AAIO,MAAMT,2CAA2CU,~~CAAAA;IACtD,MAAMC,~~SAAST~~;~~IACfQ~~,~~MAAMT~~,IAAI,~~CAACW~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAACd~~,iCAAiCE,IAAI,~~EAAEU~~,~~OAAOV~~,~~IAAI~~,~~EAAES,MAAMT,~~IAAI,~~CAACW~~,SAAS;~~IAC5G~~,OAAOF;AACT,GACA,kEAAkE"}
1	+ {"version":3,"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n root: 'fui-DrawerHeaderNavigation'\n};\n/*\n Styles for the root slot\n /\nconst useStyles = /#__PURE__/__resetStyles(\"rfs9jc2\", \"r4yk2e8\", [\".rfs9jc2{margin-top:calc(var(--spacingVerticalS) -1);margin-right:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);}\", \".r4yk2e8{margin-top:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);}\"]);\n/*\n Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerHeaderNavigationStyles.styles.js.map"],"names":["drawerHeaderNavigationClassNames","useDrawerHeaderNavigationStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,gCAAgC;eAAhCA;;IAUAC,wCAAwC;eAAxCA;;;uBAZ2C;AAEjD,MAAMD,mCAAmC;IAC9CE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,WAAW;IAAC;IAAgN;CAA+M;AAI5d,MAAMH,2CAA2CI,CAAAA;IACtD,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,iCAAiCE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IACvG,OAAOF;AACT,GACA,kEAAkE"}

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js CHANGED Viewed

@@ -17,11 +17,10 @@ const _reactdialog = require("@fluentui/react-dialog");
  * Create the shorthand for the heading element.
  * @param props - props from this instance of DrawerHeaderTitle
  */ const useHeadingProps = ({ children, heading })=>{
-    const resolvedHeading = _reactutilities.slot.resolveShorthand(heading) || {};
-    const { root: titleProps } = (0, _reactdialog.useDialogTitle_unstable)(resolvedHeading, /*#__PURE__*/ _react.createRef());
-    return _reactutilities.slot.optional(titleProps, {
+    const id = (0, _reactdialog.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
+    return _reactutilities.slot.optional(heading, {
         defaultProps: {
-            ...titleProps,
+            id,
             children
         },
         renderByDefault: true,

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { ~~useDialogTitle_unstable~~ } from '@fluentui/react-dialog';\n/*\n @internal\n * Create the shorthand for the heading element.\n * @param props - props from this instance of DrawerHeaderTitle\n / const useHeadingProps = ({ children, heading })=>{\n const ~~resolvedHeading~~ = ~~slot.resolveShorthand~~(~~heading~~) ~~\|\| {};\n const { root: titleProps } = useDialogTitle_unstable(resolvedHeading, React~~.~~createRef(~~));\n return slot.optional(~~titleProps~~, {\n defaultProps: {\n ~~...titleProps~~,\n children\n },\n renderByDefault: true,\n elementType: 'h2'\n });\n};\n/\n Create the state required to render DrawerHeaderTitle.\n \n The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n \n @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n const headingProps = useHeadingProps(props);\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ref,\n ...props\n }), {\n elementType: 'div'\n }),\n heading: headingProps,\n action: slot.optional(props.action, {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDrawerHeaderTitle_unstable","useHeadingProps","children","heading","~~resolvedHeading~~","~~slot~~","~~resolveShorthand~~","~~root~~","~~titleProps~~","~~useDialogTitle_unstable","React","createRef","~~optional","defaultProps","renderByDefault","elementType","props","ref","headingProps","components","action","always","getNativeElementProps"],"mappings":";;;;+~~BA2BiBA~~;;;eAAAA;;;;~~iEA3BM~~;gCACqB;~~6BACJ~~;~~AACxC~~;;;;CAIC,GAAG,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC9C,MAAMC,~~kBAAkBC~~,~~oBAAI~~,~~CAACC~~,~~gBAAgB~~,~~CAACH~~,~~YAAY~~,~~CAAC;IAC3D~~,~~MAAM,EAAEI,MAAMC,UAAU,EAAE,GAAGC,IAAAA,oCAAuB,EAACL,+BAAiBM,OAAMC,SAAS~~;~~IACrF~~,~~OAAON~~,oBAAI,~~CAACO~~,QAAQ,~~CAACJ~~,~~YAAY~~;~~QAC7BK~~,cAAc;~~YACV,GAAGL,UAAU~~;~~YACbN~~;QACJ;~~QACAY~~,iBAAiB;QACjBC,aAAa;IACjB;AACJ;AASW,~~MAAMf~~,gCAAgC,~~CAACgB~~,OAAOC;IACrD,MAAMC,~~eAAejB~~,~~gBAAgBe~~;IACrC,OAAO;QACHG,YAAY;~~YACRZ~~,MAAM;~~YACNJ~~,SAAS;~~YACTiB~~,QAAQ;QACZ;~~QACAb~~,~~MAAMF~~,oBAAI,~~CAACgB~~,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;~~YAC3CL~~;YACA,GAAGD,KAAK;QACZ,IAAI;YACAD,aAAa;QACjB;~~QACAZ~~,~~SAASe~~;~~QACTE~~,~~QAAQf~~,oBAAI,~~CAACO~~,QAAQ,CAACI,~~MAAMI~~,MAAM,EAAE;~~YAChCL~~,aAAa;QACjB;IACJ;AACJ"}
1	+ {"version":3,"sources":["useDrawerHeaderTitle.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '@fluentui/react-dialog';\n/*\n @internal\n * Create the shorthand for the heading element.\n * @param props - props from this instance of DrawerHeaderTitle\n / const useHeadingProps = ({ children, heading })=>{\n const id = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n return slot.optional(heading, {\n defaultProps: {\n id,\n children\n },\n renderByDefault: true,\n elementType: 'h2'\n });\n};\n/\n Create the state required to render DrawerHeaderTitle.\n \n The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n \n @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{\n const headingProps = useHeadingProps(props);\n return {\n components: {\n root: 'div',\n heading: 'h2',\n action: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ref,\n ...props\n }), {\n elementType: 'div'\n }),\n heading: headingProps,\n action: slot.optional(props.action, {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDrawerHeaderTitle_unstable","useHeadingProps","children","heading","id","useDialogContext_unstable","ctx","dialogTitleId","slot","optional","defaultProps","renderByDefault","elementType","props","ref","headingProps","components","root","action","always","getNativeElementProps"],"mappings":";;;;+BA0BiBA;;;eAAAA;;;;iEA1BM;gCACqB;6BACF;AAC1C;;;;CAIC,GAAG,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC9C,MAAMC,KAAKC,IAAAA,sCAAyB,EAAC,CAACC,MAAMA,IAAIC,aAAa;IAC7D,OAAOC,oBAAI,CAACC,QAAQ,CAACN,SAAS;QAC1BO,cAAc;YACVN;YACAF;QACJ;QACAS,iBAAiB;QACjBC,aAAa;IACjB;AACJ;AASW,MAAMZ,gCAAgC,CAACa,OAAOC;IACrD,MAAMC,eAAed,gBAAgBY;IACrC,OAAO;QACHG,YAAY;YACRC,MAAM;YACNd,SAAS;YACTe,QAAQ;QACZ;QACAD,MAAMT,oBAAI,CAACW,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CN;YACA,GAAGD,KAAK;QACZ,IAAI;YACAD,aAAa;QACjB;QACAT,SAASY;QACTG,QAAQV,oBAAI,CAACC,QAAQ,CAACI,MAAMK,MAAM,EAAE;YAChCN,aAAa;QACjB;IACJ;AACJ"}

package/lib-commonjs/components/DrawerInline/useDrawerInline.js CHANGED Viewed

@@ -14,13 +14,8 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
 const useDrawerInline_unstable = (props, ref)=>{
-    const { size, position, ...defaultProps } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { size, position, open } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
     const { separator = false } = props;
-    const [open] = (0, _reactutilities.useControllableState)({
-        state: defaultProps.open,
-        defaultState: defaultProps.defaultOpen,
-        initialState: false
-    });
     const motion = (0, _reactmotionpreview.useMotion)(open);
     return {
         components: {

package/lib-commonjs/components/DrawerInline/useDrawerInline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, ~~useControllableState,~~ useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n/*\n Create the state required to render DrawerInline.\n \n The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n \n @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */ export const useDrawerInline_unstable = (props, ref)=>{\n const { size, position, ~~...defaultProps~~ } = useDrawerDefaultProps(props);\n const { separator = false } = props;\n const ~~[open] = useControllableState({\n state: defaultProps.open,\n defaultState: defaultProps.defaultOpen,\n initialState: false\n });\n const~~ motion = useMotion(open);\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ...props,\n ref: useMergedRefs(ref, motion.ref)\n }), {\n elementType: 'div'\n }),\n size,\n position,\n separator,\n motion\n };\n};\n"],"names":["useDrawerInline_unstable","props","ref","size","position","~~defaultProps~~","useDrawerDefaultProps","separator","~~open","useControllableState","state","defaultState","defaultOpen","initialState","~~motion","useMotion","components","root","slot","always","getNativeElementProps","useMergedRefs","elementType"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;~~gCAC0D~~;~~oCACvD~~;uCACY;AAS3B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,IAAI,EAAEC,QAAQ,~~EAAE~~,~~GAAGC~~,~~cAAc~~,GAAGC,IAAAA,4CAAqB,EAACL;~~IAClE~~,MAAM,EAAEM,YAAY,KAAK,EAAE,GAAGN;IAC9B,~~MAAM~~,~~CAACO,KAAK,GAAGC,IAAAA,oCAAoB,EAAC;QAChCC,OAAOL,aAAaG,IAAI;QACxBG,cAAcN,aAAaO,WAAW;QACtCC,cAAc;IAClB;IACA,MAAMC,~~SAASC,IAAAA,6BAAS,~~EAACP~~;IACzB,OAAO;~~QACHQ~~,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C,~~GAAGnB~~,KAAK;YACRC,~~KAAKmB~~,IAAAA,6BAAa,~~EAACnB~~,~~KAAKY~~,~~OAAOZ~~,GAAG;QACtC,IAAI;~~YACAoB~~,aAAa;QACjB;~~QACAnB~~;QACAC;QACAG;~~QACAO~~;IACJ;AACJ"}
1	+ {"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n/*\n Create the state required to render DrawerInline.\n \n The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n \n @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */ export const useDrawerInline_unstable = (props, ref)=>{\n const { size, position, open } = useDrawerDefaultProps(props);\n const { separator = false } = props;\n const motion = useMotion(open);\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ...props,\n ref: useMergedRefs(ref, motion.ref)\n }), {\n elementType: 'div'\n }),\n size,\n position,\n separator,\n motion\n };\n};\n"],"names":["useDrawerInline_unstable","props","ref","size","position","open","useDrawerDefaultProps","separator","motion","useMotion","components","root","slot","always","getNativeElementProps","useMergedRefs","elementType"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACoC;oCACjC;uCACY;AAS3B,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,KAAK,EAAE,GAAGN;IAC9B,MAAMO,SAASC,IAAAA,6BAAS,EAACJ;IACzB,OAAO;QACHK,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C,GAAGb,KAAK;YACRC,KAAKa,IAAAA,6BAAa,EAACb,KAAKM,OAAON,GAAG;QACtC,IAAI;YACAc,aAAa;QACjB;QACAb;QACAC;QACAG;QACAC;IACJ;AACJ"}

package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js CHANGED Viewed

@@ -24,6 +24,10 @@ const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.sty
 const drawerInlineClassNames = {
     root: 'fui-DrawerInline'
 };
+const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r1aiwccr", "rzg5lxf", [
+    ".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}",
+    ".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"
+]);
 /**
  * Styles for the root slot
  */ const separatorValues = [
@@ -32,12 +36,6 @@ const drawerInlineClassNames = {
     _reacttheme.tokens.colorNeutralBackground3
 ];
 const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
-    root: {
-        qhf8xq: "f10pi13n",
-        abs64n: "fk73vx1",
-        Bmy1vo4: "f15rjlgw",
-        Es3by: "f1blt7p"
-    },
     separatorStart: {
         Bekrc4i: [
             "f1hqa2wf",
@@ -78,10 +76,6 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     }
 }, {
     d: [
-        ".f10pi13n{position:relative;}",
-        ".fk73vx1{opacity:0;}",
-        ".f15rjlgw{transition-property:opacity,transform;}",
-        ".f1blt7p{will-change:opacity,transform;}",
         ".f1hqa2wf{border-right-width:1px;}",
         ".finvdd3{border-left-width:1px;}",
         ".fcdblym{border-right-style:solid;}",
@@ -95,6 +89,7 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     ]
 });
 const useDrawerInlineStyles_unstable = (state)=>{
+    const resetStyles = useDrawerResetStyles();
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
     const rootStyles = useDrawerRootStyles();
     const separatorClass = _react.useMemo(()=>{
@@ -108,6 +103,6 @@ const useDrawerInlineStyles_unstable = (state)=>{
         rootStyles.separatorEnd,
         rootStyles.separatorStart
     ]);
-    state.root.className = (0, _react1.mergeClasses)(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerInlineStyles.styles.js.map

package/lib-commonjs/components/DrawerInline/useDrawerInlineStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n root: 'fui-DrawerInline'\n};\n/*\n Styles for the root slot\n /\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /#__PURE__/__styles({\n ~~root: {\n qhf8xq: \"f10pi13n\",\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f15rjlgw\",\n Es3by: \"f1blt7p\"\n },\n~~ separatorStart: {\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n },\n separatorEnd: {\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1h1g6jt\"\n },\n visible: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\"\n }\n}, {\n d: [\".~~f10pi13n{position:relative;}\", \".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".~~f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}\", \".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\n/*\n Apply styling to the DrawerInline slots based on the state\n */\nexport const useDrawerInlineStyles_unstable = state => {\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const separatorClass = React.useMemo(() => {\n if (!state.separator) {\n return undefined;\n }\n return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);\n state.root.className = mergeClasses(drawerInlineClassNames.root, ~~baseClassNames~~, ~~rootStyles.root~~, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerInlineStyles.styles.js.map"],"names":["drawerInlineClassNames","useDrawerInlineStyles_unstable","root","~~separatorValues~~","~~tokens~~","~~colorNeutralBackground3~~","~~useDrawerRootStyles~~","~~__styles~~","~~qhf8xq~~","~~abs64n~~","~~Bmy1vo4","Es3by","~~separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","state","baseClassNames","useDrawerBaseClassNames","rootStyles","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses","motion","active"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;~~IAwCAC~~,8BAA8B;eAA9BA;;;;~~iEA5CU~~;~~wBAC4B~~;~~4BAC5B~~;~~2CACgC~~;~~AAChD~~,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;~~IAChDL~~,~~MAAM;QACJM,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,~~gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;~~QACPd~~,QAAQ;~~QACRY~~,SAAS;IACX;AACF,GAAG;~~IACDG~~,GAAG;QAAC;~~QAAiC;QAAwB;QAAqD;QAA4C;~~QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;QAAoE;QAAwB;KAA4C;~~AAC9oB~~;AAIO,~~MAAMvB~~,~~iCAAiCwB~~,CAAAA;IAC5C,MAAMC,iBAAiBC,IAAAA,kDAAuB,~~EAACF~~;IAC/C,~~MAAMG~~,~~aAAatB~~;IACnB,~~MAAMuB~~,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,~~CAACN~~,~~MAAMO~~,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,~~OAAOR~~,~~MAAMS~~,QAAQ,KAAK,UAAUN,~~WAAWhB~~,cAAc,~~GAAGgB~~,~~WAAWZ~~,YAAY;IACzF,GAAG;~~QAACS~~,~~MAAMS~~,QAAQ;~~QAAET~~,~~MAAMO~~,SAAS;QAAEJ,~~WAAWZ~~,YAAY;~~QAAEY~~,~~WAAWhB~~,cAAc;KAAC;~~IACxFa~~,~~MAAMvB~~,IAAI,CAACiC,SAAS,GAAGC,IAAAA,oBAAY,EAACpC,uBAAuBE,IAAI,~~EAAEwB~~,~~gBAAgBE~~,~~WAAW1B~~,~~IAAI,EAAE2B,~~gBAAgBD,UAAU,~~CAACH~~,~~MAAMS~~,QAAQ,CAAC,~~EAAET~~,~~MAAMY~~,MAAM,CAACC,MAAM,IAAIV,~~WAAWL~~,OAAO,~~EAAEE~~,~~MAAMvB~~,IAAI,CAACiC,SAAS;~~IAC7M~~,~~OAAOV~~;AACT,GACA,wDAAwD"}
1	+ {"version":3,"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n root: 'fui-DrawerInline'\n};\nconst useDrawerResetStyles = /#__PURE__/__resetStyles(\"r1aiwccr\", \"rzg5lxf\", [\".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}\", \".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}\"]);\n/*\n Styles for the root slot\n /\nconst separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];\nconst useDrawerRootStyles = /#__PURE__/__styles({\n separatorStart: {\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n h3c5rm: [\"fa8zu9y\", \"f17e9lqh\"]\n },\n separatorEnd: {\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n zhjwy3: [\"f17e9lqh\", \"fa8zu9y\"]\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1h1g6jt\"\n },\n visible: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\"\n }\n}, {\n d: [\".f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}\", \".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) -1), 0, 0);}\", \".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\n/*\n Apply styling to the DrawerInline slots based on the state\n */\nexport const useDrawerInlineStyles_unstable = state => {\n const resetStyles = useDrawerResetStyles();\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const separatorClass = React.useMemo(() => {\n if (!state.separator) {\n return undefined;\n }\n return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);\n state.root.className = mergeClasses(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDrawerInlineStyles.styles.js.map"],"names":["drawerInlineClassNames","useDrawerInlineStyles_unstable","root","useDrawerResetStyles","__resetStyles","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","abs64n","d","state","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses","motion","active"],"mappings":";;;;;;;;;;;IAIaA,sBAAsB;eAAtBA;;IAmCAC,8BAA8B;eAA9BA;;;;iEAvCU;wBAC2C;4BAC3C;2CACqD;AACrE,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,YAAY,WAAW;IAAC;IAAomB;CAAkmB;AACtxC;;CAEC,GACD,MAAMC,kBAAkB;IAAC;IAAO;IAASC,kBAAM,CAACC,uBAAuB;CAAC;AACxE,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,gBAAgB;QACdC,SAAS;YAAC;YAAY;SAAU;QAChCC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,cAAc;QACZC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPC,QAAQ;QACRH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;QAAoE;QAAwB;KAA4C;AACpf;AAIO,MAAMtB,iCAAiCuB,CAAAA;IAC5C,MAAMC,cAActB;IACpB,MAAMuB,iBAAiBC,IAAAA,kDAAuB,EAACH;IAC/C,MAAMI,aAAapB;IACnB,MAAMqB,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,CAACP,MAAMQ,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,OAAOT,MAAMU,QAAQ,KAAK,UAAUN,WAAWlB,cAAc,GAAGkB,WAAWd,YAAY;IACzF,GAAG;QAACU,MAAMU,QAAQ;QAAEV,MAAMQ,SAAS;QAAEJ,WAAWd,YAAY;QAAEc,WAAWlB,cAAc;KAAC;IACxFc,MAAMtB,IAAI,CAACiC,SAAS,GAAGC,IAAAA,oBAAY,EAACpC,uBAAuBE,IAAI,EAAEuB,aAAaC,gBAAgBG,gBAAgBD,UAAU,CAACJ,MAAMU,QAAQ,CAAC,EAAEV,MAAMa,MAAM,CAACC,MAAM,IAAIV,WAAWP,OAAO,EAAEG,MAAMtB,IAAI,CAACiC,SAAS;IACzM,OAAOX;AACT,GACA,wDAAwD"}

package/lib-commonjs/components/DrawerOverlay/renderDrawerOverlay.js CHANGED Viewed

@@ -10,14 +10,12 @@ Object.defineProperty(exports, "renderDrawerOverlay_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const _reactdialog = require("@fluentui/react-dialog");
 const renderDrawerOverlay_unstable = (state)=>{
-    if (!state.motion.canRender) {
+    if (!state.dialog || !state.motion.canRender) {
         return null;
     }
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactdialog.Dialog, {
-        ...state.dialog,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dialog, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
     });
 };

package/lib-commonjs/components/DrawerOverlay/renderDrawerOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderDrawerOverlay.js"],"sourcesContent":[" import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\~~nimport { Dialog } from '@fluentui/react-dialog';\~~n/*\n Render the final JSX of DrawerOverlay\n / export const renderDrawerOverlay_unstable = (state)=>{\n if (!state.motion.canRender) {\n return null;\n }\n assertSlots(state);\n return /#__PURE__/ _jsx(~~Dialog~~, {\n ~~...state.dialog,\n~~ children: /#__PURE__*/ _jsx(state.root, {})\n });\n};\n"],"names":["renderDrawerOverlay_unstable","state","motion","canRender","assertSlots","_jsx","~~Dialog","dialog","~~children","root"],"mappings":";;;;+~~BAKiBA~~;;;eAAAA;;;~~4BALa~~;gCACF;~~6BACL;AAGZ~~,MAAMA,+BAA+B,CAACC;IAC7C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;~~QACzB~~,OAAO;IACX;IACAC,IAAAA,2BAAW,~~EAACH~~;IACZ,OAAO,WAAW,~~GAAGI~~,IAAAA,eAAI,~~EAACC~~,~~mBAAM~~,EAAE;~~QAC9B~~,~~GAAGL,MAAMM,MAAM;QACfC,~~UAAU,WAAW,~~GAAGH~~,IAAAA,eAAI,~~EAACJ~~,~~MAAMQ~~,IAAI,EAAE,CAAC;IAC9C;AACJ"}
1	+ {"version":3,"sources":["renderDrawerOverlay.js"],"sourcesContent":[" import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/*\n Render the final JSX of DrawerOverlay\n / export const renderDrawerOverlay_unstable = (state)=>{\n if (!state.dialog \|\| !state.motion.canRender) {\n return null;\n }\n assertSlots(state);\n return /#__PURE__/ _jsx(state.dialog, {\n children: /#__PURE__*/ _jsx(state.root, {})\n });\n};\n"],"names":["renderDrawerOverlay_unstable","state","dialog","motion","canRender","assertSlots","_jsx","children","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,+BAA+B,CAACC;IAC7C,IAAI,CAACA,MAAMC,MAAM,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC1C,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACJ;IACZ,OAAO,WAAW,GAAGK,IAAAA,eAAI,EAACL,MAAMC,MAAM,EAAE;QACpCK,UAAU,WAAW,GAAGD,IAAAA,eAAI,EAACL,MAAMO,IAAI,EAAE,CAAC;IAC9C;AACJ"}

package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js CHANGED Viewed

@@ -15,15 +15,15 @@ const _reactdialog = require("@fluentui/react-dialog");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
 const useDrawerOverlay_unstable = (props, ref)=>{
-    const { open, defaultOpen, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
-    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
+    const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
     const drawerMotion = (0, _reactmotionpreview.useMotion)(open);
     const backdropMotion = (0, _reactmotionpreview.useMotion)(open);
     const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
-    const root = _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+    const root = _reactutilities.slot.always({
         ...props,
         ref: (0, _reactutilities.useMergedRefs)(ref, drawerMotion.ref)
-    }), {
+    }, {
         elementType: _reactdialog.DialogSurface,
         defaultProps: {
             backdrop: _reactutilities.slot.optional(props.backdrop, {
@@ -35,18 +35,21 @@ const useDrawerOverlay_unstable = (props, ref)=>{
             })
         }
     });
-    const dialog = _reactutilities.slot.always({
-        open: true,
-        defaultOpen,
-        onOpenChange,
-        inertTrapFocus,
-        modalType
-    }, {
-        elementType: 'div'
+    const dialog = _reactutilities.slot.optional(props.dialog, {
+        elementType: _reactdialog.Dialog,
+        renderByDefault: true,
+        defaultProps: {
+            open: true,
+            defaultOpen,
+            onOpenChange,
+            inertTrapFocus,
+            modalType
+        }
     });
     return {
         components: {
             root: _reactdialog.DialogSurface,
+            dialog: _reactdialog.Dialog,
             backdrop: 'div'
         },
         root,

package/lib-commonjs/components/DrawerOverlay/useDrawerOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { ~~getNativeElementProps,~~ slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n/*\n Create the state required to render DrawerOverlay.\n \n The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n \n @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n const { open, ~~defaultOpen,~~ size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n const drawerMotion = useMotion(open);\n const backdropMotion = useMotion(open);\n const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n const root = slot.always(~~getNativeElementProps('div',~~ {\n ...props,\n ref: useMergedRefs(ref, drawerMotion.ref)\n }), {\n elementType: DialogSurface,\n defaultProps: {\n backdrop: slot.optional(props.backdrop, {\n elementType: 'div',\n renderByDefault: hasCustomBackdrop,\n defaultProps: {\n ref: backdropMotion.ref\n }\n })\n }\n });\n const dialog = slot.~~always~~({\n open: true,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType\n }~~, {~~\n ~~elementType: 'div'\n~~ });\n return {\n components: {\n root: DialogSurface,\n backdrop: 'div'\n },\n root,\n dialog,\n size,\n position,\n motion: drawerMotion,\n backdropMotion\n };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","~~defaultOpen","~~size","position","useDrawerDefaultProps","modalType","inertTrapFocus","onOpenChange","drawerMotion","useMotion","backdropMotion","hasCustomBackdrop","backdrop","root","slot","always","~~getNativeElementProps","~~useMergedRefs","elementType","DialogSurface","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;~~gCACoC~~;~~6BAC7B~~;~~oCACJ~~;uCACY;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,~~WAAW,EAAEC,~~IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,~~EAACN~~;~~IACpE~~,MAAM,~~EAAEO~~,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGT;~~IAC9D~~,MAAMU,eAAeC,IAAAA,6BAAS,EAACT;IAC/B,MAAMU,iBAAiBD,IAAAA,6BAAS,EAACT;IACjC,MAAMW,~~oBAAoBN~~,cAAc,~~eAAeP~~,MAAMc,QAAQ,KAAK;IAC1E,MAAMC,OAAOC,oBAAI,CAACC,MAAM,~~CAACC,IAAAA,qCAAqB,EAAC,OAAO~~;~~QAClD~~,~~GAAGlB~~,KAAK;QACRC,~~KAAKkB~~,IAAAA,6BAAa,~~EAAClB~~,KAAKS,aAAaT,GAAG;IAC5C,~~IAAI~~;~~QACAmB~~,aAAaC,0BAAa;QAC1BC,cAAc;~~YACVR~~,UAAUE,oBAAI,~~CAACO~~,QAAQ,~~CAACvB~~,MAAMc,QAAQ,EAAE;~~gBACpCM~~,aAAa;gBACbI,~~iBAAiBX~~;~~gBACjBS~~,cAAc;~~oBACVrB~~,KAAKW,eAAeX,GAAG;gBAC3B;YACJ;QACJ;IACJ;IACA,~~MAAMwB~~,~~SAAST~~,oBAAI,~~CAACC~~,MAAM,~~CAAC~~;~~QACvBf~~,MAAM;~~QACNC~~;~~QACAM~~;~~QACAD~~;~~QACAD~~;IACJ~~,GAAG~~;~~QACCa,aAAa;IACjB;~~IACA,OAAO;~~QACHM~~,YAAY;YACRX,~~MAAMM~~,0BAAa;~~YACnBP~~,UAAU;QACd;QACAC;~~QACAU~~;QACArB;QACAC;~~QACAsB~~,QAAQjB;QACRE;IACJ;AACJ"}
1	+ {"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog, DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n/*\n Create the state required to render DrawerOverlay.\n \n The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n \n @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n const { open, size, position } = useDrawerDefaultProps(props);\n const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n const drawerMotion = useMotion(open);\n const backdropMotion = useMotion(open);\n const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n const root = slot.always({\n ...props,\n ref: useMergedRefs(ref, drawerMotion.ref)\n }, {\n elementType: DialogSurface,\n defaultProps: {\n backdrop: slot.optional(props.backdrop, {\n elementType: 'div',\n renderByDefault: hasCustomBackdrop,\n defaultProps: {\n ref: backdropMotion.ref\n }\n })\n }\n });\n const dialog = slot.optional(props.dialog, {\n elementType: Dialog,\n renderByDefault: true,\n defaultProps: {\n open: true,\n defaultOpen,\n onOpenChange,\n inertTrapFocus,\n modalType\n }\n });\n return {\n components: {\n root: DialogSurface,\n dialog: Dialog,\n backdrop: 'div'\n },\n root,\n dialog,\n size,\n position,\n motion: drawerMotion,\n backdropMotion\n };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","useMotion","backdropMotion","hasCustomBackdrop","backdrop","root","slot","always","useMergedRefs","elementType","DialogSurface","defaultProps","optional","renderByDefault","dialog","Dialog","components","motion"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACa;6BACE;oCACZ;uCACY;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGT;IACnF,MAAMU,eAAeC,IAAAA,6BAAS,EAACT;IAC/B,MAAMU,iBAAiBD,IAAAA,6BAAS,EAACT;IACjC,MAAMW,oBAAoBP,cAAc,eAAeN,MAAMc,QAAQ,KAAK;IAC1E,MAAMC,OAAOC,oBAAI,CAACC,MAAM,CAAC;QACrB,GAAGjB,KAAK;QACRC,KAAKiB,IAAAA,6BAAa,EAACjB,KAAKS,aAAaT,GAAG;IAC5C,GAAG;QACCkB,aAAaC,0BAAa;QAC1BC,cAAc;YACVP,UAAUE,oBAAI,CAACM,QAAQ,CAACtB,MAAMc,QAAQ,EAAE;gBACpCK,aAAa;gBACbI,iBAAiBV;gBACjBQ,cAAc;oBACVpB,KAAKW,eAAeX,GAAG;gBAC3B;YACJ;QACJ;IACJ;IACA,MAAMuB,SAASR,oBAAI,CAACM,QAAQ,CAACtB,MAAMwB,MAAM,EAAE;QACvCL,aAAaM,mBAAM;QACnBF,iBAAiB;QACjBF,cAAc;YACVnB,MAAM;YACNM;YACAC;YACAF;YACAD;QACJ;IACJ;IACA,OAAO;QACHoB,YAAY;YACRX,MAAMK,0BAAa;YACnBI,QAAQC,mBAAM;YACdX,UAAU;QACd;QACAC;QACAS;QACArB;QACAC;QACAuB,QAAQjB;QACRE;IACJ;AACJ"}

package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js CHANGED Viewed

@@ -28,6 +28,53 @@ const drawerOverlayClassNames = {
  * Styles for the root slot
  */ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     root: {
+        z8tnut: "f1g0x7ka",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f1qch9an",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ],
+        B68tc82: "f1p9o1ba",
+        Bmxbyg5: "f1sil6mw",
+        Bbmb7ep: [
+            "f1krrbdw",
+            "f1deotkl"
+        ],
+        Beyfa6y: [
+            "f1deotkl",
+            "f1krrbdw"
+        ],
+        B7oj6ja: [
+            "f10ostut",
+            "f1ozlkrg"
+        ],
+        Btl43ni: [
+            "f1ozlkrg",
+            "f10ostut"
+        ],
+        B4j52fo: "fre7gi1",
+        Bekrc4i: [
+            "f1358rze",
+            "f1rvrf73"
+        ],
+        Bn0qgzm: "fqdk4by",
+        ibv6hh: [
+            "f1rvrf73",
+            "f1358rze"
+        ],
+        a9b677: "f3rx6dk",
+        B2u0y6b: "f1w39fev",
+        Bqenvij: "f11ysow2",
+        B7ck84d: "f1ewtqcl",
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        Bt984gj: "f6jr5hl",
+        Brf1p80: "fbhxue7",
+        De3pzq: "fxugw4r",
         qhf8xq: "f19dog8a",
         Bhzewxz: "f15twtuk",
         B5kzvoi: "f1yab3r1",
@@ -49,6 +96,29 @@ const drawerOverlayClassNames = {
     }
 }, {
     d: [
+        ".f1g0x7ka{padding-top:0;}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".f1qch9an{padding-bottom:0;}",
+        ".f1p9o1ba{overflow-x:hidden;}",
+        ".f1sil6mw{overflow-y:hidden;}",
+        ".f1krrbdw{border-bottom-right-radius:0;}",
+        ".f1deotkl{border-bottom-left-radius:0;}",
+        ".f10ostut{border-top-right-radius:0;}",
+        ".f1ozlkrg{border-top-left-radius:0;}",
+        ".fre7gi1{border-top-width:0;}",
+        ".f1358rze{border-right-width:0;}",
+        ".f1rvrf73{border-left-width:0;}",
+        ".fqdk4by{border-bottom-width:0;}",
+        ".f3rx6dk{width:var(--fui-Drawer--size);}",
+        ".f1w39fev{max-width:100vw;}",
+        ".f11ysow2{height:auto;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f6jr5hl{align-items:flex-start;}",
+        ".fbhxue7{justify-content:flex-start;}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         ".f19dog8a{position:fixed;}",
         ".f15twtuk{top:0;}",
         ".f1yab3r1{bottom:0;}",

package/lib-commonjs/components/DrawerOverlay/useDrawerOverlayStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay',\n backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/*\n Styles for the root slot\n /\nconst useDrawerRootStyles = /#__PURE__/__styles({\n root: {\n qhf8xq: \"f19dog8a\",\n Bhzewxz: \"f15twtuk\",\n B5kzvoi: \"f1yab3r1\",\n abs64n: \"fk73vx1\",\n E5pizo: \"fliqkoi\",\n Bmy1vo4: \"f1neo61\",\n Es3by: \"f1ytgekk\"\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1g0pcr8\"\n },\n visible: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\",\n E5pizo: \"f10nrhrw\"\n }\n}, {\n d: [\".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".fk73vx1{opacity:0;}\", \".fliqkoi{box-shadow:0px transparent;}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/*\n Styles for the backdrop slot\n /\nconst useBackdropMotionStyles = /#__PURE__/__styles({\n backdrop: {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f13u1uyl\",\n Bkqvd7p: \"f17wnm97\",\n Es3by: \"f1gqqdtu\"\n },\n visible: {\n abs64n: \"f5p0z4x\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/\n Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const backdropMotionStyles = useBackdropMotionStyles();\n const durationStyles = useDrawerDurationStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useDrawerRootStyles","__styles","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","rootStyles","backdropMotionStyles","durationStyles","useDrawerDurationStyles","className","mergeClasses","position","motion","active","size","backdropMotion"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;~~IAkDAC~~,+BAA+B;eAA/BA;;;;~~iEAtDU~~;wBACgB;~~2CAEyC~~;~~AACzE~~,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDH,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPP,QAAQ;QACRK,SAAS;QACTJ,QAAQ;IACV;AACF,GAAG;IACDO,GAAG;QAAC;QAA8B;QAAqB;QAAwB;QAAwB;QAAyC;QAA+D;QAAwD;QAA+E;QAA8E;QAAwB;QAA6C;KAAyC;~~AACphB~~;AACA;;CAEC,GACD,MAAMC,0BAA0B,WAAW,~~GAAEb~~,IAAAA,gBAAQ,EAAC;IACpDF,UAAU;~~QACRM~~,QAAQ;QACRE,SAAS;QACTQ,SAAS;QACTP,OAAO;IACT;IACAI,SAAS;QACPP,QAAQ;IACV;AACF,GAAG;IACDQ,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,~~MAAMhB~~,~~kCAAkCmB~~,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,~~aAAanB~~;IACnB,~~MAAMoB~~,uBAAuBN;IAC7B,MAAMO,iBAAiBC,IAAAA,kDAAuB;IAC9C,~~MAAMvB~~,~~WAAWiB~~,~~MAAMlB~~,IAAI,CAACC,QAAQ;~~IACpCiB~~,~~MAAMlB~~,IAAI,~~CAACyB~~,SAAS,GAAGC,IAAAA,oBAAY,~~EAAC5B~~,wBAAwBE,IAAI,~~EAAEmB~~,gBAAgBE,~~WAAWrB~~,IAAI,~~EAAEqB~~,UAAU,CAACH,MAAMS,QAAQ,CAAC,EAAET,MAAMU,MAAM,CAACC,MAAM,IAAIR,WAAWP,OAAO,EAAEI,~~MAAMlB~~,IAAI,~~CAACyB~~,SAAS;IAC9L,~~IAAIxB~~,UAAU;QACZA,~~SAASwB~~,SAAS,GAAGC,IAAAA,oBAAY,~~EAAC5B~~,wBAAwBG,QAAQ,~~EAAEqB~~,~~qBAAqBrB~~,QAAQ,~~EAAEsB~~,cAAc,CAACL,MAAMY,IAAI,CAAC,EAAEZ,MAAMa,cAAc,CAACF,MAAM,IAAIP,qBAAqBR,OAAO,~~EAAEb~~,~~SAASwB~~,SAAS;IAChN;IACA,OAAOP;AACT,GACA,yDAAyD"}
1	+ {"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n root: 'fui-DrawerOverlay',\n backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/*\n Styles for the root slot\n /\nconst useDrawerRootStyles = /#__PURE__/__styles({\n root: {\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n B68tc82: \"f1p9o1ba\",\n Bmxbyg5: \"f1sil6mw\",\n Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n B4j52fo: \"fre7gi1\",\n Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n Bn0qgzm: \"fqdk4by\",\n ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n a9b677: \"f3rx6dk\",\n B2u0y6b: \"f1w39fev\",\n Bqenvij: \"f11ysow2\",\n B7ck84d: \"f1ewtqcl\",\n mc9l5x: \"f22iagw\",\n Beiy3e4: \"f1vx9l62\",\n Bt984gj: \"f6jr5hl\",\n Brf1p80: \"fbhxue7\",\n De3pzq: \"fxugw4r\",\n qhf8xq: \"f19dog8a\",\n Bhzewxz: \"f15twtuk\",\n B5kzvoi: \"f1yab3r1\",\n abs64n: \"fk73vx1\",\n E5pizo: \"fliqkoi\",\n Bmy1vo4: \"f1neo61\",\n Es3by: \"f1ytgekk\"\n },\n start: {\n Bz10aip: \"f1d8gkik\"\n },\n end: {\n Bz10aip: \"f1g0pcr8\"\n },\n visible: {\n abs64n: \"f5p0z4x\",\n Bz10aip: \"f87uvqx\",\n E5pizo: \"f10nrhrw\"\n }\n}, {\n d: [\".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f3rx6dk{width:var(--fui-Drawer--size);}\", \".f1w39fev{max-width:100vw;}\", \".f11ysow2{height:auto;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f6jr5hl{align-items:flex-start;}\", \".fbhxue7{justify-content:flex-start;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".fk73vx1{opacity:0;}\", \".fliqkoi{box-shadow:0px transparent;}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/*\n Styles for the backdrop slot\n /\nconst useBackdropMotionStyles = /#__PURE__/__styles({\n backdrop: {\n abs64n: \"fk73vx1\",\n Bmy1vo4: \"f13u1uyl\",\n Bkqvd7p: \"f17wnm97\",\n Es3by: \"f1gqqdtu\"\n },\n visible: {\n abs64n: \"f5p0z4x\"\n }\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/\n Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n const baseClassNames = useDrawerBaseClassNames(state);\n const rootStyles = useDrawerRootStyles();\n const backdropMotionStyles = useBackdropMotionStyles();\n const durationStyles = useDrawerDurationStyles();\n const backdrop = state.root.backdrop;\n state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useDrawerRootStyles","__styles","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","a9b677","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","rootStyles","backdropMotionStyles","durationStyles","useDrawerDurationStyles","className","mergeClasses","position","motion","active","size","backdropMotion"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAyEAC,+BAA+B;eAA/BA;;;;iEA7EU;wBACgB;2CAE8D;AAC9F,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDH,MAAM;QACJI,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPP,QAAQ;QACRK,SAAS;QACTJ,QAAQ;IACV;AACF,GAAG;IACDO,GAAG;QAAC;QAA6B;QAA8B;QAA8B;QAAgC;QAAiC;QAAiC;QAA4C;QAA2C;QAAyC;QAAwC;QAAiC;QAAoC;QAAmC;QAAoC;QAA4C;QAA+B;QAA2B;QAAqC;QAA2B;QAAqC;QAAqC;QAAyC;QAA8D;QAA8B;QAAqB;QAAwB;QAAwB;QAAyC;QAA+D;QAAwD;QAA+E;QAA8E;QAAwB;QAA6C;KAAyC;AAC11C;AACA;;CAEC,GACD,MAAMC,0BAA0B,WAAW,GAAEpC,IAAAA,gBAAQ,EAAC;IACpDF,UAAU;QACR6B,QAAQ;QACRE,SAAS;QACTQ,SAAS;QACTP,OAAO;IACT;IACAI,SAAS;QACPP,QAAQ;IACV;AACF,GAAG;IACDQ,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMvC,kCAAkC0C,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,aAAa1C;IACnB,MAAM2C,uBAAuBN;IAC7B,MAAMO,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAM9C,WAAWwC,MAAMzC,IAAI,CAACC,QAAQ;IACpCwC,MAAMzC,IAAI,CAACgD,SAAS,GAAGC,IAAAA,oBAAY,EAACnD,wBAAwBE,IAAI,EAAE0C,gBAAgBE,WAAW5C,IAAI,EAAE4C,UAAU,CAACH,MAAMS,QAAQ,CAAC,EAAET,MAAMU,MAAM,CAACC,MAAM,IAAIR,WAAWP,OAAO,EAAEI,MAAMzC,IAAI,CAACgD,SAAS;IAC9L,IAAI/C,UAAU;QACZA,SAAS+C,SAAS,GAAGC,IAAAA,oBAAY,EAACnD,wBAAwBG,QAAQ,EAAE4C,qBAAqB5C,QAAQ,EAAE6C,cAAc,CAACL,MAAMY,IAAI,CAAC,EAAEZ,MAAMa,cAAc,CAACF,MAAM,IAAIP,qBAAqBR,OAAO,EAAEpC,SAAS+C,SAAS;IAChN;IACA,OAAOP;AACT,GACA,yDAAyD"}

package/lib-commonjs/shared/useDrawerBaseStyles.styles.js CHANGED Viewed

@@ -12,8 +12,8 @@ _export(exports, {
     drawerCSSVars: function() {
         return drawerCSSVars;
     },
-    useDrawerBaseStyles: function() {
-        return useDrawerBaseStyles;
+    drawerDefaultStyles: function() {
+        return drawerDefaultStyles;
     },
     useDrawerDurationStyles: function() {
         return useDrawerDurationStyles;
@@ -23,59 +23,28 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
 const drawerCSSVars = {
     drawerSizeVar: '--fui-Drawer--size'
 };
-const useDrawerBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        z8tnut: "f1g0x7ka",
-        z189sj: [
-            "fhxju0i",
-            "f1cnd47f"
-        ],
-        Byoj8tv: "f1qch9an",
-        uwmqm3: [
-            "f1cnd47f",
-            "fhxju0i"
-        ],
-        B68tc82: "f1p9o1ba",
-        Bmxbyg5: "f1sil6mw",
-        Bbmb7ep: [
-            "f1krrbdw",
-            "f1deotkl"
-        ],
-        Beyfa6y: [
-            "f1deotkl",
-            "f1krrbdw"
-        ],
-        B7oj6ja: [
-            "f10ostut",
-            "f1ozlkrg"
-        ],
-        Btl43ni: [
-            "f1ozlkrg",
-            "f10ostut"
-        ],
-        B4j52fo: "fre7gi1",
-        Bekrc4i: [
-            "f1358rze",
-            "f1rvrf73"
-        ],
-        Bn0qgzm: "fqdk4by",
-        ibv6hh: [
-            "f1rvrf73",
-            "f1358rze"
-        ],
-        a9b677: "f3rx6dk",
-        B2u0y6b: "f1w39fev",
-        Bqenvij: "f11ysow2",
-        B7ck84d: "f1ewtqcl",
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        Bt984gj: "f6jr5hl",
-        Brf1p80: "fbhxue7",
-        De3pzq: "fxugw4r"
-    },
+const drawerDefaultStyles = {
+    .../*#__PURE__*/ _react.shorthands.padding(0),
+    .../*#__PURE__*/ _react.shorthands.overflow('hidden'),
+    .../*#__PURE__*/ _react.shorthands.borderRadius(0),
+    .../*#__PURE__*/ _react.shorthands.border(0),
+    width: `var(${drawerCSSVars.drawerSizeVar})`,
+    maxWidth: '100vw',
+    height: 'auto',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */ const useDrawerStyles = /*#__PURE__*/ (0, _react.__styles)({
     entering: {
         Bkqvd7p: "f18ad807"
     },
@@ -119,29 +88,6 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
     }
 }, {
     d: [
-        ".f1g0x7ka{padding-top:0;}",
-        ".fhxju0i{padding-right:0;}",
-        ".f1cnd47f{padding-left:0;}",
-        ".f1qch9an{padding-bottom:0;}",
-        ".f1p9o1ba{overflow-x:hidden;}",
-        ".f1sil6mw{overflow-y:hidden;}",
-        ".f1krrbdw{border-bottom-right-radius:0;}",
-        ".f1deotkl{border-bottom-left-radius:0;}",
-        ".f10ostut{border-top-right-radius:0;}",
-        ".f1ozlkrg{border-top-left-radius:0;}",
-        ".fre7gi1{border-top-width:0;}",
-        ".f1358rze{border-right-width:0;}",
-        ".f1rvrf73{border-left-width:0;}",
-        ".fqdk4by{border-bottom-width:0;}",
-        ".f3rx6dk{width:var(--fui-Drawer--size);}",
-        ".f1w39fev{max-width:100vw;}",
-        ".f11ysow2{height:auto;}",
-        ".f1ewtqcl{box-sizing:border-box;}",
-        ".f22iagw{display:flex;}",
-        ".f1vx9l62{flex-direction:column;}",
-        ".f6jr5hl{align-items:flex-start;}",
-        ".fbhxue7{justify-content:flex-start;}",
-        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}",
         ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}",
         ".f1vgc2s3{left:0;}",
@@ -184,7 +130,7 @@ const useDrawerDurationStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useDrawerBaseClassNames = ({ position, size, motion })=>{
-    const baseStyles = useDrawerBaseStyles();
+    const baseStyles = useDrawerStyles();
     const durationStyles = useDrawerDurationStyles();
-    return (0, _react.mergeClasses)(baseStyles.root, baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+    return (0, _react.mergeClasses)(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
 }; //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

package/lib-commonjs/shared/useDrawerBaseStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/*\n CSS variable names used internally for uniform styling in Drawer.\n /\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/\n ~~Styles~~ for the ~~root~~ ~~slot~~\n /\nexport const ~~useDrawerBaseStyles~~ = ~~/#__PURE__/__styles(~~{\n ~~root:~~ ~~{\n z8tnut: \"f1g0x7ka\"~~,\n ~~z189sj:~~ ~~[\"fhxju0i\", \"f1cnd47f\"]~~,\n ~~Byoj8tv:~~ ~~\"f1qch9an\"~~,\n ~~uwmqm3:~~ ~~[\"f1cnd47f\", \"fhxju0i\"]~~,\n ~~B68tc82~~: ~~\"f1p9o1ba\",\~~n ~~Bmxbyg5~~: ~~\"f1sil6mw\"~~,\n ~~Bbmb7ep~~: ~~[\"f1krrbdw\", \"f1deotkl\"]~~,\n ~~Beyfa6y~~: ~~[\"f1deotkl\", \"f1krrbdw\"]~~,\n ~~B7oj6ja~~: ~~[\"f10ostut\", \"f1ozlkrg\"]~~,\n ~~Btl43ni~~: ~~[\"f1ozlkrg\", \"f10ostut\"]~~,\n ~~B4j52fo~~: ~~\"fre7gi1\"~~,\n ~~Bekrc4i~~: ~~[\"f1358rze\", \"f1rvrf73\"]~~,\n ~~Bn0qgzm~~: \~~"fqdk4by\",\~~n ~~ibv6hh:~~ ~~[\"f1rvrf73\",~~ ~~\"f1358rze\"],\n a9b677:~~ ~~\"f3rx6dk\",\n B2u0y6b:~~ ~~\"f1w39fev\",\n Bqenvij:~~ ~~\"f11ysow2\",\n B7ck84d:~~ ~~\"f1ewtqcl\",\n mc9l5x:~~ ~~\"f22iagw\",\n Beiy3e4:~~ \~~"f1vx9l62\",\~~n ~~Bt984gj:~~ ~~\"f6jr5hl\",\n Brf1p80:~~ ~~\"fbhxue7\",\n De3pzq:~~ \~~"fxugw4r\"\~~n ~~},\n~~ entering: {\n Bkqvd7p: \"f18ad807\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n reducedMotion: {\n Hwfdqs: \"f5e8c63\"\n },\n start: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n j35jbq: [\"fvfyk4\", \"frppm18\"]\n },\n end: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n oyh7mz: [\"frppm18\", \"fvfyk4\"]\n },\n small: {\n Bjr0ffy: \"f1exhnwo\"\n },\n medium: {\n Bjr0ffy: \"fqofjzu\"\n },\n large: {\n Bjr0ffy: \"fce6y3m\"\n },\n full: {\n Bjr0ffy: \"fsdmzs6\"\n }\n}, {\n d: [\".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f3rx6dk{width:var(--fui-Drawer--size);}\", \".f1w39fev{max-width:100vw;}\", \".f11ysow2{height:auto;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f6jr5hl{align-items:flex-start;}\", \".fbhxue7{justify-content:flex-start;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }]]\n});\nexport const useDrawerDurationStyles = /#__PURE__*/__styles({\n small: {\n B3o57yi: \"fc397y7\"\n },\n medium: {\n B3o57yi: \"f78771\"\n },\n large: {\n B3o57yi: \"f9ymmep\"\n },\n full: {\n B3o57yi: \"f1loko9l\"\n }\n}, {\n d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n position,\n size,\n motion\n}) => {\n const baseStyles = ~~useDrawerBaseStyles~~();\n const durationStyles = useDrawerDurationStyles();\n return mergeClasses(baseStyles~~.root, baseStyles~~[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","~~useDrawerBaseStyles~~","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","~~__styles~~","~~root~~","~~z8tnut~~","~~z189sj~~","~~Byoj8tv~~","~~uwmqm3~~","~~B68tc82~~","~~Bmxbyg5~~","~~Bbmb7ep~~","~~Beyfa6y~~","~~B7oj6ja~~","~~Btl43ni~~","~~B4j52fo~~","~~Bekrc4i~~","~~Bn0qgzm~~","~~ibv6hh~~","~~a9b677~~","~~B2u0y6b~~","~~Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","~~entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","B3o57yi","position","size","motion","baseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;~~IA6DAC~~,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;~~uBAxFsC~~;~~AAK5C~~,MAAMH,gBAAgB;IAC3BI,eAAe;AACjB;AAIO,MAAMH,sBAAsB,WAAW,GAAEI,~~IAAAA~~,~~eAAQ~~,~~EAAC;IACvDC~~,~~MAAM;QACJC~~,~~QAAQ~~;~~QACRC~~,QAAQ~~;YAAC;YAAW;SAAW;QAC/BC~~,SAAS;~~QACTC~~,~~QAAQ;YAAC;~~YAAY;~~SAAU;QAC/BC~~,~~SAAS~~;~~QACTC~~,~~SAAS~~;~~QACTC~~,~~SAAS~~;~~YAAC;YAAY;SAAW;QACjCC~~,~~SAAS~~;~~YAAC;YAAY;SAAW;QACjCC~~,~~SAAS~~;~~YAAC;YAAY;SAAW;QACjCC~~,SAAS;~~YAAC;YAAY;SAAW;QACjCC~~,~~SAAS~~;~~QACTC~~,~~SAAS;YAAC;~~YAAY;~~SAAW;QACjCC~~,~~SAAS~~;~~QACTC~~,~~QAAQ~~;~~YAAC~~;~~YAAY;SAAW;QAChCC~~,~~QAAQ;QACRC~~,~~SAAS;QACTC~~,~~SAAS;QACTC~~,~~SAAS;QACTC~~,~~QAAQ;QACRC~~,~~SAAS;QACTC~~,~~SAAS;QACTC~~,~~SAAS~~;~~QACTC~~,~~QAAQ;IACV;IACAC,~~UAAU;QACRC,SAAS;IACX;IACAC,SAAS;QACPD,SAAS;IACX;IACAE,eAAe;QACbC,QAAQ;IACV;IACAC,OAAO;QACLC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,KAAK;QACHD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAG,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;~~QAA6B;QAA8B;QAA8B;QAAgC;QAAiC;QAAiC;QAA4C;QAA2C;QAAyC;QAAwC;QAAiC;QAAoC;QAAmC;QAAoC;QAA4C;QAA+B;QAA2B;QAAqC;QAA2B;QAAqC;QAAqC;QAAyC;QAA8D;~~QAAoE;QAAoE;QAAsB;QAAuB;QAAwB;QAAwB;QAAwC;QAAuC;QAAuC;KAAsC;~~IAC3sCC~~,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,~~MAAM3C~~,0BAA0B,WAAW,~~GAAEG~~,IAAAA,eAAQ,EAAC;~~IAC3DkC~~,OAAO;QACLO,SAAS;IACX;IACAL,QAAQ;QACNK,SAAS;IACX;IACAJ,OAAO;QACLI,SAAS;IACX;IACAH,MAAM;QACJG,SAAS;IACX;AACF,GAAG;IACDF,GAAG;QAAC;QAAwD;QAAqD;QAAwD;KAA2D;AACtO;AACO,~~MAAMzC~~,0BAA0B,CAAC,~~EACtC4C~~,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,~~aAAajD~~;IACnB,~~MAAMkD~~,~~iBAAiBjD~~;IACvB,~~OAAOkD~~,IAAAA,mBAAY,EAACF,~~WAAW5C,IAAI,EAAE4C,~~UAAU,CAACH,SAAS,EAAEI,cAAc,CAACH,KAAK,EAAEE,UAAU,CAACF,KAAK,EAAEE,WAAWjB,aAAa,EAAEgB,OAAOI,IAAI,KAAK,cAAcH,WAAWpB,QAAQ,EAAEmB,OAAOI,IAAI,KAAK,aAAaH,WAAWlB,OAAO;~~AACjO~~,GACA,sDAAsD"}
1	+ {"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/*\n CSS variable names used internally for uniform styling in Drawer.\n /\nexport const drawerCSSVars = {\n drawerSizeVar: '--fui-Drawer--size'\n};\n/\n Default shared styles for the Drawer component\n /\nexport const drawerDefaultStyles = {\n ... /#__PURE__/shorthands.padding(0),\n ... /#__PURE__/shorthands.overflow('hidden'),\n ... /#__PURE__/shorthands.borderRadius(0),\n ... /#__PURE__/shorthands.border(0),\n width: `var(${drawerCSSVars.drawerSizeVar})`,\n maxWidth: '100vw',\n height: 'auto',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n backgroundColor: tokens.colorNeutralBackground1\n};\n/\n Shared dynamic styles for the Drawer component\n /\nconst useDrawerStyles = /#__PURE__/__styles({\n entering: {\n Bkqvd7p: \"f18ad807\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n reducedMotion: {\n Hwfdqs: \"f5e8c63\"\n },\n start: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n j35jbq: [\"fvfyk4\", \"frppm18\"]\n },\n end: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n oyh7mz: [\"frppm18\", \"fvfyk4\"]\n },\n small: {\n Bjr0ffy: \"f1exhnwo\"\n },\n medium: {\n Bjr0ffy: \"fqofjzu\"\n },\n large: {\n Bjr0ffy: \"fce6y3m\"\n },\n full: {\n Bjr0ffy: \"fsdmzs6\"\n }\n}, {\n d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n m: \"screen and (prefers-reduced-motion: reduce)\"\n }]]\n});\nexport const useDrawerDurationStyles = /#__PURE__*/__styles({\n small: {\n B3o57yi: \"fc397y7\"\n },\n medium: {\n B3o57yi: \"f78771\"\n },\n large: {\n B3o57yi: \"f9ymmep\"\n },\n full: {\n B3o57yi: \"f1loko9l\"\n }\n}, {\n d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n position,\n size,\n motion\n}) => {\n const baseStyles = useDrawerStyles();\n const durationStyles = useDrawerDurationStyles();\n return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","shorthands","padding","overflow","borderRadius","border","width","maxWidth","height","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","B3o57yi","position","size","motion","baseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;IAsDAC,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;uBAjFsC;4BAC5B;AAIhB,MAAMH,gBAAgB;IAC3BI,eAAe;AACjB;AAIO,MAAMH,sBAAsB;IACjC,GAAI,WAAW,GAAEI,iBAAU,CAACC,OAAO,CAAC,EAAE;IACtC,GAAI,WAAW,GAAED,iBAAU,CAACE,QAAQ,CAAC,SAAS;IAC9C,GAAI,WAAW,GAAEF,iBAAU,CAACG,YAAY,CAAC,EAAE;IAC3C,GAAI,WAAW,GAAEH,iBAAU,CAACI,MAAM,CAAC,EAAE;IACrCC,OAAO,CAAC,IAAI,EAAEV,cAAcI,aAAa,CAAC,CAAC,CAAC;IAC5CO,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;AACjD;AACA;;CAEC,GACD,MAAMC,kBAAkB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC5CC,UAAU;QACRC,SAAS;IACX;IACAC,SAAS;QACPD,SAAS;IACX;IACAE,eAAe;QACbC,QAAQ;IACV;IACAC,OAAO;QACLC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,KAAK;QACHD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAG,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAoE;QAAoE;QAAsB;QAAuB;QAAwB;QAAwB;QAAwC;QAAuC;QAAuC;KAAsC;IACrYC,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,MAAMpC,0BAA0B,WAAW,GAAEoB,IAAAA,eAAQ,EAAC;IAC3DU,OAAO;QACLO,SAAS;IACX;IACAL,QAAQ;QACNK,SAAS;IACX;IACAJ,OAAO;QACLI,SAAS;IACX;IACAH,MAAM;QACJG,SAAS;IACX;AACF,GAAG;IACDF,GAAG;QAAC;QAAwD;QAAqD;QAAwD;KAA2D;AACtO;AACO,MAAMlC,0BAA0B,CAAC,EACtCqC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,aAAatB;IACnB,MAAMuB,iBAAiB1C;IACvB,OAAO2C,IAAAA,mBAAY,EAACF,UAAU,CAACH,SAAS,EAAEI,cAAc,CAACH,KAAK,EAAEE,UAAU,CAACF,KAAK,EAAEE,WAAWjB,aAAa,EAAEgB,OAAOI,IAAI,KAAK,cAAcH,WAAWpB,QAAQ,EAAEmB,OAAOI,IAAI,KAAK,aAAaH,WAAWlB,OAAO;AAChN,GACA,sDAAsD"}