@worldresources/wri-design-systems 0.0.1 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +23 -3
- package/dist/cjs/index.js +100 -100
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +330 -330
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as a}from"react/jsx-runtime";import n,{useState as i,useEffect as r,Children as o}from"react";import t from"react-dom/client";import{createSystem as d,defaultConfig as c,Switch as s,Icon as p,Button as h,Box as u,Spinner as x,Tabs as b,Collapsible as g,RadioGroup as m,HStack as f,Checkbox as v,Tag as C,Accordion as y,Field as $,Input as w,Textarea as k,Slider as L,For as z,Popover as I,Stack as D,ChakraProvider as B}from"@chakra-ui/react";import F from"@emotion/styled";!function(e,l){void 0===l&&(l={});var a=l.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===a&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n\n*:focus-visible {\n box-shadow: none !important;\n}\n\n.app-container {\n margin-left: 364px;\n transition: margin-left 0.1s;\n padding: 20px;\n}\n\n.app-container.sidebar-closed {\n margin-left: 64px;\n transition: margin-left 0.1s;\n}\n");const V={neutral:{100:{value:"#FFFFFF"},200:{value:"#F6F6F6"},300:{value:"#E7E6E6"},400:{value:"#C9C9C9"},500:{value:"#9B9B9B"},600:{value:"#686767"},700:{value:"#4F4E4E"},800:{value:"#1A1919"},900:{value:"#000000"}},primary:{100:{value:"#FFFBF2"},200:{value:"#FCEFD3"},500:{value:"#F0AB00"},600:{value:"#D49700"},700:{value:"#AD7500"},800:{value:"#5F4205"},900:{value:"#332300"}},secondary:{500:{value:"#3855A3"},600:{value:"#263A71"},700:{value:"#1F2F5C"}},success:{100:{value:"#F3FFF2"},200:{value:"#D3EED1"},300:{value:"#C7E9C0"},500:{value:"#086600"}},warning:{100:{value:"#FEF7E5"},200:{value:"#E3CC8F"},500:{value:"#804600"}},error:{100:{value:"#FFF3F4"},200:{value:"#EDA1A9"},500:{value:"#A80011"}}},A=d(c,{theme:{tokens:{colors:V}}}),M=(e,l)=>A.tokens.getVar(`colors.${e}.${l}`)||V?.[e]?.[l]?.value,T=F.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
|
-
`,
|
|
4
|
+
`,_=F(s.Root)`
|
|
5
5
|
.chakra-switch__control-container {
|
|
6
6
|
width: 42px;
|
|
7
7
|
height: 26px;
|
|
@@ -9,11 +9,11 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
9
9
|
display: flex;
|
|
10
10
|
justify-content: center;
|
|
11
11
|
align-items: center;
|
|
12
|
-
background-color: ${
|
|
12
|
+
background-color: ${M("neutral",600)};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
&[data-state='checked'] .chakra-switch__control-container {
|
|
16
|
-
background-color: ${
|
|
16
|
+
background-color: ${M("primary",700)};
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
&[data-disabled] .chakra-switch__control-container {
|
|
@@ -25,22 +25,22 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
25
25
|
width: 40px;
|
|
26
26
|
display: flex;
|
|
27
27
|
align-items: center;
|
|
28
|
-
background-color: ${
|
|
28
|
+
background-color: ${M("neutral",500)};
|
|
29
29
|
|
|
30
30
|
&:focus-visible,
|
|
31
31
|
&[data-focus-visible] {
|
|
32
32
|
box-shadow: none;
|
|
33
33
|
outline: none;
|
|
34
|
-
outline: 2px solid ${
|
|
34
|
+
outline: 2px solid ${M("primary",700)};
|
|
35
35
|
outline-offset: 3px;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&[data-state='checked'] {
|
|
39
|
-
background-color: ${
|
|
39
|
+
background-color: ${M("primary",500)};
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&[data-disabled] {
|
|
43
|
-
background-color: ${
|
|
43
|
+
background-color: ${M("neutral",300)};
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -49,19 +49,19 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
49
49
|
width: 12px;
|
|
50
50
|
|
|
51
51
|
path {
|
|
52
|
-
fill: ${
|
|
52
|
+
fill: ${M("primary",700)};
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
&:hover,
|
|
57
57
|
&[data-hover] {
|
|
58
58
|
outline: 9px solid
|
|
59
|
-
color-mix(in srgb, ${
|
|
59
|
+
color-mix(in srgb, ${M("primary",500)} 20%, transparent);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&[data-active] {
|
|
63
63
|
outline: 9px solid
|
|
64
|
-
color-mix(in srgb, ${
|
|
64
|
+
color-mix(in srgb, ${M("primary",500)} 40%, transparent);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
&[data-disabled] {
|
|
@@ -70,13 +70,13 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
70
70
|
&[data-state='checked'] {
|
|
71
71
|
svg {
|
|
72
72
|
path {
|
|
73
|
-
fill: ${
|
|
73
|
+
fill: ${M("neutral",500)};
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
`,R=l=>e(s,{...l,children:r("svg",{viewBox:"0 0 16 17",children:[r("g",{clipPath:"url(#clip0_1216_84)",children:[e("path",{d:"M9.78791 8.03125H16V2.21875C16 1.27103 15.229 0.5 14.2812 0.5H7.1875V16.5H14.2812C15.229 16.5 16 15.729 16 14.7812V8.96875H9.78791L10.5502 9.73106C10.7333 9.91413 10.7333 10.2109 10.5502 10.394C10.3672 10.577 10.0704 10.577 9.88731 10.394L8.32481 8.83147C8.14175 8.64841 8.14175 8.35162 8.32481 8.16856L9.88731 6.60606C10.0704 6.423 10.3672 6.423 10.5502 6.60606C10.7333 6.78912 10.7333 7.08591 10.5502 7.26897L9.78791 8.03125Z",fill:"#4F4E4E"}),e("path",{d:"M0 2.21875V14.7812C0 15.729 0.771031 16.5 1.71875 16.5H6.25V0.5H1.71875C0.771031 0.5 0 1.27103 0 2.21875ZM4.375 7.0625H1.875C1.61612 7.0625 1.40625 6.85262 1.40625 6.59375C1.40625 6.33488 1.61612 6.125 1.875 6.125H4.375C4.63387 6.125 4.84375 6.33488 4.84375 6.59375C4.84375 6.85262 4.63387 7.0625 4.375 7.0625ZM4.375 5.1875H1.875C1.61612 5.1875 1.40625 4.97762 1.40625 4.71875C1.40625 4.45988 1.61612 4.25 1.875 4.25H4.375C4.63387 4.25 4.84375 4.45988 4.84375 4.71875C4.84375 4.97762 4.63387 5.1875 4.375 5.1875ZM4.375 2.375C4.63387 2.375 4.84375 2.58488 4.84375 2.84375C4.84375 3.10262 4.63387 3.3125 4.375 3.3125H1.875C1.61612 3.3125 1.40625 3.10262 1.40625 2.84375C1.40625 2.58488 1.61612 2.375 1.875 2.375H4.375Z",fill:"#4F4E4E"})]}),e("defs",{children:e("clipPath",{id:"clip0_1216_84",children:e("rect",{width:"16",height:"16",fill:"white",transform:"translate(0 0.5)"})})})]})}),Z=l=>e(s,{...l,children:r("svg",{viewBox:"0 0 16 17",children:[e("path",{d:"M0 2.21875V14.7812C0 15.729 0.771031 16.5 1.71875 16.5H6.25V0.5H1.71875C0.771031 0.5 0 1.27103 0 2.21875ZM4.375 7.0625H1.875C1.61612 7.0625 1.40625 6.85262 1.40625 6.59375C1.40625 6.33488 1.61612 6.125 1.875 6.125H4.375C4.63387 6.125 4.84375 6.33488 4.84375 6.59375C4.84375 6.85262 4.63387 7.0625 4.375 7.0625ZM4.375 5.1875H1.875C1.61612 5.1875 1.40625 4.97762 1.40625 4.71875C1.40625 4.45988 1.61612 4.25 1.875 4.25H4.375C4.63387 4.25 4.84375 4.45988 4.84375 4.71875C4.84375 4.97762 4.63387 5.1875 4.375 5.1875ZM4.375 2.375C4.63387 2.375 4.84375 2.58488 4.84375 2.84375C4.84375 3.10262 4.63387 3.3125 4.375 3.3125H1.875C1.61612 3.3125 1.40625 3.10262 1.40625 2.84375C1.40625 2.58488 1.61612 2.375 1.875 2.375H4.375Z",fill:"#4F4E4E"}),e("path",{d:"M14.2812 0.5H7.1875V8.03125H12.4621L11.6998 7.26897C11.5168 7.08591 11.5168 6.78912 11.6998 6.60606C11.8829 6.423 12.1797 6.423 12.3627 6.60606L13.9252 8.16856C14.1083 8.35162 14.1083 8.64841 13.9252 8.83147L12.3627 10.394C12.1797 10.577 11.8829 10.577 11.6998 10.394C11.5168 10.2109 11.5168 9.91413 11.6998 9.73106L12.4621 8.96875H7.1875V16.5H14.2812C15.229 16.5 16 15.729 16 14.7812V2.21875C16 1.27103 15.229 0.5 14.2812 0.5Z",fill:"#4F4E4E"})]})}),B=r=>e(s,{...r,children:e("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:e("path",{d:"M4.19632 10.4277L0 6.23139L1.04908 5.18231L4.19632 8.32955L10.9509 1.57495L12 2.62403L4.19632 10.4277Z",fill:"currentColor"})})}),D=r=>e(s,{...r,children:e("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:e("path",{d:"M0 6.75V5.25H12V6.75H0Z",fill:"auto"})})}),A=r=>e(s,{...r,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4.5 7.49997H5.5V4.49997H4.5V7.49997ZM5 3.49997C5.14167 3.49997 5.26042 3.45205 5.35625 3.35622C5.45208 3.26039 5.5 3.14164 5.5 2.99997C5.5 2.8583 5.45208 2.73955 5.35625 2.64372C5.26042 2.54789 5.14167 2.49997 5 2.49997C4.85833 2.49997 4.73958 2.54789 4.64375 2.64372C4.54792 2.73955 4.5 2.8583 4.5 2.99997C4.5 3.14164 4.54792 3.26039 4.64375 3.35622C4.73958 3.45205 4.85833 3.49997 5 3.49997ZM5 9.99997C4.30833 9.99997 3.65833 9.86872 3.05 9.60622C2.44167 9.34372 1.9125 8.98747 1.4625 8.53747C1.0125 8.08747 0.65625 7.5583 0.39375 6.94997C0.13125 6.34164 0 5.69164 0 4.99997C0 4.3083 0.13125 3.6583 0.39375 3.04997C0.65625 2.44164 1.0125 1.91247 1.4625 1.46247C1.9125 1.01247 2.44167 0.656219 3.05 0.393719C3.65833 0.131219 4.30833 -3.05176e-05 5 -3.05176e-05C5.69167 -3.05176e-05 6.34167 0.131219 6.95 0.393719C7.55833 0.656219 8.0875 1.01247 8.5375 1.46247C8.9875 1.91247 9.34375 2.44164 9.60625 3.04997C9.86875 3.6583 10 4.3083 10 4.99997C10 5.69164 9.86875 6.34164 9.60625 6.94997C9.34375 7.5583 8.9875 8.08747 8.5375 8.53747C8.0875 8.98747 7.55833 9.34372 6.95 9.60622C6.34167 9.86872 5.69167 9.99997 5 9.99997Z",fill:"currentColor"})})}),j=r=>e(s,{...r,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M8 13.3667L0 5.36667L1.86667 3.5L8 9.63333L14.1333 3.5L16 5.36667L8 13.3667Z",fill:"currentColor"})})}),S=r=>e(s,{...r,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M1 10L0 9L4 5L0 1L1 0L5 4L9 0L10 1L6 5L10 9L9 10L5 6L1 10Z",fill:"currentColor"})})}),N=r=>e(s,{...r,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M5 6.95455C5.56818 6.95455 6.05114 6.75568 6.44886 6.35795C6.84659 5.96023 7.04545 5.47727 7.04545 4.90909C7.04545 4.34091 6.84659 3.85795 6.44886 3.46023C6.05114 3.0625 5.56818 2.86364 5 2.86364C4.43182 2.86364 3.94886 3.0625 3.55114 3.46023C3.15341 3.85795 2.95455 4.34091 2.95455 4.90909C2.95455 5.47727 3.15341 5.96023 3.55114 6.35795C3.94886 6.75568 4.43182 6.95455 5 6.95455ZM5 6.13636C4.65909 6.13636 4.36932 6.01705 4.13068 5.77841C3.89205 5.53977 3.77273 5.25 3.77273 4.90909C3.77273 4.56818 3.89205 4.27841 4.13068 4.03977C4.36932 3.80114 4.65909 3.68182 5 3.68182C5.34091 3.68182 5.63068 3.80114 5.86932 4.03977C6.10795 4.27841 6.22727 4.56818 6.22727 4.90909C6.22727 5.25 6.10795 5.53977 5.86932 5.77841C5.63068 6.01705 5.34091 6.13636 5 6.13636ZM5 8.31818C3.89394 8.31818 2.88636 8.00947 1.97727 7.39205C1.06818 6.77462 0.409091 5.94697 0 4.90909C0.409091 3.87121 1.06818 3.04356 1.97727 2.42614C2.88636 1.80871 3.89394 1.5 5 1.5C6.10606 1.5 7.11364 1.80871 8.02273 2.42614C8.93182 3.04356 9.59091 3.87121 10 4.90909C9.59091 5.94697 8.93182 6.77462 8.02273 7.39205C7.11364 8.00947 6.10606 8.31818 5 8.31818Z",fill:"currentColor"})})}),O=l=>e(s,{...l,children:r("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("g",{clipPath:"url(#clip0_4626_1381)",children:e("path",{d:"M8.54545 9.9375L6.63636 8.05114C6.37121 8.13447 6.10417 8.19697 5.83523 8.23864C5.56629 8.2803 5.28788 8.30114 5 8.30114C3.85606 8.30114 2.83712 7.98485 1.94318 7.35227C1.04924 6.7197 0.401515 5.89962 0 4.89205C0.159091 4.49053 0.359848 4.11742 0.602273 3.77273C0.844697 3.42803 1.12121 3.11932 1.43182 2.84659L0.181818 1.57386L0.818182 0.9375L9.18182 9.30114L8.54545 9.9375ZM5 6.9375C5.08333 6.9375 5.16098 6.93371 5.23295 6.92614C5.30492 6.91856 5.38258 6.90341 5.46591 6.88068L3.01136 4.42614C2.98864 4.50947 2.97348 4.58712 2.96591 4.65909C2.95833 4.73106 2.95455 4.80871 2.95455 4.89205C2.95455 5.46023 3.15341 5.94318 3.55114 6.34091C3.94886 6.73864 4.43182 6.9375 5 6.9375ZM8.31818 7.14205L6.875 5.71023C6.92803 5.58144 6.9697 5.45076 7 5.31818C7.0303 5.18561 7.04545 5.04356 7.04545 4.89205C7.04545 4.32386 6.84659 3.84091 6.44886 3.44318C6.05114 3.04545 5.56818 2.84659 5 2.84659C4.84848 2.84659 4.70644 2.86174 4.57386 2.89205C4.44129 2.92235 4.31061 2.9678 4.18182 3.02841L3.02273 1.86932C3.33333 1.74053 3.65152 1.64394 3.97727 1.57955C4.30303 1.51515 4.64394 1.48295 5 1.48295C6.14394 1.48295 7.16288 1.79924 8.05682 2.43182C8.95076 3.06439 9.59848 3.88447 10 4.89205C9.82576 5.33902 9.59659 5.75379 9.3125 6.13636C9.02841 6.51894 8.69697 6.85417 8.31818 7.14205ZM6.21591 5.05114L4.85227 3.6875C5.06439 3.64962 5.25947 3.66667 5.4375 3.73864C5.61553 3.81061 5.76894 3.91477 5.89773 4.05114C6.02652 4.1875 6.11932 4.3447 6.17614 4.52273C6.23295 4.70076 6.24621 4.87689 6.21591 5.05114Z",fill:"currentColor"})}),e("defs",{children:e("clipPath",{id:"clip0_4626_1381",children:e("rect",{width:"10",height:"10",fill:"white"})})})]})}),q=r=>e(s,{...r,children:e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M6.25 20C5.5625 20 4.97396 19.7552 4.48437 19.2656C3.99479 18.776 3.75 18.1875 3.75 17.5C3.75 16.8125 3.99479 16.224 4.48437 15.7344C4.97396 15.2448 5.5625 15 6.25 15C6.9375 15 7.52604 15.2448 8.01562 15.7344C8.50521 16.224 8.75 16.8125 8.75 17.5C8.75 18.1875 8.50521 18.776 8.01562 19.2656C7.52604 19.7552 6.9375 20 6.25 20ZM13.75 20C13.0625 20 12.474 19.7552 11.9844 19.2656C11.4948 18.776 11.25 18.1875 11.25 17.5C11.25 16.8125 11.4948 16.224 11.9844 15.7344C12.474 15.2448 13.0625 15 13.75 15C14.4375 15 15.026 15.2448 15.5156 15.7344C16.0052 16.224 16.25 16.8125 16.25 17.5C16.25 18.1875 16.0052 18.776 15.5156 19.2656C15.026 19.7552 14.4375 20 13.75 20ZM6.25 12.5C5.5625 12.5 4.97396 12.2552 4.48437 11.7656C3.99479 11.276 3.75 10.6875 3.75 10C3.75 9.3125 3.99479 8.72396 4.48437 8.23438C4.97396 7.74479 5.5625 7.5 6.25 7.5C6.9375 7.5 7.52604 7.74479 8.01562 8.23438C8.50521 8.72396 8.75 9.3125 8.75 10C8.75 10.6875 8.50521 11.276 8.01562 11.7656C7.52604 12.2552 6.9375 12.5 6.25 12.5ZM13.75 12.5C13.0625 12.5 12.474 12.2552 11.9844 11.7656C11.4948 11.276 11.25 10.6875 11.25 10C11.25 9.3125 11.4948 8.72396 11.9844 8.23438C12.474 7.74479 13.0625 7.5 13.75 7.5C14.4375 7.5 15.026 7.74479 15.5156 8.23438C16.0052 8.72396 16.25 9.3125 16.25 10C16.25 10.6875 16.0052 11.276 15.5156 11.7656C15.026 12.2552 14.4375 12.5 13.75 12.5ZM6.25 5C5.5625 5 4.97396 4.75521 4.48437 4.26562C3.99479 3.77604 3.75 3.1875 3.75 2.5C3.75 1.8125 3.99479 1.22396 4.48437 0.734375C4.97396 0.244792 5.5625 0 6.25 0C6.9375 0 7.52604 0.244792 8.01562 0.734375C8.50521 1.22396 8.75 1.8125 8.75 2.5C8.75 3.1875 8.50521 3.77604 8.01562 4.26562C7.52604 4.75521 6.9375 5 6.25 5ZM13.75 5C13.0625 5 12.474 4.75521 11.9844 4.26562C11.4948 3.77604 11.25 3.1875 11.25 2.5C11.25 1.8125 11.4948 1.22396 11.9844 0.734375C12.474 0.244792 13.0625 0 13.75 0C14.4375 0 15.026 0.244792 15.5156 0.734375C16.0052 1.22396 16.25 1.8125 16.25 2.5C16.25 3.1875 16.0052 3.77604 15.5156 4.26562C15.026 4.75521 14.4375 5 13.75 5Z",fill:"currentColor"})})}),P=l=>e(s,{...l,children:r("svg",{width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("g",{clipPath:"url(#clip0_5584_387)",children:e("path",{d:"M8.49906 16L0.940002 10.1207L2.32583 9.07087L8.49906 13.8583L14.6723 9.07087L16.0581 10.1207L8.49906 16ZM8.49906 11.7585L0.940002 5.87926L8.49906 0L16.0581 5.87926L8.49906 11.7585Z",fill:"currentColor"})}),e("defs",{children:e("clipPath",{id:"clip0_5584_387",children:e("rect",{width:"16",height:"16",fill:"white",transform:"translate(0.5)"})})})]})}),G=r=>e(s,{...r,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M1.71286 12.5714V3.42857H5.14144V12.5714H1.71286ZM6.28429 12.5714V6.85714H9.71286V12.5714H6.28429ZM10.8557 12.5714V0H14.2843V12.5714H10.8557ZM0.570007 16V13.7143H15.4271V16H0.570007Z",fill:"currentColor"})})}),U=({name:l,defaultChecked:n=!1,onChange:a,disabled:o=!1,isLabelOnLeft:i=!1,children:t,...d})=>e(E,{children:r(T,{id:l,name:l,"aria-label":d["aria-label"]||l,defaultChecked:n,onCheckedChange:({checked:e})=>{a&&a(l,e)},disabled:o,...d,children:[i&&null!=t?e(p.Label,{children:t}):null,e(p.HiddenInput,{style:{width:"42px",height:"26px"}}),e("div",{className:"chakra-switch__control-container",children:e(p.Control,{children:e(p.Thumb,{children:e(p.ThumbIndicator,{display:"flex",children:e(B,{})})})})}),i||null==t?null:e(p.Label,{children:t})]})}),Y=H(h)`
|
|
79
|
+
`,E=a=>e(p,{...a,children:l("svg",{viewBox:"0 0 16 17",children:[l("g",{clipPath:"url(#clip0_1216_84)",children:[e("path",{d:"M9.78791 8.03125H16V2.21875C16 1.27103 15.229 0.5 14.2812 0.5H7.1875V16.5H14.2812C15.229 16.5 16 15.729 16 14.7812V8.96875H9.78791L10.5502 9.73106C10.7333 9.91413 10.7333 10.2109 10.5502 10.394C10.3672 10.577 10.0704 10.577 9.88731 10.394L8.32481 8.83147C8.14175 8.64841 8.14175 8.35162 8.32481 8.16856L9.88731 6.60606C10.0704 6.423 10.3672 6.423 10.5502 6.60606C10.7333 6.78912 10.7333 7.08591 10.5502 7.26897L9.78791 8.03125Z",fill:"#4F4E4E"}),e("path",{d:"M0 2.21875V14.7812C0 15.729 0.771031 16.5 1.71875 16.5H6.25V0.5H1.71875C0.771031 0.5 0 1.27103 0 2.21875ZM4.375 7.0625H1.875C1.61612 7.0625 1.40625 6.85262 1.40625 6.59375C1.40625 6.33488 1.61612 6.125 1.875 6.125H4.375C4.63387 6.125 4.84375 6.33488 4.84375 6.59375C4.84375 6.85262 4.63387 7.0625 4.375 7.0625ZM4.375 5.1875H1.875C1.61612 5.1875 1.40625 4.97762 1.40625 4.71875C1.40625 4.45988 1.61612 4.25 1.875 4.25H4.375C4.63387 4.25 4.84375 4.45988 4.84375 4.71875C4.84375 4.97762 4.63387 5.1875 4.375 5.1875ZM4.375 2.375C4.63387 2.375 4.84375 2.58488 4.84375 2.84375C4.84375 3.10262 4.63387 3.3125 4.375 3.3125H1.875C1.61612 3.3125 1.40625 3.10262 1.40625 2.84375C1.40625 2.58488 1.61612 2.375 1.875 2.375H4.375Z",fill:"#4F4E4E"})]}),e("defs",{children:e("clipPath",{id:"clip0_1216_84",children:e("rect",{width:"16",height:"16",fill:"white",transform:"translate(0 0.5)"})})})]})}),H=a=>e(p,{...a,children:l("svg",{viewBox:"0 0 16 17",children:[e("path",{d:"M0 2.21875V14.7812C0 15.729 0.771031 16.5 1.71875 16.5H6.25V0.5H1.71875C0.771031 0.5 0 1.27103 0 2.21875ZM4.375 7.0625H1.875C1.61612 7.0625 1.40625 6.85262 1.40625 6.59375C1.40625 6.33488 1.61612 6.125 1.875 6.125H4.375C4.63387 6.125 4.84375 6.33488 4.84375 6.59375C4.84375 6.85262 4.63387 7.0625 4.375 7.0625ZM4.375 5.1875H1.875C1.61612 5.1875 1.40625 4.97762 1.40625 4.71875C1.40625 4.45988 1.61612 4.25 1.875 4.25H4.375C4.63387 4.25 4.84375 4.45988 4.84375 4.71875C4.84375 4.97762 4.63387 5.1875 4.375 5.1875ZM4.375 2.375C4.63387 2.375 4.84375 2.58488 4.84375 2.84375C4.84375 3.10262 4.63387 3.3125 4.375 3.3125H1.875C1.61612 3.3125 1.40625 3.10262 1.40625 2.84375C1.40625 2.58488 1.61612 2.375 1.875 2.375H4.375Z",fill:"#4F4E4E"}),e("path",{d:"M14.2812 0.5H7.1875V8.03125H12.4621L11.6998 7.26897C11.5168 7.08591 11.5168 6.78912 11.6998 6.60606C11.8829 6.423 12.1797 6.423 12.3627 6.60606L13.9252 8.16856C14.1083 8.35162 14.1083 8.64841 13.9252 8.83147L12.3627 10.394C12.1797 10.577 11.8829 10.577 11.6998 10.394C11.5168 10.2109 11.5168 9.91413 11.6998 9.73106L12.4621 8.96875H7.1875V16.5H14.2812C15.229 16.5 16 15.729 16 14.7812V2.21875C16 1.27103 15.229 0.5 14.2812 0.5Z",fill:"#4F4E4E"})]})}),R=l=>e(p,{...l,children:e("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:e("path",{d:"M4.19632 10.4277L0 6.23139L1.04908 5.18231L4.19632 8.32955L10.9509 1.57495L12 2.62403L4.19632 10.4277Z",fill:"currentColor"})})}),Z=l=>e(p,{...l,children:e("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:e("path",{d:"M0 6.75V5.25H12V6.75H0Z",fill:"auto"})})}),S=l=>e(p,{...l,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4.5 7.49997H5.5V4.49997H4.5V7.49997ZM5 3.49997C5.14167 3.49997 5.26042 3.45205 5.35625 3.35622C5.45208 3.26039 5.5 3.14164 5.5 2.99997C5.5 2.8583 5.45208 2.73955 5.35625 2.64372C5.26042 2.54789 5.14167 2.49997 5 2.49997C4.85833 2.49997 4.73958 2.54789 4.64375 2.64372C4.54792 2.73955 4.5 2.8583 4.5 2.99997C4.5 3.14164 4.54792 3.26039 4.64375 3.35622C4.73958 3.45205 4.85833 3.49997 5 3.49997ZM5 9.99997C4.30833 9.99997 3.65833 9.86872 3.05 9.60622C2.44167 9.34372 1.9125 8.98747 1.4625 8.53747C1.0125 8.08747 0.65625 7.5583 0.39375 6.94997C0.13125 6.34164 0 5.69164 0 4.99997C0 4.3083 0.13125 3.6583 0.39375 3.04997C0.65625 2.44164 1.0125 1.91247 1.4625 1.46247C1.9125 1.01247 2.44167 0.656219 3.05 0.393719C3.65833 0.131219 4.30833 -3.05176e-05 5 -3.05176e-05C5.69167 -3.05176e-05 6.34167 0.131219 6.95 0.393719C7.55833 0.656219 8.0875 1.01247 8.5375 1.46247C8.9875 1.91247 9.34375 2.44164 9.60625 3.04997C9.86875 3.6583 10 4.3083 10 4.99997C10 5.69164 9.86875 6.34164 9.60625 6.94997C9.34375 7.5583 8.9875 8.08747 8.5375 8.53747C8.0875 8.98747 7.55833 9.34372 6.95 9.60622C6.34167 9.86872 5.69167 9.99997 5 9.99997Z",fill:"currentColor"})})}),j=l=>e(p,{...l,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M8 13.3667L0 5.36667L1.86667 3.5L8 9.63333L14.1333 3.5L16 5.36667L8 13.3667Z",fill:"currentColor"})})}),N=l=>e(p,{...l,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M1 10L0 9L4 5L0 1L1 0L5 4L9 0L10 1L6 5L10 9L9 10L5 6L1 10Z",fill:"currentColor"})})}),O=l=>e(p,{...l,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M8 16C7.45 16 6.97917 15.8042 6.5875 15.4125C6.19583 15.0208 6 14.55 6 14C6 13.45 6.19583 12.9792 6.5875 12.5875C6.97917 12.1958 7.45 12 8 12C8.55 12 9.02083 12.1958 9.4125 12.5875C9.80417 12.9792 10 13.45 10 14C10 14.55 9.80417 15.0208 9.4125 15.4125C9.02083 15.8042 8.55 16 8 16ZM8 10C7.45 10 6.97917 9.80417 6.5875 9.4125C6.19583 9.02083 6 8.55 6 8C6 7.45 6.19583 6.97917 6.5875 6.5875C6.97917 6.19583 7.45 6 8 6C8.55 6 9.02083 6.19583 9.4125 6.5875C9.80417 6.97917 10 7.45 10 8C10 8.55 9.80417 9.02083 9.4125 9.4125C9.02083 9.80417 8.55 10 8 10ZM8 4C7.45 4 6.97917 3.80417 6.5875 3.4125C6.19583 3.02083 6 2.55 6 2C6 1.45 6.19583 0.979167 6.5875 0.5875C6.97917 0.195833 7.45 0 8 0C8.55 0 9.02083 0.195833 9.4125 0.5875C9.80417 0.979167 10 1.45 10 2C10 2.55 9.80417 3.02083 9.4125 3.4125C9.02083 3.80417 8.55 4 8 4Z",fill:"currentColor"})})}),q=l=>e(p,{...l,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M5 6.95455C5.56818 6.95455 6.05114 6.75568 6.44886 6.35795C6.84659 5.96023 7.04545 5.47727 7.04545 4.90909C7.04545 4.34091 6.84659 3.85795 6.44886 3.46023C6.05114 3.0625 5.56818 2.86364 5 2.86364C4.43182 2.86364 3.94886 3.0625 3.55114 3.46023C3.15341 3.85795 2.95455 4.34091 2.95455 4.90909C2.95455 5.47727 3.15341 5.96023 3.55114 6.35795C3.94886 6.75568 4.43182 6.95455 5 6.95455ZM5 6.13636C4.65909 6.13636 4.36932 6.01705 4.13068 5.77841C3.89205 5.53977 3.77273 5.25 3.77273 4.90909C3.77273 4.56818 3.89205 4.27841 4.13068 4.03977C4.36932 3.80114 4.65909 3.68182 5 3.68182C5.34091 3.68182 5.63068 3.80114 5.86932 4.03977C6.10795 4.27841 6.22727 4.56818 6.22727 4.90909C6.22727 5.25 6.10795 5.53977 5.86932 5.77841C5.63068 6.01705 5.34091 6.13636 5 6.13636ZM5 8.31818C3.89394 8.31818 2.88636 8.00947 1.97727 7.39205C1.06818 6.77462 0.409091 5.94697 0 4.90909C0.409091 3.87121 1.06818 3.04356 1.97727 2.42614C2.88636 1.80871 3.89394 1.5 5 1.5C6.10606 1.5 7.11364 1.80871 8.02273 2.42614C8.93182 3.04356 9.59091 3.87121 10 4.90909C9.59091 5.94697 8.93182 6.77462 8.02273 7.39205C7.11364 8.00947 6.10606 8.31818 5 8.31818Z",fill:"currentColor"})})}),P=a=>e(p,{...a,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("g",{clipPath:"url(#clip0_4626_1381)",children:e("path",{d:"M8.54545 9.9375L6.63636 8.05114C6.37121 8.13447 6.10417 8.19697 5.83523 8.23864C5.56629 8.2803 5.28788 8.30114 5 8.30114C3.85606 8.30114 2.83712 7.98485 1.94318 7.35227C1.04924 6.7197 0.401515 5.89962 0 4.89205C0.159091 4.49053 0.359848 4.11742 0.602273 3.77273C0.844697 3.42803 1.12121 3.11932 1.43182 2.84659L0.181818 1.57386L0.818182 0.9375L9.18182 9.30114L8.54545 9.9375ZM5 6.9375C5.08333 6.9375 5.16098 6.93371 5.23295 6.92614C5.30492 6.91856 5.38258 6.90341 5.46591 6.88068L3.01136 4.42614C2.98864 4.50947 2.97348 4.58712 2.96591 4.65909C2.95833 4.73106 2.95455 4.80871 2.95455 4.89205C2.95455 5.46023 3.15341 5.94318 3.55114 6.34091C3.94886 6.73864 4.43182 6.9375 5 6.9375ZM8.31818 7.14205L6.875 5.71023C6.92803 5.58144 6.9697 5.45076 7 5.31818C7.0303 5.18561 7.04545 5.04356 7.04545 4.89205C7.04545 4.32386 6.84659 3.84091 6.44886 3.44318C6.05114 3.04545 5.56818 2.84659 5 2.84659C4.84848 2.84659 4.70644 2.86174 4.57386 2.89205C4.44129 2.92235 4.31061 2.9678 4.18182 3.02841L3.02273 1.86932C3.33333 1.74053 3.65152 1.64394 3.97727 1.57955C4.30303 1.51515 4.64394 1.48295 5 1.48295C6.14394 1.48295 7.16288 1.79924 8.05682 2.43182C8.95076 3.06439 9.59848 3.88447 10 4.89205C9.82576 5.33902 9.59659 5.75379 9.3125 6.13636C9.02841 6.51894 8.69697 6.85417 8.31818 7.14205ZM6.21591 5.05114L4.85227 3.6875C5.06439 3.64962 5.25947 3.66667 5.4375 3.73864C5.61553 3.81061 5.76894 3.91477 5.89773 4.05114C6.02652 4.1875 6.11932 4.3447 6.17614 4.52273C6.23295 4.70076 6.24621 4.87689 6.21591 5.05114Z",fill:"currentColor"})}),e("defs",{children:e("clipPath",{id:"clip0_4626_1381",children:e("rect",{width:"10",height:"10",fill:"white"})})})]})}),U=l=>e(p,{...l,children:e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M6.25 20C5.5625 20 4.97396 19.7552 4.48437 19.2656C3.99479 18.776 3.75 18.1875 3.75 17.5C3.75 16.8125 3.99479 16.224 4.48437 15.7344C4.97396 15.2448 5.5625 15 6.25 15C6.9375 15 7.52604 15.2448 8.01562 15.7344C8.50521 16.224 8.75 16.8125 8.75 17.5C8.75 18.1875 8.50521 18.776 8.01562 19.2656C7.52604 19.7552 6.9375 20 6.25 20ZM13.75 20C13.0625 20 12.474 19.7552 11.9844 19.2656C11.4948 18.776 11.25 18.1875 11.25 17.5C11.25 16.8125 11.4948 16.224 11.9844 15.7344C12.474 15.2448 13.0625 15 13.75 15C14.4375 15 15.026 15.2448 15.5156 15.7344C16.0052 16.224 16.25 16.8125 16.25 17.5C16.25 18.1875 16.0052 18.776 15.5156 19.2656C15.026 19.7552 14.4375 20 13.75 20ZM6.25 12.5C5.5625 12.5 4.97396 12.2552 4.48437 11.7656C3.99479 11.276 3.75 10.6875 3.75 10C3.75 9.3125 3.99479 8.72396 4.48437 8.23438C4.97396 7.74479 5.5625 7.5 6.25 7.5C6.9375 7.5 7.52604 7.74479 8.01562 8.23438C8.50521 8.72396 8.75 9.3125 8.75 10C8.75 10.6875 8.50521 11.276 8.01562 11.7656C7.52604 12.2552 6.9375 12.5 6.25 12.5ZM13.75 12.5C13.0625 12.5 12.474 12.2552 11.9844 11.7656C11.4948 11.276 11.25 10.6875 11.25 10C11.25 9.3125 11.4948 8.72396 11.9844 8.23438C12.474 7.74479 13.0625 7.5 13.75 7.5C14.4375 7.5 15.026 7.74479 15.5156 8.23438C16.0052 8.72396 16.25 9.3125 16.25 10C16.25 10.6875 16.0052 11.276 15.5156 11.7656C15.026 12.2552 14.4375 12.5 13.75 12.5ZM6.25 5C5.5625 5 4.97396 4.75521 4.48437 4.26562C3.99479 3.77604 3.75 3.1875 3.75 2.5C3.75 1.8125 3.99479 1.22396 4.48437 0.734375C4.97396 0.244792 5.5625 0 6.25 0C6.9375 0 7.52604 0.244792 8.01562 0.734375C8.50521 1.22396 8.75 1.8125 8.75 2.5C8.75 3.1875 8.50521 3.77604 8.01562 4.26562C7.52604 4.75521 6.9375 5 6.25 5ZM13.75 5C13.0625 5 12.474 4.75521 11.9844 4.26562C11.4948 3.77604 11.25 3.1875 11.25 2.5C11.25 1.8125 11.4948 1.22396 11.9844 0.734375C12.474 0.244792 13.0625 0 13.75 0C14.4375 0 15.026 0.244792 15.5156 0.734375C16.0052 1.22396 16.25 1.8125 16.25 2.5C16.25 3.1875 16.0052 3.77604 15.5156 4.26562C15.026 4.75521 14.4375 5 13.75 5Z",fill:"currentColor"})})}),G=a=>e(p,{...a,children:l("svg",{width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("g",{clipPath:"url(#clip0_5584_387)",children:e("path",{d:"M8.49906 16L0.940002 10.1207L2.32583 9.07087L8.49906 13.8583L14.6723 9.07087L16.0581 10.1207L8.49906 16ZM8.49906 11.7585L0.940002 5.87926L8.49906 0L16.0581 5.87926L8.49906 11.7585Z",fill:"currentColor"})}),e("defs",{children:e("clipPath",{id:"clip0_5584_387",children:e("rect",{width:"16",height:"16",fill:"white",transform:"translate(0.5)"})})})]})}),W=l=>e(p,{...l,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M1.71286 12.5714V3.42857H5.14144V12.5714H1.71286ZM6.28429 12.5714V6.85714H9.71286V12.5714H6.28429ZM10.8557 12.5714V0H14.2843V12.5714H10.8557ZM0.570007 16V13.7143H15.4271V16H0.570007Z",fill:"currentColor"})})}),Y=({name:a,defaultChecked:n=!1,onChange:i,disabled:r=!1,isLabelOnLeft:o=!1,children:t,...d})=>e(T,{children:l(_,{id:a,name:a,"aria-label":d["aria-label"]||a,defaultChecked:n,onCheckedChange:({checked:e})=>{i&&i(a,e)},disabled:r,...d,children:[o&&null!=t?e(s.Label,{children:t}):null,e(s.HiddenInput,{style:{width:"42px",height:"26px"}}),e("div",{className:"chakra-switch__control-container",children:e(s.Control,{children:e(s.Thumb,{children:e(s.ThumbIndicator,{display:"flex",children:e(R,{})})})})}),o||null==t?null:e(s.Label,{children:t})]})}),K=F(h)`
|
|
80
80
|
width: auto;
|
|
81
81
|
height: ${({size:e})=>"small"===e?"28px":"40px"};
|
|
82
82
|
font-size: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
@@ -94,34 +94,34 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
94
94
|
width: ${({size:e})=>"small"===e?"10px":"16px"};
|
|
95
95
|
height: ${({size:e})=>"small"===e?"10px":"16px"};
|
|
96
96
|
}
|
|
97
|
-
`,
|
|
98
|
-
${({disabled:e})=>e?`\n background-color: ${
|
|
99
|
-
`,
|
|
100
|
-
${({disabled:e})=>e?`\n background-color: ${
|
|
101
|
-
`,
|
|
102
|
-
${({disabled:e})=>e?`\n background-color: transparent;\n color: ${
|
|
103
|
-
`,
|
|
104
|
-
${({disabled:e})=>e?`\n background-color: ${
|
|
105
|
-
`,
|
|
97
|
+
`,J=F(K)`
|
|
98
|
+
${({disabled:e})=>e?`\n background-color: ${M("neutral",300)};\n border: 1px solid ${M("neutral",400)};\n color: ${M("neutral",500)};\n\n &:hover {\n background-color: ${M("neutral",300)} !important;\n }\n `:`\n background-color: ${M("primary",500)};\n border: 1px solid ${M("primary",600)};\n color: ${M("primary",900)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n\n &:hover {\n background-color: ${M("primary",500)};\n box-shadow: 0px 2px 4px -2px #0000001A;\n box-shadow: 0px 4px 6px -1px #0000001A;\n }\n\n &:active {\n outline: none;\n background-color: ${M("primary",600)} !important;\n border: 1px solid ${M("primary",700)} !important;\n box-shadow: 0px 2px 4px -2px #0000001A;\n box-shadow: 0px 4px 6px -1px #0000001A;\n }\n\n &:focus-visible {\n outline-color: ${M("primary",700)};\n background-color: ${M("primary",500)};\n border: 2px solid ${M("primary",500)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n }\n `};
|
|
99
|
+
`,Q=F(K)`
|
|
100
|
+
${({disabled:e})=>e?`\n background-color: ${M("neutral",200)};\n border: 1px solid ${M("neutral",300)};\n color: ${M("neutral",500)};\n\n &:hover {\n background-color: ${M("neutral",200)} !important;\n }\n `:`\n background-color: ${M("neutral",100)};\n border: 1px solid ${M("neutral",300)};\n color: ${M("neutral",700)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n\n &:hover {\n background-color: ${M("neutral",100)};\n box-shadow: 0px 2px 4px -2px #0000001A;\n box-shadow: 0px 4px 6px -1px #0000001A;\n }\n\n &:active {\n outline: none;\n background-color: ${M("neutral",200)} !important;\n border: 1px solid ${M("neutral",300)} !important;\n box-shadow: 0px 2px 4px -2px #0000001A;\n box-shadow: 0px 4px 6px -1px #0000001A;\n }\n\n &:focus-visible {\n outline-color: ${M("primary",700)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n }\n `};
|
|
101
|
+
`,X=F(K)`
|
|
102
|
+
${({disabled:e})=>e?`\n background-color: transparent;\n color: ${M("neutral",500)};\n\n &:hover {\n background-color: transparent !important;\n }\n `:`\n background-color: transparent;\n border: none;\n color: ${M("neutral",800)};\n box-shadow: none;\n\n &:hover {\n background-color: color-mix(in srgb, ${M("primary",500)} 20%, transparent);\n }\n\n &:active {\n outline: none;\n background-color: color-mix(in srgb, ${M("primary",500)} 40%, transparent);\n box-shadow: 0px 4px 6px -1px #0000001A;\n }\n\n &:focus-visible {\n outline-color: ${M("primary",700)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n }\n `};
|
|
103
|
+
`,ee=F(K)`
|
|
104
|
+
${({disabled:e})=>e?`\n background-color: ${M("neutral",200)};\n border: 1px solid ${M("neutral",300)};\n color: ${M("neutral",500)};\n\n &:hover {\n background-color: ${M("neutral",200)} !important;\n }\n `:`\n background-color: transparent;\n border: 1px solid ${M("primary",800)};\n color: ${M("primary",800)};\n\n &:hover {\n background-color: ${M("primary",100)};\n color: ${M("primary",900)};\n }\n\n &:active {\n outline: none;\n background-color: ${M("primary",200)} !important;\n border: 1px solid ${M("primary",900)} !important;\n color: ${M("primary",900)};\n }\n\n &:focus-visible {\n outline-color: ${M("primary",800)};\n background-color: ${M("primary",100)};\n }\n `};
|
|
105
|
+
`,le=({label:a,loading:n,variant:i="primary",size:r="default",disabled:o,leftIcon:t,rightIcon:d,...c})=>{let s=J;"secondary"===i?s=Q:"borderless"===i?s=X:"outline"===i&&(s=ee);return l(s,{"aria-label":(()=>{let e=c["aria-label"]||a;return n&&(e="Loading"),e})(),size:r,disabled:o||n,"aria-disabled":o||n,...c,children:[t&&!n?e(u,{marginRight:a?2:0,display:"flex",alignItems:"center",children:t}):null,!d&&n?e(x,{size:"sm",marginRight:a?2:0}):null,a,d&&!n?e(u,{marginLeft:a?2:0,display:"flex",alignItems:"center",children:d}):null,d&&n?e(x,{size:"sm",marginLeft:a?2:0}):null]})},ae=F.div`
|
|
106
106
|
width: 64px;
|
|
107
107
|
height: 100vh;
|
|
108
108
|
z-index: 100;
|
|
109
109
|
position: fixed;
|
|
110
110
|
top: 0;
|
|
111
111
|
left: 0;
|
|
112
|
-
border-right: 1px solid ${
|
|
113
|
-
background-color: ${
|
|
112
|
+
border-right: 1px solid ${M("neutral",300)};
|
|
113
|
+
background-color: ${M("neutral",200)};
|
|
114
114
|
display: flex;
|
|
115
115
|
flex-direction: column;
|
|
116
116
|
justify-content: space-between;
|
|
117
|
-
`,
|
|
117
|
+
`,ne=F(b.Trigger)`
|
|
118
118
|
width: 64px;
|
|
119
119
|
height: 64px;
|
|
120
|
-
background-color: ${
|
|
120
|
+
background-color: ${M("neutral",200)};
|
|
121
121
|
border-radius: initial;
|
|
122
122
|
border-style: solid;
|
|
123
123
|
border-width: 1px 1px 0px 0px;
|
|
124
|
-
border-color: ${
|
|
124
|
+
border-color: ${M("neutral",300)};
|
|
125
125
|
cursor: pointer;
|
|
126
126
|
border-left: 2px solid transparent;
|
|
127
127
|
padding: 0 5px;
|
|
@@ -130,16 +130,16 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
130
130
|
justify-content: center;
|
|
131
131
|
|
|
132
132
|
&:hover {
|
|
133
|
-
background-color: ${
|
|
133
|
+
background-color: ${M("neutral",100)};
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
&:active {
|
|
137
|
-
background-color: ${
|
|
137
|
+
background-color: ${M("neutral",300)} !important;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
&:focus-visible {
|
|
141
|
-
background-color: ${
|
|
142
|
-
outline-color: ${
|
|
141
|
+
background-color: ${M("neutral",200)};
|
|
142
|
+
outline-color: ${M("primary",700)};
|
|
143
143
|
outline-offset: 2px;
|
|
144
144
|
box-shadow: none;
|
|
145
145
|
}
|
|
@@ -149,20 +149,20 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
149
149
|
font-weight: 400;
|
|
150
150
|
line-height: 14px;
|
|
151
151
|
text-align: center;
|
|
152
|
-
color: ${
|
|
152
|
+
color: ${M("neutral",600)};
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
&[data-selected] {
|
|
156
|
-
background-color: ${
|
|
157
|
-
border-left: 2px solid ${
|
|
156
|
+
background-color: ${M("neutral",100)};
|
|
157
|
+
border-left: 2px solid ${M("secondary",500)};
|
|
158
158
|
|
|
159
159
|
&:hover {
|
|
160
|
-
background-color: ${
|
|
160
|
+
background-color: ${M("neutral",200)};
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
&:focus-visible {
|
|
164
|
-
background-color: ${
|
|
165
|
-
outline-color: ${
|
|
164
|
+
background-color: ${M("neutral",100)};
|
|
165
|
+
outline-color: ${M("primary",700)};
|
|
166
166
|
outline-offset: 2px;
|
|
167
167
|
box-shadow: none;
|
|
168
168
|
}
|
|
@@ -170,12 +170,12 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
170
170
|
.tab-label {
|
|
171
171
|
p {
|
|
172
172
|
font-weight: 700;
|
|
173
|
-
color: ${
|
|
173
|
+
color: ${M("neutral",700)};
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
svg {
|
|
177
177
|
path {
|
|
178
|
-
fill: ${
|
|
178
|
+
fill: ${M("neutral",700)};
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
}
|
|
@@ -186,25 +186,25 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
&[data-disabled] {
|
|
189
|
-
background-color: ${
|
|
189
|
+
background-color: ${M("neutral",200)} !important;
|
|
190
190
|
|
|
191
191
|
&[data-selected] {
|
|
192
|
-
background-color: ${
|
|
192
|
+
background-color: ${M("neutral",100)} !important;
|
|
193
193
|
}
|
|
194
194
|
|
|
195
195
|
.tab-label {
|
|
196
196
|
p {
|
|
197
|
-
color: ${
|
|
197
|
+
color: ${M("neutral",400)};
|
|
198
198
|
}
|
|
199
199
|
|
|
200
200
|
svg {
|
|
201
201
|
path {
|
|
202
|
-
fill: ${
|
|
202
|
+
fill: ${M("neutral",400)};
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
|
-
`,
|
|
207
|
+
`,ie=F.div`
|
|
208
208
|
display: flex;
|
|
209
209
|
justify-content: center;
|
|
210
210
|
align-items: center;
|
|
@@ -214,17 +214,17 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
214
214
|
height: 16px;
|
|
215
215
|
|
|
216
216
|
path {
|
|
217
|
-
fill: ${
|
|
217
|
+
fill: ${M("neutral",600)};
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
|
-
`,
|
|
220
|
+
`,re=F(g.Trigger)`
|
|
221
221
|
width: 64px;
|
|
222
222
|
height: 64px;
|
|
223
|
-
background-color: ${
|
|
223
|
+
background-color: ${M("neutral",200)};
|
|
224
224
|
border-radius: initial;
|
|
225
225
|
border-style: solid;
|
|
226
226
|
border-width: 1px 1px 0px 0px;
|
|
227
|
-
border-color: ${
|
|
227
|
+
border-color: ${M("neutral",300)};
|
|
228
228
|
cursor: pointer;
|
|
229
229
|
border-left: 2px solid transparent;
|
|
230
230
|
padding: 0 5px;
|
|
@@ -235,15 +235,15 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
235
235
|
gap: 5px;
|
|
236
236
|
|
|
237
237
|
&:hover {
|
|
238
|
-
background-color: ${
|
|
238
|
+
background-color: ${M("neutral",100)};
|
|
239
239
|
}
|
|
240
240
|
|
|
241
241
|
&:active {
|
|
242
|
-
background-color: ${
|
|
242
|
+
background-color: ${M("neutral",300)} !important;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
245
|
&:focus-visible {
|
|
246
|
-
outline-color: ${
|
|
246
|
+
outline-color: ${M("primary",700)};
|
|
247
247
|
outline-offset: 2px;
|
|
248
248
|
box-shadow: none;
|
|
249
249
|
}
|
|
@@ -253,9 +253,9 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
253
253
|
font-weight: 400;
|
|
254
254
|
line-height: 14px;
|
|
255
255
|
text-align: center;
|
|
256
|
-
color: ${
|
|
256
|
+
color: ${M("neutral",600)};
|
|
257
257
|
}
|
|
258
|
-
`,
|
|
258
|
+
`,oe=F.div`
|
|
259
259
|
width: 300px;
|
|
260
260
|
height: 100vh;
|
|
261
261
|
z-index: 100;
|
|
@@ -263,14 +263,14 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
263
263
|
top: 0;
|
|
264
264
|
left: 64px;
|
|
265
265
|
box-shadow: 2px 0px 2px 0px #0000000d;
|
|
266
|
-
background-color: ${
|
|
266
|
+
background-color: ${M("neutral",100)};
|
|
267
267
|
overflow-y: auto;
|
|
268
268
|
overflow-x: hidden;
|
|
269
|
-
`,
|
|
269
|
+
`,te=({tabs:n=[],defaultValue:r,onTabClick:o,children:t,onOpenChange:d})=>{const[c,s]=i(!1),[p,h]=i(r||n?.[0]?.value);return l(a,{children:[l(ae,{children:[e(b.Root,{defaultValue:r||n?.[0]?.value,orientation:"horizontal",width:"full",onFocusChange:({focusedValue:e})=>{return h(l=e),void(o&&o(l));var l},role:"tablist",children:e(b.List,{alignItems:"center",border:"none",style:{flexDirection:"column"},children:n.map((a=>e(ne,{"aria-label":a["aria-label"]||a.label,...a,children:l(u,{display:"flex",alignItems:"center",flexDirection:"column",gap:"5px",className:"tab-label",children:[a.icon?e(ie,{children:a.icon}):null,e("p",{children:a.label})]})},a.label)))})}),t?e(g.Root,{onOpenChange:({open:e})=>{s(e),d&&d(!e)},children:l(re,{children:[e(ie,{children:e(c?H:E,{})}),l("div",{className:"tab-label",children:[e("p",{children:c?"Show":"Hide"}),e("p",{children:"Sidebar"})]})]})}):null]}),t?e(g.Root,{defaultOpen:!0,open:!c,children:e(g.Content,{children:e(oe,{role:"tabpanel","aria-labelledby":p,children:t})})}):null]})},de=F(m.Item)`
|
|
270
270
|
.radio-item-indicator {
|
|
271
271
|
width: 20px;
|
|
272
272
|
height: 20px;
|
|
273
|
-
border: 1px solid ${
|
|
273
|
+
border: 1px solid ${M("neutral",600)};
|
|
274
274
|
|
|
275
275
|
.dot {
|
|
276
276
|
width: 10px !important;
|
|
@@ -280,43 +280,43 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
280
280
|
|
|
281
281
|
&:hover {
|
|
282
282
|
outline: 4px solid
|
|
283
|
-
color-mix(in srgb, ${
|
|
283
|
+
color-mix(in srgb, ${M("primary",500)} 20%, transparent);
|
|
284
284
|
}
|
|
285
285
|
|
|
286
286
|
&:active {
|
|
287
287
|
outline: 4px solid
|
|
288
|
-
color-mix(in srgb, ${
|
|
288
|
+
color-mix(in srgb, ${M("primary",500)} 40%, transparent);
|
|
289
289
|
}
|
|
290
290
|
|
|
291
291
|
&:focus-visible,
|
|
292
292
|
&[data-focus-visible] {
|
|
293
|
-
outline: 2px solid ${
|
|
293
|
+
outline: 2px solid ${M("primary",700)};
|
|
294
294
|
outline-offset: 2px;
|
|
295
295
|
box-shadow: none;
|
|
296
296
|
|
|
297
297
|
&[data-checked] {
|
|
298
|
-
border: 2px solid ${
|
|
298
|
+
border: 2px solid ${M("primary",700)};
|
|
299
299
|
|
|
300
300
|
&[data-disabled] {
|
|
301
|
-
border: 2px solid ${
|
|
301
|
+
border: 2px solid ${M("neutral",400)};
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
}
|
|
305
305
|
|
|
306
306
|
&[data-checked] {
|
|
307
|
-
border: 1px solid ${
|
|
308
|
-
background-color: ${
|
|
309
|
-
color: ${
|
|
307
|
+
border: 1px solid ${M("primary",700)};
|
|
308
|
+
background-color: ${M("neutral",100)} !important;
|
|
309
|
+
color: ${M("primary",700)};
|
|
310
310
|
|
|
311
311
|
&[data-disabled] {
|
|
312
|
-
border: 1px solid ${
|
|
313
|
-
color: ${
|
|
312
|
+
border: 1px solid ${M("neutral",400)};
|
|
313
|
+
color: ${M("neutral",400)};
|
|
314
314
|
}
|
|
315
315
|
}
|
|
316
316
|
|
|
317
317
|
&[data-disabled] {
|
|
318
|
-
border: 1px solid ${
|
|
319
|
-
background-color: ${
|
|
318
|
+
border: 1px solid ${M("neutral",400)} !important;
|
|
319
|
+
background-color: ${M("neutral",100)} !important;
|
|
320
320
|
|
|
321
321
|
&:hover,
|
|
322
322
|
&:active {
|
|
@@ -324,14 +324,14 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
324
324
|
}
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
|
-
`,
|
|
327
|
+
`,ce=({children:a,value:n,disabled:i,...r})=>l(de,{value:n,disabled:i,...r,children:[e(m.ItemHiddenInput,{}),e(m.ItemIndicator,{className:"radio-item-indicator"}),a?e(m.ItemText,{children:a}):null]}),se=({children:l,isRow:a=!1,name:n,defaultValue:r,onChange:o,customGap:t,...d})=>{const[c,s]=i(r);let p=a?"20px":"8px";return p=t||p,e(m.Root,{onValueChange:e=>{s(e.value),o&&o(n,e.value)},value:c,...d,children:e(f,{gap:p,flexDirection:a?"row":"column",alignItems:"flex-start",children:l})})},pe=F.div`
|
|
328
328
|
width: 100%;
|
|
329
329
|
display: flex;
|
|
330
330
|
align-items: center;
|
|
331
331
|
height: 40px;
|
|
332
332
|
|
|
333
|
-
${({variant:e})=>"view"===e&&`\n border: 1px solid ${
|
|
334
|
-
`,
|
|
333
|
+
${({variant:e})=>"view"===e&&`\n border: 1px solid ${M("neutral",400)};\n background-color: ${M("neutral",200)};\n border-radius: 4px;\n padding: 4px;\n `}
|
|
334
|
+
`,he=F(b.Trigger)`
|
|
335
335
|
width: 99%;
|
|
336
336
|
height: 40px;
|
|
337
337
|
padding: 8px 16px;
|
|
@@ -347,39 +347,39 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
347
347
|
&:focus-visible {
|
|
348
348
|
box-shadow: none;
|
|
349
349
|
}
|
|
350
|
-
`,
|
|
351
|
-
background-color: ${
|
|
352
|
-
color: ${
|
|
350
|
+
`,ue=F(he)`
|
|
351
|
+
background-color: ${M("neutral",200)};
|
|
352
|
+
color: ${M("neutral",600)};
|
|
353
353
|
|
|
354
354
|
&:hover {
|
|
355
|
-
background-color: ${
|
|
355
|
+
background-color: ${M("neutral",100)};
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
&:active {
|
|
359
|
-
background-color: ${
|
|
359
|
+
background-color: ${M("neutral",300)};
|
|
360
360
|
}
|
|
361
361
|
|
|
362
362
|
&:focus-visible {
|
|
363
|
-
background-color: ${
|
|
364
|
-
outline-color: ${
|
|
363
|
+
background-color: ${M("neutral",300)};
|
|
364
|
+
outline-color: ${M("primary",700)};
|
|
365
365
|
outline-offset: 2px;
|
|
366
366
|
}
|
|
367
367
|
|
|
368
368
|
&[data-selected] {
|
|
369
|
-
background-color: ${
|
|
370
|
-
color: ${
|
|
369
|
+
background-color: ${M("neutral",100)};
|
|
370
|
+
color: ${M("neutral",800)};
|
|
371
371
|
|
|
372
372
|
&:hover {
|
|
373
|
-
background-color: ${
|
|
373
|
+
background-color: ${M("neutral",200)};
|
|
374
374
|
}
|
|
375
375
|
|
|
376
376
|
&:active {
|
|
377
|
-
background-color: ${
|
|
377
|
+
background-color: ${M("neutral",300)};
|
|
378
378
|
}
|
|
379
379
|
|
|
380
380
|
&:focus-visible {
|
|
381
|
-
background-color: ${
|
|
382
|
-
outline-color: ${
|
|
381
|
+
background-color: ${M("neutral",100)};
|
|
382
|
+
outline-color: ${M("primary",700)};
|
|
383
383
|
outline-offset: 2px;
|
|
384
384
|
}
|
|
385
385
|
|
|
@@ -389,63 +389,63 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
389
389
|
}
|
|
390
390
|
|
|
391
391
|
&[data-disabled] {
|
|
392
|
-
background-color: ${
|
|
393
|
-
color: ${
|
|
392
|
+
background-color: ${M("neutral",200)};
|
|
393
|
+
color: ${M("neutral",400)};
|
|
394
394
|
|
|
395
395
|
&[data-selected] {
|
|
396
|
-
background-color: ${
|
|
397
|
-
color: ${
|
|
396
|
+
background-color: ${M("neutral",100)};
|
|
397
|
+
color: ${M("neutral",400)};
|
|
398
398
|
opacity: 1;
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
|
-
`,
|
|
401
|
+
`,xe=F.div`
|
|
402
402
|
width: 4px;
|
|
403
403
|
height: 24px;
|
|
404
|
-
background-color: ${
|
|
405
|
-
`,
|
|
404
|
+
background-color: ${M("neutral",400)};
|
|
405
|
+
`,be=F(he)`
|
|
406
406
|
height: 32px;
|
|
407
407
|
border-radius: 2px;
|
|
408
|
-
background-color: ${
|
|
409
|
-
color: ${
|
|
408
|
+
background-color: ${M("neutral",200)};
|
|
409
|
+
color: ${M("neutral",600)};
|
|
410
410
|
|
|
411
411
|
&:hover {
|
|
412
|
-
background-color: ${
|
|
412
|
+
background-color: ${M("neutral",300)};
|
|
413
413
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
414
414
|
}
|
|
415
415
|
|
|
416
416
|
&:active {
|
|
417
|
-
background-color: ${
|
|
417
|
+
background-color: ${M("neutral",300)};
|
|
418
418
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
419
419
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
420
420
|
}
|
|
421
421
|
|
|
422
422
|
&:focus-visible {
|
|
423
|
-
outline-color: ${
|
|
423
|
+
outline-color: ${M("primary",700)};
|
|
424
424
|
outline-offset: 2px;
|
|
425
425
|
}
|
|
426
426
|
|
|
427
427
|
&[data-selected] {
|
|
428
|
-
background-color: ${
|
|
429
|
-
border: 1px solid ${
|
|
428
|
+
background-color: ${M("neutral",100)};
|
|
429
|
+
border: 1px solid ${M("neutral",300)};
|
|
430
430
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
431
|
-
color: ${
|
|
431
|
+
color: ${M("neutral",800)};
|
|
432
432
|
|
|
433
433
|
&:hover {
|
|
434
|
-
background-color: ${
|
|
435
|
-
border: 1px solid ${
|
|
434
|
+
background-color: ${M("neutral",200)};
|
|
435
|
+
border: 1px solid ${M("neutral",300)};
|
|
436
436
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
437
437
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
438
438
|
}
|
|
439
439
|
|
|
440
440
|
&:active {
|
|
441
|
-
background-color: ${
|
|
442
|
-
border: 1px solid ${
|
|
441
|
+
background-color: ${M("neutral",300)};
|
|
442
|
+
border: 1px solid ${M("neutral",300)};
|
|
443
443
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
444
444
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
445
445
|
}
|
|
446
446
|
|
|
447
447
|
&:focus-visible {
|
|
448
|
-
outline-color: ${
|
|
448
|
+
outline-color: ${M("primary",700)};
|
|
449
449
|
outline-offset: 2px;
|
|
450
450
|
}
|
|
451
451
|
|
|
@@ -455,8 +455,8 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
455
455
|
}
|
|
456
456
|
|
|
457
457
|
&[data-disabled] {
|
|
458
|
-
background-color: ${
|
|
459
|
-
color: ${
|
|
458
|
+
background-color: ${M("neutral",200)};
|
|
459
|
+
color: ${M("neutral",400)};
|
|
460
460
|
box-shadow: none;
|
|
461
461
|
|
|
462
462
|
&:hover {
|
|
@@ -464,39 +464,39 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
464
464
|
}
|
|
465
465
|
|
|
466
466
|
&[data-selected] {
|
|
467
|
-
background-color: ${
|
|
468
|
-
color: ${
|
|
467
|
+
background-color: ${M("neutral",100)};
|
|
468
|
+
color: ${M("neutral",400)};
|
|
469
469
|
opacity: 1;
|
|
470
470
|
}
|
|
471
471
|
}
|
|
472
|
-
`,
|
|
472
|
+
`,ge=(e,l)=>e.findIndex((e=>e.value===l)),me=e=>1===e?"none":2===e?"left":"right",fe=({variant:n="panel",defaultValue:r,tabs:o,onTabClick:t})=>{const[d,c]=i(ge(o,r)||0),s="view"===n,p=s?be:ue;return e(pe,{variant:n,children:e(b.Root,{width:"full",defaultValue:r||o?.[0]?.value,onFocusChange:({focusedValue:e})=>{return c(ge(o,l=e)),void(t&&t(l));var l},children:e(b.List,{alignItems:"center",border:"none",children:o.map(((n,i)=>l(a,{children:[s&&1===i&&"left"===me(d)?e(xe,{}):null,e(p,{"aria-label":n["aria-label"]||n.label,...n,children:l(u,{display:"flex",alignItems:"center",gap:"5px",children:[n.icon,n.label]})},n.label),s&&1===i&&"right"===me(d)?e(xe,{}):null]})))})})})},ve=F.div`
|
|
473
473
|
width: 268px;
|
|
474
474
|
padding: 16px 0;
|
|
475
|
-
border-bottom: 1px solid ${
|
|
476
|
-
`,
|
|
475
|
+
border-bottom: 1px solid ${M("neutral",300)};
|
|
476
|
+
`,Ce=F.div`
|
|
477
477
|
display: flex;
|
|
478
478
|
align-items: flex-start;
|
|
479
479
|
justify-content: space-between;
|
|
480
|
-
|
|
480
|
+
`,ye=F.div`
|
|
481
481
|
display: flex;
|
|
482
482
|
flex-direction: column;
|
|
483
|
-
|
|
483
|
+
`,$e=F.p`
|
|
484
484
|
font-size: 16px;
|
|
485
485
|
font-weight: 400;
|
|
486
486
|
line-height: 24px;
|
|
487
487
|
text-align: left;
|
|
488
|
-
color: ${
|
|
489
|
-
`,
|
|
488
|
+
color: ${M("neutral",800)};
|
|
489
|
+
`,we=F.p`
|
|
490
490
|
font-size: 14px;
|
|
491
491
|
font-weight: 400;
|
|
492
492
|
line-height: 20px;
|
|
493
493
|
text-align: left;
|
|
494
|
-
color: ${
|
|
495
|
-
`,
|
|
494
|
+
color: ${M("neutral",600)};
|
|
495
|
+
`,ke=({name:a,label:n,caption:i,showInfoButton:r=!0,infoButtonLabel:o="About data",variant:t="switch",disabled:d,onInfoClick:c,isDefaultSelected:s=!1,onChange:p})=>{const h="switch"===t;return l(ve,{children:[h?l(Ce,{children:[l(ye,{children:[e($e,{"aria-label":n,children:n}),e(we,{"aria-label":i,children:i})]}),e(Y,{"aria-label":`${n}, ${i}`,name:a,disabled:d,defaultChecked:s,onChange:p,role:"switch"})]}):l("div",{style:{display:"flex",flexDirection:"column"},children:[e(ce,{value:a,disabled:d,fontSize:"16px",color:"var(--chakra-colors-neutral-800)",children:n}),e(we,{style:{marginLeft:"28px"},children:i})]}),r?e(u,{display:"flex",justifyContent:"flex-start",marginTop:"8px",marginLeft:h?0:"28px",children:e(le,{variant:"secondary",label:o,rightIcon:e(S,{}),size:"small",onClick:c,disabled:d})}):null]})},Le=F(v.Root)`
|
|
496
496
|
.chakra-checkbox__control {
|
|
497
497
|
width: 20px;
|
|
498
498
|
height: 20px;
|
|
499
|
-
border: 1px solid ${
|
|
499
|
+
border: 1px solid ${M("neutral",600)};
|
|
500
500
|
|
|
501
501
|
svg {
|
|
502
502
|
width: 12px;
|
|
@@ -509,34 +509,34 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
509
509
|
&:hover,
|
|
510
510
|
&[data-hover] {
|
|
511
511
|
outline: 4px solid
|
|
512
|
-
color-mix(in srgb, ${
|
|
512
|
+
color-mix(in srgb, ${M("primary",500)} 20%, transparent);
|
|
513
513
|
}
|
|
514
514
|
|
|
515
515
|
&:active,
|
|
516
516
|
&[data-active] {
|
|
517
517
|
outline: 4px solid
|
|
518
|
-
color-mix(in srgb, ${
|
|
518
|
+
color-mix(in srgb, ${M("primary",500)} 40%, transparent);
|
|
519
519
|
}
|
|
520
520
|
|
|
521
521
|
&:focus-visible,
|
|
522
522
|
&[data-focus-visible] {
|
|
523
523
|
box-shadow: none;
|
|
524
|
-
outline: 2px solid ${
|
|
524
|
+
outline: 2px solid ${M("primary",700)};
|
|
525
525
|
outline-offset: 2px;
|
|
526
526
|
}
|
|
527
527
|
|
|
528
528
|
&[data-state='checked'],
|
|
529
529
|
&[data-state='indeterminate'] {
|
|
530
|
-
border: 1px solid ${
|
|
531
|
-
background-color: ${
|
|
530
|
+
border: 1px solid ${M("primary",700)};
|
|
531
|
+
background-color: ${M("primary",500)} !important;
|
|
532
532
|
|
|
533
533
|
svg path {
|
|
534
|
-
fill: ${
|
|
534
|
+
fill: ${M("primary",900)};
|
|
535
535
|
}
|
|
536
536
|
}
|
|
537
537
|
|
|
538
538
|
&[data-disabled] {
|
|
539
|
-
border: 1px solid ${
|
|
539
|
+
border: 1px solid ${M("neutral",400)};
|
|
540
540
|
background-color: transparent !important;
|
|
541
541
|
cursor: not-allowed;
|
|
542
542
|
|
|
@@ -550,34 +550,34 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
550
550
|
&[data-state='checked'],
|
|
551
551
|
&[data-state='indeterminate'] {
|
|
552
552
|
border: none !important;
|
|
553
|
-
background-color: ${
|
|
553
|
+
background-color: ${M("neutral",300)} !important;
|
|
554
554
|
|
|
555
555
|
svg path {
|
|
556
|
-
fill: ${
|
|
556
|
+
fill: ${M("neutral",500)} !important;
|
|
557
557
|
}
|
|
558
558
|
}
|
|
559
559
|
}
|
|
560
560
|
}
|
|
561
|
-
`,
|
|
562
|
-
background-color: ${
|
|
563
|
-
`,
|
|
561
|
+
`,ze=({name:a,value:n,checked:i,defaultChecked:r,disabled:o,indeterminate:t,onCheckedChange:d,children:c,...s})=>l(Le,{name:a,value:n,checked:t?"indeterminate":i,defaultChecked:r,disabled:o,onCheckedChange:d,"aria-label":s["aria-label"]||a,...s,children:[e(v.HiddenInput,{}),e(v.Control,{children:e(t?Z:R,{})}),e(v.Label,{children:c})]}),Ie=F.div`
|
|
562
|
+
background-color: ${M("neutral",100)};
|
|
563
|
+
`,De=F.span`
|
|
564
564
|
font-size: 16px;
|
|
565
565
|
font-weight: 700;
|
|
566
566
|
line-height: 24px;
|
|
567
567
|
text-align: left;
|
|
568
|
-
color: ${
|
|
568
|
+
color: ${M("neutral",800)};
|
|
569
569
|
display: flex;
|
|
570
570
|
align-items: center;
|
|
571
571
|
text-align: left;
|
|
572
572
|
gap: 10px;
|
|
573
|
-
`,
|
|
573
|
+
`,Be=F.div`
|
|
574
574
|
font-size: 12px;
|
|
575
575
|
font-weight: 400;
|
|
576
576
|
line-height: 16px;
|
|
577
577
|
text-align: left;
|
|
578
|
-
color: ${
|
|
578
|
+
color: ${M("neutral",600)};
|
|
579
579
|
margin-bottom: 8px;
|
|
580
|
-
`,
|
|
580
|
+
`,Fe=F(C.Root)`
|
|
581
581
|
max-width: 100%;
|
|
582
582
|
display: flex;
|
|
583
583
|
justify-content: center;
|
|
@@ -586,7 +586,7 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
586
586
|
padding: 4px 8px;
|
|
587
587
|
border-radius: 4px;
|
|
588
588
|
font-weight: 700;
|
|
589
|
-
color: ${
|
|
589
|
+
color: ${M("neutral",700)};
|
|
590
590
|
box-shadow: none;
|
|
591
591
|
|
|
592
592
|
height: 24px;
|
|
@@ -615,7 +615,7 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
615
615
|
align-items: center;
|
|
616
616
|
|
|
617
617
|
&:focus-visible {
|
|
618
|
-
--focus-ring-color: ${
|
|
618
|
+
--focus-ring-color: ${M("primary",700)};
|
|
619
619
|
}
|
|
620
620
|
}
|
|
621
621
|
|
|
@@ -624,47 +624,47 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
624
624
|
}
|
|
625
625
|
|
|
626
626
|
&[data-disabled='true'] {
|
|
627
|
-
border: 1px solid ${
|
|
628
|
-
background-color: ${
|
|
629
|
-
color: ${
|
|
630
|
-
}
|
|
631
|
-
`,
|
|
632
|
-
background-color: ${
|
|
633
|
-
border: 1px solid ${
|
|
634
|
-
`,
|
|
635
|
-
background-color: ${
|
|
636
|
-
border: 1px solid ${
|
|
637
|
-
`,
|
|
638
|
-
background-color: ${
|
|
639
|
-
border: 1px solid ${
|
|
640
|
-
color: ${
|
|
641
|
-
`,
|
|
642
|
-
background-color: ${
|
|
643
|
-
border: 1px solid ${
|
|
644
|
-
color: ${
|
|
645
|
-
`,
|
|
646
|
-
background-color: ${
|
|
647
|
-
border: 1px solid ${
|
|
648
|
-
color: ${
|
|
649
|
-
`,
|
|
627
|
+
border: 1px solid ${M("neutral",400)};
|
|
628
|
+
background-color: ${M("neutral",300)};
|
|
629
|
+
color: ${M("neutral",600)};
|
|
630
|
+
}
|
|
631
|
+
`,Ve=F(Fe)`
|
|
632
|
+
background-color: ${M("neutral",100)};
|
|
633
|
+
border: 1px solid ${M("neutral",300)};
|
|
634
|
+
`,Ae=F(Fe)`
|
|
635
|
+
background-color: ${M("neutral",200)};
|
|
636
|
+
border: 1px solid ${M("neutral",400)};
|
|
637
|
+
`,Me=F(Fe)`
|
|
638
|
+
background-color: ${M("success",100)};
|
|
639
|
+
border: 1px solid ${M("success",200)};
|
|
640
|
+
color: ${M("success",500)};
|
|
641
|
+
`,Te=F(Fe)`
|
|
642
|
+
background-color: ${M("warning",100)};
|
|
643
|
+
border: 1px solid ${M("warning",200)};
|
|
644
|
+
color: ${M("warning",500)};
|
|
645
|
+
`,_e=F(Fe)`
|
|
646
|
+
background-color: ${M("error",100)};
|
|
647
|
+
border: 1px solid ${M("error",200)};
|
|
648
|
+
color: ${M("error",500)};
|
|
649
|
+
`,Ee=({label:a,size:n="default",variant:i,disabled:r,icon:o,onClose:t,closable:d,...c})=>{let s=Ve;return"info-grey"===i?s=Ae:"success"===i?s=Me:"warning"===i?s=Te:"error"===i&&(s=_e),l(s,{size:n,"data-disabled":r,...c,children:[o?e(C.StartElement,{"aria-label":`${a} tag icon`,children:o}):null,e(C.Label,{"aria-label":a,children:a}),d&&!r?e(C.EndElement,{children:e(C.CloseTrigger,{onClick:t,"aria-label":`${a} tag close button`})}):null]})},He=({label:a,caption:n,value:o,layerItems:t,onChangeForRadioVariant:d})=>{const[c,s]=i({}),[p]=i((e=>{const l=e.find((e=>"radio"===e.variant&&e.isDefaultSelected));return l?.name})(t));r((()=>{let e={...c};t.forEach((l=>{l.isDefaultSelected&&(e={...e,["radio"===l.variant?a:l.name]:l.isDefaultSelected})})),s(e)}),[]);const h=(e,l,a,n)=>{const i={...c,[e]:l};s(i),a&&a(e,l,n)},x=Object.values(c).filter((e=>!0===e)).length;return l(y.Item,{value:o,width:"300px",children:[l(y.ItemTrigger,{padding:"16px",alignItems:"flex-start",children:[l(u,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:[l(De,{children:[a,e(Ee,{label:`${x} Active`,size:"small",variant:x>0?"success":"info-grey"})]}),e(Be,{children:n})]}),e(y.ItemIndicator,{display:"flex",children:e(j,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),e(y.ItemContent,{paddingLeft:"16px",paddingRight:"16px",children:e(se,{name:a,defaultValue:p,customGap:"0px",onChange:(e,l)=>h(e,!!l,d,l),children:t.map((l=>e(ke,{...l,onChange:(e,a)=>h(e,a,l.onChange)},l.label)))})})]})},Re=({children:l,defaultValue:a,...n})=>e(Ie,{style:{width:"300px"},children:e(y.Root,{defaultValue:a,multiple:!0,...n,children:l})}),Ze=F.div`
|
|
650
650
|
width: 300px;
|
|
651
|
-
background-color: ${
|
|
652
|
-
`,
|
|
651
|
+
background-color: ${M("neutral",100)};
|
|
652
|
+
`,Se=F.aside`
|
|
653
653
|
padding: 16px 16px 20px 16px;
|
|
654
|
-
border-bottom: 1px solid ${
|
|
655
|
-
`,
|
|
656
|
-
color: ${
|
|
654
|
+
border-bottom: 1px solid ${M("neutral",300)};
|
|
655
|
+
`,je=F.h2`
|
|
656
|
+
color: ${M("neutral",700)};
|
|
657
657
|
font-weight: 700;
|
|
658
658
|
font-size: 20px;
|
|
659
659
|
line-height: 28px;
|
|
660
660
|
text-align: left;
|
|
661
|
-
`,
|
|
662
|
-
color: ${
|
|
661
|
+
`,Ne=F.p`
|
|
662
|
+
color: ${M("neutral",600)};
|
|
663
663
|
font-weight: 400;
|
|
664
664
|
font-size: 14px;
|
|
665
665
|
line-height: 20px;
|
|
666
666
|
text-align: left;
|
|
667
|
-
`,
|
|
667
|
+
`,Oe=({title:a,description:n,tabBarVariant:i="panel",buttonTabs:r,defaultValue:o,onTabClick:t,children:d})=>l(Ze,{children:[l(Se,{role:"complementary",children:[e(je,{"aria-label":a,children:a}),e(Ne,{"aria-label":n,children:n})]}),r&&r.length>0?e(fe,{variant:i,defaultValue:o,tabs:r,onTabClick:t}):null,d]}),qe=F.div`
|
|
668
668
|
width: 100%;
|
|
669
669
|
min-width: ${({size:e})=>"small"===e?"234px":"366px"};
|
|
670
670
|
border-radius: 4px;
|
|
@@ -679,7 +679,7 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
679
679
|
button {
|
|
680
680
|
margin-left: ${({isButtonRight:e})=>e?0:"24px"};
|
|
681
681
|
}
|
|
682
|
-
`,
|
|
682
|
+
`,Pe=F.div`
|
|
683
683
|
display: flex;
|
|
684
684
|
align-items: flex-start;
|
|
685
685
|
gap: 8px;
|
|
@@ -687,190 +687,190 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
687
687
|
svg {
|
|
688
688
|
margin-top: 6px;
|
|
689
689
|
}
|
|
690
|
-
`,
|
|
691
|
-
color: ${
|
|
690
|
+
`,Ue=F.p`
|
|
691
|
+
color: ${M("neutral",800)};
|
|
692
692
|
font-size: ${({size:e})=>"small"===e?"14px":"18px"};
|
|
693
693
|
line-height: ${({size:e})=>"small"===e?"20px":"28px"};
|
|
694
694
|
font-weight: 400;
|
|
695
|
-
`,
|
|
696
|
-
color: ${
|
|
695
|
+
`,Ge=F.p`
|
|
696
|
+
color: ${M("neutral",700)};
|
|
697
697
|
font-size: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
698
698
|
line-height: ${({size:e})=>"small"===e?"16px":"24px"};
|
|
699
699
|
font-weight: 400;
|
|
700
700
|
margin-left: 24px;
|
|
701
|
-
`,
|
|
702
|
-
background-color: ${
|
|
703
|
-
border: 1px solid ${
|
|
704
|
-
color: ${
|
|
705
|
-
`,
|
|
706
|
-
background-color: ${
|
|
707
|
-
border: 1px solid ${
|
|
708
|
-
color: ${
|
|
709
|
-
`,
|
|
710
|
-
background-color: ${
|
|
711
|
-
border: 1px solid ${
|
|
712
|
-
color: ${
|
|
701
|
+
`,We=F(qe)`
|
|
702
|
+
background-color: ${M("neutral",100)};
|
|
703
|
+
border: 1px solid ${M("neutral",300)};
|
|
704
|
+
color: ${M("neutral",700)};
|
|
705
|
+
`,Ye=F(qe)`
|
|
706
|
+
background-color: ${M("neutral",200)};
|
|
707
|
+
border: 1px solid ${M("neutral",300)};
|
|
708
|
+
color: ${M("neutral",700)};
|
|
709
|
+
`,Ke=F(qe)`
|
|
710
|
+
background-color: ${M("success",100)};
|
|
711
|
+
border: 1px solid ${M("success",500)};
|
|
712
|
+
color: ${M("success",500)};
|
|
713
713
|
|
|
714
714
|
p {
|
|
715
|
-
color: ${
|
|
715
|
+
color: ${M("success",500)};
|
|
716
716
|
}
|
|
717
|
-
`,
|
|
718
|
-
background-color: ${
|
|
719
|
-
border: 1px solid ${
|
|
720
|
-
color: ${
|
|
717
|
+
`,Je=F(qe)`
|
|
718
|
+
background-color: ${M("warning",100)};
|
|
719
|
+
border: 1px solid ${M("warning",500)};
|
|
720
|
+
color: ${M("warning",500)};
|
|
721
721
|
|
|
722
722
|
p {
|
|
723
|
-
color: ${
|
|
723
|
+
color: ${M("warning",500)};
|
|
724
724
|
}
|
|
725
|
-
`,
|
|
726
|
-
background-color: ${
|
|
727
|
-
border: 1px solid ${
|
|
728
|
-
color: ${
|
|
725
|
+
`,Qe=F(qe)`
|
|
726
|
+
background-color: ${M("error",100)};
|
|
727
|
+
border: 1px solid ${M("error",500)};
|
|
728
|
+
color: ${M("error",500)};
|
|
729
729
|
|
|
730
730
|
p {
|
|
731
|
-
color: ${
|
|
731
|
+
color: ${M("error",500)};
|
|
732
732
|
}
|
|
733
|
-
`,
|
|
733
|
+
`,Xe=({label:a,caption:n,variant:i,size:r="large",icon:o=e(S,{height:"16px",width:"16px"}),onActionClick:t,actionLabel:d,isButtonRight:c})=>{let s=We;return"info-grey"===i?s=Ye:"success"===i?s=Ke:"warning"===i?s=Je:"error"===i&&(s=Qe),l(s,{isButtonRight:c,size:r,"aria-roledescription":"Note",children:[l("div",{children:[l(Pe,{children:[o,e(Ue,{size:r,children:a})]}),e(Ge,{size:r,children:n})]}),d?e(le,{label:d,variant:"info-white"===i||"info-grey"===i?"primary":"secondary",size:"large"===r?"default":"small",onClick:t}):null]})},el=F.div`
|
|
734
734
|
width: 100%;
|
|
735
735
|
display: flex;
|
|
736
736
|
justify-content: flex-start;
|
|
737
737
|
align-items: flex-start;
|
|
738
738
|
gap: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
739
739
|
margin-bottom: 20px;
|
|
740
|
-
`,
|
|
740
|
+
`,ll=F.div`
|
|
741
741
|
width: 3px;
|
|
742
742
|
height: 100%;
|
|
743
743
|
min-height: ${({size:e})=>"small"===e?"92px":"116px"};
|
|
744
|
-
background-color: ${
|
|
745
|
-
`,
|
|
746
|
-
color: ${({disabled:e})=>
|
|
744
|
+
background-color: ${M("error",500)};
|
|
745
|
+
`,al=F($.Label)`
|
|
746
|
+
color: ${({disabled:e})=>M("neutral",e?600:900)};
|
|
747
747
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
748
748
|
font-weight: 400;
|
|
749
749
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
750
750
|
margin-bottom: 2px;
|
|
751
751
|
|
|
752
752
|
.chakra-field__requiredIndicator {
|
|
753
|
-
color: ${({disabled:e})=>e?
|
|
753
|
+
color: ${({disabled:e})=>e?M("neutral",600):M("error",500)};
|
|
754
754
|
}
|
|
755
|
-
`,
|
|
756
|
-
color: ${({disabled:e})=>
|
|
755
|
+
`,nl=F($.HelperText)`
|
|
756
|
+
color: ${({disabled:e})=>M("neutral",e?500:600)};
|
|
757
757
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
758
758
|
font-weight: 400;
|
|
759
759
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
760
|
-
`,
|
|
761
|
-
color: ${
|
|
760
|
+
`,il=F($.ErrorText)`
|
|
761
|
+
color: ${M("error",500)};
|
|
762
762
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
763
763
|
font-weight: 700;
|
|
764
764
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
765
765
|
margin-top: 2px;
|
|
766
|
-
`,
|
|
766
|
+
`,rl=F(w)`
|
|
767
767
|
height: ${({size:e})=>"small"===e?"28px":"40px"};
|
|
768
768
|
width: 100%;
|
|
769
769
|
border-radius: 4px;
|
|
770
770
|
padding: ${({size:e})=>"small"===e?"4px 8px":"12px"};
|
|
771
771
|
margin-top: 8px;
|
|
772
|
-
background-color: ${
|
|
773
|
-
color: ${
|
|
774
|
-
border: 1px solid ${
|
|
772
|
+
background-color: ${M("neutral",100)};
|
|
773
|
+
color: ${M("neutral",800)};
|
|
774
|
+
border: 1px solid ${M("neutral",400)};
|
|
775
775
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
776
776
|
|
|
777
777
|
&:focus-visible,
|
|
778
778
|
&[data-focus-visible] {
|
|
779
|
-
border: 2px solid ${
|
|
780
|
-
outline: 2px solid ${
|
|
779
|
+
border: 2px solid ${M("neutral",700)};
|
|
780
|
+
outline: 2px solid ${M("primary",700)};
|
|
781
781
|
outline-offset: 2px;
|
|
782
782
|
}
|
|
783
783
|
|
|
784
784
|
&:active {
|
|
785
|
-
border: 1px solid ${
|
|
785
|
+
border: 1px solid ${M("primary",600)} !important;
|
|
786
786
|
outline: none !important;
|
|
787
787
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
788
788
|
}
|
|
789
789
|
|
|
790
790
|
&[data-invalid] {
|
|
791
|
-
border: 1px solid ${
|
|
791
|
+
border: 1px solid ${M("error",500)} !important;
|
|
792
792
|
}
|
|
793
793
|
|
|
794
794
|
&:disabled {
|
|
795
|
-
background-color: ${
|
|
796
|
-
border: 1px solid ${
|
|
795
|
+
background-color: ${M("neutral",200)};
|
|
796
|
+
border: 1px solid ${M("neutral",300)} !important;
|
|
797
797
|
}
|
|
798
798
|
|
|
799
|
-
${({value:e,defaultValue:
|
|
800
|
-
`,
|
|
799
|
+
${({value:e,defaultValue:l})=>e||l?`\n border: 1px solid ${M("neutral",700)};\n `:""}
|
|
800
|
+
`,ol=({label:a,caption:n,placeholder:r,errorMessage:o,required:t,disabled:d,size:c="default",defaultValue:s="",onChange:p,...h})=>{const[u,x]=i(s);return l(el,{size:c,className:"text-input-container",children:[o?e(ll,{size:c}):null,l($.Root,{required:t,invalid:!!o,gap:"0",children:[a?l(al,{size:c,disabled:d,"aria-label":a,children:[e($.RequiredIndicator,{"aria-label":"required"}),a,t?"":" (optional)"]}):null,n?e(nl,{size:c,disabled:d,"aria-label":n,children:n}):null,o?e(il,{size:c,children:o}):null,e(rl,{placeholder:r,disabled:d,size:c,onChange:e=>{x(e.target.value),p&&p(e)},value:u,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...h})]})]})},tl=F.div`
|
|
801
801
|
width: 100%;
|
|
802
802
|
display: flex;
|
|
803
803
|
justify-content: flex-start;
|
|
804
804
|
align-items: flex-start;
|
|
805
805
|
gap: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
806
806
|
margin-bottom: 16px;
|
|
807
|
-
`,
|
|
807
|
+
`,dl=F.div`
|
|
808
808
|
width: 3px;
|
|
809
809
|
height: 100%;
|
|
810
|
-
min-height: ${({size:e,hasHelperText:
|
|
811
|
-
background-color: ${
|
|
812
|
-
`,
|
|
813
|
-
color: ${({disabled:e})=>
|
|
810
|
+
min-height: ${({size:e,hasHelperText:l,hasErrorMessage:a})=>((e,l,a)=>{const n="small"===e;return l&&a?n?"192px":"208px":l?n?"174px":"186px":a?n?"168px":"180px":n?"169px":"180px"})(e,l,a)};
|
|
811
|
+
background-color: ${M("error",500)};
|
|
812
|
+
`,cl=F($.Label)`
|
|
813
|
+
color: ${({disabled:e})=>M("neutral",e?600:900)};
|
|
814
814
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
815
815
|
font-weight: 400;
|
|
816
816
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
817
817
|
margin-bottom: 2px;
|
|
818
818
|
|
|
819
819
|
.chakra-field__requiredIndicator {
|
|
820
|
-
color: ${({disabled:e})=>e?
|
|
820
|
+
color: ${({disabled:e})=>e?M("neutral",600):M("error",500)};
|
|
821
821
|
}
|
|
822
|
-
`,
|
|
823
|
-
color: ${({disabled:e})=>
|
|
822
|
+
`,sl=F($.HelperText)`
|
|
823
|
+
color: ${({disabled:e})=>M("neutral",e?500:600)};
|
|
824
824
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
825
825
|
font-weight: 400;
|
|
826
826
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
827
|
-
`,
|
|
828
|
-
color: ${
|
|
827
|
+
`,pl=F($.HelperText)`
|
|
828
|
+
color: ${M("neutral",600)};
|
|
829
829
|
font-size: 12px;
|
|
830
830
|
font-weight: 400;
|
|
831
831
|
line-height: 16px;
|
|
832
832
|
margin-top: 8px;
|
|
833
|
-
`,
|
|
834
|
-
color: ${
|
|
833
|
+
`,hl=F($.ErrorText)`
|
|
834
|
+
color: ${M("error",500)};
|
|
835
835
|
font-size: 14px;
|
|
836
836
|
font-weight: 700;
|
|
837
837
|
line-height: 20px;
|
|
838
838
|
margin-top: 2px;
|
|
839
|
-
`,
|
|
839
|
+
`,ul=F(k)`
|
|
840
840
|
height: 104px;
|
|
841
841
|
width: 100%;
|
|
842
842
|
border-radius: 4px;
|
|
843
843
|
padding: ${({size:e})=>"small"===e?"8px":"12px"};
|
|
844
844
|
margin-top: 8px;
|
|
845
|
-
background-color: ${
|
|
846
|
-
color: ${
|
|
847
|
-
border: 1px solid ${
|
|
845
|
+
background-color: ${M("neutral",100)};
|
|
846
|
+
color: ${M("neutral",800)};
|
|
847
|
+
border: 1px solid ${M("neutral",400)};
|
|
848
848
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
849
849
|
|
|
850
850
|
&:focus-visible,
|
|
851
851
|
&[data-focus-visible] {
|
|
852
|
-
border: 2px solid ${
|
|
853
|
-
outline: 2px solid ${
|
|
852
|
+
border: 2px solid ${M("neutral",700)};
|
|
853
|
+
outline: 2px solid ${M("primary",700)};
|
|
854
854
|
outline-offset: 2px;
|
|
855
855
|
}
|
|
856
856
|
|
|
857
857
|
&:active {
|
|
858
|
-
border: 1px solid ${
|
|
858
|
+
border: 1px solid ${M("primary",600)} !important;
|
|
859
859
|
outline: none !important;
|
|
860
860
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
861
861
|
}
|
|
862
862
|
|
|
863
863
|
&[data-invalid] {
|
|
864
|
-
border: 1px solid ${
|
|
864
|
+
border: 1px solid ${M("error",500)} !important;
|
|
865
865
|
}
|
|
866
866
|
|
|
867
867
|
&:disabled {
|
|
868
|
-
background-color: ${
|
|
869
|
-
border: 1px solid ${
|
|
868
|
+
background-color: ${M("neutral",200)};
|
|
869
|
+
border: 1px solid ${M("neutral",300)} !important;
|
|
870
870
|
}
|
|
871
871
|
|
|
872
|
-
${({value:e,defaultValue:
|
|
873
|
-
`,
|
|
872
|
+
${({value:e,defaultValue:l})=>e||l?`\n border: 1px solid ${M("neutral",700)};\n `:""}
|
|
873
|
+
`,xl=({label:a,caption:n,placeholder:o,errorMessage:t,required:d,disabled:c,size:s="default",defaultValue:p="",onChange:h,minLength:u,maxLength:x,...b})=>{const[g,m]=i(p),[f,v]=i(!1),[C,y]=i(!1),[w,k]=i("");r((()=>{const{length:e}=p;u&&e<u&&e>0&&(v(e<u),y(!1),k(`Enter at least ${u-e} characters`)),x&&e>x&&(v(!1),y(e>x),k(`You have ${x-e} characters remaining`))}),[]);return l(tl,{size:s,children:[t||f||C?e(dl,{size:s,hasHelperText:!!w,hasErrorMessage:!!t}):null,l($.Root,{required:d,invalid:!!t||f||C,gap:"0",children:[a?l(cl,{size:s,disabled:c,"aria-label":a,children:[e($.RequiredIndicator,{"aria-label":"required"}),a,d?"":" (optional)"]}):null,n?e(sl,{size:s,disabled:c,"aria-label":n,children:n}):null,t?e(hl,{children:t}):null,e(ul,{placeholder:o,disabled:c,size:s,onChange:e=>{m(e.target.value);const{length:l}=e.target.value;u&&x?(v(l<u),y(l>x),k(`You have ${x-l} characters remaining`)):u?(v(l<u),y(!1),k(l<u?`Enter at least ${u-l} characters`:"")):x&&(y(l>x),v(!1),k(`You have ${x-l} characters remaining`)),h&&h(e)},value:g,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...b}),f&&u?l(hl,{style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},children:["You need ",u-g.length," more characters"]}):null,C&&x?l(hl,{style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},children:["You have ",g.length-x," characters too many"]}):null,!w||C||f?null:e(pl,{"aria-label":w,children:w})]})]})},bl=F(h)`
|
|
874
874
|
width: 20px !important;
|
|
875
875
|
padding: 0 !important;
|
|
876
876
|
min-width: 20px !important;
|
|
@@ -883,14 +883,14 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
883
883
|
height: 15px;
|
|
884
884
|
|
|
885
885
|
path {
|
|
886
|
-
fill: ${
|
|
886
|
+
fill: ${M("neutral",800)};
|
|
887
887
|
}
|
|
888
888
|
}
|
|
889
889
|
|
|
890
890
|
&:hover {
|
|
891
891
|
background-color: color-mix(
|
|
892
892
|
in srgb,
|
|
893
|
-
${
|
|
893
|
+
${M("primary",500)} 20%,
|
|
894
894
|
transparent
|
|
895
895
|
);
|
|
896
896
|
}
|
|
@@ -898,13 +898,13 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
898
898
|
&:active {
|
|
899
899
|
background-color: color-mix(
|
|
900
900
|
in srgb,
|
|
901
|
-
${
|
|
901
|
+
${M("primary",500)} 40%,
|
|
902
902
|
transparent
|
|
903
903
|
);
|
|
904
904
|
}
|
|
905
905
|
|
|
906
906
|
&:focus-visible {
|
|
907
|
-
outline-color: ${
|
|
907
|
+
outline-color: ${M("primary",700)};
|
|
908
908
|
}
|
|
909
909
|
|
|
910
910
|
&:disabled {
|
|
@@ -912,72 +912,72 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
912
912
|
|
|
913
913
|
svg {
|
|
914
914
|
path {
|
|
915
|
-
fill: ${
|
|
915
|
+
fill: ${M("neutral",500)};
|
|
916
916
|
}
|
|
917
917
|
}
|
|
918
918
|
}
|
|
919
|
-
`,
|
|
919
|
+
`,gl=({icon:l,disabled:a,...n})=>e(bl,{"aria-label":n["aria-label"],disabled:a,...n,children:l}),ml=F(gl)`
|
|
920
920
|
width: 20px !important;
|
|
921
921
|
padding: 0 !important;
|
|
922
922
|
min-width: 20px !important;
|
|
923
923
|
height: 20px;
|
|
924
924
|
border-radius: 2px;
|
|
925
|
-
background-color: ${
|
|
925
|
+
background-color: ${M("neutral",300)};
|
|
926
926
|
|
|
927
927
|
svg {
|
|
928
928
|
width: 10px;
|
|
929
929
|
height: 10px;
|
|
930
930
|
|
|
931
931
|
path {
|
|
932
|
-
fill: ${
|
|
932
|
+
fill: ${M("neutral",800)};
|
|
933
933
|
}
|
|
934
934
|
}
|
|
935
935
|
|
|
936
936
|
&:hover {
|
|
937
|
-
background-color: ${
|
|
937
|
+
background-color: ${M("neutral",300)};
|
|
938
938
|
box-shadow: 0px 1px 2px -1px #0000001a;
|
|
939
939
|
box-shadow: 0px 1px 3px 0px #0000001a;
|
|
940
940
|
}
|
|
941
941
|
|
|
942
942
|
&:active {
|
|
943
|
-
background-color: ${
|
|
943
|
+
background-color: ${M("neutral",400)};
|
|
944
944
|
box-shadow: 0px 1px 2px -1px #0000001a;
|
|
945
945
|
box-shadow: 0px 1px 3px 0px #0000001a;
|
|
946
946
|
}
|
|
947
947
|
|
|
948
948
|
&:focus-visible {
|
|
949
|
-
outline-color: ${
|
|
949
|
+
outline-color: ${M("primary",700)};
|
|
950
950
|
}
|
|
951
951
|
|
|
952
952
|
&:disabled {
|
|
953
|
-
background-color: ${
|
|
953
|
+
background-color: ${M("neutral",200)} !important;
|
|
954
954
|
box-shadow: none;
|
|
955
955
|
|
|
956
956
|
svg {
|
|
957
957
|
path {
|
|
958
|
-
fill: ${
|
|
958
|
+
fill: ${M("neutral",400)};
|
|
959
959
|
}
|
|
960
960
|
}
|
|
961
961
|
}
|
|
962
|
-
`,
|
|
962
|
+
`,fl=({disabled:l,...a})=>e(ml,{icon:e(N,{}),"aria-label":a["aria-label"]||"Close",disabled:l,...a}),vl=F(L.Root)`
|
|
963
963
|
height: 60px;
|
|
964
964
|
padding: 40px 12px;
|
|
965
|
-
`,
|
|
965
|
+
`,Cl=F(L.Thumb)`
|
|
966
966
|
height: 20px;
|
|
967
967
|
width: 20px;
|
|
968
|
-
background-color: ${
|
|
969
|
-
border: 2px solid ${
|
|
968
|
+
background-color: ${M("primary",500)};
|
|
969
|
+
border: 2px solid ${M("primary",700)};
|
|
970
970
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
971
971
|
|
|
972
972
|
&:hover,
|
|
973
973
|
&[data-hover] {
|
|
974
974
|
outline: 4px solid
|
|
975
|
-
color-mix(in srgb, ${
|
|
975
|
+
color-mix(in srgb, ${M("primary",500)} 20%, transparent);
|
|
976
976
|
}
|
|
977
977
|
|
|
978
978
|
&[data-dragging] {
|
|
979
979
|
outline: 4px solid
|
|
980
|
-
color-mix(in srgb, ${
|
|
980
|
+
color-mix(in srgb, ${M("primary",500)} 40%, transparent);
|
|
981
981
|
|
|
982
982
|
div {
|
|
983
983
|
display: flex;
|
|
@@ -987,24 +987,24 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
987
987
|
&:focus-visible,
|
|
988
988
|
&[data-focus-visible] {
|
|
989
989
|
box-shadow: none;
|
|
990
|
-
outline: 2px solid ${
|
|
990
|
+
outline: 2px solid ${M("primary",700)};
|
|
991
991
|
outline-offset: 2px;
|
|
992
992
|
}
|
|
993
993
|
|
|
994
994
|
&[data-disabled] {
|
|
995
|
-
background-color: ${
|
|
995
|
+
background-color: ${M("neutral",400)};
|
|
996
996
|
border: none;
|
|
997
997
|
box-shadow: none;
|
|
998
998
|
outline: none;
|
|
999
999
|
cursor: not-allowed;
|
|
1000
1000
|
}
|
|
1001
|
-
|
|
1001
|
+
`,yl=F.div`
|
|
1002
1002
|
font-size: 14px;
|
|
1003
1003
|
line-height: 20px;
|
|
1004
|
-
color: ${
|
|
1004
|
+
color: ${M("neutral",800)};
|
|
1005
1005
|
height: 28px;
|
|
1006
|
-
background-color: ${
|
|
1007
|
-
border: 1px solid ${
|
|
1006
|
+
background-color: ${M("neutral",100)};
|
|
1007
|
+
border: 1px solid ${M("neutral",300)};
|
|
1008
1008
|
border-radius: 8px;
|
|
1009
1009
|
padding: 0 8px;
|
|
1010
1010
|
display: none;
|
|
@@ -1012,27 +1012,27 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1012
1012
|
align-items: center;
|
|
1013
1013
|
position: relative;
|
|
1014
1014
|
top: -30px;
|
|
1015
|
-
|
|
1016
|
-
background-color: ${
|
|
1015
|
+
`,$l=F(L.Track)`
|
|
1016
|
+
background-color: ${M("neutral",300)};
|
|
1017
1017
|
border: none;
|
|
1018
1018
|
box-shadow: none;
|
|
1019
|
-
`,
|
|
1020
|
-
background-color: ${
|
|
1021
|
-
border: 1px solid ${
|
|
1019
|
+
`,wl=F(L.Range)`
|
|
1020
|
+
background-color: ${M("primary",500)};
|
|
1021
|
+
border: 1px solid ${M("primary",700)};
|
|
1022
1022
|
border-radius: 8px;
|
|
1023
1023
|
|
|
1024
1024
|
&:disabled,
|
|
1025
1025
|
&[disabled],
|
|
1026
1026
|
&[data-disabled],
|
|
1027
1027
|
&[aria-disabled='true'] {
|
|
1028
|
-
--chakra-colors-border-emphasized: ${
|
|
1029
|
-
background-color: ${
|
|
1028
|
+
--chakra-colors-border-emphasized: ${M("neutral",400)};
|
|
1029
|
+
background-color: ${M("neutral",400)};
|
|
1030
1030
|
border: none;
|
|
1031
1031
|
}
|
|
1032
|
-
`,
|
|
1032
|
+
`,kl=F(L.Marker)`
|
|
1033
1033
|
font-size: 12px;
|
|
1034
1034
|
line-height: 16px;
|
|
1035
|
-
color: ${
|
|
1035
|
+
color: ${M("neutral",800)};
|
|
1036
1036
|
|
|
1037
1037
|
p {
|
|
1038
1038
|
position: relative;
|
|
@@ -1041,42 +1041,42 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1041
1041
|
|
|
1042
1042
|
&[data-state='under-value'] {
|
|
1043
1043
|
.chakra-slider__markerIndicator {
|
|
1044
|
-
background-color: ${({isCentred:e})=>
|
|
1044
|
+
background-color: ${({isCentred:e})=>M("neutral",e?500:200)};
|
|
1045
1045
|
}
|
|
1046
1046
|
|
|
1047
1047
|
&[data-disabled] {
|
|
1048
1048
|
.chakra-slider__markerIndicator {
|
|
1049
|
-
background-color: ${({isCentred:e})=>
|
|
1049
|
+
background-color: ${({isCentred:e})=>M("neutral",e?400:500)};
|
|
1050
1050
|
}
|
|
1051
1051
|
}
|
|
1052
1052
|
}
|
|
1053
1053
|
|
|
1054
1054
|
&[data-state='over-value'] {
|
|
1055
1055
|
.chakra-slider__markerIndicator {
|
|
1056
|
-
background-color: ${
|
|
1056
|
+
background-color: ${M("neutral",500)};
|
|
1057
1057
|
}
|
|
1058
1058
|
|
|
1059
1059
|
&[data-disabled] {
|
|
1060
1060
|
.chakra-slider__markerIndicator {
|
|
1061
|
-
background-color: ${
|
|
1061
|
+
background-color: ${M("neutral",400)};
|
|
1062
1062
|
}
|
|
1063
1063
|
}
|
|
1064
1064
|
}
|
|
1065
1065
|
|
|
1066
|
-
${({isMiddleMark:e})=>e?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${
|
|
1067
|
-
`,
|
|
1066
|
+
${({isMiddleMark:e})=>e?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${M("primary",700)} !important;\n }\n\n &[data-disabled] {\n .chakra-slider__markerIndicator {\n background-color: ${M("neutral",400)} !important;\n }\n }\n `:""};
|
|
1067
|
+
`,Ll=a=>{const{value:n}=a;return e(z,{each:n,children:(a,n)=>l(Cl,{index:n,children:[e(yl,{children:a}),e(L.HiddenInput,{})]},n)})},zl=n.forwardRef(((a,n)=>{const{marks:i,isCentred:r}=a;return i?.length?e(L.MarkerGroup,{ref:n,children:i.map(((a,n)=>{const i="number"==typeof a?a:a.value,o="number"==typeof a?void 0:a.label;return l(kl,{value:i,isCentred:r,isMiddleMark:r&&1===n,children:[e(L.MarkerIndicator,{}),e("p",{children:o})]},i)}))}):null})),Il=n.forwardRef(((a,n)=>{const{marks:r,onValueChange:o,isCentred:t,...d}=a,[c,s]=i(a.defaultValue||a.value||[0]);let p=r?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(t){const e=a.min||0,l=a.max||100;p=[e,(e+l)/2,l].map((e=>({value:e,label:void 0})))}const h=!!p?.some((e=>e.label));return e(vl,{ref:n,thumbAlignment:"center",onValueChange:e=>{s(e.value),o&&o(e)},origin:t?"center":"start",...d,children:l(L.Control,{"data-has-mark-label":h||void 0,children:[e($l,{children:e(wl,{})}),e(Ll,{value:c}),e(zl,{marks:p,isCentred:t})]})})})),Dl=F.div`
|
|
1068
1068
|
width: 20px;
|
|
1069
1069
|
height: 20px;
|
|
1070
1070
|
border-radius: 50%;
|
|
1071
1071
|
background-color: ${({color:e})=>e};
|
|
1072
|
-
border: 1px solid ${
|
|
1073
|
-
`,
|
|
1072
|
+
border: 1px solid ${M("neutral",400)};
|
|
1073
|
+
`,Bl=F.div`
|
|
1074
1074
|
width: 20px;
|
|
1075
1075
|
height: 8px;
|
|
1076
1076
|
border-radius: 2px;
|
|
1077
1077
|
background-color: ${({color:e})=>e};
|
|
1078
|
-
border: 1px solid ${
|
|
1079
|
-
`,
|
|
1078
|
+
border: 1px solid ${M("neutral",400)};
|
|
1079
|
+
`,Fl=F.div`
|
|
1080
1080
|
width: 20px;
|
|
1081
1081
|
height: 20px;
|
|
1082
1082
|
border-radius: 50%;
|
|
@@ -1089,47 +1089,47 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1089
1089
|
width: 10px;
|
|
1090
1090
|
height: 10px;
|
|
1091
1091
|
}
|
|
1092
|
-
`,
|
|
1092
|
+
`,Vl=F.div`
|
|
1093
1093
|
min-height: 36px;
|
|
1094
1094
|
width: 100%;
|
|
1095
1095
|
display: flex;
|
|
1096
1096
|
justify-content: space-between;
|
|
1097
1097
|
gap: 8px;
|
|
1098
1098
|
margin-bottom: 16px;
|
|
1099
|
-
`,
|
|
1099
|
+
`,Al=F.div`
|
|
1100
1100
|
display: flex;
|
|
1101
1101
|
gap: 8px;
|
|
1102
|
-
`,
|
|
1102
|
+
`,Ml=F.p`
|
|
1103
1103
|
font-size: 14px;
|
|
1104
1104
|
line-height: 20px;
|
|
1105
1105
|
font-weight: 400;
|
|
1106
|
-
color: ${
|
|
1107
|
-
`,
|
|
1106
|
+
color: ${M("neutral",800)};
|
|
1107
|
+
`,Tl=F.p`
|
|
1108
1108
|
font-size: 12px;
|
|
1109
1109
|
line-height: 16px;
|
|
1110
1110
|
font-weight: 400;
|
|
1111
|
-
color: ${
|
|
1112
|
-
`,
|
|
1111
|
+
color: ${M("neutral",700)};
|
|
1112
|
+
`,_l=F.div`
|
|
1113
1113
|
button {
|
|
1114
1114
|
height: 25px;
|
|
1115
1115
|
font-size: 12px;
|
|
1116
1116
|
line-height: 16px;
|
|
1117
1117
|
font-weight: 400;
|
|
1118
|
-
color: ${
|
|
1118
|
+
color: ${M("neutral",600)};
|
|
1119
1119
|
padding: 0 10px;
|
|
1120
1120
|
}
|
|
1121
|
-
`,
|
|
1121
|
+
`,El=({type:a,label:i,caption:r,color:o,onActionClick:t,showActionButton:d,pointIcon:c})=>{const[s,p]=n.useState(!0),h="line"===a,u="point"===a;return l(Vl,{children:[l(Al,{children:[l("div",{children:["raster"===a&&e(Dl,{color:o}),h&&e(Bl,{color:o}),u&&e(Fl,{color:o,children:c})]}),l("div",{children:[e(Ml,{"aria-label":i,children:i}),e(Tl,{"aria-label":r,children:r})]})]}),t&&d?e(_l,{children:e(le,{variant:"borderless",label:s?"Hide":"Show",rightIcon:e(s?P:q,{}),"aria-label":"Show or Hide action",onClick:()=>{p(!s),t&&t()}})}):null]})},Hl=F(y.Item)`
|
|
1122
1122
|
margin-bottom: 16px;
|
|
1123
|
-
border: 1px solid ${
|
|
1123
|
+
border: 1px solid ${M("neutral",300)};
|
|
1124
1124
|
border-radius: 4px;
|
|
1125
1125
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
1126
|
-
`,
|
|
1126
|
+
`,Rl=F(y.ItemTrigger)`
|
|
1127
1127
|
padding: 6px 8px;
|
|
1128
1128
|
align-items: center;
|
|
1129
|
-
background-color: ${
|
|
1129
|
+
background-color: ${M("neutral",100)};
|
|
1130
1130
|
|
|
1131
1131
|
&[aria-expanded='true'] {
|
|
1132
|
-
border-bottom: 1px solid ${
|
|
1132
|
+
border-bottom: 1px solid ${M("neutral",300)};
|
|
1133
1133
|
border-bottom-right-radius: 0px;
|
|
1134
1134
|
border-bottom-left-radius: 0px;
|
|
1135
1135
|
}
|
|
@@ -1138,19 +1138,19 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1138
1138
|
height: 10px;
|
|
1139
1139
|
width: 10px;
|
|
1140
1140
|
}
|
|
1141
|
-
`,
|
|
1141
|
+
`,Zl=F.p`
|
|
1142
1142
|
font-size: 12px;
|
|
1143
1143
|
font-weight: 700;
|
|
1144
1144
|
line-height: 16px;
|
|
1145
|
-
color: ${
|
|
1146
|
-
`,
|
|
1145
|
+
color: ${M("neutral",700)};
|
|
1146
|
+
`,Sl=F(y.ItemContent)`
|
|
1147
1147
|
padding: 12px 8px;
|
|
1148
1148
|
display: flex;
|
|
1149
1149
|
flex-direction: column;
|
|
1150
1150
|
|
|
1151
1151
|
.layer-parameters-item-child {
|
|
1152
1152
|
padding-bottom: 16px;
|
|
1153
|
-
border-bottom: 1px solid ${
|
|
1153
|
+
border-bottom: 1px solid ${M("neutral",300)};
|
|
1154
1154
|
margin-bottom: 16px;
|
|
1155
1155
|
|
|
1156
1156
|
&:last-child {
|
|
@@ -1159,23 +1159,23 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1159
1159
|
margin-bottom: 0px;
|
|
1160
1160
|
}
|
|
1161
1161
|
}
|
|
1162
|
-
`,
|
|
1162
|
+
`,jl=({label:a,children:n,openedByDefault:i})=>e("div",{children:e(y.Root,{defaultValue:i?[a]:[],multiple:!0,children:l(Hl,{value:a,children:[l(Rl,{children:[e(u,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:e(Zl,{children:a})}),e(y.ItemIndicator,{display:"flex",children:e(j,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),e(Sl,{children:o.map(n,(l=>e("div",{className:"layer-parameters-item-child",children:l})))})]})})}),Nl=F.div`
|
|
1163
1163
|
width: 100%;
|
|
1164
1164
|
display: flex;
|
|
1165
1165
|
flex-direction: column;
|
|
1166
1166
|
margin-bottom: 16px;
|
|
1167
|
-
`,
|
|
1167
|
+
`,Ol=F.div`
|
|
1168
1168
|
height: 20px;
|
|
1169
1169
|
width: 100%;
|
|
1170
1170
|
margin-bottom: 8px;
|
|
1171
|
-
border: 1px solid ${
|
|
1171
|
+
border: 1px solid ${M("neutral",300)};
|
|
1172
1172
|
border-radius: 4px;
|
|
1173
1173
|
${({gradient:e})=>e?`background: ${e};`:""}
|
|
1174
|
-
`,
|
|
1174
|
+
`,ql=F.div`
|
|
1175
1175
|
height: 20px;
|
|
1176
1176
|
width: 100%;
|
|
1177
1177
|
margin-bottom: 8px;
|
|
1178
|
-
border: 1px solid ${
|
|
1178
|
+
border: 1px solid ${M("neutral",300)};
|
|
1179
1179
|
border-radius: 4px;
|
|
1180
1180
|
display: flex;
|
|
1181
1181
|
align-items: center;
|
|
@@ -1189,76 +1189,76 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1189
1189
|
border-top-right-radius: 3px;
|
|
1190
1190
|
border-bottom-right-radius: 3px;
|
|
1191
1191
|
}
|
|
1192
|
-
`,
|
|
1192
|
+
`,Pl=F.div`
|
|
1193
1193
|
display: flex;
|
|
1194
1194
|
justify-content: space-between;
|
|
1195
1195
|
align-items: flex-start;
|
|
1196
|
-
`,
|
|
1196
|
+
`,Ul=F.p`
|
|
1197
1197
|
width: 100%;
|
|
1198
1198
|
font-size: 12px;
|
|
1199
1199
|
line-height: 16px;
|
|
1200
1200
|
font-weight: 400;
|
|
1201
|
-
color: ${
|
|
1201
|
+
color: ${M("neutral",800)};
|
|
1202
1202
|
text-align: center;
|
|
1203
|
-
`,
|
|
1203
|
+
`,Gl=F.p`
|
|
1204
1204
|
font-size: 12px;
|
|
1205
1205
|
line-height: 16px;
|
|
1206
1206
|
font-weight: 400;
|
|
1207
|
-
color: ${
|
|
1207
|
+
color: ${M("neutral",600)};
|
|
1208
1208
|
text-align: center;
|
|
1209
|
-
`,
|
|
1209
|
+
`,Wl=e=>{const l=e.map(((l,a)=>`${a/(e.length-1)*100}%`));return`linear-gradient(to right, ${e.map(((e,a)=>`${e} ${l[a]}`)).join(", ")})`},Yl=({colors:a,values:n,subLabels:i,isGradient:r})=>l(Nl,{children:[r?e(Ol,{gradient:Wl(a)}):e(ql,{children:a?.map(((l,a)=>e("div",{style:{backgroundColor:l,width:"100%",height:"100%"}},`${l}-${n?.[a]}`)))}),e(Pl,{children:n?.map((l=>e("div",{style:{width:r?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:e(Ul,{children:l},l)})))}),i&&i.length?e(Pl,{children:i.map((l=>e("div",{style:{width:r?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:e(Gl,{style:{width:"100%"},children:l},l)})))}):null]}),Kl=F.div`
|
|
1210
1210
|
padding: 12px;
|
|
1211
1211
|
padding-bottom: 20px;
|
|
1212
1212
|
display: flex;
|
|
1213
1213
|
gap: 12px;
|
|
1214
|
-
border-bottom: 1px solid ${
|
|
1215
|
-
`,
|
|
1214
|
+
border-bottom: 1px solid ${M("neutral",300)};
|
|
1215
|
+
`,Jl=F.div`
|
|
1216
1216
|
display: flex;
|
|
1217
1217
|
flex-direction: column;
|
|
1218
1218
|
|
|
1219
1219
|
svg {
|
|
1220
1220
|
path {
|
|
1221
|
-
fill: ${
|
|
1221
|
+
fill: ${M("neutral",500)} !important;
|
|
1222
1222
|
}
|
|
1223
1223
|
}
|
|
1224
|
-
`,
|
|
1224
|
+
`,Ql=F.div`
|
|
1225
1225
|
display: flex;
|
|
1226
1226
|
align-items: flex-start;
|
|
1227
1227
|
justify-content: space-between;
|
|
1228
1228
|
gap: 12px;
|
|
1229
1229
|
margin-bottom: 16px;
|
|
1230
|
-
`,
|
|
1230
|
+
`,Xl=F.p`
|
|
1231
1231
|
font-size: 16px;
|
|
1232
1232
|
line-height: 24px;
|
|
1233
1233
|
font-weight: 400;
|
|
1234
1234
|
text-align: left;
|
|
1235
|
-
color: ${
|
|
1236
|
-
`,
|
|
1235
|
+
color: ${M("neutral",800)};
|
|
1236
|
+
`,ea=F.p`
|
|
1237
1237
|
font-size: 14px;
|
|
1238
1238
|
line-height: 20px;
|
|
1239
1239
|
font-weight: 400;
|
|
1240
1240
|
text-align: left;
|
|
1241
|
-
color: ${
|
|
1242
|
-
`,
|
|
1241
|
+
color: ${M("neutral",600)};
|
|
1242
|
+
`,la=F.div`
|
|
1243
1243
|
display: flex;
|
|
1244
1244
|
justify-content: space-between;
|
|
1245
1245
|
|
|
1246
1246
|
button {
|
|
1247
1247
|
width: 110px;
|
|
1248
1248
|
}
|
|
1249
|
-
`,
|
|
1249
|
+
`,aa=F(I.Content)`
|
|
1250
1250
|
width: 234px;
|
|
1251
|
-
border: 1px solid ${
|
|
1251
|
+
border: 1px solid ${M("neutral",600)};
|
|
1252
1252
|
border-radius: 4px;
|
|
1253
|
-
`,
|
|
1253
|
+
`,na=F(I.Body)`
|
|
1254
1254
|
padding: 12px;
|
|
1255
|
-
`,
|
|
1255
|
+
`,ia=F.p`
|
|
1256
1256
|
font-size: 14px;
|
|
1257
1257
|
line-height: 20px;
|
|
1258
1258
|
font-weight: 400;
|
|
1259
1259
|
text-align: left;
|
|
1260
|
-
color: ${
|
|
1261
|
-
`,
|
|
1260
|
+
color: ${M("neutral",900)};
|
|
1261
|
+
`,ra=F.div`
|
|
1262
1262
|
display: flex;
|
|
1263
1263
|
align-items: center;
|
|
1264
1264
|
gap: 12px;
|
|
@@ -1278,9 +1278,9 @@ import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useSta
|
|
|
1278
1278
|
margin-top: 18px;
|
|
1279
1279
|
width: 100%;
|
|
1280
1280
|
}
|
|
1281
|
-
`,
|
|
1281
|
+
`,oa=({defaultValue:a,onOpacityChanged:n})=>{const[r,o]=i(a);return l(I.Root,{positioning:{placement:"bottom-end"},children:[e(I.Trigger,{asChild:!0,children:e(le,{label:"Opacity",size:"small",variant:"secondary",leftIcon:e(S,{})})}),e(I.Positioner,{children:e(aa,{children:l(na,{children:[e(ia,{children:"Opacity"}),l(ra,{children:[e(ol,{"aria-label":"Opacity",min:"0",max:"100",value:`${r}%`,onChange:e=>{const l=e.target.value||"0";let a=parseInt(l,10);a=Number.isNaN(a)?0:a,a=a<0?0:a,a=a>100?100:a,o(a),n&&n(a)},className:"opacity-control-text-input"}),e(Il,{min:0,max:100,value:[r],onValueChangeEnd:({value:e})=>{o(e[0]),n&&n(e[0])}})]})]})})})]})},ta=({layerName:a,dataUnit:n,onDrag:i,onUpClick:r,onDownClick:o,onRemoveClick:t,children:d,onInfoClick:c,onOpacityChanged:s})=>l(Kl,{children:[l(Jl,{children:[e(gl,{icon:e(U,{}),"aria-label":"Drag and drop",onClick:i}),l("div",{style:{display:"flex",flexDirection:"column",marginTop:"12px",gap:"12px"},children:[e(gl,{icon:e(j,{rotate:"180"}),"aria-label":"Up",onClick:r}),e(gl,{icon:e(j,{}),"aria-label":"Down",onClick:o})]})]}),l("div",{children:[l(Ql,{children:[l("div",{children:[e(Xl,{children:a}),e(ea,{children:n})]}),e(le,{label:"Remove",size:"small",variant:"secondary",rightIcon:e(N,{}),onClick:t})]}),d,l(la,{children:[e(le,{label:"About data",size:"small",variant:"secondary",leftIcon:e(S,{}),onClick:c}),e(oa,{defaultValue:80,onOpacityChanged:s})]})]})]}),da=F.div`
|
|
1282
1282
|
width: 290px;
|
|
1283
1283
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
1284
1284
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
1285
|
-
`,tl=({legendContent:l,analysisContent:n,onTabClick:o})=>{const[t,d]=a("legend-tab"),[c]=a(i.map(l,((e,r)=>({id:r,child:e,sequence:r})))||[]);return r(il,{children:[e(be,{tabs:[{label:"Legend",value:"legend-tab",icon:e(P,{})},{label:"Analysis",value:"analysis-tab",icon:e(G,{})}],onTabClick:e=>{d(e),o&&o(e)}}),"legend-tab"===t?e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:c.map((e=>e.child))}):null,"analysis-tab"===t?e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:n}):null]})};t.createRoot(document.getElementById("root")).render(e(n.StrictMode,{children:e(_,{value:V,children:e((()=>e("div",{className:"App",children:e("h1",{children:"Welcome to WRI OS"})})),{})})}));export{X as Button,ke as Checkbox,br as CloseButton,ur as IconButton,Ke as InlineMessage,Re as LayerGroup,Ze as LayerGroupContainer,we as LayerItem,Se as LayerPanel,Ar as LayerParameters,ol as LegendItem,tl as LegendPanel,oe as NavigationRail,Tr as QualitativeLegend,te as Radio,de as RadioGroup,Ur as ScaleLegend,zr as Slider,U as Switch,be as TabBar,Te as Tag,ar as TextInput,hr as Textarea};
|
|
1285
|
+
`,ca=({legendContent:a,analysisContent:n,onTabClick:r})=>{const[t,d]=i("legend-tab"),[c]=i(o.map(a,((e,l)=>({id:l,child:e,sequence:l})))||[]);return l(da,{children:[e(fe,{tabs:[{label:"Legend",value:"legend-tab",icon:e(G,{})},{label:"Analysis",value:"analysis-tab",icon:e(W,{})}],onTabClick:e=>{d(e),r&&r(e)}}),"legend-tab"===t?e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:c.map((e=>e.child))}):null,"analysis-tab"===t?e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:n}):null]})},sa=()=>l("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[e(Y,{name:"switch",defaultChecked:!0,onChange:console.log,children:"defaultChecked"}),e(Y,{name:"switch 2",isLabelOnLeft:!0,children:"isLabelOnLeft"}),e(Y,{name:"switch 3",children:"Normal Label Positon"}),e(Y,{name:"switch 4",disabled:!0,children:"disabled"}),e(Y,{name:"switch 4",disabled:!0,checked:!0,children:"disabled cheked"})]}),pa=()=>l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[e(le,{label:"Button Label",variant:"primary"}),e(le,{label:"Button Label",variant:"primary",size:"small"})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[e(le,{label:"Button Label",variant:"secondary"}),e(le,{label:"Button Label",variant:"secondary",size:"small"})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[e(le,{label:"Button Label",variant:"borderless"}),e(le,{label:"Button Label",variant:"borderless",size:"small"})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[e(le,{label:"Button Label",variant:"outline"}),e(le,{label:"Button Label",variant:"outline",size:"small"})]})]}),ha=()=>l("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(se,{name:"radio-group-1",defaultValue:"1",onChange:(e,l)=>console.log(e,l),children:[e(ce,{value:"1",children:"One"}),e(ce,{value:"2",children:"Two"}),e(ce,{value:"3",children:"Three"})]}),l(se,{name:"radio-group-2",defaultValue:"5",isRow:!0,children:[e(ce,{value:"4",children:"Four"}),e(ce,{value:"5",disabled:!0,children:"Five"}),e(ce,{value:"6",children:"Six"})]})]}),ua=()=>l("div",{style:{width:"300px"},children:[e(fe,{variant:"panel",tabs:[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}],onTabClick:console.log}),e("br",{}),e(fe,{variant:"panel",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two",icon:e(R,{})},{label:"Three",value:"three"}]}),e("br",{}),e(fe,{variant:"panel",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two",disabled:!0},{label:"Three",value:"three"}]}),e("br",{}),e(fe,{variant:"view",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}]})]}),xa=[{label:"Monday",checked:!1,value:"monday"},{label:"Tuesday",checked:!1,value:"tuesday"},{label:"Wednesday",checked:!1,value:"wednesday"},{label:"Thursday",checked:!1,value:"thursday"}],ba=()=>{const[n,r]=i(xa),o=n.every((e=>e.checked)),t=n.some((e=>e.checked))&&!o,d=n.map(((l,a)=>e(ze,{ms:"6",checked:l.checked,onCheckedChange:e=>{r((l=>{const n=[...l];return n[a]={...n[a],checked:!!e.checked},n}))},children:l.label},l.value)));return l(a,{children:[l("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[e(ze,{name:"Checkbox",value:"1",defaultChecked:!0,children:"Checkbox"}),e(ze,{name:"Checkbox",value:"1",checked:!0,disabled:!0,children:"Checkbox"}),e(ze,{name:"Checkbox",value:"1",disabled:!0,children:"Checkbox"})]}),l(D,{align:"flex-start",children:[e(ze,{checked:o,indeterminate:t,onCheckedChange:e=>{r((l=>l.map((l=>({...l,checked:!!e.checked})))))},children:"Weekdays"}),d]})]})},ga=()=>l(Re,{defaultValue:["1"],children:[e(He,{label:"Title 1_1",caption:"Caption 1",value:"1",layerItems:[{name:"layer-10",label:"Layer name 1",caption:"Caption 1",isDefaultSelected:!0},{name:"layer-11",label:"Layer name 2",caption:"Caption 1"}]}),e(He,{label:"Title 2",caption:"Caption 2",value:"2",layerItems:[{name:"layer-20",label:"Layer name 3",caption:"Caption 1",variant:"radio"},{name:"layer-21",label:"Layer name 4",caption:"Caption 4",variant:"radio"}]})]}),ma=()=>l(Re,{defaultValue:["3"],children:[e(He,{label:"Title 1_2",caption:"Caption 1",value:"3",layerItems:[{name:"layer-12",label:"Layer name 1",caption:"Caption 1"},{name:"layer-13",label:"Layer name 2",caption:"Caption 1"}]}),e(He,{label:"Title 2",caption:"Caption 2",value:"4",layerItems:[{name:"layer-22",label:"Layer name 3",caption:"Caption 1",variant:"radio"},{name:"layer-23",label:"Layer name 4",caption:"Caption 4",variant:"radio"}]})]}),fa=()=>l(Re,{defaultValue:["5"],children:[e(He,{label:"Title 1_3",caption:"Caption 1",value:"5",layerItems:[{name:"layer-14",label:"Layer name 1",caption:"Caption 1"},{name:"layer-15",label:"Layer name 2",caption:"Caption 1"}]}),e(He,{label:"Title 2",caption:"Caption 2",value:"6",layerItems:[{name:"layer-24",label:"Layer name 3",caption:"Caption 1",variant:"radio",isDefaultSelected:!0},{name:"layer-25",label:"Layer name 4",caption:"Caption 4",variant:"radio"}]})]}),va="label-1",Ca=()=>{const[a,n]=i(va);return l(Oe,{title:"Title and more",description:"Lorem ipsum dolor sit amet consectetur. Ac lectus massa auctor ac purus aliquam enim nibh accumsan. Nunc neque suspendisse.",tabBarVariant:"panel",buttonTabs:[{label:"Label 1",value:"label-1"},{label:"Label 2",value:"label-2"},{label:"Label 3",value:"label-3"}],defaultValue:va,onTabClick:n,children:["label-1"===a?e(ga,{}):null,"label-2"===a?e(ma,{}):null,"label-3"===a?e(fa,{}):null]})},ya="label-1",$a=()=>{const[a,n]=i(ya);return l(te,{defaultValue:ya,onTabClick:e=>{n(e)},onOpenChange:e=>{const l=document.querySelector(".app-container");l&&l?.setAttribute("class",e?"app-container":"app-container sidebar-closed")},tabs:[{label:"Label 1",value:"label-1",icon:e(R,{})},{label:"Label 2",value:"label-2",icon:e(R,{})},{label:"Label 3",value:"label-3",icon:e(R,{})}],children:["label-1"===a?e(Ca,{}):null,"label-2"===a?e("div",{children:"content 2"}):null,"label-3"===a?e("div",{children:"content 3"}):null]})},wa=()=>l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[e(Ee,{label:"Small",size:"small",variant:"info-white",icon:e(S,{}),closable:!0}),e(Ee,{label:"Default",variant:"info-white",icon:e(S,{}),closable:!0}),e(Ee,{label:"Large",size:"large",variant:"info-white",icon:e(S,{}),closable:!0}),e(Ee,{label:"Label",variant:"info-white"}),e(Ee,{label:"Disabled",variant:"info-white",icon:e(S,{}),closable:!0,disabled:!0})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[e(Ee,{label:"Small",size:"small",variant:"info-grey",icon:e(S,{}),closable:!0}),e(Ee,{label:"Default",variant:"info-grey",icon:e(S,{}),closable:!0}),e(Ee,{label:"Large",size:"large",variant:"info-grey",icon:e(S,{}),closable:!0}),e(Ee,{label:"Label",variant:"info-grey"}),e(Ee,{label:"Disabled",variant:"info-grey",icon:e(S,{}),closable:!0,disabled:!0})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[e(Ee,{label:"Small",size:"small",variant:"success",icon:e(S,{}),closable:!0}),e(Ee,{label:"Default",variant:"success",icon:e(S,{}),closable:!0}),e(Ee,{label:"Large",size:"large",variant:"success",icon:e(S,{}),closable:!0}),e(Ee,{label:"Label",variant:"success"}),e(Ee,{label:"Disabled",variant:"success",icon:e(S,{}),closable:!0,disabled:!0})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[e(Ee,{label:"Small",size:"small",variant:"warning",icon:e(S,{}),closable:!0}),e(Ee,{label:"Default",size:"small",variant:"warning",icon:e(S,{}),closable:!0}),e(Ee,{label:"Large",size:"large",variant:"warning",icon:e(S,{}),closable:!0}),e(Ee,{label:"Label",size:"small",variant:"warning"}),e(Ee,{label:"Disabled",size:"small",variant:"warning",icon:e(S,{}),closable:!0,disabled:!0})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[e(Ee,{label:"Small",size:"small",variant:"error",icon:e(S,{}),closable:!0}),e(Ee,{label:"Default",size:"small",variant:"error",icon:e(S,{}),closable:!0}),e(Ee,{label:"Large",size:"large",variant:"error",icon:e(S,{}),closable:!0}),e(Ee,{label:"Label",size:"small",variant:"error"}),e(Ee,{label:"Disabled",size:"small",variant:"error",icon:e(S,{}),closable:!0,disabled:!0})]})]}),ka=()=>l(a,{children:[l("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label"}),e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",isButtonRight:!0})]}),l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label"}),e(Xe,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",isButtonRight:!0})]}),l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",size:"small"}),e(Xe,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label"}),e(Xe,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",isButtonRight:!0})]}),l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",size:"small"}),e(Xe,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label"}),e(Xe,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",isButtonRight:!0})]}),l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",size:"small"}),e(Xe,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),l("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label"}),e(Xe,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",isButtonRight:!0})]}),l("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e(Xe,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",size:"small"}),e(Xe,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]})]}),La=()=>l("div",{children:[e(ol,{label:"Label",caption:"Caption",placeholder:"placeholder",defaultValue:"Default Value",required:!0}),e(ol,{label:"Label",caption:"Caption",placeholder:"placeholder",size:"small"}),e(ol,{label:"Label",caption:"Caption",placeholder:"placeholder",errorMessage:"Error Message",required:!0}),e(ol,{label:"Label",caption:"Caption",placeholder:"placeholder",required:!0,disabled:!0})]}),za=()=>l("div",{children:[e(xl,{label:"Label",caption:"Caption",placeholder:"placeholder",defaultValue:"Default Value",minLength:5,maxLength:200,required:!0}),e(xl,{label:"Label",caption:"Caption",placeholder:"placeholder",size:"small"}),e(xl,{label:"Label",caption:"Caption",placeholder:"placeholder",errorMessage:"Error Message",required:!0}),e(xl,{label:"Label",caption:"Caption",placeholder:"placeholder",required:!0,disabled:!0})]}),Ia=()=>l("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:[e(fl,{}),e(fl,{disabled:!0})]}),Da=()=>l("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:[e(gl,{icon:e(O,{}),"aria-label":"Menu"}),e(gl,{icon:e(R,{}),"aria-label":"Check"}),e(gl,{icon:e(S,{}),"aria-label":"Info",disabled:!0})]}),Ba=()=>l("div",{style:{width:"280px",display:"flex",flexDirection:"column",gap:"20px"},children:[e(Il,{min:0,max:100,defaultValue:[50]}),e(Il,{min:0,max:100,defaultValue:[50],marks:[{value:0,label:0},{value:25,label:25},{value:50,label:50},{value:75,label:75},{value:100,label:100}]}),e(Il,{min:0,max:100,defaultValue:[50],marks:[{value:0,label:0},{value:25,label:25},{value:50,label:50},{value:75,label:75},{value:100,label:100}],step:25}),e(Il,{value:[20,80]}),e(Il,{min:-100,max:100,defaultValue:[0],isCentred:!0}),e(Il,{value:[70],marks:[0,25,50,75,100],disabled:!0})]}),Fa=()=>l("div",{style:{width:"238px"},children:[e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),e(El,{type:"line",label:"Attribute",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),e(El,{type:"point",label:"Attribute",color:"#F3FFF2",pointIcon:e(S,{})})]}),Va=()=>e("div",{style:{width:"238px"},children:l(jl,{label:"Adjust layer parameters",children:[e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"})]})}),Aa=()=>l("div",{style:{width:"238px"},children:[e(Yl,{colors:["#E5F5F9","#2CA25F"],values:["Low","Medium","High"],subLabels:["<100K",">600K"],isGradient:!0}),e(Yl,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),e(Yl,{colors:["#A6611A","#DFC27D","#F5F5F5","#80CDC1","#018571"],values:["0%","25%","50%","75%","100%"]}),e(Yl,{colors:["#A6611A","#DFC27D","#F5F5F5","#80CDC1","#018571"],values:["Low","Low-medium","Medium-high","High","Extremely high"],subLabels:["(0 to 9 in 1,000,000)","(9 in 1,000,000 to 7 in 100,000)","(7 in 100,000 to 3 in 10,000)","(3 in 10,000 to 2 in 1,000)","(more than 2 in 1,000)"]})]}),Ma=()=>e("div",{style:{width:"290px"},children:l(ta,{layerName:"Layer Name",dataUnit:"Data Unit",onDrag:()=>console.log("drag"),onUpClick:()=>console.log("up"),onDownClick:()=>console.log("down"),onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[e(Yl,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),l(jl,{label:"Adjust layer parameters",children:[e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"})]})]})}),Ta=()=>e("div",{style:{width:"290px"},children:l(ta,{layerName:"Layer Name 2",dataUnit:"Data Unit",onDrag:()=>console.log("drag"),onUpClick:()=>console.log("up"),onDownClick:()=>console.log("down"),onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[e(Yl,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),l(jl,{label:"Adjust layer parameters",children:[e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"})]})]})}),_a=()=>e("div",{style:{width:"290px"},children:l(ta,{layerName:"Layer Name 3",dataUnit:"Data Unit",onDrag:()=>console.log("drag"),onUpClick:()=>console.log("up"),onDownClick:()=>console.log("down"),onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[e(Yl,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),e(El,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),e(Xe,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),l(jl,{label:"Adjust layer parameters",children:[e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"}),e("div",{children:"Component Placeholder"})]})]})}),Ea=()=>e(ca,{legendContent:l(a,{children:[e(Ma,{}),e(Ta,{}),e(_a,{})]}),analysisContent:e("div",{})});t.createRoot(document.getElementById("root")).render(e(n.StrictMode,{children:e(B,{value:A,children:e((()=>e("div",{className:"App",children:l("div",{className:"app-container",children:[e("h1",{style:{marginBottom:"20px"},children:"Welcome to WRI OS"}),l("div",{style:{display:"flex",alignItems:"flex-start",flexWrap:"wrap",gap:25},children:[e(Ea,{}),e(Ma,{}),e(Aa,{}),e(Va,{}),e(Fa,{}),e(Ba,{}),e(Da,{}),e(Ia,{}),e(La,{}),e(za,{}),e(ka,{}),e(wa,{}),e(ba,{}),e(ua,{}),e(ha,{}),e(pa,{}),e(sa,{})]}),e($a,{})]})})),{})})}));export{le as Button,ze as Checkbox,fl as CloseButton,gl as IconButton,Xe as InlineMessage,He as LayerGroup,Re as LayerGroupContainer,ke as LayerItem,Oe as LayerPanel,jl as LayerParameters,ta as LegendItem,ca as LegendPanel,te as NavigationRail,El as QualitativeLegend,ce as Radio,se as RadioGroup,Yl as ScaleLegend,Il as Slider,Y as Switch,fe as TabBar,Ee as Tag,ol as TextInput,xl as Textarea};
|
|
1286
1286
|
//# sourceMappingURL=index.js.map
|