@khanacademy/math-input 17.0.3 → 17.0.5

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 (84) hide show
  1. package/dist/es/index.js +2 -2
  2. package/dist/es/index.js.map +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +5 -2
  6. package/.eslintrc.js +0 -18
  7. package/CHANGELOG.md +0 -654
  8. package/less/main.less +0 -2
  9. package/less/overrides.less +0 -122
  10. package/src/components/__tests__/integration.test.tsx +0 -300
  11. package/src/components/aphrodite-css-transition-group/index.tsx +0 -78
  12. package/src/components/aphrodite-css-transition-group/transition-child.tsx +0 -192
  13. package/src/components/aphrodite-css-transition-group/types.ts +0 -20
  14. package/src/components/aphrodite-css-transition-group/util.ts +0 -97
  15. package/src/components/input/__tests__/context-tracking.test.ts +0 -176
  16. package/src/components/input/__tests__/mathquill-helpers.test.ts +0 -105
  17. package/src/components/input/__tests__/mathquill.test.ts +0 -747
  18. package/src/components/input/__tests__/test-math-wrapper.ts +0 -29
  19. package/src/components/input/cursor-contexts.ts +0 -37
  20. package/src/components/input/cursor-handle.tsx +0 -137
  21. package/src/components/input/cursor-styles.ts +0 -10
  22. package/src/components/input/drag-listener.ts +0 -79
  23. package/src/components/input/math-input.tsx +0 -1036
  24. package/src/components/input/math-wrapper.ts +0 -189
  25. package/src/components/input/mathquill-helpers.ts +0 -262
  26. package/src/components/input/mathquill-instance.ts +0 -106
  27. package/src/components/input/mathquill-types.ts +0 -32
  28. package/src/components/input/scroll-into-view.ts +0 -65
  29. package/src/components/key-handlers/__tests__/handle-jump-out.test.ts +0 -94
  30. package/src/components/key-handlers/handle-arrow.ts +0 -70
  31. package/src/components/key-handlers/handle-backspace.ts +0 -277
  32. package/src/components/key-handlers/handle-exponent.ts +0 -53
  33. package/src/components/key-handlers/handle-jump-out.ts +0 -107
  34. package/src/components/key-handlers/key-translator.ts +0 -222
  35. package/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap +0 -1913
  36. package/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap +0 -600
  37. package/src/components/keypad/__tests__/keypad-button.test.tsx +0 -84
  38. package/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx +0 -304
  39. package/src/components/keypad/__tests__/keypad-v2.cypress.ts +0 -16
  40. package/src/components/keypad/__tests__/keypad.test.tsx +0 -321
  41. package/src/components/keypad/__tests__/mobile-keypad.test.tsx +0 -115
  42. package/src/components/keypad/__tests__/test-data-tabs.ts +0 -21
  43. package/src/components/keypad/button-assets.tsx +0 -1880
  44. package/src/components/keypad/index.tsx +0 -2
  45. package/src/components/keypad/keypad-button.stories.tsx +0 -81
  46. package/src/components/keypad/keypad-button.tsx +0 -124
  47. package/src/components/keypad/keypad-mathquill.stories.tsx +0 -109
  48. package/src/components/keypad/keypad-pages/extras-page.tsx +0 -35
  49. package/src/components/keypad/keypad-pages/fractions-page.tsx +0 -125
  50. package/src/components/keypad/keypad-pages/geometry-page.tsx +0 -34
  51. package/src/components/keypad/keypad-pages/keypad-pages.stories.tsx +0 -37
  52. package/src/components/keypad/keypad-pages/numbers-page.tsx +0 -94
  53. package/src/components/keypad/keypad-pages/operators-page.tsx +0 -117
  54. package/src/components/keypad/keypad.tsx +0 -233
  55. package/src/components/keypad/mobile-keypad-internals.tsx +0 -240
  56. package/src/components/keypad/mobile-keypad.tsx +0 -24
  57. package/src/components/keypad/navigation-button.tsx +0 -127
  58. package/src/components/keypad/navigation-pad.stories.tsx +0 -26
  59. package/src/components/keypad/navigation-pad.tsx +0 -67
  60. package/src/components/keypad/shared-keys.tsx +0 -109
  61. package/src/components/keypad/utils.ts +0 -34
  62. package/src/components/keypad-context.tsx +0 -70
  63. package/src/components/prop-types.ts +0 -16
  64. package/src/components/tabbar/__tests__/tabbar.test.tsx +0 -105
  65. package/src/components/tabbar/icons.tsx +0 -122
  66. package/src/components/tabbar/index.ts +0 -1
  67. package/src/components/tabbar/item.tsx +0 -146
  68. package/src/components/tabbar/tabbar.stories.tsx +0 -83
  69. package/src/components/tabbar/tabbar.tsx +0 -65
  70. package/src/data/key-configs.ts +0 -770
  71. package/src/data/keys.ts +0 -123
  72. package/src/enums.ts +0 -27
  73. package/src/fake-react-native-web/index.ts +0 -11
  74. package/src/fake-react-native-web/text.tsx +0 -55
  75. package/src/fake-react-native-web/view.tsx +0 -91
  76. package/src/full-keypad.stories.tsx +0 -142
  77. package/src/full-mobile-input.stories.tsx +0 -115
  78. package/src/index.ts +0 -52
  79. package/src/types.ts +0 -70
  80. package/src/utils.test.ts +0 -33
  81. package/src/utils.ts +0 -61
  82. package/src/version.ts +0 -10
  83. package/tsconfig-build.json +0 -11
  84. package/tsconfig-build.tsbuildinfo +0 -1
package/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap DELETED
@@ -1,600 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`mobile keypad should not render the keypad when not active 1`] = `
4
- <div>
5
- <div
6
- class="initial_4qg14c-o_O-keypadContainer_9ki71g"
7
- />
8
- </div>
9
- `;
10
-
11
- exports[`mobile keypad should render keypad when active 1`] = `
12
- <div>
13
- <div
14
- class="initial_4qg14c-o_O-keypadContainer_9ki71g"
15
- >
16
- <div
17
- class="default_xu2jcg inlineStyles_fr63ed"
18
- >
19
- <div
20
- class="default_xu2jcg-o_O-wrapper_144oaus"
21
- >
22
- <div
23
- class="default_xu2jcg-o_O-tabbar_721koc"
24
- role="tablist"
25
- >
26
- <div
27
- class="default_xu2jcg-o_O-pages_cjo0m2"
28
- />
29
- <div
30
- class="default_xu2jcg"
31
- >
32
- <button
33
- aria-disabled="false"
34
- aria-label="Dismiss"
35
- aria-selected="false"
36
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_1ncqa8p"
37
- role="tab"
38
- type="button"
39
- >
40
- <div
41
- class="default_xu2jcg-o_O-base_1pupywz"
42
- >
43
- <div
44
- class="default_xu2jcg-o_O-innerBox_qdbgl3"
45
- >
46
- <svg
47
- fill="none"
48
- height="44"
49
- viewBox="0 0 44 44"
50
- width="44"
51
- xmlns="http://www.w3.org/2000/svg"
52
- >
53
- <path
54
- clip-rule="evenodd"
55
- 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"
56
- fill="rgba(33,36,44,0.64)"
57
- fill-rule="evenodd"
58
- />
59
- </svg>
60
- </div>
61
- </div>
62
- </button>
63
- </div>
64
- </div>
65
- <div
66
- class="default_xu2jcg-o_O-keypadInnerContainer_uc6399"
67
- >
68
- <div
69
- aria-label="Keypad"
70
- class="default_xu2jcg-o_O-keypadGrid_ztxlrb-o_O-fractionsGrid_1aelnry"
71
- tabindex="0"
72
- >
73
- <div
74
- class="default_xu2jcg-o_O-inlineStyles_1c2q4k1"
75
- data-test-id="NUM_1"
76
- >
77
- <button
78
- aria-disabled="false"
79
- aria-label="1"
80
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
81
- type="button"
82
- >
83
- <div
84
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
85
- >
86
- <div
87
- class="default_xu2jcg-o_O-base_7gd6lb"
88
- >
89
- <svg
90
- fill="none"
91
- height="40"
92
- viewBox="0 0 40 40"
93
- width="40"
94
- xmlns="http://www.w3.org/2000/svg"
95
- >
96
- <path
97
- 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"
98
- fill="#21242C"
99
- />
100
- </svg>
101
- </div>
102
- </div>
103
- </button>
104
- </div>
105
- <div
106
- class="default_xu2jcg-o_O-inlineStyles_4h080i"
107
- data-test-id="NUM_2"
108
- >
109
- <button
110
- aria-disabled="false"
111
- aria-label="2"
112
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
113
- type="button"
114
- >
115
- <div
116
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
117
- >
118
- <div
119
- class="default_xu2jcg-o_O-base_7gd6lb"
120
- >
121
- <svg
122
- fill="none"
123
- height="40"
124
- viewBox="0 0 40 40"
125
- width="40"
126
- xmlns="http://www.w3.org/2000/svg"
127
- >
128
- <path
129
- 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"
130
- fill="#21242C"
131
- />
132
- </svg>
133
- </div>
134
- </div>
135
- </button>
136
- </div>
137
- <div
138
- class="default_xu2jcg-o_O-inlineStyles_ei5lhv"
139
- data-test-id="NUM_3"
140
- >
141
- <button
142
- aria-disabled="false"
143
- aria-label="3"
144
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
145
- type="button"
146
- >
147
- <div
148
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
149
- >
150
- <div
151
- class="default_xu2jcg-o_O-base_7gd6lb"
152
- >
153
- <svg
154
- fill="none"
155
- height="40"
156
- viewBox="0 0 40 40"
157
- width="40"
158
- xmlns="http://www.w3.org/2000/svg"
159
- >
160
- <path
161
- 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"
162
- fill="#21242C"
163
- />
164
- </svg>
165
- </div>
166
- </div>
167
- </button>
168
- </div>
169
- <div
170
- class="default_xu2jcg-o_O-inlineStyles_1drshe8"
171
- data-test-id="NUM_4"
172
- >
173
- <button
174
- aria-disabled="false"
175
- aria-label="4"
176
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
177
- type="button"
178
- >
179
- <div
180
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
181
- >
182
- <div
183
- class="default_xu2jcg-o_O-base_7gd6lb"
184
- >
185
- <svg
186
- fill="none"
187
- height="40"
188
- viewBox="0 0 40 40"
189
- width="40"
190
- xmlns="http://www.w3.org/2000/svg"
191
- >
192
- <path
193
- 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"
194
- fill="#21242C"
195
- />
196
- </svg>
197
- </div>
198
- </div>
199
- </button>
200
- </div>
201
- <div
202
- class="default_xu2jcg-o_O-inlineStyles_1j1cer"
203
- data-test-id="NUM_5"
204
- >
205
- <button
206
- aria-disabled="false"
207
- aria-label="5"
208
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
209
- type="button"
210
- >
211
- <div
212
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
213
- >
214
- <div
215
- class="default_xu2jcg-o_O-base_7gd6lb"
216
- >
217
- <svg
218
- fill="none"
219
- height="40"
220
- viewBox="0 0 40 40"
221
- width="40"
222
- xmlns="http://www.w3.org/2000/svg"
223
- >
224
- <path
225
- 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"
226
- fill="#21242C"
227
- />
228
- </svg>
229
- </div>
230
- </div>
231
- </button>
232
- </div>
233
- <div
234
- class="default_xu2jcg-o_O-inlineStyles_1qj00wi"
235
- data-test-id="NUM_6"
236
- >
237
- <button
238
- aria-disabled="false"
239
- aria-label="6"
240
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
241
- type="button"
242
- >
243
- <div
244
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
245
- >
246
- <div
247
- class="default_xu2jcg-o_O-base_7gd6lb"
248
- >
249
- <svg
250
- fill="none"
251
- height="40"
252
- viewBox="0 0 40 40"
253
- width="40"
254
- xmlns="http://www.w3.org/2000/svg"
255
- >
256
- <path
257
- 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"
258
- fill="#21242C"
259
- />
260
- </svg>
261
- </div>
262
- </div>
263
- </button>
264
- </div>
265
- <div
266
- class="default_xu2jcg-o_O-inlineStyles_1o7q2hf"
267
- data-test-id="NUM_7"
268
- >
269
- <button
270
- aria-disabled="false"
271
- aria-label="7"
272
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
273
- type="button"
274
- >
275
- <div
276
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
277
- >
278
- <div
279
- class="default_xu2jcg-o_O-base_7gd6lb"
280
- >
281
- <svg
282
- fill="none"
283
- height="40"
284
- viewBox="0 0 40 40"
285
- width="40"
286
- xmlns="http://www.w3.org/2000/svg"
287
- >
288
- <path
289
- 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"
290
- fill="#21242C"
291
- />
292
- </svg>
293
- </div>
294
- </div>
295
- </button>
296
- </div>
297
- <div
298
- class="default_xu2jcg-o_O-inlineStyles_11fd5hs"
299
- data-test-id="NUM_8"
300
- >
301
- <button
302
- aria-disabled="false"
303
- aria-label="8"
304
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
305
- type="button"
306
- >
307
- <div
308
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
309
- >
310
- <div
311
- class="default_xu2jcg-o_O-base_7gd6lb"
312
- >
313
- <svg
314
- fill="none"
315
- height="40"
316
- viewBox="0 0 40 40"
317
- width="40"
318
- xmlns="http://www.w3.org/2000/svg"
319
- >
320
- <path
321
- 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"
322
- fill="#21242C"
323
- />
324
- </svg>
325
- </div>
326
- </div>
327
- </button>
328
- </div>
329
- <div
330
- class="default_xu2jcg-o_O-inlineStyles_mr6jkh"
331
- data-test-id="NUM_9"
332
- >
333
- <button
334
- aria-disabled="false"
335
- aria-label="9"
336
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
337
- type="button"
338
- >
339
- <div
340
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
341
- >
342
- <div
343
- class="default_xu2jcg-o_O-base_7gd6lb"
344
- >
345
- <svg
346
- fill="none"
347
- height="40"
348
- viewBox="0 0 40 40"
349
- width="40"
350
- xmlns="http://www.w3.org/2000/svg"
351
- >
352
- <path
353
- 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"
354
- fill="#21242C"
355
- />
356
- </svg>
357
- </div>
358
- </div>
359
- </button>
360
- </div>
361
- <div
362
- class="default_xu2jcg-o_O-inlineStyles_xra0eu"
363
- data-test-id="NUM_0"
364
- >
365
- <button
366
- aria-disabled="false"
367
- aria-label="0"
368
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
369
- type="button"
370
- >
371
- <div
372
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
373
- >
374
- <div
375
- class="default_xu2jcg-o_O-base_7gd6lb"
376
- >
377
- <svg
378
- fill="none"
379
- height="40"
380
- viewBox="0 0 40 40"
381
- width="40"
382
- xmlns="http://www.w3.org/2000/svg"
383
- >
384
- <path
385
- 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"
386
- fill="#21242C"
387
- />
388
- </svg>
389
- </div>
390
- </div>
391
- </button>
392
- </div>
393
- <div
394
- class="default_xu2jcg-o_O-inlineStyles_6bvuz9"
395
- data-test-id="DECIMAL"
396
- >
397
- <button
398
- aria-disabled="false"
399
- aria-label="Decimal"
400
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
401
- type="button"
402
- >
403
- <div
404
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
405
- >
406
- <div
407
- class="default_xu2jcg-o_O-base_7gd6lb"
408
- >
409
- <svg
410
- data-test-id="period-decimal"
411
- fill="none"
412
- height="40"
413
- viewBox="0 0 40 40"
414
- width="40"
415
- xmlns="http://www.w3.org/2000/svg"
416
- >
417
- <path
418
- 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"
419
- fill="#21242C"
420
- />
421
- </svg>
422
- </div>
423
- </div>
424
- </button>
425
- </div>
426
- <div
427
- class="default_xu2jcg-o_O-inlineStyles_l02gwk"
428
- data-test-id="NEGATIVE"
429
- >
430
- <button
431
- aria-disabled="false"
432
- aria-label="Negative"
433
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
434
- type="button"
435
- >
436
- <div
437
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
438
- >
439
- <div
440
- class="default_xu2jcg-o_O-base_7gd6lb"
441
- >
442
- <svg
443
- fill="none"
444
- height="40"
445
- viewBox="0 0 40 40"
446
- width="40"
447
- xmlns="http://www.w3.org/2000/svg"
448
- >
449
- <path
450
- clip-rule="evenodd"
451
- 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"
452
- fill="#21242C"
453
- fill-rule="evenodd"
454
- />
455
- </svg>
456
- </div>
457
- </div>
458
- </button>
459
- </div>
460
- <div
461
- class="default_xu2jcg-o_O-inlineStyles_ma0as6"
462
- data-test-id="PERCENT"
463
- >
464
- <button
465
- aria-disabled="false"
466
- aria-label="Percent"
467
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
468
- type="button"
469
- >
470
- <div
471
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
472
- >
473
- <div
474
- class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
475
- >
476
- <svg
477
- fill="none"
478
- height="40"
479
- viewBox="0 0 40 40"
480
- width="40"
481
- xmlns="http://www.w3.org/2000/svg"
482
- >
483
- <path
484
- clip-rule="evenodd"
485
- 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"
486
- fill="currentColor"
487
- fill-rule="evenodd"
488
- />
489
- </svg>
490
- </div>
491
- </div>
492
- </button>
493
- </div>
494
- <div
495
- class="default_xu2jcg-o_O-inlineStyles_771h91"
496
- data-test-id="PI"
497
- >
498
- <button
499
- aria-disabled="false"
500
- aria-label="Pi"
501
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
502
- type="button"
503
- >
504
- <div
505
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
506
- >
507
- <div
508
- class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
509
- >
510
- <svg
511
- fill="none"
512
- height="40"
513
- viewBox="0 0 40 40"
514
- width="40"
515
- xmlns="http://www.w3.org/2000/svg"
516
- >
517
- <path
518
- 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"
519
- fill="#21242C"
520
- />
521
- </svg>
522
- </div>
523
- </div>
524
- </button>
525
- </div>
526
- <div
527
- class="default_xu2jcg-o_O-inlineStyles_yucc9g"
528
- data-test-id="FRAC"
529
- >
530
- <button
531
- aria-disabled="false"
532
- aria-label="Fraction, excluding the current expression"
533
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
534
- type="button"
535
- >
536
- <div
537
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
538
- >
539
- <div
540
- class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_s65xgl"
541
- >
542
- <svg
543
- fill="none"
544
- height="40"
545
- viewBox="0 0 40 40"
546
- width="40"
547
- xmlns="http://www.w3.org/2000/svg"
548
- >
549
- <path
550
- clip-rule="evenodd"
551
- 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"
552
- fill="#21242C"
553
- fill-rule="evenodd"
554
- />
555
- </svg>
556
- </div>
557
- </div>
558
- </button>
559
- </div>
560
- <div
561
- class="default_xu2jcg-o_O-inlineStyles_1pnuemq"
562
- data-test-id="BACKSPACE"
563
- >
564
- <button
565
- aria-disabled="false"
566
- aria-label="Delete"
567
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-clickable_rukhmf"
568
- type="button"
569
- >
570
- <div
571
- class="default_xu2jcg-o_O-outerBoxBase_3w5jmh"
572
- >
573
- <div
574
- class="default_xu2jcg-o_O-base_7gd6lb-o_O-inlineStyles_wps3dh"
575
- >
576
- <svg
577
- fill="none"
578
- height="40"
579
- viewBox="0 0 40 40"
580
- width="40"
581
- xmlns="http://www.w3.org/2000/svg"
582
- >
583
- <path
584
- clip-rule="evenodd"
585
- 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"
586
- fill="#21242C"
587
- fill-rule="evenodd"
588
- />
589
- </svg>
590
- </div>
591
- </div>
592
- </button>
593
- </div>
594
- </div>
595
- </div>
596
- </div>
597
- </div>
598
- </div>
599
- </div>
600
- `;