@fluentui/react-infobutton 9.0.0-beta.3 → 9.0.0-beta.30

package/lib-commonjs/components/InfoLabel/useInfoLabel.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useInfoLabel_unstable", {
+    enumerable: true,
+    get: ()=>useInfoLabel_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactLabel = require("@fluentui/react-label");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _infoButton = require("../InfoButton/InfoButton");
+var _infoButton1, _arialabelledby, _root, _ariaowns;
+const useInfoLabel_unstable = (props, ref)=>{
+    const { root: rootShorthand , label: labelShorthand , infoButton: infoButtonShorthand , info , size , className , style , ...labelProps } = props;
+    const baseId = (0, _reactUtilities.useId)('infolabel-');
+    const root = (0, _reactUtilities.resolveShorthand)(rootShorthand, {
+        required: true,
+        defaultProps: {
+            className,
+            style
+        }
+    });
+    const label = (0, _reactUtilities.resolveShorthand)(labelShorthand, {
+        required: true,
+        defaultProps: {
+            id: baseId + '__label',
+            ref,
+            size,
+            ...labelProps
+        }
+    });
+    const infoButton = (0, _reactUtilities.resolveShorthand)(infoButtonShorthand, {
+        required: !!info,
+        defaultProps: {
+            id: baseId + '__infoButton',
+            size,
+            info
+        }
+    });
+    if (infoButton) {
+        var _infoButton_info;
+        infoButton.info = (0, _reactUtilities.resolveShorthand)(infoButton === null || infoButton === void 0 ? void 0 : infoButton.info, {
+            defaultProps: {
+                id: baseId + '__info'
+            }
+        });
+        var _;
+        (_ = (_infoButton1 = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton1[_arialabelledby] = `${label.id} ${infoButton.id}`;
+        var _1;
+        (_1 = (_root = root)[_ariaowns = 'aria-owns']) !== null && _1 !== void 0 ? _1 : _root[_ariaowns] = (_infoButton_info = infoButton.info) === null || _infoButton_info === void 0 ? void 0 : _infoButton_info.id;
+    }
+    return {
+        size,
+        components: {
+            root: 'span',
+            label: _reactLabel.Label,
+            infoButton: _infoButton.InfoButton
+        },
+        root,
+        label,
+        infoButton
+    };
+}; //# sourceMappingURL=useInfoLabel.js.map
+
+//# sourceMappingURL=useInfoLabel.js.map

package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/InfoLabel/useInfoLabel.js"],"sourcesContent":["var _infoButton, _arialabelledby, _root, _ariaowns;\nimport * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n */\nexport const useInfoLabel_unstable = (props, ref) => {\n  const {\n    root: rootShorthand,\n    label: labelShorthand,\n    infoButton: infoButtonShorthand,\n    info,\n    size,\n    className,\n    style,\n    ...labelProps\n  } = props;\n  const baseId = useId('infolabel-');\n  const root = resolveShorthand(rootShorthand, {\n    required: true,\n    defaultProps: {\n      className,\n      style\n    }\n  });\n  const label = resolveShorthand(labelShorthand, {\n    required: true,\n    defaultProps: {\n      id: baseId + '__label',\n      ref,\n      size,\n      ...labelProps\n    }\n  });\n  const infoButton = resolveShorthand(infoButtonShorthand, {\n    required: !!info,\n    defaultProps: {\n      id: baseId + '__infoButton',\n      size,\n      info\n    }\n  });\n  if (infoButton) {\n    var _infoButton_info;\n    infoButton.info = resolveShorthand(infoButton === null || infoButton === void 0 ? void 0 : infoButton.info, {\n      defaultProps: {\n        id: baseId + '__info'\n      }\n    });\n    var _;\n    (_ = (_infoButton = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton[_arialabelledby] = `${label.id} ${infoButton.id}`;\n    var _1;\n    (_1 = (_root = root)[_ariaowns = 'aria-owns']) !== null && _1 !== void 0 ? _1 : _root[_ariaowns] = (_infoButton_info = infoButton.info) === null || _infoButton_info === void 0 ? void 0 : _infoButton_info.id;\n  }\n  return {\n    size,\n    components: {\n      root: 'span',\n      label: Label,\n      infoButton: InfoButton\n    },\n    root,\n    label,\n    infoButton\n  };\n};\n//# sourceMappingURL=useInfoLabel.js.map"],"names":["useInfoLabel_unstable","_infoButton","_arialabelledby","_root","_ariaowns","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","useId","resolveShorthand","required","defaultProps","id","_infoButton_info","_","_1","components","Label","InfoButton"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAbU;4BACD;gCACkB;4BACb;AAJ3B,IAAIC,cAAaC,iBAAiBC,OAAOC;AAclC,MAAMJ,wBAAwB,CAACK,OAAOC,MAAQ;IACnD,MAAM,EACJC,MAAMC,cAAa,EACnBC,OAAOC,eAAc,EACrBC,YAAYC,oBAAmB,EAC/BC,KAAI,EACJC,KAAI,EACJC,UAAS,EACTC,MAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAMZ,OAAOa,IAAAA,gCAAgB,EAACZ,eAAe;QAC3Ca,UAAU,IAAI;QACdC,cAAc;YACZP;YACAC;QACF;IACF;IACA,MAAMP,QAAQW,IAAAA,gCAAgB,EAACV,gBAAgB;QAC7CW,UAAU,IAAI;QACdC,cAAc;YACZC,IAAIL,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;IACF;IACA,MAAMN,aAAaS,IAAAA,gCAAgB,EAACR,qBAAqB;QACvDS,UAAU,CAAC,CAACR;QACZS,cAAc;YACZC,IAAIL,SAAS;YACbJ;YACAD;QACF;IACF;IACA,IAAIF,YAAY;QACd,IAAIa;QACJb,WAAWE,IAAI,GAAGO,IAAAA,gCAAgB,EAACT,eAAe,IAAI,IAAIA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWE,IAAI,EAAE;YAC1GS,cAAc;gBACZC,IAAIL,SAAS;YACf;QACF;QACA,IAAIO;QACHA,CAAAA,IAAI,AAACxB,CAAAA,eAAcU,UAAS,CAAE,CAACT,kBAAkB,kBAAkB,AAAD,MAAO,IAAI,IAAIuB,MAAM,KAAK,IAAIA,IAAIxB,YAAW,CAACC,gBAAgB,GAAG,CAAC,EAAEO,MAAMc,EAAE,CAAC,CAAC,EAAEZ,WAAWY,EAAE,CAAC,CAAC;QAClK,IAAIG;QACHA,CAAAA,KAAK,AAACvB,CAAAA,QAAQI,IAAG,CAAE,CAACH,YAAY,YAAY,AAAD,MAAO,IAAI,IAAIsB,OAAO,KAAK,IAAIA,KAAKvB,KAAK,CAACC,UAAU,GAAG,AAACoB,CAAAA,mBAAmBb,WAAWE,IAAI,AAAD,MAAO,IAAI,IAAIW,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBD,EAAE;IAChN,CAAC;IACD,OAAO;QACLT;QACAa,YAAY;YACVpB,MAAM;YACNE,OAAOmB,iBAAK;YACZjB,YAAYkB,sBAAU;QACxB;QACAtB;QACAE;QACAE;IACF;AACF,GACA,wCAAwC"}

package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js

@@ -0,0 +1,64 @@
+"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, {
+    infoLabelClassNames: ()=>infoLabelClassNames,
+    useInfoLabelStyles_unstable: ()=>useInfoLabelStyles_unstable
+});
+const _react = require("@griffel/react");
+const infoLabelClassNames = {
+    root: 'fui-InfoLabel',
+    label: 'fui-InfoLabel__label',
+    infoButton: 'fui-InfoLabel__infoButton'
+};
+const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        ha4doy: "f12kltsn",
+        Bceei9c: "fpo1scq",
+        sj55zd: "f1ym3bx4"
+    }
+}, {
+    d: [
+        ".f12kltsn{vertical-align:top;}",
+        ".fpo1scq{cursor:inherit;}",
+        ".f1ym3bx4{color:inherit;}"
+    ]
+});
+const useInfoButtonStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        ha4doy: "f12kltsn",
+        B6of3ja: "f1bmzb36",
+        jrapky: "f1nyzk09"
+    },
+    large: {
+        B6of3ja: "fkrn0sh",
+        jrapky: "fmxx68s"
+    }
+}, {
+    d: [
+        ".f12kltsn{vertical-align:top;}",
+        ".f1bmzb36{margin-top:calc(0px - var(--spacingVerticalXXS));}",
+        ".f1nyzk09{margin-bottom:calc(0px - var(--spacingVerticalXXS));}",
+        ".fkrn0sh{margin-top:-1px;}",
+        ".fmxx68s{margin-bottom:-1px;}"
+    ]
+});
+const useInfoLabelStyles_unstable = (state)=>{
+    state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
+    const labelStyles = useLabelStyles();
+    state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
+    const infoButtonStyles = useInfoButtonStyles();
+    if (state.infoButton) {
+        state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
+    }
+    return state;
+}; //# sourceMappingURL=useInfoLabelStyles.styles.js.map
+
+//# sourceMappingURL=useInfoLabelStyles.styles.js.map

package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/InfoLabel/useInfoLabelStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { __styles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n  root: 'fui-InfoLabel',\n  label: 'fui-InfoLabel__label',\n  infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    ha4doy: \"f12kltsn\",\n    Bceei9c: \"fpo1scq\",\n    sj55zd: \"f1ym3bx4\"\n  }\n}, {\n  d: [\".f12kltsn{vertical-align:top;}\", \".fpo1scq{cursor:inherit;}\", \".f1ym3bx4{color:inherit;}\"]\n});\nconst useInfoButtonStyles = /*#__PURE__*/__styles({\n  base: {\n    ha4doy: \"f12kltsn\",\n    B6of3ja: \"f1bmzb36\",\n    jrapky: \"f1nyzk09\"\n  },\n  large: {\n    B6of3ja: \"fkrn0sh\",\n    jrapky: \"fmxx68s\"\n  }\n}, {\n  d: [\".f12kltsn{vertical-align:top;}\", \".f1bmzb36{margin-top:calc(0px - var(--spacingVerticalXXS));}\", \".f1nyzk09{margin-bottom:calc(0px - var(--spacingVerticalXXS));}\", \".fkrn0sh{margin-top:-1px;}\", \".fmxx68s{margin-bottom:-1px;}\"]\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = state => {\n  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n  const labelStyles = useLabelStyles();\n  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n  const infoButtonStyles = useInfoButtonStyles();\n  if (state.infoButton) {\n    state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useInfoLabelStyles.styles.js.map"],"names":["infoLabelClassNames","useInfoLabelStyles_unstable","root","label","infoButton","useLabelStyles","__styles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","state","className","mergeClasses","labelStyles","infoButtonStyles","size"],"mappings":";;;;;;;;;;;IAEaA,mBAAmB,MAAnBA;IA8BAC,2BAA2B,MAA3BA;;uBA/B0B;AAChC,MAAMD,sBAAsB;IACjCE,MAAM;IACNC,OAAO;IACPC,YAAY;AACd;AACA,MAAMC,iBAAiB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC3CC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAkC;QAA6B;KAA4B;AACjG;AACA,MAAMC,sBAAsB,WAAW,GAAEN,IAAAA,kBAAQ,EAAC;IAChDC,MAAM;QACJC,QAAQ;QACRK,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLF,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDH,GAAG;QAAC;QAAkC;QAAgE;QAAmE;QAA8B;KAAgC;AACzO;AAIO,MAAMV,8BAA8Be,CAAAA,QAAS;IAClDA,MAAMd,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,oBAAoBE,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAClF,MAAME,cAAcd;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,oBAAoBG,KAAK,EAAEgB,YAAYZ,IAAI,EAAES,MAAMb,KAAK,CAACc,SAAS;IACvG,MAAMG,mBAAmBR;IACzB,IAAII,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,oBAAoBI,UAAU,EAAEgB,iBAAiBb,IAAI,EAAES,MAAMK,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAAEC,MAAMZ,UAAU,CAACa,SAAS;IAC/K,CAAC;IACD,OAAOD;AACT,GACA,qDAAqD"}

package/lib-commonjs/index.js

@@ -1,40 +1,27 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useInfoButton_unstable = exports.useInfoButtonStyles_unstable = exports.renderInfoButton_unstable = exports.infoButtonClassNames = exports.InfoButton = void 0;
-
-var InfoButton_1 = /*#__PURE__*/require("./InfoButton");
-
-Object.defineProperty(exports, "InfoButton", {
-  enumerable: true,
-  get: function () {
-    return InfoButton_1.InfoButton;
-  }
+    value: true
 });
-Object.defineProperty(exports, "infoButtonClassNames", {
-  enumerable: true,
-  get: function () {
-    return InfoButton_1.infoButtonClassNames;
-  }
-});
-Object.defineProperty(exports, "renderInfoButton_unstable", {
-  enumerable: true,
-  get: function () {
-    return InfoButton_1.renderInfoButton_unstable;
-  }
-});
-Object.defineProperty(exports, "useInfoButtonStyles_unstable", {
-  enumerable: true,
-  get: function () {
-    return InfoButton_1.useInfoButtonStyles_unstable;
-  }
-});
-Object.defineProperty(exports, "useInfoButton_unstable", {
-  enumerable: true,
-  get: function () {
-    return InfoButton_1.useInfoButton_unstable;
-  }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InfoButton: ()=>_infoButton.InfoButton,
+    infoButtonClassNames: ()=>_infoButton.infoButtonClassNames,
+    renderInfoButton_unstable: ()=>_infoButton.renderInfoButton_unstable,
+    useInfoButtonStyles_unstable: ()=>_infoButton.useInfoButtonStyles_unstable,
+    useInfoButton_unstable: ()=>_infoButton.useInfoButton_unstable,
+    InfoLabel: ()=>_infoLabel.InfoLabel,
+    infoLabelClassNames: ()=>_infoLabel.infoLabelClassNames,
+    renderInfoLabel_unstable: ()=>_infoLabel.renderInfoLabel_unstable,
+    useInfoLabelStyles_unstable: ()=>_infoLabel.useInfoLabelStyles_unstable,
+    useInfoLabel_unstable: ()=>_infoLabel.useInfoLabel_unstable
 });
+const _infoButton = require("./InfoButton");
+const _infoLabel = require("./InfoLabel");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-infobutton/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA","sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './InfoButton';\nexport { InfoLabel, infoLabelClassNames, renderInfoLabel_unstable, useInfoLabelStyles_unstable, useInfoLabel_unstable } from './InfoLabel';\n//# sourceMappingURL=index.js.map"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":";;;;;;;;;;;IAASA,UAAU,MAAVA,sBAAU;IAAEC,oBAAoB,MAApBA,gCAAoB;IAAEC,yBAAyB,MAAzBA,qCAAyB;IAAEC,4BAA4B,MAA5BA,wCAA4B;IAAEC,sBAAsB,MAAtBA,kCAAsB;IACjHC,SAAS,MAATA,oBAAS;IAAEC,mBAAmB,MAAnBA,8BAAmB;IAAEC,wBAAwB,MAAxBA,mCAAwB;IAAEC,2BAA2B,MAA3BA,sCAA2B;IAAEC,qBAAqB,MAArBA,gCAAqB;;4BADa;2BACL;CAC7H,iCAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-beta.3",
+  "version": "9.0.0-beta.30",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,25 +19,29 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
+    "generate-api": "just-scripts generate-api",
     "type-check": "tsc -b tsconfig.json",
     "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "start": "yarn storybook",
+    "test-ssr": "test-ssr ./stories/**/*.stories.tsx"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.21",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.3.4",
-    "@fluentui/react-tabster": "^9.3.3",
-    "@fluentui/react-theme": "^9.1.4",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
-    "tslib": "^2.1.0"
+    "@fluentui/react-icons": "^2.0.196",
+    "@fluentui/react-label": "^9.1.12",
+    "@fluentui/react-popover": "^9.5.12",
+    "@fluentui/react-tabster": "^9.7.1",
+    "@fluentui/react-theme": "^9.1.8",
+    "@fluentui/react-utilities": "^9.9.0",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.4",
+    "@griffel/react": "^1.5.2",
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -55,6 +59,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

package/Spec.md

@@ -1,143 +0,0 @@
-# @fluentui/react-infobutton Spec
-
-Convergence epic issue: [#25062](https://github.com/microsoft/fluentui/issues/25062)
-
-## Background
-
-An InfoButton provides a way for users to get more information about a particular UI element. It is a button containing an icon that, when clicked, displays a Popover with the additional information. InfoButton may contain focusable items inside the Popover.
-
-Because the Popover isn't always visible, it should not contain information that people must know in order to complete the field.
-
-### Anatomy
-
-![Anatomy](./etc/images/anatomy.png)
-
-## Prior Art
-
-| Name                                                | library                                                                               | Notes                                                                                                    |
-| --------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| IconButtonTooltip                                   | [Carbon Design System](https://www.carbondesignsystem.com/components/tooltip/usage)   | This is an example within the tooltip component.                                                         |
-| Tooltip with card appearance and general tooltip    | [EverGreen](https://evergreen.segment.com/components/tooltip)                         | This are examples within the tooltip component. This library doesn't use a button, instead just an icon. |
-| Input and guidance to add info button               | [Salesforce](https://www.lightningdesignsystem.com/components/input/)                 | This component lives within Input and shows how to build an info button instead.                         |
-| TextField with example on how to add an info button | [v8](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield)          | This is just an example and on how to implement it.                                                      |
-| ContextualHelp                                      | [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/ContextualHelp.html) | It's a full component and uses a Popover instead of tooltip.                                             |
-
-#### Comparison with v0 and v8
-
-- v0 does not have an InfoButton component.
-- v8 does not have an InfoButton component, but does have a TextField component that has an example of how to add an info button to a TextField, see "Prior Art" section above for more details.
-
-## Sample Code
-
-```jsx
-<InfoButton content="This is some additional information." />
-```
-
-## API
-
-#### Props
-
-```ts
-export type InfoButtonSlots = {
-  root: NonNullable<Slot<'button'>>;
-
-  /**
-   * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.
-   */
-  popover: NonNullable<Slot<PopoverProps>>;
-
-  /**
-   * The content to be displayed in the PopoverSurface when the button is pressed.
-   */
-  content: NonNullable<Slot<typeof PopoverSurface>>;
-};
-
-/**
- * InfoButton Props
- */
-export type InfoButtonProps = ComponentProps<Partial<InfoButtonSlots>>;
-
-/**
- * State used in rendering InfoButton
- */
-export type InfoButtonState = ComponentState<InfoButtonSlots>;
-```
-
-## Structure
-
-_**Public**_
-
-```jsx
-<InfoButton
-  content={
-    <>
-      Popover above-start lorem ipsum dolor sit amet consectetur.
-      <Link href="https://react.fluentui.dev">Learn more</Link>
-    </>
-  }
-/>
-```
-
-_**Internal**_
-
-```jsx
-return (
-  <slots.popover {...(slotProps.popover as PopoverProps)}>
-    <PopoverTrigger>
-      <slots.root {...slotProps.root} />
-    </PopoverTrigger>
-    <slots.content {...slotProps.content} />
-  </slots.popover>
-);
-```
-
-_**DOM**_
-
-```html
-<button type="button" class="fui-Button fui-InfoButton__button">
-  <!-- icon -->
-</button>
-
-<!-- on document.body -->
-<div role="tooltip" class="fui-PopoverSurface fui-InfoButton__content">
-  Popover above-start lorem ipsum dolor sit amet consectetur.
-  <a href="https://react.fluentui.dev">Learn more</a>
-</div>
-```
-
-## Migration
-
-There's no migration guide as `v0` and `v8` do not have an InfoButton component.
-
-## Behaviors
-
-> Note: The behavior will change when used in conjunction with the `Field` component. It is mentioned that when a form has many InfoButtons, it may be better to not make a full tab stop in the button. The idea is to have each field have a "shortcut" that will let you focus on the infobutton. This will be implemented by Field if needed.
-
-- _Component States_
-  - Popover open: The Popover is open and content visible.
-- _Interaction_
-  - _Keyboard_
-    - `Enter` or `Space` key: Opens the Popover.
-      - Focusable items in Popover: Item should trap focus within the Popover.
-      - No focusable items in Popover: Focus should stay on the button.
-    - `Escape` key: Closes the Popover.
-  - _Cursor_
-    - `Click`: Opens the Popover.
-    - `Click` outside of Popover: Closes the Popover.
-  - _Touch_
-    - `Tap`: Opens the Popover.
-    - `Tap` outside of Popover: Closes the Popover.
-  - _Screen readers_
-    - When screen reader is on the button, it should announce that it is a button, that it can be used to open a Popover, and read out the aria-label of the button.
-    - When screen reader is on the Popover, it should announce that it is a dialog, and read out the content of the Popover.
-
-## Accessibility
-
-- `role="tooltip"` is used on the PopoverSurface.
-- Tab order
-  - When tabbing through the page, the button should be a tab stop.
-  - When focused on the button, pressing `Enter` or `Space` should open the Popover.
-    - If the popover does not contain any focusable items, focus should stay on the button.
-  - When focused on the button, pressing `Escape` should close the Popover.
-  - When the Popover is open and it has focusable items, tabbing should move to the next focusable item.
-    - When focused on an item inside the Popover, pressing `Escape` should close the Popover and return to the button.

package/lib/components/InfoButton/useInfoButtonStyles.js

@@ -1,187 +0,0 @@
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
-import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-export const infoButtonClassNames = {
-  root: 'fui-InfoButton',
-  // this className won't be used, but it's needed to satisfy the type checker
-  popover: 'fui-InfoButton__popover',
-  content: 'fui-InfoButton__content'
-};
-/**
- * Styles for the root slot
- */
-
-const useButtonStyles = /*#__PURE__*/__styles({
-  "base": {
-    "Bt984gj": "f122n59",
-    "B7ck84d": "f1ewtqcl",
-    "mc9l5x": "ftuwxu6",
-    "Brf1p80": "f4d9j23",
-    "w71qe1": "f1iuv45f",
-    "ha4doy": "fmrv4ls",
-    "De3pzq": "f1c21dwh",
-    "sj55zd": "fkfq4zb",
-    "B68tc82": "f1p9o1ba",
-    "Bmxbyg5": "f1sil6mw",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "fghlq4f",
-    "h3c5rm": ["f1gn591s", "fjscplz"],
-    "B9xav0g": "fb073pr",
-    "zhjwy3": ["fjscplz", "f1gn591s"],
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f11qmguv", "f1tyq0we"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"],
-    "z8tnut": "f1ywm7hm",
-    "z189sj": ["f7x41pl", "fruq291"],
-    "Byoj8tv": "f14wxoun",
-    "uwmqm3": ["fruq291", "f7x41pl"],
-    "D0sxk3": "f16u1re",
-    "t6yez3": "f1rw4040",
-    "Jwef8y": "fjxutwb",
-    "Bi91k9c": "f139oj5f",
-    "Bk3fhr4": "f1jpd6y0",
-    "Bmfj8id": "fuxngvv",
-    "iro3zm": "fwiml72",
-    "B2d53fq": "f1fg1p5m"
-  },
-  "selected": {
-    "De3pzq": "f1q9pm1r",
-    "sj55zd": "f1qj7y59",
-    "D0sxk3": "fgzdkf0",
-    "t6yez3": "f15q0o9g",
-    "Bsw6fvg": "f1rirnrt",
-    "Bjwas2f": "f14pvji2",
-    "Bn1d65q": ["f1xeojaw", "f1hodmrf"],
-    "Bxeuatn": "fcbbwn3",
-    "n51gp8": ["f1hodmrf", "f1xeojaw"],
-    "Bbusuzp": "f1cg6951"
-  },
-  "highContrast": {
-    "Bjwas2f": "f14pvji2",
-    "Bn1d65q": ["f1xeojaw", "f1hodmrf"],
-    "Bxeuatn": "fcbbwn3",
-    "n51gp8": ["f1hodmrf", "f1xeojaw"],
-    "Bbusuzp": "fn0tkbb",
-    "w76p1f": "f18rpr9v",
-    "B3sm7at": "f5mt1fw",
-    "fe9h6n": "f17188ff",
-    "Bmhq1k7": ["fzyms9j", "f12bfk5t"],
-    "E428ku": "f1ucftwv",
-    "Bipfp3": ["f12bfk5t", "fzyms9j"],
-    "nrfbsj": "f10s0nbj"
-  },
-  "focusIndicator": {
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "kdpuga": ["f1o2ludy", "f1kjnpwc"],
-    "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
-    "B6xbmo0": ["fxmnebo", "f1witrsb"],
-    "dm238s": ["f1witrsb", "fxmnebo"],
-    "B8q5s1w": "f1rzxaq5",
-    "Bci5o5g": ["fipsau9", "f6jszy8"],
-    "n8qw10": "f1emqxbc",
-    "Bdrgwmp": ["f6jszy8", "fipsau9"],
-    "Bfpq7zp": "fr1u5pk",
-    "Bn4voq9": "f1p7hgxw",
-    "g9k6zt": "f9znhxp",
-    "j6ew2k": ["fvbipq7", "fvbipq7"],
-    "Bhxq17a": "f1vjpng2"
-  },
-  "large": {
-    "z8tnut": "fclwglc",
-    "z189sj": ["f1w3695s", "f1b0r8ql"],
-    "Byoj8tv": "fywfov9",
-    "uwmqm3": ["f1b0r8ql", "f1w3695s"]
-  }
-}, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".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);}", ".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);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1rzxaq5[data-fui-focus-visible]{border-top-color:var(--colorTransparentStroke);}", ".fipsau9[data-fui-focus-visible]{border-right-color:var(--colorTransparentStroke);}", ".f6jszy8[data-fui-focus-visible]{border-left-color:var(--colorTransparentStroke);}", ".f1emqxbc[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStroke);}", ".fr1u5pk[data-fui-focus-visible]{outline-color:var(--colorTransparentStroke);}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fvbipq7[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", ".f1vjpng2[data-fui-focus-visible]{z-index:1;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
-  "h": [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
-  "m": [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f18rpr9v:hover,.f18rpr9v :hover:active{forced-color-adjust:none;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f5mt1fw:hover,.f5mt1fw :hover:active{background-color:Highlight;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f17188ff:hover,.f17188ff :hover:active{border-top-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1ucftwv:hover,.f1ucftwv :hover:active{border-bottom-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f10s0nbj:hover,.f10s0nbj :hover:active{color:Canvas;}}", {
-    "m": "(forced-colors: active)"
-  }]],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
-});
-
-const usePopoverSurfaceStyles = /*#__PURE__*/__styles({
-  "smallMedium": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fy9rknc",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "fwrc4pm"
-  },
-  "large": {
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "f1i3iumi"
-  }
-}, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
-});
-/**
- * Apply styling to the InfoButton slots based on the state
- */
-
-
-export const useInfoButtonStyles_unstable = state => {
-  const {
-    size
-  } = state;
-  const {
-    open
-  } = state.popover;
-  const buttonStyles = useButtonStyles();
-  const popoverSurfaceStyles = usePopoverSurfaceStyles();
-  state.content.className = mergeClasses(infoButtonClassNames.content, size === 'large' && popoverSurfaceStyles.large, state.content.className);
-  state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
-  return state;
-};
-//# sourceMappingURL=useInfoButtonStyles.js.map

package/lib/components/InfoButton/useInfoButtonStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE,gBAD6D;EAEnE;EACA,OAAO,EAAE,yBAH0D;EAInE,OAAO,EAAE;AAJ0D,CAA9D;AAOP;;AAEG;;AACH,MAAM,eAAe,gBAAG;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EAAxB;;AA4FA,MAAM,uBAAuB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhC;AAKA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM;IAAE;EAAF,IAAW,KAAjB;EACA,MAAM;IAAE;EAAF,IAAW,KAAK,CAAC,OAAvB;EACA,MAAM,YAAY,GAAG,eAAe,EAApC;EACA,MAAM,oBAAoB,GAAG,uBAAuB,EAApD;EAEA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,oBAAoB,CAAC,OADe,EAEpC,IAAI,KAAK,OAAT,IAAoB,oBAAoB,CAAC,KAFL,EAGpC,KAAK,CAAC,OAAN,CAAc,SAHsB,CAAtC;EAMA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,YAAY,CAAC,IAFoB,EAGjC,YAAY,CAAC,YAHoB,EAIjC,YAAY,CAAC,cAJoB,EAKjC,IAAI,IAAI,YAAY,CAAC,QALY,EAMjC,IAAI,KAAK,OAAT,IAAoB,YAAY,CAAC,KANA,EAOjC,KAAK,CAAC,IAAN,CAAW,SAPsB,CAAnC;EAUA,OAAO,KAAP;AACD,CAvBM","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n  root: 'fui-InfoButton',\n  // this className won't be used, but it's needed to satisfy the type checker\n  popover: 'fui-InfoButton__popover',\n  content: 'fui-InfoButton__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.overflow('hidden'),\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.margin(0),\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'none',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'inline-flex',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      color: tokens.colorNeutralForeground2BrandHover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline-flex',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  selected: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline-flex',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Canvas'),\n      color: 'Canvas',\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('Canvas'),\n      color: 'CanvasText',\n\n      ':hover, :hover:active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        ...shorthands.borderColor('Canvas'),\n        color: 'Canvas',\n      },\n    },\n  },\n\n  focusIndicator: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    outlineColor: tokens.colorTransparentStroke,\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  smallMedium: typographyStyles.caption1,\n  large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.content.className = mergeClasses(\n    infoButtonClassNames.content,\n    size === 'large' && popoverSurfaceStyles.large,\n    state.content.className,\n  );\n\n  state.root.className = mergeClasses(\n    infoButtonClassNames.root,\n    buttonStyles.base,\n    buttonStyles.highContrast,\n    buttonStyles.focusIndicator,\n    open && buttonStyles.selected,\n    size === 'large' && buttonStyles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}