@fluentui/react-infobutton 9.0.0-beta.7 → 9.0.0-beta.71

package/dist/index.d.ts

@@ -3,6 +3,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
 import type { PopoverProps } from '@fluentui/react-popover';
 import type { PopoverSurface } from '@fluentui/react-popover';
 import * as React_2 from 'react';
@@ -26,30 +27,83 @@ export declare type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlot
      * @default medium
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the InfoButton should be rendered inline or on a Portal.
+     *
+     * @default true
+     */
+    inline?: boolean;
 };
 
 export declare type InfoButtonSlots = {
     root: NonNullable<Slot<'button'>>;
     /**
-     * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.
+     * The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover.
      */
-    popover: NonNullable<Slot<Partial<PopoverProps>>>;
+    popover: NonNullable<Slot<Partial<Omit<PopoverProps, 'openOnHover'>>>>;
     /**
-     * The content to be displayed in the PopoverSurface when the button is pressed.
+     * The information to be displayed in the PopoverSurface when the button is pressed.
      */
-    content: NonNullable<Slot<typeof PopoverSurface>>;
+    info: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
  * State used in rendering InfoButton
  */
-export declare type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
+export declare type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
+
+/**
+ * InfoLabel component
+ */
+export declare const InfoLabel: ForwardRefComponent<InfoLabelProps>;
+
+export declare const infoLabelClassNames: SlotClassNames<InfoLabelSlots>;
+
+/**
+ * InfoLabel Props
+ */
+export declare type InfoLabelProps = ComponentProps<Partial<InfoLabelSlots>, 'label'> & {
+    /**
+     * The content of the InfoButton's popover.
+     */
+    info?: InfoButtonProps['info'];
+};
+
+export declare type InfoLabelSlots = {
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Label component.
+     *
+     * It is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props
+     * such as `size` and `required` should be set directly on the `InfoLabel`.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     */
+    label: NonNullable<Slot<typeof Label>>;
+    /**
+     * The InfoButton component.
+     *
+     * It is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel.
+     */
+    infoButton: Slot<typeof InfoButton>;
+};
+
+/**
+ * State used in rendering InfoLabel
+ */
+export declare type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;
 
 /**
  * Render the final JSX of InfoButton
  */
 export declare const renderInfoButton_unstable: (state: InfoButtonState) => JSX.Element;
 
+/**
+ * Render the final JSX of InfoLabel
+ */
+export declare const renderInfoLabel_unstable: (state: InfoLabelState) => JSX.Element;
+
 /**
  * Create the state required to render InfoButton.
  *
@@ -66,4 +120,20 @@ export declare const useInfoButton_unstable: (props: InfoButtonProps, ref: React
  */
 export declare const useInfoButtonStyles_unstable: (state: InfoButtonState) => InfoButtonState;
 
+/**
+ * Create the state required to render InfoLabel.
+ *
+ * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,
+ * before being passed to renderInfoLabel_unstable.
+ *
+ * @param props - props from this instance of InfoLabel
+ * @param ref - reference to label element of InfoLabel
+ */
+export declare const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref<HTMLLabelElement>) => InfoLabelState;
+
+/**
+ * Apply styling to the InfoLabel slots based on the state
+ */
+export declare const useInfoLabelStyles_unstable: (state: InfoLabelState) => InfoLabelState;
+
 export { }

package/lib/InfoButton.js

@@ -1,2 +1 @@
 export * from './components/InfoButton/index';
-//# sourceMappingURL=InfoButton.js.map

package/lib/InfoButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/InfoButton.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/InfoButton/index';\n"]}
+{"version":3,"sources":["InfoButton.ts"],"sourcesContent":["export * from './components/InfoButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/InfoLabel.js

@@ -0,0 +1 @@
+export * from './components/InfoLabel/index';

package/lib/InfoLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InfoLabel.ts"],"sourcesContent":["export * from './components/InfoLabel/index';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B"}

package/lib/components/InfoButton/DefaultInfoButtonIcons.js

@@ -1,5 +1,4 @@
 import { Info12Regular, Info12Filled, Info16Regular, Info16Filled, Info20Regular, Info20Filled, bundleIcon } from '@fluentui/react-icons';
-export const DefaultInfoButtonIcon12 = /*#__PURE__*/bundleIcon(Info12Filled, Info12Regular);
-export const DefaultInfoButtonIcon16 = /*#__PURE__*/bundleIcon(Info16Filled, Info16Regular);
-export const DefaultInfoButtonIcon20 = /*#__PURE__*/bundleIcon(Info20Filled, Info20Regular);
-//# sourceMappingURL=DefaultInfoButtonIcons.js.map
+export const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);
+export const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);
+export const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,uBAAuB;AAE9B,OAAO,MAAMC,uBAAuB,gBAAGD,UAAU,CAACL,YAAY,EAAED,aAAa,CAAC;AAC9E,OAAO,MAAMQ,uBAAuB,gBAAGF,UAAU,CAACH,YAAY,EAAED,aAAa,CAAC;AAC9E,OAAO,MAAMO,uBAAuB,gBAAGH,UAAU,CAACD,YAAY,EAAED,aAAa,CAAC","names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n  Info12Regular,\n  Info12Filled,\n  Info16Regular,\n  Info16Filled,\n  Info20Regular,\n  Info20Filled,\n  bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"]}
+{"version":3,"sources":["DefaultInfoButtonIcons.tsx"],"sourcesContent":["import {\n  Info12Regular,\n  Info12Filled,\n  Info16Regular,\n  Info16Filled,\n  Info20Regular,\n  Info20Filled,\n  bundleIcon,\n} from '@fluentui/react-icons';\n\nexport const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);\n"],"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAE/B,OAAO,MAAMC,0BAA0BD,WAAWL,cAAcD,eAAe;AAC/E,OAAO,MAAMQ,0BAA0BF,WAAWH,cAAcD,eAAe;AAC/E,OAAO,MAAMO,0BAA0BH,WAAWD,cAAcD,eAAe"}

package/lib/components/InfoButton/InfoButton.js

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { renderInfoButton_unstable } from './renderInfoButton';
 import { useInfoButton_unstable } from './useInfoButton';
-import { useInfoButtonStyles_unstable } from './useInfoButtonStyles';
+import { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';
 /**
  * InfoButtons provide a way to display additional information about a form field or an area in the UI.
- */
-export const InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useInfoButton_unstable(props, ref);
-  useInfoButtonStyles_unstable(state);
-  return renderInfoButton_unstable(state);
+ */ export const InfoButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInfoButton_unstable(props, ref);
+    useInfoButtonStyles_unstable(state);
+    return renderInfoButton_unstable(state);
 });
 InfoButton.displayName = 'InfoButton';
-//# sourceMappingURL=InfoButton.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,4BAA4B,QAAQ,uBAAuB;AAGpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGN,sBAAsB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAOP,yBAAyB,CAACO,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles';\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  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"]}
+{"version":3,"sources":["InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\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  return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"],"names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQN,uBAAuBI,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=InfoButton.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"file":"InfoButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts"],"names":[],"mappings":"","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 content and root. Use this slot to pass props to the Popover.\n   */\n  popover: NonNullable<Slot<Partial<PopoverProps>>>;\n\n  /**\n   * The content to be displayed in the PopoverSurface when the button is pressed.\n   */\n  content: 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/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;\n"]}
+{"version":3,"sources":["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":"AAAA,WAuCmH"}

package/lib/components/InfoButton/index.js

@@ -2,5 +2,4 @@ export * from './InfoButton';
 export * from './InfoButton.types';
 export * from './renderInfoButton';
 export * from './useInfoButton';
-export * from './useInfoButtonStyles';
-//# sourceMappingURL=index.js.map
+export * from './useInfoButtonStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}

package/lib/components/InfoButton/renderInfoButton.js

@@ -1,20 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
 import { PopoverTrigger } from '@fluentui/react-popover';
 /**
  * Render the final JSX of InfoButton
- */
-export const renderInfoButton_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.popover, {
-    ...slotProps.popover
-  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  })), /*#__PURE__*/React.createElement(slots.content, {
-    ...slotProps.content
-  }));
+ */ export const renderInfoButton_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.popover, {
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                children: /*#__PURE__*/ _jsx(state.root, {})
+            }),
+            /*#__PURE__*/ _jsx(state.info, {})
+        ]
+    });
 };
-//# sourceMappingURL=renderInfoButton.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,cAAc,QAAQ,yBAAyB;AAIxD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAkBG,KAAK,CAAC;EAE7D,oBACEJ,oBAACK,KAAK,CAACE,OAAO;IAAA,GAAMD,SAAS,CAACC;EAAwB,gBACpDP,oBAACE,cAAc,qBACbF,oBAACK,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,CACnB,eACjBR,oBAACK,KAAK,CAACI,OAAO;IAAA,GAAKH,SAAS,CAACG;EAAO,EAAI,CAC1B;AAEpB,CAAC","names":["React","getSlots","PopoverTrigger","renderInfoButton_unstable","state","slots","slotProps","popover","root","content"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { PopoverProps } 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  const { slots, slotProps } = getSlots<InfoButtonSlots>(state);\n\n  return (\n    <slots.popover {...(slotProps.popover as PopoverProps)}>\n      <PopoverTrigger>\n        <slots.root {...slotProps.root} />\n      </PopoverTrigger>\n      <slots.content {...slotProps.content} />\n    </slots.popover>\n  );\n};\n"]}
+{"version":3,"sources":["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"}

package/lib/components/InfoButton/useInfoButton.js

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
-import { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, mergeCallbacks, useControllableState, slot, useMergedRefs, isHTMLElement, elementContains } from '@fluentui/react-utilities';
 import { Popover, PopoverSurface } from '@fluentui/react-popover';
-import { useControllableState } from '@fluentui/react-utilities';
 const infoButtonIconMap = {
-  small: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon12, null),
-  medium: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon16, null),
-  large: /*#__PURE__*/React.createElement(DefaultInfoButtonIcon20, null)
+    small: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon12, null),
+    medium: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon16, null),
+    large: /*#__PURE__*/ React.createElement(DefaultInfoButtonIcon20, null)
 };
 const popoverSizeMap = {
-  small: 'small',
-  medium: 'small',
-  large: 'medium'
+    small: 'small',
+    medium: 'small',
+    large: 'medium'
 };
 /**
  * Create the state required to render InfoButton.
@@ -21,46 +20,65 @@ const popoverSizeMap = {
  *
  * @param props - props from this instance of InfoButton
  * @param ref - reference to root HTMLElement of InfoButton
- */
-export const useInfoButton_unstable = (props, ref) => {
-  const {
-    size = 'medium'
-  } = props;
-  const state = {
-    size,
-    components: {
-      root: 'button',
-      popover: Popover,
-      content: PopoverSurface
-    },
-    root: getNativeElementProps('button', {
-      children: infoButtonIconMap[size],
-      type: 'button',
-      ...props,
-      ref
-    }),
-    popover: resolveShorthand(props.popover, {
-      required: true,
-      defaultProps: {
-        positioning: 'above-start',
-        size: popoverSizeMap[size],
-        withArrow: true
-      }
-    }),
-    content: resolveShorthand(props.content, {
-      required: true,
-      defaultProps: {
-        role: 'note'
-      }
-    })
-  };
-  const [popoverOpen, setPopoverOpen] = useControllableState({
-    state: state.popover.open,
-    defaultState: state.popover.defaultOpen,
-    initialState: false
-  });
-  state.popover.open = popoverOpen;
-  state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));
-  return state;
+ */ export const useInfoButton_unstable = (props, ref)=>{
+    const { size = 'medium', inline = true } = props;
+    const state = {
+        inline,
+        size,
+        components: {
+            root: 'button',
+            popover: Popover,
+            info: PopoverSurface
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            children: infoButtonIconMap[size],
+            type: 'button',
+            'aria-label': 'information',
+            ...props,
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref
+        }), {
+            elementType: 'button'
+        }),
+        popover: slot.always(props.popover, {
+            defaultProps: {
+                inline,
+                positioning: 'above-start',
+                size: popoverSizeMap[size],
+                withArrow: true
+            },
+            elementType: Popover
+        }),
+        info: slot.always(props.info, {
+            defaultProps: {
+                role: 'note',
+                tabIndex: -1
+            },
+            elementType: PopoverSurface
+        })
+    };
+    const [popoverOpen, setPopoverOpen] = useControllableState({
+        state: state.popover.open,
+        defaultState: state.popover.defaultOpen,
+        initialState: false
+    });
+    state.popover.open = popoverOpen;
+    state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data)=>setPopoverOpen(data.open));
+    const focusOutRef = React.useCallback((el)=>{
+        if (!el) {
+            return;
+        }
+        el.addEventListener('focusout', (e)=>{
+            const nextFocused = e.relatedTarget;
+            if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {
+                setPopoverOpen(false);
+            }
+        });
+    }, [
+        setPopoverOpen
+    ]);
+    state.info.ref = useMergedRefs(state.info.ref, focusOutRef);
+    return state;
 };
-//# sourceMappingURL=useInfoButton.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,0BAA0B;AACpH,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnG,SAASC,OAAO,EAAEC,cAAc,QAAQ,yBAAyB;AACjE,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,MAAMC,iBAAiB,GAAG;EACxBC,KAAK,eAAEX,oBAACC,uBAAuB,OAAG;EAClCW,MAAM,eAAEZ,oBAACE,uBAAuB,OAAG;EACnCW,KAAK,eAAEb,oBAACG,uBAAuB;CACvB;AAEV,MAAMW,cAAc,GAAG;EACrBH,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASA,OAAO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEf,OAA0C;MACnDgB,OAAO,EAAEf;KACV;IAEDa,IAAI,EAAEjB,qBAAqB,CAAC,QAAQ,EAAE;MACpCoB,QAAQ,EAAEd,iBAAiB,CAACQ,IAAI,CAAC;MACjCO,IAAI,EAAE,QAAQ;MACd,GAAGT,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEhB,gBAAgB,CAACU,KAAK,CAACM,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BV,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1BW,SAAS,EAAE;;KAEd,CAAC;IACFN,OAAO,EAAEjB,gBAAgB,CAACU,KAAK,CAACO,OAAO,EAAE;MACvCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE;;KAET;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGvB,oBAAoB,CAAC;IACzDU,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACW,IAAI;IACzBC,YAAY,EAAEf,KAAK,CAACG,OAAO,CAACa,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFjB,KAAK,CAACG,OAAO,CAACW,IAAI,GAAGF,WAAW;EAChCZ,KAAK,CAACG,OAAO,CAACe,YAAY,GAAGhC,cAAc,CAACc,KAAK,CAACG,OAAO,CAACe,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKP,cAAc,CAACO,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOd,KAAK;AACd,CAAC","names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","content","children","type","required","defaultProps","positioning","withArrow","role","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n  small: <DefaultInfoButtonIcon12 />,\n  medium: <DefaultInfoButtonIcon16 />,\n  large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n  const { size = 'medium' } = props;\n\n  const state: InfoButtonState = {\n    size,\n\n    components: {\n      root: 'button',\n      popover: Popover as React.FC<Partial<PopoverProps>>,\n      content: PopoverSurface,\n    },\n\n    root: getNativeElementProps('button', {\n      children: infoButtonIconMap[size],\n      type: 'button',\n      ...props,\n      ref,\n    }),\n    popover: resolveShorthand(props.popover, {\n      required: true,\n      defaultProps: {\n        positioning: 'above-start',\n        size: popoverSizeMap[size],\n        withArrow: true,\n      },\n    }),\n    content: resolveShorthand(props.content, {\n      required: true,\n      defaultProps: {\n        role: 'note',\n      },\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  return state;\n};\n"]}
+{"version":3,"sources":["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  isHTMLElement,\n  elementContains,\n} from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n  small: <DefaultInfoButtonIcon12 />,\n  medium: <DefaultInfoButtonIcon16 />,\n  large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n  const { size = 'medium', inline = true } = props;\n\n  const state: InfoButtonState = {\n    inline,\n    size,\n\n    components: {\n      root: 'button',\n      popover: Popover as React.FC<Partial<PopoverProps>>,\n      info: PopoverSurface,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        children: infoButtonIconMap[size],\n        type: 'button',\n        'aria-label': 'information',\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLButtonElement>,\n      }),\n      { elementType: 'button' },\n    ),\n    popover: slot.always(props.popover, {\n      defaultProps: {\n        inline,\n        positioning: 'above-start',\n        size: popoverSizeMap[size],\n        withArrow: true,\n      },\n      elementType: Popover as React.FC<Partial<Omit<PopoverProps, 'openOnHover'>>>,\n    }),\n    info: slot.always(props.info, {\n      defaultProps: {\n        role: 'note',\n        tabIndex: -1,\n      },\n      elementType: PopoverSurface,\n    }),\n  };\n\n  const [popoverOpen, setPopoverOpen] = useControllableState({\n    state: state.popover.open,\n    defaultState: state.popover.defaultOpen,\n    initialState: false,\n  });\n\n  state.popover.open = popoverOpen;\n  state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n  const focusOutRef = React.useCallback(\n    (el: HTMLDivElement) => {\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('focusout', e => {\n        const nextFocused = e.relatedTarget;\n\n        if (isHTMLElement(nextFocused) && !elementContains(el, nextFocused)) {\n          setPopoverOpen(false);\n        }\n      });\n    },\n    [setPopoverOpen],\n  );\n\n  state.info.ref = useMergedRefs(state.info.ref, focusOutRef);\n\n  return state;\n};\n"],"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getIntrinsicElementProps","mergeCallbacks","useControllableState","slot","useMergedRefs","isHTMLElement","elementContains","Popover","PopoverSurface","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","inline","state","components","root","popover","info","always","children","type","elementType","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","focusOutRef","useCallback","el","addEventListener","nextFocused","relatedTarget"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,2BAA2B;AACrH,SACEC,wBAAwB,EACxBC,cAAc,EACdC,oBAAoB,EACpBC,IAAI,EACJC,aAAa,EACbC,aAAa,EACbC,eAAe,QACV,4BAA4B;AACnC,SAASC,OAAO,EAAEC,cAAc,QAAQ,0BAA0B;AAIlE,MAAMC,oBAAoB;IACxBC,qBAAO,oBAACb;IACRc,sBAAQ,oBAACb;IACTc,qBAAO,oBAACb;AACV;AAEA,MAAMc,iBAAiB;IACrBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,OAAO,QAAQ,EAAEC,SAAS,IAAI,EAAE,GAAGH;IAE3C,MAAMI,QAAyB;QAC7BD;QACAD;QAEAG,YAAY;YACVC,MAAM;YACNC,SAASf;YACTgB,MAAMf;QACR;QAEAa,MAAMlB,KAAKqB,MAAM,CACfxB,yBAAyB,UAAU;YACjCyB,UAAUhB,iBAAiB,CAACQ,KAAK;YACjCS,MAAM;YACN,cAAc;YACd,GAAGX,KAAK;YACR,SAAS;YACT,+EAA+E;YAC/E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEW,aAAa;QAAS;QAE1BL,SAASnB,KAAKqB,MAAM,CAACT,MAAMO,OAAO,EAAE;YAClCM,cAAc;gBACZV;gBACAW,aAAa;gBACbZ,MAAMJ,cAAc,CAACI,KAAK;gBAC1Ba,WAAW;YACb;YACAH,aAAapB;QACf;QACAgB,MAAMpB,KAAKqB,MAAM,CAACT,MAAMQ,IAAI,EAAE;YAC5BK,cAAc;gBACZG,MAAM;gBACNC,UAAU,CAAC;YACb;YACAL,aAAanB;QACf;IACF;IAEA,MAAM,CAACyB,aAAaC,eAAe,GAAGhC,qBAAqB;QACzDiB,OAAOA,MAAMG,OAAO,CAACa,IAAI;QACzBC,cAAcjB,MAAMG,OAAO,CAACe,WAAW;QACvCC,cAAc;IAChB;IAEAnB,MAAMG,OAAO,CAACa,IAAI,GAAGF;IACrBd,MAAMG,OAAO,CAACiB,YAAY,GAAGtC,eAAekB,MAAMG,OAAO,CAACiB,YAAY,EAAE,CAACC,GAAGC,OAASP,eAAeO,KAAKN,IAAI;IAE7G,MAAMO,cAAc9C,MAAM+C,WAAW,CACnC,CAACC;QACC,IAAI,CAACA,IAAI;YACP;QACF;QAEAA,GAAGC,gBAAgB,CAAC,YAAYL,CAAAA;YAC9B,MAAMM,cAAcN,EAAEO,aAAa;YAEnC,IAAI1C,cAAcyC,gBAAgB,CAACxC,gBAAgBsC,IAAIE,cAAc;gBACnEZ,eAAe;YACjB;QACF;IACF,GACA;QAACA;KAAe;IAGlBf,MAAMI,IAAI,CAACP,GAAG,GAAGZ,cAAce,MAAMI,IAAI,CAACP,GAAG,EAAE0B;IAE/C,OAAOvB;AACT,EAAE"}

package/lib/components/InfoButton/{useInfoButtonStyles.js → useInfoButtonStyles.styles.js}

@@ -6,7 +6,7 @@ export const infoButtonClassNames = {
   root: 'fui-InfoButton',
   // this className won't be used, but it's needed to satisfy the type checker
   popover: 'fui-InfoButton__popover',
-  content: 'fui-InfoButton__content'
+  info: 'fui-InfoButton__info'
 };
 /**
  * Styles for the root slot
@@ -42,6 +42,7 @@ const useButtonStyles = /*#__PURE__*/__styles({
     t6yez3: "f1rw4040",
     Jwef8y: "fjxutwb",
     Bi91k9c: "f139oj5f",
+    eoavqd: "f8491dx",
     Bk3fhr4: "f1jpd6y0",
     Bmfj8id: "fuxngvv",
     iro3zm: "fwiml72",
@@ -88,10 +89,10 @@ const useButtonStyles = /*#__PURE__*/__styles({
     i03rao: ["fd0oaoj", "f1cwg4i8"],
     Boxcth7: "fjvm52t",
     Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
-    J0r882: "fdiulkx",
-    Bjwuhne: "f1yalx80",
-    Ghsupd: ["fq22d5a", "f1jw7pan"],
-    Bule8hv: ["f1jw7pan", "fq22d5a"]
+    J0r882: "f57olzd",
+    Bule8hv: ["f4stah7", "fs1por5"],
+    Bjwuhne: "f480a47",
+    Ghsupd: ["fs1por5", "f4stah7"]
   },
   large: {
     z8tnut: "fclwglc",
@@ -100,8 +101,8 @@ const useButtonStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1b0r8ql", "f1w3695s"]
   }
 }, {
-  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
-  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
+  d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
+  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f8491dx:hover{cursor:pointer;}", ".f1jpd6y0:hover .fui-Icon-filled{display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
   m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
@@ -146,8 +147,8 @@ export const useInfoButtonStyles_unstable = state => {
   } = state.popover;
   const buttonStyles = useButtonStyles();
   const popoverSurfaceStyles = usePopoverSurfaceStyles();
-  state.content.className = mergeClasses(infoButtonClassNames.content, size === 'large' && popoverSurfaceStyles.large, state.content.className);
+  state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
   state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
   return state;
 };
-//# sourceMappingURL=useInfoButtonStyles.js.map
+//# sourceMappingURL=useInfoButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","Bsw6fvg","Bbusuzp","highContrast","Bs6v0vm","B46dtvo","gh1jta","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["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        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...shorthands.margin(0),\n        ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n        [`& .${iconFilledClassName}`]: {\n            display: 'none'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'inline-flex'\n        },\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover,\n            color: tokens.colorNeutralForeground2BrandHover,\n            cursor: 'pointer',\n            [`& .${iconFilledClassName}`]: {\n                display: 'inline-flex'\n            },\n            [`& .${iconRegularClassName}`]: {\n                display: 'none'\n            }\n        },\n        ':hover:active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed,\n            color: tokens.colorNeutralForeground2BrandPressed\n        }\n    },\n    selected: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        color: tokens.colorNeutralForeground2BrandSelected,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline-flex'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        },\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Highlight',\n            color: 'Canvas'\n        }\n    },\n    highContrast: {\n        '@media (forced-colors: active)': {\n            color: 'CanvasText',\n            ':hover,:hover:active': {\n                forcedColorAdjust: 'none',\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    },\n    focusIndicator: createFocusOutlineStyle(),\n    large: {\n        ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)\n    }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n    smallMedium: typographyStyles.caption1,\n    large: typographyStyles.body1\n});\n/**\n * Apply styling to the InfoButton slots based on the state\n */ export const useInfoButtonStyles_unstable = (state)=>{\n    const { size } = state;\n    const { open } = state.popover;\n    const buttonStyles = useButtonStyles();\n    const popoverSurfaceStyles = usePopoverSurfaceStyles();\n    state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n    state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,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,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAiB,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,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAnD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAiD,CAAA;EAAAC,CAAA;EAAAC,CAAA;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,gBAAGzF,QAAA;EAAA0F,WAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAX,KAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAV,CAAA;AAAA,CAG/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMW,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAK,CAAC,GAAGF,KAAK,CAACzF,OAAO;EAC9B,MAAM4F,YAAY,GAAG1F,eAAe,CAAC,CAAC;EACtC,MAAM2F,oBAAoB,GAAGX,uBAAuB,CAAC,CAAC;EACtDO,KAAK,CAACxF,IAAI,CAAC6F,SAAS,GAAGpG,YAAY,CAACI,oBAAoB,CAACG,IAAI,EAAEyF,IAAI,KAAK,OAAO,GAAGG,oBAAoB,CAACjB,KAAK,GAAGiB,oBAAoB,CAACV,WAAW,EAAEM,KAAK,CAACxF,IAAI,CAAC6F,SAAS,CAAC;EACtKL,KAAK,CAAC1F,IAAI,CAAC+F,SAAS,GAAGpG,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAE6F,YAAY,CAACzF,IAAI,EAAEyF,YAAY,CAACnD,YAAY,EAAEmD,YAAY,CAAC/C,cAAc,EAAE8C,IAAI,IAAIC,YAAY,CAACtD,QAAQ,EAAEoD,IAAI,KAAK,OAAO,IAAIE,YAAY,CAAChB,KAAK,EAAEa,KAAK,CAAC1F,IAAI,CAAC+F,SAAS,CAAC;EACtO,OAAOL,KAAK;AAChB,CAAC"}

package/lib/components/InfoLabel/InfoLabel.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { renderInfoLabel_unstable } from './renderInfoLabel';
+import { useInfoLabel_unstable } from './useInfoLabel';
+import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
+/**
+ * InfoLabel component
+ */ export const InfoLabel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useInfoLabel_unstable(props, ref);
+    useInfoLabelStyles_unstable(state);
+    return renderInfoLabel_unstable(state);
+});
+InfoLabel.displayName = 'InfoLabel';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { InfoLabelProps } from './InfoLabel.types';\nimport { renderInfoLabel_unstable } from './renderInfoLabel';\nimport { useInfoLabel_unstable } from './useInfoLabel';\nimport { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n\n/**\n * InfoLabel component\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+export { };

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

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

package/lib/components/InfoLabel/index.js

@@ -0,0 +1,5 @@
+export * from './InfoLabel';
+export * from './InfoLabel.types';
+export * from './renderInfoLabel';
+export * from './useInfoLabel';
+export * from './useInfoLabelStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './InfoLabel';\nexport * from './InfoLabel.types';\nexport * from './renderInfoLabel';\nexport * from './useInfoLabel';\nexport * from './useInfoLabelStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,8BAA8B"}

package/lib/components/InfoLabel/renderInfoLabel.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of InfoLabel
+ */ export const renderInfoLabel_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsx(state.label, {}),
+            state.infoButton && /*#__PURE__*/ _jsx(state.infoButton, {})
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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"}