@fluentui/react-toast 9.5.4 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Fri, 04 Jul 2025 10:00:11 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.6.0)
+
+Thu, 17 Jul 2025 13:45:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.5.5..@fluentui/react-toast_v9.6.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-portal to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.5.5)
+
+Wed, 16 Jul 2025 13:52:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.5.4..@fluentui/react-toast_v9.5.5)
+
+### Patches
+
+- Bump @fluentui/react-motion-components-preview to v0.7.0 ([PR #34849](https://github.com/microsoft/fluentui/pull/34849) by beachball)
+
 ## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.5.4)
 
-Fri, 04 Jul 2025 10:00:11 GMT 
+Fri, 04 Jul 2025 10:02:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.5.3..@fluentui/react-toast_v9.5.4)
 
 ### Patches

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

@@ -0,0 +1,25 @@
+import { mergeClasses, makeResetStyles } from '@griffel/react';
+export const ariaLiveClassNames = {
+    assertive: 'fui-AriaLive__assertive',
+    polite: 'fui-AriaLive__polite'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = makeResetStyles({
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
+    width: '1px',
+    position: 'absolute'
+});
+/**
+ * Apply styling to the AriaLive slots based on the state
+ */ export const useAriaLiveStyles_unstable = (state)=>{
+    'use no memo';
+    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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n  assertive: 'fui-AriaLive__assertive',\n  polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  clip: 'rect(0px, 0px, 0px, 0px)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: '0px',\n  width: '1px',\n  position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n  'use no memo';\n\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\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","clip","height","margin","overflow","padding","width","position","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,qBAAoD;IAC/DC,WAAW;IACXC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBJ,gBAAgB;IACrCK,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBV;IACvBS,MAAMX,SAAS,CAACa,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBC,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChHF,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBE,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT,EAAE"}

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

@@ -0,0 +1,11 @@
+import { makeResetStyles } from '@griffel/react';
+export const useBaseAnimationStyles = makeResetStyles({
+    animationName: {
+        from: {
+            opacity: 0
+        },
+        to: {
+            opacity: 0
+        }
+    }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timer/useTimerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n\nexport const useBaseAnimationStyles = makeResetStyles({\n  animationName: {\n    from: {\n      opacity: 0,\n    },\n    to: {\n      opacity: 0,\n    },\n  },\n});\n"],"names":["makeResetStyles","useBaseAnimationStyles","animationName","from","opacity","to"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,iBAAiB;AAEjD,OAAO,MAAMC,yBAAyBD,gBAAgB;IACpDE,eAAe;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;AACF,GAAG"}

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

@@ -0,0 +1,33 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastClassNames = {
+    root: 'fui-Toast'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
+    padding: '12px',
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorTransparentStroke}`,
+    boxShadow: tokens.shadow8,
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: '20px',
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1
+});
+const useStyles = makeStyles({
+    inverted: {
+        color: tokens.colorNeutralForegroundInverted2,
+        backgroundColor: tokens.colorNeutralBackgroundInverted
+    }
+});
+/**
+ * Apply styling to the Toast slots based on the state
+ */ export const useToastStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useStyles();
+    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastSlots, ToastState } from './Toast.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastClassNames: SlotClassNames<ToastSlots> = {\n  root: 'fui-Toast',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: 'auto 1fr auto',\n  padding: '12px',\n  borderRadius: tokens.borderRadiusMedium,\n  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});\n\nconst useStyles = makeStyles({\n  inverted: {\n    color: tokens.colorNeutralForegroundInverted2,\n    backgroundColor: tokens.colorNeutralBackgroundInverted,\n  },\n});\n\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = (state: ToastState): ToastState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    toastClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && styles.inverted,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","display","gridTemplateColumns","padding","borderRadius","borderRadiusMedium","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","lineHeight","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","useStyles","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,qBAAqB;IACrBC,SAAS;IACTC,cAAcP,OAAOQ,kBAAkB;IACvCC,QAAQ,CAAC,UAAU,EAAET,OAAOU,sBAAsB,CAAC,CAAC;IACpDC,WAAWX,OAAOY,OAAO;IACzBC,UAAUb,OAAOc,eAAe;IAChCC,YAAY;IACZC,YAAYhB,OAAOiB,kBAAkB;IACrCC,OAAOlB,OAAOmB,uBAAuB;IACrCC,iBAAiBpB,OAAOqB,uBAAuB;AACjD;AAEA,MAAMC,YAAYxB,WAAW;IAC3ByB,UAAU;QACRL,OAAOlB,OAAOwB,+BAA+B;QAC7CJ,iBAAiBpB,OAAOyB,8BAA8B;IACxD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAMC,oBAAoBzB;IAC1B,MAAM0B,SAASP;IACfK,MAAMzB,IAAI,CAAC4B,SAAS,GAAG/B,aACrBE,gBAAgBC,IAAI,EACpB0B,mBACAD,MAAMI,oBAAoB,KAAK,cAAcF,OAAON,QAAQ,EAC5DI,MAAMzB,IAAI,CAAC4B,SAAS;IAGtB,OAAOH;AACT,EAAE"}

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

@@ -0,0 +1,46 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastBodyClassNames = {
+    root: 'fui-ToastBody',
+    subtitle: 'fui-ToastBody__subtitle'
+};
+const useRootBaseClassName = makeResetStyles({
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    paddingTop: '6px',
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground1,
+    wordBreak: 'break-word'
+});
+const useSubtitleBaseClassName = makeResetStyles({
+    paddingTop: '4px',
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    fontSize: tokens.fontSizeBase200,
+    lineHeight: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2
+});
+const useInvertedStyles = makeStyles({
+    root: {
+        color: tokens.colorNeutralForegroundInverted2
+    },
+    subtitle: {
+        color: tokens.colorNeutralForegroundInverted2
+    }
+});
+/**
+ * Apply styling to the ToastBody slots based on the state
+ */ export const useToastBodyStyles_unstable = (state)=>{
+    'use no memo';
+    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;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastBodySlots, ToastBodyState } from './ToastBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastBodyClassNames: SlotClassNames<ToastBodySlots> = {\n  root: 'fui-ToastBody',\n  subtitle: 'fui-ToastBody__subtitle',\n};\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  wordBreak: 'break-word',\n});\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});\n\nconst useInvertedStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n  subtitle: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\n/**\n * Apply styling to the ToastBody slots based on the state\n */\nexport const useToastBodyStyles_unstable = (state: ToastBodyState): ToastBodyState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const subtitleBaseClassName = useSubtitleBaseClassName();\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(\n    toastBodyClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && invertedStyles.root,\n    state.root.className,\n  );\n\n  if (state.subtitle) {\n    state.subtitle.className = mergeClasses(\n      toastBodyClassNames.subtitle,\n      subtitleBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.subtitle,\n      state.subtitle.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","gridColumnStart","gridColumnEnd","paddingTop","fontSize","fontSizeBase300","lineHeight","fontWeight","fontWeightRegular","color","colorNeutralForeground1","wordBreak","useSubtitleBaseClassName","fontSizeBase200","colorNeutralForeground2","useInvertedStyles","colorNeutralForegroundInverted2","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZC,UAAUR,OAAOS,eAAe;IAChCC,YAAYV,OAAOS,eAAe;IAClCE,YAAYX,OAAOY,iBAAiB;IACpCC,OAAOb,OAAOc,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,2BAA2BnB,gBAAgB;IAC/CU,YAAY;IACZF,iBAAiB;IACjBC,eAAe;IACfE,UAAUR,OAAOiB,eAAe;IAChCP,YAAYV,OAAOiB,eAAe;IAClCN,YAAYX,OAAOY,iBAAiB;IACpCC,OAAOb,OAAOkB,uBAAuB;AACvC;AAEA,MAAMC,oBAAoBrB,WAAW;IACnCI,MAAM;QACJW,OAAOb,OAAOoB,+BAA+B;IAC/C;IACAjB,UAAU;QACRU,OAAOb,OAAOoB,+BAA+B;IAC/C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,oBAAoBnB;IAC1B,MAAMoB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;IACvBG,MAAMpB,IAAI,CAACwB,SAAS,GAAG3B,aACrBE,oBAAoBC,IAAI,EACxBqB,mBACAD,MAAMK,oBAAoB,KAAK,cAAcF,eAAevB,IAAI,EAChEoB,MAAMpB,IAAI,CAACwB,SAAS;IAGtB,IAAIJ,MAAMnB,QAAQ,EAAE;QAClBmB,MAAMnB,QAAQ,CAACuB,SAAS,GAAG3B,aACzBE,oBAAoBE,QAAQ,EAC5BqB,uBACAF,MAAMK,oBAAoB,KAAK,cAAcF,eAAetB,QAAQ,EACpEmB,MAAMnB,QAAQ,CAACuB,SAAS;IAE5B;IAEA,OAAOJ;AACT,EAAE"}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+export const toastFooterClassNames = {
+    root: 'fui-ToastFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    paddingTop: '16px',
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px'
+});
+/**
+ * Apply styling to the ToastFooter slots based on the state
+ */ export const useToastFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastFooterClassNames: SlotClassNames<ToastFooterSlots> = {\n  root: 'fui-ToastFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  paddingTop: '16px',\n  gridColumnStart: 2,\n  gridColumnEnd: 3,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '14px',\n});\n\n/**\n * Apply styling to the ToastFooter slots based on the state\n */\nexport const useToastFooterStyles_unstable = (state: ToastFooterState): ToastFooterState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","toastFooterClassNames","root","useRootBaseClassName","paddingTop","gridColumnStart","gridColumnEnd","display","alignItems","gap","useToastFooterStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBJ,gBAAgB;IAC3CK,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IACfC,SAAS;IACTC,YAAY;IACZC,KAAK;AACP;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,oBAAoBT;IAC1BQ,MAAMT,IAAI,CAACW,SAAS,GAAGb,aAAaC,sBAAsBC,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT,EAAE"}

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

@@ -0,0 +1,87 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const toastTitleClassNames = {
+    root: 'fui-ToastTitle',
+    media: 'fui-ToastTitle__media',
+    action: 'fui-ToastTitle__action'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'flex',
+    gridColumnEnd: 3,
+    color: tokens.colorNeutralForeground1,
+    wordBreak: 'break-word'
+});
+const useMediaBaseClassName = makeResetStyles({
+    display: 'flex',
+    paddingTop: '2px',
+    gridColumnEnd: 2,
+    paddingRight: '8px',
+    fontSize: '16px',
+    color: tokens.colorNeutralForeground1
+});
+const useActionBaseClassName = makeResetStyles({
+    display: 'flex',
+    alignItems: 'start',
+    paddingLeft: '12px',
+    gridColumnEnd: -1,
+    color: tokens.colorBrandForeground1
+});
+const useInvertedStyles = makeStyles({
+    root: {
+        color: tokens.colorNeutralForegroundInverted2
+    },
+    action: {
+        color: tokens.colorBrandForegroundInverted
+    },
+    media: {
+        color: tokens.colorNeutralForegroundInverted
+    }
+});
+const useIntentIconStyles = makeStyles({
+    success: {
+        color: tokens.colorStatusSuccessForeground1
+    },
+    error: {
+        color: tokens.colorStatusDangerForeground1
+    },
+    warning: {
+        color: tokens.colorStatusWarningForeground1
+    },
+    info: {
+        color: tokens.colorNeutralForeground2
+    }
+});
+const useIntentIconStylesInverted = makeStyles({
+    success: {
+        color: tokens.colorStatusSuccessForegroundInverted
+    },
+    error: {
+        color: tokens.colorStatusDangerForegroundInverted
+    },
+    warning: {
+        color: tokens.colorStatusWarningForegroundInverted
+    },
+    info: {
+        color: tokens.colorNeutralForegroundInverted2
+    }
+});
+/**
+ * Apply styling to the ToastTitle slots based on the state
+ */ export const useToastTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const actionBaseClassName = useActionBaseClassName();
+    const mediaBaseClassName = useMediaBaseClassName();
+    const intentIconStyles = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const { intent } = state;
+    const invertedStyles = useInvertedStyles();
+    state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+    if (state.media) {
+        state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className);
+    }
+    if (state.action) {
+        state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/useToastTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\n\nexport const toastTitleClassNames: SlotClassNames<ToastTitleSlots> = {\n  root: 'fui-ToastTitle',\n  media: 'fui-ToastTitle__media',\n  action: 'fui-ToastTitle__action',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'flex',\n  gridColumnEnd: 3,\n  color: tokens.colorNeutralForeground1,\n  wordBreak: 'break-word',\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'flex',\n  paddingTop: '2px',\n  gridColumnEnd: 2,\n  paddingRight: '8px',\n  fontSize: '16px',\n  color: tokens.colorNeutralForeground1,\n});\n\nconst useActionBaseClassName = makeResetStyles({\n  display: 'flex',\n  alignItems: 'start',\n  paddingLeft: '12px',\n  gridColumnEnd: -1,\n  color: tokens.colorBrandForeground1,\n});\n\nconst useInvertedStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n\n  action: {\n    color: tokens.colorBrandForegroundInverted,\n  },\n\n  media: {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorStatusSuccessForeground1,\n  },\n  error: {\n    color: tokens.colorStatusDangerForeground1,\n  },\n  warning: {\n    color: tokens.colorStatusWarningForeground1,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n  success: {\n    color: tokens.colorStatusSuccessForegroundInverted,\n  },\n  error: {\n    color: tokens.colorStatusDangerForegroundInverted,\n  },\n  warning: {\n    color: tokens.colorStatusWarningForegroundInverted,\n  },\n  info: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\n/**\n * Apply styling to the ToastTitle slots based on the state\n */\nexport const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const actionBaseClassName = useActionBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const intentIconStyles = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const { intent } = state;\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(\n    toastTitleClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && invertedStyles.root,\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      toastTitleClassNames.media,\n      mediaBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.media,\n      intent && intentIconStyles[intent],\n      intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent],\n      state.media.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(\n      toastTitleClassNames.action,\n      actionBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.action,\n      state.action.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","display","gridColumnEnd","color","colorNeutralForeground1","wordBreak","useMediaBaseClassName","paddingTop","paddingRight","fontSize","useActionBaseClassName","alignItems","paddingLeft","colorBrandForeground1","useInvertedStyles","colorNeutralForegroundInverted2","colorBrandForegroundInverted","colorNeutralForegroundInverted","useIntentIconStyles","success","colorStatusSuccessForeground1","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground1","info","colorNeutralForeground2","useIntentIconStylesInverted","colorStatusSuccessForegroundInverted","colorStatusDangerForegroundInverted","colorStatusWarningForegroundInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,SAAS;IACTC,eAAe;IACfC,OAAOR,OAAOS,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,wBAAwBb,gBAAgB;IAC5CQ,SAAS;IACTM,YAAY;IACZL,eAAe;IACfM,cAAc;IACdC,UAAU;IACVN,OAAOR,OAAOS,uBAAuB;AACvC;AAEA,MAAMM,yBAAyBjB,gBAAgB;IAC7CQ,SAAS;IACTU,YAAY;IACZC,aAAa;IACbV,eAAe,CAAC;IAChBC,OAAOR,OAAOkB,qBAAqB;AACrC;AAEA,MAAMC,oBAAoBtB,WAAW;IACnCK,MAAM;QACJM,OAAOR,OAAOoB,+BAA+B;IAC/C;IAEAhB,QAAQ;QACNI,OAAOR,OAAOqB,4BAA4B;IAC5C;IAEAlB,OAAO;QACLK,OAAOR,OAAOsB,8BAA8B;IAC9C;AACF;AAEA,MAAMC,sBAAsB1B,WAAW;IACrC2B,SAAS;QACPhB,OAAOR,OAAOyB,6BAA6B;IAC7C;IACAC,OAAO;QACLlB,OAAOR,OAAO2B,4BAA4B;IAC5C;IACAC,SAAS;QACPpB,OAAOR,OAAO6B,6BAA6B;IAC7C;IACAC,MAAM;QACJtB,OAAOR,OAAO+B,uBAAuB;IACvC;AACF;AAEA,MAAMC,8BAA8BnC,WAAW;IAC7C2B,SAAS;QACPhB,OAAOR,OAAOiC,oCAAoC;IACpD;IACAP,OAAO;QACLlB,OAAOR,OAAOkC,mCAAmC;IACnD;IACAN,SAAS;QACPpB,OAAOR,OAAOmC,oCAAoC;IACpD;IACAL,MAAM;QACJtB,OAAOR,OAAOoB,+BAA+B;IAC/C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMgB,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,sBAAsBxB;IAC5B,MAAMyB,qBAAqB7B;IAC3B,MAAM8B,mBAAmBlB;IACzB,MAAMmB,2BAA2BV;IACjC,MAAM,EAAEW,MAAM,EAAE,GAAGN;IACnB,MAAMO,iBAAiBzB;IACvBkB,MAAMnC,IAAI,CAAC2C,SAAS,GAAG9C,aACrBE,qBAAqBC,IAAI,EACzBoC,mBACAD,MAAMS,oBAAoB,KAAK,cAAcF,eAAe1C,IAAI,EAChEmC,MAAMnC,IAAI,CAAC2C,SAAS;IAGtB,IAAIR,MAAMlC,KAAK,EAAE;QACfkC,MAAMlC,KAAK,CAAC0C,SAAS,GAAG9C,aACtBE,qBAAqBE,KAAK,EAC1BqC,oBACAH,MAAMS,oBAAoB,KAAK,cAAcF,eAAezC,KAAK,EACjEwC,UAAUF,gBAAgB,CAACE,OAAO,EAClCA,UAAUN,MAAMS,oBAAoB,KAAK,cAAcJ,wBAAwB,CAACC,OAAO,EACvFN,MAAMlC,KAAK,CAAC0C,SAAS;IAEzB;IAEA,IAAIR,MAAMjC,MAAM,EAAE;QAChBiC,MAAMjC,MAAM,CAACyC,SAAS,GAAG9C,aACvBE,qBAAqBG,MAAM,EAC3BmC,qBACAF,MAAMS,oBAAoB,KAAK,cAAcF,eAAexC,MAAM,EAClEiC,MAAMjC,MAAM,CAACyC,SAAS;IAE1B;IAEA,OAAOR;AACT,EAAE"}

package/lib/components/Toaster/useToasterStyles.styles.raw.js

@@ -0,0 +1,68 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { TOAST_POSITIONS, getPositionStyles } from '../../state/index';
+export const toasterClassNames = {
+    root: 'fui-Toaster'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    position: 'fixed',
+    width: '292px',
+    pointerEvents: 'none'
+});
+const useToasterStyles = makeStyles({
+    inline: {
+        position: 'absolute'
+    }
+});
+/**
+ * Apply styling to the Toaster slots based on the state
+ */ export const useToasterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useToasterStyles();
+    const className = mergeClasses(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
+    if (state.bottomStart) {
+        var _state_bottomStart;
+        state.bottomStart.className = className;
+        var _style;
+        (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};
+        Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));
+    }
+    if (state.bottomEnd) {
+        var _state_bottomEnd;
+        state.bottomEnd.className = className;
+        var _style1;
+        (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};
+        Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));
+    }
+    if (state.topStart) {
+        var _state_topStart;
+        state.topStart.className = className;
+        var _style2;
+        (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};
+        Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));
+    }
+    if (state.topEnd) {
+        var _state_topEnd;
+        state.topEnd.className = className;
+        var _style3;
+        (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};
+        Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));
+    }
+    if (state.top) {
+        var _state_top;
+        state.top.className = className;
+        var _style4;
+        (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};
+        Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));
+    }
+    if (state.bottom) {
+        var _state_bottom;
+        state.bottom.className = className;
+        var _style5;
+        (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};
+        Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));
+    }
+    return state;
+};

package/lib/components/Toaster/useToasterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n  root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  position: 'fixed',\n  width: '292px',\n  pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n  inline: {\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useToasterStyles();\n  const className = mergeClasses(\n    toasterClassNames.root,\n    rootBaseClassName,\n    state.inline && styles.inline,\n    state.root.className,\n  );\n  if (state.bottomStart) {\n    state.bottomStart.className = className;\n    state.bottomStart.style ??= {};\n    Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n  }\n\n  if (state.bottomEnd) {\n    state.bottomEnd.className = className;\n    state.bottomEnd.style ??= {};\n    Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n  }\n\n  if (state.topStart) {\n    state.topStart.className = className;\n    state.topStart.style ??= {};\n    Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n  }\n\n  if (state.topEnd) {\n    state.topEnd.className = className;\n    state.topEnd.style ??= {};\n    Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n  }\n\n  if (state.top) {\n    state.top.className = className;\n    state.top.style ??= {};\n    Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n  }\n\n  if (state.bottom) {\n    state.bottom.className = className;\n    state.bottom.style ??= {};\n    Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","position","width","pointerEvents","useToasterStyles","inline","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","style","Object","assign","dir","offset","bottomEnd","topStart","topEnd","top","bottom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,oBAAoB;AAEvE,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,UAAU;IACVC,OAAO;IACPC,eAAe;AACjB;AAEA,MAAMC,mBAAmBV,WAAW;IAClCW,QAAQ;QACNJ,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,4BAA4B,CAACC;IACxC;IAEA,MAAMC,oBAAoBR;IAC1B,MAAMS,SAASL;IACf,MAAMM,YAAYf,aAChBG,kBAAkBC,IAAI,EACtBS,mBACAD,MAAMF,MAAM,IAAII,OAAOJ,MAAM,EAC7BE,MAAMR,IAAI,CAACW,SAAS;IAEtB,IAAIH,MAAMI,WAAW,EAAE;YAErBJ;QADAA,MAAMI,WAAW,CAACD,SAAS,GAAGA;;QAC9BH,WAAAA,qBAAAA,MAAMI,WAAW,EAACC,gDAAlBL,mBAAkBK,QAAU,CAAC;QAC7BC,OAAOC,MAAM,CAACP,MAAMI,WAAW,CAACC,KAAK,EAAEf,kBAAkBD,gBAAgBe,WAAW,EAAEJ,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IAC/G;IAEA,IAAIT,MAAMU,SAAS,EAAE;YAEnBV;QADAA,MAAMU,SAAS,CAACP,SAAS,GAAGA;;QAC5BH,YAAAA,mBAAAA,MAAMU,SAAS,EAACL,kDAAhBL,iBAAgBK,QAAU,CAAC;QAC3BC,OAAOC,MAAM,CAACP,MAAMU,SAAS,CAACL,KAAK,EAAEf,kBAAkBD,gBAAgBqB,SAAS,EAAEV,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IAC3G;IAEA,IAAIT,MAAMW,QAAQ,EAAE;YAElBX;QADAA,MAAMW,QAAQ,CAACR,SAAS,GAAGA;;QAC3BH,YAAAA,kBAAAA,MAAMW,QAAQ,EAACN,kDAAfL,gBAAeK,QAAU,CAAC;QAC1BC,OAAOC,MAAM,CAACP,MAAMW,QAAQ,CAACN,KAAK,EAAEf,kBAAkBD,gBAAgBsB,QAAQ,EAAEX,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IACzG;IAEA,IAAIT,MAAMY,MAAM,EAAE;YAEhBZ;QADAA,MAAMY,MAAM,CAACT,SAAS,GAAGA;;QACzBH,YAAAA,gBAAAA,MAAMY,MAAM,EAACP,kDAAbL,cAAaK,QAAU,CAAC;QACxBC,OAAOC,MAAM,CAACP,MAAMY,MAAM,CAACP,KAAK,EAAEf,kBAAkBD,gBAAgBuB,MAAM,EAAEZ,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IACrG;IAEA,IAAIT,MAAMa,GAAG,EAAE;YAEbb;QADAA,MAAMa,GAAG,CAACV,SAAS,GAAGA;;QACtBH,YAAAA,aAAAA,MAAMa,GAAG,EAACR,kDAAVL,WAAUK,QAAU,CAAC;QACrBC,OAAOC,MAAM,CAACP,MAAMa,GAAG,CAACR,KAAK,EAAEf,kBAAkBD,gBAAgBwB,GAAG,EAAEb,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IAC/F;IAEA,IAAIT,MAAMc,MAAM,EAAE;YAEhBd;QADAA,MAAMc,MAAM,CAACX,SAAS,GAAGA;;QACzBH,YAAAA,gBAAAA,MAAMc,MAAM,EAACT,kDAAbL,cAAaK,QAAU,CAAC;QACxBC,OAAOC,MAAM,CAACP,MAAMc,MAAM,CAACT,KAAK,EAAEf,kBAAkBD,gBAAgByB,MAAM,EAAEd,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IACrG;IAEA,OAAOT;AACT,EAAE"}

package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ariaLiveClassNames: function() {
+        return ariaLiveClassNames;
+    },
+    useAriaLiveStyles_unstable: function() {
+        return useAriaLiveStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const ariaLiveClassNames = {
+    assertive: 'fui-AriaLive__assertive',
+    polite: 'fui-AriaLive__polite'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
+    width: '1px',
+    position: 'absolute'
+});
+const useAriaLiveStyles_unstable = (state)=>{
+    'use no memo';
+    const visuallyHidden = useResetStyles();
+    state.assertive.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
+    state.polite.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);
+    return state;
+};

package/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n  assertive: 'fui-AriaLive__assertive',\n  polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  clip: 'rect(0px, 0px, 0px, 0px)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: '0px',\n  width: '1px',\n  position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n  'use no memo';\n\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\n  return state;\n};\n"],"names":["ariaLiveClassNames","useAriaLiveStyles_unstable","assertive","polite","useResetStyles","makeResetStyles","clip","height","margin","overflow","padding","width","position","state","visuallyHidden","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,kBAAAA;eAAAA;;IAqBAC,0BAAAA;eAAAA;;;uBAzBiC;AAIvC,MAAMD,qBAAoD;IAC/DE,WAAW;IACXC,QAAQ;AACV;AAEA;;CAEC,GACD,MAAMC,iBAAiBC,IAAAA,sBAAAA,EAAgB;IACrCC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAKO,MAAMX,6BAA6B,CAACY;IACzC;IAEA,MAAMC,iBAAiBV;IACvBS,MAAMX,SAAS,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EAAaF,gBAAgBd,mBAAmBE,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChHF,MAAMV,MAAM,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EAAaF,gBAAgBd,mBAAmBG,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT"}

package/lib-commonjs/components/Timer/useTimerStyles.styles.raw.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useBaseAnimationStyles", {
+    enumerable: true,
+    get: function() {
+        return useBaseAnimationStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useBaseAnimationStyles = (0, _react.makeResetStyles)({
+    animationName: {
+        from: {
+            opacity: 0
+        },
+        to: {
+            opacity: 0
+        }
+    }
+});

package/lib-commonjs/components/Timer/useTimerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timer/useTimerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n\nexport const useBaseAnimationStyles = makeResetStyles({\n  animationName: {\n    from: {\n      opacity: 0,\n    },\n    to: {\n      opacity: 0,\n    },\n  },\n});\n"],"names":["useBaseAnimationStyles","makeResetStyles","animationName","from","opacity","to"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;uBAFmB;AAEzB,MAAMA,yBAAyBC,IAAAA,sBAAAA,EAAgB;IACpDC,eAAe;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;AACF"}

package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toastClassNames: function() {
+        return toastClassNames;
+    },
+    useToastStyles_unstable: function() {
+        return useToastStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const toastClassNames = {
+    root: 'fui-Toast'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
+    padding: '12px',
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+    boxShadow: _reacttheme.tokens.shadow8,
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    lineHeight: '20px',
+    fontWeight: _reacttheme.tokens.fontWeightSemibold,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+});
+const useStyles = (0, _react.makeStyles)({
+    inverted: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundInverted
+    }
+});
+const useToastStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
+    return state;
+};

package/lib-commonjs/components/Toast/useToastStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/useToastStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastSlots, ToastState } from './Toast.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastClassNames: SlotClassNames<ToastSlots> = {\n  root: 'fui-Toast',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'grid',\n  gridTemplateColumns: 'auto 1fr auto',\n  padding: '12px',\n  borderRadius: tokens.borderRadiusMedium,\n  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});\n\nconst useStyles = makeStyles({\n  inverted: {\n    color: tokens.colorNeutralForegroundInverted2,\n    backgroundColor: tokens.colorNeutralBackgroundInverted,\n  },\n});\n\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = (state: ToastState): ToastState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    toastClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && styles.inverted,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","makeResetStyles","display","gridTemplateColumns","padding","borderRadius","tokens","borderRadiusMedium","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","lineHeight","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","useStyles","makeStyles","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,eAAAA;eAAAA;;IA4BAC,uBAAAA;eAAAA;;;uBAjC6C;4BACnC;AAIhB,MAAMD,kBAA8C;IACzDE,MAAM;AACR;AAEA,MAAMC,uBAAuBC,IAAAA,sBAAAA,EAAgB;IAC3CC,SAAS;IACTC,qBAAqB;IACrBC,SAAS;IACTC,cAAcC,kBAAAA,CAAOC,kBAAkB;IACvCC,QAAQ,CAAC,UAAU,EAAEF,kBAAAA,CAAOG,sBAAsB,CAAC,CAAC;IACpDC,WAAWJ,kBAAAA,CAAOK,OAAO;IACzBC,UAAUN,kBAAAA,CAAOO,eAAe;IAChCC,YAAY;IACZC,YAAYT,kBAAAA,CAAOU,kBAAkB;IACrCC,OAAOX,kBAAAA,CAAOY,uBAAuB;IACrCC,iBAAiBb,kBAAAA,CAAOc,uBAAuB;AACjD;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,UAAU;QACRN,OAAOX,kBAAAA,CAAOkB,+BAA+B;QAC7CL,iBAAiBb,kBAAAA,CAAOmB,8BAA8B;IACxD;AACF;AAKO,MAAM3B,0BAA0B,CAAC4B;IACtC;IAEA,MAAMC,oBAAoB3B;IAC1B,MAAM4B,SAASP;IACfK,MAAM3B,IAAI,CAAC8B,SAAS,GAAGC,IAAAA,mBAAAA,EACrBjC,gBAAgBE,IAAI,EACpB4B,mBACAD,MAAMK,oBAAoB,KAAK,cAAcH,OAAOL,QAAQ,EAC5DG,MAAM3B,IAAI,CAAC8B,SAAS;IAGtB,OAAOH;AACT"}

package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toastBodyClassNames: function() {
+        return toastBodyClassNames;
+    },
+    useToastBodyStyles_unstable: function() {
+        return useToastBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const toastBodyClassNames = {
+    root: 'fui-ToastBody',
+    subtitle: 'fui-ToastBody__subtitle'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    paddingTop: '6px',
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    lineHeight: _reacttheme.tokens.fontSizeBase300,
+    fontWeight: _reacttheme.tokens.fontWeightRegular,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    wordBreak: 'break-word'
+});
+const useSubtitleBaseClassName = (0, _react.makeResetStyles)({
+    paddingTop: '4px',
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    fontSize: _reacttheme.tokens.fontSizeBase200,
+    lineHeight: _reacttheme.tokens.fontSizeBase200,
+    fontWeight: _reacttheme.tokens.fontWeightRegular,
+    color: _reacttheme.tokens.colorNeutralForeground2
+});
+const useInvertedStyles = (0, _react.makeStyles)({
+    root: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    },
+    subtitle: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    }
+});
+const useToastBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const subtitleBaseClassName = useSubtitleBaseClassName();
+    const invertedStyles = useInvertedStyles();
+    state.root.className = (0, _react.mergeClasses)(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);
+    if (state.subtitle) {
+        state.subtitle.className = (0, _react.mergeClasses)(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);
+    }
+    return state;
+};

package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastBody/useToastBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ToastBodySlots, ToastBodyState } from './ToastBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastBodyClassNames: SlotClassNames<ToastBodySlots> = {\n  root: 'fui-ToastBody',\n  subtitle: 'fui-ToastBody__subtitle',\n};\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  wordBreak: 'break-word',\n});\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});\n\nconst useInvertedStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n  subtitle: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\n/**\n * Apply styling to the ToastBody slots based on the state\n */\nexport const useToastBodyStyles_unstable = (state: ToastBodyState): ToastBodyState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const subtitleBaseClassName = useSubtitleBaseClassName();\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(\n    toastBodyClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && invertedStyles.root,\n    state.root.className,\n  );\n\n  if (state.subtitle) {\n    state.subtitle.className = mergeClasses(\n      toastBodyClassNames.subtitle,\n      subtitleBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.subtitle,\n      state.subtitle.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["toastBodyClassNames","useToastBodyStyles_unstable","root","subtitle","useRootBaseClassName","makeResetStyles","gridColumnStart","gridColumnEnd","paddingTop","fontSize","tokens","fontSizeBase300","lineHeight","fontWeight","fontWeightRegular","color","colorNeutralForeground1","wordBreak","useSubtitleBaseClassName","fontSizeBase200","colorNeutralForeground2","useInvertedStyles","makeStyles","colorNeutralForegroundInverted2","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","mergeClasses","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,mBAAAA;eAAAA;;IAsCAC,2BAAAA;eAAAA;;;uBA3C6C;4BACnC;AAIhB,MAAMD,sBAAsD;IACjEE,MAAM;IACNC,UAAU;AACZ;AAEA,MAAMC,uBAAuBC,IAAAA,sBAAAA,EAAgB;IAC3CC,iBAAiB;IACjBC,eAAe;IACfC,YAAY;IACZC,UAAUC,kBAAAA,CAAOC,eAAe;IAChCC,YAAYF,kBAAAA,CAAOC,eAAe;IAClCE,YAAYH,kBAAAA,CAAOI,iBAAiB;IACpCC,OAAOL,kBAAAA,CAAOM,uBAAuB;IACrCC,WAAW;AACb;AAEA,MAAMC,2BAA2Bb,IAAAA,sBAAAA,EAAgB;IAC/CG,YAAY;IACZF,iBAAiB;IACjBC,eAAe;IACfE,UAAUC,kBAAAA,CAAOS,eAAe;IAChCP,YAAYF,kBAAAA,CAAOS,eAAe;IAClCN,YAAYH,kBAAAA,CAAOI,iBAAiB;IACpCC,OAAOL,kBAAAA,CAAOU,uBAAuB;AACvC;AAEA,MAAMC,oBAAoBC,IAAAA,iBAAAA,EAAW;IACnCpB,MAAM;QACJa,OAAOL,kBAAAA,CAAOa,+BAA+B;IAC/C;IACApB,UAAU;QACRY,OAAOL,kBAAAA,CAAOa,+BAA+B;IAC/C;AACF;AAKO,MAAMtB,8BAA8B,CAACuB;IAC1C;IAEA,MAAMC,oBAAoBrB;IAC1B,MAAMsB,wBAAwBR;IAC9B,MAAMS,iBAAiBN;IACvBG,MAAMtB,IAAI,CAAC0B,SAAS,GAAGC,IAAAA,mBAAAA,EACrB7B,oBAAoBE,IAAI,EACxBuB,mBACAD,MAAMM,oBAAoB,KAAK,cAAcH,eAAezB,IAAI,EAChEsB,MAAMtB,IAAI,CAAC0B,SAAS;IAGtB,IAAIJ,MAAMrB,QAAQ,EAAE;QAClBqB,MAAMrB,QAAQ,CAACyB,SAAS,GAAGC,IAAAA,mBAAAA,EACzB7B,oBAAoBG,QAAQ,EAC5BuB,uBACAF,MAAMM,oBAAoB,KAAK,cAAcH,eAAexB,QAAQ,EACpEqB,MAAMrB,QAAQ,CAACyB,SAAS;IAE5B;IAEA,OAAOJ;AACT"}

package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toastContainerClassNames: function() {
+        return toastContainerClassNames;
+    },
+    useToastContainerStyles_unstable: function() {
+        return useToastContainerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const toastContainerClassNames = {
+    root: 'fui-ToastContainer',
+    timer: 'fui-ToastContainer__timer'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    marginTop: '16px',
+    pointerEvents: 'all',
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`
+    })
+});
+const useToastContainerStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastContainer/useToastContainerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ToastContainerSlots, ToastContainerState } from './ToastContainer.types';\n\nexport const toastContainerClassNames: SlotClassNames<ToastContainerSlots> = {\n  root: 'fui-ToastContainer',\n  timer: 'fui-ToastContainer__timer',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  marginTop: '16px',\n  pointerEvents: 'all',\n  borderRadius: tokens.borderRadiusMedium,\n  ...createCustomFocusIndicatorStyle({\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n  }),\n});\n\n/**\n * Apply styling to the ToastContainer slots based on the state\n */\nexport const useToastContainerStyles_unstable = (state: ToastContainerState): ToastContainerState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["toastContainerClassNames","useToastContainerStyles_unstable","root","timer","useRootBaseClassName","makeResetStyles","boxSizing","marginTop","pointerEvents","borderRadius","tokens","borderRadiusMedium","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","state","rootBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,wBAAAA;eAAAA;;IAkBAC,gCAAAA;eAAAA;;;uBAxBiC;4BACvB;8BAEyB;AAGzC,MAAMD,2BAAgE;IAC3EE,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,uBAAuBC,IAAAA,sBAAAA,EAAgB;IAC3CC,WAAW;IACXC,WAAW;IACXC,eAAe;IACfC,cAAcC,kBAAAA,CAAOC,kBAAkB;IACvC,GAAGC,IAAAA,6CAAAA,EAAgC;QACjCC,SAAS,CAAC,EAAEH,kBAAAA,CAAOI,gBAAgB,CAAC,OAAO,EAAEJ,kBAAAA,CAAOK,iBAAiB,CAAC,CAAC;IACzE,EAAE;AACJ;AAKO,MAAMd,mCAAmC,CAACe;IAC/C;IAEA,MAAMC,oBAAoBb;IAC1BY,MAAMd,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAAA,EAAanB,yBAAyBE,IAAI,EAAEe,mBAAmBD,MAAMd,IAAI,CAACgB,SAAS;IAE1G,OAAOF;AACT"}

package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toastFooterClassNames: function() {
+        return toastFooterClassNames;
+    },
+    useToastFooterStyles_unstable: function() {
+        return useToastFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const toastFooterClassNames = {
+    root: 'fui-ToastFooter'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = (0, _react.makeResetStyles)({
+    paddingTop: '16px',
+    gridColumnStart: 2,
+    gridColumnEnd: 3,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '14px'
+});
+const useToastFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = (0, _react.mergeClasses)(toastFooterClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

package/lib-commonjs/components/ToastFooter/useToastFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastFooter/useToastFooterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ToastFooterSlots, ToastFooterState } from './ToastFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const toastFooterClassNames: SlotClassNames<ToastFooterSlots> = {\n  root: 'fui-ToastFooter',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  paddingTop: '16px',\n  gridColumnStart: 2,\n  gridColumnEnd: 3,\n  display: 'flex',\n  alignItems: 'center',\n  gap: '14px',\n});\n\n/**\n * Apply styling to the ToastFooter slots based on the state\n */\nexport const useToastFooterStyles_unstable = (state: ToastFooterState): ToastFooterState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(toastFooterClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["toastFooterClassNames","useToastFooterStyles_unstable","root","useRootBaseClassName","makeResetStyles","paddingTop","gridColumnStart","gridColumnEnd","display","alignItems","gap","state","rootBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,qBAAAA;eAAAA;;IAmBAC,6BAAAA;eAAAA;;;uBAvBiC;AAIvC,MAAMD,wBAA0D;IACrEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,sBAAAA,EAAgB;IAC3CC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IACfC,SAAS;IACTC,YAAY;IACZC,KAAK;AACP;AAKO,MAAMT,gCAAgC,CAACU;IAC5C;IAEA,MAAMC,oBAAoBT;IAC1BQ,MAAMT,IAAI,CAACW,SAAS,GAAGC,IAAAA,mBAAAA,EAAad,sBAAsBE,IAAI,EAAEU,mBAAmBD,MAAMT,IAAI,CAACW,SAAS;IAEvG,OAAOF;AACT"}

package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js

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

package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToastTitle/useToastTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ToastTitleSlots, ToastTitleState } from './ToastTitle.types';\n\nexport const toastTitleClassNames: SlotClassNames<ToastTitleSlots> = {\n  root: 'fui-ToastTitle',\n  media: 'fui-ToastTitle__media',\n  action: 'fui-ToastTitle__action',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'flex',\n  gridColumnEnd: 3,\n  color: tokens.colorNeutralForeground1,\n  wordBreak: 'break-word',\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'flex',\n  paddingTop: '2px',\n  gridColumnEnd: 2,\n  paddingRight: '8px',\n  fontSize: '16px',\n  color: tokens.colorNeutralForeground1,\n});\n\nconst useActionBaseClassName = makeResetStyles({\n  display: 'flex',\n  alignItems: 'start',\n  paddingLeft: '12px',\n  gridColumnEnd: -1,\n  color: tokens.colorBrandForeground1,\n});\n\nconst useInvertedStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n\n  action: {\n    color: tokens.colorBrandForegroundInverted,\n  },\n\n  media: {\n    color: tokens.colorNeutralForegroundInverted,\n  },\n});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorStatusSuccessForeground1,\n  },\n  error: {\n    color: tokens.colorStatusDangerForeground1,\n  },\n  warning: {\n    color: tokens.colorStatusWarningForeground1,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n  success: {\n    color: tokens.colorStatusSuccessForegroundInverted,\n  },\n  error: {\n    color: tokens.colorStatusDangerForegroundInverted,\n  },\n  warning: {\n    color: tokens.colorStatusWarningForegroundInverted,\n  },\n  info: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\n/**\n * Apply styling to the ToastTitle slots based on the state\n */\nexport const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitleState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const actionBaseClassName = useActionBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const intentIconStyles = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const { intent } = state;\n  const invertedStyles = useInvertedStyles();\n  state.root.className = mergeClasses(\n    toastTitleClassNames.root,\n    rootBaseClassName,\n    state.backgroundAppearance === 'inverted' && invertedStyles.root,\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      toastTitleClassNames.media,\n      mediaBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.media,\n      intent && intentIconStyles[intent],\n      intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent],\n      state.media.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(\n      toastTitleClassNames.action,\n      actionBaseClassName,\n      state.backgroundAppearance === 'inverted' && invertedStyles.action,\n      state.action.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["toastTitleClassNames","useToastTitleStyles_unstable","root","media","action","useRootBaseClassName","makeResetStyles","display","gridColumnEnd","color","tokens","colorNeutralForeground1","wordBreak","useMediaBaseClassName","paddingTop","paddingRight","fontSize","useActionBaseClassName","alignItems","paddingLeft","colorBrandForeground1","useInvertedStyles","makeStyles","colorNeutralForegroundInverted2","colorBrandForegroundInverted","colorNeutralForegroundInverted","useIntentIconStyles","success","colorStatusSuccessForeground1","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground1","info","colorNeutralForeground2","useIntentIconStylesInverted","colorStatusSuccessForegroundInverted","colorStatusDangerForegroundInverted","colorStatusWarningForegroundInverted","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","mergeClasses","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toasterClassNames: function() {
+        return toasterClassNames;
+    },
+    useToasterStyles_unstable: function() {
+        return useToasterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _index = require("../../state/index");
+const toasterClassNames = {
+    root: 'fui-Toaster'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = (0, _react.makeResetStyles)({
+    position: 'fixed',
+    width: '292px',
+    pointerEvents: 'none'
+});
+const useToasterStyles = (0, _react.makeStyles)({
+    inline: {
+        position: 'absolute'
+    }
+});
+const useToasterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useToasterStyles();
+    const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
+    if (state.bottomStart) {
+        var _state_bottomStart;
+        state.bottomStart.className = className;
+        var _style;
+        (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};
+        Object.assign(state.bottomStart.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottomStart, state.dir, state.offset));
+    }
+    if (state.bottomEnd) {
+        var _state_bottomEnd;
+        state.bottomEnd.className = className;
+        var _style1;
+        (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};
+        Object.assign(state.bottomEnd.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottomEnd, state.dir, state.offset));
+    }
+    if (state.topStart) {
+        var _state_topStart;
+        state.topStart.className = className;
+        var _style2;
+        (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};
+        Object.assign(state.topStart.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.topStart, state.dir, state.offset));
+    }
+    if (state.topEnd) {
+        var _state_topEnd;
+        state.topEnd.className = className;
+        var _style3;
+        (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};
+        Object.assign(state.topEnd.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.topEnd, state.dir, state.offset));
+    }
+    if (state.top) {
+        var _state_top;
+        state.top.className = className;
+        var _style4;
+        (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};
+        Object.assign(state.top.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.top, state.dir, state.offset));
+    }
+    if (state.bottom) {
+        var _state_bottom;
+        state.bottom.className = className;
+        var _style5;
+        (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};
+        Object.assign(state.bottom.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottom, state.dir, state.offset));
+    }
+    return state;
+};

package/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n  root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  position: 'fixed',\n  width: '292px',\n  pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n  inline: {\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useToasterStyles();\n  const className = mergeClasses(\n    toasterClassNames.root,\n    rootBaseClassName,\n    state.inline && styles.inline,\n    state.root.className,\n  );\n  if (state.bottomStart) {\n    state.bottomStart.className = className;\n    state.bottomStart.style ??= {};\n    Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n  }\n\n  if (state.bottomEnd) {\n    state.bottomEnd.className = className;\n    state.bottomEnd.style ??= {};\n    Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n  }\n\n  if (state.topStart) {\n    state.topStart.className = className;\n    state.topStart.style ??= {};\n    Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n  }\n\n  if (state.topEnd) {\n    state.topEnd.className = className;\n    state.topEnd.style ??= {};\n    Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n  }\n\n  if (state.top) {\n    state.top.className = className;\n    state.top.style ??= {};\n    Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n  }\n\n  if (state.bottom) {\n    state.bottom.className = className;\n    state.bottom.style ??= {};\n    Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n  }\n\n  return state;\n};\n"],"names":["toasterClassNames","useToasterStyles_unstable","root","useRootBaseClassName","makeResetStyles","position","width","pointerEvents","useToasterStyles","makeStyles","inline","state","rootBaseClassName","styles","className","mergeClasses","bottomStart","style","Object","assign","getPositionStyles","TOAST_POSITIONS","dir","offset","bottomEnd","topStart","topEnd","top","bottom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toast",
-  "version": "9.5.4",
+  "version": "9.6.0",
   "description": "Toast component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,14 +21,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.15.3",
+    "@fluentui/react-aria": "^9.15.4",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-motion": "^9.9.0",
-    "@fluentui/react-motion-components-preview": "^0.6.2",
-    "@fluentui/react-portal": "^9.6.4",
+    "@fluentui/react-motion-components-preview": "^0.7.0",
+    "@fluentui/react-portal": "^9.7.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",