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

package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js

@@ -1,21 +1,16 @@
 import * as React from 'react';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
 export const drawerInlineClassNames = {
   root: 'fui-DrawerInline'
 };
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("r1aiwccr", "rzg5lxf", [".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}", ".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"]);
 /**
  * Styles for the root slot
  */
 const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
 const useDrawerRootStyles = /*#__PURE__*/__styles({
-  root: {
-    qhf8xq: "f10pi13n",
-    abs64n: "fk73vx1",
-    Bmy1vo4: "f15rjlgw",
-    Es3by: "f1blt7p"
-  },
   separatorStart: {
     Bekrc4i: ["f1hqa2wf", "finvdd3"],
     vrafjx: ["fcdblym", "fjik90z"],
@@ -37,12 +32,13 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     Bz10aip: "f87uvqx"
   }
 }, {
-  d: [".f10pi13n{position:relative;}", ".fk73vx1{opacity:0;}", ".f15rjlgw{transition-property:opacity,transform;}", ".f1blt7p{will-change:opacity,transform;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
+  d: [".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
 });
 /**
  * Apply styling to the DrawerInline slots based on the state
  */
 export const useDrawerInlineStyles_unstable = state => {
+  const resetStyles = useDrawerResetStyles();
   const baseClassNames = useDrawerBaseClassNames(state);
   const rootStyles = useDrawerRootStyles();
   const separatorClass = React.useMemo(() => {
@@ -51,7 +47,7 @@ export const useDrawerInlineStyles_unstable = state => {
     }
     return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
   }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
-  state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
+  state.root.className = mergeClasses(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerInlineStyles.styles.js.map

package/lib/components/DrawerInline/useDrawerInlineStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","useDrawerBaseClassNames","drawerInlineClassNames","root","separatorValues","colorNeutralBackground3","useDrawerRootStyles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","useDrawerInlineStyles_unstable","state","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    root: {\n        position: 'relative',\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: `translate3D(0, 0, 0)`\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,yCAAyC;AAChG,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPL,MAAM,CAACM,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAd,MAAA;IAAAY,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAuB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,cAAc,GAAGzB,uBAAuB,CAACwB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAGjC,KAAK,CAACkC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAChB,cAAc,GAAGgB,UAAU,CAACZ,YAAY;EAC3F,CAAC,EAAE,CACCU,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,UAAU,CAACZ,YAAY,EACvBY,UAAU,CAAChB,cAAc,CAC5B,CAAC;EACFc,KAAK,CAACtB,IAAI,CAAC8B,SAAS,GAAGpC,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAEuB,cAAc,EAAEC,UAAU,CAACxB,IAAI,EAAEyB,cAAc,EAAED,UAAU,CAACF,KAAK,CAACO,QAAQ,CAAC,EAAEP,KAAK,CAACS,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACL,OAAO,EAAEG,KAAK,CAACtB,IAAI,CAAC8B,SAAS,CAAC;EAC9M,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","drawerInlineClassNames","root","useDrawerResetStyles","separatorValues","colorNeutralBackground3","useDrawerRootStyles","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","abs64n","d","useDrawerInlineStyles_unstable","state","resetStyles","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\nconst useDrawerResetStyles = makeResetStyles({\n    ...drawerDefaultStyles,\n    position: 'relative',\n    opacity: 0,\n    transitionProperty: 'opacity, transform',\n    willChange: 'opacity, transform'\n});\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: `translate3D(0, 0, 0)`\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const resetStyles = useDrawerResetStyles();\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, resetStyles, baseClassNames, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACrH,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,aAAA,+tCAM5B,CAAC;AACF;AACA;AACA;AAAI,MAAMW,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPP,MAAM,CAACQ,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAa,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,WAAW,GAAGpB,oBAAoB,CAAC,CAAC;EAC1C,MAAMqB,cAAc,GAAGxB,uBAAuB,CAACsB,KAAK,CAAC;EACrD,MAAMG,UAAU,GAAGnB,mBAAmB,CAAC,CAAC;EACxC,MAAMoB,cAAc,GAAGlC,KAAK,CAACmC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACL,KAAK,CAACM,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAOP,KAAK,CAACQ,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAClB,cAAc,GAAGkB,UAAU,CAACd,YAAY;EAC3F,CAAC,EAAE,CACCW,KAAK,CAACQ,QAAQ,EACdR,KAAK,CAACM,SAAS,EACfH,UAAU,CAACd,YAAY,EACvBc,UAAU,CAAClB,cAAc,CAC5B,CAAC;EACFe,KAAK,CAACpB,IAAI,CAAC6B,SAAS,GAAGpC,YAAY,CAACM,sBAAsB,CAACC,IAAI,EAAEqB,WAAW,EAAEC,cAAc,EAAEE,cAAc,EAAED,UAAU,CAACH,KAAK,CAACQ,QAAQ,CAAC,EAAER,KAAK,CAACU,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACP,OAAO,EAAEI,KAAK,CAACpB,IAAI,CAAC6B,SAAS,CAAC;EAC1M,OAAOT,KAAK;AAChB,CAAC"}

package/lib/components/DrawerOverlay/DrawerOverlay.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n  root: Slot<DialogSurfaceProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  DrawerBaseProps &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Required<\n  Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> &\n    DrawerBaseState & {\n      dialog: DialogProps;\n      backdropMotion: MotionState<HTMLDivElement>;\n    }\n>;\n"],"names":[],"mappings":"AAAA,WA0BE"}
+{"version":3,"sources":["DrawerOverlay.types.ts"],"sourcesContent":["import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MotionState } from '@fluentui/react-motion-preview';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type DrawerOverlaySlots = DialogSurfaceSlots & {\n  root: Slot<DialogSurfaceProps>;\n\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog?: Slot<DialogProps>;\n};\n\n/**\n * DrawerOverlay Props\n */\nexport type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering DrawerOverlay\n */\nexport type DrawerOverlayState = Omit<ComponentState<DrawerOverlaySlots>, 'backdrop'> &\n  Required<\n    DrawerBaseState & {\n      backdropMotion: MotionState<HTMLDivElement>;\n    }\n  >;\n"],"names":[],"mappings":"AAAA,WA8BI"}

package/lib/components/DrawerOverlay/renderDrawerOverlay.js

@@ -1,15 +1,13 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
-import { Dialog } from '@fluentui/react-dialog';
 /**
  * Render the final JSX of DrawerOverlay
  */ export const renderDrawerOverlay_unstable = (state)=>{
-    if (!state.motion.canRender) {
+    if (!state.dialog || !state.motion.canRender) {
         return null;
     }
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(Dialog, {
-        ...state.dialog,
+    return /*#__PURE__*/ _jsx(state.dialog, {
         children: /*#__PURE__*/ _jsx(state.root, {})
     });
 };

package/lib/components/DrawerOverlay/renderDrawerOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\n\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <state.root />\n    </Dialog>\n  );\n};\n"],"names":["assertSlots","Dialog","renderDrawerOverlay_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,MAAM,QAAQ,yBAAyB;AAIhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAL,YAAgCG;IAEhC,qBACE,KAACF;QAAQ,GAAGE,MAAMG,MAAM;kBACtB,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.dialog || !state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderDrawerOverlay_unstable","state","dialog","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,IAAI,CAACD,MAAME,MAAM,CAACC,SAAS,EAAE;QAC5C,OAAO;IACT;IAEAL,YAAgCE;IAEhC,qBACE,KAACA,MAAMC,MAAM;kBACX,cAAA,KAACD,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlay.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
-import { DialogSurface } from '@fluentui/react-dialog';
+import { slot, useMergedRefs } from '@fluentui/react-utilities';
+import { Dialog, DialogSurface } from '@fluentui/react-dialog';
 import { useMotion } from '@fluentui/react-motion-preview';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
 /**
@@ -12,15 +12,15 @@ import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
  * @param props - props from this instance of DrawerOverlay
  * @param ref - reference to root HTMLDivElement of DrawerOverlay
  */ export const useDrawerOverlay_unstable = (props, ref)=>{
-    const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);
-    const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
+    const { open, size, position } = useDrawerDefaultProps(props);
+    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
     const drawerMotion = useMotion(open);
     const backdropMotion = useMotion(open);
     const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
-    const root = slot.always(getNativeElementProps('div', {
+    const root = slot.always({
         ...props,
         ref: useMergedRefs(ref, drawerMotion.ref)
-    }), {
+    }, {
         elementType: DialogSurface,
         defaultProps: {
             backdrop: slot.optional(props.backdrop, {
@@ -32,18 +32,21 @@ import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
             })
         }
     });
-    const dialog = slot.always({
-        open: true,
-        defaultOpen,
-        onOpenChange,
-        inertTrapFocus,
-        modalType
-    }, {
-        elementType: 'div'
+    const dialog = slot.optional(props.dialog, {
+        elementType: Dialog,
+        renderByDefault: true,
+        defaultProps: {
+            open: true,
+            defaultOpen,
+            onOpenChange,
+            inertTrapFocus,
+            modalType
+        }
     });
     return {
         components: {
             root: DialogSurface,
+            dialog: Dialog,
             backdrop: 'div'
         },
         root,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { DialogProps, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\n\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 */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  const drawerMotion = useMotion<HTMLDivElement>(open);\n  const backdropMotion = useMotion<HTMLDivElement>(open);\n\n  const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n\n  const root = slot.always<DialogSurfaceProps>(\n    getNativeElementProps('div', {\n      ...props,\n      ref: useMergedRefs(ref, drawerMotion.ref),\n    }),\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  );\n\n  const dialog = slot.always(\n    {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n    {\n      elementType: 'div',\n    },\n  );\n\n  return {\n    components: {\n      root: DialogSurface,\n      backdrop: 'div',\n    },\n\n    root,\n\n    dialog,\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useMergedRefs","DialogSurface","useMotion","useDrawerDefaultProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAAsBC,aAAa,QAA4B,yBAAyB;AACxF,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,WAAW,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAE,GAAGR;IAE9D,MAAMS,eAAeZ,UAA0BK;IAC/C,MAAMQ,iBAAiBb,UAA0BK;IAEjD,MAAMS,oBAAoBL,cAAc,eAAeN,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOnB,KAAKoB,MAAM,CACtBrB,sBAAsB,OAAO;QAC3B,GAAGO,KAAK;QACRC,KAAKN,cAAcM,KAAKQ,aAAaR,GAAG;IAC1C,IACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUlB,KAAKuB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAASzB,KAAKoB,MAAM,CACxB;QACEZ,MAAM;QACNC;QACAK;QACAD;QACAD;IACF,GACA;QACES,aAAa;IACf;IAGF,OAAO;QACLK,YAAY;YACVP,MAAMjB;YACNgB,UAAU;QACZ;QAEAC;QAEAM;QACAf;QACAC;QACAgB,QAAQZ;QACRC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog, DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\n\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 */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerOverlayState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n  const drawerMotion = useMotion<HTMLDivElement>(open);\n  const backdropMotion = useMotion<HTMLDivElement>(open);\n\n  const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      ref: useMergedRefs(ref, drawerMotion.ref),\n    },\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  );\n\n  const dialog = slot.optional(props.dialog, {\n    elementType: Dialog,\n    renderByDefault: true,\n    defaultProps: {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    },\n  });\n\n  return {\n    components: {\n      root: DialogSurface,\n      dialog: Dialog,\n      backdrop: 'div',\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion: drawerMotion,\n    backdropMotion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","DialogSurface","useMotion","useDrawerDefaultProps","useDrawerOverlay_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","backdropMotion","hasCustomBackdrop","backdrop","root","always","elementType","defaultProps","optional","renderByDefault","dialog","components","motion"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,EAAEC,aAAa,QAAQ,yBAAyB;AAC/D,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,sBAAsBE;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,eAAeZ,UAA0BK;IAC/C,MAAMQ,iBAAiBb,UAA0BK;IAEjD,MAAMS,oBAAoBN,cAAc,eAAeL,MAAMY,QAAQ,KAAK;IAE1E,MAAMC,OAAOpB,KAAKqB,MAAM,CACtB;QACE,GAAGd,KAAK;QACRC,KAAKP,cAAcO,KAAKQ,aAAaR,GAAG;IAC1C,GACA;QACEc,aAAanB;QACboB,cAAc;YACZJ,UAAUnB,KAAKwB,QAAQ,CAACjB,MAAMY,QAAQ,EAAE;gBACtCG,aAAa;gBACbG,iBAAiBP;gBACjBK,cAAc;oBACZf,KAAKS,eAAeT,GAAG;gBACzB;YACF;QACF;IACF;IAGF,MAAMkB,SAAS1B,KAAKwB,QAAQ,CAACjB,MAAMmB,MAAM,EAAE;QACzCJ,aAAapB;QACbuB,iBAAiB;QACjBF,cAAc;YACZd,MAAM;YACNK;YACAC;YACAF;YACAD;QACF;IACF;IAEA,OAAO;QACLe,YAAY;YACVP,MAAMjB;YACNuB,QAAQxB;YACRiB,UAAU;QACZ;QAEAC;QACAM;QAEAhB;QACAC;QACAiB,QAAQZ;QACRC;IACF;AACF,EAAE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { drawerCSSVars, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';
 export const drawerOverlayClassNames = {
   root: 'fui-DrawerOverlay',
   backdrop: 'fui-DrawerOverlay__backdrop'
@@ -11,6 +11,29 @@ export const drawerOverlayClassNames = {
  */
 const useDrawerRootStyles = /*#__PURE__*/__styles({
   root: {
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
+    Beyfa6y: ["f1deotkl", "f1krrbdw"],
+    B7oj6ja: ["f10ostut", "f1ozlkrg"],
+    Btl43ni: ["f1ozlkrg", "f10ostut"],
+    B4j52fo: "fre7gi1",
+    Bekrc4i: ["f1358rze", "f1rvrf73"],
+    Bn0qgzm: "fqdk4by",
+    ibv6hh: ["f1rvrf73", "f1358rze"],
+    a9b677: "f3rx6dk",
+    B2u0y6b: "f1w39fev",
+    Bqenvij: "f11ysow2",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Bt984gj: "f6jr5hl",
+    Brf1p80: "fbhxue7",
+    De3pzq: "fxugw4r",
     qhf8xq: "f19dog8a",
     Bhzewxz: "f15twtuk",
     B5kzvoi: "f1yab3r1",
@@ -31,7 +54,7 @@ const useDrawerRootStyles = /*#__PURE__*/__styles({
     E5pizo: "f10nrhrw"
   }
 }, {
-  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);}"]
+  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f3rx6dk{width:var(--fui-Drawer--size);}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f6jr5hl{align-items:flex-start;}", ".fbhxue7{justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19dog8a{position:fixed;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fk73vx1{opacity:0;}", ".fliqkoi{box-shadow:0px transparent;}", ".f1neo61{transition-property:transform,box-shadow,opacity;}", ".f1ytgekk{will-change:transform,box-shadow,opacity;}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
 });
 /**
  * Styles for the backdrop slot

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

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","tokens","drawerCSSVars","useDrawerBaseClassNames","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerRootStyles","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","useDrawerOverlayStyles_unstable","state","baseClassNames","rootStyles","backdropMotionStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerRootStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0,\n        opacity: 0,\n        boxShadow: '0px transparent',\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    backdrop: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export 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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AACzH,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAP,MAAA;IAAAK,OAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAqB/B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,uBAAuB,gBAAGtB,QAAA;EAAAQ,QAAA;IAAAK,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAP,KAAA;EAAA;EAAAI,OAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGtB,uBAAuB,CAACqB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGlB,mBAAmB,CAAC,CAAC;EACxC,MAAMmB,oBAAoB,GAAGN,uBAAuB,CAAC,CAAC;EACtD,MAAMO,cAAc,GAAGxB,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGiB,KAAK,CAAClB,IAAI,CAACC,QAAQ;EACpCiB,KAAK,CAAClB,IAAI,CAACuB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACC,IAAI,EAAEmB,cAAc,EAAEC,UAAU,CAACpB,IAAI,EAAEoB,UAAU,CAACF,KAAK,CAACM,QAAQ,CAAC,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACP,OAAO,EAAEK,KAAK,CAAClB,IAAI,CAACuB,SAAS,CAAC;EAC/L,IAAItB,QAAQ,EAAE;IACVA,QAAQ,CAACsB,SAAS,GAAG7B,YAAY,CAACK,uBAAuB,CAACE,QAAQ,EAAEoB,oBAAoB,CAACpB,QAAQ,EAAEqB,cAAc,CAACJ,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACU,cAAc,CAACF,MAAM,IAAIL,oBAAoB,CAACR,OAAO,EAAEZ,QAAQ,CAACsB,SAAS,CAAC;EACnN;EACA,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__styles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","drawerOverlayClassNames","root","backdrop","useDrawerRootStyles","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","a9b677","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","useDrawerOverlayStyles_unstable","state","baseClassNames","rootStyles","backdropMotionStyles","durationStyles","className","position","motion","active","size","backdropMotion"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerRootStyles = makeStyles({\n    root: {\n        ...drawerDefaultStyles,\n        position: 'fixed',\n        top: 0,\n        bottom: 0,\n        opacity: 0,\n        boxShadow: '0px transparent',\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    backdrop: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export 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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,mBAAmB,gBAAGV,QAAA;EAAAQ,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAP,MAAA;IAAAK,OAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAO,CAAA;AAAA,CAsB/B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,uBAAuB,gBAAG9C,QAAA;EAAAS,QAAA;IAAA4B,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAP,KAAA;EAAA;EAAAI,OAAA;IAAAP,MAAA;EAAA;AAAA;EAAAQ,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMG,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAG7C,uBAAuB,CAAC4C,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGzC,mBAAmB,CAAC,CAAC;EACxC,MAAM0C,oBAAoB,GAAGN,uBAAuB,CAAC,CAAC;EACtD,MAAMO,cAAc,GAAG/C,uBAAuB,CAAC,CAAC;EAChD,MAAMG,QAAQ,GAAGwC,KAAK,CAACzC,IAAI,CAACC,QAAQ;EACpCwC,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGrD,YAAY,CAACM,uBAAuB,CAACC,IAAI,EAAE0C,cAAc,EAAEC,UAAU,CAAC3C,IAAI,EAAE2C,UAAU,CAACF,KAAK,CAACM,QAAQ,CAAC,EAAEN,KAAK,CAACO,MAAM,CAACC,MAAM,IAAIN,UAAU,CAACP,OAAO,EAAEK,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EAC/L,IAAI7C,QAAQ,EAAE;IACVA,QAAQ,CAAC6C,SAAS,GAAGrD,YAAY,CAACM,uBAAuB,CAACE,QAAQ,EAAE2C,oBAAoB,CAAC3C,QAAQ,EAAE4C,cAAc,CAACJ,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACU,cAAc,CAACF,MAAM,IAAIL,oBAAoB,CAACR,OAAO,EAAEnC,QAAQ,CAAC6C,SAAS,CAAC;EACnN;EACA,OAAOL,KAAK;AAChB,CAAC"}

package/lib/shared/DrawerBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: MotionShorthand<HTMLDivElement>;\n\n  /**\n   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n"],"names":[],"mappings":"AAAA,WAuCE"}
+{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: MotionShorthand<HTMLDivElement>;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  motion: MotionState<HTMLDivElement>;\n};\n"],"names":[],"mappings":"AAAA,WAgCE"}

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -7,34 +7,27 @@ export const drawerCSSVars = {
   drawerSizeVar: '--fui-Drawer--size'
 };
 /**
- * Styles for the root slot
+ * Default shared styles for the Drawer component
  */
-export const useDrawerBaseStyles = /*#__PURE__*/__styles({
-  root: {
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1cnd47f", "fhxju0i"],
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
-    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
-    Beyfa6y: ["f1deotkl", "f1krrbdw"],
-    B7oj6ja: ["f10ostut", "f1ozlkrg"],
-    Btl43ni: ["f1ozlkrg", "f10ostut"],
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
-    a9b677: "f3rx6dk",
-    B2u0y6b: "f1w39fev",
-    Bqenvij: "f11ysow2",
-    B7ck84d: "f1ewtqcl",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    Bt984gj: "f6jr5hl",
-    Brf1p80: "fbhxue7",
-    De3pzq: "fxugw4r"
-  },
+export const drawerDefaultStyles = {
+  ... /*#__PURE__*/shorthands.padding(0),
+  ... /*#__PURE__*/shorthands.overflow('hidden'),
+  ... /*#__PURE__*/shorthands.borderRadius(0),
+  ... /*#__PURE__*/shorthands.border(0),
+  width: `var(${drawerCSSVars.drawerSizeVar})`,
+  maxWidth: '100vw',
+  height: 'auto',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  backgroundColor: tokens.colorNeutralBackground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */
+const useDrawerStyles = /*#__PURE__*/__styles({
   entering: {
     Bkqvd7p: "f18ad807"
   },
@@ -65,7 +58,7 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     Bjr0ffy: "fsdmzs6"
   }
 }, {
-  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;}"],
+  d: [".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }]]
@@ -91,8 +84,8 @@ export const useDrawerBaseClassNames = ({
   size,
   motion
 }) => {
-  const baseStyles = useDrawerBaseStyles();
+  const baseStyles = useDrawerStyles();
   const durationStyles = useDrawerDurationStyles();
-  return mergeClasses(baseStyles.root, baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
+  return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);
 };
 //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

package/lib/shared/useDrawerBaseStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","useDrawerBaseStyles","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","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Styles for the root slot\n */ export const useDrawerBaseStyles = makeStyles({\n    root: {\n        ...shorthands.padding(0),\n        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(0),\n        ...shorthands.border(0),\n        width: `var(${drawerCSSVars.drawerSizeVar})`,\n        maxWidth: '100vw',\n        height: 'auto',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'flex-start',\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA+CtC,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAG/C,QAAA;EAAAwC,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAG/C,mBAAmB,CAAC,CAAC;EACxC,MAAMgD,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAO9C,YAAY,CAACoD,UAAU,CAAC9C,IAAI,EAAE8C,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACnB,aAAa,EAAEkB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAACtB,QAAQ,EAAEqB,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAACpB,OAAO,CAAC;AACpO,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","padding","overflow","borderRadius","border","width","maxWidth","height","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    ...shorthands.padding(0),\n    ...shorthands.overflow('hidden'),\n    ...shorthands.borderRadius(0),\n    ...shorthands.border(0),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnC,iBAAGJ,UAAU,CAACK,OAAO,CAAC,CAAC,CAAC;EACxB,iBAAGL,UAAU,CAACM,QAAQ,CAAC,QAAQ,CAAC;EAChC,iBAAGN,UAAU,CAACO,YAAY,CAAC,CAAC,CAAC;EAC7B,iBAAGP,UAAU,CAACQ,MAAM,CAAC,CAAC,CAAC;EACvBC,KAAK,EAAG,OAAMP,aAAa,CAACC,aAAc,GAAE;EAC5CO,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEhB,MAAM,CAACiB;AAC5B,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAgC3B,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAGtC,QAAA;EAAA+B,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGvB,eAAe,CAAC,CAAC;EACpC,MAAMwB,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAOrC,YAAY,CAAC2C,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACnB,aAAa,EAAEkB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAACtB,QAAQ,EAAEqB,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAACpB,OAAO,CAAC;AACnN,CAAC"}

package/lib/shared/useDrawerDefaultProps.js

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

package/lib/shared/useDrawerDefaultProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(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":["useDrawerDefaultProps","props","open","defaultOpen","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAC1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,cAAc,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGJ;IAElF,OAAO;QACLG;QACAC;QACAH;QACAC;IACF;AACF"}
+{"version":3,"sources":["useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps) {\n  const { open = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n  };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB;IAC1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGH;IAE7D,OAAO;QACLE;QACAC;QACAF;IACF;AACF"}

package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js

@@ -22,71 +22,16 @@ const drawerBodyClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        B6of3ja: "fkrn0sh",
-        t21cq0: [
-            "f11qmguv",
-            "f1tyq0we"
-        ],
-        jrapky: "fmxx68s",
-        Frg6f3: [
-            "f1tyq0we",
-            "f11qmguv"
-        ],
-        z8tnut: "f1sl3k7w",
-        z189sj: [
-            "fnbas0t",
-            "f1mswpri"
-        ],
-        Byoj8tv: "f1brlhvm",
-        uwmqm3: [
-            "f1mswpri",
-            "fnbas0t"
-        ],
-        B68tc82: "f1oy3dpc",
-        Bmxbyg5: "f5zp4f",
-        Bh6795r: "fqerorx",
-        Bnnss6s: "f1neuvcm",
-        xawz: "f1pztt34",
-        qb2dma: "f1ub7u0d",
-        Bcmaq0h: "f1igvcbx",
-        B676am1: "f1fofb6i",
-        e5kdtc: "fo6xqva",
-        De3pzq: "fxugw4r",
-        Bkjc3bi: "fcre6b6",
-        Bgh53k4: "f1besv5s",
-        Bcx2cba: "f1pqm9hp",
-        gonrqn: "f2c46kh"
-    }
-}, {
-    d: [
-        ".fkrn0sh{margin-top:-1px;}",
-        ".f11qmguv{margin-right:0;}",
-        ".f1tyq0we{margin-left:0;}",
-        ".fmxx68s{margin-bottom:-1px;}",
-        ".f1sl3k7w{padding-top:1px;}",
-        ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}",
-        ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}",
-        ".f1brlhvm{padding-bottom:1px;}",
-        ".f1oy3dpc{overflow-x:auto;}",
-        ".f5zp4f{overflow-y:auto;}",
-        ".fqerorx{flex-grow:1;}",
-        ".f1neuvcm{flex-shrink:1;}",
-        ".f1pztt34{flex-basis:0;}",
-        ".f1ub7u0d{align-self:stretch;}",
-        ".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}",
-        ".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}",
-        ".fo6xqva{background-repeat:no-repeat;}",
-        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
-        ".fcre6b6{background-size:100% 2px,100% 2px,100% 1px,100% 1px;}",
-        ".f1besv5s{background-attachment:local,local,scroll,scroll;}",
-        ".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
-        ".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"
-    ]
-});
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r10z3gsy", "r1ppc5ap", [
+    ".r10z3gsy{margin-top:-1px;margin-right:0;margin-bottom:-1px;margin-left:0;padding-top:1px;padding-right:var(--spacingHorizontalXXL);padding-bottom:1px;padding-left:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}",
+    ".r10z3gsy:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
+    ".r10z3gsy:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}",
+    ".r1ppc5ap{margin-top:-1px;margin-left:0;margin-bottom:-1px;margin-right:0;padding-top:1px;padding-left:var(--spacingHorizontalXXL);padding-bottom:1px;padding-right:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}",
+    ".r1ppc5ap:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
+    ".r1ppc5ap:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"
+]);
 const useDrawerBodyStyles_unstable = (state)=>{
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(drawerBodyClassNames.root, styles.root, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(drawerBodyClassNames.root, styles, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerBodyStyles.styles.js.map

package/lib-commonjs/components/DrawerBody/useDrawerBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n  root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    B6of3ja: \"fkrn0sh\",\n    t21cq0: [\"f11qmguv\", \"f1tyq0we\"],\n    jrapky: \"fmxx68s\",\n    Frg6f3: [\"f1tyq0we\", \"f11qmguv\"],\n    z8tnut: \"f1sl3k7w\",\n    z189sj: [\"fnbas0t\", \"f1mswpri\"],\n    Byoj8tv: \"f1brlhvm\",\n    uwmqm3: [\"f1mswpri\", \"fnbas0t\"],\n    B68tc82: \"f1oy3dpc\",\n    Bmxbyg5: \"f5zp4f\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"f1pztt34\",\n    qb2dma: \"f1ub7u0d\",\n    Bcmaq0h: \"f1igvcbx\",\n    B676am1: \"f1fofb6i\",\n    e5kdtc: \"fo6xqva\",\n    De3pzq: \"fxugw4r\",\n    Bkjc3bi: \"fcre6b6\",\n    Bgh53k4: \"f1besv5s\",\n    Bcx2cba: \"f1pqm9hp\",\n    gonrqn: \"f2c46kh\"\n  }\n}, {\n  d: [\".fkrn0sh{margin-top:-1px;}\", \".f11qmguv{margin-right:0;}\", \".f1tyq0we{margin-left:0;}\", \".fmxx68s{margin-bottom:-1px;}\", \".f1sl3k7w{padding-top:1px;}\", \".fnbas0t{padding-right:var(--spacingHorizontalXXL);}\", \".f1mswpri{padding-left:var(--spacingHorizontalXXL);}\", \".f1brlhvm{padding-bottom:1px;}\", \".f1oy3dpc{overflow-x:auto;}\", \".f5zp4f{overflow-y:auto;}\", \".fqerorx{flex-grow:1;}\", \".f1neuvcm{flex-shrink:1;}\", \".f1pztt34{flex-basis:0;}\", \".f1ub7u0d{align-self:stretch;}\", \".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}\", \".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}\", \".fo6xqva{background-repeat:no-repeat;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".fcre6b6{background-size:100% 2px,100% 2px,100% 1px,100% 1px;}\", \".f1besv5s{background-attachment:local,local,scroll,scroll;}\", \".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__styles","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bh6795r","Bnnss6s","xawz","qb2dma","Bcmaq0h","B676am1","e5kdtc","De3pzq","Bkjc3bi","Bgh53k4","Bcx2cba","gonrqn","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAqCAC,4BAA4B;eAA5BA;;;uBAvCsC;AAE5C,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA8B;QAA8B;QAA6B;QAAiC;QAA+B;QAAwD;QAAwD;QAAkC;QAA+B;QAA6B;QAA0B;QAA6B;QAA4B;QAAkC;QAA2X;QAAmK;QAA0C;QAA8D;QAAkE;QAA+D;QAAiF;KAA6E;AACv4C;AAIO,MAAM1B,+BAA+B2B,CAAAA;IAC1C,MAAMC,SAAS1B;IACfyB,MAAM1B,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAY,EAAC/B,qBAAqBE,IAAI,EAAE2B,OAAO3B,IAAI,EAAE0B,MAAM1B,IAAI,CAAC4B,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}
+{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n  root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r10z3gsy\", \"r1ppc5ap\", [\".r10z3gsy{margin-top:-1px;margin-right:0;margin-bottom:-1px;margin-left:0;padding-top:1px;padding-right:var(--spacingHorizontalXXL);padding-bottom:1px;padding-left:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}\", \".r10z3gsy:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".r10z3gsy:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\", \".r1ppc5ap{margin-top:-1px;margin-left:0;margin-bottom:-1px;margin-right:0;padding-top:1px;padding-left:var(--spacingHorizontalXXL);padding-bottom:1px;padding-right:var(--spacingHorizontalXXL);overflow-x:auto;overflow-y:auto;flex-grow:1;flex-shrink:1;flex-basis:0;align-self:stretch;background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;background-repeat:no-repeat;background-color:var(--colorNeutralBackground1);background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-attachment:local,local,scroll,scroll;}\", \".r1ppc5ap:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".r1ppc5ap:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]);\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAUAC,4BAA4B;eAA5BA;;;uBAZ2C;AAEjD,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAAC;IAA+8B;IAAiF;IAA+E;IAA+8B;IAAiF;CAA8E;AAI5xE,MAAMH,+BAA+BI,CAAAA;IAC1C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,qBAAqBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC3F,OAAOF;AACT,GACA,sDAAsD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\n/**\n * DrawerFooter component - TODO: add more docs\n */ export const DrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerFooter_unstable(props, ref);\n    useDrawerFooterStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);\n    return renderDrawerFooter_unstable(state);\n});\nDrawerFooter.displayName = 'DrawerFooter';\n"],"names":["DrawerFooter","React","forwardRef","props","ref","state","useDrawerFooter_unstable","useDrawerFooterStyles_unstable","useCustomStyleHook_unstable","renderDrawerFooter_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;iCACH;oCACG;6CACG;AAGpC,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;IAC9D,OAAOI,IAAAA,+CAA2B,EAACJ;AACvC;AACAL,aAAaU,WAAW,GAAG"}
+{"version":3,"sources":["DrawerFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\n/**\n * DrawerFooter provides a structured footer for the drawer component.\n */ export const DrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useDrawerFooter_unstable(props, ref);\n    useDrawerFooterStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);\n    return renderDrawerFooter_unstable(state);\n});\nDrawerFooter.displayName = 'DrawerFooter';\n"],"names":["DrawerFooter","React","forwardRef","props","ref","state","useDrawerFooter_unstable","useDrawerFooterStyles_unstable","useCustomStyleHook_unstable","renderDrawerFooter_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;qCACqB;iCACH;oCACG;6CACG;AAGpC,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;IAC9D,OAAOI,IAAAA,+CAA2B,EAACJ;AACvC;AACAL,aAAaU,WAAW,GAAG"}

package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js

@@ -22,37 +22,12 @@ const drawerFooterClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        z8tnut: "fikn0iw",
-        z189sj: [
-            "fnbas0t",
-            "f1mswpri"
-        ],
-        Byoj8tv: "fz66xbh",
-        uwmqm3: [
-            "f1mswpri",
-            "fnbas0t"
-        ],
-        mc9l5x: "f22iagw",
-        Brf1p80: "fbhxue7",
-        Bt984gj: "f122n59",
-        i8kkvl: "fsnqrgy"
-    }
-}, {
-    d: [
-        ".fikn0iw{padding-top:var(--spacingVerticalL);}",
-        ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}",
-        ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}",
-        ".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}",
-        ".f22iagw{display:flex;}",
-        ".fbhxue7{justify-content:flex-start;}",
-        ".f122n59{align-items:center;}",
-        ".fsnqrgy{column-gap:var(--spacingHorizontalS);}"
-    ]
-});
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rli1cm2", "r1xlf3nx", [
+    ".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}",
+    ".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}"
+]);
 const useDrawerFooterStyles_unstable = (state)=>{
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(drawerFooterClassNames.root, styles.root, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(drawerFooterClassNames.root, styles, state.root.className);
     return state;
 }; //# sourceMappingURL=useDrawerFooterStyles.styles.js.map

package/lib-commonjs/components/DrawerFooter/useDrawerFooterStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n  root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    z8tnut: \"fikn0iw\",\n    z189sj: [\"fnbas0t\", \"f1mswpri\"],\n    Byoj8tv: \"fz66xbh\",\n    uwmqm3: [\"f1mswpri\", \"fnbas0t\"],\n    mc9l5x: \"f22iagw\",\n    Brf1p80: \"fbhxue7\",\n    Bt984gj: \"f122n59\",\n    i8kkvl: \"fsnqrgy\"\n  }\n}, {\n  d: [\".fikn0iw{padding-top:var(--spacingVerticalL);}\", \".fnbas0t{padding-right:var(--spacingHorizontalXXL);}\", \".f1mswpri{padding-left:var(--spacingHorizontalXXL);}\", \".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}\", \".f22iagw{display:flex;}\", \".fbhxue7{justify-content:flex-start;}\", \".f122n59{align-items:center;}\", \".fsnqrgy{column-gap:var(--spacingHorizontalS);}\"]\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerFooterClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__styles","z8tnut","z189sj","Byoj8tv","uwmqm3","mc9l5x","Brf1p80","Bt984gj","i8kkvl","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAuBAC,8BAA8B;eAA9BA;;;uBAzBsC;AAE5C,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAkD;QAAwD;QAAwD;QAAuD;QAA2B;QAAyC;QAAiC;KAAkD;AACtX;AAIO,MAAMZ,iCAAiCa,CAAAA;IAC5C,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,uBAAuBE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IAClG,OAAOF;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n  root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"rli1cm2\", \"r1xlf3nx\", [\".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}\", \".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}\"]);\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_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;IAA8Q;CAA8Q;AAI1lB,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"}