@fluentui/react-dialog 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogContent/renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState): JSXElement => {\n  assertSlots<DialogContentSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDialogContent_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../../../src/components/DialogContent/renderDialogContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState): JSXElement => {\n  assertSlots<DialogContentSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDialogContent_unstable","state","root"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3CF,YAAgCE;IAEhC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogContent/useDialogContent.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogContentProps, DialogContentState } from './DialogContent.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogContent_unstable = (\n  props: DialogContentProps,\n  ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(props.as ?? 'div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useDialogContent_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;QAO6BD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyBG,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/DialogContent/useDialogContent.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogContentProps, DialogContentState } from './DialogContent.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogContent_unstable = (\n  props: DialogContentProps,\n  ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(props.as ?? 'div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useDialogContent_unstable","props","ref","components","root","always","as","elementType"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;QAO6BD;IAL7B,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,0BAAyBG,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAY,OAAO;YAC1C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import styles from "./DialogContent.module.css";
+export const dialogContentClassNames = {
+    root: 'fui-DialogContent'
+};
+export const useDialogContentStyles_unstable = (state)=>{
+    state.root.className = clsx(dialogContentClassNames.root, styles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialogContent/useDialogContentStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\nimport styles from './DialogContent.module.css';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n  root: 'fui-DialogContent',\n};\n\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n  state.root.className = clsx(dialogContentClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["clsx","styles","dialogContentClassNames","root","useDialogContentStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,6BAA6B;AAEhD,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9CA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,wBAAwBC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAC3F,OAAOD;AACT,EAAE"}

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

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import styles from "./DialogContent.module.css";
+export const dialogContentClassNames = {
+    root: 'fui-DialogContent'
+};
+export const useDialogContentStyles_unstable = (state)=>{
+    state.root.className = clsx(dialogContentClassNames.root, styles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialogContent/useDialogContentStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\nimport styles from './DialogContent.module.css';\n\nexport const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {\n  root: 'fui-DialogContent',\n};\n\nexport const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {\n  state.root.className = clsx(dialogContentClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["clsx","styles","dialogContentClassNames","root","useDialogContentStyles_unstable","state","className"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,6BAA6B;AAEhD,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9CA,MAAMF,IAAI,CAACG,SAAS,GAAGN,KAAKE,wBAAwBC,IAAI,EAAEF,OAAOE,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAC3F,OAAOD;AACT,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,+BAA+B,QAAQ,qCAAkC;AAGlF,SAASC,sCAAsC,QAAQ,qCAAkC;AACzF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DP,gCAAgCO;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/DialogSurface/DialogSurface.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","useDialogSurface_unstable","renderDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","useCustomStyleHook_unstable","DialogSurface","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,+BAA+B,QAAQ,qCAAkC;AAGlF,SAASC,sCAAsC,QAAQ,qCAAkC;AACzF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DP,gCAAgCO;IAEhCL,4BAA4B,mCAAmCK;IAE/D,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

package/lib/components/DialogSurface/DialogSurface.module.css

@@ -0,0 +1,70 @@
+@layer fluentui {
+  .root {
+    &:focus {
+      outline-style: none;
+    }
+    &:focus-visible {
+      outline-style: none;
+    }
+    &[data-fui-focus-visible] {
+      border-color: transparent;
+      &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        z-index: 1;
+        border: 2px solid var(--colorStrokeFocus2);
+        border-radius: var(--borderRadiusMedium);
+        inset: -2px;
+      }
+      @media (forced-colors: active) {
+        &::after {
+          border-color: Highlight;
+        }
+      }
+    }
+    inset: 0;
+    padding: var(--spacingHorizontalXXL);
+    margin: auto;
+    border-style: none;
+    overflow: unset;
+    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+    border-radius: var(--borderRadiusXLarge);
+    display: block;
+    user-select: unset;
+    visibility: unset;
+    position: fixed;
+    height: fit-content;
+    max-width: 600px;
+    max-height: 100vh;
+    max-height: 100dvh;
+    box-sizing: border-box;
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+    box-shadow: var(--shadow64);
+    @media screen and (max-width: 480px) {
+      max-width: 100vw;
+    }
+    @media screen and (max-height: 359px) {
+      overflow-y: auto;
+      padding-inline-end: calc(var(--spacingHorizontalXXL) - var(--spacingHorizontalXS));
+      border-inline-end-width: var(--spacingHorizontalXS);
+      border-top-width: var(--spacingHorizontalXS);
+      border-bottom-width: var(--spacingHorizontalXS);
+    }
+  }
+
+  .backdrop {
+    inset: 0px;
+    background-color: var(--colorBackgroundOverlay);
+    position: fixed;
+  }
+
+  .transparent {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  .hidden {
+    pointer-events: none;
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { FadeParams } from '@fluentui/react-motion-components-preview';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';\n\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\n/**\n * Custom slot props for the backdrop slot.\n */\nexport type DialogBackdropSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Controls the backdrop appearance.\n     * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)\n     * - 'transparent': Shows a transparent backdrop (default for nested dialogs)\n     */\n    appearance?: 'dimmed' | 'transparent';\n  }\n>;\n\nexport type DialogSurfaceSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default backdrop is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default backdrop.\n   * The backdrop should have `aria-hidden=\"true\"`.\n   *\n   * Accepts an `appearance` prop to control backdrop visibility:\n   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n   * - `'transparent'`: Always shows a transparent backdrop.\n   *\n   * @example\n   * ```tsx\n   * <DialogSurface backdrop={{ appearance: 'dimmed' }} />\n   * ```\n   */\n  backdrop?: Slot<DialogBackdropSlotProps>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps<FadeParams>>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n    /**\n     * Whether the backdrop should be treated as nested (transparent).\n     * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,\n     * preventing the false-positive transparent backdrop.\n     */\n    treatBackdropAsNested: boolean;\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n    backdropAppearance?: DialogBackdropSlotProps['appearance'];\n  };\n"],"names":[],"mappings":"AA4DA;;CAEC,GACD,WAoBI"}
+{"version":3,"sources":["../../../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { FadeParams } from '@fluentui/react-motion-components-preview';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';\n\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\n/**\n * Custom slot props for the backdrop slot.\n */\nexport type DialogBackdropSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Controls the backdrop appearance.\n     * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)\n     * - 'transparent': Shows a transparent backdrop (default for nested dialogs)\n     */\n    appearance?: 'dimmed' | 'transparent';\n  }\n>;\n\nexport type DialogSurfaceSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default backdrop is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default backdrop.\n   * The backdrop should have `aria-hidden=\"true\"`.\n   *\n   * Accepts an `appearance` prop to control backdrop visibility:\n   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n   * - `'transparent'`: Always shows a transparent backdrop.\n   *\n   * @example\n   * ```tsx\n   * <DialogSurface backdrop={{ appearance: 'dimmed' }} />\n   * ```\n   */\n  backdrop?: Slot<DialogBackdropSlotProps>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps<FadeParams>>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n    /**\n     * Whether the backdrop should be treated as nested (transparent).\n     * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,\n     * preventing the false-positive transparent backdrop.\n     */\n    treatBackdropAsNested: boolean;\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n    backdropAppearance?: DialogBackdropSlotProps['appearance'];\n  };\n"],"names":[],"mappings":"AA4DA;;CAEC,GACD,WAoBI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,qBAAkB;AAShD,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,qCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,qCAAkC"}
+{"version":3,"sources":["../../../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,qBAAkB;AAShD,SAASC,4BAA4B,QAAQ,2BAAwB;AACrE,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,qCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,qCAAkC"}

package/lib/components/DialogSurface/renderDialogSurface.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { MotionRefForwarderReset } from "@fluentui/react-motion";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { MotionRefForwarderReset } from "@fluentui/react-motion";
 import { Portal } from "@fluentui/react-portal";
 import { assertSlots } from "@fluentui/react-utilities";
 import { DialogSurfaceProvider } from "../../contexts/index.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MotionRefForwarderReset } from '@fluentui/react-motion';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n  state: DialogSurfaceState,\n  contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n  assertSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      {state.backdrop &&\n        // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n        // FIXME: this should be resolved by properly splitting props and state slots declaration\n        state.backdropMotion && (\n          <state.backdropMotion>\n            <state.backdrop />\n          </state.backdropMotion>\n        )}\n      <MotionRefForwarderReset>\n        <DialogSurfaceProvider value={contextValues.dialogSurface}>\n          <state.root />\n        </DialogSurfaceProvider>\n      </MotionRefForwarderReset>\n    </Portal>\n  );\n};\n"],"names":["MotionRefForwarderReset","Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,0BAAiB;AAGvD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,MAACJ;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,kBAClB,KAACJ,MAAMI,cAAc;0BACnB,cAAA,KAACJ,MAAMG,QAAQ;;0BAGrB,KAACR;0BACC,cAAA,KAACG;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,cAAA,KAACN,MAAMO,IAAI;;;;;AAKrB,EAAE"}
+{"version":3,"sources":["../../../src/components/DialogSurface/renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MotionRefForwarderReset } from '@fluentui/react-motion';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (\n  state: DialogSurfaceState,\n  contextValues: DialogSurfaceContextValues,\n): JSXElement => {\n  assertSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      {state.backdrop &&\n        // TODO: state.backdropMotion is non nullable, but assertSlots asserts it as nullable\n        // FIXME: this should be resolved by properly splitting props and state slots declaration\n        state.backdropMotion && (\n          <state.backdropMotion>\n            <state.backdrop />\n          </state.backdropMotion>\n        )}\n      <MotionRefForwarderReset>\n        <DialogSurfaceProvider value={contextValues.dialogSurface}>\n          <state.root />\n        </DialogSurfaceProvider>\n      </MotionRefForwarderReset>\n    </Portal>\n  );\n};\n"],"names":["MotionRefForwarderReset","Portal","assertSlots","DialogSurfaceProvider","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","backdropMotion","value","dialogSurface","root"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,qBAAqB,QAAQ,0BAAiB;AAGvD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,MAACJ;QAAOM,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,IACb,qFAAqF;YACrF,yFAAyF;YACzFH,MAAMI,cAAc,kBAClB,KAACJ,MAAMI,cAAc;0BACnB,cAAA,KAACJ,MAAMG,QAAQ;;0BAGrB,KAACR;0BACC,cAAA,KAACG;oBAAsBO,OAAOJ,cAAcK,aAAa;8BACvD,cAAA,KAACN,MAAMO,IAAI;;;;;AAKrB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const contextRef = useMotionForwardedRef();\n\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n  const backdropOverride = useDialogBackdropContext_unstable();\n  const treatBackdropAsNested = backdropOverride ?? isNestedDialog;\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.preventDefault();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n\n  const backdropAppearance = backdrop?.appearance;\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n    // remove backdrop.appearance so it is not passed to the DOM\n    delete backdrop.appearance;\n  }\n\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      enableBodyScroll();\n      return;\n    }\n\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => enableBodyScroll();\n  }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n      backdropMotion: DialogBackdropMotion,\n    },\n    open,\n    backdrop,\n    isNestedDialog,\n    treatBackdropAsNested,\n    backdropAppearance,\n    unmountOnClose,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-modal': modalType !== 'non-modal',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        // FIXME:\n        // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n    backdropMotion: presenceMotionSlot(props.backdropMotion, {\n      elementType: DialogBackdropMotion,\n      defaultProps: {\n        appear: unmountOnClose,\n        visible: open,\n      },\n    }),\n\n    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","useDialogContext_unstable","useDialogBackdropContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","backdropOverride","treatBackdropAsNested","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","backdropAppearance","appearance","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nimport { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const contextRef = useMotionForwardedRef();\n\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n  const backdropOverride = useDialogBackdropContext_unstable();\n  const treatBackdropAsNested = backdropOverride ?? isNestedDialog;\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.preventDefault();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n\n  const backdropAppearance = backdrop?.appearance;\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n    // remove backdrop.appearance so it is not passed to the DOM\n    delete backdrop.appearance;\n  }\n\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      enableBodyScroll();\n      return;\n    }\n\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => enableBodyScroll();\n  }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n      backdropMotion: DialogBackdropMotion,\n    },\n    open,\n    backdrop,\n    isNestedDialog,\n    treatBackdropAsNested,\n    backdropAppearance,\n    unmountOnClose,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-modal': modalType !== 'non-modal',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        // FIXME:\n        // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n    backdropMotion: presenceMotionSlot(props.backdropMotion, {\n      elementType: DialogBackdropMotion,\n      defaultProps: {\n        appear: unmountOnClose,\n        visible: open,\n      },\n    }),\n\n    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","useDialogContext_unstable","useDialogBackdropContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","backdropOverride","treatBackdropAsNested","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","backdropAppearance","appearance","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,0BAA0B;AACjD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,EACxBC,yBAAyB,QACpB,4BAA4B;AAGnC,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,0BAAiB;AAC9F,SAASC,oBAAoB,QAAQ,sCAAmC;AACxE,SAASC,oBAAoB,QAAQ,6BAA0B;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAG/D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaJ;IAEnB,MAAMK,YAAYT,0BAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBX,0BAA0BU,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,mBAAmBX;IACzB,MAAMY,wBAAwBD,6BAAAA,8BAAAA,mBAAoBD;IAElD,MAAMG,kBAAkBd,0BAA0BU,CAAAA,MAAOA,IAAII,eAAe;IAC5E,MAAMC,YAAYf,0BAA0BU,CAAAA,MAAOA,IAAIK,SAAS;IAChE,MAAMC,oBAAoBhB,0BAA0BU,CAAAA,MAAOA,IAAIM,iBAAiB;IAChF,MAAMC,gBAAgBjB,0BAA0BU,CAAAA,MAAOA,IAAIQ,aAAa;IACxE,MAAMC,OAAOnB,0BAA0BU,CAAAA,MAAOA,IAAIS,IAAI;IACtD,MAAMC,iBAAiBpB,0BAA0BU,CAAAA,MAAOA,IAAIU,cAAc;IAE1E,MAAMC,uBAAuB3B,iBAAiB,CAAC4B;QAC7C,IAAI1B,oBAAoBU,MAAMiB,QAAQ,GAAG;gBACvCjB,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMiB,QAAQ,EAACC,OAAO,cAAtBlB,8CAAAA,6BAAAA,iBAAyBgB;QAC3B;QACA,IAAIb,cAAc,WAAW,CAACa,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBjC,iBAAiB,CAAC4B;YACtChB;SAAAA,mBAAAA,MAAMsB,SAAS,cAAftB,uCAAAA,sBAAAA,OAAkBgB;QAElB,IAAIA,MAAMO,GAAG,KAAKrC,UAAU,CAAC8B,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAW1B,KAAKkC,QAAQ,CAACzB,MAAMiB,QAAQ,EAAE;QAC7CS,iBAAiBvB,cAAc;QAC/BwB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,MAAMC,qBAAqBZ,qBAAAA,+BAAAA,SAAUa,UAAU;IAE/C,IAAIb,UAAU;QACZA,SAASC,OAAO,GAAGH;QACnB,4DAA4D;QAC5D,OAAOE,SAASa,UAAU;IAC5B;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGpC;IAEhDH,0BAA0B;QACxB,IAAI,CAACoB,MAAM;YACTmB;YACA;QACF;QAEA,IAAI3B,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEA4B;QAEA,OAAO,IAAMC;IACf,GAAG;QAACnB;QAAMV;QAAWE;QAAgB0B;QAAmBC;KAAiB;IAEzE,OAAO;QACLC,YAAY;YACVhB,UAAU;YACViB,MAAM;YACNC,gBAAgBtC;QAClB;QACAgB;QACAI;QACAZ;QACAE;QACAsB;QACAf;QACAsB,WAAWpC,MAAMoC,SAAS;QAC1BF,MAAM3C,KAAK8C,MAAM,CACf7C,yBAAyB,OAAO;YAC9B8C,UAAU,CAAC;YACXC,MAAMpC,cAAc,UAAU,gBAAgB;YAC9C,cAAcA,cAAc;YAC5B,mBAAmBH,KAAK,CAAC,aAAa,GAAGwC,YAAY7B;YACrD,eAAe,CAACG,kBAAkB,CAACD,OAAO,OAAO2B;YACjD,GAAGxC,KAAK;YACR,GAAGQ,eAAe;YAClBc,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FpB,KAAKZ,cAAcY,KAAKC,YAAYO;QACtC,IACA;YAAEmB,aAAa;QAAM;QAEvBO,gBAAgBhD,mBAAmBa,MAAMmC,cAAc,EAAE;YACvDP,aAAa/B;YACb8B,cAAc;gBACZc,QAAQ3B;gBACR4B,SAAS7B;YACX;QACF;QAEA,wBAAwB;QACxB8B,kBAAkBH;IACpB;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceContextValues.ts"],"sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n  const dialogSurface: DialogSurfaceContextValue = true;\n\n  return { dialogSurface };\n}\n"],"names":["useDialogSurfaceContextValues_unstable","state","dialogSurface"],"mappings":"AAGA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}
+{"version":3,"sources":["../../../src/components/DialogSurface/useDialogSurfaceContextValues.ts"],"sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n  const dialogSurface: DialogSurfaceContextValue = true;\n\n  return { dialogSurface };\n}\n"],"names":["useDialogSurfaceContextValues_unstable","state","dialogSurface"],"mappings":"AAGA,OAAO,SAASA,uCAAuCC,KAAyB;IAC9E,MAAMC,gBAA2C;IAEjD,OAAO;QAAEA;IAAc;AACzB"}

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

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+import styles from "./DialogSurface.module.css";
+export const dialogSurfaceClassNames = {
+    root: 'fui-DialogSurface',
+    backdrop: 'fui-DialogSurface__backdrop'
+};
+export const useDialogSurfaceStyles_unstable = (state)=>{
+    const mountedAndClosed = !state.unmountOnClose && !state.open;
+    const transparent = state.backdropAppearance ? state.backdropAppearance === 'transparent' : state.treatBackdropAsNested;
+    state.root.className = clsx(dialogSurfaceClassNames.root, styles.root, mountedAndClosed && styles.hidden, state.root.className);
+    if (state.backdrop) {
+        state.backdrop.className = clsx(dialogSurfaceClassNames.backdrop, styles.backdrop, mountedAndClosed && styles.hidden, transparent && styles.transparent, state.backdrop.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialogSurface/useDialogSurfaceStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots } from './DialogSurface.types';\nimport styles from './DialogSurface.module.css';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  const mountedAndClosed = !state.unmountOnClose && !state.open;\n  const transparent = state.backdropAppearance\n    ? state.backdropAppearance === 'transparent'\n    : state.treatBackdropAsNested;\n  state.root.className = clsx(\n    dialogSurfaceClassNames.root,\n    styles.root,\n    mountedAndClosed && styles.hidden,\n    state.root.className,\n  );\n  if (state.backdrop) {\n    state.backdrop.className = clsx(\n      dialogSurfaceClassNames.backdrop,\n      styles.backdrop,\n      mountedAndClosed && styles.hidden,\n      transparent && styles.transparent,\n      state.backdrop.className,\n    );\n  }\n  return state;\n};\n"],"names":["clsx","styles","dialogSurfaceClassNames","root","backdrop","useDialogSurfaceStyles_unstable","state","mountedAndClosed","unmountOnClose","open","transparent","backdropAppearance","treatBackdropAsNested","className","hidden"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,6BAA6B;AAEhD,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,MAAMC,mBAAmB,CAACD,MAAME,cAAc,IAAI,CAACF,MAAMG,IAAI;IAC7D,MAAMC,cAAcJ,MAAMK,kBAAkB,GACxCL,MAAMK,kBAAkB,KAAK,gBAC7BL,MAAMM,qBAAqB;IAC/BN,MAAMH,IAAI,CAACU,SAAS,GAAGb,KACrBE,wBAAwBC,IAAI,EAC5BF,OAAOE,IAAI,EACXI,oBAAoBN,OAAOa,MAAM,EACjCR,MAAMH,IAAI,CAACU,SAAS;IAEtB,IAAIP,MAAMF,QAAQ,EAAE;QAClBE,MAAMF,QAAQ,CAACS,SAAS,GAAGb,KACzBE,wBAAwBE,QAAQ,EAChCH,OAAOG,QAAQ,EACfG,oBAAoBN,OAAOa,MAAM,EACjCJ,eAAeT,OAAOS,WAAW,EACjCJ,MAAMF,QAAQ,CAACS,SAAS;IAE5B;IACA,OAAOP;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+import styles from "./DialogSurface.module.css";
+export const dialogSurfaceClassNames = {
+    root: 'fui-DialogSurface',
+    backdrop: 'fui-DialogSurface__backdrop'
+};
+export const useDialogSurfaceStyles_unstable = (state)=>{
+    const mountedAndClosed = !state.unmountOnClose && !state.open;
+    const transparent = state.backdropAppearance ? state.backdropAppearance === 'transparent' : state.treatBackdropAsNested;
+    state.root.className = clsx(dialogSurfaceClassNames.root, styles.root, mountedAndClosed && styles.hidden, state.root.className);
+    if (state.backdrop) {
+        state.backdrop.className = clsx(dialogSurfaceClassNames.backdrop, styles.backdrop, mountedAndClosed && styles.hidden, transparent && styles.transparent, state.backdrop.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialogSurface/useDialogSurfaceStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots } from './DialogSurface.types';\nimport styles from './DialogSurface.module.css';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  const mountedAndClosed = !state.unmountOnClose && !state.open;\n  const transparent = state.backdropAppearance\n    ? state.backdropAppearance === 'transparent'\n    : state.treatBackdropAsNested;\n  state.root.className = clsx(\n    dialogSurfaceClassNames.root,\n    styles.root,\n    mountedAndClosed && styles.hidden,\n    state.root.className,\n  );\n  if (state.backdrop) {\n    state.backdrop.className = clsx(\n      dialogSurfaceClassNames.backdrop,\n      styles.backdrop,\n      mountedAndClosed && styles.hidden,\n      transparent && styles.transparent,\n      state.backdrop.className,\n    );\n  }\n  return state;\n};\n"],"names":["clsx","styles","dialogSurfaceClassNames","root","backdrop","useDialogSurfaceStyles_unstable","state","mountedAndClosed","unmountOnClose","open","transparent","backdropAppearance","treatBackdropAsNested","className","hidden"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,6BAA6B;AAEhD,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,MAAMC,mBAAmB,CAACD,MAAME,cAAc,IAAI,CAACF,MAAMG,IAAI;IAC7D,MAAMC,cAAcJ,MAAMK,kBAAkB,GACxCL,MAAMK,kBAAkB,KAAK,gBAC7BL,MAAMM,qBAAqB;IAC/BN,MAAMH,IAAI,CAACU,SAAS,GAAGb,KACrBE,wBAAwBC,IAAI,EAC5BF,OAAOE,IAAI,EACXI,oBAAoBN,OAAOa,MAAM,EACjCR,MAAMH,IAAI,CAACU,SAAS;IAEtB,IAAIP,MAAMF,QAAQ,EAAE;QAClBE,MAAMF,QAAQ,CAACS,SAAS,GAAGb,KACzBE,wBAAwBE,QAAQ,EAChCH,OAAOG,QAAQ,EACfG,oBAAoBN,OAAOa,MAAM,EACjCJ,eAAeT,OAAOS,WAAW,EACjCJ,MAAMF,QAAQ,CAACS,SAAS;IAE5B;IACA,OAAOP;AACT,EAAE"}

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

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

package/lib/components/DialogSurfaceMotion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n  outScale: 0.85,\n  easing: motionTokens.curveDecelerateMid,\n  duration: motionTokens.durationGentle,\n  exitEasing: motionTokens.curveAccelerateMin,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","outScale","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":"AAAA,SAASA,8BAA8B,EAAEC,YAAY,QAAQ,yBAAyB;AACtF,SAASC,KAAK,QAAQ,4CAA4C;AAElE,OAAO,MAAMC,sBAAsBH,+BAA+BE,OAAO;IACvEE,UAAU;IACVC,QAAQJ,aAAaK,kBAAkB;IACvCC,UAAUN,aAAaO,cAAc;IACrCC,YAAYR,aAAaS,kBAAkB;IAC3CC,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}
+{"version":3,"sources":["../../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n  outScale: 0.85,\n  easing: motionTokens.curveDecelerateMid,\n  duration: motionTokens.durationGentle,\n  exitEasing: motionTokens.curveAccelerateMin,\n  exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","outScale","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":"AAAA,SAASA,8BAA8B,EAAEC,YAAY,QAAQ,yBAAyB;AACtF,SAASC,KAAK,QAAQ,4CAA4C;AAElE,OAAO,MAAMC,sBAAsBH,+BAA+BE,OAAO;IACvEE,UAAU;IACVC,QAAQJ,aAAaK,kBAAkB;IACvCC,UAAUN,aAAaO,cAAc;IACrCC,YAAYR,aAAaS,kBAAkB;IAC3CC,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/DialogTitle/DialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","useDialogTitle_unstable","renderDialogTitle_unstable","useDialogTitleStyles_unstable","useCustomStyleHook_unstable","DialogTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/DialogTitle/DialogTitle.module.css

@@ -0,0 +1,64 @@
+@layer fluentui {
+  .root {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase500);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase500);
+    margin: 0;
+    grid-row-start: 1;
+    grid-row-end: 1;
+    grid-column-start: 1;
+    grid-column-end: 3;
+  }
+
+  .withoutAction {
+    grid-column-end: 4;
+  }
+
+  .action {
+    grid-row-start: 1;
+    grid-row-end: 1;
+    grid-column-start: 3;
+    justify-self: end;
+    align-self: start;
+  }
+
+  .internalAction {
+    &:focus {
+      outline-style: none;
+    }
+    &:focus-visible {
+      outline-style: none;
+    }
+    &[data-fui-focus-visible] {
+      border-color: transparent;
+      &::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        z-index: 1;
+        border: 2px solid var(--colorStrokeFocus2);
+        border-radius: var(--borderRadiusMedium);
+        inset: -2px;
+      }
+      @media (forced-colors: active) {
+        &::after {
+          border-color: Highlight;
+        }
+      }
+    }
+    overflow: visible;
+    padding: 0;
+    border-style: none;
+    position: relative;
+    box-sizing: content-box;
+    background-color: inherit;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    line-height: 0;
+    -webkit-appearance: button;
+    text-align: unset;
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTitle/DialogTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n  /**\n   * By default this is a h2, but can be any heading or div,\n   * if `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n  /**\n   * By default a Dialog with modalType='non-modal' will have a close button action\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots>;\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAAgE"}
+{"version":3,"sources":["../../../src/components/DialogTitle/DialogTitle.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DialogTitleSlots = {\n  /**\n   * By default this is a h2, but can be any heading or div,\n   * if `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes\n   */\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n  /**\n   * By default a Dialog with modalType='non-modal' will have a close button action\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * DialogTitle Props\n */\nexport type DialogTitleProps = ComponentProps<DialogTitleSlots>;\n\n/**\n * State used in rendering DialogTitle\n */\nexport type DialogTitleState = ComponentState<DialogTitleSlots>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAAgE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTitle/index.ts"],"sourcesContent":["export { DialogTitle } from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nexport { renderDialogTitle_unstable } from './renderDialogTitle';\nexport { useDialogTitle_unstable } from './useDialogTitle';\nexport {\n  dialogTitleClassNames,\n  useDialogTitleInternalStyles,\n  useDialogTitleStyles_unstable,\n} from './useDialogTitleStyles.styles';\n"],"names":["DialogTitle","renderDialogTitle_unstable","useDialogTitle_unstable","dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SACEC,qBAAqB,EACrBC,4BAA4B,EAC5BC,6BAA6B,QACxB,mCAAgC"}
+{"version":3,"sources":["../../../src/components/DialogTitle/index.ts"],"sourcesContent":["export { DialogTitle } from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nexport { renderDialogTitle_unstable } from './renderDialogTitle';\nexport { useDialogTitle_unstable } from './useDialogTitle';\nexport {\n  dialogTitleClassNames,\n  useDialogTitleInternalStyles,\n  useDialogTitleStyles_unstable,\n} from './useDialogTitleStyles.styles';\n"],"names":["DialogTitle","renderDialogTitle_unstable","useDialogTitle_unstable","dialogTitleClassNames","useDialogTitleInternalStyles","useDialogTitleStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SACEC,qBAAqB,EACrBC,4BAA4B,EAC5BC,6BAA6B,QACxB,mCAAgC"}

package/lib/components/DialogTitle/renderDialogTitle.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of DialogTitle
  */ export const renderDialogTitle_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTitle/renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState): JSXElement => {\n  assertSlots<DialogTitleSlots>(state);\n\n  return (\n    <>\n      <state.root>{state.root.children}</state.root>\n      {state.action && <state.action />}\n    </>\n  );\n};\n"],"names":["assertSlots","renderDialogTitle_unstable","state","root","children","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE;;0BACE,KAACA,MAAMC,IAAI;0BAAED,MAAMC,IAAI,CAACC,QAAQ;;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}
+{"version":3,"sources":["../../../src/components/DialogTitle/renderDialogTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState): JSXElement => {\n  assertSlots<DialogTitleSlots>(state);\n\n  return (\n    <>\n      <state.root>{state.root.children}</state.root>\n      {state.action && <state.action />}\n    </>\n  );\n};\n"],"names":["assertSlots","renderDialogTitle_unstable","state","root","children","action"],"mappings":";AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE;;0BACE,KAACA,MAAMC,IAAI;0BAAED,MAAMC,IAAI,CAACC,QAAQ;;YAC/BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\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<HTMLDivElement>): DialogTitleState => {\n  const { 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: slot.always(\n      getIntrinsicElementProps('h2', {\n        ref,\n        id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n        ...props,\n      }),\n      { elementType: 'h2' },\n    ),\n    action: slot.optional(action, {\n      renderByDefault: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger disableButtonEnhancement action=\"close\">\n            <button\n              type=\"button\"\n              className={internalStyles}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss20Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,kCAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,mCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,YAAYR,0BAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP;IAEvB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMb,KAAKc,MAAM,CACff,yBAAyB,MAAM;YAC7BQ;YACAQ,IAAId,0BAA0BS,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGV,KAAK;QACV,IACA;YAAEW,aAAa;QAAK;QAEtBT,QAAQR,KAAKkB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAAClB;oBAAcmB,0BAAAA;oBAAyBd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,oBAACxB;YAIT;YACAe,aAAa;QACf;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/DialogTitle/useDialogTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\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<HTMLDivElement>): DialogTitleState => {\n  const { 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: slot.always(\n      getIntrinsicElementProps('h2', {\n        ref,\n        id: useDialogContext_unstable(ctx => ctx.dialogTitleId),\n        ...props,\n      }),\n      { elementType: 'h2' },\n    ),\n    action: slot.optional(action, {\n      renderByDefault: modalType === 'non-modal',\n      defaultProps: {\n        children: (\n          <DialogTrigger disableButtonEnhancement action=\"close\">\n            <button\n              type=\"button\"\n              className={internalStyles}\n              // TODO: find a better way to add internal labels\n              aria-label=\"close\"\n            >\n              <Dismiss20Regular />\n            </button>\n          </DialogTrigger>\n        ),\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useDialogContext_unstable","Dismiss20Regular","DialogTrigger","useDialogTitleInternalStyles","useDialogTitle_unstable","props","ref","action","modalType","ctx","internalStyles","components","root","always","id","dialogTitleId","elementType","optional","renderByDefault","defaultProps","children","disableButtonEnhancement","button","type","className","aria-label"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,yBAAyB,QAAQ,kCAA+B;AACzE,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,4BAA4B,QAAQ,mCAAgC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,YAAYR,0BAA0BS,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP;IAEvB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNL,QAAQ;QACV;QACAK,MAAMb,KAAKc,MAAM,CACff,yBAAyB,MAAM;YAC7BQ;YACAQ,IAAId,0BAA0BS,CAAAA,MAAOA,IAAIM,aAAa;YACtD,GAAGV,KAAK;QACV,IACA;YAAEW,aAAa;QAAK;QAEtBT,QAAQR,KAAKkB,QAAQ,CAACV,QAAQ;YAC5BW,iBAAiBV,cAAc;YAC/BW,cAAc;gBACZC,wBACE,oBAAClB;oBAAcmB,0BAAAA;oBAAyBd,QAAO;iCAC7C,oBAACe;oBACCC,MAAK;oBACLC,WAAWd;oBACX,iDAAiD;oBACjDe,cAAW;iCAEX,oBAACxB;YAIT;YACAe,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import styles from "./DialogTitle.module.css";
+export const dialogTitleClassNames = {
+    root: 'fui-DialogTitle',
+    action: 'fui-DialogTitle__action'
+};
+export const useDialogTitleInternalStyles = ()=>styles.internalAction;
+export const useDialogTitleStyles_unstable = (state)=>{
+    state.root.className = clsx(dialogTitleClassNames.root, styles.root, !state.action && styles.withoutAction, state.root.className);
+    if (state.action) {
+        state.action.className = clsx(dialogTitleClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialogTitle/useDialogTitleStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\nimport styles from './DialogTitle.module.css';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action',\n};\n\nexport const useDialogTitleInternalStyles = (): string => styles.internalAction;\n\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n  state.root.className = clsx(\n    dialogTitleClassNames.root,\n    styles.root,\n    !state.action && styles.withoutAction,\n    state.root.className,\n  );\n  if (state.action) {\n    state.action.className = clsx(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n"],"names":["clsx","styles","dialogTitleClassNames","root","action","useDialogTitleInternalStyles","internalAction","useDialogTitleStyles_unstable","state","className","withoutAction"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,OAAO,MAAMC,+BAA+B,IAAcJ,OAAOK,cAAc,CAAC;AAEhF,OAAO,MAAMC,gCAAgC,CAACC;IAC5CA,MAAML,IAAI,CAACM,SAAS,GAAGT,KACrBE,sBAAsBC,IAAI,EAC1BF,OAAOE,IAAI,EACX,CAACK,MAAMJ,MAAM,IAAIH,OAAOS,aAAa,EACrCF,MAAML,IAAI,CAACM,SAAS;IAEtB,IAAID,MAAMJ,MAAM,EAAE;QAChBI,MAAMJ,MAAM,CAACK,SAAS,GAAGT,KAAKE,sBAAsBE,MAAM,EAAEH,OAAOG,MAAM,EAAEI,MAAMJ,MAAM,CAACK,SAAS;IACnG;IACA,OAAOD;AACT,EAAE"}

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

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import styles from "./DialogTitle.module.css";
+export const dialogTitleClassNames = {
+    root: 'fui-DialogTitle',
+    action: 'fui-DialogTitle__action'
+};
+export const useDialogTitleInternalStyles = ()=>styles.internalAction;
+export const useDialogTitleStyles_unstable = (state)=>{
+    state.root.className = clsx(dialogTitleClassNames.root, styles.root, !state.action && styles.withoutAction, state.root.className);
+    if (state.action) {
+        state.action.className = clsx(dialogTitleClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialogTitle/useDialogTitleStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\nimport styles from './DialogTitle.module.css';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n  root: 'fui-DialogTitle',\n  action: 'fui-DialogTitle__action',\n};\n\nexport const useDialogTitleInternalStyles = (): string => styles.internalAction;\n\nexport const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTitleState => {\n  state.root.className = clsx(\n    dialogTitleClassNames.root,\n    styles.root,\n    !state.action && styles.withoutAction,\n    state.root.className,\n  );\n  if (state.action) {\n    state.action.className = clsx(dialogTitleClassNames.action, styles.action, state.action.className);\n  }\n  return state;\n};\n"],"names":["clsx","styles","dialogTitleClassNames","root","action","useDialogTitleInternalStyles","internalAction","useDialogTitleStyles_unstable","state","className","withoutAction"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,OAAO,MAAMC,+BAA+B,IAAcJ,OAAOK,cAAc,CAAC;AAEhF,OAAO,MAAMC,gCAAgC,CAACC;IAC5CA,MAAML,IAAI,CAACM,SAAS,GAAGT,KACrBE,sBAAsBC,IAAI,EAC1BF,OAAOE,IAAI,EACX,CAACK,MAAMJ,MAAM,IAAIH,OAAOS,aAAa,EACrCF,MAAML,IAAI,CAACM,SAAS;IAEtB,IAAID,MAAMJ,MAAM,EAAE;QAChBI,MAAMJ,MAAM,CAACK,SAAS,GAAGT,KAAKE,sBAAsBE,MAAM,EAAEH,OAAOG,MAAM,EAAEI,MAAMJ,MAAM,CAACK,SAAS;IACnG;IACA,OAAOD;AACT,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["'use client';\n\nimport type * 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"],"names":["useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAGA,SAASA,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,2BAAwB;AAIrE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gBAA8CC,CAAAA;IACzD,MAAMC,QAAQJ,0BAA0BG;IAExC,OAAOF,6BAA6BG;AACtC,EAAE;AAEFF,cAAcG,WAAW,GAAG;AAC5B,6FAA6F;AAC5FH,cAAyCI,wBAAwB,GAAG"}
+{"version":3,"sources":["../../../src/components/DialogTrigger/DialogTrigger.tsx"],"sourcesContent":["'use client';\n\nimport type * 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"],"names":["useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogTrigger","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAGA,SAASA,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,2BAAwB;AAIrE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gBAA8CC,CAAAA;IACzD,MAAMC,QAAQJ,0BAA0BG;IAExC,OAAOF,6BAA6BG;AACtC,EAAE;AAEFF,cAAcG,WAAW,GAAG;AAC5B,6FAA6F;AAC5FH,cAAyCI,wBAAwB,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogTrigger/DialogTrigger.types.ts"],"sourcesContent":["import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {\n  /**\n   * Explicitly declare if the trigger is responsible for opening or\n   * closing a Dialog visibility state.\n   *\n   * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default\n   *\n   * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default\n   */\n  action?: DialogTriggerAction;\n  /**\n   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n   * @default false\n   */\n  disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-haspopup'?: 'dialog';\n  }\n>;\n\nexport type DialogTriggerState = {\n  children: React.ReactElement | null;\n};\n"],"names":[],"mappings":"AAiCA,WAEE"}
+{"version":3,"sources":["../../../src/components/DialogTrigger/DialogTrigger.types.ts"],"sourcesContent":["import type { ARIAButtonResultProps, ARIAButtonType } from '@fluentui/react-aria';\nimport type { TriggerProps } from '@fluentui/react-utilities';\nimport type * as React from 'react';\n\nexport type DialogTriggerAction = 'open' | 'close';\n\nexport type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {\n  /**\n   * Explicitly declare if the trigger is responsible for opening or\n   * closing a Dialog visibility state.\n   *\n   * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default\n   *\n   * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default\n   */\n  action?: DialogTriggerAction;\n  /**\n   * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.\n   * @default false\n   */\n  disableButtonEnhancement?: boolean;\n};\n\n/**\n * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog\n */\nexport type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<\n  Type,\n  Props & {\n    'aria-haspopup'?: 'dialog';\n  }\n>;\n\nexport type DialogTriggerState = {\n  children: React.ReactElement | null;\n};\n"],"names":[],"mappings":"AAiCA,WAEE"}