@fluentui/react-toast 9.1.0 → 9.1.2

package/CHANGELOG.json

@@ -2,7 +2,103 @@
   "name": "@fluentui/react-toast",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:23 GMT",
+      "date": "Fri, 11 Aug 2023 12:10:20 GMT",
+      "tag": "@fluentui/react-toast_v9.1.2",
+      "version": "9.1.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-aria to v9.3.30",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.7",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.12.2",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-utilities to v9.11.1",
+            "commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 09 Aug 2023 13:17:08 GMT",
+      "tag": "@fluentui/react-toast_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-toast",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-toast",
+            "commit": "e615f12c54c8a4acad49930a02c3b703fd64692b",
+            "comment": "chore(teams-prg): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-aria to v9.3.29",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:57 GMT",
       "tag": "@fluentui/react-toast_v9.1.0",
       "version": "9.1.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Fri, 04 Aug 2023 08:48:23 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Aug 2023 12:10:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.1.2)
+
+Fri, 11 Aug 2023 12:10:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.1.1..@fluentui/react-toast_v9.1.2)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.3.30 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-portal to v9.3.7 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-tabster to v9.12.2 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+- Bump @fluentui/react-utilities to v9.11.1 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
+
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.1.1)
+
+Wed, 09 Aug 2023 13:17:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.1.0..@fluentui/react-toast_v9.1.1)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(teams-prg): migrate to new slot API ([PR #28751](https://github.com/microsoft/fluentui/pull/28751) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.29 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-portal to v9.3.6 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.1.0)
 
-Fri, 04 Aug 2023 08:48:23 GMT 
+Fri, 04 Aug 2023 08:52:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.6..@fluentui/react-toast_v9.1.0)
 
 ### Minor changes

package/lib/components/AriaLive/renderAriaLive.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } 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));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(state.assertive, null), /*#__PURE__*/ createElement(state.polite, null));
 };

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

@@ -1 +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"}
+{"version":3,"sources":["renderAriaLive.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<AriaLiveSlots>(state);\n\n  return (\n    <>\n      <state.assertive />\n      <state.polite />\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","renderAriaLive_unstable","state","assertive","polite"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/DF,YAA2BE;IAE3B,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOA,MAAMC,SAAS,uBAChB,AAfN,cAeOD,MAAME,MAAM;AAGnB,EAAE"}

package/lib/components/AriaLive/useAriaLive.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluentui/react-utilities';
+import { createPriorityQueue, useEventCallback, slot } 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.
@@ -55,19 +55,19 @@ import { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluent
             assertive: 'div',
             polite: 'div'
         },
-        assertive: resolveShorthand(props.assertive, {
-            required: true,
+        assertive: slot.always(props.assertive, {
             defaultProps: {
                 'aria-live': 'assertive',
                 children: assertiveMessage
-            }
+            },
+            elementType: 'div'
         }),
-        polite: resolveShorthand(props.polite, {
-            required: true,
+        polite: slot.always(props.polite, {
             defaultProps: {
                 'aria-live': 'polite',
                 children: politeMessage
-            }
+            },
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +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"}
+{"version":3,"sources":["useAriaLive.ts"],"sourcesContent":["import * as React from 'react';\nimport { createPriorityQueue, useEventCallback, slot } 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: slot.always(props.assertive, {\n      defaultProps: { 'aria-live': 'assertive', children: assertiveMessage },\n      elementType: 'div',\n    }),\n    polite: slot.always(props.polite, {\n      defaultProps: { 'aria-live': 'polite', children: politeMessage },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","createPriorityQueue","useEventCallback","slot","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","always","defaultProps","children","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxF,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,IACpCR,oBAAiC,CAACa,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,WAAWhB,iBAAiB,CAACiB,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,WAAWhC,KAAKkC,MAAM,CAAC/B,MAAM6B,SAAS,EAAE;YACtCG,cAAc;gBAAE,aAAa;gBAAaC,UAAUN;YAAiB;YACrEO,aAAa;QACf;QACAJ,QAAQjC,KAAKkC,MAAM,CAAC/B,MAAM8B,MAAM,EAAE;YAChCE,cAAc;gBAAE,aAAa;gBAAUC,UAAUP;YAAc;YAC/DQ,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -1,3 +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;}"]);
+export const useBaseAnimationStyles = /*#__PURE__*/__resetStyles("r16zaflb", "r75casi", [".r16zaflb{animation-name:rsacmq1;}", "@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", ".r75casi{animation-name:rsacmq1;}"]);
 //# sourceMappingURL=useTimerStyles.styles.js.map

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

@@ -1 +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"}
+{"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,yJASrC,CAAC"}

package/lib/components/Toast/renderToast.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } 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);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(BackgroundAppearanceProvider, {
         value: contextValues.backgroundAppearance
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

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

@@ -1 +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"}
+{"version":3,"sources":["renderToast.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<ToastSlots>(state);\n\n  return (\n    <BackgroundAppearanceProvider value={contextValues.backgroundAppearance}>\n      <state.root />\n    </BackgroundAppearanceProvider>\n  );\n};\n"],"names":["createElement","assertSlots","BackgroundAppearanceProvider","renderToast_unstable","state","contextValues","value","backgroundAppearance","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,4BAA4B,QAAQ,kCAAkC;AAG/E;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC,gBAAsC;IAC5FJ,YAAwBG;IAExB,qBACE,AAdJ,cAcKF;QAA6BI,OAAOD,cAAcE,oBAAoB;qBACrE,AAfN,cAeOH,MAAMI,IAAI;AAGjB,EAAE"}

package/lib/components/Toast/useToast.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Toast.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         backgroundAppearance: props.appearance
     };

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

@@ -1 +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"}
+{"version":3,"sources":["useToast.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } 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: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToast_unstable","props","ref","components","root","always","elementType","backgroundAppearance","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;QAEvBC,sBAAsBN,MAAMO,UAAU;IACxC;AACF,EAAE"}

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

@@ -3,7 +3,7 @@ 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 useRootBaseClassName = /*#__PURE__*/__resetStyles("rzyoxeq", "r1lipnsg", [".rzyoxeq{display:grid;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:grid;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",

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

@@ -1 +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"}
+{"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,60DAY5B,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/renderToastBody.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } 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);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(state.root, null), state.subtitle ? /*#__PURE__*/ createElement(state.subtitle, null) : null);
 };

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

@@ -1 +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"}
+{"version":3,"sources":["renderToastBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<ToastBodySlots>(state);\n\n  return (\n    <>\n      <state.root />\n      {state.subtitle ? <state.subtitle /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","renderToastBody_unstable","state","root","subtitle"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,QAA0B;IACjEF,YAA4BE;IAE5B,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOA,MAAMC,IAAI,SACVD,MAAME,QAAQ,iBAAG,AAfxB,cAeyBF,MAAME,QAAQ,UAAM,IAAI;AAGjD,EAAE"}

package/lib/components/ToastBody/useToastBody.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 /**
@@ -18,11 +18,15 @@ import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
             root: 'div',
             subtitle: 'div'
         },
-        subtitle: resolveShorthand(props.subtitle),
-        root: getNativeElementProps('div', {
+        subtitle: slot.optional(props.subtitle, {
+            elementType: 'div'
+        }),
+        root: slot.always(getNativeElementProps('div', {
             ref,
             id: bodyId,
             ...props
+        }), {
+            elementType: 'div'
         }),
         backgroundAppearance
     };

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

@@ -1 +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"}
+{"version":3,"sources":["useToastBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { bodyId } = useToastContainerContext();\n  return {\n    components: {\n      root: 'div',\n      subtitle: 'div',\n    },\n    subtitle: slot.optional(props.subtitle, { elementType: 'div' }),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        id: bodyId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","optional","elementType","always","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,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,KAAKW,QAAQ,CAACP,MAAMM,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMT,KAAKa,MAAM,CACfd,sBAAsB,OAAO;YAC3BM;YACAS,IAAIP;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

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

@@ -4,8 +4,8 @@ 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 useRootBaseClassName = /*#__PURE__*/__resetStyles("rnxxsue", null, [".rnxxsue{grid-column-start:2;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;grid-column-start:2;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"]);
 const useInvertedStyles = /*#__PURE__*/__styles({
   root: {
     sj55zd: "f1w7i9ko"

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

@@ -1 +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"}
+{"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,oOAQ5B,CAAC;AACF,MAAMQ,wBAAwB,gBAAGR,aAAA,oOAQhC,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/renderToastContainer.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } 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);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(Transition, {
         in: visible,
         appear: true,
@@ -17,5 +17,5 @@ import { ToastContainerContextProvider } from '../../contexts/toastContainerCont
         nodeRef: nodeRef
     }, /*#__PURE__*/ createElement(ToastContainerContextProvider, {
         value: contextValues.toast
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root), /*#__PURE__*/ createElement(slots.timer, slotProps.timer)));
+    }, /*#__PURE__*/ createElement(state.root, null), /*#__PURE__*/ createElement(state.timer, null)));
 };

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

@@ -1 +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"}
+{"version":3,"sources":["renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<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        <state.root />\n        <state.timer />\n      </ToastContainerContextProvider>\n    </Transition>\n  );\n};\n"],"names":["createElement","assertSlots","Transition","ToastContainerContextProvider","renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","in","appear","unmountOnExit","timeout","onExited","onEntering","value","toast","root","timer"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,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;IAC9EJ,YAAiCI;IAEjC,qBACE,AAnBJ,cAmBKH;QACCU,IAAIJ;QACJK,QAAAA,IAAM;QACNC,eAAAA,IAAa;QACbC,SAASN;QACTO,UAAUN;QACVO,YAAYV;QACZI,SAASA;qBAET,AA5BN,cA4BOR;QAA8Be,OAAOZ,cAAca,KAAK;qBACvD,AA7BR,cA6BSd,MAAMe,IAAI,uBACX,AA9BR,cA8BSf,MAAMgB,KAAK;AAIpB,EAAE"}

package/lib/components/ToastContainer/useToastContainer.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, useEventCallback, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
 import { Delete, Tab } from '@fluentui/keyboard-keys';
 import { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';
@@ -198,15 +198,15 @@ const intentPolitenessMap = {
             timer: Timer,
             root: 'div'
         },
-        timer: resolveShorthand({
+        timer: slot.always({
             key: updateId,
             onTimeout: close,
             running,
             timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1
         }, {
-            required: true
+            elementType: Timer
         }),
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: useMergedRefs(ref, toastRef, toastAnimationRef),
             children,
             tabIndex: 0,
@@ -219,6 +219,8 @@ const intentPolitenessMap = {
             onMouseEnter,
             onMouseLeave,
             onKeyDown
+        }), {
+            elementType: 'div'
         }),
         timerTimeout,
         transitionTimeout: 500,

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

@@ -1 +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 { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\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  const focusableGroupAttribute = useFocusableGroup({\n    tabBehavior: 'limited-trap-focus',\n    // Users should only use Tab to focus into the toast\n    // Escape is already reserved to dismiss all toasts\n    ignoreDefaultKeydown: { Tab: true, Escape: true, Enter: true },\n  });\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  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      toastRef.current.focus();\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 { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === Delete) {\n      e.preventDefault();\n      close();\n    }\n\n    if (e.key === Tab && e.currentTarget === e.target) {\n      e.preventDefault();\n      if (e.shiftKey) {\n        findLastFocusable(e.currentTarget)?.focus();\n      } else {\n        findFirstFocusable(e.currentTarget)?.focus();\n      }\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: 0,\n      role: 'listitem',\n      'aria-labelledby': titleId,\n      'aria-describedby': bodyId,\n      ...rest,\n      ...userRootSlot,\n      ...focusableGroupAttribute,\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","Delete","Tab","useFocusableGroup","useFocusFinders","Timer","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","focusableGroupAttribute","tabBehavior","ignoreDefaultKeydown","Escape","Enter","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","useImperativeHandle","focus","useEffect","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","onKeyDown","key","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","onTimeout","required","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}
+{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  useMergedRefs,\n  ExtractSlotProps,\n  Slot,\n  useEventCallback,\n  useId,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\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  const focusableGroupAttribute = useFocusableGroup({\n    tabBehavior: 'limited-trap-focus',\n    // Users should only use Tab to focus into the toast\n    // Escape is already reserved to dismiss all toasts\n    ignoreDefaultKeydown: { Tab: true, Escape: true, Enter: true },\n  });\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  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      toastRef.current.focus();\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 { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === Delete) {\n      e.preventDefault();\n      close();\n    }\n\n    if (e.key === Tab && e.currentTarget === e.target) {\n      e.preventDefault();\n      if (e.shiftKey) {\n        findLastFocusable(e.currentTarget)?.focus();\n      } else {\n        findFirstFocusable(e.currentTarget)?.focus();\n      }\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: slot.always<TimerProps>(\n      { key: updateId, onTimeout: close, running, timeout: timerTimeout ?? -1 },\n      { elementType: Timer },\n    ),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, toastRef, toastAnimationRef),\n        children,\n        tabIndex: 0,\n        role: 'listitem',\n        'aria-labelledby': titleId,\n        'aria-describedby': bodyId,\n        ...rest,\n        ...userRootSlot,\n        ...focusableGroupAttribute,\n        onMouseEnter,\n        onMouseLeave,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\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","useId","slot","useFluent_unstable","Delete","Tab","useFocusableGroup","useFocusFinders","Timer","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","focusableGroupAttribute","tabBehavior","ignoreDefaultKeydown","Escape","Enter","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","useImperativeHandle","focus","useEffect","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","onKeyDown","key","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","always","onTimeout","elementType","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}

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

@@ -21,8 +21,8 @@ const useStyles = /*#__PURE__*/__styles({
     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;}}"]
+  d: [".fayl5bc{animation-duration:200ms,400ms;}", ".f17oyct0{animation-delay:0ms,200ms;}", ".fvv8lvk{animation-name:f1rp83na,f5j8bii;}", ".f1tk3cza{animation-duration:400ms,200ms;}", ".f1nx6yy9{animation-delay:0ms,400ms;}", ".f9wuypy{animation-name:fk0lfw7,f1n32sdh;}"],
+  k: ["@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity: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