@fluentui/react-infobutton 9.0.0-beta.4 → 9.0.0-beta.41

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/"}

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

@@ -1,200 +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,"sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE,gBAD6D;EAEnE;EACA,OAAO,EAAE,yBAH0D;EAInE,OAAO,EAAE;AAJ0D,CAAxD;AAOb;;AAEG;;AACH,MAAM,eAAe,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAhC;AAKA;;AAEG;;;AACI,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,OAAA,CAAA,YAAA,CACxB,OAAA,CAAA,oBAAA,CAAqB,OADG,EAExB,IAAI,KAAK,OAAT,IAAoB,oBAAoB,CAAC,KAFjB,EAGxB,KAAK,CAAC,OAAN,CAAc,SAHU,CAA1B;EAMA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,YAAY,CAAC,IAFQ,EAGrB,YAAY,CAAC,YAHQ,EAIrB,YAAY,CAAC,cAJQ,EAKrB,IAAI,IAAI,YAAY,CAAC,QALA,EAMrB,IAAI,KAAK,OAAT,IAAoB,YAAY,CAAC,KANZ,EAOrB,KAAK,CAAC,IAAN,CAAW,SAPU,CAAvB;EAUA,OAAO,KAAP;AACD,CAvBM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","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/"}