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

package/.swcrc

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,7 +2,109 @@
   "name": "@fluentui/react-infobutton",
   "entries": [
     {
-      "date": "Wed, 15 Mar 2023 10:17:05 GMT",
+      "date": "Tue, 21 Mar 2023 21:18:48 GMT",
+      "tag": "@fluentui/react-infobutton_v9.0.0-beta.23",
+      "version": "9.0.0-beta.23",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui/react-infobutton",
+            "commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
+            "comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-infobutton",
+            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
+            "comment": "fix: add node field to package.json exports map."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-infobutton",
+            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
+            "comment": "chore: migrate to swc transpilation approach."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-label to v9.1.5",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-popover to v9.5.5",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-tabster to v9.6.1",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-theme to v9.1.7",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-utilities to v9.7.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-infobutton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Mar 2023 14:36:57 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,42 @@
 # 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 Tue, 21 Mar 2023 21:18:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.23)
+
+Tue, 21 Mar 2023 21:18:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.22..@fluentui/react-infobutton_v9.0.0-beta.23)
+
+### Changes
+
+- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-label to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-popover to v9.5.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-tabster to v9.6.1 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+
+## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.22)
+
+Thu, 16 Mar 2023 14:36:57 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/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,"names":[],"sources":["../src/InfoButton.ts"],"sourcesContent":["export * from './components/InfoButton/index';\n"],"mappings":"AAAA,cAAc"}

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,"names":[],"sources":["../src/InfoLabel.ts"],"sourcesContent":["export * from './components/InfoLabel/index';\n"],"mappings":"AAAA,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"sources":["../src/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"],"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"}
+{"version":3,"names":["Info12Regular","Info12Filled","Info16Regular","Info16Filled","Info20Regular","Info20Filled","bundleIcon","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20"],"sources":["../../../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"],"mappings":"AAAA,SACEA,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,UAAU,QACL;AAEP,OAAO,MAAMC,uBAAA,gBAA0BD,UAAA,CAAWL,YAAA,EAAcD,aAAA;AAChE,OAAO,MAAMQ,uBAAA,gBAA0BF,UAAA,CAAWH,YAAA,EAAcD,aAAA;AAChE,OAAO,MAAMO,uBAAA,gBAA0BH,UAAA,CAAWD,YAAA,EAAcD,aAAA"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"sources":["../src/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"],"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"}
+{"version":3,"names":["React","renderInfoButton_unstable","useInfoButton_unstable","useInfoButtonStyles_unstable","InfoButton","forwardRef","props","ref","state","displayName"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAG7C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQN,sBAAA,CAAuBI,KAAA,EAAOC,GAAA;EAE5CJ,4BAAA,CAA6BK,KAAA;EAC7B,OAAOP,yBAAA,CAA0BO,KAAA;AACnC;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}

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,"names":[],"sources":["../../../src/components/InfoButton/InfoButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n\n  /**\n   * The Popover element that wraps the 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"],"mappings":"AAAA"}

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,"names":[],"sources":["../../../src/components/InfoButton/index.ts"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/InfoButton/renderInfoButton.js

@@ -9,12 +9,6 @@ export const renderInfoButton_unstable = state => {
     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
-  }));
+  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));
 };
 //# sourceMappingURL=renderInfoButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","PopoverTrigger","renderInfoButton_unstable","state","slots","slotProps","createElement","popover","root","content"],"sources":["../src/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"],"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,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACG,OAAO;IAAA,GAAMF,SAAS,CAACE;EAAwB,gBACpDR,KAAA,CAAAO,aAAA,CAACL,cAAc,qBACbF,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI,CACnB,eACjBT,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI;EAAO,EAAI,CAC1B;AAEpB,CAAC"}
+{"version":3,"names":["React","getSlots","PopoverTrigger","renderInfoButton_unstable","state","slots","slotProps","createElement","popover","root","content"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAI/B;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,QAAA,CAA0BG,KAAA;EAEvD,oBACEJ,KAAA,CAAAO,aAAA,CAACF,KAAA,CAAMG,OAAO,EAAMF,SAAA,CAAUE,OAAO,eACnCR,KAAA,CAAAO,aAAA,CAACL,cAAA,qBACCF,KAAA,CAAAO,aAAA,CAACF,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI,iBAEhCT,KAAA,CAAAO,aAAA,CAACF,KAAA,CAAMK,OAAO,EAAKJ,SAAA,CAAUI,OAAO;AAG1C"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","createElement","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","content","children","type","required","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"sources":["../src/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      'aria-label': 'information',\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        tabIndex: -1,\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"],"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,KAAA,CAAAY,aAAA,CAACX,uBAAuB,OAAG;EAClCY,MAAM,eAAEb,KAAA,CAAAY,aAAA,CAACV,uBAAuB,OAAG;EACnCY,KAAK,eAAEd,KAAA,CAAAY,aAAA,CAACT,uBAAuB;CACvB;AAEV,MAAMY,cAAc,GAAG;EACrBJ,KAAK,EAAE,OAAO;EACdE,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASA,OAAO,MAAME,sBAAsB,GAAGA,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,EAAEhB,OAA0C;MACnDiB,OAAO,EAAEhB;KACV;IAEDc,IAAI,EAAElB,qBAAqB,CAAC,QAAQ,EAAE;MACpCqB,QAAQ,EAAEf,iBAAiB,CAACS,IAAI,CAAC;MACjCO,IAAI,EAAE,QAAQ;MACd,YAAY,EAAE,aAAa;MAC3B,GAAGT,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEjB,gBAAgB,CAACW,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,EAAElB,gBAAgB,CAACW,KAAK,CAACO,OAAO,EAAE;MACvCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE,MAAM;QACZC,QAAQ,EAAE,CAAC;;KAEd;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGzB,oBAAoB,CAAC;IACzDW,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACY,IAAI;IACzBC,YAAY,EAAEhB,KAAK,CAACG,OAAO,CAACc,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFlB,KAAK,CAACG,OAAO,CAACY,IAAI,GAAGF,WAAW;EAChCb,KAAK,CAACG,OAAO,CAACgB,YAAY,GAAGlC,cAAc,CAACe,KAAK,CAACG,OAAO,CAACgB,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKP,cAAc,CAACO,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOf,KAAK;AACd,CAAC"}
+{"version":3,"names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","createElement","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","content","children","type","required","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"sources":["../../../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      'aria-label': 'information',\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        tabIndex: -1,\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ;AAC1F,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ;AACxE,SAASC,OAAO,EAAEC,cAAc,QAAQ;AACxC,SAASC,oBAAoB,QAAQ;AAIrC,MAAMC,iBAAA,GAAoB;EACxBC,KAAA,eAAOX,KAAA,CAAAY,aAAA,CAACX,uBAAA;EACRY,MAAA,eAAQb,KAAA,CAAAY,aAAA,CAACV,uBAAA;EACTY,KAAA,eAAOd,KAAA,CAAAY,aAAA,CAACT,uBAAA;AACV;AAEA,MAAMY,cAAA,GAAiB;EACrBJ,KAAA,EAAO;EACPE,MAAA,EAAQ;EACRC,KAAA,EAAO;AACT;AAEA;;;;;;;;;AASA,OAAO,MAAME,sBAAA,GAAyBA,CAACC,KAAA,EAAwBC,GAAA,KAAiD;EAC9G,MAAM;IAAEC,IAAA,GAAO;EAAQ,CAAE,GAAGF,KAAA;EAE5B,MAAMG,KAAA,GAAyB;IAC7BD,IAAA;IAEAE,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,OAAA,EAAShB,OAAA;MACTiB,OAAA,EAAShB;IACX;IAEAc,IAAA,EAAMlB,qBAAA,CAAsB,UAAU;MACpCqB,QAAA,EAAUf,iBAAiB,CAACS,IAAA,CAAK;MACjCO,IAAA,EAAM;MACN,cAAc;MACd,GAAGT,KAAK;MACRC;IACF;IACAK,OAAA,EAASjB,gBAAA,CAAiBW,KAAA,CAAMM,OAAO,EAAE;MACvCI,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZC,WAAA,EAAa;QACbV,IAAA,EAAMJ,cAAc,CAACI,IAAA,CAAK;QAC1BW,SAAA,EAAW;MACb;IACF;IACAN,OAAA,EAASlB,gBAAA,CAAiBW,KAAA,CAAMO,OAAO,EAAE;MACvCG,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZG,IAAA,EAAM;QACNC,QAAA,EAAU,CAAC;MACb;IACF;EACF;EAEA,MAAM,CAACC,WAAA,EAAaC,cAAA,CAAe,GAAGzB,oBAAA,CAAqB;IACzDW,KAAA,EAAOA,KAAA,CAAMG,OAAO,CAACY,IAAI;IACzBC,YAAA,EAAchB,KAAA,CAAMG,OAAO,CAACc,WAAW;IACvCC,YAAA,EAAc;EAChB;EAEAlB,KAAA,CAAMG,OAAO,CAACY,IAAI,GAAGF,WAAA;EACrBb,KAAA,CAAMG,OAAO,CAACgB,YAAY,GAAGlC,cAAA,CAAee,KAAA,CAAMG,OAAO,CAACgB,YAAY,EAAE,CAACC,CAAA,EAAGC,IAAA,KAASP,cAAA,CAAeO,IAAA,CAAKN,IAAI;EAE7G,OAAOf,KAAA;AACT"}

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

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","content","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","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","Bjwuhne","Ghsupd","Bule8hv","large","d","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["../src/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n  root: 'fui-InfoButton',\n  // this className won't be used, but it's needed to satisfy the type checker\n  popover: 'fui-InfoButton__popover',\n  content: 'fui-InfoButton__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.margin(0),\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'none',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'inline-flex',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      color: tokens.colorNeutralForeground2BrandHover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline-flex',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  selected: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline-flex',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      color: 'Canvas',\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      color: 'CanvasText',\n\n      ':hover,:hover:active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n\n  focusIndicator: createFocusOutlineStyle(),\n\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  smallMedium: typographyStyles.caption1,\n  large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.content.className = mergeClasses(\n    infoButtonClassNames.content,\n    size === 'large' && popoverSurfaceStyles.large,\n    state.content.className,\n  );\n\n  state.root.className = mergeClasses(\n    infoButtonClassNames.root,\n    buttonStyles.base,\n    buttonStyles.highContrast,\n    buttonStyles.focusIndicator,\n    open && buttonStyles.selected,\n    size === 'large' && buttonStyles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"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;AAIhE,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE;CACV;AAED;;;AAGA,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,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAA1B,MAAA;IAAAC,MAAA;IAAAiB,MAAA;IAAAC,MAAA;IAAAQ,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,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAlD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAgD,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,EA4EtB;AAEF,MAAMC,uBAAuB,gBAAGxF,QAAA;EAAAyF,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,EAG9B;AAEF;;;AAGA,OAAO,MAAMW,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAM;IAAEC;EAAI,CAAE,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAI,CAAE,GAAGF,KAAK,CAACxF,OAAO;EAC9B,MAAM2F,YAAY,GAAGzF,eAAe,EAAE;EACtC,MAAM0F,oBAAoB,GAAGX,uBAAuB,EAAE;EAEtDO,KAAK,CAACvF,OAAO,CAAC4F,SAAS,GAAGnG,YAAY,CACpCI,oBAAoB,CAACG,OAAO,EAC5BwF,IAAI,KAAK,OAAO,IAAIG,oBAAoB,CAACjB,KAAK,EAC9Ca,KAAK,CAACvF,OAAO,CAAC4F,SAAS,CACxB;EAEDL,KAAK,CAACzF,IAAI,CAAC8F,SAAS,GAAGnG,YAAY,CACjCI,oBAAoB,CAACC,IAAI,EACzB4F,YAAY,CAACxF,IAAI,EACjBwF,YAAY,CAACnD,YAAY,EACzBmD,YAAY,CAAC/C,cAAc,EAC3B8C,IAAI,IAAIC,YAAY,CAACtD,QAAQ,EAC7BoD,IAAI,KAAK,OAAO,IAAIE,YAAY,CAAChB,KAAK,EACtCa,KAAK,CAACzF,IAAI,CAAC8F,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC"}
+{"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","content","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","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","Bjwuhne","Ghsupd","Bule8hv","large","d","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["../../../src/components/InfoButton/useInfoButtonStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n  root: 'fui-InfoButton',\n  // this className won't be used, but it's needed to satisfy the type checker\n  popover: 'fui-InfoButton__popover',\n  content: 'fui-InfoButton__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.margin(0),\n    ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'none',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'inline-flex',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      color: tokens.colorNeutralForeground2BrandHover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline-flex',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  selected: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline-flex',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      color: 'Canvas',\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      color: 'CanvasText',\n\n      ':hover,:hover:active': {\n        forcedColorAdjust: 'none',\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n\n  focusIndicator: createFocusOutlineStyle(),\n\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n  },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n  smallMedium: typographyStyles.caption1,\n  large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n  const { size } = state;\n  const { open } = state.popover;\n  const buttonStyles = useButtonStyles();\n  const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n  state.content.className = mergeClasses(\n    infoButtonClassNames.content,\n    size === 'large' && popoverSurfaceStyles.large,\n    state.content.className,\n  );\n\n  state.root.className = mergeClasses(\n    infoButtonClassNames.root,\n    buttonStyles.base,\n    buttonStyles.highContrast,\n    buttonStyles.focusIndicator,\n    open && buttonStyles.selected,\n    size === 'large' && buttonStyles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"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"}

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/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,YAAYA,KAAA,MAAW;AAIvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,SAAA,gBAAiDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC7F,MAAMC,KAAA,GAAQN,qBAAA,CAAsBI,KAAA,EAAOC,GAAA;EAE3CJ,2BAAA,CAA4BK,KAAA;EAC5B,OAAOP,wBAAA,CAAyBO,KAAA;AAClC;AAEAJ,SAAA,CAAUK,WAAW,GAAG"}

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,"names":[],"sources":["../../../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":"AAAA"}

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,"names":[],"sources":["../../../src/components/InfoLabel/index.ts"],"sourcesContent":["export * from './InfoLabel';\nexport * from './InfoLabel.types';\nexport * from './renderInfoLabel';\nexport * from './useInfoLabel';\nexport * from './useInfoLabelStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/InfoLabel/renderInfoLabel.js

@@ -0,0 +1,13 @@
+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/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,YAAYA,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,wBAAA,GAA4BC,KAAA,IAA0B;EACjE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAyBE,KAAA;EAEtD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC/BJ,KAAA,CAAMK,UAAU,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMK,UAAU,EAAKJ,SAAA,CAAUI,UAAU;AAGrE"}

package/lib/components/InfoLabel/useInfoLabel.js

@@ -0,0 +1,66 @@
+var _infoButton, _arialabelledby;
+import * as React from 'react';
+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) => {
+  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) {
+    var _;
+    (_ = (_infoButton = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton[_arialabelledby] = `${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":["_infoButton","_arialabelledby","React","Label","resolveShorthand","useId","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","size","info","className","style","labelProps","required","defaultProps","id","content","_","components"],"sources":["../../../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":"IAwDIA,WAAA,EAAWC,eAAA;AAxDf,YAAYC,KAAA,MAAW;AAEvB,SAASC,KAAK,QAAQ;AACtB,SAASC,gBAAgB,EAAEC,KAAK,QAAQ;AACxC,SAASC,UAAU,QAAQ;AAG3B;;;;;;;;;AASA,OAAO,MAAMC,qBAAA,GAAwBA,CAACC,KAAA,EAAuBC,GAAA,KAAqD;EAChH,MAAM;IACJC,IAAA,EAAMC,aAAA;IACNC,KAAA,EAAOC,cAAA;IACPC,UAAA,EAAYC,mBAAA;IACZC,IAAA;IACAC,IAAA;IACAC,SAAA;IACAC,KAAA;IACA,GAAGC;EAAA,CACJ,GAAGZ,KAAA;EAEJ,MAAME,IAAA,GAAON,gBAAA,CAAiBO,aAAA,EAAe;IAC3CU,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZJ,SAAA;MACAC;IACF;EACF;EAEA,MAAMP,KAAA,GAAQR,gBAAA,CAAiBS,cAAA,EAAgB;IAC7CQ,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZC,EAAA,EAAIlB,KAAA,CAAM;MACVI,GAAA;MACAO,IAAA;MACA,GAAGI;IACL;EACF;EAEA,MAAMN,UAAA,GAAaV,gBAAA,CAAiBW,mBAAA,EAAqB;IACvDM,QAAA,EAAU,CAAC,CAACJ,IAAA;IACZK,YAAA,EAAc;MACZC,EAAA,EAAIlB,KAAA,CAAM;MACVmB,OAAA,EAASP,IAAA;MACTD;IACF;EACF;EAEA,IAAIF,UAAA,EAAY;;IACd,CAAAW,CAAA,IAAAzB,WAAA,GAAAc,UAAA,EAAWb,eAAA,qBAAkB,cAAAwB,CAAA,cAAAA,CAAA,GAA7BzB,WAAU,CAACC,eAAA,CAAkB,GAAM,GAAEW,KAAA,CAAMW,EAAG,IAAGT,UAAA,CAAWS,EAAG,EAAC;EAClE;EAEA,OAAO;IACLP,IAAA;IACAU,UAAA,EAAY;MACVhB,IAAA,EAAM;MACNE,KAAA,EAAOT,KAAA;MACPW,UAAA,EAAYR;IACd;IACAI,IAAA;IACAE,KAAA;IACAE;EACF;AACF"}

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