sanity-plugin-mux-input 2.5.0 → 2.7.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 (18) hide show
  1. package/README.md +2 -0
  2. package/dist/index.js +156 -630
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +159 -633
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +19 -19
  7. package/src/actions/secrets.ts +19 -9
  8. package/src/components/ConfigureApi.tsx +2 -0
  9. package/src/components/MuxLogo.tsx +26 -447
  10. package/src/components/UploadConfiguration.tsx +29 -26
  11. package/src/components/VideoDetails/useVideoDetails.ts +5 -5
  12. package/src/components/VideoThumbnail.tsx +6 -7
  13. package/src/components/uploadConfiguration/PlaybackPolicy.tsx +44 -0
  14. package/src/components/uploadConfiguration/PlaybackPolicyOption.tsx +60 -0
  15. package/src/components/uploadConfiguration/PlaybackPolicyWarning.tsx +29 -0
  16. package/src/hooks/useAssets.ts +26 -29
  17. package/src/hooks/useInView.ts +6 -9
  18. package/src/util/types.ts +3 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sanity-plugin-mux-input",
3
- "version": "2.5.0",
3
+ "version": "2.7.0",
4
4
  "description": "An input component that integrates Sanity Studio with Mux video encoding/hosting service.",
5
5
  "keywords": [
6
6
  "sanity",
@@ -70,40 +70,40 @@
70
70
  "use-error-boundary": "^2.0.6"
71
71
  },
72
72
  "devDependencies": {
73
- "@sanity/client": "^6.24.1",
74
- "@sanity/pkg-utils": "^6.12.1",
73
+ "@sanity/client": "^6.28.1",
74
+ "@sanity/pkg-utils": "^6.13.4",
75
75
  "@sanity/plugin-kit": "4.0.19",
76
76
  "@sanity/semantic-release-preset": "^5.0.0",
77
- "@sanity/vision": "^3.74.0",
78
- "@types/lodash": "^4.17.13",
79
- "@types/react": "^18.3.17",
80
- "@types/react-is": "^18.3.1",
77
+ "@sanity/vision": "^3.77.2",
78
+ "@types/lodash": "^4.17.15",
79
+ "@types/react": "^19.0.10",
80
+ "@types/react-is": "^19.0.0",
81
81
  "@typescript-eslint/eslint-plugin": "^7.18.0",
82
82
  "@typescript-eslint/parser": "^7.18.0",
83
83
  "eslint": "^8.57.1",
84
84
  "eslint-config-prettier": "^9.1.0",
85
85
  "eslint-config-react-app": "^7.0.1",
86
- "eslint-config-sanity": "^7.1.3",
86
+ "eslint-config-sanity": "^7.1.4",
87
87
  "eslint-plugin-import": "^2.31.0",
88
- "eslint-plugin-prettier": "^5.2.1",
88
+ "eslint-plugin-prettier": "^5.2.3",
89
89
  "eslint-plugin-react-hooks": "^5.1.0",
90
90
  "eslint-plugin-simple-import-sort": "^12.1.1",
91
91
  "husky": "^9.0.11",
92
92
  "lint-staged": "^15.2.2",
93
93
  "npm-run-all2": "^5.0.2",
94
- "prettier": "^3.4.2",
95
- "prettier-plugin-packagejson": "^2.5.6",
96
- "react": "^18.3.1",
97
- "react-dom": "^18.3.1",
98
- "react-is": "^18.3.1",
99
- "sanity": "^3.74.0",
100
- "semantic-release": "^24.2.0",
101
- "styled-components": "^6.1.13",
94
+ "prettier": "^3.5.2",
95
+ "prettier-plugin-packagejson": "^2.5.9",
96
+ "react": "^19.0.0",
97
+ "react-dom": "^19.0.0",
98
+ "react-is": "^19.0.0",
99
+ "sanity": "^3.77.2",
100
+ "semantic-release": "^24.2.3",
101
+ "styled-components": "^6.1.15",
102
102
  "typescript": "5.7.3"
103
103
  },
104
104
  "peerDependencies": {
105
- "react": "^18",
106
- "react-is": "^18",
105
+ "react": "^18.3 || ^19",
106
+ "react-is": "^18.3 || ^19",
107
107
  "sanity": "^3.42.0",
108
108
  "styled-components": "^5 || ^6"
109
109
  },
package/src/actions/secrets.ts CHANGED
@@ -32,15 +32,25 @@ export function saveSecrets(
32
32
  return client.createOrReplace(doc)
33
33
  }
34
34
 
35
- export function createSigningKeys(client: SanityClient) {
36
- const {dataset} = client.config()
37
- return client.request<{
38
- data: {private_key: string; id: string; created_at: string}
39
- }>({
40
- url: `/addons/mux/signing-keys/${dataset}`,
41
- withCredentials: true,
42
- method: 'POST',
43
- })
35
+ export async function createSigningKeys(client: SanityClient) {
36
+ try {
37
+ const {dataset} = client.config()
38
+ const res = await client.request<{
39
+ data: {private_key: string; id: string; created_at: string}
40
+ }>({
41
+ url: `/addons/mux/signing-keys/${dataset}`,
42
+ withCredentials: true,
43
+ method: 'POST',
44
+ })
45
+ return res
46
+ } catch (error: any) {
47
+ console.error('Error creating signing keys', error)
48
+ const message =
49
+ error.response?.statusCode === 401
50
+ ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions'
51
+ : error.message
52
+ throw new Error(message)
53
+ }
44
54
  }
45
55
 
46
56
  export function testSecrets(client: SanityClient) {
package/src/components/ConfigureApi.tsx CHANGED
@@ -139,6 +139,8 @@ function ConfigureApi({secrets, setDialogState}: Props) {
139
139
  The access token needs permissions: <strong>Mux Video </strong>
140
140
  (Full Access) and <strong>Mux Data</strong> (Read)
141
141
  <br />
142
+ To use Signed URLs, the token must also have System permissions.
143
+ <br />
142
144
  The credentials will be stored safely in a hidden document only available to
143
145
  editors.
144
146
  </Text>
package/src/components/MuxLogo.tsx CHANGED
@@ -1,463 +1,42 @@
1
- import {useId, useMemo} from 'react'
1
+ import {useTheme_v2} from '@sanity/ui'
2
+ import {CSSProperties, useId, useMemo} from 'react'
2
3
 
3
- // Mapping ids to ensure filter refs are unique, otherwise all Logo instances are hidden if the first SVG is hidden, due to how SVGs deal with relative links and ids
4
- const ids = [
5
- 'title',
6
- 'a',
7
- 'b',
8
- 'c',
9
- 'd',
10
- 'e',
11
- 'f',
12
- 'g',
13
- 'h',
14
- 'i',
15
- 'j',
16
- 'k',
17
- 'l',
18
- 'm',
19
- 'n',
20
- 'o',
21
- 'p',
22
- 'q',
23
- 'r',
24
- ] as const
25
4
  export interface Props {
26
5
  height?: number
27
6
  }
28
- export default function MuxLogo({height = 26}) {
7
+ export default function MuxLogo({height = 26}: Props) {
29
8
  const id = useId()
30
- const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo<typeof ids>(
31
- () => ids.map((field) => `${id}-${field}`) as unknown as typeof ids,
32
- [id]
33
- )
9
+ const theme = useTheme_v2()
10
+ const fillColor = theme.color._dark ? 'white' : 'black'
11
+ const titleId = useMemo(() => `${id}-title`, [id])
12
+
13
+ const pathStyle: CSSProperties = {
14
+ fillRule: 'nonzero',
15
+ }
34
16
 
35
17
  return (
36
18
  <svg
37
19
  aria-labelledby={titleId}
38
- role="img"
20
+ style={{height: `${height}px`}}
21
+ viewBox="0 0 1600 500"
22
+ version="1.1"
39
23
  xmlns="http://www.w3.org/2000/svg"
40
24
  xmlSpace="preserve"
41
- viewBox="92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188"
42
- style={{height: `${height}px`}}
43
25
  >
44
- <title id={titleId}>Mux Logo</title>
45
- <defs>
46
- <linearGradient
47
- id={c}
48
- spreadMethod="pad"
49
- gradientTransform="matrix(528.38055 0 0 -528.38055 63.801 159.5)"
50
- gradientUnits="userSpaceOnUse"
51
- y2={0}
52
- x2={1}
53
- y1={0}
54
- x1={0}
55
- >
56
- <stop
57
- offset={0}
58
- style={{
59
- stopOpacity: 1,
60
- stopColor: '#ff4e00',
61
- }}
62
- />
63
- <stop
64
- offset={1}
65
- style={{
66
- stopOpacity: 1,
67
- stopColor: '#ff1791',
68
- }}
69
- />
70
- </linearGradient>
71
- <linearGradient
72
- id={d}
73
- spreadMethod="pad"
74
- gradientTransform="matrix(523.66766 0 0 -523.66766 67.897 159.5)"
75
- gradientUnits="userSpaceOnUse"
76
- y2={0}
77
- x2={1}
78
- y1={0}
79
- x1={0}
80
- >
81
- <stop
82
- offset={0}
83
- style={{
84
- stopOpacity: 1,
85
- stopColor: '#ff4e00',
86
- }}
87
- />
88
- <stop
89
- offset={1}
90
- style={{
91
- stopOpacity: 1,
92
- stopColor: '#ff1791',
93
- }}
94
- />
95
- </linearGradient>
96
- <linearGradient
97
- id={g}
98
- spreadMethod="pad"
99
- gradientTransform="rotate(180 296.075 79.75) scale(524.84045)"
100
- gradientUnits="userSpaceOnUse"
101
- y2={0}
102
- x2={1}
103
- y1={0}
104
- x1={0}
105
- >
106
- <stop
107
- offset={0}
108
- style={{
109
- stopOpacity: 1,
110
- stopColor: '#ff4e00',
111
- }}
112
- />
113
- <stop
114
- offset={1}
115
- style={{
116
- stopOpacity: 1,
117
- stopColor: '#ff1791',
118
- }}
119
- />
120
- </linearGradient>
121
- <linearGradient
122
- id={i}
123
- spreadMethod="pad"
124
- gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 159.5)"
125
- gradientUnits="userSpaceOnUse"
126
- y2={0}
127
- x2={1}
128
- y1={0}
129
- x1={0}
130
- >
131
- <stop
132
- offset={0}
133
- style={{
134
- stopOpacity: 1,
135
- stopColor: '#ff4e00',
136
- }}
137
- />
138
- <stop
139
- offset={1}
140
- style={{
141
- stopOpacity: 1,
142
- stopColor: '#ff1791',
143
- }}
144
- />
145
- </linearGradient>
146
- <linearGradient
147
- id={j}
148
- spreadMethod="pad"
149
- gradientTransform="matrix(523.08514 0 0 -523.08514 67.897 224.446)"
150
- gradientUnits="userSpaceOnUse"
151
- y2={0}
152
- x2={1}
153
- y1={0}
154
- x1={0}
155
- >
156
- <stop
157
- offset={0}
158
- style={{
159
- stopOpacity: 1,
160
- stopColor: '#ff4e00',
161
- }}
162
- />
163
- <stop
164
- offset={1}
165
- style={{
166
- stopOpacity: 1,
167
- stopColor: '#ff1791',
168
- }}
169
- />
170
- </linearGradient>
171
- <linearGradient
172
- id={k}
173
- spreadMethod="pad"
174
- gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 94.553)"
175
- gradientUnits="userSpaceOnUse"
176
- y2={0}
177
- x2={1}
178
- y1={0}
179
- x1={0}
180
- >
181
- <stop
182
- offset={0}
183
- style={{
184
- stopOpacity: 1,
185
- stopColor: '#ff4e00',
186
- }}
187
- />
188
- <stop
189
- offset={1}
190
- style={{
191
- stopOpacity: 1,
192
- stopColor: '#ff1791',
193
- }}
194
- />
195
- </linearGradient>
196
- <linearGradient
197
- id={l}
198
- spreadMethod="pad"
199
- gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 159.5)"
200
- gradientUnits="userSpaceOnUse"
201
- y2={0}
202
- x2={1}
203
- y1={0}
204
- x1={0}
205
- >
206
- <stop
207
- offset={0}
208
- style={{
209
- stopOpacity: 1,
210
- stopColor: '#ff4e00',
211
- }}
212
- />
213
- <stop
214
- offset={1}
215
- style={{
216
- stopOpacity: 1,
217
- stopColor: '#ff1791',
218
- }}
219
- />
220
- </linearGradient>
221
- <linearGradient
222
- id={m}
223
- spreadMethod="pad"
224
- gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 94.554)"
225
- gradientUnits="userSpaceOnUse"
226
- y2={0}
227
- x2={1}
228
- y1={0}
229
- x1={0}
230
- >
231
- <stop
232
- offset={0}
233
- style={{
234
- stopOpacity: 1,
235
- stopColor: '#ff4e00',
236
- }}
237
- />
238
- <stop
239
- offset={1}
240
- style={{
241
- stopOpacity: 1,
242
- stopColor: '#ff1791',
243
- }}
244
- />
245
- </linearGradient>
246
- <linearGradient
247
- id={p}
248
- spreadMethod="pad"
249
- gradientTransform="matrix(521.97632 0 0 -521.97632 69.067 191.973)"
250
- gradientUnits="userSpaceOnUse"
251
- y2={0}
252
- x2={1}
253
- y1={0}
254
- x1={0}
255
- >
256
- <stop
257
- offset={0}
258
- style={{
259
- stopOpacity: 1,
260
- stopColor: '#ff4e00',
261
- }}
262
- />
263
- <stop
264
- offset={1}
265
- style={{
266
- stopOpacity: 1,
267
- stopColor: '#ff1791',
268
- }}
269
- />
270
- </linearGradient>
271
- <linearGradient
272
- id={q}
273
- spreadMethod="pad"
274
- gradientTransform="matrix(523.09039 0 0 -523.09039 67.312 191.973)"
275
- gradientUnits="userSpaceOnUse"
276
- y2={0}
277
- x2={1}
278
- y1={0}
279
- x1={0}
280
- >
281
- <stop
282
- offset={0}
283
- style={{
284
- stopOpacity: 1,
285
- stopColor: '#ff4e00',
286
- }}
287
- />
288
- <stop
289
- offset={1}
290
- style={{
291
- stopOpacity: 1,
292
- stopColor: '#ff1791',
293
- }}
294
- />
295
- </linearGradient>
296
- <linearGradient
297
- id={r}
298
- spreadMethod="pad"
299
- gradientTransform="matrix(524.84045 0 0 -524.84045 63.801 159.5)"
300
- gradientUnits="userSpaceOnUse"
301
- y2={0}
302
- x2={1}
303
- y1={0}
304
- x1={0}
305
- >
306
- <stop
307
- offset={0}
308
- style={{
309
- stopOpacity: 1,
310
- stopColor: '#ff4e00',
311
- }}
312
- />
313
- <stop
314
- offset={1}
315
- style={{
316
- stopOpacity: 1,
317
- stopColor: '#ff1791',
318
- }}
319
- />
320
- </linearGradient>
321
- <clipPath id={a} clipPathUnits="userSpaceOnUse">
322
- <path d="M0 319h657.706V0H0Z" />
323
- </clipPath>
324
- <clipPath id={b} clipPathUnits="userSpaceOnUse">
325
- <path d="M423.64 242h164.999V77H423.64Z" />
326
- </clipPath>
327
- <clipPath id={e} clipPathUnits="userSpaceOnUse">
328
- <path d="M0 319h657.706V0H0Z" />
329
- </clipPath>
330
- <clipPath id={f} clipPathUnits="userSpaceOnUse">
331
- <path d="M311.3 242h93.031V77H311.3Z" />
332
- </clipPath>
333
- <clipPath id={h} clipPathUnits="userSpaceOnUse">
334
- <path d="M198.96 242h35.106V77H198.96Z" />
335
- </clipPath>
336
- <clipPath id={n} clipPathUnits="userSpaceOnUse">
337
- <path d="M0 319h657.706V0H0Z" />
338
- </clipPath>
339
- <clipPath id={o} clipPathUnits="userSpaceOnUse">
340
- <path d="M69.067 242H169.12V141.947H69.067Z" />
341
- </clipPath>
342
- </defs>
343
- <g clipPath={`url(#${a})`} transform="matrix(1.33333 0 0 -1.33333 0 425.333)">
344
- <g
345
- style={{
346
- opacity: 0.69999701,
347
- }}
348
- clipPath={`url(#${b})`}
349
- >
350
- <path
351
- style={{
352
- fill: `url(#${c})`,
353
- stroke: 'none',
354
- }}
355
- d="M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
356
- />
357
- </g>
358
- </g>
359
- <path
360
- style={{
361
- fill: `url(#${d})`,
362
- stroke: 'none',
363
- }}
364
- d="M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142"
365
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
366
- />
367
- <g clipPath={`url(#${e})`} transform="matrix(1.33333 0 0 -1.33333 0 425.333)">
368
- <g
369
- style={{
370
- opacity: 0.69999701,
371
- }}
372
- clipPath={`url(#${f})`}
373
- >
374
- <path
375
- style={{
376
- fill: `url(#${g})`,
377
- stroke: 'none',
378
- }}
379
- d="M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
380
- />
381
- </g>
382
- <g
383
- style={{
384
- opacity: 0.69999701,
385
- }}
386
- clipPath={`url(#${h})`}
387
- >
388
- <path
389
- style={{
390
- fill: `url(#${i})`,
391
- stroke: 'none',
392
- }}
393
- d="M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
394
- />
395
- </g>
396
- </g>
397
- <path
398
- style={{
399
- fill: `url(#${j})`,
400
- stroke: 'none',
401
- }}
402
- d="M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552"
403
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
404
- />
405
- <path
406
- style={{
407
- fill: `url(#${k})`,
408
- stroke: 'none',
409
- }}
410
- d="M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552"
411
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
412
- />
413
- <path
414
- style={{
415
- fill: `url(#${l})`,
416
- stroke: 'none',
417
- }}
418
- d="M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205"
419
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
420
- />
421
- <path
422
- style={{
423
- fill: `url(#${m})`,
424
- stroke: 'none',
425
- }}
426
- d="M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553"
427
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
428
- />
429
- <g clipPath={`url(#${n})`} transform="matrix(1.33333 0 0 -1.33333 0 425.333)">
430
- <g
431
- style={{
432
- opacity: 0.69999701,
433
- }}
434
- clipPath={`url(#${o})`}
435
- >
436
- <path
437
- style={{
438
- fill: `url(#${p})`,
439
- stroke: 'none',
440
- }}
441
- d="M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
442
- />
443
- </g>
26
+ <g id="Layer-1" fill={fillColor}>
27
+ <path
28
+ d="M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486"
29
+ style={pathStyle}
30
+ />
31
+ <path
32
+ d="M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z"
33
+ style={pathStyle}
34
+ />
35
+ <path
36
+ d="M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729"
37
+ style={pathStyle}
38
+ />
444
39
  </g>
445
- <path
446
- style={{
447
- fill: `url(#${q})`,
448
- stroke: 'none',
449
- }}
450
- d="m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142"
451
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
452
- />
453
- <path
454
- style={{
455
- fill: `url(#${r})`,
456
- stroke: 'none',
457
- }}
458
- d="M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205"
459
- transform="matrix(1.33333 0 0 -1.33333 0 425.333)"
460
- />
461
40
  </svg>
462
41
  )
463
42
  }