npm - @fluentui/react-dialog - Versions diffs - 9.9.15 → 9.10.0 - Mend

@fluentui/react-dialog 9.9.15 → 9.10.0

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 (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,24 +1,56 @@
 # Change Log - @fluentui/react-dialog
-This log was last generated on Mon, 18 Mar 2024 19:44:52 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Apr 2024 21:47:20 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.0)
+Wed, 17 Apr 2024 21:47:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.16..@fluentui/react-dialog_v9.10.0)
+### Minor changes
+- fix: Dialog scrolls the whole surface on small screens ([PR #31026](https://github.com/microsoft/fluentui/pull/31026) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+- Bump @fluentui/react-portal to v9.4.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+### Patches
+- chore: refactor styles defined in makeResetStyles() to avoid shorthands.*() ([PR #30996](https://github.com/microsoft/fluentui/pull/30996) by olfedias@microsoft.com)
+- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
+## [9.9.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.9.16)
+Tue, 02 Apr 2024 09:48:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.15..@fluentui/react-dialog_v9.9.16)
+### Patches
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-portal to v9.4.19 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
 ## [9.9.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.9.15)
-Mon, 18 Mar 2024 19:44:52 GMT
+Mon, 18 Mar 2024 19:50:46 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.9.14..@fluentui/react-dialog_v9.9.15)
 ### Patches
-- Bump @fluentui/react-utilities to v9.18.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-context-selector to v9.1.56 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-aria to v9.10.2 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-tabster to v9.19.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-theme to v9.1.19 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
-- Bump @fluentui/react-portal to v9.4.18 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
+- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.56 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-aria to v9.10.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-tabster to v9.19.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
+- Bump @fluentui/react-portal to v9.4.18 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
 ## [9.9.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.9.14)

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

@@ -1,4 +1,4 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
 export const dialogActionsClassNames = {
   root: 'fui-DialogActions'
@@ -6,9 +6,9 @@ export const dialogActionsClassNames = {
 /**
  * Styles for the root slot
  */
-const useResetStyles = /*#__PURE__*/__resetStyles("r78gbj", null, {
-  r: [".r78gbj{column-gap:8px;row-gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"],
-  s: ["@media screen and (max-width: 480px){.r78gbj{flex-direction:column;justify-self:stretch;}}"]
+const useResetStyles = /*#__PURE__*/__resetStyles("rhfpeu0", null, {
+  r: [".rhfpeu0{gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"],
+  s: ["@media screen and (max-width: 480px){.rhfpeu0{flex-direction:column;justify-self:stretch;}}"]
 });
 const useStyles = /*#__PURE__*/__styles({
   gridPositionEnd: {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","~~shorthands","~~DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { DIALOG_GAP, 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 ~~...shorthands.~~gap(DIALOG_GAP),\n height: 'fit-content',\n boxSizing: 'border-box',\n display: 'flex',\n gridRowStart: 3,\n gridRowEnd: 3,\n [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 [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 [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 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,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,~~EAAEC,UAAU,~~QAAQ,gBAAgB;~~AACtF~~,SAASC,UAAU,EAAEC,+BAA+B,QAAQ,0BAA0B;AACtF,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,~~gBAAGR~~,aAAA;~~EAAAS~~,CAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF,MAAMC,SAAS,~~gBAAGV~~,QAAA;~~EAAAW~~,eAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAH,OAAA;IAAAC,MAAA;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,MAAMC,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAMoB,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACnB,IAAI,CAACsB,SAAS,~~GAAG3B~~,YAAY,~~CAACI~~,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"}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useResetStyles","r","s","useStyles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","resetStyles","styles","className","position","fluid"],"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, 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 [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 [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 [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 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,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,UAAU,EAAEC,+BAA+B,QAAQ,0BAA0B;AACtF,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,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAH,OAAA;IAAAC,MAAA;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,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"}

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

@@ -1,14 +1,14 @@
-import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
-import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';
+import { __resetStyles, mergeClasses } from '@griffel/react';
+import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';
 export const dialogBodyClassNames = {
   root: 'fui-DialogBody'
 };
 /**
  * Styles for the root slot
  */
-const useResetStyles = /*#__PURE__*/__resetStyles("r71plkv", null, {
-  r: [".r71plkv{overflow-x:unset;overflow-y:unset;column-gap:8px;row-gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"],
-  s: ["@media screen and (max-width: 480px){.r71plkv{max-width:100vw;grid-template-rows:auto 1fr auto;}}"]
+const useResetStyles = /*#__PURE__*/__resetStyles("r1h3qql9", null, {
+  r: [".r1h3qql9{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"],
+  s: ["@media screen and (max-width: 480px){.r1h3qql9{max-width:100vw;grid-template-rows:auto 1fr auto;}}", "@media screen and (max-height: 359px){.r1h3qql9{max-height:unset;}}"]
 });
 /**
  * Apply styling to the DialogBody slots based on the state

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","~~shorthands~~","~~DIALOG_GAP~~","~~MEDIA_QUERY_BREAKPOINT_SELECTOR~~","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n ~~...shorthands.~~overflow('unset'),\n ~~...shorthands.~~gap(DIALOG_GAP),\n display: 'grid',\n maxHeight: `calc(100vh - 2 ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n }\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */ export const useDialogBodyStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,~~EAAEC,UAAU,~~QAAQ,gBAAgB;~~AAC1E~~,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,eAAe,QAAQ,gBAAgB;~~AAC7F~~,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,~~CAY1B~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,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"}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","r","s","useDialogBodyStyles_unstable","state","resetStyles","className"],"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, 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: `calc(100vh - 2 ${SURFACE_PADDING})`,\n boxSizing: 'border-box',\n gridTemplateRows: 'auto 1fr',\n gridTemplateColumns: '1fr 1fr auto',\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw',\n gridTemplateRows: 'auto 1fr auto'\n },\n [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 const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,eAAe,QAAQ,gBAAgB;AACvH,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGR,aAAA;EAAAS,CAAA;EAAAC,CAAA;AAAA,CAe1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,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"}

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

@@ -1,12 +1,16 @@
-import { __resetStyles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';
 export const dialogContentClassNames = {
   root: 'fui-DialogContent'
 };
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__resetStyles("r1e0mpcm", "r1equu0b", [".r1e0mpcm{padding-top:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick) * -1);margin-right:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}", ".r1equu0b{padding-top:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-right:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}"]);
+const useStyles = /*#__PURE__*/__resetStyles("r1v5zwsm", null, {
+  r: [".r1v5zwsm{padding:var(--strokeWidthThick);margin:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}"],
+  s: ["@media screen and (max-height: 359px){.r1v5zwsm{overflow-y:unset;}}"]
+});
 /**
  * Apply styling to the DialogContent slots based on the state
  */

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","~~shorthands~~","~~tokens~~","~~typographyStyles~~","dialogContentClassNames","root","useStyles","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n ~~...shorthands.~~padding(tokens.strokeWidthThick),\n ~~...shorthands.~~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/*\n Apply styling to the DialogContent slots based on the state\n */ export const useDialogContentStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,~~EAAEC,UAAU,~~QAAQ,gBAAgB;~~AAC1E~~,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,~~ivCAWrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,~~MAAMQ~~,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,~~GAAGH~~,SAAS,CAAC,CAAC;~~EAC1BE~~,KAAK,~~CAACH~~,IAAI,~~CAACK~~,SAAS,~~GAAGV~~,YAAY,CAACI,uBAAuB,CAACC,IAAI,~~EAAEI~~,MAAM,EAAED,KAAK,~~CAACH~~,IAAI,~~CAACK~~,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","typographyStyles","MEDIA_QUERY_SHORT_SCREEN","dialogContentClassNames","root","useStyles","r","s","useDialogContentStyles_unstable","state","styles","className"],"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { 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 [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 const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,wBAAwB,QAAQ,gBAAgB;AACzD,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,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"}

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

@@ -1,7 +1,7 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
+import { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';
 export const dialogSurfaceClassNames = {
   root: 'fui-DialogSurface',
   backdrop: 'fui-DialogSurface__backdrop'
@@ -9,9 +9,9 @@ export const dialogSurfaceClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootBaseStyle = /*#__PURE__*/__resetStyles("rhhzfde", "r1n1tr5u", {
-  r: [".rhhzfde{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".rhhzfde:focus{outline-style:none;}", ".rhhzfde:focus-visible{outline-style:none;}", ".rhhzfde[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rhhzfde[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1n1tr5u{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1n1tr5u:focus{outline-style:none;}", ".r1n1tr5u:focus-visible{outline-style:none;}", ".r1n1tr5u[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1n1tr5u[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
-  s: ["@media (forced-colors: active){.rhhzfde[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.rhhzfde{max-width:100vw;}}", "@media (forced-colors: active){.r1n1tr5u[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.r1n1tr5u{max-width:100vw;}}"]
+const useRootBaseStyle = /*#__PURE__*/__resetStyles("rhzkxut", "r1dhpx9", {
+  r: [".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".rhzkxut:focus{outline-style:none;}", ".rhzkxut:focus-visible{outline-style:none;}", ".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rhzkxut[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1dhpx9:focus{outline-style:none;}", ".r1dhpx9:focus-visible{outline-style:none;}", ".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1dhpx9[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}", "@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}", "@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
 });
 const rootVisible = {
   boxShadow: tokens.shadow64,
@@ -67,7 +67,7 @@ const useRootStyles = /*#__PURE__*/__styles({
 const backdropVisible = {
   opacity: 1
 };
-const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("raidwwn", "r17vltcu", [".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}", ".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}"]);
+const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("r19ug08i", null, [".r19ug08i{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}"]);
 const useBackdropStyles = /*#__PURE__*/__styles({
   nestedDialogBackdrop: {
     De3pzq: "f1c21dwh"

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","~~shorthands~~","~~tokens~~","~~createFocusOutlineStyle~~","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","rootVisible","boxShadow","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","static"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 ~~...shorthands.~~inset(0),\n ~~...shorthands.~~padding~~(0),\n ...shorthands.padding(~~SURFACE_PADDING),\n ~~...shorthands.~~margin('auto'),\n ~~...shorthands.~~borderStyle('none'),\n ~~...shorthands.~~overflow('unset'),\n ~~...shorthands.~~border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke~~),\~~n ~~...shorthands.~~borderRadius(tokens.borderRadiusXLarge),\n display: 'block',\n userSelect: 'unset',\n visibility: 'unset',\n position: 'fixed',\n height: 'fit-content',\n maxWidth: '600px',\n maxHeight: '100vh',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n }\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = makeStyles({\n animated: {\n // initial style before animation:\n opacity: 0,\n boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n transform: 'scale(0.85) translateZ(0)'\n },\n static: {\n boxShadow: tokens.shadow64\n },\n unmounted: {},\n entering: {\n ...rootWhenAnimating,\n ...rootVisible\n },\n entered: rootVisible,\n idle: rootVisible,\n exiting: {\n ...rootWhenAnimating,\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/\n Styles for the backdrop slot\n / const backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = makeResetStyles({\n ~~...shorthands.~~inset('0px'),\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n position: 'fixed',\n // initial style before animation:\n transitionDuration: tokens.durationGentle,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'opacity',\n willChange: 'opacity',\n opacity: 0\n});\nconst useBackdropStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n unmounted: {},\n entering: backdropVisible,\n entered: backdropVisible,\n idle: backdropVisible,\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const { isNestedDialog, root, backdrop, transitionStatus } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,~~EAAEC,UAAU,~~QAAQ,gBAAgB;~~AACtF~~,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;~~AACvG~~,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,~~gBAAGZ~~,aAAA;~~EAAAa~~,CAAA;EAAAC,CAAA;AAAA,~~CAuB5B~~,CAAC;AACF,MAAMC,WAAW,GAAG;EAChBC,SAAS,~~EAAEZ~~,MAAM,~~CAACa~~,QAAQ;EAC1BC,SAAS,EAAE,wBAAwB;EACnCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,GAAG;EACtBC,kBAAkB,~~EAAEjB~~,MAAM,~~CAACkB~~,cAAc;EACzCC,kBAAkB,EAAE,gCAAgC;EACpD;EACAC,wBAAwB,~~EAAEpB~~,MAAM,~~CAACqB~~;AACrC,CAAC;AACD,MAAMC,aAAa,~~gBAAGzB~~,QAAA;~~EAAA0B~~,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;EAAA;EAAAE,SAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAN,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAQ,OAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAS,IAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAU,OAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,eAAe,GAAG;EACxBtB,OAAO,EAAE;AACb,CAAC;AACD,MAAMuB,oBAAoB,~~gBAAG1C~~,aAAA,~~2gBAU5B~~,CAAC;AACF,~~MAAM2C~~,iBAAiB,~~gBAAG1C~~,QAAA;~~EAAA2C~~,oBAAA;IAAAC,MAAA;EAAA;EAAAd,SAAA;EAAAC,QAAA;IAAAJ,MAAA;EAAA;EAAAQ,OAAA;IAAAR,MAAA;EAAA;EAAAS,IAAA;IAAAT,MAAA;EAAA;EAAAU,OAAA;IAAAH,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAYzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAEtC,IAAI;IAAEC,QAAQ;IAAEsC;EAAiB,CAAC,GAAGF,KAAK;EAClE,MAAMG,aAAa,GAAGtC,gBAAgB,CAAC,CAAC;EACxC,MAAMuC,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1CjC,IAAI,CAAC4C,SAAS,~~GAAGpD~~,YAAY,~~CAACO~~,uBAAuB,CAACC,IAAI,EAAEwC,aAAa,EAAED,gBAAgB,GAAGE,UAAU,CAACxB,QAAQ,GAAGwB,UAAU,CAACI,MAAM,EAAEN,gBAAgB,IAAIE,UAAU,CAACF,gBAAgB,CAAC,EAAEvC,IAAI,CAAC4C,SAAS,CAAC;EACxM,IAAI3C,QAAQ,EAAE;IACVA,QAAQ,CAAC2C,SAAS,~~GAAGpD~~,YAAY,~~CAACO~~,uBAAuB,CAACE,QAAQ,EAAEyC,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAEK,gBAAgB,IAAII,cAAc,CAACJ,gBAAgB,CAAC,EAAEtC,QAAQ,CAAC2C,SAAS,CAAC;EAC3N;EACA,OAAOP,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","rootVisible","boxShadow","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","static"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, 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: '100vh',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n maxWidth: '100vw'\n },\n [MEDIA_QUERY_SHORT_SCREEN]: {\n overflowY: 'auto',\n // We need to offset the scrollbar by adding transparent borders otherwise\n // it conflits with the border radius.\n paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n }\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = makeStyles({\n animated: {\n // initial style before animation:\n opacity: 0,\n boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n transform: 'scale(0.85) translateZ(0)'\n },\n static: {\n boxShadow: tokens.shadow64\n },\n unmounted: {},\n entering: {\n ...rootWhenAnimating,\n ...rootVisible\n },\n entered: rootVisible,\n idle: rootVisible,\n exiting: {\n ...rootWhenAnimating,\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/\n Styles for the backdrop slot\n / const backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = makeResetStyles({\n inset: '0px',\n backgroundColor: 'rgba(0, 0, 0, 0.4)',\n position: 'fixed',\n // initial style before animation:\n transitionDuration: tokens.durationGentle,\n transitionTimingFunction: tokens.curveLinear,\n transitionProperty: 'opacity',\n willChange: 'opacity',\n opacity: 0\n});\nconst useBackdropStyles = makeStyles({\n nestedDialogBackdrop: {\n backgroundColor: tokens.colorTransparentBackground\n },\n unmounted: {},\n entering: backdropVisible,\n entered: backdropVisible,\n idle: backdropVisible,\n exiting: {\n transitionTimingFunction: tokens.curveAccelerateMin\n },\n exited: {}\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n const { isNestedDialog, root, backdrop, transitionStatus } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kCAAkC,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACrK,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,CA+B5B,CAAC;AACF,MAAMC,WAAW,GAAG;EAChBC,SAAS,EAAEd,MAAM,CAACe,QAAQ;EAC1BC,SAAS,EAAE,wBAAwB;EACnCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,GAAG;EACtBC,kBAAkB,EAAEnB,MAAM,CAACoB,cAAc;EACzCC,kBAAkB,EAAE,gCAAgC;EACpD;EACAC,wBAAwB,EAAEtB,MAAM,CAACuB;AACrC,CAAC;AACD,MAAMC,aAAa,gBAAG1B,QAAA;EAAA2B,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;EAAA;EAAAE,SAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAN,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAQ,OAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAS,IAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAU,OAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,eAAe,GAAG;EACxBtB,OAAO,EAAE;AACb,CAAC;AACD,MAAMuB,oBAAoB,gBAAG3C,aAAA,iPAU5B,CAAC;AACF,MAAM4C,iBAAiB,gBAAG3C,QAAA;EAAA4C,oBAAA;IAAAC,MAAA;EAAA;EAAAd,SAAA;EAAAC,QAAA;IAAAJ,MAAA;EAAA;EAAAQ,OAAA;IAAAR,MAAA;EAAA;EAAAS,IAAA;IAAAT,MAAA;EAAA;EAAAU,OAAA;IAAAH,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAYzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAEtC,IAAI;IAAEC,QAAQ;IAAEsC;EAAiB,CAAC,GAAGF,KAAK;EAClE,MAAMG,aAAa,GAAGtC,gBAAgB,CAAC,CAAC;EACxC,MAAMuC,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1CjC,IAAI,CAAC4C,SAAS,GAAGrD,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEwC,aAAa,EAAED,gBAAgB,GAAGE,UAAU,CAACxB,QAAQ,GAAGwB,UAAU,CAACI,MAAM,EAAEN,gBAAgB,IAAIE,UAAU,CAACF,gBAAgB,CAAC,EAAEvC,IAAI,CAAC4C,SAAS,CAAC;EACxM,IAAI3C,QAAQ,EAAE;IACVA,QAAQ,CAAC2C,SAAS,GAAGrD,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEyC,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAEK,gBAAgB,IAAII,cAAc,CAACJ,gBAAgB,CAAC,EAAEtC,QAAQ,CAAC2C,SAAS,CAAC;EAC3N;EACA,OAAOP,KAAK;AAChB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 export const dialogTitleClassNames = {
@@ -8,7 +8,7 @@ export const dialogTitleClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootResetStyles = /*#__PURE__*/__resetStyles("rztv7rx", "rt0yqbx", [".rztv7rx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}", ".rt0yqbx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-left:0;margin-bottom:0;margin-right:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}"]);
+const useRootResetStyles = /*#__PURE__*/__resetStyles("rxjm636", null, [".rxjm636{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}"]);
 const useStyles = /*#__PURE__*/__styles({
   rootWithoutAction: {
     Bw0ie65: "fsyjsko"
@@ -24,9 +24,9 @@ const useActionResetStyles = /*#__PURE__*/__resetStyles("r13kcrze", null, [".r13
  * Styles to be applied on internal elements used by default action on non-modal Dialog
  * @internal
  */
-export const useDialogTitleInternalStyles = /*#__PURE__*/__resetStyles("r51tj", "rgre5d", {
-  r: [".r51tj{overflow-x:visible;overflow-y:visible;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r51tj:focus{outline-style:none;}", ".r51tj:focus-visible{outline-style:none;}", ".r51tj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r51tj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rgre5d{overflow-x:visible;overflow-y:visible;padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".rgre5d:focus{outline-style:none;}", ".rgre5d:focus-visible{outline-style:none;}", ".rgre5d[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rgre5d[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
-  s: ["@media (forced-colors: active){.r51tj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.rgre5d[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+export const useDialogTitleInternalStyles = /*#__PURE__*/__resetStyles("r8i4vpr", "r15ezg2h", {
+  r: [".r8i4vpr{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r8i4vpr:focus{outline-style:none;}", ".r8i4vpr:focus-visible{outline-style:none;}", ".r8i4vpr[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r8i4vpr[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r15ezg2h{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r15ezg2h:focus{outline-style:none;}", ".r15ezg2h:focus-visible{outline-style:none;}", ".r15ezg2h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r15ezg2h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.r8i4vpr[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r15ezg2h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
 });
 /**
  * Apply styling to the DialogTitle slots based on the state

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","~~shorthands","~~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":["import { makeResetStyles, makeStyles, mergeClasses, ~~shorthands~~ } 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 ~~...shorthands.~~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 ~~...shorthands.~~overflow('visible'),\n ~~...shorthands.~~padding(0),\n ~~...shorthands.~~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 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,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,~~EAAEC,UAAU,~~QAAQ,gBAAgB;~~AACtF~~,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,~~gBAAGT~~,aAAA~~,+kBAO9B~~,CAAC;AACF,~~MAAMU~~,SAAS,~~gBAAGT~~,QAAA;~~EAAAU~~,iBAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,~~gBAAGd~~,aAAA,wHAMhC,CAAC;AACF;AACA;AACA;AACA;AAAI,OAAO,~~MAAMe~~,4BAA4B,~~gBAAGf~~,aAAA;~~EAAAgB~~,CAAA;EAAAC,CAAA;AAAA,CAe/C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,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,~~GAAGrB~~,YAAY,~~CAACI~~,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,~~GAAGrB~~,YAAY,~~CAACI~~,qBAAqB,CAACE,MAAM,EAAEa,iBAAiB,EAAEF,KAAK,CAACX,MAAM,CAACe,SAAS,CAAC;EAClH;EACA,OAAOJ,KAAK;AAChB,CAAC"}
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":["import { 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 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,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,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"}

package/lib/contexts/constants.js CHANGED Viewed

@@ -1,4 +1,6 @@
 export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';
+export const MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';
 export const SURFACE_PADDING = '24px';
 export const DIALOG_GAP = '8px';
 export const SURFACE_BORDER_WIDTH = '1px';
+export const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';

package/lib/contexts/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["constants.ts"],"sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n"],"names":["MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","DIALOG_GAP","SURFACE_BORDER_WIDTH"],"mappings":"AAAA,OAAO,MAAMA,kCAAkC,uCAAuC;AACtF,OAAO,MAAMC,kBAAkB,OAAO;AACtC,OAAO,MAAMC,aAAa,MAAM;AAChC,OAAO,MAAMC,uBAAuB,MAAM"}
1	+ {"version":3,"sources":["constants.ts"],"sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\nexport const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';\n"],"names":["MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","DIALOG_GAP","SURFACE_BORDER_WIDTH","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,OAAO,MAAMA,kCAAkC,uCAAuC;AACtF,OAAO,MAAMC,2BAA2B,wCAAwC;AAChF,OAAO,MAAMC,kBAAkB,OAAO;AACtC,OAAO,MAAMC,aAAa,MAAM;AAChC,OAAO,MAAMC,uBAAuB,MAAM;AAC1C,OAAO,MAAMC,qCAAqC,MAAM"}

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

@@ -22,12 +22,12 @@ const dialogActionsClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r78gbj", null, {
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rhfpeu0", null, {
     r: [
-        ".r78gbj{column-gap:8px;row-gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"
+        ".rhfpeu0{gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}"
     ],
     s: [
-        "@media screen and (max-width: 480px){.r78gbj{flex-direction:column;justify-self:stretch;}}"
+        "@media screen and (max-width: 480px){.rhfpeu0{flex-direction:column;justify-self:stretch;}}"
     ]
 });
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n /\nconst useResetStyles = /#__PURE__/__resetStyles(\"~~r78gbj~~\", null, {\n r: [\".~~r78gbj~~{~~column-~~gap:8px;~~row-gap:8px;~~height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}\"],\n s: [\"@media screen and (max-width: 480px){.~~r78gbj~~{flex-direction:column;justify-self:stretch;}}\"]\n});\nconst useStyles = /#__PURE__/__styles({\n gridPositionEnd: {\n Bdqf98w: \"f1a7i8kp\",\n Br312pm: \"fd46tj4\",\n Bw0ie65: \"fsyjsko\",\n B6n781s: \"f1f41i0t\",\n Bv5d0be: \"f1jaqex3\",\n v4ugfu: \"f2ao6jk\"\n },\n gridPositionStart: {\n Bdqf98w: \"fsxvdwy\",\n Br312pm: \"fwpfdsa\",\n Bw0ie65: \"f1e2fz10\",\n Bojbm9c: \"f11ihkml\",\n Bv5d0be: \"fce5bvx\",\n v4ugfu: \"f2ao6jk\"\n },\n fluidStart: {\n Bw0ie65: \"fsyjsko\"\n },\n fluidEnd: {\n Br312pm: \"fwpfdsa\"\n }\n}, {\n d: [\".f1a7i8kp{justify-self:end;}\", \".fd46tj4{grid-column-start:2;}\", \".fsyjsko{grid-column-end:4;}\", \".fsxvdwy{justify-self:start;}\", \".fwpfdsa{grid-column-start:1;}\", \".f1e2fz10{grid-column-end:2;}\"],\n m: [[\"@media screen and (max-width: 480px){.f1f41i0t{grid-column-start:1;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f1jaqex3{grid-row-start:4;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f2ao6jk{grid-row-end:auto;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f11ihkml{grid-column-end:4;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.fce5bvx{grid-row-start:3;}}\", {\n m: \"screen and (max-width: 480px)\"\n }]]\n});\n/\n Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = state => {\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//# sourceMappingURL=useDialogActionsStyles.styles.js.map"],"names":["dialogActionsClassNames","useDialogActionsStyles_unstable","root","useResetStyles","__resetStyles","r","s","useStyles","__styles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","state","resetStyles","styles","className","mergeClasses","position","fluid"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAkDAC,+BAA+B;eAA/BA;;;~~uBApDqD~~;~~AAE3D~~,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,~~UAAU~~,MAAM;~~IAChEC~~,GAAG;QAAC;~~KAA6H~~;~~IACjIC~~,GAAG;QAAC;~~KAA6F~~;~~AACnG~~;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,iBAAiB;QACfC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAC,mBAAmB;QACjBN,SAAS;QACTC,SAAS;QACTC,SAAS;QACTK,SAAS;QACTH,SAAS;QACTC,QAAQ;IACV;IACAG,YAAY;QACVN,SAAS;IACX;IACAO,UAAU;QACRR,SAAS;IACX;AACF,GAAG;IACDS,GAAG;QAAC;QAAgC;QAAkC;QAAgC;QAAiC;QAAkC;KAAgC;IACzMC,GAAG;QAAC;YAAC;YAAyE;gBAC5EA,GAAG;YACL;SAAE;QAAE;YAAC;YAAsE;gBACzEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAsE;gBACzEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAuE;gBAC1EA,GAAG;YACL;SAAE;QAAE;YAAC;YAAqE;gBACxEA,GAAG;YACL;SAAE;KAAC;AACL;AAIO,MAAMpB,kCAAkCqB,CAAAA;IAC7C,MAAMC,cAAcpB;IACpB,MAAMqB,SAASjB;IACfe,MAAMpB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,wBAAwBE,IAAI,EAAEqB,aAAaD,MAAMK,QAAQ,KAAK,WAAWH,OAAOR,iBAAiB,EAAEM,MAAMK,QAAQ,KAAK,SAASH,OAAOf,eAAe,EAAEa,MAAMM,KAAK,IAAIN,MAAMK,QAAQ,KAAK,WAAWH,OAAON,UAAU,EAAEI,MAAMM,KAAK,IAAIN,MAAMK,QAAQ,KAAK,SAASH,OAAOL,QAAQ,EAAEG,MAAMpB,IAAI,CAACuB,SAAS;IAC3U,OAAOH;AACT,GACA,yDAAyD"}
1	+ {"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\n/*\n Styles for the root slot\n /\nconst useResetStyles = /#__PURE__/__resetStyles(\"rhfpeu0\", null, {\n r: [\".rhfpeu0{gap:8px;height:fit-content;box-sizing:border-box;display:flex;grid-row-start:3;grid-row-end:3;}\"],\n s: [\"@media screen and (max-width: 480px){.rhfpeu0{flex-direction:column;justify-self:stretch;}}\"]\n});\nconst useStyles = /#__PURE__/__styles({\n gridPositionEnd: {\n Bdqf98w: \"f1a7i8kp\",\n Br312pm: \"fd46tj4\",\n Bw0ie65: \"fsyjsko\",\n B6n781s: \"f1f41i0t\",\n Bv5d0be: \"f1jaqex3\",\n v4ugfu: \"f2ao6jk\"\n },\n gridPositionStart: {\n Bdqf98w: \"fsxvdwy\",\n Br312pm: \"fwpfdsa\",\n Bw0ie65: \"f1e2fz10\",\n Bojbm9c: \"f11ihkml\",\n Bv5d0be: \"fce5bvx\",\n v4ugfu: \"f2ao6jk\"\n },\n fluidStart: {\n Bw0ie65: \"fsyjsko\"\n },\n fluidEnd: {\n Br312pm: \"fwpfdsa\"\n }\n}, {\n d: [\".f1a7i8kp{justify-self:end;}\", \".fd46tj4{grid-column-start:2;}\", \".fsyjsko{grid-column-end:4;}\", \".fsxvdwy{justify-self:start;}\", \".fwpfdsa{grid-column-start:1;}\", \".f1e2fz10{grid-column-end:2;}\"],\n m: [[\"@media screen and (max-width: 480px){.f1f41i0t{grid-column-start:1;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f1jaqex3{grid-row-start:4;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f2ao6jk{grid-row-end:auto;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f11ihkml{grid-column-end:4;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.fce5bvx{grid-row-start:3;}}\", {\n m: \"screen and (max-width: 480px)\"\n }]]\n});\n/\n Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = state => {\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//# sourceMappingURL=useDialogActionsStyles.styles.js.map"],"names":["dialogActionsClassNames","useDialogActionsStyles_unstable","root","useResetStyles","__resetStyles","r","s","useStyles","__styles","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","state","resetStyles","styles","className","mergeClasses","position","fluid"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAkDAC,+BAA+B;eAA/BA;;;uBApDyC;AAE/C,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IACjEC,GAAG;QAAC;KAA2G;IAC/GC,GAAG;QAAC;KAA8F;AACpG;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,iBAAiB;QACfC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAC,mBAAmB;QACjBN,SAAS;QACTC,SAAS;QACTC,SAAS;QACTK,SAAS;QACTH,SAAS;QACTC,QAAQ;IACV;IACAG,YAAY;QACVN,SAAS;IACX;IACAO,UAAU;QACRR,SAAS;IACX;AACF,GAAG;IACDS,GAAG;QAAC;QAAgC;QAAkC;QAAgC;QAAiC;QAAkC;KAAgC;IACzMC,GAAG;QAAC;YAAC;YAAyE;gBAC5EA,GAAG;YACL;SAAE;QAAE;YAAC;YAAsE;gBACzEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAsE;gBACzEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAuE;gBAC1EA,GAAG;YACL;SAAE;QAAE;YAAC;YAAqE;gBACxEA,GAAG;YACL;SAAE;KAAC;AACL;AAIO,MAAMpB,kCAAkCqB,CAAAA;IAC7C,MAAMC,cAAcpB;IACpB,MAAMqB,SAASjB;IACfe,MAAMpB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,wBAAwBE,IAAI,EAAEqB,aAAaD,MAAMK,QAAQ,KAAK,WAAWH,OAAOR,iBAAiB,EAAEM,MAAMK,QAAQ,KAAK,SAASH,OAAOf,eAAe,EAAEa,MAAMM,KAAK,IAAIN,MAAMK,QAAQ,KAAK,WAAWH,OAAON,UAAU,EAAEI,MAAMM,KAAK,IAAIN,MAAMK,QAAQ,KAAK,SAASH,OAAOL,QAAQ,EAAEG,MAAMpB,IAAI,CAACuB,SAAS;IAC3U,OAAOH;AACT,GACA,yDAAyD"}

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

@@ -22,12 +22,13 @@ const dialogBodyClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r71plkv", null, {
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1h3qql9", null, {
     r: [
-        ".r71plkv{overflow-x:unset;overflow-y:unset;column-gap:8px;row-gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"
+        ".r1h3qql9{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 * 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}"
     ],
     s: [
-        "@media screen and (max-width: 480px){.r71plkv{max-width:100vw;grid-template-rows:auto 1fr auto;}}"
+        "@media screen and (max-width: 480px){.r1h3qql9{max-width:100vw;grid-template-rows:auto 1fr auto;}}",
+        "@media screen and (max-height: 359px){.r1h3qql9{max-height:unset;}}"
     ]
 });
 const useDialogBodyStyles_unstable = (state)=>{

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n /\nconst useResetStyles = /#__PURE__/__resetStyles(\"~~r71plkv~~\", null, {\n r: [\".~~r71plkv~~{overflow-x:unset;~~overflow-y:unset;column-~~gap:8px;~~row-gap:8px;~~display:grid;max-height:calc(100vh - 2 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}\"],\n s: [\"@media screen and (max-width: 480px){.~~r71plkv~~{max-width:100vw;grid-template-rows:auto 1fr auto;}}\"]\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useResetStyles","__resetStyles","r","s","state","resetStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAaAC,4BAA4B;eAA5BA;;;~~uBAf2C~~;~~AAEjD~~,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,~~WAAW~~,MAAM;~~IACjEC~~,GAAG;QAAC;~~KAA8M~~;~~IAClNC~~,GAAG;QAAC;~~KAAoG~~;~~AAC1G~~;AAIO,MAAML,+BAA+BM,CAAAA;IAC1C,MAAMC,cAAcL;IACpBI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACV,qBAAqBE,IAAI,EAAEM,aAAaD,MAAML,IAAI,CAACO,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}
1	+ {"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/*\n Styles for the root slot\n /\nconst useResetStyles = /#__PURE__/__resetStyles(\"r1h3qql9\", null, {\n r: [\".r1h3qql9{overflow:unset;gap:8px;display:grid;max-height:calc(100vh - 2 24px);box-sizing:border-box;grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr auto;}\"],\n s: [\"@media screen and (max-width: 480px){.r1h3qql9{max-width:100vw;grid-template-rows:auto 1fr auto;}}\", \"@media screen and (max-height: 359px){.r1h3qql9{max-height:unset;}}\"]\n});\n/*\n Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n const resetStyles = useResetStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useResetStyles","__resetStyles","r","s","state","resetStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAaAC,4BAA4B;eAA5BA;;;uBAf+B;AAErC,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAClEC,GAAG;QAAC;KAAyK;IAC7KC,GAAG;QAAC;QAAsG;KAAsE;AAClL;AAIO,MAAML,+BAA+BM,CAAAA;IAC1C,MAAMC,cAAcL;IACpBI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACV,qBAAqBE,IAAI,EAAEM,aAAaD,MAAML,IAAI,CAACO,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}

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

@@ -22,10 +22,14 @@ const dialogContentClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1e0mpcm", "r1equu0b", [
-    ".r1e0mpcm{padding-top:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick) * -1);margin-right:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}",
-    ".r1equu0b{padding-top:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-right:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}"
-]);
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1v5zwsm", null, {
+    r: [
+        ".r1v5zwsm{padding:var(--strokeWidthThick);margin:calc(var(--strokeWidthThick) * -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}"
+    ],
+    s: [
+        "@media screen and (max-height: 359px){.r1v5zwsm{overflow-y:unset;}}"
+    ]
+});
 const useDialogContentStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n /\nconst useStyles = /#__PURE__/__resetStyles(\"~~r1e0mpcm~~\", ~~\"r1equu0b\"~~, [\".~~r1e0mpcm~~{padding~~-top~~:var(--strokeWidthThick);~~padding-right:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);~~margin~~-top~~:calc(var(--strokeWidthThick) -1);~~margin-right:calc(var(--strokeWidthThick) * -1);margin-bottom:calc(var(--strokeWidthThick) * -1);margin-left:calc(var(--strokeWidthThick) * -1);~~font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}\", \"~~.r1equu0b{padding-top:var(--strokeWidthThick);padding-left:var(--strokeWidthThick);padding-bottom:var(--strokeWidthThick);padding-right:var(--strokeWidthThick);margin-top:calc(var(--strokeWidthThick)~~ * ~~-1);margin-left:calc(var(--strokeWidthThick)~~ * -1);margin-bottom:calc(var(--strokeWidthThick) * -~~1);margin-right~~:~~calc(var(--strokeWidthThick)~~ * -1)~~;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);~~overflow-y:~~auto~~;~~min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;~~}\"]);\n/*\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogContentStyles.styles.js.map"],"names":["dialogContentClassNames","useDialogContentStyles_unstable","root","useStyles","__resetStyles","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;~~IAEaA~~,uBAAuB;eAAvBA;;~~IAUAC~~,+BAA+B;eAA/BA;;;~~uBAZ2C~~;~~AAEjD~~,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,~~YAAY~~;~~IAAC~~;~~IAA4mB~~;~~CAA2mB~~;~~AAItxC~~,~~MAAMH~~,~~kCAAkCI~~,CAAAA;IAC7C,MAAMC,~~SAASH~~;~~IACfE~~,~~MAAMH~~,IAAI,~~CAACK~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAACR~~,wBAAwBE,IAAI,~~EAAEI~~,QAAQD,~~MAAMH~~,IAAI,~~CAACK~~,SAAS;IAC9F,OAAOF;AACT,GACA,yDAAyD"}
1	+ {"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\nexport const dialogContentClassNames = {\n root: 'fui-DialogContent'\n};\n/*\n Styles for the root slot\n /\nconst useStyles = /#__PURE__/__resetStyles(\"r1v5zwsm\", null, {\n r: [\".r1v5zwsm{padding:var(--strokeWidthThick);margin:calc(var(--strokeWidthThick) -1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);overflow-y:auto;min-height:32px;box-sizing:border-box;grid-row-start:2;grid-row-end:2;grid-column-start:1;grid-column-end:4;}\"],\n s: [\"@media screen and (max-height: 359px){.r1v5zwsm{overflow-y:unset;}}\"]\n});\n/*\n Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogContentStyles.styles.js.map"],"names":["dialogContentClassNames","useDialogContentStyles_unstable","root","useStyles","__resetStyles","r","s","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,uBAAuB;eAAvBA;;IAaAC,+BAA+B;eAA/BA;;;uBAhB+B;AAGrC,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAC7DC,GAAG;QAAC;KAAiW;IACrWC,GAAG;QAAC;KAAsE;AAC5E;AAIO,MAAML,kCAAkCM,CAAAA;IAC7C,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAY,EAACV,wBAAwBE,IAAI,EAAEM,QAAQD,MAAML,IAAI,CAACO,SAAS;IAC9F,OAAOF;AACT,GACA,yDAAyD"}

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

@@ -24,24 +24,26 @@ const dialogSurfaceClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rhhzfde", "r1n1tr5u", {
+ */ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rhzkxut", "r1dhpx9", {
     r: [
-        ".rhhzfde{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
-        ".rhhzfde:focus{outline-style:none;}",
-        ".rhhzfde:focus-visible{outline-style:none;}",
-        ".rhhzfde[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
-        ".rhhzfde[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
-        ".r1n1tr5u{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
-        ".r1n1tr5u:focus{outline-style:none;}",
-        ".r1n1tr5u:focus-visible{outline-style:none;}",
-        ".r1n1tr5u[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
-        ".r1n1tr5u[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+        ".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
+        ".rhzkxut:focus{outline-style:none;}",
+        ".rhzkxut:focus-visible{outline-style:none;}",
+        ".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".rhzkxut[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
+        ".r1dhpx9:focus{outline-style:none;}",
+        ".r1dhpx9:focus-visible{outline-style:none;}",
+        ".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".r1dhpx9[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
     ],
     s: [
-        "@media (forced-colors: active){.rhhzfde[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
-        "@media screen and (max-width: 480px){.rhhzfde{max-width:100vw;}}",
-        "@media (forced-colors: active){.r1n1tr5u[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}",
-        "@media screen and (max-width: 480px){.r1n1tr5u{max-width:100vw;}}"
+        "@media (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}",
+        "@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}",
+        "@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}",
+        "@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}",
+        "@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"
     ]
 });
 const rootVisible = {
@@ -108,9 +110,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
  */ const backdropVisible = {
     opacity: 1
 };
-const useBackdropBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("raidwwn", "r17vltcu", [
-    ".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}",
-    ".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}"
+const useBackdropBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r19ug08i", null, [
+    ".r19ug08i{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}"
 ]);
 const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
     nestedDialogBackdrop: {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 /\nconst useRootBaseStyle = /#__PURE__/__resetStyles(\"rhhzfde\", \"r1n1tr5u\", {\n r: [\".rhhzfde{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".rhhzfde:focus{outline-style:none;}\", \".rhhzfde:focus-visible{outline-style:none;}\", \".rhhzfde[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rhhzfde[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1n1tr5u{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1n1tr5u:focus{outline-style:none;}\", \".r1n1tr5u:focus-visible{outline-style:none;}\", \".r1n1tr5u[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1n1tr5u[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.rhhzfde[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media screen and (max-width: 480px){.rhhzfde{max-width:100vw;}}\", \"@media (forced-colors: active){.r1n1tr5u[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\", \"@media screen and (max-width: 480px){.r1n1tr5u{max-width:100vw;}}\"]\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = /#__PURE__/__styles({\n animated: {\n abs64n: \"fk73vx1\",\n E5pizo: \"f1yzz98r\",\n Bz10aip: \"f15ofi6c\"\n },\n \"static\": {\n E5pizo: \"f10nrhrw\"\n },\n unmounted: {},\n entering: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f18ad807\",\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}\", \".f15ofi6c{transform:scale(0.85) translateZ(0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\", \".fc397y7{transition-duration:var(--durationGentle);}\", \".f1b86uth{transition-property:opacity,transform,box-shadow;}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/*\n Styles for the backdrop slot\n /\nconst backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = /#__PURE__/__resetStyles(\"raidwwn\", \"r17vltcu\", [\".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\", \".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /#__PURE__/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n },\n unmounted: {},\n entering: {\n abs64n: \"f5p0z4x\"\n },\n entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const {\n isNestedDialog,\n root,\n backdrop,\n transitionStatus\n } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","rootVisible","boxShadow","tokens","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","__styles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses","static"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA0FAC,+BAA+B;eAA/BA;;;uBA9FqD;4BAC3C;AAGhB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IACzEC,GAAG;QAAC;QAA8kC;QAAuC;QAA+C;QAAgK;QAAkvB;QAA+kC;QAAwC;QAAgD;QAAiK;KAAkvB;IACpnIC,GAAG;QAAC;QAA+L;QAAoE;QAAgM;KAAoE;AAC7gB;AACA,MAAMC,cAAc;IAClBC,WAAWC,kBAAM,CAACC,QAAQ;IAC1BC,WAAW;IACXC,SAAS;AACX;AACA,MAAMC,oBAAoB;IACxBC,oBAAoBL,kBAAM,CAACM,cAAc;IACzCC,oBAAoB;IACpB,+DAA+D;IAC/DC,0BAA0BR,kBAAM,CAACS,kBAAkB;AACrD;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACA,UAAU;QACRD,QAAQ;IACV;IACAE,WAAW,CAAC;IACZC,UAAU;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTN,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAQ,SAAS;QACPP,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAS,MAAM;QACJR,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAU,SAAS;QACPL,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAwB;QAA6D;QAAmD;QAA0C;QAAwD;QAAgE;QAAoE;QAAgD;QAAwB;KAAmE;AAC/f;AACA;;CAEC,GACD,MAAMC,kBAAkB;IACtBvB,SAAS;AACX;AACA,MAAMwB,uBAAuB,WAAW,GAAEhC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAyP;CAAyP;AAClkB,MAAMiC,oBAAoB,WAAW,GAAEjB,IAAAA,eAAQ,EAAC;IAC9CkB,sBAAsB;QACpBC,QAAQ;IACV;IACAd,WAAW,CAAC;IACZC,UAAU;QACRJ,QAAQ;IACV;IACAQ,SAAS;QACPR,QAAQ;IACV;IACAS,MAAM;QACJT,QAAQ;IACV;IACAU,SAAS;QACPH,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMlC,kCAAkCwC,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACdxC,IAAI,EACJC,QAAQ,EACRwC,gBAAgB,EACjB,GAAGF;IACJ,MAAMG,gBAAgBxC;IACtB,MAAMyC,aAAazB;IACnB,MAAM0B,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBpC,KAAK8C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBE,IAAI,EAAE0C,eAAeD,mBAAmBE,WAAWvB,QAAQ,GAAGuB,WAAWK,MAAM,EAAEP,oBAAoBE,UAAU,CAACF,iBAAiB,EAAEzC,KAAK8C,SAAS;IACvM,IAAI7C,UAAU;QACZA,SAAS6C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBG,QAAQ,EAAE2C,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEI,oBAAoBI,cAAc,CAACJ,iBAAiB,EAAExC,SAAS6C,SAAS;IACxN;IACA,OAAOP;AACT,GACA,yDAAyD"}
1	+ {"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 /\nconst useRootBaseStyle = /#__PURE__/__resetStyles(\"rhzkxut\", \"r1dhpx9\", {\n r: [\".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".rhzkxut:focus{outline-style:none;}\", \".rhzkxut:focus-visible{outline-style:none;}\", \".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rhzkxut[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1dhpx9:focus{outline-style:none;}\", \".r1dhpx9:focus-visible{outline-style:none;}\", \".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1dhpx9[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}\", \"@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}\", \"@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\", \"@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}\", \"@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}\"]\n});\nconst rootVisible = {\n boxShadow: tokens.shadow64,\n transform: 'scale(1) translateZ(0)',\n opacity: 1\n};\nconst rootWhenAnimating = {\n transitionDuration: tokens.durationGentle,\n transitionProperty: 'opacity, transform, box-shadow',\n // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = /#__PURE__/__styles({\n animated: {\n abs64n: \"fk73vx1\",\n E5pizo: \"f1yzz98r\",\n Bz10aip: \"f15ofi6c\"\n },\n \"static\": {\n E5pizo: \"f10nrhrw\"\n },\n unmounted: {},\n entering: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f18ad807\",\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n entered: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n idle: {\n E5pizo: \"f10nrhrw\",\n Bz10aip: \"f186d0ee\",\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n B3o57yi: \"fc397y7\",\n Bmy1vo4: \"f1b86uth\",\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".fk73vx1{opacity:0;}\", \".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}\", \".f15ofi6c{transform:scale(0.85) translateZ(0);}\", \".f10nrhrw{box-shadow:var(--shadow64);}\", \".fc397y7{transition-duration:var(--durationGentle);}\", \".f1b86uth{transition-property:opacity,transform,box-shadow;}\", \".f18ad807{transition-timing-function:var(--curveDecelerateMid);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/*\n Styles for the backdrop slot\n /\nconst backdropVisible = {\n opacity: 1\n};\nconst useBackdropBaseStyle = /#__PURE__/__resetStyles(\"r19ug08i\", null, [\".r19ug08i{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /#__PURE__/__styles({\n nestedDialogBackdrop: {\n De3pzq: \"f1c21dwh\"\n },\n unmounted: {},\n entering: {\n abs64n: \"f5p0z4x\"\n },\n entered: {\n abs64n: \"f5p0z4x\"\n },\n idle: {\n abs64n: \"f5p0z4x\"\n },\n exiting: {\n Bkqvd7p: \"f1mfizis\"\n },\n exited: {}\n}, {\n d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/\n Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n const {\n isNestedDialog,\n root,\n backdrop,\n transitionStatus\n } = state;\n const rootBaseStyle = useRootBaseStyle();\n const rootStyles = useRootStyles();\n const backdropBaseStyle = useBackdropBaseStyle();\n const backdropStyles = useBackdropStyles();\n root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n if (backdrop) {\n backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n }\n return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","rootVisible","boxShadow","tokens","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","__styles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses","static"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IA0FAC,+BAA+B;eAA/BA;;;uBA9FyC;4BAC/B;AAGhB,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,WAAW;IACxEC,GAAG;QAAC;QAA6c;QAAuC;QAA+C;QAAgK;QAAkvB;QAA6c;QAAuC;QAA+C;QAAgK;KAAivB;IAC72FC,GAAG;QAAC;QAA+L;QAAoE;QAAwK;QAA+L;QAAoE;KAAqK;AACz1B;AACA,MAAMC,cAAc;IAClBC,WAAWC,kBAAM,CAACC,QAAQ;IAC1BC,WAAW;IACXC,SAAS;AACX;AACA,MAAMC,oBAAoB;IACxBC,oBAAoBL,kBAAM,CAACM,cAAc;IACzCC,oBAAoB;IACpB,+DAA+D;IAC/DC,0BAA0BR,kBAAM,CAACS,kBAAkB;AACrD;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACA,UAAU;QACRD,QAAQ;IACV;IACAE,WAAW,CAAC;IACZC,UAAU;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTN,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAQ,SAAS;QACPP,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAS,MAAM;QACJR,QAAQ;QACRC,SAAS;QACTF,QAAQ;IACV;IACAU,SAAS;QACPL,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAwB;QAA6D;QAAmD;QAA0C;QAAwD;QAAgE;QAAoE;QAAgD;QAAwB;KAAmE;AAC/f;AACA;;CAEC,GACD,MAAMC,kBAAkB;IACtBvB,SAAS;AACX;AACA,MAAMwB,uBAAuB,WAAW,GAAEhC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA6N;AACxS,MAAMiC,oBAAoB,WAAW,GAAEjB,IAAAA,eAAQ,EAAC;IAC9CkB,sBAAsB;QACpBC,QAAQ;IACV;IACAd,WAAW,CAAC;IACZC,UAAU;QACRJ,QAAQ;IACV;IACAQ,SAAS;QACPR,QAAQ;IACV;IACAS,MAAM;QACJT,QAAQ;IACV;IACAU,SAAS;QACPH,SAAS;IACX;IACAI,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMlC,kCAAkCwC,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACdxC,IAAI,EACJC,QAAQ,EACRwC,gBAAgB,EACjB,GAAGF;IACJ,MAAMG,gBAAgBxC;IACtB,MAAMyC,aAAazB;IACnB,MAAM0B,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBpC,KAAK8C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBE,IAAI,EAAE0C,eAAeD,mBAAmBE,WAAWvB,QAAQ,GAAGuB,WAAWK,MAAM,EAAEP,oBAAoBE,UAAU,CAACF,iBAAiB,EAAEzC,KAAK8C,SAAS;IACvM,IAAI7C,UAAU;QACZA,SAAS6C,SAAS,GAAGC,IAAAA,mBAAY,EAACjD,wBAAwBG,QAAQ,EAAE2C,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEI,oBAAoBI,cAAc,CAACJ,iBAAiB,EAAExC,SAAS6C,SAAS;IACxN;IACA,OAAOP;AACT,GACA,yDAAyD"}

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

@@ -26,9 +26,8 @@ const dialogTitleClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rztv7rx", "rt0yqbx", [
-    ".rztv7rx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}",
-    ".rt0yqbx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-left:0;margin-bottom:0;margin-right:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}"
+ */ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rxjm636", null, [
+    ".rxjm636{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}"
 ]);
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     rootWithoutAction: {
@@ -44,22 +43,22 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
  */ const useActionResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r13kcrze", null, [
     ".r13kcrze{grid-row-start:1;grid-row-end:1;grid-column-start:3;justify-self:end;align-self:start;}"
 ]);
-const useDialogTitleInternalStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r51tj", "rgre5d", {
+const useDialogTitleInternalStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r8i4vpr", "r15ezg2h", {
     r: [
-        ".r51tj{overflow-x:visible;overflow-y:visible;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}",
-        ".r51tj:focus{outline-style:none;}",
-        ".r51tj:focus-visible{outline-style:none;}",
-        ".r51tj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
-        ".r51tj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
-        ".rgre5d{overflow-x:visible;overflow-y:visible;padding-top:0;padding-left:0;padding-bottom:0;padding-right:0;border-top-style:none;border-left-style:none;border-bottom-style:none;border-right-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}",
-        ".rgre5d:focus{outline-style:none;}",
-        ".rgre5d:focus-visible{outline-style:none;}",
-        ".rgre5d[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
-        ".rgre5d[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+        ".r8i4vpr{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}",
+        ".r8i4vpr:focus{outline-style:none;}",
+        ".r8i4vpr:focus-visible{outline-style:none;}",
+        ".r8i4vpr[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r8i4vpr[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".r15ezg2h{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}",
+        ".r15ezg2h:focus{outline-style:none;}",
+        ".r15ezg2h:focus-visible{outline-style:none;}",
+        ".r15ezg2h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".r15ezg2h[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
     ],
     s: [
-        "@media (forced-colors: active){.r51tj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
-        "@media (forced-colors: active){.rgre5d[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
+        "@media (forced-colors: active){.r8i4vpr[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media (forced-colors: active){.r15ezg2h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
     ]
 });
 const useDialogTitleStyles_unstable = (state)=>{

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, ~~shorthands~~ } 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 /\nconst useRootResetStyles = /#__PURE__/__resetStyles(\"~~rztv7rx~~\", ~~\"rt0yqbx\"~~, [\".~~rztv7rx~~{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin~~-top~~:0;~~margin-right:0;margin-bottom:0;margin-left:0;~~grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}\", \".rt0yqbx{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin-top:0;margin-left:0;margin-bottom:0;margin-right:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}\"]);\nconst useStyles = /#__PURE__/__styles({\n rootWithoutAction: {\n Bw0ie65: \"fsyjsko\"\n }\n}, {\n d: [\".fsyjsko{grid-column-end:4;}\"]\n});\n/\n Styles for the action slot\n /\nconst useActionResetStyles = /#__PURE__/__resetStyles(\"r13kcrze\", null, [\".r13kcrze{grid-row-start:1;grid-row-end:1;grid-column-start:3;justify-self:end;align-self:start;}\"]);\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n /\nexport const useDialogTitleInternalStyles = /#__PURE__/__resetStyles(\"~~r51tj~~\", \"~~rgre5d~~\", {\n r: [\".~~r51tj~~{overflow-x:visible;~~overflow-y:visible;~~padding~~-top~~:0;~~padding-right:0;padding-bottom:0;padding-left:0;~~border-~~top-~~style:none;~~border-right-style:none;border-bottom-style:none;border-left-style:none;~~position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}\", \".~~r51tj~~:focus{outline-style:none;}\", \".~~r51tj~~:focus-visible{outline-style:none;}\", \".~~r51tj~~[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".~~r51tj~~[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".~~rgre5d~~{overflow-x:visible;~~overflow-y:visible;~~padding~~-top~~:0;~~padding-left:0;padding-bottom:0;padding-right:0;~~border-~~top-~~style:none;~~border-left-style:none;border-bottom-style:none;border-right-style:none;~~position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}\", \".~~rgre5d~~:focus{outline-style:none;}\", \".~~rgre5d~~:focus-visible{outline-style:none;}\", \".~~rgre5d~~[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".~~rgre5d~~[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.~~r51tj~~[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.~~rgre5d~~[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\n/*\n Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = state => {\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//# sourceMappingURL=useDialogTitleStyles.styles.js.map"],"names":["dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","root","action","useRootResetStyles","__resetStyles","useStyles","__styles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","r","s","state","rootResetStyles","actionResetStyles","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAuBAC,4BAA4B;eAA5BA;;IAOAC,6BAA6B;eAA7BA;;;~~uBAjCqD~~;~~AAG3D~~,MAAMF,wBAAwB;IACnCG,MAAM;IACNC,QAAQ;AACV;AACA;;CAEC,GACD,MAAMC,qBAAqB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,~~WAAW~~;IAAC;~~IAA4R~~;~~CAA2R;AACpoB~~,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,mBAAmB;QACjBC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAA+B;AACrC;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEN,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAoG;AAKxK,MAAML,+BAA+B,WAAW,GAAEK,IAAAA,oBAAa,EAAC,~~SAAS~~,~~UAAU~~;~~IACxFO~~,GAAG;QAAC;~~QAA4Y~~;~~QAAqC~~;~~QAA6C~~;~~QAA8J~~;~~QAAgvB~~;~~QAA6Y~~;~~QAAsC~~;~~QAA8C~~;~~QAA+J~~;~~KAAgvB~~;~~IAChuFC~~,GAAG;QAAC;~~QAA6L~~;~~KAA6L~~;~~AAChY~~;AAIO,MAAMZ,gCAAgCa,CAAAA;IAC3C,MAAMC,kBAAkBX;IACxB,MAAMY,oBAAoBL;IAC1B,MAAMM,SAASX;IACfQ,MAAMZ,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,sBAAsBG,IAAI,EAAEa,iBAAiB,CAACD,MAAMX,MAAM,IAAIc,OAAOT,iBAAiB,EAAEM,MAAMZ,IAAI,CAACgB,SAAS;IAChJ,IAAIJ,MAAMX,MAAM,EAAE;QAChBW,MAAMX,MAAM,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,sBAAsBI,MAAM,EAAEa,mBAAmBF,MAAMX,MAAM,CAACe,SAAS;IAC/G;IACA,OAAOJ;AACT,GACA,uDAAuD"}
1	+ {"version":3,"sources":["useDialogTitleStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 /\nconst useRootResetStyles = /#__PURE__/__resetStyles(\"rxjm636\", null, [\".rxjm636{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase500);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase500);margin:0;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:3;}\"]);\nconst useStyles = /#__PURE__/__styles({\n rootWithoutAction: {\n Bw0ie65: \"fsyjsko\"\n }\n}, {\n d: [\".fsyjsko{grid-column-end:4;}\"]\n});\n/\n Styles for the action slot\n /\nconst useActionResetStyles = /#__PURE__/__resetStyles(\"r13kcrze\", null, [\".r13kcrze{grid-row-start:1;grid-row-end:1;grid-column-start:3;justify-self:end;align-self:start;}\"]);\n/\n Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n /\nexport const useDialogTitleInternalStyles = /#__PURE__/__resetStyles(\"r8i4vpr\", \"r15ezg2h\", {\n r: [\".r8i4vpr{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}\", \".r8i4vpr:focus{outline-style:none;}\", \".r8i4vpr:focus-visible{outline-style:none;}\", \".r8i4vpr[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r8i4vpr[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r15ezg2h{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}\", \".r15ezg2h:focus{outline-style:none;}\", \".r15ezg2h:focus-visible{outline-style:none;}\", \".r15ezg2h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r15ezg2h[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n s: [\"@media (forced-colors: active){.r8i4vpr[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}\", \"@media (forced-colors: active){.r15ezg2h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}\"]\n});\n/*\n Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = state => {\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//# sourceMappingURL=useDialogTitleStyles.styles.js.map"],"names":["dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","root","action","useRootResetStyles","__resetStyles","useStyles","__styles","rootWithoutAction","Bw0ie65","d","useActionResetStyles","r","s","state","rootResetStyles","actionResetStyles","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,qBAAqB;eAArBA;;IAuBAC,4BAA4B;eAA5BA;;IAOAC,6BAA6B;eAA7BA;;;uBAjCyC;AAG/C,MAAMF,wBAAwB;IACnCG,MAAM;IACNC,QAAQ;AACV;AACA;;CAEC,GACD,MAAMC,qBAAqB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0O;AAClT,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,mBAAmB;QACjBC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAA+B;AACrC;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEN,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAAoG;AAKxK,MAAML,+BAA+B,WAAW,GAAEK,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAC5FO,GAAG;QAAC;QAAyP;QAAuC;QAA+C;QAAgK;QAAkvB;QAA0P;QAAwC;QAAgD;QAAiK;KAAkvB;IAC18EC,GAAG;QAAC;QAA+L;KAA+L;AACpY;AAIO,MAAMZ,gCAAgCa,CAAAA;IAC3C,MAAMC,kBAAkBX;IACxB,MAAMY,oBAAoBL;IAC1B,MAAMM,SAASX;IACfQ,MAAMZ,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,sBAAsBG,IAAI,EAAEa,iBAAiB,CAACD,MAAMX,MAAM,IAAIc,OAAOT,iBAAiB,EAAEM,MAAMZ,IAAI,CAACgB,SAAS;IAChJ,IAAIJ,MAAMX,MAAM,EAAE;QAChBW,MAAMX,MAAM,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAACpB,sBAAsBI,MAAM,EAAEa,mBAAmBF,MAAMX,MAAM,CAACe,SAAS;IAC/G;IACA,OAAOJ;AACT,GACA,uDAAuD"}

package/lib-commonjs/contexts/constants.js CHANGED Viewed

@@ -12,6 +12,9 @@ _export(exports, {
     MEDIA_QUERY_BREAKPOINT_SELECTOR: function() {
         return MEDIA_QUERY_BREAKPOINT_SELECTOR;
     },
+    MEDIA_QUERY_SHORT_SCREEN: function() {
+        return MEDIA_QUERY_SHORT_SCREEN;
+    },
     SURFACE_PADDING: function() {
         return SURFACE_PADDING;
     },
@@ -20,9 +23,14 @@ _export(exports, {
     },
     SURFACE_BORDER_WIDTH: function() {
         return SURFACE_BORDER_WIDTH;
+    },
+    FULLSCREEN_DIALOG_SCROLLBAR_OFFSET: function() {
+        return FULLSCREEN_DIALOG_SCROLLBAR_OFFSET;
     }
 });
 const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';
+const MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';
 const SURFACE_PADDING = '24px';
 const DIALOG_GAP = '8px';
 const SURFACE_BORDER_WIDTH = '1px';
+const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';

package/lib-commonjs/contexts/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["constants.js"],"sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n"],"names":["MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","DIALOG_GAP","SURFACE_BORDER_WIDTH"],"mappings":";;;;;;;;;;;IAAaA,+BAA+B;eAA/BA;;IACAC,eAAe;eAAfA;;IACAC,UAAU;eAAVA;;IACAC,oBAAoB;eAApBA;;;~~AAHN~~,~~MAAMH~~,kCAAkC;AACxC,MAAMC,kBAAkB;AACxB,MAAMC,aAAa;AACnB,MAAMC,uBAAuB"}
1	+ {"version":3,"sources":["constants.js"],"sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\nexport const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px';\n"],"names":["MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","DIALOG_GAP","SURFACE_BORDER_WIDTH","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":";;;;;;;;;;;IAAaA,+BAA+B;eAA/BA;;IACAC,wBAAwB;eAAxBA;;IACAC,eAAe;eAAfA;;IACAC,UAAU;eAAVA;;IACAC,oBAAoB;eAApBA;;IACAC,kCAAkC;eAAlCA;;;AALN,MAAML,kCAAkC;AACxC,MAAMC,2BAA2B;AACjC,MAAMC,kBAAkB;AACxB,MAAMC,aAAa;AACnB,MAAMC,uBAAuB;AAC7B,MAAMC,qCAAqC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.9.15",
+  "version": "9.10.0",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,17 +36,17 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-utilities": "^9.18.5",
-    "@fluentui/react-jsx-runtime": "^9.0.34",
+    "@fluentui/react-utilities": "^9.18.6",
+    "@fluentui/react-jsx-runtime": "^9.0.35",
     "react-transition-group": "^4.4.1",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.56",
-    "@fluentui/react-shared-contexts": "^9.15.2",
-    "@fluentui/react-aria": "^9.10.2",
-    "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-tabster": "^9.19.5",
+    "@fluentui/react-context-selector": "^9.1.57",
+    "@fluentui/react-shared-contexts": "^9.16.0",
+    "@fluentui/react-aria": "^9.10.4",
+    "@fluentui/react-icons": "^2.0.235",
+    "@fluentui/react-tabster": "^9.20.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-portal": "^9.4.18",
+    "@fluentui/react-portal": "^9.4.20",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },