@fluentui/react-toast 9.0.0

package/lib/components/ToastContainer/useToastContainer.js

@@ -0,0 +1,219 @@
+import * as React from 'react';
+import { getNativeElementProps, useMergedRefs, useEventCallback, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { Timer } from '../Timer/Timer';
+import { useFocusFinders } from '@fluentui/react-tabster';
+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 , ...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 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);
+        }
+    });
+    const { findFirstFocusable  } = useFocusFinders();
+    React.useImperativeHandle(imperativeRef, ()=>({
+            focus: ()=>{
+                if (!toastRef.current) {
+                    return;
+                }
+                const firstFocusable = findFirstFocusable(toastRef.current);
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                } else {
+                    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
+    ]);
+    // It's impossible to animate to height: auto in CSS, the actual pixel value must be known
+    // Get the height of the toast before animation styles have been applied and set a CSS
+    // variable with its height. The CSS variable will be used by the styles
+    const onTransitionEntering = ()=>{
+        if (!toastRef.current) {
+            return;
+        }
+        const element = toastRef.current;
+        element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);
+    };
+    // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController
+    const userRootSlot = data.root;
+    // Using a ref callback here because addEventListener supports `once`
+    const toastAnimationRef = React.useCallback((el)=>{
+        if (el && toastRef.current) {
+            toastRef.current.addEventListener('animationend', ()=>{
+                // start toast once it's fully animated in
+                play();
+                onStatusChange('visible');
+            }, {
+                once: true
+            });
+        }
+    }, [
+        play,
+        onStatusChange
+    ]);
+    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 onKeyDown = useEventCallback((e)=>{
+        var _userRootSlot_onKeyDown;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+        }
+        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: resolveShorthand({
+            key: updateId,
+            onTimeout: close,
+            running,
+            timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1
+        }, {
+            required: true
+        }),
+        root: getNativeElementProps('div', {
+            ref: useMergedRefs(ref, toastRef, toastAnimationRef),
+            children,
+            tabIndex: -1,
+            role: 'group',
+            'aria-labelledby': titleId,
+            'aria-describedby': bodyId,
+            ...rest,
+            ...userRootSlot,
+            onMouseEnter,
+            onMouseLeave,
+            onKeyDown
+        }),
+        timerTimeout,
+        transitionTimeout: 500,
+        running,
+        visible,
+        remove,
+        close,
+        onTransitionEntering,
+        updateId,
+        nodeRef: toastRef,
+        intent,
+        titleId,
+        bodyId
+    };
+};

package/lib/components/ToastContainer/useToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  useMergedRefs,\n  ExtractSlotProps,\n  Slot,\n  useEventCallback,\n  resolveShorthand,\n  useId,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nconst intentPolitenessMap = {\n  success: 'assertive',\n  warning: 'assertive',\n  error: 'assertive',\n  info: 'polite',\n} as const;\n\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */\nexport const useToastContainer_unstable = (\n  props: ToastContainerProps,\n  ref: React.Ref<HTMLElement>,\n): ToastContainerState => {\n  const {\n    visible,\n    children,\n    close: closeProp,\n    remove,\n    updateId,\n    announce,\n    data,\n    timeout: timerTimeout,\n    politeness: desiredPoliteness,\n    intent = 'info',\n    pauseOnHover,\n    pauseOnWindowBlur,\n    imperativeRef,\n    tryRestoreFocus,\n    ...rest\n  } = props;\n  const titleId = useId('toast-title');\n  const bodyId = useId('toast-body');\n  const toastRef = React.useRef<HTMLDivElement | null>(null);\n  const { targetDocument } = useFluent_unstable();\n  const [running, setRunning] = React.useState(false);\n  const imperativePauseRef = React.useRef(false);\n  const focusedToastBeforeClose = React.useRef(false);\n\n  const close = useEventCallback(() => {\n    const activeElement = targetDocument?.activeElement;\n    if (activeElement && toastRef.current?.contains(activeElement)) {\n      focusedToastBeforeClose.current = true;\n    }\n\n    closeProp();\n  });\n  const onStatusChange = useEventCallback((status: ToastStatus) => props.onStatusChange?.(null, { status, ...props }));\n  const pause = useEventCallback(() => setRunning(false));\n  const play = useEventCallback(() => {\n    if (imperativePauseRef.current) {\n      return;\n    }\n    const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null);\n    if (timerTimeout < 0) {\n      setRunning(true);\n      return;\n    }\n\n    if (!containsActive) {\n      setRunning(true);\n    }\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      const firstFocusable = findFirstFocusable(toastRef.current);\n      if (firstFocusable) {\n        firstFocusable.focus();\n      } else {\n        toastRef.current.focus();\n      }\n    },\n\n    play: () => {\n      imperativePauseRef.current = false;\n      play();\n    },\n    pause: () => {\n      imperativePauseRef.current = true;\n      pause();\n    },\n  }));\n\n  React.useEffect(() => {\n    return () => onStatusChange('unmounted');\n  }, [onStatusChange]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    if (pauseOnWindowBlur) {\n      targetDocument.defaultView?.addEventListener('focus', play);\n      targetDocument.defaultView?.addEventListener('blur', pause);\n      return () => {\n        targetDocument.defaultView?.removeEventListener('focus', play);\n        targetDocument.defaultView?.removeEventListener('blur', pause);\n      };\n    }\n  }, [targetDocument, pause, play, pauseOnWindowBlur]);\n\n  // It's impossible to animate to height: auto in CSS, the actual pixel value must be known\n  // Get the height of the toast before animation styles have been applied and set a CSS\n  // variable with its height. The CSS variable will be used by the styles\n  const onTransitionEntering = () => {\n    if (!toastRef.current) {\n      return;\n    }\n\n    const element = toastRef.current;\n    element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n  };\n\n  // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n  const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n\n  // Using a ref callback here because addEventListener supports `once`\n  const toastAnimationRef = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el && toastRef.current) {\n        toastRef.current.addEventListener(\n          'animationend',\n          () => {\n            // start toast once it's fully animated in\n            play();\n            onStatusChange('visible');\n          },\n          { once: true },\n        );\n      }\n    },\n    [play, onStatusChange],\n  );\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    pause();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    play();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      close();\n    }\n\n    userRootSlot?.onKeyDown?.(e);\n  });\n\n  React.useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const politeness = desiredPoliteness ?? intentPolitenessMap[intent];\n    announce(toastRef.current?.textContent ?? '', { politeness });\n  }, [announce, desiredPoliteness, toastRef, visible, updateId, intent]);\n\n  React.useEffect(() => {\n    return () => {\n      if (focusedToastBeforeClose.current) {\n        focusedToastBeforeClose.current = false;\n        tryRestoreFocus();\n      }\n    };\n  }, [tryRestoreFocus]);\n\n  return {\n    components: {\n      timer: Timer,\n      root: 'div',\n    },\n    timer: resolveShorthand<TimerProps>(\n      { key: updateId, onTimeout: close, running, timeout: timerTimeout ?? -1 },\n      { required: true },\n    ),\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, toastRef, toastAnimationRef),\n      children,\n      tabIndex: -1,\n      role: 'group',\n      'aria-labelledby': titleId,\n      'aria-describedby': bodyId,\n      ...rest,\n      ...userRootSlot,\n      onMouseEnter,\n      onMouseLeave,\n      onKeyDown,\n    }),\n    timerTimeout,\n    transitionTimeout: 500,\n    running,\n    visible,\n    remove,\n    close,\n    onTransitionEntering,\n    updateId,\n    nodeRef: toastRef,\n    intent,\n    titleId,\n    bodyId,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","useEventCallback","resolveShorthand","useId","useFluent_unstable","Timer","useFocusFinders","intentPolitenessMap","success","warning","error","info","useToastContainer_unstable","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","bodyId","toastRef","useRef","targetDocument","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","findFirstFocusable","useImperativeHandle","focus","firstFocusable","useEffect","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","onMouseLeave","onKeyDown","key","preventDefault","textContent","components","timer","onTimeout","required","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}

package/lib/components/ToastContainer/useToastContainerContextValues.js

@@ -0,0 +1,18 @@
+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
+    };
+}

package/lib/components/ToastContainer/useToastContainerContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastContainerContextValues.ts"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B,EAA+B;IAC/G,MAAM,EAAEC,MAAK,EAAEC,OAAM,EAAEC,QAAO,EAAEC,OAAM,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,CAAC"}

package/lib/components/ToastContainer/useToastContainerStyles.styles.js

@@ -0,0 +1,36 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const toastClassNames = {
+  root: 'fui-ToastContainer',
+  timer: 'fui-ToastContainer__timer'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1qaza64", "r1e6dlul", [".r1qaza64{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}", ".r1qaza64[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}", ".r1e6dlul{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}", ".r1e6dlul[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);}"]);
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  enter: {
+    vin17d: "fayl5bc",
+    m1gqa9: "f17oyct0",
+    Bv12yb3: "fvv8lvk"
+  },
+  exit: {
+    vin17d: "f1tk3cza",
+    m1gqa9: "f1nx6yy9",
+    Bv12yb3: "f9wuypy"
+  }
+}, {
+  d: [".fayl5bc{-webkit-animation-duration:200ms,400ms;animation-duration:200ms,400ms;}", ".f17oyct0{-webkit-animation-delay:0ms,200ms;animation-delay:0ms,200ms;}", ".fvv8lvk{-webkit-animation-name:f1rp83na,f5j8bii;animation-name:f1rp83na,f5j8bii;}", ".f1tk3cza{-webkit-animation-duration:400ms,200ms;animation-duration:400ms,200ms;}", ".f1nx6yy9{-webkit-animation-delay:0ms,400ms;animation-delay:0ms,400ms;}", ".f9wuypy{-webkit-animation-name:fk0lfw7,f1n32sdh;animation-name:fk0lfw7,f1n32sdh;}"],
+  k: ["@-webkit-keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@-webkit-keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@-webkit-keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}", "@-webkit-keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}", "@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}"]
+});
+/**
+ * Apply styling to the ToastContainer slots based on the state
+ */
+export const useToastContainerStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const styles = useStyles();
+  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useToastContainerStyles.styles.js.map

package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","toastClassNames","root","timer","useRootBaseClassName","useStyles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","useToastContainerStyles_unstable","state","rootBaseClassName","styles","className","visible"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastClassNames = {\n    root: 'fui-ToastContainer',\n    timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    marginTop: '16px',\n    minHeight: '44px',\n    pointerEvents: 'all',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    '--fui-toast-height': '44px',\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    enter: {\n        animationDuration: '200ms, 400ms',\n        animationDelay: '0ms, 200ms',\n        animationName: [\n            {\n                from: {\n                    maxHeight: 0,\n                    opacity: 0,\n                    marginTop: 0\n                },\n                to: {\n                    marginTop: '16px',\n                    opacity: 0,\n                    maxHeight: 'var(--fui-toast-height)'\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 1\n                }\n            }\n        ]\n    },\n    exit: {\n        animationDuration: '400ms, 200ms',\n        animationDelay: '0ms, 400ms',\n        animationName: [\n            {\n                from: {\n                    opacity: 1\n                },\n                to: {\n                    opacity: 0\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 0,\n                    marginTop: 0,\n                    maxHeight: 0\n                }\n            }\n        ]\n    }\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGT,aAAA,i6BAU5B,CAAC;AACF;AACA;AACA;AAAI,MAAMU,SAAS,gBAAGT,QAAA;EAAAU,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CAmDrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGX,oBAAoB,CAAC,CAAC;EAChD,MAAMY,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACe,SAAS,GAAGpB,YAAY,CAACI,eAAe,CAACC,IAAI,EAAEa,iBAAiB,EAAED,KAAK,CAACI,OAAO,GAAGF,MAAM,CAACV,KAAK,GAAGU,MAAM,CAACN,IAAI,EAAEI,KAAK,CAACZ,IAAI,CAACe,SAAS,CAAC;EAC9I,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/ToastFooter/ToastFooter.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useToastFooter_unstable } from './useToastFooter';
+import { renderToastFooter_unstable } from './renderToastFooter';
+import { useToastFooterStyles_unstable } from './useToastFooterStyles.styles';
+/**
+ * ToastFooter component
+ */ export const ToastFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToastFooter_unstable(props, ref);
+    useToastFooterStyles_unstable(state);
+    return renderToastFooter_unstable(state);
+});
+ToastFooter.displayName = 'ToastFooter';

package/lib/components/ToastFooter/ToastFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastFooter.tsx"],"sourcesContent":["import * 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';\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  return renderToastFooter_unstable(state);\n});\n\nToastFooter.displayName = 'ToastFooter';\n"],"names":["React","useToastFooter_unstable","renderToastFooter_unstable","useToastFooterStyles_unstable","ToastFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAI9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjG,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CJ,8BAA8BK;IAC9B,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/ToastFooter/ToastFooter.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/ToastFooter/ToastFooter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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":"AAAA,WAcgE"}

package/lib/components/ToastFooter/index.js

@@ -0,0 +1,5 @@
+export * from './ToastFooter';
+export * from './ToastFooter.types';
+export * from './renderToastFooter';
+export * from './useToastFooter';
+export * from './useToastFooterStyles.styles';

package/lib/components/ToastFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ToastFooter';\nexport * from './ToastFooter.types';\nexport * from './renderToastFooter';\nexport * from './useToastFooter';\nexport * from './useToastFooterStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/ToastFooter/renderToastFooter.js

@@ -0,0 +1,8 @@
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ToastFooter
+ */ export const renderToastFooter_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+};

package/lib/components/ToastFooter/renderToastFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderToastFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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) => {\n  const { slots, slotProps } = getSlotsNext<ToastFooterSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderToastFooter_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBAAO,AAZT,cAYUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}

package/lib/components/ToastFooter/useToastFooter.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render ToastFooter.
+ *
+ * The returned state can be modified with hooks such as useToastFooterStyles_unstable,
+ * before being passed to renderToastFooter_unstable.
+ *
+ * @param props - props from this instance of ToastFooter
+ * @param ref - reference to root HTMLElement of ToastFooter
+ */ export const useToastFooter_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'div'
+        },
+        root: getNativeElementProps('div', {
+            ref,
+            ...props
+        })
+    };
+};

package/lib/components/ToastFooter/useToastFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useToastFooter_unstable","props","ref","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;IACF;AACF,EAAE"}

package/lib/components/ToastFooter/useToastFooterStyles.styles.js

@@ -0,0 +1,17 @@
+import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
+export const toastFooterClassNames = {
+  root: 'fui-ToastFooter'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1u6izx1", null, [".r1u6izx1{padding-top:16px;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:14px;column-gap:14px;row-gap:14px;}"]);
+/**
+ * Apply styling to the ToastFooter slots based on the state
+ */
+export const useToastFooterStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useToastFooterStyles.styles.js.map

package/lib/components/ToastFooter/useToastFooterStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","shorthands","toastFooterClassNames","root","useRootBaseClassName","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastFooterStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands } 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    ...shorthands.gap('14px')\n});\n/**\n * Apply styling to the ToastFooter slots based on the state\n */ export const useToastFooterStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGL,aAAA,2VAOhC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChDE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEI,iBAAiB,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/ToastTitle/ToastTitle.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useToastTitle_unstable } from './useToastTitle';
+import { renderToastTitle_unstable } from './renderToastTitle';
+import { useToastTitleStyles_unstable } from './useToastTitleStyles.styles';
+/**
+ * ToastTitle component
+ */ export const ToastTitle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToastTitle_unstable(props, ref);
+    useToastTitleStyles_unstable(state);
+    return renderToastTitle_unstable(state);
+});
+ToastTitle.displayName = 'ToastTitle';

package/lib/components/ToastTitle/ToastTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastTitle.tsx"],"sourcesContent":["import * 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';\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  return renderToastTitle_unstable(state);\n});\n\nToastTitle.displayName = 'ToastTitle';\n"],"names":["React","useToastTitle_unstable","renderToastTitle_unstable","useToastTitleStyles_unstable","ToastTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAI5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/F,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/ToastTitle/ToastTitle.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/ToastTitle/ToastTitle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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":"AAAA,WAqBI"}

package/lib/components/ToastTitle/index.js

@@ -0,0 +1,5 @@
+export * from './ToastTitle';
+export * from './ToastTitle.types';
+export * from './renderToastTitle';
+export * from './useToastTitle';
+export * from './useToastTitleStyles.styles';

package/lib/components/ToastTitle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ToastTitle';\nexport * from './ToastTitle.types';\nexport * from './renderToastTitle';\nexport * from './useToastTitle';\nexport * from './useToastTitleStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}

package/lib/components/ToastTitle/renderToastTitle.js

@@ -0,0 +1,8 @@
+/** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ToastTitle
+ */ export const renderToastTitle_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(Fragment, null, slots.media ? /*#__PURE__*/ createElement(slots.media, slotProps.media) : null, /*#__PURE__*/ createElement(slots.root, slotProps.root), slots.action ? /*#__PURE__*/ createElement(slots.action, slotProps.action) : null);
+};

package/lib/components/ToastTitle/renderToastTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderToastTitle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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) => {\n  const { slots, slotProps } = getSlotsNext<ToastTitleSlots>(state);\n\n  return (\n    <>\n      {slots.media ? <slots.media {...slotProps.media} /> : null}\n      <slots.root {...slotProps.root} />\n      {slots.action ? <slots.action {...slotProps.action} /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderToastTitle_unstable","state","slots","slotProps","media","root","action"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAbJ,cADA,gBAeOC,MAAME,KAAK,iBAAG,AAdrB,cAcsBF,MAAME,KAAK,EAAKD,UAAUC,KAAK,IAAO,IAAI,gBAC1D,AAfN,cAeOF,MAAMG,IAAI,EAAKF,UAAUE,IAAI,GAC7BH,MAAMI,MAAM,iBAAG,AAhBtB,cAgBuBJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM,IAAO,IAAI;AAGnE,EAAE"}

package/lib/components/ToastTitle/useToastTitle.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
+import { useToastContainerContext } from '../../contexts/toastContainerContext';
+/**
+ * Create the state required to render ToastTitle.
+ *
+ * The returned state can be modified with hooks such as useToastTitleStyles_unstable,
+ * before being passed to renderToastTitle_unstable.
+ *
+ * @param props - props from this instance of ToastTitle
+ * @param ref - reference to root HTMLElement of ToastTitle
+ */ export const useToastTitle_unstable = (props, ref)=>{
+    const { intent , titleId  } = useToastContainerContext();
+    const backgroundAppearance = useBackgroundAppearance();
+    /** Determine the role and media to render based on the intent */ let defaultIcon;
+    switch(intent){
+        case 'success':
+            defaultIcon = /*#__PURE__*/ React.createElement(CheckmarkCircleFilled, null);
+            break;
+        case 'error':
+            defaultIcon = /*#__PURE__*/ React.createElement(DismissCircleFilled, null);
+            break;
+        case 'warning':
+            defaultIcon = /*#__PURE__*/ React.createElement(WarningFilled, null);
+            break;
+        case 'info':
+            defaultIcon = /*#__PURE__*/ React.createElement(InfoFilled, null);
+            break;
+    }
+    return {
+        action: resolveShorthand(props.action),
+        components: {
+            root: 'div',
+            media: 'div',
+            action: 'div'
+        },
+        media: resolveShorthand(props.media, {
+            required: !!intent,
+            defaultProps: {
+                children: defaultIcon
+            }
+        }),
+        root: getNativeElementProps('div', {
+            ref,
+            children: props.children,
+            id: titleId,
+            ...props
+        }),
+        intent,
+        backgroundAppearance
+    };
+};

package/lib/components/ToastTitle/useToastTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastTitle.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } 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 = <DismissCircleFilled />;\n      break;\n    case 'warning':\n      defaultIcon = <WarningFilled />;\n      break;\n    case 'info':\n      defaultIcon = <InfoFilled />;\n      break;\n  }\n\n  return {\n    action: resolveShorthand(props.action),\n    components: {\n      root: 'div',\n      media: 'div',\n      action: 'div',\n    },\n    media: resolveShorthand(props.media, { required: !!intent, defaultProps: { children: defaultIcon } }),\n    root: getNativeElementProps('div', {\n      ref,\n      children: props.children,\n      id: titleId,\n      ...props,\n    }),\n    intent,\n    backgroundAppearance,\n  };\n};\n"],"names":["React","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getNativeElementProps","resolveShorthand","useBackgroundAppearance","useToastContainerContext","useToastTitle_unstable","props","ref","intent","titleId","backgroundAppearance","defaultIcon","action","components","root","media","required","defaultProps","children","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ,wBAAwB;AAC9G,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACpF,SAASC,uBAAuB,QAAQ,kCAAkC;AAG1E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGL;IAC5B,MAAMM,uBAAuBP;IAE7B,+DAA+D,GAC/D,IAAIQ;IACJ,OAAQH;QACN,KAAK;YACHG,4BAAc,oBAACd;YACf,KAAM;QACR,KAAK;YACHc,4BAAc,oBAACb;YACf,KAAM;QACR,KAAK;YACHa,4BAAc,oBAACX;YACf,KAAM;QACR,KAAK;YACHW,4BAAc,oBAACZ;YACf,KAAM;IACV;IAEA,OAAO;QACLa,QAAQV,iBAAiBI,MAAMM,MAAM;QACrCC,YAAY;YACVC,MAAM;YACNC,OAAO;YACPH,QAAQ;QACV;QACAG,OAAOb,iBAAiBI,MAAMS,KAAK,EAAE;YAAEC,UAAU,CAAC,CAACR;YAAQS,cAAc;gBAAEC,UAAUP;YAAY;QAAE;QACnGG,MAAMb,sBAAsB,OAAO;YACjCM;YACAW,UAAUZ,MAAMY,QAAQ;YACxBC,IAAIV;YACJ,GAAGH,KAAK;QACV;QACAE;QACAE;IACF;AACF,EAAE"}

package/lib/components/ToastTitle/useToastTitleStyles.styles.js

@@ -0,0 +1,78 @@
+import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastTitleClassNames = {
+  root: 'fui-ToastTitle',
+  media: 'fui-ToastTitle__media',
+  action: 'fui-ToastTitle__action'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1mlor6q", null, [".r1mlor6q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-column-span:3;grid-column-end:3;color:var(--colorNeutralForeground1);}"]);
+const useMediaBaseClassName = /*#__PURE__*/__resetStyles("rnm72z1", "rzj6g76", [".rnm72z1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-column-span:2;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--colorNeutralForeground1);}", ".rzj6g76{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-column-span:2;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--colorNeutralForeground1);}"]);
+const useActionBaseClassName = /*#__PURE__*/__resetStyles("r5vrc68", "rzqb88z", [".r5vrc68{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:12px;-ms-grid-column-span:-1;grid-column-end:-1;color:var(--colorBrandForeground1);}", ".rzqb88z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-right:12px;-ms-grid-column-span:-1;grid-column-end:-1;color:var(--colorBrandForeground1);}"]);
+const useInvertedStyles = /*#__PURE__*/__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__*/__styles({
+  success: {
+    sj55zd: "f1m7fhi8"
+  },
+  error: {
+    sj55zd: "fg9gses"
+  },
+  warning: {
+    sj55zd: "f1k5f75o"
+  },
+  info: {
+    sj55zd: "fkfq4zb"
+  }
+}, {
+  d: [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
+});
+const useIntentIconStylesInverted = /*#__PURE__*/__styles({
+  success: {
+    sj55zd: "f1pvjcpr"
+  },
+  error: {
+    sj55zd: "fcrp5ll"
+  },
+  warning: {
+    sj55zd: "f1r8f1cl"
+  },
+  info: {
+    sj55zd: "f1w7i9ko"
+  }
+}, {
+  d: [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
+});
+/**
+ * Apply styling to the ToastTitle slots based on the state
+ */
+export const useToastTitleStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const actionBaseClassName = useActionBaseClassName();
+  const mediaBaseClassName = useMediaBaseClassName();
+  const intentIconStyles = useIntentIconStyles();
+  const intentIconStylesInverted = useIntentIconStylesInverted();
+  const {
+    intent
+  } = state;
+  const invertedStyles = useInvertedStyles();
+  state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, state.media.className, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent]);
+  }
+  if (state.action) {
+    state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useToastTitleStyles.styles.js.map