@fluentui/react-infolabel 9.4.5 → 9.4.7

package/CHANGELOG.md

@@ -1,23 +1,55 @@
 # Change Log - @fluentui/react-infolabel
 
-This log was last generated on Thu, 21 Aug 2025 12:20:40 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.7)
+
+Thu, 02 Oct 2025 15:07:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.6..@fluentui/react-infolabel_v9.4.7)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-label to v9.3.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-popover to v9.12.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.6)
+
+Mon, 08 Sep 2025 12:50:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.5..@fluentui/react-infolabel_v9.4.6)
+
+### Patches
+
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-label to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-popover to v9.12.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.5)
 
-Thu, 21 Aug 2025 12:20:40 GMT 
+Thu, 21 Aug 2025 12:25:37 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infolabel_v9.4.4..@fluentui/react-infolabel_v9.4.5)
 
 ### Patches
 
 - chore: update api.md ([PR #33498](https://github.com/microsoft/fluentui/pull/33498) by vgenaev@gmail.com)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-label to v9.3.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-popover to v9.12.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-label to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-popover to v9.12.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-infolabel_v9.4.4)
 

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import type { PopoverProps } from '@fluentui/react-popover';
 import type { PopoverSurface } from '@fluentui/react-popover';
@@ -18,7 +19,7 @@ export declare const infoButtonClassNames: SlotClassNames<InfoButtonSlots>;
 /**
  * InfoButton Props
  */
-export declare type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
+export declare type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled' | 'popover'> & {
     /**
      * Size of the InfoButton.
      *
@@ -31,6 +32,10 @@ export declare type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlot
      * @default true
      */
     inline?: boolean;
+    /**
+     * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
+     */
+    popover?: InfoButtonSlots['popover'];
 };
 
 export declare type InfoButtonSlots = {
@@ -95,12 +100,12 @@ export declare type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoL
 /**
  * Render the final JSX of InfoButton
  */
-export declare const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
+export declare const renderInfoButton_unstable: (state: InfoButtonState) => JSXElement;
 
 /**
  * Render the final JSX of InfoLabel
  */
-export declare const renderInfoLabel_unstable: (state: InfoLabelState) => JSX.Element;
+export declare const renderInfoLabel_unstable: (state: InfoLabelState) => JSXElement;
 
 /**
  * Create the state required to render InfoButton.

package/lib/components/InfoButton/InfoButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { renderInfoButton_unstable } from './renderInfoButton';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n  const state = useInfoButton_unstable(props, ref);\n\n  useInfoButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n  const state = useInfoButton_unstable(props, ref);\n\n  useInfoButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n   */\n  popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n  /**\n   * The information to be displayed in the PopoverSurface when the button is pressed.\n   */\n  info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n  /**\n   * Size of the InfoButton.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Whether the InfoButton should be rendered inline or on a Portal.\n   *\n   * @default true\n   */\n  inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAAmH"}
+{"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n   */\n  popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n  /**\n   * The information to be displayed in the PopoverSurface when the button is pressed.\n   */\n  info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled' | 'popover'> & {\n  /**\n   * Size of the InfoButton.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Whether the InfoButton should be rendered inline or on a Portal.\n   *\n   * @default true\n   */\n  inline?: boolean;\n\n  /**\n   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n   */\n  popover?: InfoButtonSlots['popover'];\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAyCA;;CAEC,GACD,WAAmH"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @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 */\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,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,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":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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 */\nexport const renderInfoButton_unstable = (state: InfoButtonState): JSXElement => {\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,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,0BAA0B;AAGzD;;CAEC,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,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
 import { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, elementContains, useEventCallback } from '@fluentui/react-utilities';
@@ -21,7 +22,7 @@ const popoverSizeMap = {
  * @param props - props from this instance of InfoButton
  * @param ref - reference to root HTMLButtonElement of InfoButton
  */ export const useInfoButton_unstable = (props, ref)=>{
-    const { size = 'medium', inline = true } = props;
+    const { size = 'medium', inline = true, popover, info, ...rest } = props;
     const rootRef = useMergedRefs(ref);
     const state = {
         inline,
@@ -35,12 +36,12 @@ const popoverSizeMap = {
             children: infoButtonIconMap[size],
             type: 'button',
             'aria-label': 'information',
-            ...props,
+            ...rest,
             ref: rootRef
         }), {
             elementType: 'button'
         }),
-        popover: slot.always(props.popover, {
+        popover: slot.always(popover, {
             defaultProps: {
                 inline,
                 positioning: 'above-start',
@@ -49,7 +50,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":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useControllableState,\n  slot,\n  useMergedRefs,\n  elementContains,\n  useEventCallback,\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 HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n  const { size = 'medium', inline = true } = props;\n\n  const rootRef = useMergedRefs(ref);\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        ref: rootRef,\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 infoRef = useMergedRefs(state.info.ref);\n  state.info.ref = infoRef;\n\n  // Hide the popover when focus moves out of the button and popover\n  const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n    const nextFocused = e.relatedTarget;\n\n    if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n      setPopoverOpen(false);\n    }\n  };\n\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n  state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","rootRef","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"mappings":"AAAA,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,eAAe,EACfC,gBAAgB,QACX,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;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,UAAUf,cAAcY;IAE9B,MAAMI,QAAyB;QAC7BF;QACAD;QAEAI,YAAY;YACVC,MAAM;YACNC,SAAShB;YACTiB,MAAMhB;QACR;QAEAc,MAAMnB,KAAKsB,MAAM,CACfzB,yBAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGZ,KAAK;YACRC,KAAKG;QACP,IACA;YAAES,aAAa;QAAS;QAE1BL,SAASpB,KAAKsB,MAAM,CAACV,MAAMQ,OAAO,EAAE;YAClCM,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB;QACf;QACAiB,MAAMrB,KAAKsB,MAAM,CAACV,MAAMS,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,GAAGjC,qBAAqB;QACzDkB,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,GAAGvC,eAAemB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,UAAUvC,cAAcgB,MAAMI,IAAI,CAACR,GAAG;IAC5CI,MAAMI,IAAI,CAACR,GAAG,GAAG2B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAe1B,QAAQ4B,OAAO,KAAKF,eAAe,CAACxC,gBAAgBsC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAf,MAAME,IAAI,CAAC0B,MAAM,GAAG1C,iBAAiBL,eAAemB,MAAME,IAAI,CAAC0B,MAAM,EAAEJ;IACvExB,MAAMI,IAAI,CAACyB,aAAa,GAAG3C,iBAAiBL,eAAemB,MAAMI,IAAI,CAACyB,aAAa,EAAEL;IACrF,OAAOxB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["'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  elementContains,\n  useEventCallback,\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 HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n  const { size = 'medium', inline = true, popover, info, ...rest } = props;\n\n  const rootRef = useMergedRefs(ref);\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        ref: rootRef,\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 infoRef = useMergedRefs(state.info.ref);\n  state.info.ref = infoRef;\n\n  // Hide the popover when focus moves out of the button and popover\n  const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n    const nextFocused = e.relatedTarget;\n\n    if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n      setPopoverOpen(false);\n    }\n  };\n\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n  state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","popover","info","rest","rootRef","state","components","root","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"mappings":"AAAA;AAEA,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,eAAe,EACfC,gBAAgB,QACX,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;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,UAAUlB,cAAcY;IAE9B,MAAMO,QAAyB;QAC7BL;QACAD;QAEAO,YAAY;YACVC,MAAM;YACNN,SAASZ;YACTa,MAAMZ;QACR;QAEAiB,MAAMtB,KAAKuB,MAAM,CACf1B,yBAAyB,UAAU;YACjC2B,UAAUlB,iBAAiB,CAACQ,KAAK;YACjCW,MAAM;YACN,cAAc;YACd,GAAGP,IAAI;YACPL,KAAKM;QACP,IACA;YAAEO,aAAa;QAAS;QAE1BV,SAAShB,KAAKuB,MAAM,CAACP,SAAS;YAC5BW,cAAc;gBACZZ;gBACAa,aAAa;gBACbd,MAAMJ,cAAc,CAACI,KAAK;gBAC1Be,WAAW;YACb;YACAH,aAAatB;QACf;QACAa,MAAMjB,KAAKuB,MAAM,CAACN,MAAM;YACtBU,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAarB;QACf;IACF;IAEA,MAAM,CAAC2B,aAAaC,eAAe,GAAGlC,qBAAqB;QACzDqB,OAAOA,MAAMJ,OAAO,CAACkB,IAAI;QACzBC,cAAcf,MAAMJ,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAChB;IAEAjB,MAAMJ,OAAO,CAACkB,IAAI,GAAGF;IACrBZ,MAAMJ,OAAO,CAACsB,YAAY,GAAGxC,eAAesB,MAAMJ,OAAO,CAACsB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,UAAUxC,cAAcmB,MAAMH,IAAI,CAACJ,GAAG;IAC5CO,MAAMH,IAAI,CAACJ,GAAG,GAAG4B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAexB,QAAQ0B,OAAO,KAAKF,eAAe,CAACzC,gBAAgBuC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAb,MAAME,IAAI,CAACwB,MAAM,GAAG3C,iBAAiBL,eAAesB,MAAME,IAAI,CAACwB,MAAM,EAAEJ;IACvEtB,MAAMH,IAAI,CAAC8B,aAAa,GAAG5C,iBAAiBL,eAAesB,MAAMH,IAAI,CAAC8B,aAAa,EAAEL;IACrF,OAAOtB;AACT,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';

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","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","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","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","B2u0y6b","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport 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 */ 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        borderRadius: tokens.borderRadiusMedium,\n        margin: '0',\n        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        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    base: {\n        maxWidth: '264px'\n    },\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    'use no memo';\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, 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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","ignoreList":[]}
+{"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","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","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","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","B2u0y6b","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["'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';\nexport 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 */ 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        borderRadius: tokens.borderRadiusMedium,\n        margin: '0',\n        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        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    base: {\n        maxWidth: '264px'\n    },\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    'use no memo';\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, 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":"AAAA,YAAY;;AACZ,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,eAAe,gBAAGT,QAAA;EAAAU,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAA9B,MAAA;IAAAC,MAAA;IAAAoB,MAAA;IAAAC,MAAA;IAAAS,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAD,OAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAA9D,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAA2D,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiE3B,CAAC;AACF,MAAMC,uBAAuB,gBAAGvG,QAAA;EAAAU,IAAA;IAAA8F,OAAA;EAAA;EAAAC,WAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAb,KAAA;IAAAU,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAM/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAK,CAAC,GAAGF,KAAK,CAACxG,OAAO;EAC9B,MAAM2G,YAAY,GAAGzG,eAAe,CAAC,CAAC;EACtC,MAAM0G,oBAAoB,GAAGZ,uBAAuB,CAAC,CAAC;EACtDQ,KAAK,CAACvG,IAAI,CAAC4G,SAAS,GAAGnH,YAAY,CAACI,oBAAoB,CAACG,IAAI,EAAE2G,oBAAoB,CAACzG,IAAI,EAAEsG,IAAI,KAAK,OAAO,GAAGG,oBAAoB,CAACnB,KAAK,GAAGmB,oBAAoB,CAACV,WAAW,EAAEM,KAAK,CAACvG,IAAI,CAAC4G,SAAS,CAAC;EACjML,KAAK,CAACzG,IAAI,CAAC8G,SAAS,GAAGnH,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAE4G,YAAY,CAACxG,IAAI,EAAEwG,YAAY,CAAC/D,YAAY,EAAE+D,YAAY,CAAC3D,cAAc,EAAE0D,IAAI,IAAIC,YAAY,CAAClE,QAAQ,EAAEgE,IAAI,KAAK,OAAO,IAAIE,YAAY,CAAClB,KAAK,EAAEe,KAAK,CAACzG,IAAI,CAAC8G,SAAS,CAAC;EACtO,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n  root: 'fui-InfoButton',\n  // this className won't be used, but it's needed to satisfy the type checker\n  popover: 'fui-InfoButton__popover',\n  info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    margin: '0',\n    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    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  base: {\n    maxWidth: '264px',\n  },\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  'use no memo';\n\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.info.className = mergeClasses(\n    infoButtonClassNames.info,\n    popoverSurfaceStyles.base,\n    size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n    state.info.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"],"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","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["'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\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 */\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    borderRadius: tokens.borderRadiusMedium,\n    margin: '0',\n    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    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  base: {\n    maxWidth: '264px',\n  },\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  'use no memo';\n\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.info.className = mergeClasses(\n    infoButtonClassNames.info,\n    popoverSurfaceStyles.base,\n    size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n    state.info.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"],"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","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}

package/lib/components/InfoLabel/InfoLabel.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { renderInfoLabel_unstable } from './renderInfoLabel';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BR,4BAA4B,+BAA+BQ;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5BR,4BAA4B,+BAA+BQ;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @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 */\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,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,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":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState): JSXElement => {\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,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,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,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { Label } from '@fluentui/react-label';
-import { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { mergeCallbacks, useId, slot, useEventCallback } from '@fluentui/react-utilities';
 import { InfoButton } from '../InfoButton/InfoButton';
 /**
  * Create the state required to render InfoLabel.
@@ -42,7 +43,7 @@ import { InfoButton } from '../InfoButton/InfoButton';
     const infoButtonPopover = slot.always(infoButton === null || infoButton === void 0 ? void 0 : infoButton.popover, {
         elementType: 'div'
     });
-    infoButtonPopover.onOpenChange = useEventCallback(mergeCallbacks(infoButtonPopover.onOpenChange, (e, data)=>{
+    infoButtonPopover.onOpenChange = useEventCallback(mergeCallbacks(infoButtonPopover.onOpenChange, (_, data)=>{
         setOpen(data.open);
     }));
     if (infoButton) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * 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 */\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    const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: infoPopupId,\n        'aria-labelledby': infoPopupId,\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","infoPopupId","components"],"mappings":"AAAA,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;;;;;;;;CAQC,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;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,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;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useId, slot, useEventCallback } 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 */\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, (_, data) => {\n      setOpen(data.open);\n    }),\n  );\n\n  if (infoButton) {\n    infoButton.popover = infoButtonPopover;\n    const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: infoPopupId,\n        'aria-labelledby': infoPopupId,\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","useId","slot","useEventCallback","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","_","data","infoPopupId","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,KAAK,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;CAQC,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,SAASlB,MAAM;IACrB,MAAM,CAACmB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAON,KAAKqB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQR,KAAKqB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaV,KAAKyB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB3B,KAAKqB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG5B,iBAC/BH,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGZ,KAAKyB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,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;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { tokens } from '@fluentui/react-theme';
 import { __styles, mergeClasses } from '@griffel/react';
 export const infoLabelClassNames = {

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n    root: 'fui-InfoLabel',\n    label: 'fui-InfoLabel__label',\n    infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        cursor: 'inherit',\n        color: 'inherit'\n    }\n});\nconst useInfoButtonStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        // Negative margin to align with the text\n        marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n        marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n    },\n    large: {\n        // Negative margin to align with the text\n        marginTop: '-1px',\n        marginBottom: '-1px'\n    }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n    const labelStyles = useLabelStyles();\n    state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n    const infoButtonStyles = useInfoButtonStyles();\n    if (state.infoButton) {\n        state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;EACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;EACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;EAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;IAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;EAClL;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n    root: 'fui-InfoLabel',\n    label: 'fui-InfoLabel__label',\n    infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        cursor: 'inherit',\n        color: 'inherit'\n    }\n});\nconst useInfoButtonStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        // Negative margin to align with the text\n        marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n        marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n    },\n    large: {\n        // Negative margin to align with the text\n        marginTop: '-1px',\n        marginBottom: '-1px'\n    }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n    const labelStyles = useLabelStyles();\n    state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n    const infoButtonStyles = useInfoButtonStyles();\n    if (state.infoButton) {\n        state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;EACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;EACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;EAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;IAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;EAClL;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses } from '@griffel/react';
 export const infoLabelClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n  root: 'fui-InfoLabel',\n  label: 'fui-InfoLabel__label',\n  infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n    cursor: 'inherit',\n    color: 'inherit',\n  },\n});\n\nconst useInfoButtonStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n\n    // Negative margin to align with the text\n    marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n    marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n  },\n\n  large: {\n    // Negative margin to align with the text\n    marginTop: '-1px',\n    marginBottom: '-1px',\n  },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n  const labelStyles = useLabelStyles();\n  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n  const infoButtonStyles = useInfoButtonStyles();\n  if (state.infoButton) {\n    state.infoButton.className = mergeClasses(\n      infoLabelClassNames.infoButton,\n      infoButtonStyles.base,\n      state.size === 'large' && infoButtonStyles.large,\n      state.infoButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,iBAAiBN,WAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,OAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,OAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,aAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,aAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,GAAGjB,aAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n  root: 'fui-InfoLabel',\n  label: 'fui-InfoLabel__label',\n  infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n    cursor: 'inherit',\n    color: 'inherit',\n  },\n});\n\nconst useInfoButtonStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n\n    // Negative margin to align with the text\n    marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n    marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n  },\n\n  large: {\n    // Negative margin to align with the text\n    marginTop: '-1px',\n    marginBottom: '-1px',\n  },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n  const labelStyles = useLabelStyles();\n  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n  const infoButtonStyles = useInfoButtonStyles();\n  if (state.infoButton) {\n    state.infoButton.className = mergeClasses(\n      infoLabelClassNames.infoButton,\n      infoButtonStyles.base,\n      state.size === 'large' && infoButtonStyles.large,\n      state.infoButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,iBAAiBN,WAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,OAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,OAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,aAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,aAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,GAAGjB,aAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n  const state = useInfoButton_unstable(props, ref);\n\n  useInfoButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;qCACa,kCAAkC;kCAEpC,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;AAMrE,mBAAMA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,yCAAAA,EAAuBI,OAAOC;QAE5CJ,uDAAAA,EAA6BK;QAC7BR,gDAAAA,EAA4B,gCAAgCQ;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n  const state = useInfoButton_unstable(props, ref);\n\n  useInfoButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoButtonStyles_unstable')(state);\n\n  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACa,kCAAkC;kCAEpC,qBAAqB;+BACxB,kBAAkB;2CACZ,+BAA+B;AAMrE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQN,qCAAAA,EAAuBI,OAAOC;QAE5CJ,uDAAAA,EAA6BK;QAC7BR,gDAAAA,EAA4B,gCAAgCQ;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n   */\n  popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n  /**\n   * The information to be displayed in the PopoverSurface when the button is pressed.\n   */\n  info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n  /**\n   * Size of the InfoButton.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Whether the InfoButton should be rendered inline or on a Portal.\n   *\n   * @default true\n   */\n  inline?: boolean;\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAAmH"}
+{"version":3,"sources":["../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n   */\n  popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;\n\n  /**\n   * The information to be displayed in the PopoverSurface when the button is pressed.\n   */\n  info: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled' | 'popover'> & {\n  /**\n   * Size of the InfoButton.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Whether the InfoButton should be rendered inline or on a Portal.\n   *\n   * @default true\n   */\n  inline?: boolean;\n\n  /**\n   * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.\n   */\n  popover?: InfoButtonSlots['popover'];\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;\n"],"names":[],"mappings":"AAyCA;;CAEC,GACD,WAAmH"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @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 */\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":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;8BACzB,0BAA0B;AAMlD,kCAAkC,CAACC;QACxCH,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,OAAO,EAAA;;0BACZ,mBAAA,EAACH,4BAAAA,EAAAA;0BACC,WAAA,OAAA,eAAA,EAACE,MAAME,IAAI,EAAA,CAAA;;8BAEb,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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 */\nexport const renderInfoButton_unstable = (state: InfoButtonState): JSXElement => {\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":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;8BAEzB,0BAA0B;AAMlD,kCAAkC,CAACC;QACxCH,2BAAAA,EAA6BG;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,OAAO,EAAA;;0BACZ,mBAAA,EAACH,4BAAAA,EAAAA;0BACC,WAAA,OAAA,eAAA,EAACE,MAAME,IAAI,EAAA,CAAA;;8BAEb,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;;;AAGjB,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -24,7 +25,7 @@ const popoverSizeMap = {
     large: 'medium'
 };
 const useInfoButton_unstable = (props, ref)=>{
-    const { size = 'medium', inline = true } = props;
+    const { size = 'medium', inline = true, popover, info, ...rest } = props;
     const rootRef = (0, _reactutilities.useMergedRefs)(ref);
     const state = {
         inline,
@@ -38,12 +39,12 @@ const useInfoButton_unstable = (props, ref)=>{
             children: infoButtonIconMap[size],
             type: 'button',
             'aria-label': 'information',
-            ...props,
+            ...rest,
             ref: rootRef
         }), {
             elementType: 'button'
         }),
-        popover: _reactutilities.slot.always(props.popover, {
+        popover: _reactutilities.slot.always(popover, {
             defaultProps: {
                 inline,
                 positioning: 'above-start',
@@ -52,7 +53,7 @@ const useInfoButton_unstable = (props, ref)=>{
             },
             elementType: _reactpopover.Popover
         }),
-        info: _reactutilities.slot.always(props.info, {
+        info: _reactutilities.slot.always(info, {
             defaultProps: {
                 role: 'note',
                 tabIndex: -1

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useControllableState,\n  slot,\n  useMergedRefs,\n  elementContains,\n  useEventCallback,\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 HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n  const { size = 'medium', inline = true } = props;\n\n  const rootRef = useMergedRefs(ref);\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        ref: rootRef,\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 infoRef = useMergedRefs(state.info.ref);\n  state.info.ref = infoRef;\n\n  // Hide the popover when focus moves out of the button and popover\n  const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n    const nextFocused = e.relatedTarget;\n\n    if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n      setPopoverOpen(false);\n    }\n  };\n\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n  state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","rootRef","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"mappings":";;;;+BAoCakB;;;;;;;iEApCU,QAAQ;wCAC2D,2BAA2B;gCAS9G,4BAA4B;8BACK,0BAA0B;AAIlE,MAAML,oBAAoB;IACxBC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACb,+CAAAA,EAAAA;IACRc,QAAAA,WAAAA,GAAQ,OAAA,aAAA,CAACb,+CAAAA,EAAAA;IACTc,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACb,+CAAAA,EAAAA;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAWO,+BAA+B,CAACG,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,cAAUf,6BAAAA,EAAcY;IAE9B,MAAMI,QAAyB;QAC7BF;QACAD;QAEAI,YAAY;YACVC,MAAM;YACNC,SAAShB,qBAAAA;YACTiB,MAAMhB,4BAAAA;QACR;QAEAc,MAAMnB,oBAAAA,CAAKsB,MAAM,KACfzB,wCAAAA,EAAyB,UAAU;YACjC0B,UAAUjB,iBAAiB,CAACQ,KAAK;YACjCU,MAAM;YACN,cAAc;YACd,GAAGZ,KAAK;YACRC,KAAKG;QACP,IACA;YAAES,aAAa;QAAS;QAE1BL,SAASpB,oBAAAA,CAAKsB,MAAM,CAACV,MAAMQ,OAAO,EAAE;YAClCM,cAAc;gBACZX;gBACAY,aAAa;gBACbb,MAAMJ,cAAc,CAACI,KAAK;gBAC1Bc,WAAW;YACb;YACAH,aAAarB,qBAAAA;QACf;QACAiB,MAAMrB,oBAAAA,CAAKsB,MAAM,CAACV,MAAMS,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAapB,4BAAAA;QACf;IACF;IAEA,MAAM,CAAC0B,aAAaC,eAAe,OAAGjC,oCAAAA,EAAqB;QACzDkB,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,OAAGvC,8BAAAA,EAAemB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAUvC,6BAAAA,EAAcgB,MAAMI,IAAI,CAACR,GAAG;IAC5CI,MAAMI,IAAI,CAACR,GAAG,GAAG2B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAe1B,QAAQ4B,OAAO,KAAKF,eAAe,KAACxC,+BAAAA,EAAgBsC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAf,MAAME,IAAI,CAAC0B,MAAM,OAAG1C,gCAAAA,MAAiBL,8BAAAA,EAAemB,MAAME,IAAI,CAAC0B,MAAM,EAAEJ;IACvExB,MAAMI,IAAI,CAACyB,aAAa,OAAG3C,gCAAAA,MAAiBL,8BAAAA,EAAemB,MAAMI,IAAI,CAACyB,aAAa,EAAEL;IACrF,OAAOxB;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["'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  elementContains,\n  useEventCallback,\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 HTMLButtonElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLButtonElement>): InfoButtonState => {\n  const { size = 'medium', inline = true, popover, info, ...rest } = props;\n\n  const rootRef = useMergedRefs(ref);\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        ref: rootRef,\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 infoRef = useMergedRefs(state.info.ref);\n  state.info.ref = infoRef;\n\n  // Hide the popover when focus moves out of the button and popover\n  const onBlurButtonOrInfo = (e: React.FocusEvent) => {\n    const nextFocused = e.relatedTarget;\n\n    if (nextFocused && rootRef.current !== nextFocused && !elementContains(infoRef.current, nextFocused)) {\n      setPopoverOpen(false);\n    }\n  };\n\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlurButtonOrInfo));\n  state.info.onBlurCapture = useEventCallback(mergeCallbacks(state.info.onBlurCapture, onBlurButtonOrInfo));\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","elementContains","useEventCallback","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","popover","info","rest","rootRef","state","components","root","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","infoRef","onBlurButtonOrInfo","nextFocused","relatedTarget","current","onBlur","onBlurCapture"],"mappings":"AAAA;;;;;+BAsCakB;;;;;;;iEApCU,QAAQ;wCAC2D,2BAA2B;gCAS9G,4BAA4B;8BACK,0BAA0B;AAIlE,MAAML,oBAAoB;IACxBC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACb,+CAAAA,EAAAA;IACRc,QAAAA,WAAAA,GAAQ,OAAA,aAAA,CAACb,+CAAAA,EAAAA;IACTc,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACb,+CAAAA,EAAAA;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAWO,+BAA+B,CAACG,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAEC,OAAO,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGN;IAEnE,MAAMO,UAAUlB,iCAAAA,EAAcY;IAE9B,MAAMO,QAAyB;QAC7BL;QACAD;QAEAO,YAAY;YACVC,MAAM;YACNN,SAASZ,qBAAAA;YACTa,MAAMZ,4BAAAA;QACR;QAEAiB,MAAMtB,oBAAAA,CAAKuB,MAAM,KACf1B,wCAAAA,EAAyB,UAAU;YACjC2B,UAAUlB,iBAAiB,CAACQ,KAAK;YACjCW,MAAM;YACN,cAAc;YACd,GAAGP,IAAI;YACPL,KAAKM;QACP,IACA;YAAEO,aAAa;QAAS;QAE1BV,SAAShB,oBAAAA,CAAKuB,MAAM,CAACP,SAAS;YAC5BW,cAAc;gBACZZ;gBACAa,aAAa;gBACbd,MAAMJ,cAAc,CAACI,KAAK;gBAC1Be,WAAW;YACb;YACAH,aAAatB,qBAAAA;QACf;QACAa,MAAMjB,oBAAAA,CAAKuB,MAAM,CAACN,MAAM;YACtBU,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAarB,4BAAAA;QACf;IACF;IAEA,MAAM,CAAC2B,aAAaC,eAAe,OAAGlC,oCAAAA,EAAqB;QACzDqB,OAAOA,MAAMJ,OAAO,CAACkB,IAAI;QACzBC,cAAcf,MAAMJ,OAAO,CAACoB,WAAW;QACvCC,cAAc;IAChB;IAEAjB,MAAMJ,OAAO,CAACkB,IAAI,GAAGF;IACrBZ,MAAMJ,OAAO,CAACsB,YAAY,OAAGxC,8BAAAA,EAAesB,MAAMJ,OAAO,CAACsB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAUxC,6BAAAA,EAAcmB,MAAMH,IAAI,CAACJ,GAAG;IAC5CO,MAAMH,IAAI,CAACJ,GAAG,GAAG4B;IAEjB,kEAAkE;IAClE,MAAMC,qBAAqB,CAACH;QAC1B,MAAMI,cAAcJ,EAAEK,aAAa;QAEnC,IAAID,eAAexB,QAAQ0B,OAAO,KAAKF,eAAe,KAACzC,+BAAAA,EAAgBuC,QAAQI,OAAO,EAAEF,cAAc;YACpGV,eAAe;QACjB;IACF;IAEAb,MAAME,IAAI,CAACwB,MAAM,GAAG3C,oCAAAA,MAAiBL,8BAAAA,EAAesB,MAAME,IAAI,CAACwB,MAAM,EAAEJ;IACvEtB,MAAMH,IAAI,CAAC8B,aAAa,OAAG5C,gCAAAA,MAAiBL,8BAAAA,EAAesB,MAAMH,IAAI,CAAC8B,aAAa,EAAEL;IACrF,OAAOtB;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport 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 */ 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        borderRadius: tokens.borderRadiusMedium,\n        margin: '0',\n        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        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    base: {\n        maxWidth: '264px'\n    },\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    'use no memo';\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, 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"],"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","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","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","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","B2u0y6b","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
+{"version":3,"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["'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';\nexport 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 */ 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        borderRadius: tokens.borderRadiusMedium,\n        margin: '0',\n        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        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    base: {\n        maxWidth: '264px'\n    },\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    'use no memo';\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    state.info.className = mergeClasses(infoButtonClassNames.info, popoverSurfaceStyles.base, 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"],"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","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","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","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","B2u0y6b","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n  root: 'fui-InfoButton',\n  // this className won't be used, but it's needed to satisfy the type checker\n  popover: 'fui-InfoButton__popover',\n  info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    margin: '0',\n    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    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  base: {\n    maxWidth: '264px',\n  },\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  'use no memo';\n\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.info.className = mergeClasses(\n    infoButtonClassNames.info,\n    popoverSurfaceStyles.base,\n    size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n    state.info.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"],"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","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["'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\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 */\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    borderRadius: tokens.borderRadiusMedium,\n    margin: '0',\n    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    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingVerticalXXS}`,\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  base: {\n    maxWidth: '264px',\n  },\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  'use no memo';\n\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.info.className = mergeClasses(\n    infoButtonClassNames.info,\n    popoverSurfaceStyles.base,\n    size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n    state.info.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"],"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","maxWidth","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;qCAEa,kCAAkC;iCAGrC,oBAAoB;8BACvB,iBAAiB;0CACX,8BAA8B;AAKnE,kBAAMA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,uCAAAA,EAAsBI,OAAOC;QAE3CJ,qDAAAA,EAA4BK;QAC5BR,gDAAAA,EAA4B,+BAA+BQ;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  useCustomStyleHook_unstable('useInfoLabelStyles_unstable')(state);\n\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","useCustomStyleHook_unstable","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;iCAGrC,oBAAoB;8BACvB,iBAAiB;0CACX,8BAA8B;AAKnE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQN,mCAAAA,EAAsBI,OAAOC;QAE3CJ,qDAAAA,EAA4BK;QAC5BR,gDAAAA,EAA4B,+BAA+BQ;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @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 */\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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,UAAU,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,UAAU,EAAA,CAAA;;;AAG5C,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState): JSXElement => {\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":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,UAAU,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,UAAU,EAAA,CAAA;;;AAG5C,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -45,7 +46,7 @@ const useInfoLabel_unstable = (props, ref)=>{
     const infoButtonPopover = _reactutilities.slot.always(infoButton === null || infoButton === void 0 ? void 0 : infoButton.popover, {
         elementType: 'div'
     });
-    infoButtonPopover.onOpenChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(infoButtonPopover.onOpenChange, (e, data)=>{
+    infoButtonPopover.onOpenChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(infoButtonPopover.onOpenChange, (_, data)=>{
         setOpen(data.open);
     }));
     if (infoButton) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * 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 */\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    const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: infoPopupId,\n        'aria-labelledby': infoPopupId,\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","infoPopupId","components"],"mappings":";;;;+BAgBaO;;;;;;;iEAhBU,QAAQ;4BAET,wBAAwB;gCACgB,4BAA4B;4BAC/D,2BAA2B;AAY/C,8BAA8B,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,aAASjB,qBAAAA,EAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,OAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,oBAAAA,CAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,oBAAAA,CAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B,iBAAAA;IACf;IAEA,MAAMa,aAAaT,oBAAAA,CAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB,sBAAAA;IACf;IAEA,MAAMyB,oBAAoB1B,oBAAAA,CAAKoB,MAAM,CAACX,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,OAAG9B,gCAAAA,MAC/BD,8BAAAA,EAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGX,oBAAAA,CAAKwB,QAAQ,CAACf,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,aAAa;QACf;;QAEAb,CAAAA,IAAAA,CAAAA,cAAAA,UAAAA,CAAU,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,CAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAI,CAAC,YAAA,YAAA,AAAY,MAAA,QAAA,OAAA,KAAA,IAAA,KAAjBA,KAAI,CAAC,UAAY,GAAA,CAAKI,mBAAAA,WAAWE,IAAAA,AAAI,MAAA,QAAfF,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX,iBAAAA;YACPa,YAAYR,sBAAAA;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useId, slot, useEventCallback } 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 */\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, (_, data) => {\n      setOpen(data.open);\n    }),\n  );\n\n  if (infoButton) {\n    infoButton.popover = infoButtonPopover;\n    const infoPopupId = baseId + '__info'; // used as a self-referencing aria-labelledby to name the popup\n    infoButton.info = slot.optional(infoButton?.info, {\n      defaultProps: {\n        id: infoPopupId,\n        'aria-labelledby': infoPopupId,\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","useId","slot","useEventCallback","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","_","data","infoPopupId","components"],"mappings":"AAAA;;;;;+BAkBaO;;;;;;;iEAhBU,QAAQ;4BAET,wBAAwB;gCACgB,4BAA4B;4BAC/D,2BAA2B;AAY/C,8BAA8B,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,aAASlB,qBAAAA,EAAM;IACrB,MAAM,CAACmB,MAAMC,QAAQ,GAAGvB,OAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAON,oBAAAA,CAAKqB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQR,oBAAAA,CAAKqB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B,iBAAAA;IACf;IAEA,MAAMa,aAAaV,oBAAAA,CAAKyB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB,sBAAAA;IACf;IAEA,MAAMyB,oBAAoB3B,oBAAAA,CAAKqB,MAAM,CAACX,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,OAAG5B,gCAAAA,MAC/BH,8BAAAA,EAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YAWdA,aAAW;QAVXA,WAAWkB,OAAO,GAAGD;QACrB,MAAMK,cAAcf,SAAS,UAAU,+DAA+D;QACtGP,WAAWE,IAAI,GAAGZ,oBAAAA,CAAKyB,QAAQ,CAACf,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIQ;gBACJ,mBAAmBA;YACrB;YACAT,aAAa;QACf;;QAEAb,CAAAA,IAAAA,CAAAA,cAAAA,UAAAA,CAAU,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,CAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAI,CAAC,YAAA,YAAA,AAAY,MAAA,QAAA,OAAA,KAAA,IAAA,KAAjBA,KAAI,CAAC,UAAY,GAAA,CAAKI,mBAAAA,WAAWE,IAAI,AAAJA,MAAI,QAAfF,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAoB,YAAY;YACV3B,MAAM;YACNE,OAAOX,iBAAAA;YACPa,YAAYR,sBAAAA;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n    root: 'fui-InfoLabel',\n    label: 'fui-InfoLabel__label',\n    infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        cursor: 'inherit',\n        color: 'inherit'\n    }\n});\nconst useInfoButtonStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        // Negative margin to align with the text\n        marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n        marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n    },\n    large: {\n        // Negative margin to align with the text\n        marginTop: '-1px',\n        marginBottom: '-1px'\n    }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n    const labelStyles = useLabelStyles();\n    state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n    const infoButtonStyles = useInfoButtonStyles();\n    if (state.infoButton) {\n        state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n    }\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":";;;;;;;;;;;IAEaG,mBAAmB;;;+BA2BY;eAA3Bc;;;uBA5BwB,gBAAgB;AAClD,4BAA4B;IAC/Bb,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE,sBAAsB;IAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGZ,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY3B,CAAC;AAGS,qCAAqCM,KAAK,IAAG;IACpD,aAAa;IACbA,KAAK,CAACd,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;IACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;IACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,uBAAY,EAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;IACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;IAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;QAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;IAClL;IACA,OAAOD,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const infoLabelClassNames = {\n    root: 'fui-InfoLabel',\n    label: 'fui-InfoLabel__label',\n    infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        cursor: 'inherit',\n        color: 'inherit'\n    }\n});\nconst useInfoButtonStyles = makeStyles({\n    base: {\n        verticalAlign: 'top',\n        // Negative margin to align with the text\n        marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n        marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n    },\n    large: {\n        // Negative margin to align with the text\n        marginTop: '-1px',\n        marginBottom: '-1px'\n    }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n */ export const useInfoLabelStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n    const labelStyles = useLabelStyles();\n    state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n    const infoButtonStyles = useInfoButtonStyles();\n    if (state.infoButton) {\n        state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n    }\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,mBAAmB;;;IA2Bfc,2BAA2B;;;;uBA5BH,gBAAgB;AAClD,4BAA4B;IAC/Bb,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE,sBAAsB;IAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,GAAGZ,mBAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY3B,CAAC;AAGS,oCAAqCM,KAAK,IAAG;IACpD,aAAa;IACbA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,uBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;IACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;IACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;IACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;IAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;QAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;IAClL;IACA,OAAOD,KAAK;AAChB,CAAC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n  root: 'fui-InfoLabel',\n  label: 'fui-InfoLabel__label',\n  infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n    cursor: 'inherit',\n    color: 'inherit',\n  },\n});\n\nconst useInfoButtonStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n\n    // Negative margin to align with the text\n    marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n    marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n  },\n\n  large: {\n    // Negative margin to align with the text\n    marginTop: '-1px',\n    marginBottom: '-1px',\n  },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n  const labelStyles = useLabelStyles();\n  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n  const infoButtonStyles = useInfoButtonStyles();\n  if (state.infoButton) {\n    state.infoButton.className = mergeClasses(\n      infoLabelClassNames.infoButton,\n      infoButtonStyles.base,\n      state.size === 'large' && infoButtonStyles.large,\n      state.infoButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":";;;;;;;;;;;IAKaG,mBAAAA;;;+BAiCAc;eAAAA;;;4BAtCU,wBAAwB;uBAEN,iBAAiB;AAGnD,4BAA4D;IACjEb,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,qBAAiBN,iBAAAA,EAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,0BAAsBX,iBAAAA,EAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAKO,oCAAoC,CAACG;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,uBAAAA,EAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,OAAGjB,mBAAAA,EAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,OAAGjB,mBAAAA,EAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n  root: 'fui-InfoLabel',\n  label: 'fui-InfoLabel__label',\n  infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n    cursor: 'inherit',\n    color: 'inherit',\n  },\n});\n\nconst useInfoButtonStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n\n    // Negative margin to align with the text\n    marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n    marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n  },\n\n  large: {\n    // Negative margin to align with the text\n    marginTop: '-1px',\n    marginBottom: '-1px',\n  },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n  const labelStyles = useLabelStyles();\n  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n  const infoButtonStyles = useInfoButtonStyles();\n  if (state.infoButton) {\n    state.infoButton.className = mergeClasses(\n      infoLabelClassNames.infoButton,\n      infoButtonStyles.base,\n      state.size === 'large' && infoButtonStyles.large,\n      state.infoButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,mBAAAA;;;+BAiCAc;;;;4BAtCU,wBAAwB;uBAEN,iBAAiB;AAGnD,4BAA4D;IACjEb,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,qBAAiBN,iBAAAA,EAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,0BAAsBX,iBAAAA,EAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAKO,MAAME,8BAA8B,CAACC;IAC1C;IAEAA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,uBAAAA,EAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,uBAAAA,EAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,OAAGjB,mBAAAA,EAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infolabel",
-  "version": "9.4.5",
+  "version": "9.4.7",
   "description": "InfoLabel component for Fluent UI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,21 +21,21 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-label": "^9.3.4",
-    "@fluentui/react-popover": "^9.12.5",
-    "@fluentui/react-tabster": "^9.26.4",
-    "@fluentui/react-jsx-runtime": "^9.1.6",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-label": "^9.3.6",
+    "@fluentui/react-popover": "^9.12.7",
+    "@fluentui/react-tabster": "^9.26.6",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@types/react": ">=16.8.0 <20.0.0",
+    "@types/react-dom": ">=16.8.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.8.0 <20.0.0"
   },
   "exports": {
     ".": {