@fluentui/react-toast 9.0.0

package/lib/components/AriaLive/renderAriaLive.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 AriaLive
+ */ export const renderAriaLive_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(slots.assertive, slotProps.assertive), /*#__PURE__*/ createElement(slots.polite, slotProps.polite));
+};

package/lib/components/AriaLive/renderAriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAriaLive.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 { AriaLiveState, AriaLiveSlots } from './AriaLive.types';\n\n/**\n * Render the final JSX of AriaLive\n */\nexport const renderAriaLive_unstable = (state: AriaLiveState) => {\n  const { slots, slotProps } = getSlotsNext<AriaLiveSlots>(state);\n\n  return (\n    <>\n      <slots.assertive {...slotProps.assertive} />\n      <slots.polite {...slotProps.polite} />\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderAriaLive_unstable","state","slots","slotProps","assertive","polite"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA4BE;IAEzD,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOC,MAAME,SAAS,EAAKD,UAAUC,SAAS,iBACxC,AAfN,cAeOF,MAAMG,MAAM,EAAKF,UAAUE,MAAM;AAGxC,EAAE"}

package/lib/components/AriaLive/useAriaLive.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluentui/react-utilities';
+/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
+/**
+ * Create the state required to render AriaLive.
+ *
+ * The returned state can be modified with hooks such as useAriaLiveStyles_unstable,
+ * before being passed to renderAriaLive_unstable.
+ *
+ * @param props - props from this instance of AriaLive
+ */ export const useAriaLive_unstable = (props)=>{
+    const [currentMessage, setCurrentMessage] = React.useState(undefined);
+    // Can't rely on Date.now() if user invokes announce more than once in a code block
+    const order = React.useRef(0);
+    const [messageQueue] = React.useState(()=>createPriorityQueue((a, b)=>{
+            if (a.politeness === b.politeness) {
+                return a.createdAt - b.createdAt;
+            }
+            return a.politeness === 'assertive' ? -1 : 1;
+        }));
+    const announce = useEventCallback((message, options)=>{
+        const { politeness  } = options;
+        if (message === (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.message)) {
+            return;
+        }
+        const liveMessage = {
+            message,
+            politeness,
+            createdAt: order.current++
+        };
+        if (!currentMessage) {
+            setCurrentMessage(liveMessage);
+        } else {
+            messageQueue.enqueue(liveMessage);
+        }
+    });
+    React.useEffect(()=>{
+        const timeout = setTimeout(()=>{
+            if (messageQueue.peek()) {
+                setCurrentMessage(messageQueue.dequeue());
+            } else {
+                setCurrentMessage(undefined);
+            }
+        }, MESSAGE_DURATION);
+        return ()=>clearTimeout(timeout);
+    }, [
+        currentMessage,
+        messageQueue
+    ]);
+    React.useImperativeHandle(props.announceRef, ()=>announce);
+    const politeMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'polite' ? currentMessage.message : undefined;
+    const assertiveMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'assertive' ? currentMessage.message : undefined;
+    return {
+        components: {
+            assertive: 'div',
+            polite: 'div'
+        },
+        assertive: resolveShorthand(props.assertive, {
+            required: true,
+            defaultProps: {
+                'aria-live': 'assertive',
+                children: assertiveMessage
+            }
+        }),
+        polite: resolveShorthand(props.polite, {
+            required: true,
+            defaultProps: {
+                'aria-live': 'polite',
+                children: politeMessage
+            }
+        })
+    };
+};

package/lib/components/AriaLive/useAriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAriaLive.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluentui/react-utilities';\nimport type { AnnounceOptions, AriaLiveProps, AriaLiveState, LiveMessage } from './AriaLive.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\n/**\n * Create the state required to render AriaLive.\n *\n * The returned state can be modified with hooks such as useAriaLiveStyles_unstable,\n * before being passed to renderAriaLive_unstable.\n *\n * @param props - props from this instance of AriaLive\n */\nexport const useAriaLive_unstable = (props: AriaLiveProps): AriaLiveState => {\n  const [currentMessage, setCurrentMessage] = React.useState<LiveMessage | undefined>(undefined);\n  // Can't rely on Date.now() if user invokes announce more than once in a code block\n  const order = React.useRef(0);\n  const [messageQueue] = React.useState(() =>\n    createPriorityQueue<LiveMessage>((a, b) => {\n      if (a.politeness === b.politeness) {\n        return a.createdAt - b.createdAt;\n      }\n\n      return a.politeness === 'assertive' ? -1 : 1;\n    }),\n  );\n\n  const announce = useEventCallback((message: string, options: AnnounceOptions) => {\n    const { politeness } = options;\n    if (message === currentMessage?.message) {\n      return;\n    }\n\n    const liveMessage: LiveMessage = {\n      message,\n      politeness,\n      createdAt: order.current++,\n    };\n\n    if (!currentMessage) {\n      setCurrentMessage(liveMessage);\n    } else {\n      messageQueue.enqueue(liveMessage);\n    }\n  });\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      if (messageQueue.peek()) {\n        setCurrentMessage(messageQueue.dequeue());\n      } else {\n        setCurrentMessage(undefined);\n      }\n    }, MESSAGE_DURATION);\n\n    return () => clearTimeout(timeout);\n  }, [currentMessage, messageQueue]);\n\n  React.useImperativeHandle(props.announceRef, () => announce);\n\n  const politeMessage = currentMessage?.politeness === 'polite' ? currentMessage.message : undefined;\n  const assertiveMessage = currentMessage?.politeness === 'assertive' ? currentMessage.message : undefined;\n\n  return {\n    components: {\n      assertive: 'div',\n      polite: 'div',\n    },\n\n    assertive: resolveShorthand(props.assertive, {\n      required: true,\n      defaultProps: { 'aria-live': 'assertive', children: assertiveMessage },\n    }),\n    polite: resolveShorthand(props.polite, {\n      required: true,\n      defaultProps: { 'aria-live': 'polite', children: politeMessage },\n    }),\n  };\n};\n"],"names":["React","resolveShorthand","createPriorityQueue","useEventCallback","MESSAGE_DURATION","useAriaLive_unstable","props","currentMessage","setCurrentMessage","useState","undefined","order","useRef","messageQueue","a","b","politeness","createdAt","announce","message","options","liveMessage","current","enqueue","useEffect","timeout","setTimeout","peek","dequeue","clearTimeout","useImperativeHandle","announceRef","politeMessage","assertiveMessage","components","assertive","polite","required","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,mBAAmB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpG,gHAAgH,GAChH,MAAMC,mBAAmB;AAEzB;;;;;;;CAOC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAwC;IAC3E,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGR,MAAMS,QAAQ,CAA0BC;IACpF,mFAAmF;IACnF,MAAMC,QAAQX,MAAMY,MAAM,CAAC;IAC3B,MAAM,CAACC,aAAa,GAAGb,MAAMS,QAAQ,CAAC,IACpCP,oBAAiC,CAACY,GAAGC,IAAM;YACzC,IAAID,EAAEE,UAAU,KAAKD,EAAEC,UAAU,EAAE;gBACjC,OAAOF,EAAEG,SAAS,GAAGF,EAAEE,SAAS;YAClC,CAAC;YAED,OAAOH,EAAEE,UAAU,KAAK,cAAc,CAAC,IAAI,CAAC;QAC9C;IAGF,MAAME,WAAWf,iBAAiB,CAACgB,SAAiBC,UAA6B;QAC/E,MAAM,EAAEJ,WAAU,EAAE,GAAGI;QACvB,IAAID,YAAYZ,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBY,OAAO,AAAD,GAAG;YACvC;QACF,CAAC;QAED,MAAME,cAA2B;YAC/BF;YACAH;YACAC,WAAWN,MAAMW,OAAO;QAC1B;QAEA,IAAI,CAACf,gBAAgB;YACnBC,kBAAkBa;QACpB,OAAO;YACLR,aAAaU,OAAO,CAACF;QACvB,CAAC;IACH;IAEArB,MAAMwB,SAAS,CAAC,IAAM;QACpB,MAAMC,UAAUC,WAAW,IAAM;YAC/B,IAAIb,aAAac,IAAI,IAAI;gBACvBnB,kBAAkBK,aAAae,OAAO;YACxC,OAAO;gBACLpB,kBAAkBE;YACpB,CAAC;QACH,GAAGN;QAEH,OAAO,IAAMyB,aAAaJ;IAC5B,GAAG;QAAClB;QAAgBM;KAAa;IAEjCb,MAAM8B,mBAAmB,CAACxB,MAAMyB,WAAW,EAAE,IAAMb;IAEnD,MAAMc,gBAAgBzB,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBS,UAAU,AAAD,MAAM,WAAWT,eAAeY,OAAO,GAAGT,SAAS;IAClG,MAAMuB,mBAAmB1B,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBS,UAAU,AAAD,MAAM,cAAcT,eAAeY,OAAO,GAAGT,SAAS;IAExG,OAAO;QACLwB,YAAY;YACVC,WAAW;YACXC,QAAQ;QACV;QAEAD,WAAWlC,iBAAiBK,MAAM6B,SAAS,EAAE;YAC3CE,UAAU,IAAI;YACdC,cAAc;gBAAE,aAAa;gBAAaC,UAAUN;YAAiB;QACvE;QACAG,QAAQnC,iBAAiBK,MAAM8B,MAAM,EAAE;YACrCC,UAAU,IAAI;YACdC,cAAc;gBAAE,aAAa;gBAAUC,UAAUP;YAAc;QACjE;IACF;AACF,EAAE"}

package/lib/components/AriaLive/useAriaLiveStyles.styles.js

@@ -0,0 +1,19 @@
+import { mergeClasses, shorthands, __resetStyles } from '@griffel/react';
+export const ariaLiveClassNames = {
+  assertive: 'fui-AriaLive__assertive',
+  polite: 'fui-AriaLive__polite'
+};
+/**
+ * Styles for the root slot
+ */
+const useResetStyles = /*#__PURE__*/__resetStyles("rsuwu0d", "r1m1grr4", [".rsuwu0d{clip:rect(0px, 0px, 0px, 0px);height:1px;margin-top:-1px;margin-right:-1px;margin-bottom:-1px;margin-left:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;width:1px;position:absolute;}", ".r1m1grr4{clip:rect(0px, 0px, 0px, 0px);height:1px;margin-top:-1px;margin-left:-1px;margin-bottom:-1px;margin-right:-1px;overflow-x:hidden;overflow-y:hidden;padding-top:0px;padding-left:0px;padding-bottom:0px;padding-right:0px;width:1px;position:absolute;}"]);
+/**
+ * Apply styling to the AriaLive slots based on the state
+ */
+export const useAriaLiveStyles_unstable = state => {
+  const visuallyHidden = useResetStyles();
+  state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
+  state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);
+  return state;
+};
+//# sourceMappingURL=useAriaLiveStyles.styles.js.map

package/lib/components/AriaLive/useAriaLiveStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","shorthands","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["import { mergeClasses, shorthands, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n    assertive: 'fui-AriaLive__assertive',\n    polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    ...shorthands.margin('-1px'),\n    ...shorthands.overflow('hidden'),\n    ...shorthands.padding('0px'),\n    width: '1px',\n    position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n    const visuallyHidden = useResetStyles();\n    state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n    state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,EAAAC,aAAA,QAAyB,gBAAgB;AAC1E,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,SAAS,EAAE,yBAAyB;EACpCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGJ,aAAA,+hBAQ1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,cAAc,GAAGH,cAAc,CAAC,CAAC;EACvCE,KAAK,CAACJ,SAAS,CAACM,SAAS,GAAGV,YAAY,CAACS,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;EACjHF,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGV,YAAY,CAACS,cAAc,EAAEN,kBAAkB,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/Timer/Timer.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useBaseAnimationStyles } from './useTimerStyles.styles';
+export const Timer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const baseAnimationStyles = useBaseAnimationStyles();
+    const { running , timeout , onTimeout  } = props;
+    const style = {
+        animationDuration: `${timeout}ms`,
+        animationPlayState: running ? 'running' : 'paused'
+    };
+    if (timeout < 0) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        onAnimationEnd: onTimeout,
+        "data-timer-status": style.animationPlayState,
+        ref: ref,
+        style: style,
+        className: baseAnimationStyles
+    });
+});
+Timer.displayName = 'Timer';

package/lib/components/Timer/Timer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Timer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBaseAnimationStyles } from './useTimerStyles.styles';\n\nexport type TimerProps = {\n  running: boolean;\n  timeout: number;\n  onTimeout: () => void;\n  as?: 'span';\n};\n\nexport const Timer = React.forwardRef<HTMLDivElement, TimerProps>((props, ref) => {\n  const baseAnimationStyles = useBaseAnimationStyles();\n  const { running, timeout, onTimeout } = props;\n\n  const style: React.CSSProperties = {\n    animationDuration: `${timeout}ms`,\n    animationPlayState: running ? 'running' : 'paused',\n  };\n\n  if (timeout < 0) {\n    return null;\n  }\n\n  return (\n    <span\n      onAnimationEnd={onTimeout}\n      data-timer-status={style.animationPlayState}\n      ref={ref}\n      style={style}\n      className={baseAnimationStyles}\n    />\n  );\n});\n\nTimer.displayName = 'Timer';\n"],"names":["React","useBaseAnimationStyles","Timer","forwardRef","props","ref","baseAnimationStyles","running","timeout","onTimeout","style","animationDuration","animationPlayState","span","onAnimationEnd","data-timer-status","className","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,0BAA0B;AASjE,OAAO,MAAMC,sBAAQF,MAAMG,UAAU,CAA6B,CAACC,OAAOC,MAAQ;IAChF,MAAMC,sBAAsBL;IAC5B,MAAM,EAAEM,QAAO,EAAEC,QAAO,EAAEC,UAAS,EAAE,GAAGL;IAExC,MAAMM,QAA6B;QACjCC,mBAAmB,CAAC,EAAEH,QAAQ,EAAE,CAAC;QACjCI,oBAAoBL,UAAU,YAAY,QAAQ;IACpD;IAEA,IAAIC,UAAU,GAAG;QACf,OAAO,IAAI;IACb,CAAC;IAED,qBACE,oBAACK;QACCC,gBAAgBL;QAChBM,qBAAmBL,MAAME,kBAAkB;QAC3CP,KAAKA;QACLK,OAAOA;QACPM,WAAWV;;AAGjB,GAAG;AAEHJ,MAAMe,WAAW,GAAG"}

package/lib/components/Timer/index.js

@@ -0,0 +1 @@
+export * from './Timer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Timer';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/lib/components/Timer/useTimerStyles.styles.js

@@ -0,0 +1,3 @@
+import { __resetStyles } from '@griffel/react';
+export const useBaseAnimationStyles = /*#__PURE__*/__resetStyles("r17x0t3n", "r75casi", [".r17x0t3n{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}", "@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", "@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", "@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", ".r75casi{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}"]);
+//# sourceMappingURL=useTimerStyles.styles.js.map

package/lib/components/Timer/useTimerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","useBaseAnimationStyles"],"sources":["useTimerStyles.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\nexport const useBaseAnimationStyles = makeResetStyles({\n    animationName: {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 0\n        }\n    }\n});\n"],"mappings":"AAAA,SAAAA,aAAA,QAAgC,gBAAgB;AAChD,OAAO,MAAMC,sBAAsB,gBAAGD,aAAA,mVASrC,CAAC"}

package/lib/components/Toast/Toast.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useToast_unstable } from './useToast';
+import { renderToast_unstable } from './renderToast';
+import { useToastStyles_unstable } from './useToastStyles.styles';
+import { useToastContextValues_unstable } from './useToastContextValues';
+/**
+ * Toast component
+ */ export const Toast = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToast_unstable(props, ref);
+    useToastStyles_unstable(state);
+    return renderToast_unstable(state, useToastContextValues_unstable(state));
+});
+Toast.displayName = 'Toast';

package/lib/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Toast.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToast_unstable } from './useToast';\nimport { renderToast_unstable } from './renderToast';\nimport { useToastStyles_unstable } from './useToastStyles.styles';\nimport type { ToastProps } from './Toast.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToastContextValues_unstable } from './useToastContextValues';\n\n/**\n * Toast component\n */\nexport const Toast: ForwardRefComponent<ToastProps> = React.forwardRef((props, ref) => {\n  const state = useToast_unstable(props, ref);\n\n  useToastStyles_unstable(state);\n  return renderToast_unstable(state, useToastContextValues_unstable(state));\n});\n\nToast.displayName = 'Toast';\n"],"names":["React","useToast_unstable","renderToast_unstable","useToastStyles_unstable","useToastContextValues_unstable","Toast","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,8BAA8B,QAAQ,0BAA0B;AAEzE;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrF,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IACxB,OAAOP,qBAAqBO,OAAOL,+BAA+BK;AACpE,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

package/lib/components/Toast/Toast.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Toast.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type ToastSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToastContextValues = {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n};\n\n/**\n * Toast Props\n */\nexport type ToastProps = ComponentProps<ToastSlots> & {\n  appearance?: BackgroundAppearanceContextValue;\n};\n\n/**\n * State used in rendering Toast\n */\nexport type ToastState = ComponentState<ToastSlots> & {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAuBE"}

package/lib/components/Toast/index.js

@@ -0,0 +1,5 @@
+export * from './Toast';
+export * from './Toast.types';
+export * from './renderToast';
+export * from './useToast';
+export * from './useToastStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Toast';\nexport * from './Toast.types';\nexport * from './renderToast';\nexport * from './useToast';\nexport * from './useToastStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,0BAA0B"}

package/lib/components/Toast/renderToast.js

@@ -0,0 +1,11 @@
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
+/**
+ * Render the final JSX of Toast
+ */ export const renderToast_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(BackgroundAppearanceProvider, {
+        value: contextValues.backgroundAppearance
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+};

package/lib/components/Toast/renderToast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderToast.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';\nimport type { ToastState, ToastSlots, ToastContextValues } from './Toast.types';\n\n/**\n * Render the final JSX of Toast\n */\nexport const renderToast_unstable = (state: ToastState, contextValues: ToastContextValues) => {\n  const { slots, slotProps } = getSlotsNext<ToastSlots>(state);\n\n  return (\n    <BackgroundAppearanceProvider value={contextValues.backgroundAppearance}>\n      <slots.root {...slotProps.root} />\n    </BackgroundAppearanceProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","BackgroundAppearanceProvider","renderToast_unstable","state","contextValues","slots","slotProps","value","backgroundAppearance","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,4BAA4B,QAAQ,kCAAkC;AAG/E;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC,gBAAsC;IAC5F,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAyBG;IAEtD,qBACE,AAdJ,cAcKF;QAA6BM,OAAOH,cAAcI,oBAAoB;qBACrE,AAfN,cAeOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}

package/lib/components/Toast/useToast.js

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

package/lib/components/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToast.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\n\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["React","getNativeElementProps","useToast_unstable","props","ref","components","root","backgroundAppearance","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;QACAI,sBAAsBJ,MAAMK,UAAU;IACxC;AACF,EAAE"}

package/lib/components/Toast/useToastContextValues.js

@@ -0,0 +1,6 @@
+export function useToastContextValues_unstable(state) {
+    const { backgroundAppearance  } = state;
+    return {
+        backgroundAppearance
+    };
+}

package/lib/components/Toast/useToastContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastContextValues.ts"],"sourcesContent":["import { ToastContextValues, ToastState } from './Toast.types';\n\nexport function useToastContextValues_unstable(state: ToastState): ToastContextValues {\n  const { backgroundAppearance } = state;\n\n  return {\n    backgroundAppearance,\n  };\n}\n"],"names":["useToastContextValues_unstable","state","backgroundAppearance"],"mappings":"AAEA,OAAO,SAASA,+BAA+BC,KAAiB,EAAsB;IACpF,MAAM,EAAEC,qBAAoB,EAAE,GAAGD;IAEjC,OAAO;QACLC;IACF;AACF,CAAC"}

package/lib/components/Toast/useToastStyles.styles.js

@@ -0,0 +1,24 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastClassNames = {
+  root: 'fui-Toast'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rzyoxeq", "r1lipnsg", [".rzyoxeq{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}", ".r1lipnsg{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"]);
+const useStyles = /*#__PURE__*/__styles({
+  inverted: {
+    sj55zd: "f1w7i9ko",
+    De3pzq: "f5pduvr"
+  }
+}, {
+  d: [".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}"]
+});
+/**
+ * Apply styling to the Toast slots based on the state
+ */
+export const useToastStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const styles = useStyles();
+  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useToastStyles.styles.js.map

package/lib/components/Toast/useToastStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n    root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto',\n    ...shorthands.padding('12px', '12px'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: '20px',\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, 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,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,66DAY5B,CAAC;AACF,MAAMQ,SAAS,gBAAGP,QAAA;EAAAQ,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGf,YAAY,CAACG,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/ToastBody/ToastBody.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useToastBody_unstable } from './useToastBody';
+import { renderToastBody_unstable } from './renderToastBody';
+import { useToastBodyStyles_unstable } from './useToastBodyStyles.styles';
+/**
+ * ToastBody component
+ */ export const ToastBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToastBody_unstable(props, ref);
+    useToastBodyStyles_unstable(state);
+    return renderToastBody_unstable(state);
+});
+ToastBody.displayName = 'ToastBody';

package/lib/components/ToastBody/ToastBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToastBody_unstable } from './useToastBody';\nimport { renderToastBody_unstable } from './renderToastBody';\nimport { useToastBodyStyles_unstable } from './useToastBodyStyles.styles';\nimport type { ToastBodyProps } from './ToastBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToastBody component\n */\nexport const ToastBody: ForwardRefComponent<ToastBodyProps> = React.forwardRef((props, ref) => {\n  const state = useToastBody_unstable(props, ref);\n\n  useToastBodyStyles_unstable(state);\n  return renderToastBody_unstable(state);\n});\n\nToastBody.displayName = 'ToastBody';\n"],"names":["React","useToastBody_unstable","renderToastBody_unstable","useToastBodyStyles_unstable","ToastBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC7F,MAAMC,QAAQP,sBAAsBK,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAON,yBAAyBM;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/components/ToastBody/ToastBody.types.js

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

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

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

package/lib/components/ToastBody/index.js

@@ -0,0 +1,5 @@
+export * from './ToastBody';
+export * from './ToastBody.types';
+export * from './renderToastBody';
+export * from './useToastBody';
+export * from './useToastBodyStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ToastBody';\nexport * from './ToastBody.types';\nexport * from './renderToastBody';\nexport * from './useToastBody';\nexport * from './useToastBodyStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,8BAA8B"}

package/lib/components/ToastBody/renderToastBody.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 ToastBody
+ */ export const renderToastBody_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(slots.root, slotProps.root), slots.subtitle ? /*#__PURE__*/ createElement(slots.subtitle, slotProps.subtitle) : null);
+};

package/lib/components/ToastBody/renderToastBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderToastBody.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 { ToastBodyState, ToastBodySlots } from './ToastBody.types';\n\n/**\n * Render the final JSX of ToastBody\n */\nexport const renderToastBody_unstable = (state: ToastBodyState) => {\n  const { slots, slotProps } = getSlotsNext<ToastBodySlots>(state);\n\n  return (\n    <>\n      <slots.root {...slotProps.root} />\n      {slots.subtitle ? <slots.subtitle {...slotProps.subtitle} /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderToastBody_unstable","state","slots","slotProps","root","subtitle"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,QAA0B;IACjE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA6BE;IAE1D,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOC,MAAME,IAAI,EAAKD,UAAUC,IAAI,GAC7BF,MAAMG,QAAQ,iBAAG,AAfxB,cAeyBH,MAAMG,QAAQ,EAAKF,UAAUE,QAAQ,IAAO,IAAI;AAGzE,EAAE"}

package/lib/components/ToastBody/useToastBody.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { useToastContainerContext } from '../../contexts/toastContainerContext';
+import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render ToastBody.
+ *
+ * The returned state can be modified with hooks such as useToastBodyStyles_unstable,
+ * before being passed to renderToastBody_unstable.
+ *
+ * @param props - props from this instance of ToastBody
+ * @param ref - reference to root HTMLElement of ToastBody
+ */ export const useToastBody_unstable = (props, ref)=>{
+    const backgroundAppearance = useBackgroundAppearance();
+    const { bodyId  } = useToastContainerContext();
+    return {
+        components: {
+            root: 'div',
+            subtitle: 'div'
+        },
+        subtitle: resolveShorthand(props.subtitle),
+        root: getNativeElementProps('div', {
+            ref,
+            id: bodyId,
+            ...props
+        }),
+        backgroundAppearance
+    };
+};

package/lib/components/ToastBody/useToastBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToastBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { bodyId } = useToastContainerContext();\n  return {\n    components: {\n      root: 'div',\n      subtitle: 'div',\n    },\n    subtitle: resolveShorthand(props.subtitle),\n    root: getNativeElementProps('div', {\n      ref,\n      id: bodyId,\n      ...props,\n    }),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,uBAAuB,QAAQ,kCAAkC;AAE1E;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC,MAAgD;IAC3G,MAAMC,uBAAuBJ;IAC7B,MAAM,EAAEK,OAAM,EAAE,GAAGN;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,iBAAiBI,MAAMM,QAAQ;QACzCD,MAAMV,sBAAsB,OAAO;YACjCM;YACAM,IAAIJ;YACJ,GAAGH,KAAK;QACV;QACAE;IACF;AACF,EAAE"}

package/lib/components/ToastBody/useToastBodyStyles.styles.js

@@ -0,0 +1,32 @@
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastBodyClassNames = {
+  root: 'fui-ToastBody',
+  subtitle: 'fui-ToastBody__subtitle'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rnxxsue", null, [".rnxxsue{-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}"]);
+const useSubtitleBaseClassName = /*#__PURE__*/__resetStyles("rzjw1xk", null, [".rzjw1xk{padding-top:4px;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"]);
+const useInvertedStyles = /*#__PURE__*/__styles({
+  root: {
+    sj55zd: "f1w7i9ko"
+  },
+  subtitle: {
+    sj55zd: "f1w7i9ko"
+  }
+}, {
+  d: [".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
+});
+/**
+ * Apply styling to the ToastBody slots based on the state
+ */
+export const useToastBodyStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const subtitleBaseClassName = useSubtitleBaseClassName();
+  const invertedStyles = useInvertedStyles();
+  state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+  if (state.subtitle) {
+    state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useToastBodyStyles.styles.js.map

package/lib/components/ToastBody/useToastBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n    root: 'fui-ToastBody',\n    subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = makeResetStyles({\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    paddingTop: '6px',\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground1\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n    paddingTop: '4px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground2\n});\nconst useInvertedStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForegroundInverted2\n    },\n    subtitle: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const subtitleBaseClassName = useSubtitleBaseClassName();\n    const invertedStyles = useInvertedStyles();\n    state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n    if (state.subtitle) {\n        state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,0QAQ5B,CAAC;AACF,MAAMQ,wBAAwB,gBAAGR,aAAA,0QAQhC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,MAAA;EAAA;EAAAJ,QAAA;IAAAI,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;EACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1CI,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACX,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACY,SAAS,CAAC;EACxK,IAAIJ,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACW,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACE,QAAQ,EAAES,qBAAqB,EAAEF,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACV,QAAQ,EAAEO,KAAK,CAACP,QAAQ,CAACW,SAAS,CAAC;EAChM;EACA,OAAOJ,KAAK;AAChB,CAAC"}

package/lib/components/ToastContainer/ToastContainer.js

@@ -0,0 +1,13 @@
+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';
+/**
+ * ToastContainer component
+ */ export const ToastContainer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToastContainer_unstable(props, ref);
+    useToastContainerStyles_unstable(state);
+    return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state));
+});
+ToastContainer.displayName = 'ToastContainer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastContainer.tsx"],"sourcesContent":["import * 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';\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  return renderToastContainer_unstable(state, useToastContainerContextValues_unstable(state));\n});\n\nToastContainer.displayName = 'ToastContainer';\n"],"names":["React","useToastContainer_unstable","renderToastContainer_unstable","useToastContainerStyles_unstable","useToastContainerContextValues_unstable","ToastContainer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAE3F;;CAEC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvG,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjC,OAAOP,8BAA8BO,OAAOL,wCAAwCK;AACtF,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/ToastContainer/ToastContainer.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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 = ComponentProps<Partial<ToastContainerSlots>> &\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    transitionTimeout: number;\n    timerTimeout: number;\n    running: boolean;\n    onTransitionEntering: () => void;\n    nodeRef: React.Ref<HTMLDivElement>;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/ToastContainer/index.js

@@ -0,0 +1,6 @@
+export * from './ToastContainer';
+export * from './ToastContainer.types';
+export * from './renderToastContainer';
+export * from './useToastContainer';
+export * from './useToastContainerStyles.styles';
+export * from './useToastContainerContextValues';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ToastContainer';\nexport * from './ToastContainer.types';\nexport * from './renderToastContainer';\nexport * from './useToastContainer';\nexport * from './useToastContainerStyles.styles';\nexport * from './useToastContainerContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC;AACjD,cAAc,mCAAmC"}

package/lib/components/ToastContainer/renderToastContainer.js

@@ -0,0 +1,21 @@
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+import { Transition } from 'react-transition-group';
+import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
+/**
+ * Render the final JSX of ToastContainer
+ */ export const renderToastContainer_unstable = (state, contextValues)=>{
+    const { onTransitionEntering , visible , transitionTimeout , remove , nodeRef  } = state;
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(Transition, {
+        in: visible,
+        appear: true,
+        unmountOnExit: true,
+        timeout: transitionTimeout,
+        onExited: remove,
+        onEntering: onTransitionEntering,
+        nodeRef: nodeRef
+    }, /*#__PURE__*/ createElement(ToastContainerContextProvider, {
+        value: contextValues.toast
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root), /*#__PURE__*/ createElement(slots.timer, slotProps.timer)));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { Transition } from 'react-transition-group';\nimport type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\n\n/**\n * Render the final JSX of ToastContainer\n */\nexport const renderToastContainer_unstable = (\n  state: ToastContainerState,\n  contextValues: ToastContainerContextValues,\n) => {\n  const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef } = state;\n  const { slots, slotProps } = getSlotsNext<ToastContainerSlots>(state);\n\n  return (\n    <Transition\n      in={visible}\n      appear\n      unmountOnExit\n      timeout={transitionTimeout}\n      onExited={remove}\n      onEntering={onTransitionEntering}\n      nodeRef={nodeRef}\n    >\n      <ToastContainerContextProvider value={contextValues.toast}>\n        <slots.root {...slotProps.root} />\n        <slots.timer {...slotProps.timer} />\n      </ToastContainerContextProvider>\n    </Transition>\n  );\n};\n"],"names":["createElement","getSlotsNext","Transition","ToastContainerContextProvider","renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","slots","slotProps","in","appear","unmountOnExit","timeout","onExited","onEntering","value","toast","root","timer"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,gBACG;IACH,MAAM,EAAEC,qBAAoB,EAAEC,QAAO,EAAEC,kBAAiB,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGN;IAC9E,MAAM,EAAEO,MAAK,EAAEC,UAAS,EAAE,GAAGZ,aAAkCI;IAE/D,qBACE,AAnBJ,cAmBKH;QACCY,IAAIN;QACJO,QAAAA,IAAM;QACNC,eAAAA,IAAa;QACbC,SAASR;QACTS,UAAUR;QACVS,YAAYZ;QACZI,SAASA;qBAET,AA5BN,cA4BOR;QAA8BiB,OAAOd,cAAce,KAAK;qBACvD,AA7BR,cA6BST,MAAMU,IAAI,EAAKT,UAAUS,IAAI,iBAC9B,AA9BR,cA8BSV,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxC,EAAE"}