@toptal/picasso-calendar 2.0.1 → 3.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 (69) hide show
  1. package/dist-package/src/Calendar/Calendar.d.ts.map +1 -1
  2. package/dist-package/src/Calendar/Calendar.js +9 -13
  3. package/dist-package/src/Calendar/Calendar.js.map +1 -1
  4. package/dist-package/src/CalendarContainer/CalendarContainer.d.ts.map +1 -1
  5. package/dist-package/src/CalendarContainer/CalendarContainer.js +2 -11
  6. package/dist-package/src/CalendarContainer/CalendarContainer.js.map +1 -1
  7. package/dist-package/src/CalendarDateSelector/CalendarDateSelector.d.ts.map +1 -1
  8. package/dist-package/src/CalendarDateSelector/CalendarDateSelector.js +4 -8
  9. package/dist-package/src/CalendarDateSelector/CalendarDateSelector.js.map +1 -1
  10. package/dist-package/src/CalendarDay/CalendarDay.d.ts.map +1 -1
  11. package/dist-package/src/CalendarDay/CalendarDay.js +31 -15
  12. package/dist-package/src/CalendarDay/CalendarDay.js.map +1 -1
  13. package/dist-package/src/CalendarDay/types.d.ts +11 -0
  14. package/dist-package/src/CalendarDay/types.d.ts.map +1 -0
  15. package/dist-package/src/CalendarDay/types.js +2 -0
  16. package/dist-package/src/CalendarDay/types.js.map +1 -0
  17. package/dist-package/src/CalendarDay/utils/get-background-color-class.d.ts +3 -0
  18. package/dist-package/src/CalendarDay/utils/get-background-color-class.d.ts.map +1 -0
  19. package/dist-package/src/CalendarDay/utils/get-background-color-class.js +14 -0
  20. package/dist-package/src/CalendarDay/utils/get-background-color-class.js.map +1 -0
  21. package/dist-package/src/CalendarDay/utils/get-border-classes.d.ts +3 -0
  22. package/dist-package/src/CalendarDay/utils/get-border-classes.d.ts.map +1 -0
  23. package/dist-package/src/CalendarDay/utils/get-border-classes.js +14 -0
  24. package/dist-package/src/CalendarDay/utils/get-border-classes.js.map +1 -0
  25. package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.d.ts +3 -0
  26. package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.d.ts.map +1 -0
  27. package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.js +29 -0
  28. package/dist-package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.js.map +1 -0
  29. package/dist-package/src/CalendarDay/utils/get-text-color-class.d.ts +3 -0
  30. package/dist-package/src/CalendarDay/utils/get-text-color-class.d.ts.map +1 -0
  31. package/dist-package/src/CalendarDay/utils/get-text-color-class.js +17 -0
  32. package/dist-package/src/CalendarDay/utils/get-text-color-class.js.map +1 -0
  33. package/dist-package/src/CalendarIndicators/CalendarIndicators.d.ts.map +1 -1
  34. package/dist-package/src/CalendarIndicators/CalendarIndicators.js +4 -12
  35. package/dist-package/src/CalendarIndicators/CalendarIndicators.js.map +1 -1
  36. package/package.json +2 -3
  37. package/src/Calendar/Calendar.tsx +10 -15
  38. package/src/Calendar/__snapshots__/test.tsx.snap +101 -101
  39. package/src/CalendarContainer/CalendarContainer.tsx +6 -13
  40. package/src/CalendarDateSelector/CalendarDateSelector.tsx +4 -11
  41. package/src/CalendarDay/CalendarDay.tsx +46 -17
  42. package/src/CalendarDay/types.ts +10 -0
  43. package/src/CalendarDay/utils/get-background-color-class.ts +26 -0
  44. package/src/CalendarDay/utils/get-border-classes.test.ts +54 -0
  45. package/src/CalendarDay/utils/get-border-classes.ts +20 -0
  46. package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.test.ts +72 -0
  47. package/src/CalendarDay/utils/get-hover-and-focus-effects-classes.ts +44 -0
  48. package/src/CalendarDay/utils/get-text-color-class.ts +30 -0
  49. package/src/CalendarIndicators/CalendarIndicators.tsx +9 -16
  50. package/dist-package/src/Calendar/styles.d.ts +0 -4
  51. package/dist-package/src/Calendar/styles.d.ts.map +0 -1
  52. package/dist-package/src/Calendar/styles.js +0 -64
  53. package/dist-package/src/Calendar/styles.js.map +0 -1
  54. package/dist-package/src/CalendarContainer/styles.d.ts +0 -4
  55. package/dist-package/src/CalendarContainer/styles.d.ts.map +0 -1
  56. package/dist-package/src/CalendarContainer/styles.js +0 -22
  57. package/dist-package/src/CalendarContainer/styles.js.map +0 -1
  58. package/dist-package/src/CalendarDay/styles.d.ts +0 -4
  59. package/dist-package/src/CalendarDay/styles.d.ts.map +0 -1
  60. package/dist-package/src/CalendarDay/styles.js +0 -94
  61. package/dist-package/src/CalendarDay/styles.js.map +0 -1
  62. package/dist-package/src/CalendarIndicators/styles.d.ts +0 -4
  63. package/dist-package/src/CalendarIndicators/styles.d.ts.map +0 -1
  64. package/dist-package/src/CalendarIndicators/styles.js +0 -28
  65. package/dist-package/src/CalendarIndicators/styles.js.map +0 -1
  66. package/src/Calendar/styles.ts +0 -66
  67. package/src/CalendarContainer/styles.ts +0 -24
  68. package/src/CalendarDay/styles.ts +0 -100
  69. package/src/CalendarIndicators/styles.ts +0 -30
@@ -9,7 +9,7 @@ exports[`Calendar renders 1`] = `
9
9
  tabindex="0"
10
10
  >
11
11
  <div
12
- class="PicassoCalendarContainer-root"
12
+ class="p-6 text-graphite flex flex-col basis-[20.5rem] shadow-5 bg-white rounded-sm max-w"
13
13
  >
14
14
  <div
15
15
  class="rdp calendar-month"
@@ -79,60 +79,60 @@ exports[`Calendar renders 1`] = `
79
79
  </div>
80
80
  <table
81
81
  aria-labelledby="react-day-picker-1"
82
- class="PicassoCalendar-table"
82
+ class="flex flex-col border-spacing"
83
83
  role="grid"
84
84
  >
85
85
  <thead
86
- class="PicassoCalendar-head"
86
+ class="block"
87
87
  >
88
88
  <tr
89
- class="PicassoCalendar-head_row-10"
89
+ class="flex text-center uppercase text-xxs pt-[3px] pb-[11px] text-gray"
90
90
  >
91
91
  <th
92
92
  aria-label="Monday"
93
- class="PicassoCalendar-head_cell-11"
93
+ class="p-0 basis-[15%] w-40 font-regular"
94
94
  scope="col"
95
95
  >
96
96
  Mon
97
97
  </th>
98
98
  <th
99
99
  aria-label="Tuesday"
100
- class="PicassoCalendar-head_cell-11"
100
+ class="p-0 basis-[15%] w-40 font-regular"
101
101
  scope="col"
102
102
  >
103
103
  Tue
104
104
  </th>
105
105
  <th
106
106
  aria-label="Wednesday"
107
- class="PicassoCalendar-head_cell-11"
107
+ class="p-0 basis-[15%] w-40 font-regular"
108
108
  scope="col"
109
109
  >
110
110
  Wed
111
111
  </th>
112
112
  <th
113
113
  aria-label="Thursday"
114
- class="PicassoCalendar-head_cell-11"
114
+ class="p-0 basis-[15%] w-40 font-regular"
115
115
  scope="col"
116
116
  >
117
117
  Thu
118
118
  </th>
119
119
  <th
120
120
  aria-label="Friday"
121
- class="PicassoCalendar-head_cell-11"
121
+ class="p-0 basis-[15%] w-40 font-regular"
122
122
  scope="col"
123
123
  >
124
124
  Fri
125
125
  </th>
126
126
  <th
127
127
  aria-label="Saturday"
128
- class="PicassoCalendar-head_cell-11"
128
+ class="p-0 basis-[15%] w-40 font-regular"
129
129
  scope="col"
130
130
  >
131
131
  Sat
132
132
  </th>
133
133
  <th
134
134
  aria-label="Sunday"
135
- class="PicassoCalendar-head_cell-11"
135
+ class="p-0 basis-[15%] w-40 font-regular"
136
136
  scope="col"
137
137
  >
138
138
  Sun
@@ -143,14 +143,14 @@ exports[`Calendar renders 1`] = `
143
143
  class="rdp-tbody"
144
144
  >
145
145
  <tr
146
- class="PicassoCalendar-row"
146
+ class="flex"
147
147
  >
148
148
  <td
149
- class="PicassoCalendar-cell"
149
+ class="p-0 basis-[15%]"
150
150
  role="presentation"
151
151
  >
152
152
  <button
153
- class="PicassoCalendar-day PicassoCalendar-grayed"
153
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
154
154
  data-calendar-day="2019-11-25"
155
155
  data-testid="day-button-25"
156
156
  type="button"
@@ -160,11 +160,11 @@ exports[`Calendar renders 1`] = `
160
160
  </button>
161
161
  </td>
162
162
  <td
163
- class="PicassoCalendar-cell"
163
+ class="p-0 basis-[15%]"
164
164
  role="presentation"
165
165
  >
166
166
  <button
167
- class="PicassoCalendar-day PicassoCalendar-grayed"
167
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
168
168
  data-calendar-day="2019-11-26"
169
169
  data-testid="day-button-26"
170
170
  type="button"
@@ -174,11 +174,11 @@ exports[`Calendar renders 1`] = `
174
174
  </button>
175
175
  </td>
176
176
  <td
177
- class="PicassoCalendar-cell"
177
+ class="p-0 basis-[15%]"
178
178
  role="presentation"
179
179
  >
180
180
  <button
181
- class="PicassoCalendar-day PicassoCalendar-grayed"
181
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
182
182
  data-calendar-day="2019-11-27"
183
183
  data-testid="day-button-27"
184
184
  type="button"
@@ -188,11 +188,11 @@ exports[`Calendar renders 1`] = `
188
188
  </button>
189
189
  </td>
190
190
  <td
191
- class="PicassoCalendar-cell"
191
+ class="p-0 basis-[15%]"
192
192
  role="presentation"
193
193
  >
194
194
  <button
195
- class="PicassoCalendar-day PicassoCalendar-grayed"
195
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
196
196
  data-calendar-day="2019-11-28"
197
197
  data-testid="day-button-28"
198
198
  type="button"
@@ -202,11 +202,11 @@ exports[`Calendar renders 1`] = `
202
202
  </button>
203
203
  </td>
204
204
  <td
205
- class="PicassoCalendar-cell"
205
+ class="p-0 basis-[15%]"
206
206
  role="presentation"
207
207
  >
208
208
  <button
209
- class="PicassoCalendar-day PicassoCalendar-grayed"
209
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
210
210
  data-calendar-day="2019-11-29"
211
211
  data-testid="day-button-29"
212
212
  type="button"
@@ -216,11 +216,11 @@ exports[`Calendar renders 1`] = `
216
216
  </button>
217
217
  </td>
218
218
  <td
219
- class="PicassoCalendar-cell"
219
+ class="p-0 basis-[15%]"
220
220
  role="presentation"
221
221
  >
222
222
  <button
223
- class="PicassoCalendar-day PicassoCalendar-weekend PicassoCalendar-grayed"
223
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
224
224
  data-calendar-day="2019-11-30"
225
225
  data-testid="day-button-30"
226
226
  type="button"
@@ -230,11 +230,11 @@ exports[`Calendar renders 1`] = `
230
230
  </button>
231
231
  </td>
232
232
  <td
233
- class="PicassoCalendar-cell"
233
+ class="p-0 basis-[15%]"
234
234
  role="presentation"
235
235
  >
236
236
  <button
237
- class="PicassoCalendar-day PicassoCalendar-weekend"
237
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
238
238
  data-calendar-day="2019-12-01"
239
239
  data-testid="day-button-1"
240
240
  type="button"
@@ -245,14 +245,14 @@ exports[`Calendar renders 1`] = `
245
245
  </td>
246
246
  </tr>
247
247
  <tr
248
- class="PicassoCalendar-row"
248
+ class="flex"
249
249
  >
250
250
  <td
251
- class="PicassoCalendar-cell"
251
+ class="p-0 basis-[15%]"
252
252
  role="presentation"
253
253
  >
254
254
  <button
255
- class="PicassoCalendar-day"
255
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
256
256
  data-calendar-day="2019-12-02"
257
257
  data-testid="day-button-2"
258
258
  type="button"
@@ -262,11 +262,11 @@ exports[`Calendar renders 1`] = `
262
262
  </button>
263
263
  </td>
264
264
  <td
265
- class="PicassoCalendar-cell"
265
+ class="p-0 basis-[15%]"
266
266
  role="presentation"
267
267
  >
268
268
  <button
269
- class="PicassoCalendar-day"
269
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
270
270
  data-calendar-day="2019-12-03"
271
271
  data-testid="day-button-3"
272
272
  type="button"
@@ -276,11 +276,11 @@ exports[`Calendar renders 1`] = `
276
276
  </button>
277
277
  </td>
278
278
  <td
279
- class="PicassoCalendar-cell"
279
+ class="p-0 basis-[15%]"
280
280
  role="presentation"
281
281
  >
282
282
  <button
283
- class="PicassoCalendar-day"
283
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
284
284
  data-calendar-day="2019-12-04"
285
285
  data-testid="day-button-4"
286
286
  type="button"
@@ -290,11 +290,11 @@ exports[`Calendar renders 1`] = `
290
290
  </button>
291
291
  </td>
292
292
  <td
293
- class="PicassoCalendar-cell"
293
+ class="p-0 basis-[15%]"
294
294
  role="presentation"
295
295
  >
296
296
  <button
297
- class="PicassoCalendar-day"
297
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
298
298
  data-calendar-day="2019-12-05"
299
299
  data-testid="day-button-5"
300
300
  type="button"
@@ -304,11 +304,11 @@ exports[`Calendar renders 1`] = `
304
304
  </button>
305
305
  </td>
306
306
  <td
307
- class="PicassoCalendar-cell"
307
+ class="p-0 basis-[15%]"
308
308
  role="presentation"
309
309
  >
310
310
  <button
311
- class="PicassoCalendar-day"
311
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
312
312
  data-calendar-day="2019-12-06"
313
313
  data-testid="day-button-6"
314
314
  type="button"
@@ -318,11 +318,11 @@ exports[`Calendar renders 1`] = `
318
318
  </button>
319
319
  </td>
320
320
  <td
321
- class="PicassoCalendar-cell"
321
+ class="p-0 basis-[15%]"
322
322
  role="presentation"
323
323
  >
324
324
  <button
325
- class="PicassoCalendar-day PicassoCalendar-weekend"
325
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
326
326
  data-calendar-day="2019-12-07"
327
327
  data-testid="day-button-7"
328
328
  type="button"
@@ -332,11 +332,11 @@ exports[`Calendar renders 1`] = `
332
332
  </button>
333
333
  </td>
334
334
  <td
335
- class="PicassoCalendar-cell"
335
+ class="p-0 basis-[15%]"
336
336
  role="presentation"
337
337
  >
338
338
  <button
339
- class="PicassoCalendar-day PicassoCalendar-weekend"
339
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
340
340
  data-calendar-day="2019-12-08"
341
341
  data-testid="day-button-8"
342
342
  type="button"
@@ -347,14 +347,14 @@ exports[`Calendar renders 1`] = `
347
347
  </td>
348
348
  </tr>
349
349
  <tr
350
- class="PicassoCalendar-row"
350
+ class="flex"
351
351
  >
352
352
  <td
353
- class="PicassoCalendar-cell"
353
+ class="p-0 basis-[15%]"
354
354
  role="presentation"
355
355
  >
356
356
  <button
357
- class="PicassoCalendar-day"
357
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
358
358
  data-calendar-day="2019-12-09"
359
359
  data-testid="day-button-9"
360
360
  type="button"
@@ -364,11 +364,11 @@ exports[`Calendar renders 1`] = `
364
364
  </button>
365
365
  </td>
366
366
  <td
367
- class="PicassoCalendar-cell"
367
+ class="p-0 basis-[15%]"
368
368
  role="presentation"
369
369
  >
370
370
  <button
371
- class="PicassoCalendar-day"
371
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
372
372
  data-calendar-day="2019-12-10"
373
373
  data-testid="day-button-10"
374
374
  type="button"
@@ -378,11 +378,11 @@ exports[`Calendar renders 1`] = `
378
378
  </button>
379
379
  </td>
380
380
  <td
381
- class="PicassoCalendar-cell"
381
+ class="p-0 basis-[15%]"
382
382
  role="presentation"
383
383
  >
384
384
  <button
385
- class="PicassoCalendar-day"
385
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
386
386
  data-calendar-day="2019-12-11"
387
387
  data-testid="day-button-11"
388
388
  type="button"
@@ -392,11 +392,11 @@ exports[`Calendar renders 1`] = `
392
392
  </button>
393
393
  </td>
394
394
  <td
395
- class="PicassoCalendar-cell"
395
+ class="p-0 basis-[15%]"
396
396
  role="presentation"
397
397
  >
398
398
  <button
399
- class="PicassoCalendar-day PicassoCalendar-selected"
399
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-white bg-blue border-none rounded-sm cursor-pointer"
400
400
  data-calendar-day="2019-12-12"
401
401
  data-testid="day-button-selected"
402
402
  type="button"
@@ -406,11 +406,11 @@ exports[`Calendar renders 1`] = `
406
406
  </button>
407
407
  </td>
408
408
  <td
409
- class="PicassoCalendar-cell"
409
+ class="p-0 basis-[15%]"
410
410
  role="presentation"
411
411
  >
412
412
  <button
413
- class="PicassoCalendar-day"
413
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
414
414
  data-calendar-day="2019-12-13"
415
415
  data-testid="day-button-13"
416
416
  type="button"
@@ -420,11 +420,11 @@ exports[`Calendar renders 1`] = `
420
420
  </button>
421
421
  </td>
422
422
  <td
423
- class="PicassoCalendar-cell"
423
+ class="p-0 basis-[15%]"
424
424
  role="presentation"
425
425
  >
426
426
  <button
427
- class="PicassoCalendar-day PicassoCalendar-weekend"
427
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
428
428
  data-calendar-day="2019-12-14"
429
429
  data-testid="day-button-14"
430
430
  type="button"
@@ -434,11 +434,11 @@ exports[`Calendar renders 1`] = `
434
434
  </button>
435
435
  </td>
436
436
  <td
437
- class="PicassoCalendar-cell"
437
+ class="p-0 basis-[15%]"
438
438
  role="presentation"
439
439
  >
440
440
  <button
441
- class="PicassoCalendar-day PicassoCalendar-weekend"
441
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
442
442
  data-calendar-day="2019-12-15"
443
443
  data-testid="day-button-15"
444
444
  type="button"
@@ -449,14 +449,14 @@ exports[`Calendar renders 1`] = `
449
449
  </td>
450
450
  </tr>
451
451
  <tr
452
- class="PicassoCalendar-row"
452
+ class="flex"
453
453
  >
454
454
  <td
455
- class="PicassoCalendar-cell"
455
+ class="p-0 basis-[15%]"
456
456
  role="presentation"
457
457
  >
458
458
  <button
459
- class="PicassoCalendar-day"
459
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
460
460
  data-calendar-day="2019-12-16"
461
461
  data-testid="day-button-16"
462
462
  type="button"
@@ -466,11 +466,11 @@ exports[`Calendar renders 1`] = `
466
466
  </button>
467
467
  </td>
468
468
  <td
469
- class="PicassoCalendar-cell"
469
+ class="p-0 basis-[15%]"
470
470
  role="presentation"
471
471
  >
472
472
  <button
473
- class="PicassoCalendar-day"
473
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
474
474
  data-calendar-day="2019-12-17"
475
475
  data-testid="day-button-17"
476
476
  type="button"
@@ -480,11 +480,11 @@ exports[`Calendar renders 1`] = `
480
480
  </button>
481
481
  </td>
482
482
  <td
483
- class="PicassoCalendar-cell"
483
+ class="p-0 basis-[15%]"
484
484
  role="presentation"
485
485
  >
486
486
  <button
487
- class="PicassoCalendar-day"
487
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
488
488
  data-calendar-day="2019-12-18"
489
489
  data-testid="day-button-18"
490
490
  type="button"
@@ -494,11 +494,11 @@ exports[`Calendar renders 1`] = `
494
494
  </button>
495
495
  </td>
496
496
  <td
497
- class="PicassoCalendar-cell"
497
+ class="p-0 basis-[15%]"
498
498
  role="presentation"
499
499
  >
500
500
  <button
501
- class="PicassoCalendar-day"
501
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
502
502
  data-calendar-day="2019-12-19"
503
503
  data-testid="day-button-19"
504
504
  type="button"
@@ -508,11 +508,11 @@ exports[`Calendar renders 1`] = `
508
508
  </button>
509
509
  </td>
510
510
  <td
511
- class="PicassoCalendar-cell"
511
+ class="p-0 basis-[15%]"
512
512
  role="presentation"
513
513
  >
514
514
  <button
515
- class="PicassoCalendar-day"
515
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
516
516
  data-calendar-day="2019-12-20"
517
517
  data-testid="day-button-20"
518
518
  type="button"
@@ -522,11 +522,11 @@ exports[`Calendar renders 1`] = `
522
522
  </button>
523
523
  </td>
524
524
  <td
525
- class="PicassoCalendar-cell"
525
+ class="p-0 basis-[15%]"
526
526
  role="presentation"
527
527
  >
528
528
  <button
529
- class="PicassoCalendar-day PicassoCalendar-weekend"
529
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
530
530
  data-calendar-day="2019-12-21"
531
531
  data-testid="day-button-21"
532
532
  type="button"
@@ -536,11 +536,11 @@ exports[`Calendar renders 1`] = `
536
536
  </button>
537
537
  </td>
538
538
  <td
539
- class="PicassoCalendar-cell"
539
+ class="p-0 basis-[15%]"
540
540
  role="presentation"
541
541
  >
542
542
  <button
543
- class="PicassoCalendar-day PicassoCalendar-weekend"
543
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
544
544
  data-calendar-day="2019-12-22"
545
545
  data-testid="day-button-22"
546
546
  type="button"
@@ -551,14 +551,14 @@ exports[`Calendar renders 1`] = `
551
551
  </td>
552
552
  </tr>
553
553
  <tr
554
- class="PicassoCalendar-row"
554
+ class="flex"
555
555
  >
556
556
  <td
557
- class="PicassoCalendar-cell"
557
+ class="p-0 basis-[15%]"
558
558
  role="presentation"
559
559
  >
560
560
  <button
561
- class="PicassoCalendar-day"
561
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
562
562
  data-calendar-day="2019-12-23"
563
563
  data-testid="day-button-23"
564
564
  type="button"
@@ -568,11 +568,11 @@ exports[`Calendar renders 1`] = `
568
568
  </button>
569
569
  </td>
570
570
  <td
571
- class="PicassoCalendar-cell"
571
+ class="p-0 basis-[15%]"
572
572
  role="presentation"
573
573
  >
574
574
  <button
575
- class="PicassoCalendar-day"
575
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
576
576
  data-calendar-day="2019-12-24"
577
577
  data-testid="day-button-24"
578
578
  type="button"
@@ -582,11 +582,11 @@ exports[`Calendar renders 1`] = `
582
582
  </button>
583
583
  </td>
584
584
  <td
585
- class="PicassoCalendar-cell"
585
+ class="p-0 basis-[15%]"
586
586
  role="presentation"
587
587
  >
588
588
  <button
589
- class="PicassoCalendar-day"
589
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
590
590
  data-calendar-day="2019-12-25"
591
591
  data-testid="day-button-25"
592
592
  type="button"
@@ -596,11 +596,11 @@ exports[`Calendar renders 1`] = `
596
596
  </button>
597
597
  </td>
598
598
  <td
599
- class="PicassoCalendar-cell"
599
+ class="p-0 basis-[15%]"
600
600
  role="presentation"
601
601
  >
602
602
  <button
603
- class="PicassoCalendar-day"
603
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
604
604
  data-calendar-day="2019-12-26"
605
605
  data-testid="day-button-26"
606
606
  type="button"
@@ -610,11 +610,11 @@ exports[`Calendar renders 1`] = `
610
610
  </button>
611
611
  </td>
612
612
  <td
613
- class="PicassoCalendar-cell"
613
+ class="p-0 basis-[15%]"
614
614
  role="presentation"
615
615
  >
616
616
  <button
617
- class="PicassoCalendar-day"
617
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
618
618
  data-calendar-day="2019-12-27"
619
619
  data-testid="day-button-27"
620
620
  type="button"
@@ -624,11 +624,11 @@ exports[`Calendar renders 1`] = `
624
624
  </button>
625
625
  </td>
626
626
  <td
627
- class="PicassoCalendar-cell"
627
+ class="p-0 basis-[15%]"
628
628
  role="presentation"
629
629
  >
630
630
  <button
631
- class="PicassoCalendar-day PicassoCalendar-weekend"
631
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
632
632
  data-calendar-day="2019-12-28"
633
633
  data-testid="day-button-28"
634
634
  type="button"
@@ -638,11 +638,11 @@ exports[`Calendar renders 1`] = `
638
638
  </button>
639
639
  </td>
640
640
  <td
641
- class="PicassoCalendar-cell"
641
+ class="p-0 basis-[15%]"
642
642
  role="presentation"
643
643
  >
644
644
  <button
645
- class="PicassoCalendar-day PicassoCalendar-weekend"
645
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
646
646
  data-calendar-day="2019-12-29"
647
647
  data-testid="day-button-29"
648
648
  type="button"
@@ -653,14 +653,14 @@ exports[`Calendar renders 1`] = `
653
653
  </td>
654
654
  </tr>
655
655
  <tr
656
- class="PicassoCalendar-row"
656
+ class="flex"
657
657
  >
658
658
  <td
659
- class="PicassoCalendar-cell"
659
+ class="p-0 basis-[15%]"
660
660
  role="presentation"
661
661
  >
662
662
  <button
663
- class="PicassoCalendar-day"
663
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
664
664
  data-calendar-day="2019-12-30"
665
665
  data-testid="day-button-30"
666
666
  type="button"
@@ -670,11 +670,11 @@ exports[`Calendar renders 1`] = `
670
670
  </button>
671
671
  </td>
672
672
  <td
673
- class="PicassoCalendar-cell"
673
+ class="p-0 basis-[15%]"
674
674
  role="presentation"
675
675
  >
676
676
  <button
677
- class="PicassoCalendar-day"
677
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-black bg-white border-none rounded-none [&]:hover:text-black [&]:focus:text-black [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
678
678
  data-calendar-day="2019-12-31"
679
679
  data-testid="day-button-31"
680
680
  type="button"
@@ -684,11 +684,11 @@ exports[`Calendar renders 1`] = `
684
684
  </button>
685
685
  </td>
686
686
  <td
687
- class="PicassoCalendar-cell"
687
+ class="p-0 basis-[15%]"
688
688
  role="presentation"
689
689
  >
690
690
  <button
691
- class="PicassoCalendar-day PicassoCalendar-grayed"
691
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
692
692
  data-calendar-day="2020-01-01"
693
693
  data-testid="day-button-1"
694
694
  type="button"
@@ -698,11 +698,11 @@ exports[`Calendar renders 1`] = `
698
698
  </button>
699
699
  </td>
700
700
  <td
701
- class="PicassoCalendar-cell"
701
+ class="p-0 basis-[15%]"
702
702
  role="presentation"
703
703
  >
704
704
  <button
705
- class="PicassoCalendar-day PicassoCalendar-grayed"
705
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
706
706
  data-calendar-day="2020-01-02"
707
707
  data-testid="day-button-2"
708
708
  type="button"
@@ -712,11 +712,11 @@ exports[`Calendar renders 1`] = `
712
712
  </button>
713
713
  </td>
714
714
  <td
715
- class="PicassoCalendar-cell"
715
+ class="p-0 basis-[15%]"
716
716
  role="presentation"
717
717
  >
718
718
  <button
719
- class="PicassoCalendar-day PicassoCalendar-grayed"
719
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-white border-none rounded-none [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
720
720
  data-calendar-day="2020-01-03"
721
721
  data-testid="day-button-3"
722
722
  type="button"
@@ -726,11 +726,11 @@ exports[`Calendar renders 1`] = `
726
726
  </button>
727
727
  </td>
728
728
  <td
729
- class="PicassoCalendar-cell"
729
+ class="p-0 basis-[15%]"
730
730
  role="presentation"
731
731
  >
732
732
  <button
733
- class="PicassoCalendar-day PicassoCalendar-weekend PicassoCalendar-grayed"
733
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
734
734
  data-calendar-day="2020-01-04"
735
735
  data-testid="day-button-4"
736
736
  type="button"
@@ -740,11 +740,11 @@ exports[`Calendar renders 1`] = `
740
740
  </button>
741
741
  </td>
742
742
  <td
743
- class="PicassoCalendar-cell"
743
+ class="p-0 basis-[15%]"
744
744
  role="presentation"
745
745
  >
746
746
  <button
747
- class="PicassoCalendar-day PicassoCalendar-weekend PicassoCalendar-grayed"
747
+ class="h-10 w-10 min-w m-0 p-0 text-[0.75rem] flex items-center justify-center vertical-align relative user-select outline-none text-gray bg-gray border-solid border-[0.25rem] border-white rounded-md [&]:hover:border-none [&]:focus:border-none [&]:hover:border-white [&]:focus:border-white [&]:hover:text-gray [&]:focus:text-gray [&]:hover:bg-blue [&]:focus:bg-blue [&]:hover:rounded-sm [&]:focus:rounded-sm cursor-pointer"
748
748
  data-calendar-day="2020-01-05"
749
749
  data-testid="day-button-5"
750
750
  type="button"