feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToastTitle", {
+    enumerable: true,
+    get: function() {
+        return ToastTitle;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToastTitle = require("./useToastTitle");
+const _renderToastTitle = require("./renderToastTitle");
+const _useToastTitleStylesstyles = require("./useToastTitleStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ToastTitle = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useToastTitle.useToastTitle_unstable)(props, ref);
+    (0, _useToastTitleStylesstyles.useToastTitleStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToastTitleStyles_unstable')(state);
+    return (0, _renderToastTitle.renderToastTitle_unstable)(state);
+});
+ToastTitle.displayName = 'ToastTitle';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToastTitle_unstable } from './useToastTitle';\nimport { renderToastTitle_unstable } from './renderToastTitle';\nimport { useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\nimport type { ToastTitleProps } from './ToastTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastTitle component\n */\nexport const ToastTitle: ForwardRefComponent<ToastTitleProps> = React.forwardRef((props, ref) => {\n  const state = useToastTitle_unstable(props, ref);\n\n  useToastTitleStyles_unstable(state);\n  useCustomStyleHook_unstable('useToastTitleStyles_unstable')(state);\n\n  return renderToastTitle_unstable(state);\n});\n\nToastTitle.displayName = 'ToastTitle';\n"],"names":["React","useToastTitle_unstable","renderToastTitle_unstable","useToastTitleStyles_unstable","useCustomStyleHook_unstable","ToastTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAKvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAC7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/ToastTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\n\nexport type ToastTitleSlots = {\n  root: NonNullable<Slot<'div'>>;\n  media?: Slot<'div'>;\n  action?: Slot<'div'>;\n};\n\n/**\n * ToastTitle Props\n */\nexport type ToastTitleProps = ComponentProps<ToastTitleSlots> & {};\n\n/**\n * State used in rendering ToastTitle\n */\nexport type ToastTitleState = ComponentState<ToastTitleSlots> &\n  Pick<ToastContainerContextValue, 'intent'> & {\n    backgroundAppearance: BackgroundAppearanceContextValue;\n  };\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAGI"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastTitle/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, {
+    ToastTitle: function() {
+        return _ToastTitle.ToastTitle;
+    },
+    renderToastTitle_unstable: function() {
+        return _renderToastTitle.renderToastTitle_unstable;
+    },
+    toastTitleClassNames: function() {
+        return _useToastTitleStylesstyles.toastTitleClassNames;
+    },
+    useToastTitleStyles_unstable: function() {
+        return _useToastTitleStylesstyles.useToastTitleStyles_unstable;
+    },
+    useToastTitle_unstable: function() {
+        return _useToastTitle.useToastTitle_unstable;
+    }
+});
+const _ToastTitle = require("./ToastTitle");
+const _renderToastTitle = require("./renderToastTitle");
+const _useToastTitle = require("./useToastTitle");
+const _useToastTitleStylesstyles = require("./useToastTitleStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/index.ts"],"sourcesContent":["export { ToastTitle } from './ToastTitle';\nexport type { ToastTitleProps, ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\nexport { renderToastTitle_unstable } from './renderToastTitle';\nexport { useToastTitle_unstable } from './useToastTitle';\nexport { toastTitleClassNames, useToastTitleStyles_unstable } from './useToastTitleStyles.styles';\n"],"names":["ToastTitle","renderToastTitle_unstable","useToastTitle_unstable","toastTitleClassNames","useToastTitleStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAEVC,2CAAyB;;;eAEzBE,+CAAoB;;;eAAEC,uDAA4B;;;eADlDF,qCAAsB;;;4BAHJ,eAAe;kCAEA,qBAAqB;+BACxB,kBAAkB;2CACU,+BAA+B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/renderToastTitle.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 { ToastTitleState, ToastTitleSlots } from './ToastTitle.types';\n\n/**\n * Render the final JSX of ToastTitle\n */\nexport const renderToastTitle_unstable = (state: ToastTitleState): JSXElement => {\n  assertSlots<ToastTitleSlots>(state);\n\n  return (\n    <>\n      {state.media ? <state.media /> : null}\n      <state.root />\n      {state.action ? <state.action /> : null}\n    </>\n  );\n};\n"],"names":["assertSlots","renderToastTitle_unstable","state","media","root","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,UAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;YACGA,MAAMC,KAAK,GAAA,WAAA,OAAG,eAAA,EAACD,MAAMC,KAAK,EAAA,CAAA,KAAM;8BACjC,eAAA,EAACD,MAAME,IAAI,EAAA,CAAA;YACVF,MAAMG,MAAM,GAAA,WAAA,OAAG,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA,KAAM;;;AAGzC,EAAE"}

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

@@ -0,0 +1,66 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToastTitle_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToastTitle_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacticons = require("@fluentui/react-icons");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _toastContainerContext = require("../../contexts/toastContainerContext");
+const useToastTitle_unstable = (props, ref)=>{
+    const { intent, titleId } = (0, _toastContainerContext.useToastContainerContext)();
+    const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
+    /** Determine the role and media to render based on the intent */ let defaultIcon;
+    switch(intent){
+        case 'success':
+            defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkCircleFilled, null);
+            break;
+        case 'error':
+            defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismissFilled, null);
+            break;
+        case 'warning':
+            defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.WarningFilled, null);
+            break;
+        case 'info':
+            defaultIcon = /*#__PURE__*/ _react.createElement(_reacticons.InfoFilled, null);
+            break;
+    }
+    return {
+        action: _reactutilities.slot.optional(props.action, {
+            elementType: 'div'
+        }),
+        components: {
+            root: 'div',
+            media: 'div',
+            action: 'div'
+        },
+        media: _reactutilities.slot.optional(props.media, {
+            renderByDefault: !!intent,
+            defaultProps: {
+                children: defaultIcon
+            },
+            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,
+            children: props.children,
+            id: titleId,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        intent,
+        backgroundAppearance
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/useToastTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircleFilled, DiamondDismissFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\nimport type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the state required to render ToastTitle.\n *\n * The returned state can be modified with hooks such as useToastTitleStyles_unstable,\n * before being passed to renderToastTitle_unstable.\n *\n * @param props - props from this instance of ToastTitle\n * @param ref - reference to root HTMLElement of ToastTitle\n */\nexport const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref<HTMLElement>): ToastTitleState => {\n  const { intent, titleId } = useToastContainerContext();\n  const backgroundAppearance = useBackgroundAppearance();\n\n  /** Determine the role and media to render based on the intent */\n  let defaultIcon;\n  switch (intent) {\n    case 'success':\n      defaultIcon = <CheckmarkCircleFilled />;\n      break;\n    case 'error':\n      defaultIcon = <DiamondDismissFilled />;\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  return {\n    action: slot.optional(props.action, { elementType: 'div' }),\n    components: { root: 'div', media: 'div', action: 'div' },\n    media: slot.optional(props.media, {\n      renderByDefault: !!intent,\n      defaultProps: { children: defaultIcon },\n      elementType: '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        children: props.children,\n        id: titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    intent,\n    backgroundAppearance,\n  };\n};\n"],"names":["React","CheckmarkCircleFilled","DiamondDismissFilled","InfoFilled","WarningFilled","getIntrinsicElementProps","slot","useBackgroundAppearance","useToastContainerContext","useToastTitle_unstable","props","ref","intent","titleId","backgroundAppearance","defaultIcon","action","optional","elementType","components","root","media","renderByDefault","defaultProps","children","always","id"],"mappings":"AAAA;;;;;+BAoBaS;;;;;;;iEAlBU,QAAQ;4BAEwD,wBAAwB;gCAChE,4BAA4B;qCACnC,kCAAkC;uCAGjC,uCAAuC;AAWzE,+BAA+B,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAE,OAAGL,+CAAAA;IAC5B,MAAMM,uBAAuBP,gDAAAA;IAE7B,+DAA+D,GAC/D,IAAIQ;IACJ,OAAQH;QACN,KAAK;YACHG,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACd,iCAAAA,EAAAA;YACf;QACF,KAAK;YACHc,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACb,gCAAAA,EAAAA;YACf;QACF,KAAK;YACHa,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACX,yBAAAA,EAAAA;YACf;QACF,KAAK;YACHW,cAAAA,WAAAA,GAAc,OAAA,aAAA,CAACZ,sBAAAA,EAAAA;YACf;IACJ;IAEA,OAAO;QACLa,QAAQV,oBAAAA,CAAKW,QAAQ,CAACP,MAAMM,MAAM,EAAE;YAAEE,aAAa;QAAM;QACzDC,YAAY;YAAEC,MAAM;YAAOC,OAAO;YAAOL,QAAQ;QAAM;QACvDK,OAAOf,oBAAAA,CAAKW,QAAQ,CAACP,MAAMW,KAAK,EAAE;YAChCC,iBAAiB,CAAC,CAACV;YACnBW,cAAc;gBAAEC,UAAUT;YAAY;YACtCG,aAAa;QACf;QACAE,MAAMd,oBAAAA,CAAKmB,MAAM,KACfpB,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FM,KAAKA;YACLa,UAAUd,MAAMc,QAAQ;YACxBE,IAAIb;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;QACAE;IACF;AACF,EAAE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js

@@ -0,0 +1,113 @@
+'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, {
+    toastTitleClassNames: function() {
+        return toastTitleClassNames;
+    },
+    useToastTitleStyles_unstable: function() {
+        return useToastTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toastTitleClassNames = {
+    root: 'fui-ToastTitle',
+    media: 'fui-ToastTitle__media',
+    action: 'fui-ToastTitle__action'
+};
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rdjap1e", null, [
+    ".rdjap1e{display:flex;grid-column-end:3;color:var(--colorNeutralForeground1);word-break:break-word;}"
+]);
+const useMediaBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r8x5mrd", "r1soj19y", [
+    ".r8x5mrd{display:flex;padding-top:2px;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--colorNeutralForeground1);}",
+    ".r1soj19y{display:flex;padding-top:2px;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--colorNeutralForeground1);}"
+]);
+const useActionBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2j19ip", "rjfozdo", [
+    ".r2j19ip{display:flex;align-items:start;padding-left:12px;grid-column-end:-1;color:var(--colorBrandForeground1);}",
+    ".rjfozdo{display:flex;align-items:start;padding-right:12px;grid-column-end:-1;color:var(--colorBrandForeground1);}"
+]);
+const useInvertedStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        sj55zd: "f1w7i9ko"
+    },
+    action: {
+        sj55zd: "f1qz2gb0"
+    },
+    media: {
+        sj55zd: "fqpbvvt"
+    }
+}, {
+    d: [
+        ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}",
+        ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}",
+        ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}"
+    ]
+});
+const useIntentIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    success: {
+        sj55zd: "f36rra6"
+    },
+    error: {
+        sj55zd: "f1ca9wz"
+    },
+    warning: {
+        sj55zd: "f13isgzr"
+    },
+    info: {
+        sj55zd: "fkfq4zb"
+    }
+}, {
+    d: [
+        ".f36rra6{color:var(--colorStatusSuccessForeground1);}",
+        ".f1ca9wz{color:var(--colorStatusDangerForeground1);}",
+        ".f13isgzr{color:var(--colorStatusWarningForeground1);}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}"
+    ]
+});
+const useIntentIconStylesInverted = /*#__PURE__*/ (0, _react.__styles)({
+    success: {
+        sj55zd: "ff3wk4x"
+    },
+    error: {
+        sj55zd: "fbq2gqr"
+    },
+    warning: {
+        sj55zd: "fx6hq1t"
+    },
+    info: {
+        sj55zd: "f1w7i9ko"
+    }
+}, {
+    d: [
+        ".ff3wk4x{color:var(--colorStatusSuccessForegroundInverted);}",
+        ".fbq2gqr{color:var(--colorStatusDangerForegroundInverted);}",
+        ".fx6hq1t{color:var(--colorStatusWarningForegroundInverted);}",
+        ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"
+    ]
+});
+const useToastTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const actionBaseClassName = useActionBaseClassName();
+    const mediaBaseClassName = useMediaBaseClassName();
+    const intentIconStyles = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const { intent } = state;
+    const invertedStyles = useInvertedStyles();
+    state.root.className = (0, _react.mergeClasses)(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+    if (state.media) {
+        state.media.className = (0, _react.mergeClasses)(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);
+    }
+    if (state.action) {
+        state.action.className = (0, _react.mergeClasses)(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js

@@ -0,0 +1,104 @@
+'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, {
+    toastTitleClassNames: function() {
+        return toastTitleClassNames;
+    },
+    useToastTitleStyles_unstable: function() {
+        return useToastTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const toastTitleClassNames = {
+    root: 'fui-ToastTitle',
+    media: 'fui-ToastTitle__media',
+    action: 'fui-ToastTitle__action'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    gridColumnEnd: 3,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    wordBreak: 'break-word'
+});
+const useMediaBaseClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    paddingTop: '2px',
+    gridColumnEnd: 2,
+    paddingRight: '8px',
+    fontSize: '16px',
+    color: _reacttheme.tokens.colorNeutralForeground1
+});
+const useActionBaseClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'start',
+    paddingLeft: '12px',
+    gridColumnEnd: -1,
+    color: _reacttheme.tokens.colorBrandForeground1
+});
+const useInvertedStyles = (0, _react.makeStyles)({
+    root: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    },
+    action: {
+        color: _reacttheme.tokens.colorBrandForegroundInverted
+    },
+    media: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted
+    }
+});
+const useIntentIconStyles = (0, _react.makeStyles)({
+    success: {
+        color: _reacttheme.tokens.colorStatusSuccessForeground1
+    },
+    error: {
+        color: _reacttheme.tokens.colorStatusDangerForeground1
+    },
+    warning: {
+        color: _reacttheme.tokens.colorStatusWarningForeground1
+    },
+    info: {
+        color: _reacttheme.tokens.colorNeutralForeground2
+    }
+});
+const useIntentIconStylesInverted = (0, _react.makeStyles)({
+    success: {
+        color: _reacttheme.tokens.colorStatusSuccessForegroundInverted
+    },
+    error: {
+        color: _reacttheme.tokens.colorStatusDangerForegroundInverted
+    },
+    warning: {
+        color: _reacttheme.tokens.colorStatusWarningForegroundInverted
+    },
+    info: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    }
+});
+const useToastTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const actionBaseClassName = useActionBaseClassName();
+    const mediaBaseClassName = useMediaBaseClassName();
+    const intentIconStyles = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const { intent } = state;
+    const invertedStyles = useInvertedStyles();
+    state.root.className = (0, _react.mergeClasses)(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+    if (state.media) {
+        state.media.className = (0, _react.mergeClasses)(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);
+    }
+    if (state.action) {
+        state.action.className = (0, _react.mergeClasses)(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);
+    }
+    return state;
+};