@fluentui/react-infobutton 9.0.0-beta.3 → 9.0.0-beta.31

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

@@ -0,0 +1,153 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const infoButtonClassNames = {
+  root: 'fui-InfoButton',
+  // this className won't be used, but it's needed to satisfy the type checker
+  popover: 'fui-InfoButton__popover',
+  info: 'fui-InfoButton__info'
+};
+/**
+ * Styles for the root slot
+ */
+const useButtonStyles = /*#__PURE__*/__styles({
+  base: {
+    Bt984gj: "f122n59",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "ftuwxu6",
+    Brf1p80: "f4d9j23",
+    w71qe1: "f1iuv45f",
+    ha4doy: "fmrv4ls",
+    qhf8xq: "f10pi13n",
+    De3pzq: "f1c21dwh",
+    sj55zd: "fkfq4zb",
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["f11qmguv", "f1tyq0we"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1tyq0we", "f11qmguv"],
+    z8tnut: "f1ywm7hm",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f14wxoun",
+    uwmqm3: ["fruq291", "f7x41pl"],
+    D0sxk3: "f16u1re",
+    t6yez3: "f1rw4040",
+    Jwef8y: "fjxutwb",
+    Bi91k9c: "f139oj5f",
+    Bk3fhr4: "f1jpd6y0",
+    Bmfj8id: "fuxngvv",
+    iro3zm: "fwiml72",
+    B2d53fq: "f1fg1p5m"
+  },
+  selected: {
+    De3pzq: "f1q9pm1r",
+    sj55zd: "f1qj7y59",
+    D0sxk3: "fgzdkf0",
+    t6yez3: "f15q0o9g",
+    Bsw6fvg: "f1rirnrt",
+    Bbusuzp: "f1cg6951"
+  },
+  highContrast: {
+    Bbusuzp: "fn0tkbb",
+    Bs6v0vm: "f1rp3av6",
+    B46dtvo: "f1u7gwqv",
+    gh1jta: "fl6kagl"
+  },
+  focusIndicator: {
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    Bf4ptjt: "fh1cnn4",
+    kclons: ["fy7oxxb", "f184ne2d"],
+    Bhdgwq3: "fpukqih",
+    Blkhhs4: ["f184ne2d", "fy7oxxb"],
+    Bqtpl0w: "frrh606",
+    clg4pj: ["f1v5zibi", "fo2hd23"],
+    hgwjuy: "ful5kiu",
+    Bonggc9: ["fo2hd23", "f1v5zibi"],
+    B1tsrr9: ["f1jqcqds", "ftffrms"],
+    Dah5zi: ["ftffrms", "f1jqcqds"],
+    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
+    qqdqy8: ["fsr1zz6", "f2e7qr6"],
+    B6dhp37: "f1dvezut",
+    i03rao: ["fd0oaoj", "f1cwg4i8"],
+    Boxcth7: "fjvm52t",
+    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
+    J0r882: "fdiulkx",
+    Bjwuhne: "f1yalx80",
+    Ghsupd: ["fq22d5a", "f1jw7pan"],
+    Bule8hv: ["f1jw7pan", "fq22d5a"]
+  },
+  large: {
+    z8tnut: "fclwglc",
+    z189sj: ["f1w3695s", "f1b0r8ql"],
+    Byoj8tv: "fywfov9",
+    uwmqm3: ["f1b0r8ql", "f1w3695s"]
+  }
+}, {
+  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
+  h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
+  m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl:hover:active{color:Canvas;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+const usePopoverSurfaceStyles = /*#__PURE__*/__styles({
+  smallMedium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  large: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
+/**
+ * Apply styling to the InfoButton slots based on the state
+ */
+export const useInfoButtonStyles_unstable = state => {
+  const {
+    size
+  } = state;
+  const {
+    open
+  } = state.popover;
+  const buttonStyles = useButtonStyles();
+  const popoverSurfaceStyles = usePopoverSurfaceStyles();
+  state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' && popoverSurfaceStyles.large, state.info.className);
+  state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useInfoButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","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.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n  root: 'fui-InfoButton',\n  // this className won't be used, but it's needed to satisfy the type checker\n  popover: 'fui-InfoButton__popover',\n  info: 'fui-InfoButton__info',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n    position: 'relative',\n\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n\n    ...shorthands.borderStyle('none'),\n    ...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.info.className = mergeClasses(\n    infoButtonClassNames.info,\n    size === 'large' && popoverSurfaceStyles.large,\n    state.info.className,\n  );\n\n  state.root.className = mergeClasses(\n    infoButtonClassNames.root,\n    buttonStyles.base,\n    buttonStyles.highContrast,\n    buttonStyles.focusIndicator,\n    open && buttonStyles.selected,\n    size === 'large' && buttonStyles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"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.styles';
+/**
+ * InfoLabel component
+ */
+export const InfoLabel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useInfoLabel_unstable(props, ref);
+  useInfoLabelStyles_unstable(state);
+  return renderInfoLabel_unstable(state);
+});
+InfoLabel.displayName = 'InfoLabel';
+//# 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.styles';\n\n/**\n * InfoLabel component\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n  const state = useInfoLabel_unstable(props, ref);\n\n  useInfoLabelStyles_unstable(state);\n  return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"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['info'];\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.styles';
+//# 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.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/InfoLabel/renderInfoLabel.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderInfoLabel_unstable","state","slots","slotProps","root","label","infoButton"],"sources":["../../../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,wBAAA,GAA4BC,KAAA,IAA0B;EACjE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA6BE,KAAA;EAE1D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BN,aAfN,CAeOI,KAAA,CAAMG,KAAK,EAAKF,SAAA,CAAUE,KAAK,GAC/BH,KAAA,CAAMI,UAAU,iBAAIR,aAhB3B,CAgB4BI,KAAA,CAAMI,UAAU,EAAKH,SAAA,CAAUG,UAAU;AAGrE"}

package/lib/components/InfoLabel/useInfoLabel.js

@@ -0,0 +1,75 @@
+var _infoButton, _arialabelledby, _root, _ariaowns;
+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,
+    info,
+    size,
+    className,
+    style,
+    ...labelProps
+  } = props;
+  const baseId = useId('infolabel-');
+  const root = resolveShorthand(rootShorthand, {
+    required: true,
+    defaultProps: {
+      className,
+      style
+    }
+  });
+  const label = resolveShorthand(labelShorthand, {
+    required: true,
+    defaultProps: {
+      id: baseId + '__label',
+      ref,
+      size,
+      ...labelProps
+    }
+  });
+  const infoButton = resolveShorthand(infoButtonShorthand, {
+    required: !!info,
+    defaultProps: {
+      id: baseId + '__infoButton',
+      size,
+      info
+    }
+  });
+  if (infoButton) {
+    var _infoButton_info;
+    infoButton.info = resolveShorthand(infoButton === null || infoButton === void 0 ? void 0 : infoButton.info, {
+      defaultProps: {
+        id: baseId + '__info'
+      }
+    });
+    var _;
+    (_ = (_infoButton = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton[_arialabelledby] = `${label.id} ${infoButton.id}`;
+    var _1;
+    (_1 = (_root = root)[_ariaowns = 'aria-owns']) !== null && _1 !== void 0 ? _1 : _root[_ariaowns] = (_infoButton_info = infoButton.info) === null || _infoButton_info === void 0 ? void 0 : _infoButton_info.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","_root","_ariaowns","React","Label","resolveShorthand","useId","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","required","defaultProps","id","_infoButton_info","_","_1","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    info,\n    size,\n    className,\n    style,\n    ...labelProps\n  } = props;\n  const baseId = useId('infolabel-');\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: baseId + '__label',\n      ref,\n      size,\n      ...labelProps,\n    },\n  });\n\n  const infoButton = resolveShorthand(infoButtonShorthand, {\n    required: !!info,\n    defaultProps: {\n      id: baseId + '__infoButton',\n      size,\n      info,\n    },\n  });\n\n  if (infoButton) {\n    infoButton.info = resolveShorthand(infoButton?.info, {\n      defaultProps: {\n        id: baseId + '__info',\n      },\n    });\n\n    infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n    root['aria-owns'] ??= infoButton.info?.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":"IA+DIA,WAAA,EAAWC,eAAA,EACXC,KAAA,EAAKC,SAAA;AAhET,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;EACJ,MAAMa,MAAA,GAAShB,KAAA,CAAM;EAErB,MAAMK,IAAA,GAAON,gBAAA,CAAiBO,aAAA,EAAe;IAC3CW,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZL,SAAA;MACAC;IACF;EACF;EAEA,MAAMP,KAAA,GAAQR,gBAAA,CAAiBS,cAAA,EAAgB;IAC7CS,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZC,EAAA,EAAIH,MAAA,GAAS;MACbZ,GAAA;MACAQ,IAAA;MACA,GAAGG;IACL;EACF;EAEA,MAAMN,UAAA,GAAaV,gBAAA,CAAiBW,mBAAA,EAAqB;IACvDO,QAAA,EAAU,CAAC,CAACN,IAAA;IACZO,YAAA,EAAc;MACZC,EAAA,EAAIH,MAAA,GAAS;MACbJ,IAAA;MACAD;IACF;EACF;EAEA,IAAIF,UAAA,EAAY;QAQQW,gBAAA;IAPtBX,UAAA,CAAWE,IAAI,GAAGZ,gBAAA,CAAiBU,UAAA,aAAAA,UAAA,uBAAAA,UAAA,CAAYE,IAAI,EAAE;MACnDO,YAAA,EAAc;QACZC,EAAA,EAAIH,MAAA,GAAS;MACf;IACF;;IAEA,CAAAK,CAAA,IAAA5B,WAAA,GAAAgB,UAAA,EAAWf,eAAA,qBAAkB,cAAA2B,CAAA,cAAAA,CAAA,GAA7B5B,WAAU,CAACC,eAAA,CAAkB,GAAM,GAAEa,KAAA,CAAMY,EAAG,IAAGV,UAAA,CAAWU,EAAG,EAAC;;IAChE,CAAAG,EAAA,IAAA3B,KAAA,GAAAU,IAAA,EAAKT,SAAA,eAAY,cAAA0B,EAAA,cAAAA,EAAA,GAAjB3B,KAAI,CAACC,SAAA,CAAY,GAAK,CAAAwB,gBAAA,GAAAX,UAAA,CAAWE,IAAI,cAAfS,gBAAA,uBAAAA,gBAAA,CAAiBD,EAAE;EAC3C;EAEA,OAAO;IACLP,IAAA;IACAW,UAAA,EAAY;MACVlB,IAAA,EAAM;MACNE,KAAA,EAAOT,KAAA;MACPW,UAAA,EAAYR;IACd;IACAI,IAAA;IACAE,KAAA;IACAE;EACF;AACF"}

package/lib/components/InfoLabel/useInfoLabelStyles.styles.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.styles.js.map

package/lib/components/InfoLabel/useInfoLabelStyles.styles.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/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n  root: 'fui-InfoLabel',\n  label: 'fui-InfoLabel__label',\n  infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n    cursor: 'inherit',\n    color: 'inherit',\n  },\n});\n\nconst useInfoButtonStyles = makeStyles({\n  base: {\n    verticalAlign: 'top',\n\n    // Negative margin to align with the text\n    marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n    marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n  },\n\n  large: {\n    // Negative margin to align with the text\n    marginTop: '-1px',\n    marginBottom: '-1px',\n  },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n  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;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,QAAQ;AAGzC,OAAO,MAAMC,mBAAA,GAAsD;EACjEC,IAAA,EAAM;EACNC,KAAA,EAAO;EACPC,UAAA,EAAY;AACd;AAEA,MAAMC,cAAA,gBAAiBN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAMvB;AAEA,MAAMC,mBAAA,gBAAsBZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,EAc5B;AAEA;;;AAGA,OAAO,MAAMK,2BAAA,GAA+BC,KAAA,IAA0C;EACpFA,KAAA,CAAMd,IAAI,CAACe,SAAS,GAAGjB,YAAA,CAAaC,mBAAA,CAAoBC,IAAI,EAAEc,KAAA,CAAMd,IAAI,CAACe,SAAS;EAElF,MAAMC,WAAA,GAAcb,cAAA;EACpBW,KAAA,CAAMb,KAAK,CAACc,SAAS,GAAGjB,YAAA,CAAaC,mBAAA,CAAoBE,KAAK,EAAEe,WAAA,CAAYZ,IAAI,EAAEU,KAAA,CAAMb,KAAK,CAACc,SAAS;EAEvG,MAAME,gBAAA,GAAmBR,mBAAA;EACzB,IAAIK,KAAA,CAAMZ,UAAU,EAAE;IACpBY,KAAA,CAAMZ,UAAU,CAACa,SAAS,GAAGjB,YAAA,CAC3BC,mBAAA,CAAoBG,UAAU,EAC9Be,gBAAA,CAAiBb,IAAI,EACrBU,KAAA,CAAMI,IAAI,KAAK,WAAWD,gBAAA,CAAiBL,KAAK,EAChDE,KAAA,CAAMZ,UAAU,CAACa,SAAS;EAE9B;EAEA,OAAOD,KAAA;AACT"}

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,"sources":["packages/react-components/react-infobutton/src/index.ts"],"names":[],"mappings":"AAAA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP","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"],"sourceRoot":"../src/"}
+{"version":3,"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"sources":["../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;AAEP,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB"}

package/lib-commonjs/InfoButton.js

@@ -1,10 +1,9 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./components/InfoButton/index"), exports);
+ //# sourceMappingURL=InfoButton.js.map
 
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./components/InfoButton/index"), exports);
 //# sourceMappingURL=InfoButton.js.map

package/lib-commonjs/InfoButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-infobutton/src/InfoButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/InfoButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../lib/InfoButton.js"],"sourcesContent":["export * from './components/InfoButton/index';\n//# sourceMappingURL=InfoButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}

package/lib-commonjs/InfoLabel.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./components/InfoLabel/index"), exports);
+ //# sourceMappingURL=InfoLabel.js.map
+
+//# sourceMappingURL=InfoLabel.js.map

package/lib-commonjs/InfoLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/InfoLabel.js"],"sourcesContent":["export * from './components/InfoLabel/index';\n//# sourceMappingURL=InfoLabel.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,qCAAqC"}

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

@@ -1,13 +1,21 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.DefaultInfoButtonIcon20 = exports.DefaultInfoButtonIcon16 = exports.DefaultInfoButtonIcon12 = void 0;
-
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DefaultInfoButtonIcon12: ()=>DefaultInfoButtonIcon12,
+    DefaultInfoButtonIcon16: ()=>DefaultInfoButtonIcon16,
+    DefaultInfoButtonIcon20: ()=>DefaultInfoButtonIcon20
+});
+const _reactIcons = require("@fluentui/react-icons");
+const DefaultInfoButtonIcon12 = /*#__PURE__*/ (0, _reactIcons.bundleIcon)(_reactIcons.Info12Filled, _reactIcons.Info12Regular);
+const DefaultInfoButtonIcon16 = /*#__PURE__*/ (0, _reactIcons.bundleIcon)(_reactIcons.Info16Filled, _reactIcons.Info16Regular);
+const DefaultInfoButtonIcon20 = /*#__PURE__*/ (0, _reactIcons.bundleIcon)(_reactIcons.Info20Filled, _reactIcons.Info20Regular); //# sourceMappingURL=DefaultInfoButtonIcons.js.map
 
-exports.DefaultInfoButtonIcon12 = /*#__PURE__*/react_icons_1.bundleIcon(react_icons_1.Info12Filled, react_icons_1.Info12Regular);
-exports.DefaultInfoButtonIcon16 = /*#__PURE__*/react_icons_1.bundleIcon(react_icons_1.Info16Filled, react_icons_1.Info16Regular);
-exports.DefaultInfoButtonIcon20 = /*#__PURE__*/react_icons_1.bundleIcon(react_icons_1.Info20Filled, react_icons_1.Info20Regular);
 //# sourceMappingURL=DefaultInfoButtonIcons.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAUa,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,UAAA,CAAW,aAAA,CAAA,YAAX,EAAyB,aAAA,CAAA,aAAzB,CAA1B;AACA,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,UAAA,CAAW,aAAA,CAAA,YAAX,EAAyB,aAAA,CAAA,aAAzB,CAA1B;AACA,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,UAAA,CAAW,aAAA,CAAA,YAAX,EAAyB,aAAA,CAAA,aAAzB,CAA1B","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/InfoButton/DefaultInfoButtonIcons.js"],"sourcesContent":["import { Info12Regular, Info12Filled, Info16Regular, Info16Filled, Info20Regular, Info20Filled, bundleIcon } from '@fluentui/react-icons';\nexport const DefaultInfoButtonIcon12 = /*#__PURE__*/bundleIcon(Info12Filled, Info12Regular);\nexport const DefaultInfoButtonIcon16 = /*#__PURE__*/bundleIcon(Info16Filled, Info16Regular);\nexport const DefaultInfoButtonIcon20 = /*#__PURE__*/bundleIcon(Info20Filled, Info20Regular);\n//# sourceMappingURL=DefaultInfoButtonIcons.js.map"],"names":["DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","bundleIcon","Info12Filled","Info12Regular","Info16Filled","Info16Regular","Info20Filled","Info20Regular"],"mappings":";;;;;;;;;;;IACaA,uBAAuB,MAAvBA;IACAC,uBAAuB,MAAvBA;IACAC,uBAAuB,MAAvBA;;4BAHqG;AAC3G,MAAMF,0BAA0B,WAAW,GAAEG,IAAAA,sBAAU,EAACC,wBAAY,EAAEC,yBAAa;AACnF,MAAMJ,0BAA0B,WAAW,GAAEE,IAAAA,sBAAU,EAACG,wBAAY,EAAEC,yBAAa;AACnF,MAAML,0BAA0B,WAAW,GAAEC,IAAAA,sBAAU,EAACK,wBAAY,EAAEC,yBAAa,GAC1F,kDAAkD"}

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

@@ -1,26 +1,21 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.InfoButton = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const renderInfoButton_1 = /*#__PURE__*/require("./renderInfoButton");
-
-const useInfoButton_1 = /*#__PURE__*/require("./useInfoButton");
-
-const useInfoButtonStyles_1 = /*#__PURE__*/require("./useInfoButtonStyles");
-/**
- * InfoButtons provide a way to display additional information about a form field or an area in the UI.
- */
-
-
-exports.InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useInfoButton_1.useInfoButton_unstable(props, ref);
-  useInfoButtonStyles_1.useInfoButtonStyles_unstable(state);
-  return renderInfoButton_1.renderInfoButton_unstable(state);
+Object.defineProperty(exports, "InfoButton", {
+    enumerable: true,
+    get: ()=>InfoButton
 });
-exports.InfoButton.displayName = 'InfoButton';
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _renderInfoButton = require("./renderInfoButton");
+const _useInfoButton = require("./useInfoButton");
+const _useInfoButtonStylesStyles = require("./useInfoButtonStyles.styles");
+const InfoButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useInfoButton.useInfoButton_unstable)(props, ref);
+    (0, _useInfoButtonStylesStyles.useInfoButtonStyles_unstable)(state);
+    return (0, _renderInfoButton.renderInfoButton_unstable)(state);
+});
+InfoButton.displayName = 'InfoButton'; //# sourceMappingURL=InfoButton.js.map
+
 //# sourceMappingURL=InfoButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/InfoButton/InfoButton.js"],"sourcesContent":["import * as React from 'react';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles.styles';\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useInfoButton_unstable(props, ref);\n  useInfoButtonStyles_unstable(state);\n  return renderInfoButton_unstable(state);\n});\nInfoButton.displayName = 'InfoButton';\n//# sourceMappingURL=InfoButton.js.map"],"names":["InfoButton","React","forwardRef","props","ref","state","useInfoButton_unstable","useInfoButtonStyles_unstable","renderInfoButton_unstable","displayName"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;kCACmB;+BACH;2CACM;AAItC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,uDAA4B,EAACF;IAC7B,OAAOG,IAAAA,2CAAyB,EAACH;AACnC;AACAL,WAAWS,WAAW,GAAG,cACzB,sCAAsC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/InfoButton/InfoButton.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=InfoButton.types.js.map"],"names":[],"mappings":";;;;CACA,4CAA4C"}

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

@@ -1,18 +1,13 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./InfoButton"), exports);
+_exportStar(require("./InfoButton.types"), exports);
+_exportStar(require("./renderInfoButton"), exports);
+_exportStar(require("./useInfoButton"), exports);
+_exportStar(require("./useInfoButtonStyles.styles"), exports);
+ //# sourceMappingURL=index.js.map
 
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./InfoButton"), exports);
-
-tslib_1.__exportStar(require("./InfoButton.types"), exports);
-
-tslib_1.__exportStar(require("./renderInfoButton"), exports);
-
-tslib_1.__exportStar(require("./useInfoButton"), exports);
-
-tslib_1.__exportStar(require("./useInfoButtonStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-infobutton/src/components/InfoButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/InfoButton/index.js"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -1,30 +1,17 @@
-"use strict";
-
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.renderInfoButton_unstable = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const react_popover_1 = /*#__PURE__*/require("@fluentui/react-popover");
-/**
- * Render the final JSX of InfoButton
- */
-
-
-const renderInfoButton_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.popover, { ...slotProps.popover
-  }, React.createElement(react_popover_1.PopoverTrigger, null, React.createElement(slots.root, { ...slotProps.root
-  })), React.createElement(slots.content, { ...slotProps.content
-  }));
-};
+Object.defineProperty(exports, "renderInfoButton_unstable", {
+    enumerable: true,
+    get: ()=>renderInfoButton_unstable
+});
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _reactPopover = require("@fluentui/react-popover");
+const renderInfoButton_unstable = (state)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.popover, slotProps.popover, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPopover.PopoverTrigger, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root)), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.info, slotProps.info));
+}; //# sourceMappingURL=renderInfoButton.js.map
 
-exports.renderInfoButton_unstable = renderInfoButton_unstable;
 //# sourceMappingURL=renderInfoButton.js.map