@fluentui/react-infobutton 9.0.0-beta.98 → 9.0.1-0

package/lib/components/InfoButton/renderInfoButton.js

@@ -1,6 +1,6 @@
-/* eslint-disable deprecation/deprecation */   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
-import { PopoverTrigger } from '@fluentui/react-popover';
+/* eslint-disable @typescript-eslint/no-deprecated */   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from "@fluentui/react-utilities";
+import { PopoverTrigger } from "@fluentui/react-popover";
 /**
  * Render the final JSX of InfoButton
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["renderInfoButton.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n  assertSlots<InfoButtonSlots>(state);\n\n  return (\n    <state.popover>\n      <PopoverTrigger>\n        <state.root />\n      </PopoverTrigger>\n      <state.info />\n    </state.popover>\n  );\n};\n"],"names":["assertSlots","PopoverTrigger","renderInfoButton_unstable","state","popover","root","info"],"mappings":"AAAA,0CAA0C,GAC1C,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCH,YAA6BG;IAE7B,qBACE,MAACA,MAAMC,OAAO;;0BACZ,KAACH;0BACC,cAAA,KAACE,MAAME,IAAI;;0BAEb,KAACF,MAAMG,IAAI;;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport type * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState): React.ReactElement => {\n  assertSlots<InfoButtonSlots>(state);\n\n  return (\n    <state.popover>\n      <PopoverTrigger>\n        <state.root />\n      </PopoverTrigger>\n      <state.info />\n    </state.popover>\n  );\n};\n"],"names":["assertSlots","PopoverTrigger","renderInfoButton_unstable","state","popover","root","info"],"mappings":"AAAA,mDAAmD,GACnD,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;;;CAIC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCH,YAA6BG;IAE7B,qBACE,MAACA,MAAMC,OAAO;;0BACZ,KAACH;0BACC,cAAA,KAACE,MAAME,IAAI;;0BAEb,KAACF,MAAMG,IAAI;;;AAGjB,EAAE"}

package/lib/components/InfoButton/useInfoButton.js

@@ -1,7 +1,8 @@
-/* eslint-disable deprecation/deprecation */ import * as React from 'react';
-import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
-import { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement, elementContains } from '@fluentui/react-utilities';
-import { Popover, PopoverSurface } from '@fluentui/react-popover';
+/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
+import * as React from "react";
+import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from "./DefaultInfoButtonIcons.js";
+import { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement, elementContains } from "@fluentui/react-utilities";
+import { Popover, PopoverSurface } from "@fluentui/react-popover";
 const infoButtonIconMap = {
     small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),
     medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),
@@ -23,7 +24,7 @@ const popoverSizeMap = {
  *
  * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */ export const useInfoButton_unstable = (props, ref)=>{
-    const { size = 'medium', inline = true } = props;
+    const { size = 'medium', inline = true, popover, info, ...rest } = props;
     const state = {
         inline,
         size,
@@ -36,7 +37,7 @@ const popoverSizeMap = {
             children: infoButtonIconMap[size],
             type: 'button',
             'aria-label': 'information',
-            ...props,
+            ...rest,
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
@@ -44,7 +45,7 @@ const popoverSizeMap = {
         }), {
             elementType: 'button'
         }),
-        popover: slot.always(props.popover, {
+        popover: slot.always(popover, {
             defaultProps: {
                 inline,
                 positioning: 'above-start',
@@ -53,7 +54,7 @@ const popoverSizeMap = {
             },
             elementType: Popover
         }),
-        info: slot.always(props.info, {
+        info: slot.always(info, {
             defaultProps: {
                 role: 'note',
                 tabIndex: -1

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

@@ -1 +1 @@
-{"version":3,"sources":["useInfoButton.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useControllableState,\n  slot,\n  useMergedRefs,\n  isHTMLElement,\n  elementContains,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n  small: <DefaultInfoButtonIcon12 />,\n  medium: <DefaultInfoButtonIcon16 />,\n  large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n  const { size = 'medium', inline = true } = props;\n\n  const state: InfoButtonState = {\n    inline,\n    size,\n\n    components: {\n      root: 'button',\n      popover: Popover as React.FC<Partial<PopoverProps>>,\n      info: PopoverSurface,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        children: infoButtonIconMap[size],\n        type: 'button',\n        'aria-label': 'information',\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLButtonElement>,\n      }),\n      { elementType: 'button' },\n    ),\n    popover: slot.always(props.popover, {\n      defaultProps: {\n        inline,\n        positioning: 'above-start',\n        size: popoverSizeMap[size],\n        withArrow: true,\n      },\n      elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n    }),\n    info: slot.always(props.info, {\n      defaultProps: {\n        role: 'note',\n        tabIndex: -1,\n      },\n      elementType: PopoverSurface,\n    }),\n  };\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: state.popover.open,\n    defaultState: state.popover.defaultOpen,\n    initialState: false,\n  });\n\n  state.popover.open = popoverOpen;\n  state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n  const focusOutRef = React.useCallback(\n    (el: HTMLDivElement) => {\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('focusout', e => {\n        const nextFocused = e.relatedTarget;\n\n        if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n          setPopoverOpen(false);\n        }\n      });\n    },\n    [setPopoverOpen],\n  );\n\n  state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","isHTMLElement","elementContains","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget"],"mappings":"AAAA,0CAA0C,GAC1C,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,2BAA2B;AACrH,SACEC,wBAAwB,EACxBC,cAAc,EACdC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,aAAa,EACbC,eAAe,QACV,4BAA4B;AACnC,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAIlE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACb;IACRc,sBAAQ,oBAACb;IACTc,qBAAO,oBAACb;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,QAAyB;QAC7BD;QACAD;QAEAG,YAAY;YACVC,MAAM;YACNC,SAASf;YACTgB,MAAMf;QACR;QAEAa,MAAMlB,KAAKqB,MAAM,CACfxB,yBAAyB,UAAU;YACjCyB,UAAUhB,iBAAiB,CAACQ,KAAK;YACjCS,MAAM;YACN,cAAc;YACd,GAAGX,KAAK;YACR,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEW,aAAa;QAAS;QAE1BL,SAASnB,KAAKqB,MAAM,CAACT,MAAMO,OAAO,EAAE;YAClCM,cAAc;gBACZV;gBACAW,aAAa;gBACbZ,MAAMJ,cAAc,CAACI,KAAK;gBAC1Ba,WAAW;YACb;YACAH,aAAapB;QACf;QACAgB,MAAMpB,KAAKqB,MAAM,CAACT,MAAMQ,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAanB;QACf;IACF;IAEA,MAAM,CAACyB,aAAaC,eAAe,GAAGhC,qBAAqB;QACzDiB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,GAAGtC,eAAekB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAc9C,MAAM+C,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,IAAI;YACP;QACF;QAEAA,GAAGC,gBAAgB,CAAC,YAAYL,CAAAA;YAC9B,MAAMM,cAAcN,EAAEO,aAAa;YAEnC,IAAI1C,cAAcyC,gBAAgB,CAACxC,gBAAgBsC,IAAIE,cAAc;gBACnEZ,eAAe;YACjB;QACF;IACF,GACA;QAACA;KAAe;IAGlBf,MAAMI,IAAI,CAACP,GAAG,GAAGZ,cAAce,MAAMI,IAAI,CAACP,GAAG,EAAE0B;IAE/C,OAAOvB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useControllableState,\n  slot,\n  useMergedRefs,\n  isHTMLElement,\n  elementContains,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n  small: <DefaultInfoButtonIcon12 />,\n  medium: <DefaultInfoButtonIcon16 />,\n  large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n  const { size = 'medium', inline = true, popover, info, ...rest } = props;\n\n  const state: InfoButtonState = {\n    inline,\n    size,\n\n    components: {\n      root: 'button',\n      popover: Popover as React.FC<Partial<PopoverProps>>,\n      info: PopoverSurface,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        children: infoButtonIconMap[size],\n        type: 'button',\n        'aria-label': 'information',\n        ...rest,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLButtonElement>,\n      }),\n      { elementType: 'button' },\n    ),\n    popover: slot.always(popover, {\n      defaultProps: {\n        inline,\n        positioning: 'above-start',\n        size: popoverSizeMap[size],\n        withArrow: true,\n      },\n      elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n    }),\n    info: slot.always(info, {\n      defaultProps: {\n        role: 'note',\n        tabIndex: -1,\n      },\n      elementType: PopoverSurface,\n    }),\n  };\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: state.popover.open,\n    defaultState: state.popover.defaultOpen,\n    initialState: false,\n  });\n\n  state.popover.open = popoverOpen;\n  state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n  const focusOutRef = React.useCallback(\n    (el: HTMLDivElement) => {\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('focusout', e => {\n        const nextFocused = e.relatedTarget;\n\n        if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n          setPopoverOpen(false);\n        }\n      });\n    },\n    [setPopoverOpen],\n  );\n\n  state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","isHTMLElement","elementContains","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","popover","info","rest","state","components","root","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,8BAA2B;AACrH,SACEC,wBAAwB,EACxBC,cAAc,EACdC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,aAAa,EACbC,eAAe,QACV,4BAA4B;AACnC,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAIlE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACb;IACRc,sBAAQ,oBAACb;IACTc,qBAAO,oBAACb;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,QAAyB;QAC7BJ;QACAD;QAEAM,YAAY;YACVC,MAAM;YACNL,SAASZ;YACTa,MAAMZ;QACR;QAEAgB,MAAMrB,KAAKsB,MAAM,CACfzB,yBAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGN,IAAI;YACP,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FL,KAAKA;QACP,IACA;YAAEY,aAAa;QAAS;QAE1BT,SAAShB,KAAKsB,MAAM,CAACN,SAAS;YAC5BU,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB;QACf;QACAa,MAAMjB,KAAKsB,MAAM,CAACL,MAAM;YACtBS,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,GAAGjC,qBAAqB;QACzDoB,OAAOA,MAAMH,OAAO,CAACiB,IAAI;QACzBC,cAAcf,MAAMH,OAAO,CAACmB,WAAW;QACvCC,cAAc;IAChB;IAEAjB,MAAMH,OAAO,CAACiB,IAAI,GAAGF;IACrBZ,MAAMH,OAAO,CAACqB,YAAY,GAAGvC,eAAeqB,MAAMH,OAAO,CAACqB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAc/C,MAAMgD,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,IAAI;YACP;QACF;QAEAA,GAAGC,gBAAgB,CAAC,YAAYL,CAAAA;YAC9B,MAAMM,cAAcN,EAAEO,aAAa;YAEnC,IAAI3C,cAAc0C,gBAAgB,CAACzC,gBAAgBuC,IAAIE,cAAc;gBACnEZ,eAAe;YACjB;QACF;IACF,GACA;QAACA;KAAe;IAGlBb,MAAMF,IAAI,CAACJ,GAAG,GAAGZ,cAAckB,MAAMF,IAAI,CAACJ,GAAG,EAAE2B;IAE/C,OAAOrB;AACT,EAAE"}

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

@@ -1,7 +1,9 @@
-/* eslint-disable deprecation/deprecation */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';
+/* eslint-disable @typescript-eslint/no-deprecated */'use client';
+
+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";
 /**
  * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
@@ -58,14 +60,14 @@ const useButtonStyles = /*#__PURE__*/__styles({
     sj55zd: "f1qj7y59",
     D0sxk3: "fgzdkf0",
     t6yez3: "f15q0o9g",
-    Bsw6fvg: "f1rirnrt",
-    Bbusuzp: "f1cg6951"
+    By8wz76: "f1nz3ub2",
+    B7iucu3: "f1205bnn"
   },
   highContrast: {
-    Bbusuzp: "fn0tkbb",
-    Bs6v0vm: "f1rp3av6",
-    B46dtvo: "f1u7gwqv",
-    gh1jta: "fl6kagl"
+    B7iucu3: "fslfhp6",
+    Bfsdueo: "f11s1vgy",
+    pb71ee: "f12b7wpn",
+    ik86qs: "f1u668rv"
   },
   focusIndicator: {
     Brovlpu: "ftqa4ok",
@@ -74,30 +76,36 @@ const useButtonStyles = /*#__PURE__*/__styles({
     Bci5o5g: ["f1d2448m", "ffh67wi"],
     n8qw10: "f1bjia2o",
     Bdrgwmp: ["ffh67wi", "f1d2448m"],
-    Bb7d1vk: "f226i61",
-    zhwhgb: ["f13kzufm", "fsx75g8"],
-    dhy2o1: "flujwa2",
-    Gfyso: ["fsx75g8", "f13kzufm"],
+    Bqhya38: "f1j6vpng",
+    Bwxa6fj: ["f1pniga2", "f1ffjurs"],
+    Bdhvstf: "f987i1v",
+    B7zbvrb: ["f1ffjurs", "f1pniga2"],
     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"],
+    f6g5ot: 0,
+    Boxcth7: 0,
+    Bhdgwq3: 0,
+    hgwjuy: 0,
+    Bshpdp8: 0,
+    Bsom6fd: 0,
+    Blkhhs4: 0,
+    Bonggc9: 0,
+    Ddfuxk: 0,
+    i03rao: 0,
+    kclons: 0,
+    clg4pj: 0,
+    Bpqj9nj: 0,
+    B6dhp37: 0,
+    Bf4ptjt: 0,
+    Bqtpl0w: 0,
+    i4rwgc: "ffwy5si",
+    Dah5zi: 0,
+    B1tsrr9: 0,
+    qqdqy8: 0,
+    Bkh64rk: 0,
+    e3fwne: "f3znvyf",
     J0r882: "f57olzd",
     Bule8hv: ["f4stah7", "fs1por5"],
     Bjwuhne: "f480a47",
@@ -110,25 +118,29 @@ const useButtonStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1b0r8ql", "f1w3695s"]
   }
 }, {
-  d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{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:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{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);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
+  d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{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:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{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;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".f3znvyf[data-fui-focus-visible]::after{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -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);}", ".f8491dx:hover{cursor:pointer;}", ".f1jpd6y0:hover .fui-Icon-filled{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: [["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
+  }], ["@media (forced-colors: active){.f1205bnn{color:Canvas;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
+  }], ["@media (forced-colors: active){.fslfhp6{color:CanvasText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
+  }], ["@media (forced-colors: active){.f11s1vgy:hover,.f11s1vgy:hover:active{forced-color-adjust:none;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
+  }], ["@media (forced-colors: active){.f12b7wpn:hover,.f12b7wpn:hover:active{background-color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl:hover:active{color:Canvas;}}", {
+  }], ["@media (forced-colors: active){.f1u668rv:hover,.f1u668rv:hover:active{color:Canvas;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
+  }], ["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}", {
+  }], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.flujwa2[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
+  }], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
     m: "(forced-colors: active)"
   }]],
   f: [".ftqa4ok:focus{outline-style:none;}"],
@@ -162,8 +174,9 @@ export const useInfoButtonStyles_unstable = state => {
   } = state.popover;
   const buttonStyles = useButtonStyles();
   const popoverSurfaceStyles = usePopoverSurfaceStyles();
+  // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
   state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
+  // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
   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.styles.js.map
+};

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

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bb7d1vk","zhwhgb","dhy2o1","Gfyso","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */ 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';\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const infoButtonClassNames = {\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    info: 'fui-InfoButton__info'\n};\n/**\n * Styles for the root slot\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ const 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        backgroundColor: tokens.colorTransparentBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderStyle('none'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.margin(0),\n        ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n        [`& .${iconFilledClassName}`]: {\n            display: 'none'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'inline-flex'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            color: tokens.colorNeutralForeground2BrandHover,\n            cursor: 'pointer',\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    selected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        color: tokens.colorNeutralForeground2BrandSelected,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline-flex'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            color: 'Canvas'\n        }\n    },\n    highContrast: {\n        '@media (forced-colors: active)': {\n            color: 'CanvasText',\n            ':hover,:hover:active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    },\n    focusIndicator: createFocusOutlineStyle(),\n    large: {\n        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    smallMedium: typographyStyles.caption1,\n    large: typographyStyles.body1\n});\n/**\n * Apply styling to the InfoButton slots based on the state\n */ export const useInfoButtonStyles_unstable = (state)=>{\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n    state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","By8wz76","B7iucu3","highContrast","Bfsdueo","pb71ee","ik86qs","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","p","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';\nimport { 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\";\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const infoButtonClassNames = {\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    info: 'fui-InfoButton__info'\n};\n/**\n * Styles for the root slot\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ const 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        backgroundColor: tokens.colorTransparentBackground,\n        color: tokens.colorNeutralForeground2,\n        ...shorthands.borderStyle('none'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.margin(0),\n        ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n        [`& .${iconFilledClassName}`]: {\n            display: 'none'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'inline-flex'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            color: tokens.colorNeutralForeground2BrandHover,\n            cursor: 'pointer',\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    selected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        color: tokens.colorNeutralForeground2BrandSelected,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline-flex'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            color: 'Canvas'\n        }\n    },\n    highContrast: {\n        '@media (forced-colors: active)': {\n            color: 'CanvasText',\n            ':hover,:hover:active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    },\n    focusIndicator: createFocusOutlineStyle(),\n    large: {\n        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    smallMedium: typographyStyles.caption1,\n    large: typographyStyles.body1\n});\n/**\n * Apply styling to the InfoButton slots based on the state\n */ export const useInfoButtonStyles_unstable = (state)=>{\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring\n    state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n    // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring\n    state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+/**
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */ 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',
+    info: 'fui-InfoButton__info'
+};
+/**
+ * Styles for the root slot
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */ const useButtonStyles = makeStyles({
+    base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        justifyContent: 'center',
+        textDecorationLine: 'none',
+        verticalAlign: 'middle',
+        position: 'relative',
+        backgroundColor: tokens.colorTransparentBackground,
+        color: tokens.colorNeutralForeground2,
+        ...shorthands.borderStyle('none'),
+        ...shorthands.borderRadius(tokens.borderRadiusMedium),
+        ...shorthands.margin(0),
+        ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
+        [`& .${iconFilledClassName}`]: {
+            display: 'none'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'inline-flex'
+        },
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackgroundHover,
+            color: tokens.colorNeutralForeground2BrandHover,
+            cursor: 'pointer',
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline-flex'
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        ':hover:active': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed,
+            color: tokens.colorNeutralForeground2BrandPressed
+        }
+    },
+    selected: {
+        backgroundColor: tokens.colorTransparentBackgroundSelected,
+        color: tokens.colorNeutralForeground2BrandSelected,
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline-flex'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        },
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Highlight',
+            color: 'Canvas'
+        }
+    },
+    highContrast: {
+        '@media (forced-colors: active)': {
+            color: 'CanvasText',
+            ':hover,:hover:active': {
+                forcedColorAdjust: 'none',
+                backgroundColor: 'Highlight',
+                color: 'Canvas'
+            }
+        }
+    },
+    focusIndicator: createFocusOutlineStyle(),
+    large: {
+        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)
+    }
+});
+const usePopoverSurfaceStyles = makeStyles({
+    smallMedium: typographyStyles.caption1,
+    large: typographyStyles.body1
+});
+/**
+ * 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();
+    // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
+    state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
+    // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
+    state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport { 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\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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  info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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      cursor: 'pointer',\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  // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring\n  state.info.className = mergeClasses(\n    infoButtonClassNames.info,\n    size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n    state.info.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring\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"],"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","position","backgroundColor","colorTransparentBackground","color","colorNeutralForeground2","borderStyle","borderRadius","borderRadiusMedium","margin","padding","spacingVerticalXS","spacingHorizontalXS","colorTransparentBackgroundHover","colorNeutralForeground2BrandHover","cursor","colorTransparentBackgroundPressed","colorNeutralForeground2BrandPressed","selected","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","highContrast","forcedColorAdjust","focusIndicator","large","spacingVerticalXXS","usePopoverSurfaceStyles","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}

package/lib/components/InfoLabel/InfoLabel.js

@@ -1,7 +1,8 @@
-/* eslint-disable deprecation/deprecation */ import * as React from 'react';
-import { renderInfoLabel_unstable } from './renderInfoLabel';
-import { useInfoLabel_unstable } from './useInfoLabel';
-import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
+/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
+import * as React from "react";
+import { renderInfoLabel_unstable } from "./renderInfoLabel.js";
+import { useInfoLabel_unstable } from "./useInfoLabel.js";
+import { useInfoLabelStyles_unstable } from "./useInfoLabelStyles.styles.js";
 /**
  * InfoLabel component
  *

package/lib/components/InfoLabel/InfoLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InfoLabel.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,0CAA0C,GAC1C,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;;;CAIC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,2BAA2B,QAAQ,iCAA8B;AAE1E;;;;CAIC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/components/InfoLabel/InfoLabel.types.js

@@ -1 +1,5 @@
-/* eslint-disable deprecation/deprecation */ export { };
+/* eslint-disable @typescript-eslint/no-deprecated */ /**
+ * State used in rendering InfoLabel
+ *
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
+ */ export { };

package/lib/components/InfoLabel/InfoLabel.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InfoLabel.types.ts"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { Label } from '@fluentui/react-label';\nimport { InfoButton } from '../InfoButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InfoButtonProps } from '../InfoButton';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelSlots = {\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Label component.\n   *\n   * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\n   * such as `size` and `required` should be set directly on the `InfoLabel`.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  label: NonNullable<Slot<typeof Label>>;\n\n  /**\n   * The InfoButton component.\n   *\n   * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.\n   */\n  infoButton: Slot<typeof InfoButton>;\n};\n\n/**\n * InfoLabel Props\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {\n  /**\n   * The content of the InfoButton's popover.\n   */\n  info?: InfoButtonProps['info'];\n};\n\n/**\n * State used in rendering InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"mappings":"AAAA,0CAA0C,GAC1C,WA+C2F"}
+{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport type { Label } from '@fluentui/react-label';\nimport type { InfoButton } from '../InfoButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InfoButtonProps } from '../InfoButton';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelSlots = {\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Label component.\n   *\n   * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\n   * such as `size` and `required` should be set directly on the `InfoLabel`.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  label: NonNullable<Slot<typeof Label>>;\n\n  /**\n   * The InfoButton component.\n   *\n   * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.\n   */\n  infoButton: Slot<typeof InfoButton>;\n};\n\n/**\n * InfoLabel Props\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {\n  /**\n   * The content of the InfoButton's popover.\n   */\n  info?: InfoButtonProps['info'];\n};\n\n/**\n * State used in rendering InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"mappings":"AAAA,mDAAmD,GA2CnD;;;;CAIC,GACD,WAA2F"}

package/lib/components/InfoLabel/index.js

@@ -1,5 +1,4 @@
-export * from './InfoLabel';
-export * from './InfoLabel.types';
-export * from './renderInfoLabel';
-export * from './useInfoLabel';
-export * from './useInfoLabelStyles.styles';
+/* eslint-disable @typescript-eslint/no-deprecated */ export { InfoLabel } from "./InfoLabel.js";
+export { renderInfoLabel_unstable } from "./renderInfoLabel.js";
+export { useInfoLabel_unstable } from "./useInfoLabel.js";
+export { infoLabelClassNames, useInfoLabelStyles_unstable } from "./useInfoLabelStyles.styles.js";

package/lib/components/InfoLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InfoLabel';\nexport * from './InfoLabel.types';\nexport * from './renderInfoLabel';\nexport * from './useInfoLabel';\nexport * from './useInfoLabelStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,8BAA8B"}
+{"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","renderInfoLabel_unstable","useInfoLabel_unstable","infoLabelClassNames","useInfoLabelStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD,SAASA,SAAS,QAAQ,iBAAc;AAExC,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,iCAA8B"}

package/lib/components/InfoLabel/renderInfoLabel.js

@@ -1,5 +1,5 @@
-/* eslint-disable deprecation/deprecation */   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+/* eslint-disable @typescript-eslint/no-deprecated */   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of InfoLabel
  *

package/lib/components/InfoLabel/renderInfoLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderInfoLabel.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState) => {\n  assertSlots<InfoLabelSlots>(state);\n\n  return (\n    <state.root>\n      <state.label />\n      {state.infoButton && <state.infoButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"mappings":"AAAA,0CAA0C,GAC1C,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport type * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState): React.ReactElement => {\n  assertSlots<InfoLabelSlots>(state);\n\n  return (\n    <state.root>\n      <state.label />\n      {state.infoButton && <state.infoButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"mappings":"AAAA,mDAAmD,GACnD,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}

package/lib/components/InfoLabel/useInfoLabel.js

@@ -1,7 +1,8 @@
-/* eslint-disable deprecation/deprecation */ import * as React from 'react';
-import { Label } from '@fluentui/react-label';
-import { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';
-import { InfoButton } from '../InfoButton/InfoButton';
+/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
+import * as React from "react";
+import { Label } from "@fluentui/react-label";
+import { mergeCallbacks, useEventCallback, useId, slot } from "@fluentui/react-utilities";
+import { InfoButton } from "../InfoButton/InfoButton.js";
 /**
  * Create the state required to render InfoLabel.
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["useInfoLabel.ts"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n  const {\n    root: rootShorthand,\n    label: labelShorthand,\n    infoButton: infoButtonShorthand,\n    info,\n    size,\n    className,\n    style,\n    ...labelProps\n  } = props;\n  const baseId = useId('infolabel-');\n  const [open, setOpen] = React.useState(false);\n\n  const root = slot.always(rootShorthand, {\n    defaultProps: {\n      className,\n      style,\n    },\n    elementType: 'span',\n  });\n\n  const label = slot.always(labelShorthand, {\n    defaultProps: {\n      id: baseId + '__label',\n      ref,\n      size,\n      ...labelProps,\n    },\n    elementType: Label,\n  });\n\n  const infoButton = slot.optional(infoButtonShorthand, {\n    renderByDefault: !!info,\n    defaultProps: {\n      id: baseId + '__infoButton',\n      size,\n      info,\n    },\n    elementType: InfoButton,\n  });\n\n  const infoButtonPopover = slot.always(infoButton?.popover, {\n    elementType: 'div',\n  });\n  infoButtonPopover.onOpenChange = useEventCallback(\n    mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n      setOpen(data.open);\n    }),\n  );\n\n  if (infoButton) {\n    infoButton.popover = infoButtonPopover;\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: baseId + '__info',\n      },\n      elementType: 'div',\n    });\n\n    infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n    if (open) {\n      root['aria-owns'] ??= infoButton.info?.id;\n    }\n  }\n\n  return {\n    size,\n    components: {\n      root: 'span',\n      label: Label,\n      infoButton: InfoButton,\n    },\n    root,\n    label,\n    infoButton,\n  };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","components"],"mappings":"AAAA,0CAA0C,GAC1C,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YASdA,aAAW;QARXA,WAAWkB,OAAO,GAAGD;QACrBjB,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIP,SAAS;YACf;YACAM,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,CAAC,EAAEF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,CAAC,CAAC;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAmB,YAAY;YACV1B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n  const {\n    root: rootShorthand,\n    label: labelShorthand,\n    infoButton: infoButtonShorthand,\n    info,\n    size,\n    className,\n    style,\n    ...labelProps\n  } = props;\n  const baseId = useId('infolabel-');\n  const [open, setOpen] = React.useState(false);\n\n  const root = slot.always(rootShorthand, {\n    defaultProps: {\n      className,\n      style,\n    },\n    elementType: 'span',\n  });\n\n  const label = slot.always(labelShorthand, {\n    defaultProps: {\n      id: baseId + '__label',\n      ref,\n      size,\n      ...labelProps,\n    },\n    elementType: Label,\n  });\n\n  const infoButton = slot.optional(infoButtonShorthand, {\n    renderByDefault: !!info,\n    defaultProps: {\n      id: baseId + '__infoButton',\n      size,\n      info,\n    },\n    elementType: InfoButton,\n  });\n\n  const infoButtonPopover = slot.always(infoButton?.popover, {\n    elementType: 'div',\n  });\n  infoButtonPopover.onOpenChange = useEventCallback(\n    mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n      setOpen(data.open);\n    }),\n  );\n\n  if (infoButton) {\n    infoButton.popover = infoButtonPopover;\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: baseId + '__info',\n      },\n      elementType: 'div',\n    });\n\n    infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n    if (open) {\n      root['aria-owns'] ??= infoButton.info?.id;\n    }\n  }\n\n  return {\n    size,\n    components: {\n      root: 'span',\n      label: Label,\n      infoButton: InfoButton,\n    },\n    root,\n    label,\n    infoButton,\n  };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","components"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,8BAA2B;AAGtD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YASdA,aAAW;QARXA,WAAWkB,OAAO,GAAGD;QACrBjB,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIP,SAAS;YACf;YACAM,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAmB,YAAY;YACV1B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}

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

@@ -1,5 +1,7 @@
-/* eslint-disable deprecation/deprecation */import { tokens } from '@fluentui/react-theme';
-import { __styles, mergeClasses } from '@griffel/react';
+/* eslint-disable @typescript-eslint/no-deprecated */'use client';
+
+import { tokens } from "@fluentui/react-theme";
+import { __styles, mergeClasses } from "@griffel/react";
 /**
  * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
@@ -36,13 +38,15 @@ const useInfoButtonStyles = /*#__PURE__*/__styles({
  * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
  */
 export const useInfoLabelStyles_unstable = state => {
+  // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
   state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
   const labelStyles = useLabelStyles();
+  // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
   state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
   const infoButtonStyles = useInfoButtonStyles();
   if (state.infoButton) {
+    // eslint-disable-next-line react-hooks/immutability -- deprecated component, not worth refactoring
     state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
   }
   return state;
-};
-//# sourceMappingURL=useInfoLabelStyles.styles.js.map
+};