feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toast/lib/components/ToastContainer/ToastContainer.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useToastContainer_unstable } from './useToastContainer';
+import { renderToastContainer_unstable } from './renderToastContainer';
+import { useToastContainerStyles_unstable } from './useToastContainerStyles.styles';
+import { useToastContainerContextValues_unstable } from './useToastContainerContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ToastContainer component
+ */ export const ToastContainer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToastContainer_unstable(props, ref);
+    useToastContainerStyles_unstable(state);
+    useCustomStyleHook_unstable('useToastContainerStyles_unstable')(state);
+    return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state));
+});
+ToastContainer.displayName = 'ToastContainer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/ToastContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToastContainer_unstable } from './useToastContainer';\nimport { renderToastContainer_unstable } from './renderToastContainer';\nimport { useToastContainerStyles_unstable } from './useToastContainerStyles.styles';\nimport type { ToastContainerProps } from './ToastContainer.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToastContainerContextValues_unstable } from './useToastContainerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToastContainer component\n */\nexport const ToastContainer: ForwardRefComponent<ToastContainerProps> = React.forwardRef((props, ref) => {\n  const state = useToastContainer_unstable(props, ref);\n\n  useToastContainerStyles_unstable(state);\n  useCustomStyleHook_unstable('useToastContainerStyles_unstable')(state);\n\n  return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state));\n});\n\nToastContainer.displayName = 'ToastContainer';\n"],"names":["React","useToastContainer_unstable","renderToastContainer_unstable","useToastContainerStyles_unstable","useToastContainerContextValues_unstable","useCustomStyleHook_unstable","ToastContainer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOR,8BAA8BQ,OAAON,wCAAwCM;AACtF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/ToastContainer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Announce } from '../AriaLive/AriaLive.types';\nimport { Toast, ToastIntent } from '../../state';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\nimport { TimerProps } from '../Timer/Timer';\n\nexport type ToastContainerContextValues = {\n  toast: ToastContainerContextValue;\n};\n\nexport type ToastContainerSlots = {\n  root: NonNullable<Slot<'div'>>;\n  timer: NonNullable<Slot<TimerProps>>;\n};\n\n/**\n * ToastContainer Props\n */\nexport type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> &\n  Toast & {\n    visible: boolean;\n    announce: Announce;\n    intent: ToastIntent | undefined;\n    tryRestoreFocus: () => void;\n  };\n\n/**\n * State used in rendering ToastContainer\n */\nexport type ToastContainerState = ComponentState<ToastContainerSlots> &\n  Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> &\n  Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {\n    /**\n     * @deprecated Will be always \"0\".\n     */\n    transitionTimeout: number;\n    timerTimeout: number;\n    running: boolean;\n    /**\n     * @deprecated Will be always no-op.\n     */\n    onTransitionEntering: () => void;\n    /**\n     * @deprecated now merged with root ref\n     */\n    nodeRef: React.Ref<HTMLDivElement>;\n\n    onMotionFinish?: (event: null, data: { direction: 'enter' | 'exit' }) => void;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-toast/lib/components/ToastContainer/index.js

@@ -0,0 +1,5 @@
+export { ToastContainer } from './ToastContainer';
+export { renderToastContainer_unstable } from './renderToastContainer';
+export { useToastContainer_unstable } from './useToastContainer';
+export { toastContainerClassNames, useToastContainerStyles_unstable } from './useToastContainerStyles.styles';
+export { useToastContainerContextValues_unstable } from './useToastContainerContextValues';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/index.ts"],"sourcesContent":["export { ToastContainer } from './ToastContainer';\nexport type {\n  ToastContainerContextValues,\n  ToastContainerProps,\n  ToastContainerSlots,\n  ToastContainerState,\n} from './ToastContainer.types';\nexport { renderToastContainer_unstable } from './renderToastContainer';\nexport { useToastContainer_unstable } from './useToastContainer';\nexport { toastContainerClassNames, useToastContainerStyles_unstable } from './useToastContainerStyles.styles';\nexport { useToastContainerContextValues_unstable } from './useToastContainerContextValues';\n"],"names":["ToastContainer","renderToastContainer_unstable","useToastContainer_unstable","toastContainerClassNames","useToastContainerStyles_unstable","useToastContainerContextValues_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAOlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,mCAAmC"}

node_modules/@fluentui/react-toast/lib/components/ToastContainer/renderToastContainer.js

@@ -0,0 +1,26 @@
+  'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
+import { CollapseDelayed } from '@fluentui/react-motion-components-preview';
+/**
+ * Render the final JSX of ToastContainer
+ */ export const renderToastContainer_unstable = (state, contextValues)=>{
+    const { onMotionFinish, visible, updateId } = state;
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(ToastContainerContextProvider, {
+        value: contextValues.toast,
+        children: /*#__PURE__*/ _jsx(CollapseDelayed, {
+            appear: true,
+            onMotionFinish: onMotionFinish,
+            visible: visible,
+            unmountOnExit: true,
+            children: /*#__PURE__*/ _jsxs(state.root, {
+                children: [
+                    state.root.children,
+                    /*#__PURE__*/ _jsx(state.timer, {}, updateId)
+                ]
+            })
+        })
+    });
+};

node_modules/@fluentui/react-toast/lib/components/ToastContainer/renderToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\nimport { CollapseDelayed } from '@fluentui/react-motion-components-preview';\n\n/**\n * Render the final JSX of ToastContainer\n */\nexport const renderToastContainer_unstable = (\n  state: ToastContainerState,\n  contextValues: ToastContainerContextValues,\n): JSXElement => {\n  const { onMotionFinish, visible, updateId } = state;\n  assertSlots<ToastContainerSlots>(state);\n\n  return (\n    <ToastContainerContextProvider value={contextValues.toast}>\n      <CollapseDelayed appear onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>\n        <state.root>\n          {state.root.children}\n          <state.timer key={updateId} />\n        </state.root>\n      </CollapseDelayed>\n    </ToastContainerContextProvider>\n  );\n};\n"],"names":["assertSlots","ToastContainerContextProvider","CollapseDelayed","renderToastContainer_unstable","state","contextValues","onMotionFinish","visible","updateId","value","toast","appear","unmountOnExit","root","children","timer"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,6BAA6B,QAAQ,uCAAuC;AACrF,SAASC,eAAe,QAAQ,4CAA4C;AAE5E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGJ;IAC9CJ,YAAiCI;IAEjC,qBACE,KAACH;QAA8BQ,OAAOJ,cAAcK,KAAK;kBACvD,cAAA,KAACR;YAAgBS,MAAM;YAACL,gBAAgBA;YAAgBC,SAASA;YAASK,aAAa;sBACrF,cAAA,MAACR,MAAMS,IAAI;;oBACRT,MAAMS,IAAI,CAACC,QAAQ;kCACpB,KAACV,MAAMW,KAAK,MAAMP;;;;;AAK5B,EAAE"}

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainer.js

@@ -0,0 +1,232 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { Delete, Tab } from '@fluentui/keyboard-keys';
+import { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { Timer } from '../Timer/Timer';
+const intentPolitenessMap = {
+    success: 'assertive',
+    warning: 'assertive',
+    error: 'assertive',
+    info: 'polite'
+};
+/**
+ * Create the state required to render ToastContainer.
+ *
+ * The returned state can be modified with hooks such as useToastContainerStyles_unstable,
+ * before being passed to renderToastContainer_unstable.
+ *
+ * @param props - props from this instance of ToastContainer
+ * @param ref - reference to root HTMLElement of ToastContainer
+ */ export const useToastContainer_unstable = (props, ref)=>{
+    const { visible, children, close: closeProp, remove, updateId, announce, data, timeout: timerTimeout, politeness: desiredPoliteness, intent = 'info', pauseOnHover, pauseOnWindowBlur, imperativeRef, tryRestoreFocus, content: _content, ...rest } = props;
+    const titleId = useId('toast-title');
+    const bodyId = useId('toast-body');
+    const toastRef = React.useRef(null);
+    const { targetDocument } = useFluent_unstable();
+    const [running, setRunning] = React.useState(false);
+    const imperativePauseRef = React.useRef(false);
+    const focusedToastBeforeClose = React.useRef(false);
+    const focusableGroupAttribute = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus',
+        // Users should only use Tab to focus into the toast
+        // Escape is already reserved to dismiss all toasts
+        ignoreDefaultKeydown: {
+            Tab: true,
+            Escape: true,
+            Enter: true
+        }
+    });
+    const close = useEventCallback(()=>{
+        var _toastRef_current;
+        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+        if (activeElement && ((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains(activeElement))) {
+            focusedToastBeforeClose.current = true;
+        }
+        closeProp();
+    });
+    const onStatusChange = useEventCallback((status)=>{
+        var _props_onStatusChange;
+        return (_props_onStatusChange = props.onStatusChange) === null || _props_onStatusChange === void 0 ? void 0 : _props_onStatusChange.call(props, null, {
+            status,
+            ...props
+        });
+    });
+    const pause = useEventCallback(()=>setRunning(false));
+    const play = useEventCallback(()=>{
+        var _toastRef_current;
+        if (imperativePauseRef.current) {
+            return;
+        }
+        var _targetDocument_activeElement;
+        const containsActive = !!((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains((_targetDocument_activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) !== null && _targetDocument_activeElement !== void 0 ? _targetDocument_activeElement : null));
+        if (timerTimeout < 0) {
+            setRunning(true);
+            return;
+        }
+        if (!containsActive) {
+            setRunning(true);
+        }
+    });
+    React.useImperativeHandle(imperativeRef, ()=>({
+            focus: ()=>{
+                if (!toastRef.current) {
+                    return;
+                }
+                toastRef.current.focus();
+            },
+            play: ()=>{
+                imperativePauseRef.current = false;
+                play();
+            },
+            pause: ()=>{
+                imperativePauseRef.current = true;
+                pause();
+            }
+        }));
+    React.useEffect(()=>{
+        return ()=>onStatusChange('unmounted');
+    }, [
+        onStatusChange
+    ]);
+    React.useEffect(()=>{
+        if (!targetDocument) {
+            return;
+        }
+        if (pauseOnWindowBlur) {
+            var _targetDocument_defaultView, _targetDocument_defaultView1;
+            (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('focus', play);
+            (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.addEventListener('blur', pause);
+            return ()=>{
+                var _targetDocument_defaultView, _targetDocument_defaultView1;
+                (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('focus', play);
+                (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('blur', pause);
+            };
+        }
+    }, [
+        targetDocument,
+        pause,
+        play,
+        pauseOnWindowBlur
+    ]);
+    // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController
+    const userRootSlot = data.root;
+    const onMotionFinish = React.useCallback((_, { direction })=>{
+        if (direction === 'exit') {
+            remove();
+        }
+        if (direction === 'enter') {
+            // start toast once it's fully animated in
+            play();
+            onStatusChange('visible');
+        }
+    }, [
+        onStatusChange,
+        play,
+        remove
+    ]);
+    const onMouseEnter = useEventCallback((e)=>{
+        var _userRootSlot_onMouseEnter;
+        pause();
+        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);
+    });
+    const onMouseLeave = useEventCallback((e)=>{
+        var _userRootSlot_onMouseEnter;
+        play();
+        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);
+    });
+    const { findFirstFocusable, findLastFocusable } = useFocusFinders();
+    const onKeyDown = useEventCallback((e)=>{
+        var _userRootSlot_onKeyDown;
+        if (e.key === Delete) {
+            e.preventDefault();
+            close();
+        }
+        if (e.key === Tab && e.currentTarget === e.target) {
+            e.preventDefault();
+            if (e.shiftKey) {
+                var _findLastFocusable;
+                (_findLastFocusable = findLastFocusable(e.currentTarget)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+            } else {
+                var _findFirstFocusable;
+                (_findFirstFocusable = findFirstFocusable(e.currentTarget)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
+            }
+        }
+        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onKeyDown = userRootSlot.onKeyDown) === null || _userRootSlot_onKeyDown === void 0 ? void 0 : _userRootSlot_onKeyDown.call(userRootSlot, e);
+    });
+    React.useEffect(()=>{
+        var _toastRef_current;
+        if (!visible) {
+            return;
+        }
+        const politeness = desiredPoliteness !== null && desiredPoliteness !== void 0 ? desiredPoliteness : intentPolitenessMap[intent];
+        var _toastRef_current_textContent;
+        announce((_toastRef_current_textContent = (_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.textContent) !== null && _toastRef_current_textContent !== void 0 ? _toastRef_current_textContent : '', {
+            politeness
+        });
+    }, [
+        announce,
+        desiredPoliteness,
+        toastRef,
+        visible,
+        updateId,
+        intent
+    ]);
+    React.useEffect(()=>{
+        return ()=>{
+            if (focusedToastBeforeClose.current) {
+                focusedToastBeforeClose.current = false;
+                tryRestoreFocus();
+            }
+        };
+    }, [
+        tryRestoreFocus
+    ]);
+    return {
+        components: {
+            timer: Timer,
+            root: 'div'
+        },
+        timer: slot.always({
+            onTimeout: close,
+            running,
+            timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1
+        }, {
+            elementType: Timer
+        }),
+        root: slot.always(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: useMergedRefs(ref, toastRef),
+            children,
+            tabIndex: 0,
+            role: 'listitem',
+            'aria-labelledby': titleId,
+            'aria-describedby': bodyId,
+            ...rest,
+            ...userRootSlot,
+            ...focusableGroupAttribute,
+            onMouseEnter,
+            onMouseLeave,
+            onKeyDown
+        }), {
+            elementType: 'div'
+        }),
+        timerTimeout,
+        transitionTimeout: 0,
+        running,
+        visible,
+        remove,
+        close,
+        onTransitionEntering: ()=>{
+        /* no-op */ },
+        updateId,
+        nodeRef: toastRef,
+        intent,
+        titleId,
+        bodyId,
+        onMotionFinish
+    };
+};

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainerContextValues.js

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+export function useToastContainerContextValues_unstable(state) {
+    const { close, intent, titleId, bodyId } = state;
+    const toastContainerContext = React.useMemo(()=>({
+            close,
+            intent,
+            titleId,
+            bodyId
+        }), [
+        close,
+        intent,
+        titleId,
+        bodyId
+    ]);
+    return {
+        toast: toastContainerContext
+    };
+}

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainerContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/useToastContainerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types';\n\nexport function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues {\n  const { close, intent, titleId, bodyId } = state;\n\n  const toastContainerContext = React.useMemo(\n    () => ({\n      close,\n      intent,\n      titleId,\n      bodyId,\n    }),\n    [close, intent, titleId, bodyId],\n  );\n\n  return {\n    toast: toastContainerContext,\n  };\n}\n"],"names":["React","useToastContainerContextValues_unstable","state","close","intent","titleId","bodyId","toastContainerContext","useMemo","toast"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGJ;IAE3C,MAAMK,wBAAwBP,MAAMQ,OAAO,CACzC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAASC;KAAO;IAGlC,OAAO;QACLG,OAAOF;IACT;AACF"}

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainerStyles.styles.js

@@ -0,0 +1,20 @@
+'use client';
+
+import { __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const toastContainerClassNames = {
+  root: 'fui-ToastContainer',
+  timer: 'fui-ToastContainer__timer'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r98b696", null, [".r98b696{box-sizing:border-box;margin-top:16px;pointer-events:all;border-radius:var(--borderRadiusMedium);}", ".r98b696[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
+/**
+ * Apply styling to the ToastContainer slots based on the state
+ */
+export const useToastContainerStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n    root: 'fui-ToastContainer',\n    timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    marginTop: '16px',\n    pointerEvents: 'all',\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n    })\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,sOAQ5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChDE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGV,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEK,iBAAiB,EAAED,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAC3G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js

@@ -0,0 +1,25 @@
+'use client';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const toastContainerClassNames = {
+    root: 'fui-ToastContainer',
+    timer: 'fui-ToastContainer__timer'
+};
+const useRootBaseClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    marginTop: '16px',
+    pointerEvents: 'all',
+    borderRadius: tokens.borderRadiusMedium,
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`
+    })
+});
+/**
+ * Apply styling to the ToastContainer slots based on the state
+ */ export const useToastContainerStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toast/lib/components/ToastContainer/useToastContainerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ToastContainerSlots, ToastContainerState } from './ToastContainer.types';\n\nexport const toastContainerClassNames: SlotClassNames<ToastContainerSlots> = {\n  root: 'fui-ToastContainer',\n  timer: 'fui-ToastContainer__timer',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  marginTop: '16px',\n  pointerEvents: 'all',\n  borderRadius: tokens.borderRadiusMedium,\n  ...createCustomFocusIndicatorStyle({\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\n});\n\n/**\n * Apply styling to the ToastContainer slots based on the state\n */\nexport const useToastContainerStyles_unstable = (state: ToastContainerState): ToastContainerState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","boxSizing","marginTop","pointerEvents","borderRadius","borderRadiusMedium","outline","strokeWidthThick","colorStrokeFocus2","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAG1E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAW;IACXC,WAAW;IACXC,eAAe;IACfC,cAAcT,OAAOU,kBAAkB;IACvC,GAAGT,gCAAgC;QACjCU,SAAS,GAAGX,OAAOY,gBAAgB,CAAC,OAAO,EAAEZ,OAAOa,iBAAiB,EAAE;IACzE,EAAE;AACJ;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBX;IAC1BU,MAAMZ,IAAI,CAACc,SAAS,GAAGlB,aAAaG,yBAAyBC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACc,SAAS;IAE1G,OAAOF;AACT,EAAE"}