feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-drawer/lib/shared/DrawerBase.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-drawer/lib/shared/DrawerBase.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/DrawerBase.types.ts"],"sourcesContent":["import * as React from 'react';\n\ntype MotionType = 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n\ntype MotionState<Element extends HTMLElement = HTMLElement> = {\n  /**\n   * Ref to the element.\n   */\n  ref: React.Ref<Element>;\n\n  /**\n   * Current state of the element.\n   *\n   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.\n   * - `entering` - The element is performing enter animation.\n   * - `entered` - The element has finished enter animation.\n   * - `idle` - The element is currently not animating, but rendered on screen.\n   * - `exiting` - The element is performing exit animation.\n   * - `exited` - The element has finished exit animation.\n   */\n  type: MotionType;\n\n  /**\n   * Indicates whether the component can be rendered.\n   * Useful to render the element before animating it or to remove it from the DOM after exit animation.\n   */\n  canRender: boolean;\n\n  /**\n   * Indicates whether the component is ready to receive a CSS transition className.\n   * Useful to apply CSS transitions when the element is mounted and ready to be animated.\n   */\n  active: boolean;\n};\n\nexport type DrawerBaseProps = {\n  /**\n   * Position of the drawer.\n   *\n   * Note: 'bottom' does not supports size, but it supports customized height.\n   *\n   * @default 'start'\n   */\n  position?: 'start' | 'end' | 'bottom';\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   * Decides whether the drawer should be removed from the DOM tree when it is closed.\n   * This can be useful when dealing with components that may contain state that should not\n   * be reset when the drawer is closed.\n   *\n   * @default true\n   */\n  unmountOnClose?: boolean;\n};\n\nexport type DrawerBaseState = Required<Pick<DrawerBaseProps, 'position' | 'size'>> & {\n  /**\n   * @deprecated Passed values will be static.\n   */\n  motion: MotionState<HTMLElement>;\n\n  open?: boolean;\n\n  unmountOnClose?: boolean;\n};\n\nexport type DrawerScrollState = 'none' | 'top' | 'middle' | 'bottom';\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-drawer/lib/shared/drawerMotionUtils.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * @internal
+ * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components
+ */ export function mergePresenceSlots(inputSlot, Component, params) {
+    if (inputSlot === null) {
+        return null;
+    }
+    return {
+        ...inputSlot,
+        children: (_, props)=>{
+            if (inputSlot === null || inputSlot === void 0 ? void 0 : inputSlot.children) {
+                return inputSlot.children(Component, {
+                    ...props,
+                    ...params
+                });
+            }
+            return /*#__PURE__*/ React.createElement(Component, {
+                ...props,
+                ...params
+            }, props.children);
+        }
+    };
+}

node_modules/@fluentui/react-drawer/lib/shared/drawerMotionUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/drawerMotionUtils.tsx"],"sourcesContent":["import type { PresenceComponent, PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport * as React from 'react';\n\ntype SerializableObject = Record<string, string | boolean | number>;\n\n/**\n * @internal\n * @todo Drawer is a first component to use this pattern, we should move this to a shared package if it will be used in more components\n */\nexport function mergePresenceSlots<\n  BaseMotionParams extends SerializableObject = {},\n  EnhancedMotionParams extends SerializableObject = {},\n>(\n  inputSlot: PresenceMotionSlotProps<EnhancedMotionParams> | null | undefined,\n  Component: PresenceComponent<EnhancedMotionParams>,\n  params: EnhancedMotionParams,\n): PresenceMotionSlotProps<BaseMotionParams> | null {\n  if (inputSlot === null) {\n    return null;\n  }\n\n  return {\n    ...inputSlot,\n    children: (_, props) => {\n      if (inputSlot?.children) {\n        return inputSlot.children(Component, { ...props, ...params });\n      }\n\n      return (\n        <Component {...props} {...params}>\n          {props.children}\n        </Component>\n      );\n    },\n  };\n}\n"],"names":["React","mergePresenceSlots","inputSlot","Component","params","children","_","props"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAI/B;;;CAGC,GACD,OAAO,SAASC,mBAIdC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,sBAAAA,gCAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,qBACE,oBAACD;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}

node_modules/@fluentui/react-drawer/lib/shared/drawerMotions.js

@@ -0,0 +1,111 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
+import { tokens } from '@fluentui/react-theme';
+import { drawerCSSVars } from './useDrawerBaseStyles.styles';
+import { fadeAtom } from '@fluentui/react-motion-components-preview';
+const durations = {
+    small: motionTokens.durationGentle,
+    medium: motionTokens.durationSlow,
+    large: motionTokens.durationSlower,
+    full: motionTokens.durationUltraSlow
+};
+/**
+ * @internal
+ */ export function getPositionTransform(position, sizeVar, dir) {
+    const leftToRightTransform = `translate3d(var(${sizeVar}), 0, 0)`;
+    const rightToLeftTransform = `translate3d(calc(var(${sizeVar}) * -1), 0, 0)`;
+    const bottomToTopTransform = `translate3d(0, var(${sizeVar}), 0)`;
+    if (position === 'start') {
+        return dir === 'ltr' ? rightToLeftTransform : leftToRightTransform;
+    }
+    if (position === 'end') {
+        return dir === 'ltr' ? leftToRightTransform : rightToLeftTransform;
+    }
+    if (position === 'bottom') {
+        return bottomToTopTransform;
+    }
+    return 'translate3d(0, 0, 0)';
+}
+/**
+ * @internal
+ */ export const InlineDrawerMotion = createPresenceComponent(({ position, size, dir })=>{
+    const keyframes = [
+        {
+            /**
+       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
+       * The work will be done in the #32817
+       */ transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),
+            opacity: 0
+        },
+        {
+            transform: 'translate3d(0, 0, 0)',
+            opacity: 1
+        }
+    ];
+    const duration = durations[size];
+    return {
+        enter: {
+            keyframes,
+            duration,
+            easing: motionTokens.curveDecelerateMid
+        },
+        exit: {
+            keyframes: [
+                ...keyframes
+            ].reverse(),
+            duration,
+            easing: motionTokens.curveAccelerateMin
+        }
+    };
+});
+/**
+ * @internal
+ */ export const OverlayDrawerMotion = createPresenceComponent(({ position, size, dir })=>{
+    const keyframes = [
+        {
+            /**
+       * TODO: Once the #31663 lands, we should update the RTL logic to use Motion APIs
+       * The work will be done in the #32817
+       */ transform: getPositionTransform(position, drawerCSSVars.drawerSizeVar, dir),
+            boxShadow: `0px ${tokens.colorTransparentBackground}`,
+            opacity: 0
+        },
+        {
+            transform: 'translate3d(0, 0, 0)',
+            boxShadow: tokens.shadow64,
+            opacity: 1
+        }
+    ];
+    const duration = durations[size];
+    return {
+        enter: {
+            keyframes,
+            duration,
+            easing: motionTokens.curveDecelerateMid
+        },
+        exit: {
+            keyframes: [
+                ...keyframes
+            ].reverse(),
+            duration,
+            easing: motionTokens.curveAccelerateMin
+        }
+    };
+});
+/**
+ * @internal
+ */ export const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size })=>{
+    const duration = durations[size];
+    const easing = motionTokens.curveLinear;
+    return {
+        enter: fadeAtom({
+            direction: 'enter',
+            duration,
+            easing
+        }),
+        exit: fadeAtom({
+            direction: 'exit',
+            duration,
+            easing
+        })
+    };
+});

node_modules/@fluentui/react-drawer/lib/shared/drawerSeparatorStyles.js

@@ -0,0 +1,13 @@
+import { tokens } from '@fluentui/react-theme';
+export const drawerSeparatorStyles = {
+    height: '1px',
+    position: 'absolute',
+    right: 0,
+    left: 0,
+    opacity: 0,
+    backgroundColor: tokens.colorNeutralStroke1,
+    transitionDuration: tokens.durationNormal,
+    transitionProperty: 'opacity',
+    transitionTimingFunction: tokens.curveEasyEase,
+    content: '""'
+};

node_modules/@fluentui/react-drawer/lib/shared/drawerSeparatorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/drawerSeparatorStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { GriffelStyle } from '@griffel/react';\n\nexport const drawerSeparatorStyles: GriffelStyle = {\n  height: '1px',\n  position: 'absolute',\n  right: 0,\n  left: 0,\n  opacity: 0,\n  backgroundColor: tokens.colorNeutralStroke1,\n  transitionDuration: tokens.durationNormal,\n  transitionProperty: 'opacity',\n  transitionTimingFunction: tokens.curveEasyEase,\n  content: '\"\"',\n};\n"],"names":["tokens","drawerSeparatorStyles","height","position","right","left","opacity","backgroundColor","colorNeutralStroke1","transitionDuration","durationNormal","transitionProperty","transitionTimingFunction","curveEasyEase","content"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,wBAAsC;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,OAAOQ,mBAAmB;IAC3CC,oBAAoBT,OAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,OAAOa,aAAa;IAC9CC,SAAS;AACX,EAAE"}

node_modules/@fluentui/react-drawer/lib/shared/useDrawerBaseStyles.styles.js

@@ -0,0 +1,98 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * CSS variable names used internally for uniform styling in Drawer.
+ */
+export const drawerCSSVars = {
+  drawerSizeVar: '--fui-Drawer--size'
+};
+/**
+ * Default shared styles for the Drawer component
+ */
+export const drawerDefaultStyles = {
+  overflow: 'hidden',
+  width: `var(${drawerCSSVars.drawerSizeVar})`,
+  maxWidth: '100vw',
+  height: 'auto',
+  maxHeight: '100vh',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  backgroundColor: tokens.colorNeutralBackground1,
+  color: tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */
+const useDrawerStyles = /*#__PURE__*/__styles({
+  start: {
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    u1mtju: ["f1xteiwb", "fsqykmd"],
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    j35jbq: ["fvfyk4", "frppm18"]
+  },
+  end: {
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    B4g9neb: ["fsqykmd", "f1xteiwb"],
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    oyh7mz: ["frppm18", "fvfyk4"]
+  },
+  bottom: {
+    B5kzvoi: "f1yab3r1",
+    Bhzewxz: "f198g47y"
+  },
+  small: {
+    Bjr0ffy: "f1exhnwo"
+  },
+  medium: {
+    Bjr0ffy: "fqofjzu"
+  },
+  large: {
+    Bjr0ffy: "fce6y3m"
+  },
+  full: {
+    Bjr0ffy: "fsdmzs6"
+  }
+}, {
+  d: [[".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".fvfyk4{right:auto;}", ".frppm18{left:auto;}", [".fsqykmd{border-left:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".f1xteiwb{border-right:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], ".f1yab3r1{bottom:0;}", ".f198g47y{top:auto;}", ".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".fsdmzs6{--fui-Drawer--size:100vw;}"]
+});
+export const useDrawerBottomBaseStyles = /*#__PURE__*/__styles({
+  small: {
+    Bjr0ffy: "f1exhnwo"
+  },
+  medium: {
+    Bjr0ffy: "fqofjzu"
+  },
+  large: {
+    Bjr0ffy: "fce6y3m"
+  },
+  full: {
+    Bjr0ffy: "f1rat34m"
+  }
+}, {
+  d: [".f1exhnwo{--fui-Drawer--size:320px;}", ".fqofjzu{--fui-Drawer--size:592px;}", ".fce6y3m{--fui-Drawer--size:940px;}", ".f1rat34m{--fui-Drawer--size:100%;}"]
+});
+export const useDrawerBaseClassNames = ({
+  position,
+  size
+}) => {
+  const baseStyles = useDrawerStyles();
+  const bottomBaseStyles = useDrawerBottomBaseStyles();
+  return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
+};

node_modules/@fluentui/react-drawer/lib/shared/useDrawerBaseStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","drawerCSSVars","drawerSizeVar","drawerDefaultStyles","overflow","width","maxWidth","height","maxHeight","boxSizing","display","flexDirection","alignItems","justifyContent","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","useDrawerStyles","start","h3c5rm","vrafjx","Bekrc4i","u1mtju","oyh7mz","j35jbq","end","zhjwy3","wvpqe5","ibv6hh","B4g9neb","bottom","B5kzvoi","Bhzewxz","small","Bjr0ffy","medium","large","full","d","p","useDrawerBottomBaseStyles","useDrawerBaseClassNames","position","size","baseStyles","bottomBaseStyles"],"sources":["useDrawerBaseStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * CSS variable names used internally for uniform styling in Drawer.\n */ export const drawerCSSVars = {\n    drawerSizeVar: '--fui-Drawer--size'\n};\n/**\n * Default shared styles for the Drawer component\n */ export const drawerDefaultStyles = {\n    overflow: 'hidden',\n    width: `var(${drawerCSSVars.drawerSizeVar})`,\n    maxWidth: '100vw',\n    height: 'auto',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1\n};\n/**\n * Shared dynamic styles for the Drawer component\n */ const useDrawerStyles = makeStyles({\n    /* Positioning */ start: {\n        borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        left: 0,\n        right: 'auto'\n    },\n    end: {\n        borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        right: 0,\n        left: 'auto'\n    },\n    bottom: {\n        bottom: 0,\n        top: 'auto'\n    },\n    /* Sizes */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100vw'\n    }\n});\nexport const useDrawerBottomBaseStyles = makeStyles({\n    /* Sizes for position bottom */ small: {\n        [drawerCSSVars.drawerSizeVar]: '320px'\n    },\n    medium: {\n        [drawerCSSVars.drawerSizeVar]: '592px'\n    },\n    large: {\n        [drawerCSSVars.drawerSizeVar]: '940px'\n    },\n    full: {\n        [drawerCSSVars.drawerSizeVar]: '100%'\n    }\n});\nexport const useDrawerBaseClassNames = ({ position, size })=>{\n    const baseStyles = useDrawerStyles();\n    const bottomBaseStyles = useDrawerBottomBaseStyles();\n    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C;AACA;AACA;AAAI,OAAO,MAAMC,aAAa,GAAG;EAC7BC,aAAa,EAAE;AACnB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,QAAQ,EAAE,QAAQ;EAClBC,KAAK,EAAE,OAAOJ,aAAa,CAACC,aAAa,GAAG;EAC5CI,QAAQ,EAAE,OAAO;EACjBC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,OAAO;EAClBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,cAAc,EAAE,YAAY;EAC5BC,eAAe,EAAEd,MAAM,CAACe,uBAAuB;EAC/CC,KAAK,EAAEhB,MAAM,CAACiB;AAClB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGpB,QAAA;EAAAqB,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAL,MAAA;IAAAD,MAAA;EAAA;EAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2B3B,CAAC;AACF,OAAO,MAAMC,yBAAyB,gBAAG3C,QAAA;EAAAoC,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;EAAAG,IAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAaxC,CAAC;AACF,OAAO,MAAMG,uBAAuB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAK,CAAC,KAAG;EACzD,MAAMC,UAAU,GAAG3B,eAAe,CAAC,CAAC;EACpC,MAAM4B,gBAAgB,GAAGL,yBAAyB,CAAC,CAAC;EACpD,OAAO1C,YAAY,CAAC8C,UAAU,CAACF,QAAQ,CAAC,EAAEA,QAAQ,KAAK,QAAQ,IAAIG,gBAAgB,CAACF,IAAI,CAAC,EAAED,QAAQ,KAAK,QAAQ,IAAIE,UAAU,CAACD,IAAI,CAAC,CAAC;AACzI,CAAC","ignoreList":[]}

node_modules/@fluentui/react-drawer/lib/shared/useDrawerBaseStyles.styles.raw.js

@@ -0,0 +1,73 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * CSS variable names used internally for uniform styling in Drawer.
+ */ export const drawerCSSVars = {
+    drawerSizeVar: '--fui-Drawer--size'
+};
+/**
+ * Default shared styles for the Drawer component
+ */ export const drawerDefaultStyles = {
+    overflow: 'hidden',
+    width: `var(${drawerCSSVars.drawerSizeVar})`,
+    maxWidth: '100vw',
+    height: 'auto',
+    maxHeight: '100vh',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */ const useDrawerStyles = makeStyles({
+    /* Positioning */ start: {
+        borderRight: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        left: 0,
+        right: 'auto'
+    },
+    end: {
+        borderLeft: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        right: 0,
+        left: 'auto'
+    },
+    bottom: {
+        bottom: 0,
+        top: 'auto'
+    },
+    /* Sizes */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100vw'
+    }
+});
+export const useDrawerBottomBaseStyles = makeStyles({
+    /* Sizes for position bottom */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100%'
+    }
+});
+export const useDrawerBaseClassNames = ({ position, size })=>{
+    const baseStyles = useDrawerStyles();
+    const bottomBaseStyles = useDrawerBottomBaseStyles();
+    return mergeClasses(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
+};

node_modules/@fluentui/react-drawer/lib/shared/useDrawerBaseStyles.styles.raw.js.map

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

node_modules/@fluentui/react-drawer/lib/shared/useDrawerDefaultProps.js

@@ -0,0 +1,9 @@
+export function useDrawerDefaultProps(props) {
+    const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;
+    return {
+        size,
+        position,
+        open,
+        unmountOnClose
+    };
+}

node_modules/@fluentui/react-drawer/lib/shared/useDrawerDefaultProps.js.map

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