@khanacademy/perseus 5.0.0 → 6.0.0

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 (113) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/components/fixed-to-responsive.d.ts +27 -1
  3. package/dist/components/fixed-to-responsive.js.flow +27 -1
  4. package/dist/components/graph.d.ts +42 -26
  5. package/dist/components/graph.js.flow +42 -28
  6. package/dist/components/graphie.d.ts +34 -22
  7. package/dist/components/graphie.js.flow +37 -24
  8. package/dist/components/hud.d.ts +8 -14
  9. package/dist/components/hud.js.flow +7 -14
  10. package/dist/components/inline-icon.d.ts +9 -19
  11. package/dist/components/inline-icon.js.flow +26 -13
  12. package/dist/components/lint.d.ts +41 -13
  13. package/dist/components/lint.js.flow +42 -13
  14. package/dist/components/math-output.d.ts +15 -11
  15. package/dist/components/math-output.js.flow +15 -11
  16. package/dist/components/sortable.d.ts +17 -9
  17. package/dist/components/sortable.js.flow +22 -9
  18. package/dist/components/svg-image.d.ts +5 -3
  19. package/dist/components/svg-image.js.flow +5 -3
  20. package/dist/components/tooltip.d.ts +45 -4
  21. package/dist/components/tooltip.js.flow +44 -31
  22. package/dist/es/index.css +0 -3
  23. package/dist/es/index.js +477 -648
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +481 -645
  27. package/dist/index.js.map +1 -1
  28. package/dist/perseus-types.d.ts +11 -9
  29. package/dist/perseus-types.js.flow +11 -9
  30. package/dist/renderer.d.ts +2 -2
  31. package/dist/renderer.js.flow +1 -3
  32. package/dist/styles/shared.d.ts +0 -1
  33. package/dist/styles/shared.js.flow +0 -1
  34. package/dist/types.d.ts +0 -10
  35. package/dist/types.js.flow +0 -13
  36. package/dist/util/a11y.d.ts +0 -1
  37. package/dist/util/a11y.js.flow +0 -1
  38. package/dist/util/interactive.d.ts +2 -0
  39. package/dist/util/interactive.js.flow +2 -0
  40. package/dist/util.d.ts +3 -3
  41. package/dist/util.js.flow +4 -3
  42. package/dist/widgets/grapher.d.ts +1 -1
  43. package/dist/widgets/grapher.js.flow +12 -3
  44. package/dist/widgets/matcher.d.ts +7 -3
  45. package/dist/widgets/matcher.js.flow +7 -3
  46. package/dist/widgets/number-line.d.ts +1 -1
  47. package/dist/widgets/number-line.js.flow +1 -1
  48. package/package.json +2 -2
  49. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  50. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  51. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  52. package/src/components/__stories__/lint.stories.tsx +56 -21
  53. package/src/components/__stories__/sortable.stories.tsx +5 -5
  54. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  55. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  56. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  57. package/src/components/__tests__/sortable.test.tsx +54 -16
  58. package/src/components/__tests__/sorter.test.tsx +12 -9
  59. package/src/components/fixed-to-responsive.tsx +43 -38
  60. package/src/components/graph.tsx +95 -81
  61. package/src/components/graphie.tsx +62 -32
  62. package/src/components/hud.tsx +104 -115
  63. package/src/components/inline-icon.tsx +15 -32
  64. package/src/components/input-with-examples.tsx +4 -4
  65. package/src/components/lint.tsx +47 -41
  66. package/src/components/math-output.tsx +17 -11
  67. package/src/components/simple-keypad-input.tsx +2 -2
  68. package/src/components/sortable.tsx +134 -94
  69. package/src/components/svg-image.tsx +10 -11
  70. package/src/components/tooltip.tsx +189 -171
  71. package/src/interactive2/types.ts +2 -2
  72. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  73. package/src/perseus-types.ts +13 -9
  74. package/src/renderer.tsx +11 -22
  75. package/src/types.ts +0 -18
  76. package/src/util/interactive.ts +18 -5
  77. package/src/util/tex.ts +13 -77
  78. package/src/util.ts +3 -4
  79. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  80. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  81. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  82. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  83. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  84. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  85. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  86. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  87. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  88. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  89. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  90. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  91. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  92. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  93. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  94. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  95. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  96. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  97. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  98. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  99. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  100. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  101. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  102. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  103. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  104. package/src/widgets/expression.tsx +9 -6
  105. package/src/widgets/grapher.tsx +3 -3
  106. package/src/widgets/image.tsx +2 -2
  107. package/src/widgets/interactive-graph.tsx +5 -5
  108. package/src/widgets/matcher.tsx +43 -24
  109. package/src/widgets/number-line.tsx +1 -1
  110. package/src/widgets/simulator.tsx +4 -6
  111. package/{tsconfig.json → tsconfig-build.json} +6 -6
  112. package/tsconfig-build.tsbuildinfo +1 -0
  113. package/tsconfig.tsbuildinfo +0 -1
package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap CHANGED
@@ -1,5 +1,101 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`Sortable renders a spinner while waiting for the TeX renderer to load: first render: displays a spinner 1`] = `
4
+ <div>
5
+ <div
6
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
7
+ >
8
+ <svg
9
+ height="96"
10
+ viewBox="0 0 96 96"
11
+ width="96"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ >
14
+ <path
15
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
16
+ d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
17
+ fill-rule="nonzero"
18
+ />
19
+ </svg>
20
+ </div>
21
+ <div
22
+ style="display: none;"
23
+ >
24
+ <div
25
+ class="fake-tex"
26
+ >
27
+ 1
28
+ </div>
29
+ </div>
30
+ </div>
31
+ `;
32
+
33
+ exports[`Sortable renders a spinner while waiting for the TeX renderer to load: second render: displays the sortable 1`] = `
34
+ <div>
35
+ <ul
36
+ class="sortable_13d4756 perseus-sortable"
37
+ >
38
+ <li
39
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
40
+ style="position: static; margin: 0px 5px 0px 0px;"
41
+ >
42
+ <div
43
+ class="perseus-renderer perseus-renderer-responsive"
44
+ >
45
+ <div
46
+ class="paragraph"
47
+ data-perseus-paragraph-index="0"
48
+ >
49
+ <div
50
+ class="paragraph"
51
+ >
52
+ a
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </li>
57
+ <li
58
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
59
+ style="position: static; margin: 0px 5px 0px 0px;"
60
+ >
61
+ <div
62
+ class="perseus-renderer perseus-renderer-responsive"
63
+ >
64
+ <div
65
+ class="paragraph"
66
+ data-perseus-paragraph-index="0"
67
+ >
68
+ <div
69
+ class="paragraph"
70
+ >
71
+ b
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </li>
76
+ <li
77
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
78
+ style="position: static; margin: 0px;"
79
+ >
80
+ <div
81
+ class="perseus-renderer perseus-renderer-responsive"
82
+ >
83
+ <div
84
+ class="paragraph"
85
+ data-perseus-paragraph-index="0"
86
+ >
87
+ <div
88
+ class="paragraph"
89
+ >
90
+ c
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </li>
95
+ </ul>
96
+ </div>
97
+ `;
98
+
3
99
  exports[`Sortable should snapshot: first render 1`] = `
4
100
  <div>
5
101
  <ul
@@ -9,70 +105,58 @@ exports[`Sortable should snapshot: first render 1`] = `
9
105
  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
10
106
  style="position: static; margin: 0px 5px 0px 0px;"
11
107
  >
12
- <span
13
- class="mock-KatexProvider"
108
+ <div
109
+ class="perseus-renderer perseus-renderer-responsive"
14
110
  >
15
111
  <div
16
- class="perseus-renderer perseus-renderer-responsive"
112
+ class="paragraph"
113
+ data-perseus-paragraph-index="0"
17
114
  >
18
115
  <div
19
116
  class="paragraph"
20
- data-perseus-paragraph-index="0"
21
117
  >
22
- <div
23
- class="paragraph"
24
- >
25
- a
26
- </div>
118
+ a
27
119
  </div>
28
120
  </div>
29
- </span>
121
+ </div>
30
122
  </li>
31
123
  <li
32
124
  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
33
125
  style="position: static; margin: 0px 5px 0px 0px;"
34
126
  >
35
- <span
36
- class="mock-KatexProvider"
127
+ <div
128
+ class="perseus-renderer perseus-renderer-responsive"
37
129
  >
38
130
  <div
39
- class="perseus-renderer perseus-renderer-responsive"
131
+ class="paragraph"
132
+ data-perseus-paragraph-index="0"
40
133
  >
41
134
  <div
42
135
  class="paragraph"
43
- data-perseus-paragraph-index="0"
44
136
  >
45
- <div
46
- class="paragraph"
47
- >
48
- b
49
- </div>
137
+ b
50
138
  </div>
51
139
  </div>
52
- </span>
140
+ </div>
53
141
  </li>
54
142
  <li
55
143
  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
56
144
  style="position: static; margin: 0px;"
57
145
  >
58
- <span
59
- class="mock-KatexProvider"
146
+ <div
147
+ class="perseus-renderer perseus-renderer-responsive"
60
148
  >
61
149
  <div
62
- class="perseus-renderer perseus-renderer-responsive"
150
+ class="paragraph"
151
+ data-perseus-paragraph-index="0"
63
152
  >
64
153
  <div
65
154
  class="paragraph"
66
- data-perseus-paragraph-index="0"
67
155
  >
68
- <div
69
- class="paragraph"
70
- >
71
- c
72
- </div>
156
+ c
73
157
  </div>
74
158
  </div>
75
- </span>
159
+ </div>
76
160
  </li>
77
161
  </ul>
78
162
  </div>
package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap CHANGED
@@ -2,296 +2,264 @@
2
2
 
3
3
  exports[`sorter widget should snapshot on mobile: first mobile render 1`] = `
4
4
  <div>
5
- <span
6
- class="mock-KatexProvider"
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive"
7
7
  >
8
8
  <div
9
- class="perseus-renderer perseus-renderer-responsive"
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
10
11
  >
11
12
  <div
12
13
  class="paragraph"
13
- data-perseus-paragraph-index="0"
14
14
  >
15
- <div
16
- class="paragraph"
17
- >
18
- <strong>
19
- Arrange the following measurements in order from smallest to largest.
20
- </strong>
21
- </div>
15
+ <strong>
16
+ Arrange the following measurements in order from smallest to largest.
17
+ </strong>
22
18
  </div>
19
+ </div>
20
+ <div
21
+ class="paragraph"
22
+ data-perseus-paragraph-index="1"
23
+ >
23
24
  <div
24
25
  class="paragraph"
25
- data-perseus-paragraph-index="1"
26
26
  >
27
27
  <div
28
- class="paragraph"
28
+ class="perseus-widget-container widget-nohighlight widget-block"
29
29
  >
30
30
  <div
31
- class="perseus-widget-container widget-nohighlight widget-block"
31
+ class="perseus-widget-sorter perseus-clearfix"
32
32
  >
33
- <div
34
- class="perseus-widget-sorter perseus-clearfix"
33
+ <ul
34
+ class="sortable_13d4756 perseus-sortable"
35
35
  >
36
- <ul
37
- class="sortable_13d4756 perseus-sortable"
36
+ <li
37
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
38
+ style="position: static; margin: 0px 8px 0px 0px;"
38
39
  >
39
- <li
40
- class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
41
- style="position: static; margin: 0px 8px 0px 0px;"
40
+ <div
41
+ class="perseus-renderer perseus-renderer-responsive"
42
42
  >
43
- <span
44
- class="mock-KatexProvider"
43
+ <div
44
+ class="paragraph"
45
+ data-perseus-paragraph-index="0"
45
46
  >
46
47
  <div
47
- class="perseus-renderer perseus-renderer-responsive"
48
+ class="paragraph"
48
49
  >
49
- <div
50
- class="paragraph"
51
- data-perseus-paragraph-index="0"
50
+ <span
51
+ style="white-space: nowrap;"
52
52
  >
53
- <div
54
- class="paragraph"
53
+ <span />
54
+ <span
55
+ class="tex-mock"
55
56
  >
56
- <span
57
- style="white-space: nowrap;"
58
- >
59
- <span />
60
- <span
61
- class="tex-mock"
62
- >
63
- 15
64
- </span>
65
- <span />
66
- </span>
67
- grams
68
- </div>
69
- </div>
57
+ 15
58
+ </span>
59
+ <span />
60
+ </span>
61
+ grams
70
62
  </div>
71
- </span>
72
- </li>
73
- <li
74
- class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
75
- style="position: static; margin: 0px 8px 0px 0px;"
63
+ </div>
64
+ </div>
65
+ </li>
66
+ <li
67
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
68
+ style="position: static; margin: 0px 8px 0px 0px;"
69
+ >
70
+ <div
71
+ class="perseus-renderer perseus-renderer-responsive"
76
72
  >
77
- <span
78
- class="mock-KatexProvider"
73
+ <div
74
+ class="paragraph"
75
+ data-perseus-paragraph-index="0"
79
76
  >
80
77
  <div
81
- class="perseus-renderer perseus-renderer-responsive"
78
+ class="paragraph"
82
79
  >
83
- <div
84
- class="paragraph"
85
- data-perseus-paragraph-index="0"
80
+ <span
81
+ style="white-space: nowrap;"
86
82
  >
87
- <div
88
- class="paragraph"
83
+ <span />
84
+ <span
85
+ class="tex-mock"
89
86
  >
90
- <span
91
- style="white-space: nowrap;"
92
- >
93
- <span />
94
- <span
95
- class="tex-mock"
96
- >
97
- 0.005
98
- </span>
99
- <span />
100
- </span>
101
- kilograms
102
- </div>
103
- </div>
87
+ 0.005
88
+ </span>
89
+ <span />
90
+ </span>
91
+ kilograms
104
92
  </div>
105
- </span>
106
- </li>
107
- <li
108
- class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
109
- style="position: static; margin: 0px;"
93
+ </div>
94
+ </div>
95
+ </li>
96
+ <li
97
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
98
+ style="position: static; margin: 0px;"
99
+ >
100
+ <div
101
+ class="perseus-renderer perseus-renderer-responsive"
110
102
  >
111
- <span
112
- class="mock-KatexProvider"
103
+ <div
104
+ class="paragraph"
105
+ data-perseus-paragraph-index="0"
113
106
  >
114
107
  <div
115
- class="perseus-renderer perseus-renderer-responsive"
108
+ class="paragraph"
116
109
  >
117
- <div
118
- class="paragraph"
119
- data-perseus-paragraph-index="0"
110
+ <span
111
+ style="white-space: nowrap;"
120
112
  >
121
- <div
122
- class="paragraph"
113
+ <span />
114
+ <span
115
+ class="tex-mock"
123
116
  >
124
- <span
125
- style="white-space: nowrap;"
126
- >
127
- <span />
128
- <span
129
- class="tex-mock"
130
- >
131
- 55
132
- </span>
133
- <span />
134
- </span>
135
- grams
136
- </div>
137
- </div>
117
+ 55
118
+ </span>
119
+ <span />
120
+ </span>
121
+ grams
138
122
  </div>
139
- </span>
140
- </li>
141
- </ul>
142
- </div>
123
+ </div>
124
+ </div>
125
+ </li>
126
+ </ul>
143
127
  </div>
144
128
  </div>
145
129
  </div>
146
130
  </div>
147
- </span>
131
+ </div>
148
132
  </div>
149
133
  `;
150
134
 
151
135
  exports[`sorter widget should snapshot: first render 1`] = `
152
136
  <div>
153
- <span
154
- class="mock-KatexProvider"
137
+ <div
138
+ class="perseus-renderer perseus-renderer-responsive"
155
139
  >
156
140
  <div
157
- class="perseus-renderer perseus-renderer-responsive"
141
+ class="paragraph"
142
+ data-perseus-paragraph-index="0"
158
143
  >
159
144
  <div
160
145
  class="paragraph"
161
- data-perseus-paragraph-index="0"
162
146
  >
163
- <div
164
- class="paragraph"
165
- >
166
- <strong>
167
- Arrange the following measurements in order from smallest to largest.
168
- </strong>
169
- </div>
147
+ <strong>
148
+ Arrange the following measurements in order from smallest to largest.
149
+ </strong>
170
150
  </div>
151
+ </div>
152
+ <div
153
+ class="paragraph"
154
+ data-perseus-paragraph-index="1"
155
+ >
171
156
  <div
172
157
  class="paragraph"
173
- data-perseus-paragraph-index="1"
174
158
  >
175
159
  <div
176
- class="paragraph"
160
+ class="perseus-widget-container widget-nohighlight widget-block"
177
161
  >
178
162
  <div
179
- class="perseus-widget-container widget-nohighlight widget-block"
163
+ class="perseus-widget-sorter perseus-clearfix"
180
164
  >
181
- <div
182
- class="perseus-widget-sorter perseus-clearfix"
165
+ <ul
166
+ class="sortable_13d4756 perseus-sortable"
183
167
  >
184
- <ul
185
- class="sortable_13d4756 perseus-sortable"
168
+ <li
169
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
170
+ style="position: static; margin: 0px 5px 0px 0px;"
186
171
  >
187
- <li
188
- class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
189
- style="position: static; margin: 0px 5px 0px 0px;"
172
+ <div
173
+ class="perseus-renderer perseus-renderer-responsive"
190
174
  >
191
- <span
192
- class="mock-KatexProvider"
175
+ <div
176
+ class="paragraph"
177
+ data-perseus-paragraph-index="0"
193
178
  >
194
179
  <div
195
- class="perseus-renderer perseus-renderer-responsive"
180
+ class="paragraph"
196
181
  >
197
- <div
198
- class="paragraph"
199
- data-perseus-paragraph-index="0"
182
+ <span
183
+ style="white-space: nowrap;"
200
184
  >
201
- <div
202
- class="paragraph"
185
+ <span />
186
+ <span
187
+ class="tex-mock"
203
188
  >
204
- <span
205
- style="white-space: nowrap;"
206
- >
207
- <span />
208
- <span
209
- class="tex-mock"
210
- >
211
- 15
212
- </span>
213
- <span />
214
- </span>
215
- grams
216
- </div>
217
- </div>
189
+ 15
190
+ </span>
191
+ <span />
192
+ </span>
193
+ grams
218
194
  </div>
219
- </span>
220
- </li>
221
- <li
222
- class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
223
- style="position: static; margin: 0px 5px 0px 0px;"
195
+ </div>
196
+ </div>
197
+ </li>
198
+ <li
199
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
200
+ style="position: static; margin: 0px 5px 0px 0px;"
201
+ >
202
+ <div
203
+ class="perseus-renderer perseus-renderer-responsive"
224
204
  >
225
- <span
226
- class="mock-KatexProvider"
205
+ <div
206
+ class="paragraph"
207
+ data-perseus-paragraph-index="0"
227
208
  >
228
209
  <div
229
- class="perseus-renderer perseus-renderer-responsive"
210
+ class="paragraph"
230
211
  >
231
- <div
232
- class="paragraph"
233
- data-perseus-paragraph-index="0"
212
+ <span
213
+ style="white-space: nowrap;"
234
214
  >
235
- <div
236
- class="paragraph"
215
+ <span />
216
+ <span
217
+ class="tex-mock"
237
218
  >
238
- <span
239
- style="white-space: nowrap;"
240
- >
241
- <span />
242
- <span
243
- class="tex-mock"
244
- >
245
- 0.005
246
- </span>
247
- <span />
248
- </span>
249
- kilograms
250
- </div>
251
- </div>
219
+ 0.005
220
+ </span>
221
+ <span />
222
+ </span>
223
+ kilograms
252
224
  </div>
253
- </span>
254
- </li>
255
- <li
256
- class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
257
- style="position: static; margin: 0px;"
225
+ </div>
226
+ </div>
227
+ </li>
228
+ <li
229
+ class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
230
+ style="position: static; margin: 0px;"
231
+ >
232
+ <div
233
+ class="perseus-renderer perseus-renderer-responsive"
258
234
  >
259
- <span
260
- class="mock-KatexProvider"
235
+ <div
236
+ class="paragraph"
237
+ data-perseus-paragraph-index="0"
261
238
  >
262
239
  <div
263
- class="perseus-renderer perseus-renderer-responsive"
240
+ class="paragraph"
264
241
  >
265
- <div
266
- class="paragraph"
267
- data-perseus-paragraph-index="0"
242
+ <span
243
+ style="white-space: nowrap;"
268
244
  >
269
- <div
270
- class="paragraph"
245
+ <span />
246
+ <span
247
+ class="tex-mock"
271
248
  >
272
- <span
273
- style="white-space: nowrap;"
274
- >
275
- <span />
276
- <span
277
- class="tex-mock"
278
- >
279
- 55
280
- </span>
281
- <span />
282
- </span>
283
- grams
284
- </div>
285
- </div>
249
+ 55
250
+ </span>
251
+ <span />
252
+ </span>
253
+ grams
286
254
  </div>
287
- </span>
288
- </li>
289
- </ul>
290
- </div>
255
+ </div>
256
+ </div>
257
+ </li>
258
+ </ul>
291
259
  </div>
292
260
  </div>
293
261
  </div>
294
262
  </div>
295
- </span>
263
+ </div>
296
264
  </div>
297
265
  `;