npm - @fluentui/react-dialog - Versions diffs - 9.18.0 → 9.18.1 - Mend

@fluentui/react-dialog 9.18.0 → 9.18.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.

Files changed (42) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,25 +1,41 @@
 # Change Log - @fluentui/react-dialog
-This log was last generated on Thu, 23 Apr 2026 11:59:21 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:17 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.18.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.18.1)
+Tue, 26 May 2026 09:34:17 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.18.0..@fluentui/react-dialog_v9.18.1)
+### Patches
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.5 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-portal to v9.8.13 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.18.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.18.0)
-Thu, 23 Apr 2026 11:59:21 GMT
+Thu, 23 Apr 2026 14:21:03 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.17.3..@fluentui/react-dialog_v9.18.0)
 ### Minor changes
 - feat: add ScaleParams to the motion slot type ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion to v9.15.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-portal to v9.8.12 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-portal to v9.8.12 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ### Patches

package/lib/components/DialogActions/useDialogActionsStyles.styles.js CHANGED Viewed

@@ -57,6 +57,7 @@ export const useDialogActionsStyles_unstable = state => {
   const resetStyles = useResetStyles();
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
   return state;
 };

package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","Btsd7tp","ufxxby","Bq5p579","gridPositionStart","Ew0qkd","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/\n Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,sCAAsC,QAAQ,0BAA0B;AAC7F,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;~~EAC1Be~~,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC5U,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","Btsd7tp","ufxxby","Bq5p579","gridPositionStart","Ew0qkd","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/\n Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,sCAAsC,QAAQ,0BAA0B;AAC7F,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,UAAA;IAAAN,OAAA;EAAA;EAAAO,QAAA;IAAAR,OAAA;EAAA;AAAA;EAAAS,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1B;EACAe,KAAK,CAACnB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;EAC5U,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js CHANGED Viewed

@@ -52,6 +52,7 @@ const useStyles = makeStyles({
     'use no memo';
     const resetStyles = useResetStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
     return state;
 };

package/lib/components/DialogActions/useDialogActionsStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n});\n\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto',\n },\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto',\n },\n },\n fluidStart: {\n gridColumnEnd: 4,\n },\n fluidEnd: {\n gridColumnStart: 1,\n },\n});\n\n/\n Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n resetStyles,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","gap","height","boxSizing","display","gridRowStart","gridRowEnd","flexDirection","justifySelf","useStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,UAAU,EAAEC,sCAAsC,QAAQ,2BAA2B;AAE9F,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBP,gBAAgB;IACrCQ,KAAKL;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,uCAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,YAAYf,WAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,uCAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,uCAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;~~IACfQ~~,MAAMlB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,wBAAwBC,IAAI,EAC5BmB,aACAD,MAAMI,QAAQ,KAAK,WAAWF,OAAON,iBAAiB,EACtDI,MAAMI,QAAQ,KAAK,SAASF,OAAOT,eAAe,EAClDO,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWF,OAAOL,UAAU,EAC9DG,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASF,OAAOJ,QAAQ,EAC1DE,MAAMlB,IAAI,CAACqB,SAAS;IAEtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n});\n\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto',\n },\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto',\n },\n },\n fluidStart: {\n gridColumnEnd: 4,\n },\n fluidEnd: {\n gridColumnStart: 1,\n },\n});\n\n/\n Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n resetStyles,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","gap","height","boxSizing","display","gridRowStart","gridRowEnd","flexDirection","justifySelf","useStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,UAAU,EAAEC,sCAAsC,QAAQ,2BAA2B;AAE9F,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBP,gBAAgB;IACrCQ,KAAKL;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,uCAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,YAAYf,WAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,uCAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,uCAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;IACf,oDAAoD;IACpDQ,MAAMlB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,wBAAwBC,IAAI,EAC5BmB,aACAD,MAAMI,QAAQ,KAAK,WAAWF,OAAON,iBAAiB,EACtDI,MAAMI,QAAQ,KAAK,SAASF,OAAOT,eAAe,EAClDO,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWF,OAAOL,UAAU,EAC9DG,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASF,OAAOJ,QAAQ,EAC1DE,MAAMlB,IAAI,CAACqB,SAAS;IAEtB,OAAOH;AACT,EAAE"}

package/lib/components/DialogBody/useDialogBodyStyles.styles.js CHANGED Viewed

@@ -19,6 +19,7 @@ export const useDialogBodyStyles_unstable = state => {
   'use no memo';
   const resetStyles = useResetStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);
   return state;
 };

package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [\n `calc(100vh - 2 ${SURFACE_PADDING})`,\n `calc(100dvh - 2 * ${SURFACE_PADDING})`\n ],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,UAAU,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AACrI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAkB1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;~~EACpCI~~,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGb,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [\n `calc(100vh - 2 ${SURFACE_PADDING})`,\n `calc(100dvh - 2 * ${SURFACE_PADDING})`\n ],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,UAAU,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;AACrI,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAkB1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;EACpC;EACAI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGb,YAAY,CAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACjG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js CHANGED Viewed

@@ -30,6 +30,7 @@ export const dialogBodyClassNames = {
  */ export const useDialogBodyStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useResetStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);
     return state;
 };

package/lib/components/DialogBody/useDialogBodyStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SACEC,UAAU,EACVC,sCAAsC,EACtCC,+BAA+B,EAC/BC,eAAe,QACV,iBAAiB;AAExB,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBR,gBAAgB;IACrCS,UAAU;IACVC,KAAKR;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,gBAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,gBAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,uCAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,gCAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;~~IAEpBU~~,MAAMX,IAAI,CAACa,SAAS,GAAGnB,aAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SACEC,UAAU,EACVC,sCAAsC,EACtCC,+BAA+B,EAC/BC,eAAe,QACV,iBAAiB;AAExB,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBR,gBAAgB;IACrCS,UAAU;IACVC,KAAKR;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,gBAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,gBAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,uCAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,gCAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;IAEpB,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,GAAGnB,aAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}

package/lib/components/DialogContent/useDialogContentStyles.styles.js CHANGED Viewed

@@ -20,6 +20,7 @@ export const useDialogContentStyles_unstable = state => {
   'use no memo';
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);
   return state;
 };

package/lib/components/DialogContent/useDialogContentStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,+BAA+B,QAAQ,gBAAgB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAcrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;~~EAC1BI~~,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,+BAA+B,QAAQ,gBAAgB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CAcrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B;EACAI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGZ,YAAY,CAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js CHANGED Viewed

@@ -27,6 +27,7 @@ export const dialogContentClassNames = {
  */ export const useDialogContentStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);
     return state;
 };

package/lib/components/DialogContent/useDialogContentStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,+BAA+B,QAAQ,iBAAiB;AAEjE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,SAASN,OAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,OAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,iBAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,gCAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;~~IACfa~~,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,+BAA+B,QAAQ,iBAAiB;AAEjE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,SAASN,OAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,OAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,iBAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,gCAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGrB,aAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js CHANGED Viewed

@@ -45,8 +45,10 @@ export const useDialogSurfaceStyles_unstable = state => {
   const styles = useStyles();
   const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
   const mountedAndClosed = !unmountOnClose && !open;
+  // eslint-disable-next-line react-hooks/immutability
   root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
   if (backdrop) {
+    // eslint-disable-next-line react-hooks/immutability
     backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
   }
   return state;

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/*\n Styles for the root slot\n / const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: [\n '100vh',\n '100dvh'\n ],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed'\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n dialogHidden: {\n pointerEvents: 'none'\n }\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n const mountedAndClosed = !unmountOnClose && !open;\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,yCAAyC,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AAC1L,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,0GAI5B,CAAC;AACF,MAAMiB,SAAS,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEb,IAAI;IAAEC,QAAQ;IAAEa,IAAI;IAAEC,cAAc;IAAEC,qBAAqB;IAAEC;EAAmB,CAAC,GAAGJ,KAAK;EACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;EAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;~~EACjDd~~,IAAI,CAACuB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;EACnI,IAAItB,QAAQ,EAAE;~~IACVA~~,QAAQ,CAACsB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;EAC7M;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/*\n Styles for the root slot\n / const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: [\n '100vh',\n '100dvh'\n ],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed'\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n dialogHidden: {\n pointerEvents: 'none'\n }\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n const mountedAndClosed = !unmountOnClose && !open;\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,yCAAyC,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AAC1L,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,0GAI5B,CAAC;AACF,MAAMiB,SAAS,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEb,IAAI;IAAEC,QAAQ;IAAEa,IAAI;IAAEC,cAAc;IAAEC,qBAAqB;IAAEC;EAAmB,CAAC,GAAGJ,KAAK;EACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;EAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;EACjD;EACAd,IAAI,CAACuB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;EACnI,IAAItB,QAAQ,EAAE;IACV;IACAA,QAAQ,CAACsB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;EAC7M;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js CHANGED Viewed

@@ -70,8 +70,10 @@ const useStyles = makeStyles({
     const styles = useStyles();
     const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
     const mountedAndClosed = !unmountOnClose && !open;
+    // eslint-disable-next-line react-hooks/immutability
     root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
     if (backdrop) {
+        // eslint-disable-next-line react-hooks/immutability
         backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
     }
     return state;

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: ['100vh', '100dvh'],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n dialogHidden: {\n pointerEvents: 'none',\n },\n});\n\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n rootBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n root.className,\n );\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n backdropBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n isBackdropTransparent && styles.nestedDialogBackdrop,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,iBAAiB;AAIxB,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBb,gBAAgB;IACvC,GAAGI,yBAAyB;IAC5BU,OAAO;IACPC,SAASN;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,qBAAqB,OAAO,EAAEL,OAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,OAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,OAAO6B,uBAAuB;IAC/CC,OAAO9B,OAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,OAAOiC,QAAQ;IAE1B,CAAC9B,uCAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,gCAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,gBAAgB,GAAG,EAAEJ,0CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC;QAClBmC,gBAAgBnC;QAChBoC,mBAAmBpC;IACrB;AACF;AAEA,MAAMqC,uBAAuB1C,gBAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,OAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,YAAY3C,WAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,OAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;~~IAE7CxC~~,KAAKiD,SAAS,GAAG1D,aACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;~~QACZA~~,SAASgD,SAAS,GAAG1D,aACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: ['100vh', '100dvh'],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n dialogHidden: {\n pointerEvents: 'none',\n },\n});\n\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n rootBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n root.className,\n );\n\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n backdropBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n isBackdropTransparent && styles.nestedDialogBackdrop,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,iBAAiB;AAIxB,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBb,gBAAgB;IACvC,GAAGI,yBAAyB;IAC5BU,OAAO;IACPC,SAASN;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,qBAAqB,OAAO,EAAEL,OAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,OAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,OAAO6B,uBAAuB;IAC/CC,OAAO9B,OAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,OAAOiC,QAAQ;IAE1B,CAAC9B,uCAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,gCAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,gBAAgB,GAAG,EAAEJ,0CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC;QAClBmC,gBAAgBnC;QAChBoC,mBAAmBpC;IACrB;AACF;AAEA,MAAMqC,uBAAuB1C,gBAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,OAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,YAAY3C,WAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,OAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;IAE7C,oDAAoD;IACpDxC,KAAKiD,SAAS,GAAG1D,aACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;QACZ,oDAAoD;QACpDA,SAASgD,SAAS,GAAG1D,aACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}

package/lib/components/DialogTitle/useDialogTitleStyles.styles.js CHANGED Viewed

@@ -39,8 +39,10 @@ export const useDialogTitleStyles_unstable = state => {
   const rootResetStyles = useRootResetStyles();
   const actionResetStyles = useActionResetStyles();
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
   if (state.action) {
+    // eslint-disable-next-line react-hooks/immutability
     state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);
   }
   return state;

package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/*\n Styles for the root slot\n / const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/\n Styles for the action slot\n / const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n / export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/\n Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGR,aAAA,6PAO9B,CAAC;AACF,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,gBAAGd,aAAA;EAAAe,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;~~EAC1BS~~,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;~~IACdW~~,KAAK,CAACX,MAAM,CAACe,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/*\n Styles for the root slot\n / const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/\n Styles for the action slot\n / const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n / export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/\n Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGR,aAAA,6PAO9B,CAAC;AACF,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAGb,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,gBAAGd,aAAA;EAAAe,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;EAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAS,KAAK,CAACZ,IAAI,CAACgB,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;EACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;IACd;IACAW,KAAK,CAACX,MAAM,CAACe,SAAS,GAAGpB,YAAY,CAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js CHANGED Viewed

@@ -56,8 +56,10 @@ const useStyles = makeStyles({
     const rootResetStyles = useRootResetStyles();
     const actionResetStyles = useActionResetStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
     if (state.action) {
+        // eslint-disable-next-line react-hooks/immutability
         state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);
     }
     return state;

package/lib/components/DialogTitle/useDialogTitleStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3,\n});\n\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4,\n },\n});\n\n/\n Styles for the action slot\n /\nconst useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start',\n});\n\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n /\nexport const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset',\n});\n\n/\n Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n 'use no memo';\n\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n dialogTitleClassNames.root,\n rootResetStyles,\n !state.action && styles.rootWithoutAction,\n state.root.className,\n );\n\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","subtitle1","margin","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useStyles","rootWithoutAction","useActionResetStyles","justifySelf","alignSelf","useDialogTitleInternalStyles","overflow","padding","borderStyle","position","boxSizing","backgroundColor","color","fontFamily","fontSize","cursor","lineHeight","WebkitAppearance","textAlign","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAqBR,gBAAgB;IACzC,GAAGG,iBAAiBM,SAAS;IAC7BC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;AACjB;AAEA,MAAMC,YAAYd,WAAW;IAC3Be,mBAAmB;QACjBF,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMG,uBAAuBjB,gBAAgB;IAC3CW,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBK,aAAa;IACbC,WAAW;AACb;AAEA;;;CAGC,GACD,OAAO,MAAMC,+BAA+BpB,gBAAgB;IAC1D,GAAGI,yBAAyB;IAC5BiB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,WAAW;IACXC,iBAAiB;IACjBC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,WAAW;AACb,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,kBAAkB5B;IACxB,MAAM6B,oBAAoBpB;IAC1B,MAAMqB,SAASvB;~~IAEfoB~~,MAAM7B,IAAI,CAACiC,SAAS,GAAGrC,aACrBG,sBAAsBC,IAAI,EAC1B8B,iBACA,CAACD,MAAM5B,MAAM,IAAI+B,OAAOtB,iBAAiB,EACzCmB,MAAM7B,IAAI,CAACiC,SAAS;IAGtB,IAAIJ,MAAM5B,MAAM,EAAE;~~QAChB4B~~,MAAM5B,MAAM,CAACgC,SAAS,GAAGrC,aAAaG,sBAAsBE,MAAM,EAAE8B,mBAAmBF,MAAM5B,MAAM,CAACgC,SAAS;IAC/G;IAEA,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3,\n});\n\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4,\n },\n});\n\n/\n Styles for the action slot\n /\nconst useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start',\n});\n\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n /\nexport const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset',\n});\n\n/\n Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n 'use no memo';\n\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dialogTitleClassNames.root,\n rootResetStyles,\n !state.action && styles.rootWithoutAction,\n state.root.className,\n );\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","subtitle1","margin","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useStyles","rootWithoutAction","useActionResetStyles","justifySelf","alignSelf","useDialogTitleInternalStyles","overflow","padding","borderStyle","position","boxSizing","backgroundColor","color","fontFamily","fontSize","cursor","lineHeight","WebkitAppearance","textAlign","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAqBR,gBAAgB;IACzC,GAAGG,iBAAiBM,SAAS;IAC7BC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;AACjB;AAEA,MAAMC,YAAYd,WAAW;IAC3Be,mBAAmB;QACjBF,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMG,uBAAuBjB,gBAAgB;IAC3CW,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBK,aAAa;IACbC,WAAW;AACb;AAEA;;;CAGC,GACD,OAAO,MAAMC,+BAA+BpB,gBAAgB;IAC1D,GAAGI,yBAAyB;IAC5BiB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,WAAW;IACXC,iBAAiB;IACjBC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,WAAW;AACb,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,kBAAkB5B;IACxB,MAAM6B,oBAAoBpB;IAC1B,MAAMqB,SAASvB;IAEf,oDAAoD;IACpDoB,MAAM7B,IAAI,CAACiC,SAAS,GAAGrC,aACrBG,sBAAsBC,IAAI,EAC1B8B,iBACA,CAACD,MAAM5B,MAAM,IAAI+B,OAAOtB,iBAAiB,EACzCmB,MAAM7B,IAAI,CAACiC,SAAS;IAGtB,IAAIJ,MAAM5B,MAAM,EAAE;QAChB,oDAAoD;QACpD4B,MAAM5B,MAAM,CAACgC,SAAS,GAAGrC,aAAaG,sBAAsBE,MAAM,EAAE8B,mBAAmBF,MAAM5B,MAAM,CAACgC,SAAS;IAC/G;IAEA,OAAOJ;AACT,EAAE"}

package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js CHANGED Viewed

@@ -100,6 +100,7 @@ const useDialogActionsStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useResetStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
     return state;
 };

package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/\n Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","Btsd7tp","ufxxby","Bq5p579","gridPositionStart","Ew0qkd","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,uBAAuB;;;IA+~~CnBmB,+BAA+B;;;;uBAjDU~~,gBAAgB;AAEnE,gCAAgC;IACnClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,eAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAK,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,UAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAR,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAS,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BjB,CAAC;AAGS,~~wCAAyCE~~,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;~~IAC1Be~~,KAAK,CAACnB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;IAC5U,OAAOH,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch'\n }\n});\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto'\n }\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto'\n }\n },\n fluidStart: {\n gridColumnEnd: 4\n },\n fluidEnd: {\n gridColumnStart: 1\n }\n});\n/\n Apply styling to the DialogActions slots based on the state\n */ export const useDialogActionsStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","Btsd7tp","ufxxby","Bq5p579","gridPositionStart","Ew0qkd","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,uBAAuB;;;mCA+CY;eAA/BmB;;;uBAjDyC,gBAAgB;AAEnE,gCAAgC;IACnClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAU,eAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAK,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,UAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;IAAAO,QAAA,EAAA;QAAAR,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAS,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BjB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAe,KAAK,CAACnB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEoB,WAAW,EAAED,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACT,iBAAiB,EAAEO,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAAChB,eAAe,EAAEc,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,OAAO,IAAIF,MAAM,CAACP,UAAU,EAAEK,KAAK,CAACK,KAAK,IAAIL,KAAK,CAACI,QAAQ,KAAK,KAAK,IAAIF,MAAM,CAACN,QAAQ,EAAEI,KAAK,CAACnB,IAAI,CAACsB,SAAS,CAAC;IAC5U,OAAOH,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js CHANGED Viewed

@@ -68,6 +68,7 @@ const useDialogActionsStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useResetStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
     return state;
 };

package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n});\n\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto',\n },\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto',\n },\n },\n fluidStart: {\n gridColumnEnd: 4,\n },\n fluidEnd: {\n gridColumnStart: 1,\n },\n});\n\n/\n Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n resetStyles,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","gap","height","boxSizing","display","gridRowStart","gridRowEnd","flexDirection","justifySelf","useStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,uBAAAA;;;mCAoDAkB;eAAAA;;;uBAzD6C,iBAAiB;2BAGR,2BAA2B;AAEvF,gCAAoE;IACzEjB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBP,sBAAAA,EAAgB;IACrCQ,KAAKL,qBAAAA;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,iDAAAA,CAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAKO,wCAAwC,CAACM;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;~~IACfQ~~,MAAMlB,IAAI,CAACqB,SAAS,OAAGzB,mBAAAA,EACrBG,wBAAwBC,IAAI,EAC5BmB,aACAD,MAAMI,QAAQ,KAAK,WAAWF,OAAON,iBAAiB,EACtDI,MAAMI,QAAQ,KAAK,SAASF,OAAOT,eAAe,EAClDO,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWF,OAAOL,UAAU,EAC9DG,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASF,OAAOJ,QAAQ,EAC1DE,MAAMlB,IAAI,CAACqB,SAAS;IAEtB,OAAOH;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n root: 'fui-DialogActions',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n gap: DIALOG_GAP,\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n flexDirection: 'column',\n justifySelf: 'stretch',\n },\n});\n\nconst useStyles = makeStyles({\n gridPositionEnd: {\n justifySelf: 'end',\n gridColumnStart: 2,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnStart: 1,\n gridRowStart: 4,\n gridRowEnd: 'auto',\n },\n },\n gridPositionStart: {\n justifySelf: 'start',\n gridColumnStart: 1,\n gridColumnEnd: 2,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n gridColumnEnd: 4,\n gridRowStart: 3,\n gridRowEnd: 'auto',\n },\n },\n fluidStart: {\n gridColumnEnd: 4,\n },\n fluidEnd: {\n gridColumnStart: 1,\n },\n});\n\n/\n Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dialogActionsClassNames.root,\n resetStyles,\n state.position === 'start' && styles.gridPositionStart,\n state.position === 'end' && styles.gridPositionEnd,\n state.fluid && state.position === 'start' && styles.fluidStart,\n state.fluid && state.position === 'end' && styles.fluidEnd,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","gap","height","boxSizing","display","gridRowStart","gridRowEnd","flexDirection","justifySelf","useStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,uBAAAA;;;mCAoDAkB;eAAAA;;;uBAzD6C,iBAAiB;2BAGR,2BAA2B;AAEvF,gCAAoE;IACzEjB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBP,sBAAAA,EAAgB;IACrCQ,KAAKL,qBAAAA;IACLM,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACT,iDAAAA,CAAuC,EAAE;QACxCU,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BgB,iBAAiB;QACfF,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCc,iBAAiB;YACjBN,cAAc;YACdC,YAAY;QACd;IACF;IACAO,mBAAmB;QACjBL,aAAa;QACbG,iBAAiB;QACjBC,eAAe;QACf,CAACf,iDAAAA,CAAuC,EAAE;YACxCe,eAAe;YACfP,cAAc;YACdC,YAAY;QACd;IACF;IACAQ,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAKO,wCAAwC,CAACM;IAC9C;IAEA,MAAMC,cAAclB;IACpB,MAAMmB,SAASV;IACf,oDAAoD;IACpDQ,MAAMlB,IAAI,CAACqB,SAAS,OAAGzB,mBAAAA,EACrBG,wBAAwBC,IAAI,EAC5BmB,aACAD,MAAMI,QAAQ,KAAK,WAAWF,OAAON,iBAAiB,EACtDI,MAAMI,QAAQ,KAAK,SAASF,OAAOT,eAAe,EAClDO,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWF,OAAOL,UAAU,EAC9DG,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASF,OAAOJ,QAAQ,EAC1DE,MAAMlB,IAAI,CAACqB,SAAS;IAEtB,OAAOH;AACT,EAAE"}

package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js CHANGED Viewed

@@ -35,6 +35,7 @@ const dialogBodyClassNames = {
 const useDialogBodyStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useResetStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
     return state;
 };

package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [\n `calc(100vh - 2 ${SURFACE_PADDING})`,\n `calc(100dvh - 2 * ${SURFACE_PADDING})`\n ],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,oBAAoB;;;gCA0BY;;;;uBA5BC,gBAAgB;AAEvD,6BAA6B;IAChCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAAS,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAkB1B,CAAC;AAGS,MAAMC,gCAAgCC,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;~~IACpCI~~,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGb,mBAAY,EAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACjG,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [\n `calc(100vh - 2 ${SURFACE_PADDING})`,\n `calc(100dvh - 2 * ${SURFACE_PADDING})`\n ],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset'\n }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCM,oBAAoB;;;gCA0BY;;;;uBA5BC,gBAAgB;AAEvD,6BAA6B;IAChCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAAS,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAkB1B,CAAC;AAGS,MAAMC,gCAAgCC,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,WAAW,GAAGL,cAAc,CAAC,CAAC;IACpC,oDAAA;IACAI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGb,mBAAY,EAACK,oBAAoB,CAACC,IAAI,EAAEM,WAAW,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACjG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js CHANGED Viewed

@@ -46,6 +46,7 @@ const dialogBodyClassNames = {
 const useDialogBodyStyles_unstable = (state)=>{
     'use no memo';
     const resetStyles = useResetStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
     return state;
 };

package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAYaM,oBAAAA;;;gCA6BAW~~;;;;~~uBAvCiC,iBAAiB;0BAQxD,iBAAiB;AAEjB,6BAA8D;IACnEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBR,sBAAAA,EAAgB;IACrCS,UAAU;IACVC,KAAKR,oBAAAA;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,yBAAAA,CAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,yBAAAA,CAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,gDAAAA,CAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,~~MAAMK,+BAA+B~~,~~CAACC~~;IAC3C;IAEA,MAAMC,cAAcX;~~IAEpBU~~,MAAMX,IAAI,CAACa,SAAS,OAAGnB,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n DIALOG_GAP,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_PADDING,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n root: 'fui-DialogBody',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n overflow: 'unset',\n gap: DIALOG_GAP,\n display: 'grid',\n maxHeight: [`calc(100vh - 2 ${SURFACE_PADDING})`, `calc(100dvh - 2 * ${SURFACE_PADDING})`],\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n maxHeight: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAYaM,oBAAAA;;;gCA6BAW;eAAAA;;;uBAvCiC,iBAAiB;0BAQxD,iBAAiB;AAEjB,6BAA8D;IACnEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBR,sBAAAA,EAAgB;IACrCS,UAAU;IACVC,KAAKR,oBAAAA;IACLS,SAAS;IACTC,WAAW;QAAC,CAAC,iBAAiB,EAAEP,yBAAAA,CAAgB,CAAC,CAAC;QAAE,CAAC,kBAAkB,EAAEA,yBAAAA,CAAgB,CAAC,CAAC;KAAC;IAC5FQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,CAACZ,gDAAAA,CAAuC,EAAE;QACxCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,qCAAqC,CAACM;IAC3C;IAEA,MAAMC,cAAcX;IAEpB,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,OAAGnB,mBAAAA,EAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js CHANGED Viewed

@@ -34,6 +34,7 @@ const dialogContentClassNames = {
 const useDialogContentStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
     return state;
 };

package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;~~2BAIwB~~;;;mCAsBY~~;;;;uBAzBF~~,gBAAgB;AAGvD,~~MAAMK,0BAA0B~~;~~IACnCC~~,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AAGS,~~MAAMC~~,~~mCAAmCC,~~KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;~~IAC1BI~~,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset'\n }\n});\n/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,uBAAuB;;;mCAsBY;eAA/BK;;;uBAzB6B,gBAAgB;AAGvD,gCAAgC;IACnCJ,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAAQ,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGZ,mBAAY,EAACI,uBAAuB,CAACC,IAAI,EAAEM,MAAM,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js CHANGED Viewed

@@ -43,6 +43,7 @@ const dialogContentClassNames = {
 const useDialogContentStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
     return state;
 };

package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,uBAAAA;;;mCA2BAc;;;;uBAjCiC,iBAAiB;4BAGtB,wBAAwB;0BACjB,iBAAiB;AAE1D,gCAAoE;IACzEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,SAASN,kBAAAA,CAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,4BAAAA,CAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;~~IACfa~~,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n root: 'fui-DialogContent',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n padding: tokens.strokeWidthThick,\n margin: `calc(${tokens.strokeWidthThick} -1)`,\n ...typographyStyles.body1,\n overflowY: 'auto',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridRowStart: 2,\n gridRowEnd: 2,\n gridColumnStart: 1,\n gridColumnEnd: 4,\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'unset',\n },\n});\n\n/*\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n 'use no memo';\n\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","DIALOG_MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","padding","strokeWidthThick","margin","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useDialogContentStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,uBAAAA;;;mCA2BAc;;;;uBAjCiC,iBAAiB;4BAGtB,wBAAwB;0BACjB,iBAAiB;AAE1D,gCAAoE;IACzEb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,SAASN,kBAAAA,CAAOO,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOO,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGN,4BAAAA,CAAiBQ,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACd,yCAAAA,CAAgC,EAAE;QACjCQ,WAAW;IACb;AACF;AAKO,MAAMO,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EAAaI,wBAAwBC,IAAI,EAAEe,QAAQD,MAAMd,IAAI,CAACgB,SAAS;IAC9F,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js CHANGED Viewed

@@ -70,8 +70,10 @@ const useDialogSurfaceStyles_unstable = (state)=>{
     const styles = useStyles();
     const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
     const mountedAndClosed = !unmountOnClose && !open;
+    // eslint-disable-next-line react-hooks/immutability
     root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
     if (backdrop) {
+        // eslint-disable-next-line react-hooks/immutability
         backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
     }
     return state;

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/*\n Styles for the root slot\n / const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: [\n '100vh',\n '100dvh'\n ],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed'\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n dialogHidden: {\n pointerEvents: 'none'\n }\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n const mountedAndClosed = !unmountOnClose && !open;\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCU,uBAAuB;;;mCA2DY;eAA/Ba;;;uBA/DyC,gBAAgB;AAInE,gCAAgC;IACnCZ,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMiB,SAAS,GAAA,WAAA,OAAGhB,eAAA,EAAA;IAAAiB,oBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAM,EAAEb,IAAI,EAAEC,QAAQ,EAAEa,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAAA,EAAoB,GAAGJ,KAAK;IACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;IACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;IAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;IAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;~~IACjDd~~,IAAI,CAACuB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;IACnI,IAAItB,QAAQ,EAAE;~~QACVA~~,QAAQ,CAACsB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;IAC7M;IACA,OAAOV,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop'\n};\n/*\n Styles for the root slot\n / const useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: [\n '100vh',\n '100dvh'\n ],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed'\n});\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n dialogHidden: {\n pointerEvents: 'none'\n }\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n const mountedAndClosed = !unmountOnClose && !open;\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCU,uBAAuB;;;mCA2DY;eAA/Ba;;;uBA/DyC,gBAAgB;AAInE,gCAAgC;IACnCZ,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMiB,SAAS,GAAA,WAAA,OAAGhB,eAAA,EAAA;IAAAiB,oBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAM,EAAEb,IAAI,EAAEC,QAAQ,EAAEa,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAAA,EAAoB,GAAGJ,KAAK;IACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;IACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;IAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;IAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;IACjD,oDAAA;IACAd,IAAI,CAACuB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;IACnI,IAAItB,QAAQ,EAAE;QACV,oDAAA;QACAA,QAAQ,CAACsB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;IAC7M;IACA,OAAOV,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js CHANGED Viewed

@@ -86,8 +86,10 @@ const useDialogSurfaceStyles_unstable = (state)=>{
     const styles = useStyles();
     const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
     const mountedAndClosed = !unmountOnClose && !open;
+    // eslint-disable-next-line react-hooks/immutability
     root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
     if (backdrop) {
+        // eslint-disable-next-line react-hooks/immutability
         backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
     }
     return state;

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: ['100vh', '100dvh'],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n dialogHidden: {\n pointerEvents: 'none',\n },\n});\n\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n rootBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n root.className,\n );\n\n if (backdrop) {\n backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n backdropBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n isBackdropTransparent && styles.nestedDialogBackdrop,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaU,uBAAAA;;;~~IAkEAuC,+BAAAA;;;;~~uBA/E6C,iBAAiB;4BACpD,wBAAwB;8BACP,0BAA0B;0BAO3D,iBAAiB;AAIjB,gCAA4F;IACjGtC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAmBb,sBAAAA,EAAgB;IACvC,OAAGI,qCAAAA,GAAyB;IAC5BU,OAAO;IACPC,SAASN,yBAAAA;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,8BAAAA,CAAqB,OAAO,EAAEL,kBAAAA,CAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,kBAAAA,CAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,kBAAAA,CAAO6B,uBAAuB;IAC/CC,OAAO9B,kBAAAA,CAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,kBAAAA,CAAOiC,QAAQ;IAE1B,CAAC9B,gDAAAA,CAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,yCAAAA,CAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,yBAAAA,CAAgB,GAAG,EAAEJ,mDAAAA,CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC,mDAAAA;QAClBmC,gBAAgBnC,mDAAAA;QAChBoC,mBAAmBpC,mDAAAA;IACrB;AACF;AAEA,MAAMqC,2BAAuB1C,sBAAAA,EAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,kBAAAA,CAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,gBAAY3C,iBAAAA,EAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,kBAAAA,CAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;~~IAE7CxC~~,KAAKiD,SAAS,OAAG1D,mBAAAA,EACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;~~QACZA~~,SAASgD,SAAS,OAAG1D,mBAAAA,EACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n SURFACE_BORDER_WIDTH,\n SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n root: 'fui-DialogSurface',\n backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootBaseStyle = makeResetStyles({\n ...createFocusOutlineStyle(),\n inset: 0,\n padding: SURFACE_PADDING,\n margin: 'auto',\n borderStyle: 'none',\n overflow: 'unset',\n border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: ['100vh', '100dvh'],\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // Same styles as DialogSurfaceMotion last keyframe,\n // to ensure dialog will be properly styled when surfaceMotion is opted-out\n boxShadow: tokens.shadow64,\n\n [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n },\n\n [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflicts with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: tokens.colorBackgroundOverlay,\n position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n dialogHidden: {\n pointerEvents: 'none',\n },\n});\n\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n 'use no memo';\n\n const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n const rootBaseStyle = useRootBaseStyle();\n const backdropBaseStyle = useBackdropBaseStyle();\n const styles = useStyles();\n const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n const mountedAndClosed = !unmountOnClose && !open;\n\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(\n dialogSurfaceClassNames.root,\n rootBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n root.className,\n );\n\n if (backdrop) {\n // eslint-disable-next-line react-hooks/immutability\n backdrop.className = mergeClasses(\n dialogSurfaceClassNames.backdrop,\n backdropBaseStyle,\n mountedAndClosed && styles.dialogHidden,\n isBackdropTransparent && styles.nestedDialogBackdrop,\n backdrop.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaU,uBAAAA;;;mCAkEAuC;eAAAA;;;uBA/E6C,iBAAiB;4BACpD,wBAAwB;8BACP,0BAA0B;0BAO3D,iBAAiB;AAIjB,gCAA4F;IACjGtC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAmBb,sBAAAA,EAAgB;IACvC,OAAGI,qCAAAA,GAAyB;IAC5BU,OAAO;IACPC,SAASN,yBAAAA;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,8BAAAA,CAAqB,OAAO,EAAEL,kBAAAA,CAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,kBAAAA,CAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,kBAAAA,CAAO6B,uBAAuB;IAC/CC,OAAO9B,kBAAAA,CAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,kBAAAA,CAAOiC,QAAQ;IAE1B,CAAC9B,gDAAAA,CAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,yCAAAA,CAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,yBAAAA,CAAgB,GAAG,EAAEJ,mDAAAA,CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC,mDAAAA;QAClBmC,gBAAgBnC,mDAAAA;QAChBoC,mBAAmBpC,mDAAAA;IACrB;AACF;AAEA,MAAMqC,2BAAuB1C,sBAAAA,EAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,kBAAAA,CAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,gBAAY3C,iBAAAA,EAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,kBAAAA,CAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;IAE7C,oDAAoD;IACpDxC,KAAKiD,SAAS,OAAG1D,mBAAAA,EACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;QACZ,oDAAoD;QACpDA,SAASgD,SAAS,OAAG1D,mBAAAA,EACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}

package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js CHANGED Viewed

@@ -67,8 +67,10 @@ const useDialogTitleStyles_unstable = (state)=>{
     const rootResetStyles = useRootResetStyles();
     const actionResetStyles = useActionResetStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
     if (state.action) {
+        // eslint-disable-next-line react-hooks/immutability
         state.action.className = (0, _react.mergeClasses)(dialogTitleClassNames.action, actionResetStyles, state.action.className);
     }
     return state;

package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/*\n Styles for the root slot\n / const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/\n Styles for the action slot\n / const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n / export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/\n Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IA+BjBS,4BAA4B;;;iCAkBC;eAA7BG;;;uBApDyC,gBAAgB;AAGnE,8BAA8B;IACjCX,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;AACZ,CAAC;AACD;;CAEA,GAAI,MAAMC,kBAAkB,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAA;CAO9B,CAAC;AACF,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,iBAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACF;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,MAAA;IAAA;CAMhC,CAAC;AAIS,qCAAkC,WAAA,OAAGA,oBAAA,EAAA,WAAA,WAAA;IAAAe,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAe/C,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;IAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;~~IAC1BS~~,KAAK,CAACZ,IAAI,CAACgB,SAAS,OAAGpB,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;IACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;~~QACdW~~,KAAK,CAACX,MAAM,CAACe,SAAS,OAAGpB,mBAAY,EAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;IAClH;IACA,OAAOJ,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const dialogTitleClassNames = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action'\n};\n/*\n Styles for the root slot\n / const useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3\n});\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4\n }\n});\n/\n Styles for the action slot\n / const useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start'\n});\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n / export const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset'\n});\n/\n Apply styling to the DialogTitle slots based on the state\n */ export const useDialogTitleStyles_unstable = (state)=>{\n 'use no memo';\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","useStyles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","useDialogTitleInternalStyles","r","s","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IA+BjBS,4BAA4B;;;iCAkBC;eAA7BG;;;uBApDyC,gBAAgB;AAGnE,8BAA8B;IACjCX,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;AACZ,CAAC;AACD;;CAEA,GAAI,MAAMC,kBAAkB,GAAA,WAAA,OAAGR,oBAAA,EAAA,WAAA,MAAA;IAAA;CAO9B,CAAC;AACF,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,iBAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACF;;CAEA,GAAI,MAAMC,oBAAoB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,MAAA;IAAA;CAMhC,CAAC;AAIS,qCAAkC,WAAA,OAAGA,oBAAA,EAAA,WAAA,WAAA;IAAAe,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAe/C,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,eAAe,GAAGX,kBAAkB,CAAC,CAAC;IAC5C,MAAMY,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;IAChD,MAAMQ,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACZ,IAAI,CAACgB,SAAS,OAAGpB,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEa,eAAe,EAAE,CAACD,KAAK,CAACX,MAAM,IAAIc,MAAM,CAACX,iBAAiB,EAAEQ,KAAK,CAACZ,IAAI,CAACgB,SAAS,CAAC;IACjJ,IAAIJ,KAAK,CAACX,MAAM,EAAE;QACd,oDAAA;QACAW,KAAK,CAACX,MAAM,CAACe,SAAS,OAAGpB,mBAAY,EAACG,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;IAClH;IACA,OAAOJ,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.raw.js CHANGED Viewed

@@ -72,8 +72,10 @@ const useDialogTitleStyles_unstable = (state)=>{
     const rootResetStyles = useRootResetStyles();
     const actionResetStyles = useActionResetStyles();
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
     if (state.action) {
+        // eslint-disable-next-line react-hooks/immutability
         state.action.className = (0, _react.mergeClasses)(dialogTitleClassNames.action, actionResetStyles, state.action.className);
     }
     return state;

package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3,\n});\n\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4,\n },\n});\n\n/\n Styles for the action slot\n /\nconst useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start',\n});\n\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n /\nexport const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset',\n});\n\n/\n Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n 'use no memo';\n\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n dialogTitleClassNames.root,\n rootResetStyles,\n !state.action && styles.rootWithoutAction,\n state.root.className,\n );\n\n if (state.action) {\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","subtitle1","margin","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useStyles","rootWithoutAction","useActionResetStyles","justifySelf","alignSelf","useDialogTitleInternalStyles","overflow","padding","borderStyle","position","boxSizing","backgroundColor","color","fontFamily","fontSize","cursor","lineHeight","WebkitAppearance","textAlign","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;gCAsCAe;;;IAoBAc,6BAAAA;;;;uBAhE6C,iBAAiB;4BAG1C,wBAAwB;8BACjB,0BAA0B;AAE3D,8BAAgE;IACrE5B,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,yBAAqBR,sBAAAA,EAAgB;IACzC,GAAGG,4BAAAA,CAAiBM,SAAS;IAC7BC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;AACjB;AAEA,MAAMC,gBAAYd,iBAAAA,EAAW;IAC3Be,mBAAmB;QACjBF,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMG,2BAAuBjB,sBAAAA,EAAgB;IAC3CW,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBK,aAAa;IACbC,WAAW;AACb;AAMO,MAAMC,mCAA+BpB,sBAAAA,EAAgB;IAC1D,OAAGI,qCAAAA,GAAyB;IAC5BiB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,WAAW;IACXC,iBAAiB;IACjBC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,WAAW;AACb,GAAG;AAKI,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,kBAAkB5B;IACxB,MAAM6B,oBAAoBpB;IAC1B,MAAMqB,SAASvB;~~IAEfoB~~,MAAM7B,IAAI,CAACiC,SAAS,OAAGrC,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1B8B,iBACA,CAACD,MAAM5B,MAAM,IAAI+B,OAAOtB,iBAAiB,EACzCmB,MAAM7B,IAAI,CAACiC,SAAS;IAGtB,IAAIJ,MAAM5B,MAAM,EAAE;~~QAChB4B~~,MAAM5B,MAAM,CAACgC,SAAS,OAAGrC,mBAAAA,EAAaG,sBAAsBE,MAAM,EAAE8B,mBAAmBF,MAAM5B,MAAM,CAACgC,SAAS;IAC/G;IAEA,OAAOJ;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n root: 'fui-DialogTitle',\n action: 'fui-DialogTitle__action',\n};\n\n/*\n Styles for the root slot\n /\nconst useRootResetStyles = makeResetStyles({\n ...typographyStyles.subtitle1,\n margin: 0,\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 1,\n gridColumnEnd: 3,\n});\n\nconst useStyles = makeStyles({\n rootWithoutAction: {\n gridColumnEnd: 4,\n },\n});\n\n/\n Styles for the action slot\n /\nconst useActionResetStyles = makeResetStyles({\n gridRowStart: 1,\n gridRowEnd: 1,\n gridColumnStart: 3,\n justifySelf: 'end',\n alignSelf: 'start',\n});\n\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n /\nexport const useDialogTitleInternalStyles = makeResetStyles({\n ...createFocusOutlineStyle(),\n overflow: 'visible',\n padding: 0,\n borderStyle: 'none',\n position: 'relative',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n cursor: 'pointer',\n lineHeight: 0,\n WebkitAppearance: 'button',\n textAlign: 'unset',\n});\n\n/\n Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n 'use no memo';\n\n const rootResetStyles = useRootResetStyles();\n const actionResetStyles = useActionResetStyles();\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n dialogTitleClassNames.root,\n rootResetStyles,\n !state.action && styles.rootWithoutAction,\n state.root.className,\n );\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","createFocusOutlineStyle","dialogTitleClassNames","root","action","useRootResetStyles","subtitle1","margin","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useStyles","rootWithoutAction","useActionResetStyles","justifySelf","alignSelf","useDialogTitleInternalStyles","overflow","padding","borderStyle","position","boxSizing","backgroundColor","color","fontFamily","fontSize","cursor","lineHeight","WebkitAppearance","textAlign","useDialogTitleStyles_unstable","state","rootResetStyles","actionResetStyles","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;gCAsCAe;;;IAoBAc,6BAAAA;;;;uBAhE6C,iBAAiB;4BAG1C,wBAAwB;8BACjB,0BAA0B;AAE3D,8BAAgE;IACrE5B,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,yBAAqBR,sBAAAA,EAAgB;IACzC,GAAGG,4BAAAA,CAAiBM,SAAS;IAC7BC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;AACjB;AAEA,MAAMC,gBAAYd,iBAAAA,EAAW;IAC3Be,mBAAmB;QACjBF,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMG,2BAAuBjB,sBAAAA,EAAgB;IAC3CW,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBK,aAAa;IACbC,WAAW;AACb;AAMO,MAAMC,mCAA+BpB,sBAAAA,EAAgB;IAC1D,OAAGI,qCAAAA,GAAyB;IAC5BiB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,WAAW;IACXC,iBAAiB;IACjBC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,WAAW;AACb,GAAG;AAKI,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,kBAAkB5B;IACxB,MAAM6B,oBAAoBpB;IAC1B,MAAMqB,SAASvB;IAEf,oDAAoD;IACpDoB,MAAM7B,IAAI,CAACiC,SAAS,OAAGrC,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1B8B,iBACA,CAACD,MAAM5B,MAAM,IAAI+B,OAAOtB,iBAAiB,EACzCmB,MAAM7B,IAAI,CAACiC,SAAS;IAGtB,IAAIJ,MAAM5B,MAAM,EAAE;QAChB,oDAAoD;QACpD4B,MAAM5B,MAAM,CAACgC,SAAS,OAAGrC,mBAAAA,EAAaG,sBAAsBE,MAAM,EAAE8B,mBAAmBF,MAAM5B,MAAM,CAACgC,SAAS;IAC/G;IAEA,OAAOJ;AACT,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.18.0",
+  "version": "9.18.1",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,18 +12,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-utilities": "^9.26.3",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-utilities": "^9.26.4",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-context-selector": "^9.2.16",
-    "@fluentui/react-motion": "^9.15.0",
-    "@fluentui/react-motion-components-preview": "^0.15.4",
+    "@fluentui/react-context-selector": "^9.2.17",
+    "@fluentui/react-motion": "^9.16.0",
+    "@fluentui/react-motion-components-preview": "^0.15.5",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-aria": "^9.17.11",
+    "@fluentui/react-aria": "^9.17.12",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.15",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-portal": "^9.8.12",
+    "@fluentui/react-portal": "^9.8.13",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },