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

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';\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;AAGxE;;;;;;;;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

@@ -18,7 +18,7 @@ const useStyles = /*#__PURE__*/__styles({
     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);}"]
+  d: [".fikn0iw{padding-top:var(--spacingVerticalL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".fz66xbh{padding-bottom:var(--spacingVerticalXXL);}", ".f22iagw{display:flex;}", ".fbhxue7{justify-content:flex-start;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}"]
 });
 /**
  * Apply styling to the DrawerFooter slots based on the state

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 { 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;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;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';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ 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';\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;AAGxD;;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';\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;AAGxE;;;;;;;;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

@@ -19,7 +19,7 @@ const useStyles = /*#__PURE__*/__styles({
     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;}"]
+  d: [".f1ggmyuv{padding-top:var(--spacingVerticalXXL);}", ".fnbas0t{padding-right:var(--spacingHorizontalXXL);}", ".f1mswpri{padding-left:var(--spacingHorizontalXXL);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1ub7u0d{align-self:stretch;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}"]
 });
 /**
  * Apply styling to the DrawerHeader slots based on the state

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 { 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;IACN,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;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';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ 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';\nimport type { DrawerHeaderNavigationState, DrawerHeaderNavigationSlots } 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;AAGxD;;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';\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;AAGxE;;;;;;;;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

@@ -15,7 +15,7 @@ const useStyles = /*#__PURE__*/__styles({
     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;}"]
+  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{order:0;}"]
 });
 /**
  * Apply styling to the DrawerHeaderNavigation slots based on the state

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 { 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;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;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"}

package/lib/components/DrawerHeaderTitle/renderDrawerHeaderTitle.js

@@ -1,8 +1,13 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeaderTitle
  */ export const renderDrawerHeaderTitle_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root, slots.heading && /*#__PURE__*/ React.createElement(slots.heading, slotProps.heading), slots.action && /*#__PURE__*/ React.createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.heading && /*#__PURE__*/ _jsx(state.heading, {}),
+            state.action && /*#__PURE__*/ _jsx(state.action, {})
+        ]
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.heading && <slots.heading {...slotProps.heading} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["React","getSlots","renderDrawerHeaderTitle_unstable","state","slots","slotProps","root","heading","action"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAAiCE;IAE9D,qBACE,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,OAAO,kBAAI,oBAACH,MAAMG,OAAO,EAAKF,UAAUE,OAAO,GACrDH,MAAMI,MAAM,kBAAI,oBAACJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  assertSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <state.root>\n      {state.heading && <state.heading />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,OAAO,kBAAI,KAACF,MAAME,OAAO;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { useDialogTitle_unstable } from '@fluentui/react-dialog';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render DrawerHeaderTitle.
  *
@@ -10,26 +9,34 @@ import { useDialogTitle_unstable } from '@fluentui/react-dialog';
  * @param props - props from this instance of DrawerHeaderTitle
  * @param ref - reference to root HTMLElement of DrawerHeaderTitle
  */ export const useDrawerHeaderTitle_unstable = (props, ref)=>{
-    const { root: heading , action , components: titleComponents  } = useDialogTitle_unstable(props, ref);
+    let heading = slot.resolveShorthand(props.heading);
+    if (!heading) {
+        heading = {
+            children: props.children
+        };
+    }
+    var _heading_as;
     return {
         components: {
             root: 'div',
-            heading: titleComponents.root,
-            action: titleComponents.action
+            heading: 'h2',
+            action: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        heading: resolveShorthand(props.heading, {
-            required: true,
+        heading: slot.optional(getNativeElementProps((_heading_as = heading.as) !== null && _heading_as !== void 0 ? _heading_as : 'h2', heading), {
             defaultProps: {
-                ...heading,
-                className: undefined
-            }
+                children: props.children
+            },
+            renderByDefault: true,
+            elementType: 'h2'
         }),
-        action: resolveShorthand(props.action, {
-            defaultProps: action
+        action: slot.optional(props.action, {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { root: heading, action, components: titleComponents } = useDialogTitle_unstable(props, ref);\n\n  return {\n    components: {\n      root: 'div',\n      heading: titleComponents.root,\n      action: titleComponents.action,\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    heading: resolveShorthand(props.heading, {\n      required: true,\n      defaultProps: {\n        ...heading,\n        className: undefined, // remove className from heading\n      },\n    }),\n    action: resolveShorthand(props.action, {\n      defaultProps: action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","required","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAM,EAAEC,MAAMC,QAAO,EAAEC,OAAM,EAAEC,YAAYC,gBAAe,EAAE,GAAGR,wBAAwBE,OAAOC;IAE9F,OAAO;QACLI,YAAY;YACVH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAChC;QAEAF,MAAMN,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAG,SAASN,iBAAiBG,MAAMG,OAAO,EAAE;YACvCI,UAAU,IAAI;YACdC,cAAc;gBACZ,GAAGL,OAAO;gBACVM,WAAWC;YACb;QACF;QACAN,QAAQP,iBAAiBG,MAAMI,MAAM,EAAE;YACrCI,cAAcJ;QAChB;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  let heading = slot.resolveShorthand(props.heading);\n\n  if (!heading) {\n    heading = {\n      children: props.children,\n    };\n  }\n\n  return {\n    components: {\n      root: 'div',\n      heading: 'h2',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(getNativeElementProps(heading.as ?? 'h2', heading), {\n      defaultProps: {\n        children: props.children,\n      },\n      renderByDefault: true,\n      elementType: 'h2',\n    }),\n    action: slot.optional(props.action, {\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDrawerHeaderTitle_unstable","props","ref","heading","resolveShorthand","children","components","root","action","always","elementType","optional","as","defaultProps","renderByDefault"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,IAAIC,UAAUJ,KAAKK,gBAAgB,CAACH,MAAME,OAAO;IAEjD,IAAI,CAACA,SAAS;QACZA,UAAU;YACRE,UAAUJ,MAAMI,QAAQ;QAC1B;IACF;QAgB+CF;IAd/C,OAAO;QACLG,YAAY;YACVC,MAAM;YACNJ,SAAS;YACTK,QAAQ;QACV;QAEAD,MAAMR,KAAKU,MAAM,CACfX,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP,SAASJ,KAAKY,QAAQ,CAACb,sBAAsBK,CAAAA,cAAAA,QAAQS,EAAE,cAAVT,yBAAAA,cAAc,MAAMA,UAAU;YACzEU,cAAc;gBACZR,UAAUJ,MAAMI,QAAQ;YAC1B;YACAS,iBAAiB;YACjBJ,aAAa;QACf;QACAF,QAAQT,KAAKY,QAAQ,CAACV,MAAMO,MAAM,EAAE;YAClCE,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -20,7 +20,7 @@ const useStyles = /*#__PURE__*/__styles({
     t21cq0: ["faqnl2i", "fd75udd"]
   }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".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);}", ".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}", ".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}"]
+  d: [".f22iagw{display:flex;}", ".f1869bpl{justify-content:space-between;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".faqnl2i{margin-right:calc(var(--spacingHorizontalS) * -1);}", ".fd75udd{margin-left:calc(var(--spacingHorizontalS) * -1);}"]
 });
 /**
  * Apply styling to the DrawerHeaderTitle slots based on the state

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n    root: 'fui-DrawerHeaderTitle',\n    heading: 'fui-DrawerHeaderTitle__heading',\n    action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalS\n    },\n    action: {\n        marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n    }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const { heading: root = {} , action , components  } = state;\n    useDialogTitleStyles_unstable({\n        components: {\n            root: components.heading,\n            action: components.action\n        },\n        root,\n        action\n    });\n    state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n    if (state.heading) {\n        state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n    }\n    if (state.action) {\n        state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAGE,MAAM;IAAGW;EAAY,CAAC,GAAGF,KAAK;EAC3Dd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","useDialogTitleStyles_unstable","tokens","drawerHeaderTitleClassNames","root","heading","action","useStyles","mc9l5x","Brf1p80","Bt984gj","i8kkvl","t21cq0","d","useDrawerHeaderTitleStyles_unstable","state","styles","components","className"],"sources":["useDrawerHeaderTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDialogTitleStyles_unstable } from '@fluentui/react-dialog';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderTitleClassNames = {\n    root: 'fui-DrawerHeaderTitle',\n    heading: 'fui-DrawerHeaderTitle__heading',\n    action: 'fui-DrawerHeaderTitle__action'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        columnGap: tokens.spacingHorizontalS\n    },\n    action: {\n        marginRight: `calc(${tokens.spacingHorizontalS} * -1)`\n    }\n});\n/**\n * Apply styling to the DrawerHeaderTitle slots based on the state\n */ export const useDrawerHeaderTitleStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const { heading: root = {}, action, components } = state;\n    useDialogTitleStyles_unstable({\n        components: {\n            root: components.heading,\n            action: components.action\n        },\n        root,\n        action\n    });\n    state.root.className = mergeClasses(drawerHeaderTitleClassNames.root, styles.root, state.root.className);\n    if (state.heading) {\n        state.heading.className = mergeClasses(drawerHeaderTitleClassNames.heading, state.heading.className);\n    }\n    if (state.action) {\n        state.action.className = mergeClasses(drawerHeaderTitleClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,gCAAgC;EACzCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAK,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEF,OAAO,EAAED,IAAI,GAAG,CAAC,CAAC;IAAEE,MAAM;IAAEW;EAAW,CAAC,GAAGF,KAAK;EACxDd,6BAA6B,CAAC;IAC1BgB,UAAU,EAAE;MACRb,IAAI,EAAEa,UAAU,CAACZ,OAAO;MACxBC,MAAM,EAAEW,UAAU,CAACX;IACvB,CAAC;IACDF,IAAI;IACJE;EACJ,CAAC,CAAC;EACFS,KAAK,CAACX,IAAI,CAACc,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACc,SAAS,CAAC;EACxG,IAAIH,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACa,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACa,SAAS,CAAC;EACxG;EACA,IAAIH,KAAK,CAACT,MAAM,EAAE;IACdS,KAAK,CAACT,MAAM,CAACY,SAAS,GAAGlB,YAAY,CAACG,2BAA2B,CAACG,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACY,SAAS,CAAC;EACpH;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/DrawerInline/DrawerInline.js

@@ -3,7 +3,7 @@ import { useDrawerInline_unstable } from './useDrawerInline';
 import { renderDrawerInline_unstable } from './renderDrawerInline';
 import { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';
 /**
- * DrawerInline is often used for navigation that is not dissmissable. As it is on the same level as
+ * DrawerInline is often used for navigation that is not dismissible. As it is on the same level as
  * the main surface, users can still interact with other UI elements.
  */ export const DrawerInline = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const state = useDrawerInline_unstable(props, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\nimport type { DrawerInlineProps } from './DrawerInline.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerInline is often used for navigation that is not dissmissable. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */\nexport const DrawerInline: ForwardRefComponent<DrawerInlineProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerInline_unstable(props, ref);\n\n  useDrawerInlineStyles_unstable(state);\n  return renderDrawerInline_unstable(state);\n});\n\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["React","useDrawerInline_unstable","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","DrawerInline","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;;;CAGC,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":["DrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerInline_unstable } from './useDrawerInline';\nimport { renderDrawerInline_unstable } from './renderDrawerInline';\nimport { useDrawerInlineStyles_unstable } from './useDrawerInlineStyles.styles';\nimport type { DrawerInlineProps } from './DrawerInline.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerInline is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */\nexport const DrawerInline: ForwardRefComponent<DrawerInlineProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerInline_unstable(props, ref);\n\n  useDrawerInlineStyles_unstable(state);\n  return renderDrawerInline_unstable(state);\n});\n\nDrawerInline.displayName = 'DrawerInline';\n"],"names":["React","useDrawerInline_unstable","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","DrawerInline","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;;;CAGC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseTypes } from '../../util/DrawerBase.types';\n\nexport type DrawerInlineSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DrawerInline Props\n */\nexport type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &\n  DrawerBaseTypes & {\n    /**\n     * Whether the drawer has a separator line.\n     *\n     * @default false\n     */\n    separator?: boolean;\n  };\n\n/**\n * State used in rendering DrawerInline\n */\nexport type DrawerInlineState = ComponentState<DrawerInlineSlots> &\n  DrawerBaseTypes &\n  Pick<DrawerInlineProps, 'open' | 'separator'>;\n"],"names":[],"mappings":"AAAA,WAyBgD"}
+{"version":3,"sources":["DrawerInline.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DrawerBaseProps, DrawerBaseState } from '../../util/DrawerBase.types';\n\nexport type DrawerInlineSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DrawerInline Props\n */\nexport type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &\n  DrawerBaseProps & {\n    /**\n     * Whether the drawer has a separator line.\n     *\n     * @default false\n     */\n    separator?: boolean;\n  };\n\n/**\n * State used in rendering DrawerInline\n */\nexport type DrawerInlineState = Required<\n  ComponentState<DrawerInlineSlots> & DrawerBaseState & Pick<DrawerInlineProps, 'separator'>\n>;\n"],"names":[],"mappings":"AAAA,WAyBE"}

package/lib/components/DrawerInline/renderDrawerInline.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerInline
  */ export const renderDrawerInline_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    if (!state.open) {
+    if (!state.motion.canRender) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/DrawerInline/renderDrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  const { slots, slotProps } = getSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerInline_unstable","state","slots","slotProps","open","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,IAAI,CAACA,MAAMG,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IAED,qBAAO,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerInlineSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerInline_unstable","state","motion","canRender","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAA+BE;IAE/B,qBAAO,KAACA,MAAMG,IAAI;AACpB,EAAE"}

package/lib/components/DrawerInline/useDrawerInline.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState } from '@fluentui/react-utilities';
-import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
+import { getNativeElementProps, useControllableState, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useMotion } from '@fluentui/react-motion-preview';
+import { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';
 /**
  * Create the state required to render DrawerInline.
  *
@@ -10,24 +11,27 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
  * @param props - props from this instance of DrawerInline
  * @param ref - reference to root HTMLElement of DrawerInline
  */ export const useDrawerInline_unstable = (props, ref)=>{
-    const { open: initialOpen , defaultOpen , size , position  } = getDefaultDrawerProps(props);
-    const { separator =false  } = props;
+    const { size, position, ...defaultProps } = useDrawerDefaultProps(props);
+    const { separator = false } = props;
     const [open] = useControllableState({
-        state: initialOpen,
-        defaultState: defaultOpen,
+        state: defaultProps.open,
+        defaultState: defaultProps.defaultOpen,
         initialState: false
     });
+    const motion = useMotion(open);
     return {
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
-            ref,
-            ...props
+        root: slot.always(getNativeElementProps('div', {
+            ...props,
+            ref: useMergedRefs(ref, motion.ref)
+        }), {
+            elementType: 'div'
         }),
         size,
         position,
-        open,
-        separator
+        separator,
+        motion
     };
 };

package/lib/components/DrawerInline/useDrawerInline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState } from '@fluentui/react-utilities';\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Ref<HTMLElement>): DrawerInlineState => {\n  const { open: initialOpen, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { separator = false } = props;\n\n  const [open] = useControllableState({\n    state: initialOpen,\n    defaultState: defaultOpen,\n    initialState: false,\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n\n    size,\n    position,\n    open,\n    separator,\n  };\n};\n"],"names":["React","getNativeElementProps","useControllableState","getDefaultDrawerProps","useDrawerInline_unstable","props","ref","open","initialOpen","defaultOpen","size","position","separator","state","defaultState","initialState","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,4BAA4B;AAExF,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,MAAMC,YAAW,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGR,sBAAsBE;IACjF,MAAM,EAAEO,WAAY,KAAK,CAAA,EAAE,GAAGP;IAE9B,MAAM,CAACE,KAAK,GAAGL,qBAAqB;QAClCW,OAAOL;QACPM,cAAcL;QACdM,cAAc,KAAK;IACrB;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QAEAK;QACAC;QACAJ;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { useDrawerDefaultProps } from '../../util/useDrawerDefaultProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (\n  props: DrawerInlineProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerInlineState => {\n  const { size, position, ...defaultProps } = useDrawerDefaultProps(props);\n  const { separator = false } = props;\n\n  const [open] = useControllableState({\n    state: defaultProps.open,\n    defaultState: defaultProps.defaultOpen,\n    initialState: false,\n  });\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ...props,\n        ref: useMergedRefs(ref, motion.ref),\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    separator,\n    motion,\n  };\n};\n"],"names":["React","getNativeElementProps","useControllableState","slot","useMergedRefs","useMotion","useDrawerDefaultProps","useDrawerInline_unstable","props","ref","size","position","defaultProps","separator","open","state","defaultState","defaultOpen","initialState","motion","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC7G,SAASC,SAAS,QAAQ,iCAAiC;AAG3D,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,cAAc,GAAGN,sBAAsBE;IAClE,MAAM,EAAEK,YAAY,KAAK,EAAE,GAAGL;IAE9B,MAAM,CAACM,KAAK,GAAGZ,qBAAqB;QAClCa,OAAOH,aAAaE,IAAI;QACxBE,cAAcJ,aAAaK,WAAW;QACtCC,cAAc;IAChB;IAEA,MAAMC,SAASd,UAA0BS;IAEzC,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMlB,KAAKmB,MAAM,CACfrB,sBAAsB,OAAO;YAC3B,GAAGO,KAAK;YACRC,KAAKL,cAAcK,KAAKU,OAAOV,GAAG;QACpC,IACA;YAAEc,aAAa;QAAM;QAGvBb;QACAC;QACAE;QACAM;IACF;AACF,EAAE"}

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

@@ -1,43 +1,57 @@
 import * as React from 'react';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
 import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, useDrawerBaseClassNames } from '../../util/useDrawerBaseStyles.styles';
 export const drawerInlineClassNames = {
   root: 'fui-DrawerInline'
 };
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__styles({
+const separatorValues = ['1px', 'solid', tokens.colorNeutralBackground3];
+const useDrawerRootStyles = /*#__PURE__*/__styles({
   root: {
-    qhf8xq: "f10pi13n"
+    qhf8xq: "f10pi13n",
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f15rjlgw",
+    Es3by: "f1blt7p"
   },
-  separatorLeft: {
+  separatorStart: {
     Bekrc4i: ["f1hqa2wf", "finvdd3"],
     vrafjx: ["fcdblym", "fjik90z"],
     h3c5rm: ["fa8zu9y", "f17e9lqh"]
   },
-  separatorRight: {
+  separatorEnd: {
     ibv6hh: ["finvdd3", "f1hqa2wf"],
     wvpqe5: ["fjik90z", "fcdblym"],
     zhjwy3: ["f17e9lqh", "fa8zu9y"]
+  },
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1h1g6jt"
+  },
+  visible: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx"
   }
 }, {
-  d: [".f10pi13n{position:relative;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}"]
+  d: [".f10pi13n{position:relative;}", ".fk73vx1{opacity:0;}", ".f15rjlgw{transition-property:opacity,transform;}", ".f1blt7p{will-change:opacity,transform;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fa8zu9y{border-right-color:var(--colorNeutralBackground3);}", ".f17e9lqh{border-left-color:var(--colorNeutralBackground3);}", ".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1h1g6jt{transform:translate3D(var(--fui-Drawer--size), 0, 0);}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}"]
 });
 /**
  * Apply styling to the DrawerInline slots based on the state
  */
 export const useDrawerInlineStyles_unstable = state => {
-  const baseStyles = useDrawerBaseStyles();
-  const styles = useStyles();
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
   const separatorClass = React.useMemo(() => {
     if (!state.separator) {
       return undefined;
     }
-    return state.position === 'left' ? styles.separatorLeft : styles.separatorRight;
-  }, [state.position, state.separator, styles.separatorRight, styles.separatorLeft]);
-  state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);
+    return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;
+  }, [state.position, state.separator, rootStyles.separatorEnd, rootStyles.separatorStart]);
+  state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDrawerInlineStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","shorthands","useDrawerBaseStyles","tokens","drawerInlineClassNames","root","useStyles","qhf8xq","separatorLeft","Bekrc4i","vrafjx","h3c5rm","separatorRight","ibv6hh","wvpqe5","zhjwy3","d","useDrawerInlineStyles_unstable","state","baseStyles","styles","separatorClass","useMemo","separator","undefined","position","className","size"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative'\n    },\n    /* Separator */ separatorLeft: {\n        ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3)\n    },\n    separatorRight: {\n        ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralBackground3)\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'left' ? styles.separatorLeft : styles.separatorRight;\n    }, [\n        state.position,\n        state.separator,\n        styles.separatorRight,\n        styles.separatorLeft\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,cAAc,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,MAAM,GAAGL,MAAM,CAACZ,aAAa,GAAGY,MAAM,CAACR,cAAc;EACnF,CAAC,EAAE,CACCM,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,MAAM,CAACR,cAAc,EACrBQ,MAAM,CAACZ,aAAa,CACvB,CAAC;EACFU,KAAK,CAACb,IAAI,CAACqB,SAAS,GAAG1B,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAEc,UAAU,CAACd,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEa,KAAK,CAACS,IAAI,IAAIR,UAAU,CAACD,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACO,QAAQ,IAAIN,UAAU,CAACD,KAAK,CAACO,QAAQ,CAAC,EAAEJ,cAAc,EAAEH,KAAK,CAACb,IAAI,CAACqB,SAAS,CAAC;EACxN,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__styles","mergeClasses","shorthands","tokens","drawerCSSVars","useDrawerBaseClassNames","drawerInlineClassNames","root","separatorValues","colorNeutralBackground3","useDrawerRootStyles","qhf8xq","abs64n","Bmy1vo4","Es3by","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","start","Bz10aip","end","visible","d","useDrawerInlineStyles_unstable","state","baseClassNames","rootStyles","separatorClass","useMemo","separator","undefined","position","className","motion","active"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerCSSVars, useDrawerBaseClassNames } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const separatorValues = [\n    '1px',\n    'solid',\n    tokens.colorNeutralBackground3\n];\nconst useDrawerRootStyles = makeStyles({\n    root: {\n        position: 'relative',\n        opacity: 0,\n        transitionProperty: 'opacity, transform',\n        willChange: 'opacity, transform'\n    },\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight(...separatorValues)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft(...separatorValues)\n    },\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(var(${drawerCSSVars.drawerSizeVar}), 0, 0)`\n    },\n    /* Visible */ visible: {\n        opacity: 1,\n        transform: `translate3D(0, 0, 0)`\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const rootStyles = useDrawerRootStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? rootStyles.separatorStart : rootStyles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        rootStyles.separatorEnd,\n        rootStyles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseClassNames, rootStyles.root, separatorClass, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,uCAAuC;AAC9F,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,GAAG,CACxB,KAAK,EACL,OAAO,EACPL,MAAM,CAACM,uBAAuB,CACjC;AACD,MAAMC,mBAAmB,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;EAAAE,OAAA;IAAAd,MAAA;IAAAY,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAuB3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,cAAc,GAAGzB,uBAAuB,CAACwB,KAAK,CAAC;EACrD,MAAME,UAAU,GAAGrB,mBAAmB,CAAC,CAAC;EACxC,MAAMsB,cAAc,GAAGjC,KAAK,CAACkC,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,OAAO,GAAGL,UAAU,CAAChB,cAAc,GAAGgB,UAAU,CAACZ,YAAY;EAC3F,CAAC,EAAE,CACCU,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,UAAU,CAACZ,YAAY,EACvBY,UAAU,CAAChB,cAAc,CAC5B,CAAC;EACFc,KAAK,CAACtB,IAAI,CAAC8B,SAAS,GAAGpC,YAAY,CAACK,sBAAsB,CAACC,IAAI,EAAEuB,cAAc,EAAEC,UAAU,CAACxB,IAAI,EAAEyB,cAAc,EAAED,UAAU,CAACF,KAAK,CAACO,QAAQ,CAAC,EAAEP,KAAK,CAACS,MAAM,CAACC,MAAM,IAAIR,UAAU,CAACL,OAAO,EAAEG,KAAK,CAACtB,IAAI,CAAC8B,SAAS,CAAC;EAC9M,OAAOR,KAAK;AAChB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\nimport type { DrawerOverlayProps } from './DrawerOverlay.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerOverlay_unstable(props, ref);\n\n  useDrawerOverlayStyles_unstable(state);\n\n  return renderDrawerOverlay_unstable(state);\n});\n\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["React","useDrawerOverlay_unstable","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","DrawerOverlay","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrG,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAEhC,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["DrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDrawerOverlay_unstable } from './useDrawerOverlay';\nimport { renderDrawerOverlay_unstable } from './renderDrawerOverlay';\nimport { useDrawerOverlayStyles_unstable } from './useDrawerOverlayStyles.styles';\nimport type { DrawerOverlayProps } from './DrawerOverlay.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * DrawerOverlay contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerOverlay_unstable(props, ref);\n\n  useDrawerOverlayStyles_unstable(state);\n\n  return renderDrawerOverlay_unstable(state);\n});\n\nDrawerOverlay.displayName = 'DrawerOverlay';\n"],"names":["React","useDrawerOverlay_unstable","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","DrawerOverlay","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAEhC,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

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