@fluentui/react-infobutton 9.0.0-beta.21 → 9.0.0-beta.22

package/CHANGELOG.json

@@ -2,7 +2,46 @@
   "name": "@fluentui/react-infobutton",
   "entries": [
     {
-      "date": "Wed, 15 Mar 2023 10:17:05 GMT",
+      "date": "Thu, 16 Mar 2023 14:33:31 GMT",
+      "tag": "@fluentui/react-infobutton_v9.0.0-beta.22",
+      "version": "9.0.0-beta.22",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-infobutton",
+            "commit": "b106479e831318cfb3ddf10871e4240530498f31",
+            "comment": "feat: Add InfoLabel component"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-label to v9.1.4",
+            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-popover to v9.5.4",
+            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-tabster to v9.6.0",
+            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-utilities to v9.7.1",
+            "commit": "e7dcadf7cabae6bc6811ca04a630e7d850388f81"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Mar 2023 10:19:53 GMT",
       "tag": "@fluentui/react-infobutton_v9.0.0-beta.21",
       "version": "9.0.0-beta.21",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-infobutton
 
-This log was last generated on Wed, 15 Mar 2023 10:17:05 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Mar 2023 14:33:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.22)
+
+Thu, 16 Mar 2023 14:33:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.21..@fluentui/react-infobutton_v9.0.0-beta.22)
+
+### Changes
+
+- feat: Add InfoLabel component ([PR #27118](https://github.com/microsoft/fluentui/pull/27118) by behowell@microsoft.com)
+- Bump @fluentui/react-label to v9.1.4 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+- Bump @fluentui/react-popover to v9.5.4 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+- Bump @fluentui/react-tabster to v9.6.0 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+- Bump @fluentui/react-utilities to v9.7.1 ([PR #27229](https://github.com/microsoft/fluentui/pull/27229) by beachball)
+
 ## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.21)
 
-Wed, 15 Mar 2023 10:17:05 GMT 
+Wed, 15 Mar 2023 10:19:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.20..@fluentui/react-infobutton_v9.0.0-beta.21)
 
 ### Changes

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';
@@ -45,11 +46,58 @@ export declare type InfoButtonSlots = {
  */
 export declare type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, '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['content'];
+};
+
+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 +114,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/InfoLabel.js

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

package/lib/InfoLabel.js.map

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

package/lib/components/InfoLabel/InfoLabel.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { renderInfoLabel_unstable } from './renderInfoLabel';
+import { useInfoLabel_unstable } from './useInfoLabel';
+import { useInfoLabelStyles_unstable } from './useInfoLabelStyles';
+/**
+ * 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';
+//# sourceMappingURL=InfoLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/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';\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,2BAA2B,QAAQ,sBAAsB;AAElE;;;AAGA,OAAO,MAAMC,SAAS,gBAAwCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5F,MAAMC,KAAK,GAAGN,qBAAqB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAE/CJ,2BAA2B,CAACK,KAAK,CAAC;EAClC,OAAOP,wBAAwB,CAACO,KAAK,CAAC;AACxC,CAAC,CAAC;AAEFJ,SAAS,CAACK,WAAW,GAAG,WAAW"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoLabel.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.types.ts"],"names":[],"mappings":"","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['content'];\n};\n\n/**\n * State used in rendering InfoLabel\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"]}

package/lib/components/InfoLabel/index.js

@@ -0,0 +1,6 @@
+export * from './InfoLabel';
+export * from './InfoLabel.types';
+export * from './renderInfoLabel';
+export * from './useInfoLabel';
+export * from './useInfoLabelStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoLabel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './InfoLabel';\nexport * from './InfoLabel.types';\nexport * from './renderInfoLabel';\nexport * from './useInfoLabel';\nexport * from './useInfoLabelStyles';\n"]}

package/lib/components/InfoLabel/renderInfoLabel.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of InfoLabel
+ */
+export const renderInfoLabel_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.label, {
+    ...slotProps.label
+  }), slots.infoButton && /*#__PURE__*/React.createElement(slots.infoButton, {
+    ...slotProps.infoButton
+  }));
+};
+//# sourceMappingURL=renderInfoLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","getSlots","renderInfoLabel_unstable","state","slots","slotProps","createElement","root","label","infoButton"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getSlots } 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  const { slots, slotProps } = getSlots<InfoLabelSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.label {...slotProps.label} />\n      {slots.infoButton && <slots.infoButton {...slotProps.infoButton} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAqB,IAAI;EAChE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAiBE,KAAK,CAAC;EAE5D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,EACnCJ,KAAK,CAACK,UAAU,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,UAAU;IAAA,GAAKJ,SAAS,CAACI;EAAU,EAAI,CACxD;AAEjB,CAAC"}

package/lib/components/InfoLabel/useInfoLabel.js

@@ -0,0 +1,64 @@
+import { Label } from '@fluentui/react-label';
+import { resolveShorthand, useId } from '@fluentui/react-utilities';
+import { InfoButton } from '../InfoButton/InfoButton';
+/**
+ * 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 const useInfoLabel_unstable = (props, ref) => {
+  var _a;
+  const {
+    root: rootShorthand,
+    label: labelShorthand,
+    infoButton: infoButtonShorthand,
+    size,
+    info,
+    className,
+    style,
+    ...labelProps
+  } = props;
+  const root = resolveShorthand(rootShorthand, {
+    required: true,
+    defaultProps: {
+      className,
+      style
+    }
+  });
+  const label = resolveShorthand(labelShorthand, {
+    required: true,
+    defaultProps: {
+      id: useId('infolabel-'),
+      ref,
+      size,
+      ...labelProps
+    }
+  });
+  const infoButton = resolveShorthand(infoButtonShorthand, {
+    required: !!info,
+    defaultProps: {
+      id: useId('infobutton-'),
+      content: info,
+      size
+    }
+  });
+  if (infoButton) {
+    (_a = infoButton['aria-labelledby']) !== null && _a !== void 0 ? _a : infoButton['aria-labelledby'] = `${label.id} ${infoButton.id}`;
+  }
+  return {
+    size,
+    components: {
+      root: 'span',
+      label: Label,
+      infoButton: InfoButton
+    },
+    root,
+    label,
+    infoButton
+  };
+};
+//# sourceMappingURL=useInfoLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Label","resolveShorthand","useId","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","size","info","className","style","labelProps","required","defaultProps","id","content","_a","components"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { resolveShorthand, useId } 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    size,\n    info,\n    className,\n    style,\n    ...labelProps\n  } = props;\n\n  const root = resolveShorthand(rootShorthand, {\n    required: true,\n    defaultProps: {\n      className,\n      style,\n    },\n  });\n\n  const label = resolveShorthand(labelShorthand, {\n    required: true,\n    defaultProps: {\n      id: useId('infolabel-'),\n      ref,\n      size,\n      ...labelProps,\n    },\n  });\n\n  const infoButton = resolveShorthand(infoButtonShorthand, {\n    required: !!info,\n    defaultProps: {\n      id: useId('infobutton-'),\n      content: info,\n      size,\n    },\n  });\n\n  if (infoButton) {\n    infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\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"],"mappings":"AAEA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AACnE,SAASC,UAAU,QAAQ,0BAA0B;AAGrD;;;;;;;;;AASA,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,KAAqB,EAAEC,GAAgC,KAAoB;;EAC/G,MAAM;IACJC,IAAI,EAAEC,aAAa;IACnBC,KAAK,EAAEC,cAAc;IACrBC,UAAU,EAAEC,mBAAmB;IAC/BC,IAAI;IACJC,IAAI;IACJC,SAAS;IACTC,KAAK;IACL,GAAGC;EAAU,CACd,GAAGZ,KAAK;EAET,MAAME,IAAI,GAAGN,gBAAgB,CAACO,aAAa,EAAE;IAC3CU,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZJ,SAAS;MACTC;;GAEH,CAAC;EAEF,MAAMP,KAAK,GAAGR,gBAAgB,CAACS,cAAc,EAAE;IAC7CQ,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZC,EAAE,EAAElB,KAAK,CAAC,YAAY,CAAC;MACvBI,GAAG;MACHO,IAAI;MACJ,GAAGI;;GAEN,CAAC;EAEF,MAAMN,UAAU,GAAGV,gBAAgB,CAACW,mBAAmB,EAAE;IACvDM,QAAQ,EAAE,CAAC,CAACJ,IAAI;IAChBK,YAAY,EAAE;MACZC,EAAE,EAAElB,KAAK,CAAC,aAAa,CAAC;MACxBmB,OAAO,EAAEP,IAAI;MACbD;;GAEH,CAAC;EAEF,IAAIF,UAAU,EAAE;IACd,CAAAW,EAAA,GAAAX,UAAU,CAAC,iBAAiB,eAAAW,EAAA,cAAAA,EAAA,GAA5BX,UAAU,CAAC,iBAAiB,IAAM,GAAGF,KAAK,CAACW,EAAE,IAAIT,UAAU,CAACS,EAAE,EAAE;;EAGlE,OAAO;IACLP,IAAI;IACJU,UAAU,EAAE;MACVhB,IAAI,EAAE,MAAM;MACZE,KAAK,EAAET,KAAK;MACZW,UAAU,EAAER;KACb;IACDI,IAAI;IACJE,KAAK;IACLE;GACD;AACH,CAAC"}

package/lib/components/InfoLabel/useInfoLabelStyles.js

@@ -0,0 +1,43 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+export const infoLabelClassNames = {
+  root: 'fui-InfoLabel',
+  label: 'fui-InfoLabel__label',
+  infoButton: 'fui-InfoLabel__infoButton'
+};
+const useLabelStyles = /*#__PURE__*/__styles({
+  base: {
+    ha4doy: "f12kltsn",
+    Bceei9c: "fpo1scq",
+    sj55zd: "f1ym3bx4"
+  }
+}, {
+  d: [".f12kltsn{vertical-align:top;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}"]
+});
+const useInfoButtonStyles = /*#__PURE__*/__styles({
+  base: {
+    ha4doy: "f12kltsn",
+    B6of3ja: "f1bmzb36",
+    jrapky: "f1nyzk09"
+  },
+  large: {
+    B6of3ja: "fkrn0sh",
+    jrapky: "fmxx68s"
+  }
+}, {
+  d: [".f12kltsn{vertical-align:top;}", ".f1bmzb36{margin-top:calc(0px - var(--spacingVerticalXXS));}", ".f1nyzk09{margin-bottom:calc(0px - var(--spacingVerticalXXS));}", ".fkrn0sh{margin-top:-1px;}", ".fmxx68s{margin-bottom:-1px;}"]
+});
+/**
+ * Apply styling to the InfoLabel slots based on the state
+ */
+export const useInfoLabelStyles_unstable = state => {
+  state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
+  const labelStyles = useLabelStyles();
+  state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
+  const infoButtonStyles = useInfoButtonStyles();
+  if (state.infoButton) {
+    state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useInfoLabelStyles.js.map

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

@@ -0,0 +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":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.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  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"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AAGzD,OAAO,MAAMC,mBAAmB,GAAmC;EACjEC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;CACb;AAED,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAMrB;AAEF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,EAc1B;AAEF;;;AAGA,OAAO,MAAMK,2BAA2B,GAAIC,KAAqB,IAAoB;EACnFA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;EAEnF,MAAMC,WAAW,GAAGb,cAAc,EAAE;EACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;EAExG,MAAME,gBAAgB,GAAGR,mBAAmB,EAAE;EAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;IACpBY,KAAK,CAACZ,UAAU,CAACa,SAAS,GAAGjB,YAAY,CACvCC,mBAAmB,CAACG,UAAU,EAC9Be,gBAAgB,CAACb,IAAI,EACrBU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAChDE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAC3B;;EAGH,OAAOD,KAAK;AACd,CAAC"}

package/lib/index.js

@@ -1,2 +1,3 @@
 export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './InfoButton';
+export { InfoLabel, infoLabelClassNames, renderInfoLabel_unstable, useInfoLabelStyles_unstable, useInfoLabel_unstable } from './InfoLabel';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"sources":["../src/packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc"}
+{"version":3,"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"sources":["../src/packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\nexport {\n  InfoLabel,\n  infoLabelClassNames,\n  renderInfoLabel_unstable,\n  useInfoLabelStyles_unstable,\n  useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAErB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,aAAa"}

package/lib-commonjs/InfoLabel.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/InfoLabel/index"), exports);
+//# sourceMappingURL=InfoLabel.js.map

package/lib-commonjs/InfoLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-infobutton/src/InfoLabel.ts"],"sourcesContent":["export * from './components/InfoLabel/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,kCAAAC,OAAA"}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InfoLabel = void 0;
+const React = /*#__PURE__*/require("react");
+const renderInfoLabel_1 = /*#__PURE__*/require("./renderInfoLabel");
+const useInfoLabel_1 = /*#__PURE__*/require("./useInfoLabel");
+const useInfoLabelStyles_1 = /*#__PURE__*/require("./useInfoLabelStyles");
+/**
+ * InfoLabel component
+ */
+exports.InfoLabel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useInfoLabel_1.useInfoLabel_unstable(props, ref);
+  useInfoLabelStyles_1.useInfoLabelStyles_unstable(state);
+  return renderInfoLabel_1.renderInfoLabel_unstable(state);
+});
+exports.InfoLabel.displayName = 'InfoLabel';
+//# sourceMappingURL=InfoLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","require","renderInfoLabel_1","useInfoLabel_1","useInfoLabelStyles_1","exports","InfoLabel","forwardRef","props","ref","state","useInfoLabel_unstable","useInfoLabelStyles_unstable","renderInfoLabel_unstable","displayName"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/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';\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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAIA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,cAAA,gBAAAF,OAAA;AACA,MAAAG,oBAAA,gBAAAH,OAAA;AAEA;;;AAGaI,OAAA,CAAAC,SAAS,gBAAwCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5F,MAAMC,KAAK,GAAGP,cAAA,CAAAQ,qBAAqB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE/CL,oBAAA,CAAAQ,2BAA2B,CAACF,KAAK,CAAC;EAClC,OAAOR,iBAAA,CAAAW,wBAAwB,CAACH,KAAK,CAAC;AACxC,CAAC,CAAC;AAEFL,OAAA,CAAAC,SAAS,CAACQ,WAAW,GAAG,WAAW"}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=InfoLabel.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/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['content'];\n};\n\n/**\n * State used in rendering InfoLabel\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./InfoLabel"), exports);
+tslib_1.__exportStar(require("./InfoLabel.types"), exports);
+tslib_1.__exportStar(require("./renderInfoLabel"), exports);
+tslib_1.__exportStar(require("./useInfoLabel"), exports);
+tslib_1.__exportStar(require("./useInfoLabelStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/index.ts"],"sourcesContent":["export * from './InfoLabel';\nexport * from './InfoLabel.types';\nexport * from './renderInfoLabel';\nexport * from './useInfoLabel';\nexport * from './useInfoLabelStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,iBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,uBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,uBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,oBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,0BAAAC,OAAA"}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderInfoLabel_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of InfoLabel
+ */
+const renderInfoLabel_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.label, {
+    ...slotProps.label
+  }), slots.infoButton && React.createElement(slots.infoButton, {
+    ...slotProps.infoButton
+  }));
+};
+exports.renderInfoLabel_unstable = renderInfoLabel_unstable;
+//# sourceMappingURL=renderInfoLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","require","react_utilities_1","renderInfoLabel_unstable","state","slots","slotProps","getSlots","createElement","root","label","infoButton","exports"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getSlots } 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  const { slots, slotProps } = getSlots<InfoLabelSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.label {...slotProps.label} />\n      {slots.infoButton && <slots.infoButton {...slotProps.infoButton} />}\n    </slots.root>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAEA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,wBAAwB,GAAIC,KAAqB,IAAI;EAChE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAiBH,KAAK,CAAC;EAE5D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BT,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnCL,KAAK,CAACM,UAAU,IAAIX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACM,UAAU;IAAA,GAAKL,SAAS,CAACK;EAAU,EAAI,CACxD;AAEjB,CAAC;AATYC,OAAA,CAAAT,wBAAwB,GAAAA,wBAAA"}

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInfoLabel_unstable = void 0;
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const InfoButton_1 = /*#__PURE__*/require("../InfoButton/InfoButton");
+/**
+ * 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
+ */
+const useInfoLabel_unstable = (props, ref) => {
+  var _a;
+  const {
+    root: rootShorthand,
+    label: labelShorthand,
+    infoButton: infoButtonShorthand,
+    size,
+    info,
+    className,
+    style,
+    ...labelProps
+  } = props;
+  const root = react_utilities_1.resolveShorthand(rootShorthand, {
+    required: true,
+    defaultProps: {
+      className,
+      style
+    }
+  });
+  const label = react_utilities_1.resolveShorthand(labelShorthand, {
+    required: true,
+    defaultProps: {
+      id: react_utilities_1.useId('infolabel-'),
+      ref,
+      size,
+      ...labelProps
+    }
+  });
+  const infoButton = react_utilities_1.resolveShorthand(infoButtonShorthand, {
+    required: !!info,
+    defaultProps: {
+      id: react_utilities_1.useId('infobutton-'),
+      content: info,
+      size
+    }
+  });
+  if (infoButton) {
+    (_a = infoButton['aria-labelledby']) !== null && _a !== void 0 ? _a : infoButton['aria-labelledby'] = `${label.id} ${infoButton.id}`;
+  }
+  return {
+    size,
+    components: {
+      root: 'span',
+      label: react_label_1.Label,
+      infoButton: InfoButton_1.InfoButton
+    },
+    root,
+    label,
+    infoButton
+  };
+};
+exports.useInfoLabel_unstable = useInfoLabel_unstable;
+//# sourceMappingURL=useInfoLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["react_label_1","require","react_utilities_1","InfoButton_1","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","size","info","className","style","labelProps","resolveShorthand","required","defaultProps","id","useId","content","_a","components","Label","InfoButton","exports"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { resolveShorthand, useId } 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    size,\n    info,\n    className,\n    style,\n    ...labelProps\n  } = props;\n\n  const root = resolveShorthand(rootShorthand, {\n    required: true,\n    defaultProps: {\n      className,\n      style,\n    },\n  });\n\n  const label = resolveShorthand(labelShorthand, {\n    required: true,\n    defaultProps: {\n      id: useId('infolabel-'),\n      ref,\n      size,\n      ...labelProps,\n    },\n  });\n\n  const infoButton = resolveShorthand(infoButtonShorthand, {\n    required: !!info,\n    defaultProps: {\n      id: useId('infobutton-'),\n      content: info,\n      size,\n    },\n  });\n\n  if (infoButton) {\n    infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\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"],"mappings":";;;;;;AAEA,MAAAA,aAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,YAAA,gBAAAF,OAAA;AAGA;;;;;;;;;AASO,MAAMG,qBAAqB,GAAGA,CAACC,KAAqB,EAAEC,GAAgC,KAAoB;;EAC/G,MAAM;IACJC,IAAI,EAAEC,aAAa;IACnBC,KAAK,EAAEC,cAAc;IACrBC,UAAU,EAAEC,mBAAmB;IAC/BC,IAAI;IACJC,IAAI;IACJC,SAAS;IACTC,KAAK;IACL,GAAGC;EAAU,CACd,GAAGZ,KAAK;EAET,MAAME,IAAI,GAAGL,iBAAA,CAAAgB,gBAAgB,CAACV,aAAa,EAAE;IAC3CW,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZL,SAAS;MACTC;;GAEH,CAAC;EAEF,MAAMP,KAAK,GAAGP,iBAAA,CAAAgB,gBAAgB,CAACR,cAAc,EAAE;IAC7CS,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZC,EAAE,EAAEnB,iBAAA,CAAAoB,KAAK,CAAC,YAAY,CAAC;MACvBhB,GAAG;MACHO,IAAI;MACJ,GAAGI;;GAEN,CAAC;EAEF,MAAMN,UAAU,GAAGT,iBAAA,CAAAgB,gBAAgB,CAACN,mBAAmB,EAAE;IACvDO,QAAQ,EAAE,CAAC,CAACL,IAAI;IAChBM,YAAY,EAAE;MACZC,EAAE,EAAEnB,iBAAA,CAAAoB,KAAK,CAAC,aAAa,CAAC;MACxBC,OAAO,EAAET,IAAI;MACbD;;GAEH,CAAC;EAEF,IAAIF,UAAU,EAAE;IACd,CAAAa,EAAA,GAAAb,UAAU,CAAC,iBAAiB,eAAAa,EAAA,cAAAA,EAAA,GAA5Bb,UAAU,CAAC,iBAAiB,IAAM,GAAGF,KAAK,CAACY,EAAE,IAAIV,UAAU,CAACU,EAAE,EAAE;;EAGlE,OAAO;IACLR,IAAI;IACJY,UAAU,EAAE;MACVlB,IAAI,EAAE,MAAM;MACZE,KAAK,EAAET,aAAA,CAAA0B,KAAK;MACZf,UAAU,EAAER,YAAA,CAAAwB;KACb;IACDpB,IAAI;IACJE,KAAK;IACLE;GACD;AACH,CAAC;AAtDYiB,OAAA,CAAAxB,qBAAqB,GAAAA,qBAAA"}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInfoLabelStyles_unstable = exports.infoLabelClassNames = void 0;
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+exports.infoLabelClassNames = {
+  root: 'fui-InfoLabel',
+  label: 'fui-InfoLabel__label',
+  infoButton: 'fui-InfoLabel__infoButton'
+};
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  base: {
+    ha4doy: "f12kltsn",
+    Bceei9c: "fpo1scq",
+    sj55zd: "f1ym3bx4"
+  }
+}, {
+  d: [".f12kltsn{vertical-align:top;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}"]
+});
+const useInfoButtonStyles = /*#__PURE__*/react_1.__styles({
+  base: {
+    ha4doy: "f12kltsn",
+    B6of3ja: "f1bmzb36",
+    jrapky: "f1nyzk09"
+  },
+  large: {
+    B6of3ja: "fkrn0sh",
+    jrapky: "fmxx68s"
+  }
+}, {
+  d: [".f12kltsn{vertical-align:top;}", ".f1bmzb36{margin-top:calc(0px - var(--spacingVerticalXXS));}", ".f1nyzk09{margin-bottom:calc(0px - var(--spacingVerticalXXS));}", ".fkrn0sh{margin-top:-1px;}", ".fmxx68s{margin-bottom:-1px;}"]
+});
+/**
+ * Apply styling to the InfoLabel slots based on the state
+ */
+const useInfoLabelStyles_unstable = state => {
+  state.root.className = react_1.mergeClasses(exports.infoLabelClassNames.root, state.root.className);
+  const labelStyles = useLabelStyles();
+  state.label.className = react_1.mergeClasses(exports.infoLabelClassNames.label, labelStyles.base, state.label.className);
+  const infoButtonStyles = useInfoButtonStyles();
+  if (state.infoButton) {
+    state.infoButton.className = react_1.mergeClasses(exports.infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
+  }
+  return state;
+};
+exports.useInfoLabelStyles_unstable = useInfoLabelStyles_unstable;
+//# sourceMappingURL=useInfoLabelStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["react_theme_1","require","react_1","exports","infoLabelClassNames","root","label","infoButton","useLabelStyles","__styles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","mergeClasses","labelStyles","infoButtonStyles","size"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabelStyles.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  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"],"mappings":";;;;;;AAAA,MAAAA,aAAA,gBAAAC,OAAA;AAEA,MAAAC,OAAA,gBAAAD,OAAA;AAGaE,OAAA,CAAAC,mBAAmB,GAAmC;EACjEC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;CACb;AAED,MAAMC,cAAc,gBAAGN,OAAA,CAAAO,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAM/B;AAEF,MAAMC,mBAAmB,gBAAGb,OAAA,CAAAO,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,EAcpC;AAEF;;;AAGO,MAAMK,2BAA2B,GAAIC,KAAqB,IAAoB;EACnFA,KAAK,CAACf,IAAI,CAACgB,SAAS,GAAGnB,OAAA,CAAAoB,YAAY,CAACnB,OAAA,CAAAC,mBAAmB,CAACC,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACgB,SAAS,CAAC;EAEnF,MAAME,WAAW,GAAGf,cAAc,EAAE;EACpCY,KAAK,CAACd,KAAK,CAACe,SAAS,GAAGnB,OAAA,CAAAoB,YAAY,CAACnB,OAAA,CAAAC,mBAAmB,CAACE,KAAK,EAAEiB,WAAW,CAACb,IAAI,EAAEU,KAAK,CAACd,KAAK,CAACe,SAAS,CAAC;EAExG,MAAMG,gBAAgB,GAAGT,mBAAmB,EAAE;EAC9C,IAAIK,KAAK,CAACb,UAAU,EAAE;IACpBa,KAAK,CAACb,UAAU,CAACc,SAAS,GAAGnB,OAAA,CAAAoB,YAAY,CACvCnB,OAAA,CAAAC,mBAAmB,CAACG,UAAU,EAC9BiB,gBAAgB,CAACd,IAAI,EACrBU,KAAK,CAACK,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACN,KAAK,EAChDE,KAAK,CAACb,UAAU,CAACc,SAAS,CAC3B;;EAGH,OAAOD,KAAK;AACd,CAAC;AAjBYjB,OAAA,CAAAgB,2BAA2B,GAAAA,2BAAA"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInfoButton_unstable = exports.useInfoButtonStyles_unstable = exports.renderInfoButton_unstable = exports.infoButtonClassNames = exports.InfoButton = void 0;
+exports.useInfoLabel_unstable = exports.useInfoLabelStyles_unstable = exports.renderInfoLabel_unstable = exports.infoLabelClassNames = exports.InfoLabel = exports.useInfoButton_unstable = exports.useInfoButtonStyles_unstable = exports.renderInfoButton_unstable = exports.infoButtonClassNames = exports.InfoButton = void 0;
 var InfoButton_1 = /*#__PURE__*/require("./InfoButton");
 Object.defineProperty(exports, "InfoButton", {
   enumerable: true,
@@ -35,4 +35,35 @@ Object.defineProperty(exports, "useInfoButton_unstable", {
     return InfoButton_1.useInfoButton_unstable;
   }
 });
+var InfoLabel_1 = /*#__PURE__*/require("./InfoLabel");
+Object.defineProperty(exports, "InfoLabel", {
+  enumerable: true,
+  get: function () {
+    return InfoLabel_1.InfoLabel;
+  }
+});
+Object.defineProperty(exports, "infoLabelClassNames", {
+  enumerable: true,
+  get: function () {
+    return InfoLabel_1.infoLabelClassNames;
+  }
+});
+Object.defineProperty(exports, "renderInfoLabel_unstable", {
+  enumerable: true,
+  get: function () {
+    return InfoLabel_1.renderInfoLabel_unstable;
+  }
+});
+Object.defineProperty(exports, "useInfoLabelStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return InfoLabel_1.useInfoLabelStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useInfoLabel_unstable", {
+  enumerable: true,
+  get: function () {
+    return InfoLabel_1.useInfoLabel_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["InfoButton_1","require","Object","defineProperty","exports","enumerable","get","InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"sources":["../src/packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAO,UAAU;EAAA;AAAA;AACVL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAQ,oBAAoB;EAAA;AAAA;AACpBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAS,yBAAyB;EAAA;AAAA;AACzBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAU,4BAA4B;EAAA;AAAA;AAC5BR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAW,sBAAsB;EAAA;AAAA"}
+{"version":3,"names":["InfoButton_1","require","Object","defineProperty","exports","enumerable","get","InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel_1","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"sources":["../src/packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n  InfoButton,\n  infoButtonClassNames,\n  renderInfoButton_unstable,\n  useInfoButtonStyles_unstable,\n  useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\nexport {\n  InfoLabel,\n  infoLabelClassNames,\n  renderInfoLabel_unstable,\n  useInfoLabelStyles_unstable,\n  useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAO,UAAU;EAAA;AAAA;AACVL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAQ,oBAAoB;EAAA;AAAA;AACpBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAS,yBAAyB;EAAA;AAAA;AACzBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAU,4BAA4B;EAAA;AAAA;AAC5BR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAW,sBAAsB;EAAA;AAAA;AAGxB,IAAAC,WAAA,gBAAAX,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,WAAA,CAAAC,SAAS;EAAA;AAAA;AACTX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,WAAA,CAAAE,mBAAmB;EAAA;AAAA;AACnBZ,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,WAAA,CAAAG,wBAAwB;EAAA;AAAA;AACxBb,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,WAAA,CAAAI,2BAA2B;EAAA;AAAA;AAC3Bd,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,WAAA,CAAAK,qBAAqB;EAAA;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-infobutton",
-  "version": "9.0.0-beta.21",
+  "version": "9.0.0-beta.22",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,10 +33,11 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-popover": "^9.5.3",
-    "@fluentui/react-tabster": "^9.5.7",
+    "@fluentui/react-label": "^9.1.4",
+    "@fluentui/react-popover": "^9.5.4",
+    "@fluentui/react-tabster": "^9.6.0",
     "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-utilities": "^9.7.0",
+    "@fluentui/react-utilities": "^9.7.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },