@fluentui/react-toast 0.0.0-nightly-20240730-0407.1 → 0.0.0-nightly-20240816-2133.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -16
- package/lib/components/Toast/useToastStyles.styles.js +4 -4
- package/lib/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib/components/ToastBody/useToastBodyStyles.styles.js +5 -5
- package/lib/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js +1 -1
- package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib/components/ToastTitle/useToastTitleStyles.styles.js +17 -17
- package/lib/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toast/useToastStyles.styles.js +6 -6
- package/lib-commonjs/components/Toast/useToastStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js +8 -7
- package/lib-commonjs/components/ToastBody/useToastBodyStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js +3 -3
- package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js +30 -30
- package/lib-commonjs/components/ToastTitle/useToastTitleStyles.styles.js.map +1 -1
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toast
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 16 Aug 2024 21:44:00 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v0.0.0-nightly-20240816-2133.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.51..@fluentui/react-toast_v0.0.0-nightly-
|
|
9
|
+
Fri, 16 Aug 2024 21:44:00 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.51..@fluentui/react-toast_v0.0.0-nightly-20240816-2133.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-motion to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-portal to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
23
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
24
|
-
- Bump @fluentui/react-provider to v0.0.0-nightly-
|
|
25
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
26
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
18
|
+
- Bump @fluentui/react-motion to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
19
|
+
- Bump @fluentui/react-portal to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
22
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
24
|
+
- Bump @fluentui/react-provider to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
25
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
26
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
|
|
27
27
|
|
|
28
28
|
## [9.3.51](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.51)
|
|
29
29
|
|
|
@@ -3,14 +3,14 @@ import { tokens } from '@fluentui/react-theme';
|
|
|
3
3
|
export const toastClassNames = {
|
|
4
4
|
root: 'fui-Toast'
|
|
5
5
|
};
|
|
6
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
6
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r2f4jw8", null, [".r2f4jw8{display:grid;grid-template-columns:auto 1fr auto;padding:12px;border-radius:var(--ctrl-token-Toast-2765, var(--semantic-token-Toast-2766, var(--borderRadiusMedium)));border:1px solid var(--colorTransparentStroke);box-shadow:var(--ctrl-token-Toast-2767, var(--semantic-token-Toast-2768, var(--shadow8)));font-size:var(--ctrl-token-Toast-2769, var(--semantic-token-Toast-2770, var(--fontSizeBase300)));line-height:20px;font-weight:var(--ctrl-token-Toast-2771, var(--semantic-token-Toast-2772, var(--fontWeightSemibold)));color:var(--ctrl-token-Toast-2773, var(--semantic-token-Toast-2774, var(--colorNeutralForeground1)));background-color:var(--ctrl-token-Toast-2775, var(--semantic-token-Toast-2776, var(--colorNeutralBackground1)));}"]);
|
|
7
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
8
8
|
inverted: {
|
|
9
|
-
sj55zd: "
|
|
10
|
-
De3pzq: "
|
|
9
|
+
sj55zd: "f1i06w4c",
|
|
10
|
+
De3pzq: "f1rxvcu9"
|
|
11
11
|
}
|
|
12
12
|
}, {
|
|
13
|
-
d: [".
|
|
13
|
+
d: [".f1i06w4c{color:var(--ctrl-token-Toast-2777, var(--semantic-token-Toast-2778, var(--colorNeutralForegroundInverted2)));}", ".f1rxvcu9{background-color:var(--ctrl-token-Toast-2779, var(--semantic-token-Toast-2780, var(--colorNeutralBackgroundInverted)));}"]
|
|
14
14
|
});
|
|
15
15
|
/**
|
|
16
16
|
* Apply styling to the Toast slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","__styles","mergeClasses","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 } 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 padding: '12px',\n borderRadius: tokens.borderRadiusMedium
|
|
1
|
+
{"version":3,"names":["__resetStyles","__styles","mergeClasses","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 } 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 padding: '12px',\n borderRadius: `var(--ctrl-token-Toast-2765, var(--semantic-token-Toast-2766, ${tokens.borderRadiusMedium}))`,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n boxShadow: `var(--ctrl-token-Toast-2767, var(--semantic-token-Toast-2768, ${tokens.shadow8}))`,\n fontSize: `var(--ctrl-token-Toast-2769, var(--semantic-token-Toast-2770, ${tokens.fontSizeBase300}))`,\n lineHeight: '20px',\n fontWeight: `var(--ctrl-token-Toast-2771, var(--semantic-token-Toast-2772, ${tokens.fontWeightSemibold}))`,\n color: `var(--ctrl-token-Toast-2773, var(--semantic-token-Toast-2774, ${tokens.colorNeutralForeground1}))`,\n backgroundColor: `var(--ctrl-token-Toast-2775, var(--semantic-token-Toast-2776, ${tokens.colorNeutralBackground1}))`\n});\nconst useStyles = makeStyles({\n inverted: {\n color: `var(--ctrl-token-Toast-2777, var(--semantic-token-Toast-2778, ${tokens.colorNeutralForegroundInverted2}))`,\n backgroundColor: `var(--ctrl-token-Toast-2779, var(--semantic-token-Toast-2780, ${tokens.colorNeutralBackgroundInverted}))`\n }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n 'use no memo';\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,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,4vBAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,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","ignoreList":[]}
|
|
@@ -4,17 +4,17 @@ export const toastBodyClassNames = {
|
|
|
4
4
|
root: 'fui-ToastBody',
|
|
5
5
|
subtitle: 'fui-ToastBody__subtitle'
|
|
6
6
|
};
|
|
7
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
8
|
-
const useSubtitleBaseClassName = /*#__PURE__*/__resetStyles("
|
|
7
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("rqshv7i", null, [".rqshv7i{grid-column-start:2;grid-column-end:3;padding-top:6px;font-size:var(--ctrl-token-ToastBody-2781, var(--semantic-token-ToastBody-2782, var(--fontSizeBase300)));line-height:var(--ctrl-token-ToastBody-2783, var(--semantic-token-ToastBody-2784, var(--fontSizeBase300)));font-weight:var(--ctrl-token-ToastBody-2785, var(--semantic-token-ToastBody-2786, var(--fontWeightRegular)));color:var(--ctrl-token-ToastBody-2787, var(--semantic-token-ToastBody-2788, var(--colorNeutralForeground1)));word-break:break-word;}"]);
|
|
8
|
+
const useSubtitleBaseClassName = /*#__PURE__*/__resetStyles("r13sa3da", null, [".r13sa3da{padding-top:4px;grid-column-start:2;grid-column-end:3;font-size:var(--ctrl-token-ToastBody-2789, var(--semantic-token-ToastBody-2790, var(--fontSizeBase200)));line-height:var(--ctrl-token-ToastBody-2791, var(--semantic-token-ToastBody-2792, var(--fontSizeBase200)));font-weight:var(--ctrl-token-ToastBody-2793, var(--semantic-token-ToastBody-2794, var(--fontWeightRegular)));color:var(--ctrl-token-ToastBody-2795, var(--semantic-token-ToastBody-2796, var(--colorNeutralForeground2)));}"]);
|
|
9
9
|
const useInvertedStyles = /*#__PURE__*/__styles({
|
|
10
10
|
root: {
|
|
11
|
-
sj55zd: "
|
|
11
|
+
sj55zd: "fdvhl12"
|
|
12
12
|
},
|
|
13
13
|
subtitle: {
|
|
14
|
-
sj55zd: "
|
|
14
|
+
sj55zd: "f1065emh"
|
|
15
15
|
}
|
|
16
16
|
}, {
|
|
17
|
-
d: [".
|
|
17
|
+
d: [".fdvhl12{color:var(--ctrl-token-ToastBody-2797, var(--semantic-token-ToastBody-2798, var(--colorNeutralForegroundInverted2)));}", ".f1065emh{color:var(--ctrl-token-ToastBody-2799, var(--semantic-token-ToastBody-2800, var(--colorNeutralForegroundInverted2)));}"]
|
|
18
18
|
});
|
|
19
19
|
/**
|
|
20
20
|
* Apply styling to the ToastBody slots based on the state
|
|
@@ -1 +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
|
|
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: `var(--ctrl-token-ToastBody-2781, var(--semantic-token-ToastBody-2782, ${tokens.fontSizeBase300}))`,\n lineHeight: `var(--ctrl-token-ToastBody-2783, var(--semantic-token-ToastBody-2784, ${tokens.fontSizeBase300}))`,\n fontWeight: `var(--ctrl-token-ToastBody-2785, var(--semantic-token-ToastBody-2786, ${tokens.fontWeightRegular}))`,\n color: `var(--ctrl-token-ToastBody-2787, var(--semantic-token-ToastBody-2788, ${tokens.colorNeutralForeground1}))`,\n wordBreak: 'break-word'\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n paddingTop: '4px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n fontSize: `var(--ctrl-token-ToastBody-2789, var(--semantic-token-ToastBody-2790, ${tokens.fontSizeBase200}))`,\n lineHeight: `var(--ctrl-token-ToastBody-2791, var(--semantic-token-ToastBody-2792, ${tokens.fontSizeBase200}))`,\n fontWeight: `var(--ctrl-token-ToastBody-2793, var(--semantic-token-ToastBody-2794, ${tokens.fontWeightRegular}))`,\n color: `var(--ctrl-token-ToastBody-2795, var(--semantic-token-ToastBody-2796, ${tokens.colorNeutralForeground2}))`\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: `var(--ctrl-token-ToastBody-2797, var(--semantic-token-ToastBody-2798, ${tokens.colorNeutralForegroundInverted2}))`\n },\n subtitle: {\n color: `var(--ctrl-token-ToastBody-2799, var(--semantic-token-ToastBody-2800, ${tokens.colorNeutralForegroundInverted2}))`\n }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n 'use no memo';\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,0hBAS5B,CAAC;AACF,MAAMQ,wBAAwB,gBAAGR,aAAA,sgBAQhC,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,aAAa;;EACb,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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ export const toastContainerClassNames = {
|
|
|
5
5
|
root: 'fui-ToastContainer',
|
|
6
6
|
timer: 'fui-ToastContainer__timer'
|
|
7
7
|
};
|
|
8
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
8
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r14ib6ji", null, [".r14ib6ji{box-sizing:border-box;margin-top:16px;pointer-events:all;border-radius:var(--ctrl-token-ToastContainer-2801, var(--semantic-token-ToastContainer-2802, var(--borderRadiusMedium)));}", ".r14ib6ji[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
|
|
9
9
|
/**
|
|
10
10
|
* Apply styling to the ToastContainer slots based on the state
|
|
11
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: tokens.borderRadiusMedium
|
|
1
|
+
{"version":3,"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: `var(--ctrl-token-ToastContainer-2801, var(--semantic-token-ToastContainer-2802, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n })\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,2TAQ5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChDE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGV,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEK,iBAAiB,EAAED,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAC3G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -5,53 +5,53 @@ export const toastTitleClassNames = {
|
|
|
5
5
|
media: 'fui-ToastTitle__media',
|
|
6
6
|
action: 'fui-ToastTitle__action'
|
|
7
7
|
};
|
|
8
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("
|
|
9
|
-
const useMediaBaseClassName = /*#__PURE__*/__resetStyles("
|
|
10
|
-
const useActionBaseClassName = /*#__PURE__*/__resetStyles("
|
|
8
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1oe5zg7", null, [".r1oe5zg7{display:flex;grid-column-end:3;color:var(--ctrl-token-ToastTitle-2803, var(--semantic-token-ToastTitle-2804, var(--colorNeutralForeground1)));word-break:break-word;}"]);
|
|
9
|
+
const useMediaBaseClassName = /*#__PURE__*/__resetStyles("ra4elt1", "r14rg6ox", [".ra4elt1{display:flex;padding-top:2px;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--ctrl-token-ToastTitle-2805, var(--semantic-token-ToastTitle-2806, var(--colorNeutralForeground1)));}", ".r14rg6ox{display:flex;padding-top:2px;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--ctrl-token-ToastTitle-2805, var(--semantic-token-ToastTitle-2806, var(--colorNeutralForeground1)));}"]);
|
|
10
|
+
const useActionBaseClassName = /*#__PURE__*/__resetStyles("roav946", "r1h7q5m6", [".roav946{display:flex;align-items:start;padding-left:12px;grid-column-end:-1;color:var(--ctrl-token-ToastTitle-2807, var(--semantic-token-ToastTitle-2808, var(--colorBrandForeground1)));}", ".r1h7q5m6{display:flex;align-items:start;padding-right:12px;grid-column-end:-1;color:var(--ctrl-token-ToastTitle-2807, var(--semantic-token-ToastTitle-2808, var(--colorBrandForeground1)));}"]);
|
|
11
11
|
const useInvertedStyles = /*#__PURE__*/__styles({
|
|
12
12
|
root: {
|
|
13
|
-
sj55zd: "
|
|
13
|
+
sj55zd: "f1pd6ypn"
|
|
14
14
|
},
|
|
15
15
|
action: {
|
|
16
|
-
sj55zd: "
|
|
16
|
+
sj55zd: "fcdkzvv"
|
|
17
17
|
},
|
|
18
18
|
media: {
|
|
19
|
-
sj55zd: "
|
|
19
|
+
sj55zd: "fctlhbl"
|
|
20
20
|
}
|
|
21
21
|
}, {
|
|
22
|
-
d: [".
|
|
22
|
+
d: [".f1pd6ypn{color:var(--ctrl-token-ToastTitle-2809, var(--semantic-token-ToastTitle-2810, var(--colorNeutralForegroundInverted2)));}", ".fcdkzvv{color:var(--ctrl-token-ToastTitle-2811, var(--semantic-token-ToastTitle-2812, var(--colorBrandForegroundInverted)));}", ".fctlhbl{color:var(--ctrl-token-ToastTitle-2813, var(--semantic-token-ToastTitle-2814, var(--colorNeutralForegroundInverted)));}"]
|
|
23
23
|
});
|
|
24
24
|
const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
25
25
|
success: {
|
|
26
|
-
sj55zd: "
|
|
26
|
+
sj55zd: "f1nhw07q"
|
|
27
27
|
},
|
|
28
28
|
error: {
|
|
29
|
-
sj55zd: "
|
|
29
|
+
sj55zd: "fqifp67"
|
|
30
30
|
},
|
|
31
31
|
warning: {
|
|
32
|
-
sj55zd: "
|
|
32
|
+
sj55zd: "f1isd4c5"
|
|
33
33
|
},
|
|
34
34
|
info: {
|
|
35
|
-
sj55zd: "
|
|
35
|
+
sj55zd: "f1n2ucht"
|
|
36
36
|
}
|
|
37
37
|
}, {
|
|
38
|
-
d: [".
|
|
38
|
+
d: [".f1nhw07q{color:var(--ctrl-token-ToastTitle-2815, var(--semantic-token-ToastTitle-2816, var(--colorStatusSuccessForeground1)));}", ".fqifp67{color:var(--ctrl-token-ToastTitle-2817, var(--semantic-token-ToastTitle-2818, var(--colorStatusDangerForeground1)));}", ".f1isd4c5{color:var(--ctrl-token-ToastTitle-2819, var(--semantic-token-ToastTitle-2820, var(--colorStatusWarningForeground1)));}", ".f1n2ucht{color:var(--ctrl-token-ToastTitle-2821, var(--semantic-token-ToastTitle-2822, var(--colorNeutralForeground2)));}"]
|
|
39
39
|
});
|
|
40
40
|
const useIntentIconStylesInverted = /*#__PURE__*/__styles({
|
|
41
41
|
success: {
|
|
42
|
-
sj55zd: "
|
|
42
|
+
sj55zd: "fy1riul"
|
|
43
43
|
},
|
|
44
44
|
error: {
|
|
45
|
-
sj55zd: "
|
|
45
|
+
sj55zd: "fnlhgbd"
|
|
46
46
|
},
|
|
47
47
|
warning: {
|
|
48
|
-
sj55zd: "
|
|
48
|
+
sj55zd: "f17hqsbd"
|
|
49
49
|
},
|
|
50
50
|
info: {
|
|
51
|
-
sj55zd: "
|
|
51
|
+
sj55zd: "fmm690a"
|
|
52
52
|
}
|
|
53
53
|
}, {
|
|
54
|
-
d: [".
|
|
54
|
+
d: [".fy1riul{color:var(--ctrl-token-ToastTitle-2823, var(--semantic-token-ToastTitle-2824, var(--colorStatusSuccessForegroundInverted)));}", ".fnlhgbd{color:var(--ctrl-token-ToastTitle-2825, var(--semantic-token-ToastTitle-2826, var(--colorStatusDangerForegroundInverted)));}", ".f17hqsbd{color:var(--ctrl-token-ToastTitle-2827, var(--semantic-token-ToastTitle-2828, var(--colorStatusWarningForegroundInverted)));}", ".fmm690a{color:var(--ctrl-token-ToastTitle-2829, var(--semantic-token-ToastTitle-2830, var(--colorNeutralForegroundInverted2)));}"]
|
|
55
55
|
});
|
|
56
56
|
/**
|
|
57
57
|
* Apply styling to the ToastTitle slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","toastTitleClassNames","root","media","action","useRootBaseClassName","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useToastTitleStyles_unstable","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","backgroundAppearance"],"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: `var(--ctrl-token-ToastTitle-2803, var(--semantic-token-ToastTitle-2804, ${tokens.colorNeutralForeground1}))`,\n wordBreak: 'break-word'\n});\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: `var(--ctrl-token-ToastTitle-2805, var(--semantic-token-ToastTitle-2806, ${tokens.colorNeutralForeground1}))`\n});\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: `var(--ctrl-token-ToastTitle-2807, var(--semantic-token-ToastTitle-2808, ${tokens.colorBrandForeground1}))`\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: `var(--ctrl-token-ToastTitle-2809, var(--semantic-token-ToastTitle-2810, ${tokens.colorNeutralForegroundInverted2}))`\n },\n action: {\n color: `var(--ctrl-token-ToastTitle-2811, var(--semantic-token-ToastTitle-2812, ${tokens.colorBrandForegroundInverted}))`\n },\n media: {\n color: `var(--ctrl-token-ToastTitle-2813, var(--semantic-token-ToastTitle-2814, ${tokens.colorNeutralForegroundInverted}))`\n }\n});\nconst useIntentIconStyles = makeStyles({\n success: {\n color: `var(--ctrl-token-ToastTitle-2815, var(--semantic-token-ToastTitle-2816, ${tokens.colorStatusSuccessForeground1}))`\n },\n error: {\n color: `var(--ctrl-token-ToastTitle-2817, var(--semantic-token-ToastTitle-2818, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-ToastTitle-2819, var(--semantic-token-ToastTitle-2820, ${tokens.colorStatusWarningForeground1}))`\n },\n info: {\n color: `var(--ctrl-token-ToastTitle-2821, var(--semantic-token-ToastTitle-2822, ${tokens.colorNeutralForeground2}))`\n }\n});\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: `var(--ctrl-token-ToastTitle-2823, var(--semantic-token-ToastTitle-2824, ${tokens.colorStatusSuccessForegroundInverted}))`\n },\n error: {\n color: `var(--ctrl-token-ToastTitle-2825, var(--semantic-token-ToastTitle-2826, ${tokens.colorStatusDangerForegroundInverted}))`\n },\n warning: {\n color: `var(--ctrl-token-ToastTitle-2827, var(--semantic-token-ToastTitle-2828, ${tokens.colorStatusWarningForegroundInverted}))`\n },\n info: {\n color: `var(--ctrl-token-ToastTitle-2829, var(--semantic-token-ToastTitle-2830, ${tokens.colorNeutralForegroundInverted2}))`\n }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n 'use no memo';\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(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, state.media.className, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent]);\n }\n if (state.action) {\n state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,sMAK5B,CAAC;AACF,MAAMQ,qBAAqB,gBAAGR,aAAA,kbAO7B,CAAC;AACF,MAAMS,sBAAsB,gBAAGT,aAAA,wZAM9B,CAAC;AACF,MAAMU,iBAAiB,gBAAGX,QAAA;EAAAK,IAAA;IAAAO,MAAA;EAAA;EAAAL,MAAA;IAAAK,MAAA;EAAA;EAAAN,KAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUzB,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAa3B,CAAC;AACF,MAAMM,2BAA2B,gBAAGnB,QAAA;EAAAe,OAAA;IAAAH,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;EAAAM,IAAA;IAAAN,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAanC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EACpD,MAAMc,kBAAkB,GAAGf,qBAAqB,CAAC,CAAC;EAClD,MAAMgB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,wBAAwB,GAAGP,2BAA2B,CAAC,CAAC;EAC9D,MAAM;IAAEQ;EAAO,CAAC,GAAGN,KAAK;EACxB,MAAMO,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1CU,KAAK,CAAChB,IAAI,CAACwB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEiB,iBAAiB,EAAED,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACvB,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACwB,SAAS,CAAC;EACzK,IAAIR,KAAK,CAACf,KAAK,EAAE;IACbe,KAAK,CAACf,KAAK,CAACuB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACE,KAAK,EAAEkB,kBAAkB,EAAEH,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACtB,KAAK,EAAEe,KAAK,CAACf,KAAK,CAACuB,SAAS,EAAEF,MAAM,IAAIF,gBAAgB,CAACE,MAAM,CAAC,EAAEA,MAAM,IAAIN,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIJ,wBAAwB,CAACC,MAAM,CAAC,CAAC;EAC/S;EACA,IAAIN,KAAK,CAACd,MAAM,EAAE;IACdc,KAAK,CAACd,MAAM,CAACsB,SAAS,GAAG3B,YAAY,CAACE,oBAAoB,CAACG,MAAM,EAAEgB,mBAAmB,EAAEF,KAAK,CAACS,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACrB,MAAM,EAAEc,KAAK,CAACd,MAAM,CAACsB,SAAS,CAAC;EACvL;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -20,18 +20,18 @@ const _react = require("@griffel/react");
|
|
|
20
20
|
const toastClassNames = {
|
|
21
21
|
root: 'fui-Toast'
|
|
22
22
|
};
|
|
23
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
24
|
-
".
|
|
23
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2f4jw8", null, [
|
|
24
|
+
".r2f4jw8{display:grid;grid-template-columns:auto 1fr auto;padding:12px;border-radius:var(--ctrl-token-Toast-2765, var(--semantic-token-Toast-2766, var(--borderRadiusMedium)));border:1px solid var(--colorTransparentStroke);box-shadow:var(--ctrl-token-Toast-2767, var(--semantic-token-Toast-2768, var(--shadow8)));font-size:var(--ctrl-token-Toast-2769, var(--semantic-token-Toast-2770, var(--fontSizeBase300)));line-height:20px;font-weight:var(--ctrl-token-Toast-2771, var(--semantic-token-Toast-2772, var(--fontWeightSemibold)));color:var(--ctrl-token-Toast-2773, var(--semantic-token-Toast-2774, var(--colorNeutralForeground1)));background-color:var(--ctrl-token-Toast-2775, var(--semantic-token-Toast-2776, var(--colorNeutralBackground1)));}"
|
|
25
25
|
]);
|
|
26
26
|
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
27
27
|
inverted: {
|
|
28
|
-
sj55zd: "
|
|
29
|
-
De3pzq: "
|
|
28
|
+
sj55zd: "f1i06w4c",
|
|
29
|
+
De3pzq: "f1rxvcu9"
|
|
30
30
|
}
|
|
31
31
|
}, {
|
|
32
32
|
d: [
|
|
33
|
-
".
|
|
34
|
-
".
|
|
33
|
+
".f1i06w4c{color:var(--ctrl-token-Toast-2777, var(--semantic-token-Toast-2778, var(--colorNeutralForegroundInverted2)));}",
|
|
34
|
+
".f1rxvcu9{background-color:var(--ctrl-token-Toast-2779, var(--semantic-token-Toast-2780, var(--colorNeutralBackgroundInverted)));}"
|
|
35
35
|
]
|
|
36
36
|
});
|
|
37
37
|
const useToastStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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 padding: '12px',\n borderRadius: tokens.borderRadiusMedium
|
|
1
|
+
{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } 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 padding: '12px',\n borderRadius: `var(--ctrl-token-Toast-2765, var(--semantic-token-Toast-2766, ${tokens.borderRadiusMedium}))`,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n boxShadow: `var(--ctrl-token-Toast-2767, var(--semantic-token-Toast-2768, ${tokens.shadow8}))`,\n fontSize: `var(--ctrl-token-Toast-2769, var(--semantic-token-Toast-2770, ${tokens.fontSizeBase300}))`,\n lineHeight: '20px',\n fontWeight: `var(--ctrl-token-Toast-2771, var(--semantic-token-Toast-2772, ${tokens.fontWeightSemibold}))`,\n color: `var(--ctrl-token-Toast-2773, var(--semantic-token-Toast-2774, ${tokens.colorNeutralForeground1}))`,\n backgroundColor: `var(--ctrl-token-Toast-2775, var(--semantic-token-Toast-2776, ${tokens.colorNeutralBackground1}))`\n});\nconst useStyles = makeStyles({\n inverted: {\n color: `var(--ctrl-token-Toast-2777, var(--semantic-token-Toast-2778, ${tokens.colorNeutralForegroundInverted2}))`,\n backgroundColor: `var(--ctrl-token-Toast-2779, var(--semantic-token-Toast-2780, ${tokens.colorNeutralBackgroundInverted}))`\n }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","inverted","sj55zd","De3pzq","d","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAwBIC,uBAAuB;eAAvBA;;;uBA1ByC;AAEnD,MAAMD,kBAAkB;IAC3BE,MAAM;AACV;AACA,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAY5B;AACD,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,UAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAQP,MAAMT,0BAA2BU,CAAAA;IACxC;IACA,MAAMC,oBAAoBT;IAC1B,MAAMU,SAASR;IACfM,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,gBAAgBE,IAAI,EAAEU,mBAAmBD,MAAMK,oBAAoB,KAAK,cAAcH,OAAON,QAAQ,EAAEI,MAAMT,IAAI,CAACY,SAAS;IAC/J,OAAOH;AACX"}
|
|
@@ -21,22 +21,23 @@ const toastBodyClassNames = {
|
|
|
21
21
|
root: 'fui-ToastBody',
|
|
22
22
|
subtitle: 'fui-ToastBody__subtitle'
|
|
23
23
|
};
|
|
24
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
25
|
-
".
|
|
24
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rqshv7i", null, [
|
|
25
|
+
".rqshv7i{grid-column-start:2;grid-column-end:3;padding-top:6px;font-size:var(--ctrl-token-ToastBody-2781, var(--semantic-token-ToastBody-2782, var(--fontSizeBase300)));line-height:var(--ctrl-token-ToastBody-2783, var(--semantic-token-ToastBody-2784, var(--fontSizeBase300)));font-weight:var(--ctrl-token-ToastBody-2785, var(--semantic-token-ToastBody-2786, var(--fontWeightRegular)));color:var(--ctrl-token-ToastBody-2787, var(--semantic-token-ToastBody-2788, var(--colorNeutralForeground1)));word-break:break-word;}"
|
|
26
26
|
]);
|
|
27
|
-
const useSubtitleBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
28
|
-
".
|
|
27
|
+
const useSubtitleBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r13sa3da", null, [
|
|
28
|
+
".r13sa3da{padding-top:4px;grid-column-start:2;grid-column-end:3;font-size:var(--ctrl-token-ToastBody-2789, var(--semantic-token-ToastBody-2790, var(--fontSizeBase200)));line-height:var(--ctrl-token-ToastBody-2791, var(--semantic-token-ToastBody-2792, var(--fontSizeBase200)));font-weight:var(--ctrl-token-ToastBody-2793, var(--semantic-token-ToastBody-2794, var(--fontWeightRegular)));color:var(--ctrl-token-ToastBody-2795, var(--semantic-token-ToastBody-2796, var(--colorNeutralForeground2)));}"
|
|
29
29
|
]);
|
|
30
30
|
const useInvertedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
31
31
|
root: {
|
|
32
|
-
sj55zd: "
|
|
32
|
+
sj55zd: "fdvhl12"
|
|
33
33
|
},
|
|
34
34
|
subtitle: {
|
|
35
|
-
sj55zd: "
|
|
35
|
+
sj55zd: "f1065emh"
|
|
36
36
|
}
|
|
37
37
|
}, {
|
|
38
38
|
d: [
|
|
39
|
-
".
|
|
39
|
+
".fdvhl12{color:var(--ctrl-token-ToastBody-2797, var(--semantic-token-ToastBody-2798, var(--colorNeutralForegroundInverted2)));}",
|
|
40
|
+
".f1065emh{color:var(--ctrl-token-ToastBody-2799, var(--semantic-token-ToastBody-2800, var(--colorNeutralForegroundInverted2)));}"
|
|
40
41
|
]
|
|
41
42
|
});
|
|
42
43
|
const useToastBodyStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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
|
|
1
|
+
{"version":3,"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: `var(--ctrl-token-ToastBody-2781, var(--semantic-token-ToastBody-2782, ${tokens.fontSizeBase300}))`,\n lineHeight: `var(--ctrl-token-ToastBody-2783, var(--semantic-token-ToastBody-2784, ${tokens.fontSizeBase300}))`,\n fontWeight: `var(--ctrl-token-ToastBody-2785, var(--semantic-token-ToastBody-2786, ${tokens.fontWeightRegular}))`,\n color: `var(--ctrl-token-ToastBody-2787, var(--semantic-token-ToastBody-2788, ${tokens.colorNeutralForeground1}))`,\n wordBreak: 'break-word'\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n paddingTop: '4px',\n gridColumnStart: 2,\n gridColumnEnd: 3,\n fontSize: `var(--ctrl-token-ToastBody-2789, var(--semantic-token-ToastBody-2790, ${tokens.fontSizeBase200}))`,\n lineHeight: `var(--ctrl-token-ToastBody-2791, var(--semantic-token-ToastBody-2792, ${tokens.fontSizeBase200}))`,\n fontWeight: `var(--ctrl-token-ToastBody-2793, var(--semantic-token-ToastBody-2794, ${tokens.fontWeightRegular}))`,\n color: `var(--ctrl-token-ToastBody-2795, var(--semantic-token-ToastBody-2796, ${tokens.colorNeutralForeground2}))`\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: `var(--ctrl-token-ToastBody-2797, var(--semantic-token-ToastBody-2798, ${tokens.colorNeutralForegroundInverted2}))`\n },\n subtitle: {\n color: `var(--ctrl-token-ToastBody-2799, var(--semantic-token-ToastBody-2800, ${tokens.colorNeutralForegroundInverted2}))`\n }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n 'use no memo';\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"],"names":["toastBodyClassNames","useToastBodyStyles_unstable","root","subtitle","useRootBaseClassName","__resetStyles","useSubtitleBaseClassName","useInvertedStyles","__styles","sj55zd","d","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","mergeClasses","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,mBAAmB;eAAnBA;;IAiCIC,2BAA2B;eAA3BA;;;uBAnCyC;AAEnD,MAAMD,sBAAsB;IAC/BE,MAAM;IACNC,UAAU;AACd;AACA,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAS5B;AACD,MAAMC,2BAAwB,WAAA,GAAGD,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAQhC;AACD,MAAME,oBAAiB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAN,MAAA;QAAAO,QAAA;IAAA;IAAAN,UAAA;QAAAM,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAUf,MAAMT,8BAA+BU,CAAAA;IAC5C;IACA,MAAMC,oBAAoBR;IAC1B,MAAMS,wBAAwBP;IAC9B,MAAMQ,iBAAiBP;IACvBI,MAAMT,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,oBAAoBE,IAAI,EAAEU,mBAAmBD,MAAMM,oBAAoB,KAAK,cAAcH,eAAeZ,IAAI,EAAES,MAAMT,IAAI,CAACa,SAAS;IACvK,IAAIJ,MAAMR,QAAQ,EAAE;QAChBQ,MAAMR,QAAQ,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,oBAAoBG,QAAQ,EAAEU,uBAAuBF,MAAMM,oBAAoB,KAAK,cAAcH,eAAeX,QAAQ,EAAEQ,MAAMR,QAAQ,CAACY,SAAS;IAC/L;IACA,OAAOJ;AACX"}
|
|
@@ -21,9 +21,9 @@ const toastContainerClassNames = {
|
|
|
21
21
|
root: 'fui-ToastContainer',
|
|
22
22
|
timer: 'fui-ToastContainer__timer'
|
|
23
23
|
};
|
|
24
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
25
|
-
".
|
|
26
|
-
".
|
|
24
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r14ib6ji", null, [
|
|
25
|
+
".r14ib6ji{box-sizing:border-box;margin-top:16px;pointer-events:all;border-radius:var(--ctrl-token-ToastContainer-2801, var(--semantic-token-ToastContainer-2802, var(--borderRadiusMedium)));}",
|
|
26
|
+
".r14ib6ji[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"
|
|
27
27
|
]);
|
|
28
28
|
const useToastContainerStyles_unstable = (state)=>{
|
|
29
29
|
'use no memo';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: tokens.borderRadiusMedium
|
|
1
|
+
{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n root: 'fui-ToastContainer',\n timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n marginTop: '16px',\n pointerEvents: 'all',\n borderRadius: `var(--ctrl-token-ToastContainer-2801, var(--semantic-token-ToastContainer-2802, ${tokens.borderRadiusMedium}))`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n })\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n return state;\n};\n"],"names":["toastContainerClassNames","useToastContainerStyles_unstable","root","timer","useRootBaseClassName","__resetStyles","state","rootBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAeIC,gCAAgC;eAAhCA;;;uBAlB6B;AAGvC,MAAMD,2BAA2B;IACpCE,MAAM;IACNC,OAAO;AACX;AACA,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;CAQ5B;AAGU,MAAMJ,mCAAoCK,CAAAA;IACjD;IACA,MAAMC,oBAAoBH;IAC1BE,MAAMJ,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAY,EAACT,yBAAyBE,IAAI,EAAEK,mBAAmBD,MAAMJ,IAAI,CAACM,SAAS;IAC1G,OAAOF;AACX"}
|
|
@@ -22,74 +22,74 @@ const toastTitleClassNames = {
|
|
|
22
22
|
media: 'fui-ToastTitle__media',
|
|
23
23
|
action: 'fui-ToastTitle__action'
|
|
24
24
|
};
|
|
25
|
-
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
26
|
-
".
|
|
25
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1oe5zg7", null, [
|
|
26
|
+
".r1oe5zg7{display:flex;grid-column-end:3;color:var(--ctrl-token-ToastTitle-2803, var(--semantic-token-ToastTitle-2804, var(--colorNeutralForeground1)));word-break:break-word;}"
|
|
27
27
|
]);
|
|
28
|
-
const useMediaBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
29
|
-
".
|
|
30
|
-
".
|
|
28
|
+
const useMediaBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("ra4elt1", "r14rg6ox", [
|
|
29
|
+
".ra4elt1{display:flex;padding-top:2px;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--ctrl-token-ToastTitle-2805, var(--semantic-token-ToastTitle-2806, var(--colorNeutralForeground1)));}",
|
|
30
|
+
".r14rg6ox{display:flex;padding-top:2px;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--ctrl-token-ToastTitle-2805, var(--semantic-token-ToastTitle-2806, var(--colorNeutralForeground1)));}"
|
|
31
31
|
]);
|
|
32
|
-
const useActionBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("
|
|
33
|
-
".
|
|
34
|
-
".
|
|
32
|
+
const useActionBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("roav946", "r1h7q5m6", [
|
|
33
|
+
".roav946{display:flex;align-items:start;padding-left:12px;grid-column-end:-1;color:var(--ctrl-token-ToastTitle-2807, var(--semantic-token-ToastTitle-2808, var(--colorBrandForeground1)));}",
|
|
34
|
+
".r1h7q5m6{display:flex;align-items:start;padding-right:12px;grid-column-end:-1;color:var(--ctrl-token-ToastTitle-2807, var(--semantic-token-ToastTitle-2808, var(--colorBrandForeground1)));}"
|
|
35
35
|
]);
|
|
36
36
|
const useInvertedStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
37
37
|
root: {
|
|
38
|
-
sj55zd: "
|
|
38
|
+
sj55zd: "f1pd6ypn"
|
|
39
39
|
},
|
|
40
40
|
action: {
|
|
41
|
-
sj55zd: "
|
|
41
|
+
sj55zd: "fcdkzvv"
|
|
42
42
|
},
|
|
43
43
|
media: {
|
|
44
|
-
sj55zd: "
|
|
44
|
+
sj55zd: "fctlhbl"
|
|
45
45
|
}
|
|
46
46
|
}, {
|
|
47
47
|
d: [
|
|
48
|
-
".
|
|
49
|
-
".
|
|
50
|
-
".
|
|
48
|
+
".f1pd6ypn{color:var(--ctrl-token-ToastTitle-2809, var(--semantic-token-ToastTitle-2810, var(--colorNeutralForegroundInverted2)));}",
|
|
49
|
+
".fcdkzvv{color:var(--ctrl-token-ToastTitle-2811, var(--semantic-token-ToastTitle-2812, var(--colorBrandForegroundInverted)));}",
|
|
50
|
+
".fctlhbl{color:var(--ctrl-token-ToastTitle-2813, var(--semantic-token-ToastTitle-2814, var(--colorNeutralForegroundInverted)));}"
|
|
51
51
|
]
|
|
52
52
|
});
|
|
53
53
|
const useIntentIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
54
54
|
success: {
|
|
55
|
-
sj55zd: "
|
|
55
|
+
sj55zd: "f1nhw07q"
|
|
56
56
|
},
|
|
57
57
|
error: {
|
|
58
|
-
sj55zd: "
|
|
58
|
+
sj55zd: "fqifp67"
|
|
59
59
|
},
|
|
60
60
|
warning: {
|
|
61
|
-
sj55zd: "
|
|
61
|
+
sj55zd: "f1isd4c5"
|
|
62
62
|
},
|
|
63
63
|
info: {
|
|
64
|
-
sj55zd: "
|
|
64
|
+
sj55zd: "f1n2ucht"
|
|
65
65
|
}
|
|
66
66
|
}, {
|
|
67
67
|
d: [
|
|
68
|
-
".
|
|
69
|
-
".
|
|
70
|
-
".
|
|
71
|
-
".
|
|
68
|
+
".f1nhw07q{color:var(--ctrl-token-ToastTitle-2815, var(--semantic-token-ToastTitle-2816, var(--colorStatusSuccessForeground1)));}",
|
|
69
|
+
".fqifp67{color:var(--ctrl-token-ToastTitle-2817, var(--semantic-token-ToastTitle-2818, var(--colorStatusDangerForeground1)));}",
|
|
70
|
+
".f1isd4c5{color:var(--ctrl-token-ToastTitle-2819, var(--semantic-token-ToastTitle-2820, var(--colorStatusWarningForeground1)));}",
|
|
71
|
+
".f1n2ucht{color:var(--ctrl-token-ToastTitle-2821, var(--semantic-token-ToastTitle-2822, var(--colorNeutralForeground2)));}"
|
|
72
72
|
]
|
|
73
73
|
});
|
|
74
74
|
const useIntentIconStylesInverted = /*#__PURE__*/ (0, _react.__styles)({
|
|
75
75
|
success: {
|
|
76
|
-
sj55zd: "
|
|
76
|
+
sj55zd: "fy1riul"
|
|
77
77
|
},
|
|
78
78
|
error: {
|
|
79
|
-
sj55zd: "
|
|
79
|
+
sj55zd: "fnlhgbd"
|
|
80
80
|
},
|
|
81
81
|
warning: {
|
|
82
|
-
sj55zd: "
|
|
82
|
+
sj55zd: "f17hqsbd"
|
|
83
83
|
},
|
|
84
84
|
info: {
|
|
85
|
-
sj55zd: "
|
|
85
|
+
sj55zd: "fmm690a"
|
|
86
86
|
}
|
|
87
87
|
}, {
|
|
88
88
|
d: [
|
|
89
|
-
".
|
|
90
|
-
".
|
|
91
|
-
".
|
|
92
|
-
".
|
|
89
|
+
".fy1riul{color:var(--ctrl-token-ToastTitle-2823, var(--semantic-token-ToastTitle-2824, var(--colorStatusSuccessForegroundInverted)));}",
|
|
90
|
+
".fnlhgbd{color:var(--ctrl-token-ToastTitle-2825, var(--semantic-token-ToastTitle-2826, var(--colorStatusDangerForegroundInverted)));}",
|
|
91
|
+
".f17hqsbd{color:var(--ctrl-token-ToastTitle-2827, var(--semantic-token-ToastTitle-2828, var(--colorStatusWarningForegroundInverted)));}",
|
|
92
|
+
".fmm690a{color:var(--ctrl-token-ToastTitle-2829, var(--semantic-token-ToastTitle-2830, var(--colorNeutralForegroundInverted2)));}"
|
|
93
93
|
]
|
|
94
94
|
});
|
|
95
95
|
const useToastTitleStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: tokens.colorNeutralForeground1
|
|
1
|
+
{"version":3,"sources":["useToastTitleStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastTitleClassNames = {\n root: 'fui-ToastTitle',\n media: 'fui-ToastTitle__media',\n action: 'fui-ToastTitle__action'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n gridColumnEnd: 3,\n color: `var(--ctrl-token-ToastTitle-2803, var(--semantic-token-ToastTitle-2804, ${tokens.colorNeutralForeground1}))`,\n wordBreak: 'break-word'\n});\nconst useMediaBaseClassName = makeResetStyles({\n display: 'flex',\n paddingTop: '2px',\n gridColumnEnd: 2,\n paddingRight: '8px',\n fontSize: '16px',\n color: `var(--ctrl-token-ToastTitle-2805, var(--semantic-token-ToastTitle-2806, ${tokens.colorNeutralForeground1}))`\n});\nconst useActionBaseClassName = makeResetStyles({\n display: 'flex',\n alignItems: 'start',\n paddingLeft: '12px',\n gridColumnEnd: -1,\n color: `var(--ctrl-token-ToastTitle-2807, var(--semantic-token-ToastTitle-2808, ${tokens.colorBrandForeground1}))`\n});\nconst useInvertedStyles = makeStyles({\n root: {\n color: `var(--ctrl-token-ToastTitle-2809, var(--semantic-token-ToastTitle-2810, ${tokens.colorNeutralForegroundInverted2}))`\n },\n action: {\n color: `var(--ctrl-token-ToastTitle-2811, var(--semantic-token-ToastTitle-2812, ${tokens.colorBrandForegroundInverted}))`\n },\n media: {\n color: `var(--ctrl-token-ToastTitle-2813, var(--semantic-token-ToastTitle-2814, ${tokens.colorNeutralForegroundInverted}))`\n }\n});\nconst useIntentIconStyles = makeStyles({\n success: {\n color: `var(--ctrl-token-ToastTitle-2815, var(--semantic-token-ToastTitle-2816, ${tokens.colorStatusSuccessForeground1}))`\n },\n error: {\n color: `var(--ctrl-token-ToastTitle-2817, var(--semantic-token-ToastTitle-2818, ${tokens.colorStatusDangerForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-ToastTitle-2819, var(--semantic-token-ToastTitle-2820, ${tokens.colorStatusWarningForeground1}))`\n },\n info: {\n color: `var(--ctrl-token-ToastTitle-2821, var(--semantic-token-ToastTitle-2822, ${tokens.colorNeutralForeground2}))`\n }\n});\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: `var(--ctrl-token-ToastTitle-2823, var(--semantic-token-ToastTitle-2824, ${tokens.colorStatusSuccessForegroundInverted}))`\n },\n error: {\n color: `var(--ctrl-token-ToastTitle-2825, var(--semantic-token-ToastTitle-2826, ${tokens.colorStatusDangerForegroundInverted}))`\n },\n warning: {\n color: `var(--ctrl-token-ToastTitle-2827, var(--semantic-token-ToastTitle-2828, ${tokens.colorStatusWarningForegroundInverted}))`\n },\n info: {\n color: `var(--ctrl-token-ToastTitle-2829, var(--semantic-token-ToastTitle-2830, ${tokens.colorNeutralForegroundInverted2}))`\n }\n});\n/**\n * Apply styling to the ToastTitle slots based on the state\n */ export const useToastTitleStyles_unstable = (state)=>{\n 'use no memo';\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(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, state.media.className, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent]);\n }\n if (state.action) {\n state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className);\n }\n return state;\n};\n"],"names":["toastTitleClassNames","useToastTitleStyles_unstable","root","media","action","useRootBaseClassName","__resetStyles","useMediaBaseClassName","useActionBaseClassName","useInvertedStyles","__styles","sj55zd","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","state","rootBaseClassName","actionBaseClassName","mediaBaseClassName","intentIconStyles","intentIconStylesInverted","intent","invertedStyles","className","mergeClasses","backgroundAppearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAmEIC,4BAA4B;eAA5BA;;;uBArEyC;AAEnD,MAAMD,uBAAuB;IAChCE,MAAM;IACNC,OAAO;IACPC,QAAQ;AACZ;AACA,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAK5B;AACD,MAAMC,wBAAqB,WAAA,GAAGD,IAAAA,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAO7B;AACD,MAAME,yBAAsB,WAAA,GAAGF,IAAAA,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAM9B;AACD,MAAMG,oBAAiB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAR,MAAA;QAAAS,QAAA;IAAA;IAAAP,QAAA;QAAAO,QAAA;IAAA;IAAAR,OAAA;QAAAQ,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAW1B,MAAMC,sBAAmB,WAAA,GAAGH,IAAAA,eAAA,EAAA;IAAAI,SAAA;QAAAH,QAAA;IAAA;IAAAI,OAAA;QAAAJ,QAAA;IAAA;IAAAK,SAAA;QAAAL,QAAA;IAAA;IAAAM,MAAA;QAAAN,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAc5B,MAAMM,8BAA2B,WAAA,GAAGR,IAAAA,eAAA,EAAA;IAAAI,SAAA;QAAAH,QAAA;IAAA;IAAAI,OAAA;QAAAJ,QAAA;IAAA;IAAAK,SAAA;QAAAL,QAAA;IAAA;IAAAM,MAAA;QAAAN,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAgBzB,MAAMX,+BAAgCkB,CAAAA;IAC7C;IACA,MAAMC,oBAAoBf;IAC1B,MAAMgB,sBAAsBb;IAC5B,MAAMc,qBAAqBf;IAC3B,MAAMgB,mBAAmBV;IACzB,MAAMW,2BAA2BN;IACjC,MAAM,EAAEO,MAAAA,EAAQ,GAAGN;IACnB,MAAMO,iBAAiBjB;IACvBU,MAAMjB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAY,EAAC5B,qBAAqBE,IAAI,EAAEkB,mBAAmBD,MAAMU,oBAAoB,KAAK,cAAcH,eAAexB,IAAI,EAAEiB,MAAMjB,IAAI,CAACyB,SAAS;IACxK,IAAIR,MAAMhB,KAAK,EAAE;QACbgB,MAAMhB,KAAK,CAACwB,SAAS,GAAGC,IAAAA,mBAAY,EAAC5B,qBAAqBG,KAAK,EAAEmB,oBAAoBH,MAAMU,oBAAoB,KAAK,cAAcH,eAAevB,KAAK,EAAEgB,MAAMhB,KAAK,CAACwB,SAAS,EAAEF,UAAUF,gBAAgB,CAACE,OAAO,EAAEA,UAAUN,MAAMU,oBAAoB,KAAK,cAAcL,wBAAwB,CAACC,OAAO;IAC9S;IACA,IAAIN,MAAMf,MAAM,EAAE;QACde,MAAMf,MAAM,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC5B,qBAAqBI,MAAM,EAAEiB,qBAAqBF,MAAMU,oBAAoB,KAAK,cAAcH,eAAetB,MAAM,EAAEe,MAAMf,MAAM,CAACuB,SAAS;IACtL;IACA,OAAOR;AACX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toast",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240816-2133.1",
|
|
4
4
|
"description": "Toast component for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,24 +27,24 @@
|
|
|
27
27
|
"e2e:local": "cypress open --component"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@fluentui/react-provider": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-provider": "0.0.0-nightly-20240816-2133.1",
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
32
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
|
|
34
34
|
"@fluentui/scripts-api-extractor": "*",
|
|
35
35
|
"@fluentui/scripts-tasks": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
|
38
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20240816-2133.1",
|
|
39
|
+
"@fluentui/react-aria": "0.0.0-nightly-20240816-2133.1",
|
|
40
40
|
"@fluentui/react-icons": "^2.0.245",
|
|
41
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
42
|
-
"@fluentui/react-motion": "0.0.0-nightly-
|
|
43
|
-
"@fluentui/react-portal": "0.0.0-nightly-
|
|
44
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
45
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
46
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
47
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
41
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
|
|
42
|
+
"@fluentui/react-motion": "0.0.0-nightly-20240816-2133.1",
|
|
43
|
+
"@fluentui/react-portal": "0.0.0-nightly-20240816-2133.1",
|
|
44
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240816-2133.1",
|
|
45
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20240816-2133.1",
|
|
46
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
|
|
47
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
|
|
48
48
|
"@griffel/react": "^1.5.22",
|
|
49
49
|
"@swc/helpers": "^0.5.1"
|
|
50
50
|
},
|