@uniformdev/design-system 13.0.1-alpha.96 → 16.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +246 -103
- package/dist/index.d.ts +374 -107
- package/dist/index.js +225 -82
- package/package.json +20 -16
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e}from"@emotion/react";import*as
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as u from"react";import So from"react";var ar=({disableReset:o=!1})=>e(So.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",{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 */
|
|
@@ -36,7 +36,13 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
36
36
|
/* Revert the 'white-space' property for textarea elements on Safari */
|
|
37
37
|
textarea {
|
|
38
38
|
white-space: revert;
|
|
39
|
-
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Allow dragging elements with a draggable=true attribute */
|
|
42
|
+
[draggable="true"] {
|
|
43
|
+
-webkit-user-drag: element;
|
|
44
|
+
}
|
|
45
|
+
`}}),e("style",{dangerouslySetInnerHTML:{__html:`
|
|
40
46
|
:root {
|
|
41
47
|
--brand-primary-1: #438fd5; /* bright blue */
|
|
42
48
|
--brand-primary-2: #f4220b; /* red */
|
|
@@ -125,6 +131,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
125
131
|
|
|
126
132
|
/* opacity */
|
|
127
133
|
--opacity-75: 0.75;
|
|
134
|
+
--opacity-100: 1.0;
|
|
128
135
|
|
|
129
136
|
/* animation function times */
|
|
130
137
|
--timing-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -144,7 +151,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
144
151
|
line-height: 1.5rem;
|
|
145
152
|
}
|
|
146
153
|
|
|
147
|
-
a {
|
|
154
|
+
a, button {
|
|
148
155
|
cursor: pointer;
|
|
149
156
|
}
|
|
150
157
|
|
|
@@ -163,21 +170,27 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
163
170
|
display: block;
|
|
164
171
|
vertical-align: middle;
|
|
165
172
|
}
|
|
166
|
-
|
|
173
|
+
|
|
174
|
+
pre {
|
|
175
|
+
white-space: pre;
|
|
176
|
+
}
|
|
177
|
+
`}}));var Mo={sm:"640px",md:"768px",lg:"1025px",xl:"1280px","2xl":"1536px"},K=o=>`@media (min-width: ${Mo[o]})`;import{css as b}from"@emotion/react";var S=b`
|
|
167
178
|
position: relative;
|
|
168
|
-
`,
|
|
169
|
-
display:
|
|
179
|
+
`,h=b`
|
|
180
|
+
display: flex;
|
|
170
181
|
font-weight: var(--fw-bold);
|
|
171
182
|
margin: 0 0 var(--spacing-xs);
|
|
172
|
-
|
|
183
|
+
align-items: center;
|
|
184
|
+
`,M=b`
|
|
173
185
|
appearance: none;
|
|
174
186
|
background-color: var(--white);
|
|
175
187
|
border: 1px solid var(--gray-400);
|
|
176
188
|
border-radius: var(--rounded-md);
|
|
177
189
|
color: var(--gray-700);
|
|
178
|
-
padding: var(--spacing-base);
|
|
190
|
+
padding: var(--spacing-base) var(--spacing-md) var(--spacing-base) var(--spacing-base);
|
|
179
191
|
width: 100%;
|
|
180
192
|
position: relative;
|
|
193
|
+
white-space: nowrap;
|
|
181
194
|
transition: background var(--duration-fast) var(--timing-ease-out),
|
|
182
195
|
border-color var(--duration-fast) var(--timing-ease-out),
|
|
183
196
|
color var(--duration-fast) var(--timing-ease-out);
|
|
@@ -198,34 +211,34 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
198
211
|
color: var(--gray-300);
|
|
199
212
|
border-color: var(--gray-300);
|
|
200
213
|
}
|
|
201
|
-
`,
|
|
214
|
+
`,I=b`
|
|
202
215
|
border-color: var(--brand-secondary-5);
|
|
203
|
-
`,
|
|
216
|
+
`,H=b`
|
|
204
217
|
align-items: center;
|
|
205
218
|
display: flex;
|
|
206
219
|
position: absolute;
|
|
207
220
|
inset: 0 var(--spacing-base) 0 auto;
|
|
208
221
|
pointer-event: one;
|
|
209
|
-
`,
|
|
222
|
+
`,O=b`
|
|
210
223
|
padding-right: var(--spacing-2xl);
|
|
211
|
-
`,
|
|
224
|
+
`,Z=b`
|
|
212
225
|
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");
|
|
213
226
|
background-position: right var(--spacing-sm) center;
|
|
214
227
|
background-repeat: no-repeat;
|
|
215
228
|
background-size: 1rem;
|
|
216
229
|
padding-right: var(--spacing-xl);
|
|
217
|
-
`,
|
|
230
|
+
`,_=b`
|
|
218
231
|
color: var(--brand-secondary-1);
|
|
219
232
|
height: 1.25rem;
|
|
220
233
|
width: 1.25rem;
|
|
221
|
-
`,
|
|
234
|
+
`,q=b`
|
|
222
235
|
align-items: center;
|
|
223
236
|
cursor: pointer;
|
|
224
237
|
display: inline-flex;
|
|
225
238
|
gap: var(--spacing-sm);
|
|
226
239
|
margin: var(--spacing-sm) 0;
|
|
227
240
|
flex-wrap: wrap;
|
|
228
|
-
`,
|
|
241
|
+
`,J=b`
|
|
229
242
|
border: 1px solid var(--brand-secondary-1);
|
|
230
243
|
background: var(--white);
|
|
231
244
|
width: var(--spacing-md);
|
|
@@ -256,19 +269,21 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
256
269
|
color: var(--gray-300);
|
|
257
270
|
border-color: var(--gray-300);
|
|
258
271
|
}
|
|
259
|
-
`,
|
|
260
|
-
font-weight: var(--
|
|
261
|
-
`,
|
|
272
|
+
`,Q=b`
|
|
273
|
+
font-weight: var(--fw-medium);
|
|
274
|
+
`,X=b`
|
|
262
275
|
cursor: not-allowed;
|
|
263
276
|
color: var(--gray-400);
|
|
264
|
-
`,
|
|
277
|
+
`,j=b`
|
|
265
278
|
display: flex;
|
|
266
279
|
flex-direction: column;
|
|
267
280
|
flex-basis: 100%;
|
|
268
281
|
padding-left: var(--spacing-lg);
|
|
269
282
|
margin-top: -0.5rem;
|
|
270
283
|
line-height: 1.15;
|
|
271
|
-
|
|
284
|
+
`,ee=b`
|
|
285
|
+
${M}
|
|
286
|
+
`;import{css as Ro}from"@emotion/react";var F=Ro`
|
|
272
287
|
@supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
|
|
273
288
|
/*
|
|
274
289
|
#d1d5db = bg-gray-300
|
|
@@ -294,7 +309,15 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
294
309
|
&::-webkit-scrollbar-thumb:hover {
|
|
295
310
|
background: var(--gray-500);
|
|
296
311
|
}
|
|
297
|
-
`;import
|
|
312
|
+
`;import{css as N}from"@emotion/react";var V=N`
|
|
313
|
+
display: block;
|
|
314
|
+
`,G=N`
|
|
315
|
+
background: transparent;
|
|
316
|
+
color: var(--brand-secondary-1);
|
|
317
|
+
`,A=N`
|
|
318
|
+
background: var(--brand-secondary-1);
|
|
319
|
+
color: var(--white);
|
|
320
|
+
`;var fr=({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:[V,o==="dark"?A:G],...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 hr=({theme:o="light"})=>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:[V,o==="dark"?A:G]},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 se from"react";import{Button as Po}from"reakit/Button";import{css as R}from"@emotion/react";var oe=R`
|
|
298
321
|
align-items: center;
|
|
299
322
|
border: 1px solid transparent;
|
|
300
323
|
cursor: pointer;
|
|
@@ -318,7 +341,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
318
341
|
&:disabled {
|
|
319
342
|
cursor: not-allowed;
|
|
320
343
|
}
|
|
321
|
-
`,
|
|
344
|
+
`,re=R`
|
|
322
345
|
background: var(--brand-secondary-1);
|
|
323
346
|
color: var(--white);
|
|
324
347
|
|
|
@@ -326,7 +349,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
326
349
|
background: var(--gray-500);
|
|
327
350
|
color: var(--white);
|
|
328
351
|
}
|
|
329
|
-
`,
|
|
352
|
+
`,te=R`
|
|
330
353
|
background: var(--brand-secondary-5);
|
|
331
354
|
color: var(--white);
|
|
332
355
|
|
|
@@ -334,7 +357,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
334
357
|
background: var(--gray-500);
|
|
335
358
|
color: var(--white);
|
|
336
359
|
}
|
|
337
|
-
`,
|
|
360
|
+
`,ne=R`
|
|
338
361
|
background: var(--brand-secondary-2);
|
|
339
362
|
color: var(--brand-secondary-1);
|
|
340
363
|
|
|
@@ -342,7 +365,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
342
365
|
background: var(--brand-secondary-2);
|
|
343
366
|
color: var(--gray-400);
|
|
344
367
|
}
|
|
345
|
-
`,
|
|
368
|
+
`,ae=R`
|
|
346
369
|
background: transparent;
|
|
347
370
|
color: var(--brand-secondary-3);
|
|
348
371
|
|
|
@@ -355,7 +378,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
355
378
|
border-color: var(--gray-400);
|
|
356
379
|
color: var(--gray-400);
|
|
357
380
|
}
|
|
358
|
-
`,
|
|
381
|
+
`,ie=R`
|
|
359
382
|
background: var(--brand-secondary-3);
|
|
360
383
|
color: var(--white);
|
|
361
384
|
|
|
@@ -363,10 +386,10 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
363
386
|
background: var(--gray-500);
|
|
364
387
|
color: var(--white);
|
|
365
388
|
}
|
|
366
|
-
`;var
|
|
389
|
+
`;var Mr=se.forwardRef(({buttonType:o="primary",size:r="md",children:n,...a},t)=>{let c={primary:re,secondary:te,ghost:ae,unimportant:ne,tertiary:ie},p={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(Po,{ref:t,css:[oe,c[o],p[r]],...a},n)});import Ho from"react";import{createContext as To,useContext as ko,useEffect as Lo,useState as ce}from"react";import{paramCase as Bo}from"param-case";var le=To({iconsMap:{},isLoading:!0});function pe(){return ko(le)}function Lr({children:o}){let[r,n]=ce(!0),[a,t]=ce({});return Lo(()=>{import("react-icons/cg").then(c=>{let p=Object.entries(c).reduce((m,[d,f])=>{if(d==="default")return m;let v=zo(d);return{...m,[v]:f}},{});t(p),n(!1)})},[]),e(le.Provider,{value:{iconsMap:a,isLoading:r}},o)}function zo(o){var r,n;return(n=(r=Bo(o.replace("Cg","")).match(/[a-z]+|\d+/gi))==null?void 0:r.join("-"))!=null?n:""}import{css as B}from"@emotion/react";var de=B`
|
|
367
390
|
display: hidden;
|
|
368
391
|
|
|
369
|
-
${
|
|
392
|
+
${K("sm")} {
|
|
370
393
|
display: block;
|
|
371
394
|
}
|
|
372
395
|
|
|
@@ -374,30 +397,30 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
374
397
|
display: block;
|
|
375
398
|
vertical-align: middle;
|
|
376
399
|
}
|
|
377
|
-
`,
|
|
400
|
+
`,ue=B`
|
|
378
401
|
color: var(--brand-secondary-3);
|
|
379
|
-
`,
|
|
402
|
+
`,me=B`
|
|
380
403
|
color: var(--brand-secondary-5);
|
|
381
|
-
`,
|
|
404
|
+
`,ge=B`
|
|
382
405
|
color: var(--gray-500);
|
|
383
|
-
`,
|
|
406
|
+
`,fe=B`
|
|
384
407
|
color: currentColor;
|
|
385
|
-
`;var
|
|
408
|
+
`;var Oo=({icon:o,iconColor:r="green",size:n="1.5rem",...a})=>{let t=typeof o=="string",{iconsMap:c,isLoading:p}=pe(),m={green:ue,gray:ge,red:me,currentColor:fe};if(t&&p)return null;let d=t?c[o]:o;return t&&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:n,...a,css:[de,m[r]]})},P=Ho.memo(Oo);import{css as Vo}from"@emotion/react";var ve=Vo`
|
|
386
409
|
color: var(--gray-500);
|
|
387
410
|
display: block;
|
|
388
|
-
font-size: var(--fs-
|
|
389
|
-
margin: var(--spacing-
|
|
411
|
+
font-size: var(--fs-sm);
|
|
412
|
+
margin: var(--spacing-xs) 0;
|
|
390
413
|
max-width: var(--prose);
|
|
391
|
-
`;var
|
|
392
|
-
align-items:
|
|
414
|
+
`;var y=({children:o})=>e("small",{css:ve},o);import{MdWarning as Ao}from"react-icons/md";import{css as Go}from"@emotion/react";var be=Go`
|
|
415
|
+
align-items: baseline;
|
|
393
416
|
color: var(--brand-secondary-5);
|
|
394
417
|
display: flex;
|
|
395
418
|
gap: var(--spacing-sm);
|
|
396
419
|
margin: var(--spacing-xs) 0;
|
|
397
|
-
`;var
|
|
420
|
+
`;var x=({message:o})=>o?e("span",{css:be},e(P,{icon:Ao,size:16,iconColor:"currentColor"}),o):null;import*as he from"react";var ye=({label:o,icon:r,id:n,caption:a,showLabel:t=!0,errorMessage:c,classNameContainer:p,classNameControl:m,classNameLabel:d,...f})=>e(he.Fragment,null,t?e("label",{htmlFor:n,css:[h,typeof d=="object"?d:void 0],className:typeof d=="string"?d:""},o):null,e("div",{css:[S,typeof p=="object"?p:void 0],className:typeof p=="string"?p:""},e("input",{id:n,css:[M,typeof m=="object"?m:void 0,c?I:void 0,r?O:""],"aria-label":t?void 0:o,className:typeof m=="string"?m:"",...f}),r?e("div",{css:H},r):null),a?e(y,null,a):null,c?e(x,{message:c}):null);import Do from"react-select";function jr(o){return e(Do,{...o,styles:{...o.styles,singleValue:(r,n)=>{var a,t;return{...r,...(t=(a=o.styles)==null?void 0:a.singleValue)==null?void 0:t.call(a,r,n),color:"#828282"}},valueContainer:(r,n)=>{var a,t;return{...r,...(t=(a=o.styles)==null?void 0:a.valueContainer)==null?void 0:t.call(a,r,n),padding:"var(--spacing-base)"}},input:(r,n)=>{var a,t;return{...r,...(t=(a=o.styles)==null?void 0:a.input)==null?void 0:t.call(a,r,n),margin:"0",padding:"0","& > input":{boxShadow:"none !important"}}},control:(r,n)=>({...r,border:n.isFocused?"1px solid transparent":"1px solid var(--gray-400)",outline:n.isFocused?"1px solid var(--brand-secondary-1)":"none",outlineOffset:0,boxShadow:"none","&:hover":{boxShadow:"none"}})}})}import{css as Wo}from"@emotion/react";import*as Me from"react";import{useState as Zo,useRef as Fo}from"react";import{css as z}from"@emotion/react";var xe=z`
|
|
398
421
|
margin-inline: auto;
|
|
399
422
|
max-width: fit-content;
|
|
400
|
-
`,
|
|
423
|
+
`,we=z`
|
|
401
424
|
align-items: center;
|
|
402
425
|
background: var(--brand-secondary-3);
|
|
403
426
|
border: 2px solid var(--brand-secondary-3);
|
|
@@ -420,7 +443,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
420
443
|
&:focus {
|
|
421
444
|
outline: 2px solid var(--brand-secondary-1);
|
|
422
445
|
}
|
|
423
|
-
`,
|
|
446
|
+
`,Ce=z`
|
|
424
447
|
background: var(--white);
|
|
425
448
|
border: 1px solid var(--brand-secondary-3);
|
|
426
449
|
border-top: none;
|
|
@@ -430,7 +453,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
430
453
|
position: absolute;
|
|
431
454
|
inset: auto 0;
|
|
432
455
|
transform: translateY(-0.2rem);
|
|
433
|
-
`,
|
|
456
|
+
`,Ie=z`
|
|
434
457
|
cursor: pointer;
|
|
435
458
|
display: block;
|
|
436
459
|
font-size: var(--fs-sm);
|
|
@@ -445,23 +468,23 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
445
468
|
&:hover {
|
|
446
469
|
background: var(--gray-50);
|
|
447
470
|
}
|
|
448
|
-
`,
|
|
471
|
+
`,Se=z`
|
|
449
472
|
position: absolute;
|
|
450
473
|
overflow: hidden;
|
|
451
474
|
height: 1px;
|
|
452
475
|
width: 1px;
|
|
453
476
|
clip: rect(0, 0, 0, 0);
|
|
454
477
|
padding: 0;
|
|
455
|
-
`;import{CgChevronDown as
|
|
478
|
+
`;import{CgChevronDown as No}from"react-icons/cg";var lt=({classNameContainer:o,options:r,value:n,onChange:a,disabled:t,...c})=>{var v;let[p,m]=Zo(!1),d=Fo(null);Me.useEffect(()=>{let g=C=>{d.current&&!d.current.contains(C.target)&&m(!1)};return document.addEventListener("mousedown",g),()=>{document.removeEventListener("mousedown",g)}},[d]);let f=r.find(g=>g.value===n);return e("div",{ref:d,css:o?Wo`
|
|
456
479
|
max-width: fit-content;
|
|
457
480
|
${typeof o=="object"?o:void 0}
|
|
458
|
-
`:
|
|
481
|
+
`:xe,className:typeof o=="string"?o:""},e("button",{type:"button","aria-controls":`and-or-${c.id}`,"aria-expanded":p,css:we,onClick:()=>{t||m(g=>!g)},disabled:t,...c},e("span",null,(v=f==null?void 0:f.label)!=null?v:n),t?null:e(P,{icon:No,iconColor:"currentColor",size:24})),e("div",{id:`and-or-${c.id}`,css:[Ce,p?void 0:Se],"aria-hidden":!p},r.map(g=>e("button",{key:g.value,type:"button",css:Ie,onClick:()=>{a(g),m(C=>!C)}},g.label))))};var mt=({onSearchTextChanged:o,disabled:r=!1,placeholder:n="Keyword search",inputFieldName:a="keywordSearch",disabledFieldSubmission:t=!1,value:c})=>e(ye,{type:"text",name:a,placeholder:n,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:_},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"&&t&&d.preventDefault()},disabled:r,"aria-label":n});var ht=({label:o,defaultOption:r,options:n,caption:a,errorMessage:t,showLabel:c=!0,labelCta:p,classNameContainer:m,classNameControl:d,classNameLabel:f,...v})=>e("div",{css:[S,typeof m=="object"?m:void 0],className:typeof m=="string"?m:""},c?e("label",{htmlFor:v.id,css:[h,typeof f=="object"?f:void 0],className:typeof f=="string"?f:""},o,p):null,e("select",{title:o,"aria-label":c?void 0:o,css:[M,Z,t?I:void 0,typeof d=="object"?d:void 0],className:typeof d=="string"?d:"",...v},r?e("option",{value:""},r):null,n.map((g,C)=>e("option",{key:C,value:g.label,...g}))),a?e(y,null,a):null,t?e(x,{message:t}):null);var Ct=({label:o,type:r,disabled:n,checked:a,name:t,caption:c,errorMessage:p,...m})=>e("label",{css:[q,n?X:void 0]},e("input",{type:r,css:J,checked:a,name:t,disabled:n,...m}),e("span",{css:Q},o),c||p?e("span",{css:j},c?e(y,null,c):null,p?e(x,{message:p}):null):null);import*as Re from"react";var Pt=({label:o,icon:r,id:n,caption:a,showLabel:t=!0,errorMessage:c,...p})=>e(Re.Fragment,null,t?e("label",{htmlFor:n,css:[h]},o):null,e("div",{css:[S]},e("textarea",{id:n,css:[ee,c?I:void 0,r?O:""],"aria-label":t?void 0:o,...p}),r?e("div",{css:H},r):null),a?e(y,null,a):null,c?e(x,{message:c}):null);import*as T from"react";import{useMenuState as Uo,Menu as Yo,MenuButton as Ko}from"reakit/Menu";import{css as $o}from"@emotion/react";var Pe=$o`
|
|
459
482
|
border: 1px solid var(--gray-500);
|
|
460
483
|
border-radius: var(--rounded-base);
|
|
461
484
|
outline: none;
|
|
462
485
|
overflow: hidden;
|
|
463
486
|
z-index: 50;
|
|
464
|
-
`;var
|
|
487
|
+
`;var Te=T.createContext({}),ke=()=>T.useContext(Te),Le=({menuLabel:o,menuTrigger:r,placement:n="auto",children:a})=>{let t=Uo({placement:n});return e(Te.Provider,{value:t},e(Ko,{...t,ref:r.ref,...r.props},c=>T.cloneElement(r,c)),e(Yo,{...t,"aria-label":o,css:Pe},a))};import*as Oe from"react";import{MenuItem as Ee}from"reakit";import{css as Be}from"@emotion/react";var $=Be`
|
|
465
488
|
background: var(--white);
|
|
466
489
|
border-top: 1px solid var(--gray-500);
|
|
467
490
|
color: var(--brand-secondary-1);
|
|
@@ -486,7 +509,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
486
509
|
&:hover {
|
|
487
510
|
background: var(--gray-200);
|
|
488
511
|
}
|
|
489
|
-
`,
|
|
512
|
+
`,ze=Be`
|
|
490
513
|
align-items: center;
|
|
491
514
|
display: flex;
|
|
492
515
|
justify-content: space-between;
|
|
@@ -497,7 +520,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
497
520
|
width: var(--spacing-base);
|
|
498
521
|
height: var(--spacing-base);
|
|
499
522
|
}
|
|
500
|
-
`;var
|
|
523
|
+
`;var Nt=Oe.forwardRef(({children:o,className:r,hideMenuOnClick:n=!0,icon:a,...t},c)=>{let p=ke(),m=f=>{let v={...f};if(v.onClick){let g=v.onClick;v.onClick=C=>{p.hide(),g(C)}}return v};if(typeof o=="function")return e(Ee,{ref:c,"data-testid":"uniform-menuItem",...p,...t,css:$},f=>{let v=n?m(f):f,g=o(v);return a?He(g,a):g});let d=n?m(t):t;return e(Ee,{ref:c,...p,...d,css:$},a?He(o,a):o)});function He(o,r){return e("span",{css:ze},o," ",r)}import{css as l}from"@emotion/react";var Ve=({...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"})),Ge=({...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"})),Ae=({...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"})),De=({...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"})),U=({...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"})),We=({...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 k}from"@emotion/react";var Ze=k`
|
|
501
524
|
--caution-desc: rgb(161, 98, 7);
|
|
502
525
|
--caution-icon: rgb(250, 204, 21);
|
|
503
526
|
--caution-title: rgb(133, 77, 14);
|
|
@@ -525,77 +548,77 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
525
548
|
|
|
526
549
|
border-radius: var(--rounded-base);
|
|
527
550
|
padding: var(--spacing-base);
|
|
528
|
-
`,
|
|
551
|
+
`,Fe=k`
|
|
529
552
|
display: flex;
|
|
530
553
|
gap: var(--spacing-base);
|
|
531
|
-
`,
|
|
554
|
+
`,Ne=k`
|
|
532
555
|
flex-shrink: 0;
|
|
533
|
-
|
|
556
|
+
`,$e=k`
|
|
534
557
|
font-size: var(--fs-sm);
|
|
535
558
|
font-weight: var(--fw-bold);
|
|
536
559
|
margin: 0 0 var(--spacing-sm);
|
|
537
|
-
`,
|
|
560
|
+
`,Ue=k`
|
|
538
561
|
font-size: var(--fs-sm);
|
|
539
|
-
`,
|
|
562
|
+
`,Ye=k`
|
|
540
563
|
width: 1.25rem;
|
|
541
564
|
height: 1.25rem;
|
|
542
|
-
`;var
|
|
565
|
+
`;var _o={caution:{icon:U,descriptionColor:l`
|
|
543
566
|
color: var(--caution-desc);
|
|
544
|
-
`,iconColor:
|
|
567
|
+
`,iconColor:l`
|
|
545
568
|
color: var(--caution-icon);
|
|
546
|
-
`,titleColor:
|
|
569
|
+
`,titleColor:l`
|
|
547
570
|
color: var(--caution-title);
|
|
548
|
-
`,containerColor:
|
|
571
|
+
`,containerColor:l`
|
|
549
572
|
background-color: var(--caution-container);
|
|
550
|
-
`},danger:{icon:
|
|
573
|
+
`},danger:{icon:Ge,descriptionColor:l`
|
|
551
574
|
color: var(--danger-desc);
|
|
552
|
-
`,iconColor:
|
|
575
|
+
`,iconColor:l`
|
|
553
576
|
color: var(--danger-icon);
|
|
554
|
-
`,titleColor:
|
|
577
|
+
`,titleColor:l`
|
|
555
578
|
color: var(--danger-title);
|
|
556
|
-
`,containerColor:
|
|
579
|
+
`,containerColor:l`
|
|
557
580
|
background-color: var(--danger-container);
|
|
558
|
-
`},error:{icon:
|
|
581
|
+
`},error:{icon:U,descriptionColor:l`
|
|
559
582
|
color: var(--danger-desc);
|
|
560
|
-
`,iconColor:
|
|
583
|
+
`,iconColor:l`
|
|
561
584
|
color: var(--danger-icon);
|
|
562
|
-
`,titleColor:
|
|
585
|
+
`,titleColor:l`
|
|
563
586
|
color: var(--danger-title);
|
|
564
|
-
`,containerColor:
|
|
587
|
+
`,containerColor:l`
|
|
565
588
|
background-color: var(--danger-container);
|
|
566
|
-
`},info:{icon:
|
|
589
|
+
`},info:{icon:Ve,descriptionColor:l`
|
|
567
590
|
color: var(--info-desc);
|
|
568
|
-
`,iconColor:
|
|
591
|
+
`,iconColor:l`
|
|
569
592
|
color: var(--info-icon);
|
|
570
|
-
`,titleColor:
|
|
593
|
+
`,titleColor:l`
|
|
571
594
|
color: var(--info-title);
|
|
572
|
-
`,containerColor:
|
|
595
|
+
`,containerColor:l`
|
|
573
596
|
background-color: var(--info-container);
|
|
574
|
-
`},note:{icon:
|
|
597
|
+
`},note:{icon:Ae,descriptionColor:l`
|
|
575
598
|
color: var(--note-desc);
|
|
576
|
-
`,iconColor:
|
|
599
|
+
`,iconColor:l`
|
|
577
600
|
color: var(--note-icon);
|
|
578
|
-
`,titleColor:
|
|
601
|
+
`,titleColor:l`
|
|
579
602
|
color: var(--note-title);
|
|
580
|
-
`,containerColor:
|
|
603
|
+
`,containerColor:l`
|
|
581
604
|
background-color: var(--note-container);
|
|
582
|
-
`},success:{icon:
|
|
605
|
+
`},success:{icon:We,descriptionColor:l`
|
|
583
606
|
color: var(--success-desc);
|
|
584
|
-
`,iconColor:
|
|
607
|
+
`,iconColor:l`
|
|
585
608
|
color: var(--success-icon);
|
|
586
|
-
`,titleColor:
|
|
609
|
+
`,titleColor:l`
|
|
587
610
|
color: var(--success-title);
|
|
588
|
-
`,containerColor:
|
|
611
|
+
`,containerColor:l`
|
|
589
612
|
background-color: var(--success-container);
|
|
590
|
-
`},tip:{icon:
|
|
613
|
+
`},tip:{icon:De,descriptionColor:l`
|
|
591
614
|
color: var(--success-desc);
|
|
592
|
-
`,iconColor:
|
|
615
|
+
`,iconColor:l`
|
|
593
616
|
color: var(--success-icon);
|
|
594
|
-
`,titleColor:
|
|
617
|
+
`,titleColor:l`
|
|
595
618
|
color: var(--success-title);
|
|
596
|
-
`,containerColor:
|
|
619
|
+
`,containerColor:l`
|
|
597
620
|
background-color: var(--success-container);
|
|
598
|
-
`}},
|
|
621
|
+
`}},Xt=({type:o="info",title:r,children:n,className:a})=>{let t=_o[o];if(!t)return null;let c=t.icon;return e("div",{"data-testid":"sdk-ui-callout",css:[Ze,t.containerColor,typeof a=="object"?a:""],className:`${typeof a=="string"?a:""}`},e("div",{css:Fe},e("div",{css:Ne},e(c,{css:[Ye,t.iconColor]})),e("div",null,r?e("h3",{css:[$e,t.titleColor]},r):null,n?e("div",{css:[Ue,t.descriptionColor]},n):null)))};import{css as Ke,keyframes as qo}from"@emotion/react";var Jo=qo`
|
|
599
622
|
0%, 100% {
|
|
600
623
|
opacity: 1.0;
|
|
601
624
|
transform: translateY(0);
|
|
@@ -611,14 +634,14 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
611
634
|
opacity: 0.2;
|
|
612
635
|
transform: translateY(-5px);
|
|
613
636
|
}
|
|
614
|
-
`,
|
|
637
|
+
`,_e=Ke`
|
|
615
638
|
display: inline-flex;
|
|
616
639
|
justify-content: center;
|
|
617
|
-
`,
|
|
640
|
+
`,D=Ke`
|
|
618
641
|
background-color: var(--gray-700);
|
|
619
642
|
display: block;
|
|
620
643
|
border-radius: var(--rounded-full);
|
|
621
|
-
animation: ${
|
|
644
|
+
animation: ${Jo} 0.75s infinite ease-in-out;
|
|
622
645
|
width: 8px;
|
|
623
646
|
height: 8px;
|
|
624
647
|
margin: 0 var(--spacing-xs);
|
|
@@ -635,48 +658,168 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import Xe from"reac
|
|
|
635
658
|
&:nth-of-type(3) {
|
|
636
659
|
animation-delay: 0.6s;
|
|
637
660
|
}
|
|
638
|
-
`;var
|
|
661
|
+
`;var tn=()=>e("div",{css:_e,role:"alert"},e("span",{css:D}),e("span",{css:D}),e("span",{css:D}));import{css as Qo}from"@emotion/react";import{css as L}from"@emotion/react";var qe=L`
|
|
639
662
|
align-items: center;
|
|
640
663
|
position: absolute;
|
|
641
664
|
inset: 0 0;
|
|
642
665
|
overflow: hidden;
|
|
643
666
|
z-index: 9999;
|
|
644
667
|
justify-content: center;
|
|
645
|
-
`,
|
|
668
|
+
`,Je=L`
|
|
646
669
|
display: flex;
|
|
647
|
-
`,
|
|
670
|
+
`,Qe=L`
|
|
648
671
|
display: none;
|
|
649
|
-
`,
|
|
672
|
+
`,Xe=L`
|
|
650
673
|
background: var(--white);
|
|
651
674
|
opacity: 0.5;
|
|
652
675
|
position: absolute;
|
|
653
676
|
inset: 0 0;
|
|
654
|
-
`,
|
|
677
|
+
`,je=L`
|
|
655
678
|
align-items: center;
|
|
656
679
|
display: flex;
|
|
657
680
|
flex-direction: column;
|
|
658
|
-
`,
|
|
681
|
+
`,eo=L`
|
|
659
682
|
color: var(--gray-500);
|
|
660
683
|
margin: var(--spacing-base) 0 0;
|
|
661
|
-
`;var
|
|
684
|
+
`;var pn=({isActive:o,statusMessage:r})=>e("div",{role:"alert",css:[qe,o?Je:Qe],"aria-hidden":!o},e("div",{css:Xe}),e("div",{css:Qo`
|
|
662
685
|
position: relative;
|
|
663
|
-
`},e("div",{css:
|
|
686
|
+
`},e("div",{css:je},e(Xo,{height:128,width:128}),r?e("div",{css:eo},r):null))),Xo=({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 w}from"@emotion/react";var oo=w`
|
|
664
687
|
font-family: var(--ff-heading);
|
|
665
|
-
font-size: clamp(1.
|
|
666
|
-
font-weight: var(--
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
688
|
+
font-size: clamp(1.75rem, var(--fluid-font-base), 3.25rem);
|
|
689
|
+
font-weight: var(--fw-bold);
|
|
690
|
+
margin-bottom: var(--spacing-base);
|
|
691
|
+
`,ro=w`
|
|
692
|
+
font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
|
|
693
|
+
`,to=w`
|
|
670
694
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
671
|
-
`,
|
|
695
|
+
`,no=w`
|
|
672
696
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.35rem);
|
|
673
|
-
`,
|
|
697
|
+
`,ao=w`
|
|
674
698
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.25rem);
|
|
675
|
-
`,
|
|
699
|
+
`,io=w`
|
|
676
700
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
677
|
-
`,
|
|
701
|
+
`,so=w`
|
|
678
702
|
font-weight: var(--fw-bold);
|
|
679
703
|
font-family: var(--ff-base);
|
|
680
|
-
|
|
704
|
+
margin-bottom: var(--spacing-base);
|
|
705
|
+
`,co=w`
|
|
681
706
|
line-height: 1.35;
|
|
682
|
-
`;var
|
|
707
|
+
`;var fn=({level:o=2,children:r})=>{let n=`h${o}`,a={h1:oo,h2:ro,h3:to,h4:no,h5:ao,h6:io},t=n.includes("h1")?void 0:so;return e(n,{css:[a[n],t,co]},r)};import{css as jo}from"@emotion/react";var lo=jo`
|
|
708
|
+
font-size: var(--fs-base);
|
|
709
|
+
line-height: 1.5;
|
|
710
|
+
margin-bottom: var(--spacing-base);
|
|
711
|
+
|
|
712
|
+
&:last-of-type {
|
|
713
|
+
margin-bottom: 0;
|
|
714
|
+
}
|
|
715
|
+
`;var xn=({className:o,children:r})=>e("p",{css:[lo,typeof o=="object"?o:void 0],className:typeof o=="string"?o:""},r);import{css as er}from"@emotion/react";import{css as po}from"@emotion/react";var uo=po`
|
|
716
|
+
position: relative;
|
|
717
|
+
`,mo=po`
|
|
718
|
+
background: var(--gray-50);
|
|
719
|
+
border-top: 1px solid var(--gray-200);
|
|
720
|
+
border-bottom: 1px solid var(--gray-200);
|
|
721
|
+
max-height: 24rem;
|
|
722
|
+
overflow-y: auto;
|
|
723
|
+
padding: var(--spacing-sm);
|
|
724
|
+
`;var Pn=({label:o,children:r})=>e("div",{css:uo},o?e("span",{css:er`
|
|
725
|
+
${h}
|
|
726
|
+
`},o):null,e("div",{css:[mo,F]},r));import{css as Y}from"@emotion/react";var go=Y`
|
|
727
|
+
align-items: center;
|
|
728
|
+
background: var(--white);
|
|
729
|
+
border-radius: var(--rounded-base);
|
|
730
|
+
box-shadow: var(--shadow-base);
|
|
731
|
+
border: 2px solid var(--gray-200);
|
|
732
|
+
display: flex;
|
|
733
|
+
padding: var(--spacing-3);
|
|
734
|
+
margin-block: 0 var(--spacing-sm);
|
|
735
|
+
min-height: 52px;
|
|
736
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
737
|
+
|
|
738
|
+
&:last-of-type {
|
|
739
|
+
margin-block: 0;
|
|
740
|
+
}
|
|
741
|
+
`,fo=Y`
|
|
742
|
+
border-color: var(--brand-secondary-3);
|
|
743
|
+
`,vo=Y`
|
|
744
|
+
align-items: center;
|
|
745
|
+
display: flex;
|
|
746
|
+
justify-content: space-between;
|
|
747
|
+
width: 100%;
|
|
748
|
+
outline: none;
|
|
749
|
+
|
|
750
|
+
&:focus {
|
|
751
|
+
outline: none;
|
|
752
|
+
}
|
|
753
|
+
`;import{css as ho}from"@emotion/react";import{keyframes as W}from"@emotion/react";var zn=W`
|
|
754
|
+
0%,
|
|
755
|
+
100% {
|
|
756
|
+
transform: scale(1);
|
|
757
|
+
opacity: 1;
|
|
758
|
+
}
|
|
759
|
+
50% {
|
|
760
|
+
transform: scale(1.15);
|
|
761
|
+
opacity: 1;
|
|
762
|
+
}
|
|
763
|
+
`,bo=W`
|
|
764
|
+
0% {
|
|
765
|
+
opacity: 0;
|
|
766
|
+
transform: translateY(10px);
|
|
767
|
+
}
|
|
768
|
+
100% {
|
|
769
|
+
opacity: 1;
|
|
770
|
+
transform: translateY(0);
|
|
771
|
+
}
|
|
772
|
+
`,En=W`
|
|
773
|
+
0% {
|
|
774
|
+
opacity: 1;
|
|
775
|
+
transform: translateY(0);
|
|
776
|
+
}
|
|
777
|
+
100% {
|
|
778
|
+
opacity: 0;
|
|
779
|
+
transform: translateY(10px);
|
|
780
|
+
}
|
|
781
|
+
`,Hn=W`
|
|
782
|
+
0% {
|
|
783
|
+
opacity: 0;
|
|
784
|
+
}
|
|
785
|
+
100% {
|
|
786
|
+
opacity: 1;
|
|
787
|
+
}
|
|
788
|
+
`;var Dn=({buttonText:o,active:r,...n})=>e("div",{css:[go,r?fo: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:vo,className:"flex items-center justify-between w-full outline-none focus:outline-none",type:"button",...n},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:ho`
|
|
789
|
+
color: var(--brand-secondary-3);
|
|
790
|
+
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
791
|
+
${r?ho`
|
|
792
|
+
animation: ${bo} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
793
|
+
`:"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 or}from"react-icons/cg";import{css as E}from"@emotion/react";var yo=E`
|
|
795
|
+
align-items: center;
|
|
796
|
+
border: 1px solid transparent;
|
|
797
|
+
color: var(--white);
|
|
798
|
+
display: inline-flex;
|
|
799
|
+
font-size: var(--fs-sm);
|
|
800
|
+
position: relative;
|
|
801
|
+
|
|
802
|
+
&:active {
|
|
803
|
+
opacity: var(--opacity-75);
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
&:hover {
|
|
807
|
+
opacity: var(--opacity-100);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
&:focus {
|
|
811
|
+
border-color: var(--gray-700);
|
|
812
|
+
}
|
|
813
|
+
`,xo=E`
|
|
814
|
+
background: var(--brand-secondary-5);
|
|
815
|
+
`,wo=E`
|
|
816
|
+
background: var(--gray-500);
|
|
817
|
+
`,Co=E`
|
|
818
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
819
|
+
font-weight: var(--fw-medium);
|
|
820
|
+
letter-spacing: 0.025rem;
|
|
821
|
+
line-height: 1.25;
|
|
822
|
+
`,Io=E`
|
|
823
|
+
padding: var(--spacing-sm);
|
|
824
|
+
border-left: 1px solid currentColor;
|
|
825
|
+
`;var Kn=({onButtonClick:o,buttonText:r,disabled:n,children:a,placement:t,...c})=>e("div",{css:[yo,n?wo:xo],"data-test-id":"multioptions-button"},e("button",{type:"button",css:Co,disabled:n,...c,onClick:o,"data-test-id":"multioptions-button-main"},r),e(Le,{menuLabel:"buttonMenu",placement:t,menuTrigger:e("div",{css:Io,"data-test-id":"multioptions-button-call-menu"},e(P,{icon:or,size:24,iconColor:"currentColor"}))},a));export{Mr as Button,Kn as ButtonWithMenu,Xt as Callout,y as Caption,x as ErrorMessage,fn as Heading,P as Icon,Lr as IconsProvider,ye as Input,jr as InputComboBox,lt as InputInlineSelect,mt as InputKeywordSearch,ht as InputSelect,Ct as InputToggle,Xo as LoadingIcon,tn as LoadingIndicator,pn as LoadingOverlay,Le as Menu,Te as MenuContext,Nt as MenuItem,xn as Paragraph,Pn as ScrollableList,Dn as ScrollableListItem,Pt as Textarea,ar as Theme,fr as UniformBadge,hr as UniformLogo,Mo as breakpoints,M as input,I as inputError,Z as inputSelect,h as labelText,K as mq,F as scrollbarStyles,pe as useIconContext,ke as useMenuContext};
|