feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useDrawerContextValue } from '../../contexts/drawerContext';
+import { useInlineDrawer_unstable } from './useInlineDrawer';
+import { renderInlineDrawer_unstable } from './renderInlineDrawer';
+import { useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';
+/**
+ * InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as
+ * the main surface, users can still interact with other UI elements.
+ */ export const InlineDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInlineDrawer_unstable(props, ref);
+    const contextValue = useDrawerContextValue();
+    useInlineDrawerStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerInlineStyles_unstable')(state);
+    useCustomStyleHook_unstable('useInlineDrawerStyles_unstable')(state);
+    return renderInlineDrawer_unstable(state, contextValue);
+});
+InlineDrawer.displayName = 'InlineDrawer';

node_modules/@fluentui/react-drawer/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,qBAAqB,QAAQ,+BAA+B;AAGrE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAC9C,MAAME,eAAeT;IAErBG,+BAA+BK;IAC/BT,4BAA4B,kCAAkCS;IAC9DT,4BAA4B,kCAAkCS;IAE9D,OAAON,4BAA4BM,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering InlineDrawer
+ */ export { };

node_modules/@fluentui/react-drawer/lib/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/components/InlineDrawer/index.js

@@ -0,0 +1,4 @@
+export { InlineDrawer } from './InlineDrawer';
+export { renderInlineDrawer_unstable } from './renderInlineDrawer';
+export { useInlineDrawer_unstable } from './useInlineDrawer';
+export { inlineDrawerClassNames, useInlineDrawerStyles_unstable } from './useInlineDrawerStyles.styles';

node_modules/@fluentui/react-drawer/lib/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":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

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

@@ -0,0 +1,14 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { DrawerProvider } from '../../contexts/drawerContext';
+/**
+ * Render the final JSX of InlineDrawer
+ */ export const renderInlineDrawer_unstable = (state, contextValue)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(DrawerProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(state.surfaceMotion, {
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
+    });
+};

node_modules/@fluentui/react-drawer/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAA6BC,cAAc,QAAQ,+BAA+B;AAIlF;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAeI,OAAOD;kBACrB,cAAA,KAACD,MAAMG,aAAa;sBAClB,cAAA,KAACH,MAAMI,IAAI;;;AAInB,EAAE"}

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

@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { InlineDrawerMotion } from '../../shared/drawerMotions';
+import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
+const STATIC_MOTION = {
+    active: true,
+    canRender: true,
+    ref: React.createRef(),
+    type: 'idle'
+};
+/**
+ * Create the state required to render InlineDrawer.
+ *
+ * The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,
+ * before being passed to renderInlineDrawer_unstable.
+ *
+ * @param props - props from this instance of InlineDrawer
+ * @param ref - reference to root HTMLElement of InlineDrawer
+ */ export const useInlineDrawer_unstable = (props, ref)=>{
+    const { size, position, open, unmountOnClose } = useDrawerDefaultProps(props);
+    const { separator = false, surfaceMotion } = props;
+    const { dir } = useFluent();
+    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: InlineDrawerMotion
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ...props,
+            ref,
+            'aria-hidden': !unmountOnClose && !open ? true : undefined
+        }), {
+            elementType: 'div'
+        }),
+        open,
+        position,
+        size,
+        separator,
+        unmountOnClose,
+        animationDirection,
+        surfaceMotion: presenceMotionSlot(surfaceMotion, {
+            elementType: 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/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA4BC,kBAAkB,QAAQ,yBAAyB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAAkCC,kBAAkB,QAAQ,6BAA6B;AACzF,SAASC,qBAAqB,QAAQ,qCAAqC;AAG3E,MAAMC,gBAAgB;IACpBC,QAAQ;IACRC,WAAW;IACXC,KAAKX,MAAMY,SAAS;IACpBC,MAAM;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BJ;IACjE,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGZ,sBAAsBQ;IACvE,MAAM,EAAEK,YAAY,KAAK,EAAEC,aAAa,EAAE,GAAGN;IAC7C,MAAM,EAAEO,GAAG,EAAE,GAAGjB;IAChB,MAAM,CAACkB,oBAAoBC,sBAAsB,GAAGxB,MAAMyB,QAAQ,CAAoBP,OAAO,UAAU;IAEvG,OAAO;QACLQ,YAAY;YACVC,MAAM;YACN,0DAA0D;YAC1D,qDAAqD;YACrD,uFAAuF;YACvFN,eAAef;QACjB;QAEAqB,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAyB,OAAO;YAC9B,GAAGa,KAAK;YACRJ;YACA,eAAe,CAACQ,kBAAkB,CAACD,OAAO,OAAOW;QACnD,IACA;YAAEC,aAAa;QAAM;QAGvBZ;QACAD;QACAD;QACAI;QACAD;QACAI;QACAF,eAAepB,mBAAuCoB,eAAe;YACnES,aAAaxB;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/components/InlineDrawer/useInlineDrawerStyles.styles.js

@@ -0,0 +1,156 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+export const inlineDrawerClassNames = {
+  root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = /*#__PURE__*/__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 ${tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = /*#__PURE__*/__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;
+  }
+}
+/**
+ * Apply styling to the InlineDrawer slots based on the state
+ */
+export const useInlineDrawerStyles_unstable = state => {
+  'use no memo';
+
+  const resetStyles = useDrawerResetStyles();
+  const baseClassNames = useDrawerBaseClassNames(state);
+  const rootStyles = useDrawerRootStyles();
+  state.root.className = 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/components/InlineDrawer/useInlineDrawerStyles.styles.raw.js

@@ -0,0 +1,80 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars, drawerDefaultStyles, useDrawerBaseClassNames } from '../../shared/useDrawerBaseStyles.styles';
+export const inlineDrawerClassNames = {
+    root: 'fui-InlineDrawer'
+};
+const useDrawerResetStyles = makeResetStyles({
+    ...drawerDefaultStyles,
+    position: 'relative'
+});
+/**
+ * Styles for the root slot
+ */ const borderValue = `1px solid ${tokens.colorNeutralBackground3}`;
+const useDrawerRootStyles = makeStyles({
+    /* Separator */ separatorStart: {
+        borderRight: borderValue
+    },
+    separatorEnd: {
+        borderLeft: borderValue
+    },
+    separatorBottom: {
+        borderTop: borderValue
+    },
+    /* Positioning */ start: {},
+    end: {},
+    bottom: {
+        width: '100%',
+        height: `var(${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;
+    }
+}
+/**
+ * Apply styling to the InlineDrawer slots based on the state
+ */ export const useInlineDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useDrawerResetStyles();
+    const baseClassNames = useDrawerBaseClassNames(state);
+    const rootStyles = useDrawerRootStyles();
+    state.root.className = mergeClasses(inlineDrawerClassNames.root, resetStyles, baseClassNames, getSeparatorClass(state, rootStyles), rootStyles[state.position], state.animationDirection === 'exit' && getAnimationExitClass(state, rootStyles), state.root.className);
+    return state;
+};