@fluentui/react-drawer 9.0.0-beta.31 → 9.0.0-beta.33

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -10,19 +10,18 @@ export const drawerCSSVars = {
  * Default shared styles for the Drawer component
  */
 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',
+  maxHeight: '100vh',
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
   justifyContent: 'flex-start',
-  backgroundColor: tokens.colorNeutralBackground1
+  backgroundColor: tokens.colorNeutralBackground1,
+  color: tokens.colorNeutralForeground1
 };
 /**
  * Shared dynamic styles for the Drawer component

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","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.overflow('hidden'),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\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,QAAQ,CAAC,QAAQ,CAAC;EAChCC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,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-commonjs/components/Drawer/useDrawer.js

@@ -14,8 +14,7 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _DrawerOverlay = require("../DrawerOverlay");
 const _DrawerInline = require("../DrawerInline");
 const useDrawer_unstable = (props, ref)=>{
-    const { type = 'overlay' } = props;
-    const elementType = type === 'overlay' ? _DrawerOverlay.DrawerOverlay : _DrawerInline.DrawerInline;
+    const elementType = props.type === 'inline' ? _DrawerInline.DrawerInline : _DrawerOverlay.DrawerOverlay;
     return {
         components: {
             root: elementType

package/lib-commonjs/components/Drawer/useDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline';\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */ export const useDrawer_unstable = (props, ref)=>{\n    const { type = 'overlay' } = props;\n    const elementType = type === 'overlay' ? DrawerOverlay : DrawerInline;\n    return {\n        components: {\n            root: elementType\n        },\n        root: slot.always(slot.resolveShorthand({\n            ref,\n            ...props\n        }), {\n            elementType\n        })\n    };\n};\n"],"names":["useDrawer_unstable","props","ref","type","elementType","DrawerOverlay","DrawerInline","components","root","slot","always","resolveShorthand"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACF;+BACS;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC;IAC1C,MAAM,EAAEC,OAAO,SAAS,EAAE,GAAGF;IAC7B,MAAMG,cAAcD,SAAS,YAAYE,4BAAa,GAAGC,0BAAY;IACrE,OAAO;QACHC,YAAY;YACRC,MAAMJ;QACV;QACAI,MAAMC,oBAAI,CAACC,MAAM,CAACD,oBAAI,CAACE,gBAAgB,CAAC;YACpCT;YACA,GAAGD,KAAK;QACZ,IAAI;YACAG;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline';\n/**\n * Create the state required to render Drawer.\n *\n * The returned state can be modified with hooks such as useDrawerStyles_unstable,\n * before being passed to renderDrawer_unstable.\n *\n * @param props - props from this instance of Drawer\n * @param ref - reference to root HTMLElement of Drawer\n */ export const useDrawer_unstable = (props, ref)=>{\n    const elementType = props.type === 'inline' ? DrawerInline : DrawerOverlay;\n    return {\n        components: {\n            root: elementType\n        },\n        root: slot.always(slot.resolveShorthand({\n            ref,\n            ...props\n        }), {\n            elementType\n        })\n    };\n};\n"],"names":["useDrawer_unstable","props","ref","elementType","type","DrawerInline","DrawerOverlay","components","root","slot","always","resolveShorthand"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACF;+BACS;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC;IAC1C,MAAMC,cAAcF,MAAMG,IAAI,KAAK,WAAWC,0BAAY,GAAGC,4BAAa;IAC1E,OAAO;QACHC,YAAY;YACRC,MAAML;QACV;QACAK,MAAMC,oBAAI,CAACC,MAAM,CAACD,oBAAI,CAACE,gBAAgB,CAAC;YACpCT;YACA,GAAGD,KAAK;QACZ,IAAI;YACAE;QACJ;IACJ;AACJ"}

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

@@ -24,9 +24,8 @@ const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.sty
 const drawerInlineClassNames = {
     root: 'fui-DrawerInline'
 };
-const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("r1aiwccr", "rzg5lxf", [
-    ".r1aiwccr{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;overflow-x:hidden;overflow-y:hidden;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:0;border-top-left-radius:0;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}",
-    ".rzg5lxf{padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;overflow-x:hidden;overflow-y:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;width:var(--fui-Drawer--size);max-width:100vw;height:auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"
+const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("rlrvcho", null, [
+    ".rlrvcho{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:relative;opacity:0;transition-property:opacity,transform;will-change:opacity,transform;}"
 ]);
 /**
  * Styles for the root slot

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

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

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js

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

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

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

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./DrawerOverlaySurface"), exports);
+_export_star._(require("./DrawerOverlaySurface.types"), exports);

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/index.js.map

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

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    drawerOverlaySurfaceClassNames: function() {
+        return drawerOverlaySurfaceClassNames;
+    },
+    useDrawerOverlaySurfaceStyles_unstable: function() {
+        return useDrawerOverlaySurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const drawerOverlaySurfaceClassNames = {
+    root: 'fui-DrawerOverlaySurface',
+    backdrop: 'fui-DrawerOverlaySurface__backdrop'
+};
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rivxbo", "r1trjn1z", [
+    ".rivxbo{top:0px;right:0px;bottom:0px;left:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}",
+    ".r1trjn1z{top:0px;left:0px;bottom:0px;right:0px;position:fixed;background-color:rgba(0, 0, 0, 0.4);}"
+]);
+const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
+    nested: {
+        De3pzq: "f1c21dwh"
+    }
+}, {
+    d: [
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
+    ]
+});
+const useDrawerOverlaySurfaceStyles_unstable = (state)=>{
+    const backdropResetStyles = useBackdropResetStyles();
+    const backdropStyles = useBackdropStyles();
+    if (state.backdrop) {
+        state.backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    }
+    return state;
+}; //# sourceMappingURL=useDrawerOverlaySurfaceStyles.styles.js.map

package/lib-commonjs/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js.map

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

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "renderDrawerOverlay_unstable", {
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const renderDrawerOverlay_unstable = (state)=>{
-    if (!state.dialog || !state.motion.canRender) {
+    if (!state.motion.canRender) {
         return null;
     }
     (0, _reactutilities.assertSlots)(state);

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

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

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

@@ -14,43 +14,44 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reactdialog = require("@fluentui/react-dialog");
 const _reactmotionpreview = require("@fluentui/react-motion-preview");
 const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
+const _DrawerOverlaySurface = require("./DrawerOverlaySurface");
 const useDrawerOverlay_unstable = (props, ref)=>{
     const { open, size, position } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
     const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
     const drawerMotion = (0, _reactmotionpreview.useMotion)(open);
     const backdropMotion = (0, _reactmotionpreview.useMotion)(open);
-    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;
+    const backdropInnerProps = _reactutilities.slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null;
+    const backdropProps = {
+        ...backdropInnerProps,
+        ref: (0, _reactutilities.useMergedRefs)(backdropMotion.ref, backdropInnerProps === null || backdropInnerProps === void 0 ? void 0 : backdropInnerProps.ref)
+    };
     const root = _reactutilities.slot.always({
         ...props,
-        ref: (0, _reactutilities.useMergedRefs)(ref, drawerMotion.ref)
+        backdrop: hasCustomBackdrop ? backdropProps : null
     }, {
-        elementType: _reactdialog.DialogSurface,
+        elementType: _DrawerOverlaySurface.DrawerOverlaySurface,
         defaultProps: {
-            backdrop: _reactutilities.slot.optional(props.backdrop, {
-                elementType: 'div',
-                renderByDefault: hasCustomBackdrop,
-                defaultProps: {
-                    ref: backdropMotion.ref
-                }
-            })
+            ref: (0, _reactutilities.useMergedRefs)(ref, drawerMotion.ref)
         }
     });
-    const dialog = _reactutilities.slot.optional(props.dialog, {
-        elementType: _reactdialog.Dialog,
-        renderByDefault: true,
-        defaultProps: {
-            open: true,
-            defaultOpen,
-            onOpenChange,
-            inertTrapFocus,
-            modalType
-        }
+    const dialog = _reactutilities.slot.always({
+        open: true,
+        defaultOpen,
+        onOpenChange,
+        inertTrapFocus,
+        modalType,
+        /*
+       * children is not needed here because we construct the children in the render function,
+       * but it's required by DialogProps
+       */ children: null
+    }, {
+        elementType: _reactdialog.Dialog
     });
     return {
         components: {
-            root: _reactdialog.DialogSurface,
-            dialog: _reactdialog.Dialog,
-            backdrop: 'div'
+            root: _DrawerOverlaySurface.DrawerOverlaySurface,
+            dialog: _reactdialog.Dialog
         },
         root,
         dialog,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog, DialogSurface } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n    const { open, size, position } = useDrawerDefaultProps(props);\n    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n    const drawerMotion = useMotion(open);\n    const backdropMotion = useMotion(open);\n    const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null;\n    const root = slot.always({\n        ...props,\n        ref: useMergedRefs(ref, drawerMotion.ref)\n    }, {\n        elementType: DialogSurface,\n        defaultProps: {\n            backdrop: slot.optional(props.backdrop, {\n                elementType: 'div',\n                renderByDefault: hasCustomBackdrop,\n                defaultProps: {\n                    ref: backdropMotion.ref\n                }\n            })\n        }\n    });\n    const dialog = slot.optional(props.dialog, {\n        elementType: Dialog,\n        renderByDefault: true,\n        defaultProps: {\n            open: true,\n            defaultOpen,\n            onOpenChange,\n            inertTrapFocus,\n            modalType\n        }\n    });\n    return {\n        components: {\n            root: DialogSurface,\n            dialog: Dialog,\n            backdrop: 'div'\n        },\n        root,\n        dialog,\n        size,\n        position,\n        motion: drawerMotion,\n        backdropMotion\n    };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","useMotion","backdropMotion","hasCustomBackdrop","backdrop","root","slot","always","useMergedRefs","elementType","DialogSurface","defaultProps","optional","renderByDefault","dialog","Dialog","components","motion"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACa;6BACE;oCACZ;uCACY;AAS3B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGT;IACnF,MAAMU,eAAeC,IAAAA,6BAAS,EAACT;IAC/B,MAAMU,iBAAiBD,IAAAA,6BAAS,EAACT;IACjC,MAAMW,oBAAoBP,cAAc,eAAeN,MAAMc,QAAQ,KAAK;IAC1E,MAAMC,OAAOC,oBAAI,CAACC,MAAM,CAAC;QACrB,GAAGjB,KAAK;QACRC,KAAKiB,IAAAA,6BAAa,EAACjB,KAAKS,aAAaT,GAAG;IAC5C,GAAG;QACCkB,aAAaC,0BAAa;QAC1BC,cAAc;YACVP,UAAUE,oBAAI,CAACM,QAAQ,CAACtB,MAAMc,QAAQ,EAAE;gBACpCK,aAAa;gBACbI,iBAAiBV;gBACjBQ,cAAc;oBACVpB,KAAKW,eAAeX,GAAG;gBAC3B;YACJ;QACJ;IACJ;IACA,MAAMuB,SAASR,oBAAI,CAACM,QAAQ,CAACtB,MAAMwB,MAAM,EAAE;QACvCL,aAAaM,mBAAM;QACnBF,iBAAiB;QACjBF,cAAc;YACVnB,MAAM;YACNM;YACAC;YACAF;YACAD;QACJ;IACJ;IACA,OAAO;QACHoB,YAAY;YACRX,MAAMK,0BAAa;YACnBI,QAAQC,mBAAM;YACdX,UAAU;QACd;QACAC;QACAS;QACArB;QACAC;QACAuB,QAAQjB;QACRE;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerOverlay.js"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport { DrawerOverlaySurface } from './DrawerOverlaySurface';\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLDivElement of DrawerOverlay\n */ export const useDrawerOverlay_unstable = (props, ref)=>{\n    const { open, size, position } = useDrawerDefaultProps(props);\n    const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n    const drawerMotion = useMotion(open);\n    const backdropMotion = useMotion(open);\n    const backdropInnerProps = slot.resolveShorthand(props.backdrop);\n    const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null;\n    const backdropProps = {\n        ...backdropInnerProps,\n        ref: useMergedRefs(backdropMotion.ref, backdropInnerProps === null || backdropInnerProps === void 0 ? void 0 : backdropInnerProps.ref)\n    };\n    const root = slot.always({\n        ...props,\n        backdrop: hasCustomBackdrop ? backdropProps : null\n    }, {\n        elementType: DrawerOverlaySurface,\n        defaultProps: {\n            ref: useMergedRefs(ref, drawerMotion.ref)\n        }\n    });\n    const dialog = slot.always({\n        open: true,\n        defaultOpen,\n        onOpenChange,\n        inertTrapFocus,\n        modalType,\n        /*\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */ children: null\n    }, {\n        elementType: Dialog\n    });\n    return {\n        components: {\n            root: DrawerOverlaySurface,\n            dialog: Dialog\n        },\n        root,\n        dialog,\n        size,\n        position,\n        motion: drawerMotion,\n        backdropMotion\n    };\n};\n"],"names":["useDrawerOverlay_unstable","props","ref","open","size","position","useDrawerDefaultProps","modalType","inertTrapFocus","defaultOpen","onOpenChange","drawerMotion","useMotion","backdropMotion","backdropInnerProps","slot","resolveShorthand","backdrop","hasCustomBackdrop","backdropProps","useMergedRefs","root","always","elementType","DrawerOverlaySurface","defaultProps","dialog","children","Dialog","components","motion"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACa;6BACb;oCACG;uCACY;sCACD;AAS1B,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,4CAAqB,EAACL;IACvD,MAAM,EAAEM,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGT;IACnF,MAAMU,eAAeC,IAAAA,6BAAS,EAACT;IAC/B,MAAMU,iBAAiBD,IAAAA,6BAAS,EAACT;IACjC,MAAMW,qBAAqBC,oBAAI,CAACC,gBAAgB,CAACf,MAAMgB,QAAQ;IAC/D,MAAMC,oBAAoBX,cAAc,eAAeO,uBAAuB;IAC9E,MAAMK,gBAAgB;QAClB,GAAGL,kBAAkB;QACrBZ,KAAKkB,IAAAA,6BAAa,EAACP,eAAeX,GAAG,EAAEY,uBAAuB,QAAQA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBZ,GAAG;IACzI;IACA,MAAMmB,OAAON,oBAAI,CAACO,MAAM,CAAC;QACrB,GAAGrB,KAAK;QACRgB,UAAUC,oBAAoBC,gBAAgB;IAClD,GAAG;QACCI,aAAaC,0CAAoB;QACjCC,cAAc;YACVvB,KAAKkB,IAAAA,6BAAa,EAAClB,KAAKS,aAAaT,GAAG;QAC5C;IACJ;IACA,MAAMwB,SAASX,oBAAI,CAACO,MAAM,CAAC;QACvBnB,MAAM;QACNM;QACAC;QACAF;QACAD;QACA;;;OAGD,GAAGoB,UAAU;IAChB,GAAG;QACCJ,aAAaK,mBAAM;IACvB;IACA,OAAO;QACHC,YAAY;YACRR,MAAMG,0CAAoB;YAC1BE,QAAQE,mBAAM;QAClB;QACAP;QACAK;QACAtB;QACAC;QACAyB,QAAQnB;QACRE;IACJ;AACJ"}

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

@@ -26,63 +26,19 @@ const drawerOverlayClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
-    root: {
-        z8tnut: "f1g0x7ka",
-        z189sj: [
-            "fhxju0i",
-            "f1cnd47f"
-        ],
-        Byoj8tv: "f1qch9an",
-        uwmqm3: [
-            "f1cnd47f",
-            "fhxju0i"
-        ],
-        B68tc82: "f1p9o1ba",
-        Bmxbyg5: "f1sil6mw",
-        Bbmb7ep: [
-            "f1krrbdw",
-            "f1deotkl"
-        ],
-        Beyfa6y: [
-            "f1deotkl",
-            "f1krrbdw"
-        ],
-        B7oj6ja: [
-            "f10ostut",
-            "f1ozlkrg"
-        ],
-        Btl43ni: [
-            "f1ozlkrg",
-            "f10ostut"
-        ],
-        B4j52fo: "fre7gi1",
-        Bekrc4i: [
-            "f1358rze",
-            "f1rvrf73"
-        ],
-        Bn0qgzm: "fqdk4by",
-        ibv6hh: [
-            "f1rvrf73",
-            "f1358rze"
-        ],
-        a9b677: "f3rx6dk",
-        B2u0y6b: "f1w39fev",
-        Bqenvij: "f11ysow2",
-        B7ck84d: "f1ewtqcl",
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        Bt984gj: "f6jr5hl",
-        Brf1p80: "fbhxue7",
-        De3pzq: "fxugw4r",
-        qhf8xq: "f19dog8a",
-        Bhzewxz: "f15twtuk",
-        B5kzvoi: "f1yab3r1",
-        abs64n: "fk73vx1",
-        E5pizo: "fliqkoi",
-        Bmy1vo4: "f1neo61",
-        Es3by: "f1ytgekk"
-    },
+ */ const useDrawerResetStyles = /*#__PURE__*/ (0, _react1.__resetStyles)("rspikg4", "r195rwb6", [
+    ".rspikg4{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;opacity:0;box-shadow:0px var(--colorTransparentBackground);transition-property:transform,box-shadow,opacity;will-change:transform,box-shadow,opacity;}",
+    ".rspikg4:focus{outline-style:none;}",
+    ".rspikg4:focus-visible{outline-style:none;}",
+    ".rspikg4[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+    ".rspikg4[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+    ".r195rwb6{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;opacity:0;box-shadow:0px var(--colorTransparentBackground);transition-property:transform,box-shadow,opacity;will-change:transform,box-shadow,opacity;}",
+    ".r195rwb6:focus{outline-style:none;}",
+    ".r195rwb6:focus-visible{outline-style:none;}",
+    ".r195rwb6[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+    ".r195rwb6[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+]);
+const useDrawerRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
     start: {
         Bz10aip: "f1d8gkik"
     },
@@ -96,36 +52,6 @@ const drawerOverlayClassNames = {
     }
 }, {
     d: [
-        ".f1g0x7ka{padding-top:0;}",
-        ".fhxju0i{padding-right:0;}",
-        ".f1cnd47f{padding-left:0;}",
-        ".f1qch9an{padding-bottom:0;}",
-        ".f1p9o1ba{overflow-x:hidden;}",
-        ".f1sil6mw{overflow-y:hidden;}",
-        ".f1krrbdw{border-bottom-right-radius:0;}",
-        ".f1deotkl{border-bottom-left-radius:0;}",
-        ".f10ostut{border-top-right-radius:0;}",
-        ".f1ozlkrg{border-top-left-radius:0;}",
-        ".fre7gi1{border-top-width:0;}",
-        ".f1358rze{border-right-width:0;}",
-        ".f1rvrf73{border-left-width:0;}",
-        ".fqdk4by{border-bottom-width:0;}",
-        ".f3rx6dk{width:var(--fui-Drawer--size);}",
-        ".f1w39fev{max-width:100vw;}",
-        ".f11ysow2{height:auto;}",
-        ".f1ewtqcl{box-sizing:border-box;}",
-        ".f22iagw{display:flex;}",
-        ".f1vx9l62{flex-direction:column;}",
-        ".f6jr5hl{align-items:flex-start;}",
-        ".fbhxue7{justify-content:flex-start;}",
-        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
-        ".f19dog8a{position:fixed;}",
-        ".f15twtuk{top:0;}",
-        ".f1yab3r1{bottom:0;}",
-        ".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;}",
@@ -135,7 +61,7 @@ const drawerOverlayClassNames = {
 });
 /**
  * Styles for the backdrop slot
- */ const useBackdropMotionStyles = /*#__PURE__*/ (0, _react1.__styles)({
+ */ const useBackdropStyles = /*#__PURE__*/ (0, _react1.__styles)({
     backdrop: {
         abs64n: "fk73vx1",
         Bmy1vo4: "f13u1uyl",
@@ -156,13 +82,14 @@ const drawerOverlayClassNames = {
 });
 const useDrawerOverlayStyles_unstable = (state)=>{
     const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const resetStyles = useDrawerResetStyles();
     const rootStyles = useDrawerRootStyles();
-    const backdropMotionStyles = useBackdropMotionStyles();
+    const backdropStyles = useBackdropStyles();
     const durationStyles = (0, _useDrawerBaseStylesstyles.useDrawerDurationStyles)();
     const backdrop = state.root.backdrop;
-    state.root.className = (0, _react1.mergeClasses)(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
+    state.root.className = (0, _react1.mergeClasses)(drawerOverlayClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
     if (backdrop) {
-        backdrop.className = (0, _react1.mergeClasses)(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);
+        backdrop.className = (0, _react1.mergeClasses)(drawerOverlayClassNames.backdrop, backdropStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropStyles.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 * as React from 'react';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n  root: 'fui-DrawerOverlay',\n  backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\n  root: {\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    B68tc82: \"f1p9o1ba\",\n    Bmxbyg5: \"f1sil6mw\",\n    Bbmb7ep: [\"f1krrbdw\", \"f1deotkl\"],\n    Beyfa6y: [\"f1deotkl\", \"f1krrbdw\"],\n    B7oj6ja: [\"f10ostut\", \"f1ozlkrg\"],\n    Btl43ni: [\"f1ozlkrg\", \"f10ostut\"],\n    B4j52fo: \"fre7gi1\",\n    Bekrc4i: [\"f1358rze\", \"f1rvrf73\"],\n    Bn0qgzm: \"fqdk4by\",\n    ibv6hh: [\"f1rvrf73\", \"f1358rze\"],\n    a9b677: \"f3rx6dk\",\n    B2u0y6b: \"f1w39fev\",\n    Bqenvij: \"f11ysow2\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Bt984gj: \"f6jr5hl\",\n    Brf1p80: \"fbhxue7\",\n    De3pzq: \"fxugw4r\",\n    qhf8xq: \"f19dog8a\",\n    Bhzewxz: \"f15twtuk\",\n    B5kzvoi: \"f1yab3r1\",\n    abs64n: \"fk73vx1\",\n    E5pizo: \"fliqkoi\",\n    Bmy1vo4: \"f1neo61\",\n    Es3by: \"f1ytgekk\"\n  },\n  start: {\n    Bz10aip: \"f1d8gkik\"\n  },\n  end: {\n    Bz10aip: \"f1g0pcr8\"\n  },\n  visible: {\n    abs64n: \"f5p0z4x\",\n    Bz10aip: \"f87uvqx\",\n    E5pizo: \"f10nrhrw\"\n  }\n}, {\n  d: [\".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".f1p9o1ba{overflow-x:hidden;}\", \".f1sil6mw{overflow-y:hidden;}\", \".f1krrbdw{border-bottom-right-radius:0;}\", \".f1deotkl{border-bottom-left-radius:0;}\", \".f10ostut{border-top-right-radius:0;}\", \".f1ozlkrg{border-top-left-radius:0;}\", \".fre7gi1{border-top-width:0;}\", \".f1358rze{border-right-width:0;}\", \".f1rvrf73{border-left-width:0;}\", \".fqdk4by{border-bottom-width:0;}\", \".f3rx6dk{width:var(--fui-Drawer--size);}\", \".f1w39fev{max-width:100vw;}\", \".f11ysow2{height:auto;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f6jr5hl{align-items:flex-start;}\", \".fbhxue7{justify-content:flex-start;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f19dog8a{position:fixed;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".fk73vx1{opacity:0;}\", \".fliqkoi{box-shadow:0px transparent;}\", \".f1neo61{transition-property:transform,box-shadow,opacity;}\", \".f1ytgekk{will-change:transform,box-shadow,opacity;}\", \".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}\", \".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}\", \".f5p0z4x{opacity:1;}\", \".f87uvqx{transform:translate3D(0, 0, 0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropMotionStyles = /*#__PURE__*/__styles({\n  backdrop: {\n    abs64n: \"fk73vx1\",\n    Bmy1vo4: \"f13u1uyl\",\n    Bkqvd7p: \"f17wnm97\",\n    Es3by: \"f1gqqdtu\"\n  },\n  visible: {\n    abs64n: \"f5p0z4x\"\n  }\n}, {\n  d: [\".fk73vx1{opacity:0;}\", \".f13u1uyl{transition-property:opacity;}\", \".f17wnm97{transition-timing-function:var(--curveEasyEase);}\", \".f1gqqdtu{will-change:opacity;}\", \".f5p0z4x{opacity:1;}\"]\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */\nexport const useDrawerOverlayStyles_unstable = state => {\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n  const backdropMotionStyles = useBackdropMotionStyles();\n  const durationStyles = useDrawerDurationStyles();\n  const backdrop = state.root.backdrop;\n  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, rootStyles.root, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n  if (backdrop) {\n    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropMotionStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropMotionStyles.visible, backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useDrawerRootStyles","__styles","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","a9b677","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","qhf8xq","Bhzewxz","B5kzvoi","abs64n","E5pizo","Bmy1vo4","Es3by","start","Bz10aip","end","visible","d","useBackdropMotionStyles","Bkqvd7p","state","baseClassNames","useDrawerBaseClassNames","rootStyles","backdropMotionStyles","durationStyles","useDrawerDurationStyles","className","mergeClasses","position","motion","active","size","backdropMotion"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAyEAC,+BAA+B;eAA/BA;;;;iEA7EU;wBACgB;2CAE8D;AAC9F,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDH,MAAM;QACJI,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,OAAO;IACT;IACAC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPP,QAAQ;QACRK,SAAS;QACTJ,QAAQ;IACV;AACF,GAAG;IACDO,GAAG;QAAC;QAA6B;QAA8B;QAA8B;QAAgC;QAAiC;QAAiC;QAA4C;QAA2C;QAAyC;QAAwC;QAAiC;QAAoC;QAAmC;QAAoC;QAA4C;QAA+B;QAA2B;QAAqC;QAA2B;QAAqC;QAAqC;QAAyC;QAA8D;QAA8B;QAAqB;QAAwB;QAAwB;QAAyC;QAA+D;QAAwD;QAA+E;QAA8E;QAAwB;QAA6C;KAAyC;AAC11C;AACA;;CAEC,GACD,MAAMC,0BAA0B,WAAW,GAAEpC,IAAAA,gBAAQ,EAAC;IACpDF,UAAU;QACR6B,QAAQ;QACRE,SAAS;QACTQ,SAAS;QACTP,OAAO;IACT;IACAI,SAAS;QACPP,QAAQ;IACV;AACF,GAAG;IACDQ,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMvC,kCAAkC0C,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,aAAa1C;IACnB,MAAM2C,uBAAuBN;IAC7B,MAAMO,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAM9C,WAAWwC,MAAMzC,IAAI,CAACC,QAAQ;IACpCwC,MAAMzC,IAAI,CAACgD,SAAS,GAAGC,IAAAA,oBAAY,EAACnD,wBAAwBE,IAAI,EAAE0C,gBAAgBE,WAAW5C,IAAI,EAAE4C,UAAU,CAACH,MAAMS,QAAQ,CAAC,EAAET,MAAMU,MAAM,CAACC,MAAM,IAAIR,WAAWP,OAAO,EAAEI,MAAMzC,IAAI,CAACgD,SAAS;IAC9L,IAAI/C,UAAU;QACZA,SAAS+C,SAAS,GAAGC,IAAAA,oBAAY,EAACnD,wBAAwBG,QAAQ,EAAE4C,qBAAqB5C,QAAQ,EAAE6C,cAAc,CAACL,MAAMY,IAAI,CAAC,EAAEZ,MAAMa,cAAc,CAACF,MAAM,IAAIP,qBAAqBR,OAAO,EAAEpC,SAAS+C,SAAS;IAChN;IACA,OAAOP;AACT,GACA,yDAAyD"}
+{"version":3,"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n  root: 'fui-DrawerOverlay',\n  backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = /*#__PURE__*/__resetStyles(\"rspikg4\", \"r195rwb6\", [\".rspikg4{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;opacity:0;box-shadow:0px var(--colorTransparentBackground);transition-property:transform,box-shadow,opacity;will-change:transform,box-shadow,opacity;}\", \".rspikg4:focus{outline-style:none;}\", \".rspikg4:focus-visible{outline-style:none;}\", \".rspikg4[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rspikg4[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r195rwb6{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;opacity:0;box-shadow:0px var(--colorTransparentBackground);transition-property:transform,box-shadow,opacity;will-change:transform,box-shadow,opacity;}\", \".r195rwb6:focus{outline-style:none;}\", \".r195rwb6:focus-visible{outline-style:none;}\", \".r195rwb6[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r195rwb6[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\nconst useDrawerRootStyles = /*#__PURE__*/__styles({\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: [\".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 useBackdropStyles = /*#__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 resetStyles = useDrawerResetStyles();\n  const rootStyles = useDrawerRootStyles();\n  const backdropStyles = useBackdropStyles();\n  const durationStyles = useDrawerDurationStyles();\n  const backdrop = state.root.backdrop;\n  state.root.className = mergeClasses(drawerOverlayClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n  if (backdrop) {\n    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdropStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropStyles.visible, backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDrawerOverlayStyles.styles.js.map"],"names":["drawerOverlayClassNames","useDrawerOverlayStyles_unstable","root","backdrop","useDrawerResetStyles","__resetStyles","useDrawerRootStyles","__styles","start","Bz10aip","end","visible","abs64n","E5pizo","d","useBackdropStyles","Bmy1vo4","Bkqvd7p","Es3by","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","backdropStyles","durationStyles","useDrawerDurationStyles","className","mergeClasses","position","motion","active","size","backdropMotion"],"mappings":";;;;;;;;;;;IAKaA,uBAAuB;eAAvBA;;IA0CAC,+BAA+B;eAA/BA;;;;iEA/CU;wBAC+B;2CAG+C;AAC9F,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,qBAAa,EAAC,WAAW,YAAY;IAAC;IAAgf;IAAuC;IAA+C;IAAgK;IAAkvB;IAAif;IAAwC;IAAgD;IAAiK;CAAkvB;AACpgG,MAAMC,sBAAsB,WAAW,GAAEC,IAAAA,gBAAQ,EAAC;IAChDC,OAAO;QACLC,SAAS;IACX;IACAC,KAAK;QACHD,SAAS;IACX;IACAE,SAAS;QACPC,QAAQ;QACRH,SAAS;QACTI,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA+E;QAA8E;QAAwB;QAA6C;KAAyC;AACjR;AACA;;CAEC,GACD,MAAMC,oBAAoB,WAAW,GAAER,IAAAA,gBAAQ,EAAC;IAC9CJ,UAAU;QACRS,QAAQ;QACRI,SAAS;QACTC,SAAS;QACTC,OAAO;IACT;IACAP,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDE,GAAG;QAAC;QAAwB;QAA2C;QAA+D;QAAmC;KAAuB;AAClM;AAIO,MAAMb,kCAAkCkB,CAAAA;IAC7C,MAAMC,iBAAiBC,IAAAA,kDAAuB,EAACF;IAC/C,MAAMG,cAAclB;IACpB,MAAMmB,aAAajB;IACnB,MAAMkB,iBAAiBT;IACvB,MAAMU,iBAAiBC,IAAAA,kDAAuB;IAC9C,MAAMvB,WAAWgB,MAAMjB,IAAI,CAACC,QAAQ;IACpCgB,MAAMjB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,oBAAY,EAAC5B,wBAAwBE,IAAI,EAAEkB,gBAAgBE,aAAaC,UAAU,CAACJ,MAAMU,QAAQ,CAAC,EAAEV,MAAMW,MAAM,CAACC,MAAM,IAAIR,WAAWZ,OAAO,EAAEQ,MAAMjB,IAAI,CAACyB,SAAS;IAC1L,IAAIxB,UAAU;QACZA,SAASwB,SAAS,GAAGC,IAAAA,oBAAY,EAAC5B,wBAAwBG,QAAQ,EAAEqB,eAAerB,QAAQ,EAAEsB,cAAc,CAACN,MAAMa,IAAI,CAAC,EAAEb,MAAMc,cAAc,CAACF,MAAM,IAAIP,eAAeb,OAAO,EAAER,SAASwB,SAAS;IACpM;IACA,OAAOR;AACT,GACA,yDAAyD"}

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

@@ -28,19 +28,18 @@ const drawerCSSVars = {
     drawerSizeVar: '--fui-Drawer--size'
 };
 const drawerDefaultStyles = {
-    .../*#__PURE__*/ _react.shorthands.padding(0),
     .../*#__PURE__*/ _react.shorthands.overflow('hidden'),
-    .../*#__PURE__*/ _react.shorthands.borderRadius(0),
-    .../*#__PURE__*/ _react.shorthands.border(0),
     width: `var(${drawerCSSVars.drawerSizeVar})`,
     maxWidth: '100vw',
     height: 'auto',
+    maxHeight: '100vh',
     boxSizing: 'border-box',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
-    backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1
 };
 /**
  * Shared dynamic styles for the Drawer component

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles = {\n  ... /*#__PURE__*/shorthands.padding(0),\n  ... /*#__PURE__*/shorthands.overflow('hidden'),\n  ... /*#__PURE__*/shorthands.borderRadius(0),\n  ... /*#__PURE__*/shorthands.border(0),\n  width: `var(${drawerCSSVars.drawerSizeVar})`,\n  maxWidth: '100vw',\n  height: 'auto',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  justifyContent: 'flex-start',\n  backgroundColor: tokens.colorNeutralBackground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = /*#__PURE__*/__styles({\n  entering: {\n    Bkqvd7p: \"f18ad807\"\n  },\n  exiting: {\n    Bkqvd7p: \"f1mfizis\"\n  },\n  reducedMotion: {\n    Hwfdqs: \"f5e8c63\"\n  },\n  start: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  end: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  small: {\n    Bjr0ffy: \"f1exhnwo\"\n  },\n  medium: {\n    Bjr0ffy: \"fqofjzu\"\n  },\n  large: {\n    Bjr0ffy: \"fce6y3m\"\n  },\n  full: {\n    Bjr0ffy: \"fsdmzs6\"\n  }\n}, {\n  d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nexport const useDrawerDurationStyles = /*#__PURE__*/__styles({\n  small: {\n    B3o57yi: \"fc397y7\"\n  },\n  medium: {\n    B3o57yi: \"f78771\"\n  },\n  large: {\n    B3o57yi: \"f9ymmep\"\n  },\n  full: {\n    B3o57yi: \"f1loko9l\"\n  }\n}, {\n  d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n  position,\n  size,\n  motion\n}) => {\n  const baseStyles = useDrawerStyles();\n  const durationStyles = useDrawerDurationStyles();\n  return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","shorthands","padding","overflow","borderRadius","border","width","maxWidth","height","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","B3o57yi","position","size","motion","baseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;IAsDAC,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;uBAjFsC;4BAC5B;AAIhB,MAAMH,gBAAgB;IAC3BI,eAAe;AACjB;AAIO,MAAMH,sBAAsB;IACjC,GAAI,WAAW,GAAEI,iBAAU,CAACC,OAAO,CAAC,EAAE;IACtC,GAAI,WAAW,GAAED,iBAAU,CAACE,QAAQ,CAAC,SAAS;IAC9C,GAAI,WAAW,GAAEF,iBAAU,CAACG,YAAY,CAAC,EAAE;IAC3C,GAAI,WAAW,GAAEH,iBAAU,CAACI,MAAM,CAAC,EAAE;IACrCC,OAAO,CAAC,IAAI,EAAEV,cAAcI,aAAa,CAAC,CAAC,CAAC;IAC5CO,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;AACjD;AACA;;CAEC,GACD,MAAMC,kBAAkB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC5CC,UAAU;QACRC,SAAS;IACX;IACAC,SAAS;QACPD,SAAS;IACX;IACAE,eAAe;QACbC,QAAQ;IACV;IACAC,OAAO;QACLC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,KAAK;QACHD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAG,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAoE;QAAoE;QAAsB;QAAuB;QAAwB;QAAwB;QAAwC;QAAuC;QAAuC;KAAsC;IACrYC,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,MAAMpC,0BAA0B,WAAW,GAAEoB,IAAAA,eAAQ,EAAC;IAC3DU,OAAO;QACLO,SAAS;IACX;IACAL,QAAQ;QACNK,SAAS;IACX;IACAJ,OAAO;QACLI,SAAS;IACX;IACAH,MAAM;QACJG,SAAS;IACX;AACF,GAAG;IACDF,GAAG;QAAC;QAAwD;QAAqD;QAAwD;KAA2D;AACtO;AACO,MAAMlC,0BAA0B,CAAC,EACtCqC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,aAAatB;IACnB,MAAMuB,iBAAiB1C;IACvB,OAAO2C,IAAAA,mBAAY,EAACF,UAAU,CAACH,SAAS,EAAEI,cAAc,CAACH,KAAK,EAAEE,UAAU,CAACF,KAAK,EAAEE,WAAWjB,aAAa,EAAEgB,OAAOI,IAAI,KAAK,cAAcH,WAAWpB,QAAQ,EAAEmB,OAAOI,IAAI,KAAK,aAAaH,WAAWlB,OAAO;AAChN,GACA,sDAAsD"}
+{"version":3,"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles = {\n  ... /*#__PURE__*/shorthands.overflow('hidden'),\n  width: `var(${drawerCSSVars.drawerSizeVar})`,\n  maxWidth: '100vw',\n  height: 'auto',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  justifyContent: 'flex-start',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = /*#__PURE__*/__styles({\n  entering: {\n    Bkqvd7p: \"f18ad807\"\n  },\n  exiting: {\n    Bkqvd7p: \"f1mfizis\"\n  },\n  reducedMotion: {\n    Hwfdqs: \"f5e8c63\"\n  },\n  start: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    j35jbq: [\"fvfyk4\", \"frppm18\"]\n  },\n  end: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    oyh7mz: [\"frppm18\", \"fvfyk4\"]\n  },\n  small: {\n    Bjr0ffy: \"f1exhnwo\"\n  },\n  medium: {\n    Bjr0ffy: \"fqofjzu\"\n  },\n  large: {\n    Bjr0ffy: \"fce6y3m\"\n  },\n  full: {\n    Bjr0ffy: \"fsdmzs6\"\n  }\n}, {\n  d: [\".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\", \".f1vgc2s3{left:0;}\", \".f1e31b4d{right:0;}\", \".fvfyk4{right:auto;}\", \".frppm18{left:auto;}\", \".f1exhnwo{--fui-Drawer--size:320px;}\", \".fqofjzu{--fui-Drawer--size:592px;}\", \".fce6y3m{--fui-Drawer--size:940px;}\", \".fsdmzs6{--fui-Drawer--size:100vw;}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nexport const useDrawerDurationStyles = /*#__PURE__*/__styles({\n  small: {\n    B3o57yi: \"fc397y7\"\n  },\n  medium: {\n    B3o57yi: \"f78771\"\n  },\n  large: {\n    B3o57yi: \"f9ymmep\"\n  },\n  full: {\n    B3o57yi: \"f1loko9l\"\n  }\n}, {\n  d: [\".fc397y7{transition-duration:var(--durationGentle);}\", \".f78771{transition-duration:var(--durationSlow);}\", \".f9ymmep{transition-duration:var(--durationSlower);}\", \".f1loko9l{transition-duration:var(--durationUltraSlow);}\"]\n});\nexport const useDrawerBaseClassNames = ({\n  position,\n  size,\n  motion\n}) => {\n  const baseStyles = useDrawerStyles();\n  const durationStyles = useDrawerDurationStyles();\n  return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n//# sourceMappingURL=useDrawerBaseStyles.styles.js.map"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerDurationStyles","useDrawerBaseClassNames","drawerSizeVar","shorthands","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","__styles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","B3o57yi","position","size","motion","baseStyles","durationStyles","mergeClasses","type"],"mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAMAC,mBAAmB;eAAnBA;;IAqDAC,uBAAuB;eAAvBA;;IAgBAC,uBAAuB;eAAvBA;;;uBAhFsC;4BAC5B;AAIhB,MAAMH,gBAAgB;IAC3BI,eAAe;AACjB;AAIO,MAAMH,sBAAsB;IACjC,GAAI,WAAW,GAAEI,iBAAU,CAACC,QAAQ,CAAC,SAAS;IAC9CC,OAAO,CAAC,IAAI,EAAEP,cAAcI,aAAa,CAAC,CAAC,CAAC;IAC5CI,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAM,CAACC,uBAAuB;IAC/CC,OAAOF,kBAAM,CAACG,uBAAuB;AACvC;AACA;;CAEC,GACD,MAAMC,kBAAkB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC5CC,UAAU;QACRC,SAAS;IACX;IACAC,SAAS;QACPD,SAAS;IACX;IACAE,eAAe;QACbC,QAAQ;IACV;IACAC,OAAO;QACLC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;YAAC;YAAU;SAAU;IAC/B;IACAC,KAAK;QACHD,QAAQ;YAAC;YAAY;SAAW;QAChCD,QAAQ;YAAC;YAAW;SAAS;IAC/B;IACAG,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;IACAG,MAAM;QACJH,SAAS;IACX;AACF,GAAG;IACDI,GAAG;QAAC;QAAoE;QAAoE;QAAsB;QAAuB;QAAwB;QAAwB;QAAwC;QAAuC;QAAuC;KAAsC;IACrYC,GAAG;QAAC;YAAC;YAA8F;gBACjGA,GAAG;YACL;SAAE;KAAC;AACL;AACO,MAAMpC,0BAA0B,WAAW,GAAEoB,IAAAA,eAAQ,EAAC;IAC3DU,OAAO;QACLO,SAAS;IACX;IACAL,QAAQ;QACNK,SAAS;IACX;IACAJ,OAAO;QACLI,SAAS;IACX;IACAH,MAAM;QACJG,SAAS;IACX;AACF,GAAG;IACDF,GAAG;QAAC;QAAwD;QAAqD;QAAwD;KAA2D;AACtO;AACO,MAAMlC,0BAA0B,CAAC,EACtCqC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACP;IACC,MAAMC,aAAatB;IACnB,MAAMuB,iBAAiB1C;IACvB,OAAO2C,IAAAA,mBAAY,EAACF,UAAU,CAACH,SAAS,EAAEI,cAAc,CAACH,KAAK,EAAEE,UAAU,CAACF,KAAK,EAAEE,WAAWjB,aAAa,EAAEgB,OAAOI,IAAI,KAAK,cAAcH,WAAWpB,QAAQ,EAAEmB,OAAOI,IAAI,KAAK,aAAaH,WAAWlB,OAAO;AAChN,GACA,sDAAsD"}