@uniformdev/design-system 13.0.1-alpha.132 → 13.0.1-alpha.278
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 +103 -88
- package/dist/index.d.ts +35 -1
- package/dist/index.js +108 -93
- package/package.json +16 -12
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e}from"@emotion/react";import*as m from"react";import
|
|
1
|
+
import{jsx as e}from"@emotion/react";import*as m from"react";import bo from"react";var Jo=({disableReset:o=!1})=>e(bo.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 */
|
|
@@ -163,14 +163,18 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
163
163
|
display: block;
|
|
164
164
|
vertical-align: middle;
|
|
165
165
|
}
|
|
166
|
-
|
|
166
|
+
|
|
167
|
+
pre {
|
|
168
|
+
white-space: pre;
|
|
169
|
+
}
|
|
170
|
+
`}}));import{css as b}from"@emotion/react";var S=b`
|
|
167
171
|
position: relative;
|
|
168
|
-
`,
|
|
172
|
+
`,h=b`
|
|
169
173
|
display: flex;
|
|
170
174
|
font-weight: var(--fw-bold);
|
|
171
175
|
margin: 0 0 var(--spacing-xs);
|
|
172
176
|
align-items: center;
|
|
173
|
-
`,
|
|
177
|
+
`,M=b`
|
|
174
178
|
appearance: none;
|
|
175
179
|
background-color: var(--white);
|
|
176
180
|
border: 1px solid var(--gray-400);
|
|
@@ -200,23 +204,23 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
200
204
|
color: var(--gray-300);
|
|
201
205
|
border-color: var(--gray-300);
|
|
202
206
|
}
|
|
203
|
-
`,
|
|
207
|
+
`,I=b`
|
|
204
208
|
border-color: var(--brand-secondary-5);
|
|
205
|
-
`,
|
|
209
|
+
`,z=b`
|
|
206
210
|
align-items: center;
|
|
207
211
|
display: flex;
|
|
208
212
|
position: absolute;
|
|
209
213
|
inset: 0 var(--spacing-base) 0 auto;
|
|
210
214
|
pointer-event: one;
|
|
211
|
-
`,
|
|
215
|
+
`,E=b`
|
|
212
216
|
padding-right: var(--spacing-2xl);
|
|
213
|
-
`,
|
|
217
|
+
`,Z=b`
|
|
214
218
|
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");
|
|
215
219
|
background-position: right var(--spacing-sm) center;
|
|
216
220
|
background-repeat: no-repeat;
|
|
217
221
|
background-size: 1rem;
|
|
218
222
|
padding-right: var(--spacing-xl);
|
|
219
|
-
`,
|
|
223
|
+
`,U=b`
|
|
220
224
|
color: var(--brand-secondary-1);
|
|
221
225
|
height: 1.25rem;
|
|
222
226
|
width: 1.25rem;
|
|
@@ -270,7 +274,9 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
270
274
|
padding-left: var(--spacing-lg);
|
|
271
275
|
margin-top: -0.5rem;
|
|
272
276
|
line-height: 1.15;
|
|
273
|
-
|
|
277
|
+
`,Q=b`
|
|
278
|
+
${M}
|
|
279
|
+
`;import{css as ho}from"@emotion/react";var A=ho`
|
|
274
280
|
@supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
|
|
275
281
|
/*
|
|
276
282
|
#d1d5db = bg-gray-300
|
|
@@ -296,15 +302,15 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
296
302
|
&::-webkit-scrollbar-thumb:hover {
|
|
297
303
|
background: var(--gray-500);
|
|
298
304
|
}
|
|
299
|
-
`;import{css as
|
|
305
|
+
`;import{css as D}from"@emotion/react";var H=D`
|
|
300
306
|
display: block;
|
|
301
|
-
`,
|
|
307
|
+
`,V=D`
|
|
302
308
|
background: transparent;
|
|
303
309
|
color: var(--brand-secondary-1);
|
|
304
|
-
`,
|
|
310
|
+
`,O=D`
|
|
305
311
|
background: var(--brand-secondary-1);
|
|
306
312
|
color: var(--white);
|
|
307
|
-
`;var
|
|
313
|
+
`;var ar=({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:[H,o==="dark"?O:V],...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 lr=({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:[H,o==="dark"?O:V]},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 ne from"react";import{Button as yo}from"reakit/Button";import{css as R}from"@emotion/react";var X=R`
|
|
308
314
|
align-items: center;
|
|
309
315
|
border: 1px solid transparent;
|
|
310
316
|
cursor: pointer;
|
|
@@ -328,7 +334,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
328
334
|
&:disabled {
|
|
329
335
|
cursor: not-allowed;
|
|
330
336
|
}
|
|
331
|
-
`,
|
|
337
|
+
`,j=R`
|
|
332
338
|
background: var(--brand-secondary-1);
|
|
333
339
|
color: var(--white);
|
|
334
340
|
|
|
@@ -336,7 +342,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
336
342
|
background: var(--gray-500);
|
|
337
343
|
color: var(--white);
|
|
338
344
|
}
|
|
339
|
-
`,
|
|
345
|
+
`,ee=R`
|
|
340
346
|
background: var(--brand-secondary-5);
|
|
341
347
|
color: var(--white);
|
|
342
348
|
|
|
@@ -344,7 +350,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
344
350
|
background: var(--gray-500);
|
|
345
351
|
color: var(--white);
|
|
346
352
|
}
|
|
347
|
-
`,
|
|
353
|
+
`,oe=R`
|
|
348
354
|
background: var(--brand-secondary-2);
|
|
349
355
|
color: var(--brand-secondary-1);
|
|
350
356
|
|
|
@@ -352,7 +358,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
352
358
|
background: var(--brand-secondary-2);
|
|
353
359
|
color: var(--gray-400);
|
|
354
360
|
}
|
|
355
|
-
`,
|
|
361
|
+
`,re=R`
|
|
356
362
|
background: transparent;
|
|
357
363
|
color: var(--brand-secondary-3);
|
|
358
364
|
|
|
@@ -365,7 +371,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
365
371
|
border-color: var(--gray-400);
|
|
366
372
|
color: var(--gray-400);
|
|
367
373
|
}
|
|
368
|
-
`,
|
|
374
|
+
`,te=R`
|
|
369
375
|
background: var(--brand-secondary-3);
|
|
370
376
|
color: var(--white);
|
|
371
377
|
|
|
@@ -373,10 +379,10 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
373
379
|
background: var(--gray-500);
|
|
374
380
|
color: var(--white);
|
|
375
381
|
}
|
|
376
|
-
`;var
|
|
382
|
+
`;var fr=ne.forwardRef(({buttonType:o="primary",size:r="md",children:a,...t},n)=>{let l={primary:j,secondary:ee,ghost:re,unimportant:oe,tertiary:te},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(yo,{"data-testid":"uniform-button",ref:n,css:[X,l[o],p[r]],...t},a)});import Po from"react";import{createContext as xo,useContext as wo,useEffect as Co,useState as ae}from"react";import{paramCase as Io}from"param-case";var ie=xo({iconsMap:{},isLoading:!0});function se(){return wo(ie)}function wr({children:o}){let[r,a]=ae(!0),[t,n]=ae({});return Co(()=>{import("react-icons/cg").then(l=>{let p=Object.entries(l).reduce((d,[u,f])=>{if(u==="default")return d;let v=So(u);return{...d,[v]:f}},{});n(p),a(!1)})},[]),e(ie.Provider,{value:{iconsMap:t,isLoading:r}},o)}function So(o){return Io(o.replace("Cg",""))}import{css as T}from"@emotion/react";var Mo={sm:"640px",md:"768px",lg:"1025px",xl:"1280px","2xl":"1536px"},le=o=>`@media (min-width: ${Mo[o]})`;var ce=T`
|
|
377
383
|
display: hidden;
|
|
378
384
|
|
|
379
|
-
${
|
|
385
|
+
${le("sm")} {
|
|
380
386
|
display: block;
|
|
381
387
|
}
|
|
382
388
|
|
|
@@ -384,30 +390,30 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
384
390
|
display: block;
|
|
385
391
|
vertical-align: middle;
|
|
386
392
|
}
|
|
387
|
-
`,
|
|
393
|
+
`,pe=T`
|
|
388
394
|
color: var(--brand-secondary-3);
|
|
389
|
-
`,
|
|
395
|
+
`,de=T`
|
|
390
396
|
color: var(--brand-secondary-5);
|
|
391
|
-
`,
|
|
397
|
+
`,ue=T`
|
|
392
398
|
color: var(--gray-500);
|
|
393
|
-
`,
|
|
399
|
+
`,me=T`
|
|
394
400
|
color: currentColor;
|
|
395
|
-
`;var
|
|
401
|
+
`;var ko=({icon:o,iconColorClass:r="green",...a})=>{let t=typeof o=="string",{iconsMap:n,isLoading:l}=se(),p={green:pe,gray:ue,red:de,currentColor:me};if(t&&l)return null;let d=t?n[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",...a,css:[ce,p[r]]})},ge=Po.memo(ko);import{css as Lo}from"@emotion/react";var fe=Lo`
|
|
396
402
|
color: var(--gray-500);
|
|
397
403
|
display: block;
|
|
398
404
|
font-size: var(--fs-base);
|
|
399
405
|
margin: var(--spacing-sm) 0;
|
|
400
406
|
max-width: var(--prose);
|
|
401
|
-
`;var
|
|
407
|
+
`;var y=({children:o})=>e("small",{css:fe},o);import{css as To}from"@emotion/react";var ve=To`
|
|
402
408
|
align-items: center;
|
|
403
409
|
color: var(--brand-secondary-5);
|
|
404
410
|
display: flex;
|
|
405
411
|
gap: var(--spacing-sm);
|
|
406
412
|
margin: var(--spacing-xs) 0;
|
|
407
|
-
`;var
|
|
413
|
+
`;var x=({message:o})=>o?e("span",{css:ve},e("svg",{width:"12",height:"12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{clipPath:"url(#a)"},e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.67 1.125A.77.77 0 0 0 6.005.75a.769.769 0 0 0-.665.375l-5.236 9a.735.735 0 0 0 0 .75.79.79 0 0 0 .664.376h10.473a.749.749 0 0 0 .76-.75.773.773 0 0 0-.095-.377L6.67 1.125Zm.1 8.623H5.24V8.246h1.53v1.502Zm0-2.253H5.24V4.49h1.53v3.005Z",fill:"currentColor"})),e("defs",null,e("clipPath",{id:"a"},e("path",{fill:"#fff",d:"M0 0h12v12H0z"})))),o):null;import*as be from"react";var he=({label:o,icon:r,id:a,caption:t,showLabel:n=!0,errorMessage:l,classNameContainer:p,classNameControl:d,classNameLabel:u,...f})=>e(be.Fragment,null,n?e("label",{htmlFor:a,css:[h,typeof u=="object"?u:void 0],className:typeof u=="string"?u:""},o):null,e("div",{css:[S,typeof p=="object"?p:void 0],className:typeof p=="string"?p:""},e("input",{id:a,css:[M,typeof d=="object"?d:void 0,l?I:void 0,r?E:""],"aria-label":n?void 0:o,className:typeof d=="string"?d:"",...f}),r?e("div",{css:z},r):null),t?e(y,null,t):null,l?e(x,{message:l}):null);import Bo from"react-select";function Nr(o){return e(Bo,{...o,styles:{...o.styles,singleValue:(r,a)=>{var t,n;return{...r,...(n=(t=o.styles)==null?void 0:t.singleValue)==null?void 0:n.call(t,r,a),color:"#828282"}},valueContainer:(r,a)=>{var t,n;return{...r,...(n=(t=o.styles)==null?void 0:t.valueContainer)==null?void 0:n.call(t,r,a),padding:"var(--spacing-base)"}},input:(r,a)=>{var t,n;return{...r,...(n=(t=o.styles)==null?void 0:t.input)==null?void 0:n.call(t,r,a),margin:"0",padding:"0","& > input":{boxShadow:"none !important"}}},control:(r,a)=>({...r,border:a.isFocused?"1px solid transparent":"1px solid var(--gray-400)",outline:a.isFocused?"1px solid var(--brand-secondary-1)":"none",outlineOffset:0,boxShadow:"none","&:hover":{boxShadow:"none"}})}})}import{css as zo}from"@emotion/react";import*as Se from"react";import{useState as Eo,useRef as Ho}from"react";import{css as B}from"@emotion/react";var ye=B`
|
|
408
414
|
margin-inline: auto;
|
|
409
415
|
max-width: fit-content;
|
|
410
|
-
`,
|
|
416
|
+
`,xe=B`
|
|
411
417
|
align-items: center;
|
|
412
418
|
background: var(--brand-secondary-3);
|
|
413
419
|
border: 2px solid var(--brand-secondary-3);
|
|
@@ -430,7 +436,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
430
436
|
&:focus {
|
|
431
437
|
outline: 2px solid var(--brand-secondary-1);
|
|
432
438
|
}
|
|
433
|
-
`,
|
|
439
|
+
`,we=B`
|
|
434
440
|
background: var(--white);
|
|
435
441
|
border: 1px solid var(--brand-secondary-3);
|
|
436
442
|
border-top: none;
|
|
@@ -440,7 +446,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
440
446
|
position: absolute;
|
|
441
447
|
inset: auto 0;
|
|
442
448
|
transform: translateY(-0.2rem);
|
|
443
|
-
`,
|
|
449
|
+
`,Ce=B`
|
|
444
450
|
cursor: pointer;
|
|
445
451
|
display: block;
|
|
446
452
|
font-size: var(--fs-sm);
|
|
@@ -455,23 +461,23 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
455
461
|
&:hover {
|
|
456
462
|
background: var(--gray-50);
|
|
457
463
|
}
|
|
458
|
-
`,
|
|
464
|
+
`,Ie=B`
|
|
459
465
|
position: absolute;
|
|
460
466
|
overflow: hidden;
|
|
461
467
|
height: 1px;
|
|
462
468
|
width: 1px;
|
|
463
469
|
clip: rect(0, 0, 0, 0);
|
|
464
470
|
padding: 0;
|
|
465
|
-
`;import{CgChevronDown as
|
|
471
|
+
`;import{CgChevronDown as Vo}from"react-icons/cg";var jr=({classNameContainer:o,options:r,value:a,onChange:t,disabled:n,...l})=>{var v;let[p,d]=Eo(!1),u=Ho(null);Se.useEffect(()=>{let g=C=>{u.current&&!u.current.contains(C.target)&&d(!1)};return document.addEventListener("mousedown",g),()=>{document.removeEventListener("mousedown",g)}},[u]);let f=r.find(g=>g.value===a);return e("div",{ref:u,css:o?zo`
|
|
466
472
|
max-width: fit-content;
|
|
467
473
|
${typeof o=="object"?o:void 0}
|
|
468
|
-
`:
|
|
474
|
+
`:ye,className:typeof o=="string"?o:""},e("button",{type:"button","aria-controls":`and-or-${l.id}`,"aria-expanded":p,css:xe,onClick:()=>{n||d(g=>!g)},disabled:n,...l},e("span",null,(v=f==null?void 0:f.label)!=null?v:a),n?null:e(ge,{icon:Vo,iconColorClass:"currentColor"})),e("div",{id:`and-or-${l.id}`,css:[we,p?void 0:Ie],"aria-hidden":!p},r.map(g=>e("button",{key:g.value,type:"button",css:Ce,onClick:()=>{t(g),d(C=>!C)}},g.label))))};var tt=({onSearchTextChanged:o,disabled:r=!1,placeholder:a="Keyword search",inputFieldName:t="keywordSearch",disabledFieldSubmission:n=!1,value:l})=>e(he,{type:"text",name:t,placeholder:a,showLabel:!1,value:l,icon:e("svg",{width:"26",height:"24",viewBox:"0 0 26 24",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",css:U},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:u=>{o(u.currentTarget.value)},onKeyPress:u=>{u.key==="Enter"&&n&&u.preventDefault()},disabled:r,"aria-label":a});var lt=({label:o,defaultOption:r,options:a,caption:t,errorMessage:n,showLabel:l=!0,labelCta:p,classNameContainer:d,classNameControl:u,classNameLabel:f,...v})=>e("div",{css:[S,typeof d=="object"?d:void 0],className:typeof d=="string"?d:""},l?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":l?void 0:o,css:[M,Z,n?I:void 0,typeof u=="object"?u:void 0],className:typeof u=="string"?u:"",...v},r?e("option",{value:""},r):null,a.map((g,C)=>e("option",{key:C,value:g.label,...g}))),t?e(y,null,t):null,n?e(x,{message:n}):null);var ut=({label:o,type:r,disabled:a,checked:t,name:n,caption:l,errorMessage:p,...d})=>e("label",{css:[Y,a?q:void 0]},e("input",{type:r,css:K,checked:t,name:n,disabled:a,...d}),e("span",{css:_},o),l||p?e("span",{css:J},l?e(y,null,l):null,p?e(x,{message:p}):null):null);import*as Me from"react";var bt=({label:o,icon:r,id:a,caption:t,showLabel:n=!0,errorMessage:l,...p})=>e(Me.Fragment,null,n?e("label",{htmlFor:a,css:[h]},o):null,e("div",{css:[S]},e("textarea",{id:a,css:[Q,l?I:void 0,r?E:""],"aria-label":n?void 0:o,...p}),r?e("div",{css:z},r):null),t?e(y,null,t):null,l?e(x,{message:l}):null);import*as P from"react";import{useMenuState as Go,Menu as Fo,MenuButton as Zo}from"reakit/Menu";import{css as Oo}from"@emotion/react";var Re=Oo`
|
|
469
475
|
border: 1px solid var(--gray-500);
|
|
470
476
|
border-radius: var(--rounded-base);
|
|
471
477
|
outline: none;
|
|
472
478
|
overflow: hidden;
|
|
473
479
|
z-index: 50;
|
|
474
|
-
`;var
|
|
480
|
+
`;var Pe=P.createContext({}),ke=()=>P.useContext(Pe),Rt=({menuLabel:o,menuTrigger:r,placement:a="auto",children:t})=>{let n=Go({placement:a});return e(Pe.Provider,{value:n},e(Zo,{...n,ref:r.ref,...r.props},l=>P.cloneElement(r,l)),e(Fo,{...n,"aria-label":o,css:Re},t))};import*as Ee from"react";import{MenuItem as Be}from"reakit";import{css as Le}from"@emotion/react";var $=Le`
|
|
475
481
|
background: var(--white);
|
|
476
482
|
border-top: 1px solid var(--gray-500);
|
|
477
483
|
color: var(--brand-secondary-1);
|
|
@@ -496,7 +502,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
496
502
|
&:hover {
|
|
497
503
|
background: var(--gray-200);
|
|
498
504
|
}
|
|
499
|
-
`,
|
|
505
|
+
`,Te=Le`
|
|
500
506
|
align-items: center;
|
|
501
507
|
display: flex;
|
|
502
508
|
justify-content: space-between;
|
|
@@ -507,7 +513,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
507
513
|
width: var(--spacing-base);
|
|
508
514
|
height: var(--spacing-base);
|
|
509
515
|
}
|
|
510
|
-
`;var
|
|
516
|
+
`;var Ht=Ee.forwardRef(({children:o,className:r,hideMenuOnClick:a=!0,icon:t,...n},l)=>{let p=ke(),d=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(Be,{ref:l,"data-testid":"uniform-menuItem",...p,...n,css:$},f=>{let v=a?d(f):f,g=o(v);return t?ze(g,t):g});let u=a?d(n):n;return e(Be,{ref:l,...p,...u,css:$},t?ze(o,t):o)});function ze(o,r){return e("span",{css:Te},o," ",r)}import{css as c}from"@emotion/react";var He=({...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"})),Ve=({...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"})),Oe=({...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"})),Ge=({...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"})),N=({...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"})),Fe=({...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`
|
|
511
517
|
--caution-desc: rgb(161, 98, 7);
|
|
512
518
|
--caution-icon: rgb(250, 204, 21);
|
|
513
519
|
--caution-title: rgb(133, 77, 14);
|
|
@@ -535,21 +541,21 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
535
541
|
|
|
536
542
|
border-radius: var(--rounded-base);
|
|
537
543
|
padding: var(--spacing-base);
|
|
538
|
-
`,
|
|
544
|
+
`,Ae=k`
|
|
539
545
|
display: flex;
|
|
540
546
|
gap: var(--spacing-base);
|
|
541
|
-
`,
|
|
547
|
+
`,De=k`
|
|
542
548
|
flex-shrink: 0;
|
|
543
|
-
|
|
549
|
+
`,$e=k`
|
|
544
550
|
font-size: var(--fs-sm);
|
|
545
551
|
font-weight: var(--fw-bold);
|
|
546
552
|
margin: 0 0 var(--spacing-sm);
|
|
547
|
-
`,
|
|
553
|
+
`,Ne=k`
|
|
548
554
|
font-size: var(--fs-sm);
|
|
549
|
-
|
|
555
|
+
`,We=k`
|
|
550
556
|
width: 1.25rem;
|
|
551
557
|
height: 1.25rem;
|
|
552
|
-
`;var
|
|
558
|
+
`;var Ao={caution:{icon:N,descriptionColor:c`
|
|
553
559
|
color: var(--caution-desc);
|
|
554
560
|
`,iconColor:c`
|
|
555
561
|
color: var(--caution-icon);
|
|
@@ -557,7 +563,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
557
563
|
color: var(--caution-title);
|
|
558
564
|
`,containerColor:c`
|
|
559
565
|
background-color: var(--caution-container);
|
|
560
|
-
`},danger:{icon:
|
|
566
|
+
`},danger:{icon:Ve,descriptionColor:c`
|
|
561
567
|
color: var(--danger-desc);
|
|
562
568
|
`,iconColor:c`
|
|
563
569
|
color: var(--danger-icon);
|
|
@@ -565,7 +571,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
565
571
|
color: var(--danger-title);
|
|
566
572
|
`,containerColor:c`
|
|
567
573
|
background-color: var(--danger-container);
|
|
568
|
-
`},error:{icon:
|
|
574
|
+
`},error:{icon:N,descriptionColor:c`
|
|
569
575
|
color: var(--danger-desc);
|
|
570
576
|
`,iconColor:c`
|
|
571
577
|
color: var(--danger-icon);
|
|
@@ -573,7 +579,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
573
579
|
color: var(--danger-title);
|
|
574
580
|
`,containerColor:c`
|
|
575
581
|
background-color: var(--danger-container);
|
|
576
|
-
`},info:{icon:
|
|
582
|
+
`},info:{icon:He,descriptionColor:c`
|
|
577
583
|
color: var(--info-desc);
|
|
578
584
|
`,iconColor:c`
|
|
579
585
|
color: var(--info-icon);
|
|
@@ -581,7 +587,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
581
587
|
color: var(--info-title);
|
|
582
588
|
`,containerColor:c`
|
|
583
589
|
background-color: var(--info-container);
|
|
584
|
-
`},note:{icon:
|
|
590
|
+
`},note:{icon:Oe,descriptionColor:c`
|
|
585
591
|
color: var(--note-desc);
|
|
586
592
|
`,iconColor:c`
|
|
587
593
|
color: var(--note-icon);
|
|
@@ -589,7 +595,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
589
595
|
color: var(--note-title);
|
|
590
596
|
`,containerColor:c`
|
|
591
597
|
background-color: var(--note-container);
|
|
592
|
-
`},success:{icon:
|
|
598
|
+
`},success:{icon:Fe,descriptionColor:c`
|
|
593
599
|
color: var(--success-desc);
|
|
594
600
|
`,iconColor:c`
|
|
595
601
|
color: var(--success-icon);
|
|
@@ -597,7 +603,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
597
603
|
color: var(--success-title);
|
|
598
604
|
`,containerColor:c`
|
|
599
605
|
background-color: var(--success-container);
|
|
600
|
-
`},tip:{icon:
|
|
606
|
+
`},tip:{icon:Ge,descriptionColor:c`
|
|
601
607
|
color: var(--success-desc);
|
|
602
608
|
`,iconColor:c`
|
|
603
609
|
color: var(--success-icon);
|
|
@@ -605,7 +611,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
605
611
|
color: var(--success-title);
|
|
606
612
|
`,containerColor:c`
|
|
607
613
|
background-color: var(--success-container);
|
|
608
|
-
`}},
|
|
614
|
+
`}},Nt=({type:o="info",title:r,children:a,className:t})=>{let n=Ao[o];if(!n)return null;let l=n.icon;return e("div",{"data-testid":"sdk-ui-callout",css:[Ze,n.containerColor,typeof t=="object"?t:""],className:`${typeof t=="string"?t:""}`},e("div",{css:Ae},e("div",{css:De},e(l,{css:[We,n.iconColor]})),e("div",null,r?e("h3",{css:[$e,n.titleColor]},r):null,a?e("div",{css:[Ne,n.descriptionColor]},a):null)))};import{css as Ue,keyframes as Do}from"@emotion/react";var $o=Do`
|
|
609
615
|
0%, 100% {
|
|
610
616
|
opacity: 1.0;
|
|
611
617
|
transform: translateY(0);
|
|
@@ -621,14 +627,14 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
621
627
|
opacity: 0.2;
|
|
622
628
|
transform: translateY(-5px);
|
|
623
629
|
}
|
|
624
|
-
`,Ue
|
|
630
|
+
`,Ye=Ue`
|
|
625
631
|
display: inline-flex;
|
|
626
632
|
justify-content: center;
|
|
627
|
-
`,
|
|
633
|
+
`,G=Ue`
|
|
628
634
|
background-color: var(--gray-700);
|
|
629
635
|
display: block;
|
|
630
636
|
border-radius: var(--rounded-full);
|
|
631
|
-
animation: ${
|
|
637
|
+
animation: ${$o} 0.75s infinite ease-in-out;
|
|
632
638
|
width: 8px;
|
|
633
639
|
height: 8px;
|
|
634
640
|
margin: 0 var(--spacing-xs);
|
|
@@ -645,62 +651,72 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
645
651
|
&:nth-of-type(3) {
|
|
646
652
|
animation-delay: 0.6s;
|
|
647
653
|
}
|
|
648
|
-
`;var
|
|
654
|
+
`;var _t=()=>e("div",{css:Ye,role:"alert"},e("span",{css:G}),e("span",{css:G}),e("span",{css:G}));import{css as No}from"@emotion/react";import{css as L}from"@emotion/react";var Ke=L`
|
|
649
655
|
align-items: center;
|
|
650
656
|
position: absolute;
|
|
651
657
|
inset: 0 0;
|
|
652
658
|
overflow: hidden;
|
|
653
659
|
z-index: 9999;
|
|
654
660
|
justify-content: center;
|
|
655
|
-
`,
|
|
661
|
+
`,_e=L`
|
|
656
662
|
display: flex;
|
|
657
|
-
`,
|
|
663
|
+
`,qe=L`
|
|
658
664
|
display: none;
|
|
659
|
-
`,
|
|
665
|
+
`,Je=L`
|
|
660
666
|
background: var(--white);
|
|
661
667
|
opacity: 0.5;
|
|
662
668
|
position: absolute;
|
|
663
669
|
inset: 0 0;
|
|
664
|
-
`,
|
|
670
|
+
`,Qe=L`
|
|
665
671
|
align-items: center;
|
|
666
672
|
display: flex;
|
|
667
673
|
flex-direction: column;
|
|
668
|
-
`,
|
|
674
|
+
`,Xe=L`
|
|
669
675
|
color: var(--gray-500);
|
|
670
676
|
margin: var(--spacing-base) 0 0;
|
|
671
|
-
`;var
|
|
677
|
+
`;var en=({isActive:o,statusMessage:r})=>e("div",{role:"alert",css:[Ke,o?_e:qe],"aria-hidden":!o},e("div",{css:Je}),e("div",{css:No`
|
|
672
678
|
position: relative;
|
|
673
|
-
`},e("div",{css:
|
|
679
|
+
`},e("div",{css:Qe},e(Wo,{height:128,width:128}),r?e("div",{css:Xe},r):null))),Wo=({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 je=w`
|
|
674
680
|
font-family: var(--ff-heading);
|
|
675
|
-
font-size: clamp(1.
|
|
676
|
-
font-weight: var(--
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
681
|
+
font-size: clamp(1.75rem, var(--fluid-font-base), 3.25rem);
|
|
682
|
+
font-weight: var(--fw-bold);
|
|
683
|
+
margin-bottom: var(--spacing-base);
|
|
684
|
+
`,eo=w`
|
|
685
|
+
font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
|
|
686
|
+
`,oo=w`
|
|
680
687
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
681
|
-
`,
|
|
688
|
+
`,ro=w`
|
|
682
689
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.35rem);
|
|
683
|
-
`,
|
|
690
|
+
`,to=w`
|
|
684
691
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.25rem);
|
|
685
|
-
`,
|
|
692
|
+
`,no=w`
|
|
686
693
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
687
|
-
`,
|
|
694
|
+
`,ao=w`
|
|
688
695
|
font-weight: var(--fw-bold);
|
|
689
696
|
font-family: var(--ff-base);
|
|
690
|
-
|
|
697
|
+
margin-bottom: var(--spacing-base);
|
|
698
|
+
`,io=w`
|
|
691
699
|
line-height: 1.35;
|
|
692
|
-
`;var
|
|
700
|
+
`;var an=({level:o=2,children:r})=>{let a=`h${o}`,t={h1:je,h2:eo,h3:oo,h4:ro,h5:to,h6:no},n=a.includes("h1")?void 0:ao;return e(a,{css:[t[a],n,io]},r)};import{css as Uo}from"@emotion/react";var so=Uo`
|
|
701
|
+
font-size: var(--fs-base);
|
|
702
|
+
line-height: 1.5;
|
|
703
|
+
margin-bottom: var(--spacing-base);
|
|
704
|
+
|
|
705
|
+
&:last-of-type {
|
|
706
|
+
margin-bottom: 0;
|
|
707
|
+
}
|
|
708
|
+
`;var dn=({className:o,children:r})=>e("p",{css:[so,typeof o=="object"?o:void 0],className:typeof o=="string"?o:""},r);import{css as Yo}from"@emotion/react";import{css as lo}from"@emotion/react";var co=lo`
|
|
693
709
|
position: relative;
|
|
694
|
-
`,
|
|
710
|
+
`,po=lo`
|
|
695
711
|
background: var(--gray-50);
|
|
696
712
|
border-top: 1px solid var(--gray-200);
|
|
697
713
|
border-bottom: 1px solid var(--gray-200);
|
|
698
714
|
max-height: 24rem;
|
|
699
715
|
overflow-y: auto;
|
|
700
716
|
padding: var(--spacing-sm);
|
|
701
|
-
`;var
|
|
702
|
-
${
|
|
703
|
-
`},o):null,e("div",{css:[
|
|
717
|
+
`;var hn=({label:o,children:r})=>e("div",{css:co},o?e("span",{css:Yo`
|
|
718
|
+
${h}
|
|
719
|
+
`},o):null,e("div",{css:[po,A]},r));import{css as W}from"@emotion/react";var uo=W`
|
|
704
720
|
align-items: center;
|
|
705
721
|
background: var(--white);
|
|
706
722
|
border-radius: var(--rounded-base);
|
|
@@ -708,17 +724,16 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
708
724
|
border: 2px solid var(--gray-200);
|
|
709
725
|
display: flex;
|
|
710
726
|
padding: var(--spacing-3);
|
|
711
|
-
margin-block: var(--spacing-sm);
|
|
727
|
+
margin-block: 0 var(--spacing-sm);
|
|
712
728
|
min-height: 52px;
|
|
713
729
|
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
714
730
|
|
|
715
|
-
&:first-of-type,
|
|
716
731
|
&:last-of-type {
|
|
717
732
|
margin-block: 0;
|
|
718
733
|
}
|
|
719
|
-
`,
|
|
734
|
+
`,mo=W`
|
|
720
735
|
border-color: var(--brand-secondary-3);
|
|
721
|
-
`,
|
|
736
|
+
`,go=W`
|
|
722
737
|
align-items: center;
|
|
723
738
|
display: flex;
|
|
724
739
|
justify-content: space-between;
|
|
@@ -728,7 +743,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
728
743
|
&:focus {
|
|
729
744
|
outline: none;
|
|
730
745
|
}
|
|
731
|
-
`;import{css as
|
|
746
|
+
`;import{css as vo}from"@emotion/react";import{keyframes as F}from"@emotion/react";var In=F`
|
|
732
747
|
0%,
|
|
733
748
|
100% {
|
|
734
749
|
transform: scale(1);
|
|
@@ -738,7 +753,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
738
753
|
transform: scale(1.15);
|
|
739
754
|
opacity: 1;
|
|
740
755
|
}
|
|
741
|
-
`,
|
|
756
|
+
`,fo=F`
|
|
742
757
|
0% {
|
|
743
758
|
opacity: 0;
|
|
744
759
|
transform: translateY(10px);
|
|
@@ -747,7 +762,7 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
747
762
|
opacity: 1;
|
|
748
763
|
transform: translateY(0);
|
|
749
764
|
}
|
|
750
|
-
`,
|
|
765
|
+
`,Sn=F`
|
|
751
766
|
0% {
|
|
752
767
|
opacity: 1;
|
|
753
768
|
transform: translateY(0);
|
|
@@ -756,17 +771,17 @@ import{jsx as e}from"@emotion/react";import*as m from"react";import mo from"reac
|
|
|
756
771
|
opacity: 0;
|
|
757
772
|
transform: translateY(10px);
|
|
758
773
|
}
|
|
759
|
-
`,
|
|
774
|
+
`,Mn=F`
|
|
760
775
|
0% {
|
|
761
776
|
opacity: 0;
|
|
762
777
|
}
|
|
763
778
|
100% {
|
|
764
779
|
opacity: 1;
|
|
765
780
|
}
|
|
766
|
-
`;var
|
|
781
|
+
`;var Tn=({buttonText:o,active:r,...a})=>e("div",{css:[uo,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:go,className:"flex items-center justify-between w-full outline-none focus:outline-none",type:"button",...a},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:vo`
|
|
767
782
|
color: var(--brand-secondary-3);
|
|
768
783
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
769
|
-
${r?
|
|
770
|
-
animation: ${
|
|
784
|
+
${r?vo`
|
|
785
|
+
animation: ${fo} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
771
786
|
`:"opacity: 0;"}
|
|
772
|
-
`},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"}))));export{
|
|
787
|
+
`},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"}))));export{fr as Button,Nt as Callout,y as Caption,x as ErrorMessage,an as Heading,ge as Icon,wr as IconsProvider,he as Input,Nr as InputComboBox,jr as InputInlineSelect,tt as InputKeywordSearch,lt as InputSelect,ut as InputToggle,Wo as LoadingIcon,_t as LoadingIndicator,en as LoadingOverlay,Rt as Menu,Pe as MenuContext,Ht as MenuItem,dn as Paragraph,hn as ScrollableList,Tn as ScrollableListItem,bt as Textarea,Jo as Theme,ar as UniformBadge,lr as UniformLogo,Mo as breakpoints,M as input,I as inputError,Z as inputSelect,h as labelText,le as mq,A as scrollbarStyles,se as useIconContext,ke as useMenuContext};
|
package/dist/index.d.ts
CHANGED
|
@@ -262,6 +262,27 @@ declare type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
|
|
|
262
262
|
*/
|
|
263
263
|
declare const InputToggle: ({ label, type, disabled, checked, name, caption, errorMessage, ...props }: InputToggleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
264
264
|
|
|
265
|
+
declare type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
266
|
+
label?: string;
|
|
267
|
+
caption?: string;
|
|
268
|
+
icon?: React$1.ReactElement;
|
|
269
|
+
showLabel?: boolean;
|
|
270
|
+
errorMessage?: string;
|
|
271
|
+
capture?: boolean | 'user' | 'environment';
|
|
272
|
+
};
|
|
273
|
+
/**
|
|
274
|
+
* Input Component
|
|
275
|
+
*
|
|
276
|
+
* @component
|
|
277
|
+
* @param {string} label - sets the label value
|
|
278
|
+
* @param {string} caption - sets help text value
|
|
279
|
+
* @param {boolean} showLabel - sets whether to hide the label and use aria-label on the input itself
|
|
280
|
+
* @param {React.ReactElement} icon - add an input icon to the input field
|
|
281
|
+
* @param {string} errorMessage - sets shows the the error message value
|
|
282
|
+
* @example - <Input label="my label" id="some-id" name="some-name" caption="some help text" errorMessage={hasError ? 'something went wrong' : undefined} />
|
|
283
|
+
*/
|
|
284
|
+
declare const Textarea: ({ label, icon, id, caption, showLabel, errorMessage, ...props }: TextareaProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
285
|
+
|
|
265
286
|
interface MenuProps extends MenuHTMLProps {
|
|
266
287
|
menuTrigger: React$1.ReactElement & React$1.RefAttributes<any>;
|
|
267
288
|
menuLabel: string;
|
|
@@ -368,6 +389,19 @@ declare type HeadingProps = {
|
|
|
368
389
|
*/
|
|
369
390
|
declare const Heading: React$1.FC<HeadingProps>;
|
|
370
391
|
|
|
392
|
+
declare type ParagraphProps = {
|
|
393
|
+
children: React$1.ReactNode;
|
|
394
|
+
className?: SerializedStyles | string;
|
|
395
|
+
};
|
|
396
|
+
/**
|
|
397
|
+
* Component for generic paragraph tags
|
|
398
|
+
* @component
|
|
399
|
+
* @param {number} className - allows user to set overriding class names or emotion styles
|
|
400
|
+
* @param {children} children - adds child elements to the paragraph tag
|
|
401
|
+
* @example <Paragraph>This is the text that was be inside the paragraph tag.</Paragraph>
|
|
402
|
+
*/
|
|
403
|
+
declare const Paragraph: ({ className, children }: ParagraphProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
404
|
+
|
|
371
405
|
declare type ScrollableListProps = {
|
|
372
406
|
label?: string;
|
|
373
407
|
children?: React$1.ReactNode;
|
|
@@ -405,4 +439,4 @@ declare const breakpoints: breakpointsProps;
|
|
|
405
439
|
*/
|
|
406
440
|
declare const mq: (size: breakpointSizeProps) => string;
|
|
407
441
|
|
|
408
|
-
export { Button, ButtonProps, ButtonSizeProps, ButtonThemeProps, Callout, CalloutProps, CalloutType, Caption, ChildFunction, ComboBoxGroupBase, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, Icon, IconColorProps, IconProps, IconsProvider, InlineSelectInputOption, InlineSelectInputProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, LevelProps, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Theme, ThemeProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, input, inputError, inputSelect, labelText, mq, scrollbarStyles, useIconContext, useMenuContext };
|
|
442
|
+
export { Button, ButtonProps, ButtonSizeProps, ButtonThemeProps, Callout, CalloutProps, CalloutType, Caption, ChildFunction, ComboBoxGroupBase, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, Icon, IconColorProps, IconProps, IconsProvider, InlineSelectInputOption, InlineSelectInputProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, LevelProps, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuProps, Paragraph, ParagraphProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, Textarea, TextareaProps, Theme, ThemeProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, input, inputError, inputSelect, labelText, mq, scrollbarStyles, useIconContext, useMenuContext };
|