@squiz/generic-browser-lib 1.35.1-alpha.34

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 (153) 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/README.md +10 -0
  5. package/build.js +21 -0
  6. package/jest.config.ts +29 -0
  7. package/lib/Hooks/useAsync.d.ts +21 -0
  8. package/lib/Hooks/useAsync.js +53 -0
  9. package/lib/Icons/Generics/ArrowDown.d.ts +15 -0
  10. package/lib/Icons/Generics/ArrowDown.js +23 -0
  11. package/lib/Icons/Generics/ArrowRight.d.ts +15 -0
  12. package/lib/Icons/Generics/ArrowRight.js +23 -0
  13. package/lib/Icons/Generics/Back.d.ts +4 -0
  14. package/lib/Icons/Generics/Back.js +12 -0
  15. package/lib/Icons/Generics/Close.d.ts +15 -0
  16. package/lib/Icons/Generics/Close.js +23 -0
  17. package/lib/Icons/Generics/Empty.d.ts +4 -0
  18. package/lib/Icons/Generics/Empty.js +12 -0
  19. package/lib/Icons/Generics/Error.d.ts +4 -0
  20. package/lib/Icons/Generics/Error.js +12 -0
  21. package/lib/Icons/Generics/GenericIconMap.d.ts +14 -0
  22. package/lib/Icons/Generics/GenericIconMap.js +18 -0
  23. package/lib/Icons/Generics/ResourceSelect.d.ts +15 -0
  24. package/lib/Icons/Generics/ResourceSelect.js +28 -0
  25. package/lib/Icons/Generics/Retry.d.ts +4 -0
  26. package/lib/Icons/Generics/Retry.js +12 -0
  27. package/lib/Icons/Generics/Root.d.ts +15 -0
  28. package/lib/Icons/Generics/Root.js +23 -0
  29. package/lib/Icons/Generics/Selected.d.ts +15 -0
  30. package/lib/Icons/Generics/Selected.js +23 -0
  31. package/lib/Icons/Generics/index.d.ts +10 -0
  32. package/lib/Icons/Generics/index.js +27 -0
  33. package/lib/Icons/Icon.d.ts +50 -0
  34. package/lib/Icons/Icon.js +42 -0
  35. package/lib/Icons/MatrixResources/Audio.d.ts +15 -0
  36. package/lib/Icons/MatrixResources/Audio.js +28 -0
  37. package/lib/Icons/MatrixResources/Excel.d.ts +15 -0
  38. package/lib/Icons/MatrixResources/Excel.js +27 -0
  39. package/lib/Icons/MatrixResources/Folder.d.ts +15 -0
  40. package/lib/Icons/MatrixResources/Folder.js +24 -0
  41. package/lib/Icons/MatrixResources/GenericFile.d.ts +15 -0
  42. package/lib/Icons/MatrixResources/GenericFile.js +28 -0
  43. package/lib/Icons/MatrixResources/Image.d.ts +15 -0
  44. package/lib/Icons/MatrixResources/Image.js +26 -0
  45. package/lib/Icons/MatrixResources/MatrixResourceMap.d.ts +15 -0
  46. package/lib/Icons/MatrixResources/MatrixResourceMap.js +19 -0
  47. package/lib/Icons/MatrixResources/Page.d.ts +15 -0
  48. package/lib/Icons/MatrixResources/Page.js +30 -0
  49. package/lib/Icons/MatrixResources/Pdf.d.ts +15 -0
  50. package/lib/Icons/MatrixResources/Pdf.js +31 -0
  51. package/lib/Icons/MatrixResources/Powerpoint.d.ts +15 -0
  52. package/lib/Icons/MatrixResources/Powerpoint.js +28 -0
  53. package/lib/Icons/MatrixResources/Site.d.ts +15 -0
  54. package/lib/Icons/MatrixResources/Site.js +30 -0
  55. package/lib/Icons/MatrixResources/Video.d.ts +15 -0
  56. package/lib/Icons/MatrixResources/Video.js +24 -0
  57. package/lib/Icons/MatrixResources/Word.d.ts +17 -0
  58. package/lib/Icons/MatrixResources/Word.js +28 -0
  59. package/lib/Icons/MatrixResources/index.d.ts +11 -0
  60. package/lib/Icons/MatrixResources/index.js +29 -0
  61. package/lib/Modal/Modal.d.ts +10 -0
  62. package/lib/Modal/Modal.js +47 -0
  63. package/lib/Modal/ModalOpeningButton.d.ts +10 -0
  64. package/lib/Modal/ModalOpeningButton.js +14 -0
  65. package/lib/Modal/ModalTrigger.d.ts +9 -0
  66. package/lib/Modal/ModalTrigger.js +26 -0
  67. package/lib/PreviewPanel/PreviewModal.d.ts +11 -0
  68. package/lib/PreviewPanel/PreviewModal.js +79 -0
  69. package/lib/PreviewPanel/PreviewPanel.d.ts +13 -0
  70. package/lib/PreviewPanel/PreviewPanel.js +58 -0
  71. package/lib/PreviewPanel/PreviewPanelHOC.d.ts +6 -0
  72. package/lib/PreviewPanel/PreviewPanelHOC.js +16 -0
  73. package/lib/ResetButton/ResetButton.d.ts +5 -0
  74. package/lib/ResetButton/ResetButton.js +12 -0
  75. package/lib/ResourceItem/ResourceItem.d.ts +19 -0
  76. package/lib/ResourceItem/ResourceItem.js +29 -0
  77. package/lib/ResourceState/ResourceState.d.ts +7 -0
  78. package/lib/ResourceState/ResourceState.js +17 -0
  79. package/lib/Skeleton/List/SkeletonList.d.ts +6 -0
  80. package/lib/Skeleton/List/SkeletonList.js +13 -0
  81. package/lib/Skeleton/ListItem/SkeletonListItem.d.ts +1 -0
  82. package/lib/Skeleton/ListItem/SkeletonListItem.js +15 -0
  83. package/lib/Spinner/Spinner.d.ts +7 -0
  84. package/lib/Spinner/Spinner.js +13 -0
  85. package/lib/index.css +885 -0
  86. package/lib/index.d.ts +12 -0
  87. package/lib/index.js +28 -0
  88. package/package.json +76 -0
  89. package/postcss.config.js +11 -0
  90. package/src/Hooks/useAsync.spec.ts +106 -0
  91. package/src/Hooks/useAsync.ts +62 -0
  92. package/src/Icons/Generics/ArrowDown.tsx +27 -0
  93. package/src/Icons/Generics/ArrowRight.tsx +27 -0
  94. package/src/Icons/Generics/Back.tsx +13 -0
  95. package/src/Icons/Generics/Close.tsx +26 -0
  96. package/src/Icons/Generics/Empty.tsx +13 -0
  97. package/src/Icons/Generics/Error.tsx +13 -0
  98. package/src/Icons/Generics/GenericIconMap.ts +18 -0
  99. package/src/Icons/Generics/ResourceSelect.tsx +40 -0
  100. package/src/Icons/Generics/Retry.tsx +13 -0
  101. package/src/Icons/Generics/Root.tsx +24 -0
  102. package/src/Icons/Generics/Selected.tsx +27 -0
  103. package/src/Icons/Generics/index.tsx +11 -0
  104. package/src/Icons/Icon.spec.tsx +62 -0
  105. package/src/Icons/Icon.stories.tsx +110 -0
  106. package/src/Icons/Icon.tsx +54 -0
  107. package/src/Icons/MatrixResources/Audio.tsx +30 -0
  108. package/src/Icons/MatrixResources/Excel.tsx +29 -0
  109. package/src/Icons/MatrixResources/Folder.tsx +29 -0
  110. package/src/Icons/MatrixResources/GenericFile.tsx +34 -0
  111. package/src/Icons/MatrixResources/Image.tsx +36 -0
  112. package/src/Icons/MatrixResources/MatrixResourceMap.ts +19 -0
  113. package/src/Icons/MatrixResources/Page.tsx +33 -0
  114. package/src/Icons/MatrixResources/Pdf.tsx +34 -0
  115. package/src/Icons/MatrixResources/Powerpoint.tsx +34 -0
  116. package/src/Icons/MatrixResources/Site.tsx +37 -0
  117. package/src/Icons/MatrixResources/Video.tsx +27 -0
  118. package/src/Icons/MatrixResources/Word.tsx +30 -0
  119. package/src/Icons/MatrixResources/index.tsx +12 -0
  120. package/src/Modal/Modal.spec.tsx +269 -0
  121. package/src/Modal/Modal.tsx +55 -0
  122. package/src/Modal/ModalContainer.stories.tsx +33 -0
  123. package/src/Modal/ModalOpeningButton.tsx +20 -0
  124. package/src/Modal/ModalTrigger.tsx +54 -0
  125. package/src/PreviewPanel/PreviewModal.spec.tsx +164 -0
  126. package/src/PreviewPanel/PreviewModal.tsx +94 -0
  127. package/src/PreviewPanel/PreviewPanel.spec.tsx +162 -0
  128. package/src/PreviewPanel/PreviewPanel.stories.tsx +66 -0
  129. package/src/PreviewPanel/PreviewPanel.tsx +83 -0
  130. package/src/PreviewPanel/PreviewPanelHOC.spec.tsx +45 -0
  131. package/src/PreviewPanel/PreviewPanelHOC.tsx +17 -0
  132. package/src/ResetButton/ResetButton.spec.tsx +42 -0
  133. package/src/ResetButton/ResetButton.tsx +22 -0
  134. package/src/ResourceItem/ResourceItem.spec.tsx +65 -0
  135. package/src/ResourceItem/ResourceItem.tsx +90 -0
  136. package/src/ResourceState/ResourceState.spec.tsx +26 -0
  137. package/src/ResourceState/ResourceState.stories.tsx +24 -0
  138. package/src/ResourceState/ResourceState.tsx +31 -0
  139. package/src/Skeleton/List/SkeletonList.spec.tsx +18 -0
  140. package/src/Skeleton/List/SkeletonList.stories.tsx +15 -0
  141. package/src/Skeleton/List/SkeletonList.tsx +20 -0
  142. package/src/Skeleton/ListItem/SkeletonListItem.stories.tsx +15 -0
  143. package/src/Skeleton/ListItem/SkeletonListItem.tsx +14 -0
  144. package/src/Skeleton/_skeleton.scss +15 -0
  145. package/src/Spinner/Spinner.spec.tsx +18 -0
  146. package/src/Spinner/Spinner.stories.tsx +26 -0
  147. package/src/Spinner/Spinner.tsx +16 -0
  148. package/src/Spinner/_spinner.scss +14 -0
  149. package/src/index.scss +22 -0
  150. package/src/index.stories.tsx +26 -0
  151. package/src/index.ts +20 -0
  152. package/tailwind.config.cjs +89 -0
  153. package/tsconfig.json +22 -0
package/lib/index.css ADDED
@@ -0,0 +1,885 @@
1
+ /* src/index.scss */
2
+ .squiz-gb-scope *,
3
+ .squiz-gb-scope ::before,
4
+ .squiz-gb-scope ::after {
5
+ box-sizing: border-box;
6
+ border-width: 0;
7
+ border-style: solid;
8
+ border-color: #ededed;
9
+ }
10
+ .squiz-gb-scope ::before,
11
+ .squiz-gb-scope ::after {
12
+ --tw-content: "";
13
+ }
14
+ .squiz-gb-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-gb-scope body {
39
+ margin: 0;
40
+ line-height: inherit;
41
+ }
42
+ .squiz-gb-scope hr {
43
+ height: 0;
44
+ color: inherit;
45
+ border-top-width: 1px;
46
+ }
47
+ .squiz-gb-scope abbr:where([title]) {
48
+ -webkit-text-decoration: underline dotted;
49
+ text-decoration: underline dotted;
50
+ }
51
+ .squiz-gb-scope h1,
52
+ .squiz-gb-scope h2,
53
+ .squiz-gb-scope h3,
54
+ .squiz-gb-scope h4,
55
+ .squiz-gb-scope h5,
56
+ .squiz-gb-scope h6 {
57
+ font-size: inherit;
58
+ font-weight: inherit;
59
+ }
60
+ .squiz-gb-scope a {
61
+ color: inherit;
62
+ text-decoration: inherit;
63
+ }
64
+ .squiz-gb-scope b,
65
+ .squiz-gb-scope strong {
66
+ font-weight: bolder;
67
+ }
68
+ .squiz-gb-scope code,
69
+ .squiz-gb-scope kbd,
70
+ .squiz-gb-scope samp,
71
+ .squiz-gb-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-gb-scope small {
84
+ font-size: 80%;
85
+ }
86
+ .squiz-gb-scope sub,
87
+ .squiz-gb-scope sup {
88
+ font-size: 75%;
89
+ line-height: 0;
90
+ position: relative;
91
+ vertical-align: baseline;
92
+ }
93
+ .squiz-gb-scope sub {
94
+ bottom: -0.25em;
95
+ }
96
+ .squiz-gb-scope sup {
97
+ top: -0.5em;
98
+ }
99
+ .squiz-gb-scope table {
100
+ text-indent: 0;
101
+ border-color: inherit;
102
+ border-collapse: collapse;
103
+ }
104
+ .squiz-gb-scope button,
105
+ .squiz-gb-scope input,
106
+ .squiz-gb-scope optgroup,
107
+ .squiz-gb-scope select,
108
+ .squiz-gb-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-gb-scope button,
118
+ .squiz-gb-scope select {
119
+ text-transform: none;
120
+ }
121
+ .squiz-gb-scope button,
122
+ .squiz-gb-scope [type=button],
123
+ .squiz-gb-scope [type=reset],
124
+ .squiz-gb-scope [type=submit] {
125
+ -webkit-appearance: button;
126
+ background-color: transparent;
127
+ background-image: none;
128
+ }
129
+ .squiz-gb-scope :-moz-focusring {
130
+ outline: auto;
131
+ }
132
+ .squiz-gb-scope :-moz-ui-invalid {
133
+ box-shadow: none;
134
+ }
135
+ .squiz-gb-scope progress {
136
+ vertical-align: baseline;
137
+ }
138
+ .squiz-gb-scope ::-webkit-inner-spin-button,
139
+ .squiz-gb-scope ::-webkit-outer-spin-button {
140
+ height: auto;
141
+ }
142
+ .squiz-gb-scope [type=search] {
143
+ -webkit-appearance: textfield;
144
+ outline-offset: -2px;
145
+ }
146
+ .squiz-gb-scope ::-webkit-search-decoration {
147
+ -webkit-appearance: none;
148
+ }
149
+ .squiz-gb-scope ::-webkit-file-upload-button {
150
+ -webkit-appearance: button;
151
+ font: inherit;
152
+ }
153
+ .squiz-gb-scope summary {
154
+ display: list-item;
155
+ }
156
+ .squiz-gb-scope blockquote,
157
+ .squiz-gb-scope dl,
158
+ .squiz-gb-scope dd,
159
+ .squiz-gb-scope h1,
160
+ .squiz-gb-scope h2,
161
+ .squiz-gb-scope h3,
162
+ .squiz-gb-scope h4,
163
+ .squiz-gb-scope h5,
164
+ .squiz-gb-scope h6,
165
+ .squiz-gb-scope hr,
166
+ .squiz-gb-scope figure,
167
+ .squiz-gb-scope p,
168
+ .squiz-gb-scope pre {
169
+ margin: 0;
170
+ }
171
+ .squiz-gb-scope fieldset {
172
+ margin: 0;
173
+ padding: 0;
174
+ }
175
+ .squiz-gb-scope legend {
176
+ padding: 0;
177
+ }
178
+ .squiz-gb-scope ol,
179
+ .squiz-gb-scope ul,
180
+ .squiz-gb-scope menu {
181
+ list-style: none;
182
+ margin: 0;
183
+ padding: 0;
184
+ }
185
+ .squiz-gb-scope textarea {
186
+ resize: vertical;
187
+ }
188
+ .squiz-gb-scope input::-moz-placeholder,
189
+ .squiz-gb-scope textarea::-moz-placeholder {
190
+ opacity: 1;
191
+ color: #BABABA;
192
+ }
193
+ .squiz-gb-scope input::placeholder,
194
+ .squiz-gb-scope textarea::placeholder {
195
+ opacity: 1;
196
+ color: #BABABA;
197
+ }
198
+ .squiz-gb-scope button,
199
+ .squiz-gb-scope [role=button] {
200
+ cursor: pointer;
201
+ }
202
+ .squiz-gb-scope :disabled {
203
+ cursor: default;
204
+ }
205
+ .squiz-gb-scope img,
206
+ .squiz-gb-scope svg,
207
+ .squiz-gb-scope video,
208
+ .squiz-gb-scope canvas,
209
+ .squiz-gb-scope audio,
210
+ .squiz-gb-scope iframe,
211
+ .squiz-gb-scope embed,
212
+ .squiz-gb-scope object {
213
+ display: block;
214
+ vertical-align: middle;
215
+ }
216
+ .squiz-gb-scope img,
217
+ .squiz-gb-scope video {
218
+ max-width: 100%;
219
+ height: auto;
220
+ }
221
+ .squiz-gb-scope [hidden] {
222
+ display: none;
223
+ }
224
+ .squiz-gb-scope *,
225
+ .squiz-gb-scope ::before,
226
+ .squiz-gb-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-gb-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-gb-scope .sr-only {
319
+ position: absolute;
320
+ width: 1px;
321
+ height: 1px;
322
+ padding: 0;
323
+ margin: -1px;
324
+ overflow: hidden;
325
+ clip: rect(0, 0, 0, 0);
326
+ white-space: nowrap;
327
+ border-width: 0;
328
+ }
329
+ .squiz-gb-scope .fixed {
330
+ position: fixed;
331
+ }
332
+ .squiz-gb-scope .absolute {
333
+ position: absolute;
334
+ }
335
+ .squiz-gb-scope .relative {
336
+ position: relative;
337
+ }
338
+ .squiz-gb-scope .inset-0 {
339
+ inset: 0px;
340
+ }
341
+ .squiz-gb-scope .-right-8 {
342
+ right: -2rem;
343
+ }
344
+ .squiz-gb-scope .bottom-0 {
345
+ bottom: 0px;
346
+ }
347
+ .squiz-gb-scope .right-3 {
348
+ right: 0.75rem;
349
+ }
350
+ .squiz-gb-scope .right-5 {
351
+ right: 1.25rem;
352
+ }
353
+ .squiz-gb-scope .top-3 {
354
+ top: 0.75rem;
355
+ }
356
+ .squiz-gb-scope .z-50 {
357
+ z-index: 50;
358
+ }
359
+ .squiz-gb-scope .z-\[9998\] {
360
+ z-index: 9998;
361
+ }
362
+ .squiz-gb-scope .z-\[9999\] {
363
+ z-index: 9999;
364
+ }
365
+ .squiz-gb-scope .m-3 {
366
+ margin: 0.75rem;
367
+ }
368
+ .squiz-gb-scope .m-5 {
369
+ margin: 1.25rem;
370
+ }
371
+ .squiz-gb-scope .mx-20 {
372
+ margin-left: 5rem;
373
+ margin-right: 5rem;
374
+ }
375
+ .squiz-gb-scope .mx-4 {
376
+ margin-left: 1rem;
377
+ margin-right: 1rem;
378
+ }
379
+ .squiz-gb-scope .mx-5 {
380
+ margin-left: 1.25rem;
381
+ margin-right: 1.25rem;
382
+ }
383
+ .squiz-gb-scope .my-4 {
384
+ margin-top: 1rem;
385
+ margin-bottom: 1rem;
386
+ }
387
+ .squiz-gb-scope .mb-1 {
388
+ margin-bottom: 0.25rem;
389
+ }
390
+ .squiz-gb-scope .ml-1 {
391
+ margin-left: 0.25rem;
392
+ }
393
+ .squiz-gb-scope .ml-auto {
394
+ margin-left: auto;
395
+ }
396
+ .squiz-gb-scope .mr-2 {
397
+ margin-right: 0.5rem;
398
+ }
399
+ .squiz-gb-scope .mr-4 {
400
+ margin-right: 1rem;
401
+ }
402
+ .squiz-gb-scope .mr-8 {
403
+ margin-right: 2rem;
404
+ }
405
+ .squiz-gb-scope .mr-auto {
406
+ margin-right: auto;
407
+ }
408
+ .squiz-gb-scope .mt-20 {
409
+ margin-top: 5rem;
410
+ }
411
+ .squiz-gb-scope .mt-3 {
412
+ margin-top: 0.75rem;
413
+ }
414
+ .squiz-gb-scope .mt-4 {
415
+ margin-top: 1rem;
416
+ }
417
+ .squiz-gb-scope .mt-7 {
418
+ margin-top: 1.75rem;
419
+ }
420
+ .squiz-gb-scope .line-clamp-2 {
421
+ overflow: hidden;
422
+ display: -webkit-box;
423
+ -webkit-box-orient: vertical;
424
+ -webkit-line-clamp: 2;
425
+ }
426
+ .squiz-gb-scope .flex {
427
+ display: flex;
428
+ }
429
+ .squiz-gb-scope .grid {
430
+ display: grid;
431
+ }
432
+ .squiz-gb-scope .h-14 {
433
+ height: 3.5rem;
434
+ }
435
+ .squiz-gb-scope .h-2 {
436
+ height: 0.5rem;
437
+ }
438
+ .squiz-gb-scope .h-36 {
439
+ height: 9rem;
440
+ }
441
+ .squiz-gb-scope .h-4 {
442
+ height: 1rem;
443
+ }
444
+ .squiz-gb-scope .h-6 {
445
+ height: 1.5rem;
446
+ }
447
+ .squiz-gb-scope .h-9 {
448
+ height: 2.25rem;
449
+ }
450
+ .squiz-gb-scope .h-\[50vh\] {
451
+ height: 50vh;
452
+ }
453
+ .squiz-gb-scope .h-full {
454
+ height: 100%;
455
+ }
456
+ .squiz-gb-scope .h-screen {
457
+ height: 100vh;
458
+ }
459
+ .squiz-gb-scope .min-h-\[64px\] {
460
+ min-height: 64px;
461
+ }
462
+ .squiz-gb-scope .w-1\/2 {
463
+ width: 50%;
464
+ }
465
+ .squiz-gb-scope .w-12 {
466
+ width: 3rem;
467
+ }
468
+ .squiz-gb-scope .w-14 {
469
+ width: 3.5rem;
470
+ }
471
+ .squiz-gb-scope .w-3\/4 {
472
+ width: 75%;
473
+ }
474
+ .squiz-gb-scope .w-36 {
475
+ width: 9rem;
476
+ }
477
+ .squiz-gb-scope .w-4 {
478
+ width: 1rem;
479
+ }
480
+ .squiz-gb-scope .w-6 {
481
+ width: 1.5rem;
482
+ }
483
+ .squiz-gb-scope .w-full {
484
+ width: 100%;
485
+ }
486
+ .squiz-gb-scope .w-screen {
487
+ width: 100vw;
488
+ }
489
+ .squiz-gb-scope .max-w-screen-lg {
490
+ max-width: 1024px;
491
+ }
492
+ .squiz-gb-scope .shrink-0 {
493
+ flex-shrink: 0;
494
+ }
495
+ .squiz-gb-scope .grow {
496
+ flex-grow: 1;
497
+ }
498
+ .squiz-gb-scope .cursor-not-allowed {
499
+ cursor: not-allowed;
500
+ }
501
+ .squiz-gb-scope .grid-cols-\[24px_1fr_45px\] {
502
+ grid-template-columns: 24px 1fr 45px;
503
+ }
504
+ .squiz-gb-scope .flex-row {
505
+ flex-direction: row;
506
+ }
507
+ .squiz-gb-scope .flex-col {
508
+ flex-direction: column;
509
+ }
510
+ .squiz-gb-scope .items-center {
511
+ align-items: center;
512
+ }
513
+ .squiz-gb-scope .items-stretch {
514
+ align-items: stretch;
515
+ }
516
+ .squiz-gb-scope .justify-end {
517
+ justify-content: flex-end;
518
+ }
519
+ .squiz-gb-scope .justify-center {
520
+ justify-content: center;
521
+ }
522
+ .squiz-gb-scope .gap-3 {
523
+ gap: 0.75rem;
524
+ }
525
+ .squiz-gb-scope .overflow-y-scroll {
526
+ overflow-y: scroll;
527
+ }
528
+ .squiz-gb-scope .truncate {
529
+ overflow: hidden;
530
+ text-overflow: ellipsis;
531
+ white-space: nowrap;
532
+ }
533
+ .squiz-gb-scope .rounded {
534
+ border-radius: 4px;
535
+ }
536
+ .squiz-gb-scope .rounded-full {
537
+ border-radius: 9999px;
538
+ }
539
+ .squiz-gb-scope .rounded-lg {
540
+ border-radius: 0.5rem;
541
+ }
542
+ .squiz-gb-scope .border-1 {
543
+ border-width: 1px;
544
+ }
545
+ .squiz-gb-scope .border-b {
546
+ border-bottom-width: 1px;
547
+ }
548
+ .squiz-gb-scope .border-b-0 {
549
+ border-bottom-width: 0px;
550
+ }
551
+ .squiz-gb-scope .border-t {
552
+ border-top-width: 1px;
553
+ }
554
+ .squiz-gb-scope .border-gray-300 {
555
+ --tw-border-opacity: 1;
556
+ border-color: rgb(224 224 224 / var(--tw-border-opacity));
557
+ }
558
+ .squiz-gb-scope .bg-black {
559
+ --tw-bg-opacity: 1;
560
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
561
+ }
562
+ .squiz-gb-scope .bg-blue-100 {
563
+ --tw-bg-opacity: 1;
564
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
565
+ }
566
+ .squiz-gb-scope .bg-blue-300 {
567
+ --tw-bg-opacity: 1;
568
+ background-color: rgb(7 116 210 / var(--tw-bg-opacity));
569
+ }
570
+ .squiz-gb-scope .bg-blue-300\/\[\.6\] {
571
+ background-color: rgb(7 116 210 / .6);
572
+ }
573
+ .squiz-gb-scope .bg-gray-200 {
574
+ --tw-bg-opacity: 1;
575
+ background-color: rgb(237 237 237 / var(--tw-bg-opacity));
576
+ }
577
+ .squiz-gb-scope .bg-white {
578
+ --tw-bg-opacity: 1;
579
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
580
+ }
581
+ .squiz-gb-scope .bg-opacity-10 {
582
+ --tw-bg-opacity: 0.1;
583
+ }
584
+ .squiz-gb-scope .p-1 {
585
+ padding: 0.25rem;
586
+ }
587
+ .squiz-gb-scope .p-4 {
588
+ padding: 1rem;
589
+ }
590
+ .squiz-gb-scope .px-1 {
591
+ padding-left: 0.25rem;
592
+ padding-right: 0.25rem;
593
+ }
594
+ .squiz-gb-scope .px-1\.5 {
595
+ padding-left: 0.375rem;
596
+ padding-right: 0.375rem;
597
+ }
598
+ .squiz-gb-scope .px-2 {
599
+ padding-left: 0.5rem;
600
+ padding-right: 0.5rem;
601
+ }
602
+ .squiz-gb-scope .px-2\.5 {
603
+ padding-left: 0.625rem;
604
+ padding-right: 0.625rem;
605
+ }
606
+ .squiz-gb-scope .px-3 {
607
+ padding-left: 0.75rem;
608
+ padding-right: 0.75rem;
609
+ }
610
+ .squiz-gb-scope .px-4 {
611
+ padding-left: 1rem;
612
+ padding-right: 1rem;
613
+ }
614
+ .squiz-gb-scope .px-7 {
615
+ padding-left: 1.75rem;
616
+ padding-right: 1.75rem;
617
+ }
618
+ .squiz-gb-scope .py-2 {
619
+ padding-top: 0.5rem;
620
+ padding-bottom: 0.5rem;
621
+ }
622
+ .squiz-gb-scope .py-8 {
623
+ padding-top: 2rem;
624
+ padding-bottom: 2rem;
625
+ }
626
+ .squiz-gb-scope .pb-4 {
627
+ padding-bottom: 1rem;
628
+ }
629
+ .squiz-gb-scope .text-left {
630
+ text-align: left;
631
+ }
632
+ .squiz-gb-scope .text-center {
633
+ text-align: center;
634
+ }
635
+ .squiz-gb-scope .text-right {
636
+ text-align: right;
637
+ }
638
+ .squiz-gb-scope .text-base {
639
+ font-size: 1rem;
640
+ }
641
+ .squiz-gb-scope .text-md {
642
+ font-size: 0.875rem;
643
+ }
644
+ .squiz-gb-scope .text-sm {
645
+ font-size: 0.8125rem;
646
+ }
647
+ .squiz-gb-scope .font-bold {
648
+ font-weight: 700;
649
+ }
650
+ .squiz-gb-scope .font-normal {
651
+ font-weight: 400;
652
+ }
653
+ .squiz-gb-scope .font-semibold {
654
+ font-weight: 600;
655
+ }
656
+ .squiz-gb-scope .leading-4 {
657
+ line-height: 1rem;
658
+ }
659
+ .squiz-gb-scope .leading-5 {
660
+ line-height: 1.25rem;
661
+ }
662
+ .squiz-gb-scope .text-blue-300 {
663
+ --tw-text-opacity: 1;
664
+ color: rgb(7 116 210 / var(--tw-text-opacity));
665
+ }
666
+ .squiz-gb-scope .text-blue-400 {
667
+ --tw-text-opacity: 1;
668
+ color: rgb(4 73 133 / var(--tw-text-opacity));
669
+ }
670
+ .squiz-gb-scope .text-gray-500 {
671
+ --tw-text-opacity: 1;
672
+ color: rgb(148 148 148 / var(--tw-text-opacity));
673
+ }
674
+ .squiz-gb-scope .text-gray-600 {
675
+ --tw-text-opacity: 1;
676
+ color: rgb(112 112 112 / var(--tw-text-opacity));
677
+ }
678
+ .squiz-gb-scope .text-gray-700 {
679
+ --tw-text-opacity: 1;
680
+ color: rgb(79 79 79 / var(--tw-text-opacity));
681
+ }
682
+ .squiz-gb-scope .text-gray-800 {
683
+ --tw-text-opacity: 1;
684
+ color: rgb(61 61 61 / var(--tw-text-opacity));
685
+ }
686
+ .squiz-gb-scope .text-white {
687
+ --tw-text-opacity: 1;
688
+ color: rgb(255 255 255 / var(--tw-text-opacity));
689
+ }
690
+ .squiz-gb-scope .opacity-40 {
691
+ opacity: 0.4;
692
+ }
693
+ .squiz-gb-scope .outline-0 {
694
+ outline-width: 0px;
695
+ }
696
+ .squiz-gb-scope .spinner {
697
+ display: inline-block;
698
+ border-radius: 9999px;
699
+ border-width: 2px;
700
+ border-style: solid;
701
+ border-color: currentColor;
702
+ border-right-color: transparent;
703
+ }
704
+ @keyframes spin {
705
+ to {
706
+ transform: rotate(360deg);
707
+ }
708
+ }
709
+ .squiz-gb-scope .spinner {
710
+ animation: spin 1s linear infinite;
711
+ vertical-align: -0.125em;
712
+ }
713
+ @media (prefers-reduced-motion: reduce) {
714
+ @keyframes spin {
715
+ }
716
+ .squiz-gb-scope .spinner {
717
+ animation: spin 1.5s linear infinite;
718
+ }
719
+ }
720
+ .squiz-gb-scope .spinner {
721
+ height: 20px;
722
+ width: 20px;
723
+ }
724
+ .squiz-gb-scope .spinner__wrapper {
725
+ display: flex;
726
+ align-items: center;
727
+ justify-content: center;
728
+ }
729
+ .squiz-gb-scope .spinner--md {
730
+ height: 32px;
731
+ width: 32px;
732
+ }
733
+ .squiz-gb-scope .animate-skeleton-pulse {
734
+ animation: pulse 2s linear infinite;
735
+ }
736
+ @keyframes pulse {
737
+ 0% {
738
+ opacity: 1;
739
+ }
740
+ 50% {
741
+ opacity: 0.45;
742
+ }
743
+ 100% {
744
+ opacity: 1;
745
+ }
746
+ }
747
+ .squiz-gb-scope *,
748
+ .squiz-gb-scope button {
749
+ -webkit-font-smoothing: antialiased;
750
+ -moz-osx-font-smoothing: grayscale;
751
+ letter-spacing: -0.02em;
752
+ }
753
+ .squiz-gb-scope svg {
754
+ --tw-text-opacity: 1;
755
+ color: rgb(112 112 112 / var(--tw-text-opacity));
756
+ }
757
+ .squiz-gb-scope .p-4\.5 {
758
+ padding: 18px;
759
+ }
760
+ .squiz-gb-scope .before\:fixed::before {
761
+ content: var(--tw-content);
762
+ position: fixed;
763
+ }
764
+ .squiz-gb-scope .before\:absolute::before {
765
+ content: var(--tw-content);
766
+ position: absolute;
767
+ }
768
+ .squiz-gb-scope .before\:inset-0::before {
769
+ content: var(--tw-content);
770
+ inset: 0px;
771
+ }
772
+ .squiz-gb-scope .before\:-left-1::before {
773
+ content: var(--tw-content);
774
+ left: -0.25rem;
775
+ }
776
+ .squiz-gb-scope .before\:top-1::before {
777
+ content: var(--tw-content);
778
+ top: 0.25rem;
779
+ }
780
+ .squiz-gb-scope .before\:top-1\.5::before {
781
+ content: var(--tw-content);
782
+ top: 0.375rem;
783
+ }
784
+ .squiz-gb-scope .before\:z-40::before {
785
+ content: var(--tw-content);
786
+ z-index: 40;
787
+ }
788
+ .squiz-gb-scope .before\:h-\[calc\(100\%-0\.75rem\)\]::before {
789
+ content: var(--tw-content);
790
+ height: calc(100% - 0.75rem);
791
+ }
792
+ .squiz-gb-scope .before\:w-px::before {
793
+ content: var(--tw-content);
794
+ width: 1px;
795
+ }
796
+ .squiz-gb-scope .before\:bg-black::before {
797
+ content: var(--tw-content);
798
+ --tw-bg-opacity: 1;
799
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
800
+ }
801
+ .squiz-gb-scope .before\:bg-gray-200::before {
802
+ content: var(--tw-content);
803
+ --tw-bg-opacity: 1;
804
+ background-color: rgb(237 237 237 / var(--tw-bg-opacity));
805
+ }
806
+ .squiz-gb-scope .before\:bg-opacity-25::before {
807
+ content: var(--tw-content);
808
+ --tw-bg-opacity: 0.25;
809
+ }
810
+ .squiz-gb-scope .first\:mt-0:first-child {
811
+ margin-top: 0px;
812
+ }
813
+ .squiz-gb-scope .first\:rounded-t-lg:first-child {
814
+ border-top-left-radius: 0.5rem;
815
+ border-top-right-radius: 0.5rem;
816
+ }
817
+ .squiz-gb-scope .last\:rounded-b-lg:last-child {
818
+ border-bottom-right-radius: 0.5rem;
819
+ border-bottom-left-radius: 0.5rem;
820
+ }
821
+ .squiz-gb-scope .last\:border-b:last-child {
822
+ border-bottom-width: 1px;
823
+ }
824
+ .squiz-gb-scope .hover\:bg-blue-100:hover {
825
+ --tw-bg-opacity: 1;
826
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
827
+ }
828
+ .squiz-gb-scope .hover\:bg-gray-50:hover {
829
+ --tw-bg-opacity: 1;
830
+ background-color: rgb(247 247 247 / var(--tw-bg-opacity));
831
+ }
832
+ .squiz-gb-scope .hover\:bg-transparent:hover {
833
+ background-color: transparent;
834
+ }
835
+ .squiz-gb-scope .hover\:text-gray-800:hover {
836
+ --tw-text-opacity: 1;
837
+ color: rgb(61 61 61 / var(--tw-text-opacity));
838
+ }
839
+ .squiz-gb-scope .focus\:bg-blue-100:focus {
840
+ --tw-bg-opacity: 1;
841
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
842
+ }
843
+ .squiz-gb-scope .focus\:bg-gray-50:focus {
844
+ --tw-bg-opacity: 1;
845
+ background-color: rgb(247 247 247 / var(--tw-bg-opacity));
846
+ }
847
+ .squiz-gb-scope .focus\:text-gray-800:focus {
848
+ --tw-text-opacity: 1;
849
+ color: rgb(61 61 61 / var(--tw-text-opacity));
850
+ }
851
+ .squiz-gb-scope .focus\:outline-none:focus {
852
+ outline: 2px solid transparent;
853
+ outline-offset: 2px;
854
+ }
855
+ .squiz-gb-scope .focus-visible\:outline-0:focus-visible {
856
+ outline-width: 0px;
857
+ }
858
+ .squiz-gb-scope .disabled\:cursor-not-allowed:disabled {
859
+ cursor: not-allowed;
860
+ }
861
+ .squiz-gb-scope .disabled\:text-gray-500:disabled {
862
+ --tw-text-opacity: 1;
863
+ color: rgb(148 148 148 / var(--tw-text-opacity));
864
+ }
865
+ @media not all and (min-width: 640px) {
866
+ .squiz-gb-scope .max-sm\:hidden {
867
+ display: none;
868
+ }
869
+ }
870
+ @media (min-width: 640px) {
871
+ .squiz-gb-scope .sm\:flex-1 {
872
+ flex: 1 1 0%;
873
+ }
874
+ .squiz-gb-scope .sm\:grow-\[2\] {
875
+ flex-grow: 2;
876
+ }
877
+ .squiz-gb-scope .sm\:overflow-y-scroll {
878
+ overflow-y: scroll;
879
+ }
880
+ }
881
+ @media (min-width: 1024px) {
882
+ .squiz-gb-scope .lg\:h-\[calc\(100vh-3\.5rem\)\] {
883
+ height: calc(100vh - 3.5rem);
884
+ }
885
+ }