feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/ToastFooter.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToastFooter", {
+    enumerable: true,
+    get: function() {
+        return ToastFooter;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToastFooter = require("./useToastFooter");
+const _renderToastFooter = require("./renderToastFooter");
+const _useToastFooterStylesstyles = require("./useToastFooterStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ToastFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useToastFooter.useToastFooter_unstable)(props, ref);
+    (0, _useToastFooterStylesstyles.useToastFooterStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToastFooterStyles_unstable')(state);
+    return (0, _renderToastFooter.renderToastFooter_unstable)(state);
+});
+ToastFooter.displayName = 'ToastFooter';

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/ToastFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/ToastFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToastFooter_unstable } from './useToastFooter';\nimport { renderToastFooter_unstable } from './renderToastFooter';\nimport { useToastFooterStyles_unstable } from './useToastFooterStyles.styles';\nimport type { ToastFooterProps } from './ToastFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastFooter component\n */\nexport const ToastFooter: ForwardRefComponent<ToastFooterProps> = React.forwardRef((props, ref) => {\n  const state = useToastFooter_unstable(props, ref);\n\n  useToastFooterStyles_unstable(state);\n  useCustomStyleHook_unstable('useToastFooterStyles_unstable')(state);\n\n  return renderToastFooter_unstable(state);\n});\n\nToastFooter.displayName = 'ToastFooter';\n"],"names":["React","useToastFooter_unstable","renderToastFooter_unstable","useToastFooterStyles_unstable","useCustomStyleHook_unstable","ToastFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/ToastFooter.types.js

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

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/ToastFooter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/ToastFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToastFooterSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToastFooter Props\n */\nexport type ToastFooterProps = ComponentProps<ToastFooterSlots> & {};\n\n/**\n * State used in rendering ToastFooter\n */\nexport type ToastFooterState = ComponentState<ToastFooterSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAgE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/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, {
+    ToastFooter: function() {
+        return _ToastFooter.ToastFooter;
+    },
+    renderToastFooter_unstable: function() {
+        return _renderToastFooter.renderToastFooter_unstable;
+    },
+    toastFooterClassNames: function() {
+        return _useToastFooterStylesstyles.toastFooterClassNames;
+    },
+    useToastFooterStyles_unstable: function() {
+        return _useToastFooterStylesstyles.useToastFooterStyles_unstable;
+    },
+    useToastFooter_unstable: function() {
+        return _useToastFooter.useToastFooter_unstable;
+    }
+});
+const _ToastFooter = require("./ToastFooter");
+const _renderToastFooter = require("./renderToastFooter");
+const _useToastFooter = require("./useToastFooter");
+const _useToastFooterStylesstyles = require("./useToastFooterStyles.styles");

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/index.ts"],"sourcesContent":["export { ToastFooter } from './ToastFooter';\nexport type { ToastFooterProps, ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nexport { renderToastFooter_unstable } from './renderToastFooter';\nexport { useToastFooter_unstable } from './useToastFooter';\nexport { toastFooterClassNames, useToastFooterStyles_unstable } from './useToastFooterStyles.styles';\n"],"names":["ToastFooter","renderToastFooter_unstable","useToastFooter_unstable","toastFooterClassNames","useToastFooterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAEXC,6CAA0B;;;eAE1BE,iDAAqB;;;eAAEC,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/renderToastFooter.js

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

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/renderToastFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/renderToastFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToastFooterState, ToastFooterSlots } from './ToastFooter.types';\n\n/**\n * Render the final JSX of ToastFooter\n */\nexport const renderToastFooter_unstable = (state: ToastFooterState): JSXElement => {\n  assertSlots<ToastFooterSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderToastFooter_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/useToastFooter.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToastFooter_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToastFooter_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 useToastFooter_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/useToastFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/useToastFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastFooterProps, ToastFooterState } from './ToastFooter.types';\n\n/**\n * Create the state required to render ToastFooter.\n *\n * The returned state can be modified with hooks such as useToastFooterStyles_unstable,\n * before being passed to renderToastFooter_unstable.\n *\n * @param props - props from this instance of ToastFooter\n * @param ref - reference to root HTMLElement of ToastFooter\n */\nexport const useToastFooter_unstable = (props: ToastFooterProps, ref: React.Ref<HTMLElement>): ToastFooterState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToastFooter_unstable","props","ref","components","root","always","elementType"],"mappings":";;;;+BAaaG;;;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,gCAAgC,CAACC,OAAyBC;IAC/D,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,oBAAAA,CAAKM,MAAM,KACfP,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js

@@ -0,0 +1,34 @@
+'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, {
+    toastFooterClassNames: function() {
+        return toastFooterClassNames;
+    },
+    useToastFooterStyles_unstable: function() {
+        return useToastFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toastFooterClassNames = {
+    root: 'fui-ToastFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r56x6h2", null, [
+    ".r56x6h2{padding-top:16px;grid-column-start:2;grid-column-end:3;display:flex;align-items:center;gap:14px;}"
+]);
+const useToastFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const toastFooterClassNames = {\n    root: 'fui-ToastFooter'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseClassName = makeResetStyles({\n    paddingTop: '16px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '14px'\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;yBAEsB;;;iCAeY;;;;uBAhBA,gBAAgB;AACvD,MAAME,wBAAwB;IACjCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAOhC,CAAC;AAGS,MAAMK,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;IAChDE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEI,iBAAiB,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js

@@ -0,0 +1,39 @@
+'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, {
+    toastFooterClassNames: function() {
+        return toastFooterClassNames;
+    },
+    useToastFooterStyles_unstable: function() {
+        return useToastFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toastFooterClassNames = {
+    root: 'fui-ToastFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = (0, _react.makeResetStyles)({
+    paddingTop: '16px',
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px'
+});
+const useToastFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastFooterClassNames: SlotClassNames<ToastFooterSlots> = {\n  root: 'fui-ToastFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  paddingTop: '16px',\n  gridColumnStart: 2,\n  gridColumnEnd: 3,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '14px',\n});\n\n/**\n * Apply styling to the ToastFooter slots based on the state\n */\nexport const useToastFooterStyles_unstable = (state: ToastFooterState): ToastFooterState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","paddingTop","gridColumnStart","gridColumnEnd","display","alignItems","gap","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA;;;;;;;;;;;;yBAMaE;;;iCAmBAS;;;;uBAvBiC,iBAAiB;AAIxD,MAAMT,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,2BAAuBJ,sBAAAA,EAAgB;IAC3CK,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IACfC,SAAS;IACTC,YAAY;IACZC,KAAK;AACP;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,oBAAoBT;IAC1BQ,MAAMT,IAAI,CAACW,SAAS,OAAGb,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT,EAAE"}