@fluentui/react-combobox 9.0.0-beta.19 → 9.0.0-beta.21

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 (166) hide show
  1. package/CHANGELOG.json +117 -1
  2. package/CHANGELOG.md +32 -2
  3. package/lib/components/Combobox/Combobox.js +0 -1
  4. package/lib/components/Combobox/Combobox.js.map +1 -1
  5. package/lib/components/Combobox/renderCombobox.js +10 -6
  6. package/lib/components/Combobox/renderCombobox.js.map +1 -1
  7. package/lib/components/Combobox/useCombobox.js +41 -53
  8. package/lib/components/Combobox/useCombobox.js.map +1 -1
  9. package/lib/components/Combobox/useComboboxStyles.js +209 -217
  10. package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
  11. package/lib/components/ComboboxField/ComboboxField.js.map +1 -1
  12. package/lib/components/Dropdown/Dropdown.js +0 -1
  13. package/lib/components/Dropdown/Dropdown.js.map +1 -1
  14. package/lib/components/Dropdown/renderDropdown.js +10 -6
  15. package/lib/components/Dropdown/renderDropdown.js.map +1 -1
  16. package/lib/components/Dropdown/useDropdown.js +20 -32
  17. package/lib/components/Dropdown/useDropdown.js.map +1 -1
  18. package/lib/components/Dropdown/useDropdownStyles.js +199 -206
  19. package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
  20. package/lib/components/Listbox/Listbox.js +0 -1
  21. package/lib/components/Listbox/Listbox.js.map +1 -1
  22. package/lib/components/Listbox/renderListbox.js +2 -2
  23. package/lib/components/Listbox/renderListbox.js.map +1 -1
  24. package/lib/components/Listbox/useListbox.js +6 -13
  25. package/lib/components/Listbox/useListbox.js.map +1 -1
  26. package/lib/components/Listbox/useListboxStyles.js +18 -21
  27. package/lib/components/Listbox/useListboxStyles.js.map +1 -1
  28. package/lib/components/Option/Option.js +0 -1
  29. package/lib/components/Option/Option.js.map +1 -1
  30. package/lib/components/Option/renderOption.js +4 -3
  31. package/lib/components/Option/renderOption.js.map +1 -1
  32. package/lib/components/Option/useOption.js +20 -32
  33. package/lib/components/Option/useOption.js.map +1 -1
  34. package/lib/components/Option/useOptionStyles.js +74 -79
  35. package/lib/components/Option/useOptionStyles.js.map +1 -1
  36. package/lib/components/OptionGroup/OptionGroup.js +0 -1
  37. package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
  38. package/lib/components/OptionGroup/renderOptionGroup.js +4 -3
  39. package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
  40. package/lib/components/OptionGroup/useOptionGroup.js +0 -1
  41. package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
  42. package/lib/components/OptionGroup/useOptionGroupStyles.js +29 -34
  43. package/lib/components/OptionGroup/useOptionGroupStyles.js.map +1 -1
  44. package/lib/contexts/ComboboxContext.js +8 -11
  45. package/lib/contexts/ComboboxContext.js.map +1 -1
  46. package/lib/contexts/ListboxContext.js +6 -9
  47. package/lib/contexts/ListboxContext.js.map +1 -1
  48. package/lib/contexts/useComboboxContextValues.js.map +1 -1
  49. package/lib/contexts/useListboxContextValues.js +2 -2
  50. package/lib/contexts/useListboxContextValues.js.map +1 -1
  51. package/lib/index.js.map +1 -1
  52. package/lib/utils/dropdownKeyActions.js +12 -33
  53. package/lib/utils/dropdownKeyActions.js.map +1 -1
  54. package/lib/utils/internalTokens.js.map +1 -1
  55. package/lib/utils/useComboboxBaseState.js +23 -27
  56. package/lib/utils/useComboboxBaseState.js.map +1 -1
  57. package/lib/utils/useComboboxPopup.js +6 -4
  58. package/lib/utils/useComboboxPopup.js.map +1 -1
  59. package/lib/utils/useOptionCollection.js +10 -20
  60. package/lib/utils/useOptionCollection.js.map +1 -1
  61. package/lib/utils/useScrollOptionsIntoView.js +2 -5
  62. package/lib/utils/useScrollOptionsIntoView.js.map +1 -1
  63. package/lib/utils/useSelection.js +7 -12
  64. package/lib/utils/useSelection.js.map +1 -1
  65. package/lib/utils/useTriggerListboxSlots.js +31 -39
  66. package/lib/utils/useTriggerListboxSlots.js.map +1 -1
  67. package/lib-commonjs/Combobox.js +0 -2
  68. package/lib-commonjs/Combobox.js.map +1 -1
  69. package/lib-commonjs/ComboboxField.js +0 -2
  70. package/lib-commonjs/ComboboxField.js.map +1 -1
  71. package/lib-commonjs/Dropdown.js +0 -2
  72. package/lib-commonjs/Dropdown.js.map +1 -1
  73. package/lib-commonjs/Listbox.js +0 -2
  74. package/lib-commonjs/Listbox.js.map +1 -1
  75. package/lib-commonjs/Option.js +0 -2
  76. package/lib-commonjs/Option.js.map +1 -1
  77. package/lib-commonjs/OptionGroup.js +0 -2
  78. package/lib-commonjs/OptionGroup.js.map +1 -1
  79. package/lib-commonjs/components/Combobox/Combobox.js +0 -7
  80. package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
  81. package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
  82. package/lib-commonjs/components/Combobox/index.js +0 -6
  83. package/lib-commonjs/components/Combobox/index.js.map +1 -1
  84. package/lib-commonjs/components/Combobox/renderCombobox.js +10 -12
  85. package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
  86. package/lib-commonjs/components/Combobox/useCombobox.js +41 -63
  87. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  88. package/lib-commonjs/components/Combobox/useComboboxStyles.js +209 -222
  89. package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
  90. package/lib-commonjs/components/ComboboxField/ComboboxField.js +0 -4
  91. package/lib-commonjs/components/ComboboxField/ComboboxField.js.map +1 -1
  92. package/lib-commonjs/components/ComboboxField/index.js +0 -2
  93. package/lib-commonjs/components/ComboboxField/index.js.map +1 -1
  94. package/lib-commonjs/components/Dropdown/Dropdown.js +0 -7
  95. package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
  96. package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
  97. package/lib-commonjs/components/Dropdown/index.js +0 -6
  98. package/lib-commonjs/components/Dropdown/index.js.map +1 -1
  99. package/lib-commonjs/components/Dropdown/renderDropdown.js +10 -12
  100. package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
  101. package/lib-commonjs/components/Dropdown/useDropdown.js +20 -43
  102. package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
  103. package/lib-commonjs/components/Dropdown/useDropdownStyles.js +199 -211
  104. package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
  105. package/lib-commonjs/components/Listbox/Listbox.js +0 -7
  106. package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
  107. package/lib-commonjs/components/Listbox/Listbox.types.js.map +1 -1
  108. package/lib-commonjs/components/Listbox/index.js +0 -6
  109. package/lib-commonjs/components/Listbox/index.js.map +1 -1
  110. package/lib-commonjs/components/Listbox/renderListbox.js +2 -7
  111. package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
  112. package/lib-commonjs/components/Listbox/useListbox.js +6 -23
  113. package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
  114. package/lib-commonjs/components/Listbox/useListboxStyles.js +18 -25
  115. package/lib-commonjs/components/Listbox/useListboxStyles.js.map +1 -1
  116. package/lib-commonjs/components/Option/Option.js +0 -6
  117. package/lib-commonjs/components/Option/Option.js.map +1 -1
  118. package/lib-commonjs/components/Option/Option.types.js.map +1 -1
  119. package/lib-commonjs/components/Option/index.js +0 -6
  120. package/lib-commonjs/components/Option/index.js.map +1 -1
  121. package/lib-commonjs/components/Option/renderOption.js +4 -7
  122. package/lib-commonjs/components/Option/renderOption.js.map +1 -1
  123. package/lib-commonjs/components/Option/useOption.js +20 -39
  124. package/lib-commonjs/components/Option/useOption.js.map +1 -1
  125. package/lib-commonjs/components/Option/useOptionStyles.js +74 -83
  126. package/lib-commonjs/components/Option/useOptionStyles.js.map +1 -1
  127. package/lib-commonjs/components/OptionGroup/OptionGroup.js +0 -6
  128. package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
  129. package/lib-commonjs/components/OptionGroup/OptionGroup.types.js.map +1 -1
  130. package/lib-commonjs/components/OptionGroup/index.js +0 -6
  131. package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
  132. package/lib-commonjs/components/OptionGroup/renderOptionGroup.js +4 -7
  133. package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
  134. package/lib-commonjs/components/OptionGroup/useOptionGroup.js +0 -4
  135. package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
  136. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.js +29 -38
  137. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.js.map +1 -1
  138. package/lib-commonjs/contexts/ComboboxContext.js +8 -13
  139. package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
  140. package/lib-commonjs/contexts/ListboxContext.js +6 -11
  141. package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
  142. package/lib-commonjs/contexts/useComboboxContextValues.js +0 -2
  143. package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
  144. package/lib-commonjs/contexts/useListboxContextValues.js +2 -6
  145. package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
  146. package/lib-commonjs/index.js +0 -20
  147. package/lib-commonjs/index.js.map +1 -1
  148. package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
  149. package/lib-commonjs/utils/OptionCollection.types.js.map +1 -1
  150. package/lib-commonjs/utils/Selection.types.js.map +1 -1
  151. package/lib-commonjs/utils/dropdownKeyActions.js +12 -37
  152. package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
  153. package/lib-commonjs/utils/internalTokens.js.map +1 -1
  154. package/lib-commonjs/utils/useComboboxBaseState.js +23 -33
  155. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  156. package/lib-commonjs/utils/useComboboxPopup.js +6 -8
  157. package/lib-commonjs/utils/useComboboxPopup.js.map +1 -1
  158. package/lib-commonjs/utils/useOptionCollection.js +10 -23
  159. package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
  160. package/lib-commonjs/utils/useScrollOptionsIntoView.js +2 -9
  161. package/lib-commonjs/utils/useScrollOptionsIntoView.js.map +1 -1
  162. package/lib-commonjs/utils/useSelection.js +7 -15
  163. package/lib-commonjs/utils/useSelection.js.map +1 -1
  164. package/lib-commonjs/utils/useTriggerListboxSlots.js +30 -43
  165. package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
  166. package/package.json +9 -9
package/lib/components/Dropdown/useDropdownStyles.js CHANGED
@@ -10,248 +10,244 @@ export const dropdownClassNames = {
10
10
  /**
11
11
  * Styles for Dropdown
12
12
  */
13
-
14
13
  const useStyles = /*#__PURE__*/__styles({
15
- "root": {
16
- "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
17
- "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
18
- "B7oj6ja": ["f1jar5jt", "fyu767a"],
19
- "Btl43ni": ["fyu767a", "f1jar5jt"],
20
- "B7ck84d": "f1ewtqcl",
21
- "mc9l5x": "f14t3ns0",
22
- "Bf4jedk": "f1exfvgq",
23
- "qhf8xq": "f10pi13n",
24
- "Bbr2w1p": "f14a1fxs",
25
- "Bduesf4": "f3e99gv",
26
- "Bpq79vn": "fhljsf7",
27
- "li1rpt": "f1gw3sf2",
28
- "Bsft5z2": "f13zj6fq",
29
- "E3zdtr": "f1mdlcz9",
30
- "Eqx8gd": ["f1a7op3", "f1cjjd47"],
31
- "By385i5": "f1gboi2j",
32
- "B1piin3": ["f1cjjd47", "f1a7op3"],
33
- "Dlnsje": "ffyw7fx",
34
- "d9w3h3": ["f1kp91vd", "f1ibwz09"],
35
- "B3778ie": ["f1ibwz09", "f1kp91vd"],
36
- "Bcgy8vk": "f14pi962",
37
- "Bw17bha": "f1lh990p",
38
- "B1q35kw": "f1jc6hxc",
39
- "Gjdm7m": "f13evtba",
40
- "b1kco5": "f1yk9hq",
41
- "Ba2ppi3": "fhwpy7i",
42
- "F2fol1": "f14ee0xe",
43
- "lck23g": "f1xhbsuh",
44
- "df92cz": "fv8e3ye",
45
- "I188md": "ftb5wc6",
46
- "umuwi5": "fjw5xc1",
47
- "Blcqepd": "f1xdyd5c",
48
- "nplu4u": "fatpbeo",
49
- "Bioka5o": "fb7uyps",
50
- "H713fs": "f1cmft4k",
51
- "B9ooomg": "f1x58t8o",
52
- "Bercvud": "f1ibeo51"
14
+ root: {
15
+ Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
16
+ Beyfa6y: ["f16jpd5f", "f1aa9q02"],
17
+ B7oj6ja: ["f1jar5jt", "fyu767a"],
18
+ Btl43ni: ["fyu767a", "f1jar5jt"],
19
+ B7ck84d: "f1ewtqcl",
20
+ mc9l5x: "f14t3ns0",
21
+ Bf4jedk: "f1exfvgq",
22
+ qhf8xq: "f10pi13n",
23
+ Bbr2w1p: "f14a1fxs",
24
+ Bduesf4: "f3e99gv",
25
+ Bpq79vn: "fhljsf7",
26
+ li1rpt: "f1gw3sf2",
27
+ Bsft5z2: "f13zj6fq",
28
+ E3zdtr: "f1mdlcz9",
29
+ Eqx8gd: ["f1a7op3", "f1cjjd47"],
30
+ By385i5: "f1gboi2j",
31
+ B1piin3: ["f1cjjd47", "f1a7op3"],
32
+ Dlnsje: "ffyw7fx",
33
+ d9w3h3: ["f1kp91vd", "f1ibwz09"],
34
+ B3778ie: ["f1ibwz09", "f1kp91vd"],
35
+ Bcgy8vk: "f14pi962",
36
+ Bw17bha: "f1lh990p",
37
+ B1q35kw: "f1jc6hxc",
38
+ Gjdm7m: "f13evtba",
39
+ b1kco5: "f1yk9hq",
40
+ Ba2ppi3: "fhwpy7i",
41
+ F2fol1: "f14ee0xe",
42
+ lck23g: "f1xhbsuh",
43
+ df92cz: "fv8e3ye",
44
+ I188md: "ftb5wc6",
45
+ umuwi5: "fjw5xc1",
46
+ Blcqepd: "f1xdyd5c",
47
+ nplu4u: "fatpbeo",
48
+ Bioka5o: "fb7uyps",
49
+ H713fs: "f1cmft4k",
50
+ B9ooomg: "f1x58t8o",
51
+ Bercvud: "f1ibeo51"
53
52
  },
54
- "listbox": {},
55
- "listboxCollapsed": {
56
- "mc9l5x": "fjseox"
53
+ listbox: {},
54
+ listboxCollapsed: {
55
+ mc9l5x: "fjseox"
57
56
  },
58
- "button": {
59
- "Bt984gj": "f122n59",
60
- "De3pzq": "f1c21dwh",
61
- "B4j52fo": "fre7gi1",
62
- "Bekrc4i": ["f1358rze", "f1rvrf73"],
63
- "Bn0qgzm": "fqdk4by",
64
- "ibv6hh": ["f1rvrf73", "f1358rze"],
65
- "B7ck84d": "f1ewtqcl",
66
- "sj55zd": "f19n0e5",
67
- "i8kkvl": "f14mj54c",
68
- "Bceei9c": "f1k6fduh",
69
- "mc9l5x": "f13qh94s",
70
- "Bahqtrf": "fk6fouc",
71
- "Budl1dq": "f12nh0o2",
72
- "Brf1p80": "f1869bpl",
73
- "fsow6f": ["f1o700av", "fes3tcz"],
74
- "a9b677": "fly5x3f",
75
- "Brovlpu": "ftqa4ok"
57
+ button: {
58
+ Bt984gj: "f122n59",
59
+ De3pzq: "f1c21dwh",
60
+ B4j52fo: "fre7gi1",
61
+ Bekrc4i: ["f1358rze", "f1rvrf73"],
62
+ Bn0qgzm: "fqdk4by",
63
+ ibv6hh: ["f1rvrf73", "f1358rze"],
64
+ B7ck84d: "f1ewtqcl",
65
+ sj55zd: "f19n0e5",
66
+ i8kkvl: "f14mj54c",
67
+ Bceei9c: "f1k6fduh",
68
+ mc9l5x: "f13qh94s",
69
+ Bahqtrf: "fk6fouc",
70
+ Budl1dq: "f12nh0o2",
71
+ Brf1p80: "f1869bpl",
72
+ fsow6f: ["f1o700av", "fes3tcz"],
73
+ a9b677: "fly5x3f",
74
+ Brovlpu: "ftqa4ok"
76
75
  },
77
- "placeholder": {
78
- "sj55zd": "fxc4j92"
76
+ placeholder: {
77
+ sj55zd: "fxc4j92"
79
78
  },
80
- "small": {
81
- "Bahqtrf": "fk6fouc",
82
- "Be2twd7": "fy9rknc",
83
- "Bhrd7zp": "figsok6",
84
- "Bg96gwp": "fwrc4pm",
85
- "z8tnut": "f1khb0e9",
86
- "z189sj": ["fdw0yi8", "fk8j09s"],
87
- "Byoj8tv": "f1jnq6q7",
88
- "uwmqm3": ["f1xile11", "fqznh8f"]
79
+ small: {
80
+ Bahqtrf: "fk6fouc",
81
+ Be2twd7: "fy9rknc",
82
+ Bhrd7zp: "figsok6",
83
+ Bg96gwp: "fwrc4pm",
84
+ z8tnut: "f1khb0e9",
85
+ z189sj: ["fdw0yi8", "fk8j09s"],
86
+ Byoj8tv: "f1jnq6q7",
87
+ uwmqm3: ["f1xile11", "fqznh8f"]
89
88
  },
90
- "medium": {
91
- "Bahqtrf": "fk6fouc",
92
- "Be2twd7": "fkhj508",
93
- "Bhrd7zp": "figsok6",
94
- "Bg96gwp": "f1i3iumi",
95
- "z8tnut": "f1sbtcvk",
96
- "z189sj": ["f11gcy0p", "f1ng84yb"],
97
- "Byoj8tv": "fdghr9",
98
- "uwmqm3": ["f1e60jzv", "f135dnwl"]
89
+ medium: {
90
+ Bahqtrf: "fk6fouc",
91
+ Be2twd7: "fkhj508",
92
+ Bhrd7zp: "figsok6",
93
+ Bg96gwp: "f1i3iumi",
94
+ z8tnut: "f1sbtcvk",
95
+ z189sj: ["f11gcy0p", "f1ng84yb"],
96
+ Byoj8tv: "fdghr9",
97
+ uwmqm3: ["f1e60jzv", "f135dnwl"]
99
98
  },
100
- "large": {
101
- "i8kkvl": "f1rjii52",
102
- "Bahqtrf": "fk6fouc",
103
- "Be2twd7": "fod5ikn",
104
- "Bhrd7zp": "figsok6",
105
- "Bg96gwp": "faaz57k",
106
- "z8tnut": "f1a1bwwz",
107
- "z189sj": ["fw5db7e", "f1uw59to"],
108
- "Byoj8tv": "fy7v416",
109
- "uwmqm3": ["fnphzt9", "flt1dlf"]
99
+ large: {
100
+ i8kkvl: "f1rjii52",
101
+ Bahqtrf: "fk6fouc",
102
+ Be2twd7: "fod5ikn",
103
+ Bhrd7zp: "figsok6",
104
+ Bg96gwp: "faaz57k",
105
+ z8tnut: "f1a1bwwz",
106
+ z189sj: ["fw5db7e", "f1uw59to"],
107
+ Byoj8tv: "fy7v416",
108
+ uwmqm3: ["fnphzt9", "flt1dlf"]
110
109
  },
111
- "outline": {
112
- "De3pzq": "fxugw4r",
113
- "B4j52fo": "f192inf7",
114
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
115
- "Bn0qgzm": "f1vxd6vx",
116
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
117
- "icvyot": "fzkkow9",
118
- "vrafjx": ["fcdblym", "fjik90z"],
119
- "oivjwe": "fg706s2",
120
- "wvpqe5": ["fjik90z", "fcdblym"],
121
- "g2u3we": "fj3muxo",
122
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
123
- "B9xav0g": "f1c1zstj",
124
- "zhjwy3": ["f1lxtadh", "f1akhkt"]
110
+ outline: {
111
+ De3pzq: "fxugw4r",
112
+ B4j52fo: "f192inf7",
113
+ Bekrc4i: ["f5tn483", "f1ojsxk5"],
114
+ Bn0qgzm: "f1vxd6vx",
115
+ ibv6hh: ["f1ojsxk5", "f5tn483"],
116
+ icvyot: "fzkkow9",
117
+ vrafjx: ["fcdblym", "fjik90z"],
118
+ oivjwe: "fg706s2",
119
+ wvpqe5: ["fjik90z", "fcdblym"],
120
+ g2u3we: "fj3muxo",
121
+ h3c5rm: ["f1akhkt", "f1lxtadh"],
122
+ B9xav0g: "f1c1zstj",
123
+ zhjwy3: ["f1lxtadh", "f1akhkt"]
125
124
  },
126
- "outlineInteractive": {
127
- "Bgoe8wy": "fvcxoqz",
128
- "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
129
- "oetu4i": "flmw63s",
130
- "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
131
- "B6oc9vd": "fvs00aa",
132
- "ak43y8": ["f1assf6x", "f4ruux4"],
133
- "wmxk5l": "fqhmt4z",
134
- "B50zh58": ["f4ruux4", "f1assf6x"]
125
+ outlineInteractive: {
126
+ Bgoe8wy: "fvcxoqz",
127
+ Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
128
+ oetu4i: "flmw63s",
129
+ gg5e9n: ["f1m52nbi", "f1ub3y4t"],
130
+ B6oc9vd: "fvs00aa",
131
+ ak43y8: ["f1assf6x", "f4ruux4"],
132
+ wmxk5l: "fqhmt4z",
133
+ B50zh58: ["f4ruux4", "f1assf6x"]
135
134
  },
136
- "underline": {
137
- "De3pzq": "f1c21dwh",
138
- "Bn0qgzm": "f1vxd6vx",
139
- "oivjwe": "fg706s2",
140
- "B9xav0g": "f1c1zstj",
141
- "Bbmb7ep": ["f1krrbdw", "f1deotkl"],
142
- "Beyfa6y": ["f1deotkl", "f1krrbdw"],
143
- "B7oj6ja": ["f10ostut", "f1ozlkrg"],
144
- "Btl43ni": ["f1ozlkrg", "f10ostut"]
135
+ underline: {
136
+ De3pzq: "f1c21dwh",
137
+ Bn0qgzm: "f1vxd6vx",
138
+ oivjwe: "fg706s2",
139
+ B9xav0g: "f1c1zstj",
140
+ Bbmb7ep: ["f1krrbdw", "f1deotkl"],
141
+ Beyfa6y: ["f1deotkl", "f1krrbdw"],
142
+ B7oj6ja: ["f10ostut", "f1ozlkrg"],
143
+ Btl43ni: ["f1ozlkrg", "f10ostut"]
145
144
  },
146
145
  "filled-lighter": {
147
- "De3pzq": "fxugw4r",
148
- "B4j52fo": "f192inf7",
149
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
150
- "Bn0qgzm": "f1vxd6vx",
151
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
152
- "icvyot": "fzkkow9",
153
- "vrafjx": ["fcdblym", "fjik90z"],
154
- "oivjwe": "fg706s2",
155
- "wvpqe5": ["fjik90z", "fcdblym"],
156
- "g2u3we": "f1p3nwhy",
157
- "h3c5rm": ["f11589ue", "f1pdflbu"],
158
- "B9xav0g": "f1q5o8ev",
159
- "zhjwy3": ["f1pdflbu", "f11589ue"]
146
+ De3pzq: "fxugw4r",
147
+ B4j52fo: "f192inf7",
148
+ Bekrc4i: ["f5tn483", "f1ojsxk5"],
149
+ Bn0qgzm: "f1vxd6vx",
150
+ ibv6hh: ["f1ojsxk5", "f5tn483"],
151
+ icvyot: "fzkkow9",
152
+ vrafjx: ["fcdblym", "fjik90z"],
153
+ oivjwe: "fg706s2",
154
+ wvpqe5: ["fjik90z", "fcdblym"],
155
+ g2u3we: "f1p3nwhy",
156
+ h3c5rm: ["f11589ue", "f1pdflbu"],
157
+ B9xav0g: "f1q5o8ev",
158
+ zhjwy3: ["f1pdflbu", "f11589ue"]
160
159
  },
161
160
  "filled-darker": {
162
- "De3pzq": "f16xq7d1",
163
- "B4j52fo": "f192inf7",
164
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
165
- "Bn0qgzm": "f1vxd6vx",
166
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
167
- "icvyot": "fzkkow9",
168
- "vrafjx": ["fcdblym", "fjik90z"],
169
- "oivjwe": "fg706s2",
170
- "wvpqe5": ["fjik90z", "fcdblym"],
171
- "g2u3we": "f1p3nwhy",
172
- "h3c5rm": ["f11589ue", "f1pdflbu"],
173
- "B9xav0g": "f1q5o8ev",
174
- "zhjwy3": ["f1pdflbu", "f11589ue"]
161
+ De3pzq: "f16xq7d1",
162
+ B4j52fo: "f192inf7",
163
+ Bekrc4i: ["f5tn483", "f1ojsxk5"],
164
+ Bn0qgzm: "f1vxd6vx",
165
+ ibv6hh: ["f1ojsxk5", "f5tn483"],
166
+ icvyot: "fzkkow9",
167
+ vrafjx: ["fcdblym", "fjik90z"],
168
+ oivjwe: "fg706s2",
169
+ wvpqe5: ["fjik90z", "fcdblym"],
170
+ g2u3we: "f1p3nwhy",
171
+ h3c5rm: ["f11589ue", "f1pdflbu"],
172
+ B9xav0g: "f1q5o8ev",
173
+ zhjwy3: ["f1pdflbu", "f11589ue"]
175
174
  },
176
- "invalid": {
177
- "tvckwq": "fs4k3qj",
178
- "gk2u95": ["fcee079", "fmyw78r"],
179
- "hhx65j": "f1fgmyf4",
180
- "Bxowmz0": ["fmyw78r", "fcee079"]
175
+ invalid: {
176
+ tvckwq: "fs4k3qj",
177
+ gk2u95: ["fcee079", "fmyw78r"],
178
+ hhx65j: "f1fgmyf4",
179
+ Bxowmz0: ["fmyw78r", "fcee079"]
181
180
  },
182
- "invalidUnderline": {
183
- "hhx65j": "f1fgmyf4"
181
+ invalidUnderline: {
182
+ hhx65j: "f1fgmyf4"
184
183
  },
185
- "disabled": {
186
- "Bceei9c": "fdrzuqr",
187
- "De3pzq": "f1c21dwh",
188
- "g2u3we": "f1jj8ep1",
189
- "h3c5rm": ["f15xbau", "fy0fskl"],
190
- "B9xav0g": "f4ikngz",
191
- "zhjwy3": ["fy0fskl", "f15xbau"],
192
- "Bjwas2f": "fg455y9",
193
- "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
194
- "Bxeuatn": "f1cwzwz",
195
- "n51gp8": ["f14g86mu", "f1rvyvqg"]
184
+ disabled: {
185
+ Bceei9c: "fdrzuqr",
186
+ De3pzq: "f1c21dwh",
187
+ g2u3we: "f1jj8ep1",
188
+ h3c5rm: ["f15xbau", "fy0fskl"],
189
+ B9xav0g: "f4ikngz",
190
+ zhjwy3: ["fy0fskl", "f15xbau"],
191
+ Bjwas2f: "fg455y9",
192
+ Bn1d65q: ["f1rvyvqg", "f14g86mu"],
193
+ Bxeuatn: "f1cwzwz",
194
+ n51gp8: ["f14g86mu", "f1rvyvqg"]
196
195
  }
197
196
  }, {
198
- "d": [".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);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
199
- "w": [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
200
- "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
201
- "m": "screen and (prefers-reduced-motion: reduce)"
197
+ d: [".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);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
198
+ w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
199
+ m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
200
+ m: "screen and (prefers-reduced-motion: reduce)"
202
201
  }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
203
- "m": "screen and (prefers-reduced-motion: reduce)"
202
+ m: "screen and (prefers-reduced-motion: reduce)"
204
203
  }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
205
- "m": "screen and (prefers-reduced-motion: reduce)"
204
+ m: "screen and (prefers-reduced-motion: reduce)"
206
205
  }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
207
- "m": "screen and (prefers-reduced-motion: reduce)"
206
+ m: "screen and (prefers-reduced-motion: reduce)"
208
207
  }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
209
- "m": "(forced-colors: active)"
208
+ m: "(forced-colors: active)"
210
209
  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
211
- "m": "(forced-colors: active)"
210
+ m: "(forced-colors: active)"
212
211
  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
213
- "m": "(forced-colors: active)"
212
+ m: "(forced-colors: active)"
214
213
  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
215
- "m": "(forced-colors: active)"
214
+ m: "(forced-colors: active)"
216
215
  }]],
217
- "f": [".ftqa4ok:focus{outline-style:none;}"],
218
- "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
219
- "a": [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
216
+ f: [".ftqa4ok:focus{outline-style:none;}"],
217
+ h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
218
+ a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
220
219
  });
221
-
222
220
  const useIconStyles = /*#__PURE__*/__styles({
223
- "icon": {
224
- "B7ck84d": "f1ewtqcl",
225
- "sj55zd": "fxkbij4",
226
- "mc9l5x": "ftgm304",
227
- "Be2twd7": "f1pp30po",
228
- "Br312pm": "f12w6cgp",
229
- "Bw0ie65": "f8bv1bt",
230
- "Bo70h7d": "fvc9v3g"
221
+ icon: {
222
+ B7ck84d: "f1ewtqcl",
223
+ sj55zd: "fxkbij4",
224
+ mc9l5x: "ftgm304",
225
+ Be2twd7: "f1pp30po",
226
+ Br312pm: "f12w6cgp",
227
+ Bw0ie65: "f8bv1bt",
228
+ Bo70h7d: "fvc9v3g"
231
229
  },
232
- "small": {
233
- "Be2twd7": "f4ybsrx",
234
- "Frg6f3": ["f1h9en5y", "f1xk557c"]
230
+ small: {
231
+ Be2twd7: "f4ybsrx",
232
+ Frg6f3: ["f1h9en5y", "f1xk557c"]
235
233
  },
236
- "medium": {
237
- "Be2twd7": "fe5j1ua",
238
- "Frg6f3": ["f1h9en5y", "f1xk557c"]
234
+ medium: {
235
+ Be2twd7: "fe5j1ua",
236
+ Frg6f3: ["f1h9en5y", "f1xk557c"]
239
237
  },
240
- "large": {
241
- "Be2twd7": "f1rt2boy",
242
- "Frg6f3": ["f1t5qyk5", "f1ikr372"]
238
+ large: {
239
+ Be2twd7: "f1rt2boy",
240
+ Frg6f3: ["f1t5qyk5", "f1ikr372"]
243
241
  },
244
- "disabled": {
245
- "sj55zd": "f1s2aq7o"
242
+ disabled: {
243
+ sj55zd: "f1s2aq7o"
246
244
  }
247
245
  }, {
248
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
246
+ d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
249
247
  });
250
248
  /**
251
249
  * Apply styling to the Dropdown slots based on the state
252
250
  */
253
-
254
-
255
251
  export const useDropdownStyles_unstable = state => {
256
252
  const {
257
253
  appearance,
@@ -265,15 +261,12 @@ export const useDropdownStyles_unstable = state => {
265
261
  const iconStyles = useIconStyles();
266
262
  state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
267
263
  state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, state.button.className);
268
-
269
264
  if (state.listbox) {
270
265
  state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
271
266
  }
272
-
273
267
  if (state.expandIcon) {
274
268
  state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
275
269
  }
276
-
277
270
  return state;
278
271
  };
279
272
  //# sourceMappingURL=useDropdownStyles.js.map
package/lib/components/Dropdown/useDropdownStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,SAAT,QAA0B,4BAA1B;AAGA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,MAAM,EAAE,sBAFuD;EAG/D,UAAU,EAAE,0BAHmD;EAI/D,OAAO,EAAE;AAJsD,CAA1D;AAOP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;;AAoKA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAmCA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,UAAF;IAAc,IAAd;IAAoB,kBAApB;IAAwC;EAAxC,IAAiD,KAAvD;EACA,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,MAAN,CAAa,cAAb,CAA4B,EAA/B,KAAsC,MAAtD;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,QAA9B;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,CAAC,UAAD,CAH2B,EAIjC,OAAO,IAAI,UAAU,KAAK,WAA1B,IAAyC,MAAM,CAAC,OAJf,EAKjC,OAAO,IAAI,UAAU,KAAK,WAA1B,IAAyC,MAAM,CAAC,gBALf,EAMjC,QAAQ,IAAI,MAAM,CAAC,QANc,EAOjC,KAAK,CAAC,IAAN,CAAW,SAPsB,CAAnC;EAUA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,kBAAkB,CAAC,MADgB,EAEnC,MAAM,CAAC,MAF4B,EAGnC,MAAM,CAAC,IAAD,CAH6B,EAInC,kBAAkB,IAAI,MAAM,CAAC,WAJM,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,kBAAkB,CAAC,OADiB,EAEpC,MAAM,CAAC,OAF6B,EAGpC,CAAC,IAAD,IAAS,MAAM,CAAC,gBAHoB,EAIpC,KAAK,CAAC,OAAN,CAAc,SAJsB,CAAtC;EAMD;;EAED,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,kBAAkB,CAAC,UADoB,EAEvC,UAAU,CAAC,IAF4B,EAGvC,UAAU,CAAC,IAAD,CAH6B,EAIvC,QAAQ,IAAI,UAAU,CAAC,QAJgB,EAKvC,KAAK,CAAC,UAAN,CAAiB,SALsB,CAAzC;EAOD;;EAED,OAAO,KAAP;AACD,CA7CM","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {},\n\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","invalidUnderline","placeholder","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\n minWidth: '250px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {},\n\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.listbox,\n styles.listbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
package/lib/components/Listbox/Listbox.js CHANGED
@@ -6,7 +6,6 @@ import { useListboxContextValues } from '../../contexts/useListboxContextValues'
6
6
  /**
7
7
  * Listbox component: a standalone selection control, or the popup in a Combobox
8
8
  */
9
-
10
9
  export const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
11
10
  const state = useListbox_unstable(props, ref);
12
11
  const contextValues = useListboxContextValues(state);
package/lib/components/Listbox/Listbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAEA,SAAS,uBAAT,QAAwC,wCAAxC;AAGA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EACA,MAAM,aAAa,GAAG,uBAAuB,CAAC,KAAD,CAA7C;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n const state = useListbox_unstable(props, ref);\n const contextValues = useListboxContextValues(state);\n\n useListboxStyles_unstable(state);\n return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAE9D,SAASC,uBAAuB,QAAQ,wCAAwC;AAGhF;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,uBAAuB,CAACK,KAAK,CAAC;EAEpDN,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n const state = useListbox_unstable(props, ref);\n const contextValues = useListboxContextValues(state);\n\n useListboxStyles_unstable(state);\n return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"]}
package/lib/components/Listbox/renderListbox.js CHANGED
@@ -4,7 +4,6 @@ import { ListboxContext } from '../../contexts/ListboxContext';
4
4
  /**
5
5
  * Render the final JSX of Listbox
6
6
  */
7
-
8
7
  export const renderListbox_unstable = (state, contextValues) => {
9
8
  const {
10
9
  slots,
@@ -12,7 +11,8 @@ export const renderListbox_unstable = (state, contextValues) => {
12
11
  } = getSlots(state);
13
12
  return /*#__PURE__*/React.createElement(ListboxContext.Provider, {
14
13
  value: contextValues.listbox
15
- }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
14
+ }, /*#__PURE__*/React.createElement(slots.root, {
15
+ ...slotProps.root
16
16
  }));
17
17
  };
18
18
  //# sourceMappingURL=renderListbox.js.map
package/lib/components/Listbox/renderListbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,cAAT,QAA+B,+BAA/B;AAEA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n return (\n <ListboxContext.Provider value={contextValues.listbox}>\n <slots.root {...slotProps.root} />\n </ListboxContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,+BAA+B;AAE9D;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACE,cAAc,CAACM,QAAQ;IAACC,KAAK,EAAEJ,aAAa,CAACK;EAAO,gBACnDV,oBAACM,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACV;AAE9B,CAAC","names":["React","getSlots","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","Provider","value","listbox","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n return (\n <ListboxContext.Provider value={contextValues.listbox}>\n <slots.root {...slotProps.root} />\n </ListboxContext.Provider>\n );\n};\n"]}