@fluentui/react-dialog 9.7.1 → 9.7.4

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 (45) hide show
  1. package/CHANGELOG.json +190 -1
  2. package/CHANGELOG.md +53 -2
  3. package/dist/index.d.ts +1 -1
  4. package/lib/components/Dialog/Dialog.types.js.map +1 -1
  5. package/lib/components/Dialog/useDialog.js +1 -2
  6. package/lib/components/Dialog/useDialog.js.map +1 -1
  7. package/lib/components/DialogActions/useDialogActionsStyles.styles.js +12 -19
  8. package/lib/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
  9. package/lib/components/DialogBody/useDialogBodyStyles.styles.js +7 -25
  10. package/lib/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
  11. package/lib/components/DialogContent/useDialogContentStyles.styles.js +3 -27
  12. package/lib/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
  13. package/lib/components/DialogSurface/useDialogSurface.js +2 -2
  14. package/lib/components/DialogSurface/useDialogSurface.js.map +1 -1
  15. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js +23 -94
  16. package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  17. package/lib/components/DialogTitle/useDialogTitle.js +1 -1
  18. package/lib/components/DialogTitle/useDialogTitle.js.map +1 -1
  19. package/lib/components/DialogTitle/useDialogTitleStyles.styles.js +12 -83
  20. package/lib/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
  21. package/lib/components/DialogTrigger/useDialogTrigger.js +5 -6
  22. package/lib/components/DialogTrigger/useDialogTrigger.js.map +1 -1
  23. package/lib/contexts/dialogSurfaceContext.js +4 -2
  24. package/lib/contexts/dialogSurfaceContext.js.map +1 -1
  25. package/lib-commonjs/components/Dialog/useDialog.js +1 -2
  26. package/lib-commonjs/components/Dialog/useDialog.js.map +1 -1
  27. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js +12 -31
  28. package/lib-commonjs/components/DialogActions/useDialogActionsStyles.styles.js.map +1 -1
  29. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js +8 -42
  30. package/lib-commonjs/components/DialogBody/useDialogBodyStyles.styles.js.map +1 -1
  31. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js +5 -58
  32. package/lib-commonjs/components/DialogContent/useDialogContentStyles.styles.js.map +1 -1
  33. package/lib-commonjs/components/DialogSurface/useDialogSurface.js +2 -2
  34. package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map +1 -1
  35. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js +40 -273
  36. package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map +1 -1
  37. package/lib-commonjs/components/DialogTitle/useDialogTitle.js +1 -1
  38. package/lib-commonjs/components/DialogTitle/useDialogTitle.js.map +1 -1
  39. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js +27 -211
  40. package/lib-commonjs/components/DialogTitle/useDialogTitleStyles.styles.js.map +1 -1
  41. package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js +5 -6
  42. package/lib-commonjs/components/DialogTrigger/useDialogTrigger.js.map +1 -1
  43. package/lib-commonjs/contexts/dialogSurfaceContext.js +4 -2
  44. package/lib-commonjs/contexts/dialogSurfaceContext.js.map +1 -1
  45. package/package.json +11 -11
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogActionsStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n root: 'fui-DialogActions'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n Bqenvij: \"f3052tw\",\n B7ck84d: \"f1ewtqcl\",\n mc9l5x: \"f22iagw\",\n Ijaq50: \"f1cztu7b\",\n nk6f5a: \"fcu02xx\",\n i8kkvl: \"f4px1ci\",\n Belr9w4: \"fn67r4l\",\n Bmdcpmo: \"f6glcwc\",\n th9wkt: \"f1e3st1r\"\n },\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: [\".f3052tw{height:fit-content;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1cztu7b{grid-row-start:3;}\", \".fcu02xx{grid-row-end:3;}\", \".f4px1ci{column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".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){.f6glcwc{flex-direction:column;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@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 styles = useStyles();\n state.root.className = mergeClasses(dialogActionsClassNames.root, styles.root, 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","useStyles","__styles","Bqenvij","B7ck84d","mc9l5x","Ijaq50","nk6f5a","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Br312pm","Bw0ie65","B6n781s","Bv5d0be","v4ugfu","gridPositionStart","Bojbm9c","fluidStart","fluidEnd","d","m","state","styles","className","mergeClasses","position","fluid"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IA0DAC,+BAA+B;eAA/BA;;;uBA5DsC;AAE5C,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAC,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;QAAiC;QAAqC;QAA2B;QAAgC;QAA6B;QAA6B;QAA0B;QAAgC;QAAkC;QAAgC;QAAiC;QAAkC;KAAgC;IAC9ZC,GAAG;QAAC;YAAC;YAA0E;gBAC7EA,GAAG;YACL;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG;YACL;SAAE;QAAE;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,MAAMzB,kCAAkC0B,CAAAA;IAC7C,MAAMC,SAASzB;IACfwB,MAAMzB,IAAI,CAAC2B,SAAS,GAAGC,IAAAA,mBAAY,EAAC9B,wBAAwBE,IAAI,EAAE0B,OAAO1B,IAAI,EAAEyB,MAAMI,QAAQ,KAAK,WAAWH,OAAOP,iBAAiB,EAAEM,MAAMI,QAAQ,KAAK,SAASH,OAAOd,eAAe,EAAEa,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWH,OAAOL,UAAU,EAAEI,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASH,OAAOJ,QAAQ,EAAEG,MAAMzB,IAAI,CAAC2B,SAAS;IAC3U,OAAOF;AACT,GACA,yDAAyD"}
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"}
@@ -22,51 +22,17 @@ const dialogBodyClassNames = {
22
22
  };
23
23
  /**
24
24
  * Styles for the root slot
25
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
26
- root: {
27
- mc9l5x: "f13qh94s",
28
- fshzfu: "f120kxnn",
29
- Bxyxcbc: "flnwrvu",
30
- B7ck84d: "f1ewtqcl",
31
- B68tc82: "f1ln0qer",
32
- Bmxbyg5: "fa2wlxz",
33
- i8kkvl: "f4px1ci",
34
- Belr9w4: "fn67r4l",
35
- wkccdc: "f1x46k84",
36
- Budl1dq: "fjj47a5",
37
- B5xtmjs: "ff54dml",
38
- Bqu9lor: "f1t97isy"
39
- }
40
- }, {
41
- d: [
42
- ".f13qh94s{display:grid;}",
43
- ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}",
44
- ".flnwrvu{max-height:calc(100vh - 2 * 24px);}",
45
- ".f1ewtqcl{box-sizing:border-box;}",
46
- ".f1ln0qer{overflow-x:unset;}",
47
- ".fa2wlxz{overflow-y:unset;}",
48
- ".f4px1ci{column-gap:8px;}",
49
- ".fn67r4l{row-gap:8px;}",
50
- ".f1x46k84{grid-template-rows:auto 1fr;}",
51
- ".fjj47a5{grid-template-columns:1fr 1fr auto;}"
25
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1evyu59", null, {
26
+ r: [
27
+ ".r1evyu59{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;}",
28
+ ".r1evyu59::backdrop{background-color:rgba(0, 0, 0, 0.4);}"
52
29
  ],
53
- m: [
54
- [
55
- "@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}",
56
- {
57
- m: "screen and (max-width: 480px)"
58
- }
59
- ],
60
- [
61
- "@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}",
62
- {
63
- m: "screen and (max-width: 480px)"
64
- }
65
- ]
30
+ s: [
31
+ "@media screen and (max-width: 480px){.r1evyu59{max-width:100vw;grid-template-rows:auto 1fr auto;}}"
66
32
  ]
67
33
  });
68
34
  const useDialogBodyStyles_unstable = (state)=>{
69
- const styles = useStyles();
70
- state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, styles.root, state.root.className);
35
+ const resetStyles = useResetStyles();
36
+ state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
71
37
  return state;
72
38
  }; //# sourceMappingURL=useDialogBodyStyles.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogBodyStyles.styles.js"],"sourcesContent":["import { __styles, 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 useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f13qh94s\",\n fshzfu: \"f120kxnn\",\n Bxyxcbc: \"flnwrvu\",\n B7ck84d: \"f1ewtqcl\",\n B68tc82: \"f1ln0qer\",\n Bmxbyg5: \"fa2wlxz\",\n i8kkvl: \"f4px1ci\",\n Belr9w4: \"fn67r4l\",\n wkccdc: \"f1x46k84\",\n Budl1dq: \"fjj47a5\",\n B5xtmjs: \"ff54dml\",\n Bqu9lor: \"f1t97isy\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}\", \".flnwrvu{max-height:calc(100vh - 2 * 24px);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f1ln0qer{overflow-x:unset;}\", \".fa2wlxz{overflow-y:unset;}\", \".f4px1ci{column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1x46k84{grid-template-rows:auto 1fr;}\", \".fjj47a5{grid-template-columns:1fr 1fr auto;}\"],\n m: [[\"@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}\", {\n m: \"screen and (max-width: 480px)\"\n }], [\"@media screen and (max-width: 480px){.f1t97isy{grid-template-rows:auto 1fr auto;}}\", {\n m: \"screen and (max-width: 480px)\"\n }]]\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n const styles = useStyles();\n state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useStyles","__styles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","wkccdc","Budl1dq","B5xtmjs","Bqu9lor","d","m","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAgCAC,4BAA4B;eAA5BA;;;uBAlCsC;AAE5C,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA4B;QAA6D;QAAgD;QAAqC;QAAgC;QAA+B;QAA6B;QAA0B;QAA2C;KAAgD;IACnYC,GAAG;QAAC;YAAC;YAAoE;gBACvEA,GAAG;YACL;SAAE;QAAE;YAAC;YAAsF;gBACzFA,GAAG;YACL;SAAE;KAAC;AACL;AAIO,MAAMjB,+BAA+BkB,CAAAA;IAC1C,MAAMC,SAASjB;IACfgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,qBAAqBE,IAAI,EAAEkB,OAAOlB,IAAI,EAAEiB,MAAMjB,IAAI,CAACmB,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}
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';\nimport { backdropStyles } from '../DialogSurface/useDialogSurfaceStyles.styles';\nexport const dialogBodyClassNames = {\n root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */\nconst useResetStyles = /*#__PURE__*/__resetStyles(\"r1evyu59\", null, {\n r: [\".r1evyu59{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;}\", \".r1evyu59::backdrop{background-color:rgba(0, 0, 0, 0.4);}\"],\n s: [\"@media screen and (max-width: 480px){.r1evyu59{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":";;;;;;;;;;;IAGaA,oBAAoB;eAApBA;;IAaAC,4BAA4B;eAA5BA;;;uBAhB2C;AAGjD,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAClEC,GAAG;QAAC;QAAgN;KAA4D;IAChRC,GAAG;QAAC;KAAqG;AAC3G;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"}
@@ -22,65 +22,12 @@ const dialogContentClassNames = {
22
22
  };
23
23
  /**
24
24
  * Styles for the root slot
25
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
26
- root: {
27
- Bmxbyg5: "f5zp4f",
28
- sshi5w: "f1nxs5xn",
29
- B7ck84d: "f1ewtqcl",
30
- Ijaq50: "faunodf",
31
- nk6f5a: "f88nxoq",
32
- Br312pm: "fwpfdsa",
33
- Bw0ie65: "fsyjsko",
34
- z8tnut: "fr4fn7s",
35
- z189sj: [
36
- "f171n1a0",
37
- "f1jwbs5a"
38
- ],
39
- Byoj8tv: "f1ean75l",
40
- uwmqm3: [
41
- "f1jwbs5a",
42
- "f171n1a0"
43
- ],
44
- B6of3ja: "fxlnl9e",
45
- t21cq0: [
46
- "ffs23cn",
47
- "f1v5tmjd"
48
- ],
49
- jrapky: "f2uu7rc",
50
- Frg6f3: [
51
- "f1v5tmjd",
52
- "ffs23cn"
53
- ],
54
- Bahqtrf: "fk6fouc",
55
- Be2twd7: "fkhj508",
56
- Bhrd7zp: "figsok6",
57
- Bg96gwp: "f1i3iumi"
58
- }
59
- }, {
60
- d: [
61
- ".f5zp4f{overflow-y:auto;}",
62
- ".f1nxs5xn{min-height:32px;}",
63
- ".f1ewtqcl{box-sizing:border-box;}",
64
- ".faunodf{grid-row-start:2;}",
65
- ".f88nxoq{grid-row-end:2;}",
66
- ".fwpfdsa{grid-column-start:1;}",
67
- ".fsyjsko{grid-column-end:4;}",
68
- ".fr4fn7s{padding-top:var(--strokeWidthThick);}",
69
- ".f171n1a0{padding-right:var(--strokeWidthThick);}",
70
- ".f1jwbs5a{padding-left:var(--strokeWidthThick);}",
71
- ".f1ean75l{padding-bottom:var(--strokeWidthThick);}",
72
- ".fxlnl9e{margin-top:calc(var(--strokeWidthThick) * -1);}",
73
- ".ffs23cn{margin-right:calc(var(--strokeWidthThick) * -1);}",
74
- ".f1v5tmjd{margin-left:calc(var(--strokeWidthThick) * -1);}",
75
- ".f2uu7rc{margin-bottom:calc(var(--strokeWidthThick) * -1);}",
76
- ".fk6fouc{font-family:var(--fontFamilyBase);}",
77
- ".fkhj508{font-size:var(--fontSizeBase300);}",
78
- ".figsok6{font-weight:var(--fontWeightRegular);}",
79
- ".f1i3iumi{line-height:var(--lineHeightBase300);}"
80
- ]
81
- });
25
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1e0mpcm", "r1equu0b", [
26
+ ".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;}",
27
+ ".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;}"
28
+ ]);
82
29
  const useDialogContentStyles_unstable = (state)=>{
83
30
  const styles = useStyles();
84
- state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles.root, state.root.className);
31
+ state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
85
32
  return state;
86
33
  }; //# sourceMappingURL=useDialogContentStyles.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogContentStyles.styles.js"],"sourcesContent":["import { __styles, 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__*/__styles({\n root: {\n Bmxbyg5: \"f5zp4f\",\n sshi5w: \"f1nxs5xn\",\n B7ck84d: \"f1ewtqcl\",\n Ijaq50: \"faunodf\",\n nk6f5a: \"f88nxoq\",\n Br312pm: \"fwpfdsa\",\n Bw0ie65: \"fsyjsko\",\n z8tnut: \"fr4fn7s\",\n z189sj: [\"f171n1a0\", \"f1jwbs5a\"],\n Byoj8tv: \"f1ean75l\",\n uwmqm3: [\"f1jwbs5a\", \"f171n1a0\"],\n B6of3ja: \"fxlnl9e\",\n t21cq0: [\"ffs23cn\", \"f1v5tmjd\"],\n jrapky: \"f2uu7rc\",\n Frg6f3: [\"f1v5tmjd\", \"ffs23cn\"],\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n }\n}, {\n d: [\".f5zp4f{overflow-y:auto;}\", \".f1nxs5xn{min-height:32px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".faunodf{grid-row-start:2;}\", \".f88nxoq{grid-row-end:2;}\", \".fwpfdsa{grid-column-start:1;}\", \".fsyjsko{grid-column-end:4;}\", \".fr4fn7s{padding-top:var(--strokeWidthThick);}\", \".f171n1a0{padding-right:var(--strokeWidthThick);}\", \".f1jwbs5a{padding-left:var(--strokeWidthThick);}\", \".f1ean75l{padding-bottom:var(--strokeWidthThick);}\", \".fxlnl9e{margin-top:calc(var(--strokeWidthThick) * -1);}\", \".ffs23cn{margin-right:calc(var(--strokeWidthThick) * -1);}\", \".f1v5tmjd{margin-left:calc(var(--strokeWidthThick) * -1);}\", \".f2uu7rc{margin-bottom:calc(var(--strokeWidthThick) * -1);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\"]\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.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useDialogContentStyles.styles.js.map"],"names":["dialogContentClassNames","useDialogContentStyles_unstable","root","useStyles","__styles","Bmxbyg5","sshi5w","B7ck84d","Ijaq50","nk6f5a","Br312pm","Bw0ie65","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAkCAC,+BAA+B;eAA/BA;;;uBApCsC;AAE5C,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA6B;QAA+B;QAAqC;QAA+B;QAA6B;QAAkC;QAAgC;QAAkD;QAAqD;QAAoD;QAAsD;QAA4D;QAA8D;QAA8D;QAA+D;QAAgD;QAA+C;QAAmD;KAAmD;AACl3B;AAIO,MAAMvB,kCAAkCwB,CAAAA;IAC7C,MAAMC,SAASvB;IACfsB,MAAMvB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,mBAAY,EAAC5B,wBAAwBE,IAAI,EAAEwB,OAAOxB,IAAI,EAAEuB,MAAMvB,IAAI,CAACyB,SAAS;IACnG,OAAOF;AACT,GACA,yDAAyD"}
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"}
@@ -34,8 +34,8 @@ const useDialogSurface_unstable = (props, ref)=>{
34
34
  }
35
35
  });
36
36
  const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
37
- var _props_onKeyDown, _props;
38
- (_props_onKeyDown = (_props = props).onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(_props, event);
37
+ var _props_onKeyDown;
38
+ (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
39
39
  if (event.key === _keyboardkeys.Escape && !event.isDefaultPrevented()) {
40
40
  requestOpenChange({
41
41
  event,
@@ -1 +1 @@
1
- {"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, isResolvedShorthand, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */ export const useDialogSurface_unstable = (props, ref)=>{\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);\n const open = useDialogContext_unstable((ctx)=>ctx.open);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n const handledBackdropClick = useEventCallback((event)=>{\n if (isResolvedShorthand(props.backdrop)) {\n var _props_backdrop_onClick, _props_backdrop;\n (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick'\n });\n }\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _props_onKeyDown, _props;\n (_props_onKeyDown = (_props = props).onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(_props, event);\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown'\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.stopPropagation();\n }\n });\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true'\n },\n elementType: 'div'\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n var _props_as;\n return {\n components: {\n backdrop: 'div',\n root: 'div'\n },\n backdrop,\n mountNode: props.mountNode,\n root: slot.always(getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {\n tabIndex: -1,\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef)\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","_props","onKeyDown","key","Escape","stopPropagation","slot","optional","renderByDefault","defaultProps","elementType","_props_as","components","root","mountNode","always","getNativeElementProps","as","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC2E;0BACxD;8BACnB;AASZ,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAMC,YAAYC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,kBAAkBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IAC5E,MAAMC,YAAYH,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIE,SAAS;IAChE,MAAMC,OAAOJ,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBL,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBN,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIM,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAAC,CAACC;QAC3C,IAAIC,IAAAA,mCAAmB,EAACd,MAAMe,QAAQ,GAAG;YACrC,IAAIC,yBAAyBC;YAC5BD,CAAAA,0BAA0B,AAACC,CAAAA,kBAAkBjB,MAAMe,QAAQ,AAAD,EAAGG,OAAO,AAAD,MAAO,QAAQF,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBG,IAAI,CAACF,iBAAiBJ;QACnL;QACA,IAAIX,cAAc,WAAW,CAACW,MAAMO,kBAAkB,IAAI;YACtDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;QACJ;IACJ;IACA,MAAMC,gBAAgBV,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAIU,kBAAkBC;QACrBD,CAAAA,mBAAmB,AAACC,CAAAA,SAASxB,KAAI,EAAGyB,SAAS,AAAD,MAAO,QAAQF,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACK,QAAQX;QACjI,IAAIA,MAAMa,GAAG,KAAKC,oBAAM,IAAI,CAACd,MAAMO,kBAAkB,IAAI;YACrDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;YACA,qFAAqF;YACrF,gDAAgD;YAChDR,MAAMe,eAAe;QACzB;IACJ;IACA,MAAMb,WAAWc,oBAAI,CAACC,QAAQ,CAAC9B,MAAMe,QAAQ,EAAE;QAC3CgB,iBAAiBxB,QAAQL,cAAc;QACvC8B,cAAc;YACV,eAAe;QACnB;QACAC,aAAa;IACjB;IACA,IAAIlB,UAAU;QACVA,SAASG,OAAO,GAAGP;IACvB;IACA,IAAIuB;IACJ,OAAO;QACHC,YAAY;YACRpB,UAAU;YACVqB,MAAM;QACV;QACArB;QACAsB,WAAWrC,MAAMqC,SAAS;QAC1BD,MAAMP,oBAAI,CAACS,MAAM,CAACC,IAAAA,qCAAqB,EAAC,AAACL,CAAAA,YAAYlC,MAAMwC,EAAE,AAAD,MAAO,QAAQN,cAAc,KAAK,IAAIA,YAAY,OAAO;YACjHO,UAAU,CAAC;YACX,cAAcvC,cAAc;YAC5BwC,MAAMxC,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG2C,YAAYlC;YACrD,GAAGT,KAAK;YACR,GAAGK,eAAe;YAClBoB,WAAWH;YACXrB,KAAK2C,IAAAA,6BAAa,EAAC3C,KAAKK;QAC5B,IAAI;YACA2B,aAAa;QACjB;IACJ;AACJ"}
1
+ {"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs, isResolvedShorthand, slot } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */ export const useDialogSurface_unstable = (props, ref)=>{\n const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);\n const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);\n const open = useDialogContext_unstable((ctx)=>ctx.open);\n const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n const handledBackdropClick = useEventCallback((event)=>{\n if (isResolvedShorthand(props.backdrop)) {\n var _props_backdrop_onClick, _props_backdrop;\n (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n }\n if (modalType === 'modal' && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'backdropClick'\n });\n }\n });\n const handleKeyDown = useEventCallback((event)=>{\n var _props_onKeyDown;\n (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n if (event.key === Escape && !event.isDefaultPrevented()) {\n requestOpenChange({\n event,\n open: false,\n type: 'escapeKeyDown'\n });\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: nested Dialog, Popover, Menu and Tooltip\n event.stopPropagation();\n }\n });\n const backdrop = slot.optional(props.backdrop, {\n renderByDefault: open && modalType !== 'non-modal',\n defaultProps: {\n 'aria-hidden': 'true'\n },\n elementType: 'div'\n });\n if (backdrop) {\n backdrop.onClick = handledBackdropClick;\n }\n var _props_as;\n return {\n components: {\n backdrop: 'div',\n root: 'div'\n },\n backdrop,\n mountNode: props.mountNode,\n root: slot.always(getNativeElementProps((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : 'div', {\n tabIndex: -1,\n 'aria-modal': modalType !== 'non-modal',\n role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n 'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n ...props,\n ...modalAttributes,\n onKeyDown: handleKeyDown,\n ref: useMergedRefs(ref, dialogRef)\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","key","Escape","stopPropagation","slot","optional","renderByDefault","defaultProps","elementType","_props_as","components","root","mountNode","always","getNativeElementProps","as","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC2E;0BACxD;8BACnB;AASZ,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAMC,YAAYC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,kBAAkBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IAC5E,MAAMC,YAAYH,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIE,SAAS;IAChE,MAAMC,OAAOJ,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIG,IAAI;IACtD,MAAMC,oBAAoBL,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBN,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIM,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAAC,CAACC;QAC3C,IAAIC,IAAAA,mCAAmB,EAACd,MAAMe,QAAQ,GAAG;YACrC,IAAIC,yBAAyBC;YAC5BD,CAAAA,0BAA0B,AAACC,CAAAA,kBAAkBjB,MAAMe,QAAQ,AAAD,EAAGG,OAAO,AAAD,MAAO,QAAQF,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBG,IAAI,CAACF,iBAAiBJ;QACnL;QACA,IAAIX,cAAc,WAAW,CAACW,MAAMO,kBAAkB,IAAI;YACtDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;QACJ;IACJ;IACA,MAAMC,gBAAgBV,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAIU;QACHA,CAAAA,mBAAmBvB,MAAMwB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACnB,OAAOa;QACrH,IAAIA,MAAMY,GAAG,KAAKC,oBAAM,IAAI,CAACb,MAAMO,kBAAkB,IAAI;YACrDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;YACA,qFAAqF;YACrF,gDAAgD;YAChDR,MAAMc,eAAe;QACzB;IACJ;IACA,MAAMZ,WAAWa,oBAAI,CAACC,QAAQ,CAAC7B,MAAMe,QAAQ,EAAE;QAC3Ce,iBAAiBvB,QAAQL,cAAc;QACvC6B,cAAc;YACV,eAAe;QACnB;QACAC,aAAa;IACjB;IACA,IAAIjB,UAAU;QACVA,SAASG,OAAO,GAAGP;IACvB;IACA,IAAIsB;IACJ,OAAO;QACHC,YAAY;YACRnB,UAAU;YACVoB,MAAM;QACV;QACApB;QACAqB,WAAWpC,MAAMoC,SAAS;QAC1BD,MAAMP,oBAAI,CAACS,MAAM,CAACC,IAAAA,qCAAqB,EAAC,AAACL,CAAAA,YAAYjC,MAAMuC,EAAE,AAAD,MAAO,QAAQN,cAAc,KAAK,IAAIA,YAAY,OAAO;YACjHO,UAAU,CAAC;YACX,cAActC,cAAc;YAC5BuC,MAAMvC,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG0C,YAAYjC;YACrD,GAAGT,KAAK;YACR,GAAGK,eAAe;YAClBmB,WAAWF;YACXrB,KAAK0C,IAAAA,6BAAa,EAAC1C,KAAKK;QAC5B,IAAI;YACA0B,aAAa;QACjB;IACJ;AACJ"}
@@ -12,6 +12,9 @@ _export(exports, {
12
12
  dialogSurfaceClassNames: function() {
13
13
  return dialogSurfaceClassNames;
14
14
  },
15
+ backdropStyles: function() {
16
+ return backdropStyles;
17
+ },
15
18
  useDialogSurfaceStyles_unstable: function() {
16
19
  return useDialogSurfaceStyles_unstable;
17
20
  }
@@ -22,190 +25,35 @@ const dialogSurfaceClassNames = {
22
25
  root: 'fui-DialogSurface',
23
26
  backdrop: 'fui-DialogSurface__backdrop'
24
27
  };
28
+ const backdropStyles = {
29
+ backgroundColor: 'rgba(0, 0, 0, 0.4)'
30
+ };
31
+ const nestedDialogBackdropStyles = {
32
+ backgroundColor: 'transparent'
33
+ };
25
34
  /**
26
35
  * Styles for the root slot
27
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
28
- focusOutline: {
29
- Brovlpu: "ftqa4ok",
30
- B486eqv: "f2hkw1w",
31
- B8q5s1w: "f8hki3x",
32
- Bci5o5g: [
33
- "f1d2448m",
34
- "ffh67wi"
35
- ],
36
- n8qw10: "f1bjia2o",
37
- Bdrgwmp: [
38
- "ffh67wi",
39
- "f1d2448m"
40
- ],
41
- Bm4h7ae: "f15bsgw9",
42
- B7ys5i9: "f14e48fq",
43
- Busjfv9: "f18yb2kv",
44
- Bhk32uz: "fd6o370",
45
- Bf4ptjt: "fh1cnn4",
46
- kclons: [
47
- "fy7oxxb",
48
- "f184ne2d"
49
- ],
50
- Bhdgwq3: "fpukqih",
51
- Blkhhs4: [
52
- "f184ne2d",
53
- "fy7oxxb"
54
- ],
55
- Bqtpl0w: "frrh606",
56
- clg4pj: [
57
- "f1v5zibi",
58
- "fo2hd23"
59
- ],
60
- hgwjuy: "ful5kiu",
61
- Bonggc9: [
62
- "fo2hd23",
63
- "f1v5zibi"
64
- ],
65
- B1tsrr9: [
66
- "f1jqcqds",
67
- "ftffrms"
68
- ],
69
- Dah5zi: [
70
- "ftffrms",
71
- "f1jqcqds"
72
- ],
73
- Bkh64rk: [
74
- "f2e7qr6",
75
- "fsr1zz6"
76
- ],
77
- qqdqy8: [
78
- "fsr1zz6",
79
- "f2e7qr6"
80
- ],
81
- B6dhp37: "f1dvezut",
82
- i03rao: [
83
- "fd0oaoj",
84
- "f1cwg4i8"
85
- ],
86
- Boxcth7: "fjvm52t",
87
- Bsom6fd: [
88
- "f1cwg4i8",
89
- "fd0oaoj"
90
- ],
91
- J0r882: "f57olzd",
92
- Bule8hv: [
93
- "f4stah7",
94
- "fs1por5"
95
- ],
96
- Bjwuhne: "f480a47",
97
- Ghsupd: [
98
- "fs1por5",
99
- "f4stah7"
100
- ]
101
- },
102
- root: {
103
- mc9l5x: "ftgm304",
104
- famaaq: "f1c515w",
105
- Bcdw1i0: "f1bitti",
106
- Bhzewxz: "f15twtuk",
107
- j35jbq: [
108
- "f1e31b4d",
109
- "f1vgc2s3"
110
- ],
111
- B5kzvoi: "f1yab3r1",
112
- oyh7mz: [
113
- "f1vgc2s3",
114
- "f1e31b4d"
115
- ],
116
- z8tnut: "fuq56rw",
117
- z189sj: [
118
- "f15kemlc",
119
- "fdgang7"
120
- ],
121
- Byoj8tv: "fl2zwns",
122
- uwmqm3: [
123
- "fdgang7",
124
- "f15kemlc"
125
- ],
126
- B6of3ja: "fgr6219",
127
- t21cq0: [
128
- "f1ujusj6",
129
- "fcgxt0o"
130
- ],
131
- jrapky: "f10jk5vf",
132
- Frg6f3: [
133
- "fcgxt0o",
134
- "f1ujusj6"
135
- ],
136
- icvyot: "fzkkow9",
137
- vrafjx: [
138
- "fcdblym",
139
- "fjik90z"
140
- ],
141
- oivjwe: "fg706s2",
142
- wvpqe5: [
143
- "fjik90z",
144
- "fcdblym"
145
- ],
146
- B68tc82: "f1ln0qer",
147
- Bmxbyg5: "fa2wlxz",
148
- fshzfu: "f120kxnn",
149
- qhf8xq: "f19dog8a",
150
- Bqenvij: "f3052tw",
151
- B2u0y6b: "fvgz9i8",
152
- Bxyxcbc: "f6a9g1z",
153
- B7ck84d: "f1ewtqcl",
154
- E5pizo: "f10nrhrw",
155
- De3pzq: "fxugw4r",
156
- sj55zd: "f19n0e5",
157
- B4j52fo: "f5ogflp",
158
- Bekrc4i: [
159
- "f1hqa2wf",
160
- "finvdd3"
161
- ],
162
- Bn0qgzm: "f1f09k3d",
163
- ibv6hh: [
164
- "finvdd3",
165
- "f1hqa2wf"
166
- ],
167
- g2u3we: "fghlq4f",
168
- h3c5rm: [
169
- "f1gn591s",
170
- "fjscplz"
171
- ],
172
- B9xav0g: "fb073pr",
173
- zhjwy3: [
174
- "fjscplz",
175
- "f1gn591s"
176
- ],
177
- Bbmb7ep: [
178
- "fnivh3a",
179
- "fc7yr5o"
180
- ],
181
- Beyfa6y: [
182
- "fc7yr5o",
183
- "fnivh3a"
184
- ],
185
- B7oj6ja: [
186
- "f1el4m67",
187
- "f8yange"
188
- ],
189
- Btl43ni: [
190
- "f8yange",
191
- "f1el4m67"
192
- ],
193
- B5xtmjs: "ff54dml"
194
- },
195
- backdrop: {
196
- qhf8xq: "f19dog8a",
197
- De3pzq: "fju19wo",
198
- Bhzewxz: "f113wtx2",
199
- j35jbq: [
200
- "f10k790i",
201
- "f1xynx9j"
202
- ],
203
- B5kzvoi: "f5gq2j6",
204
- oyh7mz: [
205
- "f1xynx9j",
206
- "f10k790i"
207
- ]
208
- },
36
+ */ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r3ej8vj", "r7xp5xy", {
37
+ r: [
38
+ ".r3ej8vj{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);contain:content;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;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
39
+ ".r3ej8vj:focus{outline-style:none;}",
40
+ ".r3ej8vj:focus-visible{outline-style:none;}",
41
+ ".r3ej8vj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
42
+ ".r3ej8vj[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);}",
43
+ ".r3ej8vj::backdrop{background-color:rgba(0, 0, 0, 0.4);}",
44
+ ".r7xp5xy{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);contain:content;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;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
45
+ ".r7xp5xy:focus{outline-style:none;}",
46
+ ".r7xp5xy:focus-visible{outline-style:none;}",
47
+ ".r7xp5xy[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
48
+ ".r7xp5xy[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);}",
49
+ ".r7xp5xy::backdrop{background-color:rgba(0, 0, 0, 0.4);}"
50
+ ],
51
+ s: [
52
+ "@media screen and (max-width: 480px){.r3ej8vj{max-width:100vw;}}",
53
+ "@media screen and (max-width: 480px){.r7xp5xy{max-width:100vw;}}"
54
+ ]
55
+ });
56
+ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
209
57
  nestedDialogBackdrop: {
210
58
  De3pzq: "f3rmtva"
211
59
  },
@@ -213,106 +61,25 @@ const dialogSurfaceClassNames = {
213
61
  fshzfu: "foe20jx"
214
62
  }
215
63
  }, {
216
- f: [
217
- ".ftqa4ok:focus{outline-style:none;}"
218
- ],
219
- i: [
220
- ".f2hkw1w:focus-visible{outline-style:none;}"
221
- ],
222
64
  d: [
223
- ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
224
- ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
225
- ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
226
- ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
227
- ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}",
228
- ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}",
229
- ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}",
230
- ".fd6o370[data-fui-focus-visible]::after{z-index:1;}",
231
- ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}",
232
- ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}",
233
- ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}",
234
- ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}",
235
- ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}",
236
- ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}",
237
- ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}",
238
- ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}",
239
- ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
240
- ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
241
- ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}",
242
- ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}",
243
- ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}",
244
- ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}",
245
- ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}",
246
- ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}",
247
- ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}",
248
- ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}",
249
- ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}",
250
- ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}",
251
- ".ftgm304{display:block;}",
252
- ".f1c515w{-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;}",
253
- ".f1bitti{visibility:unset;}",
254
- ".f15twtuk{top:0;}",
255
- ".f1e31b4d{right:0;}",
256
- ".f1vgc2s3{left:0;}",
257
- ".f1yab3r1{bottom:0;}",
258
- ".fuq56rw{padding-top:24px;}",
259
- ".f15kemlc{padding-right:24px;}",
260
- ".fdgang7{padding-left:24px;}",
261
- ".fl2zwns{padding-bottom:24px;}",
262
- ".fgr6219{margin-top:auto;}",
263
- ".f1ujusj6{margin-right:auto;}",
264
- ".fcgxt0o{margin-left:auto;}",
265
- ".f10jk5vf{margin-bottom:auto;}",
266
- ".fzkkow9{border-top-style:solid;}",
267
- ".fcdblym{border-right-style:solid;}",
268
- ".fjik90z{border-left-style:solid;}",
269
- ".fg706s2{border-bottom-style:solid;}",
270
- ".f1ln0qer{overflow-x:unset;}",
271
- ".fa2wlxz{overflow-y:unset;}",
272
- ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}",
273
- ".f19dog8a{position:fixed;}",
274
- ".f3052tw{height:fit-content;}",
275
- ".fvgz9i8{max-width:600px;}",
276
- ".f6a9g1z{max-height:100vh;}",
277
- ".f1ewtqcl{box-sizing:border-box;}",
278
- ".f10nrhrw{box-shadow:var(--shadow64);}",
279
- ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
280
- ".f19n0e5{color:var(--colorNeutralForeground1);}",
281
- ".f5ogflp{border-top-width:1px;}",
282
- ".f1hqa2wf{border-right-width:1px;}",
283
- ".finvdd3{border-left-width:1px;}",
284
- ".f1f09k3d{border-bottom-width:1px;}",
285
- ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
286
- ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
287
- ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
288
- ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
289
- ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
290
- ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
291
- ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}",
292
- ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}",
293
- ".fju19wo{background-color:rgba(0, 0, 0, 0.4);}",
294
- ".f113wtx2{top:0px;}",
295
- ".f10k790i{right:0px;}",
296
- ".f1xynx9j{left:0px;}",
297
- ".f5gq2j6{bottom:0px;}",
298
65
  ".f3rmtva{background-color:transparent;}",
299
66
  ".foe20jx::backdrop{background-color:transparent;}"
300
- ],
301
- m: [
302
- [
303
- "@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}",
304
- {
305
- m: "screen and (max-width: 480px)"
306
- }
307
- ]
308
67
  ]
309
68
  });
69
+ /**
70
+ * Styles for the backdrop slot
71
+ */ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rvs8970", "r1uj6nuu", [
72
+ ".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}",
73
+ ".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"
74
+ ]);
310
75
  const useDialogSurfaceStyles_unstable = (state)=>{
76
+ const surfaceResetStyles = useRootResetStyles();
311
77
  const styles = useStyles();
78
+ const backdropResetStyles = useBackdropResetStyles();
312
79
  const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
313
- state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, styles.root, styles.focusOutline, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
80
+ state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className);
314
81
  if (state.backdrop) {
315
- state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, styles.backdrop, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
82
+ state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
316
83
  }
317
84
  return state;
318
85
  }; //# sourceMappingURL=useDialogSurfaceStyles.styles.js.map