@squiz/resource-browser 1.32.1-alpha.12

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 (160) hide show
  1. package/.storybook/main.ts +23 -0
  2. package/.storybook/preview-head.html +15 -0
  3. package/.storybook/preview.ts +16 -0
  4. package/build.js +21 -0
  5. package/jest.config.ts +18 -0
  6. package/lib/Icons/Generics/ArrowDown.d.ts +15 -0
  7. package/lib/Icons/Generics/ArrowDown.js +23 -0
  8. package/lib/Icons/Generics/ArrowRight.d.ts +15 -0
  9. package/lib/Icons/Generics/ArrowRight.js +23 -0
  10. package/lib/Icons/Generics/Close.d.ts +15 -0
  11. package/lib/Icons/Generics/Close.js +23 -0
  12. package/lib/Icons/Generics/GenericIconMap.d.ts +10 -0
  13. package/lib/Icons/Generics/GenericIconMap.js +14 -0
  14. package/lib/Icons/Generics/ResourceSelect.d.ts +15 -0
  15. package/lib/Icons/Generics/ResourceSelect.js +28 -0
  16. package/lib/Icons/Generics/Root.d.ts +15 -0
  17. package/lib/Icons/Generics/Root.js +23 -0
  18. package/lib/Icons/Generics/Selected.d.ts +15 -0
  19. package/lib/Icons/Generics/Selected.js +23 -0
  20. package/lib/Icons/Generics/index.d.ts +6 -0
  21. package/lib/Icons/Generics/index.js +19 -0
  22. package/lib/Icons/Icon.d.ts +47 -0
  23. package/lib/Icons/Icon.js +44 -0
  24. package/lib/Icons/MatrixResources/Audio.d.ts +15 -0
  25. package/lib/Icons/MatrixResources/Audio.js +28 -0
  26. package/lib/Icons/MatrixResources/Excel.d.ts +15 -0
  27. package/lib/Icons/MatrixResources/Excel.js +27 -0
  28. package/lib/Icons/MatrixResources/Folder.d.ts +15 -0
  29. package/lib/Icons/MatrixResources/Folder.js +24 -0
  30. package/lib/Icons/MatrixResources/GenericFile.d.ts +15 -0
  31. package/lib/Icons/MatrixResources/GenericFile.js +28 -0
  32. package/lib/Icons/MatrixResources/Image.d.ts +15 -0
  33. package/lib/Icons/MatrixResources/Image.js +26 -0
  34. package/lib/Icons/MatrixResources/MatrixResourceMap.d.ts +15 -0
  35. package/lib/Icons/MatrixResources/MatrixResourceMap.js +19 -0
  36. package/lib/Icons/MatrixResources/Page.d.ts +15 -0
  37. package/lib/Icons/MatrixResources/Page.js +30 -0
  38. package/lib/Icons/MatrixResources/Pdf.d.ts +15 -0
  39. package/lib/Icons/MatrixResources/Pdf.js +31 -0
  40. package/lib/Icons/MatrixResources/Powerpoint.d.ts +15 -0
  41. package/lib/Icons/MatrixResources/Powerpoint.js +28 -0
  42. package/lib/Icons/MatrixResources/Site.d.ts +15 -0
  43. package/lib/Icons/MatrixResources/Site.js +30 -0
  44. package/lib/Icons/MatrixResources/Video.d.ts +15 -0
  45. package/lib/Icons/MatrixResources/Video.js +24 -0
  46. package/lib/Icons/MatrixResources/Word.d.ts +17 -0
  47. package/lib/Icons/MatrixResources/Word.js +28 -0
  48. package/lib/Icons/MatrixResources/index.d.ts +11 -0
  49. package/lib/Icons/MatrixResources/index.js +29 -0
  50. package/lib/Modal/Modal.d.ts +11 -0
  51. package/lib/Modal/Modal.js +46 -0
  52. package/lib/Modal/ModalOpeningButton.d.ts +10 -0
  53. package/lib/Modal/ModalOpeningButton.js +13 -0
  54. package/lib/Modal/ModalTrigger.d.ts +9 -0
  55. package/lib/Modal/ModalTrigger.js +24 -0
  56. package/lib/PreviewPanel/PreviewModal.d.ts +11 -0
  57. package/lib/PreviewPanel/PreviewModal.js +81 -0
  58. package/lib/PreviewPanel/PreviewPanel.d.ts +16 -0
  59. package/lib/PreviewPanel/PreviewPanel.js +87 -0
  60. package/lib/PreviewPanel/details/MatrixResource.d.ts +12 -0
  61. package/lib/PreviewPanel/details/MatrixResource.js +41 -0
  62. package/lib/ResourceBreadcrumb/ResourceBreadcrumb.d.ts +9 -0
  63. package/lib/ResourceBreadcrumb/ResourceBreadcrumb.js +20 -0
  64. package/lib/ResourceItem/ResourceItem.d.ts +19 -0
  65. package/lib/ResourceItem/ResourceItem.js +26 -0
  66. package/lib/ResourceList/ResourceList.d.ts +14 -0
  67. package/lib/ResourceList/ResourceList.js +51 -0
  68. package/lib/ResourcePickerContainer/ResourcePickerContainer.d.ts +15 -0
  69. package/lib/ResourcePickerContainer/ResourcePickerContainer.js +145 -0
  70. package/lib/Skeleton/List/SkeletonList.d.ts +6 -0
  71. package/lib/Skeleton/List/SkeletonList.js +13 -0
  72. package/lib/Skeleton/ListItem/SkeletonListItem.d.ts +2 -0
  73. package/lib/Skeleton/ListItem/SkeletonListItem.js +15 -0
  74. package/lib/SourceDropdown/SourceDropdown.d.ts +9 -0
  75. package/lib/SourceDropdown/SourceDropdown.js +106 -0
  76. package/lib/SourceList/SourceList.d.ts +14 -0
  77. package/lib/SourceList/SourceList.js +58 -0
  78. package/lib/Spinner/Spinner.d.ts +8 -0
  79. package/lib/Spinner/Spinner.js +12 -0
  80. package/lib/index.css +968 -0
  81. package/lib/index.d.ts +37 -0
  82. package/lib/index.js +15 -0
  83. package/lib/uuid.d.ts +1 -0
  84. package/lib/uuid.js +8 -0
  85. package/package.json +74 -0
  86. package/postcss.config.js +11 -0
  87. package/src/Icons/Generics/ArrowDown.tsx +27 -0
  88. package/src/Icons/Generics/ArrowRight.tsx +27 -0
  89. package/src/Icons/Generics/Close.tsx +26 -0
  90. package/src/Icons/Generics/GenericIconMap.ts +14 -0
  91. package/src/Icons/Generics/ResourceSelect.tsx +40 -0
  92. package/src/Icons/Generics/Root.tsx +24 -0
  93. package/src/Icons/Generics/Selected.tsx +27 -0
  94. package/src/Icons/Generics/index.tsx +7 -0
  95. package/src/Icons/Icon.spec.tsx +62 -0
  96. package/src/Icons/Icon.stories.tsx +105 -0
  97. package/src/Icons/Icon.tsx +61 -0
  98. package/src/Icons/MatrixResources/Audio.tsx +30 -0
  99. package/src/Icons/MatrixResources/Excel.tsx +29 -0
  100. package/src/Icons/MatrixResources/Folder.tsx +29 -0
  101. package/src/Icons/MatrixResources/GenericFile.tsx +34 -0
  102. package/src/Icons/MatrixResources/Image.tsx +36 -0
  103. package/src/Icons/MatrixResources/MatrixResourceMap.ts +19 -0
  104. package/src/Icons/MatrixResources/Page.tsx +33 -0
  105. package/src/Icons/MatrixResources/Pdf.tsx +34 -0
  106. package/src/Icons/MatrixResources/Powerpoint.tsx +34 -0
  107. package/src/Icons/MatrixResources/Site.tsx +37 -0
  108. package/src/Icons/MatrixResources/Video.tsx +27 -0
  109. package/src/Icons/MatrixResources/Word.tsx +30 -0
  110. package/src/Icons/MatrixResources/index.tsx +12 -0
  111. package/src/Modal/Modal.spec.tsx +244 -0
  112. package/src/Modal/Modal.tsx +58 -0
  113. package/src/Modal/ModalContainer.stories.tsx +33 -0
  114. package/src/Modal/ModalOpeningButton.tsx +20 -0
  115. package/src/Modal/ModalTrigger.tsx +45 -0
  116. package/src/PreviewPanel/PreviewModal.spec.tsx +164 -0
  117. package/src/PreviewPanel/PreviewModal.tsx +92 -0
  118. package/src/PreviewPanel/PreviewPanel.spec.tsx +197 -0
  119. package/src/PreviewPanel/PreviewPanel.stories.tsx +61 -0
  120. package/src/PreviewPanel/PreviewPanel.tsx +123 -0
  121. package/src/PreviewPanel/details/MatrixResource.tsx +59 -0
  122. package/src/ResourceBreadcrumb/ResourceBreadcrumb.spec.tsx +76 -0
  123. package/src/ResourceBreadcrumb/ResourceBreadcrumb.stories.tsx +24 -0
  124. package/src/ResourceBreadcrumb/ResourceBreadcrumb.tsx +39 -0
  125. package/src/ResourceBreadcrumb/sample-hierarchy.json +23 -0
  126. package/src/ResourceItem/ResourceItem.spec.tsx +69 -0
  127. package/src/ResourceItem/ResourceItem.tsx +82 -0
  128. package/src/ResourceList/ResourceList.spec.tsx +196 -0
  129. package/src/ResourceList/ResourceList.stories.tsx +40 -0
  130. package/src/ResourceList/ResourceList.tsx +74 -0
  131. package/src/ResourceList/sample-resources.json +75 -0
  132. package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx +706 -0
  133. package/src/ResourcePickerContainer/ResourcePickerContainer.stories.tsx +56 -0
  134. package/src/ResourcePickerContainer/ResourcePickerContainer.tsx +224 -0
  135. package/src/Skeleton/List/SkeletonList.spec.tsx +18 -0
  136. package/src/Skeleton/List/SkeletonList.stories.tsx +15 -0
  137. package/src/Skeleton/List/SkeletonList.tsx +16 -0
  138. package/src/Skeleton/ListItem/SkeletonListItem.stories.tsx +15 -0
  139. package/src/Skeleton/ListItem/SkeletonListItem.tsx +14 -0
  140. package/src/SourceDropdown/SourceDropdown.spec.tsx +263 -0
  141. package/src/SourceDropdown/SourceDropdown.stories.tsx +36 -0
  142. package/src/SourceDropdown/SourceDropdown.tsx +175 -0
  143. package/src/SourceDropdown/sample-sources.json +110 -0
  144. package/src/SourceList/SourceList.spec.tsx +224 -0
  145. package/src/SourceList/SourceList.stories.tsx +40 -0
  146. package/src/SourceList/SourceList.tsx +93 -0
  147. package/src/SourceList/sample-sources.json +110 -0
  148. package/src/Spinner/Spinner.spec.tsx +18 -0
  149. package/src/Spinner/Spinner.stories.tsx +26 -0
  150. package/src/Spinner/Spinner.tsx +18 -0
  151. package/src/Spinner/_spinner.scss +11 -0
  152. package/src/__mocks__/JestHelpers.ts +65 -0
  153. package/src/__mocks__/jestHelpers.spec.ts +38 -0
  154. package/src/__mocks__/styleMock.ts +1 -0
  155. package/src/index.scss +7 -0
  156. package/src/index.stories.tsx +70 -0
  157. package/src/index.tsx +71 -0
  158. package/src/uuid.ts +7 -0
  159. package/tailwind.config.cjs +84 -0
  160. package/tsconfig.json +22 -0
package/lib/index.css ADDED
@@ -0,0 +1,968 @@
1
+ /* src/index.scss */
2
+ .squiz-rb-scope *,
3
+ .squiz-rb-scope ::before,
4
+ .squiz-rb-scope ::after {
5
+ box-sizing: border-box;
6
+ border-width: 0;
7
+ border-style: solid;
8
+ border-color: #ededed;
9
+ }
10
+ .squiz-rb-scope ::before,
11
+ .squiz-rb-scope ::after {
12
+ --tw-content: "";
13
+ }
14
+ .squiz-rb-scope html {
15
+ line-height: 1.5;
16
+ -webkit-text-size-adjust: 100%;
17
+ -moz-tab-size: 4;
18
+ -o-tab-size: 4;
19
+ tab-size: 4;
20
+ font-family:
21
+ ui-sans-serif,
22
+ system-ui,
23
+ -apple-system,
24
+ BlinkMacSystemFont,
25
+ "Segoe UI",
26
+ Roboto,
27
+ "Helvetica Neue",
28
+ Arial,
29
+ "Noto Sans",
30
+ sans-serif,
31
+ "Apple Color Emoji",
32
+ "Segoe UI Emoji",
33
+ "Segoe UI Symbol",
34
+ "Noto Color Emoji";
35
+ font-feature-settings: normal;
36
+ font-variation-settings: normal;
37
+ }
38
+ .squiz-rb-scope body {
39
+ margin: 0;
40
+ line-height: inherit;
41
+ }
42
+ .squiz-rb-scope hr {
43
+ height: 0;
44
+ color: inherit;
45
+ border-top-width: 1px;
46
+ }
47
+ .squiz-rb-scope abbr:where([title]) {
48
+ -webkit-text-decoration: underline dotted;
49
+ text-decoration: underline dotted;
50
+ }
51
+ .squiz-rb-scope h1,
52
+ .squiz-rb-scope h2,
53
+ .squiz-rb-scope h3,
54
+ .squiz-rb-scope h4,
55
+ .squiz-rb-scope h5,
56
+ .squiz-rb-scope h6 {
57
+ font-size: inherit;
58
+ font-weight: inherit;
59
+ }
60
+ .squiz-rb-scope a {
61
+ color: inherit;
62
+ text-decoration: inherit;
63
+ }
64
+ .squiz-rb-scope b,
65
+ .squiz-rb-scope strong {
66
+ font-weight: bolder;
67
+ }
68
+ .squiz-rb-scope code,
69
+ .squiz-rb-scope kbd,
70
+ .squiz-rb-scope samp,
71
+ .squiz-rb-scope pre {
72
+ font-family:
73
+ ui-monospace,
74
+ SFMono-Regular,
75
+ Menlo,
76
+ Monaco,
77
+ Consolas,
78
+ "Liberation Mono",
79
+ "Courier New",
80
+ monospace;
81
+ font-size: 1em;
82
+ }
83
+ .squiz-rb-scope small {
84
+ font-size: 80%;
85
+ }
86
+ .squiz-rb-scope sub,
87
+ .squiz-rb-scope sup {
88
+ font-size: 75%;
89
+ line-height: 0;
90
+ position: relative;
91
+ vertical-align: baseline;
92
+ }
93
+ .squiz-rb-scope sub {
94
+ bottom: -0.25em;
95
+ }
96
+ .squiz-rb-scope sup {
97
+ top: -0.5em;
98
+ }
99
+ .squiz-rb-scope table {
100
+ text-indent: 0;
101
+ border-color: inherit;
102
+ border-collapse: collapse;
103
+ }
104
+ .squiz-rb-scope button,
105
+ .squiz-rb-scope input,
106
+ .squiz-rb-scope optgroup,
107
+ .squiz-rb-scope select,
108
+ .squiz-rb-scope textarea {
109
+ font-family: inherit;
110
+ font-size: 100%;
111
+ font-weight: inherit;
112
+ line-height: inherit;
113
+ color: inherit;
114
+ margin: 0;
115
+ padding: 0;
116
+ }
117
+ .squiz-rb-scope button,
118
+ .squiz-rb-scope select {
119
+ text-transform: none;
120
+ }
121
+ .squiz-rb-scope button,
122
+ .squiz-rb-scope [type=button],
123
+ .squiz-rb-scope [type=reset],
124
+ .squiz-rb-scope [type=submit] {
125
+ -webkit-appearance: button;
126
+ background-color: transparent;
127
+ background-image: none;
128
+ }
129
+ .squiz-rb-scope :-moz-focusring {
130
+ outline: auto;
131
+ }
132
+ .squiz-rb-scope :-moz-ui-invalid {
133
+ box-shadow: none;
134
+ }
135
+ .squiz-rb-scope progress {
136
+ vertical-align: baseline;
137
+ }
138
+ .squiz-rb-scope ::-webkit-inner-spin-button,
139
+ .squiz-rb-scope ::-webkit-outer-spin-button {
140
+ height: auto;
141
+ }
142
+ .squiz-rb-scope [type=search] {
143
+ -webkit-appearance: textfield;
144
+ outline-offset: -2px;
145
+ }
146
+ .squiz-rb-scope ::-webkit-search-decoration {
147
+ -webkit-appearance: none;
148
+ }
149
+ .squiz-rb-scope ::-webkit-file-upload-button {
150
+ -webkit-appearance: button;
151
+ font: inherit;
152
+ }
153
+ .squiz-rb-scope summary {
154
+ display: list-item;
155
+ }
156
+ .squiz-rb-scope blockquote,
157
+ .squiz-rb-scope dl,
158
+ .squiz-rb-scope dd,
159
+ .squiz-rb-scope h1,
160
+ .squiz-rb-scope h2,
161
+ .squiz-rb-scope h3,
162
+ .squiz-rb-scope h4,
163
+ .squiz-rb-scope h5,
164
+ .squiz-rb-scope h6,
165
+ .squiz-rb-scope hr,
166
+ .squiz-rb-scope figure,
167
+ .squiz-rb-scope p,
168
+ .squiz-rb-scope pre {
169
+ margin: 0;
170
+ }
171
+ .squiz-rb-scope fieldset {
172
+ margin: 0;
173
+ padding: 0;
174
+ }
175
+ .squiz-rb-scope legend {
176
+ padding: 0;
177
+ }
178
+ .squiz-rb-scope ol,
179
+ .squiz-rb-scope ul,
180
+ .squiz-rb-scope menu {
181
+ list-style: none;
182
+ margin: 0;
183
+ padding: 0;
184
+ }
185
+ .squiz-rb-scope textarea {
186
+ resize: vertical;
187
+ }
188
+ .squiz-rb-scope input::-moz-placeholder,
189
+ .squiz-rb-scope textarea::-moz-placeholder {
190
+ opacity: 1;
191
+ color: #BABABA;
192
+ }
193
+ .squiz-rb-scope input::placeholder,
194
+ .squiz-rb-scope textarea::placeholder {
195
+ opacity: 1;
196
+ color: #BABABA;
197
+ }
198
+ .squiz-rb-scope button,
199
+ .squiz-rb-scope [role=button] {
200
+ cursor: pointer;
201
+ }
202
+ .squiz-rb-scope :disabled {
203
+ cursor: default;
204
+ }
205
+ .squiz-rb-scope img,
206
+ .squiz-rb-scope svg,
207
+ .squiz-rb-scope video,
208
+ .squiz-rb-scope canvas,
209
+ .squiz-rb-scope audio,
210
+ .squiz-rb-scope iframe,
211
+ .squiz-rb-scope embed,
212
+ .squiz-rb-scope object {
213
+ display: block;
214
+ vertical-align: middle;
215
+ }
216
+ .squiz-rb-scope img,
217
+ .squiz-rb-scope video {
218
+ max-width: 100%;
219
+ height: auto;
220
+ }
221
+ .squiz-rb-scope [hidden] {
222
+ display: none;
223
+ }
224
+ .squiz-rb-scope *,
225
+ .squiz-rb-scope ::before,
226
+ .squiz-rb-scope ::after {
227
+ --tw-border-spacing-x: 0;
228
+ --tw-border-spacing-y: 0;
229
+ --tw-translate-x: 0;
230
+ --tw-translate-y: 0;
231
+ --tw-rotate: 0;
232
+ --tw-skew-x: 0;
233
+ --tw-skew-y: 0;
234
+ --tw-scale-x: 1;
235
+ --tw-scale-y: 1;
236
+ --tw-pan-x: ;
237
+ --tw-pan-y: ;
238
+ --tw-pinch-zoom: ;
239
+ --tw-scroll-snap-strictness: proximity;
240
+ --tw-ordinal: ;
241
+ --tw-slashed-zero: ;
242
+ --tw-numeric-figure: ;
243
+ --tw-numeric-spacing: ;
244
+ --tw-numeric-fraction: ;
245
+ --tw-ring-inset: ;
246
+ --tw-ring-offset-width: 0px;
247
+ --tw-ring-offset-color: #fff;
248
+ --tw-ring-color: rgb(59 130 246 / 0.5);
249
+ --tw-ring-offset-shadow: 0 0 #0000;
250
+ --tw-ring-shadow: 0 0 #0000;
251
+ --tw-shadow: 0 0 #0000;
252
+ --tw-shadow-colored: 0 0 #0000;
253
+ --tw-blur: ;
254
+ --tw-brightness: ;
255
+ --tw-contrast: ;
256
+ --tw-grayscale: ;
257
+ --tw-hue-rotate: ;
258
+ --tw-invert: ;
259
+ --tw-saturate: ;
260
+ --tw-sepia: ;
261
+ --tw-drop-shadow: ;
262
+ --tw-backdrop-blur: ;
263
+ --tw-backdrop-brightness: ;
264
+ --tw-backdrop-contrast: ;
265
+ --tw-backdrop-grayscale: ;
266
+ --tw-backdrop-hue-rotate: ;
267
+ --tw-backdrop-invert: ;
268
+ --tw-backdrop-opacity: ;
269
+ --tw-backdrop-saturate: ;
270
+ --tw-backdrop-sepia: ;
271
+ }
272
+ .squiz-rb-scope ::backdrop {
273
+ --tw-border-spacing-x: 0;
274
+ --tw-border-spacing-y: 0;
275
+ --tw-translate-x: 0;
276
+ --tw-translate-y: 0;
277
+ --tw-rotate: 0;
278
+ --tw-skew-x: 0;
279
+ --tw-skew-y: 0;
280
+ --tw-scale-x: 1;
281
+ --tw-scale-y: 1;
282
+ --tw-pan-x: ;
283
+ --tw-pan-y: ;
284
+ --tw-pinch-zoom: ;
285
+ --tw-scroll-snap-strictness: proximity;
286
+ --tw-ordinal: ;
287
+ --tw-slashed-zero: ;
288
+ --tw-numeric-figure: ;
289
+ --tw-numeric-spacing: ;
290
+ --tw-numeric-fraction: ;
291
+ --tw-ring-inset: ;
292
+ --tw-ring-offset-width: 0px;
293
+ --tw-ring-offset-color: #fff;
294
+ --tw-ring-color: rgb(59 130 246 / 0.5);
295
+ --tw-ring-offset-shadow: 0 0 #0000;
296
+ --tw-ring-shadow: 0 0 #0000;
297
+ --tw-shadow: 0 0 #0000;
298
+ --tw-shadow-colored: 0 0 #0000;
299
+ --tw-blur: ;
300
+ --tw-brightness: ;
301
+ --tw-contrast: ;
302
+ --tw-grayscale: ;
303
+ --tw-hue-rotate: ;
304
+ --tw-invert: ;
305
+ --tw-saturate: ;
306
+ --tw-sepia: ;
307
+ --tw-drop-shadow: ;
308
+ --tw-backdrop-blur: ;
309
+ --tw-backdrop-brightness: ;
310
+ --tw-backdrop-contrast: ;
311
+ --tw-backdrop-grayscale: ;
312
+ --tw-backdrop-hue-rotate: ;
313
+ --tw-backdrop-invert: ;
314
+ --tw-backdrop-opacity: ;
315
+ --tw-backdrop-saturate: ;
316
+ --tw-backdrop-sepia: ;
317
+ }
318
+ .squiz-rb-scope .container {
319
+ width: 100%;
320
+ }
321
+ @media (min-width: 640px) {
322
+ .squiz-rb-scope .container {
323
+ max-width: 640px;
324
+ }
325
+ }
326
+ @media (min-width: 768px) {
327
+ .squiz-rb-scope .container {
328
+ max-width: 768px;
329
+ }
330
+ }
331
+ @media (min-width: 1024px) {
332
+ .squiz-rb-scope .container {
333
+ max-width: 1024px;
334
+ }
335
+ }
336
+ @media (min-width: 1280px) {
337
+ .squiz-rb-scope .container {
338
+ max-width: 1280px;
339
+ }
340
+ }
341
+ @media (min-width: 1536px) {
342
+ .squiz-rb-scope .container {
343
+ max-width: 1536px;
344
+ }
345
+ }
346
+ .squiz-rb-scope .sr-only {
347
+ position: absolute;
348
+ width: 1px;
349
+ height: 1px;
350
+ padding: 0;
351
+ margin: -1px;
352
+ overflow: hidden;
353
+ clip: rect(0, 0, 0, 0);
354
+ white-space: nowrap;
355
+ border-width: 0;
356
+ }
357
+ .squiz-rb-scope .fixed {
358
+ position: fixed;
359
+ }
360
+ .squiz-rb-scope .absolute {
361
+ position: absolute;
362
+ }
363
+ .squiz-rb-scope .relative {
364
+ position: relative;
365
+ }
366
+ .squiz-rb-scope .inset-0 {
367
+ inset: 0px;
368
+ }
369
+ .squiz-rb-scope .-left-0 {
370
+ left: -0px;
371
+ }
372
+ .squiz-rb-scope .-left-0\.5 {
373
+ left: -0.125rem;
374
+ }
375
+ .squiz-rb-scope .bottom-0 {
376
+ bottom: 0px;
377
+ }
378
+ .squiz-rb-scope .right-2 {
379
+ right: 0.5rem;
380
+ }
381
+ .squiz-rb-scope .right-3 {
382
+ right: 0.75rem;
383
+ }
384
+ .squiz-rb-scope .right-4 {
385
+ right: 1rem;
386
+ }
387
+ .squiz-rb-scope .right-5 {
388
+ right: 1.25rem;
389
+ }
390
+ .squiz-rb-scope .top-2 {
391
+ top: 0.5rem;
392
+ }
393
+ .squiz-rb-scope .top-3 {
394
+ top: 0.75rem;
395
+ }
396
+ .squiz-rb-scope .top-\[calc\(100\%\+5px\)\] {
397
+ top: calc(100% + 5px);
398
+ }
399
+ .squiz-rb-scope .z-10 {
400
+ z-index: 10;
401
+ }
402
+ .squiz-rb-scope .z-50 {
403
+ z-index: 50;
404
+ }
405
+ .squiz-rb-scope .z-\[9999\] {
406
+ z-index: 9999;
407
+ }
408
+ .squiz-rb-scope .m-5 {
409
+ margin: 1.25rem;
410
+ }
411
+ .squiz-rb-scope .mx-20 {
412
+ margin-left: 5rem;
413
+ margin-right: 5rem;
414
+ }
415
+ .squiz-rb-scope .mx-4 {
416
+ margin-left: 1rem;
417
+ margin-right: 1rem;
418
+ }
419
+ .squiz-rb-scope .mx-5 {
420
+ margin-left: 1.25rem;
421
+ margin-right: 1.25rem;
422
+ }
423
+ .squiz-rb-scope .mx-6 {
424
+ margin-left: 1.5rem;
425
+ margin-right: 1.5rem;
426
+ }
427
+ .squiz-rb-scope .my-4 {
428
+ margin-top: 1rem;
429
+ margin-bottom: 1rem;
430
+ }
431
+ .squiz-rb-scope .my-5 {
432
+ margin-top: 1.25rem;
433
+ margin-bottom: 1.25rem;
434
+ }
435
+ .squiz-rb-scope .mb-1 {
436
+ margin-bottom: 0.25rem;
437
+ }
438
+ .squiz-rb-scope .mb-2 {
439
+ margin-bottom: 0.5rem;
440
+ }
441
+ .squiz-rb-scope .ml-1 {
442
+ margin-left: 0.25rem;
443
+ }
444
+ .squiz-rb-scope .ml-auto {
445
+ margin-left: auto;
446
+ }
447
+ .squiz-rb-scope .mr-1 {
448
+ margin-right: 0.25rem;
449
+ }
450
+ .squiz-rb-scope .mr-2 {
451
+ margin-right: 0.5rem;
452
+ }
453
+ .squiz-rb-scope .mr-2\.5 {
454
+ margin-right: 0.625rem;
455
+ }
456
+ .squiz-rb-scope .mr-3 {
457
+ margin-right: 0.75rem;
458
+ }
459
+ .squiz-rb-scope .mr-4 {
460
+ margin-right: 1rem;
461
+ }
462
+ .squiz-rb-scope .mr-6 {
463
+ margin-right: 1.5rem;
464
+ }
465
+ .squiz-rb-scope .mr-7 {
466
+ margin-right: 1.75rem;
467
+ }
468
+ .squiz-rb-scope .mt-2 {
469
+ margin-top: 0.5rem;
470
+ }
471
+ .squiz-rb-scope .mt-20 {
472
+ margin-top: 5rem;
473
+ }
474
+ .squiz-rb-scope .mt-3 {
475
+ margin-top: 0.75rem;
476
+ }
477
+ .squiz-rb-scope .mt-4 {
478
+ margin-top: 1rem;
479
+ }
480
+ .squiz-rb-scope .mt-6 {
481
+ margin-top: 1.5rem;
482
+ }
483
+ .squiz-rb-scope .mt-7 {
484
+ margin-top: 1.75rem;
485
+ }
486
+ .squiz-rb-scope .block {
487
+ display: block;
488
+ }
489
+ .squiz-rb-scope .flex {
490
+ display: flex;
491
+ }
492
+ .squiz-rb-scope .grid {
493
+ display: grid;
494
+ }
495
+ .squiz-rb-scope .contents {
496
+ display: contents;
497
+ }
498
+ .squiz-rb-scope .hidden {
499
+ display: none;
500
+ }
501
+ .squiz-rb-scope .h-14 {
502
+ height: 3.5rem;
503
+ }
504
+ .squiz-rb-scope .h-2 {
505
+ height: 0.5rem;
506
+ }
507
+ .squiz-rb-scope .h-3 {
508
+ height: 0.75rem;
509
+ }
510
+ .squiz-rb-scope .h-36 {
511
+ height: 9rem;
512
+ }
513
+ .squiz-rb-scope .h-4 {
514
+ height: 1rem;
515
+ }
516
+ .squiz-rb-scope .h-6 {
517
+ height: 1.5rem;
518
+ }
519
+ .squiz-rb-scope .h-\[50vh\] {
520
+ height: 50vh;
521
+ }
522
+ .squiz-rb-scope .h-\[calc\(100\%-92px\)\] {
523
+ height: calc(100% - 92px);
524
+ }
525
+ .squiz-rb-scope .h-full {
526
+ height: 100%;
527
+ }
528
+ .squiz-rb-scope .h-screen {
529
+ height: 100vh;
530
+ }
531
+ .squiz-rb-scope .min-h-full {
532
+ min-height: 100%;
533
+ }
534
+ .squiz-rb-scope .w-1\/2 {
535
+ width: 50%;
536
+ }
537
+ .squiz-rb-scope .w-10 {
538
+ width: 2.5rem;
539
+ }
540
+ .squiz-rb-scope .w-12 {
541
+ width: 3rem;
542
+ }
543
+ .squiz-rb-scope .w-14 {
544
+ width: 3.5rem;
545
+ }
546
+ .squiz-rb-scope .w-3 {
547
+ width: 0.75rem;
548
+ }
549
+ .squiz-rb-scope .w-3\/4 {
550
+ width: 75%;
551
+ }
552
+ .squiz-rb-scope .w-36 {
553
+ width: 9rem;
554
+ }
555
+ .squiz-rb-scope .w-4 {
556
+ width: 1rem;
557
+ }
558
+ .squiz-rb-scope .w-6 {
559
+ width: 1.5rem;
560
+ }
561
+ .squiz-rb-scope .w-72 {
562
+ width: 18rem;
563
+ }
564
+ .squiz-rb-scope .w-\[60px\] {
565
+ width: 60px;
566
+ }
567
+ .squiz-rb-scope .w-\[calc\(100\%\+4px\)\] {
568
+ width: calc(100% + 4px);
569
+ }
570
+ .squiz-rb-scope .w-full {
571
+ width: 100%;
572
+ }
573
+ .squiz-rb-scope .w-screen {
574
+ width: 100vw;
575
+ }
576
+ .squiz-rb-scope .max-w-\[200px\] {
577
+ max-width: 200px;
578
+ }
579
+ .squiz-rb-scope .max-w-screen-lg {
580
+ max-width: 1024px;
581
+ }
582
+ .squiz-rb-scope .flex-1 {
583
+ flex: 1 1 0%;
584
+ }
585
+ .squiz-rb-scope .shrink-0 {
586
+ flex-shrink: 0;
587
+ }
588
+ .squiz-rb-scope .grow {
589
+ flex-grow: 1;
590
+ }
591
+ .squiz-rb-scope .grow-\[3\] {
592
+ flex-grow: 3;
593
+ }
594
+ .squiz-rb-scope .cursor-not-allowed {
595
+ cursor: not-allowed;
596
+ }
597
+ .squiz-rb-scope .resize {
598
+ resize: both;
599
+ }
600
+ .squiz-rb-scope .grid-cols-\[24px_1fr_45px\] {
601
+ grid-template-columns: 24px 1fr 45px;
602
+ }
603
+ .squiz-rb-scope .flex-col {
604
+ flex-direction: column;
605
+ }
606
+ .squiz-rb-scope .items-center {
607
+ align-items: center;
608
+ }
609
+ .squiz-rb-scope .items-stretch {
610
+ align-items: stretch;
611
+ }
612
+ .squiz-rb-scope .justify-end {
613
+ justify-content: flex-end;
614
+ }
615
+ .squiz-rb-scope .justify-center {
616
+ justify-content: center;
617
+ }
618
+ .squiz-rb-scope .overflow-y-scroll {
619
+ overflow-y: scroll;
620
+ }
621
+ .squiz-rb-scope .truncate {
622
+ overflow: hidden;
623
+ text-overflow: ellipsis;
624
+ white-space: nowrap;
625
+ }
626
+ .squiz-rb-scope .break-all {
627
+ word-break: break-all;
628
+ }
629
+ .squiz-rb-scope .rounded {
630
+ border-radius: 4px;
631
+ }
632
+ .squiz-rb-scope .rounded-full {
633
+ border-radius: 9999px;
634
+ }
635
+ .squiz-rb-scope .rounded-lg {
636
+ border-radius: 0.5rem;
637
+ }
638
+ .squiz-rb-scope .border {
639
+ border-width: 1px;
640
+ }
641
+ .squiz-rb-scope .border-2 {
642
+ border-width: 2px;
643
+ }
644
+ .squiz-rb-scope .border-b {
645
+ border-bottom-width: 1px;
646
+ }
647
+ .squiz-rb-scope .border-b-0 {
648
+ border-bottom-width: 0px;
649
+ }
650
+ .squiz-rb-scope .border-l {
651
+ border-left-width: 1px;
652
+ }
653
+ .squiz-rb-scope .border-r {
654
+ border-right-width: 1px;
655
+ }
656
+ .squiz-rb-scope .border-t {
657
+ border-top-width: 1px;
658
+ }
659
+ .squiz-rb-scope .border-solid {
660
+ border-style: solid;
661
+ }
662
+ .squiz-rb-scope .border-black {
663
+ --tw-border-opacity: 1;
664
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
665
+ }
666
+ .squiz-rb-scope .border-gray-300 {
667
+ --tw-border-opacity: 1;
668
+ border-color: rgb(224 224 224 / var(--tw-border-opacity));
669
+ }
670
+ .squiz-rb-scope .border-opacity-20 {
671
+ --tw-border-opacity: 0.2;
672
+ }
673
+ .squiz-rb-scope .bg-blue-100 {
674
+ --tw-bg-opacity: 1;
675
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
676
+ }
677
+ .squiz-rb-scope .bg-blue-300 {
678
+ --tw-bg-opacity: 1;
679
+ background-color: rgb(7 116 210 / var(--tw-bg-opacity));
680
+ }
681
+ .squiz-rb-scope .bg-blue-300\/\[\.6\] {
682
+ background-color: rgb(7 116 210 / .6);
683
+ }
684
+ .squiz-rb-scope .bg-gray-100 {
685
+ --tw-bg-opacity: 1;
686
+ background-color: rgb(245 245 245 / var(--tw-bg-opacity));
687
+ }
688
+ .squiz-rb-scope .bg-gray-200 {
689
+ --tw-bg-opacity: 1;
690
+ background-color: rgb(237 237 237 / var(--tw-bg-opacity));
691
+ }
692
+ .squiz-rb-scope .bg-white {
693
+ --tw-bg-opacity: 1;
694
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
695
+ }
696
+ .squiz-rb-scope .p-1 {
697
+ padding: 0.25rem;
698
+ }
699
+ .squiz-rb-scope .p-2 {
700
+ padding: 0.5rem;
701
+ }
702
+ .squiz-rb-scope .p-2\.5 {
703
+ padding: 0.625rem;
704
+ }
705
+ .squiz-rb-scope .p-4 {
706
+ padding: 1rem;
707
+ }
708
+ .squiz-rb-scope .p-6 {
709
+ padding: 1.5rem;
710
+ }
711
+ .squiz-rb-scope .px-2 {
712
+ padding-left: 0.5rem;
713
+ padding-right: 0.5rem;
714
+ }
715
+ .squiz-rb-scope .px-2\.5 {
716
+ padding-left: 0.625rem;
717
+ padding-right: 0.625rem;
718
+ }
719
+ .squiz-rb-scope .px-3 {
720
+ padding-left: 0.75rem;
721
+ padding-right: 0.75rem;
722
+ }
723
+ .squiz-rb-scope .px-7 {
724
+ padding-left: 1.75rem;
725
+ padding-right: 1.75rem;
726
+ }
727
+ .squiz-rb-scope .py-2 {
728
+ padding-top: 0.5rem;
729
+ padding-bottom: 0.5rem;
730
+ }
731
+ .squiz-rb-scope .py-4 {
732
+ padding-top: 1rem;
733
+ padding-bottom: 1rem;
734
+ }
735
+ .squiz-rb-scope .pb-4 {
736
+ padding-bottom: 1rem;
737
+ }
738
+ .squiz-rb-scope .text-left {
739
+ text-align: left;
740
+ }
741
+ .squiz-rb-scope .text-center {
742
+ text-align: center;
743
+ }
744
+ .squiz-rb-scope .text-right {
745
+ text-align: right;
746
+ }
747
+ .squiz-rb-scope .text-base {
748
+ font-size: 1rem;
749
+ }
750
+ .squiz-rb-scope .text-sm {
751
+ font-size: 0.8125rem;
752
+ }
753
+ .squiz-rb-scope .text-xl {
754
+ font-size: 1.25rem;
755
+ line-height: 1.75rem;
756
+ }
757
+ .squiz-rb-scope .font-normal {
758
+ font-weight: 400;
759
+ }
760
+ .squiz-rb-scope .font-semibold {
761
+ font-weight: 600;
762
+ }
763
+ .squiz-rb-scope .leading-6 {
764
+ line-height: 1.5rem;
765
+ }
766
+ .squiz-rb-scope .text-blue-300 {
767
+ --tw-text-opacity: 1;
768
+ color: rgb(7 116 210 / var(--tw-text-opacity));
769
+ }
770
+ .squiz-rb-scope .text-blue-400 {
771
+ --tw-text-opacity: 1;
772
+ color: rgb(4 73 133 / var(--tw-text-opacity));
773
+ }
774
+ .squiz-rb-scope .text-gray-600 {
775
+ --tw-text-opacity: 1;
776
+ color: rgb(112 112 112 / var(--tw-text-opacity));
777
+ }
778
+ .squiz-rb-scope .text-gray-800 {
779
+ --tw-text-opacity: 1;
780
+ color: rgb(61 61 61 / var(--tw-text-opacity));
781
+ }
782
+ .squiz-rb-scope .text-white {
783
+ --tw-text-opacity: 1;
784
+ color: rgb(255 255 255 / var(--tw-text-opacity));
785
+ }
786
+ .squiz-rb-scope .opacity-40 {
787
+ opacity: 0.4;
788
+ }
789
+ .squiz-rb-scope .blur {
790
+ --tw-blur: blur(8px);
791
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
792
+ }
793
+ .squiz-rb-scope .spinner {
794
+ display: inline-block;
795
+ height: 2rem;
796
+ width: 2rem;
797
+ border-radius: 9999px;
798
+ border-width: 4px;
799
+ border-style: solid;
800
+ border-color: currentColor;
801
+ border-right-color: transparent;
802
+ }
803
+ @keyframes spin {
804
+ to {
805
+ transform: rotate(360deg);
806
+ }
807
+ }
808
+ .squiz-rb-scope .spinner {
809
+ animation: spin 1s linear infinite;
810
+ vertical-align: -0.125em;
811
+ }
812
+ @media (prefers-reduced-motion: reduce) {
813
+ @keyframes spin {
814
+ }
815
+ .squiz-rb-scope .spinner {
816
+ animation: spin 1.5s linear infinite;
817
+ }
818
+ }
819
+ .squiz-rb-scope .spinner__wrapper {
820
+ margin: 0.75rem;
821
+ display: flex;
822
+ align-items: center;
823
+ justify-content: center;
824
+ --tw-text-opacity: 1;
825
+ color: rgb(224 224 224 / var(--tw-text-opacity));
826
+ }
827
+ .squiz-rb-scope .spinner--lg {
828
+ height: 3rem;
829
+ width: 3rem;
830
+ }
831
+ .squiz-rb-scope .before\:fixed::before {
832
+ content: var(--tw-content);
833
+ position: fixed;
834
+ }
835
+ .squiz-rb-scope .before\:absolute::before {
836
+ content: var(--tw-content);
837
+ position: absolute;
838
+ }
839
+ .squiz-rb-scope .before\:inset-0::before {
840
+ content: var(--tw-content);
841
+ inset: 0px;
842
+ }
843
+ .squiz-rb-scope .before\:-left-1::before {
844
+ content: var(--tw-content);
845
+ left: -0.25rem;
846
+ }
847
+ .squiz-rb-scope .before\:top-1::before {
848
+ content: var(--tw-content);
849
+ top: 0.25rem;
850
+ }
851
+ .squiz-rb-scope .before\:top-1\.5::before {
852
+ content: var(--tw-content);
853
+ top: 0.375rem;
854
+ }
855
+ .squiz-rb-scope .before\:top-2\/4::before {
856
+ content: var(--tw-content);
857
+ top: 50%;
858
+ }
859
+ .squiz-rb-scope .before\:z-0::before {
860
+ content: var(--tw-content);
861
+ z-index: 0;
862
+ }
863
+ .squiz-rb-scope .before\:z-40::before {
864
+ content: var(--tw-content);
865
+ z-index: 40;
866
+ }
867
+ .squiz-rb-scope .before\:mr-2::before {
868
+ content: var(--tw-content);
869
+ margin-right: 0.5rem;
870
+ }
871
+ .squiz-rb-scope .before\:h-\[calc\(100\%-0\.75rem\)\]::before {
872
+ content: var(--tw-content);
873
+ height: calc(100% - 0.75rem);
874
+ }
875
+ .squiz-rb-scope .before\:h-px::before {
876
+ content: var(--tw-content);
877
+ height: 1px;
878
+ }
879
+ .squiz-rb-scope .before\:w-full::before {
880
+ content: var(--tw-content);
881
+ width: 100%;
882
+ }
883
+ .squiz-rb-scope .before\:w-px::before {
884
+ content: var(--tw-content);
885
+ width: 1px;
886
+ }
887
+ .squiz-rb-scope .before\:bg-black::before {
888
+ content: var(--tw-content);
889
+ --tw-bg-opacity: 1;
890
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
891
+ }
892
+ .squiz-rb-scope .before\:bg-gray-200::before {
893
+ content: var(--tw-content);
894
+ --tw-bg-opacity: 1;
895
+ background-color: rgb(237 237 237 / var(--tw-bg-opacity));
896
+ }
897
+ .squiz-rb-scope .before\:bg-gray-300::before {
898
+ content: var(--tw-content);
899
+ --tw-bg-opacity: 1;
900
+ background-color: rgb(224 224 224 / var(--tw-bg-opacity));
901
+ }
902
+ .squiz-rb-scope .before\:bg-opacity-25::before {
903
+ content: var(--tw-content);
904
+ --tw-bg-opacity: 0.25;
905
+ }
906
+ .squiz-rb-scope .before\:content-\[\'\/\'\]::before {
907
+ --tw-content: "/";
908
+ content: var(--tw-content);
909
+ }
910
+ .squiz-rb-scope .first\:mt-0:first-child {
911
+ margin-top: 0px;
912
+ }
913
+ .squiz-rb-scope .first\:rounded-t:first-child {
914
+ border-top-left-radius: 4px;
915
+ border-top-right-radius: 4px;
916
+ }
917
+ .squiz-rb-scope .first\:rounded-t-lg:first-child {
918
+ border-top-left-radius: 0.5rem;
919
+ border-top-right-radius: 0.5rem;
920
+ }
921
+ .squiz-rb-scope .last\:rounded-b:last-child {
922
+ border-bottom-right-radius: 4px;
923
+ border-bottom-left-radius: 4px;
924
+ }
925
+ .squiz-rb-scope .last\:rounded-b-lg:last-child {
926
+ border-bottom-right-radius: 0.5rem;
927
+ border-bottom-left-radius: 0.5rem;
928
+ }
929
+ .squiz-rb-scope .last\:border-b:last-child {
930
+ border-bottom-width: 1px;
931
+ }
932
+ .squiz-rb-scope .hover\:bg-blue-100:hover {
933
+ --tw-bg-opacity: 1;
934
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
935
+ }
936
+ .squiz-rb-scope .hover\:bg-gray-100:hover {
937
+ --tw-bg-opacity: 1;
938
+ background-color: rgb(245 245 245 / var(--tw-bg-opacity));
939
+ }
940
+ .squiz-rb-scope .focus\:bg-blue-100:focus {
941
+ --tw-bg-opacity: 1;
942
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
943
+ }
944
+ .squiz-rb-scope .focus\:bg-gray-100:focus {
945
+ --tw-bg-opacity: 1;
946
+ background-color: rgb(245 245 245 / var(--tw-bg-opacity));
947
+ }
948
+ @media not all and (min-width: 640px) {
949
+ .squiz-rb-scope .max-sm\:hidden {
950
+ display: none;
951
+ }
952
+ }
953
+ @media (min-width: 640px) {
954
+ .squiz-rb-scope .sm\:flex-1 {
955
+ flex: 1 1 0%;
956
+ }
957
+ .squiz-rb-scope .sm\:grow-\[2\] {
958
+ flex-grow: 2;
959
+ }
960
+ .squiz-rb-scope .sm\:overflow-y-scroll {
961
+ overflow-y: scroll;
962
+ }
963
+ }
964
+ @media (min-width: 1024px) {
965
+ .squiz-rb-scope .lg\:h-\[calc\(100vh-3\.5rem\)\] {
966
+ height: calc(100vh - 3.5rem);
967
+ }
968
+ }