@worldresources/wri-design-systems 1.0.1 → 1.2.0

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