@fluentui/react-drawer 9.0.0-beta.3 → 9.0.0-beta.30

package/lib/components/DrawerBody/DrawerBody.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerBody_unstable } from './useDrawerBody';
 import { renderDrawerBody_unstable } from './renderDrawerBody';
 import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DrawerBody provides with a container for the main content of a Drawer.
  */ export const DrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/DrawerBody/DrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport type { DrawerBodyProps } from './DrawerBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */\nexport const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerBody_unstable(props, ref);\n\n  useDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["React","useDrawerBody_unstable","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useCustomStyleHook_unstable","DrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport type { DrawerBodyProps } from './DrawerBody.types';\n\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */\nexport const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerBody_unstable(props, ref);\n\n  useDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerBody_unstable","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","DrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/DrawerBody/renderDrawerBody.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerBody
  */ export const renderDrawerBody_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerBody/renderDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerBodyState, DrawerBodySlots } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n  const { slots, slotProps } = getSlots<DrawerBodySlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerBody_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA0BE;IAEvD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState) => {\n  assertSlots<DrawerBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerBody/useDrawerBody.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerBody.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

package/lib/components/DrawerBody/useDrawerBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerBody_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */\nexport const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HTMLElement>): DrawerBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerBody_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerBodyClassNames","root","useStyles","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bh6795r","Bnnss6s","xawz","qb2dma","Bcmaq0h","B676am1","e5kdtc","De3pzq","Bkjc3bi","Bgh53k4","Bcx2cba","gonrqn","d","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n    root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.margin('-1px', 0),\n        ...shorthands.padding('1px', tokens.spacingHorizontalXXL),\n        ...shorthands.overflow('auto'),\n        ...shorthands.flex(1),\n        alignSelf: 'stretch',\n        // A \"good hack\" to display top and bottom borders based on the scroll position\n        backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n        'background-position': 'bottom center, top center, bottom center, top center',\n        backgroundRepeat: 'no-repeat',\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n        backgroundAttachment: 'local, local, scroll, scroll',\n        ':last-child': {\n            paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\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 */ export const useDrawerBodyStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAwBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAG1B,SAAS,CAAC,CAAC;EAC1ByB,KAAK,CAAC1B,IAAI,CAAC4B,SAAS,GAAGhC,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAE2B,MAAM,CAAC3B,IAAI,EAAE0B,KAAK,CAAC1B,IAAI,CAAC4B,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n    root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.margin('-1px', 0),\n    ...shorthands.padding('1px', tokens.spacingHorizontalXXL),\n    ...shorthands.overflow('auto'),\n    ...shorthands.flex(1),\n    alignSelf: 'stretch',\n    // A \"good hack\" to display top and bottom borders based on the scroll position\n    backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}),\n    linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`,\n    'background-position': 'bottom center, top center, bottom center, top center',\n    backgroundRepeat: 'no-repeat',\n    backgroundColor: tokens.colorNeutralBackground1,\n    backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px',\n    backgroundAttachment: 'local, local, scroll, scroll',\n    ':last-child': {\n        paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n    },\n    ':first-child': {\n        paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n    }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,uvEAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DrawerFooter/DrawerFooter.js

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerFooter_unstable } from './useDrawerFooter';
 import { renderDrawerFooter_unstable } from './renderDrawerFooter';
 import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';
 /**
- * DrawerFooter component - TODO: add more docs
+ * DrawerFooter provides a structured footer for the drawer component.
  */ export const DrawerFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useDrawerFooter_unstable(props, ref);
     useDrawerFooterStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);
     return renderDrawerFooter_unstable(state);
 });
 DrawerFooter.displayName = 'DrawerFooter';

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\nimport type { DrawerFooterProps } from './DrawerFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerFooter component - TODO: add more docs\n */\nexport const DrawerFooter: ForwardRefComponent<DrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerFooter_unstable(props, ref);\n\n  useDrawerFooterStyles_unstable(state);\n  return renderDrawerFooter_unstable(state);\n});\n\nDrawerFooter.displayName = 'DrawerFooter';\n"],"names":["React","useDrawerFooter_unstable","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","DrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerFooter_unstable } from './useDrawerFooter';\nimport { renderDrawerFooter_unstable } from './renderDrawerFooter';\nimport { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles.styles';\nimport type { DrawerFooterProps } from './DrawerFooter.types';\n\n/**\n * DrawerFooter provides a structured footer for the drawer component.\n */\nexport const DrawerFooter: ForwardRefComponent<DrawerFooterProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerFooter_unstable(props, ref);\n\n  useDrawerFooterStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerFooterStyles_unstable')(state);\n\n  return renderDrawerFooter_unstable(state);\n});\n\nDrawerFooter.displayName = 'DrawerFooter';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerFooter_unstable","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","DrawerFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/DrawerFooter/renderDrawerFooter.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerFooter
  */ export const renderDrawerFooter_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerFooter/renderDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerFooterState, DrawerFooterSlots } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState) => {\n  const { slots, slotProps } = getSlots<DrawerFooterSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerFooter_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Render the final JSX of DrawerFooter\n */\nexport const renderDrawerFooter_unstable = (state: DrawerFooterState) => {\n  assertSlots<DrawerFooterSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerFooter_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerFooter/useDrawerFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerFooter.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'footer'
         },
-        root: getNativeElementProps('footer', {
+        root: slot.always(getNativeElementProps('footer', {
             ref,
             ...props
+        }), {
+            elementType: 'footer'
         })
     };
 };

package/lib/components/DrawerFooter/useDrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n  return {\n    components: {\n      root: 'footer',\n    },\n\n    root: getNativeElementProps('footer', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerFooter_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,UAAU;YACpCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';\n\n/**\n * Create the state required to render DrawerFooter.\n *\n * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,\n * before being passed to renderDrawerFooter_unstable.\n *\n * @param props - props from this instance of DrawerFooter\n * @param ref - reference to root HTMLElement of DrawerFooter\n */\nexport const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {\n  return {\n    components: {\n      root: 'footer',\n    },\n\n    root: slot.always(\n      getNativeElementProps('footer', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'footer' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerFooter_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,UAAU;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}

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

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const drawerFooterClassNames = {
   root: 'fui-DrawerFooter'
@@ -6,26 +6,13 @@ export const drawerFooterClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    z8tnut: "fikn0iw",
-    z189sj: ["fnbas0t", "f1mswpri"],
-    Byoj8tv: "fz66xbh",
-    uwmqm3: ["f1mswpri", "fnbas0t"],
-    mc9l5x: "f22iagw",
-    Brf1p80: "fbhxue7",
-    Bt984gj: "f122n59",
-    i8kkvl: "fsnqrgy"
-  }
-}, {
-  d: [".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}"]
-});
+const useStyles = /*#__PURE__*/__resetStyles("rli1cm2", "r1xlf3nx", [".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}", ".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}"]);
 /**
  * Apply styling to the DrawerFooter slots based on the state
  */
 export const useDrawerFooterStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(drawerFooterClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerFooterStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerFooterClassNames","root","useStyles","z8tnut","z189sj","Byoj8tv","uwmqm3","mc9l5x","Brf1p80","Bt984gj","i8kkvl","d","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n    root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),\n        display: 'flex',\n        justifyContent: 'flex-start',\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalS\n    }\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerFooterClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACnG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerFooterClassNames","root","useStyles","useDrawerFooterStyles_unstable","state","styles","className"],"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n    root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),\n    display: 'flex',\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalS\n});\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */ export const useDrawerFooterStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,qjBAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DrawerHeader/DrawerHeader.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerHeader_unstable } from './useDrawerHeader';
 import { renderDrawerHeader_unstable } from './renderDrawerHeader';
 import { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DrawerHeader provides a structured header for the drawer component.
  */ export const DrawerHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/DrawerHeader/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerHeader_unstable } from './useDrawerHeader';\nimport { renderDrawerHeader_unstable } from './renderDrawerHeader';\nimport { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';\nimport type { DrawerHeaderProps } from './DrawerHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeader: ForwardRefComponent<DrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerHeader_unstable(props, ref);\n\n  useDrawerHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerHeaderStyles_unstable')(state);\n\n  return renderDrawerHeader_unstable(state);\n});\n\nDrawerHeader.displayName = 'DrawerHeader';\n"],"names":["React","useDrawerHeader_unstable","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useCustomStyleHook_unstable","DrawerHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerHeader_unstable } from './useDrawerHeader';\nimport { renderDrawerHeader_unstable } from './renderDrawerHeader';\nimport { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';\nimport type { DrawerHeaderProps } from './DrawerHeader.types';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeader: ForwardRefComponent<DrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerHeader_unstable(props, ref);\n\n  useDrawerHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerHeaderStyles_unstable')(state);\n\n  return renderDrawerHeader_unstable(state);\n});\n\nDrawerHeader.displayName = 'DrawerHeader';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeader_unstable","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","DrawerHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/BR,4BAA4B,kCAAkCQ;IAE9D,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/DrawerHeader/renderDrawerHeader.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeader
  */ export const renderDrawerHeader_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerHeader/renderDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerHeader_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState) => {\n  assertSlots<DrawerHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerHeader/useDrawerHeader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerHeader.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'header'
         },
-        root: getNativeElementProps('header', {
+        root: slot.always(getNativeElementProps('header', {
             ref,
             ...props
+        }), {
+            elementType: 'header'
         })
     };
 };

package/lib/components/DrawerHeader/useDrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: getNativeElementProps('header', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerHeader_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,UAAU;YACpCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: slot.always(\n      getNativeElementProps('header', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'header' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeader_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,UAAU;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAS;IAE5B;AACF,EAAE"}

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

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const drawerHeaderClassNames = {
   root: 'fui-DrawerHeader'
@@ -6,27 +6,13 @@ export const drawerHeaderClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    z8tnut: "f1ggmyuv",
-    z189sj: ["fnbas0t", "f1mswpri"],
-    Byoj8tv: "f5b47ha",
-    uwmqm3: ["f1mswpri", "fnbas0t"],
-    i8kkvl: "fsnqrgy",
-    Belr9w4: "fylz90v",
-    qb2dma: "f1ub7u0d",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62"
-  }
-}, {
-  d: [".f1ggmyuv{padding-top:var(--spacingVerticalXXL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
-});
+const useStyles = /*#__PURE__*/__resetStyles("r10tpwon", "r53n3g6", [".r10tpwon{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}", ".r53n3g6{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}"]);
 /**
  * Apply styling to the DrawerHeader slots based on the state
  */
 export const useDrawerHeaderStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerHeaderStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerHeaderClassNames","root","useStyles","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","qb2dma","mc9l5x","Beiy3e4","d","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n    root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS),\n        ...shorthands.gap(tokens.spacingHorizontalS),\n        alignSelf: 'stretch',\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BY,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EACnG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n    root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL, tokens.spacingVerticalS),\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    alignSelf: 'stretch',\n    display: 'flex',\n    flexDirection: 'column'\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,+mBAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DrawerHeaderNavigation/DrawerHeaderNavigation.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';
 import { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';
 import { useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DrawerHeaderNavigation provides a header navigation area for the Drawer.
  */ export const DrawerHeaderNavigation = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/DrawerHeaderNavigation/DrawerHeaderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeaderNavigation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';\nimport { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';\nimport { useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';\nimport type { DrawerHeaderNavigationProps } from './DrawerHeaderNavigation.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DrawerHeaderNavigation provides a header navigation area for the Drawer.\n */\nexport const DrawerHeaderNavigation: ForwardRefComponent<DrawerHeaderNavigationProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useDrawerHeaderNavigation_unstable(props, ref);\n\n    useDrawerHeaderNavigationStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerHeaderNavigationStyles_unstable')(state);\n\n    return renderDrawerHeaderNavigation_unstable(state);\n  },\n);\n\nDrawerHeaderNavigation.displayName = 'DrawerHeaderNavigation';\n"],"names":["React","useDrawerHeaderNavigation_unstable","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useCustomStyleHook_unstable","DrawerHeaderNavigation","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAGpG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC,MAAQ;IACd,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerHeaderNavigation.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerHeaderNavigation_unstable } from './useDrawerHeaderNavigation';\nimport { renderDrawerHeaderNavigation_unstable } from './renderDrawerHeaderNavigation';\nimport { useDrawerHeaderNavigationStyles_unstable } from './useDrawerHeaderNavigationStyles.styles';\nimport type { DrawerHeaderNavigationProps } from './DrawerHeaderNavigation.types';\n\n/**\n * DrawerHeaderNavigation provides a header navigation area for the Drawer.\n */\nexport const DrawerHeaderNavigation: ForwardRefComponent<DrawerHeaderNavigationProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useDrawerHeaderNavigation_unstable(props, ref);\n\n    useDrawerHeaderNavigationStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerHeaderNavigationStyles_unstable')(state);\n\n    return renderDrawerHeaderNavigation_unstable(state);\n  },\n);\n\nDrawerHeaderNavigation.displayName = 'DrawerHeaderNavigation';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeaderNavigation_unstable","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","DrawerHeaderNavigation","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAGpG;;CAEC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQP,mCAAmCK,OAAOC;IAExDJ,yCAAyCK;IACzCR,4BAA4B,4CAA4CQ;IAExE,OAAON,sCAAsCM;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

package/lib/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeaderNavigation
  */ export const renderDrawerHeaderNavigation_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeaderNavigation.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationState, DrawerHeaderNavigationSlots } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderNavigationSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerHeaderNavigation_unstable","state","slots","slotProps","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC,QAAuC;IAC3F,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAAsCE;IAEnE,qBAAO,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationSlots, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Render the final JSX of DrawerHeaderNavigation\n */\nexport const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => {\n  assertSlots<DrawerHeaderNavigationSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeaderNavigation_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerHeaderNavigation.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'nav'
         },
-        root: getNativeElementProps('nav', {
+        root: slot.always(getNativeElementProps('nav', {
             ref,
             ...props
+        }), {
+            elementType: 'nav'
         })
     };
 };

package/lib/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n  props: DrawerHeaderNavigationProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n  return {\n    components: {\n      root: 'nav',\n    },\n\n    root: getNativeElementProps('nav', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useDrawerHeaderNavigation_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC,MACgC;IAChC,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';\n\n/**\n * Create the state required to render DrawerHeaderNavigation.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderNavigationStyles_unstable,\n * before being passed to renderDrawerHeaderNavigation_unstable.\n *\n * @param props - props from this instance of DrawerHeaderNavigation\n * @param ref - reference to root HTMLElement of DrawerHeaderNavigation\n */\nexport const useDrawerHeaderNavigation_unstable = (\n  props: DrawerHeaderNavigationProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerHeaderNavigationState => {\n  return {\n    components: {\n      root: 'nav',\n    },\n\n    root: slot.always(\n      getNativeElementProps('nav', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'nav' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderNavigation_unstable","props","ref","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAIxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qCAAqC,CAChDC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const drawerHeaderNavigationClassNames = {
   root: 'fui-DrawerHeaderNavigation'
@@ -6,23 +6,13 @@ export const drawerHeaderNavigationClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
-  root: {
-    B6of3ja: "f19304h5",
-    t21cq0: ["f1qb19o0", "f1p10pdi"],
-    jrapky: "f118i8d9",
-    Frg6f3: ["f1p10pdi", "f1qb19o0"],
-    Bxn5svx: "f1ftwmyh"
-  }
-}, {
-  d: [".f19304h5{margin-top:calc(var(--spacingVerticalS) * -1);}", ".f1qb19o0{margin-right:calc(var(--spacingHorizontalL) * -1);}", ".f1p10pdi{margin-left:calc(var(--spacingHorizontalL) * -1);}", ".f118i8d9{margin-bottom:calc(var(--spacingVerticalS) * -1);}", ".f1ftwmyh{-webkit-order:0;-ms-flex-order:0;order:0;}"]
-});
+const useStyles = /*#__PURE__*/__resetStyles("rfs9jc2", "r4yk2e8", [".rfs9jc2{margin-top:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);}", ".r4yk2e8{margin-top:calc(var(--spacingVerticalS) * -1);margin-left:calc(var(--spacingHorizontalL) * -1);margin-bottom:calc(var(--spacingVerticalS) * -1);margin-right:calc(var(--spacingHorizontalL) * -1);}"]);
 /**
  * Apply styling to the DrawerHeaderNavigation slots based on the state
  */
 export const useDrawerHeaderNavigationStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerHeaderNavigationStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerHeaderNavigationClassNames","root","useStyles","B6of3ja","t21cq0","jrapky","Frg6f3","Bxn5svx","d","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n    root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.margin(`calc(${tokens.spacingVerticalS} * -1)`, `calc(${tokens.spacingHorizontalL} * -1)`),\n        order: 0\n    }\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGf,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAES,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAC7G,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","tokens","drawerHeaderNavigationClassNames","root","useStyles","useDrawerHeaderNavigationStyles_unstable","state","styles","className"],"sources":["useDrawerHeaderNavigationStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderNavigationClassNames = {\n    root: 'fui-DrawerHeaderNavigation'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    ...shorthands.margin(`calc(${tokens.spacingVerticalS} * -1)`, `calc(${tokens.spacingHorizontalL} * -1)`)\n});\n/**\n * Apply styling to the DrawerHeaderNavigation slots based on the state\n */ export const useDrawerHeaderNavigationStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerHeaderNavigationClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,aAAA,ubAErB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,wCAAwC,GAAIC,KAAK,IAAG;EACjE,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/DrawerHeaderTitle/DrawerHeaderTitle.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';
 import { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';
 import { useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DrawerHeader provides a structured header for the drawer component.
  */ export const DrawerHeaderTitle = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/DrawerHeaderTitle/DrawerHeaderTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeaderTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';\nimport { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';\nimport { useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';\nimport type { DrawerHeaderTitleProps } from './DrawerHeaderTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeaderTitle: ForwardRefComponent<DrawerHeaderTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerHeaderTitle_unstable(props, ref);\n\n  useDrawerHeaderTitleStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerHeaderTitleStyles_unstable')(state);\n\n  return renderDrawerHeaderTitle_unstable(state);\n});\n\nDrawerHeaderTitle.displayName = 'DrawerHeaderTitle';\n"],"names":["React","useDrawerHeaderTitle_unstable","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useCustomStyleHook_unstable","DrawerHeaderTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC7G,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerHeaderTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerHeaderTitle_unstable } from './useDrawerHeaderTitle';\nimport { renderDrawerHeaderTitle_unstable } from './renderDrawerHeaderTitle';\nimport { useDrawerHeaderTitleStyles_unstable } from './useDrawerHeaderTitleStyles.styles';\nimport type { DrawerHeaderTitleProps } from './DrawerHeaderTitle.types';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeaderTitle: ForwardRefComponent<DrawerHeaderTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerHeaderTitle_unstable(props, ref);\n\n  useDrawerHeaderTitleStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerHeaderTitleStyles_unstable')(state);\n\n  return renderDrawerHeaderTitle_unstable(state);\n});\n\nDrawerHeaderTitle.displayName = 'DrawerHeaderTitle';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeaderTitle_unstable","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","DrawerHeaderTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpCR,4BAA4B,uCAAuCQ;IAEnE,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

package/lib/components/DrawerHeaderTitle/DrawerHeaderTitle.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerHeaderTitle.types.ts"],"sourcesContent":["import { DialogTitleSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type DrawerHeaderTitleSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * By default this is a h2, but can be any heading or div.\n   * If `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  heading?: DialogTitleSlots['root'];\n\n  /**\n   * Action slot for the close button\n   */\n  action?: DialogTitleSlots['action'];\n};\n\n/**\n * DrawerHeaderTitle Props\n */\nexport type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots> & {\n  /**\n   * Content of the DrawerHeaderTitle\n   * Children is mandatory because DrawerHeaderTitle is a wrapper component\n   */\n  children: React.ReactNode | undefined;\n};\n\n/**\n * State used in rendering DrawerHeaderTitle\n */\nexport type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;\n"],"names":["React"],"mappings":"AAEA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["DrawerHeaderTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerHeaderTitleSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * By default this is a h2, but can be any heading or div.\n   * If `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  heading?: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n\n  /**\n   * Action slot for the close button\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * DrawerHeaderTitle Props\n */\nexport type DrawerHeaderTitleProps = ComponentProps<DrawerHeaderTitleSlots>;\n\n/**\n * State used in rendering DrawerHeaderTitle\n */\nexport type DrawerHeaderTitleState = ComponentState<DrawerHeaderTitleSlots>;\n"],"names":[],"mappings":"AAAA,WAyB4E"}