@fluentui/react-popover 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230227-0424.1

package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js

@@ -1,74 +1,85 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "usePopoverSurface_unstable", {
-    enumerable: true,
-    get: ()=>usePopoverSurface_unstable
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _reactTabster = require("@fluentui/react-tabster");
-const _popoverContext = require("../../popoverContext");
-const usePopoverSurface_unstable = (props, ref)=>{
-    const contentRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.contentRef);
-    const openOnHover = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.openOnHover);
-    const setOpen = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.setOpen);
-    const mountNode = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.mountNode);
-    const arrowRef = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.arrowRef);
-    const size = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.size);
-    const withArrow = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.withArrow);
-    const appearance = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.appearance);
-    const trapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.trapFocus);
-    const legacyTrapFocus = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.legacyTrapFocus);
-    const inline = (0, _popoverContext.usePopoverContext_unstable)((context)=>context.inline);
-    const { modalAttributes  } = (0, _reactTabster.useModalAttributes)({
-        trapFocus,
-        legacyTrapFocus,
-        alwaysFocusable: !trapFocus
-    });
-    const state = {
-        inline,
-        appearance,
-        withArrow,
-        size,
-        arrowRef,
-        mountNode,
-        components: {
-            root: 'div'
-        },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
-            ref: (0, _reactUtilities.useMergedRefs)(ref, contentRef),
-            role: trapFocus ? 'dialog' : 'group',
-            'aria-modal': trapFocus ? true : undefined,
-            ...modalAttributes,
-            ...props
-        })
-    };
-    const { onMouseEnter: onMouseEnterOriginal , onMouseLeave: onMouseLeaveOriginal , onKeyDown: onKeyDownOriginal  } = state.root;
-    state.root.onMouseEnter = (e)=>{
-        if (openOnHover) {
-            setOpen(e, true);
-        }
-        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
-    };
-    state.root.onMouseLeave = (e)=>{
-        if (openOnHover) {
-            setOpen(e, false);
-        }
-        onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
-    };
-    state.root.onKeyDown = (e)=>{
-        var _contentRef_current;
-        // only close if the event happened inside the current popover
-        // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
-        if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {
-            setOpen(e, false);
-        }
-        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
-    };
-    return state;
-}; //# sourceMappingURL=usePopoverSurface.js.map
-
+exports.usePopoverSurface_unstable = void 0;
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
+/**
+ * Create the state required to render PopoverSurface.
+ *
+ * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
+ * before being passed to renderPopoverSurface_unstable.
+ *
+ * @param props - props from this instance of PopoverSurface
+ * @param ref - reference to root HTMLDivElement of PopoverSurface
+ */
+const usePopoverSurface_unstable = (props, ref) => {
+  const contentRef = popoverContext_1.usePopoverContext_unstable(context => context.contentRef);
+  const openOnHover = popoverContext_1.usePopoverContext_unstable(context => context.openOnHover);
+  const setOpen = popoverContext_1.usePopoverContext_unstable(context => context.setOpen);
+  const mountNode = popoverContext_1.usePopoverContext_unstable(context => context.mountNode);
+  const arrowRef = popoverContext_1.usePopoverContext_unstable(context => context.arrowRef);
+  const size = popoverContext_1.usePopoverContext_unstable(context => context.size);
+  const withArrow = popoverContext_1.usePopoverContext_unstable(context => context.withArrow);
+  const appearance = popoverContext_1.usePopoverContext_unstable(context => context.appearance);
+  const trapFocus = popoverContext_1.usePopoverContext_unstable(context => context.trapFocus);
+  const legacyTrapFocus = popoverContext_1.usePopoverContext_unstable(context => context.legacyTrapFocus);
+  const inline = popoverContext_1.usePopoverContext_unstable(context => context.inline);
+  const {
+    modalAttributes
+  } = react_tabster_1.useModalAttributes({
+    trapFocus,
+    legacyTrapFocus,
+    alwaysFocusable: !trapFocus
+  });
+  const state = {
+    inline,
+    appearance,
+    withArrow,
+    size,
+    arrowRef,
+    mountNode,
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref: react_utilities_1.useMergedRefs(ref, contentRef),
+      role: trapFocus ? 'dialog' : 'group',
+      'aria-modal': trapFocus ? true : undefined,
+      ...modalAttributes,
+      ...props
+    })
+  };
+  const {
+    onMouseEnter: onMouseEnterOriginal,
+    onMouseLeave: onMouseLeaveOriginal,
+    onKeyDown: onKeyDownOriginal
+  } = state.root;
+  state.root.onMouseEnter = e => {
+    if (openOnHover) {
+      setOpen(e, true);
+    }
+    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
+  };
+  state.root.onMouseLeave = e => {
+    if (openOnHover) {
+      setOpen(e, false);
+    }
+    onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
+  };
+  state.root.onKeyDown = e => {
+    var _a;
+    // only close if the event happened inside the current popover
+    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack
+    if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+      setOpen(e, false);
+    }
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
+  };
+  return state;
+};
+exports.usePopoverSurface_unstable = usePopoverSurface_unstable;
 //# sourceMappingURL=usePopoverSurface.js.map

package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/PopoverSurface/usePopoverSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (props, ref) => {\n  const contentRef = usePopoverContext_unstable(context => context.contentRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const mountNode = usePopoverContext_unstable(context => context.mountNode);\n  const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n  const size = usePopoverContext_unstable(context => context.size);\n  const withArrow = usePopoverContext_unstable(context => context.withArrow);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n  const legacyTrapFocus = usePopoverContext_unstable(context => context.legacyTrapFocus);\n  const inline = usePopoverContext_unstable(context => context.inline);\n  const {\n    modalAttributes\n  } = useModalAttributes({\n    trapFocus,\n    legacyTrapFocus,\n    alwaysFocusable: !trapFocus\n  });\n  const state = {\n    inline,\n    appearance,\n    withArrow,\n    size,\n    arrowRef,\n    mountNode,\n    components: {\n      root: 'div'\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, contentRef),\n      role: trapFocus ? 'dialog' : 'group',\n      'aria-modal': trapFocus ? true : undefined,\n      ...modalAttributes,\n      ...props\n    })\n  };\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal\n  } = state.root;\n  state.root.onMouseEnter = e => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);\n  };\n  state.root.onMouseLeave = e => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n    onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);\n  };\n  state.root.onKeyDown = e => {\n    var _contentRef_current;\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && ((_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.contains(e.target))) {\n      setOpen(e, false);\n    }\n    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);\n  };\n  return state;\n};\n//# sourceMappingURL=usePopoverSurface.js.map"],"names":["usePopoverSurface_unstable","props","ref","contentRef","usePopoverContext_unstable","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","legacyTrapFocus","inline","modalAttributes","useModalAttributes","alwaysFocusable","state","components","root","getNativeElementProps","useMergedRefs","role","undefined","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","_contentRef_current","key","current","contains","target"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCAC8B;8BAClB;gCACQ;AAUpC,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAMC,aAAaC,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQF,UAAU;IAC3E,MAAMG,cAAcF,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQC,WAAW;IAC7E,MAAMC,UAAUH,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQE,OAAO;IACrE,MAAMC,YAAYJ,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQG,SAAS;IACzE,MAAMC,WAAWL,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQI,QAAQ;IACvE,MAAMC,OAAON,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQK,IAAI;IAC/D,MAAMC,YAAYP,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQM,SAAS;IACzE,MAAMC,aAAaR,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQO,UAAU;IAC3E,MAAMC,YAAYT,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQQ,SAAS;IACzE,MAAMC,kBAAkBV,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQS,eAAe;IACrF,MAAMC,SAASX,IAAAA,0CAA0B,EAACC,CAAAA,UAAWA,QAAQU,MAAM;IACnE,MAAM,EACJC,gBAAe,EAChB,GAAGC,IAAAA,gCAAkB,EAAC;QACrBJ;QACAC;QACAI,iBAAiB,CAACL;IACpB;IACA,MAAMM,QAAQ;QACZJ;QACAH;QACAD;QACAD;QACAD;QACAD;QACAY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YACjCpB,KAAKqB,IAAAA,6BAAa,EAACrB,KAAKC;YACxBqB,MAAMX,YAAY,WAAW,OAAO;YACpC,cAAcA,YAAY,IAAI,GAAGY,SAAS;YAC1C,GAAGT,eAAe;YAClB,GAAGf,KAAK;QACV;IACF;IACA,MAAM,EACJyB,cAAcC,qBAAoB,EAClCC,cAAcC,qBAAoB,EAClCC,WAAWC,kBAAiB,EAC7B,GAAGZ,MAAME,IAAI;IACdF,MAAME,IAAI,CAACK,YAAY,GAAGM,CAAAA,IAAK;QAC7B,IAAI1B,aAAa;YACfC,QAAQyB,GAAG,IAAI;QACjB,CAAC;QACDL,yBAAyB,IAAI,IAAIA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,EAAE;IACrG;IACAb,MAAME,IAAI,CAACO,YAAY,GAAGI,CAAAA,IAAK;QAC7B,IAAI1B,aAAa;YACfC,QAAQyB,GAAG,KAAK;QAClB,CAAC;QACDH,yBAAyB,IAAI,IAAIA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBG,EAAE;IACrG;IACAb,MAAME,IAAI,CAACS,SAAS,GAAGE,CAAAA,IAAK;QAC1B,IAAIC;QACJ,8DAA8D;QAC9D,mHAAmH;QACnH,IAAID,EAAEE,GAAG,KAAK,YAAa,CAAA,AAACD,CAAAA,sBAAsB9B,WAAWgC,OAAO,AAAD,MAAO,IAAI,IAAIF,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,QAAQ,CAACJ,EAAEK,MAAM,CAAC,AAAD,GAAI;YACnK9B,QAAQyB,GAAG,KAAK;QAClB,CAAC;QACDD,sBAAsB,IAAI,IAAIA,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,EAAE;IAC5F;IACA,OAAOb;AACT,GACA,6CAA6C"}
+{"version":3,"mappings":"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","names":["usePopoverSurface_unstable","props","ref","contentRef","popoverContext_1","context","openOnHover","setOpen","mountNode","arrowRef","size","withArrow","appearance","trapFocus","legacyTrapFocus","inline","modalAttributes","react_tabster_1","alwaysFocusable","state","components","root","react_utilities_1","role","undefined","onMouseEnter","onMouseEnterOriginal","onMouseLeave","onMouseLeaveOriginal","onKeyDown","onKeyDownOriginal","e","key","current","contains","target","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n  props: PopoverSurfaceProps,\n  ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n  const contentRef = usePopoverContext_unstable(context => context.contentRef);\n  const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const mountNode = usePopoverContext_unstable(context => context.mountNode);\n  const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n  const size = usePopoverContext_unstable(context => context.size);\n  const withArrow = usePopoverContext_unstable(context => context.withArrow);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n  const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n  const legacyTrapFocus = usePopoverContext_unstable(context => context.legacyTrapFocus);\n  const inline = usePopoverContext_unstable(context => context.inline);\n  const { modalAttributes } = useModalAttributes({ trapFocus, legacyTrapFocus, alwaysFocusable: !trapFocus });\n\n  const state: PopoverSurfaceState = {\n    inline,\n    appearance,\n    withArrow,\n    size,\n    arrowRef,\n    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, contentRef),\n      role: trapFocus ? 'dialog' : 'group',\n      'aria-modal': trapFocus ? true : undefined,\n      ...modalAttributes,\n      ...props,\n    }),\n  };\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state.root;\n  state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  return state;\n};\n"]}

package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js

@@ -1,253 +1,123 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    popoverSurfaceClassNames: ()=>popoverSurfaceClassNames,
-    arrowHeights: ()=>arrowHeights,
-    usePopoverSurfaceStyles_unstable: ()=>usePopoverSurfaceStyles_unstable
+  value: true
 });
-const _react = require("@griffel/react");
-const popoverSurfaceClassNames = {
-    root: 'fui-PopoverSurface'
+exports.usePopoverSurfaceStyles_unstable = exports.arrowHeights = exports.popoverSurfaceClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.popoverSurfaceClassNames = {
+  root: 'fui-PopoverSurface'
 };
-const arrowHeights = {
-    small: 6,
-    medium: 8,
-    large: 8
+exports.arrowHeights = {
+  small: 6,
+  medium: 8,
+  large: 8
 };
 /**
  * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    root: {
-        sj55zd: "f19n0e5",
-        De3pzq: "fxugw4r",
-        E5pizo: "f1hg901r",
-        Bbmb7ep: [
-            "f1aa9q02",
-            "f16jpd5f"
-        ],
-        Beyfa6y: [
-            "f16jpd5f",
-            "f1aa9q02"
-        ],
-        B7oj6ja: [
-            "f1jar5jt",
-            "fyu767a"
-        ],
-        Btl43ni: [
-            "fyu767a",
-            "f1jar5jt"
-        ],
-        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"
-        ],
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fkhj508",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "f1i3iumi"
-    },
-    inverted: {
-        De3pzq: "fg3r6xk",
-        sj55zd: "fonrgv7"
-    },
-    brand: {
-        De3pzq: "ffp7eso",
-        sj55zd: "f1phragk"
-    },
-    smallPadding: {
-        z8tnut: "f1kcqot9",
-        z189sj: [
-            "f11qrl6u",
-            "fjlbh76"
-        ],
-        Byoj8tv: "fpe6lb7",
-        uwmqm3: [
-            "fjlbh76",
-            "f11qrl6u"
-        ]
-    },
-    mediumPadding: {
-        z8tnut: "fqag9an",
-        z189sj: [
-            "f1gbmcue",
-            "f1rh9g5y"
-        ],
-        Byoj8tv: "fp67ikv",
-        uwmqm3: [
-            "f1rh9g5y",
-            "f1gbmcue"
-        ]
-    },
-    largePadding: {
-        z8tnut: "fc7z3ec",
-        z189sj: [
-            "fat0sn4",
-            "fekwl8i"
-        ],
-        Byoj8tv: "fe2my4m",
-        uwmqm3: [
-            "fekwl8i",
-            "fat0sn4"
-        ]
-    },
-    smallArrow: {
-        a9b677: "f1ekdpwm",
-        Bqenvij: "f83vc9z"
-    },
-    mediumLargeArrow: {
-        a9b677: "f1kmc0fn",
-        Bqenvij: "fb6lvc5"
-    },
-    arrow: {
-        qhf8xq: "f1euv43f",
-        De3pzq: "f1u2r49w",
-        Bcdw1i0: "fd7fpy0",
-        Bj3rh1h: "f1bsuimh",
-        Ftih45: "f1wl9k8s",
-        B1puzpu: "f1wkw4r9",
-        Brfgrao: "f1j7ml58",
-        Bcvre1j: "fyl8oag",
-        Ccq8qp: "frdoeuz",
-        Baz25je: "fb81m9q",
-        cmx5o7: "f1ljr5q2",
-        B4f6apu: "fyfemzf",
-        m598lv: "focyt6c",
-        Bk5zm6e: "fnhxbxj",
-        y0oebl: "fdw6hkg",
-        qa3bma: "f11yjt3y",
-        Bqjgrrk: "f1172wan",
-        Budzafs: [
-            "f9e5op9",
-            "f112wvtl"
-        ],
-        Hv9wc6: [
-            "ftj5xct",
-            "fyavhwi"
-        ],
-        hl6cv3: "f1773hnp",
-        Bh2vraf: "f1n8855c",
-        yayu3t: "f1v7783n",
-        wedwtw: "fsw6im5",
-        rhl9o9: "fh2hsk5",
-        Bu8t5uz: "f159pzir",
-        B6q6orb: "f11yvu4",
-        Bwwlvwl: "fm1ycve"
-    }
+ */
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    sj55zd: "f19n0e5",
+    De3pzq: "fxugw4r",
+    E5pizo: "f1hg901r",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    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"],
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  inverted: {
+    De3pzq: "fg3r6xk",
+    sj55zd: "fonrgv7"
+  },
+  brand: {
+    De3pzq: "ffp7eso",
+    sj55zd: "f1phragk"
+  },
+  smallPadding: {
+    z8tnut: "f1kcqot9",
+    z189sj: ["f11qrl6u", "fjlbh76"],
+    Byoj8tv: "fpe6lb7",
+    uwmqm3: ["fjlbh76", "f11qrl6u"]
+  },
+  mediumPadding: {
+    z8tnut: "fqag9an",
+    z189sj: ["f1gbmcue", "f1rh9g5y"],
+    Byoj8tv: "fp67ikv",
+    uwmqm3: ["f1rh9g5y", "f1gbmcue"]
+  },
+  largePadding: {
+    z8tnut: "fc7z3ec",
+    z189sj: ["fat0sn4", "fekwl8i"],
+    Byoj8tv: "fe2my4m",
+    uwmqm3: ["fekwl8i", "fat0sn4"]
+  },
+  smallArrow: {
+    a9b677: "f1ekdpwm",
+    Bqenvij: "f83vc9z"
+  },
+  mediumLargeArrow: {
+    a9b677: "f1kmc0fn",
+    Bqenvij: "fb6lvc5"
+  },
+  arrow: {
+    qhf8xq: "f1euv43f",
+    De3pzq: "f1u2r49w",
+    Bcdw1i0: "fd7fpy0",
+    Bj3rh1h: "f1bsuimh",
+    Ftih45: "f1wl9k8s",
+    B1puzpu: "f1wkw4r9",
+    Brfgrao: "f1j7ml58",
+    Bcvre1j: "fyl8oag",
+    Ccq8qp: "frdoeuz",
+    Baz25je: "fb81m9q",
+    cmx5o7: "f1ljr5q2",
+    B4f6apu: "fyfemzf",
+    m598lv: "focyt6c",
+    Bk5zm6e: "fnhxbxj",
+    y0oebl: "fdw6hkg",
+    qa3bma: "f11yjt3y",
+    Bqjgrrk: "f1172wan",
+    Budzafs: ["f9e5op9", "f112wvtl"],
+    Hv9wc6: ["ftj5xct", "fyavhwi"],
+    hl6cv3: "f1773hnp",
+    Bh2vraf: "f1n8855c",
+    yayu3t: "f1v7783n",
+    wedwtw: "fsw6im5",
+    rhl9o9: "fh2hsk5",
+    Bu8t5uz: "f159pzir",
+    B6q6orb: "f11yvu4",
+    Bwwlvwl: "fm1ycve"
+  }
 }, {
-    d: [
-        ".f19n0e5{color:var(--colorNeutralForeground1);}",
-        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
-        ".f1hg901r{box-shadow:var(--shadow16);}",
-        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
-        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
-        ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
-        ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
-        ".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);}",
-        ".fk6fouc{font-family:var(--fontFamilyBase);}",
-        ".fkhj508{font-size:var(--fontSizeBase300);}",
-        ".figsok6{font-weight:var(--fontWeightRegular);}",
-        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
-        ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}",
-        ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
-        ".ffp7eso{background-color:var(--colorBrandBackground);}",
-        ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
-        ".f1kcqot9{padding-top:12px;}",
-        ".f11qrl6u{padding-right:12px;}",
-        ".fjlbh76{padding-left:12px;}",
-        ".fpe6lb7{padding-bottom:12px;}",
-        ".fqag9an{padding-top:16px;}",
-        ".f1gbmcue{padding-right:16px;}",
-        ".f1rh9g5y{padding-left:16px;}",
-        ".fp67ikv{padding-bottom:16px;}",
-        ".fc7z3ec{padding-top:20px;}",
-        ".fat0sn4{padding-right:20px;}",
-        ".fekwl8i{padding-left:20px;}",
-        ".fe2my4m{padding-bottom:20px;}",
-        ".f1ekdpwm{width:8.484px;}",
-        ".f83vc9z{height:8.484px;}",
-        ".f1kmc0fn{width:11.312px;}",
-        ".fb6lvc5{height:11.312px;}",
-        ".f1euv43f{position:absolute;}",
-        ".f1u2r49w{background-color:inherit;}",
-        ".fd7fpy0{visibility:hidden;}",
-        ".f1bsuimh{z-index:-1;}",
-        ".f1wl9k8s::before{content:\"\";}",
-        ".f1wkw4r9::before{visibility:visible;}",
-        ".f1j7ml58::before{position:absolute;}",
-        ".fyl8oag::before{box-sizing:border-box;}",
-        ".frdoeuz::before{width:inherit;}",
-        ".fb81m9q::before{height:inherit;}",
-        ".f1ljr5q2::before{background-color:inherit;}",
-        ".fyfemzf::before{border-right-width:1px;}",
-        ".focyt6c::before{border-right-style:solid;}",
-        ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}",
-        ".fdw6hkg::before{border-bottom-width:1px;}",
-        ".f11yjt3y::before{border-bottom-style:solid;}",
-        ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}",
-        ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}",
-        ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}",
-        ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}",
-        ".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}",
-        "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}",
-        "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}",
-        "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}",
-        "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}",
-        "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}",
-        "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}",
-        "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}",
-        "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"
-    ]
+  d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".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);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fc7z3ec{padding-top:20px;}", ".fat0sn4{padding-right:20px;}", ".fekwl8i{padding-left:20px;}", ".fe2my4m{padding-bottom:20px;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".f1kmc0fn{width:11.312px;}", ".fb6lvc5{height:11.312px;}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1wl9k8s::before{content:\"\";}", ".f1wkw4r9::before{visibility:visible;}", ".f1j7ml58::before{position:absolute;}", ".fyl8oag::before{box-sizing:border-box;}", ".frdoeuz::before{width:inherit;}", ".fb81m9q::before{height:inherit;}", ".f1ljr5q2::before{background-color:inherit;}", ".fyfemzf::before{border-right-width:1px;}", ".focyt6c::before{border-right-style:solid;}", ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
 });
-const usePopoverSurfaceStyles_unstable = (state)=>{
-    const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(popoverSurfaceClassNames.root, styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
-    state.arrowClassName = (0, _react.mergeClasses)(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
-    return state;
-}; //# sourceMappingURL=usePopoverSurfaceStyles.js.map
-
+/**
+ * Apply styling to the PopoverSurface slots based on the state
+ */
+const usePopoverSurfaceStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.popoverSurfaceClassNames.root, styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);
+  state.arrowClassName = react_1.mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
+  return state;
+};
+exports.usePopoverSurfaceStyles_unstable = usePopoverSurfaceStyles_unstable;
 //# sourceMappingURL=usePopoverSurfaceStyles.js.map

package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/PopoverSurface/usePopoverSurfaceStyles.js"],"sourcesContent":["import { shorthands, __styles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const popoverSurfaceClassNames = {\n  root: 'fui-PopoverSurface'\n};\nexport const arrowHeights = {\n  small: 6,\n  medium: 8,\n  large: 8\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    sj55zd: \"f19n0e5\",\n    De3pzq: \"fxugw4r\",\n    E5pizo: \"f1hg901r\",\n    Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n    Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n    B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n    Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n    B4j52fo: \"f5ogflp\",\n    Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n    Bn0qgzm: \"f1f09k3d\",\n    ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n    icvyot: \"fzkkow9\",\n    vrafjx: [\"fcdblym\", \"fjik90z\"],\n    oivjwe: \"fg706s2\",\n    wvpqe5: [\"fjik90z\", \"fcdblym\"],\n    g2u3we: \"fghlq4f\",\n    h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n    B9xav0g: \"fb073pr\",\n    zhjwy3: [\"fjscplz\", \"f1gn591s\"],\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  inverted: {\n    De3pzq: \"fg3r6xk\",\n    sj55zd: \"fonrgv7\"\n  },\n  brand: {\n    De3pzq: \"ffp7eso\",\n    sj55zd: \"f1phragk\"\n  },\n  smallPadding: {\n    z8tnut: \"f1kcqot9\",\n    z189sj: [\"f11qrl6u\", \"fjlbh76\"],\n    Byoj8tv: \"fpe6lb7\",\n    uwmqm3: [\"fjlbh76\", \"f11qrl6u\"]\n  },\n  mediumPadding: {\n    z8tnut: \"fqag9an\",\n    z189sj: [\"f1gbmcue\", \"f1rh9g5y\"],\n    Byoj8tv: \"fp67ikv\",\n    uwmqm3: [\"f1rh9g5y\", \"f1gbmcue\"]\n  },\n  largePadding: {\n    z8tnut: \"fc7z3ec\",\n    z189sj: [\"fat0sn4\", \"fekwl8i\"],\n    Byoj8tv: \"fe2my4m\",\n    uwmqm3: [\"fekwl8i\", \"fat0sn4\"]\n  },\n  smallArrow: {\n    a9b677: \"f1ekdpwm\",\n    Bqenvij: \"f83vc9z\"\n  },\n  mediumLargeArrow: {\n    a9b677: \"f1kmc0fn\",\n    Bqenvij: \"fb6lvc5\"\n  },\n  arrow: {\n    qhf8xq: \"f1euv43f\",\n    De3pzq: \"f1u2r49w\",\n    Bcdw1i0: \"fd7fpy0\",\n    Bj3rh1h: \"f1bsuimh\",\n    Ftih45: \"f1wl9k8s\",\n    B1puzpu: \"f1wkw4r9\",\n    Brfgrao: \"f1j7ml58\",\n    Bcvre1j: \"fyl8oag\",\n    Ccq8qp: \"frdoeuz\",\n    Baz25je: \"fb81m9q\",\n    cmx5o7: \"f1ljr5q2\",\n    B4f6apu: \"fyfemzf\",\n    m598lv: \"focyt6c\",\n    Bk5zm6e: \"fnhxbxj\",\n    y0oebl: \"fdw6hkg\",\n    qa3bma: \"f11yjt3y\",\n    Bqjgrrk: \"f1172wan\",\n    Budzafs: [\"f9e5op9\", \"f112wvtl\"],\n    Hv9wc6: [\"ftj5xct\", \"fyavhwi\"],\n    hl6cv3: \"f1773hnp\",\n    Bh2vraf: \"f1n8855c\",\n    yayu3t: \"f1v7783n\",\n    wedwtw: \"fsw6im5\",\n    rhl9o9: \"fh2hsk5\",\n    Bu8t5uz: \"f159pzir\",\n    B6q6orb: \"f11yvu4\",\n    Bwwlvwl: \"fm1ycve\"\n  }\n}, {\n  d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1hg901r{box-shadow:var(--shadow16);}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".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);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}\", \".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}\", \".ffp7eso{background-color:var(--colorBrandBackground);}\", \".f1phragk{color:var(--colorNeutralForegroundOnBrand);}\", \".f1kcqot9{padding-top:12px;}\", \".f11qrl6u{padding-right:12px;}\", \".fjlbh76{padding-left:12px;}\", \".fpe6lb7{padding-bottom:12px;}\", \".fqag9an{padding-top:16px;}\", \".f1gbmcue{padding-right:16px;}\", \".f1rh9g5y{padding-left:16px;}\", \".fp67ikv{padding-bottom:16px;}\", \".fc7z3ec{padding-top:20px;}\", \".fat0sn4{padding-right:20px;}\", \".fekwl8i{padding-left:20px;}\", \".fe2my4m{padding-bottom:20px;}\", \".f1ekdpwm{width:8.484px;}\", \".f83vc9z{height:8.484px;}\", \".f1kmc0fn{width:11.312px;}\", \".fb6lvc5{height:11.312px;}\", \".f1euv43f{position:absolute;}\", \".f1u2r49w{background-color:inherit;}\", \".fd7fpy0{visibility:hidden;}\", \".f1bsuimh{z-index:-1;}\", \".f1wl9k8s::before{content:\\\"\\\";}\", \".f1wkw4r9::before{visibility:visible;}\", \".f1j7ml58::before{position:absolute;}\", \".fyl8oag::before{box-sizing:border-box;}\", \".frdoeuz::before{width:inherit;}\", \".fb81m9q::before{height:inherit;}\", \".f1ljr5q2::before{background-color:inherit;}\", \".fyfemzf::before{border-right-width:1px;}\", \".focyt6c::before{border-right-style:solid;}\", \".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}\", \".fdw6hkg::before{border-bottom-width:1px;}\", \".f11yjt3y::before{border-bottom-style:solid;}\", \".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}\", \".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}\", \".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}\", \".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}\", \".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}\", \"[data-popper-placement^=\\\"top\\\"] .f1773hnp{bottom:-1px;}\", \"[data-popper-placement^=\\\"top\\\"] .f1n8855c{--angle:0;}\", \"[data-popper-placement^=\\\"right\\\"] .f1v7783n{left:-1px;}\", \"[data-popper-placement^=\\\"right\\\"] .fsw6im5{--angle:90deg;}\", \"[data-popper-placement^=\\\"bottom\\\"] .fh2hsk5{top:-1px;}\", \"[data-popper-placement^=\\\"bottom\\\"] .f159pzir{--angle:180deg;}\", \"[data-popper-placement^=\\\"left\\\"] .f11yvu4{right:-1px;}\", \"[data-popper-placement^=\\\"left\\\"] .fm1ycve{--angle:270deg;}\"]\n});\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(popoverSurfaceClassNames.root, styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.appearance === 'inverted' && styles.inverted, state.appearance === 'brand' && styles.brand, state.root.className);\n  state.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);\n  return state;\n};\n//# sourceMappingURL=usePopoverSurfaceStyles.js.map"],"names":["popoverSurfaceClassNames","arrowHeights","usePopoverSurfaceStyles_unstable","root","small","medium","large","useStyles","__styles","sj55zd","De3pzq","E5pizo","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","inverted","brand","smallPadding","z8tnut","z189sj","Byoj8tv","uwmqm3","mediumPadding","largePadding","smallArrow","a9b677","Bqenvij","mediumLargeArrow","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","B4f6apu","m598lv","Bk5zm6e","y0oebl","qa3bma","Bqjgrrk","Budzafs","Hv9wc6","hl6cv3","Bh2vraf","yayu3t","wedwtw","rhl9o9","Bu8t5uz","B6q6orb","Bwwlvwl","d","state","styles","className","mergeClasses","size","appearance","arrowClassName"],"mappings":"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"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAKaA,gCAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAEYD,oBAAY,GAAgC;EACvDE,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE;CACR;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;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;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;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;EAAA;AAAA;EAAA;AAAA,EAmC1B;AAEF;;;AAGO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAyB;EAClG,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGJ,oBAAY,CACjCN,gCAAwB,CAACC,IAAI,EAC7BQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACG,IAAI,KAAK,OAAO,IAAIF,MAAM,CAACG,YAAY,EAC7CJ,KAAK,CAACG,IAAI,KAAK,QAAQ,IAAIF,MAAM,CAACI,aAAa,EAC/CL,KAAK,CAACG,IAAI,KAAK,OAAO,IAAIF,MAAM,CAACK,YAAY,EAC7CN,KAAK,CAACO,UAAU,KAAK,UAAU,IAAIN,MAAM,CAACO,QAAQ,EAClDR,KAAK,CAACO,UAAU,KAAK,OAAO,IAAIN,MAAM,CAACQ,KAAK,EAC5CT,KAAK,CAACP,IAAI,CAACS,SAAS,CACrB;EAEDF,KAAK,CAACU,cAAc,GAAGZ,oBAAY,CACjCG,MAAM,CAACU,KAAK,EACZX,KAAK,CAACG,IAAI,KAAK,OAAO,GAAGF,MAAM,CAACW,UAAU,GAAGX,MAAM,CAACY,gBAAgB,CACrE;EAED,OAAOb,KAAK;AACd,CAAC;AAnBYR,wCAAgC","names":["exports","root","small","medium","large","useStyles","react_1","usePopoverSurfaceStyles_unstable","state","styles","className","size","smallPadding","mediumPadding","largePadding","appearance","inverted","brand","arrowClassName","arrow","smallArrow","mediumLargeArrow"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {\n  root: 'fui-PopoverSurface',\n};\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow16,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    ...typographyStyles.body1,\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n\n  smallPadding: {\n    ...shorthands.padding('12px'),\n  },\n\n  mediumPadding: {\n    ...shorthands.padding('16px'),\n  },\n\n  largePadding: {\n    ...shorthands.padding('20px'),\n  },\n\n  smallArrow: createArrowHeightStyles(arrowHeights.small),\n  mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),\n  arrow: createArrowStyles({ arrowHeight: undefined }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    popoverSurfaceClassNames.root,\n    styles.root,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.appearance === 'inverted' && styles.inverted,\n    state.appearance === 'brand' && styles.brand,\n    state.root.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"]}