@fluentui/react-dialog 9.5.2 → 9.5.4

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","isEscapeKeyDismiss","useModalAttributes","useDialogSurface_unstable","props","ref","backdrop","as","modalType","ctx","inertTrapFocus","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","stopPropagation","modalAttributes","trapFocus","legacyTrapFocus","components","root","required","defaultProps","tabIndex","role","undefined"],"sources":["../../../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  resolveShorthand,\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss } from '../../utils';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 { backdrop, as } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const inertTrapFocus = useDialogContext_unstable(ctx => ctx.inertTrapFocus);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\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 (isEscapeKeyDismiss(event, modalType)) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.stopPropagation();\n    }\n  });\n\n  const { modalAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n    },\n    backdrop: resolveShorthand(backdrop, {\n      required: open && modalType !== 'non-modal',\n      defaultProps: {\n        'aria-hidden': 'true',\n        onClick: handledBackdropClick,\n      },\n    }),\n    root: getNativeElementProps(as ?? 'div', {\n      tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n      'aria-modal': modalType !== 'non-modal',\n      role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n      ...props,\n      ...modalAttributes,\n      onKeyDown: handleKeyDown,\n      ref: useMergedRefs(ref, dialogRef),\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,QACd;AAEP,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AACnC,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,QAAA;IAAUC;EAAE,CAAE,GAAGH,KAAA;EACzB,MAAMI,SAAA,GAAYR,yBAAA,CAA0BS,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,cAAA,GAAiBV,yBAAA,CAA0BS,GAAA,IAAOA,GAAA,CAAIC,cAAc;EAC1E,MAAMC,SAAA,GAAYX,yBAAA,CAA0BS,GAAA,IAAOA,GAAA,CAAIE,SAAS;EAChE,MAAMC,IAAA,GAAOZ,yBAAA,CAA0BS,GAAA,IAAOA,GAAA,CAAIG,IAAI;EACtD,MAAMC,iBAAA,GAAoBb,yBAAA,CAA0BS,GAAA,IAAOA,GAAA,CAAII,iBAAiB;EAChF,MAAMC,aAAA,GAAgBd,yBAAA,CAA0BS,GAAA,IAAOA,GAAA,CAAIM,aAAa;EAExE,MAAMC,oBAAA,GAAuBnB,gBAAA,CAAkBoB,KAAA,IAA4C;IACzF,IAAIlB,mBAAA,CAAoBK,KAAA,CAAME,QAAQ,GAAG;UACvCY,eAAA,EAAAC,uBAAA;MAAA,CAAAA,uBAAA,IAAAD,eAAA,GAAAd,KAAA,CAAME,QAAQ,EAACc,OAAO,cAAtBD,uBAAA,uBAAAA,uBAAA,CAAAE,IAAA,CAAAH,eAAA,EAAyBD,KAAA;IAC3B;IACA,IAAIT,SAAA,KAAc,WAAW,CAACS,KAAA,CAAMK,kBAAkB,IAAI;MACxDT,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;IACF;EACF;EAEA,MAAMC,aAAA,GAAgB3B,gBAAA,CAAkBoB,KAAA,IAA+C;QACrFQ,gBAAA;IAAA,CAAAA,gBAAA,GAAArB,KAAA,CAAMsB,SAAS,cAAfD,gBAAA,uBAAAA,gBAAA,CAAAJ,IAAA,CAAAjB,KAAA,EAAkBa,KAAA;IAElB,IAAIhB,kBAAA,CAAmBgB,KAAA,EAAOT,SAAA,GAAY;MACxCK,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;MACA;MACA;MACAN,KAAA,CAAMU,eAAe;IACvB;EACF;EAEA,MAAM;IAAEC;EAAe,CAAE,GAAG1B,kBAAA,CAAmB;IAC7C2B,SAAA,EAAWrB,SAAA,KAAc;IACzBsB,eAAA,EAAiB,CAACpB;EACpB;EAEA,OAAO;IACLqB,UAAA,EAAY;MACVzB,QAAA,EAAU;MACV0B,IAAA,EAAM;IACR;IACA1B,QAAA,EAAUV,gBAAA,CAAiBU,QAAA,EAAU;MACnC2B,QAAA,EAAUrB,IAAA,IAAQJ,SAAA,KAAc;MAChC0B,YAAA,EAAc;QACZ,eAAe;QACfd,OAAA,EAASJ;MACX;IACF;IACAgB,IAAA,EAAMrC,qBAAA,CAAsBY,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,KAAK,EAAE;MACvC4B,QAAA,EAAU,CAAC;MACX,cAAc3B,SAAA,KAAc;MAC5B4B,IAAA,EAAM5B,SAAA,KAAc,UAAU,gBAAgB,QAAQ;MACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAGiC,SAAA,GAAYvB,aAAa;MAClE,GAAGV,KAAK;MACR,GAAGwB,eAAe;MAClBF,SAAA,EAAWF,aAAA;MACXnB,GAAA,EAAKP,aAAA,CAAcO,GAAA,EAAKM,SAAA;IAC1B;EACF;AACF"}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useEventCallback","useMergedRefs","isResolvedShorthand","useDialogContext_unstable","isEscapeKeyDismiss","useDialogSurface_unstable","props","ref","backdrop","as","modalType","ctx","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","_props_backdrop","_props_backdrop_onClick","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","stopPropagation","components","root","required","defaultProps","tabIndex","role","undefined"],"sources":["../../../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  resolveShorthand,\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { isEscapeKeyDismiss } from '../../utils';\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 { backdrop, as } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n\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 (isEscapeKeyDismiss(event, modalType)) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.stopPropagation();\n    }\n  });\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n    },\n    backdrop: resolveShorthand(backdrop, {\n      required: open && modalType !== 'non-modal',\n      defaultProps: {\n        'aria-hidden': 'true',\n        onClick: handledBackdropClick,\n      },\n    }),\n    root: getNativeElementProps(as ?? 'div', {\n      tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n      'aria-modal': modalType !== 'non-modal',\n      role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n      ...props,\n      ...modalAttributes,\n      onKeyDown: handleKeyDown,\n      ref: useMergedRefs(ref, dialogRef),\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,qBAAqB,EACrBC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,QACd;AAEP,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,KAAA,EACAC,GAAA,KACuB;EACvB,MAAM;IAAEC,QAAA;IAAUC;EAAE,CAAE,GAAGH,KAAA;EACzB,MAAMI,SAAA,GAAYP,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAID,SAAS;EAChE,MAAME,eAAA,GAAkBT,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIC,eAAe;EAC5E,MAAMC,SAAA,GAAYV,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIE,SAAS;EAChE,MAAMC,IAAA,GAAOX,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIG,IAAI;EACtD,MAAMC,iBAAA,GAAoBZ,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAII,iBAAiB;EAChF,MAAMC,aAAA,GAAgBb,yBAAA,CAA0BQ,GAAA,IAAOA,GAAA,CAAIM,aAAa;EAExE,MAAMC,oBAAA,GAAuBlB,gBAAA,CAAkBmB,KAAA,IAA4C;IACzF,IAAIjB,mBAAA,CAAoBI,KAAA,CAAME,QAAQ,GAAG;UACvCY,eAAA,EAAAC,uBAAA;MAAA,CAAAA,uBAAA,IAAAD,eAAA,GAAAd,KAAA,CAAME,QAAQ,EAACc,OAAO,cAAtBD,uBAAA,uBAAAA,uBAAA,CAAAE,IAAA,CAAAH,eAAA,EAAyBD,KAAA;IAC3B;IACA,IAAIT,SAAA,KAAc,WAAW,CAACS,KAAA,CAAMK,kBAAkB,IAAI;MACxDT,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;IACF;EACF;EAEA,MAAMC,aAAA,GAAgB1B,gBAAA,CAAkBmB,KAAA,IAA+C;QACrFQ,gBAAA;IAAA,CAAAA,gBAAA,GAAArB,KAAA,CAAMsB,SAAS,cAAfD,gBAAA,uBAAAA,gBAAA,CAAAJ,IAAA,CAAAjB,KAAA,EAAkBa,KAAA;IAElB,IAAIf,kBAAA,CAAmBe,KAAA,EAAOT,SAAA,GAAY;MACxCK,iBAAA,CAAkB;QAChBI,KAAA;QACAL,IAAA,EAAM,KAAK;QACXW,IAAA,EAAM;MACR;MACA;MACA;MACAN,KAAA,CAAMU,eAAe;IACvB;EACF;EAEA,OAAO;IACLC,UAAA,EAAY;MACVtB,QAAA,EAAU;MACVuB,IAAA,EAAM;IACR;IACAvB,QAAA,EAAUT,gBAAA,CAAiBS,QAAA,EAAU;MACnCwB,QAAA,EAAUlB,IAAA,IAAQJ,SAAA,KAAc;MAChCuB,YAAA,EAAc;QACZ,eAAe;QACfX,OAAA,EAASJ;MACX;IACF;IACAa,IAAA,EAAMjC,qBAAA,CAAsBW,EAAA,aAAAA,EAAA,cAAAA,EAAA,GAAM,KAAK,EAAE;MACvCyB,QAAA,EAAU,CAAC;MACX,cAAcxB,SAAA,KAAc;MAC5ByB,IAAA,EAAMzB,SAAA,KAAc,UAAU,gBAAgB,QAAQ;MACtD,mBAAmBJ,KAAK,CAAC,aAAa,GAAG8B,SAAA,GAAYpB,aAAa;MAClE,GAAGV,KAAK;MACR,GAAGM,eAAe;MAClBgB,SAAA,EAAWF,aAAA;MACXnB,GAAA,EAAKN,aAAA,CAAcM,GAAA,EAAKM,SAAA;IAC1B;EACF;AACF"}

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

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

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

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

package/lib/components/DialogTitle/DialogTitle.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"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 div, but can be a heading.\n   */\n  root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\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"],"mappings":"AAAA"}
+{"version":3,"names":[],"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"],"mappings":"AAAA"}

package/lib/components/DialogTitle/index.js

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

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

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

package/lib/components/DialogTitle/useDialogTitle.js

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

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

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

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

@@ -18,7 +18,11 @@ const useStyles = /*#__PURE__*/__styles({
     Ijaq50: "faq1aip",
     Br312pm: "f1m489tg",
     nk6f5a: "fv2srd9",
-    Bw0ie65: "f1tz6hh8"
+    Bw0ie65: "f1tz6hh8",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"]
   },
   rootWithoutCloseButton: {
     Ijaq50: "faq1aip",
@@ -33,7 +37,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bw0ie65: "f98d4vj"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".faq1aip{grid-row-start:title;}", ".f1m489tg{grid-column-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f11nczdl{grid-row-end:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".f1hysmiz{grid-row-start:close-button;}", ".f1379kmu{grid-column-start:close-button;}"]
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".faq1aip{grid-row-start:title;}", ".f1m489tg{grid-column-start:title;}", ".fv2srd9{grid-row-end:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f11nczdl{grid-row-end:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".f1hysmiz{grid-row-start:close-button;}", ".f1379kmu{grid-column-start:close-button;}"]
 });
 /**
  * Styles to be applied on internal elements used by default action on non-modal Dialog
@@ -108,4 +112,4 @@ export const useDialogTitleStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDialogTitleStyles.js.map
+//# sourceMappingURL=useDialogTitleStyles.styles.js.map

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

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

package/lib/components/DialogTrigger/DialogTrigger.js

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

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

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

package/lib/components/DialogTrigger/index.js

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

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

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

package/lib/components/DialogTrigger/{useDialogTrigger.js → useDialogTrigger.styles.js}

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useModalAttributes } from '@fluentui/react-tabster';
 import { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';
 import { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';
 import { useARIAButtonProps } from '@fluentui/react-aria';
@@ -18,9 +17,7 @@ export const useDialogTrigger_unstable = props => {
   } = props;
   const child = getTriggerChild(children);
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
-  const {
-    triggerAttributes
-  } = useModalAttributes();
+  const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);
   const handleClick = useEventCallback(event => {
     var _child_props, _child_props_onClick;
     (_child_props_onClick = (_child_props = child === null || child === void 0 ? void 0 : child.props).onClick) === null || _child_props_onClick === void 0 ? void 0 : _child_props_onClick.call(_child_props, event);
@@ -46,4 +43,4 @@ export const useDialogTrigger_unstable = props => {
     children: applyTriggerPropsToChildren(children, disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
   };
 };
-//# sourceMappingURL=useDialogTrigger.js.map
+//# sourceMappingURL=useDialogTrigger.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","applyTriggerPropsToChildren","getTriggerChild","useEventCallback","useDialogContext_unstable","useDialogSurfaceContext_unstable","useARIAButtonProps","useDialogTrigger_unstable","props","isInsideSurfaceDialog","children","disableButtonEnhancement","action","child","requestOpenChange","ctx","triggerAttributes","handleClick","event","_child_props","_child_props_onClick","onClick","call","isDefaultPrevented","type","open","triggerChildProps","ref","ariaButtonTriggerChildProps"],"sources":["../../../src/components/DialogTrigger/useDialogTrigger.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useEventCallback } from '@fluentui/react-utilities';\nimport type { DialogTriggerProps, DialogTriggerState } from './DialogTrigger.types';\nimport { useDialogContext_unstable, useDialogSurfaceContext_unstable } from '../../contexts';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\n\n/**\n * Create the state required to render DialogTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup Dialog\n *\n * @param props - props from this instance of DialogTrigger\n */\nexport const useDialogTrigger_unstable = (props: DialogTriggerProps): DialogTriggerState => {\n  const isInsideSurfaceDialog = useDialogSurfaceContext_unstable();\n\n  const { children, disableButtonEnhancement = false, action = isInsideSurfaceDialog ? 'close' : 'open' } = props;\n\n  const child = getTriggerChild(children);\n\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const triggerAttributes = useDialogContext_unstable(ctx => ctx.triggerAttributes);\n\n  const handleClick = useEventCallback(\n    (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n      child?.props.onClick?.(event);\n      if (!event.isDefaultPrevented()) {\n        requestOpenChange({\n          event,\n          type: 'triggerClick',\n          open: action === 'open',\n        });\n      }\n    },\n  );\n\n  const triggerChildProps = {\n    ...child?.props,\n    ref: child?.ref,\n    onClick: handleClick,\n    ...triggerAttributes,\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    {\n      ...triggerChildProps,\n      type: 'button',\n    },\n  );\n\n  return {\n    children: applyTriggerPropsToChildren(\n      children,\n      disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ;AAE/E,SAASC,yBAAyB,EAAEC,gCAAgC,QAAQ;AAC5E,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;AAMA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAkD;EAC1F,MAAMC,qBAAA,GAAwBJ,gCAAA;EAE9B,MAAM;IAAEK,QAAA;IAAUC,wBAAA,GAA2B,KAAK;IAAEC,MAAA,GAASH,qBAAA,GAAwB,UAAU;EAAM,CAAE,GAAGD,KAAA;EAE1G,MAAMK,KAAA,GAAQX,eAAA,CAAgBQ,QAAA;EAE9B,MAAMI,iBAAA,GAAoBV,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAID,iBAAiB;EAChF,MAAME,iBAAA,GAAoBZ,yBAAA,CAA0BW,GAAA,IAAOA,GAAA,CAAIC,iBAAiB;EAEhF,MAAMC,WAAA,GAAcd,gBAAA,CACjBe,KAAA,IAAoF;QACnFC,YAAA,EAAAC,oBAAA;IAAA,CAAAA,oBAAA,IAAAD,YAAA,GAAAN,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK,EAACa,OAAO,cAApBD,oBAAA,uBAAAA,oBAAA,CAAAE,IAAA,CAAAH,YAAA,EAAuBD,KAAA;IACvB,IAAI,CAACA,KAAA,CAAMK,kBAAkB,IAAI;MAC/BT,iBAAA,CAAkB;QAChBI,KAAA;QACAM,IAAA,EAAM;QACNC,IAAA,EAAMb,MAAA,KAAW;MACnB;IACF;EACF;EAGF,MAAMc,iBAAA,GAAoB;IACxB,IAAGb,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOL,KAAK;IACfmB,GAAA,EAAKd,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOc,GAAG;IACfN,OAAA,EAASJ,WAAA;IACT,GAAGD;EACL;EAEA,MAAMY,2BAAA,GAA8BtB,kBAAA,CAClC,CAAAO,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,YAAY,CAAAX,KAAA,aAAAA,KAAA,uBAAAA,KAAA,CAAOW,IAAI,MAAK,MAAMX,KAAA,CAAMW,IAAI,GAAG,KAAK,EACpE;IACE,GAAGE,iBAAiB;IACpBF,IAAA,EAAM;EACR;EAGF,OAAO;IACLd,QAAA,EAAUT,2BAAA,CACRS,QAAA,EACAC,wBAAA,GAA2Be,iBAAA,GAAoBE,2BAA2B;EAE9E;AACF"}

package/lib/contexts/dialogContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContextSelector","defaultContextValue","open","inertTrapFocus","modalType","isNestedDialog","dialogRef","current","requestOpenChange","DialogContext","undefined","DialogProvider","Provider","useDialogContext_unstable","selector","ctx"],"sources":["../../src/contexts/dialogContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n  open: boolean;\n  inertTrapFocus: boolean;\n  dialogTitleId?: string;\n  isNestedDialog: boolean;\n  dialogRef: React.Ref<DialogSurfaceElement>;\n  modalType: DialogModalType;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  inertTrapFocus: false,\n  modalType: 'modal',\n  isNestedDialog: false,\n  dialogRef: { current: null },\n  requestOpenChange() {\n    /* noop */\n  },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n  useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,aAAa,EAAmBC,kBAAkB,QAAQ;AAkBnE,MAAMC,mBAAA,GAA0C;EAC9CC,IAAA,EAAM,KAAK;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;IAAEC,OAAA,EAAS;EAAK;EAC3BC,kBAAA,EAAoB;IAClB;AAEJ;AAEA;AACA,OAAO,MAAMC,aAAA,gBAAyDV,aAAA,CACpEW,SAAA;AAGF,OAAO,MAAMC,cAAA,GAAiBF,aAAA,CAAcG,QAAQ;AACpD,OAAO,MAAMC,yBAAA,GAAgCC,QAAA,IAC3Cd,kBAAA,CAAmBS,aAAA,EAAe,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}
+{"version":3,"names":["React","createContext","useContextSelector","defaultContextValue","open","inertTrapFocus","modalType","isNestedDialog","dialogRef","current","requestOpenChange","DialogContext","undefined","DialogProvider","Provider","useDialogContext_unstable","selector","ctx"],"sources":["../../src/contexts/dialogContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n\nexport type DialogContextValue = {\n  open: boolean;\n  inertTrapFocus: boolean;\n  dialogTitleId?: string;\n  isNestedDialog: boolean;\n  dialogRef: React.Ref<DialogSurfaceElement>;\n  modalType: DialogModalType;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange: (data: DialogOpenChangeData) => void;\n} & Partial<ReturnType<typeof useModalAttributes>>;\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  inertTrapFocus: false,\n  modalType: 'modal',\n  isNestedDialog: false,\n  dialogRef: { current: null },\n  requestOpenChange() {\n    /* noop */\n  },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n  useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,aAAa,EAAmBC,kBAAkB,QAAQ;AAmBnE,MAAMC,mBAAA,GAA0C;EAC9CC,IAAA,EAAM,KAAK;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;EACXC,cAAA,EAAgB,KAAK;EACrBC,SAAA,EAAW;IAAEC,OAAA,EAAS;EAAK;EAC3BC,kBAAA,EAAoB;IAClB;AAEJ;AAEA;AACA,OAAO,MAAMC,aAAA,gBAAyDV,aAAA,CACpEW,SAAA;AAGF,OAAO,MAAMC,cAAA,GAAiBF,aAAA,CAAcG,QAAQ;AACpD,OAAO,MAAMC,yBAAA,GAAgCC,QAAA,IAC3Cd,kBAAA,CAAmBS,aAAA,EAAe,CAACM,GAAA,GAAMd,mBAAmB,KAAKa,QAAA,CAASC,GAAA"}

package/lib-commonjs/components/Dialog/useDialog.js

@@ -12,6 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
 const _reactContextSelector = require("@fluentui/react-context-selector");
 const _utils = require("../../utils");
 const _contexts = require("../../contexts");
+const _reactTabster = require("@fluentui/react-tabster");
 const useDialog_unstable = (props)=>{
     const { children , modalType ='modal' , onOpenChange , inertTrapFocus =false  } = props;
     const [trigger, content] = childrenToTriggerAndContent(children);
@@ -39,6 +40,10 @@ const useDialog_unstable = (props)=>{
         disableBodyScroll,
         isBodyScrollLocked
     ]);
+    const { modalAttributes , triggerAttributes  } = (0, _reactTabster.useModalAttributes)({
+        trapFocus: modalType !== 'non-modal',
+        legacyTrapFocus: !inertTrapFocus
+    });
     return {
         components: {
             backdrop: 'div'
@@ -51,7 +56,9 @@ const useDialog_unstable = (props)=>{
         requestOpenChange,
         dialogTitleId: (0, _reactUtilities.useId)('dialog-title-'),
         isNestedDialog: (0, _reactContextSelector.useHasParentContext)(_contexts.DialogContext),
-        dialogRef: focusRef
+        dialogRef: focusRef,
+        modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,
+        triggerAttributes
     };
 };
 /**

package/lib-commonjs/components/Dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Dialog/useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = props => {\n  const {\n    children,\n    modalType = 'modal',\n    onOpenChange,\n    inertTrapFocus = false\n  } = props;\n  const [trigger, content] = childrenToTriggerAndContent(children);\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false\n  });\n  const requestOpenChange = useEventCallback(data => {\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n  return {\n    components: {\n      backdrop: 'div'\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef\n  };\n};\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(children) {\n  const childrenArray = React.Children.toArray(children);\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Dialog must contain at least one child <DialogSurface/>,\\n' + 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)');\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray;\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n//# sourceMappingURL=useDialog.js.map"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACkE;sCACrD;uBACuB;0BAC7B;AASvB,MAAMA,qBAAqBC,CAAAA,QAAS;IACzC,MAAM,EACJC,SAAQ,EACRC,WAAY,QAAO,EACnBC,aAAY,EACZC,gBAAiB,KAAK,CAAA,EACvB,GAAGJ;IACJ,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QAC3CC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc,KAAK;IACrB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAACC,CAAAA,OAAQ;QACjDd,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED,KAAK;QAC1F,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCV,QAAQQ,KAAKT,IAAI;QACnB,CAAC;IACH;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIF,oBAAoB;YACtB,OAAOF;QACT,CAAC;IACH,GAAG;QAACA;QAAmBE;KAAmB;IAC1C,OAAO;QACLG,YAAY;YACVC,UAAU;QACZ;QACAxB;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU,IAAI;QAC9BD;QACAU;QACAc,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWd;IACb;AACF;AACA;;CAEC,GACD,SAASb,4BAA4BN,QAAQ,EAAE;IAC7C,MAAMkC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAACrC;IAC7C,IAAIsC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,+DAA+D;QAC9E,CAAC;IACH,CAAC;IACD,OAAQT,cAAcO,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAOP;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACU;gBAAWV,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACU;gBAAWA;aAAU;IACjC;AACF,EACA,qCAAqC"}
+{"version":3,"sources":["../../../lib/components/Dialog/useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = props => {\n  const {\n    children,\n    modalType = 'modal',\n    onOpenChange,\n    inertTrapFocus = false\n  } = props;\n  const [trigger, content] = childrenToTriggerAndContent(children);\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false\n  });\n  const requestOpenChange = useEventCallback(data => {\n    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n  const {\n    modalAttributes,\n    triggerAttributes\n  } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus\n  });\n  return {\n    components: {\n      backdrop: 'div'\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n    modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n    triggerAttributes\n  };\n};\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(children) {\n  const childrenArray = React.Children.toArray(children);\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Dialog must contain at least one child <DialogSurface/>,\\n' + 'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)');\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray;\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n//# sourceMappingURL=useDialog.js.map"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","undefined","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;gCACkE;sCACrD;uBACuB;0BAC7B;8BACK;AAS5B,MAAMA,qBAAqBC,CAAAA,QAAS;IACzC,MAAM,EACJC,SAAQ,EACRC,WAAY,QAAO,EACnBC,aAAY,EACZC,gBAAiB,KAAK,CAAA,EACvB,GAAGJ;IACJ,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QAC3CC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc,KAAK;IACrB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAACC,CAAAA,OAAQ;QACjDd,iBAAiB,IAAI,IAAIA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED,KAAK;QAC1F,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCV,QAAQQ,KAAKT,IAAI;QACnB,CAAC;IACH;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIF,oBAAoB;YACtB,OAAOF;QACT,CAAC;IACH,GAAG;QAACA;QAAmBE;KAAmB;IAC1C,MAAM,EACJG,gBAAe,EACfC,kBAAiB,EAClB,GAAGC,IAAAA,gCAAkB,EAAC;QACrBC,WAAW5B,cAAc;QACzB6B,iBAAiB,CAAC3B;IACpB;IACA,OAAO;QACL4B,YAAY;YACVC,UAAU;QACZ;QACA7B;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU,IAAI;QAC9BD;QACAU;QACAmB,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWnB;QACXO,iBAAiBzB,cAAc,cAAcyB,kBAAkBa,SAAS;QACxEZ;IACF;AACF;AACA;;CAEC,GACD,SAASrB,4BAA4BN,QAAQ,EAAE;IAC7C,MAAMwC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAAC3C;IAC7C,IAAI4C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,+DAA+D;QAC9E,CAAC;IACH,CAAC;IACD,OAAQT,cAAcO,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAOP;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACD;gBAAWC,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACD;gBAAWA;aAAU;IACjC;AACF,EACA,qCAAqC"}

package/lib-commonjs/components/Dialog/useDialogContextValues.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "useDialogContextValues_unstable", {
     get: ()=>useDialogContextValues_unstable
 });
 function useDialogContextValues_unstable(state) {
-    const { modalType , open , dialogRef , dialogTitleId , isNestedDialog , inertTrapFocus , requestOpenChange  } = state;
+    const { modalType , open , dialogRef , dialogTitleId , isNestedDialog , inertTrapFocus , requestOpenChange , modalAttributes , triggerAttributes  } = state;
     /**
   * This context is created with "@fluentui/react-context-selector",
   * there is no sense to memoize it
@@ -18,6 +18,8 @@ function useDialogContextValues_unstable(state) {
         dialogTitleId,
         isNestedDialog,
         inertTrapFocus,
+        modalAttributes,
+        triggerAttributes,
         requestOpenChange
     };
     const dialogSurface = false;

package/lib-commonjs/components/Dialog/useDialogContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Dialog/useDialogContextValues.js"],"sourcesContent":["export function useDialogContextValues_unstable(state) {\n  const {\n    modalType,\n    open,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange\n  } = state;\n  /**\n  * This context is created with \"@fluentui/react-context-selector\",\n  * there is no sense to memoize it\n  */\n  const dialog = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange\n  };\n  const dialogSurface = false;\n  return {\n    dialog,\n    dialogSurface\n  };\n}\n//# sourceMappingURL=useDialogContextValues.js.map"],"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","dialog","dialogSurface"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,gCAAgCC,KAAK,EAAE;IACrD,MAAM,EACJC,UAAS,EACTC,KAAI,EACJC,UAAS,EACTC,cAAa,EACbC,eAAc,EACdC,eAAc,EACdC,kBAAiB,EAClB,GAAGP;IACJ;;;EAGA,GACA,MAAMQ,SAAS;QACbN;QACAD;QACAE;QACAC;QACAC;QACAC;QACAC;IACF;IACA,MAAME,gBAAgB,KAAK;IAC3B,OAAO;QACLD;QACAC;IACF;AACF,EACA,kDAAkD"}
+{"version":3,"sources":["../../../lib/components/Dialog/useDialogContextValues.js"],"sourcesContent":["export function useDialogContextValues_unstable(state) {\n  const {\n    modalType,\n    open,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange,\n    modalAttributes,\n    triggerAttributes\n  } = state;\n  /**\n  * This context is created with \"@fluentui/react-context-selector\",\n  * there is no sense to memoize it\n  */\n  const dialog = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    modalAttributes,\n    triggerAttributes,\n    requestOpenChange\n  };\n  const dialogSurface = false;\n  return {\n    dialog,\n    dialogSurface\n  };\n}\n//# sourceMappingURL=useDialogContextValues.js.map"],"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","modalAttributes","triggerAttributes","dialog","dialogSurface"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,gCAAgCC,KAAK,EAAE;IACrD,MAAM,EACJC,UAAS,EACTC,KAAI,EACJC,UAAS,EACTC,cAAa,EACbC,eAAc,EACdC,eAAc,EACdC,kBAAiB,EACjBC,gBAAe,EACfC,kBAAiB,EAClB,GAAGT;IACJ;;;EAGA,GACA,MAAMU,SAAS;QACbR;QACAD;QACAE;QACAC;QACAC;QACAC;QACAE;QACAC;QACAF;IACF;IACA,MAAMI,gBAAgB,KAAK;IAC3B,OAAO;QACLD;QACAC;IACF;AACF,EACA,kDAAkD"}

package/lib-commonjs/components/DialogActions/DialogActions.js

@@ -10,13 +10,12 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useDialogActions = require("./useDialogActions");
 const _renderDialogActions = require("./renderDialogActions");
-const _useDialogActionsStyles = require("./useDialogActionsStyles");
+const _useDialogActionsStylesStyles = require("./useDialogActionsStyles.styles");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const DialogActions = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDialogActions.useDialogActions_unstable)(props, ref);
-    (0, _useDialogActionsStyles.useDialogActionsStyles_unstable)(state);
-    const { useDialogActionsStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useDialogActionsStylesStyles.useDialogActionsStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useDialogActionsStyles_unstable')(state);
     return (0, _renderDialogActions.renderDialogActions_unstable)(state);
 });
 DialogActions.displayName = 'DialogActions'; //# sourceMappingURL=DialogActions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogActions/DialogActions.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n  useDialogActionsStyles_unstable(state);\n  const {\n    useDialogActionsStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderDialogActions_unstable(state);\n});\nDialogActions.displayName = 'DialogActions';\n//# sourceMappingURL=DialogActions.js.map"],"names":["DialogActions","React","forwardRef","props","ref","state","useDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderDialogActions_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;kCACmB;qCACG;wCACG;qCACH;AAKtC,MAAMA,gBAAgB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,uDAA+B,EAACF;IAChC,MAAM,EACJE,iCAAiCC,gBAAe,EACjD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,iDAA4B,EAACL;AACtC;AACAL,cAAcW,WAAW,GAAG,iBAC5B,yCAAyC"}
+{"version":3,"sources":["../../../lib/components/DialogActions/DialogActions.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n  useDialogActionsStyles_unstable(state);\n  useCustomStyleHook_unstable('useDialogActionsStyles_unstable')(state);\n  return renderDialogActions_unstable(state);\n});\nDialogActions.displayName = 'DialogActions';\n//# sourceMappingURL=DialogActions.js.map"],"names":["DialogActions","React","forwardRef","props","ref","state","useDialogActions_unstable","useDialogActionsStyles_unstable","useCustomStyleHook_unstable","renderDialogActions_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;kCACmB;qCACG;8CACG;qCACJ;AAKrC,MAAMA,gBAAgB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,iDAA4B,EAACJ;AACtC;AACAL,cAAcU,WAAW,GAAG,iBAC5B,yCAAyC"}

package/lib-commonjs/components/DialogActions/index.js

@@ -7,7 +7,7 @@ _exportStar(require("./DialogActions"), exports);
 _exportStar(require("./DialogActions.types"), exports);
 _exportStar(require("./renderDialogActions"), exports);
 _exportStar(require("./useDialogActions"), exports);
-_exportStar(require("./useDialogActionsStyles"), exports);
+_exportStar(require("./useDialogActionsStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogActions/index.js"],"sourcesContent":["export * from './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/DialogActions/index.js"],"sourcesContent":["export * from './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -83,6 +83,6 @@ const useDialogActionsStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);
     return state;
-}; //# sourceMappingURL=useDialogActionsStyles.js.map
+}; //# sourceMappingURL=useDialogActionsStyles.styles.js.map
 
-//# sourceMappingURL=useDialogActionsStyles.js.map
+//# sourceMappingURL=useDialogActionsStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/DialogActions/useDialogActionsStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { DIALOG_GAP, ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';\nexport const dialogActionsClassNames = {\n  root: 'fui-DialogActions'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Bqenvij: \"f3052tw\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    i8kkvl: \"f4px1ci\",\n    Belr9w4: \"fn67r4l\",\n    Bmdcpmo: \"f6glcwc\",\n    th9wkt: \"f1e3st1r\"\n  },\n  gridPositionEnd: {\n    Bdqf98w: \"f1a7i8kp\",\n    Ijaq50: \"f11u0jfc\",\n    Br312pm: \"f1d6tb1o\",\n    nk6f5a: \"f23awfp\",\n    Bw0ie65: \"fiappcv\"\n  },\n  gridPositionStart: {\n    Bdqf98w: \"fsxvdwy\",\n    Ijaq50: \"f1vnb230\",\n    Br312pm: \"f14781pt\",\n    nk6f5a: \"f13d374e\",\n    Bw0ie65: \"f1fjo411\"\n  },\n  fluidStart: {\n    Bw0ie65: \"fiappcv\"\n  },\n  fluidEnd: {\n    Br312pm: \"f14781pt\"\n  }\n}, {\n  d: [\".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1a7i8kp{justify-self:end;}\", \".f11u0jfc{grid-row-start:actions-end;}\", \".f1d6tb1o{grid-column-start:actions-end;}\", \".f23awfp{grid-row-end:actions-end;}\", \".fiappcv{grid-column-end:actions-end;}\", \".fsxvdwy{justify-self:start;}\", \".f1vnb230{grid-row-start:actions-start;}\", \".f14781pt{grid-column-start:actions-start;}\", \".f13d374e{grid-row-end:actions-start;}\", \".f1fjo411{grid-column-end:actions-start;}\"],\n  m: [[\"@media screen and (max-width: 480px){.f6glcwc{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}\", {\n    m: \"screen and (max-width: 480px)\"\n  }], [\"@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}\", {\n    m: \"screen and (max-width: 480px)\"\n  }]]\n});\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogActionsClassNames.root, styles.root, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, state.fluid && state.position === 'end' && styles.fluidEnd, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDialogActionsStyles.styles.js.map"],"names":["dialogActionsClassNames","useDialogActionsStyles_unstable","root","useStyles","__styles","Bqenvij","B7ck84d","mc9l5x","i8kkvl","Belr9w4","Bmdcpmo","th9wkt","gridPositionEnd","Bdqf98w","Ijaq50","Br312pm","nk6f5a","Bw0ie65","gridPositionStart","fluidStart","fluidEnd","d","m","state","styles","className","mergeClasses","position","fluid"],"mappings":";;;;;;;;;;;IAEaA,uBAAuB,MAAvBA;IA4CAC,+BAA+B,MAA/BA;;uBA9CsC;AAE5C,MAAMD,0BAA0B;IACrCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;IACAC,iBAAiB;QACfC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,mBAAmB;QACjBL,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAE,YAAY;QACVF,SAAS;IACX;IACAG,UAAU;QACRL,SAAS;IACX;AACF,GAAG;IACDM,GAAG;QAAC;QAAoF;QAAqC;QAAwF;QAAoD;QAA0B;QAAgC;QAA0C;QAA6C;QAAuC;QAA0C;QAAiC;QAA4C;QAA+C;QAA0C;KAA4C;IAC7rBC,GAAG;QAAC;YAAC;YAAkI;gBACrIA,GAAG;YACL;SAAE;QAAE;YAAC;YAA0E;gBAC7EA,GAAG;YACL;SAAE;KAAC;AACL;AAIO,MAAMrB,kCAAkCsB,CAAAA,QAAS;IACtD,MAAMC,SAASrB;IACfoB,MAAMrB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,wBAAwBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMI,QAAQ,KAAK,WAAWH,OAAON,iBAAiB,EAAEK,MAAMI,QAAQ,KAAK,SAASH,OAAOZ,eAAe,EAAEW,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,WAAWH,OAAOL,UAAU,EAAEI,MAAMK,KAAK,IAAIL,MAAMI,QAAQ,KAAK,SAASH,OAAOJ,QAAQ,EAAEG,MAAMrB,IAAI,CAACuB,SAAS;IAC3U,OAAOF;AACT,GACA,yDAAyD"}

package/lib-commonjs/components/DialogBody/DialogBody.js

@@ -10,13 +10,12 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useDialogBody = require("./useDialogBody");
 const _renderDialogBody = require("./renderDialogBody");
-const _useDialogBodyStyles = require("./useDialogBodyStyles");
+const _useDialogBodyStylesStyles = require("./useDialogBodyStyles.styles");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const DialogBody = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDialogBody.useDialogBody_unstable)(props, ref);
-    (0, _useDialogBodyStyles.useDialogBodyStyles_unstable)(state);
-    const { useDialogBodyStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useDialogBodyStylesStyles.useDialogBodyStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useDialogBodyStyles_unstable')(state);
     return (0, _renderDialogBody.renderDialogBody_unstable)(state);
 });
 DialogBody.displayName = 'DialogBody'; //# sourceMappingURL=DialogBody.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogBody/DialogBody.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n  useDialogBodyStyles_unstable(state);\n  const {\n    useDialogBodyStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderDialogBody_unstable(state);\n});\nDialogBody.displayName = 'DialogBody';\n//# sourceMappingURL=DialogBody.js.map"],"names":["DialogBody","React","forwardRef","props","ref","state","useDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderDialogBody_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;+BACgB;kCACG;qCACG;qCACA;AAKtC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,iDAA4B,EAACF;IAC7B,MAAM,EACJE,8BAA8BC,gBAAe,EAC9C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,2CAAyB,EAACL;AACnC;AACAL,WAAWW,WAAW,GAAG,cACzB,sCAAsC"}
+{"version":3,"sources":["../../../lib/components/DialogBody/DialogBody.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n  useDialogBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useDialogBodyStyles_unstable')(state);\n  return renderDialogBody_unstable(state);\n});\nDialogBody.displayName = 'DialogBody';\n//# sourceMappingURL=DialogBody.js.map"],"names":["DialogBody","React","forwardRef","props","ref","state","useDialogBody_unstable","useDialogBodyStyles_unstable","useCustomStyleHook_unstable","renderDialogBody_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;+BACgB;kCACG;2CACG;qCACD;AAKrC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,uDAA4B,EAACF;IAC7BG,IAAAA,gDAA2B,EAAC,gCAAgCH;IAC5D,OAAOI,IAAAA,2CAAyB,EAACJ;AACnC;AACAL,WAAWU,WAAW,GAAG,cACzB,sCAAsC"}

package/lib-commonjs/components/DialogBody/index.js

@@ -7,7 +7,7 @@ _exportStar(require("./DialogBody"), exports);
 _exportStar(require("./DialogBody.types"), exports);
 _exportStar(require("./renderDialogBody"), exports);
 _exportStar(require("./useDialogBody"), exports);
-_exportStar(require("./useDialogBodyStyles"), exports);
+_exportStar(require("./useDialogBodyStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogBody/index.js"],"sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/DialogBody/index.js"],"sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -74,6 +74,6 @@ const useDialogBodyStyles_unstable = (state)=>{
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(dialogBodyClassNames.root, styles.root, state.root.className);
     return state;
-}; //# sourceMappingURL=useDialogBodyStyles.js.map
+}; //# sourceMappingURL=useDialogBodyStyles.styles.js.map
 
-//# sourceMappingURL=useDialogBodyStyles.js.map
+//# sourceMappingURL=useDialogBodyStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/DialogBody/useDialogBodyStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, CONTENT_GRID_AREA, DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING, TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts';\nexport const dialogBodyClassNames = {\n  root: 'fui-DialogBody'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f13qh94s\",\n    fshzfu: \"f120kxnn\",\n    Bxyxcbc: \"flnwrvu\",\n    B7ck84d: \"f1ewtqcl\",\n    wkccdc: \"f874eam\",\n    Budl1dq: \"fjj47a5\",\n    zoa1oz: \"fe34spp\",\n    B68tc82: \"f1ln0qer\",\n    Bmxbyg5: \"fa2wlxz\",\n    i8kkvl: \"f4px1ci\",\n    Belr9w4: \"fn67r4l\",\n    B5xtmjs: \"ff54dml\",\n    Bqu9lor: \"f52bj20\",\n    B06wobe: \"f1dangjo\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}\", \".flnwrvu{max-height:calc(100vh - 2 * 24px);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f874eam{grid-template-rows:auto 1fr auto;}\", \".fjj47a5{grid-template-columns:1fr 1fr auto;}\", \".fe34spp{grid-template-areas:\\\"title title close-button\\\" \\\"body body body\\\" \\\"actions-start actions-end actions-end\\\";}\", \".f1ln0qer{overflow-x:unset;}\", \".fa2wlxz{overflow-y:unset;}\", \".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\"],\n  m: [[\"@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}\", {\n    m: \"screen and (max-width: 480px)\"\n  }], [\"@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}\", {\n    m: \"screen and (max-width: 480px)\"\n  }], [\"@media screen and (max-width: 480px){.f1dangjo{grid-template-areas:\\\"title title close-button\\\" \\\"body body body\\\" \\\"actions-start actions-start actions-start\\\" \\\"actions-end actions-end actions-end\\\";}}\", {\n    m: \"screen and (max-width: 480px)\"\n  }]]\n});\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useDialogBodyStyles.styles.js.map"],"names":["dialogBodyClassNames","useDialogBodyStyles_unstable","root","useStyles","__styles","mc9l5x","fshzfu","Bxyxcbc","B7ck84d","wkccdc","Budl1dq","zoa1oz","B68tc82","Bmxbyg5","i8kkvl","Belr9w4","B5xtmjs","Bqu9lor","B06wobe","d","m","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;IAoCAC,4BAA4B,MAA5BA;;uBAtCsC;AAE5C,MAAMD,uBAAuB;IAClCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA4B;QAA6D;QAAgD;QAAqC;QAA+C;QAAiD;QAA4H;QAAgC;QAA+B;QAAoD;KAAyB;IAC1hBC,GAAG;QAAC;YAAC;YAAoE;gBACvEA,GAAG;YACL;SAAE;QAAE;YAAC;YAA0F;gBAC7FA,GAAG;YACL;SAAE;QAAE;YAAC;YAA+M;gBAClNA,GAAG;YACL;SAAE;KAAC;AACL;AAIO,MAAMnB,+BAA+BoB,CAAAA,QAAS;IACnD,MAAMC,SAASnB;IACfkB,MAAMnB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,qBAAqBE,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAChG,OAAOF;AACT,GACA,sDAAsD"}

package/lib-commonjs/components/DialogContent/DialogContent.js

@@ -10,13 +10,12 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useDialogContent = require("./useDialogContent");
 const _renderDialogContent = require("./renderDialogContent");
-const _useDialogContentStyles = require("./useDialogContentStyles");
+const _useDialogContentStylesStyles = require("./useDialogContentStyles.styles");
 const _reactSharedContexts = require("@fluentui/react-shared-contexts");
 const DialogContent = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useDialogContent.useDialogContent_unstable)(props, ref);
-    (0, _useDialogContentStyles.useDialogContentStyles_unstable)(state);
-    const { useDialogContentStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
-    useCustomStyles(state);
+    (0, _useDialogContentStylesStyles.useDialogContentStyles_unstable)(state);
+    (0, _reactSharedContexts.useCustomStyleHook_unstable)('useDialogContentStyles_unstable')(state);
     return (0, _renderDialogContent.renderDialogContent_unstable)(state);
 });
 DialogContent.displayName = 'DialogContent'; //# sourceMappingURL=DialogContent.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/DialogContent/DialogContent.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useDialogContent_unstable(props, ref);\n  useDialogContentStyles_unstable(state);\n  const {\n    useDialogContentStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderDialogContent_unstable(state);\n});\nDialogContent.displayName = 'DialogContent';\n//# sourceMappingURL=DialogContent.js.map"],"names":["DialogContent","React","forwardRef","props","ref","state","useDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderDialogContent_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;kCACmB;qCACG;wCACG;qCACH;AAKtC,MAAMA,gBAAgB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,uDAA+B,EAACF;IAChC,MAAM,EACJE,iCAAiCC,gBAAe,EACjD,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,iDAA4B,EAACL;AACtC;AACAL,cAAcW,WAAW,GAAG,iBAC5B,yCAAyC"}
+{"version":3,"sources":["../../../lib/components/DialogContent/DialogContent.js"],"sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useDialogContent_unstable(props, ref);\n  useDialogContentStyles_unstable(state);\n  useCustomStyleHook_unstable('useDialogContentStyles_unstable')(state);\n  return renderDialogContent_unstable(state);\n});\nDialogContent.displayName = 'DialogContent';\n//# sourceMappingURL=DialogContent.js.map"],"names":["DialogContent","React","forwardRef","props","ref","state","useDialogContent_unstable","useDialogContentStyles_unstable","useCustomStyleHook_unstable","renderDialogContent_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;kCACmB;qCACG;8CACG;qCACJ;AAKrC,MAAMA,gBAAgB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,iDAA4B,EAACJ;AACtC;AACAL,cAAcU,WAAW,GAAG,iBAC5B,yCAAyC"}

package/lib-commonjs/components/DialogContent/index.js

@@ -7,7 +7,7 @@ _exportStar(require("./DialogContent"), exports);
 _exportStar(require("./DialogContent.types"), exports);
 _exportStar(require("./renderDialogContent"), exports);
 _exportStar(require("./useDialogContent"), exports);
-_exportStar(require("./useDialogContentStyles"), exports);
+_exportStar(require("./useDialogContentStyles.styles"), exports);
  //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map