feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/InlineDrawer.js

@@ -0,0 +1,27 @@
+'use client';
+"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 _drawerContext = require("../../contexts/drawerContext");
+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);
+    const contextValue = (0, _drawerContext.useDrawerContextValue)();
+    (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, contextValue);
+});
+InlineDrawer.displayName = 'InlineDrawer';

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/InlineDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useDrawerContextValue } from '../../contexts/drawerContext';\n\nimport type { InlineDrawerProps } from './InlineDrawer.types';\nimport { useInlineDrawer_unstable } from './useInlineDrawer';\nimport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nimport { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n\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 */\nexport const InlineDrawer: ForwardRefComponent<InlineDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useInlineDrawer_unstable(props, ref);\n  const contextValue = useDrawerContextValue();\n\n  useInlineDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);\n  useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);\n\n  return renderInlineDrawer_unstable(state, contextValue);\n});\n\nInlineDrawer.displayName = 'InlineDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerContextValue","useInlineDrawer_unstable","renderInlineDrawer_unstable","useInlineDrawerStyles_unstable","InlineDrawer","forwardRef","props","ref","state","contextValue","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;+BAExC,+BAA+B;iCAG5B,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;AAMzE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQP,yCAAAA,EAAyBK,OAAOC;IAC9C,MAAME,mBAAeT,oCAAAA;QAErBG,2DAAAA,EAA+BK;QAC/BT,gDAAAA,EAA4B,kCAAkCS;QAC9DT,gDAAAA,EAA4B,kCAAkCS;IAE9D,WAAON,+CAAAA,EAA4BM,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/InlineDrawer.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering InlineDrawer
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/InlineDrawer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/InlineDrawer.types.ts"],"sourcesContent":["import type { PresenceDirection, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport type { DrawerMotionParams } from '../../shared/drawerMotions';\nimport type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types';\n\nexport type SurfaceMotionSlotProps = PresenceMotionSlotProps<DrawerMotionParams>;\n\nexport type InlineDrawerSlots = {\n  root: Slot<'div', 'aside'>;\n  surfaceMotion?: Slot<SurfaceMotionSlotProps>;\n};\n\n/**\n * InlineDrawer Props\n */\nexport type InlineDrawerProps = ComponentProps<InlineDrawerSlots> &\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 InlineDrawer\n */\nexport type InlineDrawerState = Required<\n  ComponentState<NonNullable<InlineDrawerSlots>> &\n    DrawerBaseState &\n    Pick<InlineDrawerProps, 'separator'> & {\n      animationDirection: PresenceDirection;\n    }\n>;\n"],"names":[],"mappings":"AA0BA;;CAEC,GACD,WAME"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InlineDrawer: function() {
+        return _InlineDrawer.InlineDrawer;
+    },
+    inlineDrawerClassNames: function() {
+        return _useInlineDrawerStylesstyles.inlineDrawerClassNames;
+    },
+    renderInlineDrawer_unstable: function() {
+        return _renderInlineDrawer.renderInlineDrawer_unstable;
+    },
+    useInlineDrawerStyles_unstable: function() {
+        return _useInlineDrawerStylesstyles.useInlineDrawerStyles_unstable;
+    },
+    useInlineDrawer_unstable: function() {
+        return _useInlineDrawer.useInlineDrawer_unstable;
+    }
+});
+const _InlineDrawer = require("./InlineDrawer");
+const _renderInlineDrawer = require("./renderInlineDrawer");
+const _useInlineDrawer = require("./useInlineDrawer");
+const _useInlineDrawerStylesstyles = require("./useInlineDrawerStyles.styles");

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/index.ts"],"sourcesContent":["export { InlineDrawer } from './InlineDrawer';\nexport type {\n  InlineDrawerProps,\n  InlineDrawerSlots,\n  InlineDrawerState,\n  SurfaceMotionSlotProps,\n} from './InlineDrawer.types';\nexport { renderInlineDrawer_unstable } from './renderInlineDrawer';\nexport { useInlineDrawer_unstable } from './useInlineDrawer';\nexport { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';\n"],"names":["InlineDrawer","renderInlineDrawer_unstable","useInlineDrawer_unstable","inlineDrawerClassNames","useInlineDrawerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eASZG,mDAAsB;;;eAFtBF,+CAA2B;;;eAEHG,2DAA8B;;;eADtDF,yCAAwB;;;8BARJ,iBAAiB;oCAOF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderInlineDrawer_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderInlineDrawer_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _drawerContext = require("../../contexts/drawerContext");
+const renderInlineDrawer_unstable = (state, contextValue)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_drawerContext.DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        })
+    });
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/renderInlineDrawer.js.map

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

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/useInlineDrawer.js

@@ -0,0 +1,71 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useInlineDrawer_unstable", {
+    enumerable: true,
+    get: function() {
+        return useInlineDrawer_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactmotion = require("@fluentui/react-motion");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _drawerMotions = require("../../shared/drawerMotions");
+const _useDrawerDefaultProps = require("../../shared/useDrawerDefaultProps");
+const STATIC_MOTION = {
+    active: true,
+    canRender: true,
+    ref: /*#__PURE__*/ _react.createRef(),
+    type: 'idle'
+};
+const useInlineDrawer_unstable = (props, ref)=>{
+    const { size, position, open, unmountOnClose } = (0, _useDrawerDefaultProps.useDrawerDefaultProps)(props);
+    const { separator = false, surfaceMotion } = props;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const [animationDirection, setAnimationDirection] = _react.useState(open ? 'enter' : 'exit');
+    return {
+        components: {
+            root: 'div',
+            // casting from internal type that has required properties
+            // to external type that only has optional properties
+            // converting to unknown first as both Function component signatures are not compatible
+            surfaceMotion: _drawerMotions.InlineDrawerMotion
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ...props,
+            ref,
+            'aria-hidden': !unmountOnClose && !open ? true : undefined
+        }), {
+            elementType: 'div'
+        }),
+        open,
+        position,
+        size,
+        separator,
+        unmountOnClose,
+        animationDirection,
+        surfaceMotion: (0, _reactmotion.presenceMotionSlot)(surfaceMotion, {
+            elementType: _drawerMotions.InlineDrawerMotion,
+            defaultProps: {
+                position,
+                size,
+                dir,
+                visible: open,
+                appear: unmountOnClose,
+                unmountOnExit: unmountOnClose,
+                onMotionFinish: (_, { direction })=>setAnimationDirection(direction),
+                onMotionStart: (_, { direction })=>{
+                    if (direction === 'enter') {
+                        setAnimationDirection('enter');
+                    }
+                }
+            }
+        }),
+        // Deprecated props
+        motion: STATIC_MOTION
+    };
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/useInlineDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InlineDrawer/useInlineDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { PresenceDirection, presenceMotionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport { type DrawerMotionParams, InlineDrawerMotion } from '../../shared/drawerMotions';\nimport { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';\nimport type { InlineDrawerProps, InlineDrawerState, SurfaceMotionSlotProps } from './InlineDrawer.types';\n\nconst STATIC_MOTION = {\n  active: true,\n  canRender: true,\n  ref: React.createRef<HTMLDivElement>(),\n  type: 'idle' as const,\n};\n\n/**\n * Create the state required to render InlineDrawer.\n *\n * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,\n * before being passed to renderInlineDrawer_unstable.\n *\n * @param props - props from this instance of InlineDrawer\n * @param ref - reference to root HTMLElement of InlineDrawer\n */\nexport const useInlineDrawer_unstable = (props: InlineDrawerProps, ref: React.Ref<HTMLElement>): InlineDrawerState => {\n  const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);\n  const { separator = false, surfaceMotion } = props;\n  const { dir } = useFluent();\n  const [animationDirection, setAnimationDirection] = React.useState<PresenceDirection>(open ? 'enter' : 'exit');\n\n  return {\n    components: {\n      root: 'div',\n      // casting from internal type that has required properties\n      // to external type that only has optional properties\n      // converting to unknown first as both Function component signatures are not compatible\n      surfaceMotion: InlineDrawerMotion as unknown as React.FC<SurfaceMotionSlotProps>,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n      }),\n      { elementType: 'div' },\n    ),\n\n    open,\n    position,\n    size,\n    separator,\n    unmountOnClose,\n    animationDirection,\n    surfaceMotion: presenceMotionSlot<DrawerMotionParams>(surfaceMotion, {\n      elementType: InlineDrawerMotion,\n      defaultProps: {\n        position,\n        size,\n        dir,\n        visible: open,\n        appear: unmountOnClose,\n        unmountOnExit: unmountOnClose,\n        onMotionFinish: (_, { direction }) => setAnimationDirection(direction),\n        onMotionStart: (_, { direction }) => {\n          if (direction === 'enter') {\n            setAnimationDirection('enter');\n          }\n        },\n      },\n    }),\n\n    // Deprecated props\n    motion: STATIC_MOTION,\n  } satisfies InlineDrawerState;\n};\n"],"names":["React","presenceMotionSlot","getIntrinsicElementProps","slot","useFluent_unstable","useFluent","InlineDrawerMotion","useDrawerDefaultProps","STATIC_MOTION","active","canRender","ref","createRef","type","useInlineDrawer_unstable","props","size","position","open","unmountOnClose","separator","surfaceMotion","dir","animationDirection","setAnimationDirection","useState","components","root","always","undefined","elementType","defaultProps","visible","appear","unmountOnExit","onMotionFinish","_","direction","onMotionStart","motion"],"mappings":"AAAA;;;;;+BA2Bac;;;;;;;iEAzBU,QAAQ;6BACuB,yBAAyB;gCAChC,4BAA4B;qCAC3B,kCAAkC;+BAEtB,6BAA6B;uCACnD,qCAAqC;AAG3E,MAAMN,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,mBAAKX,OAAMY,SAAS;IACpBC,MAAM;AACR;AAWO,iCAAiC,CAACE,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,OAAGZ,4CAAAA,EAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,OAAGjB,uCAAAA;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,OAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef,iCAAAA;QACjB;QAEAqB,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,mBAAepB,+BAAAA,EAAuCoB,eAAe;YACnES,aAAaxB,iCAAAA;YACbyB,cAAc;gBACZd;gBACAD;gBACAM;gBACAU,SAASd;gBACTe,QAAQd;gBACRe,eAAef;gBACfgB,gBAAgB,CAACC,GAAG,EAAEC,SAAS,EAAE,GAAKb,sBAAsBa;gBAC5DC,eAAe,CAACF,GAAG,EAAEC,SAAS,EAAE;oBAC9B,IAAIA,cAAc,SAAS;wBACzBb,sBAAsB;oBACxB;gBACF;YACF;QACF;QAEA,mBAAmB;QACnBe,QAAQ/B;IACV;AACF,EAAE"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.js

@@ -0,0 +1,213 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    inlineDrawerClassNames: function() {
+        return inlineDrawerClassNames;
+    },
+    useInlineDrawerStyles_unstable: function() {
+        return useInlineDrawerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
+const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rkjj3x6", null, [
+    ".rkjj3x6{overflow: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:relative;}"
+]);
+/**
+ * Styles for the root slot
+ */ const borderValue = `1px solid ${_reacttheme.tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    separatorStart: {
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        u1mtju: [
+            "f1cxmi7i",
+            "f1j970fk"
+        ]
+    },
+    separatorEnd: {
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        B4g9neb: [
+            "f1j970fk",
+            "f1cxmi7i"
+        ]
+    },
+    separatorBottom: {
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        i8vvqc: "f1n3kblk"
+    },
+    start: {},
+    end: {},
+    bottom: {
+        a9b677: "fly5x3f",
+        Bqenvij: "fub80nq"
+    },
+    animationExitStart: {
+        a9b677: "f3tsq5r",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh"
+    },
+    animationExitEnd: {
+        a9b677: "f3tsq5r",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh"
+    },
+    animationExitBottom: {
+        Bqenvij: "fniina8",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh"
+    }
+}, {
+    d: [
+        [
+            ".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1j970fk{border-left:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1cxmi7i{border-right:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1n3kblk{border-top:1px solid var(--colorNeutralBackground3);}",
+            {
+                p: -1
+            }
+        ],
+        ".fly5x3f{width:100%;}",
+        ".fub80nq{height:var(--fui-Drawer--size);}",
+        ".f3tsq5r{width:0;}",
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".fniina8{height:0;}",
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ]
+    ]
+});
+function getSeparatorClass(state, classNames) {
+    if (!state.separator) {
+        return undefined;
+    }
+    switch(state.position){
+        case 'start':
+            return classNames.separatorStart;
+        case 'end':
+            return classNames.separatorEnd;
+        case 'bottom':
+            return classNames.separatorBottom;
+        default:
+            return undefined;
+    }
+}
+function getAnimationExitClass(state, classNames) {
+    switch(state.position){
+        case 'start':
+            return classNames.animationExitStart;
+        case 'end':
+            return classNames.animationExitEnd;
+        case 'bottom':
+            return classNames.animationExitBottom;
+        default:
+            return undefined;
+    }
+}
+const useInlineDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const rootStyles = useDrawerRootStyles();
+    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
+    return state;
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js

@@ -0,0 +1,96 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    inlineDrawerClassNames: function() {
+        return inlineDrawerClassNames;
+    },
+    useInlineDrawerStyles_unstable: function() {
+        return useInlineDrawerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useDrawerBaseStylesstyles = require("../../shared/useDrawerBaseStyles.styles");
+const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = (0, _react.makeResetStyles)({
+    ..._useDrawerBaseStylesstyles.drawerDefaultStyles,
+    position: 'relative'
+});
+/**
+ * Styles for the root slot
+ */ const borderValue = `1px solid ${_reacttheme.tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = (0, _react.makeStyles)({
+    /* Separator */ separatorStart: {
+        borderRight: borderValue
+    },
+    separatorEnd: {
+        borderLeft: borderValue
+    },
+    separatorBottom: {
+        borderTop: borderValue
+    },
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        width: '100%',
+        height: `var(${_useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar})`
+    },
+    /* Animation exit states */ animationExitStart: {
+        width: '0',
+        border: 'none'
+    },
+    animationExitEnd: {
+        width: '0',
+        border: 'none'
+    },
+    animationExitBottom: {
+        height: '0',
+        border: 'none'
+    }
+});
+function getSeparatorClass(state, classNames) {
+    if (!state.separator) {
+        return undefined;
+    }
+    switch(state.position){
+        case 'start':
+            return classNames.separatorStart;
+        case 'end':
+            return classNames.separatorEnd;
+        case 'bottom':
+            return classNames.separatorBottom;
+        default:
+            return undefined;
+    }
+}
+function getAnimationExitClass(state, classNames) {
+    switch(state.position){
+        case 'start':
+            return classNames.animationExitStart;
+        case 'end':
+            return classNames.animationExitEnd;
+        case 'bottom':
+            return classNames.animationExitBottom;
+        default:
+            return undefined;
+    }
+}
+const useInlineDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = (0, _useDrawerBaseStylesstyles.useDrawerBaseClassNames)(state);
+    const rootStyles = useDrawerRootStyles();
+    state.root.className = (0, _react.mergeClasses)(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
+    return state;
+};