feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToastBody", {
+    enumerable: true,
+    get: function() {
+        return ToastBody;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToastBody = require("./useToastBody");
+const _renderToastBody = require("./renderToastBody");
+const _useToastBodyStylesstyles = require("./useToastBodyStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ToastBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useToastBody.useToastBody_unstable)(props, ref);
+    (0, _useToastBodyStylesstyles.useToastBodyStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToastBodyStyles_unstable')(state);
+    return (0, _renderToastBody.renderToastBody_unstable)(state);
+});
+ToastBody.displayName = 'ToastBody';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/ToastBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToastBody_unstable } from './useToastBody';\nimport { renderToastBody_unstable } from './renderToastBody';\nimport { useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\nimport type { ToastBodyProps } from './ToastBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastBody component\n */\nexport const ToastBody: ForwardRefComponent<ToastBodyProps> = React.forwardRef((props, ref) => {\n  const state = useToastBody_unstable(props, ref);\n\n  useToastBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useToastBodyStyles_unstable')(state);\n\n  return renderToastBody_unstable(state);\n});\n\nToastBody.displayName = 'ToastBody';\n"],"names":["React","useToastBody_unstable","renderToastBody_unstable","useToastBodyStyles_unstable","useCustomStyleHook_unstable","ToastBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAG9B,kCAAkC;AAKvE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/ToastBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type ToastBodySlots = {\n  root: Slot<'div'>;\n  subtitle?: Slot<'div'>;\n};\n\n/**\n * ToastBody Props\n */\nexport type ToastBodyProps = ComponentProps<ToastBodySlots> & {};\n\n/**\n * State used in rendering ToastBody\n */\nexport type ToastBodyState = ComponentState<ToastBodySlots> & {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n};\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAEE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastBody/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, {
+    ToastBody: function() {
+        return _ToastBody.ToastBody;
+    },
+    renderToastBody_unstable: function() {
+        return _renderToastBody.renderToastBody_unstable;
+    },
+    toastBodyClassNames: function() {
+        return _useToastBodyStylesstyles.toastBodyClassNames;
+    },
+    useToastBodyStyles_unstable: function() {
+        return _useToastBodyStylesstyles.useToastBodyStyles_unstable;
+    },
+    useToastBody_unstable: function() {
+        return _useToastBody.useToastBody_unstable;
+    }
+});
+const _ToastBody = require("./ToastBody");
+const _renderToastBody = require("./renderToastBody");
+const _useToastBody = require("./useToastBody");
+const _useToastBodyStylesstyles = require("./useToastBodyStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/index.ts"],"sourcesContent":["export { ToastBody } from './ToastBody';\nexport type { ToastBodyProps, ToastBodySlots, ToastBodyState } from './ToastBody.types';\nexport { renderToastBody_unstable } from './renderToastBody';\nexport { useToastBody_unstable } from './useToastBody';\nexport { toastBodyClassNames, useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\n"],"names":["ToastBody","renderToastBody_unstable","useToastBody_unstable","toastBodyClassNames","useToastBodyStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAETC,yCAAwB;;;eAExBE,6CAAmB;;;eAAEC,qDAA2B;;;eADhDF,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CACU,8BAA8B"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderToastBody_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderToastBody_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderToastBody_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}),
+            state.subtitle ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.subtitle, {}) : null
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/renderToastBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToastBodyState, ToastBodySlots } from './ToastBody.types';\n\n/**\n * Render the final JSX of ToastBody\n */\nexport const renderToastBody_unstable = (state: ToastBodyState): JSXElement => {\n  assertSlots<ToastBodySlots>(state);\n\n  return (\n    <>\n      <state.root />\n      {state.subtitle ? <state.subtitle /> : null}\n    </>\n  );\n};\n"],"names":["assertSlots","renderToastBody_unstable","state","root","subtitle"],"mappings":";;;;+BAUaC;;;;;;4BATb,UAAiD;gCAErB,4BAA4B;AAOjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;8BACE,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;YACVD,MAAME,QAAQ,GAAA,WAAA,OAAG,eAAA,EAACF,MAAME,QAAQ,EAAA,CAAA,KAAM;;;AAG7C,EAAE"}

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

@@ -0,0 +1,40 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToastBody_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToastBody_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 _toastContainerContext = require("../../contexts/toastContainerContext");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const useToastBody_unstable = (props, ref)=>{
+    const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
+    const { bodyId } = (0, _toastContainerContext.useToastContainerContext)();
+    return {
+        components: {
+            root: 'div',
+            subtitle: 'div'
+        },
+        subtitle: _reactutilities.slot.optional(props.subtitle, {
+            elementType: '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,
+            id: bodyId,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        backgroundAppearance
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/useToastBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { bodyId } = useToastContainerContext();\n  return {\n    components: {\n      root: 'div',\n      subtitle: 'div',\n    },\n    subtitle: slot.optional(props.subtitle, { elementType: 'div' }),\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        id: bodyId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","optional","elementType","always","id"],"mappings":"AAAA;;;;;+BAiBaK;;;;;;;iEAfU,QAAQ;gCACgB,4BAA4B;uCAElC,uCAAuC;qCACxC,kCAAkC;AAWnE,8BAA8B,CAACC,OAAuBC;IAC3D,MAAMC,2BAAuBJ,4CAAAA;IAC7B,MAAM,EAAEK,MAAM,EAAE,GAAGN,mDAAAA;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,oBAAAA,CAAKW,QAAQ,CAACP,MAAMM,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMT,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLS,IAAIP;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js

@@ -0,0 +1,53 @@
+'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, {
+    toastBodyClassNames: function() {
+        return toastBodyClassNames;
+    },
+    useToastBodyStyles_unstable: function() {
+        return useToastBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toastBodyClassNames = {
+    root: 'fui-ToastBody',
+    subtitle: 'fui-ToastBody__subtitle'
+};
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1u44l4o", null, [
+    ".r1u44l4o{grid-column-start:2;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);word-break:break-word;}"
+]);
+const useSubtitleBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rzjw1xk", null, [
+    ".rzjw1xk{padding-top:4px;grid-column-start:2;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"
+]);
+const useInvertedStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        sj55zd: "f1w7i9ko"
+    },
+    subtitle: {
+        sj55zd: "f1w7i9ko"
+    }
+}, {
+    d: [
+        ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"
+    ]
+});
+const useToastBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const subtitleBaseClassName = useSubtitleBaseClassName();
+    const invertedStyles = useInvertedStyles();
+    state.root.className = (0, _react.mergeClasses)(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+    if (state.subtitle) {
+        state.subtitle.className = (0, _react.mergeClasses)(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n    root: 'fui-ToastBody',\n    subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = makeResetStyles({\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    paddingTop: '6px',\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground1,\n    wordBreak: 'break-word'\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n    paddingTop: '4px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground2\n});\nconst useInvertedStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForegroundInverted2\n    },\n    subtitle: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const subtitleBaseClassName = useSubtitleBaseClassName();\n    const invertedStyles = useInvertedStyles();\n    state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n    if (state.subtitle) {\n        state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCI,mBAAmB;;;+BAiCY;eAA3BQ;;;uBAnCyC,gBAAgB;AAEnE,4BAA4B;IAC/BP,IAAI,EAAE,eAAe;IACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,GAAGP,wBAAA,EAAA,YAAA,MAAA;IAAA;CAS5B,CAAC;AACF,MAAMQ,wBAAwB,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAA;CAQhC,CAAC;AACF,MAAMS,iBAAiB,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAK,MAAA,EAAA;IAAA;IAAAJ,QAAA,EAAA;QAAAI,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAOzB,CAAC;AAGS,qCAAqCE,KAAK,IAAG;IACpD,aAAa;IACb,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;IACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;IAC1CI,KAAK,CAACR,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,mBAAmB,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACX,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACY,SAAS,CAAC;IACxK,IAAIJ,KAAK,CAACP,QAAQ,EAAE;QAChBO,KAAK,CAACP,QAAQ,CAACW,SAAS,OAAGf,mBAAY,EAACE,mBAAmB,CAACE,QAAQ,EAAES,qBAAqB,EAAEF,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACV,QAAQ,EAAEO,KAAK,CAACP,QAAQ,CAACW,SAAS,CAAC;IAChM;IACA,OAAOJ,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js

@@ -0,0 +1,63 @@
+'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, {
+    toastBodyClassNames: function() {
+        return toastBodyClassNames;
+    },
+    useToastBodyStyles_unstable: function() {
+        return useToastBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const toastBodyClassNames = {
+    root: 'fui-ToastBody',
+    subtitle: 'fui-ToastBody__subtitle'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    paddingTop: '6px',
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    lineHeight: _reacttheme.tokens.lineHeightBase300,
+    fontWeight: _reacttheme.tokens.fontWeightRegular,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    wordBreak: 'break-word'
+});
+const useSubtitleBaseClassName = (0, _react.makeResetStyles)({
+    paddingTop: '4px',
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    fontSize: _reacttheme.tokens.fontSizeBase200,
+    lineHeight: _reacttheme.tokens.fontSizeBase200,
+    fontWeight: _reacttheme.tokens.fontWeightRegular,
+    color: _reacttheme.tokens.colorNeutralForeground2
+});
+const useInvertedStyles = (0, _react.makeStyles)({
+    root: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    },
+    subtitle: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    }
+});
+const useToastBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const subtitleBaseClassName = useSubtitleBaseClassName();
+    const invertedStyles = useInvertedStyles();
+    state.root.className = (0, _react.mergeClasses)(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+    if (state.subtitle) {
+        state.subtitle.className = (0, _react.mergeClasses)(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastBodySlots, ToastBodyState } from './ToastBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastBodyClassNames: SlotClassNames<ToastBodySlots> = {\n  root: 'fui-ToastBody',\n  subtitle: 'fui-ToastBody__subtitle',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  gridColumnStart: 2,\n  gridColumnEnd: 3,\n  paddingTop: '6px',\n  fontSize: tokens.fontSizeBase300,\n  lineHeight: tokens.lineHeightBase300,\n  fontWeight: tokens.fontWeightRegular,\n  color: tokens.colorNeutralForeground1,\n  wordBreak: 'break-word',\n});\n\nconst useSubtitleBaseClassName = makeResetStyles({\n  paddingTop: '4px',\n  gridColumnStart: 2,\n  gridColumnEnd: 3,\n  fontSize: tokens.fontSizeBase200,\n  lineHeight: tokens.fontSizeBase200,\n  fontWeight: tokens.fontWeightRegular,\n  color: tokens.colorNeutralForeground2,\n});\n\nconst useInvertedStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n  subtitle: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\n/**\n * Apply styling to the ToastBody slots based on the state\n */\nexport const useToastBodyStyles_unstable = (state: ToastBodyState): ToastBodyState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const subtitleBaseClassName = useSubtitleBaseClassName();\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(\n    toastBodyClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && invertedStyles.root,\n    state.root.className,\n  );\n\n  if (state.subtitle) {\n    state.subtitle.className = mergeClasses(\n      toastBodyClassNames.subtitle,\n      subtitleBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.subtitle,\n      state.subtitle.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","gridColumnStart","gridColumnEnd","paddingTop","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","fontWeight","fontWeightRegular","color","colorNeutralForeground1","wordBreak","useSubtitleBaseClassName","fontSizeBase200","colorNeutralForeground2","useInvertedStyles","colorNeutralForegroundInverted2","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"mappings":"AAAA;;;;;;;;;;;;IAOaI,mBAAAA;;;IAsCAqB,2BAAAA;;;;uBA3C6C,iBAAiB;4BACpD,wBAAwB;AAIxC,4BAA4D;IACjEpB,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,2BAAuBP,sBAAAA,EAAgB;IAC3CQ,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZC,UAAUR,kBAAAA,CAAOS,eAAe;IAChCC,YAAYV,kBAAAA,CAAOW,iBAAiB;IACpCC,YAAYZ,kBAAAA,CAAOa,iBAAiB;IACpCC,OAAOd,kBAAAA,CAAOe,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,2BAA2BpB,0BAAAA,EAAgB;IAC/CU,YAAY;IACZF,iBAAiB;IACjBC,eAAe;IACfE,UAAUR,kBAAAA,CAAOkB,eAAe;IAChCR,YAAYV,kBAAAA,CAAOkB,eAAe;IAClCN,YAAYZ,kBAAAA,CAAOa,iBAAiB;IACpCC,OAAOd,kBAAAA,CAAOmB,uBAAuB;AACvC;AAEA,MAAMC,wBAAoBtB,iBAAAA,EAAW;IACnCI,MAAM;QACJY,OAAOd,kBAAAA,CAAOqB,+BAA+B;IAC/C;IACAlB,UAAU;QACRW,OAAOd,kBAAAA,CAAOqB,+BAA+B;IAC/C;AACF;AAKO,oCAAoC,CAACE;IAC1C;IAEA,MAAMC,oBAAoBpB;IAC1B,MAAMqB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;IACvBG,MAAMrB,IAAI,CAACyB,SAAS,OAAG5B,mBAAAA,EACrBE,oBAAoBC,IAAI,EACxBsB,mBACAD,MAAMK,oBAAoB,KAAK,cAAcF,eAAexB,IAAI,EAChEqB,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,QAAQ,EAAE;QAClBoB,MAAMpB,QAAQ,CAACwB,SAAS,OAAG5B,mBAAAA,EACzBE,oBAAoBE,QAAQ,EAC5BsB,uBACAF,MAAMK,oBAAoB,KAAK,cAAcF,eAAevB,QAAQ,EACpEoB,MAAMpB,QAAQ,CAACwB,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}