@fluentui/react-infobutton 9.0.0-beta.11 → 9.0.0-beta.111

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/CHANGELOG.md +1237 -5
  2. package/README.md +3 -24
  3. package/dist/index.d.ts +115 -9
  4. package/lib/InfoButton.js +1 -2
  5. package/lib/InfoButton.js.map +1 -1
  6. package/lib/InfoLabel.js +1 -0
  7. package/lib/InfoLabel.js.map +1 -0
  8. package/lib/components/InfoButton/DefaultInfoButtonIcons.js +3 -4
  9. package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  10. package/lib/components/InfoButton/InfoButton.js +8 -7
  11. package/lib/components/InfoButton/InfoButton.js.map +1 -1
  12. package/lib/components/InfoButton/InfoButton.types.js +5 -2
  13. package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
  14. package/lib/components/InfoButton/index.js +4 -6
  15. package/lib/components/InfoButton/index.js.map +1 -1
  16. package/lib/components/InfoButton/renderInfoButton.js +14 -16
  17. package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
  18. package/lib/components/InfoButton/useInfoButton.js +71 -50
  19. package/lib/components/InfoButton/useInfoButton.js.map +1 -1
  20. package/lib/components/InfoButton/useInfoButtonStyles.styles.js +181 -0
  21. package/lib/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -0
  22. package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +99 -0
  23. package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
  24. package/lib/components/InfoLabel/InfoLabel.js +15 -0
  25. package/lib/components/InfoLabel/InfoLabel.js.map +1 -0
  26. package/lib/components/InfoLabel/InfoLabel.types.js +5 -0
  27. package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -0
  28. package/lib/components/InfoLabel/index.js +4 -0
  29. package/lib/components/InfoLabel/index.js.map +1 -0
  30. package/lib/components/InfoLabel/renderInfoLabel.js +15 -0
  31. package/lib/components/InfoLabel/renderInfoLabel.js.map +1 -0
  32. package/lib/components/InfoLabel/useInfoLabel.js +80 -0
  33. package/lib/components/InfoLabel/useInfoLabel.js.map +1 -0
  34. package/lib/components/InfoLabel/useInfoLabelStyles.styles.js +50 -0
  35. package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -0
  36. package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +45 -0
  37. package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
  38. package/lib/index.js +2 -2
  39. package/lib/index.js.map +1 -1
  40. package/lib-commonjs/InfoButton.js +26 -6
  41. package/lib-commonjs/InfoButton.js.map +1 -1
  42. package/lib-commonjs/InfoLabel.js +28 -0
  43. package/lib-commonjs/InfoLabel.js.map +1 -0
  44. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js +22 -8
  45. package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
  46. package/lib-commonjs/components/InfoButton/InfoButton.js +18 -16
  47. package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
  48. package/lib-commonjs/components/InfoButton/InfoButton.types.js +6 -4
  49. package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
  50. package/lib-commonjs/components/InfoButton/index.js +29 -10
  51. package/lib-commonjs/components/InfoButton/index.js.map +1 -1
  52. package/lib-commonjs/components/InfoButton/renderInfoButton.js +21 -24
  53. package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
  54. package/lib-commonjs/components/InfoButton/useInfoButton.js +80 -65
  55. package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
  56. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js +350 -0
  57. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -0
  58. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +113 -0
  59. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
  60. package/lib-commonjs/components/InfoLabel/InfoLabel.js +22 -0
  61. package/lib-commonjs/components/InfoLabel/InfoLabel.js.map +1 -0
  62. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js +8 -0
  63. package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -0
  64. package/lib-commonjs/components/InfoLabel/index.js +31 -0
  65. package/lib-commonjs/components/InfoLabel/index.js.map +1 -0
  66. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js +21 -0
  67. package/lib-commonjs/components/InfoLabel/renderInfoLabel.js.map +1 -0
  68. package/lib-commonjs/components/InfoLabel/useInfoLabel.js +81 -0
  69. package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map +1 -0
  70. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js +68 -0
  71. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -0
  72. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +57 -0
  73. package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
  74. package/lib-commonjs/index.js +41 -35
  75. package/lib-commonjs/index.js.map +1 -1
  76. package/package.json +22 -33
  77. package/CHANGELOG.json +0 -342
  78. package/lib/components/InfoButton/useInfoButtonStyles.js +0 -153
  79. package/lib/components/InfoButton/useInfoButtonStyles.js.map +0 -1
  80. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js +0 -160
  81. package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js.map +0 -1
@@ -0,0 +1,181 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */'use client';
2
+
3
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
4
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
5
+ import { __styles, mergeClasses, shorthands } from '@griffel/react';
6
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
7
+ /**
8
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
9
+ */
10
+ export const infoButtonClassNames = {
11
+ root: 'fui-InfoButton',
12
+ // this className won't be used, but it's needed to satisfy the type checker
13
+ popover: 'fui-InfoButton__popover',
14
+ info: 'fui-InfoButton__info'
15
+ };
16
+ /**
17
+ * Styles for the root slot
18
+ *
19
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
20
+ */
21
+ const useButtonStyles = /*#__PURE__*/__styles({
22
+ base: {
23
+ Bt984gj: "f122n59",
24
+ B7ck84d: "f1ewtqcl",
25
+ mc9l5x: "ftuwxu6",
26
+ Brf1p80: "f4d9j23",
27
+ w71qe1: "f1iuv45f",
28
+ ha4doy: "fmrv4ls",
29
+ qhf8xq: "f10pi13n",
30
+ De3pzq: "f1c21dwh",
31
+ sj55zd: "fkfq4zb",
32
+ icvyot: "f1ern45e",
33
+ vrafjx: ["f1n71otn", "f1deefiw"],
34
+ oivjwe: "f1h8hb77",
35
+ wvpqe5: ["f1deefiw", "f1n71otn"],
36
+ Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
37
+ Beyfa6y: ["f16jpd5f", "f1aa9q02"],
38
+ B7oj6ja: ["f1jar5jt", "fyu767a"],
39
+ Btl43ni: ["fyu767a", "f1jar5jt"],
40
+ B6of3ja: "f1hu3pq6",
41
+ t21cq0: ["f11qmguv", "f1tyq0we"],
42
+ jrapky: "f19f4twv",
43
+ Frg6f3: ["f1tyq0we", "f11qmguv"],
44
+ z8tnut: "f1ywm7hm",
45
+ z189sj: ["f7x41pl", "fruq291"],
46
+ Byoj8tv: "f14wxoun",
47
+ uwmqm3: ["fruq291", "f7x41pl"],
48
+ D0sxk3: "f16u1re",
49
+ t6yez3: "f1rw4040",
50
+ Jwef8y: "fjxutwb",
51
+ Bi91k9c: "f139oj5f",
52
+ eoavqd: "f8491dx",
53
+ Bk3fhr4: "f1jpd6y0",
54
+ Bmfj8id: "fuxngvv",
55
+ iro3zm: "fwiml72",
56
+ B2d53fq: "f1fg1p5m"
57
+ },
58
+ selected: {
59
+ De3pzq: "f1q9pm1r",
60
+ sj55zd: "f1qj7y59",
61
+ D0sxk3: "fgzdkf0",
62
+ t6yez3: "f15q0o9g",
63
+ By8wz76: "f1nz3ub2",
64
+ B7iucu3: "f1205bnn"
65
+ },
66
+ highContrast: {
67
+ B7iucu3: "fslfhp6",
68
+ Bfsdueo: "f11s1vgy",
69
+ pb71ee: "f12b7wpn",
70
+ ik86qs: "f1u668rv"
71
+ },
72
+ focusIndicator: {
73
+ Brovlpu: "ftqa4ok",
74
+ B486eqv: "f2hkw1w",
75
+ B8q5s1w: "f8hki3x",
76
+ Bci5o5g: ["f1d2448m", "ffh67wi"],
77
+ n8qw10: "f1bjia2o",
78
+ Bdrgwmp: ["ffh67wi", "f1d2448m"],
79
+ Bqhya38: "f1j6vpng",
80
+ Bwxa6fj: ["f1pniga2", "f1ffjurs"],
81
+ Bdhvstf: "f987i1v",
82
+ B7zbvrb: ["f1ffjurs", "f1pniga2"],
83
+ Bm4h7ae: "f15bsgw9",
84
+ B7ys5i9: "f14e48fq",
85
+ Busjfv9: "f18yb2kv",
86
+ Bhk32uz: "fd6o370",
87
+ f6g5ot: 0,
88
+ Boxcth7: 0,
89
+ Bhdgwq3: 0,
90
+ hgwjuy: 0,
91
+ Bshpdp8: 0,
92
+ Bsom6fd: 0,
93
+ Blkhhs4: 0,
94
+ Bonggc9: 0,
95
+ Ddfuxk: 0,
96
+ i03rao: 0,
97
+ kclons: 0,
98
+ clg4pj: 0,
99
+ Bpqj9nj: 0,
100
+ B6dhp37: 0,
101
+ Bf4ptjt: 0,
102
+ Bqtpl0w: 0,
103
+ i4rwgc: "ffwy5si",
104
+ Dah5zi: 0,
105
+ B1tsrr9: 0,
106
+ qqdqy8: 0,
107
+ Bkh64rk: 0,
108
+ e3fwne: "f3znvyf",
109
+ J0r882: "f57olzd",
110
+ Bule8hv: ["f4stah7", "fs1por5"],
111
+ Bjwuhne: "f480a47",
112
+ Ghsupd: ["fs1por5", "f4stah7"]
113
+ },
114
+ large: {
115
+ z8tnut: "fclwglc",
116
+ z189sj: ["f1w3695s", "f1b0r8ql"],
117
+ Byoj8tv: "fywfov9",
118
+ uwmqm3: ["f1b0r8ql", "f1w3695s"]
119
+ }
120
+ }, {
121
+ d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".ffwy5si[data-fui-focus-visible]::after{border:2px solid var(--colorStrokeFocus2);}", {
122
+ p: -2
123
+ }], [".f3znvyf[data-fui-focus-visible]::after{border-radius:var(--borderRadiusMedium);}", {
124
+ p: -1
125
+ }], ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
126
+ h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f8491dx:hover{cursor:pointer;}", ".f1jpd6y0:hover .fui-Icon-filled{display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
127
+ m: [["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
128
+ m: "(forced-colors: active)"
129
+ }], ["@media (forced-colors: active){.f1205bnn{color:Canvas;}}", {
130
+ m: "(forced-colors: active)"
131
+ }], ["@media (forced-colors: active){.fslfhp6{color:CanvasText;}}", {
132
+ m: "(forced-colors: active)"
133
+ }], ["@media (forced-colors: active){.f11s1vgy:hover,.f11s1vgy:hover:active{forced-color-adjust:none;}}", {
134
+ m: "(forced-colors: active)"
135
+ }], ["@media (forced-colors: active){.f12b7wpn:hover,.f12b7wpn:hover:active{background-color:Highlight;}}", {
136
+ m: "(forced-colors: active)"
137
+ }], ["@media (forced-colors: active){.f1u668rv:hover,.f1u668rv:hover:active{color:Canvas;}}", {
138
+ m: "(forced-colors: active)"
139
+ }], ["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
140
+ m: "(forced-colors: active)"
141
+ }], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
142
+ m: "(forced-colors: active)"
143
+ }], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
144
+ m: "(forced-colors: active)"
145
+ }]],
146
+ f: [".ftqa4ok:focus{outline-style:none;}"],
147
+ i: [".f2hkw1w:focus-visible{outline-style:none;}"]
148
+ });
149
+ const usePopoverSurfaceStyles = /*#__PURE__*/__styles({
150
+ smallMedium: {
151
+ Bahqtrf: "fk6fouc",
152
+ Be2twd7: "fy9rknc",
153
+ Bhrd7zp: "figsok6",
154
+ Bg96gwp: "fwrc4pm"
155
+ },
156
+ large: {
157
+ Bahqtrf: "fk6fouc",
158
+ Be2twd7: "fkhj508",
159
+ Bhrd7zp: "figsok6",
160
+ Bg96gwp: "f1i3iumi"
161
+ }
162
+ }, {
163
+ 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);}"]
164
+ });
165
+ /**
166
+ * Apply styling to the InfoButton slots based on the state
167
+ */
168
+ export const useInfoButtonStyles_unstable = state => {
169
+ const {
170
+ size
171
+ } = state;
172
+ const {
173
+ open
174
+ } = state.popover;
175
+ const buttonStyles = useButtonStyles();
176
+ const popoverSurfaceStyles = usePopoverSurfaceStyles();
177
+ // eslint-disable-next-line react-compiler/react-compiler
178
+ state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
179
+ state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
180
+ return state;
181
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","__styles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","Bt984gj","B7ck84d","mc9l5x","Brf1p80","w71qe1","ha4doy","qhf8xq","De3pzq","sj55zd","icvyot","vrafjx","oivjwe","wvpqe5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B6of3ja","t21cq0","jrapky","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","D0sxk3","t6yez3","Jwef8y","Bi91k9c","eoavqd","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","selected","By8wz76","B7iucu3","highContrast","Bfsdueo","pb71ee","ik86qs","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","large","d","p","h","m","f","i","usePopoverSurfaceStyles","smallMedium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"sources":["useInfoButtonStyles.styles.js"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const infoButtonClassNames = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n info: 'fui-InfoButton__info'\n};\n/**\n * Styles for the root slot\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ const useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderStyle('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.margin(0),\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex'\n },\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n cursor: 'pointer',\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n }\n },\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n },\n focusIndicator: createFocusOutlineStyle(),\n large: {\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)\n }\n});\nconst usePopoverSurfaceStyles = makeStyles({\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1\n});\n/**\n * Apply styling to the InfoButton slots based on the state\n */ export const useInfoButtonStyles_unstable = (state)=>{\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n // eslint-disable-next-line react-compiler/react-compiler\n state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);\n state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,99 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
2
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
3
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
4
+ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
5
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
6
+ /**
7
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
8
+ */ export const infoButtonClassNames = {
9
+ root: 'fui-InfoButton',
10
+ // this className won't be used, but it's needed to satisfy the type checker
11
+ popover: 'fui-InfoButton__popover',
12
+ info: 'fui-InfoButton__info'
13
+ };
14
+ /**
15
+ * Styles for the root slot
16
+ *
17
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
18
+ */ const useButtonStyles = makeStyles({
19
+ base: {
20
+ alignItems: 'center',
21
+ boxSizing: 'border-box',
22
+ display: 'inline-flex',
23
+ justifyContent: 'center',
24
+ textDecorationLine: 'none',
25
+ verticalAlign: 'middle',
26
+ position: 'relative',
27
+ backgroundColor: tokens.colorTransparentBackground,
28
+ color: tokens.colorNeutralForeground2,
29
+ ...shorthands.borderStyle('none'),
30
+ ...shorthands.borderRadius(tokens.borderRadiusMedium),
31
+ ...shorthands.margin(0),
32
+ ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),
33
+ [`& .${iconFilledClassName}`]: {
34
+ display: 'none'
35
+ },
36
+ [`& .${iconRegularClassName}`]: {
37
+ display: 'inline-flex'
38
+ },
39
+ ':hover': {
40
+ backgroundColor: tokens.colorTransparentBackgroundHover,
41
+ color: tokens.colorNeutralForeground2BrandHover,
42
+ cursor: 'pointer',
43
+ [`& .${iconFilledClassName}`]: {
44
+ display: 'inline-flex'
45
+ },
46
+ [`& .${iconRegularClassName}`]: {
47
+ display: 'none'
48
+ }
49
+ },
50
+ ':hover:active': {
51
+ backgroundColor: tokens.colorTransparentBackgroundPressed,
52
+ color: tokens.colorNeutralForeground2BrandPressed
53
+ }
54
+ },
55
+ selected: {
56
+ backgroundColor: tokens.colorTransparentBackgroundSelected,
57
+ color: tokens.colorNeutralForeground2BrandSelected,
58
+ [`& .${iconFilledClassName}`]: {
59
+ display: 'inline-flex'
60
+ },
61
+ [`& .${iconRegularClassName}`]: {
62
+ display: 'none'
63
+ },
64
+ '@media (forced-colors: active)': {
65
+ backgroundColor: 'Highlight',
66
+ color: 'Canvas'
67
+ }
68
+ },
69
+ highContrast: {
70
+ '@media (forced-colors: active)': {
71
+ color: 'CanvasText',
72
+ ':hover,:hover:active': {
73
+ forcedColorAdjust: 'none',
74
+ backgroundColor: 'Highlight',
75
+ color: 'Canvas'
76
+ }
77
+ }
78
+ },
79
+ focusIndicator: createFocusOutlineStyle(),
80
+ large: {
81
+ ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS)
82
+ }
83
+ });
84
+ const usePopoverSurfaceStyles = makeStyles({
85
+ smallMedium: typographyStyles.caption1,
86
+ large: typographyStyles.body1
87
+ });
88
+ /**
89
+ * Apply styling to the InfoButton slots based on the state
90
+ */ export const useInfoButtonStyles_unstable = (state)=>{
91
+ const { size } = state;
92
+ const { open } = state.popover;
93
+ const buttonStyles = useButtonStyles();
94
+ const popoverSurfaceStyles = usePopoverSurfaceStyles();
95
+ // eslint-disable-next-line react-compiler/react-compiler
96
+ state.info.className = mergeClasses(infoButtonClassNames.info, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, state.info.className);
97
+ state.root.className = mergeClasses(infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
98
+ return state;
99
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoButton/useInfoButtonStyles.styles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n ...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 // eslint-disable-next-line react-compiler/react-compiler\n state.info.className = mergeClasses(\n infoButtonClassNames.info,\n size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,\n state.info.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","info","useButtonStyles","base","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","position","backgroundColor","colorTransparentBackground","color","colorNeutralForeground2","borderStyle","borderRadius","borderRadiusMedium","margin","padding","spacingVerticalXS","spacingHorizontalXS","colorTransparentBackgroundHover","colorNeutralForeground2BrandHover","cursor","colorTransparentBackgroundPressed","colorNeutralForeground2BrandPressed","selected","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","highContrast","forcedColorAdjust","focusIndicator","large","spacingVerticalXXS","usePopoverSurfaceStyles","smallMedium","caption1","body1","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className"],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
2
+ import * as React from 'react';
3
+ import { renderInfoLabel_unstable } from './renderInfoLabel';
4
+ import { useInfoLabel_unstable } from './useInfoLabel';
5
+ import { useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
6
+ /**
7
+ * InfoLabel component
8
+ *
9
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
10
+ */ export const InfoLabel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
11
+ const state = useInfoLabel_unstable(props, ref);
12
+ useInfoLabelStyles_unstable(state);
13
+ return renderInfoLabel_unstable(state);
14
+ });
15
+ InfoLabel.displayName = 'InfoLabel';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * 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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const InfoLabel: ForwardRefComponent<InfoLabelProps> = React.forwardRef((props, ref) => {\n const state = useInfoLabel_unstable(props, ref);\n\n useInfoLabelStyles_unstable(state);\n return renderInfoLabel_unstable(state);\n});\n\nInfoLabel.displayName = 'InfoLabel';\n"],"names":["React","renderInfoLabel_unstable","useInfoLabel_unstable","useInfoLabelStyles_unstable","InfoLabel","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E;;;;CAIC,GACD,OAAO,MAAMC,0BAAiDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQN,sBAAsBI,OAAOC;IAE3CJ,4BAA4BK;IAC5B,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
@@ -0,0 +1,5 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ /**
2
+ * State used in rendering InfoLabel
3
+ *
4
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
5
+ */ export { };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/InfoLabel.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { Label } from '@fluentui/react-label';\nimport { InfoButton } from '../InfoButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InfoButtonProps } from '../InfoButton';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport type InfoLabelState = ComponentState<InfoLabelSlots> & Pick<InfoLabelProps, 'size'>;\n"],"names":[],"mappings":"AAAA,mDAAmD,GA2CnD;;;;CAIC,GACD,WAA2F"}
@@ -0,0 +1,4 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ export { InfoLabel } from './InfoLabel';
2
+ export { renderInfoLabel_unstable } from './renderInfoLabel';
3
+ export { useInfoLabel_unstable } from './useInfoLabel';
4
+ export { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport { InfoLabel } from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\nexport { renderInfoLabel_unstable } from './renderInfoLabel';\nexport { useInfoLabel_unstable } from './useInfoLabel';\nexport { infoLabelClassNames, useInfoLabelStyles_unstable } from './useInfoLabelStyles.styles';\n"],"names":["InfoLabel","renderInfoLabel_unstable","useInfoLabel_unstable","infoLabelClassNames","useInfoLabelStyles_unstable"],"mappings":"AAAA,mDAAmD,GACnD,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}
@@ -0,0 +1,15 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
+ import { assertSlots } from '@fluentui/react-utilities';
3
+ /**
4
+ * Render the final JSX of InfoLabel
5
+ *
6
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
7
+ */ export const renderInfoLabel_unstable = (state)=>{
8
+ assertSlots(state);
9
+ return /*#__PURE__*/ _jsxs(state.root, {
10
+ children: [
11
+ /*#__PURE__*/ _jsx(state.label, {}),
12
+ state.infoButton && /*#__PURE__*/ _jsx(state.infoButton, {})
13
+ ]
14
+ });
15
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/renderInfoLabel.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport type * as React from 'react';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Render the final JSX of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const renderInfoLabel_unstable = (state: InfoLabelState): React.ReactElement => {\n assertSlots<InfoLabelSlots>(state);\n\n return (\n <state.root>\n <state.label />\n {state.infoButton && <state.infoButton />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderInfoLabel_unstable","state","root","label","infoButton"],"mappings":"AAAA,mDAAmD,GACnD,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;;;AAG5C,EAAE"}
@@ -0,0 +1,80 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
2
+ import * as React from 'react';
3
+ import { Label } from '@fluentui/react-label';
4
+ import { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';
5
+ import { InfoButton } from '../InfoButton/InfoButton';
6
+ /**
7
+ * Create the state required to render InfoLabel.
8
+ *
9
+ * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,
10
+ * before being passed to renderInfoLabel_unstable.
11
+ *
12
+ * @param props - props from this instance of InfoLabel
13
+ * @param ref - reference to label element of InfoLabel
14
+ *
15
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
16
+ */ export const useInfoLabel_unstable = (props, ref)=>{
17
+ const { root: rootShorthand, label: labelShorthand, infoButton: infoButtonShorthand, info, size, className, style, ...labelProps } = props;
18
+ const baseId = useId('infolabel-');
19
+ const [open, setOpen] = React.useState(false);
20
+ const root = slot.always(rootShorthand, {
21
+ defaultProps: {
22
+ className,
23
+ style
24
+ },
25
+ elementType: 'span'
26
+ });
27
+ const label = slot.always(labelShorthand, {
28
+ defaultProps: {
29
+ id: baseId + '__label',
30
+ ref,
31
+ size,
32
+ ...labelProps
33
+ },
34
+ elementType: Label
35
+ });
36
+ const infoButton = slot.optional(infoButtonShorthand, {
37
+ renderByDefault: !!info,
38
+ defaultProps: {
39
+ id: baseId + '__infoButton',
40
+ size,
41
+ info
42
+ },
43
+ elementType: InfoButton
44
+ });
45
+ const infoButtonPopover = slot.always(infoButton === null || infoButton === void 0 ? void 0 : infoButton.popover, {
46
+ elementType: 'div'
47
+ });
48
+ infoButtonPopover.onOpenChange = useEventCallback(mergeCallbacks(infoButtonPopover.onOpenChange, (e, data)=>{
49
+ setOpen(data.open);
50
+ }));
51
+ if (infoButton) {
52
+ var _infoButton, _arialabelledby;
53
+ infoButton.popover = infoButtonPopover;
54
+ infoButton.info = slot.optional(infoButton === null || infoButton === void 0 ? void 0 : infoButton.info, {
55
+ defaultProps: {
56
+ id: baseId + '__info'
57
+ },
58
+ elementType: 'div'
59
+ });
60
+ var _;
61
+ (_ = (_infoButton = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton[_arialabelledby] = `${label.id} ${infoButton.id}`;
62
+ if (open) {
63
+ var _infoButton_info;
64
+ var _root, _ariaowns;
65
+ var _1;
66
+ (_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;
67
+ }
68
+ }
69
+ return {
70
+ size,
71
+ components: {
72
+ root: 'span',
73
+ label: Label,
74
+ infoButton: InfoButton
75
+ },
76
+ root,
77
+ label,
78
+ infoButton
79
+ };
80
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: baseId + '__info',\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","components"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,SAASjB,MAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,MAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,KAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,KAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B;IACf;IAEA,MAAMa,aAAaT,KAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB;IACf;IAEA,MAAMyB,oBAAoB1B,KAAKoB,MAAM,CAACX,uBAAAA,iCAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,GAAG9B,iBAC/BD,eAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YASdA,aAAW;QARXA,WAAWkB,OAAO,GAAGD;QACrBjB,WAAWE,IAAI,GAAGX,KAAKwB,QAAQ,CAACf,uBAAAA,iCAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIP,SAAS;YACf;YACAM,aAAa;QACf;;QAEAb,MAAAA,cAAAA,WAAU,CAAC,kBAAA,kBAAkB,iCAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,OAAAA,QAAAA,KAAI,CAAC,YAAA,YAAY,mCAAjBA,KAAI,CAAC,UAAY,IAAKI,mBAAAA,WAAWE,IAAI,cAAfF,uCAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAmB,YAAY;YACV1B,MAAM;YACNE,OAAOX;YACPa,YAAYR;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
@@ -0,0 +1,50 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */'use client';
2
+
3
+ import { tokens } from '@fluentui/react-theme';
4
+ import { __styles, mergeClasses } from '@griffel/react';
5
+ /**
6
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
7
+ */
8
+ export const infoLabelClassNames = {
9
+ root: 'fui-InfoLabel',
10
+ label: 'fui-InfoLabel__label',
11
+ infoButton: 'fui-InfoLabel__infoButton'
12
+ };
13
+ const useLabelStyles = /*#__PURE__*/__styles({
14
+ base: {
15
+ ha4doy: "f12kltsn",
16
+ Bceei9c: "fpo1scq",
17
+ sj55zd: "f1ym3bx4"
18
+ }
19
+ }, {
20
+ d: [".f12kltsn{vertical-align:top;}", ".fpo1scq{cursor:inherit;}", ".f1ym3bx4{color:inherit;}"]
21
+ });
22
+ const useInfoButtonStyles = /*#__PURE__*/__styles({
23
+ base: {
24
+ ha4doy: "f12kltsn",
25
+ B6of3ja: "f1bmzb36",
26
+ jrapky: "f1nyzk09"
27
+ },
28
+ large: {
29
+ B6of3ja: "fkrn0sh",
30
+ jrapky: "fmxx68s"
31
+ }
32
+ }, {
33
+ 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;}"]
34
+ });
35
+ /**
36
+ * Apply styling to the InfoLabel slots based on the state
37
+ *
38
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
39
+ */
40
+ export const useInfoLabelStyles_unstable = state => {
41
+ // eslint-disable-next-line react-compiler/react-compiler
42
+ state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
43
+ const labelStyles = useLabelStyles();
44
+ state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
45
+ const infoButtonStyles = useInfoButtonStyles();
46
+ if (state.infoButton) {
47
+ state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
48
+ }
49
+ return state;
50
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const infoLabelClassNames = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit'\n }\n});\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n },\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px'\n }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const useInfoLabelStyles_unstable = (state)=>{\n // eslint-disable-next-line react-compiler/react-compiler\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n }\n return state;\n};\n"],"mappings":"AAAA,qDAAsD,YAAY;;AAClE,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,IAAI,EAAE,eAAe;EACrBC,KAAK,EAAE,sBAAsB;EAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAK,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAY3B,CAAC;AACF;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMK,2BAA2B,GAAIC,KAAK,IAAG;EACpD;EACAA,KAAK,CAACd,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;EACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;EACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;EACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;EAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;IAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,GAAGjB,YAAY,CAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;EAClL;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -0,0 +1,45 @@
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ import { makeStyles, mergeClasses } from '@griffel/react';
4
+ /**
5
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
6
+ */ export const infoLabelClassNames = {
7
+ root: 'fui-InfoLabel',
8
+ label: 'fui-InfoLabel__label',
9
+ infoButton: 'fui-InfoLabel__infoButton'
10
+ };
11
+ const useLabelStyles = makeStyles({
12
+ base: {
13
+ verticalAlign: 'top',
14
+ cursor: 'inherit',
15
+ color: 'inherit'
16
+ }
17
+ });
18
+ const useInfoButtonStyles = makeStyles({
19
+ base: {
20
+ verticalAlign: 'top',
21
+ // Negative margin to align with the text
22
+ marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,
23
+ marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`
24
+ },
25
+ large: {
26
+ // Negative margin to align with the text
27
+ marginTop: '-1px',
28
+ marginBottom: '-1px'
29
+ }
30
+ });
31
+ /**
32
+ * Apply styling to the InfoLabel slots based on the state
33
+ *
34
+ * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\@fluentui/react-components` or `\@fluentui/react-infolabel` instead
35
+ */ export const useInfoLabelStyles_unstable = (state)=>{
36
+ // eslint-disable-next-line react-compiler/react-compiler
37
+ state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);
38
+ const labelStyles = useLabelStyles();
39
+ state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);
40
+ const infoButtonStyles = useInfoButtonStyles();
41
+ if (state.infoButton) {
42
+ state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
43
+ }
44
+ return state;
45
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\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 *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n // eslint-disable-next-line react-compiler/react-compiler\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(\n infoLabelClassNames.infoButton,\n infoButtonStyles.base,\n state.size === 'large' && infoButtonStyles.large,\n state.infoButton.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA,mDAAmD,GAEnD;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D;;CAEC,GACD,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,iBAAiBN,WAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,OAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,OAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAME,8BAA8B,CAACC;IAC1C,yDAAyD;IACzDA,MAAMd,IAAI,CAACe,SAAS,GAAGjB,aAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,GAAGjB,aAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,GAAGjB,aAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './InfoButton';
2
- //# sourceMappingURL=index.js.map
1
+ /* eslint-disable @typescript-eslint/no-deprecated */ export { InfoButton, infoButtonClassNames, renderInfoButton_unstable, useInfoButtonStyles_unstable, useInfoButton_unstable } from './InfoButton';
2
+ export { InfoLabel, infoLabelClassNames, renderInfoLabel_unstable, useInfoLabelStyles_unstable, useInfoLabel_unstable } from './InfoLabel';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc","names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\n"]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport {\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"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":"AAAA,mDAAmD,GACnD,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc"}