@fluentui/react-infobutton 9.0.0-beta.9 → 9.0.0-beta.91

package/CHANGELOG.json

@@ -1,288 +0,0 @@
-{
-  "name": "@fluentui/react-infobutton",
-  "entries": [
-    {
-      "date": "Mon, 23 Jan 2023 16:41:44 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.9",
-      "version": "9.0.0-beta.9",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.4.3",
-            "commit": "86a28f6ebcc84819c695f12b841b9377736fb5f7"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 18 Jan 2023 16:32:57 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.8",
-      "version": "9.0.0-beta.8",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.4.2",
-            "commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.4.0",
-            "commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 16 Jan 2023 08:39:02 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.7",
-      "version": "9.0.0-beta.7",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "esteban.230@hotmail.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "4aa7a43c0c302dc151d6446abfde95fe9637edb0",
-            "comment": "fix: Update border for Teams HCM to be transparent."
-          },
-          {
-            "author": "esteban.230@hotmail.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "b326546752a1df3cf4d626dee2d5c47b59ba00ae",
-            "comment": "fix: Update PopoverSurface's role to note and remove need to cast props passed to popover slot."
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.4.1",
-            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.7",
-            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
-          }
-        ],
-        "none": [
-          {
-            "author": "martinhochel@microsoft.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
-            "comment": "chore: migrate to packaged scripts"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 09 Jan 2023 14:35:02 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.6",
-      "version": "9.0.0-beta.6",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.4.0",
-            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.6",
-            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-utilities to v9.4.0",
-            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 04 Jan 2023 01:40:08 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.5",
-      "version": "9.0.0-beta.5",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "tristan.watanabe@gmail.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "b1f29f551486777885af53a857220bffa5342b0f",
-            "comment": "chore: migrate to new package structure."
-          },
-          {
-            "author": "olfedias@microsoft.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
-            "comment": "chore: Update Griffel to latest version"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.3.6",
-            "commit": "3e322d15529451be153e97298873253e21af4082"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.5",
-            "commit": "3e322d15529451be153e97298873253e21af4082"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-utilities to v9.3.1",
-            "commit": "3e322d15529451be153e97298873253e21af4082"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
-            "commit": "3e322d15529451be153e97298873253e21af4082"
-          }
-        ],
-        "none": [
-          {
-            "author": "martinhochel@microsoft.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
-            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
-          },
-          {
-            "author": "martinhochel@microsoft.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
-            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Wed, 21 Dec 2022 10:20:33 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.4",
-      "version": "9.0.0-beta.4",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.3.5",
-            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.4",
-            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-theme to v9.1.5",
-            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 20 Dec 2022 14:59:34 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.3",
-      "version": "9.0.0-beta.3",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.3.4",
-            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.3",
-            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-theme to v9.1.4",
-            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-utilities to v9.3.0",
-            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Mon, 05 Dec 2022 18:29:39 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.2",
-      "version": "9.0.0-beta.2",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.3.3",
-            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.2",
-            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-theme to v9.1.3",
-            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Thu, 17 Nov 2022 23:05:40 GMT",
-      "tag": "@fluentui/react-infobutton_v9.0.0-beta.1",
-      "version": "9.0.0-beta.1",
-      "comments": {
-        "prerelease": [
-          {
-            "author": "esteban.230@hotmail.com",
-            "package": "@fluentui/react-infobutton",
-            "commit": "e22929a533e0830fc75e547b733b38dee60af00e",
-            "comment": "chore: Making the package public and preparing to add to unstable."
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-popover to v9.3.2",
-            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-tabster to v9.3.1",
-            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-infobutton",
-            "comment": "Bump @fluentui/react-utilities to v9.2.2",
-            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
-          }
-        ]
-      }
-    }
-  ]
-}

package/lib/components/InfoButton/useInfoButtonStyles.js

@@ -1,153 +0,0 @@
-import { createFocusOutlineStyle } 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",
-    qhf8xq: "f10pi13n",
-    De3pzq: "f1c21dwh",
-    sj55zd: "fkfq4zb",
-    icvyot: "f1ern45e",
-    vrafjx: ["f1n71otn", "f1deefiw"],
-    oivjwe: "f1h8hb77",
-    wvpqe5: ["f1deefiw", "f1n71otn"],
-    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",
-    Bbusuzp: "f1cg6951"
-  },
-  highContrast: {
-    Bbusuzp: "fn0tkbb",
-    Bs6v0vm: "f1rp3av6",
-    B46dtvo: "f1u7gwqv",
-    gh1jta: "fl6kagl"
-  },
-  focusIndicator: {
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
-    B8q5s1w: "f8hki3x",
-    Bci5o5g: ["f1d2448m", "ffh67wi"],
-    n8qw10: "f1bjia2o",
-    Bdrgwmp: ["ffh67wi", "f1d2448m"],
-    Bm4h7ae: "f15bsgw9",
-    B7ys5i9: "f14e48fq",
-    Busjfv9: "f18yb2kv",
-    Bhk32uz: "fd6o370",
-    Bf4ptjt: "fh1cnn4",
-    kclons: ["fy7oxxb", "f184ne2d"],
-    Bhdgwq3: "fpukqih",
-    Blkhhs4: ["f184ne2d", "fy7oxxb"],
-    Bqtpl0w: "frrh606",
-    clg4pj: ["f1v5zibi", "fo2hd23"],
-    hgwjuy: "ful5kiu",
-    Bonggc9: ["fo2hd23", "f1v5zibi"],
-    B1tsrr9: ["f1jqcqds", "ftffrms"],
-    Dah5zi: ["ftffrms", "f1jqcqds"],
-    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
-    qqdqy8: ["fsr1zz6", "f2e7qr6"],
-    B6dhp37: "f1dvezut",
-    i03rao: ["fd0oaoj", "f1cwg4i8"],
-    Boxcth7: "fjvm52t",
-    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
-    J0r882: "fdiulkx",
-    Bjwuhne: "f1yalx80",
-    Ghsupd: ["fq22d5a", "f1jw7pan"],
-    Bule8hv: ["f1jw7pan", "fq22d5a"]
-  },
-  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;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".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;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".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){.f1cg6951{color:Canvas;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl: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,uBAAuB,QAAQ,yBAAyB;AACjE,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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EA4EtB;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":["createFocusOutlineStyle","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 { createFocusOutlineStyle } 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    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\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      color: 'Canvas',\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      color: 'CanvasText',\n\n      ':hover,:hover:active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n\n  focusIndicator: createFocusOutlineStyle(),\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,160 +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",
-    qhf8xq: "f10pi13n",
-    De3pzq: "f1c21dwh",
-    sj55zd: "fkfq4zb",
-    icvyot: "f1ern45e",
-    vrafjx: ["f1n71otn", "f1deefiw"],
-    oivjwe: "f1h8hb77",
-    wvpqe5: ["f1deefiw", "f1n71otn"],
-    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",
-    Bbusuzp: "f1cg6951"
-  },
-  highContrast: {
-    Bbusuzp: "fn0tkbb",
-    Bs6v0vm: "f1rp3av6",
-    B46dtvo: "f1u7gwqv",
-    gh1jta: "fl6kagl"
-  },
-  focusIndicator: {
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
-    B8q5s1w: "f8hki3x",
-    Bci5o5g: ["f1d2448m", "ffh67wi"],
-    n8qw10: "f1bjia2o",
-    Bdrgwmp: ["ffh67wi", "f1d2448m"],
-    Bm4h7ae: "f15bsgw9",
-    B7ys5i9: "f14e48fq",
-    Busjfv9: "f18yb2kv",
-    Bhk32uz: "fd6o370",
-    Bf4ptjt: "fh1cnn4",
-    kclons: ["fy7oxxb", "f184ne2d"],
-    Bhdgwq3: "fpukqih",
-    Blkhhs4: ["f184ne2d", "fy7oxxb"],
-    Bqtpl0w: "frrh606",
-    clg4pj: ["f1v5zibi", "fo2hd23"],
-    hgwjuy: "ful5kiu",
-    Bonggc9: ["fo2hd23", "f1v5zibi"],
-    B1tsrr9: ["f1jqcqds", "ftffrms"],
-    Dah5zi: ["ftffrms", "f1jqcqds"],
-    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
-    qqdqy8: ["fsr1zz6", "f2e7qr6"],
-    B6dhp37: "f1dvezut",
-    i03rao: ["fd0oaoj", "f1cwg4i8"],
-    Boxcth7: "fjvm52t",
-    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
-    J0r882: "fdiulkx",
-    Bjwuhne: "f1yalx80",
-    Ghsupd: ["fq22d5a", "f1jw7pan"],
-    Bule8hv: ["f1jw7pan", "fq22d5a"]
-  },
-  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;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".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;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".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){.f1cg6951{color:Canvas;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl: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;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EA4EhC;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 { createFocusOutlineStyle } 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    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\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      color: 'Canvas',\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      color: 'CanvasText',\n\n      ':hover,:hover:active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n\n  focusIndicator: createFocusOutlineStyle(),\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"]}