@fluentui/react-drawer 9.10.0 → 9.10.1

package/CHANGELOG.md

@@ -1,24 +1,42 @@
 # Change Log - @fluentui/react-drawer
 
-This log was last generated on Thu, 21 Aug 2025 12:20:39 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Sep 2025 12:41:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.1)
+
+Mon, 08 Sep 2025 12:41:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.10.0..@fluentui/react-drawer_v9.10.1)
+
+### Patches
+
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-dialog to v9.15.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-motion to v9.10.4 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-portal to v9.8.2 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.10.0)
 
-Thu, 21 Aug 2025 12:20:39 GMT 
+Thu, 21 Aug 2025 12:25:36 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-drawer_v9.9.4..@fluentui/react-drawer_v9.10.0)
 
 ### Minor changes
 
 - feat: Enable custom style hooks on OverlayDrawerSurface ([PR #35007](https://github.com/microsoft/fluentui/pull/35007) by mifraser@microsoft.com)
-- Bump @fluentui/react-dialog to v9.15.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-motion to v9.10.3 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-portal to v9.8.1 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-dialog to v9.15.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-motion to v9.10.3 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-portal to v9.8.1 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.9.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-drawer_v9.9.4)
 

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import type { DialogProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceProps } from '@fluentui/react-dialog';
 import type { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
@@ -337,42 +338,42 @@ declare type OverlayDrawerSurfaceSlots = Partial<Pick<DialogSurfaceSlots, 'backd
 /**
  * Render the final JSX of Drawer
  */
-export declare const renderDrawer_unstable: (state: DrawerState, contextValue: DrawerContextValue) => JSX.Element;
+export declare const renderDrawer_unstable: (state: DrawerState, contextValue: DrawerContextValue) => JSXElement;
 
 /**
  * Render the final JSX of DrawerBody
  */
-export declare const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element;
+export declare const renderDrawerBody_unstable: (state: DrawerBodyState) => JSXElement;
 
 /**
  * Render the final JSX of DrawerFooter
  */
-export declare const renderDrawerFooter_unstable: (state: DrawerFooterState) => JSX.Element;
+export declare const renderDrawerFooter_unstable: (state: DrawerFooterState) => JSXElement;
 
 /**
  * Render the final JSX of DrawerHeader
  */
-export declare const renderDrawerHeader_unstable: (state: DrawerHeaderState) => JSX.Element;
+export declare const renderDrawerHeader_unstable: (state: DrawerHeaderState) => JSXElement;
 
 /**
  * Render the final JSX of DrawerHeaderNavigation
  */
-export declare const renderDrawerHeaderNavigation_unstable: (state: DrawerHeaderNavigationState) => JSX.Element;
+export declare const renderDrawerHeaderNavigation_unstable: (state: DrawerHeaderNavigationState) => JSXElement;
 
 /**
  * Render the final JSX of DrawerHeaderTitle
  */
-export declare const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitleState) => JSX.Element;
+export declare const renderDrawerHeaderTitle_unstable: (state: DrawerHeaderTitleState) => JSXElement;
 
 /**
  * Render the final JSX of InlineDrawer
  */
-export declare const renderInlineDrawer_unstable: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSX.Element;
+export declare const renderInlineDrawer_unstable: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSXElement;
 
 /**
  * Render the final JSX of OverlayDrawer
  */
-export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSX.Element;
+export declare const renderOverlayDrawer_unstable: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSXElement;
 
 declare type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;
 

package/lib/components/Drawer/renderDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<DrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n  assertSlots<DrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,IAAI;;AAGjB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerBody/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"}
+{"version":3,"sources":["../src/components/DrawerBody/renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerFooter/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"}
+{"version":3,"sources":["../src/components/DrawerFooter/renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAKxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeader/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"}
+{"version":3,"sources":["../src/components/DrawerHeader/renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAKxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderNavigation/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"}
+{"version":3,"sources":["../src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\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;AAKxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\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;AAIxD;;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"}
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState): JSXElement => {\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;AAKxD;;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/InlineDrawer/renderInlineDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.surfaceMotion>\n        <state.root />\n      </state.surfaceMotion>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.surfaceMotion>\n        <state.root />\n      </state.surfaceMotion>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}

package/lib/components/OverlayDrawer/renderOverlayDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAwCG;IAExC,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,MAAM;sBACX,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n  state: OverlayDrawerState,\n  contextValue: DrawerContextValue,\n): JSXElement => {\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAwCG;IAExC,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,MAAM;sBACX,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}

package/lib/contexts/drawerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = () => React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QAAMT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;EAAoB;AAEtG,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = (): DrawerContextValue =>\n  React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,MAAMC,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,CAAC,CAAA;AAC1B;AAEA,OAAO,MAAMC,gBAAgBJ,MAAMK,aAAa,CAAiCC,WAAW;AAC5F,OAAO,MAAMC,iBAAiBH,cAAcI,QAAQ,CAAC;AACrD,OAAO,MAAMC,4BAA4B;QACvCT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACN,4BAAjBJ,+BAAAA,oBAAmCC;EAAoB;AAEzD,OAAO,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,MAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}

package/lib/e2e/DrawerShared.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from '@cypress/react';
+import { mount } from '@fluentui/scripts-cypress';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 const mountFluent = (element)=>{

package/lib/e2e/DrawerShared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSXElement) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer) {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}
+{"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@fluentui/scripts-cypress';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSXElement) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer): void {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}

package/lib/shared/drawerMotions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n) {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAO7D,MAAMC,YAAkE;IACtEC,OAAOJ,aAAaK,cAAc;IAClCC,QAAQN,aAAaO,YAAY;IACjCC,OAAOR,aAAaS,cAAc;IAClCC,MAAMV,aAAaW,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBpB,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBjC,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,OAAOiC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,OAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BrC,wBAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}
+{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n): string {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,yBAAyB;AAC/E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,SAASC,aAAa,QAAQ,+BAA+B;AAO7D,MAAMC,YAAkE;IACtEC,OAAOJ,aAAaK,cAAc;IAClCC,QAAQN,aAAaO,YAAY;IACjCC,OAAOR,aAAaS,cAAc;IAClCC,MAAMV,aAAaW,iBAAiB;AACtC;AAEA;;CAEC,GACD,OAAO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqBpB,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,sBAAsBjC,wBAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,cAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,OAAOiC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,OAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,aAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,aAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMK,+BAA+BrC,wBAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,aAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}

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

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

package/lib/shared/useDrawerDefaultProps.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<DrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;+BACL,+BAA+B;AAO3E,8BAA8B,CAACC,OAAoBC;QACxDJ,2BAAAA,EAAyBG;IAEzB,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/Drawer/renderDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { DrawerState, DrawerSlots } from './Drawer.types';\n\n/**\n * Render the final JSX of Drawer\n */\nexport const renderDrawer_unstable = (state: DrawerState, contextValue: DrawerContextValue): JSXElement => {\n  assertSlots<DrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.root />\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderDrawer_unstable","state","contextValue","value","root"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;+BAEL,+BAA+B;AAO3E,8BAA8B,CAACC,OAAoBC;QACxDJ,2BAAAA,EAAyBG;IAEzB,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerBody/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":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,4BAA4B,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/DrawerBody/renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<DrawerBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerBody_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,4BAA4B,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerFooter/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":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/DrawerFooter/renderDrawerFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<DrawerFooterSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerFooter_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeader/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":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/DrawerHeader/renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<DrawerHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderNavigation/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":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,wCAAwC,CAACC;QACpDF,2BAAAA,EAAyCE;IAEzC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<DrawerHeaderNavigationSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeaderNavigation_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,wCAAwC,CAACC;QACpDF,2BAAAA,EAAyCE;IAEzC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,yCAAyC,CAACC;QAC/CF,2BAAAA,EAAoCE;IAEpC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,OAAO,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,OAAO,EAAA,CAAA;YAC/BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}
+{"version":3,"sources":["../src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState): JSXElement => {\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":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;AAQjD,yCAAyC,CAACC;QAC/CF,2BAAAA,EAAoCE;IAEpC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,OAAO,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,OAAO,EAAA,CAAA;YAC/BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

package/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.surfaceMotion>\n        <state.root />\n      </state.surfaceMotion>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;+BACL,+BAA+B;AAO3E,oCAAoC,CAACC,OAA0BC;QACpEJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,aAAa,EAAA;sBAClB,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/InlineDrawer/renderInlineDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerState, InlineDrawerSlots } from './InlineDrawer.types';\n\n/**\n * Render the final JSX of InlineDrawer\n */\nexport const renderInlineDrawer_unstable = (state: InlineDrawerState, contextValue: DrawerContextValue): JSXElement => {\n  assertSlots<InlineDrawerSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.surfaceMotion>\n        <state.root />\n      </state.surfaceMotion>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderInlineDrawer_unstable","state","contextValue","value","surfaceMotion","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCACrB,4BAA4B;+BAEL,+BAA+B;AAO3E,oCAAoC,CAACC,OAA0BC;QACpEJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,aAAa,EAAA;sBAClB,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

package/lib-commonjs/components/OverlayDrawer/renderOverlayDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState, contextValue: DrawerContextValue) => {\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;+BACL,+BAA+B;AAO3E,qCAAqC,CAACC,OAA2BC;QACtEJ,2BAAAA,EAAwCG;IAExC,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,MAAM,EAAA;sBACX,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/OverlayDrawer/renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { DrawerContextValue, DrawerProvider } from '../../contexts/drawerContext';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (\n  state: OverlayDrawerState,\n  contextValue: DrawerContextValue,\n): JSXElement => {\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <DrawerProvider value={contextValue}>\n      <state.dialog>\n        <state.root />\n      </state.dialog>\n    </DrawerProvider>\n  );\n};\n"],"names":["assertSlots","DrawerProvider","renderOverlayDrawer_unstable","state","contextValue","value","dialog","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCACrB,4BAA4B;+BAEL,+BAA+B;AAO3E,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAwCG;IAExC,OAAA,WAAA,OACE,eAAA,EAACF,6BAAAA,EAAAA;QAAeI,OAAOD;kBACrB,WAAA,OAAA,eAAA,EAACD,MAAMG,MAAM,EAAA;sBACX,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

package/lib-commonjs/contexts/drawerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = () => React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":";;;;;;;;;;;IAeaO,cAAAA;;;iBADAH;;;yBAIAO;;;6BAFAF;;;;;iEAhBU,QAAQ;AAS/B,MAAMR,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,EAAC,CAAA;AAC1B;AAEO,MAAMC,8BAAgBJ,OAAMK,aAAa,CAAiCC,WAAW;AACrF,uBAAuBF,cAAcI,QAAQ,CAAC;AAC9C,MAAMC,4BAA4B;QAAMT;WAAAA,CAAAA,oBAAAA,OAAMU,UAAU,CAACN,cAAAA,MAAAA,QAAjBJ,sBAAAA,KAAAA,IAAAA,oBAAmCC;EAAoB;AAE/F,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,OAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/contexts/drawerContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { DrawerScrollState } from '../shared/DrawerBase.types';\n\nexport type DrawerContextValue = {\n  scrollState: DrawerScrollState;\n  setScrollState: (scrollState: DrawerScrollState) => void;\n};\n\nconst defaultContextValue: DrawerContextValue = {\n  scrollState: 'none',\n  setScrollState: () => ({}),\n};\n\nexport const drawerContext = React.createContext<DrawerContextValue | undefined>(undefined);\nexport const DrawerProvider = drawerContext.Provider;\nexport const useDrawerContext_unstable = (): DrawerContextValue =>\n  React.useContext(drawerContext) ?? defaultContextValue;\n\nexport const useDrawerContextValue = (): DrawerContextValue => {\n  const [scrollState, setScrollState] = React.useState<DrawerScrollState>('none');\n\n  return {\n    setScrollState,\n    scrollState,\n  };\n};\n"],"names":["React","defaultContextValue","scrollState","setScrollState","drawerContext","createContext","undefined","DrawerProvider","Provider","useDrawerContext_unstable","useContext","useDrawerContextValue","useState"],"mappings":";;;;;;;;;;;IAeaO,cAAAA;;;iBADAH;;;yBAKAO;;;6BAHAF;;;;;iEAhBU,QAAQ;AAS/B,MAAMR,sBAA0C;IAC9CC,aAAa;IACbC,gBAAgB,IAAO,CAAA,EAAC,CAAA;AAC1B;AAEO,MAAMC,8BAAgBJ,OAAMK,aAAa,CAAiCC,WAAW;AACrF,uBAAuBF,cAAcI,QAAQ,CAAC;AAC9C,MAAMC,4BAA4B;QACvCT;WAAAA,CAAAA,oBAAAA,OAAMU,UAAU,CAACN,cAAAA,MAAAA,QAAjBJ,sBAAAA,KAAAA,IAAAA,oBAAmCC;EAAoB;AAElD,MAAMU,wBAAwB;IACnC,MAAM,CAACT,aAAaC,eAAe,GAAGH,OAAMY,QAAQ,CAAoB;IAExE,OAAO;QACLT;QACAD;IACF;AACF,EAAE"}

package/lib-commonjs/e2e/DrawerShared.js

@@ -10,11 +10,11 @@ Object.defineProperty(exports, "testDrawerBaseScenarios", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _react1 = require("@cypress/react");
+const _scriptscypress = require("@fluentui/scripts-cypress");
 const _reactprovider = require("@fluentui/react-provider");
 const _reacttheme = require("@fluentui/react-theme");
 const mountFluent = (element)=>{
-    (0, _react1.mount)(/*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
+    (0, _scriptscypress.mount)(/*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
         theme: _reacttheme.webLightTheme
     }, element));
 };

package/lib-commonjs/e2e/DrawerShared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@cypress/react';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSXElement) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer) {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}
+{"version":3,"sources":["../src/e2e/DrawerShared.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mount } from '@fluentui/scripts-cypress';\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { InlineDrawer } from '../components/InlineDrawer';\nimport { OverlayDrawer } from '../components/OverlayDrawer';\nimport { Drawer, DrawerProps } from '../Drawer';\n\nconst mountFluent = (element: JSXElement) => {\n  mount(<FluentProvider theme={webLightTheme}>{element}</FluentProvider>);\n};\n\nexport function testDrawerBaseScenarios(Component: typeof Drawer | typeof OverlayDrawer | typeof InlineDrawer): void {\n  describe('basic functionality', () => {\n    it('should not render any element when closed', () => {\n      mountFluent(<Component id=\"drawer\" />);\n\n      cy.get('#drawer').should('not.exist');\n    });\n\n    it('should render an element when opened', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.get('#drawer').should('exist');\n    });\n\n    it('should render children content', () => {\n      const content = 'Test the renderization';\n      mountFluent(\n        <Component id=\"drawer\" open>\n          {content}\n        </Component>,\n      );\n\n      cy.get('#drawer').contains(content);\n    });\n\n    it('should toggle visibility on open prop change', () => {\n      const ExampleDrawer = () => {\n        const [open, setOpen] = React.useState(false);\n\n        return (\n          <>\n            <Component id=\"drawer\" open={open} />\n            <button id=\"button\" onClick={() => setOpen(true)}>\n              Open\n            </button>\n          </>\n        );\n      };\n\n      mountFluent(<ExampleDrawer />);\n\n      cy.get('#drawer').should('not.exist');\n      cy.get('#button').click();\n      cy.get('#drawer').should('exist');\n    });\n  });\n\n  describe('size prop', () => {\n    const sizes = {\n      small: 320,\n      medium: 592,\n      large: 940,\n      full: 1000,\n    };\n\n    Object.entries(sizes).forEach(([size, width]) => {\n      const sizeProp = size as DrawerProps['size'];\n\n      it(`should have correct size when size is ${size}`, () => {\n        mountFluent(<Component size={sizeProp} id=\"drawer\" open />);\n\n        cy.viewport(1000, 1000);\n        cy.get('#drawer').should('have.css', 'width', width + 'px');\n        cy.get('#drawer').invoke('outerWidth').should('equal', width);\n      });\n    });\n\n    it('width should not be bigger than viewport', () => {\n      mountFluent(<Component id=\"drawer\" open />);\n\n      cy.viewport(319, 319);\n      cy.get('#drawer').should('have.css', 'width', '319px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 319);\n    });\n\n    it('should have custom size', () => {\n      mountFluent(<Component id=\"drawer\" open style={{ width: '200px' }} />);\n\n      cy.get('#drawer').should('have.css', 'width', '200px');\n      cy.get('#drawer').invoke('outerWidth').should('equal', 200);\n    });\n  });\n\n  describe('position prop', () => {\n    const positions = {\n      start: 'left',\n      end: 'right',\n      bottom: 'bottom',\n    };\n\n    Object.entries(positions).forEach(([position, side]) => {\n      const positionProp = position as DrawerProps['position'];\n\n      it(`should have correct position when position is ${position}`, () => {\n        mountFluent(<Component position={positionProp} id=\"drawer\" open />);\n\n        cy.get('#drawer').should('have.css', side, '0px');\n      });\n    });\n  });\n}\n"],"names":["React","mount","FluentProvider","webLightTheme","mountFluent","element","theme","testDrawerBaseScenarios","Component","describe","it","id","cy","get","should","open","content","contains","ExampleDrawer","setOpen","useState","button","onClick","click","sizes","small","medium","large","full","Object","entries","forEach","size","width","sizeProp","viewport","invoke","style","positions","start","end","bottom","position","side","positionProp"],"mappings":"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"}

package/lib-commonjs/shared/drawerMotions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n) {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear"],"mappings":";;;;;;;;;;;sBAiDaoB;eAAAA;;IA+BAa,mBAAAA;;;gCAoCAI;eAAAA;;wBA9FGxB;;;;6BAtBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;AAO7D,MAAMT,YAAkE;IACtEC,OAAOJ,yBAAAA,CAAaK,cAAc;IAClCC,QAAQN,yBAAAA,CAAaO,YAAY;IACjCC,OAAOR,yBAAAA,CAAaS,cAAc;IAClCC,MAAMV,yBAAAA,CAAaW,iBAAiB;AACtC;AAKO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAKO,+BAA2BnB,oCAAAA,EAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,wCAAAA,CAAcqB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,yBAAAA,CAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,yBAAAA,CAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,4BAA4BhC,wCAAAA,EAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,wCAAAA,CAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,kBAAAA,CAAOiC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,kBAAAA,CAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,yBAAAA,CAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,yBAAAA,CAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqChC,oCAAAA,EAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,yBAAAA,CAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,yBAAAA,CAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}
+{"version":3,"sources":["../src/shared/drawerMotions.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';\nimport { tokens } from '@fluentui/react-theme';\nimport { ProviderContextValue_unstable as FluentProviderContextValue } from '@fluentui/react-shared-contexts';\n\nimport type { DrawerBaseProps } from './DrawerBase.types';\nimport { drawerCSSVars } from './useDrawerBaseStyles.styles';\n\nexport type DrawerMotionParams = Required<\n  Pick<DrawerBaseProps, 'size' | 'position'> & Pick<FluentProviderContextValue, 'dir'>\n>;\nexport type OverlayDrawerSurfaceMotionParams = Required<Pick<DrawerBaseProps, 'size'>>;\n\nconst durations: Record<NonNullable<DrawerBaseProps['size']>, number> = {\n  small: motionTokens.durationGentle,\n  medium: motionTokens.durationSlow,\n  large: motionTokens.durationSlower,\n  full: motionTokens.durationUltraSlow,\n};\n\n/**\n * @internal\n */\nexport function getPositionTransform(\n  position: DrawerBaseProps['position'],\n  sizeVar: string,\n  dir: FluentProviderContextValue['dir'],\n): string {\n  const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;\n  const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;\n  const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;\n\n  if (position === 'start') {\n    return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;\n  }\n\n  if (position === 'end') {\n    return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;\n  }\n\n  if (position === 'bottom') {\n    return bottomToTopTransform;\n  }\n\n  return 'translate3d(0, 0, 0)';\n}\n\n/**\n * @internal\n */\nexport const InlineDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      opacity: 0,\n    },\n    { transform: 'translate3d(0, 0, 0)', opacity: 1 },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlayDrawerMotion = createPresenceComponent<DrawerMotionParams>(({ position, size, dir }) => {\n  const keyframes: Keyframe[] = [\n    {\n      /**\n       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs\n       * The work will be done in the #32817\n       */\n      transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),\n      boxShadow: `0px ${tokens.colorTransparentBackground}`,\n      opacity: 0,\n    },\n    {\n      transform: 'translate3d(0, 0, 0)',\n      boxShadow: tokens.shadow64,\n      opacity: 1,\n    },\n  ];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      duration,\n      easing: motionTokens.curveDecelerateMid,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      duration,\n      easing: motionTokens.curveAccelerateMin,\n    },\n  };\n});\n\n/**\n * @internal\n */\nexport const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {\n  const keyframes = [{ opacity: 0 }, { opacity: 1 }];\n  const duration = durations[size];\n\n  return {\n    enter: {\n      keyframes,\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n    exit: {\n      keyframes: [...keyframes].reverse(),\n      easing: motionTokens.curveLinear,\n      duration,\n    },\n  };\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","drawerCSSVars","durations","small","durationGentle","medium","durationSlow","large","durationSlower","full","durationUltraSlow","getPositionTransform","position","sizeVar","dir","leftToRightTransform","rightToLeftTransform","bottomToTopTransform","InlineDrawerMotion","size","keyframes","transform","drawerSizeVar","opacity","duration","enter","easing","curveDecelerateMid","exit","reverse","curveAccelerateMin","OverlayDrawerMotion","boxShadow","colorTransparentBackground","shadow64","OverlaySurfaceBackdropMotion","curveLinear"],"mappings":";;;;;;;;;;;sBAiDaoB;eAAAA;;IA+BAa,mBAAAA;;;gCAoCAI;eAAAA;;wBA9FGxB;;;;6BAtBsC,yBAAyB;4BACxD,wBAAwB;2CAIjB,+BAA+B;AAO7D,MAAMT,YAAkE;IACtEC,OAAOJ,yBAAAA,CAAaK,cAAc;IAClCC,QAAQN,yBAAAA,CAAaO,YAAY;IACjCC,OAAOR,yBAAAA,CAAaS,cAAc;IAClCC,MAAMV,yBAAAA,CAAaW,iBAAiB;AACtC;AAKO,SAASC,qBACdC,QAAqC,EACrCC,OAAe,EACfC,GAAsC;IAEtC,MAAMC,uBAAuB,CAAC,gBAAgB,EAAEF,QAAQ,QAAQ,CAAC;IACjE,MAAMG,uBAAuB,CAAC,qBAAqB,EAAEH,QAAQ,cAAc,CAAC;IAC5E,MAAMI,uBAAuB,CAAC,mBAAmB,EAAEJ,QAAQ,KAAK,CAAC;IAEjE,IAAID,aAAa,SAAS;QACxB,OAAOE,QAAQ,QAAQE,uBAAuBD;IAChD;IAEA,IAAIH,aAAa,OAAO;QACtB,OAAOE,QAAQ,QAAQC,uBAAuBC;IAChD;IAEA,IAAIJ,aAAa,UAAU;QACzB,OAAOK;IACT;IAEA,OAAO;AACT;AAKO,+BAA2BnB,oCAAAA,EAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACpG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,wCAAAA,CAAcqB,aAAa,EAAER;YACvES,SAAS;QACX;QACA;YAAEF,WAAW;YAAwBE,SAAS;QAAE;KACjD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,yBAAAA,CAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,yBAAAA,CAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,4BAA4BhC,wCAAAA,EAA4C,CAAC,EAAEc,QAAQ,EAAEO,IAAI,EAAEL,GAAG,EAAE;IACrG,MAAMM,YAAwB;QAC5B;YACE;;;OAGC,GACDC,WAAWV,qBAAqBC,UAAUX,wCAAAA,CAAcqB,aAAa,EAAER;YACvEkB,WAAW,CAAC,IAAI,EAAEhC,kBAAAA,CAAOiC,0BAA0B,EAAE;YACrDV,SAAS;QACX;QACA;YACEF,WAAW;YACXW,WAAWhC,kBAAAA,CAAOkC,QAAQ;YAC1BX,SAAS;QACX;KACD;IACD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAI;YACAE,QAAQ3B,yBAAAA,CAAa4B,kBAAkB;QACzC;QACAC,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCL;YACAE,QAAQ3B,yBAAAA,CAAa+B,kBAAkB;QACzC;IACF;AACF,GAAG;AAKI,yCAAqChC,oCAAAA,EAAwB,CAAC,EAAEqB,IAAI,EAAoC;IAC7G,MAAMC,YAAY;QAAC;YAAEG,SAAS;QAAE;QAAG;YAAEA,SAAS;QAAE;KAAE;IAClD,MAAMC,WAAWtB,SAAS,CAACiB,KAAK;IAEhC,OAAO;QACLM,OAAO;YACLL;YACAM,QAAQ3B,yBAAAA,CAAaqC,WAAW;YAChCZ;QACF;QACAI,MAAM;YACJR,WAAW;mBAAIA;aAAU,CAACS,OAAO;YACjCH,QAAQ3B,yBAAAA,CAAaqC,WAAW;YAChCZ;QACF;IACF;AACF,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/useDrawerBaseStyles.styles.ts"],"sourcesContent":["import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport { DrawerBaseState } from './DrawerBase.types';\n\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size',\n};\n\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles: GriffelResetStyle = {\n  overflow: 'hidden',\n\n  width: `var(${drawerCSSVars.drawerSizeVar})`,\n  maxWidth: '100vw',\n  height: 'auto',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  justifyContent: 'flex-start',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n};\n\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = makeStyles({\n  /* Positioning */\n  start: {\n    borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    left: 0,\n    right: 'auto',\n  },\n  end: {\n    borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    right: 0,\n    left: 'auto',\n  },\n  bottom: {\n    bottom: 0,\n    top: 'auto',\n  },\n\n  /* Sizes */\n  small: {\n    [drawerCSSVars.drawerSizeVar]: '320px',\n  },\n  medium: {\n    [drawerCSSVars.drawerSizeVar]: '592px',\n  },\n  large: {\n    [drawerCSSVars.drawerSizeVar]: '940px',\n  },\n  full: {\n    [drawerCSSVars.drawerSizeVar]: '100vw',\n  },\n});\n\nexport const useDrawerBottomBaseStyles = makeStyles({\n  /* Sizes for position bottom */\n  small: {\n    [drawerCSSVars.drawerSizeVar]: '320px',\n  },\n  medium: {\n    [drawerCSSVars.drawerSizeVar]: '592px',\n  },\n  large: {\n    [drawerCSSVars.drawerSizeVar]: '940px',\n  },\n  full: {\n    [drawerCSSVars.drawerSizeVar]: '100%',\n  },\n});\n\nexport const useDrawerBaseClassNames = ({ position, size }: DrawerBaseState) => {\n  const baseStyles = useDrawerStyles();\n  const bottomBaseStyles = useDrawerBottomBaseStyles();\n\n  return mergeClasses(\n    baseStyles[position],\n    position === 'bottom' && bottomBaseStyles[size],\n    position !== 'bottom' && baseStyles[size],\n  );\n};\n"],"names":["makeStyles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","borderRight","strokeWidthThin","colorTransparentStroke","left","right","end","borderLeft","bottom","top","small","medium","large","full","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"mappings":";;;;;;;;;;;IAQaG,aAAAA;;;IAOAE,mBAAAA;;;2BAqEA+B;;;IAhBAD,yBAAAA;;;;uBApEoD,iBAAiB;4BAC3D,wBAAwB;AAOxC,sBAAsB;IAC3B/B,eAAe;AACjB,EAAE;AAKK,4BAA+C;IACpDE,UAAU;IAEVC,OAAO,CAAC,IAAI,EAAEJ,cAAcC,aAAa,CAAC,CAAC,CAAC;IAC5CI,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBd,kBAAAA,CAAOe,uBAAuB;IAC/CC,OAAOhB,kBAAAA,CAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,sBAAkBpB,iBAAAA,EAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE9EE,OAAO;QACPD,MAAM;IACR;IACAI,QAAQ;QACNA,QAAQ;QACRC,KAAK;IACP;IAEA,SAAS,GACTC,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF;AAEO,kCAAkCJ,qBAAAA,EAAW;IAClD,6BAA6B,GAC7B+B,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF,GAAG;AAEI,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,WAAOlC,mBAAAA,EACLsC,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C,EAAE"}
+{"version":3,"sources":["../src/shared/useDrawerBaseStyles.styles.ts"],"sourcesContent":["import { type GriffelResetStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n\nimport { DrawerBaseState } from './DrawerBase.types';\n\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */\nexport const drawerCSSVars = {\n  drawerSizeVar: '--fui-Drawer--size',\n};\n\n/**\n * Default shared styles for the Drawer component\n */\nexport const drawerDefaultStyles: GriffelResetStyle = {\n  overflow: 'hidden',\n\n  width: `var(${drawerCSSVars.drawerSizeVar})`,\n  maxWidth: '100vw',\n  height: 'auto',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  justifyContent: 'flex-start',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n};\n\n/**\n * Shared dynamic styles for the Drawer component\n */\nconst useDrawerStyles = makeStyles({\n  /* Positioning */\n  start: {\n    borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    left: 0,\n    right: 'auto',\n  },\n  end: {\n    borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n    right: 0,\n    left: 'auto',\n  },\n  bottom: {\n    bottom: 0,\n    top: 'auto',\n  },\n\n  /* Sizes */\n  small: {\n    [drawerCSSVars.drawerSizeVar]: '320px',\n  },\n  medium: {\n    [drawerCSSVars.drawerSizeVar]: '592px',\n  },\n  large: {\n    [drawerCSSVars.drawerSizeVar]: '940px',\n  },\n  full: {\n    [drawerCSSVars.drawerSizeVar]: '100vw',\n  },\n});\n\nexport const useDrawerBottomBaseStyles = makeStyles({\n  /* Sizes for position bottom */\n  small: {\n    [drawerCSSVars.drawerSizeVar]: '320px',\n  },\n  medium: {\n    [drawerCSSVars.drawerSizeVar]: '592px',\n  },\n  large: {\n    [drawerCSSVars.drawerSizeVar]: '940px',\n  },\n  full: {\n    [drawerCSSVars.drawerSizeVar]: '100%',\n  },\n});\n\nexport const useDrawerBaseClassNames = ({ position, size }: DrawerBaseState): string => {\n  const baseStyles = useDrawerStyles();\n  const bottomBaseStyles = useDrawerBottomBaseStyles();\n\n  return mergeClasses(\n    baseStyles[position],\n    position === 'bottom' && bottomBaseStyles[size],\n    position !== 'bottom' && baseStyles[size],\n  );\n};\n"],"names":["makeStyles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","borderRight","strokeWidthThin","colorTransparentStroke","left","right","end","borderLeft","bottom","top","small","medium","large","full","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"mappings":";;;;;;;;;;;IAQaG,aAAAA;;;IAOAE,mBAAAA;;;2BAqEA+B;;;IAhBAD,yBAAAA;;;;uBApEoD,iBAAiB;4BAC3D,wBAAwB;AAOxC,sBAAsB;IAC3B/B,eAAe;AACjB,EAAE;AAKK,4BAA+C;IACpDE,UAAU;IAEVC,OAAO,CAAC,IAAI,EAAEJ,cAAcC,aAAa,CAAC,CAAC,CAAC;IAC5CI,UAAU;IACVC,QAAQ;IACRC,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,gBAAgB;IAChBC,iBAAiBd,kBAAAA,CAAOe,uBAAuB;IAC/CC,OAAOhB,kBAAAA,CAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,sBAAkBpB,iBAAAA,EAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE9EE,OAAO;QACPD,MAAM;IACR;IACAI,QAAQ;QACNA,QAAQ;QACRC,KAAK;IACP;IAEA,SAAS,GACTC,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF;AAEO,kCAAkCJ,qBAAAA,EAAW;IAClD,6BAA6B,GAC7B+B,OAAO;QACL,CAAC5B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA4B,QAAQ;QACN,CAAC7B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA6B,OAAO;QACL,CAAC9B,cAAcC,aAAa,CAAC,EAAE;IACjC;IACA8B,MAAM;QACJ,CAAC/B,cAAcC,aAAa,CAAC,EAAE;IACjC;AACF,GAAG;AAEI,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,WAAOlC,mBAAAA,EACLsC,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C,EAAE"}

package/lib-commonjs/shared/useDrawerDefaultProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shared/useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps) {\n  const { open = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n  };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position"],"mappings":";;;;;;;;;;AAEO,SAASA,sBAAsBC,KAAsB;IAC1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGH;IAE7D,OAAO;QACLE;QACAC;QACAF;IACF;AACF"}
+{"version":3,"sources":["../src/shared/useDrawerDefaultProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function useDrawerDefaultProps(props: DrawerBaseProps): {\n  size: NonNullable<DrawerBaseProps['size']>;\n  position: NonNullable<DrawerBaseProps['position']>;\n  open: boolean;\n} {\n  const { open = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n  };\n}\n"],"names":["useDrawerDefaultProps","props","open","size","position"],"mappings":";;;;;;;;;;AAEO,SAASA,sBAAsBC,KAAsB;IAK1D,MAAM,EAAEC,OAAO,KAAK,EAAEC,OAAO,OAAO,EAAEC,WAAW,OAAO,EAAE,GAAGH;IAE7D,OAAO;QACLE;QACAC;QACAF;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-drawer",
-  "version": "9.10.0",
+  "version": "9.10.1",
   "description": "Drawer components for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,22 +20,22 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-dialog": "^9.15.0",
-    "@fluentui/react-jsx-runtime": "^9.1.6",
-    "@fluentui/react-motion": "^9.10.3",
-    "@fluentui/react-portal": "^9.8.1",
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-tabster": "^9.26.4",
+    "@fluentui/react-dialog": "^9.15.1",
+    "@fluentui/react-jsx-runtime": "^9.2.0",
+    "@fluentui/react-motion": "^9.10.4",
+    "@fluentui/react-portal": "^9.8.2",
+    "@fluentui/react-shared-contexts": "^9.25.1",
+    "@fluentui/react-tabster": "^9.26.5",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-utilities": "^9.24.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [