@khanacademy/math-input 14.1.0 → 14.2.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 (19) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/components/aphrodite-css-transition-group/index.d.ts +51 -0
  3. package/dist/components/aphrodite-css-transition-group/transition-child.d.ts +11 -0
  4. package/dist/components/aphrodite-css-transition-group/types.d.ts +18 -0
  5. package/dist/components/aphrodite-css-transition-group/util.d.ts +7 -0
  6. package/dist/components/keypad/mobile-keypad.d.ts +10 -12
  7. package/dist/es/index.js +324 -54
  8. package/dist/es/index.js.map +1 -1
  9. package/dist/index.js +326 -55
  10. package/dist/index.js.map +1 -1
  11. package/package.json +5 -3
  12. package/src/components/aphrodite-css-transition-group/index.tsx +78 -0
  13. package/src/components/aphrodite-css-transition-group/transition-child.tsx +191 -0
  14. package/src/components/aphrodite-css-transition-group/types.ts +20 -0
  15. package/src/components/aphrodite-css-transition-group/util.ts +97 -0
  16. package/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap +593 -0
  17. package/src/components/keypad/__tests__/mobile-keypad.test.tsx +115 -0
  18. package/src/components/keypad/mobile-keypad.tsx +66 -79
  19. package/tsconfig-build.tsbuildinfo +1 -1
package/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap ADDED
@@ -0,0 +1,593 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`mobile keypad should not render the keypad when not active 1`] = `<div />`;
4
+
5
+ exports[`mobile keypad should render keypad when active 1`] = `
6
+ <div>
7
+ <div
8
+ class="initial_4qg14c-o_O-keypadContainer_9ki71g inlineStyles_fr63ed"
9
+ >
10
+ <div
11
+ class="default_xu2jcg"
12
+ >
13
+ <div
14
+ class="default_xu2jcg-o_O-wrapper_144oaus"
15
+ >
16
+ <div
17
+ class="default_xu2jcg-o_O-tabbar_721koc"
18
+ role="tablist"
19
+ >
20
+ <div
21
+ class="default_xu2jcg-o_O-pages_cjo0m2"
22
+ />
23
+ <div
24
+ class="default_xu2jcg"
25
+ >
26
+ <button
27
+ aria-disabled="false"
28
+ aria-label="Dismiss"
29
+ aria-selected="false"
30
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
31
+ role="tab"
32
+ type="button"
33
+ >
34
+ <div
35
+ class="default_xu2jcg-o_O-base_1pupywz"
36
+ >
37
+ <div
38
+ class="default_xu2jcg-o_O-innerBox_qdbgl3"
39
+ >
40
+ <svg
41
+ fill="none"
42
+ height="44"
43
+ viewBox="0 0 44 44"
44
+ width="44"
45
+ xmlns="http://www.w3.org/2000/svg"
46
+ >
47
+ <path
48
+ clip-rule="evenodd"
49
+ d="M28.7071 15.2929C28.3166 14.9024 27.6834 14.9024 27.2929 15.2929L22 20.5858L16.7071 15.2929C16.3166 14.9024 15.6834 14.9024 15.2929 15.2929C14.9024 15.6834 14.9024 16.3166 15.2929 16.7071L20.5858 22L15.2929 27.2929C14.9024 27.6834 14.9024 28.3166 15.2929 28.7071C15.6834 29.0976 16.3166 29.0976 16.7071 28.7071L22 23.4142L27.2929 28.7071C27.6834 29.0976 28.3166 29.0976 28.7071 28.7071C29.0976 28.3166 29.0976 27.6834 28.7071 27.2929L23.4142 22L28.7071 16.7071C29.0976 16.3166 29.0976 15.6834 28.7071 15.2929Z"
50
+ fill="rgba(33,36,44,0.64)"
51
+ fill-rule="evenodd"
52
+ />
53
+ </svg>
54
+ </div>
55
+ </div>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ <div
60
+ class="default_xu2jcg-o_O-keypadInnerContainer_uc6399"
61
+ >
62
+ <div
63
+ aria-label="Keypad"
64
+ class="default_xu2jcg-o_O-keypadGrid_ztxlrb-o_O-fractionsGrid_1aelnry"
65
+ tabindex="0"
66
+ >
67
+ <div
68
+ class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
69
+ data-test-id="NUM_1"
70
+ >
71
+ <button
72
+ aria-disabled="false"
73
+ aria-label="1"
74
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
75
+ type="button"
76
+ >
77
+ <div
78
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
79
+ >
80
+ <div
81
+ class="default_xu2jcg-o_O-base_7gd6lb"
82
+ >
83
+ <svg
84
+ fill="none"
85
+ height="40"
86
+ viewBox="0 0 40 40"
87
+ width="40"
88
+ xmlns="http://www.w3.org/2000/svg"
89
+ >
90
+ <path
91
+ d="M25.363 27.0441v1.956h-9.42v-1.956h3.6v-10.824c0-.384.012-.776.036-1.176l-2.772 2.34c-.12.096-.244.16-.372.192-.12.024-.236.024-.348 0-.104-.024-.2-.06-.288-.108-.08-.056-.144-.116-.192-.18l-.804-1.128 5.208-4.476h2.1v15.36h3.252z"
92
+ fill="#21242C"
93
+ />
94
+ </svg>
95
+ </div>
96
+ </div>
97
+ </button>
98
+ </div>
99
+ <div
100
+ class="default_xu2jcg-o_O-inlineStyles_4h080i"
101
+ data-test-id="NUM_2"
102
+ >
103
+ <button
104
+ aria-disabled="false"
105
+ aria-label="2"
106
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
107
+ type="button"
108
+ >
109
+ <div
110
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
111
+ >
112
+ <div
113
+ class="default_xu2jcg-o_O-base_7gd6lb"
114
+ >
115
+ <svg
116
+ fill="none"
117
+ height="40"
118
+ viewBox="0 0 40 40"
119
+ width="40"
120
+ xmlns="http://www.w3.org/2000/svg"
121
+ >
122
+ <path
123
+ d="M24.8471 26.5638c.28 0 .5.084.66.252.16.16.24.368.24.624v1.56h-11.688v-.876c0-.176.036-.36.108-.552.072-.192.188-.368.348-.528l5.376-5.388c.456-.456.86-.892 1.212-1.308.36-.416.664-.832.912-1.248.256-.416.448-.836.576-1.26.136-.432.204-.884.204-1.356 0-.456-.072-.856-.216-1.2-.136-.352-.328-.64-.576-.864-.24-.232-.532-.404-.876-.516-.336-.12-.708-.18-1.116-.18-.392 0-.756.056-1.092.168-.328.112-.624.268-.888.468-.256.2-.472.44-.648.72-.168.272-.292.572-.372.9-.12.328-.276.548-.468.66-.184.112-.456.136-.816.072l-1.356-.24c.12-.816.344-1.532.672-2.148.336-.616.756-1.128 1.26-1.536.504-.416 1.08-.728 1.728-.936.656-.216 1.364-.324 2.124-.324.768 0 1.472.116 2.112.348.648.224 1.204.548 1.668.972.472.416.84.924 1.104 1.524.264.6.396 1.276.396 2.028 0 .64-.096 1.232-.288 1.776-.184.544-.436 1.064-.756 1.56s-.696.98-1.128 1.452c-.424.464-.872.936-1.344 1.416l-4.176 4.272c.344-.096.688-.172 1.032-.228.352-.056.684-.084.996-.084h5.076z"
124
+ fill="#21242C"
125
+ />
126
+ </svg>
127
+ </div>
128
+ </div>
129
+ </button>
130
+ </div>
131
+ <div
132
+ class="default_xu2jcg-o_O-inlineStyles_ei5lhv"
133
+ data-test-id="NUM_3"
134
+ >
135
+ <button
136
+ aria-disabled="false"
137
+ aria-label="3"
138
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
139
+ type="button"
140
+ >
141
+ <div
142
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
143
+ >
144
+ <div
145
+ class="default_xu2jcg-o_O-base_7gd6lb"
146
+ >
147
+ <svg
148
+ fill="none"
149
+ height="40"
150
+ viewBox="0 0 40 40"
151
+ width="40"
152
+ xmlns="http://www.w3.org/2000/svg"
153
+ >
154
+ <path
155
+ d="M14.4552 16.4718c.12-.816.344-1.532.672-2.148.336-.616.756-1.128 1.26-1.536.504-.416 1.08-.728 1.728-.936.656-.216 1.364-.324 2.124-.324.768 0 1.464.112 2.088.336.632.216 1.172.52 1.62.912.456.392.804.86 1.044 1.404.248.544.372 1.14.372 1.788 0 .552-.068 1.04-.204 1.464-.128.416-.316.784-.564 1.104-.24.32-.536.588-.888.804-.352.216-.748.396-1.188.54 1.072.312 1.876.812 2.412 1.5.536.68.804 1.536.804 2.568 0 .832-.156 1.572-.468 2.22-.312.648-.736 1.196-1.272 1.644-.528.448-1.148.792-1.86 1.032-.704.232-1.452.348-2.244.348-.888 0-1.656-.104-2.304-.312-.648-.216-1.208-.52-1.68-.912-.464-.4-.852-.88-1.164-1.44-.312-.56-.576-1.188-.792-1.884l1.116-.468c.296-.128.576-.164.84-.108.272.056.468.204.588.444.128.256.272.532.432.828.16.288.364.556.612.804.256.24.568.444.936.612.376.16.836.24 1.38.24.552 0 1.032-.088 1.44-.264.416-.184.76-.416 1.032-.696.28-.288.488-.608.624-.96s.204-.7.204-1.044c0-.432-.052-.828-.156-1.188-.104-.368-.308-.68-.612-.936-.296-.256-.72-.456-1.272-.6-.544-.152-1.26-.228-2.148-.228v-1.86c.728-.008 1.34-.08 1.836-.216.504-.144.904-.336 1.2-.576.304-.248.52-.544.648-.888.136-.344.204-.72.204-1.128 0-.44-.068-.828-.204-1.164-.136-.336-.328-.616-.576-.84-.24-.232-.528-.404-.864-.516-.336-.112-.708-.168-1.116-.168-.392 0-.756.056-1.092.168-.328.112-.624.268-.888.468-.256.2-.472.44-.648.72-.176.272-.304.572-.384.9-.112.328-.264.548-.456.66-.184.112-.456.136-.816.072l-1.356-.24z"
156
+ fill="#21242C"
157
+ />
158
+ </svg>
159
+ </div>
160
+ </div>
161
+ </button>
162
+ </div>
163
+ <div
164
+ class="default_xu2jcg-o_O-inlineStyles_1drshe8"
165
+ data-test-id="NUM_4"
166
+ >
167
+ <button
168
+ aria-disabled="false"
169
+ aria-label="4"
170
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
171
+ type="button"
172
+ >
173
+ <div
174
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
175
+ >
176
+ <div
177
+ class="default_xu2jcg-o_O-base_7gd6lb"
178
+ >
179
+ <svg
180
+ fill="none"
181
+ height="40"
182
+ viewBox="0 0 40 40"
183
+ width="40"
184
+ xmlns="http://www.w3.org/2000/svg"
185
+ >
186
+ <path
187
+ d="M21.691 22.616v-6.312c0-.504.036-1.056.108-1.656l-5.808 7.968h5.7zm4.632 0v1.488c0 .144-.048.268-.144.372-.088.104-.224.156-.408.156h-1.836V29h-2.244v-4.368h-7.476c-.184 0-.344-.052-.48-.156-.128-.112-.212-.248-.252-.408l-.264-1.32 8.292-11.04h2.424v10.908h2.388z"
188
+ fill="#21242C"
189
+ />
190
+ </svg>
191
+ </div>
192
+ </div>
193
+ </button>
194
+ </div>
195
+ <div
196
+ class="default_xu2jcg-o_O-inlineStyles_1j1cer"
197
+ data-test-id="NUM_5"
198
+ >
199
+ <button
200
+ aria-disabled="false"
201
+ aria-label="5"
202
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
203
+ type="button"
204
+ >
205
+ <div
206
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
207
+ >
208
+ <div
209
+ class="default_xu2jcg-o_O-base_7gd6lb"
210
+ >
211
+ <svg
212
+ fill="none"
213
+ height="40"
214
+ viewBox="0 0 40 40"
215
+ width="40"
216
+ xmlns="http://www.w3.org/2000/svg"
217
+ >
218
+ <path
219
+ d="M17.6591 18.1042c.416-.088.812-.152 1.188-.192.384-.04.752-.06 1.104-.06.904 0 1.7.136 2.388.408.696.264 1.276.632 1.74 1.104.472.472.824 1.028 1.056 1.668.24.632.36 1.32.36 2.064 0 .92-.16 1.756-.48 2.508-.32.752-.764 1.396-1.332 1.932-.568.528-1.24.936-2.016 1.224-.768.288-1.6.432-2.496.432-.528 0-1.032-.052-1.512-.156-.472-.104-.916-.244-1.332-.42-.416-.184-.8-.392-1.152-.624-.352-.24-.668-.488-.948-.744l.792-1.104c.168-.24.392-.36.672-.36.176 0 .368.064.576.192.208.128.448.268.72.42.28.144.608.28.984.408.376.128.824.192 1.344.192.568 0 1.076-.092 1.524-.276.448-.184.824-.44 1.128-.768.312-.336.548-.736.708-1.2.16-.464.24-.972.24-1.524 0-.504-.076-.956-.228-1.356-.144-.4-.364-.74-.66-1.02-.288-.28-.652-.492-1.092-.636-.44-.152-.948-.228-1.524-.228-.424 0-.86.036-1.308.108-.44.072-.888.184-1.344.336l-1.608-.456 1.416-8.256h8.364v1.116c0 .368-.116.668-.348.9-.232.232-.62.348-1.164.348h-5.064l-.696 4.02z"
220
+ fill="#21242C"
221
+ />
222
+ </svg>
223
+ </div>
224
+ </div>
225
+ </button>
226
+ </div>
227
+ <div
228
+ class="default_xu2jcg-o_O-inlineStyles_1qj00wi"
229
+ data-test-id="NUM_6"
230
+ >
231
+ <button
232
+ aria-disabled="false"
233
+ aria-label="6"
234
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
235
+ type="button"
236
+ >
237
+ <div
238
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
239
+ >
240
+ <div
241
+ class="default_xu2jcg-o_O-base_7gd6lb"
242
+ >
243
+ <svg
244
+ fill="none"
245
+ height="40"
246
+ viewBox="0 0 40 40"
247
+ width="40"
248
+ xmlns="http://www.w3.org/2000/svg"
249
+ >
250
+ <path
251
+ d="M19.975 27.0562c.52 0 .996-.084 1.428-.252.432-.176.8-.416 1.104-.72.312-.304.552-.664.72-1.08.168-.416.252-.868.252-1.356 0-.528-.084-1-.252-1.416-.16-.424-.392-.78-.696-1.068-.296-.288-.656-.508-1.08-.66-.416-.16-.876-.24-1.38-.24-.52 0-.992.088-1.416.264-.416.176-.772.416-1.068.72-.296.304-.524.66-.684 1.068-.16.408-.24.84-.24 1.296 0 .512.072.98.216 1.404.144.424.356.788.636 1.092.28.296.624.528 1.032.696.416.168.892.252 1.428.252zm-.948-8.976c-.128.16-.252.312-.372.456l-.336.432c.368-.208.772-.372 1.212-.492.44-.12.912-.18 1.416-.18.672 0 1.316.112 1.932.336.616.216 1.156.544 1.62.984.472.432.848.972 1.128 1.62.28.64.42 1.38.42 2.22 0 .8-.148 1.548-.444 2.244-.288.696-.696 1.304-1.224 1.824-.528.512-1.164.92-1.908 1.224-.736.296-1.552.444-2.448.444-.896 0-1.704-.144-2.424-.432-.72-.288-1.336-.692-1.848-1.212-.504-.528-.892-1.16-1.164-1.896-.272-.736-.408-1.556-.408-2.46 0-.784.168-1.604.504-2.46.336-.856.856-1.756 1.56-2.7l4.248-5.7c.128-.168.312-.312.552-.432.248-.12.524-.18.828-.18h2.28l-5.124 6.36z"
252
+ fill="#21242C"
253
+ />
254
+ </svg>
255
+ </div>
256
+ </div>
257
+ </button>
258
+ </div>
259
+ <div
260
+ class="default_xu2jcg-o_O-inlineStyles_1o7q2hf"
261
+ data-test-id="NUM_7"
262
+ >
263
+ <button
264
+ aria-disabled="false"
265
+ aria-label="7"
266
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
267
+ type="button"
268
+ >
269
+ <div
270
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
271
+ >
272
+ <div
273
+ class="default_xu2jcg-o_O-base_7gd6lb"
274
+ >
275
+ <svg
276
+ fill="none"
277
+ height="40"
278
+ viewBox="0 0 40 40"
279
+ width="40"
280
+ xmlns="http://www.w3.org/2000/svg"
281
+ >
282
+ <path
283
+ d="M26.083 11.7202v1.14c0 .336-.036.608-.108.816-.072.208-.144.384-.216.528l-6.828 13.896c-.12.256-.292.472-.516.648-.216.168-.504.252-.864.252h-1.86l6.96-13.668c.128-.248.256-.472.384-.672.128-.2.272-.392.432-.576h-8.628c-.16 0-.3-.06-.42-.18-.12-.128-.18-.272-.18-.432v-1.752h11.844z"
284
+ fill="#21242C"
285
+ />
286
+ </svg>
287
+ </div>
288
+ </div>
289
+ </button>
290
+ </div>
291
+ <div
292
+ class="default_xu2jcg-o_O-inlineStyles_11fd5hs"
293
+ data-test-id="NUM_8"
294
+ >
295
+ <button
296
+ aria-disabled="false"
297
+ aria-label="8"
298
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
299
+ type="button"
300
+ >
301
+ <div
302
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
303
+ >
304
+ <div
305
+ class="default_xu2jcg-o_O-base_7gd6lb"
306
+ >
307
+ <svg
308
+ fill="none"
309
+ height="40"
310
+ viewBox="0 0 40 40"
311
+ width="40"
312
+ xmlns="http://www.w3.org/2000/svg"
313
+ >
314
+ <path
315
+ d="M19.999 27.1518c.52 0 .984-.072 1.392-.216.408-.152.748-.36 1.02-.624.28-.272.492-.592.636-.96.144-.368.216-.768.216-1.2 0-.528-.084-.984-.252-1.368-.16-.384-.388-.7-.684-.948-.288-.256-.632-.444-1.032-.564-.4-.128-.832-.192-1.296-.192-.464 0-.896.064-1.296.192-.4.12-.748.308-1.044.564-.288.248-.516.564-.684.948-.16.384-.24.84-.24 1.368 0 .432.072.832.216 1.2.144.368.352.688.624.96.28.264.624.472 1.032.624.408.144.872.216 1.392.216zm0-13.644c-.472 0-.888.072-1.248.216-.352.144-.644.336-.876.576-.232.24-.408.524-.528.852-.112.32-.168.66-.168 1.02s.048.712.144 1.056c.104.344.264.652.48.924.224.264.516.476.876.636.36.16.8.24 1.32.24s.96-.08 1.32-.24c.36-.16.648-.372.864-.636.224-.272.384-.58.48-.924.104-.344.156-.696.156-1.056 0-.36-.06-.7-.18-1.02-.112-.328-.288-.612-.528-.852-.232-.24-.524-.432-.876-.576-.352-.144-.764-.216-1.236-.216zm2.724 6.48c1.064.328 1.86.848 2.388 1.56.536.712.804 1.596.804 2.652 0 .76-.144 1.448-.432 2.064-.288.616-.692 1.14-1.212 1.572-.52.432-1.144.768-1.872 1.008-.72.232-1.52.348-2.4.348-.88 0-1.684-.116-2.412-.348-.72-.24-1.34-.576-1.86-1.008-.52-.432-.924-.956-1.212-1.572-.288-.616-.432-1.304-.432-2.064 0-1.056.264-1.94.792-2.652.536-.712 1.336-1.232 2.4-1.56-.864-.344-1.516-.844-1.956-1.5-.432-.656-.648-1.444-.648-2.364 0-.648.128-1.252.384-1.812s.616-1.044 1.08-1.452c.472-.416 1.036-.74 1.692-.972.656-.24 1.38-.36 2.172-.36.792 0 1.512.12 2.16.36.656.232 1.216.556 1.68.972.472.408.836.892 1.092 1.452.264.56.396 1.164.396 1.812 0 .92-.22 1.708-.66 2.364-.432.656-1.08 1.156-1.944 1.5z"
316
+ fill="#21242C"
317
+ />
318
+ </svg>
319
+ </div>
320
+ </div>
321
+ </button>
322
+ </div>
323
+ <div
324
+ class="default_xu2jcg-o_O-inlineStyles_mr6jkh"
325
+ data-test-id="NUM_9"
326
+ >
327
+ <button
328
+ aria-disabled="false"
329
+ aria-label="9"
330
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
331
+ type="button"
332
+ >
333
+ <div
334
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
335
+ >
336
+ <div
337
+ class="default_xu2jcg-o_O-base_7gd6lb"
338
+ >
339
+ <svg
340
+ fill="none"
341
+ height="40"
342
+ viewBox="0 0 40 40"
343
+ width="40"
344
+ xmlns="http://www.w3.org/2000/svg"
345
+ >
346
+ <path
347
+ d="M16.735 16.8558c0 1.024.272 1.812.816 2.364.552.544 1.32.816 2.304.816.528 0 .992-.084 1.392-.252.408-.168.752-.392 1.032-.672.28-.288.492-.62.636-.996.144-.384.216-.792.216-1.224 0-.504-.08-.952-.24-1.344-.152-.4-.372-.74-.66-1.02-.28-.28-.616-.492-1.008-.636-.392-.152-.82-.228-1.284-.228-.488 0-.928.08-1.32.24-.392.16-.728.384-1.008.672-.28.28-.496.616-.648 1.008-.152.384-.228.808-.228 1.272zm4.428 5.364c.16-.2.308-.388.444-.564.136-.184.264-.368.384-.552-.416.296-.88.524-1.392.684-.512.152-1.056.228-1.632.228-.624 0-1.224-.104-1.8-.312-.576-.216-1.088-.532-1.536-.948-.448-.424-.808-.944-1.08-1.56-.264-.624-.396-1.34-.396-2.148 0-.76.14-1.476.42-2.148.288-.672.688-1.256 1.2-1.752.512-.504 1.124-.9 1.836-1.188.712-.288 1.5-.432 2.364-.432.856 0 1.632.14 2.328.42.696.272 1.288.66 1.776 1.164.488.496.864 1.092 1.128 1.788.264.688.396 1.448.396 2.28 0 .52-.048 1.012-.144 1.476-.088.464-.22.916-.396 1.356-.168.432-.376.86-.624 1.284-.24.416-.512.84-.816 1.272l-4.068 5.832c-.12.176-.3.32-.54.432-.232.112-.496.168-.792.168h-2.364l5.304-6.78z"
348
+ fill="#21242C"
349
+ />
350
+ </svg>
351
+ </div>
352
+ </div>
353
+ </button>
354
+ </div>
355
+ <div
356
+ class="default_xu2jcg-o_O-inlineStyles_xra0eu"
357
+ data-test-id="NUM_0"
358
+ >
359
+ <button
360
+ aria-disabled="false"
361
+ aria-label="0"
362
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
363
+ type="button"
364
+ >
365
+ <div
366
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
367
+ >
368
+ <div
369
+ class="default_xu2jcg-o_O-base_7gd6lb"
370
+ >
371
+ <svg
372
+ fill="none"
373
+ height="40"
374
+ viewBox="0 0 40 40"
375
+ width="40"
376
+ xmlns="http://www.w3.org/2000/svg"
377
+ >
378
+ <path
379
+ d="M26.299 20.3598c0 1.512-.164 2.82-.492 3.924-.32 1.104-.764 2.02-1.332 2.748-.568.728-1.236 1.268-2.004 1.62-.768.352-1.596.528-2.484.528-.888 0-1.716-.176-2.484-.528-.768-.352-1.436-.892-2.004-1.62-.56-.728-1-1.644-1.32-2.748-.32-1.104-.48-2.412-.48-3.924s.16-2.82.48-3.924c.32-1.112.76-2.028 1.32-2.748.568-.728 1.236-1.268 2.004-1.62.768-.36 1.596-.54 2.484-.54.888 0 1.716.18 2.484.54.768.352 1.436.892 2.004 1.62.568.72 1.012 1.636 1.332 2.748.328 1.104.492 2.412.492 3.924zm-2.664 0c0-1.28-.104-2.344-.312-3.192-.2-.856-.468-1.54-.804-2.052s-.724-.876-1.164-1.092c-.44-.216-.896-.324-1.368-.324-.48 0-.94.108-1.38.324-.432.216-.816.58-1.152 1.092-.336.512-.604 1.196-.804 2.052-.2.848-.3 1.912-.3 3.192 0 1.28.1 2.348.3 3.204.2.848.468 1.528.804 2.04s.72.876 1.152 1.092c.44.216.9.324 1.38.324.472 0 .928-.108 1.368-.324.44-.216.828-.58 1.164-1.092.336-.512.604-1.192.804-2.04.208-.856.312-1.924.312-3.204z"
380
+ fill="#21242C"
381
+ />
382
+ </svg>
383
+ </div>
384
+ </div>
385
+ </button>
386
+ </div>
387
+ <div
388
+ class="default_xu2jcg-o_O-inlineStyles_6bvuz9"
389
+ data-test-id="DECIMAL"
390
+ >
391
+ <button
392
+ aria-disabled="false"
393
+ aria-label="Decimal"
394
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
395
+ type="button"
396
+ >
397
+ <div
398
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
399
+ >
400
+ <div
401
+ class="default_xu2jcg-o_O-base_7gd6lb"
402
+ >
403
+ <svg
404
+ fill="none"
405
+ height="40"
406
+ viewBox="0 0 40 40"
407
+ width="40"
408
+ xmlns="http://www.w3.org/2000/svg"
409
+ >
410
+ <path
411
+ d="M18.3401 27.512c0-.232.04-.448.12-.648.088-.208.204-.388.348-.54.152-.152.328-.272.528-.36.208-.088.428-.132.66-.132.232 0 .448.044.648.132.208.088.388.208.54.36.152.152.272.332.36.54.088.2.132.416.132.648 0 .24-.044.46-.132.66-.088.2-.208.376-.36.528-.152.152-.332.268-.54.348-.2.088-.416.132-.648.132-.232 0-.452-.044-.66-.132-.2-.08-.376-.196-.528-.348-.144-.152-.26-.328-.348-.528-.08-.2-.12-.42-.12-.66z"
412
+ fill="#21242C"
413
+ />
414
+ </svg>
415
+ </div>
416
+ </div>
417
+ </button>
418
+ </div>
419
+ <div
420
+ class="default_xu2jcg-o_O-inlineStyles_l02gwk"
421
+ data-test-id="NEGATIVE"
422
+ >
423
+ <button
424
+ aria-disabled="false"
425
+ aria-label="Negative"
426
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
427
+ type="button"
428
+ >
429
+ <div
430
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
431
+ >
432
+ <div
433
+ class="default_xu2jcg-o_O-base_7gd6lb"
434
+ >
435
+ <svg
436
+ fill="none"
437
+ height="40"
438
+ viewBox="0 0 40 40"
439
+ width="40"
440
+ xmlns="http://www.w3.org/2000/svg"
441
+ >
442
+ <path
443
+ clip-rule="evenodd"
444
+ d="M12.9571 13.2929c.3905.3905.3905 1.0237 0 1.4142C11.6871 15.9771 11 17.9485 11 20c0 2.0515.6871 4.0229 1.9571 5.2929.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0C9.81292 24.9771 9 22.4485 9 20c0-2.4485.81292-4.9771 2.5429-6.7071.3905-.3905 1.0237-.3905 1.4142 0zM14 20c0-.5523.4477-1 1-1h10c.5523 0 1 .4477 1 1s-.4477 1-1 1H15c-.5523 0-1-.4477-1-1zm14.4571-6.7071c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142C28.3129 15.9771 29 17.9485 29 20c0 2.0515-.6871 4.0229-1.9571 5.2929-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0C30.1871 24.9771 31 22.4485 31 20c0-2.4485-.8129-4.9771-2.5429-6.7071z"
445
+ fill="#21242C"
446
+ fill-rule="evenodd"
447
+ />
448
+ </svg>
449
+ </div>
450
+ </div>
451
+ </button>
452
+ </div>
453
+ <div
454
+ class="default_xu2jcg-o_O-inlineStyles_ma0as6"
455
+ data-test-id="PERCENT"
456
+ >
457
+ <button
458
+ aria-disabled="false"
459
+ aria-label="Percent"
460
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
461
+ type="button"
462
+ >
463
+ <div
464
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
465
+ >
466
+ <div
467
+ class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
468
+ >
469
+ <svg
470
+ fill="none"
471
+ height="40"
472
+ viewBox="0 0 40 40"
473
+ width="40"
474
+ xmlns="http://www.w3.org/2000/svg"
475
+ >
476
+ <path
477
+ clip-rule="evenodd"
478
+ d="M24.447 11.106a1 1 0 0 1 .447 1.341l-8 16a1 1 0 1 1-1.788-.894l8-16a1 1 0 0 1 1.341-.447ZM15 13a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm12 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
479
+ fill="currentColor"
480
+ fill-rule="evenodd"
481
+ />
482
+ </svg>
483
+ </div>
484
+ </div>
485
+ </button>
486
+ </div>
487
+ <div
488
+ class="default_xu2jcg-o_O-inlineStyles_771h91"
489
+ data-test-id="PI"
490
+ >
491
+ <button
492
+ aria-disabled="false"
493
+ aria-label="Pi"
494
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
495
+ type="button"
496
+ >
497
+ <div
498
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
499
+ >
500
+ <div
501
+ class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
502
+ >
503
+ <svg
504
+ fill="none"
505
+ height="40"
506
+ viewBox="0 0 40 40"
507
+ width="40"
508
+ xmlns="http://www.w3.org/2000/svg"
509
+ >
510
+ <path
511
+ d="M23.7918 25.0379c0 .2947-.13.572-.39.832-.2426.26-.546.39-.91.39-.26 0-.442-.0346-.546-.104-.0866-.0693-.182-.208-.286-.416-.3293-.7626-.494-1.7246-.494-2.886 0-.624.0087-1.04.026-1.248.1214-1.196.39-2.6433.806-4.342.0867-.3466.13-.5373.13-.572h-2.548l-.026.104c0 .0174-.0173.0954-.052.234-.0346.1214-.0866.312-.156.572-.052.2427-.104.468-.156.676-1.144 4.4547-1.8286 6.8814-2.054 7.28-.208.4854-.5806.728-1.118.728-.3986 0-.676-.1473-.832-.442-.0346-.0866-.052-.2253-.052-.416v-.286l.338-.728c1.3-2.7386 2.2447-5.1046 2.834-7.098l.208-.624h-.832c-.6933 0-1.1786.026-1.456.078-.26.052-.5806.2167-.962.494-.416.26-.78.6154-1.092 1.066-.0866.1387-.156.2254-.208.26-.052.0174-.182.026-.39.026-.3293 0-.494-.0866-.494-.26 0-.0693.0867-.2426.26-.52 1.196-1.82 2.366-2.8166 3.51-2.99.1214-.0346 2.0714-.052 5.85-.052 2.7734 0 4.1947.0087 4.264.026.3467.1214.52.364.52.728 0 .5374-.2773.9014-.832 1.092-.104.0347-.702.052-1.794.052h-1.664l-.078.442c-.208 1.248-.312 2.2794-.312 3.094 0 1.5427.2687 2.938.806 4.186.1214.312.182.52.182.624z"
512
+ fill="#21242C"
513
+ />
514
+ </svg>
515
+ </div>
516
+ </div>
517
+ </button>
518
+ </div>
519
+ <div
520
+ class="default_xu2jcg-o_O-inlineStyles_yucc9g"
521
+ data-test-id="FRAC"
522
+ >
523
+ <button
524
+ aria-disabled="false"
525
+ aria-label="Fraction, excluding the current expression"
526
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
527
+ type="button"
528
+ >
529
+ <div
530
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
531
+ >
532
+ <div
533
+ class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
534
+ >
535
+ <svg
536
+ fill="none"
537
+ height="40"
538
+ viewBox="0 0 40 40"
539
+ width="40"
540
+ xmlns="http://www.w3.org/2000/svg"
541
+ >
542
+ <path
543
+ clip-rule="evenodd"
544
+ d="M16 10C16 9.44772 16.4477 9 17 9H23C23.5523 9 24 9.44772 24 10V16C24 16.5523 23.5523 17 23 17H17C16.4477 17 16 16.5523 16 16V10ZM18 11H22V15H18V11ZM14 20C14 19.4477 14.4477 19 15 19H25C25.5523 19 26 19.4477 26 20C26 20.5523 25.5523 21 25 21H15C14.4477 21 14 20.5523 14 20ZM17 23C16.4477 23 16 23.4477 16 24V30C16 30.5523 16.4477 31 17 31H23C23.5523 31 24 30.5523 24 30V24C24 23.4477 23.5523 23 23 23H17ZM22 25H18V29H22V25Z"
545
+ fill="#21242C"
546
+ fill-rule="evenodd"
547
+ />
548
+ </svg>
549
+ </div>
550
+ </div>
551
+ </button>
552
+ </div>
553
+ <div
554
+ class="default_xu2jcg-o_O-inlineStyles_1pnuemq"
555
+ data-test-id="BACKSPACE"
556
+ >
557
+ <button
558
+ aria-disabled="false"
559
+ aria-label="Delete"
560
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
561
+ type="button"
562
+ >
563
+ <div
564
+ class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
565
+ >
566
+ <div
567
+ class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_wps3dh"
568
+ >
569
+ <svg
570
+ fill="none"
571
+ height="40"
572
+ viewBox="0 0 40 40"
573
+ width="40"
574
+ xmlns="http://www.w3.org/2000/svg"
575
+ >
576
+ <path
577
+ clip-rule="evenodd"
578
+ d="M10 20l6-6h12.1716v12H16l-6-6zm-1.41421-1.4142l6.00001-6C14.9609 12.2107 15.4696 12 16 12h12.1716c1.1045 0 2 .8954 2 2v12c0 1.1046-.8955 2-2 2H16c-.5304 0-1.0391-.2107-1.4142-.5858l-6.00001-6c-.78105-.781-.78105-2.0474 0-2.8284zm13.87871-1.2929l-1.2929 1.2929-1.2929-1.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142L19.7574 20l-1.2929 1.2929c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0l1.2929-1.2929 1.2929 1.2929c.3905.3905 1.0237.3905 1.4142 0 .3906-.3905.3906-1.0237 0-1.4142L22.5858 20l1.2929-1.2929c.3906-.3905.3906-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0z"
579
+ fill="#21242C"
580
+ fill-rule="evenodd"
581
+ />
582
+ </svg>
583
+ </div>
584
+ </div>
585
+ </button>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ `;