@fluentui/react-dialog 9.0.0-beta.7

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogSurface/renderDialogSurface.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;EACnH,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  const { slots, slotProps } = getSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <DialogSurfaceProvider value={contextValues.dialogSurface}>\n      <slots.root {...slotProps.root} />\n    </DialogSurfaceProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogSurface/useDialogSurface.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogSurface_unstable = void 0;
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const contexts_1 = /*#__PURE__*/require("../../contexts");
+
+const utils_1 = /*#__PURE__*/require("../../utils");
+/**
+ * Create the state required to render DialogSurface.
+ *
+ * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,
+ * before being passed to renderDialogSurface_unstable.
+ *
+ * @param props - props from this instance of DialogSurface
+ * @param ref - reference to root HTMLElement of DialogSurface
+ */
+
+
+const useDialogSurface_unstable = (props, ref) => {
+  const modalType = contexts_1.useDialogContext_unstable(ctx => ctx.modalType);
+  const {
+    as = 'div'
+  } = props;
+  const contentRef = contexts_1.useDialogContext_unstable(ctx => ctx.contentRef);
+  const dialogTitleID = contexts_1.useDialogContext_unstable(ctx => ctx.dialogTitleID);
+  const dialogBodyID = contexts_1.useDialogContext_unstable(ctx => ctx.dialogBodyID);
+  const requestOpenChange = contexts_1.useDialogContext_unstable(ctx => ctx.requestOpenChange);
+  const {
+    modalAttributes
+  } = react_tabster_1.useModalAttributes({
+    trapFocus: modalType !== 'non-modal'
+  });
+  const handleRootKeyDown = react_utilities_1.useEventCallback(event => {
+    var _a;
+
+    (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+
+    if (utils_1.isEscapeKeyDismiss(event, modalType)) {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'escapeKeyDown'
+      });
+      event.preventDefault();
+    }
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps(as, {
+      ref: react_utilities_1.useMergedRefs(ref, contentRef),
+      'aria-modal': modalType !== 'non-modal',
+      'aria-describedby': dialogBodyID,
+      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
+      role: modalType === 'alert' ? 'alertdialog' : 'dialog',
+      ...props,
+      ...modalAttributes,
+      onKeyDown: handleRootKeyDown
+    })
+  };
+};
+
+exports.useDialogSurface_unstable = useDialogSurface_unstable;
+//# sourceMappingURL=useDialogSurface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogSurface/useDialogSurface.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM,SAAS,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,SAArC,CAAlB;EACA,MAAM;IAAE,EAAE,GAAG;EAAP,IAAiB,KAAvB;EAEA,MAAM,UAAU,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,UAArC,CAAnB;EACA,MAAM,aAAa,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,aAArC,CAAtB;EACA,MAAM,YAAY,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,YAArC,CAArB;EACA,MAAM,iBAAiB,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,iBAArC,CAA1B;EAEA,MAAM;IAAE;EAAF,IAAsB,eAAA,CAAA,kBAAA,CAAmB;IAAE,SAAS,EAAE,SAAS,KAAK;EAA3B,CAAnB,CAA5B;EAEA,MAAM,iBAAiB,GAAG,iBAAA,CAAA,gBAAA,CAAkB,KAAD,IAA+C;;;IACxF,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAA,IAAA,CAAf,KAAe,EAAG,KAAH,CAAf;;IACA,IAAI,OAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,SAA1B,CAAJ,EAA0C;MACxC,iBAAiB,CAAC;QAAE,KAAF;QAAS,IAAI,EAAE,KAAf;QAAsB,IAAI,EAAE;MAA5B,CAAD,CAAjB;MACA,KAAK,CAAC,cAAN;IACD;EACF,CANyB,CAA1B;EAQA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAtB,EAA0B;MAC9B,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,UAAnB,CADyB;MAE9B,cAAc,SAAS,KAAK,WAFE;MAG9B,oBAAoB,YAHU;MAI9B,mBAAmB,KAAK,CAAC,YAAD,CAAL,GAAsB,SAAtB,GAAkC,aAJvB;MAK9B,IAAI,EAAE,SAAS,KAAK,OAAd,GAAwB,aAAxB,GAAwC,QALhB;MAM9B,GAAG,KAN2B;MAO9B,GAAG,eAP2B;MAQ9B,SAAS,EAAE;IARmB,CAA1B;EAJD,CAAP;AAeD,CArCM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport type { 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<HTMLElement>,\n): DialogSurfaceState => {\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const { as = 'div' } = props;\n\n  const contentRef = useDialogContext_unstable(ctx => ctx.contentRef);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleID);\n  const dialogBodyID = useDialogContext_unstable(ctx => ctx.dialogBodyID);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n\n  const { modalAttributes } = useModalAttributes({ trapFocus: modalType !== 'non-modal' });\n\n  const handleRootKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n    if (isEscapeKeyDismiss(event, modalType)) {\n      requestOpenChange({ event, open: false, type: 'escapeKeyDown' });\n      event.preventDefault();\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(as, {\n      ref: useMergedRefs(ref, contentRef),\n      'aria-modal': modalType !== 'non-modal',\n      'aria-describedby': dialogBodyID,\n      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n      role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n      ...props,\n      ...modalAttributes,\n      onKeyDown: handleRootKeyDown,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogSurface/useDialogSurfaceContextValues.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogSurfaceContextValues_unstable = void 0;
+
+function useDialogSurfaceContextValues_unstable(state) {
+  const dialogSurface = true;
+  return {
+    dialogSurface
+  };
+}
+
+exports.useDialogSurfaceContextValues_unstable = useDialogSurfaceContextValues_unstable;
+//# sourceMappingURL=useDialogSurfaceContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogSurface/useDialogSurfaceContextValues.ts"],"names":[],"mappings":";;;;;;;AAGA,SAAgB,sCAAhB,CAAuD,KAAvD,EAAgF;EAC9E,MAAM,aAAa,GAA8B,IAAjD;EAEA,OAAO;IAAE;EAAF,CAAP;AACD;;AAJD,OAAA,CAAA,sCAAA,GAAA,sCAAA","sourcesContent":["import type { DialogSurfaceContextValues, DialogSurfaceState } from './DialogSurface.types';\nimport type { DialogSurfaceContextValue } from '../../contexts';\n\nexport function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues {\n  const dialogSurface: DialogSurfaceContextValue = true;\n\n  return { dialogSurface };\n}\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogSurfaceStyles_unstable = exports.dialogSurfaceClassNames = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const constants_1 = /*#__PURE__*/require("../../contexts/constants");
+
+exports.dialogSurfaceClassNames = {
+  root: 'fui-DialogSurface'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "qhf8xq": "f19dog8a",
+    "Bhzewxz": "f1i1t8d1",
+    "oyh7mz": ["f1ktbn1t", "ffenbu1"],
+    "Bz10aip": ["foouk8k", "fd9rb4b"],
+    "a9b677": "fly5x3f",
+    "Bqenvij": "f3052tw",
+    "B2u0y6b": "fvgz9i8",
+    "Bxyxcbc": "f6a9g1z",
+    "B7ck84d": "f1ewtqcl",
+    "E5pizo": "f10nrhrw",
+    "De3pzq": "fxugw4r",
+    "i8kkvl": "f4px1ci",
+    "Belr9w4": "fn67r4l",
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "Bbmb7ep": ["f1erghxr", "f1ehz9de"],
+    "Beyfa6y": ["f1ehz9de", "f1erghxr"],
+    "B7oj6ja": ["f1spoy8", "fmb70yw"],
+    "Btl43ni": ["fmb70yw", "f1spoy8"],
+    "B6of3ja": "fgr6219",
+    "t21cq0": ["f1ujusj6", "fcgxt0o"],
+    "jrapky": "f10jk5vf",
+    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
+    "mc9l5x": "f13qh94s",
+    "wkccdc": "f874eam",
+    "Budl1dq": "fjj47a5",
+    "zoa1oz": "f16o7v7l",
+    "z8tnut": "fuq56rw",
+    "z189sj": ["f15kemlc", "fdgang7"],
+    "Byoj8tv": "fl2zwns",
+    "uwmqm3": ["fdgang7", "f15kemlc"],
+    "B5xtmjs": "ff54dml",
+    "Bqu9lor": "f52bj20",
+    "B06wobe": "f1dangjo"
+  }
+}, {
+  "d": [".f19dog8a{position:fixed;}", ".f1i1t8d1{top:50%;}", ".f1ktbn1t{left:50%;}", ".ffenbu1{right:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".f6a9g1z{max-height:100vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1erghxr{border-bottom-right-radius:8px;}", ".f1ehz9de{border-bottom-left-radius:8px;}", ".f1spoy8{border-top-right-radius:8px;}", ".fmb70yw{border-top-left-radius:8px;}", ".fgr6219{margin-top:auto;}", ".f1ujusj6{margin-right:auto;}", ".fcgxt0o{margin-left:auto;}", ".f10jk5vf{margin-bottom:auto;}", ".f13qh94s{display:grid;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".f16o7v7l{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".fuq56rw{padding-top:24px;}", ".f15kemlc{padding-right:24px;}", ".fdgang7{padding-left:24px;}", ".fl2zwns{padding-bottom:24px;}"],
+  "m": [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
+    "m": "screen and (max-width: 480px)"
+  }], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
+    "m": "screen and (max-width: 480px)"
+  }], ["@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\";}}", {
+    "m": "screen and (max-width: 480px)"
+  }]]
+});
+/**
+ * Apply styling to the DialogSurface slots based on the state
+ */
+
+
+const useDialogSurfaceStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.dialogSurfaceClassNames.root, styles.root, state.root.className);
+  return state;
+};
+
+exports.useDialogSurfaceStyles_unstable = useDialogSurfaceStyles_unstable;
+//# sourceMappingURL=useDialogSurfaceStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogSurface/useDialogSurfaceStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAaa,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE;AADmE,CAA9D;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAuCA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,uBAAA,CAAwB,IAArC,EAA2C,MAAM,CAAC,IAAlD,EAAwD,KAAK,CAAC,IAAN,CAAW,SAAnE,CAAvB;EACA,OAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n  TITLE_GRID_AREA,\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  SURFACE_BORDER_RADIUS,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n  DIALOG_GAP,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  BODY_GRID_AREA,\n  CLOSE_BUTTON_GRID_AREA,\n} from '../../contexts/constants';\n\nexport const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots> = {\n  root: 'fui-DialogSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'fixed',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '100%',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    boxShadow: tokens.shadow64,\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.gap(DIALOG_GAP),\n    ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(SURFACE_BORDER_RADIUS),\n    ...shorthands.margin('auto'),\n    display: 'grid',\n    gridTemplateRows: 'auto 1fr auto',\n    gridTemplateColumns: '1fr 1fr auto',\n    gridTemplateAreas: `\n      \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${CLOSE_BUTTON_GRID_AREA}\"\n      \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n      \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n    `,\n    ...shorthands.padding(SURFACE_PADDING),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      maxWidth: '100vw',\n      gridTemplateRows: 'auto 1fr auto auto',\n      gridTemplateAreas: `\n        \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${CLOSE_BUTTON_GRID_AREA}\"\n        \"${BODY_GRID_AREA} ${BODY_GRID_AREA} ${BODY_GRID_AREA}\"\n        \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n        \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n      `,\n    },\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogSurfaceClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogTitle = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useDialogTitle_1 = /*#__PURE__*/require("./useDialogTitle");
+
+const renderDialogTitle_1 = /*#__PURE__*/require("./renderDialogTitle");
+
+const useDialogTitleStyles_1 = /*#__PURE__*/require("./useDialogTitleStyles");
+/**
+ * The `DialogTitle` component will expect to have a dialog title/header
+ * and will show the close (X icon) button if specified so.
+ * Apart from styling and presenting `closeButton`, this component does not have other behavior.
+ */
+
+
+exports.DialogTitle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDialogTitle_1.useDialogTitle_unstable(props, ref);
+  useDialogTitleStyles_1.useDialogTitleStyles_unstable(state);
+  return renderDialogTitle_1.renderDialogTitle_unstable(state);
+});
+exports.DialogTitle.displayName = 'DialogTitle';
+//# sourceMappingURL=DialogTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTitle/DialogTitle.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;;;AAIG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","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';\n\n/**\n * The `DialogTitle` component will expect to have a dialog title/header\n * and will show the close (X icon) button if specified so.\n * Apart from styling and presenting `closeButton`, this component does not have other behavior.\n */\nexport const DialogTitle: ForwardRefComponent<DialogTitleProps> = React.forwardRef((props, ref) => {\n  const state = useDialogTitle_unstable(props, ref);\n\n  useDialogTitleStyles_unstable(state);\n  return renderDialogTitle_unstable(state);\n});\n\nDialogTitle.displayName = 'DialogTitle';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogTitle/DialogTitle.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=DialogTitle.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./DialogTitle"), exports);
+
+tslib_1.__exportStar(require("./DialogTitle.types"), exports);
+
+tslib_1.__exportStar(require("./renderDialogTitle"), exports);
+
+tslib_1.__exportStar(require("./useDialogTitle"), exports);
+
+tslib_1.__exportStar(require("./useDialogTitleStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTitle/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogTitle';\nexport * from './DialogTitle.types';\nexport * from './renderDialogTitle';\nexport * from './useDialogTitle';\nexport * from './useDialogTitleStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogTitle/renderDialogTitle.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDialogTitle_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const DialogTrigger_1 = /*#__PURE__*/require("../DialogTrigger");
+/**
+ * Render the final JSX of DialogTitle
+ */
+
+
+const renderDialogTitle_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(React.Fragment, null, React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children), slots.closeButton && React.createElement(DialogTrigger_1.DialogTrigger, {
+    action: "close"
+  }, React.createElement(slots.closeButton, { ...slotProps.closeButton
+  })));
+};
+
+exports.renderDialogTitle_unstable = renderDialogTitle_unstable;
+//# sourceMappingURL=renderDialogTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTitle/renderDialogTitle.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,EAEG,KAAK,CAAC,WAAN,IACC,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,aAAD,EAAc;IAAC,MAAM,EAAC;EAAR,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CADF,CAHJ,CADF;AAUD,CAbM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types';\nimport { DialogTrigger } from '../DialogTrigger';\n\n/**\n * Render the final JSX of DialogTitle\n */\nexport const renderDialogTitle_unstable = (state: DialogTitleState) => {\n  const { slots, slotProps } = getSlots<DialogTitleSlots>(state);\n\n  return (\n    <>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n      {slots.closeButton && (\n        <DialogTrigger action=\"close\">\n          <slots.closeButton {...slotProps.closeButton} />\n        </DialogTrigger>\n      )}\n    </>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogTitle/useDialogTitle.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogTitle_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
+
+const dialogContext_1 = /*#__PURE__*/require("../../contexts/dialogContext");
+
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+/**
+ * Create the state required to render DialogTitle.
+ *
+ * The returned state can be modified with hooks such as useDialogTitleStyles_unstable,
+ * before being passed to renderDialogTitle_unstable.
+ *
+ * @param props - props from this instance of DialogTitle
+ * @param ref - reference to root HTMLElement of DialogTitle
+ */
+
+
+const useDialogTitle_unstable = (props, ref) => {
+  const {
+    as = 'div',
+    closeButton
+  } = props;
+  const modalType = dialogContext_1.useDialogContext_unstable(ctx => ctx.modalType);
+  return {
+    components: {
+      root: 'div',
+      closeButton: 'button'
+    },
+    root: react_utilities_1.getNativeElementProps(as, {
+      ref,
+      id: dialogContext_1.useDialogContext_unstable(ctx => ctx.dialogTitleID),
+      ...props
+    }),
+    closeButton: react_aria_1.useARIAButtonShorthand(closeButton, {
+      required: modalType === 'non-modal',
+      defaultProps: {
+        type: 'button',
+        'aria-label': 'close',
+        children: React.createElement(react_icons_1.Dismiss24Regular, null)
+      }
+    })
+  };
+};
+
+exports.useDialogTitle_unstable = useDialogTitle_unstable;
+//# sourceMappingURL=useDialogTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTitle/useDialogTitle.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE,EAAE,GAAG,KAAP;IAAc;EAAd,IAA8B,KAApC;EACA,MAAM,SAAS,GAAG,eAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,SAArC,CAAlB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,WAAW,EAAE;IAFH,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,EAAtB,EAA0B;MAC9B,GAD8B;MAE9B,EAAE,EAAE,eAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,aAArC,CAF0B;MAG9B,GAAG;IAH2B,CAA1B,CALD;IAUL,WAAW,EAAE,YAAA,CAAA,sBAAA,CAAuB,WAAvB,EAAoC;MAC/C,QAAQ,EAAE,SAAS,KAAK,WADuB;MAE/C,YAAY,EAAE;QACZ,IAAI,EAAE,QADM;QAEZ,cAAc,OAFF;QAGZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,gBAAD,EAAiB,IAAjB;MAHE;IAFiC,CAApC;EAVR,CAAP;AAmBD,CAvBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { useDialogContext_unstable } from '../../contexts/dialogContext';\nimport { Dismiss24Regular } from '@fluentui/react-icons';\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 = 'div', closeButton } = props;\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n\n  return {\n    components: {\n      root: 'div',\n      closeButton: 'button',\n    },\n    root: getNativeElementProps(as, {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogTitleID),\n      ...props,\n    }),\n    closeButton: useARIAButtonShorthand(closeButton, {\n      required: modalType === 'non-modal',\n      defaultProps: {\n        type: 'button', // This is added because the default for type is 'submit'\n        'aria-label': 'close', // TODO: find a better way to add internal labels\n        children: <Dismiss24Regular />,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogTitleStyles_unstable = exports.dialogTitleClassNames = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const localShorthands_1 = /*#__PURE__*/require("../../utils/localShorthands");
+
+const constants_1 = /*#__PURE__*/require("../../contexts/constants");
+
+exports.dialogTitleClassNames = {
+  root: 'fui-DialogTitle',
+  closeButton: 'fui-DialogTitle__closeButton'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
+    "Bg96gwp": "f106mvju",
+    "Ijaq50": "faq1aip",
+    "nk6f5a": "fv2srd9",
+    "Br312pm": "f1m489tg",
+    "Bw0ie65": "f1tz6hh8"
+  },
+  "rootWithoutCloseButton": {},
+  "rootWithCloseButton": {},
+  "closeButton": {
+    "qhf8xq": "f10pi13n",
+    "Bg96gwp": "fez10in",
+    "Bceei9c": "f1k6fduh",
+    "qb2dma": "f9h729m",
+    "Ijaq50": "f1hysmiz",
+    "nk6f5a": "f11nczdl",
+    "Br312pm": "f1379kmu",
+    "Bw0ie65": "f98d4vj"
+  },
+  "closeButtonFocusIndicator": {
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "Bvjrn4i": "fvvvjju",
+    "Bfjx6ro": ["f1j42xvt", "ftiyk5j"],
+    "vkx7if": "f3za06g",
+    "Bhdpb9s": ["ftiyk5j", "f1j42xvt"],
+    "Bpou26a": "f1l3yytu",
+    "Bxui8rh": "fnfm6nw",
+    "v96tid": "f19m7vnf",
+    "cyjxpb": "f8p7r4r",
+    "Bn0no95": "f1iilt6f",
+    "B573luj": ["f2keu4t", "f14fcfgr"],
+    "B639bv6": "faptqjd",
+    "shdfye": ["f14fcfgr", "f2keu4t"],
+    "gekwd": "fhcdesm",
+    "Du8lva": ["f17qorvy", "f1s68zmt"],
+    "Bxo5kf0": "f1kaw87x",
+    "G4c1lw": ["f1s68zmt", "f17qorvy"],
+    "B7295ny": ["fcxw5no", "f1klxzyg"],
+    "Bfl2641": ["f1klxzyg", "fcxw5no"],
+    "Bc850wg": ["f8h35c5", "f41fp59"],
+    "Bwbif6r": ["f41fp59", "f8h35c5"],
+    "Bc7x9ep": "f89yr8c",
+    "Btolfwl": ["f3vokhu", "fgoym2l"],
+    "nuwgkz": "f1b662q1",
+    "iduwum": ["fgoym2l", "f3vokhu"],
+    "zp4aim": "fn1y60j",
+    "Br8g1vq": "f197ac7e",
+    "s8cxrh": ["f1yd45vn", "f1w8wcpf"],
+    "dw1usy": ["f1w8wcpf", "f1yd45vn"]
+  },
+  "resetButton": {
+    "B7ck84d": "f1e4lqlz",
+    "De3pzq": "f1u2r49w",
+    "sj55zd": "f1ym3bx4",
+    "Bahqtrf": "f1mo0ibp",
+    "Be2twd7": "fjoy568",
+    "Bg96gwp": "fytdu2e",
+    "B68tc82": "f1mtd64y",
+    "Bmxbyg5": "f1y7q3j9",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"],
+    "icvyot": "f1ern45e",
+    "vrafjx": ["f1n71otn", "f1deefiw"],
+    "oivjwe": "f1h8hb77",
+    "wvpqe5": ["f1deefiw", "f1n71otn"],
+    "Bv0vk6g": "f37px4s",
+    "fsow6f": "fgusgyc"
+  }
+}, {
+  "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;}", ".fv2srd9{grid-row-end:title;}", ".f1m489tg{grid-column-start:title;}", ".f1tz6hh8{grid-column-end:title;}", ".f10pi13n{position:relative;}", ".fez10in{line-height:0;}", ".f1k6fduh{cursor:pointer;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1hysmiz{grid-row-start:close-button;}", ".f11nczdl{grid-row-end:close-button;}", ".f1379kmu{grid-column-start:close-button;}", ".f98d4vj{grid-column-end:close-button;}", ".fui-FluentProvider .fvvvjju.fui-focus-visible{border-top-color:transparent;}", ".fui-FluentProvider .f1j42xvt.fui-focus-visible{border-right-color:transparent;}", ".fui-FluentProvider .ftiyk5j.fui-focus-visible{border-left-color:transparent;}", ".fui-FluentProvider .f3za06g.fui-focus-visible{border-bottom-color:transparent;}", ".fui-FluentProvider .f1l3yytu.fui-focus-visible::after{content:\"\";}", ".fui-FluentProvider .fnfm6nw.fui-focus-visible::after{position:absolute;}", ".fui-FluentProvider .f19m7vnf.fui-focus-visible::after{pointer-events:none;}", ".fui-FluentProvider .f8p7r4r.fui-focus-visible::after{z-index:1;}", ".fui-FluentProvider .f1iilt6f.fui-focus-visible::after{border-top-style:solid;}", ".fui-FluentProvider .f2keu4t.fui-focus-visible::after{border-right-style:solid;}", ".fui-FluentProvider .f14fcfgr.fui-focus-visible::after{border-left-style:solid;}", ".fui-FluentProvider .faptqjd.fui-focus-visible::after{border-bottom-style:solid;}", ".fui-FluentProvider .fhcdesm.fui-focus-visible::after{border-top-width:2px;}", ".fui-FluentProvider .f17qorvy.fui-focus-visible::after{border-right-width:2px;}", ".fui-FluentProvider .f1s68zmt.fui-focus-visible::after{border-left-width:2px;}", ".fui-FluentProvider .f1kaw87x.fui-focus-visible::after{border-bottom-width:2px;}", ".fui-FluentProvider .fcxw5no.fui-focus-visible::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1klxzyg.fui-focus-visible::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f8h35c5.fui-focus-visible::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f41fp59.fui-focus-visible::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f89yr8c.fui-focus-visible::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f3vokhu.fui-focus-visible::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fgoym2l.fui-focus-visible::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1b662q1.fui-focus-visible::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fn1y60j.fui-focus-visible::after{top:-2px;}", ".fui-FluentProvider .f197ac7e.fui-focus-visible::after{bottom:-2px;}", ".fui-FluentProvider .f1yd45vn.fui-focus-visible::after{left:-2px;}", ".fui-FluentProvider .f1w8wcpf.fui-focus-visible::after{right:-2px;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+/**
+ * Apply styling to the DialogTitle slots based on the state
+ */
+
+
+const useDialogTitleStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.dialogTitleClassNames.root, styles.root, state.closeButton && styles.rootWithCloseButton, !state.closeButton && styles.rootWithoutCloseButton, state.root.className);
+
+  if (state.closeButton) {
+    state.closeButton.className = react_1.mergeClasses(exports.dialogTitleClassNames.closeButton, styles.resetButton, styles.closeButton, styles.closeButtonFocusIndicator, state.closeButton.className);
+  }
+
+  return state;
+};
+
+exports.useDialogTitleStyles_unstable = useDialogTitleStyles_unstable;
+//# sourceMappingURL=useDialogTitleStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTitle/useDialogTitleStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAEa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,WAAW,EAAE;AAFwD,CAA1D;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAmCA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,mBAHP,EAIrB,CAAC,KAAK,CAAC,WAAP,IAAsB,MAAM,CAAC,sBAJR,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;EAOA,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAC5B,OAAA,CAAA,qBAAA,CAAsB,WADM,EAE5B,MAAM,CAAC,WAFqB,EAG5B,MAAM,CAAC,WAHqB,EAI5B,MAAM,CAAC,yBAJqB,EAK5B,KAAK,CAAC,WAAN,CAAkB,SALU,CAA9B;EAOD;;EACD,OAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { gridArea } from '../../utils/localShorthands';\nimport { CLOSE_BUTTON_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';\n\nexport const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {\n  root: 'fui-DialogTitle',\n  closeButton: 'fui-DialogTitle__closeButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.subtitle1,\n    ...gridArea(TITLE_GRID_AREA),\n  },\n  rootWithoutCloseButton: {\n    // ...shorthands.padding(DIALOG_CONTENT_PADDING, DIALOG_CONTENT_PADDING, '8px', DIALOG_CONTENT_PADDING),\n  },\n  rootWithCloseButton: {\n    // ...shorthands.padding(DIALOG_CONTENT_PADDING, '20px', '8px', DIALOG_CONTENT_PADDING),\n  },\n  closeButton: {\n    position: 'relative',\n    lineHeight: '0',\n    cursor: 'pointer',\n    alignSelf: 'start',\n    ...gridArea(CLOSE_BUTTON_GRID_AREA),\n  },\n  closeButtonFocusIndicator: createFocusOutlineStyle(),\n  // TODO: this should be extracted to another package\n  resetButton: {\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\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.closeButton && styles.rootWithCloseButton,\n    !state.closeButton && styles.rootWithoutCloseButton,\n    state.root.className,\n  );\n  if (state.closeButton) {\n    state.closeButton.className = mergeClasses(\n      dialogTitleClassNames.closeButton,\n      styles.resetButton,\n      styles.closeButton,\n      styles.closeButtonFocusIndicator,\n      state.closeButton.className,\n    );\n  }\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogTrigger = void 0;
+
+const useDialogTrigger_1 = /*#__PURE__*/require("./useDialogTrigger");
+
+const renderDialogTrigger_1 = /*#__PURE__*/require("./renderDialogTrigger");
+/**
+ * A non-visual component that wraps its child
+ * and configures them to be the trigger that will open or close a `Dialog`.
+ * This component should only accept one child.
+ *
+ * In case the trigger is used outside `Dialog` component
+ * it'll still provide basic ARIA related attributes
+ * to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,
+ * in that case the user must provide a `controlled state`
+ */
+
+
+const DialogTrigger = props => {
+  const state = useDialogTrigger_1.useDialogTrigger_unstable(props);
+  return renderDialogTrigger_1.renderDialogTrigger_unstable(state);
+};
+
+exports.DialogTrigger = DialogTrigger;
+exports.DialogTrigger.displayName = 'DialogTrigger';
+exports.DialogTrigger.isFluentTriggerComponent = true;
+//# sourceMappingURL=DialogTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTrigger/DialogTrigger.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;;;;;;;;AASG;;;AACI,MAAM,aAAa,GAA0D,KAAK,IAAG;EAC1F,MAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAd;EAEA,OAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb;AAMb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B;AACA,OAAA,CAAA,aAAA,CAAc,wBAAd,GAAyC,IAAzC","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 * In case the trigger is used outside `Dialog` component\n * it'll still provide basic ARIA related attributes\n * to it's wrapped child, but it won't be able to alter the dialog `open` state anymore,\n * in that case the user must provide a `controlled state`\n */\nexport const DialogTrigger: React.FC<DialogTriggerProps> & FluentTriggerComponent = props => {\n  const state = useDialogTrigger_unstable(props);\n\n  return renderDialogTrigger_unstable(state);\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogTrigger/DialogTrigger.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=DialogTrigger.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./DialogTrigger"), exports);
+
+tslib_1.__exportStar(require("./DialogTrigger.types"), exports);
+
+tslib_1.__exportStar(require("./renderDialogTrigger"), exports);
+
+tslib_1.__exportStar(require("./useDialogTrigger"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTrigger/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogTrigger';\nexport * from './DialogTrigger.types';\nexport * from './renderDialogTrigger';\nexport * from './useDialogTrigger';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDialogTrigger_unstable = void 0;
+/**
+ * Render the final JSX of MenuTrigger
+ *
+ * Only renders children
+ */
+
+const renderDialogTrigger_unstable = state => state.children;
+
+exports.renderDialogTrigger_unstable = renderDialogTrigger_unstable;
+//# sourceMappingURL=renderDialogTrigger.js.map

package/lib-commonjs/components/DialogTrigger/renderDialogTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/DialogTrigger/renderDialogTrigger.tsx"],"names":[],"mappings":";;;;;;AAEA;;;;AAIG;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA+B,KAAK,CAAC,QAA1E;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import type { DialogTriggerState } from './DialogTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderDialogTrigger_unstable = (state: DialogTriggerState) => state.children;\n"],"sourceRoot":"../src/"}