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

package/lib/components/DrawerHeaderTitle/renderDrawerHeaderTitle.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of DrawerHeaderTitle
  */ export const renderDrawerHeaderTitle_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root, slots.heading && /*#__PURE__*/ React.createElement(slots.heading, slotProps.heading), slots.action && /*#__PURE__*/ React.createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.heading && /*#__PURE__*/ createElement(state.heading, null), state.action && /*#__PURE__*/ createElement(state.action, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  const { slots, slotProps } = getSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.heading && <slots.heading {...slotProps.heading} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["React","getSlots","renderDrawerHeaderTitle_unstable","state","slots","slotProps","root","heading","action"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAAiCE;IAE9D,qBACE,oBAACC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,OAAO,kBAAI,oBAACH,MAAMG,OAAO,EAAKF,UAAUE,OAAO,GACrDH,MAAMI,MAAM,kBAAI,oBAACJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderDrawerHeaderTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types';\n\n/**\n * Render the final JSX of DrawerHeaderTitle\n */\nexport const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => {\n  assertSlots<DrawerHeaderTitleSlots>(state);\n\n  return (\n    <state.root>\n      {state.heading && <state.heading />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderDrawerHeaderTitle_unstable","state","root","heading","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjFF,YAAoCE;IAEpC,qBACE,AAbJ,cAaKA,MAAMC,IAAI,QACRD,MAAME,OAAO,kBAAI,AAdxB,cAcyBF,MAAME,OAAO,SAC/BF,MAAMG,MAAM,kBAAI,AAfvB,cAewBH,MAAMG,MAAM;AAGpC,EAAE"}

package/lib/components/DrawerHeaderTitle/useDrawerHeaderTitle.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useDialogTitle_unstable } from '@fluentui/react-dialog';
 /**
  * Create the state required to render DrawerHeaderTitle.
@@ -17,19 +17,23 @@ import { useDialogTitle_unstable } from '@fluentui/react-dialog';
             heading: titleComponents.root,
             action: titleComponents.action
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        heading: resolveShorthand(props.heading, {
-            required: true,
+        heading: slot.optional(props.heading, {
+            renderByDefault: true,
             defaultProps: {
                 ...heading,
                 className: undefined
-            }
+            },
+            elementType: titleComponents.root
         }),
-        action: resolveShorthand(props.action, {
-            defaultProps: action
+        action: slot.optional(props.action, {
+            defaultProps: action,
+            elementType: titleComponents.action
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { root: heading, action, components: titleComponents } = useDialogTitle_unstable(props, ref);\n\n  return {\n    components: {\n      root: 'div',\n      heading: titleComponents.root,\n      action: titleComponents.action,\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    heading: resolveShorthand(props.heading, {\n      required: true,\n      defaultProps: {\n        ...heading,\n        className: undefined, // remove className from heading\n      },\n    }),\n    action: resolveShorthand(props.action, {\n      defaultProps: action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","required","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAM,EAAEC,MAAMC,QAAO,EAAEC,OAAM,EAAEC,YAAYC,gBAAe,EAAE,GAAGR,wBAAwBE,OAAOC;IAE9F,OAAO;QACLI,YAAY;YACVH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAChC;QAEAF,MAAMN,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAG,SAASN,iBAAiBG,MAAMG,OAAO,EAAE;YACvCI,UAAU,IAAI;YACdC,cAAc;gBACZ,GAAGL,OAAO;gBACVM,WAAWC;YACb;QACF;QACAN,QAAQP,iBAAiBG,MAAMI,MAAM,EAAE;YACrCI,cAAcJ;QAChB;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerHeaderTitle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';\nimport { useDialogTitle_unstable } from '@fluentui/react-dialog';\n\n/**\n * Create the state required to render DrawerHeaderTitle.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderTitleStyles_unstable,\n * before being passed to renderDrawerHeaderTitle_unstable.\n *\n * @param props - props from this instance of DrawerHeaderTitle\n * @param ref - reference to root HTMLElement of DrawerHeaderTitle\n */\nexport const useDrawerHeaderTitle_unstable = (\n  props: DrawerHeaderTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): DrawerHeaderTitleState => {\n  const { root: heading, action, components: titleComponents } = useDialogTitle_unstable(props, ref);\n\n  return {\n    components: {\n      root: 'div',\n      heading: titleComponents.root,\n      action: titleComponents.action,\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    heading: slot.optional(props.heading, {\n      renderByDefault: true,\n      defaultProps: {\n        ...heading,\n        className: undefined, // remove className from heading\n      },\n      elementType: titleComponents.root,\n    }),\n    action: slot.optional(props.action, {\n      defaultProps: action,\n      elementType: titleComponents.action,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useDialogTitle_unstable","useDrawerHeaderTitle_unstable","props","ref","root","heading","action","components","titleComponents","always","elementType","optional","renderByDefault","defaultProps","className","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,uBAAuB,QAAQ,yBAAyB;AAEjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAM,EAAEC,MAAMC,QAAO,EAAEC,OAAM,EAAEC,YAAYC,gBAAe,EAAE,GAAGR,wBAAwBE,OAAOC;IAE9F,OAAO;QACLI,YAAY;YACVH,MAAM;YACNC,SAASG,gBAAgBJ,IAAI;YAC7BE,QAAQE,gBAAgBF,MAAM;QAChC;QAEAF,MAAML,KAAKU,MAAM,CACfX,sBAAsB,OAAO;YAC3BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBL,SAASN,KAAKY,QAAQ,CAACT,MAAMG,OAAO,EAAE;YACpCO,iBAAiB,IAAI;YACrBC,cAAc;gBACZ,GAAGR,OAAO;gBACVS,WAAWC;YACb;YACAL,aAAaF,gBAAgBJ,IAAI;QACnC;QACAE,QAAQP,KAAKY,QAAQ,CAACT,MAAMI,MAAM,EAAE;YAClCO,cAAcP;YACdI,aAAaF,gBAAgBF,MAAM;QACrC;IACF;AACF,EAAE"}

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

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

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

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

package/lib/components/DrawerInline/renderDrawerInline.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  const { slots, slotProps } = getSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["React","getSlots","renderDrawerInline_unstable","state","slots","slotProps","open","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAGrD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,SAA4BE;IAEzD,IAAI,CAACA,MAAMG,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IAED,qBAAO,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderDrawerInline.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types';\n\n/**\n * Render the final JSX of DrawerInline\n */\nexport const renderDrawerInline_unstable = (state: DrawerInlineState) => {\n  assertSlots<DrawerInlineSlots>(state);\n\n  if (!state.open) {\n    return null;\n  }\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderDrawerInline_unstable","state","open","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvEF,YAA+BE;IAE/B,IAAI,CAACA,MAAMC,IAAI,EAAE;QACf,OAAO,IAAI;IACb,CAAC;IACD,qBAAO,AAfT,cAeUD,MAAME,IAAI;AACpB,EAAE"}

package/lib/components/DrawerInline/useDrawerInline.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState } from '@fluentui/react-utilities';\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Ref<HTMLElement>): DrawerInlineState => {\n  const { open: initialOpen, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { separator = false } = props;\n\n  const [open] = useControllableState({\n    state: initialOpen,\n    defaultState: defaultOpen,\n    initialState: false,\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n\n    size,\n    position,\n    open,\n    separator,\n  };\n};\n"],"names":["React","getNativeElementProps","useControllableState","getDefaultDrawerProps","useDrawerInline_unstable","props","ref","open","initialOpen","defaultOpen","size","position","separator","state","defaultState","initialState","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,4BAA4B;AAExF,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,MAAMC,YAAW,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGR,sBAAsBE;IACjF,MAAM,EAAEO,WAAY,KAAK,CAAA,EAAE,GAAGP;IAE9B,MAAM,CAACE,KAAK,GAAGL,qBAAqB;QAClCW,OAAOL;QACPM,cAAcL;QACdM,cAAc,KAAK;IACrB;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMhB,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QAEAK;QACAC;QACAJ;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerInline.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, slot } from '@fluentui/react-utilities';\nimport type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerInline.\n *\n * The returned state can be modified with hooks such as useDrawerInlineStyles_unstable,\n * before being passed to renderDrawerInline_unstable.\n *\n * @param props - props from this instance of DrawerInline\n * @param ref - reference to root HTMLElement of DrawerInline\n */\nexport const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Ref<HTMLElement>): DrawerInlineState => {\n  const { open: initialOpen, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { separator = false } = props;\n\n  const [open] = useControllableState({\n    state: initialOpen,\n    defaultState: defaultOpen,\n    initialState: false,\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    size,\n    position,\n    open,\n    separator,\n  };\n};\n"],"names":["React","getNativeElementProps","useControllableState","slot","getDefaultDrawerProps","useDrawerInline_unstable","props","ref","open","initialOpen","defaultOpen","size","position","separator","state","defaultState","initialState","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,IAAI,QAAQ,4BAA4B;AAE9F,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,MAAMC,YAAW,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGR,sBAAsBE;IACjF,MAAM,EAAEO,WAAY,KAAK,CAAA,EAAE,GAAGP;IAE9B,MAAM,CAACE,KAAK,GAAGN,qBAAqB;QAClCY,OAAOL;QACPM,cAAcL;QACdM,cAAc,KAAK;IACrB;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMf,KAAKgB,MAAM,CACflB,sBAAsB,OAAO;YAC3BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAGvBT;QACAC;QACAJ;QACAK;IACF;AACF,EAAE"}

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

@@ -12,12 +12,12 @@ const useStyles = /*#__PURE__*/__styles({
   root: {
     qhf8xq: "f10pi13n"
   },
-  separatorLeft: {
+  separatorStart: {
     Bekrc4i: ["f1hqa2wf", "finvdd3"],
     vrafjx: ["fcdblym", "fjik90z"],
     h3c5rm: ["fa8zu9y", "f17e9lqh"]
   },
-  separatorRight: {
+  separatorEnd: {
     ibv6hh: ["finvdd3", "f1hqa2wf"],
     wvpqe5: ["fjik90z", "fcdblym"],
     zhjwy3: ["f17e9lqh", "fa8zu9y"]
@@ -35,8 +35,8 @@ export const useDrawerInlineStyles_unstable = state => {
     if (!state.separator) {
       return undefined;
     }
-    return state.position === 'left' ? styles.separatorLeft : styles.separatorRight;
-  }, [state.position, state.separator, styles.separatorRight, styles.separatorLeft]);
+    return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;
+  }, [state.position, state.separator, styles.separatorEnd, styles.separatorStart]);
   state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","__styles","mergeClasses","shorthands","useDrawerBaseStyles","tokens","drawerInlineClassNames","root","useStyles","qhf8xq","separatorLeft","Bekrc4i","vrafjx","h3c5rm","separatorRight","ibv6hh","wvpqe5","zhjwy3","d","useDrawerInlineStyles_unstable","state","baseStyles","styles","separatorClass","useMemo","separator","undefined","position","className","size"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative'\n    },\n    /* Separator */ separatorLeft: {\n        ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3)\n    },\n    separatorRight: {\n        ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralBackground3)\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'left' ? styles.separatorLeft : styles.separatorRight;\n    }, [\n        state.position,\n        state.separator,\n        styles.separatorRight,\n        styles.separatorLeft\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;EAAA;EAAAC,aAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,cAAc,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,MAAM,GAAGL,MAAM,CAACZ,aAAa,GAAGY,MAAM,CAACR,cAAc;EACnF,CAAC,EAAE,CACCM,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,MAAM,CAACR,cAAc,EACrBQ,MAAM,CAACZ,aAAa,CACvB,CAAC;EACFU,KAAK,CAACb,IAAI,CAACqB,SAAS,GAAG1B,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAEc,UAAU,CAACd,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEa,KAAK,CAACS,IAAI,IAAIR,UAAU,CAACD,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACO,QAAQ,IAAIN,UAAU,CAACD,KAAK,CAACO,QAAQ,CAAC,EAAEJ,cAAc,EAAEH,KAAK,CAACb,IAAI,CAACqB,SAAS,CAAC;EACxN,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"names":["React","__styles","mergeClasses","shorthands","useDrawerBaseStyles","tokens","drawerInlineClassNames","root","useStyles","qhf8xq","separatorStart","Bekrc4i","vrafjx","h3c5rm","separatorEnd","ibv6hh","wvpqe5","zhjwy3","d","useDrawerInlineStyles_unstable","state","baseStyles","styles","separatorClass","useMemo","separator","undefined","position","className","size"],"sources":["useDrawerInlineStyles.styles.js"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerInlineClassNames = {\n    root: 'fui-DrawerInline'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative'\n    },\n    /* Separator */ separatorStart: {\n        ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3)\n    },\n    separatorEnd: {\n        ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralBackground3)\n    }\n});\n/**\n * Apply styling to the DrawerInline slots based on the state\n */ export const useDrawerInlineStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    const separatorClass = React.useMemo(()=>{\n        if (!state.separator) {\n            return undefined;\n        }\n        return state.position === 'start' ? styles.separatorStart : styles.separatorEnd;\n    }, [\n        state.position,\n        state.separator,\n        styles.separatorEnd,\n        styles.separatorStart\n    ]);\n    state.root.className = mergeClasses(drawerInlineClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], separatorClass, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,UAAU,GAAGjB,mBAAmB,CAAC,CAAC;EACxC,MAAMkB,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,cAAc,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAI;IACrC,IAAI,CAACJ,KAAK,CAACK,SAAS,EAAE;MAClB,OAAOC,SAAS;IACpB;IACA,OAAON,KAAK,CAACO,QAAQ,KAAK,OAAO,GAAGL,MAAM,CAACZ,cAAc,GAAGY,MAAM,CAACR,YAAY;EACnF,CAAC,EAAE,CACCM,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACK,SAAS,EACfH,MAAM,CAACR,YAAY,EACnBQ,MAAM,CAACZ,cAAc,CACxB,CAAC;EACFU,KAAK,CAACb,IAAI,CAACqB,SAAS,GAAG1B,YAAY,CAACI,sBAAsB,CAACC,IAAI,EAAEc,UAAU,CAACd,IAAI,EAAEe,MAAM,CAACf,IAAI,EAAEa,KAAK,CAACS,IAAI,IAAIR,UAAU,CAACD,KAAK,CAACS,IAAI,CAAC,EAAET,KAAK,CAACO,QAAQ,IAAIN,UAAU,CAACD,KAAK,CAACO,QAAQ,CAAC,EAAEJ,cAAc,EAAEH,KAAK,CAACb,IAAI,CAACqB,SAAS,CAAC;EACxN,OAAOR,KAAK;AAChB,CAAC"}

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

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

package/lib/components/DrawerOverlay/renderDrawerOverlay.js

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { assertSlots } from '@fluentui/react-utilities';
 import { Dialog } from '@fluentui/react-dialog';
 /**
  * Render the final JSX of DrawerOverlay
  */ export const renderDrawerOverlay_unstable = (state)=>{
-    const { slots , slotProps  } = getSlots(state);
-    return /*#__PURE__*/ React.createElement(Dialog, state.dialog, /*#__PURE__*/ React.createElement(slots.root, slotProps.root));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Dialog, state.dialog, /*#__PURE__*/ createElement(state.root, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\nimport { Dialog } from '@fluentui/react-dialog';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  const { slots, slotProps } = getSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <slots.root {...slotProps.root} />\n    </Dialog>\n  );\n};\n"],"names":["React","getSlots","Dialog","renderDrawerOverlay_unstable","state","slots","slotProps","dialog","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAAQ,4BAA4B;AAErD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,SAA6BG;IAE1D,qBACE,oBAACF,QAAWE,MAAMG,MAAM,gBACtB,oBAACF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderDrawerOverlay.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types';\nimport { Dialog } from '@fluentui/react-dialog';\n\n/**\n * Render the final JSX of DrawerOverlay\n */\nexport const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => {\n  assertSlots<DrawerOverlaySlots>(state);\n\n  return (\n    <Dialog {...state.dialog}>\n      <state.root />\n    </Dialog>\n  );\n};\n"],"names":["createElement","assertSlots","Dialog","renderDrawerOverlay_unstable","state","dialog","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzEH,YAAgCG;IAEhC,qBACE,AAdJ,cAcKF,QAAWE,MAAMC,MAAM,gBACtB,AAfN,cAeOD,MAAME,IAAI;AAGjB,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlay.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { DialogSurface } from '@fluentui/react-dialog';
 import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
 /**
@@ -15,11 +15,14 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
     const { modalType ='modal' , inertTrapFocus , onOpenChange  } = props;
     return {
         components: {
-            root: DialogSurface
+            root: DialogSurface,
+            backdrop: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: DialogSurface
         }),
         dialog: {
             open,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  return {\n    components: {\n      root: DialogSurface,\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    dialog: {\n      open,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n\n    size,\n    position,\n  };\n};\n"],"names":["React","getNativeElementProps","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAAsBC,aAAa,QAAQ,yBAAyB;AACpE,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,WAAY,QAAO,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGR;IAE9D,OAAO;QACLS,YAAY;YACVC,MAAMb;QACR;QAEAa,MAAMd,sBAAsB,OAAO;YACjCK;YACA,GAAGD,KAAK;QACV;QACAW,QAAQ;YACNT;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useDrawerOverlay.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';\nimport { DialogProps, DialogSurface } from '@fluentui/react-dialog';\nimport { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';\n\n/**\n * Create the state required to render DrawerOverlay.\n *\n * The returned state can be modified with hooks such as useDrawerOverlayStyles_unstable,\n * before being passed to renderDrawerOverlay_unstable.\n *\n * @param props - props from this instance of DrawerOverlay\n * @param ref - reference to root HTMLElement of DrawerOverlay\n */\nexport const useDrawerOverlay_unstable = (\n  props: DrawerOverlayProps,\n  ref: React.Ref<HTMLElement>,\n): DrawerOverlayState => {\n  const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);\n  const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;\n\n  return {\n    components: {\n      root: DialogSurface,\n      backdrop: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: DialogSurface },\n    ),\n    dialog: {\n      open,\n      defaultOpen,\n      onOpenChange,\n      inertTrapFocus,\n      modalType,\n    } as DialogProps,\n\n    size,\n    position,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","DialogSurface","getDefaultDrawerProps","useDrawerOverlay_unstable","props","ref","open","defaultOpen","size","position","modalType","inertTrapFocus","onOpenChange","components","root","backdrop","always","elementType","dialog"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAAsBC,aAAa,QAAQ,yBAAyB;AACpE,SAASC,qBAAqB,QAAQ,mCAAmC;AAEzE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAM,EAAEC,KAAI,EAAEC,YAAW,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGP,sBAAsBE;IACpE,MAAM,EAAEM,WAAY,QAAO,EAAEC,eAAc,EAAEC,aAAY,EAAE,GAAGR;IAE9D,OAAO;QACLS,YAAY;YACVC,MAAMb;YACNc,UAAU;QACZ;QAEAD,MAAMd,KAAKgB,MAAM,CACfjB,sBAAsB,OAAO;YAC3BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAahB;QAAc;QAE/BiB,QAAQ;YACNZ;YACAC;YACAK;YACAD;YACAD;QACF;QAEAF;QACAC;IACF;AACF,EAAE"}

package/lib/components/DrawerOverlay/useDrawerOverlayStyles.styles.js

@@ -1,7 +1,9 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
+import * as React from 'react';
 export const drawerOverlayClassNames = {
-  root: 'fui-DrawerOverlay'
+  root: 'fui-DrawerOverlay',
+  backdrop: 'fui-DrawerOverlay__backdrop'
 };
 /**
  * Styles for the root slot
@@ -21,7 +23,11 @@ const useStyles = /*#__PURE__*/__styles({
 export const useDrawerOverlayStyles_unstable = state => {
   const baseStyles = useDrawerBaseStyles();
   const styles = useStyles();
+  const backdrop = state.root.backdrop;
   state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);
+  }
   return state;
 };
 //# sourceMappingURL=useDrawerOverlayStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","useDrawerBaseStyles","drawerOverlayClassNames","root","useStyles","qhf8xq","Bhzewxz","B5kzvoi","d","useDrawerOverlayStyles_unstable","state","baseStyles","styles","className","size","position"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,UAAU,GAAGV,mBAAmB,CAAC,CAAC;EACxC,MAAMW,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACU,SAAS,GAAGb,YAAY,CAACE,uBAAuB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEO,KAAK,CAACI,IAAI,IAAIH,UAAU,CAACD,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACK,QAAQ,IAAIJ,UAAU,CAACD,KAAK,CAACK,QAAQ,CAAC,EAAEL,KAAK,CAACP,IAAI,CAACU,SAAS,CAAC;EACzM,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","useDrawerBaseStyles","React","drawerOverlayClassNames","root","backdrop","useStyles","qhf8xq","Bhzewxz","B5kzvoi","d","useDrawerOverlayStyles_unstable","state","baseStyles","styles","className","size","position"],"sources":["useDrawerOverlayStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';\nimport * as React from 'react';\nexport const drawerOverlayClassNames = {\n    root: 'fui-DrawerOverlay',\n    backdrop: 'fui-DrawerOverlay__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'fixed',\n        top: 0,\n        bottom: 0\n    }\n});\n/**\n * Apply styling to the DrawerOverlay slots based on the state\n */ export const useDrawerOverlayStyles_unstable = (state)=>{\n    const baseStyles = useDrawerBaseStyles();\n    const styles = useStyles();\n    const backdrop = state.root.backdrop;\n    state.root.className = mergeClasses(drawerOverlayClassNames.root, baseStyles.root, styles.root, state.size && baseStyles[state.size], state.position && baseStyles[state.position], state.root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,QAAQ,uCAAuC;AAC3E,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,UAAU,GAAGZ,mBAAmB,CAAC,CAAC;EACxC,MAAMa,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMD,QAAQ,GAAGO,KAAK,CAACR,IAAI,CAACC,QAAQ;EACpCO,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGf,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAES,UAAU,CAACT,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEQ,KAAK,CAACI,IAAI,IAAIH,UAAU,CAACD,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACK,QAAQ,IAAIJ,UAAU,CAACD,KAAK,CAACK,QAAQ,CAAC,EAAEL,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EACzM,IAAIV,QAAQ,EAAE;IACVA,QAAQ,CAACU,SAAS,GAAGf,YAAY,CAACG,uBAAuB,CAACE,QAAQ,EAAEA,QAAQ,CAACU,SAAS,CAAC;EAC3F;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/util/DrawerBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["export type DrawerBaseTypes = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'left'\n   */\n  position?: 'left' | 'right';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAiCE"}
+{"version":3,"sources":["DrawerBase.types.ts"],"sourcesContent":["export type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end';\n\n  /**\n   * Size of the drawer.\n   *\n   * - 'small' - Drawer is 320px wide.\n   * - 'medium' - Drawer is 592px wide.\n   * - 'large' - Drawer is 940px wide.\n   * - 'full' - Drawer is 100vw wide.\n   *\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large' | 'full';\n\n  /**\n   * Controls the open state of the Drawer\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Default value for the uncontrolled open state of the Drawer.\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n};\n"],"names":[],"mappings":"AAAA,WAiCE"}

package/lib/util/getDefaultDrawerProps.js

@@ -1,5 +1,5 @@
 export function getDefaultDrawerProps(props) {
-    const { open =false , defaultOpen =false , size ='small' , position ='left'  } = props;
+    const { open =false , defaultOpen =false , size ='small' , position ='start'  } = props;
     return {
         size,
         position,

package/lib/util/getDefaultDrawerProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getDefaultDrawerProps.ts"],"sourcesContent":["import { DrawerBaseTypes } from './DrawerBase.types';\n\nexport function getDefaultDrawerProps(props: DrawerBaseTypes) {\n  const { open = false, defaultOpen = false, size = 'small', position = 'left' } = props;\n\n  return {\n    size,\n    position,\n    open,\n    defaultOpen,\n  };\n}\n"],"names":["getDefaultDrawerProps","props","open","defaultOpen","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB,EAAE;IAC5D,MAAM,EAAEC,MAAO,KAAK,CAAA,EAAEC,aAAc,KAAK,CAAA,EAAEC,MAAO,QAAO,EAAEC,UAAW,OAAM,EAAE,GAAGJ;IAEjF,OAAO;QACLG;QACAC;QACAH;QACAC;IACF;AACF,CAAC"}
+{"version":3,"sources":["getDefaultDrawerProps.ts"],"sourcesContent":["import { DrawerBaseProps } from './DrawerBase.types';\n\nexport function getDefaultDrawerProps(props: DrawerBaseProps) {\n  const { open = false, defaultOpen = false, size = 'small', position = 'start' } = props;\n\n  return {\n    size,\n    position,\n    open,\n    defaultOpen,\n  };\n}\n"],"names":["getDefaultDrawerProps","props","open","defaultOpen","size","position"],"mappings":"AAEA,OAAO,SAASA,sBAAsBC,KAAsB,EAAE;IAC5D,MAAM,EAAEC,MAAO,KAAK,CAAA,EAAEC,aAAc,KAAK,CAAA,EAAEC,MAAO,QAAO,EAAEC,UAAW,QAAO,EAAE,GAAGJ;IAElF,OAAO;QACLG;QACAC;QACAH;QACAC;IACF;AACF,CAAC"}

package/lib/util/useDrawerBaseStyles.styles.js

@@ -28,11 +28,11 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     Brf1p80: "fbhxue7",
     De3pzq: "fxugw4r"
   },
-  left: {
+  start: {
     oyh7mz: ["f1vgc2s3", "f1e31b4d"],
     j35jbq: ["fvfyk4", "frppm18"]
   },
-  right: {
+  end: {
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     oyh7mz: ["frppm18", "fvfyk4"]
   },
@@ -50,6 +50,6 @@ export const useDrawerBaseStyles = /*#__PURE__*/__styles({
     B2u0y6b: "f1w39fev"
   }
 }, {
-  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1nfxovz{width:320px;}", ".fb8d3vz{width:592px;}", ".fi96w9z{width:940px;}", ".fr97h3j{width:100vw;}"]
+  d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1w39fev{max-width:100vw;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f6jr5hl{align-items:flex-start;}", ".fbhxue7{justify-content:flex-start;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", ".f1nfxovz{width:320px;}", ".fb8d3vz{width:592px;}", ".fi96w9z{width:940px;}", ".fr97h3j{width:100vw;}"]
 });
 //# sourceMappingURL=useDrawerBaseStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","shorthands","tokens","useDrawerBaseStyles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","left","oyh7mz","j35jbq","right","small","a9b677","medium","large","full","d"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the root slot\n */ export const useDrawerBaseStyles = makeStyles({\n    root: {\n        ...shorthands.padding(0),\n        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(0),\n        ...shorthands.border(0),\n        maxWidth: '100vw',\n        height: 'auto',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'flex-start',\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    /* Positioning */ left: {\n        left: 0,\n        right: 'auto'\n    },\n    right: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        width: '320px'\n    },\n    medium: {\n        width: '592px'\n    },\n    large: {\n        width: '940px'\n    },\n    full: {\n        width: '100vw',\n        maxWidth: '100vw'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,UAAU,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,KAAA;IAAAF,MAAA;EAAA;EAAAG,IAAA;IAAAH,MAAA;IAAAb,OAAA;EAAA;AAAA;EAAAiB,CAAA;AAAA,CAoCtC,CAAC"}
+{"version":3,"names":["__styles","shorthands","tokens","useDrawerBaseStyles","root","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","B2u0y6b","Bqenvij","B7ck84d","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","De3pzq","start","oyh7mz","j35jbq","end","small","a9b677","medium","large","full","d"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["import { makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the root slot\n */ export const useDrawerBaseStyles = makeStyles({\n    root: {\n        ...shorthands.padding(0),\n        ...shorthands.overflow('hidden'),\n        ...shorthands.borderRadius(0),\n        ...shorthands.border(0),\n        maxWidth: '100vw',\n        height: 'auto',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        justifyContent: 'flex-start',\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    /* Positioning */ start: {\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        right: 0,\n        left: 'auto'\n    },\n    /* Sizes */ small: {\n        width: '320px'\n    },\n    medium: {\n        width: '592px'\n    },\n    large: {\n        width: '940px'\n    },\n    full: {\n        width: '100vw',\n        maxWidth: '100vw'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,UAAU,QAAQ,gBAAgB;AACvD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAD,MAAA;IAAAD,MAAA;EAAA;EAAAG,KAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,KAAA;IAAAF,MAAA;EAAA;EAAAG,IAAA;IAAAH,MAAA;IAAAb,OAAA;EAAA;AAAA;EAAAiB,CAAA;AAAA,CAoCtC,CAAC"}

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

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderDrawer_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderDrawer_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root);
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawer.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Drawer\n */ export const renderDrawer_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDrawer_unstable","state","slots","slotProps","getSlotsNext","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,wBAAwB,CAACC,QAAQ;IAC9C,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI;AACjE"}
+{"version":3,"sources":["renderDrawer.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Drawer\n */ export const renderDrawer_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderDrawer_unstable","state","assertSlots","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,wBAAwB,CAACC,QAAQ;IAC9CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI;AACvD"}

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

@@ -17,11 +17,11 @@ const useDrawer_unstable = (props, ref)=>{
         components: {
             root: type === 'overlay' ? _drawerOverlay.DrawerOverlay : _drawerInline.DrawerInline
         },
-        root: (0, _reactUtilities.resolveShorthand)(props, {
-            required: true,
+        root: _reactUtilities.slot.always(props, {
             defaultProps: {
                 ref
-            }
+            },
+            elementType: type === 'overlay' ? _drawerOverlay.DrawerOverlay : _drawerInline.DrawerInline
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline/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 { type ='overlay'  } = props;\n    return {\n        components: {\n            root: type === 'overlay' ? DrawerOverlay : DrawerInline\n        },\n        root: resolveShorthand(props, {\n            required: true,\n            defaultProps: {\n                ref\n            }\n        })\n    };\n};\n"],"names":["useDrawer_unstable","props","ref","type","components","root","DrawerOverlay","DrawerInline","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACU;+BACH;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC,MAAM;IAChD,MAAM,EAAEC,MAAM,UAAS,EAAG,GAAGF;IAC7B,OAAO;QACHG,YAAY;YACRC,MAAMF,SAAS,YAAYG,4BAAa,GAAGC,0BAAY;QAC3D;QACAF,MAAMG,IAAAA,gCAAgB,EAACP,OAAO;YAC1BQ,UAAU,IAAI;YACdC,cAAc;gBACVR;YACJ;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["useDrawer.js"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay';\nimport { DrawerInline } from '../DrawerInline/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 { type ='overlay'  } = props;\n    return {\n        components: {\n            root: type === 'overlay' ? DrawerOverlay : DrawerInline\n        },\n        root: slot.always(props, {\n            defaultProps: {\n                ref\n            },\n            elementType: type === 'overlay' ? DrawerOverlay : DrawerInline\n        })\n    };\n};\n"],"names":["useDrawer_unstable","props","ref","type","components","root","DrawerOverlay","DrawerInline","slot","always","defaultProps","elementType"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACF;+BACS;8BACD;AASlB,MAAMA,qBAAqB,CAACC,OAAOC,MAAM;IAChD,MAAM,EAAEC,MAAM,UAAS,EAAG,GAAGF;IAC7B,OAAO;QACHG,YAAY;YACRC,MAAMF,SAAS,YAAYG,4BAAa,GAAGC,0BAAY;QAC3D;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACR,OAAO;YACrBS,cAAc;gBACVR;YACJ;YACAS,aAAaR,SAAS,YAAYG,4BAAa,GAAGC,0BAAY;QAClE;IACJ;AACJ"}

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

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "renderDrawerBody_unstable", {
     enumerable: true,
     get: ()=>renderDrawerBody_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderDrawerBody_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root);
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerBody\n */ export const renderDrawerBody_unstable = (state)=>{\n    const { slots , slotProps  } = getSlots(state);\n    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDrawerBody_unstable","state","slots","slotProps","getSlots","React","createElement","root"],"mappings":";;;;+BAIiBA;;aAAAA;;;6DAJM;gCACE;AAGd,MAAMA,4BAA4B,CAACC,QAAQ;IAClD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,wBAAQ,EAACH;IACxC,OAAO,WAAW,GAAGI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI;AACvE"}
+{"version":3,"sources":["renderDrawerBody.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerBody\n */ export const renderDrawerBody_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderDrawerBody_unstable","state","assertSlots","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,4BAA4B,CAACC,QAAQ;IAClDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI;AACvD"}

package/lib-commonjs/components/DrawerBody/useDrawerBody.js

@@ -14,9 +14,11 @@ const useDrawerBody_unstable = (props, ref)=>{
         components: {
             root: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */ export const useDrawerBody_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref,\n            ...props\n        })\n    };\n};\n"],"names":["useDrawerBody_unstable","props","ref","components","root","getNativeElementProps"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACe;AAS3B,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BH;YACA,GAAGD,KAAK;QACZ;IACJ;AACJ"}
+{"version":3,"sources":["useDrawerBody.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render DrawerBody.\n *\n * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,\n * before being passed to renderDrawerBody_unstable.\n *\n * @param props - props from this instance of DrawerBody\n * @param ref - reference to root HTMLElement of DrawerBody\n */ export const useDrawerBody_unstable = (props, ref)=>{\n    return {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDrawerBody_unstable","props","ref","components","root","slot","always","getNativeElementProps","elementType"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACqB;AASjC,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CL;YACA,GAAGD,KAAK;QACZ,IAAI;YACAO,aAAa;QACjB;IACJ;AACJ"}

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

@@ -67,15 +67,15 @@ const drawerBodyClassNames = {
         ".f1brlhvm{padding-bottom:1px;}",
         ".f1oy3dpc{overflow-x:auto;}",
         ".f5zp4f{overflow-y:auto;}",
-        ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}",
-        ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}",
-        ".f1pztt34{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}",
-        ".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}",
+        ".fqerorx{flex-grow:1;}",
+        ".f1neuvcm{flex-shrink:1;}",
+        ".f1pztt34{flex-basis:0;}",
+        ".f1ub7u0d{align-self:stretch;}",
         ".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}",
         ".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}",
         ".fo6xqva{background-repeat:no-repeat;}",
         ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
-        ".fcre6b6{-webkit-background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-size:100% 2px,100% 2px,100% 1px,100% 1px;}",
+        ".fcre6b6{background-size:100% 2px,100% 2px,100% 1px,100% 1px;}",
         ".f1besv5s{background-attachment:local,local,scroll,scroll;}",
         ".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}",
         ".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"

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

@@ -1 +1 @@
-{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n  root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    B6of3ja: \"fkrn0sh\",\n    t21cq0: [\"f11qmguv\", \"f1tyq0we\"],\n    jrapky: \"fmxx68s\",\n    Frg6f3: [\"f1tyq0we\", \"f11qmguv\"],\n    z8tnut: \"f1sl3k7w\",\n    z189sj: [\"fnbas0t\", \"f1mswpri\"],\n    Byoj8tv: \"f1brlhvm\",\n    uwmqm3: [\"f1mswpri\", \"fnbas0t\"],\n    B68tc82: \"f1oy3dpc\",\n    Bmxbyg5: \"f5zp4f\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"f1pztt34\",\n    qb2dma: \"f1ub7u0d\",\n    Bcmaq0h: \"f1igvcbx\",\n    B676am1: \"f1fofb6i\",\n    e5kdtc: \"fo6xqva\",\n    De3pzq: \"fxugw4r\",\n    Bkjc3bi: \"fcre6b6\",\n    Bgh53k4: \"f1besv5s\",\n    Bcx2cba: \"f1pqm9hp\",\n    gonrqn: \"f2c46kh\"\n  }\n}, {\n  d: [\".fkrn0sh{margin-top:-1px;}\", \".f11qmguv{margin-right:0;}\", \".f1tyq0we{margin-left:0;}\", \".fmxx68s{margin-bottom:-1px;}\", \".f1sl3k7w{padding-top:1px;}\", \".fnbas0t{padding-right:var(--spacingHorizontalXXL);}\", \".f1mswpri{padding-left:var(--spacingHorizontalXXL);}\", \".f1brlhvm{padding-bottom:1px;}\", \".f1oy3dpc{overflow-x:auto;}\", \".f5zp4f{overflow-y:auto;}\", \".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}\", \".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}\", \".f1pztt34{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}\", \".f1ub7u0d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}\", \".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}\", \".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}\", \".fo6xqva{background-repeat:no-repeat;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".fcre6b6{-webkit-background-size:100% 2px,100% 2px,100% 1px,100% 1px;background-size:100% 2px,100% 2px,100% 1px,100% 1px;}\", \".f1besv5s{background-attachment:local,local,scroll,scroll;}\", \".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__styles","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bh6795r","Bnnss6s","xawz","qb2dma","Bcmaq0h","B676am1","e5kdtc","De3pzq","Bkjc3bi","Bgh53k4","Bcx2cba","gonrqn","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;IAqCAC,4BAA4B,MAA5BA;;uBAvCsC;AAE5C,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA8B;QAA8B;QAA6B;QAAiC;QAA+B;QAAwD;QAAwD;QAAkC;QAA+B;QAA6B;QAAqF;QAAuE;QAA2E;QAAyF;QAA2X;QAAmK;QAA0C;QAA8D;QAA8H;QAA+D;QAAiF;KAA6E;AAC9oD;AAIO,MAAM1B,+BAA+B2B,CAAAA,QAAS;IACnD,MAAMC,SAAS1B;IACfyB,MAAM1B,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAY,EAAC/B,qBAAqBE,IAAI,EAAE2B,OAAO3B,IAAI,EAAE0B,MAAM1B,IAAI,CAAC4B,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}
+{"version":3,"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n  root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    B6of3ja: \"fkrn0sh\",\n    t21cq0: [\"f11qmguv\", \"f1tyq0we\"],\n    jrapky: \"fmxx68s\",\n    Frg6f3: [\"f1tyq0we\", \"f11qmguv\"],\n    z8tnut: \"f1sl3k7w\",\n    z189sj: [\"fnbas0t\", \"f1mswpri\"],\n    Byoj8tv: \"f1brlhvm\",\n    uwmqm3: [\"f1mswpri\", \"fnbas0t\"],\n    B68tc82: \"f1oy3dpc\",\n    Bmxbyg5: \"f5zp4f\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"f1pztt34\",\n    qb2dma: \"f1ub7u0d\",\n    Bcmaq0h: \"f1igvcbx\",\n    B676am1: \"f1fofb6i\",\n    e5kdtc: \"fo6xqva\",\n    De3pzq: \"fxugw4r\",\n    Bkjc3bi: \"fcre6b6\",\n    Bgh53k4: \"f1besv5s\",\n    Bcx2cba: \"f1pqm9hp\",\n    gonrqn: \"f2c46kh\"\n  }\n}, {\n  d: [\".fkrn0sh{margin-top:-1px;}\", \".f11qmguv{margin-right:0;}\", \".f1tyq0we{margin-left:0;}\", \".fmxx68s{margin-bottom:-1px;}\", \".f1sl3k7w{padding-top:1px;}\", \".fnbas0t{padding-right:var(--spacingHorizontalXXL);}\", \".f1mswpri{padding-left:var(--spacingHorizontalXXL);}\", \".f1brlhvm{padding-bottom:1px;}\", \".f1oy3dpc{overflow-x:auto;}\", \".f5zp4f{overflow-y:auto;}\", \".fqerorx{flex-grow:1;}\", \".f1neuvcm{flex-shrink:1;}\", \".f1pztt34{flex-basis:0;}\", \".f1ub7u0d{align-self:stretch;}\", \".f1igvcbx{background-image:linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralBackground1), var(--colorNeutralBackground1)),linear-gradient(to top, var(--colorNeutralStroke1), var(--colorNeutralBackground1)),linear-gradient(to bottom, var(--colorNeutralStroke1), var(--colorNeutralBackground1));}\", \".f1fofb6i{-webkit-background-position:bottom center,top center,bottom center,top center;background-position:bottom center,top center,bottom center,top center;}\", \".fo6xqva{background-repeat:no-repeat;}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".fcre6b6{background-size:100% 2px,100% 2px,100% 1px,100% 1px;}\", \".f1besv5s{background-attachment:local,local,scroll,scroll;}\", \".f1pqm9hp:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}\", \".f2c46kh:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}\"]\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDrawerBodyStyles.styles.js.map"],"names":["drawerBodyClassNames","useDrawerBodyStyles_unstable","root","useStyles","__styles","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","B68tc82","Bmxbyg5","Bh6795r","Bnnss6s","xawz","qb2dma","Bcmaq0h","B676am1","e5kdtc","De3pzq","Bkjc3bi","Bgh53k4","Bcx2cba","gonrqn","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;IAqCAC,4BAA4B,MAA5BA;;uBAvCsC;AAE5C,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA8B;QAA8B;QAA6B;QAAiC;QAA+B;QAAwD;QAAwD;QAAkC;QAA+B;QAA6B;QAA0B;QAA6B;QAA4B;QAAkC;QAA2X;QAAmK;QAA0C;QAA8D;QAAkE;QAA+D;QAAiF;KAA6E;AACv4C;AAIO,MAAM1B,+BAA+B2B,CAAAA,QAAS;IACnD,MAAMC,SAAS1B;IACfyB,MAAM1B,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAY,EAAC/B,qBAAqBE,IAAI,EAAE2B,OAAO3B,IAAI,EAAE0B,MAAM1B,IAAI,CAAC4B,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}

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

@@ -1,4 +1,4 @@
-"use strict";
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "renderDrawerFooter_unstable", {
     enumerable: true,
     get: ()=>renderDrawerFooter_unstable
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderDrawerFooter_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root);
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDrawerFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerFooter\n */ export const renderDrawerFooter_unstable = (state)=>{\n    const { slots , slotProps  } = getSlots(state);\n    return /*#__PURE__*/ React.createElement(slots.root, slotProps.root);\n};\n"],"names":["renderDrawerFooter_unstable","state","slots","slotProps","getSlots","React","createElement","root"],"mappings":";;;;+BAIiBA;;aAAAA;;;6DAJM;gCACE;AAGd,MAAMA,8BAA8B,CAACC,QAAQ;IACpD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,wBAAQ,EAACH;IACxC,OAAO,WAAW,GAAGI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI;AACvE"}
+{"version":3,"sources":["renderDrawerFooter.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of DrawerFooter\n */ export const renderDrawerFooter_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null);\n};\n"],"names":["renderDrawerFooter_unstable","state","assertSlots","createElement","root"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,8BAA8B,CAACC,QAAQ;IACpDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI;AACvD"}

package/lib-commonjs/components/DrawerFooter/useDrawerFooter.js

@@ -14,9 +14,11 @@ const useDrawerFooter_unstable = (props, ref)=>{
         components: {
             root: 'footer'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('footer', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('footer', {
             ref,
             ...props
+        }), {
+            elementType: 'footer'
         })
     };
 };