@worldresources/wri-design-systems 1.2.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +5 -0
- package/dist/cjs/index.js +417 -129
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +678 -390
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +103 -7
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from"react";import n,{useState as r,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from"react";import n,{useState as r,useEffect as o,Children as t,cloneElement as d}from"react";import c from"react-dom/client";import{createSystem as p,defaultConfig as s,Button as h,Box as u,Spinner as x,Icon as b,Menu as g,Portal as m,Group as v,Checkbox as f,RadioCard as C,HStack as y,RadioGroup as $,Slider as w,For as k,Switch as L,Select as z,Tag as I,createListCollection as D,Field as A,Input as B,Textarea as M,Accordion as V,Tabs as F,Popover as _,Collapsible as R,Toast as T,createToaster as E,Toaster as H,Stack as Z,ChakraProvider as q}from"@chakra-ui/react";import S from"@emotion/styled";!function(e,l){void 0===l&&(l={});var a=l.insertAt;if("undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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/* */\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/* */\n");const N={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"}}},P=p(s,{theme:{tokens:{colors:N}}}),O=(e,l)=>P.tokens.getVar(`colors.${e}.${l}`)||N?.[e]?.[l]?.value,j=S(h)`
|
|
2
2
|
width: auto;
|
|
3
3
|
height: ${({size:e})=>"small"===e?"28px":"40px"};
|
|
4
4
|
font-size: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
@@ -16,15 +16,15 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
16
16
|
width: ${({size:e})=>"small"===e?"10px":"16px"};
|
|
17
17
|
height: ${({size:e})=>"small"===e?"10px":"16px"};
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
20
|
-
${({disabled:e})=>e?`\n background-color: ${
|
|
21
|
-
`,
|
|
22
|
-
${({disabled:e})=>e?`\n background-color: ${
|
|
23
|
-
`,
|
|
24
|
-
${({disabled:e})=>e?`\n background-color: transparent;\n color: ${
|
|
25
|
-
`,
|
|
26
|
-
${({disabled:e})=>e?`\n background-color: ${
|
|
27
|
-
`,
|
|
19
|
+
`,U=S(j)`
|
|
20
|
+
${({disabled:e})=>e?`\n background-color: ${O("neutral",300)};\n border: 1px solid ${O("neutral",400)};\n color: ${O("neutral",500)};\n\n &:hover {\n background-color: ${O("neutral",300)} !important;\n }\n `:`\n background-color: ${O("primary",500)};\n border: 1px solid ${O("primary",600)};\n color: ${O("primary",900)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n\n &:hover {\n background-color: ${O("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: ${O("primary",600)} !important;\n border: 1px solid ${O("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: ${O("primary",700)};\n background-color: ${O("primary",500)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n }\n `};
|
|
21
|
+
`,W=S(j)`
|
|
22
|
+
${({disabled:e})=>e?`\n background-color: ${O("neutral",200)};\n border: 1px solid ${O("neutral",300)};\n color: ${O("neutral",500)};\n\n &:hover {\n background-color: ${O("neutral",200)} !important;\n }\n `:`\n background-color: ${O("neutral",100)};\n border: 1px solid ${O("neutral",300)};\n color: ${O("neutral",700)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n\n &:hover {\n background-color: ${O("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: ${O("neutral",200)} !important;\n border: 1px solid ${O("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: ${O("primary",700)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n }\n `};
|
|
23
|
+
`,G=S(j)`
|
|
24
|
+
${({disabled:e})=>e?`\n background-color: transparent;\n color: ${O("neutral",500)};\n\n &:hover {\n background-color: transparent !important;\n }\n `:`\n background-color: transparent;\n border: none;\n color: ${O("neutral",800)};\n box-shadow: none;\n\n &:hover {\n background-color: color-mix(in srgb, ${O("primary",500)} 20%, transparent);\n }\n\n &:active {\n outline: none;\n background-color: color-mix(in srgb, ${O("primary",500)} 40%, transparent);\n box-shadow: 0px 4px 6px -1px #0000001A;\n }\n\n &:focus-visible {\n outline-color: ${O("primary",700)};\n box-shadow: 0px 1px 2px 0px #0000000D;\n }\n `};
|
|
25
|
+
`,Y=S(j)`
|
|
26
|
+
${({disabled:e})=>e?`\n background-color: ${O("neutral",200)};\n border: 1px solid ${O("neutral",300)};\n color: ${O("neutral",500)};\n\n &:hover {\n background-color: ${O("neutral",200)} !important;\n }\n `:`\n background-color: transparent;\n border: 1px solid ${O("primary",800)};\n color: ${O("primary",800)};\n\n &:hover {\n background-color: ${O("primary",100)};\n color: ${O("primary",900)};\n }\n\n &:active {\n outline: none;\n background-color: ${O("primary",200)} !important;\n border: 1px solid ${O("primary",900)} !important;\n color: ${O("primary",900)};\n }\n\n &:focus-visible {\n outline-color: ${O("primary",800)};\n background-color: ${O("primary",100)};\n }\n `};
|
|
27
|
+
`,K=({label:a,loading:i,variant:n="primary",size:r="default",disabled:o,leftIcon:t,rightIcon:d,...c})=>{let p=U;"secondary"===n?p=W:"borderless"===n?p=G:"outline"===n&&(p=Y);return e(p,{"aria-label":(()=>{let e=c["aria-label"]||a;return i&&(e="Loading"),e})(),size:r,disabled:o||i,"aria-disabled":o||i,...c,children:[t&&!i?l(u,{marginRight:a?2:0,display:"flex",alignItems:"center",children:t}):null,!d&&i?l(x,{size:"sm",marginRight:a?2:0}):null,a,d&&!i?l(u,{marginLeft:a?2:0,display:"flex",alignItems:"center",children:d}):null,d&&i?l(x,{size:"sm",marginLeft:a?2:0}):null]})},J=S(h)`
|
|
28
28
|
width: 20px !important;
|
|
29
29
|
padding: 0 !important;
|
|
30
30
|
min-width: 20px !important;
|
|
@@ -37,14 +37,14 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
37
37
|
height: 15px;
|
|
38
38
|
|
|
39
39
|
path {
|
|
40
|
-
fill: ${
|
|
40
|
+
fill: ${O("neutral",800)};
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&:hover {
|
|
45
45
|
background-color: color-mix(
|
|
46
46
|
in srgb,
|
|
47
|
-
${
|
|
47
|
+
${O("primary",500)} 20%,
|
|
48
48
|
transparent
|
|
49
49
|
);
|
|
50
50
|
}
|
|
@@ -52,13 +52,13 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
52
52
|
&:active {
|
|
53
53
|
background-color: color-mix(
|
|
54
54
|
in srgb,
|
|
55
|
-
${
|
|
55
|
+
${O("primary",500)} 40%,
|
|
56
56
|
transparent
|
|
57
57
|
);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
&:focus-visible {
|
|
61
|
-
outline-color: ${
|
|
61
|
+
outline-color: ${O("primary",700)};
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&:disabled {
|
|
@@ -66,78 +66,78 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
66
66
|
|
|
67
67
|
svg {
|
|
68
68
|
path {
|
|
69
|
-
fill: ${
|
|
69
|
+
fill: ${O("neutral",500)};
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
`,
|
|
73
|
+
`,Q=({icon:e,disabled:a,...i})=>l(J,{"aria-label":i["aria-label"],disabled:a,...i,children:e}),X=S(Q)`
|
|
74
74
|
width: 20px !important;
|
|
75
75
|
padding: 0 !important;
|
|
76
76
|
min-width: 20px !important;
|
|
77
77
|
height: 20px;
|
|
78
78
|
border-radius: 2px;
|
|
79
|
-
background-color: ${
|
|
79
|
+
background-color: ${O("neutral",300)};
|
|
80
80
|
|
|
81
81
|
svg {
|
|
82
82
|
width: 10px;
|
|
83
83
|
height: 10px;
|
|
84
84
|
|
|
85
85
|
path {
|
|
86
|
-
fill: ${
|
|
86
|
+
fill: ${O("neutral",800)};
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
&:hover {
|
|
91
|
-
background-color: ${
|
|
91
|
+
background-color: ${O("neutral",300)};
|
|
92
92
|
box-shadow: 0px 1px 2px -1px #0000001a;
|
|
93
93
|
box-shadow: 0px 1px 3px 0px #0000001a;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&:active {
|
|
97
|
-
background-color: ${
|
|
97
|
+
background-color: ${O("neutral",400)};
|
|
98
98
|
box-shadow: 0px 1px 2px -1px #0000001a;
|
|
99
99
|
box-shadow: 0px 1px 3px 0px #0000001a;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
&:focus-visible {
|
|
103
|
-
outline-color: ${
|
|
103
|
+
outline-color: ${O("primary",700)};
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
&:disabled {
|
|
107
|
-
background-color: ${
|
|
107
|
+
background-color: ${O("neutral",200)} !important;
|
|
108
108
|
box-shadow: none;
|
|
109
109
|
|
|
110
110
|
svg {
|
|
111
111
|
path {
|
|
112
|
-
fill: ${
|
|
112
|
+
fill: ${O("neutral",400)};
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
|
-
`,K=a=>l(x,{...a,children:e("svg",{viewBox:"0 0 16 17",children:[e("g",{clipPath:"url(#clip0_1216_84)",children:[l("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"}),l("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"})]}),l("defs",{children:l("clipPath",{id:"clip0_1216_84",children:l("rect",{width:"16",height:"16",fill:"white",transform:"translate(0 0.5)"})})})]})}),J=a=>l(x,{...a,children:e("svg",{viewBox:"0 0 16 17",children:[l("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"}),l("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"})]})}),Q=e=>l(x,{...e,children:l("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:l("path",{d:"M4.19632 10.4277L0 6.23139L1.04908 5.18231L4.19632 8.32955L10.9509 1.57495L12 2.62403L4.19632 10.4277Z",fill:"currentColor"})})}),X=e=>l(x,{...e,children:l("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:l("path",{d:"M0 6.75V5.25H12V6.75H0Z",fill:"auto"})})}),ee=e=>l(x,{...e,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),le=e=>l(x,{...e,children:l("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M8 13.3667L0 5.36667L1.86667 3.5L8 9.63333L14.1333 3.5L16 5.36667L8 13.3667Z",fill:"currentColor"})})}),ae=e=>l(x,{...e,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M1 10L0 9L4 5L0 1L1 0L5 4L9 0L10 1L6 5L10 9L9 10L5 6L1 10Z",fill:"currentColor"})})}),ie=e=>l(x,{...e,children:l("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),ne=e=>l(x,{...e,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),re=a=>l(x,{...a,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l("g",{clipPath:"url(#clip0_4626_1381)",children:l("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"})}),l("defs",{children:l("clipPath",{id:"clip0_4626_1381",children:l("rect",{width:"10",height:"10",fill:"white"})})})]})}),te=e=>l(x,{...e,children:l("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),oe=a=>l(x,{...a,children:e("svg",{width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l("g",{clipPath:"url(#clip0_5584_387)",children:l("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"})}),l("defs",{children:l("clipPath",{id:"clip0_5584_387",children:l("rect",{width:"16",height:"16",fill:"white",transform:"translate(0.5)"})})})]})}),de=e=>l(x,{...e,children:l("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),ce=({disabled:e,...a})=>l(Y,{icon:l(ae,{}),"aria-label":a["aria-label"]||"Close",disabled:e,...a}),se=E(g.Content)`
|
|
116
|
+
`,ee=a=>l(b,{...a,children:e("svg",{viewBox:"0 0 16 17",children:[e("g",{clipPath:"url(#clip0_1216_84)",children:[l("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"}),l("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"})]}),l("defs",{children:l("clipPath",{id:"clip0_1216_84",children:l("rect",{width:"16",height:"16",fill:"white",transform:"translate(0 0.5)"})})})]})}),le=a=>l(b,{...a,children:e("svg",{viewBox:"0 0 16 17",children:[l("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"}),l("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"})]})}),ae=e=>l(b,{...e,children:l("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:l("path",{d:"M4.19632 10.4277L0 6.23139L1.04908 5.18231L4.19632 8.32955L10.9509 1.57495L12 2.62403L4.19632 10.4277Z",fill:"currentColor"})})}),ie=e=>l(b,{...e,children:l("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:l("path",{d:"M0 6.75V5.25H12V6.75H0Z",fill:"auto"})})}),ne=e=>l(b,{...e,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),re=e=>l(b,{...e,children:l("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M8 13.3667L0 5.36667L1.86667 3.5L8 9.63333L14.1333 3.5L16 5.36667L8 13.3667Z",fill:"currentColor"})})}),oe=e=>l(b,{...e,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M1 10L0 9L4 5L0 1L1 0L5 4L9 0L10 1L6 5L10 9L9 10L5 6L1 10Z",fill:"currentColor"})})}),te=e=>l(b,{...e,children:l("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),de=e=>l(b,{...e,children:l("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),ce=a=>l(b,{...a,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l("g",{clipPath:"url(#clip0_4626_1381)",children:l("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"})}),l("defs",{children:l("clipPath",{id:"clip0_4626_1381",children:l("rect",{width:"10",height:"10",fill:"white"})})})]})}),pe=e=>l(b,{...e,children:l("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),se=a=>l(b,{...a,children:e("svg",{width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l("g",{clipPath:"url(#clip0_5584_387)",children:l("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"})}),l("defs",{children:l("clipPath",{id:"clip0_5584_387",children:l("rect",{width:"16",height:"16",fill:"white",transform:"translate(0.5)"})})})]})}),he=e=>l(b,{...e,children:l("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("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"})})}),ue=a=>l(b,{...a,children:e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l("g",{clipPath:"url(#clip0_4916_54426)",children:l("path",{d:"M8.6 14.6L15.65 7.55L14.25 6.15L8.6 11.8L5.75 8.95L4.35 10.35L8.6 14.6ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z",fill:"currentColor"})}),l("defs",{children:l("clipPath",{id:"clip0_4916_54426",children:l("rect",{width:"20",height:"20",fill:"white"})})})]})}),xe=e=>l(b,{...e,children:l("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M0 18.6477L10 1.375L20 18.6477H0ZM10 15.9205C10.2576 15.9205 10.4735 15.8333 10.6477 15.6591C10.822 15.4848 10.9091 15.2689 10.9091 15.0114C10.9091 14.7538 10.822 14.5379 10.6477 14.3636C10.4735 14.1894 10.2576 14.1023 10 14.1023C9.74242 14.1023 9.52652 14.1894 9.35227 14.3636C9.17803 14.5379 9.09091 14.7538 9.09091 15.0114C9.09091 15.2689 9.17803 15.4848 9.35227 15.6591C9.52652 15.8333 9.74242 15.9205 10 15.9205ZM9.09091 13.1932H10.9091V8.64773H9.09091V13.1932Z",fill:"currentColor"})})}),be=e=>l(b,{...e,children:l("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15ZM9 11H11V5H9V11ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z",fill:"currentColor"})})}),ge=({disabled:e,...a})=>l(X,{icon:l(oe,{}),"aria-label":a["aria-label"]||"Close",disabled:e,...a}),me=S(g.Content)`
|
|
117
117
|
width: 200px;
|
|
118
|
-
border: 1px solid ${
|
|
118
|
+
border: 1px solid ${O("neutral",600)};
|
|
119
119
|
border-radius: 4px;
|
|
120
120
|
padding: 8px;
|
|
121
|
-
`,
|
|
121
|
+
`,ve=S(g.Trigger)`
|
|
122
122
|
&[data-state='open'] {
|
|
123
|
-
background-color: ${({variant:e})=>"primary"===e?
|
|
124
|
-
border: 1px solid ${
|
|
123
|
+
background-color: ${({variant:e})=>"primary"===e?O("primary",600):O("neutral",200)} !important;
|
|
124
|
+
border: 1px solid ${O("primary",800)} !important;
|
|
125
125
|
}
|
|
126
|
-
`,
|
|
126
|
+
`,fe=S(g.Item)`
|
|
127
127
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
128
128
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
129
|
-
color: ${
|
|
129
|
+
color: ${O("neutral",800)};
|
|
130
130
|
padding: 4px;
|
|
131
131
|
cursor: pointer;
|
|
132
132
|
|
|
133
133
|
&[data-highlighted] {
|
|
134
|
-
background-color: ${
|
|
134
|
+
background-color: ${O("neutral",200)};
|
|
135
135
|
}
|
|
136
|
-
`,
|
|
136
|
+
`,Ce=n.forwardRef(((e,a)=>{const{portalled:i=!0,portalRef:n,...r}=e;return l(m,{disabled:!i,container:n,children:l(g.Positioner,{children:l(me,{ref:a,...r})})})})),ye=({variant:a="primary",size:i="default",mainActionLabel:n,mainActionOnClick:o=()=>{},otherActions:t=[],...d})=>{const[c,p]=r(!1);return e(v,{attached:!0,"aria-disabled":d.disabled,children:[l(K,{label:n,variant:a,size:i,onClick:o,...d}),e(g.Root,{onOpenChange:({open:e})=>p(e),positioning:{placement:"bottom-end"},children:[l(ve,{asChild:!0,"data-group-item":!0,"data-last":!0,variant:a,children:l(K,{variant:a,size:i,leftIcon:l(re,{rotate:c?"180":"0"}),disabled:d.disabled})}),l(Ce,{children:t.map((({label:e,value:a,onClick:n})=>l(fe,{onClick:n,value:a,size:i,children:e},a)))})]})]})},$e=S(f.Root)`
|
|
137
137
|
.chakra-checkbox__control {
|
|
138
138
|
width: 20px;
|
|
139
139
|
height: 20px;
|
|
140
|
-
border: 1px solid ${
|
|
140
|
+
border: 1px solid ${O("neutral",600)};
|
|
141
141
|
|
|
142
142
|
svg {
|
|
143
143
|
width: 12px;
|
|
@@ -150,34 +150,34 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
150
150
|
&:hover,
|
|
151
151
|
&[data-hover] {
|
|
152
152
|
outline: 4px solid
|
|
153
|
-
color-mix(in srgb, ${
|
|
153
|
+
color-mix(in srgb, ${O("primary",500)} 20%, transparent);
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
&:active,
|
|
157
157
|
&[data-active] {
|
|
158
158
|
outline: 4px solid
|
|
159
|
-
color-mix(in srgb, ${
|
|
159
|
+
color-mix(in srgb, ${O("primary",500)} 40%, transparent);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
&:focus-visible,
|
|
163
163
|
&[data-focus-visible] {
|
|
164
164
|
box-shadow: none;
|
|
165
|
-
outline: 2px solid ${
|
|
165
|
+
outline: 2px solid ${O("primary",700)};
|
|
166
166
|
outline-offset: 2px;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
&[data-state='checked'],
|
|
170
170
|
&[data-state='indeterminate'] {
|
|
171
|
-
border: 1px solid ${
|
|
172
|
-
background-color: ${
|
|
171
|
+
border: 1px solid ${O("primary",700)};
|
|
172
|
+
background-color: ${O("primary",500)} !important;
|
|
173
173
|
|
|
174
174
|
svg path {
|
|
175
|
-
fill: ${
|
|
175
|
+
fill: ${O("primary",900)};
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
&[data-disabled] {
|
|
180
|
-
border: 1px solid ${
|
|
180
|
+
border: 1px solid ${O("neutral",400)};
|
|
181
181
|
background-color: transparent !important;
|
|
182
182
|
cursor: not-allowed;
|
|
183
183
|
|
|
@@ -191,19 +191,126 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
191
191
|
&[data-state='checked'],
|
|
192
192
|
&[data-state='indeterminate'] {
|
|
193
193
|
border: none !important;
|
|
194
|
-
background-color: ${
|
|
194
|
+
background-color: ${O("neutral",300)} !important;
|
|
195
195
|
|
|
196
196
|
svg path {
|
|
197
|
-
fill: ${
|
|
197
|
+
fill: ${O("neutral",500)} !important;
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
|
-
`,
|
|
202
|
+
`,we=({name:a,value:i,checked:n,defaultChecked:r,disabled:o,indeterminate:t,onCheckedChange:d,children:c,...p})=>e($e,{name:a,value:i,checked:t?"indeterminate":n,defaultChecked:r,disabled:o,onCheckedChange:d,"aria-label":p["aria-label"]||a,gap:c?"10px":"0",...p,children:[l(f.HiddenInput,{}),l(f.Control,{children:l(t?ie:ae,{})}),l(f.Label,{children:c})]}),ke=S(C.Item)`
|
|
203
|
+
width: 241px;
|
|
204
|
+
min-height: 70px;
|
|
205
|
+
padding: 12px;
|
|
206
|
+
background-color: ${O("neutral",100)};
|
|
207
|
+
border: 1px solid ${O("neutral",300)};
|
|
208
|
+
border-radius: 4px;
|
|
209
|
+
cursor: pointer;
|
|
210
|
+
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
211
|
+
flex: none;
|
|
212
|
+
|
|
213
|
+
&:hover {
|
|
214
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
215
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
&:focus-visible,
|
|
219
|
+
&[data-focus-visible] {
|
|
220
|
+
outline: 2px solid ${O("primary",700)};
|
|
221
|
+
outline-offset: 2px;
|
|
222
|
+
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
223
|
+
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&[data-state='checked'] {
|
|
227
|
+
background-color: ${O("primary",100)};
|
|
228
|
+
border: 1px solid ${O("primary",700)};
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
&[data-disabled] {
|
|
232
|
+
outline: none;
|
|
233
|
+
box-shadow: none;
|
|
234
|
+
border: 1px solid ${O("neutral",300)};
|
|
235
|
+
background-color: ${O("neutral",100)};
|
|
236
|
+
color: ${O("neutral",500)};
|
|
237
|
+
cursor: not-allowed;
|
|
238
|
+
}
|
|
239
|
+
`,Le=S(C.ItemHiddenInput)``,ze=S(C.ItemControl)`
|
|
240
|
+
width: 100%;
|
|
241
|
+
padding: 0;
|
|
242
|
+
display: flex;
|
|
243
|
+
justify-content: space-between;
|
|
244
|
+
position: relative;
|
|
245
|
+
|
|
246
|
+
&[data-disabled] {
|
|
247
|
+
background-color: ${O("neutral",100)};
|
|
248
|
+
}
|
|
249
|
+
`,Ie=S.div`
|
|
250
|
+
width: 100%;
|
|
251
|
+
display: flex;
|
|
252
|
+
flex-direction: ${({variant:e})=>"centered"===e?"column":"row"};
|
|
253
|
+
align-items: center;
|
|
254
|
+
gap: 12px;
|
|
255
|
+
`,De=S.div`
|
|
256
|
+
svg {
|
|
257
|
+
height: 32px;
|
|
258
|
+
width: 32px;
|
|
259
|
+
}
|
|
260
|
+
`,Ae=S.div`
|
|
261
|
+
width: 100%;
|
|
262
|
+
`,Be=S.p`
|
|
263
|
+
font-size: 16px;
|
|
264
|
+
line-height: 24px;
|
|
265
|
+
font-weight: 400;
|
|
266
|
+
color: ${({disabled:e})=>O("neutral",e?500:800)};
|
|
267
|
+
text-align: ${({variant:e})=>"centered"===e?"center":"left"};
|
|
268
|
+
`,Me=S.p`
|
|
269
|
+
font-size: 14px;
|
|
270
|
+
line-height: 20px;
|
|
271
|
+
font-weight: 400;
|
|
272
|
+
color: ${({disabled:e})=>O("neutral",e?500:700)};
|
|
273
|
+
text-align: ${({variant:e})=>"centered"===e?"center":"left"};
|
|
274
|
+
`,Ve=S(C.ItemIndicator)`
|
|
275
|
+
position: absolute;
|
|
276
|
+
top: 0;
|
|
277
|
+
right: 0;
|
|
278
|
+
width: 20px;
|
|
279
|
+
height: 20px;
|
|
280
|
+
border: 1px solid ${O("neutral",600)};
|
|
281
|
+
cursor: pointer;
|
|
282
|
+
|
|
283
|
+
.dot {
|
|
284
|
+
width: 10px !important;
|
|
285
|
+
height: 10px !important;
|
|
286
|
+
scale: 1 !important;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
&[data-checked] {
|
|
290
|
+
border: 1px solid ${O("primary",700)};
|
|
291
|
+
background-color: ${O("neutral",100)} !important;
|
|
292
|
+
color: ${O("primary",700)};
|
|
293
|
+
|
|
294
|
+
&[data-disabled] {
|
|
295
|
+
border: 1px solid ${O("neutral",400)};
|
|
296
|
+
color: ${O("neutral",400)};
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
&[data-disabled] {
|
|
301
|
+
border: 1px solid ${O("neutral",400)};
|
|
302
|
+
}
|
|
303
|
+
`,Fe=S.div`
|
|
304
|
+
width: 100%;
|
|
305
|
+
border-top: 1px solid ${O("neutral",300)};
|
|
306
|
+
margin-top: 12px;
|
|
307
|
+
padding-top: 8px;
|
|
308
|
+
color: ${({disabled:e})=>e?O("neutral",500):"inherit"};
|
|
309
|
+
`,_e=({label:a,caption:i,icon:n,variant:r="default",disabled:o,children:t,value:d})=>e(ke,{value:d,disabled:o,children:[l(Le,{}),e(ze,{children:[e(Ie,{variant:r,children:[l(De,{children:n}),e(Ae,{children:[l(Be,{variant:r,disabled:o,"aria-label":a,"aria-disabled":o,children:a}),l(Me,{variant:r,disabled:o,"aria-label":i,"aria-disabled":o,children:i})]})]}),l(Ve,{})]}),"expanded"===r?l(Fe,{disabled:o,children:t}):null]}),Re=({children:e,...a})=>l(C.Root,{...a,children:l(y,{alignItems:"flex-start",flexWrap:"wrap",gap:"12px",children:e})}),Te=S($.Item)`
|
|
203
310
|
.radio-item-indicator {
|
|
204
311
|
width: 20px;
|
|
205
312
|
height: 20px;
|
|
206
|
-
border: 1px solid ${
|
|
313
|
+
border: 1px solid ${O("neutral",600)};
|
|
207
314
|
|
|
208
315
|
.dot {
|
|
209
316
|
width: 10px !important;
|
|
@@ -213,43 +320,43 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
213
320
|
|
|
214
321
|
&:hover {
|
|
215
322
|
outline: 4px solid
|
|
216
|
-
color-mix(in srgb, ${
|
|
323
|
+
color-mix(in srgb, ${O("primary",500)} 20%, transparent);
|
|
217
324
|
}
|
|
218
325
|
|
|
219
326
|
&:active {
|
|
220
327
|
outline: 4px solid
|
|
221
|
-
color-mix(in srgb, ${
|
|
328
|
+
color-mix(in srgb, ${O("primary",500)} 40%, transparent);
|
|
222
329
|
}
|
|
223
330
|
|
|
224
331
|
&:focus-visible,
|
|
225
332
|
&[data-focus-visible] {
|
|
226
|
-
outline: 2px solid ${
|
|
333
|
+
outline: 2px solid ${O("primary",700)};
|
|
227
334
|
outline-offset: 2px;
|
|
228
335
|
box-shadow: none;
|
|
229
336
|
|
|
230
337
|
&[data-checked] {
|
|
231
|
-
border: 2px solid ${
|
|
338
|
+
border: 2px solid ${O("primary",700)};
|
|
232
339
|
|
|
233
340
|
&[data-disabled] {
|
|
234
|
-
border: 2px solid ${
|
|
341
|
+
border: 2px solid ${O("neutral",400)};
|
|
235
342
|
}
|
|
236
343
|
}
|
|
237
344
|
}
|
|
238
345
|
|
|
239
346
|
&[data-checked] {
|
|
240
|
-
border: 1px solid ${
|
|
241
|
-
background-color: ${
|
|
242
|
-
color: ${
|
|
347
|
+
border: 1px solid ${O("primary",700)};
|
|
348
|
+
background-color: ${O("neutral",100)} !important;
|
|
349
|
+
color: ${O("primary",700)};
|
|
243
350
|
|
|
244
351
|
&[data-disabled] {
|
|
245
|
-
border: 1px solid ${
|
|
246
|
-
color: ${
|
|
352
|
+
border: 1px solid ${O("neutral",400)};
|
|
353
|
+
color: ${O("neutral",400)};
|
|
247
354
|
}
|
|
248
355
|
}
|
|
249
356
|
|
|
250
357
|
&[data-disabled] {
|
|
251
|
-
border: 1px solid ${
|
|
252
|
-
background-color: ${
|
|
358
|
+
border: 1px solid ${O("neutral",400)} !important;
|
|
359
|
+
background-color: ${O("neutral",100)} !important;
|
|
253
360
|
|
|
254
361
|
&:hover,
|
|
255
362
|
&:active {
|
|
@@ -257,25 +364,29 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
257
364
|
}
|
|
258
365
|
}
|
|
259
366
|
}
|
|
260
|
-
`,
|
|
367
|
+
`,Ee=({children:a,value:i,disabled:n,...r})=>e(Te,{value:i,disabled:n,...r,children:[l($.ItemHiddenInput,{}),l($.ItemIndicator,{className:"radio-item-indicator"}),a?l($.ItemText,{children:a}):null]}),He=({children:e,horizontal:a=!1,name:i,defaultValue:n,onChange:o,customGap:t,...d})=>{const[c,p]=r(n);let s=a?"20px":"8px";return s=t||s,l($.Root,{onValueChange:e=>{p(e.value),o&&o(i,e.value)},value:c,...d,children:l(y,{gap:s,flexDirection:a?"row":"column",alignItems:"flex-start",flexWrap:"wrap",children:e})})},Ze=S(w.Root)`
|
|
261
368
|
height: 60px;
|
|
262
369
|
padding: 40px 12px;
|
|
263
|
-
`,
|
|
370
|
+
`,qe=S(w.Thumb)`
|
|
264
371
|
height: 20px;
|
|
265
372
|
width: 20px;
|
|
266
|
-
background-color: ${
|
|
267
|
-
border: 2px solid ${
|
|
373
|
+
background-color: ${O("primary",500)};
|
|
374
|
+
border: 2px solid ${O("primary",700)};
|
|
268
375
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
269
376
|
|
|
270
377
|
&:hover,
|
|
271
378
|
&[data-hover] {
|
|
272
379
|
outline: 4px solid
|
|
273
|
-
color-mix(in srgb, ${
|
|
380
|
+
color-mix(in srgb, ${O("primary",500)} 20%, transparent);
|
|
381
|
+
|
|
382
|
+
.slider-value-preview {
|
|
383
|
+
display: flex;
|
|
384
|
+
}
|
|
274
385
|
}
|
|
275
386
|
|
|
276
387
|
&[data-dragging] {
|
|
277
388
|
outline: 4px solid
|
|
278
|
-
color-mix(in srgb, ${
|
|
389
|
+
color-mix(in srgb, ${O("primary",500)} 40%, transparent);
|
|
279
390
|
|
|
280
391
|
div {
|
|
281
392
|
display: flex;
|
|
@@ -285,24 +396,28 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
285
396
|
&:focus-visible,
|
|
286
397
|
&[data-focus-visible] {
|
|
287
398
|
box-shadow: none;
|
|
288
|
-
outline: 2px solid ${
|
|
399
|
+
outline: 2px solid ${O("primary",700)};
|
|
289
400
|
outline-offset: 2px;
|
|
401
|
+
|
|
402
|
+
.slider-value-preview {
|
|
403
|
+
display: flex;
|
|
404
|
+
}
|
|
290
405
|
}
|
|
291
406
|
|
|
292
407
|
&[data-disabled] {
|
|
293
|
-
background-color: ${
|
|
408
|
+
background-color: ${O("neutral",400)};
|
|
294
409
|
border: none;
|
|
295
410
|
box-shadow: none;
|
|
296
411
|
outline: none;
|
|
297
412
|
cursor: not-allowed;
|
|
298
413
|
}
|
|
299
|
-
|
|
414
|
+
`,Se=S.div`
|
|
300
415
|
font-size: 14px;
|
|
301
416
|
line-height: 20px;
|
|
302
|
-
color: ${
|
|
417
|
+
color: ${O("neutral",800)};
|
|
303
418
|
height: 28px;
|
|
304
|
-
background-color: ${
|
|
305
|
-
border: 1px solid ${
|
|
419
|
+
background-color: ${O("neutral",100)};
|
|
420
|
+
border: 1px solid ${O("neutral",300)};
|
|
306
421
|
border-radius: 8px;
|
|
307
422
|
padding: 0 8px;
|
|
308
423
|
display: none;
|
|
@@ -310,27 +425,27 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
310
425
|
align-items: center;
|
|
311
426
|
position: relative;
|
|
312
427
|
top: -30px;
|
|
313
|
-
`,
|
|
314
|
-
background-color: ${
|
|
428
|
+
`,Ne=S(w.Track)`
|
|
429
|
+
background-color: ${O("neutral",300)};
|
|
315
430
|
border: none;
|
|
316
431
|
box-shadow: none;
|
|
317
|
-
`,
|
|
318
|
-
background-color: ${
|
|
319
|
-
border: 1px solid ${
|
|
432
|
+
`,Pe=S(w.Range)`
|
|
433
|
+
background-color: ${O("primary",500)};
|
|
434
|
+
border: 1px solid ${O("primary",700)};
|
|
320
435
|
border-radius: 8px;
|
|
321
436
|
|
|
322
437
|
&:disabled,
|
|
323
438
|
&[disabled],
|
|
324
439
|
&[data-disabled],
|
|
325
440
|
&[aria-disabled='true'] {
|
|
326
|
-
--chakra-colors-border-emphasized: ${
|
|
327
|
-
background-color: ${
|
|
441
|
+
--chakra-colors-border-emphasized: ${O("neutral",400)};
|
|
442
|
+
background-color: ${O("neutral",400)};
|
|
328
443
|
border: none;
|
|
329
444
|
}
|
|
330
|
-
`,
|
|
445
|
+
`,Oe=S(w.Marker)`
|
|
331
446
|
font-size: 12px;
|
|
332
447
|
line-height: 16px;
|
|
333
|
-
color: ${
|
|
448
|
+
color: ${O("neutral",800)};
|
|
334
449
|
|
|
335
450
|
p {
|
|
336
451
|
position: relative;
|
|
@@ -339,33 +454,33 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
339
454
|
|
|
340
455
|
&[data-state='under-value'] {
|
|
341
456
|
.chakra-slider__markerIndicator {
|
|
342
|
-
background-color: ${({isCentred:e})=>
|
|
457
|
+
background-color: ${({isCentred:e})=>O("neutral",e?500:200)};
|
|
343
458
|
}
|
|
344
459
|
|
|
345
460
|
&[data-disabled] {
|
|
346
461
|
.chakra-slider__markerIndicator {
|
|
347
|
-
background-color: ${({isCentred:e})=>
|
|
462
|
+
background-color: ${({isCentred:e})=>O("neutral",e?400:500)};
|
|
348
463
|
}
|
|
349
464
|
}
|
|
350
465
|
}
|
|
351
466
|
|
|
352
467
|
&[data-state='over-value'] {
|
|
353
468
|
.chakra-slider__markerIndicator {
|
|
354
|
-
background-color: ${
|
|
469
|
+
background-color: ${O("neutral",500)};
|
|
355
470
|
}
|
|
356
471
|
|
|
357
472
|
&[data-disabled] {
|
|
358
473
|
.chakra-slider__markerIndicator {
|
|
359
|
-
background-color: ${
|
|
474
|
+
background-color: ${O("neutral",400)};
|
|
360
475
|
}
|
|
361
476
|
}
|
|
362
477
|
}
|
|
363
478
|
|
|
364
|
-
${({isMiddleMark:e})=>e?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${
|
|
365
|
-
`,
|
|
479
|
+
${({isMiddleMark:e})=>e?`\n --ty: -6px !important;\n\n .chakra-slider__markerIndicator {\n height: 16px;\n width: 4px;\n background-color: ${O("primary",700)} !important;\n }\n\n &[data-disabled] {\n .chakra-slider__markerIndicator {\n background-color: ${O("neutral",400)} !important;\n }\n }\n `:""};
|
|
480
|
+
`,je=a=>{const{value:i}=a;return l(k,{each:i,children:(a,i)=>e(qe,{index:i,children:[l(Se,{className:"slider-value-preview",children:a}),l(w.HiddenInput,{})]},i)})},Ue=n.forwardRef(((a,i)=>{const{marks:n,isCentred:r}=a;return n?.length?l(w.MarkerGroup,{ref:i,children:n.map(((a,i)=>{const n="number"==typeof a?a:a.value,o="number"==typeof a?void 0:a.label;return e(Oe,{value:n,isCentred:r,isMiddleMark:r&&1===i,children:[l(w.MarkerIndicator,{}),l("p",{children:o})]},n)}))}):null})),We=n.forwardRef(((a,i)=>{const{marks:n,onValueChange:t,isCentred:d,...c}=a,[p,s]=r(c.value||[0]);o((()=>{s(c.value||[0])}),[c.value]);let h=n?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(d){const e=c.min||0,l=c.max||100;h=[e,(e+l)/2,l].map((e=>({value:e,label:void 0})))}const u=!!h?.some((e=>e.label));return l(Ze,{ref:i,thumbAlignment:"center",onValueChange:e=>{s(e.value),t&&t(e)},origin:d?"center":"start",...c,children:e(w.Control,{"data-has-mark-label":u||void 0,children:[l(Ne,{children:l(Pe,{})}),l(je,{value:p}),l(Ue,{marks:h,isCentred:d})]})})})),Ge=S.div`
|
|
366
481
|
display: flex;
|
|
367
482
|
align-items: center;
|
|
368
|
-
`,
|
|
483
|
+
`,Ye=S(L.Root)`
|
|
369
484
|
.chakra-switch__control-container {
|
|
370
485
|
width: 42px;
|
|
371
486
|
height: 26px;
|
|
@@ -373,11 +488,11 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
373
488
|
display: flex;
|
|
374
489
|
justify-content: center;
|
|
375
490
|
align-items: center;
|
|
376
|
-
background-color: ${
|
|
491
|
+
background-color: ${O("neutral",600)};
|
|
377
492
|
}
|
|
378
493
|
|
|
379
494
|
&[data-state='checked'] .chakra-switch__control-container {
|
|
380
|
-
background-color: ${
|
|
495
|
+
background-color: ${O("primary",700)};
|
|
381
496
|
}
|
|
382
497
|
|
|
383
498
|
&[data-disabled] .chakra-switch__control-container {
|
|
@@ -389,22 +504,22 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
389
504
|
width: 40px;
|
|
390
505
|
display: flex;
|
|
391
506
|
align-items: center;
|
|
392
|
-
background-color: ${
|
|
507
|
+
background-color: ${O("neutral",500)};
|
|
393
508
|
|
|
394
509
|
&:focus-visible,
|
|
395
510
|
&[data-focus-visible] {
|
|
396
511
|
box-shadow: none;
|
|
397
512
|
outline: none;
|
|
398
|
-
outline: 2px solid ${
|
|
513
|
+
outline: 2px solid ${O("primary",700)};
|
|
399
514
|
outline-offset: 3px;
|
|
400
515
|
}
|
|
401
516
|
|
|
402
517
|
&[data-state='checked'] {
|
|
403
|
-
background-color: ${
|
|
518
|
+
background-color: ${O("primary",500)};
|
|
404
519
|
}
|
|
405
520
|
|
|
406
521
|
&[data-disabled] {
|
|
407
|
-
background-color: ${
|
|
522
|
+
background-color: ${O("neutral",300)};
|
|
408
523
|
}
|
|
409
524
|
}
|
|
410
525
|
|
|
@@ -413,19 +528,19 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
413
528
|
width: 12px;
|
|
414
529
|
|
|
415
530
|
path {
|
|
416
|
-
fill: ${
|
|
531
|
+
fill: ${O("primary",700)};
|
|
417
532
|
}
|
|
418
533
|
}
|
|
419
534
|
|
|
420
535
|
&:hover,
|
|
421
536
|
&[data-hover] {
|
|
422
537
|
outline: 9px solid
|
|
423
|
-
color-mix(in srgb, ${
|
|
538
|
+
color-mix(in srgb, ${O("primary",500)} 20%, transparent);
|
|
424
539
|
}
|
|
425
540
|
|
|
426
541
|
&[data-active] {
|
|
427
542
|
outline: 9px solid
|
|
428
|
-
color-mix(in srgb, ${
|
|
543
|
+
color-mix(in srgb, ${O("primary",500)} 40%, transparent);
|
|
429
544
|
}
|
|
430
545
|
|
|
431
546
|
&[data-disabled] {
|
|
@@ -434,13 +549,81 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
434
549
|
&[data-state='checked'] {
|
|
435
550
|
svg {
|
|
436
551
|
path {
|
|
437
|
-
fill: ${
|
|
552
|
+
fill: ${O("neutral",500)};
|
|
438
553
|
}
|
|
439
554
|
}
|
|
440
555
|
}
|
|
441
556
|
}
|
|
442
557
|
}
|
|
443
|
-
`,
|
|
558
|
+
`,Ke=({name:a,defaultChecked:i=!1,onChange:n,disabled:r=!1,isLabelOnLeft:o=!1,children:t,...d})=>l(Ge,{children:e(Ye,{id:a,name:a,"aria-label":d["aria-label"]||a,defaultChecked:i,onCheckedChange:({checked:e})=>{n&&n(a,e)},disabled:r,...d,children:[o&&null!=t?l(L.Label,{children:t}):null,l(L.HiddenInput,{style:{width:"42px",height:"26px"}}),l("div",{className:"chakra-switch__control-container",children:l(L.Control,{children:l(L.Thumb,{children:l(L.ThumbIndicator,{display:"flex",children:l(ae,{})})})})}),o||null==t?null:l(L.Label,{children:t})]})}),Je=S.div`
|
|
559
|
+
position: relative;
|
|
560
|
+
height: 100%;
|
|
561
|
+
`,Qe=S.div`
|
|
562
|
+
margin-left: ${({hasErrorMessage:e})=>e?"19px":"0px"};
|
|
563
|
+
`,Xe=S.p`
|
|
564
|
+
font-size: 16px;
|
|
565
|
+
line-height: 24px;
|
|
566
|
+
color: ${O("neutral",900)};
|
|
567
|
+
|
|
568
|
+
span {
|
|
569
|
+
color: ${O("error",500)};
|
|
570
|
+
margin-right: 3px;
|
|
571
|
+
}
|
|
572
|
+
`,el=S.p`
|
|
573
|
+
font-size: 14px;
|
|
574
|
+
line-height: 20px;
|
|
575
|
+
color: ${O("neutral",600)};
|
|
576
|
+
`,ll=S.div`
|
|
577
|
+
margin-top: 12px;
|
|
578
|
+
display: flex;
|
|
579
|
+
flex-direction: ${({horizontal:e})=>e?"row":"column"};
|
|
580
|
+
flex-wrap: wrap;
|
|
581
|
+
gap: ${({horizontal:e})=>e?"20px":"12px"};
|
|
582
|
+
`,al=S.div`
|
|
583
|
+
width: 3px;
|
|
584
|
+
height: 100%;
|
|
585
|
+
background-color: ${O("error",500)};
|
|
586
|
+
position: absolute;
|
|
587
|
+
top: 0;
|
|
588
|
+
left: 0;
|
|
589
|
+
`,il=S.p`
|
|
590
|
+
font-size: 14px;
|
|
591
|
+
line-height: 20px;
|
|
592
|
+
font-weight: 700;
|
|
593
|
+
color: ${O("error",500)};
|
|
594
|
+
`,nl=({label:a,caption:i,checkboxes:n,defaultValue:o,onCheckedChange:t,errorMessage:d,horizontal:c,required:p})=>{const[s,h]=r(o?{[o]:!0}:{});return e(Je,{"aria-roledescription":"group","aria-labelledby":a,children:[d?l(al,{}):null,e(Qe,{hasErrorMessage:!!d,children:[e(Xe,{"aria-label":a,children:[p&&l("span",{"aria-label":"required",children:"*"}),a]}),l(el,{"aria-label":i,children:i}),d?l(il,{"aria-label":d,children:d}):null,l(ll,{horizontal:c,children:n.map((e=>l(we,{defaultChecked:o===e.value,onCheckedChange:({checked:l})=>((e,l)=>{const a={...s};l&&(a[l]=e,h(a)),t&&t(a)})(l,e.name),...e},e.name)))})]})]})},rl=S.div`
|
|
595
|
+
position: relative;
|
|
596
|
+
height: 100%;
|
|
597
|
+
`,ol=S.div`
|
|
598
|
+
margin-left: ${({hasErrorMessage:e})=>e?"19px":"0px"};
|
|
599
|
+
`,tl=S.p`
|
|
600
|
+
font-size: 16px;
|
|
601
|
+
line-height: 24px;
|
|
602
|
+
color: ${O("neutral",900)};
|
|
603
|
+
|
|
604
|
+
span {
|
|
605
|
+
color: ${O("error",500)};
|
|
606
|
+
margin-right: 3px;
|
|
607
|
+
}
|
|
608
|
+
`,dl=S.p`
|
|
609
|
+
font-size: 14px;
|
|
610
|
+
line-height: 20px;
|
|
611
|
+
color: ${O("neutral",600)};
|
|
612
|
+
`,cl=S.div`
|
|
613
|
+
margin-top: 12px;
|
|
614
|
+
`,pl=S.div`
|
|
615
|
+
width: 3px;
|
|
616
|
+
height: 100%;
|
|
617
|
+
background-color: ${O("error",500)};
|
|
618
|
+
position: absolute;
|
|
619
|
+
top: 0;
|
|
620
|
+
left: 0;
|
|
621
|
+
`,sl=S.p`
|
|
622
|
+
font-size: 14px;
|
|
623
|
+
line-height: 20px;
|
|
624
|
+
font-weight: 700;
|
|
625
|
+
color: ${O("error",500)};
|
|
626
|
+
`,hl=({label:a,caption:i,name:n,radios:r,defaultValue:o,onCheckedChange:t,errorMessage:d,horizontal:c,required:p})=>e(rl,{"aria-roledescription":"group","aria-labelledby":a,children:[d?l(pl,{}):null,e(ol,{hasErrorMessage:!!d,children:[e(tl,{"aria-label":a,children:[p&&l("span",{"aria-label":"required",children:"*"}),a]}),l(dl,{"aria-label":i,children:i}),d?l(sl,{"aria-label":d,children:d}):null,l(cl,{children:l(He,{name:n,defaultValue:o,onChange:t,horizontal:c,children:r.map((e=>l(Ee,{...e},e.value)))})})]})]}),ul=i.forwardRef(((a,i)=>{const{children:n,...r}=a;return e(z.Control,{...r,children:[l(z.Trigger,{ref:i,children:n}),l(z.IndicatorGroup,{children:l(z.Indicator,{children:l(re,{})})})]})})),xl=i.forwardRef(((e,a)=>{const{...i}=e;return l(m,{children:l(z.Positioner,{children:l(z.Content,{...i,ref:a})})})})),bl=i.forwardRef(((e,a)=>{const{item:i,children:n,...r}=e;return l(z.Item,{item:i,...r,ref:a,children:n},i.value)})),gl=i.forwardRef(((e,a)=>{const{children:i,...n}=e;return l(z.ValueText,{...n,ref:a,children:l(z.Context,{children:l=>{const a=l.selectedItems;return 0===a.length?e.placeholder:i?i(a):1===a.length?l.collection.stringifyItem(a[0]):`${a.length} selected`}})})})),ml=i.forwardRef(((i,n)=>l(z.Root,{...i,ref:n,positioning:{sameWidth:!0,...i.positioning},children:i.asChild?i.children:e(a,{children:[l(z.HiddenSelect,{}),i.children]})})));i.forwardRef(((a,i)=>{const{children:n,label:r,...o}=a;return e(z.ItemGroup,{...o,ref:i,children:[l(z.ItemGroupLabel,{children:r}),n]})}));const vl=z.Label;z.ItemText;const fl=S.div`
|
|
444
627
|
position: relative;
|
|
445
628
|
height: 100%;
|
|
446
629
|
width: 100%;
|
|
@@ -449,53 +632,53 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
449
632
|
align-items: flex-start;
|
|
450
633
|
gap: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
451
634
|
margin-bottom: 16px;
|
|
452
|
-
`,
|
|
635
|
+
`,Cl=S.div`
|
|
453
636
|
width: 3px;
|
|
454
637
|
height: 100%;
|
|
455
|
-
background-color: ${
|
|
638
|
+
background-color: ${O("error",500)};
|
|
456
639
|
position: absolute;
|
|
457
640
|
top: 0;
|
|
458
641
|
left: 0;
|
|
459
|
-
`,
|
|
642
|
+
`,yl=S(vl)`
|
|
460
643
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
461
644
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
462
645
|
font-weight: 400;
|
|
463
|
-
color: ${
|
|
646
|
+
color: ${O("neutral",900)};
|
|
464
647
|
|
|
465
648
|
span {
|
|
466
|
-
color: ${
|
|
649
|
+
color: ${O("error",500)};
|
|
467
650
|
margin-right: 3px;
|
|
468
651
|
}
|
|
469
652
|
|
|
470
653
|
&[data-disabled] {
|
|
471
|
-
color: ${
|
|
654
|
+
color: ${O("neutral",600)};
|
|
472
655
|
|
|
473
656
|
span {
|
|
474
|
-
color: ${
|
|
657
|
+
color: ${O("neutral",600)};
|
|
475
658
|
}
|
|
476
659
|
}
|
|
477
|
-
|
|
660
|
+
`,$l=S.p`
|
|
478
661
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
479
662
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
480
663
|
font-weight: 400;
|
|
481
|
-
color: ${
|
|
664
|
+
color: ${O("neutral",600)};
|
|
482
665
|
|
|
483
666
|
&[disabled] {
|
|
484
|
-
color: ${
|
|
667
|
+
color: ${O("neutral",500)};
|
|
485
668
|
}
|
|
486
|
-
`,
|
|
669
|
+
`,wl=S(ul)`
|
|
487
670
|
.chakra-select__trigger {
|
|
488
671
|
min-height: ${({size:e})=>"small"===e?"32px":"40px"};
|
|
489
672
|
border-radius: 4px;
|
|
490
673
|
padding: 6px 8px;
|
|
491
674
|
border: 1px solid
|
|
492
|
-
${({isFilled:e,hasErrorMessage:l})=>((e,l)=>l?
|
|
675
|
+
${({isFilled:e,hasErrorMessage:l})=>((e,l)=>l?O("error",500):O("neutral",e?700:400))(e,l)};
|
|
493
676
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
494
677
|
|
|
495
678
|
.chakra-select__valueText {
|
|
496
679
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
497
680
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
498
|
-
color: ${
|
|
681
|
+
color: ${O("neutral",700)};
|
|
499
682
|
|
|
500
683
|
${({multiple:e})=>e?"\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n ":""}
|
|
501
684
|
}
|
|
@@ -509,13 +692,13 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
509
692
|
&:is(:focus-visible, [data-focus-visible]) {
|
|
510
693
|
outline-offset: 2px;
|
|
511
694
|
outline-width: 2px;
|
|
512
|
-
outline-color: ${
|
|
513
|
-
border: 2px solid ${
|
|
695
|
+
outline-color: ${O("primary",700)};
|
|
696
|
+
border: 2px solid ${O("neutral",700)};
|
|
514
697
|
}
|
|
515
698
|
|
|
516
699
|
&[data-disabled] {
|
|
517
|
-
border: 1px solid ${
|
|
518
|
-
background-color: ${
|
|
700
|
+
border: 1px solid ${O("neutral",300)};
|
|
701
|
+
background-color: ${O("neutral",200)};
|
|
519
702
|
}
|
|
520
703
|
}
|
|
521
704
|
|
|
@@ -524,60 +707,59 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
524
707
|
width: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
525
708
|
|
|
526
709
|
path {
|
|
527
|
-
fill: ${
|
|
710
|
+
fill: ${O("neutral",700)};
|
|
528
711
|
}
|
|
529
712
|
}
|
|
530
713
|
|
|
531
714
|
&[data-disabled] {
|
|
532
715
|
svg path {
|
|
533
|
-
fill: ${
|
|
716
|
+
fill: ${O("neutral",500)};
|
|
534
717
|
}
|
|
535
718
|
}
|
|
536
719
|
}
|
|
537
|
-
`,
|
|
720
|
+
`,kl=S(xl)`
|
|
538
721
|
margin-top: -8px;
|
|
539
722
|
border-radius: 4px;
|
|
540
|
-
border: 1px solid ${
|
|
723
|
+
border: 1px solid ${O("neutral",400)};
|
|
541
724
|
border-top-left-radius: 0px;
|
|
542
725
|
border-top-right-radius: 0px;
|
|
543
726
|
border-top: none;
|
|
544
|
-
`,
|
|
727
|
+
`,Ll=S(bl)`
|
|
545
728
|
align-items: flex-start;
|
|
546
729
|
&[data-highlighted] {
|
|
547
|
-
background-color: ${
|
|
730
|
+
background-color: ${O("neutral",200)};
|
|
548
731
|
cursor: pointer;
|
|
549
732
|
}
|
|
550
|
-
`,
|
|
733
|
+
`,zl=S.p`
|
|
551
734
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
552
735
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
553
|
-
color: ${
|
|
736
|
+
color: ${O("neutral",800)};
|
|
554
737
|
|
|
555
738
|
&[disabled] {
|
|
556
|
-
color: ${
|
|
739
|
+
color: ${O("neutral",500)} !important;
|
|
557
740
|
}
|
|
558
|
-
`,
|
|
741
|
+
`,Il=S.p`
|
|
559
742
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
560
743
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
561
|
-
color: ${
|
|
744
|
+
color: ${O("neutral",700)};
|
|
562
745
|
|
|
563
746
|
&[disabled] {
|
|
564
|
-
color: ${
|
|
747
|
+
color: ${O("neutral",500)};
|
|
565
748
|
}
|
|
566
|
-
`,
|
|
749
|
+
`,Dl=S.p`
|
|
567
750
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
568
751
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
569
752
|
font-weight: 700;
|
|
570
|
-
color: ${
|
|
571
|
-
`,
|
|
753
|
+
color: ${O("error",500)};
|
|
754
|
+
`,Al=S(I.Root)`
|
|
572
755
|
max-width: 100%;
|
|
573
756
|
display: flex;
|
|
574
757
|
justify-content: center;
|
|
575
758
|
align-items: center;
|
|
576
|
-
gap: 8px;
|
|
577
759
|
padding: 4px 8px;
|
|
578
760
|
border-radius: 4px;
|
|
579
761
|
font-weight: 700;
|
|
580
|
-
color: ${
|
|
762
|
+
color: ${O("neutral",700)};
|
|
581
763
|
box-shadow: none;
|
|
582
764
|
|
|
583
765
|
height: 24px;
|
|
@@ -587,16 +769,20 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
587
769
|
svg {
|
|
588
770
|
width: 10px;
|
|
589
771
|
height: 10px;
|
|
772
|
+
margin-right: 4px;
|
|
590
773
|
}
|
|
591
774
|
|
|
592
|
-
button
|
|
593
|
-
|
|
594
|
-
|
|
775
|
+
button {
|
|
776
|
+
margin-left: 8px;
|
|
777
|
+
|
|
778
|
+
svg {
|
|
779
|
+
margin-right: 0px;
|
|
780
|
+
}
|
|
595
781
|
}
|
|
596
782
|
|
|
597
|
-
${({size:e})=>"small"===e?"\n height: 16px;\n border: none !important;\n font-size: 10px;\n line-height: 12px;\n\n svg {\n width: 8px;\n height: 8px;\n }\n\n button
|
|
783
|
+
${({size:e})=>"small"===e?"\n height: 16px;\n border: none !important;\n font-size: 10px;\n line-height: 12px;\n\n svg {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n }\n\n button {\n margin-left: 6px;\n\n svg {\n margin-right: 0px;\n }\n }\n ":""}
|
|
598
784
|
|
|
599
|
-
${({size:e})=>"large"===e?"\n height: 32px;\n font-size: 16px;\n line-height: 24px;\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n button
|
|
785
|
+
${({size:e})=>"large"===e?"\n height: 32px;\n font-size: 16px;\n line-height: 24px;\n\n svg {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n }\n\n button {\n margin-left: 12px;\n\n svg {\n margin-right: 0px;\n }\n }\n ":""}
|
|
600
786
|
|
|
601
787
|
.chakra-tag__startElement,
|
|
602
788
|
.chakra-tag__endElement,
|
|
@@ -606,7 +792,7 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
606
792
|
align-items: center;
|
|
607
793
|
|
|
608
794
|
&:focus-visible {
|
|
609
|
-
--focus-ring-color: ${
|
|
795
|
+
--focus-ring-color: ${O("primary",700)};
|
|
610
796
|
}
|
|
611
797
|
}
|
|
612
798
|
|
|
@@ -615,29 +801,65 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
615
801
|
}
|
|
616
802
|
|
|
617
803
|
&[data-disabled='true'] {
|
|
618
|
-
border: 1px solid ${
|
|
619
|
-
background-color: ${
|
|
620
|
-
color: ${
|
|
621
|
-
}
|
|
622
|
-
`,
|
|
623
|
-
background-color: ${
|
|
624
|
-
border: 1px solid ${
|
|
625
|
-
`,
|
|
626
|
-
background-color: ${
|
|
627
|
-
border: 1px solid ${
|
|
628
|
-
`,
|
|
629
|
-
background-color: ${
|
|
630
|
-
border: 1px solid ${
|
|
631
|
-
color: ${
|
|
632
|
-
`,
|
|
633
|
-
background-color: ${
|
|
634
|
-
border: 1px solid ${
|
|
635
|
-
color: ${
|
|
636
|
-
`,
|
|
637
|
-
background-color: ${
|
|
638
|
-
border: 1px solid ${
|
|
639
|
-
color: ${
|
|
640
|
-
`,
|
|
804
|
+
border: 1px solid ${O("neutral",400)};
|
|
805
|
+
background-color: ${O("neutral",300)};
|
|
806
|
+
color: ${O("neutral",600)};
|
|
807
|
+
}
|
|
808
|
+
`,Bl=S(Al)`
|
|
809
|
+
background-color: ${O("neutral",100)};
|
|
810
|
+
border: 1px solid ${O("neutral",300)};
|
|
811
|
+
`,Ml=S(Al)`
|
|
812
|
+
background-color: ${O("neutral",200)};
|
|
813
|
+
border: 1px solid ${O("neutral",400)};
|
|
814
|
+
`,Vl=S(Al)`
|
|
815
|
+
background-color: ${O("success",100)};
|
|
816
|
+
border: 1px solid ${O("success",200)};
|
|
817
|
+
color: ${O("success",500)};
|
|
818
|
+
`,Fl=S(Al)`
|
|
819
|
+
background-color: ${O("warning",100)};
|
|
820
|
+
border: 1px solid ${O("warning",200)};
|
|
821
|
+
color: ${O("warning",500)};
|
|
822
|
+
`,_l=S(Al)`
|
|
823
|
+
background-color: ${O("error",100)};
|
|
824
|
+
border: 1px solid ${O("error",200)};
|
|
825
|
+
color: ${O("error",500)};
|
|
826
|
+
`,Rl=({label:a,size:i="default",variant:n,disabled:r,icon:o,onClose:t,closable:d,...c})=>{let p=Bl;return"info-grey"===n?p=Ml:"success"===n?p=Vl:"warning"===n?p=Fl:"error"===n&&(p=_l),e(p,{size:i,"data-disabled":r,...c,children:[o?l(I.StartElement,{"aria-label":`${a} tag icon`,children:o}):null,l(I.Label,{"aria-label":a,children:a}),d&&!r&&"small"!==i?l(I.EndElement,{children:l(I.CloseTrigger,{onClick:t,"aria-label":`${a} tag close button`,children:l(oe,{})})}):null]})},Tl=({placeholder:a,size:i,disabled:n})=>l(gl,{placeholder:a,children:a=>{const{label:r,caption:o}=a[0];return e(y,{flexDirection:"column",alignItems:"flex-start",children:[l(zl,{size:i,disabled:n,children:r}),o?l(Il,{size:i,disabled:n,children:o}):null]})}}),El=({placeholder:e,removeItem:a,disabled:i})=>l(gl,{placeholder:e,children:e=>e.map((e=>l(y,{flexDirection:"row",alignItems:"flex-start",children:l(Rl,{label:e.label,variant:"info-grey",disabled:i,onClose:()=>a(e.value),closable:!0},e.value)})))}),Hl=({label:a,caption:i,placeholder:n,items:o,size:t="default",required:d,disabled:c,onChange:p,errorMessage:s,multiple:h,...x})=>{const[b,g]=r(x.defaultValue||[]),m=(e=>D({items:e}))(o),v=e=>{g(e),p&&p(e)};return e(fl,{size:t,style:x.style,children:[s?l(Cl,{}):null,e(ml,{collection:m,disabled:c,required:d,multiple:h,"aria-label":x["aria-label"]||a,value:b,onValueChange:e=>v(e.value),style:{marginLeft:s?"19px":"0px"},...x,children:[e(yl,{size:t,children:[d&&l("span",{children:"*"}),a]}),i?l($l,{size:t,disabled:c,children:i}):null,s&&l(Dl,{size:t,children:s}),l(wl,{size:t,isFilled:b.length>0,hasErrorMessage:!!s,multiple:h,children:h?l(El,{placeholder:n,disabled:c,removeItem:e=>{const l=b.filter((l=>l!==e));v(l)}}):l(Tl,{placeholder:n,size:t,disabled:c})}),l(kl,{children:m.items.map((a=>e(Ll,{item:a,children:[e(u,{children:[l(zl,{size:t,children:a.label}),l(Il,{size:t,children:a.caption})]}),h?l(we,{checked:b.some((e=>e===a.value))}):null]},a.value)))})]})]})},Zl=S.div``,ql=S.p`
|
|
827
|
+
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
828
|
+
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
829
|
+
font-weight: 400;
|
|
830
|
+
color: ${O("neutral",900)};
|
|
831
|
+
|
|
832
|
+
span {
|
|
833
|
+
color: ${O("error",500)};
|
|
834
|
+
margin-right: 3px;
|
|
835
|
+
}
|
|
836
|
+
`,Sl=S.p`
|
|
837
|
+
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
838
|
+
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
839
|
+
font-weight: 400;
|
|
840
|
+
color: ${O("neutral",600)};
|
|
841
|
+
`,Nl=S.div`
|
|
842
|
+
display: flex;
|
|
843
|
+
align-items: center;
|
|
844
|
+
gap: 12px;
|
|
845
|
+
|
|
846
|
+
.text-input-container {
|
|
847
|
+
width: 63px;
|
|
848
|
+
margin: 0px;
|
|
849
|
+
|
|
850
|
+
.chakra-input {
|
|
851
|
+
padding: 4px;
|
|
852
|
+
width: 63px;
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.chakra-slider__root {
|
|
857
|
+
padding: 0 12px;
|
|
858
|
+
height: 30px;
|
|
859
|
+
margin-top: 18px;
|
|
860
|
+
width: 100%;
|
|
861
|
+
}
|
|
862
|
+
`,Pl=S.div`
|
|
641
863
|
position: relative;
|
|
642
864
|
height: 100%;
|
|
643
865
|
width: 100%;
|
|
@@ -645,76 +867,74 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
645
867
|
justify-content: flex-start;
|
|
646
868
|
align-items: flex-start;
|
|
647
869
|
gap: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
648
|
-
margin-bottom:
|
|
649
|
-
`,
|
|
870
|
+
margin-bottom: 20px;
|
|
871
|
+
`,Ol=S.div`
|
|
650
872
|
width: 3px;
|
|
651
873
|
height: 100%;
|
|
652
|
-
background-color: ${
|
|
874
|
+
background-color: ${O("error",500)};
|
|
653
875
|
position: absolute;
|
|
654
876
|
top: 0;
|
|
655
877
|
left: 0;
|
|
656
|
-
`,
|
|
657
|
-
color: ${({disabled:e})=>
|
|
878
|
+
`,jl=S(A.Label)`
|
|
879
|
+
color: ${({disabled:e})=>O("neutral",e?600:900)};
|
|
658
880
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
659
881
|
font-weight: 400;
|
|
660
882
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
661
883
|
margin-bottom: 2px;
|
|
662
884
|
|
|
885
|
+
span {
|
|
886
|
+
color: ${({disabled:e})=>O("neutral",e?600:700)};
|
|
887
|
+
}
|
|
888
|
+
|
|
663
889
|
.chakra-field__requiredIndicator {
|
|
664
|
-
color: ${({disabled:e})=>e?
|
|
890
|
+
color: ${({disabled:e})=>e?O("neutral",600):O("error",500)};
|
|
665
891
|
}
|
|
666
|
-
`,
|
|
667
|
-
color: ${({disabled:e})=>
|
|
892
|
+
`,Ul=S(A.HelperText)`
|
|
893
|
+
color: ${({disabled:e})=>O("neutral",e?500:600)};
|
|
668
894
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
669
895
|
font-weight: 400;
|
|
670
896
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
671
|
-
`,
|
|
672
|
-
color: ${
|
|
673
|
-
font-size: 12px;
|
|
674
|
-
font-weight: 400;
|
|
675
|
-
line-height: 16px;
|
|
676
|
-
margin-top: 8px;
|
|
677
|
-
`,cl=E(D.ErrorText)`
|
|
678
|
-
color: ${S("error",500)};
|
|
679
|
-
font-size: 14px;
|
|
897
|
+
`,Wl=S(A.ErrorText)`
|
|
898
|
+
color: ${O("error",500)};
|
|
899
|
+
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
680
900
|
font-weight: 700;
|
|
681
|
-
line-height: 20px;
|
|
901
|
+
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
682
902
|
margin-top: 2px;
|
|
683
|
-
`,
|
|
684
|
-
height:
|
|
903
|
+
`,Gl=S(B)`
|
|
904
|
+
height: ${({size:e})=>"small"===e?"28px":"40px"};
|
|
685
905
|
width: 100%;
|
|
686
906
|
border-radius: 4px;
|
|
687
|
-
padding: ${({size:e})=>"small"===e?"8px":"12px"};
|
|
907
|
+
padding: ${({size:e})=>"small"===e?"4px 8px":"12px"};
|
|
688
908
|
margin-top: 8px;
|
|
689
|
-
background-color: ${
|
|
690
|
-
color: ${
|
|
691
|
-
border: 1px solid ${
|
|
909
|
+
background-color: ${O("neutral",100)};
|
|
910
|
+
color: ${O("neutral",800)};
|
|
911
|
+
border: 1px solid ${O("neutral",400)};
|
|
692
912
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
693
913
|
|
|
694
914
|
&:focus-visible,
|
|
695
915
|
&[data-focus-visible] {
|
|
696
|
-
border: 2px solid ${
|
|
697
|
-
outline: 2px solid ${
|
|
916
|
+
border: 2px solid ${O("neutral",700)};
|
|
917
|
+
outline: 2px solid ${O("primary",700)};
|
|
698
918
|
outline-offset: 2px;
|
|
699
919
|
}
|
|
700
920
|
|
|
701
921
|
&:active {
|
|
702
|
-
border: 1px solid ${
|
|
922
|
+
border: 1px solid ${O("primary",600)} !important;
|
|
703
923
|
outline: none !important;
|
|
704
924
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
705
925
|
}
|
|
706
926
|
|
|
707
927
|
&[data-invalid] {
|
|
708
|
-
border: 1px solid ${
|
|
928
|
+
border: 1px solid ${O("error",500)} !important;
|
|
709
929
|
}
|
|
710
930
|
|
|
711
931
|
&:disabled {
|
|
712
|
-
background-color: ${
|
|
713
|
-
border: 1px solid ${
|
|
932
|
+
background-color: ${O("neutral",200)};
|
|
933
|
+
border: 1px solid ${O("neutral",300)} !important;
|
|
714
934
|
}
|
|
715
935
|
|
|
716
|
-
${({value:e,defaultValue:l})=>e||l?`\n border: 1px solid ${
|
|
717
|
-
`,
|
|
936
|
+
${({value:e,defaultValue:l})=>e||l?`\n border: 1px solid ${O("neutral",700)};\n `:""}
|
|
937
|
+
`,Yl=({label:a,caption:i,placeholder:n,errorMessage:o,required:t,disabled:d,size:c="default",defaultValue:p="",onChange:s,...h})=>{const[u,x]=r(p);return e(Pl,{size:c,className:"text-input-container",children:[o?l(Ol,{}):null,e(A.Root,{required:t,invalid:!!o,gap:"0",style:{marginLeft:o?"19px":"0px"},children:[a?e(jl,{size:c,disabled:d,"aria-label":a,children:[l(A.RequiredIndicator,{"aria-label":"required"}),a,t?"":l("span",{children:" (Optional)"})]}):null,i?l(Ul,{size:c,disabled:d,"aria-label":i,children:i}):null,o?l(Wl,{size:c,"aria-label":o,children:o}):null,l(Gl,{placeholder:n,disabled:d,size:c,onChange:e=>{x(e.target.value),s&&s(e)},value:u,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...h})]})]})},Kl=({label:a,caption:i,size:n="default",sliderItem:o,required:t,onChange:d})=>{const[c,p]=r(o.value||[]),s=(e,l)=>{const a=e.target.value,i=[...c];let n=a?parseInt(a,10):a;const r=o.min||0,t=o.max||100;n=Number.isNaN(n)?r:n,n=n<r?r:n,n=n>t?t:n,i[l]=n,p(i)},h=(e,l)=>{const a=e.target.value||"0",i=[...c];let n=parseInt(a,10);const r=o.min||0,t=o.max||100;if(n=Number.isNaN(n)?r:n,n=n<r?r:n,n=n>t?t:n,2===c?.length){n=Number.isNaN(n)?r:n;const e=c[0],a=c[1];0===l?(n=n<r?r:n,n=n>a?a:n):1===l&&(n=n<e?e:n,n=n>t?t:n)}i[l]=n,p(i),d&&d(i)};return e(Zl,{children:[e(ql,{size:n,"aria-label":a,children:[t&&l("span",{children:"*"}),a]}),i?l(Sl,{size:n,"aria-label":i,children:i}):null,e(Nl,{children:[o.step&&o.marks?l(Hl,{items:o.marks.map((e=>({label:`${e.label}`,value:`${e.value}`}))),placeholder:"",style:{width:"90px"},value:[`${c?.[0]}`],onChange:e=>{const l=e.map((e=>parseInt(e,10)));p(l),d&&d(l)}}):l(Yl,{"aria-label":a,min:o.min,max:o.max,value:c?.[0],type:"number",onChange:e=>s(e,0),onBlur:e=>h(e,0),className:"opacity-control-text-input",onClick:e=>e.target.select()}),l(We,{...o,value:c,onValueChangeEnd:e=>{p(e.value),d&&d(e.value)}}),2===c?.length?l(Yl,{"aria-label":a,min:o.min,max:o.max,value:c?.[1],type:"number",onChange:e=>s(e,1),onBlur:e=>h(e,1),className:"opacity-control-text-input",onClick:e=>e.target.select()}):null]})]})},Jl=S.div`
|
|
718
938
|
position: relative;
|
|
719
939
|
height: 100%;
|
|
720
940
|
width: 100%;
|
|
@@ -722,119 +942,129 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
722
942
|
justify-content: flex-start;
|
|
723
943
|
align-items: flex-start;
|
|
724
944
|
gap: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
725
|
-
margin-bottom:
|
|
726
|
-
`,
|
|
945
|
+
margin-bottom: 16px;
|
|
946
|
+
`,Ql=S.div`
|
|
727
947
|
width: 3px;
|
|
728
948
|
height: 100%;
|
|
729
|
-
background-color: ${
|
|
949
|
+
background-color: ${O("error",500)};
|
|
730
950
|
position: absolute;
|
|
731
951
|
top: 0;
|
|
732
952
|
left: 0;
|
|
733
|
-
`,
|
|
734
|
-
color: ${({disabled:e})=>
|
|
953
|
+
`,Xl=S(A.Label)`
|
|
954
|
+
color: ${({disabled:e})=>O("neutral",e?600:900)};
|
|
735
955
|
font-size: ${({size:e})=>"small"===e?"14px":"16px"};
|
|
736
956
|
font-weight: 400;
|
|
737
957
|
line-height: ${({size:e})=>"small"===e?"20px":"24px"};
|
|
738
958
|
margin-bottom: 2px;
|
|
739
959
|
|
|
960
|
+
span {
|
|
961
|
+
color: ${({disabled:e})=>O("neutral",e?600:700)};
|
|
962
|
+
}
|
|
963
|
+
|
|
740
964
|
.chakra-field__requiredIndicator {
|
|
741
|
-
color: ${({disabled:e})=>e?
|
|
965
|
+
color: ${({disabled:e})=>e?O("neutral",600):O("error",500)};
|
|
742
966
|
}
|
|
743
|
-
`,
|
|
744
|
-
color: ${({disabled:e})=>
|
|
967
|
+
`,ea=S(A.HelperText)`
|
|
968
|
+
color: ${({disabled:e})=>O("neutral",e?500:600)};
|
|
745
969
|
font-size: ${({size:e})=>"small"===e?"12px":"14px"};
|
|
746
970
|
font-weight: 400;
|
|
747
971
|
line-height: ${({size:e})=>"small"===e?"16px":"20px"};
|
|
748
|
-
`,
|
|
749
|
-
color: ${
|
|
750
|
-
font-size:
|
|
972
|
+
`,la=S(A.HelperText)`
|
|
973
|
+
color: ${O("neutral",600)};
|
|
974
|
+
font-size: 12px;
|
|
975
|
+
font-weight: 400;
|
|
976
|
+
line-height: 16px;
|
|
977
|
+
margin-top: 8px;
|
|
978
|
+
`,aa=S(A.ErrorText)`
|
|
979
|
+
color: ${O("error",500)};
|
|
980
|
+
font-size: 14px;
|
|
751
981
|
font-weight: 700;
|
|
752
|
-
line-height:
|
|
982
|
+
line-height: 20px;
|
|
753
983
|
margin-top: 2px;
|
|
754
|
-
`,
|
|
755
|
-
height:
|
|
984
|
+
`,ia=S(M)`
|
|
985
|
+
height: 104px;
|
|
756
986
|
width: 100%;
|
|
757
987
|
border-radius: 4px;
|
|
758
|
-
padding: ${({size:e})=>"small"===e?"
|
|
988
|
+
padding: ${({size:e})=>"small"===e?"8px":"12px"};
|
|
759
989
|
margin-top: 8px;
|
|
760
|
-
background-color: ${
|
|
761
|
-
color: ${
|
|
762
|
-
border: 1px solid ${
|
|
990
|
+
background-color: ${O("neutral",100)};
|
|
991
|
+
color: ${O("neutral",800)};
|
|
992
|
+
border: 1px solid ${O("neutral",400)};
|
|
763
993
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
764
994
|
|
|
765
995
|
&:focus-visible,
|
|
766
996
|
&[data-focus-visible] {
|
|
767
|
-
border: 2px solid ${
|
|
768
|
-
outline: 2px solid ${
|
|
997
|
+
border: 2px solid ${O("neutral",700)};
|
|
998
|
+
outline: 2px solid ${O("primary",700)};
|
|
769
999
|
outline-offset: 2px;
|
|
770
1000
|
}
|
|
771
1001
|
|
|
772
1002
|
&:active {
|
|
773
|
-
border: 1px solid ${
|
|
1003
|
+
border: 1px solid ${O("primary",600)} !important;
|
|
774
1004
|
outline: none !important;
|
|
775
1005
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
776
1006
|
}
|
|
777
1007
|
|
|
778
1008
|
&[data-invalid] {
|
|
779
|
-
border: 1px solid ${
|
|
1009
|
+
border: 1px solid ${O("error",500)} !important;
|
|
780
1010
|
}
|
|
781
1011
|
|
|
782
1012
|
&:disabled {
|
|
783
|
-
background-color: ${
|
|
784
|
-
border: 1px solid ${
|
|
1013
|
+
background-color: ${O("neutral",200)};
|
|
1014
|
+
border: 1px solid ${O("neutral",300)} !important;
|
|
785
1015
|
}
|
|
786
1016
|
|
|
787
|
-
${({value:e,defaultValue:l})=>e||l?`\n border: 1px solid ${
|
|
788
|
-
`,
|
|
789
|
-
background-color: ${
|
|
790
|
-
`,
|
|
1017
|
+
${({value:e,defaultValue:l})=>e||l?`\n border: 1px solid ${O("neutral",700)};\n `:""}
|
|
1018
|
+
`,na=({label:a,caption:i,placeholder:n,errorMessage:t,required:d,disabled:c,size:p="default",defaultValue:s="",onChange:h,minLength:u,maxLength:x,...b})=>{const[g,m]=r(s),[v,f]=r(!1),[C,y]=r(!1),[$,w]=r("");o((()=>{const{length:e}=s;u&&e<u&&e>0?(f(e<u),y(!1),w(`Enter at least ${u-e} characters`)):u&&0===e&&w(`Min ${u} characters`),x&&e>0?(f(!1),y(e>x),w(`You have ${x-e} characters remaining`)):x&&0===e&&w(`Max ${x} characters`)}),[]);const k=!!t||v||C;return e(Jl,{size:p,children:[k?l(Ql,{}):null,e(A.Root,{required:d,invalid:k,gap:"0",style:{marginLeft:k?"19px":"0px"},children:[a?e(Xl,{size:p,disabled:c,"aria-label":a,children:[l(A.RequiredIndicator,{"aria-label":"required"}),a,d?"":l("span",{children:" (Optional)"})]}):null,i?l(ea,{size:p,disabled:c,"aria-label":i,children:i}):null,t?l(aa,{"aria-label":t,children:t}):null,l(ia,{placeholder:n,disabled:c,size:p,onChange:e=>{m(e.target.value);const{length:l}=e.target.value;u&&x?(f(l<u),y(l>x),w(`You have ${x-l} characters remaining`)):u?(f(l<u),y(!1),w(l<u?`Enter at least ${u-l} characters`:"")):x&&(y(l>x),f(!1),w(`You have ${x-l} characters remaining`)),h&&h(e)},value:g,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...b}),v&&u?e(aa,{style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You need ",u-g.length," more characters"]}):null,C&&x?e(aa,{style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},"aria-live":"polite",children:["You have ",g.length-x," characters too many"]}):null,!$||C||v?null:l(la,{"aria-label":$,children:$})]})]})},ra=S.div`
|
|
1019
|
+
background-color: ${O("neutral",100)};
|
|
1020
|
+
`,oa=S.span`
|
|
791
1021
|
font-size: 16px;
|
|
792
1022
|
font-weight: 700;
|
|
793
1023
|
line-height: 24px;
|
|
794
1024
|
text-align: left;
|
|
795
|
-
color: ${
|
|
1025
|
+
color: ${O("neutral",800)};
|
|
796
1026
|
display: flex;
|
|
797
1027
|
align-items: center;
|
|
798
1028
|
text-align: left;
|
|
799
1029
|
gap: 10px;
|
|
800
|
-
`,
|
|
1030
|
+
`,ta=S.div`
|
|
801
1031
|
font-size: 12px;
|
|
802
1032
|
font-weight: 400;
|
|
803
1033
|
line-height: 16px;
|
|
804
1034
|
text-align: left;
|
|
805
|
-
color: ${
|
|
1035
|
+
color: ${O("neutral",600)};
|
|
806
1036
|
margin-bottom: 8px;
|
|
807
|
-
|
|
1037
|
+
`,da=S.div`
|
|
808
1038
|
width: 268px;
|
|
809
1039
|
padding: 16px 0;
|
|
810
|
-
border-bottom: 1px solid ${
|
|
811
|
-
`,
|
|
1040
|
+
border-bottom: 1px solid ${O("neutral",300)};
|
|
1041
|
+
`,ca=S.div`
|
|
812
1042
|
display: flex;
|
|
813
1043
|
align-items: flex-start;
|
|
814
1044
|
justify-content: space-between;
|
|
815
|
-
`,
|
|
1045
|
+
`,pa=S.div`
|
|
816
1046
|
display: flex;
|
|
817
1047
|
flex-direction: column;
|
|
818
|
-
`,
|
|
1048
|
+
`,sa=S.p`
|
|
819
1049
|
font-size: 16px;
|
|
820
1050
|
font-weight: 400;
|
|
821
1051
|
line-height: 24px;
|
|
822
1052
|
text-align: left;
|
|
823
|
-
color: ${
|
|
824
|
-
`,
|
|
1053
|
+
color: ${({disabled:e})=>O("neutral",e?500:800)};
|
|
1054
|
+
`,ha=S.p`
|
|
825
1055
|
font-size: 14px;
|
|
826
1056
|
font-weight: 400;
|
|
827
1057
|
line-height: 20px;
|
|
828
1058
|
text-align: left;
|
|
829
|
-
color: ${
|
|
830
|
-
`,
|
|
1059
|
+
color: ${({disabled:e})=>O("neutral",e?500:600)};
|
|
1060
|
+
`,ua=({name:a,label:i,caption:n,showInfoButton:r=!0,infoButtonLabel:o="About data",variant:t="switch",disabled:d,onInfoClick:c,isDefaultSelected:p=!1,onChange:s})=>{const h="switch"===t;return e(da,{children:[h?e(ca,{children:[e(pa,{children:[l(sa,{"aria-label":i,"aria-disabled":d,disabled:d,children:i}),l(ha,{"aria-label":n,disabled:d,children:n})]}),l(Ke,{"aria-label":`${i}, ${n}`,name:a,disabled:d,defaultChecked:p,onChange:s,role:"switch"})]}):e("div",{style:{display:"flex",flexDirection:"column"},children:[l(Ee,{value:a,disabled:d,fontSize:"16px",color:"var(--chakra-colors-neutral-800)",children:i}),l(ha,{style:{marginLeft:"28px"},children:n})]}),r?l(u,{display:"flex",justifyContent:"flex-start",marginTop:"8px",marginLeft:h?0:"28px",children:l(K,{variant:"secondary",label:o,rightIcon:l(ne,{}),size:"small",onClick:c,disabled:d})}):null]})},xa=({label:a,caption:i,value:n,layerItems:t,onChangeForRadioVariant:d})=>{const[c,p]=r({}),[s]=r((e=>{const l=e.find((e=>"radio"===e.variant&&e.isDefaultSelected));return l?.name})(t));o((()=>{let e={...c};t.forEach((l=>{l.isDefaultSelected&&(e={...e,["radio"===l.variant?a:l.name]:l.isDefaultSelected})})),p(e)}),[]);const h=(e,l,a,i)=>{const n={...c,[e]:l};p(n),a&&a(e,l,i)},x=Object.values(c).filter((e=>!0===e)).length;return e(V.Item,{value:n,width:"300px",children:[e(V.ItemTrigger,{padding:"16px",alignItems:"flex-start",children:[e(u,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:[e(oa,{children:[a,l(Rl,{label:`${x} Active`,size:"small",variant:x>0?"success":"info-grey"})]}),l(ta,{children:i})]}),l(V.ItemIndicator,{display:"flex",children:l(re,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),l(V.ItemContent,{paddingLeft:"16px",paddingRight:"16px",children:l(He,{name:a,defaultValue:s,customGap:"0px",onChange:(e,l)=>h(e,!!l,d,l),children:t.map((e=>l(ua,{...e,onChange:(l,a)=>h(l,a,e.onChange)},e.label)))})})]})},ba=({children:e,defaultValue:a,...i})=>l(ra,{style:{width:"300px"},children:l(V.Root,{defaultValue:a,multiple:!0,...i,children:e})}),ga=S.div`
|
|
831
1061
|
width: 100%;
|
|
832
1062
|
display: flex;
|
|
833
1063
|
align-items: center;
|
|
834
1064
|
height: 40px;
|
|
835
1065
|
|
|
836
|
-
${({variant:e})=>"view"===e&&`\n border: 1px solid ${
|
|
837
|
-
`,
|
|
1066
|
+
${({variant:e})=>"view"===e&&`\n border: 1px solid ${O("neutral",400)};\n background-color: ${O("neutral",200)};\n border-radius: 4px;\n padding: 4px;\n `}
|
|
1067
|
+
`,ma=S(F.Trigger)`
|
|
838
1068
|
width: 99%;
|
|
839
1069
|
height: 40px;
|
|
840
1070
|
padding: 8px 16px;
|
|
@@ -850,39 +1080,39 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
850
1080
|
&:focus-visible {
|
|
851
1081
|
box-shadow: none;
|
|
852
1082
|
}
|
|
853
|
-
`,
|
|
854
|
-
background-color: ${
|
|
855
|
-
color: ${
|
|
1083
|
+
`,va=S(ma)`
|
|
1084
|
+
background-color: ${O("neutral",200)};
|
|
1085
|
+
color: ${O("neutral",600)};
|
|
856
1086
|
|
|
857
1087
|
&:hover {
|
|
858
|
-
background-color: ${
|
|
1088
|
+
background-color: ${O("neutral",100)};
|
|
859
1089
|
}
|
|
860
1090
|
|
|
861
1091
|
&:active {
|
|
862
|
-
background-color: ${
|
|
1092
|
+
background-color: ${O("neutral",300)};
|
|
863
1093
|
}
|
|
864
1094
|
|
|
865
1095
|
&:focus-visible {
|
|
866
|
-
background-color: ${
|
|
867
|
-
outline-color: ${
|
|
1096
|
+
background-color: ${O("neutral",300)};
|
|
1097
|
+
outline-color: ${O("primary",700)};
|
|
868
1098
|
outline-offset: 2px;
|
|
869
1099
|
}
|
|
870
1100
|
|
|
871
1101
|
&[data-selected] {
|
|
872
|
-
background-color: ${
|
|
873
|
-
color: ${
|
|
1102
|
+
background-color: ${O("neutral",100)};
|
|
1103
|
+
color: ${O("neutral",800)};
|
|
874
1104
|
|
|
875
1105
|
&:hover {
|
|
876
|
-
background-color: ${
|
|
1106
|
+
background-color: ${O("neutral",200)};
|
|
877
1107
|
}
|
|
878
1108
|
|
|
879
1109
|
&:active {
|
|
880
|
-
background-color: ${
|
|
1110
|
+
background-color: ${O("neutral",300)};
|
|
881
1111
|
}
|
|
882
1112
|
|
|
883
1113
|
&:focus-visible {
|
|
884
|
-
background-color: ${
|
|
885
|
-
outline-color: ${
|
|
1114
|
+
background-color: ${O("neutral",100)};
|
|
1115
|
+
outline-color: ${O("primary",700)};
|
|
886
1116
|
outline-offset: 2px;
|
|
887
1117
|
}
|
|
888
1118
|
|
|
@@ -892,63 +1122,63 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
892
1122
|
}
|
|
893
1123
|
|
|
894
1124
|
&[data-disabled] {
|
|
895
|
-
background-color: ${
|
|
896
|
-
color: ${
|
|
1125
|
+
background-color: ${O("neutral",200)};
|
|
1126
|
+
color: ${O("neutral",400)};
|
|
897
1127
|
|
|
898
1128
|
&[data-selected] {
|
|
899
|
-
background-color: ${
|
|
900
|
-
color: ${
|
|
1129
|
+
background-color: ${O("neutral",100)};
|
|
1130
|
+
color: ${O("neutral",400)};
|
|
901
1131
|
opacity: 1;
|
|
902
1132
|
}
|
|
903
1133
|
}
|
|
904
|
-
`,
|
|
1134
|
+
`,fa=S.div`
|
|
905
1135
|
width: 4px;
|
|
906
1136
|
height: 24px;
|
|
907
|
-
background-color: ${
|
|
908
|
-
`,
|
|
1137
|
+
background-color: ${O("neutral",400)};
|
|
1138
|
+
`,Ca=S(ma)`
|
|
909
1139
|
height: 32px;
|
|
910
1140
|
border-radius: 2px;
|
|
911
|
-
background-color: ${
|
|
912
|
-
color: ${
|
|
1141
|
+
background-color: ${O("neutral",200)};
|
|
1142
|
+
color: ${O("neutral",600)};
|
|
913
1143
|
|
|
914
1144
|
&:hover {
|
|
915
|
-
background-color: ${
|
|
1145
|
+
background-color: ${O("neutral",300)};
|
|
916
1146
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
917
1147
|
}
|
|
918
1148
|
|
|
919
1149
|
&:active {
|
|
920
|
-
background-color: ${
|
|
1150
|
+
background-color: ${O("neutral",300)};
|
|
921
1151
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
922
1152
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
923
1153
|
}
|
|
924
1154
|
|
|
925
1155
|
&:focus-visible {
|
|
926
|
-
outline-color: ${
|
|
1156
|
+
outline-color: ${O("primary",700)};
|
|
927
1157
|
outline-offset: 2px;
|
|
928
1158
|
}
|
|
929
1159
|
|
|
930
1160
|
&[data-selected] {
|
|
931
|
-
background-color: ${
|
|
932
|
-
border: 1px solid ${
|
|
1161
|
+
background-color: ${O("neutral",100)};
|
|
1162
|
+
border: 1px solid ${O("neutral",300)};
|
|
933
1163
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
934
|
-
color: ${
|
|
1164
|
+
color: ${O("neutral",800)};
|
|
935
1165
|
|
|
936
1166
|
&:hover {
|
|
937
|
-
background-color: ${
|
|
938
|
-
border: 1px solid ${
|
|
1167
|
+
background-color: ${O("neutral",200)};
|
|
1168
|
+
border: 1px solid ${O("neutral",300)};
|
|
939
1169
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
940
1170
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
941
1171
|
}
|
|
942
1172
|
|
|
943
1173
|
&:active {
|
|
944
|
-
background-color: ${
|
|
945
|
-
border: 1px solid ${
|
|
1174
|
+
background-color: ${O("neutral",300)};
|
|
1175
|
+
border: 1px solid ${O("neutral",300)};
|
|
946
1176
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
947
1177
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
948
1178
|
}
|
|
949
1179
|
|
|
950
1180
|
&:focus-visible {
|
|
951
|
-
outline-color: ${
|
|
1181
|
+
outline-color: ${O("primary",700)};
|
|
952
1182
|
outline-offset: 2px;
|
|
953
1183
|
}
|
|
954
1184
|
|
|
@@ -958,8 +1188,8 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
958
1188
|
}
|
|
959
1189
|
|
|
960
1190
|
&[data-disabled] {
|
|
961
|
-
background-color: ${
|
|
962
|
-
color: ${
|
|
1191
|
+
background-color: ${O("neutral",200)};
|
|
1192
|
+
color: ${O("neutral",400)};
|
|
963
1193
|
box-shadow: none;
|
|
964
1194
|
|
|
965
1195
|
&:hover {
|
|
@@ -967,41 +1197,41 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
967
1197
|
}
|
|
968
1198
|
|
|
969
1199
|
&[data-selected] {
|
|
970
|
-
background-color: ${
|
|
971
|
-
color: ${
|
|
1200
|
+
background-color: ${O("neutral",100)};
|
|
1201
|
+
color: ${O("neutral",400)};
|
|
972
1202
|
opacity: 1;
|
|
973
1203
|
}
|
|
974
1204
|
}
|
|
975
|
-
`,
|
|
1205
|
+
`,ya=(e,l)=>e.findIndex((e=>e.value===l)),$a=e=>1===e?"none":2===e?"left":"right",wa=({variant:i="panel",defaultValue:n,tabs:o,onTabClick:t})=>{const[d,c]=r(ya(o,n)||0),p="view"===i,s=p?Ca:va;return l(ga,{variant:i,children:l(F.Root,{width:"full",defaultValue:n||o?.[0]?.value,onFocusChange:({focusedValue:e})=>{return c(ya(o,l=e)),void(t&&t(l));var l},children:l(F.List,{alignItems:"center",border:"none",children:o.map(((i,n)=>e(a,{children:[p&&1===n&&"left"===$a(d)?l(fa,{}):null,l(s,{"aria-label":i["aria-label"]||i.label,...i,children:e(u,{display:"flex",alignItems:"center",gap:"5px",children:[i.icon,i.label]})},i.label),p&&1===n&&"right"===$a(d)?l(fa,{}):null]})))})})})},ka=S.div`
|
|
976
1206
|
width: 300px;
|
|
977
|
-
background-color: ${
|
|
978
|
-
`,
|
|
1207
|
+
background-color: ${O("neutral",100)};
|
|
1208
|
+
`,La=S.aside`
|
|
979
1209
|
padding: 16px 16px 20px 16px;
|
|
980
|
-
border-bottom: 1px solid ${
|
|
981
|
-
`,
|
|
982
|
-
color: ${
|
|
1210
|
+
border-bottom: 1px solid ${O("neutral",300)};
|
|
1211
|
+
`,za=S.h2`
|
|
1212
|
+
color: ${O("neutral",700)};
|
|
983
1213
|
font-weight: 700;
|
|
984
1214
|
font-size: 20px;
|
|
985
1215
|
line-height: 28px;
|
|
986
1216
|
text-align: left;
|
|
987
|
-
`,
|
|
988
|
-
color: ${
|
|
1217
|
+
`,Ia=S.p`
|
|
1218
|
+
color: ${O("neutral",600)};
|
|
989
1219
|
font-weight: 400;
|
|
990
1220
|
font-size: 14px;
|
|
991
1221
|
line-height: 20px;
|
|
992
1222
|
text-align: left;
|
|
993
|
-
`,
|
|
1223
|
+
`,Da=({title:a,description:i,tabBarVariant:n="panel",buttonTabs:r,defaultValue:o,onTabClick:t,children:d})=>e(ka,{children:[e(La,{role:"complementary",children:[l(za,{"aria-label":a,children:a}),l(Ia,{"aria-label":i,children:i})]}),r&&r.length>0?l(wa,{variant:n,defaultValue:o,tabs:r,onTabClick:t}):null,d]}),Aa=S(V.Item)`
|
|
994
1224
|
margin-bottom: 16px;
|
|
995
|
-
border: 1px solid ${
|
|
1225
|
+
border: 1px solid ${O("neutral",300)};
|
|
996
1226
|
border-radius: 4px;
|
|
997
1227
|
box-shadow: 0px 1px 2px 0px #0000000d;
|
|
998
|
-
`,
|
|
1228
|
+
`,Ba=S(V.ItemTrigger)`
|
|
999
1229
|
padding: 6px 8px;
|
|
1000
1230
|
align-items: center;
|
|
1001
|
-
background-color: ${
|
|
1231
|
+
background-color: ${O("neutral",100)};
|
|
1002
1232
|
|
|
1003
1233
|
&[aria-expanded='true'] {
|
|
1004
|
-
border-bottom: 1px solid ${
|
|
1234
|
+
border-bottom: 1px solid ${O("neutral",300)};
|
|
1005
1235
|
border-bottom-right-radius: 0px;
|
|
1006
1236
|
border-bottom-left-radius: 0px;
|
|
1007
1237
|
}
|
|
@@ -1010,19 +1240,19 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1010
1240
|
height: 10px;
|
|
1011
1241
|
width: 10px;
|
|
1012
1242
|
}
|
|
1013
|
-
`,
|
|
1243
|
+
`,Ma=S.p`
|
|
1014
1244
|
font-size: 12px;
|
|
1015
1245
|
font-weight: 700;
|
|
1016
1246
|
line-height: 16px;
|
|
1017
|
-
color: ${
|
|
1018
|
-
`,
|
|
1247
|
+
color: ${O("neutral",700)};
|
|
1248
|
+
`,Va=S(V.ItemContent)`
|
|
1019
1249
|
padding: 12px 8px;
|
|
1020
1250
|
display: flex;
|
|
1021
1251
|
flex-direction: column;
|
|
1022
1252
|
|
|
1023
1253
|
.layer-parameters-item-child {
|
|
1024
1254
|
padding-bottom: 16px;
|
|
1025
|
-
border-bottom: 1px solid ${
|
|
1255
|
+
border-bottom: 1px solid ${O("neutral",300)};
|
|
1026
1256
|
margin-bottom: 16px;
|
|
1027
1257
|
|
|
1028
1258
|
&:last-child {
|
|
@@ -1031,69 +1261,70 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1031
1261
|
margin-bottom: 0px;
|
|
1032
1262
|
}
|
|
1033
1263
|
}
|
|
1034
|
-
`,
|
|
1264
|
+
`,Fa=({label:a,children:i,openedByDefault:n})=>l("div",{children:l(V.Root,{defaultValue:n?[a]:[],multiple:!0,children:e(Aa,{value:a,children:[e(Ba,{children:[l(u,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:l(Ma,{children:a})}),l(V.ItemIndicator,{display:"flex",children:l(re,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),l(Va,{children:t.map(i,(e=>l("div",{className:"layer-parameters-item-child",children:e})))})]})})}),_a=S.div`
|
|
1035
1265
|
padding: 12px;
|
|
1036
1266
|
padding-bottom: 20px;
|
|
1037
1267
|
display: flex;
|
|
1038
1268
|
gap: 12px;
|
|
1039
|
-
border-bottom: 1px solid ${
|
|
1040
|
-
`,
|
|
1269
|
+
border-bottom: 1px solid ${O("neutral",300)};
|
|
1270
|
+
`,Ra=S.div`
|
|
1041
1271
|
display: flex;
|
|
1042
1272
|
flex-direction: column;
|
|
1043
1273
|
|
|
1044
1274
|
svg {
|
|
1045
1275
|
path {
|
|
1046
|
-
fill: ${
|
|
1276
|
+
fill: ${O("neutral",500)} !important;
|
|
1047
1277
|
}
|
|
1048
1278
|
}
|
|
1049
|
-
`,
|
|
1279
|
+
`,Ta=S.div`
|
|
1050
1280
|
display: flex;
|
|
1051
1281
|
align-items: flex-start;
|
|
1052
1282
|
justify-content: space-between;
|
|
1053
1283
|
gap: 12px;
|
|
1054
1284
|
margin-bottom: 16px;
|
|
1055
|
-
`,
|
|
1285
|
+
`,Ea=S.h3`
|
|
1056
1286
|
font-size: 16px;
|
|
1057
1287
|
line-height: 24px;
|
|
1058
1288
|
font-weight: 400;
|
|
1059
1289
|
text-align: left;
|
|
1060
|
-
color: ${
|
|
1061
|
-
`,
|
|
1290
|
+
color: ${O("neutral",800)};
|
|
1291
|
+
`,Ha=S.p`
|
|
1062
1292
|
font-size: 14px;
|
|
1063
1293
|
line-height: 20px;
|
|
1064
1294
|
font-weight: 400;
|
|
1065
1295
|
text-align: left;
|
|
1066
|
-
color: ${
|
|
1067
|
-
`,
|
|
1296
|
+
color: ${O("neutral",600)};
|
|
1297
|
+
`,Za=S.div`
|
|
1068
1298
|
display: flex;
|
|
1069
1299
|
justify-content: space-between;
|
|
1070
1300
|
|
|
1071
1301
|
button {
|
|
1072
1302
|
width: 110px;
|
|
1073
1303
|
}
|
|
1074
|
-
`,
|
|
1304
|
+
`,qa=S(_.Content)`
|
|
1075
1305
|
width: 234px;
|
|
1076
|
-
border: 1px solid ${
|
|
1306
|
+
border: 1px solid ${O("neutral",600)};
|
|
1077
1307
|
border-radius: 4px;
|
|
1078
|
-
`,
|
|
1308
|
+
`,Sa=S(_.Body)`
|
|
1079
1309
|
padding: 12px;
|
|
1080
|
-
`,
|
|
1310
|
+
`,Na=S.p`
|
|
1081
1311
|
font-size: 14px;
|
|
1082
1312
|
line-height: 20px;
|
|
1083
1313
|
font-weight: 400;
|
|
1084
1314
|
text-align: left;
|
|
1085
|
-
color: ${
|
|
1086
|
-
`,
|
|
1315
|
+
color: ${O("neutral",900)};
|
|
1316
|
+
`,Pa=S.div`
|
|
1087
1317
|
display: flex;
|
|
1088
1318
|
align-items: center;
|
|
1089
1319
|
gap: 12px;
|
|
1090
1320
|
|
|
1091
1321
|
.text-input-container {
|
|
1092
|
-
width:
|
|
1322
|
+
width: 48px;
|
|
1093
1323
|
margin: 0px;
|
|
1094
1324
|
|
|
1095
1325
|
.chakra-input {
|
|
1096
1326
|
padding: 4px;
|
|
1327
|
+
width: 48px;
|
|
1097
1328
|
}
|
|
1098
1329
|
}
|
|
1099
1330
|
|
|
@@ -1103,23 +1334,23 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1103
1334
|
margin-top: 18px;
|
|
1104
1335
|
width: 100%;
|
|
1105
1336
|
}
|
|
1106
|
-
`,
|
|
1337
|
+
`,Oa=({defaultValue:a,onOpacityChanged:i})=>{const[n,o]=r(a);return e(_.Root,{positioning:{placement:"bottom-end"},children:[l(_.Trigger,{asChild:!0,children:l(K,{label:"Opacity",size:"small",variant:"secondary",leftIcon:l(ne,{})})}),l(_.Positioner,{children:l(qa,{children:e(Sa,{children:[l(Na,{children:"Opacity"}),e(Pa,{children:[e("div",{style:{position:"relative"},children:[l(Yl,{"aria-label":"Opacity",min:"0",max:"100",value:n,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),i&&i(a)},className:"opacity-control-text-input",onClick:e=>e.target.select()}),l("p",{style:{position:"absolute",top:"18.5px",right:"5px"},children:"%"})]}),l(We,{min:0,max:100,value:[n],onValueChangeEnd:({value:e})=>{o(e[0]),i&&i(e[0])}})]})]})})})]})},ja=({layerName:a,dataUnit:i,onDrag:n,onUpClick:r,onDownClick:o,onRemoveClick:t,children:d,onInfoClick:c,onOpacityChanged:p})=>e(_a,{children:[e(Ra,{children:[l(Q,{icon:l(pe,{}),"aria-label":"Drag and drop","aria-hidden":!0,onClick:n,style:{display:"none",marginBottom:"12px"}}),e("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[l(Q,{icon:l(re,{rotate:"180"}),"aria-label":"Up",onClick:r}),l(Q,{icon:l(re,{}),"aria-label":"Down",onClick:o})]})]}),e("div",{children:[e(Ta,{children:[e("div",{children:[l(Ea,{children:a}),l(Ha,{children:i})]}),l(K,{label:"Remove",size:"small",variant:"secondary",rightIcon:l(oe,{}),onClick:t})]}),d,e(Za,{children:[l(K,{label:"About data",size:"small",variant:"secondary",leftIcon:l(ne,{}),onClick:c}),l(Oa,{defaultValue:80,onOpacityChanged:p})]})]})]}),Ua=S.div`
|
|
1107
1338
|
width: 290px;
|
|
1108
1339
|
box-shadow: 0px 2px 4px -2px #0000001a;
|
|
1109
1340
|
box-shadow: 0px 4px 6px -1px #0000001a;
|
|
1110
|
-
`,
|
|
1341
|
+
`,Wa=(e,l,a)=>{const i=Array.from(e),[n]=i.splice(l,1);return i.splice(a,0,n),i},Ga=({legendContent:a,analysisContent:i,onTabClick:n})=>{const[o,c]=r("legend-tab"),[p,s]=r(a);return e(Ua,{children:[l(wa,{tabs:[{label:"Legend",value:"legend-tab",icon:l(se,{})},{label:"Analysis",value:"analysis-tab",icon:l(he,{})}],onTabClick:e=>{c(e),n&&n(e)}}),"legend-tab"===o?l("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:t.map(p,((e,l)=>d(e,{onUpClick:()=>{const e=Wa(p,l,l-1);s(e)},onDownClick:()=>{const e=Wa(p,l,l+1);s(e)}})))}):null,"analysis-tab"===o?l("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:i}):null]})},Ya=S.div`
|
|
1111
1342
|
width: 20px;
|
|
1112
1343
|
height: 20px;
|
|
1113
1344
|
border-radius: 50%;
|
|
1114
1345
|
background-color: ${({color:e})=>e};
|
|
1115
|
-
border: 1px solid ${
|
|
1116
|
-
`,
|
|
1346
|
+
border: 1px solid ${O("neutral",400)};
|
|
1347
|
+
`,Ka=S.div`
|
|
1117
1348
|
width: 20px;
|
|
1118
1349
|
height: 8px;
|
|
1119
1350
|
border-radius: 2px;
|
|
1120
1351
|
background-color: ${({color:e})=>e};
|
|
1121
|
-
border: 1px solid ${
|
|
1122
|
-
`,
|
|
1352
|
+
border: 1px solid ${O("neutral",400)};
|
|
1353
|
+
`,Ja=S.div`
|
|
1123
1354
|
width: 20px;
|
|
1124
1355
|
height: 20px;
|
|
1125
1356
|
border-radius: 50%;
|
|
@@ -1132,52 +1363,52 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1132
1363
|
width: 10px;
|
|
1133
1364
|
height: 10px;
|
|
1134
1365
|
}
|
|
1135
|
-
`,
|
|
1366
|
+
`,Qa=S.div`
|
|
1136
1367
|
min-height: 36px;
|
|
1137
1368
|
width: 100%;
|
|
1138
1369
|
display: flex;
|
|
1139
1370
|
justify-content: space-between;
|
|
1140
1371
|
gap: 8px;
|
|
1141
1372
|
margin-bottom: 16px;
|
|
1142
|
-
`,
|
|
1373
|
+
`,Xa=S.div`
|
|
1143
1374
|
display: flex;
|
|
1144
1375
|
gap: 8px;
|
|
1145
|
-
`,
|
|
1376
|
+
`,ei=S.p`
|
|
1146
1377
|
font-size: 14px;
|
|
1147
1378
|
line-height: 20px;
|
|
1148
1379
|
font-weight: 400;
|
|
1149
|
-
color: ${
|
|
1150
|
-
`,
|
|
1380
|
+
color: ${O("neutral",800)};
|
|
1381
|
+
`,li=S.p`
|
|
1151
1382
|
font-size: 12px;
|
|
1152
1383
|
line-height: 16px;
|
|
1153
1384
|
font-weight: 400;
|
|
1154
|
-
color: ${
|
|
1155
|
-
`,
|
|
1385
|
+
color: ${O("neutral",700)};
|
|
1386
|
+
`,ai=S.div`
|
|
1156
1387
|
button {
|
|
1157
1388
|
height: 25px;
|
|
1158
1389
|
font-size: 12px;
|
|
1159
1390
|
line-height: 16px;
|
|
1160
1391
|
font-weight: 400;
|
|
1161
|
-
color: ${
|
|
1392
|
+
color: ${O("neutral",600)};
|
|
1162
1393
|
padding: 0 10px;
|
|
1163
1394
|
}
|
|
1164
|
-
`,
|
|
1395
|
+
`,ii=({type:a,label:i,caption:r,color:o,onActionClick:t,showActionButton:d,pointIcon:c})=>{const[p,s]=n.useState(!0),h="line"===a,u="point"===a;return e(Qa,{children:[e(Xa,{children:[e("div",{children:["raster"===a&&l(Ya,{color:o}),h&&l(Ka,{color:o}),u&&l(Ja,{color:o,children:c})]}),e("div",{children:[l(ei,{"aria-label":i,children:i}),l(li,{"aria-label":r,children:r})]})]}),t&&d?l(ai,{children:l(K,{variant:"borderless",label:p?"Hide":"Show",rightIcon:l(p?ce:de,{}),"aria-label":"Show or Hide action",onClick:()=>{s(!p),t&&t()}})}):null]})},ni=S.div`
|
|
1165
1396
|
width: 100%;
|
|
1166
1397
|
display: flex;
|
|
1167
1398
|
flex-direction: column;
|
|
1168
1399
|
margin-bottom: 16px;
|
|
1169
|
-
`,
|
|
1400
|
+
`,ri=S.div`
|
|
1170
1401
|
height: 20px;
|
|
1171
1402
|
width: 100%;
|
|
1172
1403
|
margin-bottom: 8px;
|
|
1173
|
-
border: 1px solid ${
|
|
1404
|
+
border: 1px solid ${O("neutral",300)};
|
|
1174
1405
|
border-radius: 4px;
|
|
1175
1406
|
${({gradient:e})=>e?`background: ${e};`:""}
|
|
1176
|
-
`,
|
|
1407
|
+
`,oi=S.div`
|
|
1177
1408
|
height: 20px;
|
|
1178
1409
|
width: 100%;
|
|
1179
1410
|
margin-bottom: 8px;
|
|
1180
|
-
border: 1px solid ${
|
|
1411
|
+
border: 1px solid ${O("neutral",300)};
|
|
1181
1412
|
border-radius: 4px;
|
|
1182
1413
|
display: flex;
|
|
1183
1414
|
align-items: center;
|
|
@@ -1191,43 +1422,43 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1191
1422
|
border-top-right-radius: 3px;
|
|
1192
1423
|
border-bottom-right-radius: 3px;
|
|
1193
1424
|
}
|
|
1194
|
-
`,
|
|
1425
|
+
`,ti=S.div`
|
|
1195
1426
|
display: flex;
|
|
1196
1427
|
justify-content: space-between;
|
|
1197
1428
|
align-items: flex-start;
|
|
1198
|
-
|
|
1429
|
+
`,di=S.p`
|
|
1199
1430
|
width: 100%;
|
|
1200
1431
|
font-size: 12px;
|
|
1201
1432
|
line-height: 16px;
|
|
1202
1433
|
font-weight: 400;
|
|
1203
|
-
color: ${
|
|
1434
|
+
color: ${O("neutral",800)};
|
|
1204
1435
|
text-align: center;
|
|
1205
|
-
`,
|
|
1436
|
+
`,ci=S.p`
|
|
1206
1437
|
font-size: 12px;
|
|
1207
1438
|
line-height: 16px;
|
|
1208
1439
|
font-weight: 400;
|
|
1209
|
-
color: ${
|
|
1440
|
+
color: ${O("neutral",600)};
|
|
1210
1441
|
text-align: center;
|
|
1211
|
-
`,
|
|
1442
|
+
`,pi=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(", ")})`},si=({colors:a,values:i,subLabels:n,isGradient:r})=>e(ni,{children:[r?l(ri,{gradient:pi(a)}):l(oi,{children:a?.map(((e,a)=>l("div",{style:{backgroundColor:e,width:"100%",height:"100%"}},`${e}-${i?.[a]}`)))}),l(ti,{children:i?.map((e=>l("div",{style:{width:r?"auto":`calc(100% / ${i.length})`,display:"flex",justifyContent:"center"},children:l(di,{children:e},e)})))}),n&&n.length?l(ti,{children:n.map((e=>l("div",{style:{width:r?"auto":`calc(100% / ${i.length})`,display:"flex",justifyContent:"center"},children:l(ci,{style:{width:"100%"},children:e},e)})))}):null]}),hi=S.div`
|
|
1212
1443
|
width: 64px;
|
|
1213
1444
|
height: 100vh;
|
|
1214
1445
|
z-index: 100;
|
|
1215
1446
|
position: fixed;
|
|
1216
1447
|
top: 0;
|
|
1217
1448
|
left: 0;
|
|
1218
|
-
border-right: 1px solid ${
|
|
1219
|
-
background-color: ${
|
|
1449
|
+
border-right: 1px solid ${O("neutral",300)};
|
|
1450
|
+
background-color: ${O("neutral",200)};
|
|
1220
1451
|
display: flex;
|
|
1221
1452
|
flex-direction: column;
|
|
1222
1453
|
justify-content: space-between;
|
|
1223
|
-
`,
|
|
1454
|
+
`,ui=S(F.Trigger)`
|
|
1224
1455
|
width: 64px;
|
|
1225
1456
|
height: 64px;
|
|
1226
|
-
background-color: ${
|
|
1457
|
+
background-color: ${O("neutral",200)};
|
|
1227
1458
|
border-radius: initial;
|
|
1228
1459
|
border-style: solid;
|
|
1229
1460
|
border-width: 1px 1px 0px 0px;
|
|
1230
|
-
border-color: ${
|
|
1461
|
+
border-color: ${O("neutral",300)};
|
|
1231
1462
|
cursor: pointer;
|
|
1232
1463
|
border-left: 2px solid transparent;
|
|
1233
1464
|
padding: 0 5px;
|
|
@@ -1236,16 +1467,16 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1236
1467
|
justify-content: center;
|
|
1237
1468
|
|
|
1238
1469
|
&:hover {
|
|
1239
|
-
background-color: ${
|
|
1470
|
+
background-color: ${O("neutral",100)};
|
|
1240
1471
|
}
|
|
1241
1472
|
|
|
1242
1473
|
&:active {
|
|
1243
|
-
background-color: ${
|
|
1474
|
+
background-color: ${O("neutral",300)} !important;
|
|
1244
1475
|
}
|
|
1245
1476
|
|
|
1246
1477
|
&:focus-visible {
|
|
1247
|
-
background-color: ${
|
|
1248
|
-
outline-color: ${
|
|
1478
|
+
background-color: ${O("neutral",200)};
|
|
1479
|
+
outline-color: ${O("primary",700)};
|
|
1249
1480
|
outline-offset: 2px;
|
|
1250
1481
|
box-shadow: none;
|
|
1251
1482
|
}
|
|
@@ -1255,20 +1486,20 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1255
1486
|
font-weight: 400;
|
|
1256
1487
|
line-height: 14px;
|
|
1257
1488
|
text-align: center;
|
|
1258
|
-
color: ${
|
|
1489
|
+
color: ${O("neutral",600)};
|
|
1259
1490
|
}
|
|
1260
1491
|
|
|
1261
1492
|
&[data-selected] {
|
|
1262
|
-
background-color: ${
|
|
1263
|
-
border-left: 2px solid ${
|
|
1493
|
+
background-color: ${O("neutral",100)};
|
|
1494
|
+
border-left: 2px solid ${O("secondary",500)};
|
|
1264
1495
|
|
|
1265
1496
|
&:hover {
|
|
1266
|
-
background-color: ${
|
|
1497
|
+
background-color: ${O("neutral",200)};
|
|
1267
1498
|
}
|
|
1268
1499
|
|
|
1269
1500
|
&:focus-visible {
|
|
1270
|
-
background-color: ${
|
|
1271
|
-
outline-color: ${
|
|
1501
|
+
background-color: ${O("neutral",100)};
|
|
1502
|
+
outline-color: ${O("primary",700)};
|
|
1272
1503
|
outline-offset: 2px;
|
|
1273
1504
|
box-shadow: none;
|
|
1274
1505
|
}
|
|
@@ -1276,12 +1507,12 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1276
1507
|
.tab-label {
|
|
1277
1508
|
p {
|
|
1278
1509
|
font-weight: 700;
|
|
1279
|
-
color: ${
|
|
1510
|
+
color: ${O("neutral",700)};
|
|
1280
1511
|
}
|
|
1281
1512
|
|
|
1282
1513
|
svg {
|
|
1283
1514
|
path {
|
|
1284
|
-
fill: ${
|
|
1515
|
+
fill: ${O("neutral",700)};
|
|
1285
1516
|
}
|
|
1286
1517
|
}
|
|
1287
1518
|
}
|
|
@@ -1292,25 +1523,25 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1292
1523
|
}
|
|
1293
1524
|
|
|
1294
1525
|
&[data-disabled] {
|
|
1295
|
-
background-color: ${
|
|
1526
|
+
background-color: ${O("neutral",200)} !important;
|
|
1296
1527
|
|
|
1297
1528
|
&[data-selected] {
|
|
1298
|
-
background-color: ${
|
|
1529
|
+
background-color: ${O("neutral",100)} !important;
|
|
1299
1530
|
}
|
|
1300
1531
|
|
|
1301
1532
|
.tab-label {
|
|
1302
1533
|
p {
|
|
1303
|
-
color: ${
|
|
1534
|
+
color: ${O("neutral",400)};
|
|
1304
1535
|
}
|
|
1305
1536
|
|
|
1306
1537
|
svg {
|
|
1307
1538
|
path {
|
|
1308
|
-
fill: ${
|
|
1539
|
+
fill: ${O("neutral",400)};
|
|
1309
1540
|
}
|
|
1310
1541
|
}
|
|
1311
1542
|
}
|
|
1312
1543
|
}
|
|
1313
|
-
`,
|
|
1544
|
+
`,xi=S.div`
|
|
1314
1545
|
display: flex;
|
|
1315
1546
|
justify-content: center;
|
|
1316
1547
|
align-items: center;
|
|
@@ -1320,17 +1551,17 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1320
1551
|
height: 16px;
|
|
1321
1552
|
|
|
1322
1553
|
path {
|
|
1323
|
-
fill: ${
|
|
1554
|
+
fill: ${O("neutral",600)};
|
|
1324
1555
|
}
|
|
1325
1556
|
}
|
|
1326
|
-
`,
|
|
1557
|
+
`,bi=S(R.Trigger)`
|
|
1327
1558
|
width: 64px;
|
|
1328
1559
|
height: 64px;
|
|
1329
|
-
background-color: ${
|
|
1560
|
+
background-color: ${O("neutral",200)};
|
|
1330
1561
|
border-radius: initial;
|
|
1331
1562
|
border-style: solid;
|
|
1332
1563
|
border-width: 1px 1px 0px 0px;
|
|
1333
|
-
border-color: ${
|
|
1564
|
+
border-color: ${O("neutral",300)};
|
|
1334
1565
|
cursor: pointer;
|
|
1335
1566
|
border-left: 2px solid transparent;
|
|
1336
1567
|
padding: 0 5px;
|
|
@@ -1341,15 +1572,15 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1341
1572
|
gap: 5px;
|
|
1342
1573
|
|
|
1343
1574
|
&:hover {
|
|
1344
|
-
background-color: ${
|
|
1575
|
+
background-color: ${O("neutral",100)};
|
|
1345
1576
|
}
|
|
1346
1577
|
|
|
1347
1578
|
&:active {
|
|
1348
|
-
background-color: ${
|
|
1579
|
+
background-color: ${O("neutral",300)} !important;
|
|
1349
1580
|
}
|
|
1350
1581
|
|
|
1351
1582
|
&:focus-visible {
|
|
1352
|
-
outline-color: ${
|
|
1583
|
+
outline-color: ${O("primary",700)};
|
|
1353
1584
|
outline-offset: 2px;
|
|
1354
1585
|
box-shadow: none;
|
|
1355
1586
|
}
|
|
@@ -1359,9 +1590,9 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1359
1590
|
font-weight: 400;
|
|
1360
1591
|
line-height: 14px;
|
|
1361
1592
|
text-align: center;
|
|
1362
|
-
color: ${
|
|
1593
|
+
color: ${O("neutral",600)};
|
|
1363
1594
|
}
|
|
1364
|
-
`,
|
|
1595
|
+
`,gi=S.div`
|
|
1365
1596
|
width: 300px;
|
|
1366
1597
|
height: 100vh;
|
|
1367
1598
|
z-index: 100;
|
|
@@ -1369,10 +1600,10 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1369
1600
|
top: 0;
|
|
1370
1601
|
left: 64px;
|
|
1371
1602
|
box-shadow: 2px 0px 2px 0px #0000000d;
|
|
1372
|
-
background-color: ${
|
|
1603
|
+
background-color: ${O("neutral",100)};
|
|
1373
1604
|
overflow-y: auto;
|
|
1374
1605
|
overflow-x: hidden;
|
|
1375
|
-
`,
|
|
1606
|
+
`,mi=({tabs:i=[],defaultValue:n,onTabClick:o,children:t,onOpenChange:d})=>{const[c,p]=r(!1),[s,h]=r(n||i?.[0]?.value);return e(a,{children:[e(hi,{children:[l(F.Root,{defaultValue:n||i?.[0]?.value,orientation:"horizontal",width:"full",onFocusChange:({focusedValue:e})=>{return h(l=e),void(o&&o(l));var l},role:"tablist",children:l(F.List,{alignItems:"center",border:"none",style:{flexDirection:"column"},children:i.map((a=>l(ui,{"aria-label":a["aria-label"]||a.label,...a,children:e(u,{display:"flex",alignItems:"center",flexDirection:"column",gap:"5px",className:"tab-label",children:[a.icon?l(xi,{children:a.icon}):null,l("p",{children:a.label})]})},a.label)))})}),t?l(R.Root,{onOpenChange:({open:e})=>{p(e),d&&d(!e)},children:e(bi,{children:[l(xi,{children:l(c?le:ee,{})}),e("div",{className:"tab-label",children:[l("p",{children:c?"Show":"Hide"}),l("p",{children:"Sidebar"})]})]})}):null]}),t?l(R.Root,{defaultOpen:!0,open:!c,children:l(R.Content,{children:l(gi,{role:"tabpanel","aria-labelledby":s,children:t})})}):null]})},vi=S.div`
|
|
1376
1607
|
width: 100%;
|
|
1377
1608
|
min-width: ${({size:e})=>"small"===e?"234px":"366px"};
|
|
1378
1609
|
border-radius: 4px;
|
|
@@ -1387,7 +1618,7 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1387
1618
|
button {
|
|
1388
1619
|
margin-left: ${({isButtonRight:e})=>e?0:"24px"};
|
|
1389
1620
|
}
|
|
1390
|
-
`,
|
|
1621
|
+
`,fi=S.div`
|
|
1391
1622
|
display: flex;
|
|
1392
1623
|
align-items: flex-start;
|
|
1393
1624
|
gap: 8px;
|
|
@@ -1395,48 +1626,105 @@ import{jsxs as e,jsx as l,Fragment as a}from"react/jsx-runtime";import*as i from
|
|
|
1395
1626
|
svg {
|
|
1396
1627
|
margin-top: 6px;
|
|
1397
1628
|
}
|
|
1398
|
-
`,
|
|
1399
|
-
color: ${
|
|
1629
|
+
`,Ci=S.p`
|
|
1630
|
+
color: ${O("neutral",800)};
|
|
1400
1631
|
font-size: ${({size:e})=>"small"===e?"14px":"18px"};
|
|
1401
1632
|
line-height: ${({size:e})=>"small"===e?"20px":"28px"};
|
|
1402
1633
|
font-weight: 400;
|
|
1403
|
-
`,
|
|
1404
|
-
color: ${
|
|
1634
|
+
`,yi=S.p`
|
|
1635
|
+
color: ${O("neutral",700)};
|
|
1405
1636
|
font-size: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
1406
1637
|
line-height: ${({size:e})=>"small"===e?"16px":"24px"};
|
|
1407
1638
|
font-weight: 400;
|
|
1408
1639
|
margin-left: 24px;
|
|
1409
|
-
|
|
1410
|
-
background-color: ${
|
|
1411
|
-
border: 1px solid ${
|
|
1412
|
-
color: ${
|
|
1413
|
-
`,
|
|
1414
|
-
background-color: ${
|
|
1415
|
-
border: 1px solid ${
|
|
1416
|
-
color: ${
|
|
1417
|
-
`,
|
|
1418
|
-
background-color: ${
|
|
1419
|
-
border: 1px solid ${
|
|
1420
|
-
color: ${
|
|
1640
|
+
`,$i=S(vi)`
|
|
1641
|
+
background-color: ${O("neutral",100)};
|
|
1642
|
+
border: 1px solid ${O("neutral",300)};
|
|
1643
|
+
color: ${O("neutral",700)};
|
|
1644
|
+
`,wi=S(vi)`
|
|
1645
|
+
background-color: ${O("neutral",200)};
|
|
1646
|
+
border: 1px solid ${O("neutral",300)};
|
|
1647
|
+
color: ${O("neutral",700)};
|
|
1648
|
+
`,ki=S(vi)`
|
|
1649
|
+
background-color: ${O("success",100)};
|
|
1650
|
+
border: 1px solid ${O("success",500)};
|
|
1651
|
+
color: ${O("success",500)};
|
|
1421
1652
|
|
|
1422
1653
|
p {
|
|
1423
|
-
color: ${
|
|
1654
|
+
color: ${O("success",500)};
|
|
1424
1655
|
}
|
|
1425
|
-
`,
|
|
1426
|
-
background-color: ${
|
|
1427
|
-
border: 1px solid ${
|
|
1428
|
-
color: ${
|
|
1656
|
+
`,Li=S(vi)`
|
|
1657
|
+
background-color: ${O("warning",100)};
|
|
1658
|
+
border: 1px solid ${O("warning",500)};
|
|
1659
|
+
color: ${O("warning",500)};
|
|
1429
1660
|
|
|
1430
1661
|
p {
|
|
1431
|
-
color: ${
|
|
1662
|
+
color: ${O("warning",500)};
|
|
1432
1663
|
}
|
|
1433
|
-
`,
|
|
1434
|
-
background-color: ${
|
|
1435
|
-
border: 1px solid ${
|
|
1436
|
-
color: ${
|
|
1664
|
+
`,zi=S(vi)`
|
|
1665
|
+
background-color: ${O("error",100)};
|
|
1666
|
+
border: 1px solid ${O("error",500)};
|
|
1667
|
+
color: ${O("error",500)};
|
|
1437
1668
|
|
|
1438
1669
|
p {
|
|
1439
|
-
color: ${
|
|
1670
|
+
color: ${O("error",500)};
|
|
1671
|
+
}
|
|
1672
|
+
`,Ii=({label:a,caption:i,variant:n,size:r="large",icon:o=l(ne,{height:"16px",width:"16px"}),onActionClick:t,actionLabel:d,isButtonRight:c})=>{let p=$i;return"info-grey"===n?p=wi:"success"===n?p=ki:"warning"===n?p=Li:"error"===n&&(p=zi),e(p,{isButtonRight:c,size:r,"aria-roledescription":"Note",children:[e("div",{children:[e(fi,{children:[o,l(Ci,{size:r,children:a})]}),l(yi,{size:r,children:i})]}),d?l(K,{label:d,variant:"info-white"===n||"info-grey"===n?"primary":"secondary",size:"large"===r?"default":"small",onClick:t}):null]})},Di=S(T.Root)`
|
|
1673
|
+
justify-content: space-between;
|
|
1674
|
+
align-items: center;
|
|
1675
|
+
gap: 8px;
|
|
1676
|
+
border-radius: 8px;
|
|
1677
|
+
padding: 8px 12px;
|
|
1678
|
+
background-color: ${O("neutral",100)};
|
|
1679
|
+
border: 1px solid ${O("neutral",300)};
|
|
1680
|
+
box-shadow: 0px 4px 6px -4px #0000001a;
|
|
1681
|
+
box-shadow: 0px 10px 15px -3px #0000001a;
|
|
1682
|
+
|
|
1683
|
+
.icon-container svg {
|
|
1684
|
+
width: 20px;
|
|
1685
|
+
height: 20px;
|
|
1686
|
+
margin-top: 3px;
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
&[data-type='success'] {
|
|
1690
|
+
background-color: ${O("success",100)};
|
|
1691
|
+
border: 1px solid ${O("success",500)};
|
|
1692
|
+
|
|
1693
|
+
.chakra-toast__title {
|
|
1694
|
+
color: ${O("success",500)};
|
|
1695
|
+
}
|
|
1696
|
+
}
|
|
1697
|
+
|
|
1698
|
+
&[data-type='warning'] {
|
|
1699
|
+
background-color: ${O("warning",100)};
|
|
1700
|
+
border: 1px solid ${O("warning",500)};
|
|
1701
|
+
|
|
1702
|
+
.chakra-toast__title {
|
|
1703
|
+
color: ${O("warning",500)};
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1707
|
+
&[data-type='error'] {
|
|
1708
|
+
background-color: ${O("error",100)};
|
|
1709
|
+
border: 1px solid ${O("error",500)};
|
|
1710
|
+
|
|
1711
|
+
.chakra-toast__title {
|
|
1712
|
+
color: ${O("error",500)};
|
|
1713
|
+
}
|
|
1440
1714
|
}
|
|
1441
|
-
`,Oa=({label:a,caption:i,variant:n,size:r="large",icon:t=l(ee,{height:"16px",width:"16px"}),onActionClick:o,actionLabel:d,isButtonRight:c})=>{let s=Ra;return"info-grey"===n?s=Ea:"success"===n?s=Ha:"warning"===n?s=Za:"error"===n&&(s=Sa),e(s,{isButtonRight:c,size:r,"aria-roledescription":"Note",children:[e("div",{children:[e(Ma,{children:[t,l(Ta,{size:r,children:a})]}),l(_a,{size:r,children:i})]}),d?l(U,{label:d,variant:"info-white"===n||"info-grey"===n?"primary":"secondary",size:"large"===r?"default":"small",onClick:o}):null]})},ja=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(Fe,{name:"switch",defaultChecked:!0,onChange:console.log,children:"defaultChecked"}),l(Fe,{name:"switch 2",isLabelOnLeft:!0,children:"isLabelOnLeft"}),l(Fe,{name:"switch 3",children:"Normal Label Positon"}),l(Fe,{name:"switch 4",disabled:!0,children:"disabled"}),l(Fe,{name:"switch 4",disabled:!0,checked:!0,children:"disabled cheked"})]}),Pa=()=>e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(U,{label:"Button Label",variant:"primary"}),l(U,{label:"Button Label",variant:"primary",size:"small"})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(U,{label:"Button Label",variant:"secondary"}),l(U,{label:"Button Label",variant:"secondary",size:"small"})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(U,{label:"Button Label",variant:"borderless"}),l(U,{label:"Button Label",variant:"borderless",size:"small"})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(U,{label:"Button Label",variant:"outline"}),l(U,{label:"Button Label",variant:"outline",size:"small"})]})]}),qa=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[e(ve,{name:"radio-group-1",defaultValue:"1",onChange:(e,l)=>console.log(e,l),children:[l(fe,{value:"1",children:"One"}),l(fe,{value:"2",children:"Two"}),l(fe,{value:"3",children:"Three"})]}),e(ve,{name:"radio-group-2",defaultValue:"5",isRow:!0,children:[l(fe,{value:"4",children:"Four"}),l(fe,{value:"5",disabled:!0,children:"Five"}),l(fe,{value:"6",children:"Six"})]})]}),Na=()=>e("div",{style:{width:"300px"},children:[l(El,{variant:"panel",tabs:[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}],onTabClick:console.log}),l("br",{}),l(El,{variant:"panel",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two",icon:l(Q,{})},{label:"Three",value:"three"}]}),l("br",{}),l(El,{variant:"panel",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two",disabled:!0},{label:"Three",value:"three"}]}),l("br",{}),l(El,{variant:"view",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}]})]}),Ua=[{label:"Monday",checked:!1,value:"monday"},{label:"Tuesday",checked:!1,value:"tuesday"},{label:"Wednesday",checked:!1,value:"wednesday"},{label:"Thursday",checked:!1,value:"thursday"}],Ga=()=>{const[i,n]=r(Ua),t=i.every((e=>e.checked)),o=i.some((e=>e.checked))&&!t,d=i.map(((e,a)=>l(ge,{ms:"6",checked:e.checked,onCheckedChange:e=>{n((l=>{const i=[...l];return i[a]={...i[a],checked:!!e.checked},i}))},children:e.label},e.value)));return e(a,{children:[e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(ge,{name:"Checkbox",value:"1",defaultChecked:!0,children:"Checkbox"}),l(ge,{name:"Checkbox",value:"1",checked:!0,disabled:!0,children:"Checkbox"}),l(ge,{name:"Checkbox",value:"1",disabled:!0,children:"Checkbox"})]}),e(_,{align:"flex-start",children:[l(ge,{checked:t,indeterminate:o,onCheckedChange:e=>{n((l=>l.map((l=>({...l,checked:!!e.checked})))))},children:"Weekdays"}),d]})]})},Wa=()=>e(Al,{defaultValue:["1"],children:[l(Dl,{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"}]}),l(Dl,{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"}]})]}),Ya=()=>e(Al,{defaultValue:["3"],children:[l(Dl,{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"}]}),l(Dl,{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"}]})]}),Ka=()=>e(Al,{defaultValue:["5"],children:[l(Dl,{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"}]}),l(Dl,{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"}]})]}),Ja="label-1",Qa=()=>{const[a,i]=r(Ja);return e(jl,{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:Ja,onTabClick:i,children:["label-1"===a?l(Wa,{}):null,"label-2"===a?l(Ya,{}):null,"label-3"===a?l(Ka,{}):null]})},Xa="label-1",ei=()=>{const[a,i]=r(Xa);return e(Fa,{defaultValue:Xa,onTabClick:e=>{i(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:l(Q,{})},{label:"Label 2",value:"label-2",icon:l(Q,{})},{label:"Label 3",value:"label-3",icon:l(Q,{})}],children:["label-1"===a?l(Qa,{}):null,"label-2"===a?l("div",{children:"content 2"}):null,"label-3"===a?l("div",{children:"content 3"}):null]})},li=()=>e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(el,{label:"Small",size:"small",variant:"info-white",icon:l(ee,{}),closable:!0}),l(el,{label:"Default",variant:"info-white",icon:l(ee,{}),closable:!0}),l(el,{label:"Large",size:"large",variant:"info-white",icon:l(ee,{}),closable:!0}),l(el,{label:"Label",variant:"info-white"}),l(el,{label:"Disabled",variant:"info-white",icon:l(ee,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(el,{label:"Small",size:"small",variant:"info-grey",icon:l(ee,{}),closable:!0}),l(el,{label:"Default",variant:"info-grey",icon:l(ee,{}),closable:!0}),l(el,{label:"Large",size:"large",variant:"info-grey",icon:l(ee,{}),closable:!0}),l(el,{label:"Label",variant:"info-grey"}),l(el,{label:"Disabled",variant:"info-grey",icon:l(ee,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(el,{label:"Small",size:"small",variant:"success",icon:l(ee,{}),closable:!0}),l(el,{label:"Default",variant:"success",icon:l(ee,{}),closable:!0}),l(el,{label:"Large",size:"large",variant:"success",icon:l(ee,{}),closable:!0}),l(el,{label:"Label",variant:"success"}),l(el,{label:"Disabled",variant:"success",icon:l(ee,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(el,{label:"Small",size:"small",variant:"warning",icon:l(ee,{}),closable:!0}),l(el,{label:"Default",size:"small",variant:"warning",icon:l(ee,{}),closable:!0}),l(el,{label:"Large",size:"large",variant:"warning",icon:l(ee,{}),closable:!0}),l(el,{label:"Label",size:"small",variant:"warning"}),l(el,{label:"Disabled",size:"small",variant:"warning",icon:l(ee,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(el,{label:"Small",size:"small",variant:"error",icon:l(ee,{}),closable:!0}),l(el,{label:"Default",size:"small",variant:"error",icon:l(ee,{}),closable:!0}),l(el,{label:"Large",size:"large",variant:"error",icon:l(ee,{}),closable:!0}),l(el,{label:"Label",size:"small",variant:"error"}),l(el,{label:"Disabled",size:"small",variant:"error",icon:l(ee,{}),closable:!0,disabled:!0})]})]}),ai=()=>e(a,{children:[e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label"}),l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label"}),l(Oa,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",size:"small"}),l(Oa,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label"}),l(Oa,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",size:"small"}),l(Oa,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label"}),l(Oa,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",size:"small"}),l(Oa,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label"}),l(Oa,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Oa,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",size:"small"}),l(Oa,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]})]}),ii=()=>e("div",{style:{width:"290px"},children:[l(fl,{label:"Label",caption:"Caption",placeholder:"placeholder",defaultValue:"Default Value",required:!0}),l(fl,{label:"Label",caption:"Caption",placeholder:"placeholder",size:"small"}),l(fl,{label:"Label",caption:"Caption",placeholder:"placeholder",errorMessage:"Error Message",required:!0}),l(fl,{label:"Label",caption:"Caption",placeholder:"placeholder",required:!0,disabled:!0})]}),ni=()=>e("div",{style:{width:"290px"},children:[l(pl,{label:"Label",caption:"Caption",placeholder:"placeholder",defaultValue:"Default Value",minLength:5,maxLength:200,required:!0}),l(pl,{label:"Label",caption:"Caption",placeholder:"placeholder",size:"small"}),l(pl,{label:"Label",caption:"Caption",placeholder:"placeholder",errorMessage:"Error Message",required:!0}),l(pl,{label:"Label",caption:"Caption",placeholder:"placeholder",required:!0,disabled:!0})]}),ri=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:[l(ce,{}),l(ce,{disabled:!0})]}),ti=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:[l(W,{icon:l(ie,{}),"aria-label":"Menu"}),l(W,{icon:l(Q,{}),"aria-label":"Check"}),l(W,{icon:l(ee,{}),"aria-label":"Info",disabled:!0})]}),oi=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(De,{width:"280px",min:0,max:100,defaultValue:[50]}),l(De,{width:"280px",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}]}),l(De,{width:"280px",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}),l(De,{width:"280px",value:[20,80]}),l(De,{width:"280px",min:-100,max:100,defaultValue:[0],isCentred:!0}),l(De,{width:"280px",value:[70],marks:[0,25,50,75,100],disabled:!0})]}),di=()=>e("div",{style:{width:"238px"},children:[l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ma,{type:"line",label:"Attribute",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ma,{type:"point",label:"Attribute",color:"#F3FFF2",pointIcon:l(ee,{})})]}),ci=()=>l("div",{style:{width:"238px"},children:e(Gl,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})}),si=()=>e("div",{style:{width:"238px"},children:[l(La,{colors:["#E5F5F9","#2CA25F"],values:["Low","Medium","High"],subLabels:["<100K",">600K"],isGradient:!0}),l(La,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(La,{colors:["#A6611A","#DFC27D","#F5F5F5","#80CDC1","#018571"],values:["0%","25%","50%","75%","100%"]}),l(La,{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)"]})]}),pi=({onDrag:a=()=>{},onUpClick:i=()=>{},onDownClick:n=()=>{}})=>l("div",{style:{width:"290px"},children:e(ra,{layerName:"Layer Name",dataUnit:"Data Unit",onDrag:a,onUpClick:i,onDownClick:n,onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[l(La,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Gl,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})]})}),hi=({onDrag:a=()=>{},onUpClick:i=()=>{},onDownClick:n=()=>{}})=>l("div",{style:{width:"290px"},children:e(ra,{layerName:"Layer Name 2",dataUnit:"Data Unit",onDrag:a,onUpClick:i,onDownClick:n,onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[l(La,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Gl,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})]})}),ui=({onDrag:a=()=>{},onUpClick:i=()=>{},onDownClick:n=()=>{}})=>l("div",{style:{width:"290px"},children:e(ra,{layerName:"Layer Name 3",dataUnit:"Data Unit",onDrag:a,onUpClick:i,onDownClick:n,onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[l(La,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ma,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),l(Oa,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Gl,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})]})}),bi=()=>l(da,{legendContent:[l(pi,{}),l(hi,{}),l(ui,{})],analysisContent:l("div",{})}),xi=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px",width:"290px"},children:[l(il,{label:"Label",caption:"Caption",placeholder:"Please select",defaultValue:["value-2"],items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0}),l(il,{label:"Label",caption:"Caption",placeholder:"Please select",size:"small",items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0}),l(il,{label:"Label",caption:"Caption",placeholder:"Please select",items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],errorMessage:"Error Message",required:!0}),l(il,{label:"Label",caption:"Caption",placeholder:"Please select",defaultValue:["value-2"],items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0,disabled:!0}),l(il,{label:"Label - multiple",caption:"Caption",placeholder:"Please select",defaultValue:["value-2","value-3"],items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0,multiple:!0})]}),gi=()=>e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(be,{variant:"primary",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")},{label:"Third Action",value:"third-action",onClick:()=>console.log("third action")}]}),l(be,{variant:"primary",size:"small",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")}]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(be,{variant:"secondary",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")}]}),l(be,{variant:"secondary",size:"small",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")}]})]})]});c.createRoot(document.getElementById("root")).render(l(n.StrictMode,{children:l(R,{value:Z,children:l((()=>l("div",{className:"App",children:e("div",{className:"app-container",children:[l("h1",{style:{marginBottom:"20px"},children:"Welcome to WRI OS"}),e("div",{style:{display:"flex",alignItems:"flex-start",flexWrap:"wrap",gap:25},children:[l(gi,{}),l(xi,{}),l(bi,{}),l(pi,{}),l(si,{}),l(ci,{}),l(di,{}),l(oi,{}),l(ti,{}),l(ri,{}),l(ii,{}),l(ni,{}),l(ai,{}),l(li,{}),l(Ga,{}),l(Na,{}),l(qa,{}),l(Pa,{}),l(ja,{})]}),l(ei,{})]})})),{})})}));export{U as Button,ge as Checkbox,ce as CloseButton,W as IconButton,Oa as InlineMessage,Dl as LayerGroup,Al as LayerGroupContainer,Il as LayerItem,jl as LayerPanel,Gl as LayerParameters,ra as LegendItem,da as LegendPanel,be as MultiActionButton,Fa as NavigationRail,ma as QualitativeAttribute,fe as Radio,ve as RadioGroup,La as ScaleBar,il as Select,De as Slider,Fe as Switch,El as TabBar,el as Tag,fl as TextInput,pl as Textarea};
|
|
1715
|
+
`,Ai=S(T.Title)`
|
|
1716
|
+
font-size: 18px;
|
|
1717
|
+
line-height: 28px;
|
|
1718
|
+
font-weight: 400;
|
|
1719
|
+
color: ${O("neutral",800)};
|
|
1720
|
+
`,Bi=S(T.Title)`
|
|
1721
|
+
font-size: 16px;
|
|
1722
|
+
line-height: 24px;
|
|
1723
|
+
font-weight: 400;
|
|
1724
|
+
color: ${O("neutral",700)};
|
|
1725
|
+
`,Mi=S(K)`
|
|
1726
|
+
padding: 6px;
|
|
1727
|
+
`,Vi=S(K)`
|
|
1728
|
+
padding: 6px;
|
|
1729
|
+
`,Fi={pauseOnPageIdle:!0,offsets:"24px"},_i={"top-start":E({placement:"top-start",...Fi}),"top-end":E({placement:"top-end",...Fi}),"bottom-start":E({placement:"bottom-start",...Fi}),"bottom-end":E({placement:"bottom-end",...Fi})},Ri=e=>{_i[e.placement].create({title:e.label,description:e.caption,duration:e.duration||5e3,meta:{closable:e.closable,icon:e.icon,closableLabel:e.closableLabel},...e})},Ti=()=>Object.keys(_i).map((a=>l(m,{children:l(H,{toaster:_i[a],insetInline:{mdDown:"4"},children:i=>e(Di,{width:{md:"sm"},children:[e(Z,{flexDirection:"row",className:"icon-container",children:["info"===i.type?i.meta?.icon?i.meta.icon:l(ne,{color:"var(--chakra-colors-neutral-700)"}):null,"loading"===i.type?l(x,{size:"lg",borderWidth:"3px",color:"var(--chakra-colors-primary-500)"}):null,"success"===i.type?i.meta?.icon?i.meta.icon:l(ue,{color:"var(--chakra-colors-success-500)"}):null,"warning"===i.type?i.meta?.icon?i.meta.icon:l(xe,{color:"var(--chakra-colors-warning-500)"}):null,"error"===i.type?i.meta?.icon?i.meta.icon:l(be,{color:"var(--chakra-colors-error-500)"}):null,e(Z,{gap:"1",flex:"1",maxWidth:"100%",children:[l(Ai,{"aria-label":`${i.title}`,children:i.title}),i.description?l(Bi,{"aria-label":`${i.description}`,children:i.description}):null]})]}),i.action||i.meta?.closable?e(Z,{flexDirection:"row",children:[i.action?l(Mi,{label:i.action.label,size:"small",variant:"info"===i.type?"primary":"secondary",onClick:()=>{i?.action?.onClick&&i.action.onClick(),_i[a].dismiss()}}):null,i.meta?.closable?l(Vi,{label:i.meta.closableLabel,"aria-label":i.meta?.closableLabel||"Dismiss",leftIcon:l(oe,{height:"10px!",width:"10px!"}),size:"small",variant:"secondary",onClick:()=>_i[a].dismiss()}):null]}):null]})})},a))),Ei=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(Ke,{name:"switch",defaultChecked:!0,onChange:console.log,children:"defaultChecked"}),l(Ke,{name:"switch 2",isLabelOnLeft:!0,children:"isLabelOnLeft"}),l(Ke,{name:"switch 3",children:"Normal Label Positon"}),l(Ke,{name:"switch 4",disabled:!0,children:"disabled"}),l(Ke,{name:"switch 4",disabled:!0,checked:!0,children:"disabled cheked"})]}),Hi=()=>e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(K,{label:"Button Label",variant:"primary"}),l(K,{label:"Button Label",variant:"primary",size:"small"})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(K,{label:"Button Label",variant:"secondary"}),l(K,{label:"Button Label",variant:"secondary",size:"small"})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(K,{label:"Button Label",variant:"borderless"}),l(K,{label:"Button Label",variant:"borderless",size:"small"})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(K,{label:"Button Label",variant:"outline"}),l(K,{label:"Button Label",variant:"outline",size:"small"})]})]}),Zi=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[e(He,{name:"radio-group-1",defaultValue:"1",onChange:(e,l)=>console.log(e,l),children:[l(Ee,{value:"1",children:"One"}),l(Ee,{value:"2",children:"Two"}),l(Ee,{value:"3",children:"Three"})]}),e(He,{name:"radio-group-2",defaultValue:"5",horizontal:!0,children:[l(Ee,{value:"4",children:"Four"}),l(Ee,{value:"5",disabled:!0,children:"Five"}),l(Ee,{value:"6",children:"Six"})]})]}),qi=()=>e("div",{style:{width:"300px"},children:[l(wa,{variant:"panel",tabs:[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}],onTabClick:console.log}),l("br",{}),l(wa,{variant:"panel",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two",icon:l(ae,{})},{label:"Three",value:"three"}]}),l("br",{}),l(wa,{variant:"panel",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two",disabled:!0},{label:"Three",value:"three"}]}),l("br",{}),l(wa,{variant:"view",defaultValue:"two",tabs:[{label:"One",value:"one"},{label:"Two",value:"two"},{label:"Three",value:"three"}]})]}),Si=[{label:"Monday",checked:!1,value:"monday"},{label:"Tuesday",checked:!1,value:"tuesday"},{label:"Wednesday",checked:!1,value:"wednesday"},{label:"Thursday",checked:!1,value:"thursday"}],Ni=()=>{const[i,n]=r(Si),o=i.every((e=>e.checked)),t=i.some((e=>e.checked))&&!o,d=i.map(((e,a)=>l(we,{ms:"6",checked:e.checked,onCheckedChange:e=>{n((l=>{const i=[...l];return i[a]={...i[a],checked:!!e.checked},i}))},children:e.label},e.value)));return e(a,{children:[e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(we,{name:"Checkbox",value:"1",defaultChecked:!0,children:"Checkbox"}),l(we,{name:"Checkbox",value:"1",checked:!0,disabled:!0,children:"Checkbox"}),l(we,{name:"Checkbox",value:"1",disabled:!0,children:"Checkbox"})]}),e(Z,{align:"flex-start",children:[l(we,{checked:o,indeterminate:t,onCheckedChange:e=>{n((l=>l.map((l=>({...l,checked:!!e.checked})))))},children:"Weekdays"}),d]})]})},Pi=()=>e(ba,{defaultValue:["1"],children:[l(xa,{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"}]}),l(xa,{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"}]})]}),Oi=()=>e(ba,{defaultValue:["3"],children:[l(xa,{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"}]}),l(xa,{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"}]})]}),ji=()=>e(ba,{defaultValue:["5"],children:[l(xa,{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"}]}),l(xa,{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"}]})]}),Ui="label-1",Wi=()=>{const[a,i]=r(Ui);return e(Da,{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:Ui,onTabClick:i,children:["label-1"===a?l(Pi,{}):null,"label-2"===a?l(Oi,{}):null,"label-3"===a?l(ji,{}):null]})},Gi="label-1",Yi=()=>{const[a,i]=r(Gi);return e(mi,{defaultValue:Gi,onTabClick:e=>{i(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:l(ae,{})},{label:"Label 2",value:"label-2",icon:l(ae,{})},{label:"Label 3",value:"label-3",icon:l(ae,{})}],children:["label-1"===a?l(Wi,{}):null,"label-2"===a?l("div",{children:"content 2"}):null,"label-3"===a?l("div",{children:"content 3"}):null]})},Ki=()=>e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(Rl,{label:"Small",size:"small",variant:"info-white",icon:l(ne,{})}),l(Rl,{label:"Default",variant:"info-white",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Large",size:"large",variant:"info-white",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Label",variant:"info-white"}),l(Rl,{label:"Disabled",variant:"info-white",icon:l(ne,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(Rl,{label:"Small",size:"small",variant:"info-grey",icon:l(ne,{})}),l(Rl,{label:"Default",variant:"info-grey",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Large",size:"large",variant:"info-grey",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Label",variant:"info-grey"}),l(Rl,{label:"Disabled",variant:"info-grey",icon:l(ne,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(Rl,{label:"Small",size:"small",variant:"success",icon:l(ne,{})}),l(Rl,{label:"Default",variant:"success",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Large",size:"large",variant:"success",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Label",variant:"success"}),l(Rl,{label:"Disabled",variant:"success",icon:l(ne,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(Rl,{label:"Small",size:"small",variant:"warning",icon:l(ne,{})}),l(Rl,{label:"Default",variant:"warning",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Large",size:"large",variant:"warning",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Label",variant:"warning"}),l(Rl,{label:"Disabled",variant:"warning",icon:l(ne,{}),closable:!0,disabled:!0})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"6px"},children:[l(Rl,{label:"Small",size:"small",variant:"error",icon:l(ne,{})}),l(Rl,{label:"Default",variant:"error",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Large",size:"large",variant:"error",icon:l(ne,{}),closable:!0}),l(Rl,{label:"Label",variant:"error"}),l(Rl,{label:"Disabled",variant:"error",icon:l(ne,{}),closable:!0,disabled:!0})]})]}),Ji=()=>e(a,{children:[e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label"}),l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label"}),l(Ii,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",size:"small"}),l(Ii,{label:"Label",caption:"caption",variant:"info-grey",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label"}),l(Ii,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",size:"small"}),l(Ii,{label:"Label",caption:"caption",variant:"success",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label"}),l(Ii,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",size:"small"}),l(Ii,{label:"Label",caption:"caption",variant:"warning",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label"}),l(Ii,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",isButtonRight:!0})]}),e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[l(Ii,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",size:"small"}),l(Ii,{label:"Label",caption:"caption",variant:"error",actionLabel:"Label",isButtonRight:!0,size:"small"})]})]})]}),Qi=()=>e("div",{style:{width:"290px"},children:[l(Yl,{label:"Label",caption:"Caption",placeholder:"placeholder",defaultValue:"Default Value",required:!0}),l(Yl,{label:"Label",caption:"Caption",placeholder:"placeholder",size:"small"}),l(Yl,{label:"Label",caption:"Caption",placeholder:"placeholder",errorMessage:"Error Message",required:!0}),l(Yl,{label:"Label",caption:"Caption",placeholder:"placeholder",required:!0,disabled:!0})]}),Xi=()=>e("div",{style:{width:"290px"},children:[l(na,{label:"Label",caption:"Caption",placeholder:"Placeholder",defaultValue:"Default Value",minLength:5,maxLength:200,required:!0}),l(na,{label:"Label",caption:"Caption",placeholder:"Placeholder",size:"small"}),l(na,{label:"Label",caption:"Caption",placeholder:"Placeholder",errorMessage:"Error Message",required:!0}),l(na,{label:"Label",caption:"Caption",placeholder:"Placeholder",required:!0,disabled:!0})]}),en=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:[l(ge,{}),l(ge,{disabled:!0})]}),ln=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:[l(Q,{icon:l(te,{}),"aria-label":"Menu"}),l(Q,{icon:l(ae,{}),"aria-label":"Check"}),l(Q,{icon:l(ne,{}),"aria-label":"Info",disabled:!0})]}),an=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px"},children:[l(We,{width:"280px",min:0,max:100,value:[50]}),l(We,{width:"280px",min:0,max:100,value:[50],marks:[{value:0,label:0},{value:25,label:25},{value:50,label:50},{value:75,label:75},{value:100,label:100}]}),l(We,{width:"280px",min:0,max:100,value:[50],marks:[{value:0,label:0},{value:25,label:25},{value:50,label:50},{value:75,label:75},{value:100,label:100}],step:25}),l(We,{width:"280px",value:[20,80]}),l(We,{width:"280px",min:-100,max:100,value:[0],isCentred:!0}),l(We,{width:"280px",value:[70],marks:[0,25,50,75,100],disabled:!0})]}),nn=()=>e("div",{style:{width:"238px"},children:[l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ii,{type:"line",label:"Attribute",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ii,{type:"point",label:"Attribute",color:"#F3FFF2",pointIcon:l(ne,{})})]}),rn=()=>l("div",{style:{width:"238px"},children:e(Fa,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})}),on=()=>e("div",{style:{width:"238px"},children:[l(si,{colors:["#E5F5F9","#2CA25F"],values:["Low","Medium","High"],subLabels:["<100K",">600K"],isGradient:!0}),l(si,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(si,{colors:["#A6611A","#DFC27D","#F5F5F5","#80CDC1","#018571"],values:["0%","25%","50%","75%","100%"]}),l(si,{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)"]})]}),tn=({onDrag:a=()=>{},onUpClick:i=()=>{},onDownClick:n=()=>{}})=>l("div",{style:{width:"290px"},children:e(ja,{layerName:"Layer Name",dataUnit:"Data Unit",onDrag:a,onUpClick:i,onDownClick:n,onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[l(si,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Fa,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})]})}),dn=({onDrag:a=()=>{},onUpClick:i=()=>{},onDownClick:n=()=>{}})=>l("div",{style:{width:"290px"},children:e(ja,{layerName:"Layer Name 2",dataUnit:"Data Unit",onDrag:a,onUpClick:i,onDownClick:n,onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[l(si,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Fa,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})]})}),cn=({onDrag:a=()=>{},onUpClick:i=()=>{},onDownClick:n=()=>{}})=>l("div",{style:{width:"290px"},children:e(ja,{layerName:"Layer Name 3",dataUnit:"Data Unit",onDrag:a,onUpClick:i,onDownClick:n,onRemoveClick:()=>console.log("remove"),onInfoClick:()=>console.log("info"),onOpacityChanged:e=>console.log("opacity changed",e),children:[l(si,{colors:["#EDF8FB","#B2E2E2","#66C2A4","#2CA25F","#006D2C"],values:["0%","25%","50%","75%","100%"]}),l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45",onActionClick:()=>console.log("click"),showActionButton:!0}),l(ii,{type:"raster",label:"Attribute",caption:"Caption",color:"#238B45"}),l(Ii,{label:"Label",caption:"caption",variant:"info-white",actionLabel:"Label",size:"small"}),e(Fa,{label:"Adjust layer parameters",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]})]})}),pn=()=>l(Ga,{legendContent:[l(tn,{}),l(dn,{}),l(cn,{})],analysisContent:l("div",{})}),sn=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px",width:"290px"},children:[l(Hl,{label:"Label",caption:"Caption",placeholder:"Please select",defaultValue:["value-2"],items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0}),l(Hl,{label:"Label",caption:"Caption",placeholder:"Please select",size:"small",items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0}),l(Hl,{label:"Label",caption:"Caption",placeholder:"Please select",items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],errorMessage:"Error Message",required:!0}),l(Hl,{label:"Label",caption:"Caption",placeholder:"Please select",defaultValue:["value-2"],items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0,disabled:!0}),l(Hl,{label:"Label - multiple",caption:"Caption",placeholder:"Please select",defaultValue:["value-2","value-3"],items:[{label:"Label 1",caption:"Caption 1",value:"value-1"},{label:"Label 2",caption:"Caption 2",value:"value-2"},{label:"Label 3",caption:"Caption 3",value:"value-3"}],required:!0,multiple:!0})]}),hn=()=>e("div",{style:{display:"flex",alignItems:"center",flexDirection:"column",gap:"10px"},children:[e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(ye,{variant:"primary",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")},{label:"Third Action",value:"third-action",onClick:()=>console.log("third action")}]}),l(ye,{variant:"primary",size:"small",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")}]})]}),e("div",{style:{display:"flex",alignItems:"center",gap:"10px"},children:[l(ye,{variant:"secondary",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")}]}),l(ye,{variant:"secondary",size:"small",mainActionLabel:"First Action",mainActionOnClick:()=>console.log("first action"),otherActions:[{label:"Second Action",value:"second-action",onClick:()=>console.log("second action")}]})]})]}),un=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px",width:"366px"},children:[l(nl,{label:"Label",caption:"Caption",defaultValue:"checkbox-2",checkboxes:[{children:"Checkbox 1",name:"checkbox-1",value:"checkbox-1"},{children:"Checkbox 2",name:"checkbox-2",value:"checkbox-2"},{children:"Checkbox 3",name:"checkbox-3",value:"checkbox-3"}],required:!0}),l(nl,{label:"Label",caption:"Caption",defaultValue:"checkbox-2",errorMessage:"Error Message",checkboxes:[{children:"Checkbox 1",name:"checkbox-1",value:"checkbox-1"},{children:"Checkbox 2",name:"checkbox-2",value:"checkbox-2"},{children:"Checkbox 3",name:"checkbox-3",value:"checkbox-3"}],required:!0}),l(nl,{label:"Label",caption:"Caption",checkboxes:[{children:"Checkbox 1",name:"checkbox-1",value:"checkbox-1"},{children:"Checkbox 2",name:"checkbox-2",value:"checkbox-2"},{children:"Checkbox 3",name:"checkbox-3",value:"checkbox-3"}],horizontal:!0,required:!0})]}),xn=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px",width:"366px"},children:[l(hl,{label:"Label",caption:"Caption",name:"radio-list-1",defaultValue:"radio-2",radios:[{children:"Radio 1",value:"radio-1"},{children:"Radio 2",value:"radio-2"},{children:"Radio 3",value:"radio-3"}],required:!0}),l(hl,{label:"Label",caption:"Caption",name:"radio-list-2",defaultValue:"radio-2",errorMessage:"Error Message",radios:[{children:"Radio 1",value:"radio-1"},{children:"Radio 2",value:"radio-2"},{children:"Radio 3",value:"radio-3"}],required:!0}),l(hl,{label:"Label",caption:"Caption",name:"radio-list-3",radios:[{children:"Radio 1",value:"radio-1"},{children:"Radio 2",value:"radio-2"},{children:"Radio 3",value:"radio-3"}],horizontal:!0,required:!0})]}),bn=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e("div",{style:{display:"flex",gap:"16px"},children:[l(K,{label:"Info - Top Left",variant:"primary",onClick:()=>Ri({label:"Label",caption:"Caption",type:"info",placement:"top-start",action:{label:"Action",onClick:()=>console.log("Action")},closable:!0,closableLabel:"Dismiss"})}),l(K,{label:"Success - Top Right",variant:"primary",onClick:()=>Ri({label:"Label",caption:"Caption",type:"success",placement:"top-end",action:{label:"Action",onClick:()=>console.log("Action")},closable:!0})})]}),e("div",{style:{display:"flex",gap:"16px"},children:[l(K,{label:"Warning - Bottom Left",variant:"primary",onClick:()=>Ri({label:"Label",caption:"Caption",type:"warning",placement:"bottom-start"})}),l(K,{label:"Error - Bottom Right",variant:"primary",onClick:()=>Ri({label:"Label",caption:"Caption",type:"error",placement:"bottom-end"})})]}),l("div",{style:{display:"flex",gap:"16px"},children:l(K,{label:"Loading - Bottom Right",variant:"primary",onClick:()=>Ri({label:"Label",caption:"Caption",type:"loading",placement:"bottom-end",closable:!0})})})]}),gn=()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"20px",width:"420px"},children:[l(Kl,{label:"Continuous",caption:"Caption",sliderItem:{min:0,max:100,value:[30]},onChange:e=>console.log("Continuous",e),required:!0}),l(Kl,{label:"Continuous Small",caption:"Caption",size:"small",sliderItem:{min:0,max:100,value:[60]},onChange:e=>console.log("Continuous Small",e),required:!0}),l(Kl,{label:"Discrete",caption:"Caption",sliderItem:{min:0,max:100,value:[75],marks:[{value:0,label:0},{value:25,label:25},{value:50,label:50},{value:75,label:75},{value:100,label:100}],step:25},onChange:e=>console.log("Discrete",e),required:!0}),l(Kl,{label:"Range",caption:"Caption",sliderItem:{min:0,max:100,value:[20,80]},onChange:e=>console.log("Range",e),required:!0}),l(Kl,{label:"Centered",caption:"Caption",sliderItem:{min:-100,max:100,value:[0],isCentred:!0},onChange:e=>console.log("Centered",e),required:!0})]}),mn=()=>e(Re,{defaultValue:"value-2",children:[l(_e,{label:"Label",caption:"Caption",icon:l(ne,{}),value:"value-1"}),l(_e,{label:"Label",caption:"Caption",icon:l(ne,{}),variant:"centered",value:"value-2"}),e(_e,{label:"Label",caption:"Caption",icon:l(ne,{}),variant:"expanded",value:"value-3",children:[l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"}),l("div",{children:"Component Placeholder"})]}),l(_e,{label:"Label",caption:"Caption",icon:l(ne,{}),value:"value-4",disabled:!0})]});c.createRoot(document.getElementById("root")).render(l(n.StrictMode,{children:l(q,{value:P,children:l((()=>e("div",{className:"App",children:[e("div",{className:"app-container",children:[l("h1",{style:{marginBottom:"20px"},children:"Welcome to WRI OS"}),e("div",{style:{display:"flex",alignItems:"flex-start",flexWrap:"wrap",gap:25},children:[l(mn,{}),l(gn,{}),l(bn,{}),l(xn,{}),l(un,{}),l(hn,{}),l(sn,{}),l(pn,{}),l(tn,{}),l(on,{}),l(rn,{}),l(nn,{}),l(an,{}),l(ln,{}),l(en,{}),l(Qi,{}),l(Xi,{}),l(Ji,{}),l(Ki,{}),l(Ni,{}),l(qi,{}),l(Zi,{}),l(Hi,{}),l(Ei,{})]}),l(Yi,{})]}),l(Ti,{})]})),{})})}));export{K as Button,we as Checkbox,nl as CheckboxList,ge as CloseButton,Q as IconButton,Ii as InlineMessage,xa as LayerGroup,ba as LayerGroupContainer,ua as LayerItem,Da as LayerPanel,Fa as LayerParameters,ja as LegendItem,Ga as LegendPanel,ye as MultiActionButton,mi as NavigationRail,_e as OptionCard,Re as OptionCardGroup,ii as QualitativeAttribute,Ee as Radio,He as RadioGroup,hl as RadioList,si as ScaleBar,Hl as Select,We as Slider,Kl as SliderInput,Ke as Switch,wa as TabBar,Rl as Tag,Yl as TextInput,na as Textarea,Ti as Toast,Ri as showToast};
|
|
1442
1730
|
//# sourceMappingURL=index.js.map
|