@fluentui/react-drawer 9.0.0-beta.20 → 9.0.0-beta.21

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\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 HTMLElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n    const { open , defaultOpen , size , position  } = getDefaultDrawerProps(props);\n    const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;\n    return {\n        components: {\n            root: DialogSurface,\n            backdrop: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: DialogSurface\n        }),\n        dialog: {\n            open,\n            defaultOpen,\n            onOpenChange,\n            inertTrapFocus,\n            modalType\n        },\n        size,\n        position\n    };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","getDefaultDrawerProps","modalType","inertTrapFocus","onOpenChange","components","root","DialogSurface","backdrop","slot","always","getNativeElementProps","elementType","dialog"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACqB;6BACd;uCACQ;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC,MAAM;IACvD,MAAM,EAAEC,KAAI,EAAGC,YAAW,EAAGC,KAAI,EAAGC,SAAQ,EAAG,GAAGC,IAAAA,4CAAqB,EAACN;IACxE,MAAM,EAAEO,WAAW,QAAO,EAAGC,eAAc,EAAGC,aAAY,EAAG,GAAGT;IAChE,OAAO;QACHU,YAAY;YACRC,MAAMC,0BAAa;YACnBC,UAAU;QACd;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3Cf;YACA,GAAGD,KAAK;QACZ,IAAI;YACAiB,aAAaL,0BAAa;QAC9B;QACAM,QAAQ;YACJhB;YACAC;YACAM;YACAD;YACAD;QACJ;QACAH;QACAC;IACJ;AACJ"}
+{"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 { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';\nimport { useMotion } from '@fluentui/react-motion-preview';\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;uCACQ;oCACZ;AASf,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"}

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

@@ -9,39 +9,90 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    drawerOverlayClassNames: ()=>drawerOverlayClassNames,
-    useDrawerOverlayStyles_unstable: ()=>useDrawerOverlayStyles_unstable
+    drawerOverlayClassNames: function() {
+        return drawerOverlayClassNames;
+    },
+    useDrawerOverlayStyles_unstable: function() {
+        return useDrawerOverlayStyles_unstable;
+    }
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = require("@griffel/react");
-const _useDrawerBaseStylesStyles = require("../../util/useDrawerBaseStyles.styles");
-const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _useDrawerBaseStylesstyles = require("../../util/useDrawerBaseStyles.styles");
 const drawerOverlayClassNames = {
     root: 'fui-DrawerOverlay',
     backdrop: 'fui-DrawerOverlay__backdrop'
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
+ */ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     root: {
         qhf8xq: "f19dog8a",
         Bhzewxz: "f15twtuk",
-        B5kzvoi: "f1yab3r1"
+        B5kzvoi: "f1yab3r1",
+        abs64n: "fk73vx1",
+        E5pizo: "fliqkoi",
+        Bmy1vo4: "f1neo61",
+        Es3by: "f1ytgekk"
+    },
+    start: {
+        Bz10aip: "f1d8gkik"
+    },
+    end: {
+        Bz10aip: "f1g0pcr8"
+    },
+    visible: {
+        abs64n: "f5p0z4x",
+        Bz10aip: "f87uvqx",
+        E5pizo: "f10nrhrw"
     }
 }, {
     d: [
         ".f19dog8a{position:fixed;}",
         ".f15twtuk{top:0;}",
-        ".f1yab3r1{bottom: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);}"
+    ]
+});
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
+    backdrop: {
+        abs64n: "fk73vx1",
+        Bmy1vo4: "f13u1uyl",
+        Bkqvd7p: "f17wnm97",
+        Es3by: "f1gqqdtu"
+    },
+    visible: {
+        abs64n: "f5p0z4x"
+    }
+}, {
+    d: [
+        ".fk73vx1{opacity:0;}",
+        ".f13u1uyl{transition-property:opacity;}",
+        ".f17wnm97{transition-timing-function:var(--curveEasyEase);}",
+        ".f1gqqdtu{will-change:opacity;}",
+        ".f5p0z4x{opacity:1;}"
     ]
 });
 const useDrawerOverlayStyles_unstable = (state)=>{
-    const baseStyles = (0, _useDrawerBaseStylesStyles.useDrawerBaseStyles)();
-    const styles = useStyles();
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const rootStyles = useDrawerRootStyles();
+    const backdropMotionStyles = useBackdropMotionStyles();
+    const durationStyles = (0, _useDrawerBaseStylesstyles.useDrawerDurationStyles)();
     const backdrop = state.root.backdrop;
-    state.root.className = (0, _react.mergeClasses)(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
     if (backdrop) {
-        backdrop.className = (0, _react.mergeClasses)(drawerOverlayClassNames.backdrop, backdrop.className);
+        backdrop.className = (0, _react1.mergeClasses)(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);
     }
     return state;
 }; //# sourceMappingURL=useDrawerOverlayStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport * as React from 'react';\nexport const drawerOverlayClassNames = {\n  root: 'fui-DrawerOverlay',\n  backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    qhf8xq: \"f19dog8a\",\n    Bhzewxz: \"f15twtuk\",\n    B5kzvoi: \"f1yab3r1\"\n  }\n}, {\n  d: [\".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\"]\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n  const baseStyles = useDrawerBaseStyles();\n  const styles = useStyles();\n  const backdrop = state.root.backdrop;\n  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n  if (backdrop) {\n    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useStyles","__styles","qhf8xq","Bhzewxz","B5kzvoi","d","state","baseStyles","useDrawerBaseStyles","styles","className","mergeClasses","size","position"],"mappings":";;;;;;;;;;;IAGaA,uBAAuB,MAAvBA;IAmBAC,+BAA+B,MAA/BA;;;uBAtB0B;2CACH;8DACb;AAChB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCH,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA8B;QAAqB;KAAuB;AAChF;AAIO,MAAMR,kCAAkCS,CAAAA,QAAS;IACtD,MAAMC,aAAaC,IAAAA,8CAAmB;IACtC,MAAMC,SAAST;IACf,MAAMD,WAAWO,MAAMR,IAAI,CAACC,QAAQ;IACpCO,MAAMR,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,wBAAwBE,IAAI,EAAES,WAAWT,IAAI,EAAEW,OAAOX,IAAI,EAAEQ,MAAMM,IAAI,IAAIL,UAAU,CAACD,MAAMM,IAAI,CAAC,EAAEN,MAAMO,QAAQ,IAAIN,UAAU,CAACD,MAAMO,QAAQ,CAAC,EAAEP,MAAMR,IAAI,CAACY,SAAS;IACxM,IAAIX,UAAU;QACZA,SAASW,SAAS,GAAGC,IAAAA,mBAAY,EAACf,wBAAwBG,QAAQ,EAAEA,SAASW,SAAS;IACxF,CAAC;IACD,OAAOJ;AACT,GACA,yDAAyD"}
+{"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 { useDrawerBaseClassNames, drawerCSSVars, useDrawerDurationStyles } from '../../util/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"}

package/lib-commonjs/index.js

@@ -9,50 +9,126 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    Drawer: ()=>_drawer.Drawer,
-    renderDrawer_unstable: ()=>_drawer.renderDrawer_unstable,
-    useDrawer_unstable: ()=>_drawer.useDrawer_unstable,
-    DrawerOverlay: ()=>_drawerOverlay.DrawerOverlay,
-    drawerOverlayClassNames: ()=>_drawerOverlay.drawerOverlayClassNames,
-    renderDrawerOverlay_unstable: ()=>_drawerOverlay.renderDrawerOverlay_unstable,
-    useDrawerOverlayStyles_unstable: ()=>_drawerOverlay.useDrawerOverlayStyles_unstable,
-    useDrawerOverlay_unstable: ()=>_drawerOverlay.useDrawerOverlay_unstable,
-    DrawerInline: ()=>_drawerInline.DrawerInline,
-    drawerInlineClassNames: ()=>_drawerInline.drawerInlineClassNames,
-    renderDrawerInline_unstable: ()=>_drawerInline.renderDrawerInline_unstable,
-    useDrawerInlineStyles_unstable: ()=>_drawerInline.useDrawerInlineStyles_unstable,
-    useDrawerInline_unstable: ()=>_drawerInline.useDrawerInline_unstable,
-    DrawerBody: ()=>_drawerBody.DrawerBody,
-    drawerBodyClassNames: ()=>_drawerBody.drawerBodyClassNames,
-    renderDrawerBody_unstable: ()=>_drawerBody.renderDrawerBody_unstable,
-    useDrawerBodyStyles_unstable: ()=>_drawerBody.useDrawerBodyStyles_unstable,
-    useDrawerBody_unstable: ()=>_drawerBody.useDrawerBody_unstable,
-    DrawerHeader: ()=>_drawerHeader.DrawerHeader,
-    drawerHeaderClassNames: ()=>_drawerHeader.drawerHeaderClassNames,
-    renderDrawerHeader_unstable: ()=>_drawerHeader.renderDrawerHeader_unstable,
-    useDrawerHeaderStyles_unstable: ()=>_drawerHeader.useDrawerHeaderStyles_unstable,
-    useDrawerHeader_unstable: ()=>_drawerHeader.useDrawerHeader_unstable,
-    DrawerHeaderTitle: ()=>_drawerHeaderTitle.DrawerHeaderTitle,
-    drawerHeaderTitleClassNames: ()=>_drawerHeaderTitle.drawerHeaderTitleClassNames,
-    renderDrawerHeaderTitle_unstable: ()=>_drawerHeaderTitle.renderDrawerHeaderTitle_unstable,
-    useDrawerHeaderTitleStyles_unstable: ()=>_drawerHeaderTitle.useDrawerHeaderTitleStyles_unstable,
-    useDrawerHeaderTitle_unstable: ()=>_drawerHeaderTitle.useDrawerHeaderTitle_unstable,
-    DrawerHeaderNavigation: ()=>_drawerHeaderNavigation.DrawerHeaderNavigation,
-    drawerHeaderNavigationClassNames: ()=>_drawerHeaderNavigation.drawerHeaderNavigationClassNames,
-    renderDrawerHeaderNavigation_unstable: ()=>_drawerHeaderNavigation.renderDrawerHeaderNavigation_unstable,
-    useDrawerHeaderNavigationStyles_unstable: ()=>_drawerHeaderNavigation.useDrawerHeaderNavigationStyles_unstable,
-    useDrawerHeaderNavigation_unstable: ()=>_drawerHeaderNavigation.useDrawerHeaderNavigation_unstable,
-    DrawerFooter: ()=>_drawerFooter.DrawerFooter,
-    drawerFooterClassNames: ()=>_drawerFooter.drawerFooterClassNames,
-    renderDrawerFooter_unstable: ()=>_drawerFooter.renderDrawerFooter_unstable,
-    useDrawerFooterStyles_unstable: ()=>_drawerFooter.useDrawerFooterStyles_unstable,
-    useDrawerFooter_unstable: ()=>_drawerFooter.useDrawerFooter_unstable
+    Drawer: function() {
+        return _Drawer.Drawer;
+    },
+    renderDrawer_unstable: function() {
+        return _Drawer.renderDrawer_unstable;
+    },
+    useDrawer_unstable: function() {
+        return _Drawer.useDrawer_unstable;
+    },
+    DrawerOverlay: function() {
+        return _DrawerOverlay.DrawerOverlay;
+    },
+    drawerOverlayClassNames: function() {
+        return _DrawerOverlay.drawerOverlayClassNames;
+    },
+    renderDrawerOverlay_unstable: function() {
+        return _DrawerOverlay.renderDrawerOverlay_unstable;
+    },
+    useDrawerOverlayStyles_unstable: function() {
+        return _DrawerOverlay.useDrawerOverlayStyles_unstable;
+    },
+    useDrawerOverlay_unstable: function() {
+        return _DrawerOverlay.useDrawerOverlay_unstable;
+    },
+    DrawerInline: function() {
+        return _DrawerInline.DrawerInline;
+    },
+    drawerInlineClassNames: function() {
+        return _DrawerInline.drawerInlineClassNames;
+    },
+    renderDrawerInline_unstable: function() {
+        return _DrawerInline.renderDrawerInline_unstable;
+    },
+    useDrawerInlineStyles_unstable: function() {
+        return _DrawerInline.useDrawerInlineStyles_unstable;
+    },
+    useDrawerInline_unstable: function() {
+        return _DrawerInline.useDrawerInline_unstable;
+    },
+    DrawerBody: function() {
+        return _DrawerBody.DrawerBody;
+    },
+    drawerBodyClassNames: function() {
+        return _DrawerBody.drawerBodyClassNames;
+    },
+    renderDrawerBody_unstable: function() {
+        return _DrawerBody.renderDrawerBody_unstable;
+    },
+    useDrawerBodyStyles_unstable: function() {
+        return _DrawerBody.useDrawerBodyStyles_unstable;
+    },
+    useDrawerBody_unstable: function() {
+        return _DrawerBody.useDrawerBody_unstable;
+    },
+    DrawerHeader: function() {
+        return _DrawerHeader.DrawerHeader;
+    },
+    drawerHeaderClassNames: function() {
+        return _DrawerHeader.drawerHeaderClassNames;
+    },
+    renderDrawerHeader_unstable: function() {
+        return _DrawerHeader.renderDrawerHeader_unstable;
+    },
+    useDrawerHeaderStyles_unstable: function() {
+        return _DrawerHeader.useDrawerHeaderStyles_unstable;
+    },
+    useDrawerHeader_unstable: function() {
+        return _DrawerHeader.useDrawerHeader_unstable;
+    },
+    DrawerHeaderTitle: function() {
+        return _DrawerHeaderTitle.DrawerHeaderTitle;
+    },
+    drawerHeaderTitleClassNames: function() {
+        return _DrawerHeaderTitle.drawerHeaderTitleClassNames;
+    },
+    renderDrawerHeaderTitle_unstable: function() {
+        return _DrawerHeaderTitle.renderDrawerHeaderTitle_unstable;
+    },
+    useDrawerHeaderTitleStyles_unstable: function() {
+        return _DrawerHeaderTitle.useDrawerHeaderTitleStyles_unstable;
+    },
+    useDrawerHeaderTitle_unstable: function() {
+        return _DrawerHeaderTitle.useDrawerHeaderTitle_unstable;
+    },
+    DrawerHeaderNavigation: function() {
+        return _DrawerHeaderNavigation.DrawerHeaderNavigation;
+    },
+    drawerHeaderNavigationClassNames: function() {
+        return _DrawerHeaderNavigation.drawerHeaderNavigationClassNames;
+    },
+    renderDrawerHeaderNavigation_unstable: function() {
+        return _DrawerHeaderNavigation.renderDrawerHeaderNavigation_unstable;
+    },
+    useDrawerHeaderNavigationStyles_unstable: function() {
+        return _DrawerHeaderNavigation.useDrawerHeaderNavigationStyles_unstable;
+    },
+    useDrawerHeaderNavigation_unstable: function() {
+        return _DrawerHeaderNavigation.useDrawerHeaderNavigation_unstable;
+    },
+    DrawerFooter: function() {
+        return _DrawerFooter.DrawerFooter;
+    },
+    drawerFooterClassNames: function() {
+        return _DrawerFooter.drawerFooterClassNames;
+    },
+    renderDrawerFooter_unstable: function() {
+        return _DrawerFooter.renderDrawerFooter_unstable;
+    },
+    useDrawerFooterStyles_unstable: function() {
+        return _DrawerFooter.useDrawerFooterStyles_unstable;
+    },
+    useDrawerFooter_unstable: function() {
+        return _DrawerFooter.useDrawerFooter_unstable;
+    }
 });
-const _drawer = require("./Drawer");
-const _drawerOverlay = require("./DrawerOverlay");
-const _drawerInline = require("./DrawerInline");
-const _drawerBody = require("./DrawerBody");
-const _drawerHeader = require("./DrawerHeader");
-const _drawerHeaderTitle = require("./DrawerHeaderTitle");
-const _drawerHeaderNavigation = require("./DrawerHeaderNavigation");
-const _drawerFooter = require("./DrawerFooter");
+const _Drawer = require("./Drawer");
+const _DrawerOverlay = require("./DrawerOverlay");
+const _DrawerInline = require("./DrawerInline");
+const _DrawerBody = require("./DrawerBody");
+const _DrawerHeader = require("./DrawerHeader");
+const _DrawerHeaderTitle = require("./DrawerHeaderTitle");
+const _DrawerHeaderNavigation = require("./DrawerHeaderNavigation");
+const _DrawerFooter = require("./DrawerFooter");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';\nexport { DrawerOverlay, drawerOverlayClassNames, renderDrawerOverlay_unstable, useDrawerOverlayStyles_unstable, useDrawerOverlay_unstable } from './DrawerOverlay';\nexport { DrawerInline, drawerInlineClassNames, renderDrawerInline_unstable, useDrawerInlineStyles_unstable, useDrawerInline_unstable } from './DrawerInline';\nexport { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './DrawerBody';\nexport { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './DrawerHeader';\nexport { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './DrawerHeaderTitle';\nexport { DrawerHeaderNavigation, drawerHeaderNavigationClassNames, renderDrawerHeaderNavigation_unstable, useDrawerHeaderNavigationStyles_unstable, useDrawerHeaderNavigation_unstable } from './DrawerHeaderNavigation';\nexport { DrawerFooter, drawerFooterClassNames, renderDrawerFooter_unstable, useDrawerFooterStyles_unstable, useDrawerFooter_unstable } from './DrawerFooter';\n"],"names":["Drawer","renderDrawer_unstable","useDrawer_unstable","DrawerOverlay","drawerOverlayClassNames","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","useDrawerOverlay_unstable","DrawerInline","drawerInlineClassNames","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","useDrawerInline_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":";;;;;;;;;;;IAASA,MAAM,MAANA,cAAM;IAAEC,qBAAqB,MAArBA,6BAAqB;IAAEC,kBAAkB,MAAlBA,0BAAkB;IACjDC,aAAa,MAAbA,4BAAa;IAAEC,uBAAuB,MAAvBA,sCAAuB;IAAEC,4BAA4B,MAA5BA,2CAA4B;IAAEC,+BAA+B,MAA/BA,8CAA+B;IAAEC,yBAAyB,MAAzBA,wCAAyB;IAChIC,YAAY,MAAZA,0BAAY;IAAEC,sBAAsB,MAAtBA,oCAAsB;IAAEC,2BAA2B,MAA3BA,yCAA2B;IAAEC,8BAA8B,MAA9BA,4CAA8B;IAAEC,wBAAwB,MAAxBA,sCAAwB;IAC3HC,UAAU,MAAVA,sBAAU;IAAEC,oBAAoB,MAApBA,gCAAoB;IAAEC,yBAAyB,MAAzBA,qCAAyB;IAAEC,4BAA4B,MAA5BA,wCAA4B;IAAEC,sBAAsB,MAAtBA,kCAAsB;IACjHC,YAAY,MAAZA,0BAAY;IAAEC,sBAAsB,MAAtBA,oCAAsB;IAAEC,2BAA2B,MAA3BA,yCAA2B;IAAEC,8BAA8B,MAA9BA,4CAA8B;IAAEC,wBAAwB,MAAxBA,sCAAwB;IAC3HC,iBAAiB,MAAjBA,oCAAiB;IAAEC,2BAA2B,MAA3BA,8CAA2B;IAAEC,gCAAgC,MAAhCA,mDAAgC;IAAEC,mCAAmC,MAAnCA,sDAAmC;IAAEC,6BAA6B,MAA7BA,gDAA6B;IACpJC,sBAAsB,MAAtBA,8CAAsB;IAAEC,gCAAgC,MAAhCA,wDAAgC;IAAEC,qCAAqC,MAArCA,6DAAqC;IAAEC,wCAAwC,MAAxCA,gEAAwC;IAAEC,kCAAkC,MAAlCA,0DAAkC;IAC7KC,YAAY,MAAZA,0BAAY;IAAEC,sBAAsB,MAAtBA,oCAAsB;IAAEC,2BAA2B,MAA3BA,yCAA2B;IAAEC,8BAA8B,MAA9BA,4CAA8B;IAAEC,wBAAwB,MAAxBA,sCAAwB;;wBAPlE;+BAC+E;8BACL;4BACV;8BACU;mCACyB;wCACyB;8BAClD"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';\nexport { DrawerOverlay, drawerOverlayClassNames, renderDrawerOverlay_unstable, useDrawerOverlayStyles_unstable, useDrawerOverlay_unstable } from './DrawerOverlay';\nexport { DrawerInline, drawerInlineClassNames, renderDrawerInline_unstable, useDrawerInlineStyles_unstable, useDrawerInline_unstable } from './DrawerInline';\nexport { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './DrawerBody';\nexport { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './DrawerHeader';\nexport { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './DrawerHeaderTitle';\nexport { DrawerHeaderNavigation, drawerHeaderNavigationClassNames, renderDrawerHeaderNavigation_unstable, useDrawerHeaderNavigationStyles_unstable, useDrawerHeaderNavigation_unstable } from './DrawerHeaderNavigation';\nexport { DrawerFooter, drawerFooterClassNames, renderDrawerFooter_unstable, useDrawerFooterStyles_unstable, useDrawerFooter_unstable } from './DrawerFooter';\n"],"names":["Drawer","renderDrawer_unstable","useDrawer_unstable","DrawerOverlay","drawerOverlayClassNames","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","useDrawerOverlay_unstable","DrawerInline","drawerInlineClassNames","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","useDrawerInline_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IACjDC,aAAa;eAAbA,4BAAa;;IAAEC,uBAAuB;eAAvBA,sCAAuB;;IAAEC,4BAA4B;eAA5BA,2CAA4B;;IAAEC,+BAA+B;eAA/BA,8CAA+B;;IAAEC,yBAAyB;eAAzBA,wCAAyB;;IAChIC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;IAC3HC,UAAU;eAAVA,sBAAU;;IAAEC,oBAAoB;eAApBA,gCAAoB;;IAAEC,yBAAyB;eAAzBA,qCAAyB;;IAAEC,4BAA4B;eAA5BA,wCAA4B;;IAAEC,sBAAsB;eAAtBA,kCAAsB;;IACjHC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;IAC3HC,iBAAiB;eAAjBA,oCAAiB;;IAAEC,2BAA2B;eAA3BA,8CAA2B;;IAAEC,gCAAgC;eAAhCA,mDAAgC;;IAAEC,mCAAmC;eAAnCA,sDAAmC;;IAAEC,6BAA6B;eAA7BA,gDAA6B;;IACpJC,sBAAsB;eAAtBA,8CAAsB;;IAAEC,gCAAgC;eAAhCA,wDAAgC;;IAAEC,qCAAqC;eAArCA,6DAAqC;;IAAEC,wCAAwC;eAAxCA,gEAAwC;;IAAEC,kCAAkC;eAAlCA,0DAAkC;;IAC7KC,YAAY;eAAZA,0BAAY;;IAAEC,sBAAsB;eAAtBA,oCAAsB;;IAAEC,2BAA2B;eAA3BA,yCAA2B;;IAAEC,8BAA8B;eAA9BA,4CAA8B;;IAAEC,wBAAwB;eAAxBA,sCAAwB;;;wBAPlE;+BAC+E;8BACL;4BACV;8BACU;mCACyB;wCACyB;8BAClD"}

package/lib-commonjs/util/useDrawerBaseStyles.styles.js

@@ -2,12 +2,31 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useDrawerBaseStyles", {
-    enumerable: true,
-    get: ()=>useDrawerBaseStyles
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    drawerCSSVars: function() {
+        return drawerCSSVars;
+    },
+    useDrawerBaseStyles: function() {
+        return useDrawerBaseStyles;
+    },
+    useDrawerDurationStyles: function() {
+        return useDrawerDurationStyles;
+    },
+    useDrawerBaseClassNames: function() {
+        return useDrawerBaseClassNames;
+    }
 });
 const _react = require("@griffel/react");
-const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
+const drawerCSSVars = {
+    drawerSizeVar: '--fui-Drawer--size'
+};
+const useDrawerBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
     root: {
         z8tnut: "f1g0x7ka",
         z189sj: [
@@ -47,6 +66,7 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
             "f1rvrf73",
             "f1358rze"
         ],
+        a9b677: "f3rx6dk",
         B2u0y6b: "f1w39fev",
         Bqenvij: "f11ysow2",
         B7ck84d: "f1ewtqcl",
@@ -56,6 +76,15 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
         Brf1p80: "fbhxue7",
         De3pzq: "fxugw4r"
     },
+    entering: {
+        Bkqvd7p: "f18ad807"
+    },
+    exiting: {
+        Bkqvd7p: "f1mfizis"
+    },
+    reducedMotion: {
+        Hwfdqs: "f5e8c63"
+    },
     start: {
         oyh7mz: [
             "f1vgc2s3",
@@ -77,17 +106,16 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ]
     },
     small: {
-        a9b677: "f1nfxovz"
+        Bjr0ffy: "f1exhnwo"
     },
     medium: {
-        a9b677: "fb8d3vz"
+        Bjr0ffy: "fqofjzu"
     },
     large: {
-        a9b677: "fi96w9z"
+        Bjr0ffy: "fce6y3m"
     },
     full: {
-        a9b677: "fr97h3j",
-        B2u0y6b: "f1w39fev"
+        Bjr0ffy: "fsdmzs6"
     }
 }, {
     d: [
@@ -105,6 +133,7 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".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;}",
@@ -113,13 +142,49 @@ const useDrawerBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".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;}",
-        ".f1nfxovz{width:320px;}",
-        ".fb8d3vz{width:592px;}",
-        ".fi96w9z{width:940px;}",
-        ".fr97h3j{width:100vw;}"
+        ".f1exhnwo{--fui-Drawer--size:320px;}",
+        ".fqofjzu{--fui-Drawer--size:592px;}",
+        ".fce6y3m{--fui-Drawer--size:940px;}",
+        ".fsdmzs6{--fui-Drawer--size:100vw;}"
+    ],
+    m: [
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ]
     ]
-}); //# sourceMappingURL=useDrawerBaseStyles.styles.js.map
+});
+const useDrawerDurationStyles = /*#__PURE__*/ (0, _react.__styles)({
+    small: {
+        B3o57yi: "fc397y7"
+    },
+    medium: {
+        B3o57yi: "f78771"
+    },
+    large: {
+        B3o57yi: "f9ymmep"
+    },
+    full: {
+        B3o57yi: "f1loko9l"
+    }
+}, {
+    d: [
+        ".fc397y7{transition-duration:var(--durationGentle);}",
+        ".f78771{transition-duration:var(--durationSlow);}",
+        ".f9ymmep{transition-duration:var(--durationSlower);}",
+        ".f1loko9l{transition-duration:var(--durationUltraSlow);}"
+    ]
+});
+const useDrawerBaseClassNames = ({ position, size, motion })=>{
+    const baseStyles = useDrawerBaseStyles();
+    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);
+}; //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

package/lib-commonjs/util/useDrawerBaseStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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    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  start: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  end: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  small: {\n    a9b677: \"f1nfxovz\"\n  },\n  medium: {\n    a9b677: \"fb8d3vz\"\n  },\n  large: {\n    a9b677: \"fi96w9z\"\n  },\n  full: {\n    a9b677: \"fr97h3j\",\n    B2u0y6b: \"f1w39fev\"\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;}\", \".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);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1nfxovz{width:320px;}\", \".fb8d3vz{width:592px;}\", \".fi96w9z{width:940px;}\", \".fr97h3j{width:100vw;}\"]\n});\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["useDrawerBaseStyles","__styles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","start","oyh7mz","j35jbq","end","small","a9b677","medium","large","full","d"],"mappings":";;;;+BAKaA;;aAAAA;;uBALwB;AAK9B,MAAMA,sBAAsB,WAAW,GAAEC,IAAAA,kBAAQ,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,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,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,QAAQ;IACV;IACAC,QAAQ;QACND,QAAQ;IACV;IACAE,OAAO;QACLF,QAAQ;IACV;IACAG,MAAM;QACJH,QAAQ;QACRb,SAAS;IACX;AACF,GAAG;IACDiB,GAAG;QAAC;QAA6B;QAA8B;QAA8B;QAAgC;QAAiC;QAAiC;QAA4C;QAA2C;QAAyC;QAAwC;QAAiC;QAAoC;QAAmC;QAAoC;QAA+B;QAA2B;QAAqC;QAA2B;QAAqC;QAAqC;QAAyC;QAA8D;QAAsB;QAAuB;QAAwB;QAAwB;QAA2B;QAA0B;QAA0B;KAAyB;AACr+B,IACA,sDAAsD"}
+{"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"}

package/lib-commonjs/util/useDrawerDefaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDrawerDefaultProps", {
+    enumerable: true,
+    get: function() {
+        return useDrawerDefaultProps;
+    }
+});
+function useDrawerDefaultProps(props) {
+    const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;
+    return {
+        size,
+        position,
+        open,
+        defaultOpen
+    };
+}

package/lib-commonjs/util/useDrawerDefaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrawerDefaultProps.js"],"sourcesContent":["export function useDrawerDefaultProps(props) {\n    const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;\n    return {\n        size,\n        position,\n        open,\n        defaultOpen\n    };\n}\n"],"names":["useDrawerDefaultProps","props","open","defaultOpen","size","position"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,sBAAsBC,KAAK;IACvC,MAAM,EAAEC,OAAO,KAAK,EAAEC,cAAc,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGJ;IAClF,OAAO;QACHG;QACAC;QACAH;QACAC;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.0.0-beta.20",
+  "version": "9.0.0-beta.21",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,19 +35,20 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.6.0",
-    "@fluentui/react-jsx-runtime": "^9.0.3",
-    "@fluentui/react-shared-contexts": "^9.7.2",
-    "@fluentui/react-theme": "^9.1.11",
-    "@fluentui/react-utilities": "^9.13.0",
+    "@fluentui/react-dialog": "^9.6.1",
+    "@fluentui/react-jsx-runtime": "^9.0.4",
+    "@fluentui/react-motion-preview": "^0.2.0",
+    "@fluentui/react-shared-contexts": "^9.7.3",
+    "@fluentui/react-theme": "^9.1.12",
+    "@fluentui/react-utilities": "^9.13.1",
     "@griffel/react": "^1.5.14",
-    "@swc/helpers": "^0.4.14"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@types/react": ">=16.14.0 <19.0.0",
+    "@types/react-dom": ">=16.14.0 <19.0.0",
+    "react": ">=16.14.0 <19.0.0",
+    "react-dom": ">=16.14.0 <19.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

package/lib/util/getDefaultDrawerProps.js

@@ -1,9 +0,0 @@
-export function getDefaultDrawerProps(props) {
-    const { open =false , defaultOpen =false , size ='small' , position ='start'  } = props;
-    return {
-        size,
-        position,
-        open,
-        defaultOpen
-    };
-}

package/lib/util/getDefaultDrawerProps.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["getDefaultDrawerProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function getDefaultDrawerProps(props: DrawerBaseProps) {\n  const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n    defaultOpen,\n  };\n}\n"],"names":["getDefaultDrawerProps","props","open","defaultOpen","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB,EAAE;IAC5D,MAAM,EAAEC,MAAO,KAAK,CAAA,EAAEC,aAAc,KAAK,CAAA,EAAEC,MAAO,QAAO,EAAEC,UAAW,QAAO,EAAE,GAAGJ;IAElF,OAAO;QACLG;QACAC;QACAH;QACAC;IACF;AACF,CAAC"}

package/lib-commonjs/util/getDefaultDrawerProps.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "getDefaultDrawerProps", {
-    enumerable: true,
-    get: ()=>getDefaultDrawerProps
-});
-function getDefaultDrawerProps(props) {
-    const { open =false , defaultOpen =false , size ='small' , position ='start'  } = props;
-    return {
-        size,
-        position,
-        open,
-        defaultOpen
-    };
-}

package/lib-commonjs/util/getDefaultDrawerProps.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["getDefaultDrawerProps.js"],"sourcesContent":["export function getDefaultDrawerProps(props) {\n    const { open =false , defaultOpen =false , size ='small' , position ='start'  } = props;\n    return {\n        size,\n        position,\n        open,\n        defaultOpen\n    };\n}\n"],"names":["getDefaultDrawerProps","props","open","defaultOpen","size","position"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,sBAAsBC,KAAK,EAAE;IACzC,MAAM,EAAEC,MAAM,KAAK,CAAA,EAAGC,aAAa,KAAK,CAAA,EAAGC,MAAM,QAAO,EAAGC,UAAU,QAAO,EAAG,GAAGJ;IAClF,OAAO;QACHG;QACAC;QACAH;QACAC;IACJ;AACJ"}