@react-md/core 1.0.0-next.7 → 1.0.0-next.8

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 (60) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +6 -0
  3. package/coverage/clover.xml +264 -389
  4. package/coverage/coverage-final.json +2 -3
  5. package/coverage/lcov-report/MenuItemCheckbox.tsx.html +223 -0
  6. package/coverage/lcov-report/MenuItemInputToggle.tsx.html +178 -232
  7. package/coverage/lcov-report/MenuItemRadio.tsx.html +436 -0
  8. package/coverage/lcov-report/SrOnly.tsx.html +328 -0
  9. package/coverage/lcov-report/Typography.tsx.html +1027 -0
  10. package/coverage/lcov-report/index.html +15 -30
  11. package/coverage/lcov-report/menuItemInputToggleStyles.ts.html +319 -0
  12. package/coverage/lcov.info +304 -436
  13. package/dist/_core.scss +49 -43
  14. package/dist/badge/_badge.scss +23 -19
  15. package/dist/form/MenuItemInputToggle.d.ts +2 -15
  16. package/dist/form/MenuItemInputToggle.js +26 -37
  17. package/dist/form/MenuItemInputToggle.js.map +1 -1
  18. package/dist/form/_form.scss +39 -16
  19. package/dist/form/menuItemInputToggleStyles.d.ts +39 -0
  20. package/dist/form/menuItemInputToggleStyles.js +31 -0
  21. package/dist/form/menuItemInputToggleStyles.js.map +1 -0
  22. package/dist/icon/_icon.scss +7 -5
  23. package/dist/index.d.ts +1 -0
  24. package/dist/index.js +1 -0
  25. package/dist/index.js.map +1 -1
  26. package/dist/interaction/_interaction.scss +56 -44
  27. package/dist/list/types.d.ts +10 -1
  28. package/dist/list/types.js.map +1 -1
  29. package/dist/menu/_menu.scss +1 -0
  30. package/dist/theme/_theme.scss +192 -34
  31. package/dist/typography/SrOnly.d.ts +3 -3
  32. package/dist/typography/SrOnly.js +4 -4
  33. package/dist/typography/SrOnly.js.map +1 -1
  34. package/dist/typography/Typography.d.ts +19 -19
  35. package/dist/typography/Typography.js +19 -19
  36. package/dist/typography/Typography.js.map +1 -1
  37. package/dist/typography/_typography.scss +65 -25
  38. package/package.json +11 -11
  39. package/src/_core.scss +49 -43
  40. package/src/badge/_badge.scss +23 -19
  41. package/src/button/__tests__/__snapshots__/Button.tsx.snap +1 -1
  42. package/src/form/MenuItemInputToggle.tsx +46 -64
  43. package/src/form/__tests__/MenuItemCheckbox.tsx +53 -0
  44. package/src/form/__tests__/MenuItemRadio.tsx +53 -0
  45. package/src/form/__tests__/__snapshots__/FileInput.tsx.snap +23 -23
  46. package/src/form/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap +96 -0
  47. package/src/form/__tests__/__snapshots__/MenuItemRadio.tsx.snap +96 -0
  48. package/src/form/_form.scss +39 -16
  49. package/src/form/menuItemInputToggleStyles.ts +78 -0
  50. package/src/icon/_icon.scss +7 -5
  51. package/src/index.ts +1 -0
  52. package/src/interaction/_interaction.scss +56 -44
  53. package/src/list/types.ts +12 -1
  54. package/src/menu/_menu.scss +1 -0
  55. package/src/theme/_theme.scss +192 -34
  56. package/src/typography/SrOnly.tsx +9 -9
  57. package/src/typography/Typography.tsx +19 -19
  58. package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap +5 -5
  59. package/src/typography/_typography.scss +65 -25
  60. package/.turbo/turbo-lint.log +0 -12
package/coverage/lcov-report/Typography.tsx.html ADDED
@@ -0,0 +1,1027 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for Typography.tsx</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="prettify.css" />
9
+ <link rel="stylesheet" href="base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="index.html">All files</a> Typography.tsx</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">100% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>314/314</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">100% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>19/19</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>3/3</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>314/314</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a>
272
+ <a name='L207'></a><a href='#L207'>207</a>
273
+ <a name='L208'></a><a href='#L208'>208</a>
274
+ <a name='L209'></a><a href='#L209'>209</a>
275
+ <a name='L210'></a><a href='#L210'>210</a>
276
+ <a name='L211'></a><a href='#L211'>211</a>
277
+ <a name='L212'></a><a href='#L212'>212</a>
278
+ <a name='L213'></a><a href='#L213'>213</a>
279
+ <a name='L214'></a><a href='#L214'>214</a>
280
+ <a name='L215'></a><a href='#L215'>215</a>
281
+ <a name='L216'></a><a href='#L216'>216</a>
282
+ <a name='L217'></a><a href='#L217'>217</a>
283
+ <a name='L218'></a><a href='#L218'>218</a>
284
+ <a name='L219'></a><a href='#L219'>219</a>
285
+ <a name='L220'></a><a href='#L220'>220</a>
286
+ <a name='L221'></a><a href='#L221'>221</a>
287
+ <a name='L222'></a><a href='#L222'>222</a>
288
+ <a name='L223'></a><a href='#L223'>223</a>
289
+ <a name='L224'></a><a href='#L224'>224</a>
290
+ <a name='L225'></a><a href='#L225'>225</a>
291
+ <a name='L226'></a><a href='#L226'>226</a>
292
+ <a name='L227'></a><a href='#L227'>227</a>
293
+ <a name='L228'></a><a href='#L228'>228</a>
294
+ <a name='L229'></a><a href='#L229'>229</a>
295
+ <a name='L230'></a><a href='#L230'>230</a>
296
+ <a name='L231'></a><a href='#L231'>231</a>
297
+ <a name='L232'></a><a href='#L232'>232</a>
298
+ <a name='L233'></a><a href='#L233'>233</a>
299
+ <a name='L234'></a><a href='#L234'>234</a>
300
+ <a name='L235'></a><a href='#L235'>235</a>
301
+ <a name='L236'></a><a href='#L236'>236</a>
302
+ <a name='L237'></a><a href='#L237'>237</a>
303
+ <a name='L238'></a><a href='#L238'>238</a>
304
+ <a name='L239'></a><a href='#L239'>239</a>
305
+ <a name='L240'></a><a href='#L240'>240</a>
306
+ <a name='L241'></a><a href='#L241'>241</a>
307
+ <a name='L242'></a><a href='#L242'>242</a>
308
+ <a name='L243'></a><a href='#L243'>243</a>
309
+ <a name='L244'></a><a href='#L244'>244</a>
310
+ <a name='L245'></a><a href='#L245'>245</a>
311
+ <a name='L246'></a><a href='#L246'>246</a>
312
+ <a name='L247'></a><a href='#L247'>247</a>
313
+ <a name='L248'></a><a href='#L248'>248</a>
314
+ <a name='L249'></a><a href='#L249'>249</a>
315
+ <a name='L250'></a><a href='#L250'>250</a>
316
+ <a name='L251'></a><a href='#L251'>251</a>
317
+ <a name='L252'></a><a href='#L252'>252</a>
318
+ <a name='L253'></a><a href='#L253'>253</a>
319
+ <a name='L254'></a><a href='#L254'>254</a>
320
+ <a name='L255'></a><a href='#L255'>255</a>
321
+ <a name='L256'></a><a href='#L256'>256</a>
322
+ <a name='L257'></a><a href='#L257'>257</a>
323
+ <a name='L258'></a><a href='#L258'>258</a>
324
+ <a name='L259'></a><a href='#L259'>259</a>
325
+ <a name='L260'></a><a href='#L260'>260</a>
326
+ <a name='L261'></a><a href='#L261'>261</a>
327
+ <a name='L262'></a><a href='#L262'>262</a>
328
+ <a name='L263'></a><a href='#L263'>263</a>
329
+ <a name='L264'></a><a href='#L264'>264</a>
330
+ <a name='L265'></a><a href='#L265'>265</a>
331
+ <a name='L266'></a><a href='#L266'>266</a>
332
+ <a name='L267'></a><a href='#L267'>267</a>
333
+ <a name='L268'></a><a href='#L268'>268</a>
334
+ <a name='L269'></a><a href='#L269'>269</a>
335
+ <a name='L270'></a><a href='#L270'>270</a>
336
+ <a name='L271'></a><a href='#L271'>271</a>
337
+ <a name='L272'></a><a href='#L272'>272</a>
338
+ <a name='L273'></a><a href='#L273'>273</a>
339
+ <a name='L274'></a><a href='#L274'>274</a>
340
+ <a name='L275'></a><a href='#L275'>275</a>
341
+ <a name='L276'></a><a href='#L276'>276</a>
342
+ <a name='L277'></a><a href='#L277'>277</a>
343
+ <a name='L278'></a><a href='#L278'>278</a>
344
+ <a name='L279'></a><a href='#L279'>279</a>
345
+ <a name='L280'></a><a href='#L280'>280</a>
346
+ <a name='L281'></a><a href='#L281'>281</a>
347
+ <a name='L282'></a><a href='#L282'>282</a>
348
+ <a name='L283'></a><a href='#L283'>283</a>
349
+ <a name='L284'></a><a href='#L284'>284</a>
350
+ <a name='L285'></a><a href='#L285'>285</a>
351
+ <a name='L286'></a><a href='#L286'>286</a>
352
+ <a name='L287'></a><a href='#L287'>287</a>
353
+ <a name='L288'></a><a href='#L288'>288</a>
354
+ <a name='L289'></a><a href='#L289'>289</a>
355
+ <a name='L290'></a><a href='#L290'>290</a>
356
+ <a name='L291'></a><a href='#L291'>291</a>
357
+ <a name='L292'></a><a href='#L292'>292</a>
358
+ <a name='L293'></a><a href='#L293'>293</a>
359
+ <a name='L294'></a><a href='#L294'>294</a>
360
+ <a name='L295'></a><a href='#L295'>295</a>
361
+ <a name='L296'></a><a href='#L296'>296</a>
362
+ <a name='L297'></a><a href='#L297'>297</a>
363
+ <a name='L298'></a><a href='#L298'>298</a>
364
+ <a name='L299'></a><a href='#L299'>299</a>
365
+ <a name='L300'></a><a href='#L300'>300</a>
366
+ <a name='L301'></a><a href='#L301'>301</a>
367
+ <a name='L302'></a><a href='#L302'>302</a>
368
+ <a name='L303'></a><a href='#L303'>303</a>
369
+ <a name='L304'></a><a href='#L304'>304</a>
370
+ <a name='L305'></a><a href='#L305'>305</a>
371
+ <a name='L306'></a><a href='#L306'>306</a>
372
+ <a name='L307'></a><a href='#L307'>307</a>
373
+ <a name='L308'></a><a href='#L308'>308</a>
374
+ <a name='L309'></a><a href='#L309'>309</a>
375
+ <a name='L310'></a><a href='#L310'>310</a>
376
+ <a name='L311'></a><a href='#L311'>311</a>
377
+ <a name='L312'></a><a href='#L312'>312</a>
378
+ <a name='L313'></a><a href='#L313'>313</a>
379
+ <a name='L314'></a><a href='#L314'>314</a>
380
+ <a name='L315'></a><a href='#L315'>315</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
381
+ <span class="cline-any cline-yes">1x</span>
382
+ <span class="cline-any cline-yes">1x</span>
383
+ <span class="cline-any cline-yes">1x</span>
384
+ <span class="cline-any cline-yes">1x</span>
385
+ <span class="cline-any cline-yes">1x</span>
386
+ <span class="cline-any cline-yes">1x</span>
387
+ <span class="cline-any cline-yes">1x</span>
388
+ <span class="cline-any cline-yes">1x</span>
389
+ <span class="cline-any cline-yes">1x</span>
390
+ <span class="cline-any cline-yes">1x</span>
391
+ <span class="cline-any cline-yes">1x</span>
392
+ <span class="cline-any cline-yes">1x</span>
393
+ <span class="cline-any cline-yes">1x</span>
394
+ <span class="cline-any cline-yes">1x</span>
395
+ <span class="cline-any cline-yes">1x</span>
396
+ <span class="cline-any cline-yes">1x</span>
397
+ <span class="cline-any cline-yes">1x</span>
398
+ <span class="cline-any cline-yes">1x</span>
399
+ <span class="cline-any cline-yes">1x</span>
400
+ <span class="cline-any cline-yes">1x</span>
401
+ <span class="cline-any cline-yes">1x</span>
402
+ <span class="cline-any cline-yes">1x</span>
403
+ <span class="cline-any cline-yes">1x</span>
404
+ <span class="cline-any cline-yes">1x</span>
405
+ <span class="cline-any cline-yes">1x</span>
406
+ <span class="cline-any cline-yes">1x</span>
407
+ <span class="cline-any cline-yes">1x</span>
408
+ <span class="cline-any cline-yes">1x</span>
409
+ <span class="cline-any cline-yes">1x</span>
410
+ <span class="cline-any cline-yes">1x</span>
411
+ <span class="cline-any cline-yes">1x</span>
412
+ <span class="cline-any cline-yes">1x</span>
413
+ <span class="cline-any cline-yes">1x</span>
414
+ <span class="cline-any cline-yes">1x</span>
415
+ <span class="cline-any cline-yes">1x</span>
416
+ <span class="cline-any cline-yes">1x</span>
417
+ <span class="cline-any cline-yes">1x</span>
418
+ <span class="cline-any cline-yes">1x</span>
419
+ <span class="cline-any cline-yes">1x</span>
420
+ <span class="cline-any cline-yes">1x</span>
421
+ <span class="cline-any cline-yes">1x</span>
422
+ <span class="cline-any cline-yes">1x</span>
423
+ <span class="cline-any cline-yes">1x</span>
424
+ <span class="cline-any cline-yes">1x</span>
425
+ <span class="cline-any cline-yes">1x</span>
426
+ <span class="cline-any cline-yes">1x</span>
427
+ <span class="cline-any cline-yes">1x</span>
428
+ <span class="cline-any cline-yes">1x</span>
429
+ <span class="cline-any cline-yes">1x</span>
430
+ <span class="cline-any cline-yes">1x</span>
431
+ <span class="cline-any cline-yes">1x</span>
432
+ <span class="cline-any cline-yes">1x</span>
433
+ <span class="cline-any cline-yes">1x</span>
434
+ <span class="cline-any cline-yes">1x</span>
435
+ <span class="cline-any cline-yes">1x</span>
436
+ <span class="cline-any cline-yes">1x</span>
437
+ <span class="cline-any cline-yes">1x</span>
438
+ <span class="cline-any cline-yes">1x</span>
439
+ <span class="cline-any cline-yes">1x</span>
440
+ <span class="cline-any cline-yes">1x</span>
441
+ <span class="cline-any cline-yes">1x</span>
442
+ <span class="cline-any cline-yes">1x</span>
443
+ <span class="cline-any cline-yes">1x</span>
444
+ <span class="cline-any cline-yes">1x</span>
445
+ <span class="cline-any cline-yes">1x</span>
446
+ <span class="cline-any cline-yes">1x</span>
447
+ <span class="cline-any cline-yes">1x</span>
448
+ <span class="cline-any cline-yes">1x</span>
449
+ <span class="cline-any cline-yes">1x</span>
450
+ <span class="cline-any cline-yes">1x</span>
451
+ <span class="cline-any cline-yes">1x</span>
452
+ <span class="cline-any cline-yes">1x</span>
453
+ <span class="cline-any cline-yes">1x</span>
454
+ <span class="cline-any cline-yes">1x</span>
455
+ <span class="cline-any cline-yes">1x</span>
456
+ <span class="cline-any cline-yes">1x</span>
457
+ <span class="cline-any cline-yes">1x</span>
458
+ <span class="cline-any cline-yes">1x</span>
459
+ <span class="cline-any cline-yes">1x</span>
460
+ <span class="cline-any cline-yes">1x</span>
461
+ <span class="cline-any cline-yes">1x</span>
462
+ <span class="cline-any cline-yes">1x</span>
463
+ <span class="cline-any cline-yes">1x</span>
464
+ <span class="cline-any cline-yes">1x</span>
465
+ <span class="cline-any cline-yes">1x</span>
466
+ <span class="cline-any cline-yes">1x</span>
467
+ <span class="cline-any cline-yes">1x</span>
468
+ <span class="cline-any cline-yes">1x</span>
469
+ <span class="cline-any cline-yes">1x</span>
470
+ <span class="cline-any cline-yes">1x</span>
471
+ <span class="cline-any cline-yes">1x</span>
472
+ <span class="cline-any cline-yes">1x</span>
473
+ <span class="cline-any cline-yes">1x</span>
474
+ <span class="cline-any cline-yes">1x</span>
475
+ <span class="cline-any cline-yes">1x</span>
476
+ <span class="cline-any cline-yes">1x</span>
477
+ <span class="cline-any cline-yes">1x</span>
478
+ <span class="cline-any cline-yes">1x</span>
479
+ <span class="cline-any cline-yes">1x</span>
480
+ <span class="cline-any cline-yes">1x</span>
481
+ <span class="cline-any cline-yes">1x</span>
482
+ <span class="cline-any cline-yes">1x</span>
483
+ <span class="cline-any cline-yes">1x</span>
484
+ <span class="cline-any cline-yes">1x</span>
485
+ <span class="cline-any cline-yes">1x</span>
486
+ <span class="cline-any cline-yes">1x</span>
487
+ <span class="cline-any cline-yes">1x</span>
488
+ <span class="cline-any cline-yes">1x</span>
489
+ <span class="cline-any cline-yes">1x</span>
490
+ <span class="cline-any cline-yes">1x</span>
491
+ <span class="cline-any cline-yes">1x</span>
492
+ <span class="cline-any cline-yes">1x</span>
493
+ <span class="cline-any cline-yes">1x</span>
494
+ <span class="cline-any cline-yes">1x</span>
495
+ <span class="cline-any cline-yes">1x</span>
496
+ <span class="cline-any cline-yes">1x</span>
497
+ <span class="cline-any cline-yes">1x</span>
498
+ <span class="cline-any cline-yes">1x</span>
499
+ <span class="cline-any cline-yes">1x</span>
500
+ <span class="cline-any cline-yes">1x</span>
501
+ <span class="cline-any cline-yes">1x</span>
502
+ <span class="cline-any cline-yes">1x</span>
503
+ <span class="cline-any cline-yes">1x</span>
504
+ <span class="cline-any cline-yes">1x</span>
505
+ <span class="cline-any cline-yes">1x</span>
506
+ <span class="cline-any cline-yes">1x</span>
507
+ <span class="cline-any cline-yes">1x</span>
508
+ <span class="cline-any cline-yes">1x</span>
509
+ <span class="cline-any cline-yes">1x</span>
510
+ <span class="cline-any cline-yes">1x</span>
511
+ <span class="cline-any cline-yes">1x</span>
512
+ <span class="cline-any cline-yes">1x</span>
513
+ <span class="cline-any cline-yes">1x</span>
514
+ <span class="cline-any cline-yes">1x</span>
515
+ <span class="cline-any cline-yes">1x</span>
516
+ <span class="cline-any cline-yes">1x</span>
517
+ <span class="cline-any cline-yes">1x</span>
518
+ <span class="cline-any cline-yes">1x</span>
519
+ <span class="cline-any cline-yes">212x</span>
520
+ <span class="cline-any cline-yes">212x</span>
521
+ <span class="cline-any cline-yes">212x</span>
522
+ <span class="cline-any cline-yes">212x</span>
523
+ <span class="cline-any cline-yes">212x</span>
524
+ <span class="cline-any cline-yes">212x</span>
525
+ <span class="cline-any cline-yes">212x</span>
526
+ <span class="cline-any cline-yes">212x</span>
527
+ <span class="cline-any cline-yes">212x</span>
528
+ <span class="cline-any cline-yes">212x</span>
529
+ <span class="cline-any cline-yes">212x</span>
530
+ <span class="cline-any cline-yes">212x</span>
531
+ <span class="cline-any cline-yes">1x</span>
532
+ <span class="cline-any cline-yes">1x</span>
533
+ <span class="cline-any cline-yes">1x</span>
534
+ <span class="cline-any cline-yes">1x</span>
535
+ <span class="cline-any cline-yes">1x</span>
536
+ <span class="cline-any cline-yes">1x</span>
537
+ <span class="cline-any cline-yes">1x</span>
538
+ <span class="cline-any cline-yes">1x</span>
539
+ <span class="cline-any cline-yes">1x</span>
540
+ <span class="cline-any cline-yes">1x</span>
541
+ <span class="cline-any cline-yes">1x</span>
542
+ <span class="cline-any cline-yes">1x</span>
543
+ <span class="cline-any cline-yes">1x</span>
544
+ <span class="cline-any cline-yes">1x</span>
545
+ <span class="cline-any cline-yes">1x</span>
546
+ <span class="cline-any cline-yes">1x</span>
547
+ <span class="cline-any cline-yes">1x</span>
548
+ <span class="cline-any cline-yes">1x</span>
549
+ <span class="cline-any cline-yes">1x</span>
550
+ <span class="cline-any cline-yes">1x</span>
551
+ <span class="cline-any cline-yes">1x</span>
552
+ <span class="cline-any cline-yes">1x</span>
553
+ <span class="cline-any cline-yes">1x</span>
554
+ <span class="cline-any cline-yes">210x</span>
555
+ <span class="cline-any cline-yes">210x</span>
556
+ <span class="cline-any cline-yes">210x</span>
557
+ <span class="cline-any cline-yes">210x</span>
558
+ <span class="cline-any cline-yes">210x</span>
559
+ <span class="cline-any cline-yes">14x</span>
560
+ <span class="cline-any cline-yes">14x</span>
561
+ <span class="cline-any cline-yes">196x</span>
562
+ <span class="cline-any cline-yes">196x</span>
563
+ <span class="cline-any cline-yes">197x</span>
564
+ <span class="cline-any cline-yes">1x</span>
565
+ <span class="cline-any cline-yes">210x</span>
566
+ <span class="cline-any cline-yes">1x</span>
567
+ <span class="cline-any cline-yes">210x</span>
568
+ <span class="cline-any cline-yes">1x</span>
569
+ <span class="cline-any cline-yes">210x</span>
570
+ <span class="cline-any cline-yes">1x</span>
571
+ <span class="cline-any cline-yes">210x</span>
572
+ <span class="cline-any cline-yes">2x</span>
573
+ <span class="cline-any cline-yes">210x</span>
574
+ <span class="cline-any cline-yes">210x</span>
575
+ <span class="cline-any cline-yes">210x</span>
576
+ <span class="cline-any cline-yes">176x</span>
577
+ <span class="cline-any cline-yes">210x</span>
578
+ <span class="cline-any cline-yes">210x</span>
579
+ <span class="cline-any cline-yes">12x</span>
580
+ <span class="cline-any cline-yes">210x</span>
581
+ <span class="cline-any cline-yes">1x</span>
582
+ <span class="cline-any cline-yes">210x</span>
583
+ <span class="cline-any cline-yes">1x</span>
584
+ <span class="cline-any cline-yes">210x</span>
585
+ <span class="cline-any cline-yes">210x</span>
586
+ <span class="cline-any cline-yes">1x</span>
587
+ <span class="cline-any cline-yes">1x</span>
588
+ <span class="cline-any cline-yes">1x</span>
589
+ <span class="cline-any cline-yes">1x</span>
590
+ <span class="cline-any cline-yes">1x</span>
591
+ <span class="cline-any cline-yes">1x</span>
592
+ <span class="cline-any cline-yes">1x</span>
593
+ <span class="cline-any cline-yes">1x</span>
594
+ <span class="cline-any cline-yes">1x</span>
595
+ <span class="cline-any cline-yes">1x</span>
596
+ <span class="cline-any cline-yes">1x</span>
597
+ <span class="cline-any cline-yes">1x</span>
598
+ <span class="cline-any cline-yes">1x</span>
599
+ <span class="cline-any cline-yes">1x</span>
600
+ <span class="cline-any cline-yes">1x</span>
601
+ <span class="cline-any cline-yes">1x</span>
602
+ <span class="cline-any cline-yes">1x</span>
603
+ <span class="cline-any cline-yes">1x</span>
604
+ <span class="cline-any cline-yes">1x</span>
605
+ <span class="cline-any cline-yes">1x</span>
606
+ <span class="cline-any cline-yes">1x</span>
607
+ <span class="cline-any cline-yes">1x</span>
608
+ <span class="cline-any cline-yes">1x</span>
609
+ <span class="cline-any cline-yes">1x</span>
610
+ <span class="cline-any cline-yes">1x</span>
611
+ <span class="cline-any cline-yes">1x</span>
612
+ <span class="cline-any cline-yes">1x</span>
613
+ <span class="cline-any cline-yes">1x</span>
614
+ <span class="cline-any cline-yes">1x</span>
615
+ <span class="cline-any cline-yes">1x</span>
616
+ <span class="cline-any cline-yes">1x</span>
617
+ <span class="cline-any cline-yes">1x</span>
618
+ <span class="cline-any cline-yes">1x</span>
619
+ <span class="cline-any cline-yes">1x</span>
620
+ <span class="cline-any cline-yes">1x</span>
621
+ <span class="cline-any cline-yes">1x</span>
622
+ <span class="cline-any cline-yes">1x</span>
623
+ <span class="cline-any cline-yes">1x</span>
624
+ <span class="cline-any cline-yes">1x</span>
625
+ <span class="cline-any cline-yes">1x</span>
626
+ <span class="cline-any cline-yes">1x</span>
627
+ <span class="cline-any cline-yes">1x</span>
628
+ <span class="cline-any cline-yes">1x</span>
629
+ <span class="cline-any cline-yes">1x</span>
630
+ <span class="cline-any cline-yes">1x</span>
631
+ <span class="cline-any cline-yes">1x</span>
632
+ <span class="cline-any cline-yes">1x</span>
633
+ <span class="cline-any cline-yes">1x</span>
634
+ <span class="cline-any cline-yes">1x</span>
635
+ <span class="cline-any cline-yes">1x</span>
636
+ <span class="cline-any cline-yes">1x</span>
637
+ <span class="cline-any cline-yes">1x</span>
638
+ <span class="cline-any cline-yes">1x</span>
639
+ <span class="cline-any cline-yes">1x</span>
640
+ <span class="cline-any cline-yes">1x</span>
641
+ <span class="cline-any cline-yes">1x</span>
642
+ <span class="cline-any cline-yes">1x</span>
643
+ <span class="cline-any cline-yes">1x</span>
644
+ <span class="cline-any cline-yes">1x</span>
645
+ <span class="cline-any cline-yes">1x</span>
646
+ <span class="cline-any cline-yes">1x</span>
647
+ <span class="cline-any cline-yes">1x</span>
648
+ <span class="cline-any cline-yes">1x</span>
649
+ <span class="cline-any cline-yes">1x</span>
650
+ <span class="cline-any cline-yes">1x</span>
651
+ <span class="cline-any cline-yes">1x</span>
652
+ <span class="cline-any cline-yes">1x</span>
653
+ <span class="cline-any cline-yes">1x</span>
654
+ <span class="cline-any cline-yes">1x</span>
655
+ <span class="cline-any cline-yes">210x</span>
656
+ <span class="cline-any cline-yes">210x</span>
657
+ <span class="cline-any cline-yes">210x</span>
658
+ <span class="cline-any cline-yes">210x</span>
659
+ <span class="cline-any cline-yes">210x</span>
660
+ <span class="cline-any cline-yes">210x</span>
661
+ <span class="cline-any cline-yes">210x</span>
662
+ <span class="cline-any cline-yes">210x</span>
663
+ <span class="cline-any cline-yes">210x</span>
664
+ <span class="cline-any cline-yes">210x</span>
665
+ <span class="cline-any cline-yes">210x</span>
666
+ <span class="cline-any cline-yes">210x</span>
667
+ <span class="cline-any cline-yes">210x</span>
668
+ <span class="cline-any cline-yes">210x</span>
669
+ <span class="cline-any cline-yes">210x</span>
670
+ <span class="cline-any cline-yes">210x</span>
671
+ <span class="cline-any cline-yes">210x</span>
672
+ <span class="cline-any cline-yes">210x</span>
673
+ <span class="cline-any cline-yes">210x</span>
674
+ <span class="cline-any cline-yes">210x</span>
675
+ <span class="cline-any cline-yes">210x</span>
676
+ <span class="cline-any cline-yes">210x</span>
677
+ <span class="cline-any cline-yes">210x</span>
678
+ <span class="cline-any cline-yes">210x</span>
679
+ <span class="cline-any cline-yes">210x</span>
680
+ <span class="cline-any cline-yes">210x</span>
681
+ <span class="cline-any cline-yes">210x</span>
682
+ <span class="cline-any cline-yes">210x</span>
683
+ <span class="cline-any cline-yes">210x</span>
684
+ <span class="cline-any cline-yes">210x</span>
685
+ <span class="cline-any cline-yes">210x</span>
686
+ <span class="cline-any cline-yes">210x</span>
687
+ <span class="cline-any cline-yes">210x</span>
688
+ <span class="cline-any cline-yes">210x</span>
689
+ <span class="cline-any cline-yes">210x</span>
690
+ <span class="cline-any cline-yes">210x</span>
691
+ <span class="cline-any cline-yes">210x</span>
692
+ <span class="cline-any cline-yes">210x</span>
693
+ <span class="cline-any cline-yes">1x</span>
694
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { cnb } from "cnbuilder";
695
+ import {
696
+ forwardRef,
697
+ type ElementType,
698
+ type HTMLAttributes,
699
+ type ReactElement,
700
+ } from "react";
701
+ import { cssUtils, type TextCssUtilsOptions } from "../cssUtils.js";
702
+ &nbsp;
703
+ /**
704
+ * A union of all the material design provided typography styles. When used with
705
+ * the Typography component, this will generate the correct typography className
706
+ * to apply and determine what component to be rendered as if none was provided.
707
+ *
708
+ * @remarks \@since 4.0.0
709
+ */
710
+ export type TypographyType =
711
+ | "headline-1"
712
+ | "headline-2"
713
+ | "headline-3"
714
+ | "headline-4"
715
+ | "headline-5"
716
+ | "headline-6"
717
+ | "subtitle-1"
718
+ | "subtitle-2"
719
+ | "body-1"
720
+ | "body-2"
721
+ | "caption"
722
+ | "overline";
723
+ &nbsp;
724
+ /** @remarks \@since 6.0.0 */
725
+ export interface TypographyClassNameOptions extends TextCssUtilsOptions {
726
+ className?: string;
727
+ &nbsp;
728
+ /**
729
+ * @see {@link TypographyType}
730
+ * @defaultValue `"body-1"`
731
+ */
732
+ type?: TypographyType;
733
+ }
734
+ &nbsp;
735
+ /** @remarks \@since 6.0.0 */
736
+ export type NullableTypographyClassNameOptions = Omit&lt;
737
+ TypographyClassNameOptions,
738
+ "type"
739
+ &gt; &amp; {
740
+ /**
741
+ * When using the {@link typography} class name utility, the `type` can be set
742
+ * to `null` to inherit font.
743
+ *
744
+ * @see {@link TypographyType}
745
+ * @defaultValue `"body-1"`
746
+ */
747
+ type?: TypographyType | null;
748
+ };
749
+ &nbsp;
750
+ /**
751
+ * Get a typography class name based on different typography options. This is
752
+ * only useful if you are unable to use the {@link Typography} component for
753
+ * some reason.
754
+ *
755
+ * @example
756
+ * Simple Example
757
+ * ```ts
758
+ * import { typography } from "@react-md/core";
759
+ *
760
+ * function Example() {
761
+ * return (
762
+ * &lt;&gt;
763
+ * &lt;h1 className={typography({ type: "headline-1" })} /&gt;
764
+ * &lt;h2 className={typography({ type: "headline-2" })} /&gt;
765
+ * &lt;h3 className={typography({ type: "headline-3" })} /&gt;
766
+ * &lt;h4 className={typography({ type: "headline-4" })} /&gt;
767
+ * &lt;h5 className={typography({ type: "headline-5" })} /&gt;
768
+ * &lt;h6 className={typography({ type: "headline-6" })} /&gt;
769
+ * &lt;h5 className={typography({ type: "subtitle-1" })} /&gt;
770
+ * &lt;h6 className={typography({ type: "subtitle-2" })} /&gt;
771
+ * &lt;p className={typography()} /&gt;
772
+ * &lt;p className={typography({ type "body-1" })} /&gt;
773
+ * &lt;p className={typography({ type "body-1" })} /&gt;
774
+ * &lt;caption className={typography({ type: "caption" })} /&gt;
775
+ * &lt;span className={typography({ type: "overline" })} /&gt;
776
+ * &lt;/&gt;
777
+ * );
778
+ * }
779
+ * ```
780
+ *
781
+ * @example
782
+ * Applying Additional Styles
783
+ * ```ts
784
+ * import { typography } from "@react-md/core";
785
+ *
786
+ * function Example() {
787
+ * return (
788
+ * &lt;&gt;
789
+ * &lt;h1
790
+ * // only maintain the default margin-bottom
791
+ * className={typography({
792
+ * type: "headline-1",
793
+ * margin: "bottom",
794
+ * })}
795
+ * /&gt;
796
+ *
797
+ * &lt;h2
798
+ * // remove all default margin
799
+ * className={typography({
800
+ * type: "headline-2",
801
+ * margin: "none",
802
+ * })}
803
+ * /&gt;
804
+ *
805
+ * &lt;h3
806
+ * // only maintain the default margin-top
807
+ * className={typography({
808
+ * type: "headline-3",
809
+ * margin: "top",
810
+ * })}
811
+ * /&gt;
812
+ *
813
+ * &lt;p
814
+ * // center the text, set to bold, and only maintain default margin-bottom
815
+ * className={typography({
816
+ * type "subtitle-1",
817
+ * align: "center",
818
+ * margin: "bottom",
819
+ * })}
820
+ * /&gt;
821
+ * &lt;/&gt;
822
+ * );
823
+ * }
824
+ * ```
825
+ *
826
+ * @see {@link Typography}
827
+ * @param options - An optional object of options used to create the typography
828
+ * class name.
829
+ * @returns a typography class name string
830
+ * @remarks \@since 6.0.0
831
+ */
832
+ export function typography(
833
+ options: NullableTypographyClassNameOptions = {}
834
+ ): string {
835
+ const { type = "body-1" } = options;
836
+ &nbsp;
837
+ // using `&amp;&amp;` instead of `bem` since the latest version of typescript does not
838
+ // support setting the same object key (empty string)
839
+ return cnb(
840
+ "rmd-typography",
841
+ type &amp;&amp; `rmd-typography--${type}`,
842
+ cssUtils(options)
843
+ );
844
+ }
845
+ &nbsp;
846
+ /**
847
+ * A union of the default supported elements that the `Typography` component can
848
+ * be rendered as. This is mostly used for adding the correct `HTMLAttributes`
849
+ * and enabling the forward ref.
850
+ *
851
+ * @remarks \@since 4.0.0
852
+ */
853
+ export type TypographyHTMLElement =
854
+ | HTMLHeadingElement
855
+ | HTMLParagraphElement
856
+ | HTMLSpanElement
857
+ | HTMLDivElement
858
+ | HTMLAnchorElement
859
+ | HTMLBodyElement
860
+ | HTMLHtmlElement;
861
+ &nbsp;
862
+ /** @remarks \@since 6.0.0 */
863
+ export type CustomTypographyComponent = ElementType&lt;
864
+ HTMLAttributes&lt;TypographyHTMLElement&gt; &amp; { className: string }
865
+ &gt;;
866
+ &nbsp;
867
+ /** @internal */
868
+ function getComponent(
869
+ as: CustomTypographyComponent | undefined,
870
+ type: TypographyType
871
+ ): ElementType {
872
+ if (as) {
873
+ return as;
874
+ }
875
+ &nbsp;
876
+ switch (type) {
877
+ case "headline-1":
878
+ return "h1";
879
+ case "headline-2":
880
+ return "h2";
881
+ case "headline-3":
882
+ return "h3";
883
+ case "headline-4":
884
+ return "h4";
885
+ case "headline-5":
886
+ return "h5";
887
+ case "headline-6":
888
+ case "subtitle-1":
889
+ case "subtitle-2":
890
+ return "h6";
891
+ case "body-1":
892
+ case "body-2":
893
+ return "p";
894
+ case "caption":
895
+ return "caption";
896
+ default:
897
+ return "span";
898
+ }
899
+ }
900
+ &nbsp;
901
+ export interface TypographyProps
902
+ extends HTMLAttributes&lt;TypographyHTMLElement&gt;,
903
+ TypographyClassNameOptions {
904
+ /**
905
+ * The component to render as when the children are not a render function. If
906
+ * this prop is omitted, the component will be determined by the `type` prop
907
+ * where:
908
+ *
909
+ * - `"headline-1" -&gt; &lt;h1&gt;`
910
+ * - `"headline-2" -&gt; &lt;h2&gt;`
911
+ * - `"headline-3" -&gt; &lt;h3&gt;`
912
+ * - `"headline-4" -&gt; &lt;h4&gt;`
913
+ * - `"headline-5" -&gt; &lt;h5&gt;`
914
+ * - `"headline-6" -&gt; &lt;h6&gt;`
915
+ * - `"subtitle-1" -&gt; &lt;h5&gt;`
916
+ * - `"subtitle-2" -&gt; &lt;h6&gt;`
917
+ * - `"body-1" -&gt; &lt;p&gt;`
918
+ * - `"body-2" -&gt; &lt;p&gt;`
919
+ * - `"caption" -&gt; &lt;caption&gt;`
920
+ * - `"overline" -&gt; &lt;span&gt;`
921
+ */
922
+ as?: CustomTypographyComponent;
923
+ }
924
+ &nbsp;
925
+ /**
926
+ * **Server Component**
927
+ *
928
+ * Render text with one of the material design typography styles applied and
929
+ * optional styles like font-weight, font-style, text color, etc.
930
+ *
931
+ * @example
932
+ * All Example
933
+ * ```tsx
934
+ * import { Typography } from "@react-md/core":
935
+ *
936
+ * export function Example() {
937
+ * return (
938
+ * &lt;&gt;
939
+ * &lt;Typography type="headline-1"&gt;Headline 1&lt;/Typography&gt;
940
+ * &lt;Typography type="headline-2"&gt;Headline 2&lt;/Typography&gt;
941
+ * &lt;Typography type="headline-3"&gt;Headline 3&lt;/Typography&gt;
942
+ * &lt;Typography type="headline-4"&gt;Headline 4&lt;/Typography&gt;
943
+ * &lt;Typography type="headline-5"&gt;Headline 5&lt;/Typography&gt;
944
+ * &lt;Typography type="headline-6"&gt;Headline 6&lt;/Typography&gt;
945
+ * &lt;Typography type="subtitle-1"&gt;Subtitle 1&lt;/Typography&gt;
946
+ * &lt;Typography type="subtitle-2"&gt;Subtitle 2&lt;/Typography&gt;
947
+ * &lt;Typography&gt;
948
+ * A paragraph of text.
949
+ * &lt;/Typography&gt;
950
+ * &lt;Typography type="body-1"&gt;
951
+ * A paragraph of text.
952
+ * &lt;/Typography&gt;
953
+ * &lt;Typography type="body-2"&gt;
954
+ * Another paragraph of text.
955
+ * &lt;/Typography&gt;
956
+ * &lt;Typography type="caption" component="h5"&gt;
957
+ * Caption text
958
+ * &lt;/Typography&gt;
959
+ * &lt;Typography type="overline" component="h5"&gt;
960
+ * Overline text
961
+ * &lt;/Typography&gt;
962
+ * &lt;/&gt;
963
+ * ):
964
+ * }
965
+ * ```
966
+ */
967
+ export const Typography = forwardRef&lt;TypographyHTMLElement, TypographyProps&gt;(
968
+ function Typography(props, ref): ReactElement {
969
+ const {
970
+ as,
971
+ type = "body-1",
972
+ className,
973
+ margin,
974
+ fontStyle,
975
+ fontWeight,
976
+ textAlign,
977
+ textColor,
978
+ textDecoration,
979
+ textTransform,
980
+ textOverflow,
981
+ children,
982
+ ...remaining
983
+ } = props;
984
+ &nbsp;
985
+ const Component = getComponent(as, type);
986
+ return (
987
+ &lt;Component
988
+ {...remaining}
989
+ ref={ref}
990
+ className={typography({
991
+ type,
992
+ margin,
993
+ fontStyle,
994
+ fontWeight,
995
+ textAlign,
996
+ textColor,
997
+ textDecoration,
998
+ textTransform,
999
+ textOverflow,
1000
+ className,
1001
+ })}
1002
+ &gt;
1003
+ {children}
1004
+ &lt;/Component&gt;
1005
+ );
1006
+ }
1007
+ );
1008
+ &nbsp;</pre></td></tr></table></pre>
1009
+
1010
+ <div class='push'></div><!-- for sticky footer -->
1011
+ </div><!-- /wrapper -->
1012
+ <div class='footer quiet pad2 space-top1 center small'>
1013
+ Code coverage generated by
1014
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
1015
+ at 2024-01-26T23:16:34.518Z
1016
+ </div>
1017
+ <script src="prettify.js"></script>
1018
+ <script>
1019
+ window.onload = function () {
1020
+ prettyPrint();
1021
+ };
1022
+ </script>
1023
+ <script src="sorter.js"></script>
1024
+ <script src="block-navigation.js"></script>
1025
+ </body>
1026
+ </html>
1027
+