@fluentui/react-drawer 9.0.0-beta.37 → 9.0.0-beta.39

package/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js

@@ -22,9 +22,9 @@ const drawerHeaderClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__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;}"
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rh4hr5f", "r116c7xc", [
+    ".rh4hr5f{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}",
+    ".r116c7xc{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"
 ]);
 const useDrawerHeaderStyles_unstable = (state)=>{
     const styles = useStyles();

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

@@ -1 +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"}
+{"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(\"rh4hr5f\", \"r116c7xc\", [\".rh4hr5f{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}\", \".r116c7xc{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}\"]);\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,WAAW,YAAY;IAAC;IAA2V;CAA2V;AAIpvB,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/InlineDrawer/InlineDrawer.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "InlineDrawer", {
+    enumerable: true,
+    get: function() {
+        return InlineDrawer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useInlineDrawer = require("./useInlineDrawer");
+const _renderInlineDrawer = require("./renderInlineDrawer");
+const _useInlineDrawerStylesstyles = require("./useInlineDrawerStyles.styles");
+const InlineDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useInlineDrawer.useInlineDrawer_unstable)(props, ref);
+    (0, _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerInlineStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useInlineDrawerStyles_unstable')(state);
+    return (0, _renderInlineDrawer.renderInlineDrawer_unstable)(state);
+});
+InlineDrawer.displayName = 'InlineDrawer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InlineDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n/**\n * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */ export const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useInlineDrawer_unstable(props, ref);\n    useInlineDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n    useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n    return renderInlineDrawer_unstable(state);\n});\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["InlineDrawer","React","forwardRef","props","ref","state","useInlineDrawer_unstable","useInlineDrawerStyles_unstable","useCustomStyleHook_unstable","renderInlineDrawer_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;qCACqB;iCACH;oCACG;6CACG;AAIpC,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,2DAA8B,EAACF;IAC/BG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9DG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9D,OAAOI,IAAAA,+CAA2B,EAACJ;AACvC;AACAL,aAAaU,WAAW,GAAG"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./InlineDrawer"), exports);
+_export_star._(require("./InlineDrawer.types"), exports);
+_export_star._(require("./renderInlineDrawer"), exports);
+_export_star._(require("./useInlineDrawer"), exports);
+_export_star._(require("./useInlineDrawerStyles.styles"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './InlineDrawer';\nexport * from './InlineDrawer.types';\nexport * from './renderInlineDrawer';\nexport * from './useInlineDrawer';\nexport * from './useInlineDrawerStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/{DrawerInline/renderDrawerInline.js → InlineDrawer/renderInlineDrawer.js}

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "renderDrawerInline_unstable", {
+Object.defineProperty(exports, "renderInlineDrawer_unstable", {
     enumerable: true,
     get: function() {
-        return renderDrawerInline_unstable;
+        return renderInlineDrawer_unstable;
     }
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const renderDrawerInline_unstable = (state)=>{
+const renderInlineDrawer_unstable = (state)=>{
     if (!state.motion.canRender) {
         return null;
     }

package/lib-commonjs/components/{DrawerInline/renderDrawerInline.js.map → InlineDrawer/renderInlineDrawer.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.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 DrawerInline\n */ export const renderDrawerInline_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderDrawerInline_unstable","state","motion","canRender","assertSlots","_jsx","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,8BAA8B,CAACC;IAC5C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACH;IACZ,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACJ,MAAMK,IAAI,EAAE,CAAC;AAC3C"}
+{"version":3,"sources":["renderInlineDrawer.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 InlineDrawer\n */ export const renderInlineDrawer_unstable = (state)=>{\n    if (!state.motion.canRender) {\n        return null;\n    }\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderInlineDrawer_unstable","state","motion","canRender","assertSlots","_jsx","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,8BAA8B,CAACC;IAC5C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QACzB,OAAO;IACX;IACAC,IAAAA,2BAAW,EAACH;IACZ,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACJ,MAAMK,IAAI,EAAE,CAAC;AAC3C"}

package/lib-commonjs/components/{DrawerInline/useDrawerInline.js → InlineDrawer/useInlineDrawer.js}

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useDrawerInline_unstable", {
+Object.defineProperty(exports, "useInlineDrawer_unstable", {
     enumerable: true,
     get: function() {
-        return useDrawerInline_unstable;
+        return useInlineDrawer_unstable;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
@@ -13,7 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
-const useDrawerInline_unstable = (props, ref)=>{
+const useInlineDrawer_unstable = (props, ref)=>{
     const { size, position, open } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
     const { separator = false } = props;
     const motion = (0, _reactmotionpreview.useMotion)(open);

package/lib-commonjs/components/{DrawerInline/useDrawerInline.js.map → InlineDrawer/useInlineDrawer.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('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","getIntrinsicElementProps","useMergedRefs","elementType"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACuC;oCACpC;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,wCAAwB,EAAC,OAAO;YAC9C,GAAGb,KAAK;YACRC,KAAKa,IAAAA,6BAAa,EAACb,KAAKM,OAAON,GAAG;QACtC,IAAI;YACAc,aAAa;QACjB;QACAb;QACAC;QACAG;QACAC;IACJ;AACJ"}
+{"version":3,"sources":["useInlineDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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 InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */ export const useInlineDrawer_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(getIntrinsicElementProps('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":["useInlineDrawer_unstable","props","ref","size","position","open","useDrawerDefaultProps","separator","motion","useMotion","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","elementType"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACuC;oCACpC;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,wCAAwB,EAAC,OAAO;YAC9C,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 → InlineDrawer/useInlineDrawerStyles.styles.js}

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    drawerInlineClassNames: function() {
-        return drawerInlineClassNames;
+    inlineDrawerClassNames: function() {
+        return inlineDrawerClassNames;
     },
-    useDrawerInlineStyles_unstable: function() {
-        return useDrawerInlineStyles_unstable;
+    useInlineDrawerStyles_unstable: function() {
+        return useInlineDrawerStyles_unstable;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
@@ -21,11 +21,12 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _react1 = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
-const drawerInlineClassNames = {
-    root: 'fui-DrawerInline'
+const _reactmotionpreview = require("@fluentui/react-motion-preview");
+const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
 };
-const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("rlrvcho", null, [
-    ".rlrvcho{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"
+const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r46ju4x", null, [
+    ".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}"
 ]);
 /**
  * Styles for the root slot
@@ -68,10 +69,6 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     },
     end: {
         Bz10aip: "f1h1g6jt"
-    },
-    visible: {
-        abs64n: "f5p0z4x",
-        Bz10aip: "f87uvqx"
     }
 }, {
     d: [
@@ -82,15 +79,33 @@ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
         ".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);}",
+        ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}"
+    ]
+});
+const useDrawerMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    "default": {
+        abs64n: "fk73vx1",
+        Bmy1vo4: "f15rjlgw",
+        Es3by: "f1blt7p"
+    },
+    enter: {
+        abs64n: "f5p0z4x",
+        Bz10aip: "f87uvqx"
+    }
+}, {
+    d: [
+        ".fk73vx1{opacity:0;}",
+        ".f15rjlgw{transition-property:opacity,transform;}",
+        ".f1blt7p{will-change:opacity,transform;}",
         ".f5p0z4x{opacity:1;}",
         ".f87uvqx{transform:translate3D(0, 0, 0);}"
     ]
 });
-const useDrawerInlineStyles_unstable = (state)=>{
+const useInlineDrawerStyles_unstable = (state)=>{
     const resetStyles = useDrawerResetStyles();
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
     const rootStyles = useDrawerRootStyles();
+    const motionClassNames = (0, _reactmotionpreview.useMotionClassNames)(state.motion, useDrawerMotionStyles());
     const separatorClass = _react.useMemo(()=>{
         if (!state.separator) {
             return undefined;
@@ -102,6 +117,6 @@ const useDrawerInlineStyles_unstable = (state)=>{
         rootStyles.separatorEnd,
         rootStyles.separatorStart
     ]);
-    state.root.className = (0, _react1.mergeClasses)(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);
     return state;
-}; //# sourceMappingURL=useDrawerInlineStyles.styles.js.map
+}; //# sourceMappingURL=useInlineDrawerStyles.styles.js.map

package/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInlineDrawerStyles.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';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const inlineDrawerClassNames = {\n  root: 'fui-InlineDrawer'\n};\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"r46ju4x\", null, [\".r46ju4x{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;}\"]);\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}, {\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);}\"]\n});\nconst useDrawerMotionStyles = /*#__PURE__*/__styles({\n  \"default\": {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f15rjlgw\",\n    Es3by: \"f1blt7p\"\n  },\n  enter: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f15rjlgw{transition-property:opacity,transform;}\", \".f1blt7p{will-change:opacity,transform;}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\"]\n});\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = state => {\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n  const motionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\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(inlineDrawerClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], motionClassNames, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useInlineDrawerStyles.styles.js.map"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","__resetStyles","separatorValues","tokens","colorNeutralBackground3","useDrawerRootStyles","__styles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","Bmy1vo4","Es3by","enter","state","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","motionClassNames","useMotionClassNames","motion","separatorClass","React","useMemo","separator","undefined","position","className","mergeClasses"],"mappings":";;;;;;;;;;;IAKaA,sBAAsB;eAAtBA;;IA4CAC,8BAA8B;eAA9BA;;;;iEAjDU;wBAC2C;4BAC3C;2CACqD;oCACxC;AAC7B,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,MAAM;IAAC;CAA8U;AACxZ;;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;AACF,GAAG;IACDE,GAAG;QAAC;QAAsC;QAAoC;QAAuC;QAAsC;QAAgE;QAAgE;QAA+E;KAAmE;AAC/a;AACA,MAAMC,wBAAwB,WAAW,GAAEb,IAAAA,gBAAQ,EAAC;IAClD,WAAW;QACTc,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLH,QAAQ;QACRJ,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAAwB;QAAqD;QAA4C;QAAwB;KAA4C;AACnM;AAIO,MAAMpB,iCAAiC0B,CAAAA;IAC5C,MAAMC,cAAczB;IACpB,MAAM0B,iBAAiBC,IAAAA,kDAAuB,EAACH;IAC/C,MAAMI,aAAavB;IACnB,MAAMwB,mBAAmBC,IAAAA,uCAAmB,EAACN,MAAMO,MAAM,EAAEZ;IAC3D,MAAMa,iBAAiBC,OAAMC,OAAO,CAAC;QACnC,IAAI,CAACV,MAAMW,SAAS,EAAE;YACpB,OAAOC;QACT;QACA,OAAOZ,MAAMa,QAAQ,KAAK,UAAUT,WAAWrB,cAAc,GAAGqB,WAAWjB,YAAY;IACzF,GAAG;QAACa,MAAMa,QAAQ;QAAEb,MAAMW,SAAS;QAAEP,WAAWjB,YAAY;QAAEiB,WAAWrB,cAAc;KAAC;IACxFiB,MAAMzB,IAAI,CAACuC,SAAS,GAAGC,IAAAA,oBAAY,EAAC1C,uBAAuBE,IAAI,EAAE0B,aAAaC,gBAAgBM,gBAAgBJ,UAAU,CAACJ,MAAMa,QAAQ,CAAC,EAAER,kBAAkBL,MAAMzB,IAAI,CAACuC,SAAS;IAChL,OAAOd;AACT,GACA,wDAAwD"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverlayDrawer", {
+    enumerable: true,
+    get: function() {
+        return OverlayDrawer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useOverlayDrawer = require("./useOverlayDrawer");
+const _renderOverlayDrawer = require("./renderOverlayDrawer");
+const _useOverlayDrawerStylesstyles = require("./useOverlayDrawerStyles.styles");
+const OverlayDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useOverlayDrawer.useOverlayDrawer_unstable)(props, ref);
+    (0, _useOverlayDrawerStylesstyles.useOverlayDrawerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerOverlayStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOverlayDrawerStyles_unstable')(state);
+    return (0, _renderOverlayDrawer.renderOverlayDrawer_unstable)(state);
+});
+OverlayDrawer.displayName = 'OverlayDrawer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useOverlayDrawer_unstable(props, ref);\n    useOverlayDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n    return renderOverlayDrawer_unstable(state);\n});\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["OverlayDrawer","React","forwardRef","props","ref","state","useOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useCustomStyleHook_unstable","renderOverlayDrawer_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;kCACF;qCACG;8CACG;AAGrC,MAAMA,gBAAgB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACpE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/DG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,iDAA4B,EAACJ;AACxC;AACAL,cAAcU,WAAW,GAAG"}

package/lib-commonjs/components/{DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js → OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js}

@@ -2,20 +2,20 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "DrawerOverlaySurface", {
+Object.defineProperty(exports, "OverlayDrawerSurface", {
     enumerable: true,
     get: function() {
-        return DrawerOverlaySurface;
+        return OverlayDrawerSurface;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactdialog = require("@fluentui/react-dialog");
-const _useDrawerOverlaySurfaceStylesstyles = require("./useDrawerOverlaySurfaceStyles.styles");
-const DrawerOverlaySurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+const _useOverlayDrawerSurfaceStylesstyles = require("./useOverlayDrawerSurfaceStyles.styles");
+const OverlayDrawerSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const dialogSurfaceState = (0, _reactdialog.useDialogSurface_unstable)(props, ref);
     const dialogSurfaceContextValues = (0, _reactdialog.useDialogSurfaceContextValues_unstable)(dialogSurfaceState);
-    (0, _useDrawerOverlaySurfaceStylesstyles.useDrawerOverlaySurfaceStyles_unstable)(dialogSurfaceState);
+    (0, _useOverlayDrawerSurfaceStylesstyles.useOverlayDrawerSurfaceStyles_unstable)(dialogSurfaceState);
     return (0, _reactdialog.renderDialogSurface_unstable)(dialogSurfaceState, dialogSurfaceContextValues);
 });
-DrawerOverlaySurface.displayName = 'DrawerOverlaySurface';
+OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';

package/lib-commonjs/components/{DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js.map → OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlaySurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';\nimport { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles';\n/**\n * @internal\n * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */ export const DrawerOverlaySurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n    const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n    useDrawerOverlaySurfaceStyles_unstable(dialogSurfaceState);\n    return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\nDrawerOverlaySurface.displayName = 'DrawerOverlaySurface';\n"],"names":["DrawerOverlaySurface","React","forwardRef","props","ref","dialogSurfaceState","useDialogSurface_unstable","dialogSurfaceContextValues","useDialogSurfaceContextValues_unstable","useDrawerOverlaySurfaceStyles_unstable","renderDialogSurface_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;6BACyF;qDACzD;AAI5C,MAAMA,uBAAuB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,qBAAqBC,IAAAA,sCAAyB,EAACH,OAAOC;IAC5D,MAAMG,6BAA6BC,IAAAA,mDAAsC,EAACH;IAC1EI,IAAAA,2EAAsC,EAACJ;IACvC,OAAOK,IAAAA,yCAA4B,EAACL,oBAAoBE;AAC5D;AACAP,qBAAqBW,WAAW,GAAG"}
+{"version":3,"sources":["OverlayDrawerSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */ export const OverlayDrawerSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n    const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n    useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n    return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["OverlayDrawerSurface","React","forwardRef","props","ref","dialogSurfaceState","useDialogSurface_unstable","dialogSurfaceContextValues","useDialogSurfaceContextValues_unstable","useOverlayDrawerSurfaceStyles_unstable","renderDialogSurface_unstable","displayName"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;iEANM;6BACyF;qDACzD;AAI5C,MAAMA,uBAAuB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,qBAAqBC,IAAAA,sCAAyB,EAACH,OAAOC;IAC5D,MAAMG,6BAA6BC,IAAAA,mDAAsC,EAACH;IAC1EI,IAAAA,2EAAsC,EAACJ;IACvC,OAAOK,IAAAA,yCAA4B,EAACL,oBAAoBE;AAC5D;AACAP,qBAAqBW,WAAW,GAAG"}

package/lib-commonjs/components/{DrawerOverlay/DrawerOverlaySurface → OverlayDrawer/OverlayDrawerSurface}/index.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./DrawerOverlaySurface"), exports);
-_export_star._(require("./DrawerOverlaySurface.types"), exports);
+_export_star._(require("./OverlayDrawerSurface"), exports);
+_export_star._(require("./OverlayDrawerSurface.types"), exports);

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './OverlayDrawerSurface';\nexport * from './OverlayDrawerSurface.types';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA"}

package/lib-commonjs/components/{DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js → OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js}

@@ -9,17 +9,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    drawerOverlaySurfaceClassNames: function() {
-        return drawerOverlaySurfaceClassNames;
+    OverlayDrawerSurfaceClassNames: function() {
+        return OverlayDrawerSurfaceClassNames;
     },
-    useDrawerOverlaySurfaceStyles_unstable: function() {
-        return useDrawerOverlaySurfaceStyles_unstable;
+    useOverlayDrawerSurfaceStyles_unstable: function() {
+        return useOverlayDrawerSurfaceStyles_unstable;
     }
 });
 const _react = require("@griffel/react");
-const drawerOverlaySurfaceClassNames = {
-    root: 'fui-DrawerOverlaySurface',
-    backdrop: 'fui-DrawerOverlaySurface__backdrop'
+const OverlayDrawerSurfaceClassNames = {
+    root: 'fui-OverlayDrawerSurface',
+    backdrop: 'fui-OverlayDrawerSurface__backdrop'
 };
 /**
  * Styles for the backdrop slot
@@ -36,11 +36,11 @@ const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
     ]
 });
-const useDrawerOverlaySurfaceStyles_unstable = (state)=>{
+const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
     const backdropResetStyles = useBackdropResetStyles();
     const backdropStyles = useBackdropStyles();
     if (state.backdrop) {
         state.backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
     }
     return state;
-}; //# sourceMappingURL=useDrawerOverlaySurfaceStyles.styles.js.map
+}; //# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map

package/lib-commonjs/components/{DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js.map → OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlaySurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerOverlaySurfaceClassNames = {\n  root: 'fui-DrawerOverlaySurface',\n  backdrop: 'fui-DrawerOverlaySurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = /*#__PURE__*/__resetStyles(\"rivxbo\", \"r1trjn1z\", [\".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\", \".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n  nested: {\n    De3pzq: \"f1c21dwh\"\n  }\n}, {\n  d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\"]\n});\n/**\n * Apply styling to the DrawerOverlaySurface slots based on the state\n */\nexport const useDrawerOverlaySurfaceStyles_unstable = state => {\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDrawerOverlaySurfaceStyles.styles.js.map"],"names":["drawerOverlaySurfaceClassNames","useDrawerOverlaySurfaceStyles_unstable","root","backdrop","useBackdropResetStyles","__resetStyles","useBackdropStyles","__styles","nested","De3pzq","d","state","backdropResetStyles","backdropStyles","className","mergeClasses","isNestedDialog"],"mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IAkBAC,sCAAsC;eAAtCA;;;uBApBqD;AAE3D,MAAMD,iCAAiC;IAC5CE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,UAAU,YAAY;IAAC;IAAsG;CAAuG;AAC9R,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC9CC,QAAQ;QACNC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiE;AACvE;AAIO,MAAMT,yCAAyCU,CAAAA;IACpD,MAAMC,sBAAsBR;IAC5B,MAAMS,iBAAiBP;IACvB,IAAIK,MAAMR,QAAQ,EAAE;QAClBQ,MAAMR,QAAQ,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACH,qBAAqBD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAAEG,MAAMR,QAAQ,CAACW,SAAS;IACtI;IACA,OAAOH;AACT,GACA,gEAAgE"}
+{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n  root: 'fui-OverlayDrawerSurface',\n  backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = /*#__PURE__*/__resetStyles(\"rivxbo\", \"r1trjn1z\", [\".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\", \".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n  nested: {\n    De3pzq: \"f1c21dwh\"\n  }\n}, {\n  d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\"]\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = state => {\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map"],"names":["OverlayDrawerSurfaceClassNames","useOverlayDrawerSurfaceStyles_unstable","root","backdrop","useBackdropResetStyles","__resetStyles","useBackdropStyles","__styles","nested","De3pzq","d","state","backdropResetStyles","backdropStyles","className","mergeClasses","isNestedDialog"],"mappings":";;;;;;;;;;;IAEaA,8BAA8B;eAA9BA;;IAkBAC,sCAAsC;eAAtCA;;;uBApBqD;AAE3D,MAAMD,iCAAiC;IAC5CE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,UAAU,YAAY;IAAC;IAAsG;CAAuG;AAC9R,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC9CC,QAAQ;QACNC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiE;AACvE;AAIO,MAAMT,yCAAyCU,CAAAA;IACpD,MAAMC,sBAAsBR;IAC5B,MAAMS,iBAAiBP;IACvB,IAAIK,MAAMR,QAAQ,EAAE;QAClBQ,MAAMR,QAAQ,CAACW,SAAS,GAAGC,IAAAA,mBAAY,EAACH,qBAAqBD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAAEG,MAAMR,QAAQ,CAACW,SAAS;IACtI;IACA,OAAOH;AACT,GACA,gEAAgE"}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./OverlayDrawer"), exports);
+_export_star._(require("./OverlayDrawer.types"), exports);
+_export_star._(require("./renderOverlayDrawer"), exports);
+_export_star._(require("./useOverlayDrawer"), exports);
+_export_star._(require("./useOverlayDrawerStyles.styles"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './OverlayDrawer';\nexport * from './OverlayDrawer.types';\nexport * from './renderOverlayDrawer';\nexport * from './useOverlayDrawer';\nexport * from './useOverlayDrawerStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/{DrawerOverlay/renderDrawerOverlay.js → OverlayDrawer/renderOverlayDrawer.js}

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "renderDrawerOverlay_unstable", {
+Object.defineProperty(exports, "renderOverlayDrawer_unstable", {
     enumerable: true,
     get: function() {
-        return renderDrawerOverlay_unstable;
+        return renderOverlayDrawer_unstable;
     }
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const renderDrawerOverlay_unstable = (state)=>{
+const renderOverlayDrawer_unstable = (state)=>{
     if (!state.motion.canRender) {
         return null;
     }

package/lib-commonjs/components/{DrawerOverlay/renderDrawerOverlay.js.map → OverlayDrawer/renderOverlayDrawer.js.map}

@@ -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';\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(state.dialog, {\n        children: /*#__PURE__*/ _jsx(state.root, {})\n    });\n};\n"],"names":["renderDrawerOverlay_unstable","state","motion","canRender","assertSlots","_jsx","dialog","children","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,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,EAACJ,MAAMK,MAAM,EAAE;QACpCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACJ,MAAMO,IAAI,EAAE,CAAC;IAC9C;AACJ"}
+{"version":3,"sources":["renderOverlayDrawer.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 OverlayDrawer\n */ export const renderOverlayDrawer_unstable = (state)=>{\n    if (!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":["renderOverlayDrawer_unstable","state","motion","canRender","assertSlots","_jsx","dialog","children","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,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,EAACJ,MAAMK,MAAM,EAAE;QACpCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACJ,MAAMO,IAAI,EAAE,CAAC;IAC9C;AACJ"}

package/lib-commonjs/components/{DrawerOverlay/useDrawerOverlay.js → OverlayDrawer/useOverlayDrawer.js}

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useDrawerOverlay_unstable", {
+Object.defineProperty(exports, "useOverlayDrawer_unstable", {
     enumerable: true,
     get: function() {
-        return useDrawerOverlay_unstable;
+        return useOverlayDrawer_unstable;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
@@ -14,25 +14,22 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactdialog = require("@fluentui/react-dialog");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
-const _DrawerOverlaySurface = require("./DrawerOverlaySurface");
-const useDrawerOverlay_unstable = (props, ref)=>{
+const _OverlayDrawerSurface = require("./OverlayDrawerSurface");
+const useOverlayDrawer_unstable = (props, ref)=>{
     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 backdropInnerProps = _reactutilities.slot.resolveShorthand(props.backdrop);
-    const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null;
-    const backdropProps = {
-        ...backdropInnerProps,
-        ref: (0, _reactutilities.useMergedRefs)(backdropMotion.ref, backdropInnerProps === null || backdropInnerProps === void 0 ? void 0 : backdropInnerProps.ref)
-    };
+    const motion = (0, _reactmotionpreview.useMotion)(open);
+    const backdropProps = _reactutilities.slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
     const root = _reactutilities.slot.always({
         ...props,
-        backdrop: hasCustomBackdrop ? backdropProps : null
+        backdrop: hasCustomBackdrop ? {
+            ...backdropProps
+        } : null
     }, {
-        elementType: _DrawerOverlaySurface.DrawerOverlaySurface,
+        elementType: _OverlayDrawerSurface.OverlayDrawerSurface,
         defaultProps: {
-            ref: (0, _reactutilities.useMergedRefs)(ref, drawerMotion.ref)
+            ref: (0, _reactutilities.useMergedRefs)(ref, motion.ref)
         }
     });
     const dialog = _reactutilities.slot.always({
@@ -41,7 +38,7 @@ const useDrawerOverlay_unstable = (props, ref)=>{
         onOpenChange,
         inertTrapFocus,
         modalType,
-        /*
+        /**
        * children is not needed here because we construct the children in the render function,
        * but it's required by DialogProps
        */ children: null
@@ -50,14 +47,13 @@ const useDrawerOverlay_unstable = (props, ref)=>{
     });
     return {
         components: {
-            root: _DrawerOverlaySurface.DrawerOverlaySurface,
+            root: _OverlayDrawerSurface.OverlayDrawerSurface,
             dialog: _reactdialog.Dialog
         },
         root,
         dialog,
         size,
         position,
-        motion: drawerMotion,
-        backdropMotion
+        motion
     };
 };

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverlayDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */ export const useOverlayDrawer_unstable = (props, ref)=>{\n    const { open, size, position } = useDrawerDefaultProps(props);\n    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n    const motion = useMotion(open);\n    const backdropProps = slot.resolveShorthand(props.backdrop);\n    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n    const root = slot.always({\n        ...props,\n        backdrop: hasCustomBackdrop ? {\n            ...backdropProps\n        } : null\n    }, {\n        elementType: OverlayDrawerSurface,\n        defaultProps: {\n            ref: useMergedRefs(ref, motion.ref)\n        }\n    });\n    const dialog = slot.always({\n        open: true,\n        defaultOpen,\n        onOpenChange,\n        inertTrapFocus,\n        modalType,\n        /**\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */ children: null\n    }, {\n        elementType: Dialog\n    });\n    return {\n        components: {\n            root: OverlayDrawerSurface,\n            dialog: Dialog\n        },\n        root,\n        dialog,\n        size,\n        position,\n        motion\n    };\n};\n"],"names":["useOverlayDrawer_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","useMotion","backdropProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","OverlayDrawerSurface","defaultProps","useMergedRefs","dialog","children","Dialog","components"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;6BACb;oCACG;uCACY;sCACD;AAS1B,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,SAASC,IAAAA,6BAAS,EAACT;IACzB,MAAMU,gBAAgBC,oBAAI,CAACC,gBAAgB,CAACd,MAAMe,QAAQ;IAC1D,MAAMC,oBAAoBV,cAAc,eAAeM,kBAAkB;IACzE,MAAMK,OAAOJ,oBAAI,CAACK,MAAM,CAAC;QACrB,GAAGlB,KAAK;QACRe,UAAUC,oBAAoB;YAC1B,GAAGJ,aAAa;QACpB,IAAI;IACR,GAAG;QACCO,aAAaC,0CAAoB;QACjCC,cAAc;YACVpB,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKS,OAAOT,GAAG;QACtC;IACJ;IACA,MAAMsB,SAASV,oBAAI,CAACK,MAAM,CAAC;QACvBhB,MAAM;QACNM;QACAC;QACAF;QACAD;QACA;;;OAGD,GAAGkB,UAAU;IAChB,GAAG;QACCL,aAAaM,mBAAM;IACvB;IACA,OAAO;QACHC,YAAY;YACRT,MAAMG,0CAAoB;YAC1BG,QAAQE,mBAAM;QAClB;QACAR;QACAM;QACApB;QACAC;QACAM;IACJ;AACJ"}