feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-drawer/lib-commonjs/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":";;;;;iEAAuB,QAAQ"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "mergePresenceSlots", {
+    enumerable: true,
+    get: function() {
+        return mergePresenceSlots;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+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-commonjs/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":";;;;+BASgBC;;;;;;;iEARO,QAAQ;AAQxB,4BAILC,SAA2E,EAC3EC,SAAkD,EAClDC,MAA4B;IAE5B,IAAIF,cAAc,MAAM;QACtB,OAAO;IACT;IAEA,OAAO;QACL,GAAGA,SAAS;QACZG,UAAU,CAACC,GAAGC;YACZ,IAAIL,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWG,QAAQ,EAAE;gBACvB,OAAOH,UAAUG,QAAQ,CAACF,WAAW;oBAAE,GAAGI,KAAK;oBAAE,GAAGH,MAAM;gBAAC;YAC7D;YAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACD,WAAAA;gBAAW,GAAGI,KAAK;gBAAG,GAAGH,MAAM;eAC7BG,MAAMF,QAAQ;QAGrB;IACF;AACF"}

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

@@ -0,0 +1,127 @@
+"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, {
+    InlineDrawerMotion: function() {
+        return InlineDrawerMotion;
+    },
+    OverlayDrawerMotion: function() {
+        return OverlayDrawerMotion;
+    },
+    OverlaySurfaceBackdropMotion: function() {
+        return OverlaySurfaceBackdropMotion;
+    },
+    getPositionTransform: function() {
+        return getPositionTransform;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _reacttheme = require("@fluentui/react-theme");
+const _useDrawerBaseStylesstyles = require("./useDrawerBaseStyles.styles");
+const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
+const durations = {
+    small: _reactmotion.motionTokens.durationGentle,
+    medium: _reactmotion.motionTokens.durationSlow,
+    large: _reactmotion.motionTokens.durationSlower,
+    full: _reactmotion.motionTokens.durationUltraSlow
+};
+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)';
+}
+const InlineDrawerMotion = (0, _reactmotion.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, _useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar, dir),
+            opacity: 0
+        },
+        {
+            transform: 'translate3d(0, 0, 0)',
+            opacity: 1
+        }
+    ];
+    const duration = durations[size];
+    return {
+        enter: {
+            keyframes,
+            duration,
+            easing: _reactmotion.motionTokens.curveDecelerateMid
+        },
+        exit: {
+            keyframes: [
+                ...keyframes
+            ].reverse(),
+            duration,
+            easing: _reactmotion.motionTokens.curveAccelerateMin
+        }
+    };
+});
+const OverlayDrawerMotion = (0, _reactmotion.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, _useDrawerBaseStylesstyles.drawerCSSVars.drawerSizeVar, dir),
+            boxShadow: `0px ${_reacttheme.tokens.colorTransparentBackground}`,
+            opacity: 0
+        },
+        {
+            transform: 'translate3d(0, 0, 0)',
+            boxShadow: _reacttheme.tokens.shadow64,
+            opacity: 1
+        }
+    ];
+    const duration = durations[size];
+    return {
+        enter: {
+            keyframes,
+            duration,
+            easing: _reactmotion.motionTokens.curveDecelerateMid
+        },
+        exit: {
+            keyframes: [
+                ...keyframes
+            ].reverse(),
+            duration,
+            easing: _reactmotion.motionTokens.curveAccelerateMin
+        }
+    };
+});
+const OverlaySurfaceBackdropMotion = (0, _reactmotion.createPresenceComponent)(({ size })=>{
+    const duration = durations[size];
+    const easing = _reactmotion.motionTokens.curveLinear;
+    return {
+        enter: (0, _reactmotioncomponentspreview.fadeAtom)({
+            direction: 'enter',
+            duration,
+            easing
+        }),
+        exit: (0, _reactmotioncomponentspreview.fadeAtom)({
+            direction: 'exit',
+            duration,
+            easing
+        })
+    };
+});

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "drawerSeparatorStyles", {
+    enumerable: true,
+    get: function() {
+        return drawerSeparatorStyles;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const drawerSeparatorStyles = {
+    height: '1px',
+    position: 'absolute',
+    right: 0,
+    left: 0,
+    opacity: 0,
+    backgroundColor: _reacttheme.tokens.colorNeutralStroke1,
+    transitionDuration: _reacttheme.tokens.durationNormal,
+    transitionProperty: 'opacity',
+    transitionTimingFunction: _reacttheme.tokens.curveEasyEase,
+    content: '""'
+};

node_modules/@fluentui/react-drawer/lib-commonjs/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":";;;;+BAGaC;;;;;;4BAHU,wBAAwB;AAGxC,8BAA4C;IACjDC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,iBAAiBP,kBAAAA,CAAOQ,mBAAmB;IAC3CC,oBAAoBT,kBAAAA,CAAOU,cAAc;IACzCC,oBAAoB;IACpBC,0BAA0BZ,kBAAAA,CAAOa,aAAa;IAC9CC,SAAS;AACX,EAAE"}

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

@@ -0,0 +1,161 @@
+'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, {
+    drawerCSSVars: function() {
+        return drawerCSSVars;
+    },
+    drawerDefaultStyles: function() {
+        return drawerDefaultStyles;
+    },
+    useDrawerBaseClassNames: function() {
+        return useDrawerBaseClassNames;
+    },
+    useDrawerBottomBaseStyles: function() {
+        return useDrawerBottomBaseStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const drawerCSSVars = {
+    drawerSizeVar: '--fui-Drawer--size'
+};
+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: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */ const useDrawerStyles = /*#__PURE__*/ (0, _react.__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;}"
+    ]
+});
+const useDrawerBottomBaseStyles = /*#__PURE__*/ (0, _react.__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%;}"
+    ]
+});
+const useDrawerBaseClassNames = ({ position, size })=>{
+    const baseStyles = useDrawerStyles();
+    const bottomBaseStyles = useDrawerBottomBaseStyles();
+    return (0, _react.mergeClasses)(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
+};

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

@@ -0,0 +1 @@
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKKG,aAAa;;;uBAKM;;;IA0DvByC,uBAAuB;;;6BAdE;;;;uBArDG,gBAAgB;4BAClC,uBAAuB;AAGnC,sBAAsB;IAC7BxC,aAAa,EAAE;AACnB,CAAC;AAGU,MAAMC,sBAAsB;IACnCC,QAAQ,EAAE,QAAQ;IAClBC,KAAK,EAAE,CAAA,IAAA,EAAOJ,aAAa,CAACC,aAAa,CAAA,CAAA,CAAG;IAC5CI,QAAQ,EAAE,OAAO;IACjBC,MAAM,EAAE,MAAM;IACdC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,YAAY;IACvBC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,QAAQ;IACvBC,UAAU,EAAE,YAAY;IACxBC,cAAc,EAAE,YAAY;IAC5BC,eAAe,EAAEd,kBAAM,CAACe,uBAAuB;IAC/CC,KAAK,EAAEhB,kBAAM,CAACiB,uBAAAA;AAClB,CAAC;AACD;;CAEA,GAAI,MAAMC,eAAe,GAAA,WAAA,GAAGpB,mBAAA,EAAA;IAAAqB,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAL,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAD,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,IAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA2B3B,CAAC;AACK,MAAMC,4BAAyB,WAAA,OAAG3C,eAAA,EAAA;IAAAoC,KAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,IAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAaxC,CAAC;AACK,gCAAgCG,CAAC,EAAEC,QAAQ,EAAEC,IAAAA,EAAM,KAAG;IACzD,MAAMC,UAAU,GAAG3B,eAAe,CAAC,CAAC;IACpC,MAAM4B,gBAAgB,GAAGL,yBAAyB,CAAC,CAAC;IACpD,WAAO1C,mBAAY,EAAC8C,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"}

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

@@ -0,0 +1,93 @@
+'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, {
+    drawerCSSVars: function() {
+        return drawerCSSVars;
+    },
+    drawerDefaultStyles: function() {
+        return drawerDefaultStyles;
+    },
+    useDrawerBaseClassNames: function() {
+        return useDrawerBaseClassNames;
+    },
+    useDrawerBottomBaseStyles: function() {
+        return useDrawerBottomBaseStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const drawerCSSVars = {
+    drawerSizeVar: '--fui-Drawer--size'
+};
+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: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1
+};
+/**
+ * Shared dynamic styles for the Drawer component
+ */ const useDrawerStyles = (0, _react.makeStyles)({
+    /* Positioning */ start: {
+        borderRight: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        left: 0,
+        right: 'auto'
+    },
+    end: {
+        borderLeft: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.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'
+    }
+});
+const useDrawerBottomBaseStyles = (0, _react.makeStyles)({
+    /* Sizes for position bottom */ small: {
+        [drawerCSSVars.drawerSizeVar]: '320px'
+    },
+    medium: {
+        [drawerCSSVars.drawerSizeVar]: '592px'
+    },
+    large: {
+        [drawerCSSVars.drawerSizeVar]: '940px'
+    },
+    full: {
+        [drawerCSSVars.drawerSizeVar]: '100%'
+    }
+});
+const useDrawerBaseClassNames = ({ position, size })=>{
+    const baseStyles = useDrawerStyles();
+    const bottomBaseStyles = useDrawerBottomBaseStyles();
+    return (0, _react.mergeClasses)(baseStyles[position], position === 'bottom' && bottomBaseStyles[size], position !== 'bottom' && baseStyles[size]);
+};

node_modules/@fluentui/react-drawer/lib-commonjs/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;;;;;;;;;;;;IAUaG,aAAAA;;;uBAOAE;;;2BAqEA+B;;;6BAhBAD;;;;uBApEoD,iBAAiB;4BAC3D,wBAAwB;AAOxC,sBAAsB;IAC3B/B,eAAe;AACjB,EAAE;AAKK,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,kBAAAA,CAAOe,uBAAuB;IAC/CC,OAAOhB,kBAAAA,CAAOiB,uBAAuB;AACvC,EAAE;AAEF;;CAEC,GACD,MAAMC,sBAAkBpB,iBAAAA,EAAW;IACjC,eAAe,GACfqB,OAAO;QACLC,aAAa,GAAGpB,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,sBAAsB,EAAE;QAE/EC,MAAM;QACNC,OAAO;IACT;IACAC,KAAK;QACHC,YAAY,GAAG1B,kBAAAA,CAAOqB,eAAe,CAAC,OAAO,EAAErB,kBAAAA,CAAOsB,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;AAEO,MAAM+B,gCAA4BnC,iBAAAA,EAAW;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;AAEI,MAAMgC,0BAA0B,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAmB;IACzE,MAAMC,aAAanB;IACnB,MAAMoB,mBAAmBL;IAEzB,WAAOlC,mBAAAA,EACLsC,UAAU,CAACF,SAAS,EACpBA,aAAa,YAAYG,gBAAgB,CAACF,KAAK,EAC/CD,aAAa,YAAYE,UAAU,CAACD,KAAK;AAE7C,EAAE"}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDrawerDefaultProps", {
+    enumerable: true,
+    get: function() {
+        return useDrawerDefaultProps;
+    }
+});
+function useDrawerDefaultProps(props) {
+    const { open = false, size = 'small', position = 'start', unmountOnClose = true } = props;
+    return {
+        size,
+        position,
+        open,
+        unmountOnClose
+    };
+}

node_modules/@fluentui/react-drawer/lib-commonjs/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":";;;;;;;;;;AAEO,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"}