@fluentui/react-dialog 9.5.3 → 9.5.4

package/CHANGELOG.json

@@ -2,7 +2,108 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Mon, 24 Apr 2023 08:09:10 GMT",
+      "date": "Fri, 12 May 2023 20:21:46 GMT",
+      "tag": "@fluentui/react-dialog_v9.5.4",
+      "version": "9.5.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "2f28bd181dfa3114b544f2500d2b653ab31ceecc",
+            "comment": "bugfix: change DialogTitle default action icon from 24x24 to 20x20"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "c28decb23d191a0daaaf6d5d1832429715102129",
+            "comment": "chore: exclude .swcrc from being published"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "9d6394b6c751092fd1d4e26ccc618b5ba05086ec",
+            "comment": "chore: move makeStyles() calls to .styles.ts files"
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "ee977e20d359922798949a4f18af7a036ca36ca3",
+            "comment": "Update to use single hook selector"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.8.1",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.3",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.19",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.4.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.3.19",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.7.0",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-theme to v9.1.8",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.2.7",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21",
+            "commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
+            "comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 24 Apr 2023 08:12:35 GMT",
       "tag": "@fluentui/react-dialog_v9.5.3",
       "version": "9.5.3",
       "comments": {
@@ -29,7 +130,7 @@
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2",
-            "commit": "948b5bf9871303d1742f1b9a17a3bd4006ce2fea"
+            "commit": "505433ac64f144c9cca456097413d6af4582e5ee"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Mon, 24 Apr 2023 08:09:10 GMT and should not be manually modified.
+This log was last generated on Fri, 12 May 2023 20:21:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.4)
+
+Fri, 12 May 2023 20:21:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.3..@fluentui/react-dialog_v9.5.4)
+
+### Patches
+
+- bugfix: change DialogTitle default action icon from 24x24 to 20x20 ([PR #27815](https://github.com/microsoft/fluentui/pull/27815) by bernardo.sunderhus@gmail.com)
+- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
+- chore: move makeStyles() calls to .styles.ts files ([PR #27698](https://github.com/microsoft/fluentui/pull/27698) by olfedias@microsoft.com)
+- Update to use single hook selector ([PR #27491](https://github.com/microsoft/fluentui/pull/27491) by gcox@microsoft.com)
+- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/keyboard-keys to v9.0.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.19 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.4.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-aria to v9.3.19 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-tabster to v9.7.0 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-theme to v9.1.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-portal to v9.2.7 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.21 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
+
 ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.3)
 
-Mon, 24 Apr 2023 08:09:10 GMT 
+Mon, 24 Apr 2023 08:12:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.5.2..@fluentui/react-dialog_v9.5.3)
 
 ### Patches
@@ -14,7 +36,7 @@ Mon, 24 Apr 2023 08:09:10 GMT
 - bugfix: DialogTitle root as h2 by default ([PR #27555](https://github.com/microsoft/fluentui/pull/27555) by bernardo.sunderhus@gmail.com)
 - bugfix: remove caret from react-jsx-runtime prerelease dependency ([PR #27588](https://github.com/microsoft/fluentui/pull/27588) by bernardo.sunderhus@gmail.com)
 - chore: hoist tabster modal attributes to Dialog component ([PR #27541](https://github.com/microsoft/fluentui/pull/27541) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([PR #27632](https://github.com/microsoft/fluentui/pull/27632) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.2 ([commit](https://github.com/microsoft/fluentui/commit/505433ac64f144c9cca456097413d6af4582e5ee) by beachball)
 
 ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.5.2)
 

package/lib/components/DialogActions/DialogActions.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useDialogActions_unstable } from './useDialogActions';
 import { renderDialogActions_unstable } from './renderDialogActions';
-import { useDialogActionsStyles_unstable } from './useDialogActionsStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * `DialogActions` is a container for the actions of the dialog.
  * Apart from styling, this component does not have other behavior.
@@ -10,10 +10,7 @@ import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 export const DialogActions = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDialogActions_unstable(props, ref);
   useDialogActionsStyles_unstable(state);
-  const {
-    useDialogActionsStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);
   return renderDialogActions_unstable(state);
 });
 DialogActions.displayName = 'DialogActions';

package/lib/components/DialogActions/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDialogActions_unstable","renderDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyleHooks_unstable","DialogActions","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/DialogActions/DialogActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n\n  useDialogActionsStyles_unstable(state);\n\n  const { useDialogActionsStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAGhD,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQR,yBAAA,CAA0BM,KAAA,EAAOC,GAAA;EAE/CL,+BAAA,CAAgCM,KAAA;EAEhC,MAAM;IAAEN,+BAAA,EAAiCO;EAAe,CAAE,GAAGN,4BAAA;EAC7DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,4BAAA,CAA6BO,KAAA;AACtC;AAEAJ,aAAA,CAAcM,WAAW,GAAG"}
+{"version":3,"names":["React","useDialogActions_unstable","renderDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyleHook_unstable","DialogActions","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DialogActions/DialogActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n\n  useDialogActionsStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);\n\n  return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAGhD,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQR,yBAAA,CAA0BM,KAAA,EAAOC,GAAA;EAE/CL,+BAAA,CAAgCM,KAAA;EAEhCL,2BAAA,CAA4B,mCAAmCK,KAAA;EAE/D,OAAOP,4BAAA,CAA6BO,KAAA;AACtC;AAEAJ,aAAA,CAAcK,WAAW,GAAG"}

package/lib/components/DialogActions/index.js

@@ -2,5 +2,5 @@ export * from './DialogActions';
 export * from './DialogActions.types';
 export * from './renderDialogActions';
 export * from './useDialogActions';
-export * from './useDialogActionsStyles';
+export * from './useDialogActionsStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DialogActions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DialogActions/index.ts"],"sourcesContent":["export * from './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DialogActions/index.ts"],"sourcesContent":["export * from './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DialogActions/{useDialogActionsStyles.js → useDialogActionsStyles.styles.js}

@@ -49,4 +49,4 @@ export const useDialogActionsStyles_unstable = state => {
   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);
   return state;
 };
-//# sourceMappingURL=useDialogActionsStyles.js.map
+//# sourceMappingURL=useDialogActionsStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","DIALOG_GAP","ACTIONS_END_GRID_AREA","ACTIONS_START_GRID_AREA","MEDIA_QUERY_BREAKPOINT_SELECTOR","dialogActionsClassNames","root","useStyles","Bqenvij","B7ck84d","mc9l5x","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Ijaq50","Br312pm","nk6f5a","Bw0ie65","gridPositionStart","fluidStart","fluidEnd","d","m","useDialogActionsStyles_unstable","state","styles","className","position","fluid"],"sources":["../../../src/components/DialogActions/useDialogActionsStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  DIALOG_GAP,\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n  root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    height: 'fit-content',\n    boxSizing: 'border-box',\n    display: 'flex',\n    ...shorthands.gap(DIALOG_GAP),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      flexDirection: 'column',\n      justifySelf: 'stretch',\n    },\n  },\n  gridPositionEnd: {\n    justifySelf: 'end',\n    ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n  },\n  gridPositionStart: {\n    justifySelf: 'start',\n    ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n  },\n  fluidStart: {\n    gridColumnEnd: ACTIONS_END_GRID_AREA,\n  },\n  fluidEnd: {\n    gridColumnStart: ACTIONS_START_GRID_AREA,\n  },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogActionsClassNames.root,\n    styles.root,\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SACEC,UAAU,EACVC,qBAAqB,EACrBC,uBAAuB,EACvBC,+BAA+B,QAC1B;AAEP,OAAO,MAAMC,uBAAA,GAA8D;EACzEC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYT,QAAA;EAAAQ,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,iBAAA;IAAAL,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAE,UAAA;IAAAF,OAAA;EAAA;EAAAG,QAAA;IAAAL,OAAA;EAAA;AAAA;EAAAM,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAyBlB;AAEA;;;AAGA,OAAO,MAAMC,+BAAA,GAAmCC,KAAA,IAAkD;EAChG,MAAMC,MAAA,GAASrB,SAAA;EACfoB,KAAA,CAAMrB,IAAI,CAACuB,SAAS,GAAG9B,YAAA,CACrBM,uBAAA,CAAwBC,IAAI,EAC5BsB,MAAA,CAAOtB,IAAI,EACXqB,KAAA,CAAMG,QAAQ,KAAK,WAAWF,MAAA,CAAOP,iBAAiB,EACtDM,KAAA,CAAMG,QAAQ,KAAK,SAASF,MAAA,CAAOb,eAAe,EAClDY,KAAA,CAAMI,KAAK,IAAIJ,KAAA,CAAMG,QAAQ,KAAK,WAAWF,MAAA,CAAON,UAAU,EAC9DK,KAAA,CAAMI,KAAK,IAAIJ,KAAA,CAAMG,QAAQ,KAAK,SAASF,MAAA,CAAOL,QAAQ,EAC1DI,KAAA,CAAMrB,IAAI,CAACuB,SAAS;EAEtB,OAAOF,KAAA;AACT"}

package/lib/components/DialogBody/DialogBody.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useDialogBody_unstable } from './useDialogBody';
 import { renderDialogBody_unstable } from './renderDialogBody';
-import { useDialogBodyStyles_unstable } from './useDialogBodyStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * The `DialogBody` is a container where the content of the dialog is rendered.
  * Apart from styling, this component does not have other behavior.
@@ -10,10 +10,7 @@ import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 export const DialogBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDialogBody_unstable(props, ref);
   useDialogBodyStyles_unstable(state);
-  const {
-    useDialogBodyStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);
   return renderDialogBody_unstable(state);
 });
 DialogBody.displayName = 'DialogBody';

package/lib/components/DialogBody/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDialogBody_unstable","renderDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHooks_unstable","DialogBody","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/DialogBody/DialogBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n\n  useDialogBodyStyles_unstable(state);\n\n  const { useDialogBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAG7C,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,UAAA,gBAAmDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQR,sBAAA,CAAuBM,KAAA,EAAOC,GAAA;EAE5CL,4BAAA,CAA6BM,KAAA;EAE7B,MAAM;IAAEN,4BAAA,EAA8BO;EAAe,CAAE,GAAGN,4BAAA;EAC1DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,yBAAA,CAA0BO,KAAA;AACnC;AAEAJ,UAAA,CAAWM,WAAW,GAAG"}
+{"version":3,"names":["React","useDialogBody_unstable","renderDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHook_unstable","DialogBody","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DialogBody/DialogBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n\n  useDialogBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);\n\n  return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAG7C,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,UAAA,gBAAmDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQR,sBAAA,CAAuBM,KAAA,EAAOC,GAAA;EAE5CL,4BAAA,CAA6BM,KAAA;EAE7BL,2BAAA,CAA4B,gCAAgCK,KAAA;EAE5D,OAAOP,yBAAA,CAA0BO,KAAA;AACnC;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}

package/lib/components/DialogBody/index.js

@@ -2,5 +2,5 @@ export * from './DialogBody';
 export * from './DialogBody.types';
 export * from './renderDialogBody';
 export * from './useDialogBody';
-export * from './useDialogBodyStyles';
+export * from './useDialogBodyStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DialogBody/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DialogBody/index.ts"],"sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DialogBody/index.ts"],"sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DialogBody/{useDialogBodyStyles.js → useDialogBodyStyles.styles.js}

@@ -41,4 +41,4 @@ export const useDialogBodyStyles_unstable = state => {
   state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);
   return state;
 };
-//# sourceMappingURL=useDialogBodyStyles.js.map
+//# sourceMappingURL=useDialogBodyStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","ACTIONS_END_GRID_AREA","ACTIONS_START_GRID_AREA","CONTENT_GRID_AREA","DIALOG_GAP","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_PADDING","TITLE_ACTION_GRID_AREA","TITLE_GRID_AREA","dialogBodyClassNames","root","useStyles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","wkccdc","Budl1dq","zoa1oz","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","B5xtmjs","Bqu9lor","B06wobe","d","m","useDialogBodyStyles_unstable","state","styles","className"],"sources":["../../../src/components/DialogBody/useDialogBodyStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  CONTENT_GRID_AREA,\n  DIALOG_GAP,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  SURFACE_PADDING,\n  TITLE_ACTION_GRID_AREA,\n  TITLE_GRID_AREA,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'grid',\n    '&::backdrop': {\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n    boxSizing: 'border-box',\n    gridTemplateRows: 'auto 1fr auto',\n    gridTemplateColumns: '1fr 1fr auto',\n    gridTemplateAreas: `\n    \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n    \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n    \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n    `,\n    ...shorthands.overflow('unset'),\n    ...shorthands.gap(DIALOG_GAP),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      maxWidth: '100vw',\n      gridTemplateRows: 'auto 1fr auto auto',\n      gridTemplateAreas: `\n        \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n        \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n        \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n        \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n      `,\n    },\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SACEC,qBAAqB,EACrBC,uBAAuB,EACvBC,iBAAiB,EACjBC,UAAU,EACVC,+BAA+B,EAC/BC,eAAe,EACfC,sBAAsB,EACtBC,eAAe,QACV;AAEP,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYb,QAAA;EAAAY,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA4BlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA4C;EACvF,MAAMC,MAAA,GAASnB,SAAA;EACfkB,KAAA,CAAMnB,IAAI,CAACqB,SAAS,GAAGhC,YAAA,CAAaU,oBAAA,CAAqBC,IAAI,EAAEoB,MAAA,CAAOpB,IAAI,EAAEmB,KAAA,CAAMnB,IAAI,CAACqB,SAAS;EAEhG,OAAOF,KAAA;AACT"}

package/lib/components/DialogContent/DialogContent.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useDialogContent_unstable } from './useDialogContent';
 import { renderDialogContent_unstable } from './renderDialogContent';
-import { useDialogContentStyles_unstable } from './useDialogContentStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * The `DialogContent` is a container where the content of the dialog is rendered.
  * Apart from styling, this component does not have other behavior.
@@ -10,10 +10,7 @@ import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 export const DialogContent = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDialogContent_unstable(props, ref);
   useDialogContentStyles_unstable(state);
-  const {
-    useDialogContentStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);
   return renderDialogContent_unstable(state);
 });
 DialogContent.displayName = 'DialogContent';

package/lib/components/DialogContent/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHooks_unstable","DialogContent","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n  const state = useDialogContent_unstable(props, ref);\n\n  useDialogContentStyles_unstable(state);\n\n  const { useDialogContentStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAGhD,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQR,yBAAA,CAA0BM,KAAA,EAAOC,GAAA;EAE/CL,+BAAA,CAAgCM,KAAA;EAEhC,MAAM;IAAEN,+BAAA,EAAiCO;EAAe,CAAE,GAAGN,4BAAA;EAC7DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,4BAAA,CAA6BO,KAAA;AACtC;AAEAJ,aAAA,CAAcM,WAAW,GAAG"}
+{"version":3,"names":["React","useDialogContent_unstable","renderDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","DialogContent","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DialogContent/DialogContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n  const state = useDialogContent_unstable(props, ref);\n\n  useDialogContentStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n\n  return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAGhD,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQR,yBAAA,CAA0BM,KAAA,EAAOC,GAAA;EAE/CL,+BAAA,CAAgCM,KAAA;EAEhCL,2BAAA,CAA4B,mCAAmCK,KAAA;EAE/D,OAAOP,4BAAA,CAA6BO,KAAA;AACtC;AAEAJ,aAAA,CAAcK,WAAW,GAAG"}

package/lib/components/DialogContent/index.js

@@ -2,5 +2,5 @@ export * from './DialogContent';
 export * from './DialogContent.types';
 export * from './renderDialogContent';
 export * from './useDialogContent';
-export * from './useDialogContentStyles';
+export * from './useDialogContentStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DialogContent/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DialogContent/index.ts"],"sourcesContent":["export * from './DialogContent';\nexport * from './DialogContent.types';\nexport * from './renderDialogContent';\nexport * from './useDialogContent';\nexport * from './useDialogContentStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DialogContent/index.ts"],"sourcesContent":["export * from './DialogContent';\nexport * from './DialogContent.types';\nexport * from './renderDialogContent';\nexport * from './useDialogContent';\nexport * from './useDialogContentStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DialogContent/{useDialogContentStyles.js → useDialogContentStyles.styles.js}

@@ -40,4 +40,4 @@ export const useDialogContentStyles_unstable = state => {
   state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);
   return state;
 };
-//# sourceMappingURL=useDialogContentStyles.js.map
+//# sourceMappingURL=useDialogContentStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","CONTENT_GRID_AREA","tokens","typographyStyles","dialogContentClassNames","root","useStyles","Bmxbyg5","sshi5w","B7ck84d","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useDialogContentStyles_unstable","state","styles","className"],"sources":["../../../src/components/DialogContent/useDialogContentStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogContentSlots, DialogContentState } from './DialogContent.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { CONTENT_GRID_AREA } from '../../contexts/constants';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n  root: 'fui-DialogContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    overflowY: 'auto',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    ...shorthands.padding(tokens.strokeWidthThick),\n    ...shorthands.margin(`calc(${tokens.strokeWidthThick} * -1)`),\n    ...shorthands.gridArea(CONTENT_GRID_AREA),\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the DialogContent slots based on the state\n */\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,iBAAiB,QAAQ;AAClC,SAASC,MAAM,EAAEC,gBAAgB,QAAQ;AAEzC,OAAO,MAAMC,uBAAA,GAA8D;EACzEC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYR,QAAA;EAAAO,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAUlB;AAEA;;;AAGA,OAAO,MAAMC,+BAAA,GAAmCC,KAAA,IAAkD;EAChG,MAAMC,MAAA,GAASvB,SAAA;EACfsB,KAAA,CAAMvB,IAAI,CAACyB,SAAS,GAAG/B,YAAA,CAAaK,uBAAA,CAAwBC,IAAI,EAAEwB,MAAA,CAAOxB,IAAI,EAAEuB,KAAA,CAAMvB,IAAI,CAACyB,SAAS;EACnG,OAAOF,KAAA;AACT"}

package/lib/components/DialogSurface/DialogSurface.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useDialogSurface_unstable } from './useDialogSurface';
 import { renderDialogSurface_unstable } from './renderDialogSurface';
-import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';
+import { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';
 import { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DialogSurface component represents the visual part of a `Dialog` as a whole,
  * it contains everything that should be visible.
@@ -12,10 +12,7 @@ export const DialogSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDialogSurface_unstable(props, ref);
   const contextValues = useDialogSurfaceContextValues_unstable(state);
   useDialogSurfaceStyles_unstable(state);
-  const {
-    useDialogSurfaceStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);
   return renderDialogSurface_unstable(state, contextValues);
 });
 DialogSurface.displayName = 'DialogSurface';

package/lib/components/DialogSurface/DialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHooks_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = useDialogSurface_unstable(props, ref);\n  const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n  useDialogSurfaceStyles_unstable(state);\n\n  const { useDialogSurfaceStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAGhD,SAASC,sCAAsC,QAAQ;AACvD,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQT,yBAAA,CAA0BO,KAAA,EAAOC,GAAA;EAC/C,MAAME,aAAA,GAAgBP,sCAAA,CAAuCM,KAAA;EAE7DP,+BAAA,CAAgCO,KAAA;EAEhC,MAAM;IAAEP,+BAAA,EAAiCS;EAAe,CAAE,GAAGP,4BAAA;EAC7DO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,4BAAA,CAA6BQ,KAAA,EAAOC,aAAA;AAC7C;AAEAL,aAAA,CAAcO,WAAW,GAAG"}
+{"version":3,"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogSurface_unstable } from './useDialogSurface';\nimport { renderDialogSurface_unstable } from './renderDialogSurface';\nimport { useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nimport type { DialogSurfaceProps } from './DialogSurface.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DialogSurface component represents the visual part of a `Dialog` as a whole,\n * it contains everything that should be visible.\n */\nexport const DialogSurface: ForwardRefComponent<DialogSurfaceProps> = React.forwardRef((props, ref) => {\n  const state = useDialogSurface_unstable(props, ref);\n  const contextValues = useDialogSurfaceContextValues_unstable(state);\n\n  useDialogSurfaceStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogSurfaceStyles_unstable')(state);\n\n  return renderDialogSurface_unstable(state, contextValues);\n});\n\nDialogSurface.displayName = 'DialogSurface';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAGhD,SAASC,sCAAsC,QAAQ;AACvD,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,aAAA,gBAAyDN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrG,MAAMC,KAAA,GAAQT,yBAAA,CAA0BO,KAAA,EAAOC,GAAA;EAC/C,MAAME,aAAA,GAAgBP,sCAAA,CAAuCM,KAAA;EAE7DP,+BAAA,CAAgCO,KAAA;EAEhCL,2BAAA,CAA4B,mCAAmCK,KAAA;EAE/D,OAAOR,4BAAA,CAA6BQ,KAAA,EAAOC,aAAA;AAC7C;AAEAL,aAAA,CAAcM,WAAW,GAAG"}

package/lib/components/DialogSurface/index.js

@@ -2,5 +2,5 @@ export * from './DialogSurface';
 export * from './DialogSurface.types';
 export * from './renderDialogSurface';
 export * from './useDialogSurface';
-export * from './useDialogSurfaceStyles';
+export * from './useDialogSurfaceStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DialogSurface/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DialogSurface/index.ts"],"sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DialogSurface/index.ts"],"sourcesContent":["export * from './DialogSurface';\nexport * from './DialogSurface.types';\nexport * from './renderDialogSurface';\nexport * from './useDialogSurface';\nexport * from './useDialogSurfaceStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DialogSurface/{useDialogSurfaceStyles.js → useDialogSurfaceStyles.styles.js}

@@ -121,4 +121,4 @@ export const useDialogSurfaceStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDialogSurfaceStyles.js.map
+//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","useDialogContext_unstable","dialogSurfaceClassNames","root","backdrop","useStyles","focusOutline","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","mc9l5x","famaaq","Bcdw1i0","Bhzewxz","j35jbq","B5kzvoi","oyh7mz","z8tnut","z189sj","Byoj8tv","uwmqm3","B6of3ja","t21cq0","jrapky","Frg6f3","icvyot","vrafjx","oivjwe","wvpqe5","B68tc82","Bmxbyg5","fshzfu","qhf8xq","Bqenvij","B2u0y6b","Bxyxcbc","B7ck84d","E5pizo","De3pzq","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B5xtmjs","nestedDialogBackdrop","nestedNativeDialogBackdrop","f","i","d","m","useDialogSurfaceStyles_unstable","state","styles","isNestedDialog","ctx","className"],"sources":["../../../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n  useDialogContext_unstable,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  focusOutline: createFocusOutlineStyle(),\n  root: {\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    ...shorthands.inset(0),\n    ...shorthands.padding(0),\n    ...shorthands.padding(SURFACE_PADDING),\n    ...shorthands.margin('auto'),\n    ...shorthands.borderStyle('none'),\n    ...shorthands.overflow('unset'),\n    '&::backdrop': {\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    boxShadow: tokens.shadow64,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      maxWidth: '100vw',\n    },\n  },\n  backdrop: {\n    position: 'fixed',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    ...shorthands.inset('0px'),\n  },\n  nestedDialogBackdrop: {\n    backgroundColor: 'transparent',\n  },\n  nestedNativeDialogBackdrop: {\n    '&::backdrop': {\n      backgroundColor: 'transparent',\n    },\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  const styles = useStyles();\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n  state.root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    styles.root,\n    styles.focusOutline,\n    isNestedDialog && styles.nestedNativeDialogBackdrop,\n    state.root.className,\n  );\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      styles.backdrop,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      state.backdrop.className,\n    );\n  }\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAErD,SAASC,MAAM,QAAQ;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SACEC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,EACfC,yBAAyB,QACpB;AAGP,OAAO,MAAMC,uBAAA,GAA8D;EACzEC,IAAA,EAAM;EACNC,QAAA,EAAU;AACZ;AAEA;;;AAGA,MAAMC,SAAA,gBAAYZ,QAAA;EAAAa,YAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAjC,IAAA;IAAAkC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA3E,QAAA;IAAAuD,MAAA;IAAAM,MAAA;IAAAzB,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAqC,oBAAA;IAAAf,MAAA;EAAA;EAAAgB,0BAAA;IAAAvB,MAAA;EAAA;AAAA;EAAAwB,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,EA0ClB;AAEA;;;AAGA,OAAO,MAAMC,+BAAA,GAAmCC,KAAA,IAAkD;EAChG,MAAMC,MAAA,GAASnF,SAAA;EACf,MAAMoF,cAAA,GAAiBxF,yBAAA,CAA0ByF,GAAA,IAAOA,GAAA,CAAID,cAAc;EAE1EF,KAAA,CAAMpF,IAAI,CAACwF,SAAS,GAAGjG,YAAA,CACrBQ,uBAAA,CAAwBC,IAAI,EAC5BqF,MAAA,CAAOrF,IAAI,EACXqF,MAAA,CAAOlF,YAAY,EACnBmF,cAAA,IAAkBD,MAAA,CAAOP,0BAA0B,EACnDM,KAAA,CAAMpF,IAAI,CAACwF,SAAS;EAEtB,IAAIJ,KAAA,CAAMnF,QAAQ,EAAE;IAClBmF,KAAA,CAAMnF,QAAQ,CAACuF,SAAS,GAAGjG,YAAA,CACzBQ,uBAAA,CAAwBE,QAAQ,EAChCoF,MAAA,CAAOpF,QAAQ,EACfqF,cAAA,IAAkBD,MAAA,CAAOR,oBAAoB,EAC7CO,KAAA,CAAMnF,QAAQ,CAACuF,SAAS;EAE5B;EACA,OAAOJ,KAAA;AACT"}

package/lib/components/DialogTitle/DialogTitle.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useDialogTitle_unstable } from './useDialogTitle';
 import { renderDialogTitle_unstable } from './renderDialogTitle';
-import { useDialogTitleStyles_unstable } from './useDialogTitleStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * The `DialogTitle` component expects to have a title/header
  * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
@@ -10,10 +10,7 @@ import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 export const DialogTitle = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDialogTitle_unstable(props, ref);
   useDialogTitleStyles_unstable(state);
-  const {
-    useDialogTitleStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);
   return renderDialogTitle_unstable(state);
 });
 DialogTitle.displayName = 'DialogTitle';

package/lib/components/DialogTitle/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHooks_unstable","DialogTitle","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDialogTitle_unstable(props, ref);\n\n  useDialogTitleStyles_unstable(state);\n\n  const { useDialogTitleStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,4BAA4B,QAAQ;AAE7C;;;;AAIA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9B,MAAM;IAAEN,6BAAA,EAA+BO;EAAe,CAAE,GAAGN,4BAAA;EAC3DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYM,WAAW,GAAG"}
+{"version":3,"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTitle_unstable } from './useDialogTitle';\nimport { renderDialogTitle_unstable } from './renderDialogTitle';\nimport { useDialogTitleStyles_unstable } from './useDialogTitleStyles.styles';\nimport type { DialogTitleProps } from './DialogTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `DialogTitle` component expects to have a title/header\n * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDialogTitle_unstable(props, ref);\n\n  useDialogTitleStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDialogTitleStyles_unstable')(state);\n\n  return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,2BAA2B,QAAQ;AAE5C;;;;AAIA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}

package/lib/components/DialogTitle/index.js

@@ -2,5 +2,5 @@ export * from './DialogTitle';
 export * from './DialogTitle.types';
 export * from './renderDialogTitle';
 export * from './useDialogTitle';
-export * from './useDialogTitleStyles';
+export * from './useDialogTitleStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DialogTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DialogTitle/index.ts"],"sourcesContent":["export * from './DialogTitle';\nexport * from './DialogTitle.types';\nexport * from './renderDialogTitle';\nexport * from './useDialogTitle';\nexport * from './useDialogTitleStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DialogTitle/index.ts"],"sourcesContent":["export * from './DialogTitle';\nexport * from './DialogTitle.types';\nexport * from './renderDialogTitle';\nexport * from './useDialogTitle';\nexport * from './useDialogTitleStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DialogTitle/useDialogTitle.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { getNativeElementProps } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '../../contexts/dialogContext';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { Dismiss20Regular } from '@fluentui/react-icons';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
-import { useDialogTitleInternalStyles } from './useDialogTitleStyles';
+import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
 /**
  * Create the state required to render DialogTitle.
  *
@@ -42,7 +42,7 @@ export const useDialogTitle_unstable = (props, ref) => {
           className: internalStyles.button,
           // TODO: find a better way to add internal labels
           "aria-label": "close"
-        }, /*#__PURE__*/React.createElement(Dismiss24Regular, null)))
+        }, /*#__PURE__*/React.createElement(Dismiss20Regular, null)))
       }
     })
   };

package/lib/components/DialogTitle/useDialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss24Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","createElement","disableButtonEnhancement","type","className","button"],"sources":["../../../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n  const { as, action } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n\n  return {\n    components: {\n      root: 'h2',\n      action: 'div',\n    },\n    root: getNativeElementProps(as ?? 'h2', {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n      ...props,\n    }),\n    action: resolveShorthand(action, {\n      required: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger disableButtonEnhancement action=\"close\">\n            <button\n              type=\"button\"\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss24Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,4BAA4B,QAAQ;AAE7C;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,EAAA;IAAIC;EAAM,CAAE,GAAGH,KAAA;EACvB,MAAMI,SAAA,GAAYV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,cAAA,GAAiBR,4BAAA;EAEvB,OAAO;IACLS,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,MAAA,EAAQ;IACV;IACAK,IAAA,EAAMf,qBAAA,CAAsBS,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,IAAI,EAAE;MACtCD,GAAA;MACAQ,EAAA,EAAIf,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIK,aAAa;MACtD,GAAGV;IACL;IACAG,MAAA,EAAQP,gBAAA,CAAiBO,MAAA,EAAQ;MAC/BQ,QAAA,EAAUP,SAAA,KAAc;MACxBQ,YAAA,EAAc;QACZC,QAAA,eACErB,KAAA,CAAAsB,aAAA,CAACjB,aAAA;UAAckB,wBAAA,MAAwB;UAACZ,MAAA,EAAO;wBAC7CX,KAAA,CAAAsB,aAAA,CAAC;UACCE,IAAA,EAAK;UACLC,SAAA,EAAWX,cAAA,CAAeY,MAAM;UAChC;UACA,cAAW;wBAEX1B,KAAA,CAAAsB,aAAA,CAACnB,gBAAA;MAIT;IACF;EACF;AACF"}
+{"version":3,"names":["React","getNativeElementProps","useDialogContext_unstable","Dismiss20Regular","resolveShorthand","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","as","action","modalType","ctx","internalStyles","components","root","id","dialogTitleId","required","defaultProps","children","createElement","disableButtonEnhancement","type","className","button"],"sources":["../../../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { DialogTrigger } from '../DialogTrigger/DialogTrigger';\nimport { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';\n\n/**\n * Create the state required to render DialogTitle.\n *\n * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,\n * before being passed to renderDialogTitle_unstable.\n *\n * @param props - props from this instance of DialogTitle\n * @param ref - reference to root HTMLElement of DialogTitle\n */\nexport const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLElement>): DialogTitleState => {\n  const { as, action } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const internalStyles = useDialogTitleInternalStyles();\n\n  return {\n    components: {\n      root: 'h2',\n      action: 'div',\n    },\n    root: getNativeElementProps(as ?? 'h2', {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n      ...props,\n    }),\n    action: resolveShorthand(action, {\n      required: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger disableButtonEnhancement action=\"close\">\n            <button\n              type=\"button\"\n              className={internalStyles.button}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss20Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,aAAa,QAAQ;AAC9B,SAASC,4BAA4B,QAAQ;AAE7C;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC,EAAA;IAAIC;EAAM,CAAE,GAAGH,KAAA;EACvB,MAAMI,SAAA,GAAYV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,cAAA,GAAiBR,4BAAA;EAEvB,OAAO;IACLS,UAAA,EAAY;MACVC,IAAA,EAAM;MACNL,MAAA,EAAQ;IACV;IACAK,IAAA,EAAMf,qBAAA,CAAsBS,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,IAAI,EAAE;MACtCD,GAAA;MACAQ,EAAA,EAAIf,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIK,aAAa;MACtD,GAAGV;IACL;IACAG,MAAA,EAAQP,gBAAA,CAAiBO,MAAA,EAAQ;MAC/BQ,QAAA,EAAUP,SAAA,KAAc;MACxBQ,YAAA,EAAc;QACZC,QAAA,eACErB,KAAA,CAAAsB,aAAA,CAACjB,aAAA;UAAckB,wBAAA,MAAwB;UAACZ,MAAA,EAAO;wBAC7CX,KAAA,CAAAsB,aAAA,CAAC;UACCE,IAAA,EAAK;UACLC,SAAA,EAAWX,cAAA,CAAeY,MAAM;UAChC;UACA,cAAW;wBAEX1B,KAAA,CAAAsB,aAAA,CAACnB,gBAAA;MAIT;IACF;EACF;AACF"}

package/lib/components/DialogTitle/{useDialogTitleStyles.js → useDialogTitleStyles.styles.js}

@@ -112,4 +112,4 @@ export const useDialogTitleStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDialogTitleStyles.js.map
+//# sourceMappingURL=useDialogTitleStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","typographyStyles","TITLE_ACTION_GRID_AREA","TITLE_GRID_AREA","createFocusOutlineStyle","dialogTitleClassNames","root","action","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","B6of3ja","t21cq0","jrapky","Frg6f3","rootWithoutCloseButton","d","useDialogTitleInternalStyles","button","qhf8xq","B7ck84d","De3pzq","sj55zd","Bceei9c","B68tc82","Bmxbyg5","z8tnut","z189sj","Byoj8tv","uwmqm3","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","f","i","useDialogTitleStyles_unstable","state","styles","className"],"sources":["../../../src/components/DialogTitle/useDialogTitleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\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 useStyles = makeStyles({\n  root: {\n    ...typographyStyles.subtitle1,\n    ...shorthands.gridArea(TITLE_GRID_AREA),\n    ...shorthands.margin(0),\n  },\n  rootWithoutCloseButton: {\n    ...shorthands.gridArea(TITLE_GRID_AREA, TITLE_GRID_AREA, TITLE_ACTION_GRID_AREA, TITLE_ACTION_GRID_AREA),\n  },\n  action: {\n    ...shorthands.gridArea(TITLE_ACTION_GRID_AREA),\n  },\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 = makeStyles({\n  button: {\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    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n    ...createFocusOutlineStyle(),\n  },\n});\n\n/**\n * Apply styling to the DialogTitle slots based on the state\n */\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogTitleClassNames.root,\n    styles.root,\n    !state.action && styles.rootWithoutCloseButton,\n    state.root.className,\n  );\n  if (state.action) {\n    state.action.className = mergeClasses(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,SAASC,gBAAgB,QAAQ;AACjC,SAASC,sBAAsB,EAAEC,eAAe,QAAQ;AACxD,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,MAAA,EAAQ;AACV;AAEA;;;AAGA,MAAMC,SAAA,gBAAYV,QAAA;EAAAQ,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,sBAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAT,MAAA;IAAAM,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;AAAA,EAYlB;AAEA;;;;AAIA,OAAO,MAAMC,4BAAA,gBAA+BzB,QAAA;EAAA0B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAnB,OAAA;IAAAC,OAAA;IAAAmB,OAAA;IAAAjB,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAjD,CAAA;EAAAkD,CAAA;EAAAC,CAAA;AAAA,EAiB5C;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAASpE,SAAA;EACfmE,KAAA,CAAMrE,IAAI,CAACuE,SAAS,GAAG9E,YAAA,CACrBM,qBAAA,CAAsBC,IAAI,EAC1BsE,MAAA,CAAOtE,IAAI,EACX,CAACqE,KAAA,CAAMpE,MAAM,IAAIqE,MAAA,CAAOvD,sBAAsB,EAC9CsD,KAAA,CAAMrE,IAAI,CAACuE,SAAS;EAEtB,IAAIF,KAAA,CAAMpE,MAAM,EAAE;IAChBoE,KAAA,CAAMpE,MAAM,CAACsE,SAAS,GAAG9E,YAAA,CAAaM,qBAAA,CAAsBE,MAAM,EAAEqE,MAAA,CAAOrE,MAAM,EAAEoE,KAAA,CAAMpE,MAAM,CAACsE,SAAS;EAC3G;EACA,OAAOF,KAAA;AACT"}

package/lib/components/DialogTrigger/DialogTrigger.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDialogTrigger_unstable } from './useDialogTrigger';
+import { useDialogTrigger_unstable } from './useDialogTrigger.styles';
 import { renderDialogTrigger_unstable } from './renderDialogTrigger';
 /**
  * A non-visual component that wraps its child

package/lib/components/DialogTrigger/DialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"sources":["../../../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\n * Besides being a trigger that opens/close a dialog through context this component doesn't do much,\n * making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> = props => {\n  const state = useDialogTrigger_unstable(props);\n\n  return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(DialogTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAI7C;;;;;;;;;AASA,OAAO,MAAMC,aAAA,GAA8CC,KAAA,IAAS;EAClE,MAAMC,KAAA,GAAQJ,yBAAA,CAA0BG,KAAA;EAExC,OAAOF,4BAAA,CAA6BG,KAAA;AACtC;AAEAF,aAAA,CAAcG,WAAW,GAAG;AAC5B;AACCH,aAAA,CAAyCI,wBAAwB,GAAG,IAAI"}
+{"version":3,"names":["React","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"sources":["../../../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDialogTrigger_unstable } from './useDialogTrigger.styles';\nimport { renderDialogTrigger_unstable } from './renderDialogTrigger';\nimport type { DialogTriggerProps } from './DialogTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A non-visual component that wraps its child\n * and configures them to be the trigger that will open or close a `Dialog`.\n * This component should only accept one child.\n *\n * This component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\n * Besides being a trigger that opens/close a dialog through context this component doesn't do much,\n * making it basically unnecessary in cases where the trigger is outside of the `Dialog` component.\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> = props => {\n  const state = useDialogTrigger_unstable(props);\n\n  return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(DialogTrigger as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAI7C;;;;;;;;;AASA,OAAO,MAAMC,aAAA,GAA8CC,KAAA,IAAS;EAClE,MAAMC,KAAA,GAAQJ,yBAAA,CAA0BG,KAAA;EAExC,OAAOF,4BAAA,CAA6BG,KAAA;AACtC;AAEAF,aAAA,CAAcG,WAAW,GAAG;AAC5B;AACCH,aAAA,CAAyCI,wBAAwB,GAAG,IAAI"}

package/lib/components/DialogTrigger/index.js

@@ -1,5 +1,5 @@
 export * from './DialogTrigger';
 export * from './DialogTrigger.types';
 export * from './renderDialogTrigger';
-export * from './useDialogTrigger';
+export * from './useDialogTrigger.styles';
 //# sourceMappingURL=index.js.map