@uniformdev/design-system 13.0.1-alpha.311 → 16.0.1-alpha.164
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.
- package/dist/esm/index.js +288 -122
- package/dist/index.d.ts +256 -147
- package/dist/index.js +288 -122
- package/package.json +14 -13
package/dist/esm/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{jsx as e}from"@emotion/react";import*as
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as p from"react";import or from"react";var Yr=({disableReset:o=!1})=>e(or.Fragment,null,e("link",{href:"https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Quantico:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap",rel:"stylesheet"}),o?null:e("style",{key:"uniform-design-system-theme",dangerouslySetInnerHTML:{__html:`
|
|
2
2
|
/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
|
|
3
3
|
|
|
4
4
|
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
|
|
5
|
-
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
|
|
5
|
+
*:where(:not(iframe, canvas, img, svg, video, [hidden]):not(svg *)) {
|
|
6
6
|
all: unset;
|
|
7
7
|
display: revert;
|
|
8
8
|
}
|
|
@@ -130,6 +130,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
130
130
|
--z-10: 10;
|
|
131
131
|
|
|
132
132
|
/* opacity */
|
|
133
|
+
--opacity-50: 0.50;
|
|
133
134
|
--opacity-75: 0.75;
|
|
134
135
|
--opacity-100: 1.0;
|
|
135
136
|
|
|
@@ -155,6 +156,18 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
155
156
|
cursor: pointer;
|
|
156
157
|
}
|
|
157
158
|
|
|
159
|
+
fieldset {
|
|
160
|
+
border: 0;
|
|
161
|
+
padding: 0;
|
|
162
|
+
margin: 0;
|
|
163
|
+
min-width: 0;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
legend {
|
|
167
|
+
margin: 0;
|
|
168
|
+
padding: 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
158
171
|
button, input, optgroup, select, textarea {
|
|
159
172
|
font-family: inherit;
|
|
160
173
|
font-size: inherit;
|
|
@@ -174,14 +187,14 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
174
187
|
pre {
|
|
175
188
|
white-space: pre;
|
|
176
189
|
}
|
|
177
|
-
`}}));var
|
|
190
|
+
`}}));var rr={sm:"640px",md:"768px",lg:"1025px",xl:"1280px","2xl":"1536px"},oe=o=>`@media (min-width: ${rr[o]})`;import{css as v}from"@emotion/react";var M=v`
|
|
178
191
|
position: relative;
|
|
179
|
-
`,
|
|
192
|
+
`,b=v`
|
|
180
193
|
display: flex;
|
|
181
194
|
font-weight: var(--fw-bold);
|
|
182
195
|
margin: 0 0 var(--spacing-xs);
|
|
183
196
|
align-items: center;
|
|
184
|
-
`,
|
|
197
|
+
`,k=v`
|
|
185
198
|
appearance: none;
|
|
186
199
|
background-color: var(--white);
|
|
187
200
|
border: 1px solid var(--gray-400);
|
|
@@ -211,34 +224,35 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
211
224
|
color: var(--gray-300);
|
|
212
225
|
border-color: var(--gray-300);
|
|
213
226
|
}
|
|
214
|
-
`,
|
|
227
|
+
`,R=v`
|
|
215
228
|
border-color: var(--brand-secondary-5);
|
|
216
|
-
`,
|
|
229
|
+
`,A=v`
|
|
217
230
|
align-items: center;
|
|
218
231
|
display: flex;
|
|
219
232
|
position: absolute;
|
|
220
233
|
inset: 0 var(--spacing-base) 0 auto;
|
|
221
234
|
pointer-event: one;
|
|
222
|
-
`,
|
|
235
|
+
`,G=v`
|
|
223
236
|
padding-right: var(--spacing-2xl);
|
|
224
|
-
`,
|
|
237
|
+
`,Y=v`
|
|
225
238
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
|
|
226
239
|
background-position: right var(--spacing-sm) center;
|
|
227
240
|
background-repeat: no-repeat;
|
|
228
241
|
background-size: 1rem;
|
|
229
242
|
padding-right: var(--spacing-xl);
|
|
230
|
-
`,
|
|
243
|
+
`,re=v`
|
|
231
244
|
color: var(--brand-secondary-1);
|
|
232
245
|
height: 1.25rem;
|
|
233
246
|
width: 1.25rem;
|
|
234
|
-
`,
|
|
247
|
+
`,te=v`
|
|
235
248
|
align-items: center;
|
|
236
249
|
cursor: pointer;
|
|
237
250
|
display: inline-flex;
|
|
238
251
|
gap: var(--spacing-sm);
|
|
239
252
|
margin: var(--spacing-sm) 0;
|
|
240
253
|
flex-wrap: wrap;
|
|
241
|
-
|
|
254
|
+
font-weight: var(--fw-regular);
|
|
255
|
+
`,ne=v`
|
|
242
256
|
border: 1px solid var(--brand-secondary-1);
|
|
243
257
|
background: var(--white);
|
|
244
258
|
width: var(--spacing-md);
|
|
@@ -269,21 +283,21 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
269
283
|
color: var(--gray-300);
|
|
270
284
|
border-color: var(--gray-300);
|
|
271
285
|
}
|
|
272
|
-
`,
|
|
286
|
+
`,ae=v`
|
|
273
287
|
font-weight: var(--fw-medium);
|
|
274
|
-
`,
|
|
288
|
+
`,ie=v`
|
|
275
289
|
cursor: not-allowed;
|
|
276
290
|
color: var(--gray-400);
|
|
277
|
-
`,
|
|
291
|
+
`,se=v`
|
|
278
292
|
display: flex;
|
|
279
293
|
flex-direction: column;
|
|
280
294
|
flex-basis: 100%;
|
|
281
295
|
padding-left: var(--spacing-lg);
|
|
282
296
|
margin-top: -0.5rem;
|
|
283
297
|
line-height: 1.15;
|
|
284
|
-
`,
|
|
285
|
-
${
|
|
286
|
-
`;import{css as
|
|
298
|
+
`,ce=v`
|
|
299
|
+
${k}
|
|
300
|
+
`;import{css as tr}from"@emotion/react";var X=tr`
|
|
287
301
|
@supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
|
|
288
302
|
/*
|
|
289
303
|
#d1d5db = bg-gray-300
|
|
@@ -309,15 +323,15 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
309
323
|
&::-webkit-scrollbar-thumb:hover {
|
|
310
324
|
background: var(--gray-500);
|
|
311
325
|
}
|
|
312
|
-
`;import{css as
|
|
326
|
+
`;import{css as _}from"@emotion/react";var D=_`
|
|
313
327
|
display: block;
|
|
314
|
-
`,
|
|
328
|
+
`,Z=_`
|
|
315
329
|
background: transparent;
|
|
316
330
|
color: var(--brand-secondary-1);
|
|
317
|
-
`,
|
|
331
|
+
`,F=_`
|
|
318
332
|
background: var(--brand-secondary-1);
|
|
319
333
|
color: var(--white);
|
|
320
|
-
`;var
|
|
334
|
+
`;var tt=({theme:o="light",...r})=>e("svg",{width:"38",height:"44",viewBox:"0 0 87 101",fill:"none",xmlns:"http://www.w3.org/2000/svg","data-test-id":"uniform-Badge",css:[D,o==="dark"?F:Z],...r},e("path",{d:"M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z",fill:"#83C6E1"}),e("path",{d:"M28.998 66.974V33.487L0 50.231v33.487l28.998 16.744 29.004-16.744V50.23L28.998 66.974Z",fill:"#438FD5"}),e("path",{d:"M58.002 16.744 28.998 33.487l29.004 16.744v33.487L87 66.975V33.487L58.002 16.744Z",fill:"#F4220B"}));var it=({theme:o="light",...r})=>e("div",{"data-test-id":"uniform-Logo"},e("svg",{width:"153",height:"53",viewBox:"0 0 153 39",fill:"none",xmlns:"http://www.w3.org/2000/svg",css:[D,o==="dark"?F:Z],...r},e("path",{d:"M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z",fill:"#83C6E1"}),e("path",{d:"M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",fill:"#438FD5"}),e("path",{d:"m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z",fill:"#F4220B"}),e("path",{d:"M86.45 12.98h-4.076v14.87h4.076V12.98Zm.146-6.843h-4.371v4.076h4.37V6.137Zm5.861 1.993v4.85h-2.736v3.477h2.736V27.85h4.076V16.457h3.27V12.98h-3.27V9.617h3.27v-3.48h-3.896l-3.45 1.992Zm13.503 4.7-3.45 1.993v11.183l3.45 1.992h6.335l3.45-1.992V14.823l-3.45-1.992h-6.335Zm5.71 11.688h-5.087v-8.21h5.087v8.21Zm12.607-10.315-2.119-1.224h-1.954v14.87h4.076V16.457h5.115V12.98h-2.999l-2.119 1.224ZM71.034 12.83l-2.375 1.373-2.379-1.372h-1.6v15.018h4.075V16.31h5.084v11.54h4.076V14.823l-3.45-1.992h-3.431ZM56.145 24.517h-5.087V12.98h-4.073v13.027l3.45 1.992h3.593l2.111-1.22.003.002.003-.003v.003l2.108 1.218h1.965v-15.02h-4.073v11.538Zm93.68-11.687h-2.855l-2.794 1.604-2.767-1.603h-2.854l-2.111 1.218-2.111-1.218h-1.965v15.018h4.076V16.31h4.343v11.54h4.073V16.31h4.343v11.54h4.073V14.823l-3.451-1.992Z",fill:"currentColor"})));import*as fe from"react";import{Button as nr}from"reakit/Button";import{css as L}from"@emotion/react";var le=L`
|
|
321
335
|
align-items: center;
|
|
322
336
|
border: 1px solid transparent;
|
|
323
337
|
cursor: pointer;
|
|
@@ -341,7 +355,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
341
355
|
&:disabled {
|
|
342
356
|
cursor: not-allowed;
|
|
343
357
|
}
|
|
344
|
-
`,
|
|
358
|
+
`,pe=L`
|
|
345
359
|
background: var(--brand-secondary-1);
|
|
346
360
|
color: var(--white);
|
|
347
361
|
|
|
@@ -349,7 +363,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
349
363
|
background: var(--gray-500);
|
|
350
364
|
color: var(--white);
|
|
351
365
|
}
|
|
352
|
-
`,
|
|
366
|
+
`,de=L`
|
|
353
367
|
background: var(--brand-secondary-5);
|
|
354
368
|
color: var(--white);
|
|
355
369
|
|
|
@@ -357,7 +371,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
357
371
|
background: var(--gray-500);
|
|
358
372
|
color: var(--white);
|
|
359
373
|
}
|
|
360
|
-
`,
|
|
374
|
+
`,ue=L`
|
|
361
375
|
background: var(--brand-secondary-2);
|
|
362
376
|
color: var(--brand-secondary-1);
|
|
363
377
|
|
|
@@ -365,7 +379,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
365
379
|
background: var(--brand-secondary-2);
|
|
366
380
|
color: var(--gray-400);
|
|
367
381
|
}
|
|
368
|
-
`,
|
|
382
|
+
`,me=L`
|
|
369
383
|
background: transparent;
|
|
370
384
|
color: var(--brand-secondary-3);
|
|
371
385
|
|
|
@@ -378,7 +392,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
378
392
|
border-color: var(--gray-400);
|
|
379
393
|
color: var(--gray-400);
|
|
380
394
|
}
|
|
381
|
-
`,
|
|
395
|
+
`,ge=L`
|
|
382
396
|
background: var(--brand-secondary-3);
|
|
383
397
|
color: var(--white);
|
|
384
398
|
|
|
@@ -386,10 +400,10 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
386
400
|
background: var(--gray-500);
|
|
387
401
|
color: var(--white);
|
|
388
402
|
}
|
|
389
|
-
`;var
|
|
403
|
+
`;var mt=fe.forwardRef(({buttonType:o="primary",size:r="md",children:t,...n},a)=>{let c={primary:pe,secondary:de,ghost:me,unimportant:ue,tertiary:ge},l={xs:"padding: 0.375rem 0.625rem; font-size: var(--fs-xs);",sm:"padding: var(--spacing-sm) 0.75rem; font-size: var(--fs-sm);",md:"padding: var(--spacing-sm) var(--spacing-base); font-size: var(--fs-sm);",lg:"padding: var(--spacing-sm) var(--spacing-base)",xl:"padding: 0.75rem var(--spacing-md)"};return e(nr,{ref:a,css:[le,c[o],l[r]],...n},t)});import dr from"react";import{createContext as ar,useContext as ir,useEffect as sr,useState as ve}from"react";import{paramCase as cr}from"param-case";var be=ar({iconsMap:{},isLoading:!0});function he(){return ir(be)}function ht({children:o}){let[r,t]=ve(!0),[n,a]=ve({});return sr(()=>{import("react-icons/cg").then(c=>{let l=Object.entries(c).reduce((m,[d,f])=>{if(d==="default")return m;let y=lr(d);return{...m,[y]:f}},{});a(l),t(!1)})},[]),e(be.Provider,{value:{iconsMap:n,isLoading:r}},o)}function lr(o){var r,t;return(t=(r=cr(o.replace("Cg","")).match(/[a-z]+|\d+/gi))==null?void 0:r.join("-"))!=null?t:""}import{css as H}from"@emotion/react";var ye=H`
|
|
390
404
|
display: hidden;
|
|
391
405
|
|
|
392
|
-
${
|
|
406
|
+
${oe("sm")} {
|
|
393
407
|
display: block;
|
|
394
408
|
}
|
|
395
409
|
|
|
@@ -397,30 +411,30 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
397
411
|
display: block;
|
|
398
412
|
vertical-align: middle;
|
|
399
413
|
}
|
|
400
|
-
`,
|
|
414
|
+
`,xe=H`
|
|
401
415
|
color: var(--brand-secondary-3);
|
|
402
|
-
`,
|
|
416
|
+
`,we=H`
|
|
403
417
|
color: var(--brand-secondary-5);
|
|
404
|
-
`,
|
|
418
|
+
`,Ce=H`
|
|
405
419
|
color: var(--gray-500);
|
|
406
|
-
`,
|
|
420
|
+
`,Se=H`
|
|
407
421
|
color: currentColor;
|
|
408
|
-
`;var
|
|
422
|
+
`;var ur=({icon:o,iconColor:r="green",size:t="1.5rem",...n})=>{let a=typeof o=="string",{iconsMap:c,isLoading:l}=he(),m={green:xe,gray:Ce,red:we,currentColor:Se};if(a&&l)return null;let d=a?c[o]:o;return a&&d===void 0?(console.error(`We don't seem to have the icon you're looking for ("${o}"). Make sure you're using <IconsProvider> and try an icon from our Storybook.`),null):e(d,{role:"img",size:t,...n,css:[ye,m[r]]})},x=dr.memo(ur);import{css as mr}from"@emotion/react";var Ie=mr`
|
|
409
423
|
color: var(--gray-500);
|
|
410
424
|
display: block;
|
|
411
425
|
font-size: var(--fs-sm);
|
|
412
426
|
margin: var(--spacing-xs) 0;
|
|
413
427
|
max-width: var(--prose);
|
|
414
|
-
`;var
|
|
415
|
-
align-items:
|
|
428
|
+
`;var w=({children:o})=>e("small",{css:Ie},o);import{MdWarning as fr}from"react-icons/md";import{css as gr}from"@emotion/react";var Re=gr`
|
|
429
|
+
align-items: center;
|
|
416
430
|
color: var(--brand-secondary-5);
|
|
417
431
|
display: flex;
|
|
418
432
|
gap: var(--spacing-sm);
|
|
419
433
|
margin: var(--spacing-xs) 0;
|
|
420
|
-
`;var
|
|
434
|
+
`;var C=({message:o})=>o?e("span",{css:Re},e(x,{icon:fr,size:16,iconColor:"currentColor"}),o):null;import*as Me from"react";var T=({children:o,className:r,...t})=>e("label",{css:[b,typeof r=="object"?r:void 0],className:typeof r=="string"?r:"",...t},o);var ke=({label:o,icon:r,id:t,caption:n,showLabel:a=!0,errorMessage:c,classNameContainer:l,classNameControl:m,classNameLabel:d,...f})=>e(Me.Fragment,null,a?e(T,{htmlFor:t,css:[b,typeof d=="object"?d:void 0],className:typeof d=="string"?d:""},o):null,e("div",{css:[M,typeof l=="object"?l:void 0],className:typeof l=="string"?l:""},e("input",{id:t,css:[k,typeof m=="object"?m:void 0,c?R:void 0,r?G:""],"aria-label":a?void 0:o,className:typeof m=="string"?m:"",...f}),r?e("div",{css:A},r):null),n?e(w,null,n):null,c?e(C,{message:c}):null);import vr from"react-select";function Ut(o){return e(vr,{...o,classNamePrefix:"input-combobox",styles:{...o.styles,singleValue:(r,t)=>{var n,a;return{...r,...(a=(n=o.styles)==null?void 0:n.singleValue)==null?void 0:a.call(n,r,t),color:"#828282"}},valueContainer:(r,t)=>{var n,a;return{...r,...(a=(n=o.styles)==null?void 0:n.valueContainer)==null?void 0:a.call(n,r,t),padding:"var(--spacing-base)"}},input:(r,t)=>{var n,a;return{...r,...(a=(n=o.styles)==null?void 0:n.input)==null?void 0:a.call(n,r,t),margin:"0",padding:"0","& > input":{boxShadow:"none !important"}}},control:(r,t)=>({...r,className:"input-combobox-control",border:t.isFocused?"1px solid transparent":"1px solid var(--gray-400)",lineHeight:1.25,outline:t.isFocused?"1px solid var(--brand-secondary-1)":"none",outlineOffset:0,boxShadow:"none","&:hover":{boxShadow:"none"}})}})}import{css as br}from"@emotion/react";import*as Ee from"react";import{useState as hr,useRef as yr}from"react";import{css as O}from"@emotion/react";var Le=O`
|
|
421
435
|
margin-inline: auto;
|
|
422
436
|
max-width: fit-content;
|
|
423
|
-
`,
|
|
437
|
+
`,Te=O`
|
|
424
438
|
align-items: center;
|
|
425
439
|
background: var(--brand-secondary-3);
|
|
426
440
|
border: 2px solid var(--brand-secondary-3);
|
|
@@ -443,7 +457,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
443
457
|
&:focus {
|
|
444
458
|
outline: 2px solid var(--brand-secondary-1);
|
|
445
459
|
}
|
|
446
|
-
`,
|
|
460
|
+
`,Pe=O`
|
|
447
461
|
background: var(--white);
|
|
448
462
|
border: 1px solid var(--brand-secondary-3);
|
|
449
463
|
border-top: none;
|
|
@@ -453,7 +467,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
453
467
|
position: absolute;
|
|
454
468
|
inset: auto 0;
|
|
455
469
|
transform: translateY(-0.2rem);
|
|
456
|
-
`,
|
|
470
|
+
`,Be=O`
|
|
457
471
|
cursor: pointer;
|
|
458
472
|
display: block;
|
|
459
473
|
font-size: var(--fs-sm);
|
|
@@ -468,27 +482,27 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
468
482
|
&:hover {
|
|
469
483
|
background: var(--gray-50);
|
|
470
484
|
}
|
|
471
|
-
`,
|
|
485
|
+
`,ze=O`
|
|
472
486
|
position: absolute;
|
|
473
487
|
overflow: hidden;
|
|
474
488
|
height: 1px;
|
|
475
489
|
width: 1px;
|
|
476
490
|
clip: rect(0, 0, 0, 0);
|
|
477
491
|
padding: 0;
|
|
478
|
-
`;import{CgChevronDown as
|
|
492
|
+
`;import{CgChevronDown as xr}from"react-icons/cg";var en=({classNameContainer:o,options:r,value:t,onChange:n,disabled:a,...c})=>{var y;let[l,m]=hr(!1),d=yr(null);Ee.useEffect(()=>{let g=I=>{d.current&&!d.current.contains(I.target)&&m(!1)};return document.addEventListener("mousedown",g),()=>{document.removeEventListener("mousedown",g)}},[d]);let f=r.find(g=>g.value===t);return e("div",{ref:d,css:o?br`
|
|
479
493
|
max-width: fit-content;
|
|
480
494
|
${typeof o=="object"?o:void 0}
|
|
481
|
-
`:
|
|
495
|
+
`:Le,className:typeof o=="string"?o:""},e("button",{type:"button","aria-controls":`and-or-${c.id}`,"aria-expanded":l,css:Te,onClick:()=>{a||m(g=>!g)},disabled:a,...c},e("span",null,(y=f==null?void 0:f.label)!=null?y:t),a?null:e(x,{icon:xr,iconColor:"currentColor",size:24})),e("div",{id:`and-or-${c.id}`,css:[Pe,l?void 0:ze],"aria-hidden":!l},r.map(g=>e("button",{key:g.value,type:"button",css:Be,onClick:()=>{n(g),m(I=>!I)}},g.label))))};var nn=({onSearchTextChanged:o,disabled:r=!1,placeholder:t="Keyword search",inputFieldName:n="keywordSearch",disabledFieldSubmission:a=!1,value:c})=>e(ke,{type:"text",name:n,placeholder:t,showLabel:!1,value:c,icon:e("svg",{width:"26",height:"24",viewBox:"0 0 26 24",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",css:re},e("g",{clipPath:"url(#clip0)"},e("path",{d:"M11.539 0C5.48429 0 0.558105 4.74145 0.558105 10.5691C0.558105 16.3971 5.48429 21.1382 11.539 21.1382C17.594 21.1382 22.5199 16.3971 22.5199 10.5691C22.5199 4.74145 17.594 0 11.539 0ZM11.539 19.187C6.60198 19.187 2.58535 15.321 2.58535 10.5691C2.58535 5.81728 6.60198 1.95122 11.539 1.95122C16.476 1.95122 20.4926 5.81723 20.4926 10.5691C20.4926 15.321 16.476 19.187 11.539 19.187Z"}),e("path",{d:"M25.196 22.3344L19.3846 16.7409C18.9886 16.3598 18.3473 16.3598 17.9513 16.7409C17.5553 17.1217 17.5553 17.7397 17.9513 18.1205L23.7627 23.714C23.9607 23.9045 24.2199 23.9998 24.4794 23.9998C24.7385 23.9998 24.998 23.9045 25.196 23.714C25.592 23.3332 25.592 22.7153 25.196 22.3344Z"})),e("defs",null,e("clipPath",{id:"clip0"},e("rect",{width:"24.9351",height:"24",fill:"white",transform:"translate(0.558105)"})))),onChange:d=>{o(d.currentTarget.value)},onKeyPress:d=>{d.key==="Enter"&&a&&d.preventDefault()},disabled:r,"aria-label":t});var dn=({label:o,defaultOption:r,options:t,caption:n,errorMessage:a,showLabel:c=!0,labelCta:l,classNameContainer:m,classNameControl:d,classNameLabel:f,...y})=>e("div",{css:[M,typeof m=="object"?m:void 0],className:typeof m=="string"?m:""},c?e(p.Fragment,null,e(T,{htmlFor:y.id,css:[b,typeof f=="object"?f:void 0],className:typeof f=="string"?f:""},o,l)):null,e("select",{title:o,"aria-label":c?void 0:o,css:[k,Y,a?R:void 0,typeof d=="object"?d:void 0],className:typeof d=="string"?d:"",...y},r?e("option",{value:""},r):null,t.map((g,I)=>e("option",{key:I,value:g.label,...g}))),n?e(w,null,n):null,a?e(C,{message:a}):null);var vn=({label:o,type:r,disabled:t,checked:n,name:a,caption:c,errorMessage:l,...m})=>e(T,{css:[te,t?ie:void 0]},e("input",{type:r,css:ne,checked:n,name:a,disabled:t,...m}),e("span",{css:ae},o),c||l?e("span",{css:se},c?e(w,null,c):null,l?e(C,{message:l}):null):null);import*as He from"react";var wn=({label:o,icon:r,id:t,caption:n,showLabel:a=!0,errorMessage:c,...l})=>e(He.Fragment,null,a?e("label",{htmlFor:t,css:[b]},o):null,e("div",{css:[M]},e("textarea",{id:t,css:[ce,c?R:void 0,r?G:""],"aria-label":a?void 0:o,...l}),r?e("div",{css:A},r):null),n?e(w,null,n):null,c?e(C,{message:c}):null);import*as P from"react";import{useMenuState as Cr,Menu as Sr,MenuButton as Ir}from"reakit/Menu";import{css as wr}from"@emotion/react";var Oe=wr`
|
|
482
496
|
border: 1px solid var(--gray-500);
|
|
483
497
|
border-radius: var(--rounded-base);
|
|
484
498
|
outline: none;
|
|
485
499
|
overflow: hidden;
|
|
486
500
|
z-index: 50;
|
|
487
|
-
`;var
|
|
501
|
+
`;var Ve=P.createContext({}),Ae=()=>P.useContext(Ve),Ge=({menuLabel:o,menuTrigger:r,placement:t="auto",menuItemsContainerCssClasses:n,children:a})=>{let c=Cr({placement:t});return e(Ve.Provider,{value:c},e(Ir,{...c,ref:r.ref,...r.props},l=>P.cloneElement(r,l)),e(Sr,{...c,"aria-label":o,css:[Oe,typeof n=="object"?n:void 0],className:typeof n=="string"?n:""},a))};import*as We from"react";import{MenuItem as Rr}from"reakit";import{css as De}from"@emotion/react";var Ze=De`
|
|
488
502
|
background: var(--white);
|
|
489
503
|
border-top: 1px solid var(--gray-500);
|
|
490
504
|
color: var(--brand-secondary-1);
|
|
491
|
-
display:
|
|
505
|
+
display: flex;
|
|
492
506
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
493
507
|
font-weight: var(--fw-bold);
|
|
494
508
|
width: 100%;
|
|
@@ -509,7 +523,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
509
523
|
&:hover {
|
|
510
524
|
background: var(--gray-200);
|
|
511
525
|
}
|
|
512
|
-
`,
|
|
526
|
+
`,Fe=De`
|
|
513
527
|
align-items: center;
|
|
514
528
|
display: flex;
|
|
515
529
|
justify-content: space-between;
|
|
@@ -520,7 +534,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
520
534
|
width: var(--spacing-base);
|
|
521
535
|
height: var(--spacing-base);
|
|
522
536
|
}
|
|
523
|
-
`;var
|
|
537
|
+
`;var An=We.forwardRef(({children:o,className:r,hideMenuOnClick:t=!0,icon:n,...a},c)=>{let l=Ae(),d=t?(y=>{let g={...y};if(g.onClick){let I=g.onClick;g.onClick=er=>{l.hide(),I(er)}}return g})(a):a,f=typeof o=="function"?o(d):o;return e(Rr,{ref:c,"data-testid":"uniform-menuItem",...l,...d,css:[Ze,typeof r=="object"?r:void 0],className:typeof r=="string"?r:void 0},n?Mr(f,n):f)});function Mr(o,r){return e("span",{css:Fe},o," ",r)}import{css as u}from"@emotion/react";var Ne=({...o})=>e("svg",{role:"img","data-img":"info",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 14 16",fill:"currentColor",...o},e("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})),Ue=({...o})=>e("svg",{role:"img","data-img":"danger",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 12 16",fill:"currentColor",...o},e("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})),$e=({...o})=>e("svg",{role:"img","data-img":"note",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 14 16",fill:"currentColor",...o},e("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})),Ke=({...o})=>e("svg",{role:"img","data-img":"tip",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 12 16",fill:"currentColor",...o},e("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})),q=({...o})=>e("svg",{role:"img","data-img":"caution",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 16 16",fill:"currentColor",...o},e("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})),Ye=({...o})=>e("svg",{role:"img","data-img":"success",width:"1em",height:"1em",viewBox:"0 0 40 40",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",...o},e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 39.2A19.2 19.2 0 1 0 20 .8a19.2 19.2 0 0 0 0 38.4Zm8.897-22.303a2.4 2.4 0 0 0-3.394-3.394L17.6 21.407l-3.103-3.104a2.4 2.4 0 0 0-3.394 3.394l4.8 4.8a2.4 2.4 0 0 0 3.394 0l9.6-9.6Z"}));import{css as B}from"@emotion/react";var Xe=B`
|
|
524
538
|
--caution-desc: rgb(161, 98, 7);
|
|
525
539
|
--caution-icon: rgb(250, 204, 21);
|
|
526
540
|
--caution-title: rgb(133, 77, 14);
|
|
@@ -548,77 +562,77 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
548
562
|
|
|
549
563
|
border-radius: var(--rounded-base);
|
|
550
564
|
padding: var(--spacing-base);
|
|
551
|
-
`,
|
|
565
|
+
`,_e=B`
|
|
552
566
|
display: flex;
|
|
553
567
|
gap: var(--spacing-base);
|
|
554
|
-
|
|
568
|
+
`,qe=B`
|
|
555
569
|
flex-shrink: 0;
|
|
556
|
-
`,
|
|
570
|
+
`,Je=B`
|
|
557
571
|
font-size: var(--fs-sm);
|
|
558
572
|
font-weight: var(--fw-bold);
|
|
559
573
|
margin: 0 0 var(--spacing-sm);
|
|
560
|
-
`,
|
|
574
|
+
`,Qe=B`
|
|
561
575
|
font-size: var(--fs-sm);
|
|
562
|
-
`,
|
|
576
|
+
`,je=B`
|
|
563
577
|
width: 1.25rem;
|
|
564
578
|
height: 1.25rem;
|
|
565
|
-
`;var
|
|
579
|
+
`;var kr={caution:{icon:q,descriptionColor:u`
|
|
566
580
|
color: var(--caution-desc);
|
|
567
|
-
`,iconColor:
|
|
581
|
+
`,iconColor:u`
|
|
568
582
|
color: var(--caution-icon);
|
|
569
|
-
`,titleColor:
|
|
583
|
+
`,titleColor:u`
|
|
570
584
|
color: var(--caution-title);
|
|
571
|
-
`,containerColor:
|
|
585
|
+
`,containerColor:u`
|
|
572
586
|
background-color: var(--caution-container);
|
|
573
|
-
`},danger:{icon:
|
|
587
|
+
`},danger:{icon:Ue,descriptionColor:u`
|
|
574
588
|
color: var(--danger-desc);
|
|
575
|
-
`,iconColor:
|
|
589
|
+
`,iconColor:u`
|
|
576
590
|
color: var(--danger-icon);
|
|
577
|
-
`,titleColor:
|
|
591
|
+
`,titleColor:u`
|
|
578
592
|
color: var(--danger-title);
|
|
579
|
-
`,containerColor:
|
|
593
|
+
`,containerColor:u`
|
|
580
594
|
background-color: var(--danger-container);
|
|
581
|
-
`},error:{icon:
|
|
595
|
+
`},error:{icon:q,descriptionColor:u`
|
|
582
596
|
color: var(--danger-desc);
|
|
583
|
-
`,iconColor:
|
|
597
|
+
`,iconColor:u`
|
|
584
598
|
color: var(--danger-icon);
|
|
585
|
-
`,titleColor:
|
|
599
|
+
`,titleColor:u`
|
|
586
600
|
color: var(--danger-title);
|
|
587
|
-
`,containerColor:
|
|
601
|
+
`,containerColor:u`
|
|
588
602
|
background-color: var(--danger-container);
|
|
589
|
-
`},info:{icon:
|
|
603
|
+
`},info:{icon:Ne,descriptionColor:u`
|
|
590
604
|
color: var(--info-desc);
|
|
591
|
-
`,iconColor:
|
|
605
|
+
`,iconColor:u`
|
|
592
606
|
color: var(--info-icon);
|
|
593
|
-
`,titleColor:
|
|
607
|
+
`,titleColor:u`
|
|
594
608
|
color: var(--info-title);
|
|
595
|
-
`,containerColor:
|
|
609
|
+
`,containerColor:u`
|
|
596
610
|
background-color: var(--info-container);
|
|
597
|
-
`},note:{icon
|
|
611
|
+
`},note:{icon:$e,descriptionColor:u`
|
|
598
612
|
color: var(--note-desc);
|
|
599
|
-
`,iconColor:
|
|
613
|
+
`,iconColor:u`
|
|
600
614
|
color: var(--note-icon);
|
|
601
|
-
`,titleColor:
|
|
615
|
+
`,titleColor:u`
|
|
602
616
|
color: var(--note-title);
|
|
603
|
-
`,containerColor:
|
|
617
|
+
`,containerColor:u`
|
|
604
618
|
background-color: var(--note-container);
|
|
605
|
-
`},success:{icon:
|
|
619
|
+
`},success:{icon:Ye,descriptionColor:u`
|
|
606
620
|
color: var(--success-desc);
|
|
607
|
-
`,iconColor:
|
|
621
|
+
`,iconColor:u`
|
|
608
622
|
color: var(--success-icon);
|
|
609
|
-
`,titleColor:
|
|
623
|
+
`,titleColor:u`
|
|
610
624
|
color: var(--success-title);
|
|
611
|
-
`,containerColor:
|
|
625
|
+
`,containerColor:u`
|
|
612
626
|
background-color: var(--success-container);
|
|
613
|
-
`},tip:{icon:
|
|
627
|
+
`},tip:{icon:Ke,descriptionColor:u`
|
|
614
628
|
color: var(--success-desc);
|
|
615
|
-
`,iconColor:
|
|
629
|
+
`,iconColor:u`
|
|
616
630
|
color: var(--success-icon);
|
|
617
|
-
`,titleColor:
|
|
631
|
+
`,titleColor:u`
|
|
618
632
|
color: var(--success-title);
|
|
619
|
-
`,containerColor:
|
|
633
|
+
`,containerColor:u`
|
|
620
634
|
background-color: var(--success-container);
|
|
621
|
-
`}},
|
|
635
|
+
`}},Kn=({type:o="info",title:r,children:t,className:n})=>{let a=kr[o];if(!a)return null;let c=a.icon;return e("div",{"data-testid":"sdk-ui-callout",css:[Xe,a.containerColor,typeof n=="object"?n:""],className:`${typeof n=="string"?n:""}`},e("div",{css:_e},e("div",{css:qe},e(c,{css:[je,a.iconColor]})),e("div",null,r?e("h3",{css:[Je,a.titleColor]},r):null,t?e("div",{css:[Qe,a.descriptionColor]},t):null)))};import{css as eo,keyframes as Lr}from"@emotion/react";var Tr=Lr`
|
|
622
636
|
0%, 100% {
|
|
623
637
|
opacity: 1.0;
|
|
624
638
|
transform: translateY(0);
|
|
@@ -634,14 +648,14 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
634
648
|
opacity: 0.2;
|
|
635
649
|
transform: translateY(-5px);
|
|
636
650
|
}
|
|
637
|
-
`,
|
|
651
|
+
`,oo=eo`
|
|
638
652
|
display: inline-flex;
|
|
639
653
|
justify-content: center;
|
|
640
|
-
`,
|
|
654
|
+
`,W=eo`
|
|
641
655
|
background-color: var(--gray-700);
|
|
642
656
|
display: block;
|
|
643
657
|
border-radius: var(--rounded-full);
|
|
644
|
-
animation: ${
|
|
658
|
+
animation: ${Tr} 0.75s infinite ease-in-out;
|
|
645
659
|
width: 8px;
|
|
646
660
|
height: 8px;
|
|
647
661
|
margin: 0 var(--spacing-xs);
|
|
@@ -658,53 +672,53 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
658
672
|
&:nth-of-type(3) {
|
|
659
673
|
animation-delay: 0.6s;
|
|
660
674
|
}
|
|
661
|
-
`;var
|
|
675
|
+
`;var Jn=()=>e("div",{css:oo,role:"alert"},e("span",{css:W}),e("span",{css:W}),e("span",{css:W}));import{css as Pr}from"@emotion/react";import{css as z}from"@emotion/react";var ro=z`
|
|
662
676
|
align-items: center;
|
|
663
677
|
position: absolute;
|
|
664
678
|
inset: 0 0;
|
|
665
679
|
overflow: hidden;
|
|
666
680
|
z-index: 9999;
|
|
667
681
|
justify-content: center;
|
|
668
|
-
`,
|
|
682
|
+
`,to=z`
|
|
669
683
|
display: flex;
|
|
670
|
-
`,
|
|
684
|
+
`,no=z`
|
|
671
685
|
display: none;
|
|
672
|
-
`,
|
|
686
|
+
`,ao=z`
|
|
673
687
|
background: var(--white);
|
|
674
688
|
opacity: 0.5;
|
|
675
689
|
position: absolute;
|
|
676
690
|
inset: 0 0;
|
|
677
|
-
`,
|
|
691
|
+
`,io=z`
|
|
678
692
|
align-items: center;
|
|
679
693
|
display: flex;
|
|
680
694
|
flex-direction: column;
|
|
681
|
-
`,
|
|
695
|
+
`,so=z`
|
|
682
696
|
color: var(--gray-500);
|
|
683
697
|
margin: var(--spacing-base) 0 0;
|
|
684
|
-
`;var
|
|
698
|
+
`;var ta=({isActive:o,statusMessage:r})=>e("div",{role:"alert",css:[ro,o?to:no],"aria-hidden":!o},e("div",{css:ao}),e("div",{css:Pr`
|
|
685
699
|
position: relative;
|
|
686
|
-
`},e("div",{css:
|
|
700
|
+
`},e("div",{css:io},e(Br,{height:128,width:128}),r?e("div",{css:so},r):null))),Br=({height:o,width:r})=>e("svg",{"data-testid":"svg",viewBox:"0 0 38 38",xmlns:"http://www.w3.org/2000/svg",width:r!=null?r:40,height:o!=null?o:40,stroke:"currentColor"},e("g",{fill:"none",fillRule:"evenodd"},e("g",{transform:"translate(1 1)",strokeWidth:"2"},e("circle",{strokeOpacity:".25",cx:"18",cy:"18",r:"18"}),e("path",{d:"M36 18c0-9.94-8.06-18-18-18",transform:"rotate(166.645 18 18)"},e("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"0.8s",repeatCount:"indefinite"})))));import{css as S}from"@emotion/react";var co=S`
|
|
687
701
|
font-family: var(--ff-heading);
|
|
688
702
|
font-size: clamp(1.75rem, var(--fluid-font-base), 3.25rem);
|
|
689
703
|
font-weight: var(--fw-bold);
|
|
690
704
|
margin-bottom: var(--spacing-base);
|
|
691
|
-
`,
|
|
705
|
+
`,lo=S`
|
|
692
706
|
font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
|
|
693
|
-
`,
|
|
707
|
+
`,po=S`
|
|
694
708
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
695
|
-
`,
|
|
709
|
+
`,uo=S`
|
|
696
710
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.35rem);
|
|
697
|
-
`,
|
|
711
|
+
`,mo=S`
|
|
698
712
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.25rem);
|
|
699
|
-
`,
|
|
713
|
+
`,go=S`
|
|
700
714
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
701
|
-
`,
|
|
715
|
+
`,fo=S`
|
|
702
716
|
font-weight: var(--fw-bold);
|
|
703
717
|
font-family: var(--ff-base);
|
|
704
718
|
margin-bottom: var(--spacing-base);
|
|
705
|
-
`,
|
|
719
|
+
`,vo=S`
|
|
706
720
|
line-height: 1.35;
|
|
707
|
-
`;var
|
|
721
|
+
`;var ca=({level:o=2,children:r,...t})=>{let n=`h${o}`,a={h1:co,h2:lo,h3:po,h4:uo,h5:mo,h6:go},c=n.includes("h1")?void 0:fo;return e(n,{...t,css:[a[n],c,vo]},r)};import{css as zr}from"@emotion/react";var bo=zr`
|
|
708
722
|
font-size: var(--fs-base);
|
|
709
723
|
line-height: 1.5;
|
|
710
724
|
margin-bottom: var(--spacing-base);
|
|
@@ -712,18 +726,31 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
712
726
|
&:last-of-type {
|
|
713
727
|
margin-bottom: 0;
|
|
714
728
|
}
|
|
715
|
-
`;var
|
|
729
|
+
`;var ma=({className:o,children:r,...t})=>e("p",{...t,css:[bo,typeof o=="object"?o:void 0],className:typeof o=="string"?o:""},r);import{css as N}from"@emotion/react";var ho=N`
|
|
730
|
+
display: inline-flex;
|
|
731
|
+
text-decoration: underline;
|
|
732
|
+
|
|
733
|
+
&:hover {
|
|
734
|
+
text-decoration: none;
|
|
735
|
+
}
|
|
736
|
+
`,yo=N`
|
|
737
|
+
color: var(--brand-secondary-3);
|
|
738
|
+
`,xo=N`
|
|
739
|
+
color: var(--brand-secondary-5);
|
|
740
|
+
`,wo=N`
|
|
741
|
+
color: currentColor;
|
|
742
|
+
`;import{CgExternal as Er}from"react-icons/cg";var xa=({external:o,text:r,linkColor:t="currentColor",...n})=>e("a",{css:[ho,{currentColor:wo,red:xo,green:yo}[t]],...n},r,o?e(x,{icon:Er,iconColor:"currentColor",size:24}):null);import{css as Hr}from"@emotion/react";import{css as Co}from"@emotion/react";var So=Co`
|
|
716
743
|
position: relative;
|
|
717
|
-
`,
|
|
744
|
+
`,Io=Co`
|
|
718
745
|
background: var(--gray-50);
|
|
719
746
|
border-top: 1px solid var(--gray-200);
|
|
720
747
|
border-bottom: 1px solid var(--gray-200);
|
|
721
748
|
max-height: 24rem;
|
|
722
749
|
overflow-y: auto;
|
|
723
750
|
padding: var(--spacing-sm);
|
|
724
|
-
`;var
|
|
725
|
-
${
|
|
726
|
-
`},o):null,e("div",{css:[
|
|
751
|
+
`;var ka=({label:o,children:r})=>e("div",{css:So},o?e("span",{css:Hr`
|
|
752
|
+
${b}
|
|
753
|
+
`},o):null,e("div",{css:[Io,X]},r));import{css as J}from"@emotion/react";var Ro=J`
|
|
727
754
|
align-items: center;
|
|
728
755
|
background: var(--white);
|
|
729
756
|
border-radius: var(--rounded-base);
|
|
@@ -738,9 +765,9 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
738
765
|
&:last-of-type {
|
|
739
766
|
margin-block: 0;
|
|
740
767
|
}
|
|
741
|
-
`,
|
|
768
|
+
`,Mo=J`
|
|
742
769
|
border-color: var(--brand-secondary-3);
|
|
743
|
-
`,
|
|
770
|
+
`,ko=J`
|
|
744
771
|
align-items: center;
|
|
745
772
|
display: flex;
|
|
746
773
|
justify-content: space-between;
|
|
@@ -750,7 +777,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
750
777
|
&:focus {
|
|
751
778
|
outline: none;
|
|
752
779
|
}
|
|
753
|
-
`;import{css as
|
|
780
|
+
`;import{css as To}from"@emotion/react";import{keyframes as U}from"@emotion/react";var za=U`
|
|
754
781
|
0%,
|
|
755
782
|
100% {
|
|
756
783
|
transform: scale(1);
|
|
@@ -760,7 +787,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
760
787
|
transform: scale(1.15);
|
|
761
788
|
opacity: 1;
|
|
762
789
|
}
|
|
763
|
-
`,
|
|
790
|
+
`,Lo=U`
|
|
764
791
|
0% {
|
|
765
792
|
opacity: 0;
|
|
766
793
|
transform: translateY(10px);
|
|
@@ -769,7 +796,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
769
796
|
opacity: 1;
|
|
770
797
|
transform: translateY(0);
|
|
771
798
|
}
|
|
772
|
-
`,
|
|
799
|
+
`,Ea=U`
|
|
773
800
|
0% {
|
|
774
801
|
opacity: 1;
|
|
775
802
|
transform: translateY(0);
|
|
@@ -778,20 +805,20 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
778
805
|
opacity: 0;
|
|
779
806
|
transform: translateY(10px);
|
|
780
807
|
}
|
|
781
|
-
`,
|
|
808
|
+
`,Ha=U`
|
|
782
809
|
0% {
|
|
783
810
|
opacity: 0;
|
|
784
811
|
}
|
|
785
812
|
100% {
|
|
786
813
|
opacity: 1;
|
|
787
814
|
}
|
|
788
|
-
`;var
|
|
815
|
+
`;var Da=({buttonText:o,active:r,...t})=>e("div",{css:[Ro,r?Mo:void 0],className:"flex items-center space-x-2 p-3 bg-white border-2 rounded-md shadow-md border-gray-300"},e("button",{css:ko,className:"flex items-center justify-between w-full outline-none focus:outline-none",type:"button",...t},e("span",null,o),e("svg",{width:"24",height:"24",viewBox:"0 0 40 40",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!r,css:To`
|
|
789
816
|
color: var(--brand-secondary-3);
|
|
790
817
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
791
|
-
${r?
|
|
792
|
-
animation: ${
|
|
818
|
+
${r?To`
|
|
819
|
+
animation: ${Lo} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
793
820
|
`:"opacity: 0;"}
|
|
794
|
-
`},e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 39.2A19.2 19.2 0 1 0 20 .8a19.2 19.2 0 0 0 0 38.4Zm8.897-22.303a2.4 2.4 0 0 0-3.394-3.394L17.6 21.407l-3.103-3.104a2.4 2.4 0 0 0-3.394 3.394l4.8 4.8a2.4 2.4 0 0 0 3.394 0l9.6-9.6Z"}))));import{CgChevronDown as
|
|
821
|
+
`},e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20 39.2A19.2 19.2 0 1 0 20 .8a19.2 19.2 0 0 0 0 38.4Zm8.897-22.303a2.4 2.4 0 0 0-3.394-3.394L17.6 21.407l-3.103-3.104a2.4 2.4 0 0 0-3.394 3.394l4.8 4.8a2.4 2.4 0 0 0 3.394 0l9.6-9.6Z"}))));import{CgChevronDown as Or}from"react-icons/cg";import{css as h}from"@emotion/react";var Po=h`
|
|
795
822
|
align-items: center;
|
|
796
823
|
border: 1px solid transparent;
|
|
797
824
|
color: var(--white);
|
|
@@ -810,16 +837,155 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import So from"reac
|
|
|
810
837
|
&:focus {
|
|
811
838
|
border-color: var(--gray-700);
|
|
812
839
|
}
|
|
813
|
-
`,
|
|
814
|
-
background: var(--brand-secondary-5);
|
|
815
|
-
`,wo=E`
|
|
816
|
-
background: var(--gray-500);
|
|
817
|
-
`,Co=E`
|
|
840
|
+
`,Bo=h`
|
|
818
841
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
819
842
|
font-weight: var(--fw-medium);
|
|
820
843
|
letter-spacing: 0.025rem;
|
|
821
844
|
line-height: 1.25;
|
|
822
|
-
`,
|
|
845
|
+
`,zo=h`
|
|
823
846
|
padding: var(--spacing-sm);
|
|
824
847
|
border-left: 1px solid currentColor;
|
|
825
|
-
|
|
848
|
+
`,Eo=h`
|
|
849
|
+
background: var(--brand-secondary-1);
|
|
850
|
+
color: var(--white);
|
|
851
|
+
`,Ho=h`
|
|
852
|
+
background: var(--gray-500);
|
|
853
|
+
color: var(--white);
|
|
854
|
+
`,Oo=h`
|
|
855
|
+
background: var(--brand-secondary-5);
|
|
856
|
+
color: var(--white);
|
|
857
|
+
`,Vo=h`
|
|
858
|
+
background: var(--gray-500);
|
|
859
|
+
color: var(--white);
|
|
860
|
+
`,Ao=h`
|
|
861
|
+
background: var(--brand-secondary-2);
|
|
862
|
+
color: var(--brand-secondary-1);
|
|
863
|
+
`,Go=h`
|
|
864
|
+
background: var(--brand-secondary-2);
|
|
865
|
+
color: var(--gray-400);
|
|
866
|
+
`,Do=h`
|
|
867
|
+
background: transparent;
|
|
868
|
+
color: var(--brand-secondary-3);
|
|
869
|
+
|
|
870
|
+
&:hover {
|
|
871
|
+
border-color: var(--brand-secondary-3);
|
|
872
|
+
}
|
|
873
|
+
`,Zo=h`
|
|
874
|
+
background: transparent;
|
|
875
|
+
border-color: var(--gray-400);
|
|
876
|
+
color: var(--gray-400);
|
|
877
|
+
`;var Ya=({onButtonClick:o,buttonType:r="secondary",buttonText:t,disabled:n,children:a,placement:c,...l})=>e("div",{css:[Po,n?{primary:Ho,secondary:Vo,ghost:Zo,unimportant:Go}[r]:{primary:Eo,secondary:Oo,ghost:Do,unimportant:Ao}[r]],"data-test-id":"multioptions-button"},e("button",{type:"button",css:Bo,disabled:n,...l,onClick:o,"data-test-id":"multioptions-button-main"},t),e(Ge,{menuLabel:"buttonMenu",placement:c,menuTrigger:e("div",{css:zo,"data-test-id":"multioptions-button-call-menu"},e(x,{icon:Or,size:24,iconColor:"currentColor"}))},a));import{css as Nr}from"@emotion/react";import Ar,{useContext as Gr,useEffect as Dr,useState as Zr}from"react";import{css as Q}from"@emotion/react";var Fo=Q`
|
|
878
|
+
position: absolute;
|
|
879
|
+
`,Wo=Q`
|
|
880
|
+
display: flex;
|
|
881
|
+
gap: var(--spacing-sm);
|
|
882
|
+
font-size: var(--fs-xs);
|
|
883
|
+
`,No=Q`
|
|
884
|
+
background: linear-gradient(to bottom right, var(--gray-100), var(--gray-200));
|
|
885
|
+
border-radius: var(--rounded-base);
|
|
886
|
+
border: 1px solid var(--gray-600);
|
|
887
|
+
box-shadow: var(--shadow-base);
|
|
888
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
889
|
+
`;import{useHotkeys as Vr}from"react-hotkeys-hook";var E=/(Mac|iPhone|iPod|iPad)/i.test(typeof window!="undefined"?window.navigator.userAgent:"server");function j(o){return o===null?null:o.replace(/alt/g,"option").replace(/(ctrl|control)/g,"command")}function $({handler:o,shortcut:r,macShortcut:t,doNotPreventDefault:n,activeWhenEditing:a}){let c=E&&t?t:r;E&&!t&&(c=j(r)),Vr(c!=null?c:"\u{1F4A9}",l=>{n||l.preventDefault(),o(l)},a?{enableOnContentEditable:!0,enableOnTags:["INPUT","SELECT","TEXTAREA"]}:{},[o,n])}var Uo=!1,$o=Ar.createContext(!1),ee=["ctrl+F1","option+shift+/"];function ri({children:o}){let[r,t]=Zr(!1);return Dr(()=>{Uo||(Uo=!0,console.log(`Type ${Ko(E?ee[1]:ee[0])} to show keyboard shortcuts`))},[]),$({shortcut:ee.join(","),handler:()=>{t(n=>!n)},activeWhenEditing:!0}),e($o.Provider,{value:r},o)}function Ko(o){return o.replace(/(command|cmd)/g,"\u2318").replace(/option/g,"\u2325").replace(/shift/g,"\u21E7").replace(/ctrl/g,"\u2303")}function Yo({shortcut:o,macShortcut:r,className:t}){if(!Gr($o)||!o.includes("+")&&o.length>1)return null;let a=E&&r?r:o;E&&!r&&(a=j(o));let c=Ko(a);return e("div",{css:[Fo,typeof t=="object"?t:void 0],className:typeof t=="string"?t:""},e(Fr,{shortcut:c}))}function Fr({shortcut:o}){let r=o.split("+");return e("div",{css:Wo},r.map(t=>e("span",{key:t,css:No},t.toUpperCase())))}import{css as Wr}from"@emotion/react";var Xo=Wr`
|
|
890
|
+
--max-size: clamp(2.5rem, 100vw, 3.5rem);
|
|
891
|
+
align-items: center;
|
|
892
|
+
box-shadow: var(--shadow-base);
|
|
893
|
+
border-radius: var(--rounded-full);
|
|
894
|
+
border: none;
|
|
895
|
+
cursor: pointer;
|
|
896
|
+
display: inline-flex;
|
|
897
|
+
padding: 0;
|
|
898
|
+
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
899
|
+
transform: scale(0.95);
|
|
900
|
+
width: var(--max-size);
|
|
901
|
+
height: var(--max-size);
|
|
902
|
+
|
|
903
|
+
&:hover,
|
|
904
|
+
&:focus {
|
|
905
|
+
transform: scale(1);
|
|
906
|
+
}
|
|
907
|
+
|
|
908
|
+
& svg {
|
|
909
|
+
color: var(--brand-secondary-5);
|
|
910
|
+
}
|
|
911
|
+
`;var pi=({buttonText:o="Add",onClick:r,shortcut:t="ctrl+alt+n",macShortcut:n="option+n",...a})=>($({shortcut:t,macShortcut:n,handler:r,activeWhenEditing:!0}),e("button",{type:"button","aria-label":o,"data-testid":"add-entry-button",onClick:r,css:Xo,...a},t?e(Yo,{shortcut:t,css:Nr`
|
|
912
|
+
top: -2rem;
|
|
913
|
+
left: -1.5rem;
|
|
914
|
+
`}):null,e("svg",{width:"66",height:"66",fill:"none",viewBox:"0 0 66 66",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M33 66c18.225 0 33-14.775 33-33S51.225 0 33 0 0 14.775 0 33s14.775 33 33 33Z",fill:"currentColor"}),e("path",{d:"M35 21a2 2 0 1 0-4 0v24a2 2 0 1 0 4 0V21Z",fill:"#fff"}),e("path",{d:"M47 33a2 2 0 0 1-2 2H21a2 2 0 0 1 0-4h24a2 2 0 0 1 2 2Z",fill:"#fff"}))));import*as K from"react";import{css as V}from"@emotion/react";var _o=V`
|
|
915
|
+
cursor: pointer;
|
|
916
|
+
display: inline-block;
|
|
917
|
+
position: relative;
|
|
918
|
+
margin-right: var(--spacing-sm);
|
|
919
|
+
transition: var(--duration-fast) var(--timing-ease-out);
|
|
920
|
+
vertical-align: middle;
|
|
921
|
+
user-select: none;
|
|
922
|
+
`,qo=V`
|
|
923
|
+
appearance: none;
|
|
924
|
+
border-radius: var(--rounded-full);
|
|
925
|
+
background-color: var(--white);
|
|
926
|
+
border: 2px solid var(--gray-400);
|
|
927
|
+
cursor: pointer;
|
|
928
|
+
position: absolute;
|
|
929
|
+
display: block;
|
|
930
|
+
width: var(--spacing-md);
|
|
931
|
+
height: var(--spacing-md);
|
|
932
|
+
transition: transform var(--duration-fast) var(--timing-ease-out),
|
|
933
|
+
background-color var(--duration-fast) var(--timing-ease-out),
|
|
934
|
+
background-image var(--duration-fast) var(--timing-ease-out);
|
|
935
|
+
z-index: var(--z-10);
|
|
936
|
+
|
|
937
|
+
&:focus {
|
|
938
|
+
outline: 3px solid var(--brand-secondary-1);
|
|
939
|
+
outline-offset: 2px;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
&:checked {
|
|
943
|
+
background-color: var(--brand-secondary-3);
|
|
944
|
+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E");
|
|
945
|
+
background-position: center center;
|
|
946
|
+
border-color: var(--brand-secondary-3);
|
|
947
|
+
transform: translateX(var(--spacing-base));
|
|
948
|
+
|
|
949
|
+
&:hover,
|
|
950
|
+
&:focus {
|
|
951
|
+
border-color: var(--brand-secondary-1);
|
|
952
|
+
background-color: var(--brand-secondary-1);
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
&:disabled {
|
|
957
|
+
cursor: not-allowed;
|
|
958
|
+
}
|
|
959
|
+
`,Jo=V`
|
|
960
|
+
opacity: var(--opacity-50);
|
|
961
|
+
cursor: not-allowed;
|
|
962
|
+
|
|
963
|
+
& > :before {
|
|
964
|
+
cursor: not-allowed;
|
|
965
|
+
}
|
|
966
|
+
`,Qo=V`
|
|
967
|
+
align-items: center;
|
|
968
|
+
color: var(--brand-secondary-1);
|
|
969
|
+
display: inline-flex;
|
|
970
|
+
font-weight: var(--fw-bold);
|
|
971
|
+
line-height: 1.25;
|
|
972
|
+
padding-inline: var(--spacing-2xl) 0;
|
|
973
|
+
|
|
974
|
+
&:before {
|
|
975
|
+
border-radius: var(--rounded-full);
|
|
976
|
+
background-color: var(--gray-300);
|
|
977
|
+
content: '';
|
|
978
|
+
cursor: pointer;
|
|
979
|
+
display: block;
|
|
980
|
+
overflow: hidden;
|
|
981
|
+
width: var(--spacing-xl);
|
|
982
|
+
height: var(--spacing-md);
|
|
983
|
+
position: absolute;
|
|
984
|
+
left: 0;
|
|
985
|
+
top: 0;
|
|
986
|
+
}
|
|
987
|
+
`,jo=V`
|
|
988
|
+
color: var(--gray-500);
|
|
989
|
+
font-size: var(--fs-sm);
|
|
990
|
+
padding-inline: var(--spacing-2xl) 0;
|
|
991
|
+
`;var fi=K.forwardRef(({label:o,infoText:r,toggleText:t,children:n,...a},c)=>{let l=r;return r&&t&&(l=a.checked?t:r),e(K.Fragment,null,e("label",{css:[_o,a.disabled?Jo:void 0]},e("input",{type:"checkbox",css:qo,...a,ref:c}),e("span",{css:Qo},o)),l?e("p",{css:jo},l):null,n)});export{pi as AddButton,mt as Button,Ya as ButtonWithMenu,Kn as Callout,w as Caption,C as ErrorMessage,ca as Heading,x as Icon,ht as IconsProvider,ke as Input,Ut as InputComboBox,en as InputInlineSelect,nn as InputKeywordSearch,dn as InputSelect,vn as InputToggle,T as Label,xa as Link,Br as LoadingIcon,Jn as LoadingIndicator,ta as LoadingOverlay,Ge as Menu,Ve as MenuContext,An as MenuItem,ma as Paragraph,ka as ScrollableList,Da as ScrollableListItem,ri as ShortcutContext,Yo as ShortcutRevealer,fi as Switch,wn as Textarea,Yr as Theme,tt as UniformBadge,it as UniformLogo,rr as breakpoints,k as input,R as inputError,Y as inputSelect,b as labelText,oe as mq,X as scrollbarStyles,he as useIconContext,Ae as useMenuContext};
|