@fluentui/react-drawer 9.8.7 → 9.9.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.9.0)
+
+Thu, 17 Jul 2025 13:45:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.8.8..@fluentui/react-drawer_v9.9.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-dialog to v9.14.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-portal to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.8.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.8.8)
+
+Wed, 16 Jul 2025 13:52:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.8.7..@fluentui/react-drawer_v9.8.8)
+
+### Patches
+
+- Bump @fluentui/react-dialog to v9.13.8 ([PR #34849](https://github.com/microsoft/fluentui/pull/34849) by beachball)
+
 ## [9.8.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.8.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.8.6..@fluentui/react-drawer_v9.8.7)
 
 ### Patches

package/lib/components/Drawer/useDrawerStyles.styles.raw.js

@@ -0,0 +1,11 @@
+import { mergeClasses } from '@griffel/react';
+export const drawerClassNames = {
+    root: 'fui-Drawer'
+};
+/**
+ * Apply styling to the Drawer slots based on the state
+ */ export const useDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = mergeClasses(drawerClassNames.root, state.root.className);
+    return state;
+};

package/lib/components/Drawer/useDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Drawer/useDrawerStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerSlots, DrawerState } from './Drawer.types';\n\nexport const drawerClassNames: SlotClassNames<Omit<DrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-Drawer',\n};\n\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = (state: DrawerState): DrawerState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","drawerClassNames","root","useDrawerStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAK9C,OAAO,MAAMC,mBAAuE;IAClFC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvC;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,iBAAiBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE/E,OAAOD;AACT,EAAE"}

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js

@@ -0,0 +1,29 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const drawerBodyClassNames = {
+    root: 'fui-DrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeResetStyles({
+    padding: `0 ${tokens.spacingHorizontalXXL}`,
+    flex: 1,
+    alignSelf: 'stretch',
+    position: 'relative',
+    zIndex: 1,
+    overflow: 'auto',
+    ':last-child': {
+        paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`
+    },
+    ':first-child': {
+        paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`
+    }
+});
+/**
+ * Apply styling to the DrawerBody slots based on the state
+ */ export const useDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
+    return state;
+};

package/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n  root: 'fui-DrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXL}`,\n  flex: 1,\n  alignSelf: 'stretch',\n  position: 'relative',\n  zIndex: 1,\n  overflow: 'auto',\n\n  ':last-child': {\n    paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n  },\n\n  ':first-child': {\n    paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n  },\n});\n\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","padding","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","useDrawerBodyStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,SAAS,CAAC,EAAE,EAAEJ,OAAOK,oBAAoB,CAAC,CAAC;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEX,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAEZ,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASZ;IAEfW,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,qBAAqBC,IAAI,EAAEa,QAAQD,MAAMZ,IAAI,CAACc,SAAS;IAE3F,OAAOF;AACT,EAAE"}

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js

@@ -0,0 +1,45 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
+export const drawerFooterClassNames = {
+    root: 'fui-DrawerFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeResetStyles({
+    width: '100%',
+    maxWidth: '100%',
+    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    columnGap: tokens.spacingHorizontalS,
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 2
+});
+const useDrawerFooterStyles = makeStyles({
+    separator: {
+        '::before': {
+            ...drawerSeparatorStyles,
+            top: 0
+        }
+    },
+    separatorVisible: {
+        '::before': {
+            opacity: 1
+        }
+    }
+});
+/**
+ * Apply styling to the DrawerFooter slots based on the state
+ */ export const useDrawerFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootStyles = useDrawerFooterStyles();
+    state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'top'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
+    return state;
+};

package/lib/components/DrawerFooter/useDrawerFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n  root: 'fui-DrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  width: '100%',\n  maxWidth: '100%',\n  padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n  display: 'flex',\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n  columnGap: tokens.spacingHorizontalS,\n  boxSizing: 'border-box',\n  position: 'relative',\n  zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n  separator: {\n    '::before': {\n      ...drawerSeparatorStyles,\n      top: 0,\n    },\n  },\n\n  separatorVisible: {\n    '::before': {\n      opacity: 1,\n    },\n  },\n});\n\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootStyles = useDrawerFooterStyles();\n\n  state.root.className = mergeClasses(\n    drawerFooterClassNames.root,\n    styles,\n    state.scrollState !== 'none' && rootStyles.separator,\n    ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerFooterClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalL","spacingHorizontalXXL","spacingVerticalXXL","display","justifyContent","alignItems","columnGap","spacingHorizontalS","boxSizing","position","zIndex","useDrawerFooterStyles","separator","top","separatorVisible","opacity","useDrawerFooterStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,CAAC,EAAEP,OAAOQ,gBAAgB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,kBAAkB,CAAC,CAAC;IACjGC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,WAAWd,OAAOe,kBAAkB;IACpCC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,YAAY;YACV,GAAGnB,qBAAqB;YACxBoB,KAAK;QACP;IACF;IAEAC,kBAAkB;QAChB,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnBM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAM,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC5EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js

@@ -0,0 +1,45 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';
+export const drawerHeaderClassNames = {
+    root: 'fui-DrawerHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeResetStyles({
+    width: '100%',
+    maxWidth: '100%',
+    padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,
+    gap: tokens.spacingHorizontalS,
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 2
+});
+const useDrawerHeaderStyles = makeStyles({
+    separator: {
+        '::after': {
+            ...drawerSeparatorStyles,
+            bottom: 0
+        }
+    },
+    separatorVisible: {
+        '::after': {
+            opacity: 1
+        }
+    }
+});
+/**
+ * Apply styling to the DrawerHeader slots based on the state
+ */ export const useDrawerHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootStyles = useDrawerHeaderStyles();
+    state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'bottom'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
+    return state;
+};

package/lib/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n  root: 'fui-DrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  width: '100%',\n  maxWidth: '100%',\n  padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n  gap: tokens.spacingHorizontalS,\n  alignSelf: 'stretch',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  position: 'relative',\n  zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n  separator: {\n    '::after': {\n      ...drawerSeparatorStyles,\n      bottom: 0,\n    },\n  },\n\n  separatorVisible: {\n    '::after': {\n      opacity: 1,\n    },\n  },\n});\n\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootStyles = useDrawerHeaderStyles();\n\n  state.root.className = mergeClasses(\n    drawerHeaderClassNames.root,\n    styles,\n    state.scrollState !== 'none' && rootStyles.separator,\n    ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","separator","bottom","separatorVisible","opacity","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,qBAAqB,QAAQ,qCAAqC;AAI3E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,CAAC,EAAEP,OAAOQ,kBAAkB,CAAC,CAAC,EAAER,OAAOS,oBAAoB,CAAC,CAAC,EAAET,OAAOU,gBAAgB,CAAC,CAAC;IACjGC,KAAKX,OAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBrB,WAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,qBAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnBM,MAAMtB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC/EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js

@@ -0,0 +1,18 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const drawerHeaderNavigationClassNames = {
+    root: 'fui-DrawerHeaderNavigation'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeResetStyles({
+    margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`
+});
+/**
+ * Apply styling to the DrawerHeaderNavigation slots based on the state
+ */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
+    return state;
+};

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n  root: 'fui-DrawerHeaderNavigation',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n  state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerHeaderNavigationClassNames","root","useStyles","margin","spacingVerticalS","spacingHorizontalL","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,QAAQ,CAAC,KAAK,EAAEJ,OAAOK,gBAAgB,CAAC,YAAY,EAAEL,OAAOM,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAEA;;CAEC,GACD,OAAO,MAAMC,2CAA2C,CACtDC;IAEA;IAEA,MAAMC,SAASN;IAEfK,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aAAaE,iCAAiCC,IAAI,EAAEO,QAAQD,MAAMN,IAAI,CAACQ,SAAS;IAEvG,OAAOF;AACT,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js

@@ -0,0 +1,49 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';
+import { tokens } from '@fluentui/react-theme';
+export const drawerHeaderTitleClassNames = {
+    root: 'fui-DrawerHeaderTitle',
+    heading: 'fui-DrawerHeaderTitle__heading',
+    action: 'fui-DrawerHeaderTitle__action'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        columnGap: tokens.spacingHorizontalS
+    },
+    action: {
+        marginRight: `calc(${tokens.spacingHorizontalS} * -1)`
+    }
+});
+/**
+ * Apply styling to the DrawerHeaderTitle slots based on the state
+ */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { heading: root = {}, action, // We should not use components to pass along the base element type of a slot
+    // but there's no way to retrieve the element type of a slot from the slot definition
+    // right now without using SLOT_ELEMENT_TYPE_SYMBOL
+    // TODO: create a method to retrieve the element type of a slot
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    components } = state;
+    useDialogTitleStyles_unstable({
+        components: {
+            root: components.heading,
+            action: components.action
+        },
+        root,
+        action
+    });
+    state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
+    if (state.heading) {
+        state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);
+    }
+    if (state.action) {
+        state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n  root: 'fui-DrawerHeaderTitle',\n  heading: 'fui-DrawerHeaderTitle__heading',\n  action: 'fui-DrawerHeaderTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS,\n  },\n\n  action: {\n    marginRight: `calc(${tokens.spacingHorizontalS} * -1)`,\n  },\n});\n\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  const {\n    heading: root = {},\n    action,\n    // We should not use components to pass along the base element type of a slot\n    // but there's no way to retrieve the element type of a slot from the slot definition\n    // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n    // TODO: create a method to retrieve the element type of a slot\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components,\n  } = state;\n\n  useDialogTitleStyles_unstable({\n    components: {\n      root: components.heading,\n      action: components.action,\n    },\n    root,\n    action,\n  });\n\n  state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n  if (state.heading) {\n    state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","display","justifyContent","alignItems","columnGap","spacingHorizontalS","marginRight","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYR,WAAW;IAC3BK,MAAM;QACJI,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWT,OAAOU,kBAAkB;IACtC;IAEAN,QAAQ;QACNO,aAAa,CAAC,KAAK,EAAEX,OAAOU,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAAST;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EACN,6EAA6E;IAC7E,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DW,UAAU,EACX,GAAGF;IAEJd,8BAA8B;QAC5BgB,YAAY;YACVb,MAAMa,WAAWZ,OAAO;YACxBC,QAAQW,WAAWX,MAAM;QAC3B;QACAF;QACAE;IACF;IAEAS,MAAMX,IAAI,CAACc,SAAS,GAAGlB,aAAaG,4BAA4BC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACc,SAAS;IAEvG,IAAIH,MAAMV,OAAO,EAAE;QACjBU,MAAMV,OAAO,CAACa,SAAS,GAAGlB,aAAaG,4BAA4BE,OAAO,EAAEU,MAAMV,OAAO,CAACa,SAAS;IACrG;IAEA,IAAIH,MAAMT,MAAM,EAAE;QAChBS,MAAMT,MAAM,CAACY,SAAS,GAAGlB,aAAaG,4BAA4BG,MAAM,EAAEU,OAAOV,MAAM,EAAES,MAAMT,MAAM,CAACY,SAAS;IACjH;IAEA,OAAOH;AACT,EAAE"}

package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js

@@ -0,0 +1,55 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+export const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = makeResetStyles({
+    ...drawerDefaultStyles,
+    position: 'relative'
+});
+/**
+ * Styles for the root slot
+ */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = makeStyles({
+    /* Separator */ separatorStart: {
+        borderRight: borderValue
+    },
+    separatorEnd: {
+        borderLeft: borderValue
+    },
+    separatorBottom: {
+        borderTop: borderValue
+    },
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        width: '100%',
+        height: `var(${drawerCSSVars.drawerSizeVar})`
+    }
+});
+function getSeparatorClass(state, classNames) {
+    if (!state.separator) {
+        return undefined;
+    }
+    switch(state.position){
+        case 'start':
+            return classNames.separatorStart;
+        case 'end':
+            return classNames.separatorEnd;
+        case 'bottom':
+            return classNames.separatorBottom;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Apply styling to the InlineDrawer slots based on the state
+ */ export const useInlineDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = useDrawerBaseClassNames(state);
+    const rootStyles = useDrawerRootStyles();
+    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+    return state;
+};

package/lib/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n  ...drawerDefaultStyles,\n  position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n  /* Separator */\n  separatorStart: { borderRight: borderValue },\n  separatorEnd: { borderLeft: borderValue },\n  separatorBottom: { borderTop: borderValue },\n\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    width: '100%',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n  },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n  if (!state.separator) {\n    return undefined;\n  }\n\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n\n    case 'end':\n      return classNames.separatorEnd;\n\n    case 'bottom':\n      return classNames.separatorBottom;\n\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n  'use no memo';\n\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n\n  state.root.className = mergeClasses(\n    inlineDrawerClassNames.root,\n    resetStyles,\n    baseClassNames,\n    getSeparatorClass(state, rootStyles),\n    rootStyles[state.position],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","inlineDrawerClassNames","root","useDrawerResetStyles","position","borderValue","colorNeutralBackground3","useDrawerRootStyles","separatorStart","borderRight","separatorEnd","borderLeft","separatorBottom","borderTop","start","end","bottom","width","height","drawerSizeVar","getSeparatorClass","state","classNames","separator","undefined","useInlineDrawerStyles_unstable","resetStyles","baseClassNames","rootStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,yBAAmF;IAC9FC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3C,GAAGK,mBAAmB;IACtBK,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAER,OAAOS,uBAAuB,CAAC,CAAC;AACjE,MAAMC,sBAAsBZ,WAAW;IACrC,aAAa,GACba,gBAAgB;QAAEC,aAAaJ;IAAY;IAC3CK,cAAc;QAAEC,YAAYN;IAAY;IACxCO,iBAAiB;QAAEC,WAAWR;IAAY;IAE1C,eAAe,GACfS,OAAO,CAAC;IACRC,KAAK,CAAC;IACNC,QAAQ;QACNC,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAEpB,cAAcqB,aAAa,CAAC,CAAC,CAAC;IAC/C;AACF;AAEA,SAASC,kBAAkBC,KAAwB,EAAEC,UAAkD;IACrG,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IAEA,OAAQH,MAAMjB,QAAQ;QACpB,KAAK;YACH,OAAOkB,WAAWd,cAAc;QAElC,KAAK;YACH,OAAOc,WAAWZ,YAAY;QAEhC,KAAK;YACH,OAAOY,WAAWV,eAAe;QAEnC;YACE,OAAOY;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACJ;IAC7C;IAEA,MAAMK,cAAcvB;IACpB,MAAMwB,iBAAiB3B,wBAAwBqB;IAC/C,MAAMO,aAAarB;IAEnBc,MAAMnB,IAAI,CAAC2B,SAAS,GAAGjC,aACrBK,uBAAuBC,IAAI,EAC3BwB,aACAC,gBACAP,kBAAkBC,OAAOO,aACzBA,UAAU,CAACP,MAAMjB,QAAQ,CAAC,EAC1BiB,MAAMnB,IAAI,CAAC2B,SAAS;IAGtB,OAAOR;AACT,EAAE"}

package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js

@@ -0,0 +1,25 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = makeResetStyles({
+    inset: '0px',
+    position: 'fixed',
+    backgroundColor: tokens.colorBackgroundOverlay
+});
+const useBackdropStyles = makeStyles({
+    nested: {
+        backgroundColor: tokens.colorTransparentBackground
+    }
+});
+/**
+ * Apply styling to the OverlayDrawerSurface slots based on the state
+ */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const backdropResetStyles = useBackdropResetStyles();
+    const backdropStyles = useBackdropStyles();
+    if (state.backdrop) {
+        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);
+    }
+    return state;
+};

package/lib/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n  inset: '0px',\n  position: 'fixed',\n  backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n  nested: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      backdropResetStyles,\n      state.isNestedDialog && backdropStyles.nested,\n      state.backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","backdrop","className","isNestedDialog"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C;;CAEC,GACD,MAAMC,yBAAyBJ,gBAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBR,WAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,OAAOQ,0BAA0B;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,yCAAyC,CAACC;IACrD;IAEA,MAAMC,sBAAsBV;IAC5B,MAAMW,iBAAiBN;IAEvB,IAAII,MAAMG,QAAQ,EAAE;QAClBH,MAAMG,QAAQ,CAACC,SAAS,GAAGf,aACzBY,qBACAD,MAAMK,cAAc,IAAIH,eAAeL,MAAM,EAC7CG,MAAMG,QAAQ,CAACC,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+export const overlayDrawerClassNames = {
+    root: 'fui-OverlayDrawer',
+    backdrop: 'fui-OverlayDrawer__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useDrawerResetStyles = makeResetStyles({
+    ...createFocusOutlineStyle(),
+    ...drawerDefaultStyles,
+    position: 'fixed',
+    top: 0,
+    bottom: 0
+});
+const useDrawerRootStyles = makeStyles({
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        top: 'auto',
+        height: `var(${drawerCSSVars.drawerSizeVar})`,
+        width: '100vw'
+    },
+    absolute: {
+        position: 'absolute'
+    }
+});
+/**
+ * Apply styling to the OverlayDrawer slots based on the state
+ */ export const useOverlayDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const baseClassNames = useDrawerBaseClassNames(state);
+    const resetStyles = useDrawerResetStyles();
+    const rootStyles = useDrawerRootStyles();
+    const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
+    const backdrop = state.root.backdrop;
+    state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
+    if (backdrop) {
+        backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
+    }
+    return state;
+};

package/lib/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport type { OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-OverlayDrawer',\n  backdrop: 'fui-OverlayDrawer__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  ...drawerDefaultStyles,\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n});\n\nconst useDrawerRootStyles = makeStyles({\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    top: 'auto',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n    width: '100vw',\n  },\n  absolute: {\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): OverlayDrawerState => {\n  'use no memo';\n\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const resetStyles = useDrawerResetStyles();\n  const rootStyles = useDrawerRootStyles();\n\n  const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n  const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement> | undefined;\n\n  state.root.className = mergeClasses(\n    overlayDrawerClassNames.root,\n    baseClassNames,\n    resetStyles,\n    rootStyles[state.position],\n    absoluteStyles,\n    state.root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n  }\n\n  return state;\n};\n"],"names":["React","makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","position","top","bottom","useDrawerRootStyles","start","end","height","drawerSizeVar","width","absolute","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,QAAQ,0CAA0C;AAEtH,OAAO,MAAMC,0BAA6F;IACxGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBV,gBAAgB;IAC3C,GAAGG,yBAAyB;IAC5B,GAAGE,mBAAmB;IACtBM,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,sBAAsBb,WAAW;IACrC,eAAe,GACfc,OAAO,CAAC;IACRC,KAAK,CAAC;IACNH,QAAQ;QACND,KAAK;QACLK,QAAQ,CAAC,IAAI,EAAEb,cAAcc,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRT,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMU,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,iBAAiBjB,wBAAwBgB;IAC/C,MAAME,cAAcd;IACpB,MAAMe,aAAaX;IAEnB,MAAMY,iBAAiBJ,MAAMK,mBAAmB,IAAIF,WAAWL,QAAQ;IACvE,MAAMX,WAAWa,MAAMd,IAAI,CAACC,QAAQ;IAEpCa,MAAMd,IAAI,CAACoB,SAAS,GAAG1B,aACrBK,wBAAwBC,IAAI,EAC5Be,gBACAC,aACAC,UAAU,CAACH,MAAMX,QAAQ,CAAC,EAC1Be,gBACAJ,MAAMd,IAAI,CAACoB,SAAS;IAGtB,IAAInB,UAAU;QACZA,SAASmB,SAAS,GAAG1B,aAAaK,wBAAwBE,QAAQ,EAAEiB,gBAAgBjB,SAASmB,SAAS;IACxG;IAEA,OAAON;AACT,EAAE"}

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

@@ -0,0 +1,72 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * CSS variable names used internally for uniform styling in Drawer.
+ */ export const drawerCSSVars = {
+    drawerSizeVar: '--fui-Drawer--size'
+};
+/**
+ * Default shared styles for the Drawer component
+ */ export const drawerDefaultStyles = {
+    overflow: 'hidden',
+    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,
+    color: tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */ const useDrawerStyles = makeStyles({
+    /* Positioning */ start: {
+        borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        left: 0,
+        right: 'auto'
+    },
+    end: {
+        borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        right: 0,
+        left: 'auto'
+    },
+    bottom: {
+        bottom: 0,
+        top: 'auto'
+    },
+    /* Sizes */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100vw'
+    }
+});
+export const useDrawerBottomBaseStyles = makeStyles({
+    /* Sizes for position bottom */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100%'
+    }
+});
+export const useDrawerBaseClassNames = ({ position, size })=>{
+    const baseStyles = useDrawerStyles();
+    const bottomBaseStyles = useDrawerBottomBaseStyles();
+    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/useDrawerBaseStyles.styles.ts"],"sourcesContent":["import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport { DrawerBaseState } from './DrawerBase.types';\n\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size',\n};\n\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles: GriffelResetStyle = {\n  overflow: 'hidden',\n\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/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = makeStyles({\n  /* Positioning */\n  start: {\n    borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    left: 0,\n    right: 'auto',\n  },\n  end: {\n    borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    right: 0,\n    left: 'auto',\n  },\n  bottom: {\n    bottom: 0,\n    top: 'auto',\n  },\n\n  /* Sizes */\n  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});\n\nexport const useDrawerBottomBaseStyles = makeStyles({\n  /* Sizes for position bottom */\n  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]: '100%',\n  },\n});\n\nexport const useDrawerBaseClassNames = ({ position, size }: DrawerBaseState) => {\n  const baseStyles = useDrawerStyles();\n  const bottomBaseStyles = useDrawerBottomBaseStyles();\n\n  return mergeClasses(\n    baseStyles[position],\n    position === 'bottom' && bottomBaseStyles[size],\n    position !== 'bottom' && baseStyles[size],\n  );\n};\n"],"names":["makeStyles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","borderRight","strokeWidthThin","colorTransparentStroke","left","right","end","borderLeft","bottom","top","small","medium","large","full","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAiCA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAClF,SAASC,MAAM,QAAQ,wBAAwB;AAI/C;;CAEC,GACD,OAAO,MAAMC,gBAAgB;IAC3BC,eAAe;AACjB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,sBAAyC;IACpDC,UAAU;IAEVC,OAAO,CAAC,IAAI,EAAEJ,cAAcC,aAAa,CAAC,CAAC,CAAC;IAC5CI,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBd,OAAOe,uBAAuB;IAC/CC,OAAOhB,OAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,kBAAkBpB,WAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,CAAC,EAAEpB,OAAOqB,eAAe,CAAC,OAAO,EAAErB,OAAOsB,sBAAsB,CAAC,CAAC;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,CAAC,EAAE1B,OAAOqB,eAAe,CAAC,OAAO,EAAErB,OAAOsB,sBAAsB,CAAC,CAAC;QAE9EE,OAAO;QACPD,MAAM;IACR;IACAI,QAAQ;QACNA,QAAQ;QACRC,KAAK;IACP;IAEA,SAAS,GACTC,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF;AAEA,OAAO,MAAM+B,4BAA4BnC,WAAW;IAClD,6BAA6B,GAC7B+B,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF,GAAG;AAEH,OAAO,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,OAAOlC,aACLsC,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C,EAAE"}

package/lib-commonjs/components/Drawer/useDrawerStyles.styles.raw.js

@@ -0,0 +1,27 @@
+"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, {
+    drawerClassNames: function() {
+        return drawerClassNames;
+    },
+    useDrawerStyles_unstable: function() {
+        return useDrawerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const drawerClassNames = {
+    root: 'fui-Drawer'
+};
+const useDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = (0, _react.mergeClasses)(drawerClassNames.root, state.root.className);
+    return state;
+};

package/lib-commonjs/components/Drawer/useDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Drawer/useDrawerStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerSlots, DrawerState } from './Drawer.types';\n\nexport const drawerClassNames: SlotClassNames<Omit<DrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-Drawer',\n};\n\n/**\n * Apply styling to the Drawer slots based on the state\n */\nexport const useDrawerStyles_unstable = (state: DrawerState): DrawerState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(drawerClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["drawerClassNames","useDrawerStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,gBAAAA;eAAAA;;IAOAC,wBAAAA;eAAAA;;;uBAZgB;AAKtB,MAAMD,mBAAuE;IAClFE,MAAM;AACR;AAKO,MAAMD,2BAA2B,CAACE;IACvC;IAEAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAAA,EAAaL,iBAAiBE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IAE/E,OAAOD;AACT"}

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

@@ -0,0 +1,45 @@
+"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, {
+    drawerBodyClassNames: function() {
+        return drawerBodyClassNames;
+    },
+    useDrawerBodyStyles_unstable: function() {
+        return useDrawerBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const drawerBodyClassNames = {
+    root: 'fui-DrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    padding: `0 ${_reacttheme.tokens.spacingHorizontalXXL}`,
+    flex: 1,
+    alignSelf: 'stretch',
+    position: 'relative',
+    zIndex: 1,
+    overflow: 'auto',
+    ':last-child': {
+        paddingBottom: `calc(${_reacttheme.tokens.spacingHorizontalXXL} + 1px)`
+    },
+    ':first-child': {
+        paddingTop: `calc(${_reacttheme.tokens.spacingHorizontalXXL} + 1px)`
+    }
+});
+const useDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerBodyClassNames.root, styles, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n  root: 'fui-DrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXL}`,\n  flex: 1,\n  alignSelf: 'stretch',\n  position: 'relative',\n  zIndex: 1,\n  overflow: 'auto',\n\n  ':last-child': {\n    paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n  },\n\n  ':first-child': {\n    paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n  },\n});\n\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n  return state;\n};\n"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","makeResetStyles","padding","tokens","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,oBAAAA;eAAAA;;IA2BAC,4BAAAA;eAAAA;;;uBAjCiC;4BACvB;AAKhB,MAAMD,uBAAwD;IACnEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,sBAAAA,EAAgB;IAChCC,SAAS,CAAC,EAAE,EAAEC,kBAAAA,CAAOC,oBAAoB,CAAC,CAAC;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEP,kBAAAA,CAAOC,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAER,kBAAAA,CAAOC,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAKO,MAAMN,+BAA+B,CAACc;IAC3C;IAEA,MAAMC,SAASb;IAEfY,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAalB,qBAAqBE,IAAI,EAAEc,QAAQD,MAAMb,IAAI,CAACe,SAAS;IAE3F,OAAOF;AACT"}

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

@@ -0,0 +1,61 @@
+"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, {
+    drawerFooterClassNames: function() {
+        return drawerFooterClassNames;
+    },
+    useDrawerFooterStyles_unstable: function() {
+        return useDrawerFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _drawerSeparatorStyles = require("../../shared/drawerSeparatorStyles");
+const drawerFooterClassNames = {
+    root: 'fui-DrawerFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    width: '100%',
+    maxWidth: '100%',
+    padding: `${_reacttheme.tokens.spacingVerticalL} ${_reacttheme.tokens.spacingHorizontalXXL} ${_reacttheme.tokens.spacingVerticalXXL}`,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    columnGap: _reacttheme.tokens.spacingHorizontalS,
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 2
+});
+const useDrawerFooterStyles = (0, _react.makeStyles)({
+    separator: {
+        '::before': {
+            ..._drawerSeparatorStyles.drawerSeparatorStyles,
+            top: 0
+        }
+    },
+    separatorVisible: {
+        '::before': {
+            opacity: 1
+        }
+    }
+});
+const useDrawerFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootStyles = useDrawerFooterStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerFooterClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'top'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerFooter/useDrawerFooterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\nexport const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {\n  root: 'fui-DrawerFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  width: '100%',\n  maxWidth: '100%',\n  padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalXXL}`,\n  display: 'flex',\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n  columnGap: tokens.spacingHorizontalS,\n  boxSizing: 'border-box',\n  position: 'relative',\n  zIndex: 2,\n});\n\nconst useDrawerFooterStyles = makeStyles({\n  separator: {\n    '::before': {\n      ...drawerSeparatorStyles,\n      top: 0,\n    },\n  },\n\n  separatorVisible: {\n    '::before': {\n      opacity: 1,\n    },\n  },\n});\n\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootStyles = useDrawerFooterStyles();\n\n  state.root.className = mergeClasses(\n    drawerFooterClassNames.root,\n    styles,\n    state.scrollState !== 'none' && rootStyles.separator,\n    ['middle', 'top'].includes(state.scrollState) && rootStyles.separatorVisible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","makeResetStyles","width","maxWidth","padding","tokens","spacingVerticalL","spacingHorizontalXXL","spacingVerticalXXL","display","justifyContent","alignItems","columnGap","spacingHorizontalS","boxSizing","position","zIndex","useDrawerFooterStyles","makeStyles","separator","drawerSeparatorStyles","top","separatorVisible","opacity","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sBAAAA;eAAAA;;IAsCAC,8BAAAA;eAAAA;;;uBA9C6C;4BACnC;uCAGe;AAI/B,MAAMD,yBAA4D;IACvEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,sBAAAA,EAAgB;IAChCC,OAAO;IACPC,UAAU;IACVC,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,CAAC,EAAED,kBAAAA,CAAOE,oBAAoB,CAAC,CAAC,EAAEF,kBAAAA,CAAOG,kBAAkB,CAAC,CAAC;IACjGC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,WAAWP,kBAAAA,CAAOQ,kBAAkB;IACpCC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBC,IAAAA,iBAAAA,EAAW;IACvCC,WAAW;QACT,YAAY;YACV,GAAGC,4CAAqB;YACxBC,KAAK;QACP;IACF;IAEAC,kBAAkB;QAChB,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAKO,MAAMzB,iCAAiC,CAAC0B;IAC7C;IAEA,MAAMC,SAASzB;IACf,MAAM0B,aAAaT;IAEnBO,MAAMzB,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAAA,EACrB/B,uBAAuBE,IAAI,EAC3B0B,QACAD,MAAMK,WAAW,KAAK,UAAUH,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAM,CAACW,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAC5EE,MAAMzB,IAAI,CAAC4B,SAAS;IAGtB,OAAOH;AACT"}

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

@@ -0,0 +1,61 @@
+"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, {
+    drawerHeaderClassNames: function() {
+        return drawerHeaderClassNames;
+    },
+    useDrawerHeaderStyles_unstable: function() {
+        return useDrawerHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _drawerSeparatorStyles = require("../../shared/drawerSeparatorStyles");
+const drawerHeaderClassNames = {
+    root: 'fui-DrawerHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    width: '100%',
+    maxWidth: '100%',
+    padding: `${_reacttheme.tokens.spacingVerticalXXL} ${_reacttheme.tokens.spacingHorizontalXXL} ${_reacttheme.tokens.spacingVerticalS}`,
+    gap: _reacttheme.tokens.spacingHorizontalS,
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 2
+});
+const useDrawerHeaderStyles = (0, _react.makeStyles)({
+    separator: {
+        '::after': {
+            ..._drawerSeparatorStyles.drawerSeparatorStyles,
+            bottom: 0
+        }
+    },
+    separatorVisible: {
+        '::after': {
+            opacity: 1
+        }
+    }
+});
+const useDrawerHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootStyles = useDrawerHeaderStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'bottom'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n  root: 'fui-DrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  width: '100%',\n  maxWidth: '100%',\n  padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n  gap: tokens.spacingHorizontalS,\n  alignSelf: 'stretch',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  position: 'relative',\n  zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n  separator: {\n    '::after': {\n      ...drawerSeparatorStyles,\n      bottom: 0,\n    },\n  },\n\n  separatorVisible: {\n    '::after': {\n      opacity: 1,\n    },\n  },\n});\n\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootStyles = useDrawerHeaderStyles();\n\n  state.root.className = mergeClasses(\n    drawerHeaderClassNames.root,\n    styles,\n    state.scrollState !== 'none' && rootStyles.separator,\n    ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","makeResetStyles","width","maxWidth","padding","tokens","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","makeStyles","separator","drawerSeparatorStyles","bottom","separatorVisible","opacity","state","styles","rootStyles","className","mergeClasses","scrollState","includes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sBAAAA;eAAAA;;IAsCAC,8BAAAA;eAAAA;;;uBA9C6C;4BACnC;uCAGe;AAI/B,MAAMD,yBAA4D;IACvEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,sBAAAA,EAAgB;IAChCC,OAAO;IACPC,UAAU;IACVC,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC,EAAED,kBAAAA,CAAOE,oBAAoB,CAAC,CAAC,EAAEF,kBAAAA,CAAOG,gBAAgB,CAAC,CAAC;IACjGC,KAAKJ,kBAAAA,CAAOK,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,wBAAwBC,IAAAA,iBAAAA,EAAW;IACvCC,WAAW;QACT,WAAW;YACT,GAAGC,4CAAqB;YACxBC,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAKO,MAAMzB,iCAAiC,CAAC0B;IAC7C;IAEA,MAAMC,SAASzB;IACf,MAAM0B,aAAaT;IAEnBO,MAAMzB,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAAA,EACrB/B,uBAAuBE,IAAI,EAC3B0B,QACAD,MAAMK,WAAW,KAAK,UAAUH,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACW,QAAQ,CAACN,MAAMK,WAAW,KAAKH,WAAWJ,gBAAgB,EAC/EE,MAAMzB,IAAI,CAAC4B,SAAS;IAGtB,OAAOH;AACT"}

package/lib-commonjs/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.raw.js

@@ -0,0 +1,34 @@
+"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, {
+    drawerHeaderNavigationClassNames: function() {
+        return drawerHeaderNavigationClassNames;
+    },
+    useDrawerHeaderNavigationStyles_unstable: function() {
+        return useDrawerHeaderNavigationStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const drawerHeaderNavigationClassNames = {
+    root: 'fui-DrawerHeaderNavigation'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    margin: `calc(${_reacttheme.tokens.spacingVerticalS} * -1) calc(${_reacttheme.tokens.spacingHorizontalL} * -1)`
+});
+const useDrawerHeaderNavigationStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderNavigationClassNames.root, styles, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeaderNavigation/useDrawerHeaderNavigationStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\nexport const drawerHeaderNavigationClassNames: SlotClassNames<DrawerHeaderNavigationSlots> = {\n  root: 'fui-DrawerHeaderNavigation',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  margin: `calc(${tokens.spacingVerticalS} * -1) calc(${tokens.spacingHorizontalL} * -1)`,\n});\n\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */\nexport const useDrawerHeaderNavigationStyles_unstable = (\n  state: DrawerHeaderNavigationState,\n): DrawerHeaderNavigationState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n\n  return state;\n};\n"],"names":["drawerHeaderNavigationClassNames","useDrawerHeaderNavigationStyles_unstable","root","useStyles","makeResetStyles","margin","tokens","spacingVerticalS","spacingHorizontalL","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,gCAAAA;eAAAA;;IAcAC,wCAAAA;eAAAA;;;uBApBiC;4BACvB;AAKhB,MAAMD,mCAAgF;IAC3FE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,sBAAAA,EAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAEC,kBAAAA,CAAOC,gBAAgB,CAAC,YAAY,EAAED,kBAAAA,CAAOE,kBAAkB,CAAC,MAAM,CAAC;AACzF;AAKO,MAAMP,2CAA2C,CACtDQ;IAEA;IAEA,MAAMC,SAASP;IAEfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EAAaZ,iCAAiCE,IAAI,EAAEQ,QAAQD,MAAMP,IAAI,CAACS,SAAS;IAEvG,OAAOF;AACT"}

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js

@@ -0,0 +1,64 @@
+"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, {
+    drawerHeaderTitleClassNames: function() {
+        return drawerHeaderTitleClassNames;
+    },
+    useDrawerHeaderTitleStyles_unstable: function() {
+        return useDrawerHeaderTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactdialog = require("@fluentui/react-dialog");
+const _reacttheme = require("@fluentui/react-theme");
+const drawerHeaderTitleClassNames = {
+    root: 'fui-DrawerHeaderTitle',
+    heading: 'fui-DrawerHeaderTitle__heading',
+    action: 'fui-DrawerHeaderTitle__action'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        columnGap: _reacttheme.tokens.spacingHorizontalS
+    },
+    action: {
+        marginRight: `calc(${_reacttheme.tokens.spacingHorizontalS} * -1)`
+    }
+});
+const useDrawerHeaderTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { heading: root = {}, action, // but there's no way to retrieve the element type of a slot from the slot definition
+    // right now without using SLOT_ELEMENT_TYPE_SYMBOL
+    // TODO: create a method to retrieve the element type of a slot
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    components } = state;
+    (0, _reactdialog.useDialogTitleStyles_unstable)({
+        components: {
+            root: components.heading,
+            action: components.action
+        },
+        root,
+        action
+    });
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.root, styles.root, state.root.className);
+    if (state.heading) {
+        state.heading.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.heading, state.heading.className);
+    }
+    if (state.action) {
+        state.action.className = (0, _react.mergeClasses)(drawerHeaderTitleClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

package/lib-commonjs/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\nexport const drawerHeaderTitleClassNames: SlotClassNames<DrawerHeaderTitleSlots> = {\n  root: 'fui-DrawerHeaderTitle',\n  heading: 'fui-DrawerHeaderTitle__heading',\n  action: 'fui-DrawerHeaderTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS,\n  },\n\n  action: {\n    marginRight: `calc(${tokens.spacingHorizontalS} * -1)`,\n  },\n});\n\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */\nexport const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleState): DrawerHeaderTitleState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  const {\n    heading: root = {},\n    action,\n    // We should not use components to pass along the base element type of a slot\n    // but there's no way to retrieve the element type of a slot from the slot definition\n    // right now without using SLOT_ELEMENT_TYPE_SYMBOL\n    // TODO: create a method to retrieve the element type of a slot\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components,\n  } = state;\n\n  useDialogTitleStyles_unstable({\n    components: {\n      root: components.heading,\n      action: components.action,\n    },\n    root,\n    action,\n  });\n\n  state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n\n  if (state.heading) {\n    state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"names":["drawerHeaderTitleClassNames","useDrawerHeaderTitleStyles_unstable","root","heading","action","useStyles","makeStyles","display","justifyContent","alignItems","columnGap","tokens","spacingHorizontalS","marginRight","state","styles","components","useDialogTitleStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,2BAAAA;eAAAA;;IAyBAC,mCAAAA;eAAAA;;;uBAhC4B;6BAEK;4BACvB;AAIhB,MAAMD,8BAAsE;IACjFE,MAAM;IACNC,SAAS;IACTC,QAAQ;AACV;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BJ,MAAM;QACJK,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZC,WAAWC,kBAAAA,CAAOC,kBAAkB;IACtC;IAEAR,QAAQ;QACNS,aAAa,CAAC,KAAK,EAAEF,kBAAAA,CAAOC,kBAAkB,CAAC,MAAM,CAAC;IACxD;AACF;AAKO,MAAMX,sCAAsC,CAACa;IAClD;IAEA,MAAMC,SAASV;IAEf,MAAM,EACJF,SAASD,OAAO,CAAC,CAAC,EAClBE,MAAM,EAEN,qFAAqF;IACrF,mDAAmD;IACnD,+DAA+D;IAC/D,4DAA4D;IAC5DY,UAAU,EACX,GAAGF;IAEJG,IAAAA,0CAAAA,EAA8B;QAC5BD,YAAY;YACVd,MAAMc,WAAWb,OAAO;YACxBC,QAAQY,WAAWZ,MAAM;QAC3B;QACAF;QACAE;IACF;IAEAU,MAAMZ,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAAA,EAAanB,4BAA4BE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACgB,SAAS;IAEvG,IAAIJ,MAAMX,OAAO,EAAE;QACjBW,MAAMX,OAAO,CAACe,SAAS,GAAGC,IAAAA,mBAAAA,EAAanB,4BAA4BG,OAAO,EAAEW,MAAMX,OAAO,CAACe,SAAS;IACrG;IAEA,IAAIJ,MAAMV,MAAM,EAAE;QAChBU,MAAMV,MAAM,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAanB,4BAA4BI,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACc,SAAS;IACjH;IAEA,OAAOJ;AACT"}

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

@@ -0,0 +1,71 @@
+"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, {
+    inlineDrawerClassNames: function() {
+        return inlineDrawerClassNames;
+    },
+    useInlineDrawerStyles_unstable: function() {
+        return useInlineDrawerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
+const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = (0, _react.makeResetStyles)({
+    ..._useDrawerBaseStylesstyles.drawerDefaultStyles,
+    position: 'relative'
+});
+/**
+ * Styles for the root slot
+ */ const borderValue = `1px solid ${_reacttheme.tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = (0, _react.makeStyles)({
+    /* Separator */ separatorStart: {
+        borderRight: borderValue
+    },
+    separatorEnd: {
+        borderLeft: borderValue
+    },
+    separatorBottom: {
+        borderTop: borderValue
+    },
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        width: '100%',
+        height: `var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar})`
+    }
+});
+function getSeparatorClass(state, classNames) {
+    if (!state.separator) {
+        return undefined;
+    }
+    switch(state.position){
+        case 'start':
+            return classNames.separatorStart;
+        case 'end':
+            return classNames.separatorEnd;
+        case 'bottom':
+            return classNames.separatorBottom;
+        default:
+            return undefined;
+    }
+}
+const useInlineDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const rootStyles = useDrawerRootStyles();
+    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nimport type { InlineDrawerSlots, InlineDrawerState } from './InlineDrawer.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const inlineDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-InlineDrawer',\n};\n\nconst useDrawerResetStyles = makeResetStyles({\n  ...drawerDefaultStyles,\n  position: 'relative',\n});\n\n/**\n * Styles for the root slot\n */\nconst borderValue = `1px solid ${tokens.colorNeutralBackground3}`;\nconst useDrawerRootStyles = makeStyles({\n  /* Separator */\n  separatorStart: { borderRight: borderValue },\n  separatorEnd: { borderLeft: borderValue },\n  separatorBottom: { borderTop: borderValue },\n\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    width: '100%',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n  },\n});\n\nfunction getSeparatorClass(state: InlineDrawerState, classNames: ReturnType<typeof useDrawerRootStyles>) {\n  if (!state.separator) {\n    return undefined;\n  }\n\n  switch (state.position) {\n    case 'start':\n      return classNames.separatorStart;\n\n    case 'end':\n      return classNames.separatorEnd;\n\n    case 'bottom':\n      return classNames.separatorBottom;\n\n    default:\n      return undefined;\n  }\n}\n\n/**\n * Apply styling to the InlineDrawer slots based on the state\n */\nexport const useInlineDrawerStyles_unstable = (state: InlineDrawerState): InlineDrawerState => {\n  'use no memo';\n\n  const resetStyles = useDrawerResetStyles();\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const rootStyles = useDrawerRootStyles();\n\n  state.root.className = mergeClasses(\n    inlineDrawerClassNames.root,\n    resetStyles,\n    baseClassNames,\n    getSeparatorClass(state, rootStyles),\n    rootStyles[state.position],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["inlineDrawerClassNames","useInlineDrawerStyles_unstable","root","useDrawerResetStyles","makeResetStyles","drawerDefaultStyles","position","borderValue","tokens","colorNeutralBackground3","useDrawerRootStyles","makeStyles","separatorStart","borderRight","separatorEnd","borderLeft","separatorBottom","borderTop","start","end","bottom","width","height","drawerCSSVars","drawerSizeVar","getSeparatorClass","state","classNames","separator","undefined","resetStyles","baseClassNames","useDrawerBaseClassNames","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,sBAAAA;eAAAA;;IAmDAC,8BAAAA;eAAAA;;;uBA1D6C;4BAEnC;2CAGqD;AAErE,MAAMD,yBAAmF;IAC9FE,MAAM;AACR;AAEA,MAAMC,uBAAuBC,IAAAA,sBAAAA,EAAgB;IAC3C,GAAGC,8CAAmB;IACtBC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,cAAc,CAAC,UAAU,EAAEC,kBAAAA,CAAOC,uBAAuB,CAAC,CAAC;AACjE,MAAMC,sBAAsBC,IAAAA,iBAAAA,EAAW;IACrC,aAAa,GACbC,gBAAgB;QAAEC,aAAaN;IAAY;IAC3CO,cAAc;QAAEC,YAAYR;IAAY;IACxCS,iBAAiB;QAAEC,WAAWV;IAAY;IAE1C,eAAe,GACfW,OAAO,CAAC;IACRC,KAAK,CAAC;IACNC,QAAQ;QACNC,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,CAAC,CAAC;IAC/C;AACF;AAEA,SAASC,kBAAkBC,KAAwB,EAAEC,UAAkD;IACrG,IAAI,CAACD,MAAME,SAAS,EAAE;QACpB,OAAOC;IACT;IAEA,OAAQH,MAAMpB,QAAQ;QACpB,KAAK;YACH,OAAOqB,WAAWf,cAAc;QAElC,KAAK;YACH,OAAOe,WAAWb,YAAY;QAEhC,KAAK;YACH,OAAOa,WAAWX,eAAe;QAEnC;YACE,OAAOa;IACX;AACF;AAKO,MAAM5B,iCAAiC,CAACyB;IAC7C;IAEA,MAAMI,cAAc3B;IACpB,MAAM4B,iBAAiBC,IAAAA,kDAAAA,EAAwBN;IAC/C,MAAMO,aAAavB;IAEnBgB,MAAMxB,IAAI,CAACgC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBnC,uBAAuBE,IAAI,EAC3B4B,aACAC,gBACAN,kBAAkBC,OAAOO,aACzBA,UAAU,CAACP,MAAMpB,QAAQ,CAAC,EAC1BoB,MAAMxB,IAAI,CAACgC,SAAS;IAGtB,OAAOR;AACT"}

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverlayDrawerSurfaceStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useOverlayDrawerSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = (0, _react.makeResetStyles)({
+    inset: '0px',
+    position: 'fixed',
+    backgroundColor: _reacttheme.tokens.colorBackgroundOverlay
+});
+const useBackdropStyles = (0, _react.makeStyles)({
+    nested: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground
+    }
+});
+const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    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;
+};

package/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n  inset: '0px',\n  position: 'fixed',\n  backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n  nested: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      backdropResetStyles,\n      state.isNestedDialog && backdropStyles.nested,\n      state.backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["useOverlayDrawerSurfaceStyles_unstable","useBackdropResetStyles","makeResetStyles","inset","position","backgroundColor","tokens","colorBackgroundOverlay","useBackdropStyles","makeStyles","nested","colorTransparentBackground","state","backdropResetStyles","backdropStyles","backdrop","className","mergeClasses","isNestedDialog"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBaA;;;eAAAA;;;uBAtB6C;4BACnC;AAGvB;;CAEC,GACD,MAAMC,yBAAyBC,IAAAA,sBAAAA,EAAgB;IAC7CC,OAAO;IACPC,UAAU;IACVC,iBAAiBC,kBAAAA,CAAOC,sBAAsB;AAChD;AAEA,MAAMC,oBAAoBC,IAAAA,iBAAAA,EAAW;IACnCC,QAAQ;QACNL,iBAAiBC,kBAAAA,CAAOK,0BAA0B;IACpD;AACF;AAKO,MAAMX,yCAAyC,CAACY;IACrD;IAEA,MAAMC,sBAAsBZ;IAC5B,MAAMa,iBAAiBN;IAEvB,IAAII,MAAMG,QAAQ,EAAE;QAClBH,MAAMG,QAAQ,CAACC,SAAS,GAAGC,IAAAA,mBAAAA,EACzBJ,qBACAD,MAAMM,cAAc,IAAIJ,eAAeJ,MAAM,EAC7CE,MAAMG,QAAQ,CAACC,SAAS;IAE5B;IAEA,OAAOJ;AACT"}

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js

@@ -0,0 +1,61 @@
+"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, {
+    overlayDrawerClassNames: function() {
+        return overlayDrawerClassNames;
+    },
+    useOverlayDrawerStyles_unstable: function() {
+        return useOverlayDrawerStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
+const overlayDrawerClassNames = {
+    root: 'fui-OverlayDrawer',
+    backdrop: 'fui-OverlayDrawer__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useDrawerResetStyles = (0, _react1.makeResetStyles)({
+    ...(0, _reacttabster.createFocusOutlineStyle)(),
+    ..._useDrawerBaseStylesstyles.drawerDefaultStyles,
+    position: 'fixed',
+    top: 0,
+    bottom: 0
+});
+const useDrawerRootStyles = (0, _react1.makeStyles)({
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        top: 'auto',
+        height: `var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar})`,
+        width: '100vw'
+    },
+    absolute: {
+        position: 'absolute'
+    }
+});
+const useOverlayDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const resetStyles = useDrawerResetStyles();
+    const rootStyles = useDrawerRootStyles();
+    const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;
+    const backdrop = state.root.backdrop;
+    state.root.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], absoluteStyles, state.root.className);
+    if (backdrop) {
+        backdrop.className = (0, _react1.mergeClasses)(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);
+    }
+    return state;
+};

package/lib-commonjs/components/OverlayDrawer/useOverlayDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport type { OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface/OverlayDrawerSurface.types';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';\n\nexport const overlayDrawerClassNames: SlotClassNames<Omit<OverlayDrawerSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-OverlayDrawer',\n  backdrop: 'fui-OverlayDrawer__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useDrawerResetStyles = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  ...drawerDefaultStyles,\n  position: 'fixed',\n  top: 0,\n  bottom: 0,\n});\n\nconst useDrawerRootStyles = makeStyles({\n  /* Positioning */\n  start: {},\n  end: {},\n  bottom: {\n    top: 'auto',\n    height: `var(${drawerCSSVars.drawerSizeVar})`,\n    width: '100vw',\n  },\n  absolute: {\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */\nexport const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): OverlayDrawerState => {\n  'use no memo';\n\n  const baseClassNames = useDrawerBaseClassNames(state);\n  const resetStyles = useDrawerResetStyles();\n  const rootStyles = useDrawerRootStyles();\n\n  const absoluteStyles = state.hasMountNodeElement && rootStyles.absolute;\n  const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement> | undefined;\n\n  state.root.className = mergeClasses(\n    overlayDrawerClassNames.root,\n    baseClassNames,\n    resetStyles,\n    rootStyles[state.position],\n    absoluteStyles,\n    state.root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, absoluteStyles, backdrop.className);\n  }\n\n  return state;\n};\n"],"names":["overlayDrawerClassNames","useOverlayDrawerStyles_unstable","root","backdrop","useDrawerResetStyles","makeResetStyles","createFocusOutlineStyle","drawerDefaultStyles","position","top","bottom","useDrawerRootStyles","makeStyles","start","end","height","drawerCSSVars","drawerSizeVar","width","absolute","state","baseClassNames","useDrawerBaseClassNames","resetStyles","rootStyles","absoluteStyles","hasMountNodeElement","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,uBAAAA;eAAAA;;IAiCAC,+BAAAA;eAAAA;;;;iEA1CU;wBACmC;8BAElB;2CAIoC;AAErE,MAAMD,0BAA6F;IACxGE,MAAM;IACNC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,uBAAAA,EAAgB;IAC3C,GAAGC,IAAAA,qCAAAA,GAAyB;IAC5B,GAAGC,8CAAmB;IACtBC,UAAU;IACVC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,sBAAsBC,IAAAA,kBAAAA,EAAW;IACrC,eAAe,GACfC,OAAO,CAAC;IACRC,KAAK,CAAC;IACNJ,QAAQ;QACND,KAAK;QACLM,QAAQ,CAAC,IAAI,EAAEC,wCAAAA,CAAcC,aAAa,CAAC,CAAC,CAAC;QAC7CC,OAAO;IACT;IACAC,UAAU;QACRX,UAAU;IACZ;AACF;AAKO,MAAMP,kCAAkC,CAACmB;IAC9C;IAEA,MAAMC,iBAAiBC,IAAAA,kDAAAA,EAAwBF;IAC/C,MAAMG,cAAcnB;IACpB,MAAMoB,aAAab;IAEnB,MAAMc,iBAAiBL,MAAMM,mBAAmB,IAAIF,WAAWL,QAAQ;IACvE,MAAMhB,WAAWiB,MAAMlB,IAAI,CAACC,QAAQ;IAEpCiB,MAAMlB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,oBAAAA,EACrB5B,wBAAwBE,IAAI,EAC5BmB,gBACAE,aACAC,UAAU,CAACJ,MAAMZ,QAAQ,CAAC,EAC1BiB,gBACAL,MAAMlB,IAAI,CAACyB,SAAS;IAGtB,IAAIxB,UAAU;QACZA,SAASwB,SAAS,GAAGC,IAAAA,oBAAAA,EAAa5B,wBAAwBG,QAAQ,EAAEsB,gBAAgBtB,SAASwB,SAAS;IACxG;IAEA,OAAOP;AACT"}

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

@@ -0,0 +1,92 @@
+"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, {
+    drawerCSSVars: function() {
+        return drawerCSSVars;
+    },
+    drawerDefaultStyles: function() {
+        return drawerDefaultStyles;
+    },
+    useDrawerBaseClassNames: function() {
+        return useDrawerBaseClassNames;
+    },
+    useDrawerBottomBaseStyles: function() {
+        return useDrawerBottomBaseStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const drawerCSSVars = {
+    drawerSizeVar: '--fui-Drawer--size'
+};
+const drawerDefaultStyles = {
+    overflow: 'hidden',
+    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,
+    color: _reacttheme.tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */ const useDrawerStyles = (0, _react.makeStyles)({
+    /* Positioning */ start: {
+        borderRight: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        left: 0,
+        right: 'auto'
+    },
+    end: {
+        borderLeft: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        right: 0,
+        left: 'auto'
+    },
+    bottom: {
+        bottom: 0,
+        top: 'auto'
+    },
+    /* Sizes */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100vw'
+    }
+});
+const useDrawerBottomBaseStyles = (0, _react.makeStyles)({
+    /* Sizes for position bottom */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100%'
+    }
+});
+const useDrawerBaseClassNames = ({ position, size })=>{
+    const baseStyles = useDrawerStyles();
+    const bottomBaseStyles = useDrawerBottomBaseStyles();
+    return (0, _react.mergeClasses)(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/useDrawerBaseStyles.styles.ts"],"sourcesContent":["import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport { DrawerBaseState } from './DrawerBase.types';\n\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size',\n};\n\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles: GriffelResetStyle = {\n  overflow: 'hidden',\n\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/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = makeStyles({\n  /* Positioning */\n  start: {\n    borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    left: 0,\n    right: 'auto',\n  },\n  end: {\n    borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    right: 0,\n    left: 'auto',\n  },\n  bottom: {\n    bottom: 0,\n    top: 'auto',\n  },\n\n  /* Sizes */\n  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});\n\nexport const useDrawerBottomBaseStyles = makeStyles({\n  /* Sizes for position bottom */\n  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]: '100%',\n  },\n});\n\nexport const useDrawerBaseClassNames = ({ position, size }: DrawerBaseState) => {\n  const baseStyles = useDrawerStyles();\n  const bottomBaseStyles = useDrawerBottomBaseStyles();\n\n  return mergeClasses(\n    baseStyles[position],\n    position === 'bottom' && bottomBaseStyles[size],\n    position !== 'bottom' && baseStyles[size],\n  );\n};\n"],"names":["drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerBottomBaseStyles","drawerSizeVar","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","tokens","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","makeStyles","start","borderRight","strokeWidthThin","colorTransparentStroke","left","right","end","borderLeft","bottom","top","small","medium","large","full","position","size","baseStyles","bottomBaseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,aAAAA;eAAAA;;IAOAC,mBAAAA;eAAAA;;IAqEAC,uBAAAA;eAAAA;;IAhBAC,yBAAAA;eAAAA;;;uBApEoD;4BAC1C;AAOhB,MAAMH,gBAAgB;IAC3BI,eAAe;AACjB;AAKO,MAAMH,sBAAyC;IACpDI,UAAU;IAEVC,OAAO,CAAC,IAAI,EAAEN,cAAcI,aAAa,CAAC,CAAC,CAAC;IAC5CG,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBC,kBAAAA,CAAOC,uBAAuB;IAC/CC,OAAOF,kBAAAA,CAAOG,uBAAuB;AACvC;AAEA;;CAEC,GACD,MAAMC,kBAAkBC,IAAAA,iBAAAA,EAAW;IACjC,eAAe,GACfC,OAAO;QACLC,aAAa,CAAC,EAAEP,kBAAAA,CAAOQ,eAAe,CAAC,OAAO,EAAER,kBAAAA,CAAOS,sBAAsB,CAAC,CAAC;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,CAAC,EAAEb,kBAAAA,CAAOQ,eAAe,CAAC,OAAO,EAAER,kBAAAA,CAAOS,sBAAsB,CAAC,CAAC;QAE9EE,OAAO;QACPD,MAAM;IACR;IACAI,QAAQ;QACNA,QAAQ;QACRC,KAAK;IACP;IAEA,SAAS,GACTC,OAAO;QACL,CAAChC,cAAcI,aAAa,CAAC,EAAE;IACjC;IACA6B,QAAQ;QACN,CAACjC,cAAcI,aAAa,CAAC,EAAE;IACjC;IACA8B,OAAO;QACL,CAAClC,cAAcI,aAAa,CAAC,EAAE;IACjC;IACA+B,MAAM;QACJ,CAACnC,cAAcI,aAAa,CAAC,EAAE;IACjC;AACF;AAEO,MAAMD,4BAA4BkB,IAAAA,iBAAAA,EAAW;IAClD,6BAA6B,GAC7BW,OAAO;QACL,CAAChC,cAAcI,aAAa,CAAC,EAAE;IACjC;IACA6B,QAAQ;QACN,CAACjC,cAAcI,aAAa,CAAC,EAAE;IACjC;IACA8B,OAAO;QACL,CAAClC,cAAcI,aAAa,CAAC,EAAE;IACjC;IACA+B,MAAM;QACJ,CAACnC,cAAcI,aAAa,CAAC,EAAE;IACjC;AACF;AAEO,MAAMF,0BAA0B,CAAC,EAAEkC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAalB;IACnB,MAAMmB,mBAAmBpC;IAEzB,OAAOqC,IAAAA,mBAAAA,EACLF,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.8.7",
+  "version": "9.9.0",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,12 +20,12 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.13.7",
+    "@fluentui/react-dialog": "^9.14.0",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-motion": "^9.9.0",
-    "@fluentui/react-portal": "^9.6.4",
+    "@fluentui/react-portal": "^9.7.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",