feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DrawerHeader", {
+    enumerable: true,
+    get: function() {
+        return DrawerHeader;
+    }
+});
+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 _useDrawerHeader = require("./useDrawerHeader");
+const _renderDrawerHeader = require("./renderDrawerHeader");
+const _useDrawerHeaderStylesstyles = require("./useDrawerHeaderStyles.styles");
+const DrawerHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useDrawerHeader.useDrawerHeader_unstable)(props, ref);
+    (0, _useDrawerHeaderStylesstyles.useDrawerHeaderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDrawerHeaderStyles_unstable')(state);
+    return (0, _renderDrawerHeader.renderDrawerHeader_unstable)(state);
+});
+DrawerHeader.displayName = 'DrawerHeader';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.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 { useDrawerHeader_unstable } from './useDrawerHeader';\nimport { renderDrawerHeader_unstable } from './renderDrawerHeader';\nimport { useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';\nimport type { DrawerHeaderProps } from './DrawerHeader.types';\n\n/**\n * DrawerHeader provides a structured header for the drawer component.\n */\nexport const DrawerHeader: ForwardRefComponent<DrawerHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerHeader_unstable(props, ref);\n\n  useDrawerHeaderStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerHeaderStyles_unstable')(state);\n\n  return renderDrawerHeader_unstable(state);\n});\n\nDrawerHeader.displayName = 'DrawerHeader';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerHeader_unstable","renderDrawerHeader_unstable","useDrawerHeaderStyles_unstable","DrawerHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;iCAErC,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;AAMzE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQP,yCAAAA,EAAyBK,OAAOC;QAE9CJ,2DAAAA,EAA+BK;QAC/BR,gDAAAA,EAA4B,kCAAkCQ;IAE9D,WAAON,+CAAAA,EAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/DrawerHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DrawerScrollState } from '../../shared/DrawerBase.types';\n\nexport type DrawerHeaderSlots = {\n  /**\n   * The root of the DrawerHeader.\n   */\n  root: Slot<'header'>;\n};\n\n/**\n * DrawerHeader Props\n */\nexport type DrawerHeaderProps = ComponentProps<DrawerHeaderSlots>;\n\n/**\n * State used in rendering DrawerHeader\n */\nexport type DrawerHeaderState = ComponentState<DrawerHeaderSlots> & {\n  scrollState: DrawerScrollState;\n};\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAEE"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/DrawerHeader/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, {
+    DrawerHeader: function() {
+        return _DrawerHeader.DrawerHeader;
+    },
+    drawerHeaderClassNames: function() {
+        return _useDrawerHeaderStylesstyles.drawerHeaderClassNames;
+    },
+    renderDrawerHeader_unstable: function() {
+        return _renderDrawerHeader.renderDrawerHeader_unstable;
+    },
+    useDrawerHeaderStyles_unstable: function() {
+        return _useDrawerHeaderStylesstyles.useDrawerHeaderStyles_unstable;
+    },
+    useDrawerHeader_unstable: function() {
+        return _useDrawerHeader.useDrawerHeader_unstable;
+    }
+});
+const _DrawerHeader = require("./DrawerHeader");
+const _renderDrawerHeader = require("./renderDrawerHeader");
+const _useDrawerHeader = require("./useDrawerHeader");
+const _useDrawerHeaderStylesstyles = require("./useDrawerHeaderStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/index.ts"],"sourcesContent":["export { DrawerHeader } from './DrawerHeader';\nexport type { DrawerHeaderProps, DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\nexport { renderDrawerHeader_unstable } from './renderDrawerHeader';\nexport { useDrawerHeader_unstable } from './useDrawerHeader';\nexport { drawerHeaderClassNames, useDrawerHeaderStyles_unstable } from './useDrawerHeaderStyles.styles';\n"],"names":["DrawerHeader","renderDrawerHeader_unstable","useDrawerHeader_unstable","drawerHeaderClassNames","useDrawerHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAIZG,mDAAsB;;;eAFtBF,+CAA2B;;;eAEHG,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/renderDrawerHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types';\n\n/**\n * Render the final JSX of DrawerHeader\n */\nexport const renderDrawerHeader_unstable = (state: DrawerHeaderState): JSXElement => {\n  assertSlots<DrawerHeaderSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerHeader_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAQjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDrawerHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return useDrawerHeader_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _drawerContext = require("../../contexts/drawerContext");
+const useDrawerHeader_unstable = (props, ref)=>{
+    const { scrollState } = (0, _drawerContext.useDrawerContext_unstable)();
+    return {
+        components: {
+            root: 'header'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('header', {
+            ref,
+            role: 'none',
+            ...props
+        }), {
+            elementType: 'header'
+        }),
+        scrollState
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useDrawerContext_unstable } from '../../contexts/drawerContext';\n\nimport type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';\n\n/**\n * Create the state required to render DrawerHeader.\n *\n * The returned state can be modified with hooks such as useDrawerHeaderStyles_unstable,\n * before being passed to renderDrawerHeader_unstable.\n *\n * @param props - props from this instance of DrawerHeader\n * @param ref - reference to root HTMLElement of DrawerHeader\n */\nexport const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Ref<HTMLElement>): DrawerHeaderState => {\n  const { scrollState } = useDrawerContext_unstable();\n\n  return {\n    components: {\n      root: 'header',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('header', {\n        ref,\n        role: 'none', // until header and footer elements can be scoped to a dialog, this is needed\n        ...props,\n      }),\n      { elementType: 'header' },\n    ),\n\n    scrollState,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDrawerContext_unstable","useDrawerHeader_unstable","props","ref","scrollState","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;+BAEjC,+BAA+B;AAalE,MAAMI,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,WAAW,EAAE,OAAGJ,wCAAAA;IAExB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,UAAU;YACjCK;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAS;QAG1BL;IACF;AACF,EAAE"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js

@@ -0,0 +1,77 @@
+'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, {
+    drawerHeaderClassNames: function() {
+        return drawerHeaderClassNames;
+    },
+    useDrawerHeaderStyles_unstable: function() {
+        return useDrawerHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const drawerHeaderClassNames = {
+    root: 'fui-DrawerHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r3ovn4i", null, [
+    ".r3ovn4i{width:100%;max-width:100%;padding:var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);gap:var(--spacingHorizontalS);align-self:stretch;display:flex;flex-direction:column;box-sizing:border-box;position:relative;z-index:2;}"
+]);
+const useDrawerHeaderStyles = /*#__PURE__*/ (0, _react.__styles)({
+    separator: {
+        Dlnsje: "fxnjyrl",
+        E3zdtr: "f1mdlcz9",
+        B1piin3: [
+            "f15yvnhg",
+            "f1n6gb5g"
+        ],
+        Eqx8gd: [
+            "f1n6gb5g",
+            "f15yvnhg"
+        ],
+        Bp15pi3: "f1564nw5",
+        Bjyk6c5: "fdlpgxj",
+        F2fol1: "f15cmg8x",
+        Ba2ppi3: "f3f8dgl",
+        B1dyfl9: "fjvo4va",
+        Bsft5z2: "f13zj6fq",
+        By385i5: "fo72kxq"
+    },
+    separatorVisible: {
+        Bp15pi3: "fjsqi2x"
+    }
+}, {
+    d: [
+        ".fxnjyrl::after{height:1px;}",
+        ".f1mdlcz9::after{position:absolute;}",
+        ".f15yvnhg::after{right:0;}",
+        ".f1n6gb5g::after{left:0;}",
+        ".f1564nw5::after{opacity:0;}",
+        ".fdlpgxj::after{background-color:var(--colorNeutralStroke1);}",
+        ".f15cmg8x::after{transition-duration:var(--durationNormal);}",
+        ".f3f8dgl::after{transition-property:opacity;}",
+        ".fjvo4va::after{transition-timing-function:var(--curveEasyEase);}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".fo72kxq::after{bottom:0;}",
+        ".fjsqi2x::after{opacity:1;}"
+    ]
+});
+const useDrawerHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootStyles = useDrawerHeaderStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'bottom'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDrawerHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\nexport const drawerHeaderClassNames = {\n    root: 'fui-DrawerHeader'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    width: '100%',\n    maxWidth: '100%',\n    padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n    gap: tokens.spacingHorizontalS,\n    alignSelf: 'stretch',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    position: 'relative',\n    zIndex: 2\n});\nconst useDrawerHeaderStyles = makeStyles({\n    separator: {\n        '::after': {\n            ...drawerSeparatorStyles,\n            bottom: 0\n        }\n    },\n    separatorVisible: {\n        '::after': {\n            opacity: 1\n        }\n    }\n});\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */ export const useDrawerHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const rootStyles = useDrawerHeaderStyles();\n    state.root.className = mergeClasses(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [\n        'middle',\n        'bottom'\n    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","useDrawerHeaderStyles","separator","Dlnsje","E3zdtr","B1piin3","Eqx8gd","Bp15pi3","Bjyk6c5","F2fol1","Ba2ppi3","B1dyfl9","Bsft5z2","By385i5","separatorVisible","d","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,sBAAsB;;;kCAgCY;;;;uBAnCW,gBAAgB;AAGnE,+BAA+B;IAClCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;CAWrB,CAAC;AACF,MAAMQ,qBAAqB,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAQ,SAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAP,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAQ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY7B,CAAC;AAGS,MAAMC,kCAAkCC,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAMmB,UAAU,GAAGlB,qBAAqB,CAAC,CAAC;IAC1CgB,KAAK,CAAClB,IAAI,CAACqB,SAAS,OAAGzB,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAEmB,MAAM,EAAED,KAAK,CAACI,WAAW,KAAK,MAAM,IAAIF,UAAU,CAACjB,SAAS,EAAE;QAC3H,QAAQ;QACR,QAAQ;KACX,CAACoB,QAAQ,CAACL,KAAK,CAACI,WAAW,CAAC,IAAIF,UAAU,CAACL,gBAAgB,EAAEG,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IACnF,OAAOH,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js

@@ -0,0 +1,62 @@
+'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, {
+    drawerHeaderClassNames: function() {
+        return drawerHeaderClassNames;
+    },
+    useDrawerHeaderStyles_unstable: function() {
+        return useDrawerHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _drawerSeparatorStyles = require("../../shared/drawerSeparatorStyles");
+const drawerHeaderClassNames = {
+    root: 'fui-DrawerHeader'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    width: '100%',
+    maxWidth: '100%',
+    padding: `${_reacttheme.tokens.spacingVerticalXXL} ${_reacttheme.tokens.spacingHorizontalXXL} ${_reacttheme.tokens.spacingVerticalS}`,
+    gap: _reacttheme.tokens.spacingHorizontalS,
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    position: 'relative',
+    zIndex: 2
+});
+const useDrawerHeaderStyles = (0, _react.makeStyles)({
+    separator: {
+        '::after': {
+            ..._drawerSeparatorStyles.drawerSeparatorStyles,
+            bottom: 0
+        }
+    },
+    separatorVisible: {
+        '::after': {
+            opacity: 1
+        }
+    }
+});
+const useDrawerHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const rootStyles = useDrawerHeaderStyles();
+    state.root.className = (0, _react.mergeClasses)(drawerHeaderClassNames.root, styles, state.scrollState !== 'none' && rootStyles.separator, [
+        'middle',
+        'bottom'
+    ].includes(state.scrollState) && rootStyles.separatorVisible, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/DrawerHeader/useDrawerHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerHeader/useDrawerHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport { drawerSeparatorStyles } from '../../shared/drawerSeparatorStyles';\n\nimport type { DrawerHeaderSlots, DrawerHeaderState } from './DrawerHeader.types';\n\nexport const drawerHeaderClassNames: SlotClassNames<DrawerHeaderSlots> = {\n  root: 'fui-DrawerHeader',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  width: '100%',\n  maxWidth: '100%',\n  padding: `${tokens.spacingVerticalXXL} ${tokens.spacingHorizontalXXL} ${tokens.spacingVerticalS}`,\n  gap: tokens.spacingHorizontalS,\n  alignSelf: 'stretch',\n  display: 'flex',\n  flexDirection: 'column',\n  boxSizing: 'border-box',\n  position: 'relative',\n  zIndex: 2,\n});\n\nconst useDrawerHeaderStyles = makeStyles({\n  separator: {\n    '::after': {\n      ...drawerSeparatorStyles,\n      bottom: 0,\n    },\n  },\n\n  separatorVisible: {\n    '::after': {\n      opacity: 1,\n    },\n  },\n});\n\n/**\n * Apply styling to the DrawerHeader slots based on the state\n */\nexport const useDrawerHeaderStyles_unstable = (state: DrawerHeaderState): DrawerHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const rootStyles = useDrawerHeaderStyles();\n\n  state.root.className = mergeClasses(\n    drawerHeaderClassNames.root,\n    styles,\n    state.scrollState !== 'none' && rootStyles.separator,\n    ['middle', 'bottom'].includes(state.scrollState) && rootStyles.separatorVisible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","drawerSeparatorStyles","drawerHeaderClassNames","root","useStyles","width","maxWidth","padding","spacingVerticalXXL","spacingHorizontalXXL","spacingVerticalS","gap","spacingHorizontalS","alignSelf","display","flexDirection","boxSizing","position","zIndex","useDrawerHeaderStyles","separator","bottom","separatorVisible","opacity","useDrawerHeaderStyles_unstable","state","styles","rootStyles","className","scrollState","includes"],"mappings":"AAAA;;;;;;;;;;;;IAUaK,sBAAAA;;;kCAsCAsB;;;;uBA9C6C,iBAAiB;4BACpD,wBAAwB;uCAGT,qCAAqC;AAIpE,+BAAkE;IACvErB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,OAAO;IACPC,UAAU;IACVC,SAAS,GAAGP,kBAAAA,CAAOQ,kBAAkB,CAAC,CAAC,EAAER,kBAAAA,CAAOS,oBAAoB,CAAC,CAAC,EAAET,kBAAAA,CAAOU,gBAAgB,EAAE;IACjGC,KAAKX,kBAAAA,CAAOY,kBAAkB;IAC9BC,WAAW;IACXC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,UAAU;IACVC,QAAQ;AACV;AAEA,MAAMC,4BAAwBrB,iBAAAA,EAAW;IACvCsB,WAAW;QACT,WAAW;YACT,GAAGnB,4CAAqB;YACxBoB,QAAQ;QACV;IACF;IAEAC,kBAAkB;QAChB,WAAW;YACTC,SAAS;QACX;IACF;AACF;AAKO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAAStB;IACf,MAAMuB,aAAaR;IAEnBM,MAAMtB,IAAI,CAACyB,SAAS,OAAG7B,mBAAAA,EACrBG,uBAAuBC,IAAI,EAC3BuB,QACAD,MAAMI,WAAW,KAAK,UAAUF,WAAWP,SAAS,EACpD;QAAC;QAAU;KAAS,CAACU,QAAQ,CAACL,MAAMI,WAAW,KAAKF,WAAWL,gBAAgB,EAC/EG,MAAMtB,IAAI,CAACyB,SAAS;IAGtB,OAAOH;AACT,EAAE"}