@fluentui/react-infobutton 9.0.0-beta.5 → 9.0.0-beta.50

package/lib-commonjs/index.js

@@ -1,38 +1,24 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    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;
-  }
+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
 });
-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;
-  }
-});
-//# sourceMappingURL=index.js.map
+const _infoButton = require("./InfoButton");
+const _infoLabel = require("./InfoLabel");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,8BAAU;EAAA;AAAA;AACVF;EAAAC;EAAAC;IAAA,wCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,6CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,gDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,0CAAsB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/index.ts"],"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"]}
+{"version":3,"sources":["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"],"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.50",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,31 +13,35 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
-    "bundle-size": "bundle-size measure",
+    "bundle-size": "monosize measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "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.19",
-    "@fluentui/scripts": "*"
+    "@fluentui/react-conformance-griffel": "*",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.3.6",
-    "@fluentui/react-tabster": "^9.3.5",
-    "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.1",
-    "@griffel/react": "^1.5.2",
-    "tslib": "^2.1.0"
+    "@fluentui/react-icons": "^2.0.207",
+    "@fluentui/react-label": "^9.1.26",
+    "@fluentui/react-popover": "^9.7.14",
+    "@fluentui/react-tabster": "^9.12.2",
+    "@fluentui/react-theme": "^9.1.11",
+    "@fluentui/react-utilities": "^9.11.1",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.16",
+    "@griffel/react": "^1.5.14",
+    "@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/lib/components/InfoButton/useInfoButtonStyles.js

@@ -1,183 +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,"mappings":"AAAA,SAASA,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,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,EA0FtB;AAEF,MAAMC,uBAAuB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAG9B;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAM;IAAEC;EAAI,CAAE,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAI,CAAE,GAAGF,KAAK,CAACL,OAAO;EAC9B,MAAMQ,YAAY,GAAGN,eAAe,EAAE;EACtC,MAAMO,oBAAoB,GAAGN,uBAAuB,EAAE;EAEtDE,KAAK,CAACJ,OAAO,CAACS,SAAS,GAAGhB,YAAY,CACpCI,oBAAoB,CAACG,OAAO,EAC5BK,IAAI,KAAK,OAAO,IAAIG,oBAAoB,CAACE,KAAK,EAC9CN,KAAK,CAACJ,OAAO,CAACS,SAAS,CACxB;EAEDL,KAAK,CAACN,IAAI,CAACW,SAAS,GAAGhB,YAAY,CACjCI,oBAAoB,CAACC,IAAI,EACzBS,YAAY,CAACI,IAAI,EACjBJ,YAAY,CAACK,YAAY,EACzBL,YAAY,CAACM,cAAc,EAC3BP,IAAI,IAAIC,YAAY,CAACO,QAAQ,EAC7BT,IAAI,KAAK,OAAO,IAAIE,YAAY,CAACG,KAAK,EACtCN,KAAK,CAACN,IAAI,CAACW,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC","names":["createCustomFocusIndicatorStyle","iconFilledClassName","iconRegularClassName","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","content","useButtonStyles","usePopoverSurfaceStyles","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className","large","base","highContrast","focusIndicator","selected"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"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"]}

package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js

@@ -1,190 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useInfoButtonStyles_unstable = exports.infoButtonClassNames = void 0;
-const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-const react_1 = /*#__PURE__*/require("@griffel/react");
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-exports.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__*/react_1.__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__*/react_1.__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
- */
-const useInfoButtonStyles_unstable = state => {
-  const {
-    size
-  } = state;
-  const {
-    open
-  } = state.popover;
-  const buttonStyles = useButtonStyles();
-  const popoverSurfaceStyles = usePopoverSurfaceStyles();
-  state.content.className = react_1.mergeClasses(exports.infoButtonClassNames.content, size === 'large' && popoverSurfaceStyles.large, state.content.className);
-  state.root.className = react_1.mergeClasses(exports.infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
-  return state;
-};
-exports.useInfoButtonStyles_unstable = useInfoButtonStyles_unstable;
-//# sourceMappingURL=useInfoButtonStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,eAAe,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;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,EA0FhC;AAEF,MAAMC,uBAAuB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAGxC;AAEF;;;AAGO,MAAME,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAM;IAAEC;EAAI,CAAE,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAI,CAAE,GAAGF,KAAK,CAACN,OAAO;EAC9B,MAAMS,YAAY,GAAGP,eAAe,EAAE;EACtC,MAAMQ,oBAAoB,GAAGN,uBAAuB,EAAE;EAEtDE,KAAK,CAACL,OAAO,CAACU,SAAS,GAAGR,oBAAY,CACpCL,4BAAoB,CAACG,OAAO,EAC5BM,IAAI,KAAK,OAAO,IAAIG,oBAAoB,CAACE,KAAK,EAC9CN,KAAK,CAACL,OAAO,CAACU,SAAS,CACxB;EAEDL,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGR,oBAAY,CACjCL,4BAAoB,CAACC,IAAI,EACzBU,YAAY,CAACI,IAAI,EACjBJ,YAAY,CAACK,YAAY,EACzBL,YAAY,CAACM,cAAc,EAC3BP,IAAI,IAAIC,YAAY,CAACO,QAAQ,EAC7BT,IAAI,KAAK,OAAO,IAAIE,YAAY,CAACG,KAAK,EACtCN,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAvBYR,oCAA4B","names":["exports","root","popover","content","useButtonStyles","react_1","usePopoverSurfaceStyles","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className","large","base","highContrast","focusIndicator","selected"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"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"]}