@fluentui/react-dialog 9.13.7 → 9.14.0

package/CHANGELOG.md

@@ -1,9 +1,30 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Fri, 04 Jul 2025 10:02:42 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.14.0)
+
+Thu, 17 Jul 2025 13:45:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.13.8..@fluentui/react-dialog_v9.14.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-portal to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.13.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.13.8)
+
+Wed, 16 Jul 2025 13:52:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.13.6..@fluentui/react-dialog_v9.13.8)
+
+### Patches
+
+- Bump @fluentui/react-motion-components-preview to v0.7.0 ([PR #34849](https://github.com/microsoft/fluentui/pull/34849) by beachball)
+
 ## [9.13.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.13.6)
 
 Fri, 04 Jul 2025 10:02:42 GMT 

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

@@ -0,0 +1,56 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
+export const dialogActionsClassNames = {
+    root: 'fui-DialogActions'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = makeResetStyles({
+    gap: DIALOG_GAP,
+    height: 'fit-content',
+    boxSizing: 'border-box',
+    display: 'flex',
+    gridRowStart: 3,
+    gridRowEnd: 3,
+    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        flexDirection: 'column',
+        justifySelf: 'stretch'
+    }
+});
+const useStyles = makeStyles({
+    gridPositionEnd: {
+        justifySelf: 'end',
+        gridColumnStart: 2,
+        gridColumnEnd: 4,
+        [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+            gridColumnStart: 1,
+            gridRowStart: 4,
+            gridRowEnd: 'auto'
+        }
+    },
+    gridPositionStart: {
+        justifySelf: 'start',
+        gridColumnStart: 1,
+        gridColumnEnd: 2,
+        [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+            gridColumnEnd: 4,
+            gridRowStart: 3,
+            gridRowEnd: 'auto'
+        }
+    },
+    fluidStart: {
+        gridColumnEnd: 4
+    },
+    fluidEnd: {
+        gridColumnStart: 1
+    }
+});
+/**
+ * Apply styling to the DialogActions slots based on the state
+ */ export const useDialogActionsStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    const styles = useStyles();
+    state.root.className = mergeClasses(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
+    return state;
+};

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

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

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

@@ -0,0 +1,34 @@
+import { makeResetStyles, 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 = makeResetStyles({
+    overflow: 'unset',
+    gap: DIALOG_GAP,
+    display: 'grid',
+    maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,
+    boxSizing: 'border-box',
+    gridTemplateRows: 'auto 1fr',
+    gridTemplateColumns: '1fr 1fr auto',
+    '@supports (height: 1dvh)': {
+        maxHeight: `calc(100dvh - 2 * ${SURFACE_PADDING})`
+    },
+    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw',
+        gridTemplateRows: 'auto 1fr auto'
+    },
+    [MEDIA_QUERY_SHORT_SCREEN]: {
+        maxHeight: 'unset'
+    }
+});
+/**
+ * Apply styling to the DialogBody slots based on the state
+ */ export const useDialogBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  overflow: 'unset',\n  gap: DIALOG_GAP,\n  display: 'grid',\n  maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n  boxSizing: 'border-box',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateColumns: '1fr 1fr auto',\n\n  '@supports (height: 1dvh)': {\n    maxHeight: `calc(100dvh - 2 * ${SURFACE_PADDING})`,\n  },\n\n  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n    gridTemplateRows: 'auto 1fr auto',\n  },\n\n  [MEDIA_QUERY_SHORT_SCREEN]: {\n    maxHeight: 'unset',\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  'use no memo';\n\n  const resetStyles = useResetStyles();\n\n  state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_PADDING","dialogBodyClassNames","root","useResetStyles","overflow","gap","display","maxHeight","boxSizing","gridTemplateRows","gridTemplateColumns","maxWidth","useDialogBodyStyles_unstable","state","resetStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,UAAU,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,eAAe,QAAQ,iBAAiB;AAExH,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBR,gBAAgB;IACrCS,UAAU;IACVC,KAAKR;IACLS,SAAS;IACTC,WAAW,CAAC,iBAAiB,EAAEP,gBAAgB,CAAC,CAAC;IACjDQ,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,4BAA4B;QAC1BH,WAAW,CAAC,kBAAkB,EAAEP,gBAAgB,CAAC,CAAC;IACpD;IAEA,CAACF,gCAAgC,EAAE;QACjCa,UAAU;QACVF,kBAAkB;IACpB;IAEA,CAACV,yBAAyB,EAAE;QAC1BQ,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,cAAcX;IAEpBU,MAAMX,IAAI,CAACa,SAAS,GAAGnB,aAAaK,qBAAqBC,IAAI,EAAEY,aAAaD,MAAMX,IAAI,CAACa,SAAS;IAEhG,OAAOF;AACT,EAAE"}

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

@@ -0,0 +1,31 @@
+import { makeResetStyles, 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 = makeResetStyles({
+    padding: tokens.strokeWidthThick,
+    margin: `calc(${tokens.strokeWidthThick} * -1)`,
+    ...typographyStyles.body1,
+    overflowY: 'auto',
+    minHeight: '32px',
+    boxSizing: 'border-box',
+    gridRowStart: 2,
+    gridRowEnd: 2,
+    gridColumnStart: 1,
+    gridColumnEnd: 4,
+    [MEDIA_QUERY_SHORT_SCREEN]: {
+        overflowY: 'unset'
+    }
+});
+/**
+ * Apply styling to the DialogContent slots based on the state
+ */ export const useDialogContentStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);
+    return state;
+};

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

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

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

@@ -0,0 +1,72 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+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'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyle = makeResetStyles({
+    ...createFocusOutlineStyle(),
+    inset: 0,
+    padding: SURFACE_PADDING,
+    margin: 'auto',
+    borderStyle: 'none',
+    overflow: 'unset',
+    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,
+    borderRadius: tokens.borderRadiusXLarge,
+    display: 'block',
+    userSelect: 'unset',
+    visibility: 'unset',
+    position: 'fixed',
+    height: 'fit-content',
+    maxWidth: '600px',
+    maxHeight: '100vh',
+    boxSizing: 'border-box',
+    backgroundColor: tokens.colorNeutralBackground1,
+    color: tokens.colorNeutralForeground1,
+    // Same styles as DialogSurfaceMotion last keyframe,
+    // to ensure dialog will be properly styled when surfaceMotion is opted-out
+    boxShadow: tokens.shadow64,
+    '@supports (height: 1dvh)': {
+        maxHeight: '100dvh'
+    },
+    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw'
+    },
+    [MEDIA_QUERY_SHORT_SCREEN]: {
+        overflowY: 'auto',
+        // We need to offset the scrollbar by adding transparent borders otherwise
+        // it conflicts with the border radius.
+        paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
+        borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
+    }
+});
+const useBackdropBaseStyle = makeResetStyles({
+    inset: '0px',
+    backgroundColor: tokens.colorBackgroundOverlay,
+    position: 'fixed'
+});
+const useStyles = makeStyles({
+    nestedDialogBackdrop: {
+        backgroundColor: tokens.colorTransparentBackground
+    }
+});
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */ export const useDialogSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const { isNestedDialog, root, backdrop } = state;
+    const rootBaseStyle = useRootBaseStyle();
+    const backdropBaseStyle = useBackdropBaseStyle();
+    const styles = useStyles();
+    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);
+    if (backdrop) {
+        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, backdrop.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  inset: 0,\n  padding: SURFACE_PADDING,\n  margin: 'auto',\n  borderStyle: 'none',\n  overflow: 'unset',\n  border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n  borderRadius: tokens.borderRadiusXLarge,\n\n  display: 'block',\n  userSelect: 'unset',\n  visibility: 'unset',\n  position: 'fixed',\n  height: 'fit-content',\n  maxWidth: '600px',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  // Same styles as DialogSurfaceMotion last keyframe,\n  // to ensure dialog will be properly styled when surfaceMotion is opted-out\n  boxShadow: tokens.shadow64,\n\n  '@supports (height: 1dvh)': {\n    maxHeight: '100dvh',\n  },\n\n  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n  },\n\n  [MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'auto',\n    // We need to offset the scrollbar by adding transparent borders otherwise\n    // it conflicts with the border radius.\n    paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n    borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n  inset: '0px',\n  backgroundColor: tokens.colorBackgroundOverlay,\n  position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n  nestedDialogBackdrop: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { isNestedDialog, root, backdrop } = state;\n\n  const rootBaseStyle = useRootBaseStyle();\n\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const styles = useStyles();\n\n  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      backdropBaseStyle,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","useDialogSurfaceStyles_unstable","state","isNestedDialog","rootBaseStyle","backdropBaseStyle","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,kCAAkC,EAClCC,+BAA+B,EAC/BC,wBAAwB,EACxBC,oBAAoB,EACpBC,eAAe,QACV,iBAAiB;AAGxB,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBb,gBAAgB;IACvC,GAAGI,yBAAyB;IAC5BU,OAAO;IACPC,SAASN;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,CAAC,EAAEX,qBAAqB,OAAO,EAAEL,OAAOiB,sBAAsB,CAAC,CAAC;IACxEC,cAAclB,OAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,iBAAiB5B,OAAO6B,uBAAuB;IAC/CC,OAAO9B,OAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,OAAOiC,QAAQ;IAE1B,4BAA4B;QAC1BP,WAAW;IACb;IAEA,CAACvB,gCAAgC,EAAE;QACjCsB,UAAU;IACZ;IAEA,CAACrB,yBAAyB,EAAE;QAC1B8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,gBAAgB,GAAG,EAAEJ,mCAAmC,CAAC,CAAC;QAChFkC,kBAAkBlC;QAClBmC,gBAAgBnC;QAChBoC,mBAAmBpC;IACrB;AACF;AAEA,MAAMqC,uBAAuB1C,gBAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,OAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,YAAY3C,WAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,OAAO2C,0BAA0B;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAEtC,IAAI,EAAEC,QAAQ,EAAE,GAAGoC;IAE3C,MAAME,gBAAgBrC;IAEtB,MAAMsC,oBAAoBT;IAC1B,MAAMU,SAASR;IAEfjC,KAAK0C,SAAS,GAAGnD,aAAaQ,wBAAwBC,IAAI,EAAEuC,eAAevC,KAAK0C,SAAS;IAEzF,IAAIzC,UAAU;QACZA,SAASyC,SAAS,GAAGnD,aACnBQ,wBAAwBE,QAAQ,EAChCuC,mBACAF,kBAAkBG,OAAOP,oBAAoB,EAC7CjC,SAASyC,SAAS;IAEtB;IAEA,OAAOL;AACT,EAAE"}

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

@@ -0,0 +1,63 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { typographyStyles } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+export const dialogTitleClassNames = {
+    root: 'fui-DialogTitle',
+    action: 'fui-DialogTitle__action'
+};
+/**
+ * Styles for the root slot
+ */ const useRootResetStyles = makeResetStyles({
+    ...typographyStyles.subtitle1,
+    margin: 0,
+    gridRowStart: 1,
+    gridRowEnd: 1,
+    gridColumnStart: 1,
+    gridColumnEnd: 3
+});
+const useStyles = makeStyles({
+    rootWithoutAction: {
+        gridColumnEnd: 4
+    }
+});
+/**
+ * Styles for the action slot
+ */ const useActionResetStyles = makeResetStyles({
+    gridRowStart: 1,
+    gridRowEnd: 1,
+    gridColumnStart: 3,
+    justifySelf: 'end',
+    alignSelf: 'start'
+});
+/**
+ * Styles to be applied on internal elements used by default action on non-modal Dialog
+ * @internal
+ */ export const useDialogTitleInternalStyles = makeResetStyles({
+    ...createFocusOutlineStyle(),
+    overflow: 'visible',
+    padding: 0,
+    borderStyle: 'none',
+    position: 'relative',
+    boxSizing: 'content-box',
+    backgroundColor: 'inherit',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    cursor: 'pointer',
+    lineHeight: 0,
+    WebkitAppearance: 'button',
+    textAlign: 'unset'
+});
+/**
+ * Apply styling to the DialogTitle slots based on the state
+ */ export const useDialogTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootResetStyles = useRootResetStyles();
+    const actionResetStyles = useActionResetStyles();
+    const styles = useStyles();
+    state.root.className = mergeClasses(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
+    if (state.action) {
+        state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);
+    }
+    return state;
+};

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

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

package/lib/utils/useDisableBodyScroll.styles.raw.js

@@ -0,0 +1,12 @@
+import { makeResetStyles } from '@griffel/react';
+// this style must be applied to the html element to disable scrolling
+export const useHTMLNoScrollStyles = makeResetStyles({
+    overflowY: [
+        'hidden',
+        'clip'
+    ],
+    scrollbarGutter: 'stable'
+});
+export const useBodyNoScrollStyles = makeResetStyles({
+    overflowY: 'hidden'
+});

package/lib/utils/useDisableBodyScroll.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["makeResetStyles","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useBodyNoScrollStyles"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,QAAQ,iBAAiB;AAEjD,sEAAsE;AACtE,OAAO,MAAMC,wBAAwBD,gBAAgB;IACnDE,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB,GAAG;AAEH,OAAO,MAAMC,wBAAwBJ,gBAAgB;IACnDE,WAAW;AACb,GAAG"}

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dialogActionsClassNames: function() {
+        return dialogActionsClassNames;
+    },
+    useDialogActionsStyles_unstable: function() {
+        return useDialogActionsStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _constants = require("../../contexts/constants");
+const dialogActionsClassNames = {
+    root: 'fui-DialogActions'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    gap: _constants.DIALOG_GAP,
+    height: 'fit-content',
+    boxSizing: 'border-box',
+    display: 'flex',
+    gridRowStart: 3,
+    gridRowEnd: 3,
+    [_constants.MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        flexDirection: 'column',
+        justifySelf: 'stretch'
+    }
+});
+const useStyles = (0, _react.makeStyles)({
+    gridPositionEnd: {
+        justifySelf: 'end',
+        gridColumnStart: 2,
+        gridColumnEnd: 4,
+        [_constants.MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+            gridColumnStart: 1,
+            gridRowStart: 4,
+            gridRowEnd: 'auto'
+        }
+    },
+    gridPositionStart: {
+        justifySelf: 'start',
+        gridColumnStart: 1,
+        gridColumnEnd: 2,
+        [_constants.MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+            gridColumnEnd: 4,
+            gridRowStart: 3,
+            gridRowEnd: 'auto'
+        }
+    },
+    fluidStart: {
+        gridColumnEnd: 4
+    },
+    fluidEnd: {
+        gridColumnStart: 1
+    }
+});
+const useDialogActionsStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(dialogActionsClassNames.root, resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n  root: 'fui-DialogActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  gap: DIALOG_GAP,\n  height: 'fit-content',\n  boxSizing: 'border-box',\n  display: 'flex',\n  gridRowStart: 3,\n  gridRowEnd: 3,\n  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    flexDirection: 'column',\n    justifySelf: 'stretch',\n  },\n});\n\nconst useStyles = makeStyles({\n  gridPositionEnd: {\n    justifySelf: 'end',\n    gridColumnStart: 2,\n    gridColumnEnd: 4,\n    [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/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n  'use no memo';\n\n  const resetStyles = useResetStyles();\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogActionsClassNames.root,\n    resetStyles,\n    state.position === 'start' && styles.gridPositionStart,\n    state.position === 'end' && styles.gridPositionEnd,\n    state.fluid && state.position === 'start' && styles.fluidStart,\n    state.fluid && state.position === 'end' && styles.fluidEnd,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["dialogActionsClassNames","useDialogActionsStyles_unstable","root","useResetStyles","makeResetStyles","gap","DIALOG_GAP","height","boxSizing","display","gridRowStart","gridRowEnd","MEDIA_QUERY_BREAKPOINT_SELECTOR","flexDirection","justifySelf","useStyles","makeStyles","gridPositionEnd","gridColumnStart","gridColumnEnd","gridPositionStart","fluidStart","fluidEnd","state","resetStyles","styles","className","mergeClasses","position","fluid"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,uBAAAA;eAAAA;;IAoDAC,+BAAAA;eAAAA;;;uBAzD6C;2BAGE;AAErD,MAAMD,0BAA8D;IACzEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,iBAAiBC,IAAAA,sBAAAA,EAAgB;IACrCC,KAAKC,qBAAAA;IACLC,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,cAAc;IACdC,YAAY;IACZ,CAACC,0CAAAA,CAAgC,EAAE;QACjCC,eAAe;QACfC,aAAa;IACf;AACF;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,iBAAiB;QACfH,aAAa;QACbI,iBAAiB;QACjBC,eAAe;QACf,CAACP,0CAAAA,CAAgC,EAAE;YACjCM,iBAAiB;YACjBR,cAAc;YACdC,YAAY;QACd;IACF;IACAS,mBAAmB;QACjBN,aAAa;QACbI,iBAAiB;QACjBC,eAAe;QACf,CAACP,0CAAAA,CAAgC,EAAE;YACjCO,eAAe;YACfT,cAAc;YACdC,YAAY;QACd;IACF;IACAU,YAAY;QACVF,eAAe;IACjB;IACAG,UAAU;QACRJ,iBAAiB;IACnB;AACF;AAKO,MAAMjB,kCAAkC,CAACsB;IAC9C;IAEA,MAAMC,cAAcrB;IACpB,MAAMsB,SAASV;IACfQ,MAAMrB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,mBAAAA,EACrB3B,wBAAwBE,IAAI,EAC5BsB,aACAD,MAAMK,QAAQ,KAAK,WAAWH,OAAOL,iBAAiB,EACtDG,MAAMK,QAAQ,KAAK,SAASH,OAAOR,eAAe,EAClDM,MAAMM,KAAK,IAAIN,MAAMK,QAAQ,KAAK,WAAWH,OAAOJ,UAAU,EAC9DE,MAAMM,KAAK,IAAIN,MAAMK,QAAQ,KAAK,SAASH,OAAOH,QAAQ,EAC1DC,MAAMrB,IAAI,CAACwB,SAAS;IAEtB,OAAOH;AACT"}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dialogBodyClassNames: function() {
+        return dialogBodyClassNames;
+    },
+    useDialogBodyStyles_unstable: function() {
+        return useDialogBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _contexts = require("../../contexts");
+const dialogBodyClassNames = {
+    root: 'fui-DialogBody'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    overflow: 'unset',
+    gap: _contexts.DIALOG_GAP,
+    display: 'grid',
+    maxHeight: `calc(100vh - 2 * ${_contexts.SURFACE_PADDING})`,
+    boxSizing: 'border-box',
+    gridTemplateRows: 'auto 1fr',
+    gridTemplateColumns: '1fr 1fr auto',
+    '@supports (height: 1dvh)': {
+        maxHeight: `calc(100dvh - 2 * ${_contexts.SURFACE_PADDING})`
+    },
+    [_contexts.MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw',
+        gridTemplateRows: 'auto 1fr auto'
+    },
+    [_contexts.MEDIA_QUERY_SHORT_SCREEN]: {
+        maxHeight: 'unset'
+    }
+});
+const useDialogBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, resetStyles, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  overflow: 'unset',\n  gap: DIALOG_GAP,\n  display: 'grid',\n  maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n  boxSizing: 'border-box',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateColumns: '1fr 1fr auto',\n\n  '@supports (height: 1dvh)': {\n    maxHeight: `calc(100dvh - 2 * ${SURFACE_PADDING})`,\n  },\n\n  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n    gridTemplateRows: 'auto 1fr auto',\n  },\n\n  [MEDIA_QUERY_SHORT_SCREEN]: {\n    maxHeight: 'unset',\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  'use no memo';\n\n  const resetStyles = useResetStyles();\n\n  state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className);\n\n  return state;\n};\n"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useResetStyles","makeResetStyles","overflow","gap","DIALOG_GAP","display","maxHeight","SURFACE_PADDING","boxSizing","gridTemplateRows","gridTemplateColumns","MEDIA_QUERY_BREAKPOINT_SELECTOR","maxWidth","MEDIA_QUERY_SHORT_SCREEN","state","resetStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,oBAAAA;eAAAA;;IAiCAC,4BAAAA;eAAAA;;;uBAtCiC;0BAGyD;AAEhG,MAAMD,uBAAwD;IACnEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,iBAAiBC,IAAAA,sBAAAA,EAAgB;IACrCC,UAAU;IACVC,KAAKC,oBAAAA;IACLC,SAAS;IACTC,WAAW,CAAC,iBAAiB,EAAEC,yBAAAA,CAAgB,CAAC,CAAC;IACjDC,WAAW;IACXC,kBAAkB;IAClBC,qBAAqB;IAErB,4BAA4B;QAC1BJ,WAAW,CAAC,kBAAkB,EAAEC,yBAAAA,CAAgB,CAAC,CAAC;IACpD;IAEA,CAACI,yCAAAA,CAAgC,EAAE;QACjCC,UAAU;QACVH,kBAAkB;IACpB;IAEA,CAACI,kCAAAA,CAAyB,EAAE;QAC1BP,WAAW;IACb;AACF;AAKO,MAAMR,+BAA+B,CAACgB;IAC3C;IAEA,MAAMC,cAAcf;IAEpBc,MAAMf,IAAI,CAACiB,SAAS,GAAGC,IAAAA,mBAAAA,EAAapB,qBAAqBE,IAAI,EAAEgB,aAAaD,MAAMf,IAAI,CAACiB,SAAS;IAEhG,OAAOF;AACT"}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dialogContentClassNames: function() {
+        return dialogContentClassNames;
+    },
+    useDialogContentStyles_unstable: function() {
+        return useDialogContentStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _contexts = require("../../contexts");
+const dialogContentClassNames = {
+    root: 'fui-DialogContent'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    padding: _reacttheme.tokens.strokeWidthThick,
+    margin: `calc(${_reacttheme.tokens.strokeWidthThick} * -1)`,
+    ..._reacttheme.typographyStyles.body1,
+    overflowY: 'auto',
+    minHeight: '32px',
+    boxSizing: 'border-box',
+    gridRowStart: 2,
+    gridRowEnd: 2,
+    gridColumnStart: 1,
+    gridColumnEnd: 4,
+    [_contexts.MEDIA_QUERY_SHORT_SCREEN]: {
+        overflowY: 'unset'
+    }
+});
+const useDialogContentStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(dialogContentClassNames.root, styles, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n  root: 'fui-DialogContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  padding: tokens.strokeWidthThick,\n  margin: `calc(${tokens.strokeWidthThick} * -1)`,\n  ...typographyStyles.body1,\n  overflowY: 'auto',\n  minHeight: '32px',\n  boxSizing: 'border-box',\n  gridRowStart: 2,\n  gridRowEnd: 2,\n  gridColumnStart: 1,\n  gridColumnEnd: 4,\n\n  [MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'unset',\n  },\n});\n\n/**\n * Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className);\n  return state;\n};\n"],"names":["dialogContentClassNames","useDialogContentStyles_unstable","root","useStyles","makeResetStyles","padding","tokens","strokeWidthThick","margin","typographyStyles","body1","overflowY","minHeight","boxSizing","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","MEDIA_QUERY_SHORT_SCREEN","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,uBAAAA;eAAAA;;IA2BAC,+BAAAA;eAAAA;;;uBAjCiC;4BAGL;0BACA;AAElC,MAAMD,0BAA8D;IACzEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,sBAAAA,EAAgB;IAChCC,SAASC,kBAAAA,CAAOC,gBAAgB;IAChCC,QAAQ,CAAC,KAAK,EAAEF,kBAAAA,CAAOC,gBAAgB,CAAC,MAAM,CAAC;IAC/C,GAAGE,4BAAAA,CAAiBC,KAAK;IACzBC,WAAW;IACXC,WAAW;IACXC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;IAEf,CAACC,kCAAAA,CAAyB,EAAE;QAC1BP,WAAW;IACb;AACF;AAKO,MAAMV,kCAAkC,CAACkB;IAC9C;IAEA,MAAMC,SAASjB;IACfgB,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAAA,EAAatB,wBAAwBE,IAAI,EAAEkB,QAAQD,MAAMjB,IAAI,CAACmB,SAAS;IAC9F,OAAOF;AACT"}

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dialogSurfaceClassNames: function() {
+        return dialogSurfaceClassNames;
+    },
+    useDialogSurfaceStyles_unstable: function() {
+        return useDialogSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const _contexts = require("../../contexts");
+const dialogSurfaceClassNames = {
+    root: 'fui-DialogSurface',
+    backdrop: 'fui-DialogSurface__backdrop'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseStyle = (0, _react.makeResetStyles)({
+    ...(0, _reacttabster.createFocusOutlineStyle)(),
+    inset: 0,
+    padding: _contexts.SURFACE_PADDING,
+    margin: 'auto',
+    borderStyle: 'none',
+    overflow: 'unset',
+    border: `${_contexts.SURFACE_BORDER_WIDTH} solid ${_reacttheme.tokens.colorTransparentStroke}`,
+    borderRadius: _reacttheme.tokens.borderRadiusXLarge,
+    display: 'block',
+    userSelect: 'unset',
+    visibility: 'unset',
+    position: 'fixed',
+    height: 'fit-content',
+    maxWidth: '600px',
+    maxHeight: '100vh',
+    boxSizing: 'border-box',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    // Same styles as DialogSurfaceMotion last keyframe,
+    // to ensure dialog will be properly styled when surfaceMotion is opted-out
+    boxShadow: _reacttheme.tokens.shadow64,
+    '@supports (height: 1dvh)': {
+        maxHeight: '100dvh'
+    },
+    [_contexts.MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
+        maxWidth: '100vw'
+    },
+    [_contexts.MEDIA_QUERY_SHORT_SCREEN]: {
+        overflowY: 'auto',
+        // We need to offset the scrollbar by adding transparent borders otherwise
+        // it conflicts with the border radius.
+        paddingRight: `calc(${_contexts.SURFACE_PADDING} - ${_contexts.FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,
+        borderRightWidth: _contexts.FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderTopWidth: _contexts.FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,
+        borderBottomWidth: _contexts.FULLSCREEN_DIALOG_SCROLLBAR_OFFSET
+    }
+});
+const useBackdropBaseStyle = (0, _react.makeResetStyles)({
+    inset: '0px',
+    backgroundColor: _reacttheme.tokens.colorBackgroundOverlay,
+    position: 'fixed'
+});
+const useStyles = (0, _react.makeStyles)({
+    nestedDialogBackdrop: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground
+    }
+});
+const useDialogSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const { isNestedDialog, root, backdrop } = state;
+    const rootBaseStyle = useRootBaseStyle();
+    const backdropBaseStyle = useBackdropBaseStyle();
+    const styles = useStyles();
+    root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, root.className);
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, backdrop.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  inset: 0,\n  padding: SURFACE_PADDING,\n  margin: 'auto',\n  borderStyle: 'none',\n  overflow: 'unset',\n  border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n  borderRadius: tokens.borderRadiusXLarge,\n\n  display: 'block',\n  userSelect: 'unset',\n  visibility: 'unset',\n  position: 'fixed',\n  height: 'fit-content',\n  maxWidth: '600px',\n  maxHeight: '100vh',\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  // Same styles as DialogSurfaceMotion last keyframe,\n  // to ensure dialog will be properly styled when surfaceMotion is opted-out\n  boxShadow: tokens.shadow64,\n\n  '@supports (height: 1dvh)': {\n    maxHeight: '100dvh',\n  },\n\n  [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n  },\n\n  [MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'auto',\n    // We need to offset the scrollbar by adding transparent borders otherwise\n    // it conflicts with the border radius.\n    paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n    borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n  inset: '0px',\n  backgroundColor: tokens.colorBackgroundOverlay,\n  position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n  nestedDialogBackdrop: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { isNestedDialog, root, backdrop } = state;\n\n  const rootBaseStyle = useRootBaseStyle();\n\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const styles = useStyles();\n\n  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      backdropBaseStyle,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","makeResetStyles","createFocusOutlineStyle","inset","padding","SURFACE_PADDING","margin","borderStyle","overflow","border","SURFACE_BORDER_WIDTH","tokens","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","overflowY","paddingRight","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","makeStyles","nestedDialogBackdrop","colorTransparentBackground","state","isNestedDialog","rootBaseStyle","backdropBaseStyle","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAaaA,uBAAAA;eAAAA;;IAkEAC,+BAAAA;eAAAA;;;uBA/E6C;4BAEnC;8BACiB;0BAOjC;AAGA,MAAMD,0BAAsF;IACjGE,MAAM;IACNC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,mBAAmBC,IAAAA,sBAAAA,EAAgB;IACvC,GAAGC,IAAAA,qCAAAA,GAAyB;IAC5BC,OAAO;IACPC,SAASC,yBAAAA;IACTC,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,CAAC,EAAEC,8BAAAA,CAAqB,OAAO,EAAEC,kBAAAA,CAAOC,sBAAsB,CAAC,CAAC;IACxEC,cAAcF,kBAAAA,CAAOG,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,iBAAiBZ,kBAAAA,CAAOa,uBAAuB;IAC/CC,OAAOd,kBAAAA,CAAOe,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhB,kBAAAA,CAAOiB,QAAQ;IAE1B,4BAA4B;QAC1BP,WAAW;IACb;IAEA,CAACQ,yCAAAA,CAAgC,EAAE;QACjCT,UAAU;IACZ;IAEA,CAACU,kCAAAA,CAAyB,EAAE;QAC1BC,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE3B,yBAAAA,CAAgB,GAAG,EAAE4B,4CAAAA,CAAmC,CAAC,CAAC;QAChFC,kBAAkBD,4CAAAA;QAClBE,gBAAgBF,4CAAAA;QAChBG,mBAAmBH,4CAAAA;IACrB;AACF;AAEA,MAAMI,uBAAuBpC,IAAAA,sBAAAA,EAAgB;IAC3CE,OAAO;IACPoB,iBAAiBZ,kBAAAA,CAAO2B,sBAAsB;IAC9CpB,UAAU;AACZ;AAEA,MAAMqB,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,sBAAsB;QACpBlB,iBAAiBZ,kBAAAA,CAAO+B,0BAA0B;IACpD;AACF;AAKO,MAAM7C,kCAAkC,CAAC8C;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAE9C,IAAI,EAAEC,QAAQ,EAAE,GAAG4C;IAE3C,MAAME,gBAAgB7C;IAEtB,MAAM8C,oBAAoBT;IAC1B,MAAMU,SAASR;IAEfzC,KAAKkD,SAAS,GAAGC,IAAAA,mBAAAA,EAAarD,wBAAwBE,IAAI,EAAE+C,eAAe/C,KAAKkD,SAAS;IAEzF,IAAIjD,UAAU;QACZA,SAASiD,SAAS,GAAGC,IAAAA,mBAAAA,EACnBrD,wBAAwBG,QAAQ,EAChC+C,mBACAF,kBAAkBG,OAAON,oBAAoB,EAC7C1C,SAASiD,SAAS;IAEtB;IAEA,OAAOL;AACT"}

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dialogTitleClassNames: function() {
+        return dialogTitleClassNames;
+    },
+    useDialogTitleInternalStyles: function() {
+        return useDialogTitleInternalStyles;
+    },
+    useDialogTitleStyles_unstable: function() {
+        return useDialogTitleStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const dialogTitleClassNames = {
+    root: 'fui-DialogTitle',
+    action: 'fui-DialogTitle__action'
+};
+/**
+ * Styles for the root slot
+ */ const useRootResetStyles = (0, _react.makeResetStyles)({
+    ..._reacttheme.typographyStyles.subtitle1,
+    margin: 0,
+    gridRowStart: 1,
+    gridRowEnd: 1,
+    gridColumnStart: 1,
+    gridColumnEnd: 3
+});
+const useStyles = (0, _react.makeStyles)({
+    rootWithoutAction: {
+        gridColumnEnd: 4
+    }
+});
+/**
+ * Styles for the action slot
+ */ const useActionResetStyles = (0, _react.makeResetStyles)({
+    gridRowStart: 1,
+    gridRowEnd: 1,
+    gridColumnStart: 3,
+    justifySelf: 'end',
+    alignSelf: 'start'
+});
+const useDialogTitleInternalStyles = (0, _react.makeResetStyles)({
+    ...(0, _reacttabster.createFocusOutlineStyle)(),
+    overflow: 'visible',
+    padding: 0,
+    borderStyle: 'none',
+    position: 'relative',
+    boxSizing: 'content-box',
+    backgroundColor: 'inherit',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    cursor: 'pointer',
+    lineHeight: 0,
+    WebkitAppearance: 'button',
+    textAlign: 'unset'
+});
+const useDialogTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const rootResetStyles = useRootResetStyles();
+    const actionResetStyles = useActionResetStyles();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(dialogTitleClassNames.root, rootResetStyles, !state.action && styles.rootWithoutAction, state.root.className);
+    if (state.action) {
+        state.action.className = (0, _react.mergeClasses)(dialogTitleClassNames.action, actionResetStyles, state.action.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootResetStyles = makeResetStyles({\n  ...typographyStyles.subtitle1,\n  margin: 0,\n  gridRowStart: 1,\n  gridRowEnd: 1,\n  gridColumnStart: 1,\n  gridColumnEnd: 3,\n});\n\nconst useStyles = makeStyles({\n  rootWithoutAction: {\n    gridColumnEnd: 4,\n  },\n});\n\n/**\n * Styles for the action slot\n */\nconst useActionResetStyles = makeResetStyles({\n  gridRowStart: 1,\n  gridRowEnd: 1,\n  gridColumnStart: 3,\n  justifySelf: 'end',\n  alignSelf: 'start',\n});\n\n/**\n * Styles to be applied on internal elements used by default action on non-modal Dialog\n * @internal\n */\nexport const useDialogTitleInternalStyles = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  overflow: 'visible',\n  padding: 0,\n  borderStyle: 'none',\n  position: 'relative',\n  boxSizing: 'content-box',\n  backgroundColor: 'inherit',\n  color: 'inherit',\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  cursor: 'pointer',\n  lineHeight: 0,\n  WebkitAppearance: 'button',\n  textAlign: 'unset',\n});\n\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n  'use no memo';\n\n  const rootResetStyles = useRootResetStyles();\n  const actionResetStyles = useActionResetStyles();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    dialogTitleClassNames.root,\n    rootResetStyles,\n    !state.action && styles.rootWithoutAction,\n    state.root.className,\n  );\n\n  if (state.action) {\n    state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);\n  }\n\n  return state;\n};\n"],"names":["dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable","root","action","useRootResetStyles","makeResetStyles","typographyStyles","subtitle1","margin","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","useStyles","makeStyles","rootWithoutAction","useActionResetStyles","justifySelf","alignSelf","createFocusOutlineStyle","overflow","padding","borderStyle","position","boxSizing","backgroundColor","color","fontFamily","fontSize","cursor","lineHeight","WebkitAppearance","textAlign","state","rootResetStyles","actionResetStyles","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,qBAAAA;eAAAA;;IAsCAC,4BAAAA;eAAAA;;IAoBAC,6BAAAA;eAAAA;;;uBAhE6C;4BAGzB;8BACO;AAEjC,MAAMF,wBAA0D;IACrEG,MAAM;IACNC,QAAQ;AACV;AAEA;;CAEC,GACD,MAAMC,qBAAqBC,IAAAA,sBAAAA,EAAgB;IACzC,GAAGC,4BAAAA,CAAiBC,SAAS;IAC7BC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBC,eAAe;AACjB;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,mBAAmB;QACjBH,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,MAAMI,uBAAuBX,IAAAA,sBAAAA,EAAgB;IAC3CI,cAAc;IACdC,YAAY;IACZC,iBAAiB;IACjBM,aAAa;IACbC,WAAW;AACb;AAMO,MAAMlB,+BAA+BK,IAAAA,sBAAAA,EAAgB;IAC1D,GAAGc,IAAAA,qCAAAA,GAAyB;IAC5BC,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,WAAW;IACXC,iBAAiB;IACjBC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,WAAW;AACb;AAKO,MAAM/B,gCAAgC,CAACgC;IAC5C;IAEA,MAAMC,kBAAkB9B;IACxB,MAAM+B,oBAAoBnB;IAC1B,MAAMoB,SAASvB;IAEfoB,MAAM/B,IAAI,CAACmC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBvC,sBAAsBG,IAAI,EAC1BgC,iBACA,CAACD,MAAM9B,MAAM,IAAIiC,OAAOrB,iBAAiB,EACzCkB,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,IAAIJ,MAAM9B,MAAM,EAAE;QAChB8B,MAAM9B,MAAM,CAACkC,SAAS,GAAGC,IAAAA,mBAAAA,EAAavC,sBAAsBI,MAAM,EAAEgC,mBAAmBF,MAAM9B,MAAM,CAACkC,SAAS;IAC/G;IAEA,OAAOJ;AACT"}

package/lib-commonjs/utils/useDisableBodyScroll.styles.raw.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useBodyNoScrollStyles: function() {
+        return useBodyNoScrollStyles;
+    },
+    useHTMLNoScrollStyles: function() {
+        return useHTMLNoScrollStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useHTMLNoScrollStyles = (0, _react.makeResetStyles)({
+    overflowY: [
+        'hidden',
+        'clip'
+    ],
+    scrollbarGutter: 'stable'
+});
+const useBodyNoScrollStyles = (0, _react.makeResetStyles)({
+    overflowY: 'hidden'
+});

package/lib-commonjs/utils/useDisableBodyScroll.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["useBodyNoScrollStyles","useHTMLNoScrollStyles","makeResetStyles","overflowY","scrollbarGutter"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,qBAAAA;eAAAA;;IALAC,qBAAAA;eAAAA;;;uBAHmB;AAGzB,MAAMA,wBAAwBC,IAAAA,sBAAAA,EAAgB;IACnDC,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB;AAEO,MAAMJ,wBAAwBE,IAAAA,sBAAAA,EAAgB;IACnDC,WAAW;AACb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.13.7",
+  "version": "9.14.0",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,13 +29,13 @@
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-context-selector": "^9.2.2",
     "@fluentui/react-motion": "^9.9.0",
-    "@fluentui/react-motion-components-preview": "^0.6.2",
+    "@fluentui/react-motion-components-preview": "^0.7.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-aria": "^9.15.3",
+    "@fluentui/react-aria": "^9.15.4",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-portal": "^9.6.4",
+    "@fluentui/react-portal": "^9.7.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },