@fluentui/react-drawer 9.0.0-beta.37 → 9.0.0-beta.38

package/lib/components/OverlayDrawer/OverlayDrawer.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useOverlayDrawer_unstable } from './useOverlayDrawer';
+import { renderOverlayDrawer_unstable } from './renderOverlayDrawer';
+import { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';
+/**
+ * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.
+ */ export const OverlayDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useOverlayDrawer_unstable(props, ref);
+    useOverlayDrawerStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);
+    useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);
+    return renderOverlayDrawer_unstable(state);
+});
+OverlayDrawer.displayName = 'OverlayDrawer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useOverlayDrawer_unstable } from './useOverlayDrawer';\nimport { renderOverlayDrawer_unstable } from './renderOverlayDrawer';\nimport { useOverlayDrawerStyles_unstable } from './useOverlayDrawerStyles.styles';\nimport type { OverlayDrawerProps } from './OverlayDrawer.types';\n\n/**\n * OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.\n */\nexport const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useOverlayDrawer_unstable(props, ref);\n\n  useOverlayDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerOverlayStyles_unstable')(state);\n  useCustomStyleHook_unstable('useOverlayDrawerStyles_unstable')(state);\n\n  return renderOverlayDrawer_unstable(state);\n});\n\nOverlayDrawer.displayName = 'OverlayDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useOverlayDrawer_unstable","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","OverlayDrawer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAGlF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChCR,4BAA4B,mCAAmCQ;IAC/DR,4BAA4B,mCAAmCQ;IAE/D,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawer.types.ts"],"sourcesContent":["import type { DialogProps } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\nimport { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface';\n\n/**\n * OverlayDrawer slots\n */\nexport type OverlayDrawerSlots = {\n  /**\n   * Slot for the root element.\n   */\n  root: Slot<OverlayDrawerSurfaceProps>;\n};\n\n/**\n * OverlayDrawer internal slots for when using with composition API\n */\nexport type OverlayDrawerInternalSlots = OverlayDrawerSlots & {\n  /**\n   * Slot for the dialog component that wraps the drawer.\n   */\n  dialog: Slot<DialogProps>;\n};\n\n/**\n * OverlayDrawer Props\n */\nexport type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &\n  Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus' | 'defaultOpen'> &\n  DrawerBaseProps;\n\n/**\n * State used in rendering OverlayDrawer\n */\nexport type OverlayDrawerState = Omit<ComponentState<OverlayDrawerInternalSlots>, 'backdrop'> &\n  Required<DrawerBaseState>;\n"],"names":[],"mappings":"AAAA,WAqC4B"}

package/lib/components/{DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js → OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js}

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from '@fluentui/react-dialog';
-import { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles';
+import { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';
 /**
  * @internal
- * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.
- */ export const DrawerOverlaySurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+ * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.
+ */ export const OverlayDrawerSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const dialogSurfaceState = useDialogSurface_unstable(props, ref);
     const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);
-    useDrawerOverlaySurfaceStyles_unstable(dialogSurfaceState);
+    useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);
     return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);
 });
-DrawerOverlaySurface.displayName = 'DrawerOverlaySurface';
+OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';

package/lib/components/{DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.js.map → OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["DrawerOverlaySurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  useDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles';\nimport type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types';\n\n/**\n * @internal\n * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const DrawerOverlaySurface: ForwardRefComponent<DrawerOverlaySurfaceProps> = React.forwardRef((props, ref) => {\n  const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n  const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n  useDrawerOverlaySurfaceStyles_unstable(dialogSurfaceState);\n\n  return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nDrawerOverlaySurface.displayName = 'DrawerOverlaySurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useDrawerOverlaySurfaceStyles_unstable","DrawerOverlaySurface","forwardRef","props","ref","dialogSurfaceState","dialogSurfaceContextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,yBAAyB,EACzBC,sCAAsC,EACtCC,4BAA4B,QACvB,yBAAyB;AAEhC,SAASC,sCAAsC,QAAQ,yCAAyC;AAGhG;;;CAGC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,qBAAqBR,0BAA0BM,OAAOC;IAC5D,MAAME,6BAA6BR,uCAAuCO;IAE1EL,uCAAuCK;IAEvC,OAAON,6BAA6BM,oBAAoBC;AAC1D,GAAG;AAEHL,qBAAqBM,WAAW,GAAG"}
+{"version":3,"sources":["OverlayDrawerSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  useDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\n\n/**\n * @internal\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n  const dialogSurfaceState = useDialogSurface_unstable(props, ref);\n  const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n  useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n\n  return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useOverlayDrawerSurfaceStyles_unstable","OverlayDrawerSurface","forwardRef","props","ref","dialogSurfaceState","dialogSurfaceContextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SACEC,yBAAyB,EACzBC,sCAAsC,EACtCC,4BAA4B,QACvB,yBAAyB;AAEhC,SAASC,sCAAsC,QAAQ,yCAAyC;AAGhG;;;CAGC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,qBAAqBR,0BAA0BM,OAAOC;IAC5D,MAAME,6BAA6BR,uCAAuCO;IAE1EL,uCAAuCK;IAEvC,OAAON,6BAA6BM,oBAAoBC;AAC1D,GAAG;AAEHL,qBAAqBM,WAAW,GAAG"}

package/lib/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceSlots, DialogSurfaceState } from '@fluentui/react-dialog';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = DialogSurfaceSlots;\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots>;\n\n/**\n * State used in rendering OverlayDrawerSurface\n */\nexport type OverlayDrawerSurfaceState = ComponentState<OverlayDrawerSurfaceSlots> & DialogSurfaceState;\n"],"names":[],"mappings":"AAAA,WAgBuG"}

package/lib/components/OverlayDrawer/OverlayDrawerSurface/index.js

@@ -0,0 +1,2 @@
+export * from './OverlayDrawerSurface';
+export * from './OverlayDrawerSurface.types';

package/lib/components/{DrawerOverlay/DrawerOverlaySurface → OverlayDrawer/OverlayDrawerSurface}/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DrawerOverlaySurface';\nexport * from './DrawerOverlaySurface.types';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './OverlayDrawerSurface';\nexport * from './OverlayDrawerSurface.types';\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,+BAA+B"}

package/lib/components/{DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js → OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js}

@@ -1,8 +1,8 @@
 import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-export const drawerOverlaySurfaceClassNames = {
-  root: 'fui-DrawerOverlaySurface',
-  backdrop: 'fui-DrawerOverlaySurface__backdrop'
+export const OverlayDrawerSurfaceClassNames = {
+  root: 'fui-OverlayDrawerSurface',
+  backdrop: 'fui-OverlayDrawerSurface__backdrop'
 };
 /**
  * Styles for the backdrop slot
@@ -16,9 +16,9 @@ const useBackdropStyles = /*#__PURE__*/__styles({
   d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
 });
 /**
- * Apply styling to the DrawerOverlaySurface slots based on the state
+ * Apply styling to the OverlayDrawerSurface slots based on the state
  */
-export const useDrawerOverlaySurfaceStyles_unstable = state => {
+export const useOverlayDrawerSurfaceStyles_unstable = state => {
   const backdropResetStyles = useBackdropResetStyles();
   const backdropStyles = useBackdropStyles();
   if (state.backdrop) {
@@ -26,4 +26,4 @@ export const useDrawerOverlaySurfaceStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDrawerOverlaySurfaceStyles.styles.js.map
+//# sourceMappingURL=useOverlayDrawerSurfaceStyles.styles.js.map

package/lib/components/{DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.js.map → OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map}

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","drawerOverlaySurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useDrawerOverlaySurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useDrawerOverlaySurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerOverlaySurfaceClassNames = {\n    root: 'fui-DrawerOverlaySurface',\n    backdrop: 'fui-DrawerOverlaySurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    ...shorthands.inset('0px'),\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the DrawerOverlaySurface slots based on the state\n */ export const useDrawerOverlaySurfaceStyles_unstable = (state)=>{\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGR,aAAA,qOAIlC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACa,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","OverlayDrawerSurfaceClassNames","root","backdrop","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","d","useOverlayDrawerSurfaceStyles_unstable","state","backdropResetStyles","backdropStyles","className","isNestedDialog"],"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const OverlayDrawerSurfaceClassNames = {\n    root: 'fui-OverlayDrawerSurface',\n    backdrop: 'fui-OverlayDrawerSurface__backdrop'\n};\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    ...shorthands.inset('0px'),\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)'\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(backdropResetStyles, state.isNestedDialog && backdropStyles.nested, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGR,aAAA,qOAIlC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EAC/D,MAAMC,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1C,IAAIK,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACa,mBAAmB,EAAED,KAAK,CAACI,cAAc,IAAIF,cAAc,CAACN,MAAM,EAAEI,KAAK,CAACP,QAAQ,CAACU,SAAS,CAAC;EACzI;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/OverlayDrawer/index.js

@@ -0,0 +1,5 @@
+export * from './OverlayDrawer';
+export * from './OverlayDrawer.types';
+export * from './renderOverlayDrawer';
+export * from './useOverlayDrawer';
+export * from './useOverlayDrawerStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './OverlayDrawer';\nexport * from './OverlayDrawer.types';\nexport * from './renderOverlayDrawer';\nexport * from './useOverlayDrawer';\nexport * from './useOverlayDrawerStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}

package/lib/components/{DrawerOverlay/renderDrawerOverlay.js → OverlayDrawer/renderOverlayDrawer.js}

@@ -1,8 +1,8 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
- * Render the final JSX of DrawerOverlay
- */ export const renderDrawerOverlay_unstable = (state)=>{
+ * Render the final JSX of OverlayDrawer
+ */ export const renderOverlayDrawer_unstable = (state)=>{
     if (!state.motion.canRender) {
         return null;
     }

package/lib/components/{DrawerOverlay/renderDrawerOverlay.js.map → OverlayDrawer/renderOverlayDrawer.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { DrawerOverlayState, DrawerOverlayInternalSlots } from './DrawerOverlay.types';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<DrawerOverlayInternalSlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderDrawerOverlay_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAAwCE;IAExC,qBACE,KAACA,MAAMG,MAAM;kBACX,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderOverlayDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport type { OverlayDrawerState, OverlayDrawerInternalSlots } from './OverlayDrawer.types';\n\n/**\n * Render the final JSX of OverlayDrawer\n */\nexport const renderOverlayDrawer_unstable = (state: OverlayDrawerState) => {\n  if (!state.motion.canRender) {\n    return null;\n  }\n\n  assertSlots<OverlayDrawerInternalSlots>(state);\n\n  return (\n    <state.dialog>\n      <state.root />\n    </state.dialog>\n  );\n};\n"],"names":["assertSlots","renderOverlayDrawer_unstable","state","motion","canRender","dialog","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,IAAI,CAACA,MAAMC,MAAM,CAACC,SAAS,EAAE;QAC3B,OAAO;IACT;IAEAJ,YAAwCE;IAExC,qBACE,KAACA,MAAMG,MAAM;kBACX,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/{DrawerOverlay/useDrawerOverlay.js → OverlayDrawer/useOverlayDrawer.js}

@@ -3,33 +3,30 @@ import { slot, useMergedRefs } from '@fluentui/react-utilities';
 import { Dialog } from '@fluentui/react-dialog';
 import { useMotion } from '@fluentui/react-motion-preview';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
-import { DrawerOverlaySurface } from './DrawerOverlaySurface';
+import { OverlayDrawerSurface } from './OverlayDrawerSurface';
 /**
- * Create the state required to render DrawerOverlay.
+ * Create the state required to render OverlayDrawer.
  *
- * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,
- * before being passed to renderDrawerOverlay_unstable.
+ * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,
+ * before being passed to renderOverlayDrawer_unstable.
  *
- * @param props - props from this instance of DrawerOverlay
- * @param ref - reference to root HTMLDivElement of DrawerOverlay
- */ export const useDrawerOverlay_unstable = (props, ref)=>{
+ * @param props - props from this instance of OverlayDrawer
+ * @param ref - reference to root HTMLDivElement of OverlayDrawer
+ */ export const useOverlayDrawer_unstable = (props, ref)=>{
     const { open, size, position } = useDrawerDefaultProps(props);
     const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;
-    const drawerMotion = useMotion(open);
-    const backdropMotion = useMotion(open);
-    const backdropInnerProps = slot.resolveShorthand(props.backdrop);
-    const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null;
-    const backdropProps = {
-        ...backdropInnerProps,
-        ref: useMergedRefs(backdropMotion.ref, backdropInnerProps === null || backdropInnerProps === void 0 ? void 0 : backdropInnerProps.ref)
-    };
+    const motion = useMotion(open);
+    const backdropProps = slot.resolveShorthand(props.backdrop);
+    const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
     const root = slot.always({
         ...props,
-        backdrop: hasCustomBackdrop ? backdropProps : null
+        backdrop: hasCustomBackdrop ? {
+            ...backdropProps
+        } : null
     }, {
-        elementType: DrawerOverlaySurface,
+        elementType: OverlayDrawerSurface,
         defaultProps: {
-            ref: useMergedRefs(ref, drawerMotion.ref)
+            ref: useMergedRefs(ref, motion.ref)
         }
     });
     const dialog = slot.always({
@@ -38,7 +35,7 @@ import { DrawerOverlaySurface } from './DrawerOverlaySurface';
         onOpenChange,
         inertTrapFocus,
         modalType,
-        /*
+        /**
        * children is not needed here because we construct the children in the render function,
        * but it's required by DialogProps
        */ children: null
@@ -47,14 +44,13 @@ import { DrawerOverlaySurface } from './DrawerOverlaySurface';
     });
     return {
         components: {
-            root: DrawerOverlaySurface,
+            root: OverlayDrawerSurface,
             dialog: Dialog
         },
         root,
         dialog,
         size,
         position,
-        motion: drawerMotion,
-        backdropMotion
+        motion
     };
 };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverlayDrawer.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Dialog } from '@fluentui/react-dialog';\nimport { useMotion } from '@fluentui/react-motion-preview';\n\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { OverlayDrawerProps, OverlayDrawerState } from './OverlayDrawer.types';\nimport { OverlayDrawerSurface } from './OverlayDrawerSurface';\n\n/**\n * Create the state required to render OverlayDrawer.\n *\n * The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,\n * before being passed to renderOverlayDrawer_unstable.\n *\n * @param props - props from this instance of OverlayDrawer\n * @param ref - reference to root HTMLDivElement of OverlayDrawer\n */\nexport const useOverlayDrawer_unstable = (\n  props: OverlayDrawerProps,\n  ref: React.Ref<HTMLDivElement>,\n): OverlayDrawerState => {\n  const { open, size, position } = useDrawerDefaultProps(props);\n  const { modalType = 'modal', inertTrapFocus, defaultOpen = false, onOpenChange } = props;\n\n  const motion = useMotion<HTMLDivElement>(open);\n\n  const backdropProps = slot.resolveShorthand(props.backdrop);\n  const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;\n\n  const root = slot.always(\n    {\n      ...props,\n      backdrop: hasCustomBackdrop ? { ...backdropProps } : null,\n    },\n    {\n      elementType: OverlayDrawerSurface,\n      defaultProps: {\n        ref: useMergedRefs(ref, motion.ref),\n      },\n    },\n  );\n\n  const dialog = slot.always(\n    {\n      open: true,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n      /**\n       * children is not needed here because we construct the children in the render function,\n       * but it's required by DialogProps\n       */\n      children: null as unknown as JSX.Element,\n    },\n    {\n      elementType: Dialog,\n    },\n  );\n\n  return {\n    components: {\n      root: OverlayDrawerSurface,\n      dialog: Dialog,\n    },\n\n    root,\n    dialog,\n\n    size,\n    position,\n    motion,\n  };\n};\n"],"names":["React","slot","useMergedRefs","Dialog","useMotion","useDrawerDefaultProps","OverlayDrawerSurface","useOverlayDrawer_unstable","props","ref","open","size","position","modalType","inertTrapFocus","defaultOpen","onOpenChange","motion","backdropProps","resolveShorthand","backdrop","hasCustomBackdrop","root","always","elementType","defaultProps","dialog","children","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAChE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,SAAS,QAAQ,iCAAiC;AAE3D,SAASC,qBAAqB,QAAQ,qCAAqC;AAE3E,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGP,sBAAsBG;IACvD,MAAM,EAAEK,YAAY,OAAO,EAAEC,cAAc,EAAEC,cAAc,KAAK,EAAEC,YAAY,EAAE,GAAGR;IAEnF,MAAMS,SAASb,UAA0BM;IAEzC,MAAMQ,gBAAgBjB,KAAKkB,gBAAgB,CAACX,MAAMY,QAAQ;IAC1D,MAAMC,oBAAoBR,cAAc,eAAeK,kBAAkB;IAEzE,MAAMI,OAAOrB,KAAKsB,MAAM,CACtB;QACE,GAAGf,KAAK;QACRY,UAAUC,oBAAoB;YAAE,GAAGH,aAAa;QAAC,IAAI;IACvD,GACA;QACEM,aAAalB;QACbmB,cAAc;YACZhB,KAAKP,cAAcO,KAAKQ,OAAOR,GAAG;QACpC;IACF;IAGF,MAAMiB,SAASzB,KAAKsB,MAAM,CACxB;QACEb,MAAM;QACNK;QACAC;QACAF;QACAD;QACA;;;OAGC,GACDc,UAAU;IACZ,GACA;QACEH,aAAarB;IACf;IAGF,OAAO;QACLyB,YAAY;YACVN,MAAMhB;YACNoB,QAAQvB;QACV;QAEAmB;QACAI;QAEAf;QACAC;QACAK;IACF;AACF,EAAE"}

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';
+import { useMotionClassNames } from '@fluentui/react-motion-preview';
+export const overlayDrawerClassNames = {
+  root: 'fui-OverlayDrawer',
+  backdrop: 'fui-OverlayDrawer__backdrop'
+};
+/**
+ * Styles for the root slot
+ */
+const useDrawerResetStyles = /*#__PURE__*/__resetStyles("rx0pfxe", "r1hp8xng", [".rx0pfxe{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}", ".rx0pfxe:focus{outline-style:none;}", ".rx0pfxe:focus-visible{outline-style:none;}", ".rx0pfxe[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rx0pfxe[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1hp8xng{overflow-x:hidden;overflow-y:hidden;width:var(--fui-Drawer--size);max-width:100vw;height:auto;max-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);position:fixed;top:0;bottom:0;}", ".r1hp8xng:focus{outline-style:none;}", ".r1hp8xng:focus-visible{outline-style:none;}", ".r1hp8xng[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1hp8xng[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"]);
+const useDrawerRootStyles = /*#__PURE__*/__styles({
+  start: {
+    Bz10aip: "f1d8gkik"
+  },
+  end: {
+    Bz10aip: "f1g0pcr8"
+  }
+}, {
+  d: [".f1d8gkik{transform:translate3D(calc(var(--fui-Drawer--size) * -1), 0, 0);}", ".f1g0pcr8{transform:translate3D(calc(var(--fui-Drawer--size) * 1), 0, 0);}"]
+});
+const useDrawerMotionStyles = /*#__PURE__*/__styles({
+  "default": {
+    abs64n: "fk73vx1",
+    E5pizo: "ff88big",
+    Bmy1vo4: "f1neo61",
+    Es3by: "f1ytgekk"
+  },
+  enter: {
+    abs64n: "f5p0z4x",
+    Bz10aip: "f87uvqx",
+    E5pizo: "f10nrhrw"
+  }
+}, {
+  d: [".fk73vx1{opacity:0;}", ".ff88big{box-shadow:0px var(--colorTransparentBackground);}", ".f1neo61{transition-property:transform,box-shadow,opacity;}", ".f1ytgekk{will-change:transform,box-shadow,opacity;}", ".f5p0z4x{opacity:1;}", ".f87uvqx{transform:translate3D(0, 0, 0);}", ".f10nrhrw{box-shadow:var(--shadow64);}"]
+});
+/**
+ * Styles for the backdrop slot
+ */
+const useBackdropMotionStyles = /*#__PURE__*/__styles({
+  "default": {
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    Bkqvd7p: "f17wnm97",
+    Es3by: "f1gqqdtu"
+  },
+  enter: {
+    abs64n: "f5p0z4x"
+  }
+}, {
+  d: [".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".f1gqqdtu{will-change:opacity;}", ".f5p0z4x{opacity:1;}"]
+});
+/**
+ * Apply styling to the OverlayDrawer slots based on the state
+ */
+export const useOverlayDrawerStyles_unstable = state => {
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const resetStyles = useDrawerResetStyles();
+  const rootStyles = useDrawerRootStyles();
+  const durationStyles = useDrawerDurationStyles();
+  const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());
+  const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());
+  const backdrop = state.root.backdrop;
+  state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useOverlayDrawerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","drawerCSSVars","drawerDefaultStyles","useDrawerBaseClassNames","useDrawerDurationStyles","useMotionClassNames","overlayDrawerClassNames","root","backdrop","useDrawerResetStyles","useDrawerRootStyles","start","Bz10aip","end","d","useDrawerMotionStyles","abs64n","E5pizo","Bmy1vo4","Es3by","enter","useBackdropMotionStyles","Bkqvd7p","useOverlayDrawerStyles_unstable","state","baseClassNames","resetStyles","rootStyles","durationStyles","drawerMotionClassNames","motion","backdropMotionClassNames","className","position","size"],"sources":["useOverlayDrawerStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames, useDrawerDurationStyles } from '../../shared/useDrawerBaseStyles.styles';\nimport { useMotionClassNames } from '@fluentui/react-motion-preview';\nexport const overlayDrawerClassNames = {\n    root: 'fui-OverlayDrawer',\n    backdrop: 'fui-OverlayDrawer__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useDrawerResetStyles = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    ...drawerDefaultStyles,\n    position: 'fixed',\n    top: 0,\n    bottom: 0\n});\nconst useDrawerRootStyles = makeStyles({\n    /* Positioning */ start: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`\n    },\n    end: {\n        transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * 1), 0, 0)`\n    }\n});\nconst useDrawerMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        boxShadow: `0px ${tokens.colorTransparentBackground}`,\n        transitionProperty: 'transform, box-shadow, opacity',\n        willChange: 'transform, box-shadow, opacity'\n    },\n    enter: {\n        opacity: 1,\n        transform: 'translate3D(0, 0, 0)',\n        boxShadow: tokens.shadow64\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropMotionStyles = makeStyles({\n    default: {\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionTimingFunction: tokens.curveEasyEase,\n        willChange: 'opacity'\n    },\n    enter: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the OverlayDrawer slots based on the state\n */ export const useOverlayDrawerStyles_unstable = (state)=>{\n    const baseClassNames = useDrawerBaseClassNames(state);\n    const resetStyles = useDrawerResetStyles();\n    const rootStyles = useDrawerRootStyles();\n    const durationStyles = useDrawerDurationStyles();\n    const drawerMotionClassNames = useMotionClassNames(state.motion, useDrawerMotionStyles());\n    const backdropMotionClassNames = useMotionClassNames(state.motion, useBackdropMotionStyles());\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(overlayDrawerClassNames.root, baseClassNames, resetStyles, rootStyles[state.position], drawerMotionClassNames, state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(overlayDrawerClassNames.backdrop, backdropMotionClassNames, durationStyles[state.size], backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,aAAa,EAAEC,mBAAmB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,yCAAyC;AAC9I,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,mqFAMhC,CAAC;AACF,MAAMc,mBAAmB,gBAAGb,QAAA;EAAAc,KAAA;IAAAC,OAAA;EAAA;EAAAC,GAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAO3B,CAAC;AACF,MAAMC,qBAAqB,gBAAGlB,QAAA;EAAA;IAAAmB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;IAAAJ,OAAA;IAAAK,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY7B,CAAC;AACF;AACA;AACA;AAAI,MAAMO,uBAAuB,gBAAGxB,QAAA;EAAA;IAAAmB,MAAA;IAAAE,OAAA;IAAAI,OAAA;IAAAH,KAAA;EAAA;EAAAC,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAUnC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMS,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,cAAc,GAAGtB,uBAAuB,CAACqB,KAAK,CAAC;EACrD,MAAME,WAAW,GAAGjB,oBAAoB,CAAC,CAAC;EAC1C,MAAMkB,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,cAAc,GAAGxB,uBAAuB,CAAC,CAAC;EAChD,MAAMyB,sBAAsB,GAAGxB,mBAAmB,CAACmB,KAAK,CAACM,MAAM,EAAEf,qBAAqB,CAAC,CAAC,CAAC;EACzF,MAAMgB,wBAAwB,GAAG1B,mBAAmB,CAACmB,KAAK,CAACM,MAAM,EAAET,uBAAuB,CAAC,CAAC,CAAC;EAC7F,MAAMb,QAAQ,GAAGgB,KAAK,CAACjB,IAAI,CAACC,QAAQ;EACpCgB,KAAK,CAACjB,IAAI,CAACyB,SAAS,GAAGlC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEkB,cAAc,EAAEC,WAAW,EAAEC,UAAU,CAACH,KAAK,CAACS,QAAQ,CAAC,EAAEJ,sBAAsB,EAAEL,KAAK,CAACjB,IAAI,CAACyB,SAAS,CAAC;EACxK,IAAIxB,QAAQ,EAAE;IACVA,QAAQ,CAACwB,SAAS,GAAGlC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEuB,wBAAwB,EAAEH,cAAc,CAACJ,KAAK,CAACU,IAAI,CAAC,EAAE1B,QAAQ,CAACwB,SAAS,CAAC;EACjJ;EACA,OAAOR,KAAK;AAChB,CAAC"}

package/lib/index.js

@@ -1,6 +1,6 @@
 export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';
-export { DrawerOverlay, drawerOverlayClassNames, renderDrawerOverlay_unstable, useDrawerOverlayStyles_unstable, useDrawerOverlay_unstable } from './DrawerOverlay';
-export { DrawerInline, drawerInlineClassNames, renderDrawerInline_unstable, useDrawerInlineStyles_unstable, useDrawerInline_unstable } from './DrawerInline';
+export { OverlayDrawer, overlayDrawerClassNames, renderOverlayDrawer_unstable, useOverlayDrawerStyles_unstable, useOverlayDrawer_unstable } from './OverlayDrawer';
+export { InlineDrawer, inlineDrawerClassNames, renderInlineDrawer_unstable, useInlineDrawerStyles_unstable, useInlineDrawer_unstable } from './InlineDrawer';
 export { DrawerBody, drawerBodyClassNames, renderDrawerBody_unstable, useDrawerBodyStyles_unstable, useDrawerBody_unstable } from './DrawerBody';
 export { DrawerHeader, drawerHeaderClassNames, renderDrawerHeader_unstable, useDrawerHeaderStyles_unstable, useDrawerHeader_unstable } from './DrawerHeader';
 export { DrawerHeaderTitle, drawerHeaderTitleClassNames, renderDrawerHeaderTitle_unstable, useDrawerHeaderTitleStyles_unstable, useDrawerHeaderTitle_unstable } from './DrawerHeaderTitle';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n  DrawerOverlay,\n  drawerOverlayClassNames,\n  renderDrawerOverlay_unstable,\n  useDrawerOverlayStyles_unstable,\n  useDrawerOverlay_unstable,\n} from './DrawerOverlay';\nexport type { DrawerOverlayProps, DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay';\n\nexport {\n  DrawerInline,\n  drawerInlineClassNames,\n  renderDrawerInline_unstable,\n  useDrawerInlineStyles_unstable,\n  useDrawerInline_unstable,\n} from './DrawerInline';\nexport type { DrawerInlineProps, DrawerInlineSlots, DrawerInlineState } from './DrawerInline';\n\nexport {\n  DrawerBody,\n  drawerBodyClassNames,\n  renderDrawerBody_unstable,\n  useDrawerBodyStyles_unstable,\n  useDrawerBody_unstable,\n} from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';\n\nexport {\n  DrawerHeader,\n  drawerHeaderClassNames,\n  renderDrawerHeader_unstable,\n  useDrawerHeaderStyles_unstable,\n  useDrawerHeader_unstable,\n} from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader';\n\nexport {\n  DrawerHeaderTitle,\n  drawerHeaderTitleClassNames,\n  renderDrawerHeaderTitle_unstable,\n  useDrawerHeaderTitleStyles_unstable,\n  useDrawerHeaderTitle_unstable,\n} from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle';\n\nexport {\n  DrawerHeaderNavigation,\n  drawerHeaderNavigationClassNames,\n  renderDrawerHeaderNavigation_unstable,\n  useDrawerHeaderNavigationStyles_unstable,\n  useDrawerHeaderNavigation_unstable,\n} from './DrawerHeaderNavigation';\nexport type {\n  DrawerHeaderNavigationProps,\n  DrawerHeaderNavigationSlots,\n  DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation';\n\nexport {\n  DrawerFooter,\n  drawerFooterClassNames,\n  renderDrawerFooter_unstable,\n  useDrawerFooterStyles_unstable,\n  useDrawerFooter_unstable,\n} from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';\n"],"names":["Drawer","renderDrawer_unstable","useDrawer_unstable","DrawerOverlay","drawerOverlayClassNames","renderDrawerOverlay_unstable","useDrawerOverlayStyles_unstable","useDrawerOverlay_unstable","DrawerInline","drawerInlineClassNames","renderDrawerInline_unstable","useDrawerInlineStyles_unstable","useDrawerInline_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,WAAW;AAG7E,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAGzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAOlC,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Drawer, renderDrawer_unstable, useDrawer_unstable } from './Drawer';\nexport type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';\n\nexport {\n  OverlayDrawer,\n  overlayDrawerClassNames,\n  renderOverlayDrawer_unstable,\n  useOverlayDrawerStyles_unstable,\n  useOverlayDrawer_unstable,\n} from './OverlayDrawer';\nexport type { OverlayDrawerProps, OverlayDrawerSlots, OverlayDrawerState } from './OverlayDrawer';\n\nexport {\n  InlineDrawer,\n  inlineDrawerClassNames,\n  renderInlineDrawer_unstable,\n  useInlineDrawerStyles_unstable,\n  useInlineDrawer_unstable,\n} from './InlineDrawer';\nexport type { InlineDrawerProps, InlineDrawerSlots, InlineDrawerState } from './InlineDrawer';\n\nexport {\n  DrawerBody,\n  drawerBodyClassNames,\n  renderDrawerBody_unstable,\n  useDrawerBodyStyles_unstable,\n  useDrawerBody_unstable,\n} from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';\n\nexport {\n  DrawerHeader,\n  drawerHeaderClassNames,\n  renderDrawerHeader_unstable,\n  useDrawerHeaderStyles_unstable,\n  useDrawerHeader_unstable,\n} from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader';\n\nexport {\n  DrawerHeaderTitle,\n  drawerHeaderTitleClassNames,\n  renderDrawerHeaderTitle_unstable,\n  useDrawerHeaderTitleStyles_unstable,\n  useDrawerHeaderTitle_unstable,\n} from './DrawerHeaderTitle';\nexport type { DrawerHeaderTitleProps, DrawerHeaderTitleSlots, DrawerHeaderTitleState } from './DrawerHeaderTitle';\n\nexport {\n  DrawerHeaderNavigation,\n  drawerHeaderNavigationClassNames,\n  renderDrawerHeaderNavigation_unstable,\n  useDrawerHeaderNavigationStyles_unstable,\n  useDrawerHeaderNavigation_unstable,\n} from './DrawerHeaderNavigation';\nexport type {\n  DrawerHeaderNavigationProps,\n  DrawerHeaderNavigationSlots,\n  DrawerHeaderNavigationState,\n} from './DrawerHeaderNavigation';\n\nexport {\n  DrawerFooter,\n  drawerFooterClassNames,\n  renderDrawerFooter_unstable,\n  useDrawerFooterStyles_unstable,\n  useDrawerFooter_unstable,\n} from './DrawerFooter';\nexport type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';\n"],"names":["Drawer","renderDrawer_unstable","useDrawer_unstable","OverlayDrawer","overlayDrawerClassNames","renderOverlayDrawer_unstable","useOverlayDrawerStyles_unstable","useOverlayDrawer_unstable","InlineDrawer","inlineDrawerClassNames","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","useInlineDrawer_unstable","DrawerBody","drawerBodyClassNames","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","useDrawerBody_unstable","DrawerHeader","drawerHeaderClassNames","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","useDrawerHeader_unstable","DrawerHeaderTitle","drawerHeaderTitleClassNames","renderDrawerHeaderTitle_unstable","useDrawerHeaderTitleStyles_unstable","useDrawerHeaderTitle_unstable","DrawerHeaderNavigation","drawerHeaderNavigationClassNames","renderDrawerHeaderNavigation_unstable","useDrawerHeaderNavigationStyles_unstable","useDrawerHeaderNavigation_unstable","DrawerFooter","drawerFooterClassNames","renderDrawerFooter_unstable","useDrawerFooterStyles_unstable","useDrawerFooter_unstable"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,WAAW;AAG7E,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAGzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,sBAAsB,EACtBC,gCAAgC,EAChCC,qCAAqC,EACrCC,wCAAwC,EACxCC,kCAAkC,QAC7B,2BAA2B;AAOlC,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}

package/lib/shared/useDrawerBaseStyles.styles.js

@@ -37,10 +37,16 @@ const useDrawerStyles = /*#__PURE__*/__styles({
     Hwfdqs: "f5e8c63"
   },
   start: {
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    vrafjx: ["fcdblym", "fjik90z"],
+    h3c5rm: ["f1gn591s", "fjscplz"],
     oyh7mz: ["f1vgc2s3", "f1e31b4d"],
     j35jbq: ["fvfyk4", "frppm18"]
   },
   end: {
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    wvpqe5: ["fjik90z", "fcdblym"],
+    zhjwy3: ["fjscplz", "f1gn591s"],
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     oyh7mz: ["frppm18", "fvfyk4"]
   },
@@ -57,7 +63,7 @@ const useDrawerStyles = /*#__PURE__*/__styles({
     Bjr0ffy: "fsdmzs6"
   }
 }, {
-  d: [".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"],
+  d: [".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.f5e8c63{transition-duration:0.001ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }]]

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","oyh7mz","j35jbq","end","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    ...shorthands.overflow('hidden'),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnC,iBAAGJ,UAAU,CAACK,QAAQ,CAAC,QAAQ,CAAC;EAChCC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAgC3B,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAGtC,QAAA;EAAA+B,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAGvB,eAAe,CAAC,CAAC;EACpC,MAAMwB,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAOrC,YAAY,CAAC2C,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACnB,aAAa,EAAEkB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAACtB,QAAQ,EAAEqB,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAACpB,OAAO,CAAC;AACnN,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","entering","Bkqvd7p","exiting","reducedMotion","Hwfdqs","start","Bekrc4i","vrafjx","h3c5rm","oyh7mz","j35jbq","end","ibv6hh","wvpqe5","zhjwy3","small","Bjr0ffy","medium","large","full","d","m","useDrawerDurationStyles","B3o57yi","useDrawerBaseClassNames","position","size","motion","baseStyles","durationStyles","type"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    ...shorthands.overflow('hidden'),\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Motion */ entering: {\n        transitionTimingFunction: tokens.curveDecelerateMid\n    },\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    reducedMotion: {\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.001ms'\n        }\n    },\n    /* Positioning */ start: {\n        ...shorthands.borderRight(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerDurationStyles = makeStyles({\n    small: {\n        transitionDuration: tokens.durationGentle\n    },\n    medium: {\n        transitionDuration: tokens.durationSlow\n    },\n    large: {\n        transitionDuration: tokens.durationSlower\n    },\n    full: {\n        transitionDuration: tokens.durationUltraSlow\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size, motion })=>{\n    const baseStyles = useDrawerStyles();\n    const durationStyles = useDrawerDurationStyles();\n    return mergeClasses(baseStyles[position], durationStyles[size], baseStyles[size], baseStyles.reducedMotion, motion.type === 'entering' && baseStyles.entering, motion.type === 'exiting' && baseStyles.exiting);\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnC,iBAAGJ,UAAU,CAACK,QAAQ,CAAC,QAAQ,CAAC;EAChCC,KAAK,EAAG,OAAMJ,aAAa,CAACC,aAAc,GAAE;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGrB,QAAA;EAAAsB,QAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAD,OAAA;EAAA;EAAAE,aAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAJ,MAAA;IAAAD,MAAA;EAAA;EAAAM,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAkC3B,CAAC;AACF,OAAO,MAAMC,uBAAuB,gBAAG5C,QAAA;EAAAqC,KAAA;IAAAQ,OAAA;EAAA;EAAAN,MAAA;IAAAM,OAAA;EAAA;EAAAL,KAAA;IAAAK,OAAA;EAAA;EAAAJ,IAAA;IAAAI,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAatC,CAAC;AACF,OAAO,MAAMI,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAO,CAAC,KAAG;EACjE,MAAMC,UAAU,GAAG7B,eAAe,CAAC,CAAC;EACpC,MAAM8B,cAAc,GAAGP,uBAAuB,CAAC,CAAC;EAChD,OAAO3C,YAAY,CAACiD,UAAU,CAACH,QAAQ,CAAC,EAAEI,cAAc,CAACH,IAAI,CAAC,EAAEE,UAAU,CAACF,IAAI,CAAC,EAAEE,UAAU,CAACzB,aAAa,EAAEwB,MAAM,CAACG,IAAI,KAAK,UAAU,IAAIF,UAAU,CAAC5B,QAAQ,EAAE2B,MAAM,CAACG,IAAI,KAAK,SAAS,IAAIF,UAAU,CAAC1B,OAAO,CAAC;AACnN,CAAC"}

package/lib-commonjs/{DrawerInline.js → InlineDrawer.js}

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./components/DrawerInline/index"), exports);
+_export_star._(require("./components/InlineDrawer/index"), exports);

package/lib-commonjs/InlineDrawer.js.map

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

package/lib-commonjs/{DrawerOverlay.js → OverlayDrawer.js}

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./components/DrawerOverlay/index"), exports);
+_export_star._(require("./components/OverlayDrawer/index"), exports);

package/lib-commonjs/OverlayDrawer.js.map

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

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

@@ -11,10 +11,10 @@ Object.defineProperty(exports, "useDrawer_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const _DrawerOverlay = require("../DrawerOverlay");
-const _DrawerInline = require("../DrawerInline");
+const _OverlayDrawer = require("../OverlayDrawer");
+const _InlineDrawer = require("../InlineDrawer");
 const useDrawer_unstable = (props, ref)=>{
-    const elementType = props.type === 'inline' ? _DrawerInline.DrawerInline : _DrawerOverlay.DrawerOverlay;
+    const elementType = props.type === 'inline' ? _InlineDrawer.InlineDrawer : _OverlayDrawer.OverlayDrawer;
     return {
         components: {
             root: elementType

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

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

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

@@ -22,9 +22,9 @@ const drawerFooterClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rli1cm2", "r1xlf3nx", [
-    ".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}",
-    ".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}"
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1nwgn83", "r4bpumq", [
+    ".r1nwgn83{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}",
+    ".r4bpumq{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}"
 ]);
 const useDrawerFooterStyles_unstable = (state)=>{
     const styles = useStyles();

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n  root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"rli1cm2\", \"r1xlf3nx\", [\".rli1cm2{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}\", \".r1xlf3nx{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);}\"]);\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ2C;AAEjD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAA8Q;CAA8Q;AAI1lB,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useDrawerFooterStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerFooterClassNames = {\n  root: 'fui-DrawerFooter'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r1nwgn83\", \"r4bpumq\", [\".r1nwgn83{padding-top:var(--spacingVerticalL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}\", \".r4bpumq{padding-top:var(--spacingVerticalL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);width:100%;max-width:100%;display:flex;justify-content:flex-start;align-items:center;column-gap:var(--spacingHorizontalS);box-sizing:border-box;}\"]);\n/**\n * Apply styling to the DrawerFooter slots based on the state\n */\nexport const useDrawerFooterStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerFooterClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerFooterStyles.styles.js.map"],"names":["drawerFooterClassNames","useDrawerFooterStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ2C;AAEjD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAA+T;CAA6T;AAI1rB,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}

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

@@ -22,9 +22,9 @@ const drawerHeaderClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r10tpwon", "r53n3g6", [
-    ".r10tpwon{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}",
-    ".r53n3g6{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}"
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rh4hr5f", "r116c7xc", [
+    ".rh4hr5f{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}",
+    ".r116c7xc{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}"
 ]);
 const useDrawerHeaderStyles_unstable = (state)=>{
     const styles = useStyles();

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n  root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"r10tpwon\", \"r53n3g6\", [\".r10tpwon{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}\", \".r53n3g6{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;}\"]);\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ2C;AAEjD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAA4S;CAA0S;AAIppB,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}
+{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerHeaderClassNames = {\n  root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"rh4hr5f\", \"r116c7xc\", [\".rh4hr5f{padding-top:var(--spacingVerticalXXL);padding-right:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-left:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}\", \".r116c7xc{padding-top:var(--spacingVerticalXXL);padding-left:var(--spacingHorizontalXXL);padding-bottom:var(--spacingVerticalS);padding-right:var(--spacingHorizontalXXL);column-gap:var(--spacingHorizontalS);row-gap:var(--spacingHorizontalS);width:100%;max-width:100%;align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;}\"]);\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerHeaderStyles.styles.js.map"],"names":["drawerHeaderClassNames","useDrawerHeaderStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAUAC,8BAA8B;eAA9BA;;;uBAZ2C;AAEjD,MAAMD,yBAAyB;IACpCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAA2V;CAA2V;AAIpvB,MAAMH,iCAAiCI,CAAAA;IAC5C,MAAMC,SAASH;IACfE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,uBAAuBE,IAAI,EAAEI,QAAQD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,wDAAwD"}

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "InlineDrawer", {
+    enumerable: true,
+    get: function() {
+        return InlineDrawer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useInlineDrawer = require("./useInlineDrawer");
+const _renderInlineDrawer = require("./renderInlineDrawer");
+const _useInlineDrawerStylesstyles = require("./useInlineDrawerStyles.styles");
+const InlineDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useInlineDrawer.useInlineDrawer_unstable)(props, ref);
+    (0, _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerInlineStyles_unstable')(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useInlineDrawerStyles_unstable')(state);
+    return (0, _renderInlineDrawer.renderInlineDrawer_unstable)(state);
+});
+InlineDrawer.displayName = 'InlineDrawer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InlineDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n/**\n * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\n * the main surface, users can still interact with other UI elements.\n */ export const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useInlineDrawer_unstable(props, ref);\n    useInlineDrawerStyles_unstable(state);\n    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n    useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n    return renderInlineDrawer_unstable(state);\n});\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["InlineDrawer","React","forwardRef","props","ref","state","useInlineDrawer_unstable","useInlineDrawerStyles_unstable","useCustomStyleHook_unstable","renderInlineDrawer_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;qCACqB;iCACH;oCACG;6CACG;AAIpC,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAMC,QAAQC,IAAAA,yCAAwB,EAACH,OAAOC;IAC9CG,IAAAA,2DAA8B,EAACF;IAC/BG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9DG,IAAAA,gDAA2B,EAAC,kCAAkCH;IAC9D,OAAOI,IAAAA,+CAA2B,EAACJ;AACvC;AACAL,aAAaU,WAAW,GAAG"}

package/lib-commonjs/components/InlineDrawer/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./InlineDrawer"), exports);
+_export_star._(require("./InlineDrawer.types"), exports);
+_export_star._(require("./renderInlineDrawer"), exports);
+_export_star._(require("./useInlineDrawer"), exports);
+_export_star._(require("./useInlineDrawerStyles.styles"), exports);

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

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