@worldresources/wri-design-systems 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,1286 @@
+import{jsx as e,jsxs as r,Fragment as l}from"react/jsx-runtime";import n,{useState as a,useEffect as o,Children as i}from"react";import t from"react-dom/client";import{createSystem as d,defaultConfig as c,Switch as p,Icon as s,Button as h,Box as x,Spinner as u,Tabs as g,Collapsible as b,RadioGroup as m,HStack as f,Checkbox as $,Tag as v,Accordion as C,Field as w,Input as y,Textarea as k,Slider as z,For as L,Popover as I,ChakraProvider as _}from"@chakra-ui/react";import H from"@emotion/styled";!function(e,r){void 0===r&&(r={});var l=r.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.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");const M={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"}}},V=d(c,{theme:{tokens:{colors:M}}}),F=(e,r)=>V.tokens.getVar(`colors.${e}.${r}`)||M?.[e]?.[r]?.value,E=H.div`
+  display: flex;
+  align-items: center;
+`,T=H(p.Root)`
+  .chakra-switch__control-container {
+    width: 42px;
+    height: 26px;
+    border-radius: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${F("neutral",600)};
+  }
+
+  &[data-state='checked'] .chakra-switch__control-container {
+    background-color: ${F("primary",700)};
+  }
+
+  &[data-disabled] .chakra-switch__control-container {
+    background-color: transparent;
+  }
+
+  .chakra-switch__control {
+    height: 24px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    background-color: ${F("neutral",500)};
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      box-shadow: none;
+      outline: none;
+      outline: 2px solid ${F("primary",700)};
+      outline-offset: 3px;
+    }
+
+    &[data-state='checked'] {
+      background-color: ${F("primary",500)};
+    }
+
+    &[data-disabled] {
+      background-color: ${F("neutral",300)};
+    }
+  }
+
+  .chakra-switch__thumb {
+    svg {
+      width: 12px;
+
+      path {
+        fill: ${F("primary",700)};
+      }
+    }
+
+    &:hover,
+    &[data-hover] {
+      outline: 9px solid
+        color-mix(in srgb, ${F("primary",500)} 20%, transparent);
+    }
+
+    &[data-active] {
+      outline: 9px solid
+        color-mix(in srgb, ${F("primary",500)} 40%, transparent);
+    }
+
+    &[data-disabled] {
+      outline: none;
+
+      &[data-state='checked'] {
+        svg {
+          path {
+            fill: ${F("neutral",500)};
+          }
+        }
+      }
+    }
+  }
+`,R=l=>e(s,{...l,children:r("svg",{viewBox:"0 0 16 17",children:[r("g",{clipPath:"url(#clip0_1216_84)",children:[e("path",{d:"M9.78791 8.03125H16V2.21875C16 1.27103 15.229 0.5 14.2812 0.5H7.1875V16.5H14.2812C15.229 16.5 16 15.729 16 14.7812V8.96875H9.78791L10.5502 9.73106C10.7333 9.91413 10.7333 10.2109 10.5502 10.394C10.3672 10.577 10.0704 10.577 9.88731 10.394L8.32481 8.83147C8.14175 8.64841 8.14175 8.35162 8.32481 8.16856L9.88731 6.60606C10.0704 6.423 10.3672 6.423 10.5502 6.60606C10.7333 6.78912 10.7333 7.08591 10.5502 7.26897L9.78791 8.03125Z",fill:"#4F4E4E"}),e("path",{d:"M0 2.21875V14.7812C0 15.729 0.771031 16.5 1.71875 16.5H6.25V0.5H1.71875C0.771031 0.5 0 1.27103 0 2.21875ZM4.375 7.0625H1.875C1.61612 7.0625 1.40625 6.85262 1.40625 6.59375C1.40625 6.33488 1.61612 6.125 1.875 6.125H4.375C4.63387 6.125 4.84375 6.33488 4.84375 6.59375C4.84375 6.85262 4.63387 7.0625 4.375 7.0625ZM4.375 5.1875H1.875C1.61612 5.1875 1.40625 4.97762 1.40625 4.71875C1.40625 4.45988 1.61612 4.25 1.875 4.25H4.375C4.63387 4.25 4.84375 4.45988 4.84375 4.71875C4.84375 4.97762 4.63387 5.1875 4.375 5.1875ZM4.375 2.375C4.63387 2.375 4.84375 2.58488 4.84375 2.84375C4.84375 3.10262 4.63387 3.3125 4.375 3.3125H1.875C1.61612 3.3125 1.40625 3.10262 1.40625 2.84375C1.40625 2.58488 1.61612 2.375 1.875 2.375H4.375Z",fill:"#4F4E4E"})]}),e("defs",{children:e("clipPath",{id:"clip0_1216_84",children:e("rect",{width:"16",height:"16",fill:"white",transform:"translate(0 0.5)"})})})]})}),Z=l=>e(s,{...l,children:r("svg",{viewBox:"0 0 16 17",children:[e("path",{d:"M0 2.21875V14.7812C0 15.729 0.771031 16.5 1.71875 16.5H6.25V0.5H1.71875C0.771031 0.5 0 1.27103 0 2.21875ZM4.375 7.0625H1.875C1.61612 7.0625 1.40625 6.85262 1.40625 6.59375C1.40625 6.33488 1.61612 6.125 1.875 6.125H4.375C4.63387 6.125 4.84375 6.33488 4.84375 6.59375C4.84375 6.85262 4.63387 7.0625 4.375 7.0625ZM4.375 5.1875H1.875C1.61612 5.1875 1.40625 4.97762 1.40625 4.71875C1.40625 4.45988 1.61612 4.25 1.875 4.25H4.375C4.63387 4.25 4.84375 4.45988 4.84375 4.71875C4.84375 4.97762 4.63387 5.1875 4.375 5.1875ZM4.375 2.375C4.63387 2.375 4.84375 2.58488 4.84375 2.84375C4.84375 3.10262 4.63387 3.3125 4.375 3.3125H1.875C1.61612 3.3125 1.40625 3.10262 1.40625 2.84375C1.40625 2.58488 1.61612 2.375 1.875 2.375H4.375Z",fill:"#4F4E4E"}),e("path",{d:"M14.2812 0.5H7.1875V8.03125H12.4621L11.6998 7.26897C11.5168 7.08591 11.5168 6.78912 11.6998 6.60606C11.8829 6.423 12.1797 6.423 12.3627 6.60606L13.9252 8.16856C14.1083 8.35162 14.1083 8.64841 13.9252 8.83147L12.3627 10.394C12.1797 10.577 11.8829 10.577 11.6998 10.394C11.5168 10.2109 11.5168 9.91413 11.6998 9.73106L12.4621 8.96875H7.1875V16.5H14.2812C15.229 16.5 16 15.729 16 14.7812V2.21875C16 1.27103 15.229 0.5 14.2812 0.5Z",fill:"#4F4E4E"})]})}),B=r=>e(s,{...r,children:e("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:e("path",{d:"M4.19632 10.4277L0 6.23139L1.04908 5.18231L4.19632 8.32955L10.9509 1.57495L12 2.62403L4.19632 10.4277Z",fill:"currentColor"})})}),D=r=>e(s,{...r,children:e("svg",{viewBox:"0 0 12 12",height:"12px",width:"12px",children:e("path",{d:"M0 6.75V5.25H12V6.75H0Z",fill:"auto"})})}),A=r=>e(s,{...r,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4.5 7.49997H5.5V4.49997H4.5V7.49997ZM5 3.49997C5.14167 3.49997 5.26042 3.45205 5.35625 3.35622C5.45208 3.26039 5.5 3.14164 5.5 2.99997C5.5 2.8583 5.45208 2.73955 5.35625 2.64372C5.26042 2.54789 5.14167 2.49997 5 2.49997C4.85833 2.49997 4.73958 2.54789 4.64375 2.64372C4.54792 2.73955 4.5 2.8583 4.5 2.99997C4.5 3.14164 4.54792 3.26039 4.64375 3.35622C4.73958 3.45205 4.85833 3.49997 5 3.49997ZM5 9.99997C4.30833 9.99997 3.65833 9.86872 3.05 9.60622C2.44167 9.34372 1.9125 8.98747 1.4625 8.53747C1.0125 8.08747 0.65625 7.5583 0.39375 6.94997C0.13125 6.34164 0 5.69164 0 4.99997C0 4.3083 0.13125 3.6583 0.39375 3.04997C0.65625 2.44164 1.0125 1.91247 1.4625 1.46247C1.9125 1.01247 2.44167 0.656219 3.05 0.393719C3.65833 0.131219 4.30833 -3.05176e-05 5 -3.05176e-05C5.69167 -3.05176e-05 6.34167 0.131219 6.95 0.393719C7.55833 0.656219 8.0875 1.01247 8.5375 1.46247C8.9875 1.91247 9.34375 2.44164 9.60625 3.04997C9.86875 3.6583 10 4.3083 10 4.99997C10 5.69164 9.86875 6.34164 9.60625 6.94997C9.34375 7.5583 8.9875 8.08747 8.5375 8.53747C8.0875 8.98747 7.55833 9.34372 6.95 9.60622C6.34167 9.86872 5.69167 9.99997 5 9.99997Z",fill:"currentColor"})})}),j=r=>e(s,{...r,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M8 13.3667L0 5.36667L1.86667 3.5L8 9.63333L14.1333 3.5L16 5.36667L8 13.3667Z",fill:"currentColor"})})}),S=r=>e(s,{...r,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M1 10L0 9L4 5L0 1L1 0L5 4L9 0L10 1L6 5L10 9L9 10L5 6L1 10Z",fill:"currentColor"})})}),N=r=>e(s,{...r,children:e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M5 6.95455C5.56818 6.95455 6.05114 6.75568 6.44886 6.35795C6.84659 5.96023 7.04545 5.47727 7.04545 4.90909C7.04545 4.34091 6.84659 3.85795 6.44886 3.46023C6.05114 3.0625 5.56818 2.86364 5 2.86364C4.43182 2.86364 3.94886 3.0625 3.55114 3.46023C3.15341 3.85795 2.95455 4.34091 2.95455 4.90909C2.95455 5.47727 3.15341 5.96023 3.55114 6.35795C3.94886 6.75568 4.43182 6.95455 5 6.95455ZM5 6.13636C4.65909 6.13636 4.36932 6.01705 4.13068 5.77841C3.89205 5.53977 3.77273 5.25 3.77273 4.90909C3.77273 4.56818 3.89205 4.27841 4.13068 4.03977C4.36932 3.80114 4.65909 3.68182 5 3.68182C5.34091 3.68182 5.63068 3.80114 5.86932 4.03977C6.10795 4.27841 6.22727 4.56818 6.22727 4.90909C6.22727 5.25 6.10795 5.53977 5.86932 5.77841C5.63068 6.01705 5.34091 6.13636 5 6.13636ZM5 8.31818C3.89394 8.31818 2.88636 8.00947 1.97727 7.39205C1.06818 6.77462 0.409091 5.94697 0 4.90909C0.409091 3.87121 1.06818 3.04356 1.97727 2.42614C2.88636 1.80871 3.89394 1.5 5 1.5C6.10606 1.5 7.11364 1.80871 8.02273 2.42614C8.93182 3.04356 9.59091 3.87121 10 4.90909C9.59091 5.94697 8.93182 6.77462 8.02273 7.39205C7.11364 8.00947 6.10606 8.31818 5 8.31818Z",fill:"currentColor"})})}),O=l=>e(s,{...l,children:r("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("g",{clipPath:"url(#clip0_4626_1381)",children:e("path",{d:"M8.54545 9.9375L6.63636 8.05114C6.37121 8.13447 6.10417 8.19697 5.83523 8.23864C5.56629 8.2803 5.28788 8.30114 5 8.30114C3.85606 8.30114 2.83712 7.98485 1.94318 7.35227C1.04924 6.7197 0.401515 5.89962 0 4.89205C0.159091 4.49053 0.359848 4.11742 0.602273 3.77273C0.844697 3.42803 1.12121 3.11932 1.43182 2.84659L0.181818 1.57386L0.818182 0.9375L9.18182 9.30114L8.54545 9.9375ZM5 6.9375C5.08333 6.9375 5.16098 6.93371 5.23295 6.92614C5.30492 6.91856 5.38258 6.90341 5.46591 6.88068L3.01136 4.42614C2.98864 4.50947 2.97348 4.58712 2.96591 4.65909C2.95833 4.73106 2.95455 4.80871 2.95455 4.89205C2.95455 5.46023 3.15341 5.94318 3.55114 6.34091C3.94886 6.73864 4.43182 6.9375 5 6.9375ZM8.31818 7.14205L6.875 5.71023C6.92803 5.58144 6.9697 5.45076 7 5.31818C7.0303 5.18561 7.04545 5.04356 7.04545 4.89205C7.04545 4.32386 6.84659 3.84091 6.44886 3.44318C6.05114 3.04545 5.56818 2.84659 5 2.84659C4.84848 2.84659 4.70644 2.86174 4.57386 2.89205C4.44129 2.92235 4.31061 2.9678 4.18182 3.02841L3.02273 1.86932C3.33333 1.74053 3.65152 1.64394 3.97727 1.57955C4.30303 1.51515 4.64394 1.48295 5 1.48295C6.14394 1.48295 7.16288 1.79924 8.05682 2.43182C8.95076 3.06439 9.59848 3.88447 10 4.89205C9.82576 5.33902 9.59659 5.75379 9.3125 6.13636C9.02841 6.51894 8.69697 6.85417 8.31818 7.14205ZM6.21591 5.05114L4.85227 3.6875C5.06439 3.64962 5.25947 3.66667 5.4375 3.73864C5.61553 3.81061 5.76894 3.91477 5.89773 4.05114C6.02652 4.1875 6.11932 4.3447 6.17614 4.52273C6.23295 4.70076 6.24621 4.87689 6.21591 5.05114Z",fill:"currentColor"})}),e("defs",{children:e("clipPath",{id:"clip0_4626_1381",children:e("rect",{width:"10",height:"10",fill:"white"})})})]})}),q=r=>e(s,{...r,children:e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M6.25 20C5.5625 20 4.97396 19.7552 4.48437 19.2656C3.99479 18.776 3.75 18.1875 3.75 17.5C3.75 16.8125 3.99479 16.224 4.48437 15.7344C4.97396 15.2448 5.5625 15 6.25 15C6.9375 15 7.52604 15.2448 8.01562 15.7344C8.50521 16.224 8.75 16.8125 8.75 17.5C8.75 18.1875 8.50521 18.776 8.01562 19.2656C7.52604 19.7552 6.9375 20 6.25 20ZM13.75 20C13.0625 20 12.474 19.7552 11.9844 19.2656C11.4948 18.776 11.25 18.1875 11.25 17.5C11.25 16.8125 11.4948 16.224 11.9844 15.7344C12.474 15.2448 13.0625 15 13.75 15C14.4375 15 15.026 15.2448 15.5156 15.7344C16.0052 16.224 16.25 16.8125 16.25 17.5C16.25 18.1875 16.0052 18.776 15.5156 19.2656C15.026 19.7552 14.4375 20 13.75 20ZM6.25 12.5C5.5625 12.5 4.97396 12.2552 4.48437 11.7656C3.99479 11.276 3.75 10.6875 3.75 10C3.75 9.3125 3.99479 8.72396 4.48437 8.23438C4.97396 7.74479 5.5625 7.5 6.25 7.5C6.9375 7.5 7.52604 7.74479 8.01562 8.23438C8.50521 8.72396 8.75 9.3125 8.75 10C8.75 10.6875 8.50521 11.276 8.01562 11.7656C7.52604 12.2552 6.9375 12.5 6.25 12.5ZM13.75 12.5C13.0625 12.5 12.474 12.2552 11.9844 11.7656C11.4948 11.276 11.25 10.6875 11.25 10C11.25 9.3125 11.4948 8.72396 11.9844 8.23438C12.474 7.74479 13.0625 7.5 13.75 7.5C14.4375 7.5 15.026 7.74479 15.5156 8.23438C16.0052 8.72396 16.25 9.3125 16.25 10C16.25 10.6875 16.0052 11.276 15.5156 11.7656C15.026 12.2552 14.4375 12.5 13.75 12.5ZM6.25 5C5.5625 5 4.97396 4.75521 4.48437 4.26562C3.99479 3.77604 3.75 3.1875 3.75 2.5C3.75 1.8125 3.99479 1.22396 4.48437 0.734375C4.97396 0.244792 5.5625 0 6.25 0C6.9375 0 7.52604 0.244792 8.01562 0.734375C8.50521 1.22396 8.75 1.8125 8.75 2.5C8.75 3.1875 8.50521 3.77604 8.01562 4.26562C7.52604 4.75521 6.9375 5 6.25 5ZM13.75 5C13.0625 5 12.474 4.75521 11.9844 4.26562C11.4948 3.77604 11.25 3.1875 11.25 2.5C11.25 1.8125 11.4948 1.22396 11.9844 0.734375C12.474 0.244792 13.0625 0 13.75 0C14.4375 0 15.026 0.244792 15.5156 0.734375C16.0052 1.22396 16.25 1.8125 16.25 2.5C16.25 3.1875 16.0052 3.77604 15.5156 4.26562C15.026 4.75521 14.4375 5 13.75 5Z",fill:"currentColor"})})}),P=l=>e(s,{...l,children:r("svg",{width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("g",{clipPath:"url(#clip0_5584_387)",children:e("path",{d:"M8.49906 16L0.940002 10.1207L2.32583 9.07087L8.49906 13.8583L14.6723 9.07087L16.0581 10.1207L8.49906 16ZM8.49906 11.7585L0.940002 5.87926L8.49906 0L16.0581 5.87926L8.49906 11.7585Z",fill:"currentColor"})}),e("defs",{children:e("clipPath",{id:"clip0_5584_387",children:e("rect",{width:"16",height:"16",fill:"white",transform:"translate(0.5)"})})})]})}),G=r=>e(s,{...r,children:e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M1.71286 12.5714V3.42857H5.14144V12.5714H1.71286ZM6.28429 12.5714V6.85714H9.71286V12.5714H6.28429ZM10.8557 12.5714V0H14.2843V12.5714H10.8557ZM0.570007 16V13.7143H15.4271V16H0.570007Z",fill:"currentColor"})})}),U=({name:l,defaultChecked:n=!1,onChange:a,disabled:o=!1,isLabelOnLeft:i=!1,children:t,...d})=>e(E,{children:r(T,{id:l,name:l,"aria-label":d["aria-label"]||l,defaultChecked:n,onCheckedChange:({checked:e})=>{a&&a(l,e)},disabled:o,...d,children:[i&&null!=t?e(p.Label,{children:t}):null,e(p.HiddenInput,{style:{width:"42px",height:"26px"}}),e("div",{className:"chakra-switch__control-container",children:e(p.Control,{children:e(p.Thumb,{children:e(p.ThumbIndicator,{display:"flex",children:e(B,{})})})})}),i||null==t?null:e(p.Label,{children:t})]})}),Y=H(h)`
+  width: auto;
+  height: ${({size:e})=>"small"===e?"28px":"40px"};
+  font-size: ${({size:e})=>"small"===e?"12px":"16px"};
+  line-height: ${({size:e})=>"small"===e?"16px":"24px"};
+  font-weight: 700;
+  padding: ${({size:e})=>"small"===e?"6px 8px":"8px 16px"};
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px 0px #0000000d;
+
+  &:focus-visible {
+    box-shadow: none;
+  }
+
+  svg {
+    width: ${({size:e})=>"small"===e?"10px":"16px"};
+    height: ${({size:e})=>"small"===e?"10px":"16px"};
+  }
+`,W=H(Y)`
+  ${({disabled:e})=>e?`\n        background-color: ${F("neutral",300)};\n        border: 1px solid ${F("neutral",400)};\n        color: ${F("neutral",500)};\n\n        &:hover {\n          background-color: ${F("neutral",300)} !important;\n        }\n      `:`\n      background-color: ${F("primary",500)};\n      border: 1px solid ${F("primary",600)};\n      color: ${F("primary",900)};\n      box-shadow: 0px 1px 2px 0px #0000000D;\n\n      &:hover {\n        background-color: ${F("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: ${F("primary",600)} !important;\n        border: 1px solid ${F("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: ${F("primary",700)};\n        background-color: ${F("primary",500)};\n        border: 2px solid ${F("primary",500)};\n        box-shadow: 0px 1px 2px 0px #0000000D;\n      }\n    `};
+`,J=H(Y)`
+  ${({disabled:e})=>e?`\n        background-color: ${F("neutral",200)};\n        border: 1px solid ${F("neutral",300)};\n        color: ${F("neutral",500)};\n\n        &:hover {\n          background-color: ${F("neutral",200)} !important;\n        }\n      `:`\n      background-color: ${F("neutral",100)};\n      border: 1px solid ${F("neutral",300)};\n      color: ${F("neutral",700)};\n      box-shadow: 0px 1px 2px 0px #0000000D;\n\n      &:hover {\n        background-color: ${F("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: ${F("neutral",200)} !important;\n        border: 1px solid ${F("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: ${F("primary",700)};\n        box-shadow: 0px 1px 2px 0px #0000000D;\n      }\n    `};
+`,K=H(Y)`
+  ${({disabled:e})=>e?`\n        background-color: transparent;\n        color: ${F("neutral",500)};\n\n        &:hover {\n          background-color: transparent !important;\n        }\n      `:`\n      background-color: transparent;\n      border: none;\n      color: ${F("neutral",800)};\n      box-shadow: none;\n\n      &:hover {\n        background-color: color-mix(in srgb, ${F("primary",500)} 20%, transparent);\n      }\n\n      &:active {\n        outline: none;\n        background-color: color-mix(in srgb, ${F("primary",500)} 40%, transparent);\n        box-shadow: 0px 4px 6px -1px #0000001A;\n      }\n\n      &:focus-visible {\n        outline-color: ${F("primary",700)};\n        box-shadow: 0px 1px 2px 0px #0000000D;\n      }\n    `};
+`,Q=H(Y)`
+  ${({disabled:e})=>e?`\n        background-color: ${F("neutral",200)};\n        border: 1px solid ${F("neutral",300)};\n        color: ${F("neutral",500)};\n\n        &:hover {\n          background-color: ${F("neutral",200)} !important;\n        }\n      `:`\n      background-color: transparent;\n      border: 1px solid ${F("primary",800)};\n      color: ${F("primary",800)};\n\n      &:hover {\n        background-color: ${F("primary",100)};\n        color: ${F("primary",900)};\n      }\n\n      &:active {\n        outline: none;\n        background-color: ${F("primary",200)} !important;\n        border: 1px solid ${F("primary",900)} !important;\n        color: ${F("primary",900)};\n      }\n\n      &:focus-visible {\n        outline-color: ${F("primary",800)};\n        background-color: ${F("primary",100)};\n      }\n    `};
+`,X=({label:l,loading:n,variant:a="primary",size:o="default",disabled:i,leftIcon:t,rightIcon:d,...c})=>{let p=W;"secondary"===a?p=J:"borderless"===a?p=K:"outline"===a&&(p=Q);return r(p,{"aria-label":(()=>{let e=c["aria-label"]||l;return n&&(e="Loading"),e})(),size:o,disabled:i||n,"aria-disabled":i||n,...c,children:[t&&!n?e(x,{marginRight:l?2:0,display:"flex",alignItems:"center",children:t}):null,!d&&n?e(u,{size:"sm",marginRight:l?2:0}):null,l,d&&!n?e(x,{marginLeft:l?2:0,display:"flex",alignItems:"center",children:d}):null,d&&n?e(u,{size:"sm",marginLeft:l?2:0}):null]})},ee=H.div`
+  width: 64px;
+  height: 100vh;
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  border-right: 1px solid ${F("neutral",300)};
+  background-color: ${F("neutral",200)};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`,re=H(g.Trigger)`
+  width: 64px;
+  height: 64px;
+  background-color: ${F("neutral",200)};
+  border-radius: initial;
+  border-style: solid;
+  border-width: 1px 1px 0px 0px;
+  border-color: ${F("neutral",300)};
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${F("neutral",100)};
+  }
+
+  &:active {
+    background-color: ${F("neutral",300)} !important;
+  }
+
+  &:focus-visible {
+    background-color: ${F("neutral",200)};
+    outline-color: ${F("primary",700)};
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .tab-label p {
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 14px;
+    text-align: center;
+    color: ${F("neutral",600)};
+  }
+
+  &[data-selected] {
+    background-color: ${F("neutral",100)};
+    border-left: 2px solid ${F("secondary",500)};
+
+    &:hover {
+      background-color: ${F("neutral",200)};
+    }
+
+    &:focus-visible {
+      background-color: ${F("neutral",100)};
+      outline-color: ${F("primary",700)};
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+
+    .tab-label {
+      p {
+        font-weight: 700;
+        color: ${F("neutral",700)};
+      }
+
+      svg {
+        path {
+          fill: ${F("neutral",700)};
+        }
+      }
+    }
+
+    &::before {
+      content: none;
+    }
+  }
+
+  &[data-disabled] {
+    background-color: ${F("neutral",200)} !important;
+
+    &[data-selected] {
+      background-color: ${F("neutral",100)} !important;
+    }
+
+    .tab-label {
+      p {
+        color: ${F("neutral",400)};
+      }
+
+      svg {
+        path {
+          fill: ${F("neutral",400)};
+        }
+      }
+    }
+  }
+`,le=H.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 16px;
+    height: 16px;
+
+    path {
+      fill: ${F("neutral",600)};
+    }
+  }
+`,ne=H(b.Trigger)`
+  width: 64px;
+  height: 64px;
+  background-color: ${F("neutral",200)};
+  border-radius: initial;
+  border-style: solid;
+  border-width: 1px 1px 0px 0px;
+  border-color: ${F("neutral",300)};
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+
+  &:hover {
+    background-color: ${F("neutral",100)};
+  }
+
+  &:active {
+    background-color: ${F("neutral",300)} !important;
+  }
+
+  &:focus-visible {
+    outline-color: ${F("primary",700)};
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .tab-label p {
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 14px;
+    text-align: center;
+    color: ${F("neutral",600)};
+  }
+`,ae=H.div`
+  width: 300px;
+  height: 100vh;
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 64px;
+  box-shadow: 2px 0px 2px 0px #0000000d;
+  background-color: ${F("neutral",100)};
+  overflow-y: auto;
+  overflow-x: hidden;
+`,oe=({tabs:n=[],defaultValue:o,onTabClick:i,children:t,onOpenChange:d})=>{const[c,p]=a(!1),[s,h]=a(o||n?.[0]?.value);return r(l,{children:[r(ee,{children:[e(g.Root,{defaultValue:o||n?.[0]?.value,orientation:"horizontal",width:"full",onFocusChange:({focusedValue:e})=>{return h(r=e),void(i&&i(r));var r},role:"tablist",children:e(g.List,{alignItems:"center",border:"none",style:{flexDirection:"column"},children:n.map((l=>e(re,{"aria-label":l["aria-label"]||l.label,...l,children:r(x,{display:"flex",alignItems:"center",flexDirection:"column",gap:"5px",className:"tab-label",children:[l.icon?e(le,{children:l.icon}):null,e("p",{children:l.label})]})},l.label)))})}),t?e(b.Root,{onOpenChange:({open:e})=>{p(e),d&&d(!e)},children:r(ne,{children:[e(le,{children:e(c?Z:R,{})}),r("div",{className:"tab-label",children:[e("p",{children:c?"Show":"Hide"}),e("p",{children:"Sidebar"})]})]})}):null]}),t?e(b.Root,{defaultOpen:!0,open:!c,children:e(b.Content,{children:e(ae,{role:"tabpanel","aria-labelledby":s,children:t})})}):null]})},ie=H(m.Item)`
+  .radio-item-indicator {
+    width: 20px;
+    height: 20px;
+    border: 1px solid ${F("neutral",600)};
+
+    .dot {
+      width: 10px !important;
+      height: 10px !important;
+      scale: 1 !important;
+    }
+
+    &:hover {
+      outline: 4px solid
+        color-mix(in srgb, ${F("primary",500)} 20%, transparent);
+    }
+
+    &:active {
+      outline: 4px solid
+        color-mix(in srgb, ${F("primary",500)} 40%, transparent);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      outline: 2px solid ${F("primary",700)};
+      outline-offset: 2px;
+      box-shadow: none;
+
+      &[data-checked] {
+        border: 2px solid ${F("primary",700)};
+
+        &[data-disabled] {
+          border: 2px solid ${F("neutral",400)};
+        }
+      }
+    }
+
+    &[data-checked] {
+      border: 1px solid ${F("primary",700)};
+      background-color: ${F("neutral",100)} !important;
+      color: ${F("primary",700)};
+
+      &[data-disabled] {
+        border: 1px solid ${F("neutral",400)};
+        color: ${F("neutral",400)};
+      }
+    }
+
+    &[data-disabled] {
+      border: 1px solid ${F("neutral",400)} !important;
+      background-color: ${F("neutral",100)} !important;
+
+      &:hover,
+      &:active {
+        outline: none;
+      }
+    }
+  }
+`,te=({children:l,value:n,disabled:a,...o})=>r(ie,{value:n,disabled:a,...o,children:[e(m.ItemHiddenInput,{}),e(m.ItemIndicator,{className:"radio-item-indicator"}),l?e(m.ItemText,{children:l}):null]}),de=({children:r,isRow:l=!1,name:n,defaultValue:o,onChange:i,customGap:t,...d})=>{const[c,p]=a(o);let s=l?"20px":"8px";return s=t||s,e(m.Root,{onValueChange:e=>{p(e.value),i&&i(n,e.value)},value:c,...d,children:e(f,{gap:s,flexDirection:l?"row":"column",alignItems:"flex-start",children:r})})},ce=H.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 40px;
+
+  ${({variant:e})=>"view"===e&&`\n    border: 1px solid ${F("neutral",400)};\n    background-color: ${F("neutral",200)};\n    border-radius: 4px;\n    padding: 4px;\n  `}
+`,pe=H(g.Trigger)`
+  width: 99%;
+  height: 40px;
+  padding: 8px 16px;
+  border-radius: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  &:focus-visible {
+    box-shadow: none;
+  }
+`,se=H(pe)`
+  background-color: ${F("neutral",200)};
+  color: ${F("neutral",600)};
+
+  &:hover {
+    background-color: ${F("neutral",100)};
+  }
+
+  &:active {
+    background-color: ${F("neutral",300)};
+  }
+
+  &:focus-visible {
+    background-color: ${F("neutral",300)};
+    outline-color: ${F("primary",700)};
+    outline-offset: 2px;
+  }
+
+  &[data-selected] {
+    background-color: ${F("neutral",100)};
+    color: ${F("neutral",800)};
+
+    &:hover {
+      background-color: ${F("neutral",200)};
+    }
+
+    &:active {
+      background-color: ${F("neutral",300)};
+    }
+
+    &:focus-visible {
+      background-color: ${F("neutral",100)};
+      outline-color: ${F("primary",700)};
+      outline-offset: 2px;
+    }
+
+    &::before {
+      content: none;
+    }
+  }
+
+  &[data-disabled] {
+    background-color: ${F("neutral",200)};
+    color: ${F("neutral",400)};
+
+    &[data-selected] {
+      background-color: ${F("neutral",100)};
+      color: ${F("neutral",400)};
+      opacity: 1;
+    }
+  }
+`,he=H.div`
+  width: 4px;
+  height: 24px;
+  background-color: ${F("neutral",400)};
+`,xe=H(pe)`
+  height: 32px;
+  border-radius: 2px;
+  background-color: ${F("neutral",200)};
+  color: ${F("neutral",600)};
+
+  &:hover {
+    background-color: ${F("neutral",300)};
+    box-shadow: 0px 1px 2px 0px #0000000d;
+  }
+
+  &:active {
+    background-color: ${F("neutral",300)};
+    box-shadow: 0px 2px 4px -2px #0000001a;
+    box-shadow: 0px 4px 6px -1px #0000001a;
+  }
+
+  &:focus-visible {
+    outline-color: ${F("primary",700)};
+    outline-offset: 2px;
+  }
+
+  &[data-selected] {
+    background-color: ${F("neutral",100)};
+    border: 1px solid ${F("neutral",300)};
+    box-shadow: 0px 1px 2px 0px #0000000d;
+    color: ${F("neutral",800)};
+
+    &:hover {
+      background-color: ${F("neutral",200)};
+      border: 1px solid ${F("neutral",300)};
+      box-shadow: 0px 2px 4px -2px #0000001a;
+      box-shadow: 0px 4px 6px -1px #0000001a;
+    }
+
+    &:active {
+      background-color: ${F("neutral",300)};
+      border: 1px solid ${F("neutral",300)};
+      box-shadow: 0px 2px 4px -2px #0000001a;
+      box-shadow: 0px 4px 6px -1px #0000001a;
+    }
+
+    &:focus-visible {
+      outline-color: ${F("primary",700)};
+      outline-offset: 2px;
+    }
+
+    &::before {
+      content: none;
+    }
+  }
+
+  &[data-disabled] {
+    background-color: ${F("neutral",200)};
+    color: ${F("neutral",400)};
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    &[data-selected] {
+      background-color: ${F("neutral",100)};
+      color: ${F("neutral",400)};
+      opacity: 1;
+    }
+  }
+`,ue=(e,r)=>e.findIndex((e=>e.value===r)),ge=e=>1===e?"none":2===e?"left":"right",be=({variant:n="panel",defaultValue:o,tabs:i,onTabClick:t})=>{const[d,c]=a(ue(i,o)||0),p="view"===n,s=p?xe:se;return e(ce,{variant:n,children:e(g.Root,{width:"full",defaultValue:o||i?.[0]?.value,onFocusChange:({focusedValue:e})=>{return c(ue(i,r=e)),void(t&&t(r));var r},children:e(g.List,{alignItems:"center",border:"none",children:i.map(((n,a)=>r(l,{children:[p&&1===a&&"left"===ge(d)?e(he,{}):null,e(s,{"aria-label":n["aria-label"]||n.label,...n,children:r(x,{display:"flex",alignItems:"center",gap:"5px",children:[n.icon,n.label]})},n.label),p&&1===a&&"right"===ge(d)?e(he,{}):null]})))})})})},me=H.div`
+  width: 268px;
+  padding: 16px 0;
+  border-bottom: 1px solid ${F("neutral",300)};
+`,fe=H.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+`,$e=H.div`
+  display: flex;
+  flex-direction: column;
+`,ve=H.p`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: ${F("neutral",800)};
+`,Ce=H.p`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+  color: ${F("neutral",600)};
+`,we=({name:l,label:n,caption:a,showInfoButton:o=!0,infoButtonLabel:i="About data",variant:t="switch",disabled:d,onInfoClick:c,isDefaultSelected:p=!1,onChange:s})=>{const h="switch"===t;return r(me,{children:[h?r(fe,{children:[r($e,{children:[e(ve,{"aria-label":n,children:n}),e(Ce,{"aria-label":a,children:a})]}),e(U,{"aria-label":`${n}, ${a}`,name:l,disabled:d,defaultChecked:p,onChange:s,role:"switch"})]}):r("div",{style:{display:"flex",flexDirection:"column"},children:[e(te,{value:l,disabled:d,fontSize:"16px",color:"var(--chakra-colors-neutral-800)",children:n}),e(Ce,{style:{marginLeft:"28px"},children:a})]}),o?e(x,{display:"flex",justifyContent:"flex-start",marginTop:"8px",marginLeft:h?0:"28px",children:e(X,{variant:"secondary",label:i,rightIcon:e(A,{}),size:"small",onClick:c,disabled:d})}):null]})},ye=H($.Root)`
+  .chakra-checkbox__control {
+    width: 20px;
+    height: 20px;
+    border: 1px solid ${F("neutral",600)};
+
+    svg {
+      width: 12px;
+
+      path {
+        fill: transparent;
+      }
+    }
+
+    &:hover,
+    &[data-hover] {
+      outline: 4px solid
+        color-mix(in srgb, ${F("primary",500)} 20%, transparent);
+    }
+
+    &:active,
+    &[data-active] {
+      outline: 4px solid
+        color-mix(in srgb, ${F("primary",500)} 40%, transparent);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      box-shadow: none;
+      outline: 2px solid ${F("primary",700)};
+      outline-offset: 2px;
+    }
+
+    &[data-state='checked'],
+    &[data-state='indeterminate'] {
+      border: 1px solid ${F("primary",700)};
+      background-color: ${F("primary",500)} !important;
+
+      svg path {
+        fill: ${F("primary",900)};
+      }
+    }
+
+    &[data-disabled] {
+      border: 1px solid ${F("neutral",400)};
+      background-color: transparent !important;
+      cursor: not-allowed;
+
+      &:hover,
+      &[data-hover],
+      &:active,
+      &[data-active] {
+        outline: none;
+      }
+
+      &[data-state='checked'],
+      &[data-state='indeterminate'] {
+        border: none !important;
+        background-color: ${F("neutral",300)} !important;
+
+        svg path {
+          fill: ${F("neutral",500)} !important;
+        }
+      }
+    }
+  }
+`,ke=({name:l,value:n,checked:a,defaultChecked:o,disabled:i,indeterminate:t,onCheckedChange:d,children:c,...p})=>r(ye,{name:l,value:n,checked:t?"indeterminate":a,defaultChecked:o,disabled:i,onCheckedChange:d,"aria-label":p["aria-label"]||l,...p,children:[e($.HiddenInput,{}),e($.Control,{children:e(t?D:B,{})}),e($.Label,{children:c})]}),ze=H.div`
+  background-color: ${F("neutral",100)};
+`,Le=H.span`
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: left;
+  color: ${F("neutral",800)};
+  display: flex;
+  align-items: center;
+  text-align: left;
+  gap: 10px;
+`,Ie=H.div`
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: left;
+  color: ${F("neutral",600)};
+  margin-bottom: 8px;
+`,_e=H(v.Root)`
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 700;
+  color: ${F("neutral",700)};
+  box-shadow: none;
+
+  height: 24px;
+  font-size: 12px;
+  line-height: 16px;
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+
+  button svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  ${({size:e})=>"small"===e?"\n    height: 16px;\n    border: none !important;\n    font-size: 10px;\n    line-height: 12px;\n\n    svg {\n      width: 8px;\n      height: 8px;\n    }\n\n    button svg {\n      width: 12px;\n      height: 12px;\n    }\n  ":""}
+
+  ${({size:e})=>"large"===e?"\n    height: 32px;\n    font-size: 16px;\n    line-height: 24px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n\n    button svg {\n      width: 16px;\n      height: 16px;\n    }\n  ":""}
+
+  .chakra-tag__startElement,
+  .chakra-tag__endElement,
+  .chakra-tag__closeTrigger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:focus-visible {
+      --focus-ring-color: ${F("primary",700)};
+    }
+  }
+
+  .chakra-tag__closeTrigger {
+    cursor: pointer;
+  }
+
+  &[data-disabled='true'] {
+    border: 1px solid ${F("neutral",400)};
+    background-color: ${F("neutral",300)};
+    color: ${F("neutral",600)};
+  }
+`,He=H(_e)`
+  background-color: ${F("neutral",100)};
+  border: 1px solid ${F("neutral",300)};
+`,Me=H(_e)`
+  background-color: ${F("neutral",200)};
+  border: 1px solid ${F("neutral",400)};
+`,Ve=H(_e)`
+  background-color: ${F("success",100)};
+  border: 1px solid ${F("success",200)};
+  color: ${F("success",500)};
+`,Fe=H(_e)`
+  background-color: ${F("warning",100)};
+  border: 1px solid ${F("warning",200)};
+  color: ${F("warning",500)};
+`,Ee=H(_e)`
+  background-color: ${F("error",100)};
+  border: 1px solid ${F("error",200)};
+  color: ${F("error",500)};
+`,Te=({label:l,size:n="default",variant:a,disabled:o,icon:i,onClose:t,closable:d,...c})=>{let p=He;return"info-grey"===a?p=Me:"success"===a?p=Ve:"warning"===a?p=Fe:"error"===a&&(p=Ee),r(p,{size:n,"data-disabled":o,...c,children:[i?e(v.StartElement,{"aria-label":`${l} tag icon`,children:i}):null,e(v.Label,{"aria-label":l,children:l}),d&&!o?e(v.EndElement,{children:e(v.CloseTrigger,{onClick:t,"aria-label":`${l} tag close button`})}):null]})},Re=({label:l,caption:n,value:i,layerItems:t,onChangeForRadioVariant:d})=>{const[c,p]=a({}),[s]=a((e=>{const r=e.find((e=>"radio"===e.variant&&e.isDefaultSelected));return r?.name})(t));o((()=>{let e={...c};t.forEach((r=>{r.isDefaultSelected&&(e={...e,["radio"===r.variant?l:r.name]:r.isDefaultSelected})})),p(e)}),[]);const h=(e,r,l,n)=>{const a={...c,[e]:r};p(a),l&&l(e,r,n)},u=Object.values(c).filter((e=>!0===e)).length;return r(C.Item,{value:i,width:"300px",children:[r(C.ItemTrigger,{padding:"16px",alignItems:"flex-start",children:[r(x,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:[r(Le,{children:[l,e(Te,{label:`${u} Active`,size:"small",variant:u>0?"success":"info-grey"})]}),e(Ie,{children:n})]}),e(C.ItemIndicator,{display:"flex",children:e(j,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),e(C.ItemContent,{paddingLeft:"16px",paddingRight:"16px",children:e(de,{name:l,defaultValue:s,customGap:"0px",onChange:(e,r)=>h(e,!!r,d,r),children:t.map((r=>e(we,{...r,onChange:(e,l)=>h(e,l,r.onChange)},r.label)))})})]})},Ze=({children:r,defaultValue:l,...n})=>e(ze,{style:{width:"300px"},children:e(C.Root,{defaultValue:l,multiple:!0,...n,children:r})}),Be=H.div`
+  width: 300px;
+  background-color: ${F("neutral",100)};
+`,De=H.aside`
+  padding: 16px 16px 20px 16px;
+  border-bottom: 1px solid ${F("neutral",300)};
+`,Ae=H.h2`
+  color: ${F("neutral",700)};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 28px;
+  text-align: left;
+`,je=H.p`
+  color: ${F("neutral",600)};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+`,Se=({title:l,description:n,tabBarVariant:a="panel",buttonTabs:o,defaultValue:i,onTabClick:t,children:d})=>r(Be,{children:[r(De,{role:"complementary",children:[e(Ae,{"aria-label":l,children:l}),e(je,{"aria-label":n,children:n})]}),o&&o.length>0?e(be,{variant:a,defaultValue:i,tabs:o,onTabClick:t}):null,d]}),Ne=H.div`
+  width: 100%;
+  min-width: ${({size:e})=>"small"===e?"234px":"366px"};
+  border-radius: 4px;
+  padding: ${({size:e})=>"small"===e?"8px 8px 12px 8px":"8px 12px 12px 12px"};
+  display: flex;
+  align-items: ${({isButtonRight:e})=>e?"center":"flex-start"};
+  justify-content: ${({isButtonRight:e})=>e?"space-between":"flex-start"};
+  flex-direction: ${({isButtonRight:e})=>e?"row":"column"};
+  gap: 8px;
+  margin-bottom: 16px;
+
+  button {
+    margin-left: ${({isButtonRight:e})=>e?0:"24px"};
+  }
+`,Oe=H.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  svg {
+    margin-top: 6px;
+  }
+`,qe=H.p`
+  color: ${F("neutral",800)};
+  font-size: ${({size:e})=>"small"===e?"14px":"18px"};
+  line-height: ${({size:e})=>"small"===e?"20px":"28px"};
+  font-weight: 400;
+`,Pe=H.p`
+  color: ${F("neutral",700)};
+  font-size: ${({size:e})=>"small"===e?"12px":"16px"};
+  line-height: ${({size:e})=>"small"===e?"16px":"24px"};
+  font-weight: 400;
+  margin-left: 24px;
+`,Ge=H(Ne)`
+  background-color: ${F("neutral",100)};
+  border: 1px solid ${F("neutral",300)};
+  color: ${F("neutral",700)};
+`,Ue=H(Ne)`
+  background-color: ${F("neutral",200)};
+  border: 1px solid ${F("neutral",300)};
+  color: ${F("neutral",700)};
+`,Ye=H(Ne)`
+  background-color: ${F("success",100)};
+  border: 1px solid ${F("success",500)};
+  color: ${F("success",500)};
+
+  p {
+    color: ${F("success",500)};
+  }
+`,We=H(Ne)`
+  background-color: ${F("warning",100)};
+  border: 1px solid ${F("warning",500)};
+  color: ${F("warning",500)};
+
+  p {
+    color: ${F("warning",500)};
+  }
+`,Je=H(Ne)`
+  background-color: ${F("error",100)};
+  border: 1px solid ${F("error",500)};
+  color: ${F("error",500)};
+
+  p {
+    color: ${F("error",500)};
+  }
+`,Ke=({label:l,caption:n,variant:a,size:o="large",icon:i=e(A,{height:"16px",width:"16px"}),onActionClick:t,actionLabel:d,isButtonRight:c})=>{let p=Ge;return"info-grey"===a?p=Ue:"success"===a?p=Ye:"warning"===a?p=We:"error"===a&&(p=Je),r(p,{isButtonRight:c,size:o,"aria-roledescription":"Note",children:[r("div",{children:[r(Oe,{children:[i,e(qe,{size:o,children:l})]}),e(Pe,{size:o,children:n})]}),d?e(X,{label:d,variant:"info-white"===a||"info-grey"===a?"primary":"secondary",size:"large"===o?"default":"small",onClick:t}):null]})},Qe=H.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: ${({size:e})=>"small"===e?"12px":"16px"};
+  margin-bottom: 20px;
+`,Xe=H.div`
+  width: 3px;
+  height: 100%;
+  min-height: ${({size:e})=>"small"===e?"92px":"116px"};
+  background-color: ${F("error",500)};
+`,er=H(w.Label)`
+  color: ${({disabled:e})=>F("neutral",e?600:900)};
+  font-size: ${({size:e})=>"small"===e?"14px":"16px"};
+  font-weight: 400;
+  line-height: ${({size:e})=>"small"===e?"20px":"24px"};
+  margin-bottom: 2px;
+
+  .chakra-field__requiredIndicator {
+    color: ${({disabled:e})=>e?F("neutral",600):F("error",500)};
+  }
+`,rr=H(w.HelperText)`
+  color: ${({disabled:e})=>F("neutral",e?500:600)};
+  font-size: ${({size:e})=>"small"===e?"12px":"14px"};
+  font-weight: 400;
+  line-height: ${({size:e})=>"small"===e?"16px":"20px"};
+`,lr=H(w.ErrorText)`
+  color: ${F("error",500)};
+  font-size: ${({size:e})=>"small"===e?"12px":"14px"};
+  font-weight: 700;
+  line-height: ${({size:e})=>"small"===e?"16px":"20px"};
+  margin-top: 2px;
+`,nr=H(y)`
+  height: ${({size:e})=>"small"===e?"28px":"40px"};
+  width: 100%;
+  border-radius: 4px;
+  padding: ${({size:e})=>"small"===e?"4px 8px":"12px"};
+  margin-top: 8px;
+  background-color: ${F("neutral",100)};
+  color: ${F("neutral",800)};
+  border: 1px solid ${F("neutral",400)};
+  box-shadow: 0px 1px 2px 0px #0000000d;
+
+  &:focus-visible,
+  &[data-focus-visible] {
+    border: 2px solid ${F("neutral",700)};
+    outline: 2px solid ${F("primary",700)};
+    outline-offset: 2px;
+  }
+
+  &:active {
+    border: 1px solid ${F("primary",600)} !important;
+    outline: none !important;
+    box-shadow: 0px 1px 2px 0px #0000000d;
+  }
+
+  &[data-invalid] {
+    border: 1px solid ${F("error",500)} !important;
+  }
+
+  &:disabled {
+    background-color: ${F("neutral",200)};
+    border: 1px solid ${F("neutral",300)} !important;
+  }
+
+  ${({value:e,defaultValue:r})=>e||r?`\n    border: 1px solid ${F("neutral",700)};\n  `:""}
+`,ar=({label:l,caption:n,placeholder:o,errorMessage:i,required:t,disabled:d,size:c="default",defaultValue:p="",onChange:s,...h})=>{const[x,u]=a(p);return r(Qe,{size:c,className:"text-input-container",children:[i?e(Xe,{size:c}):null,r(w.Root,{required:t,invalid:!!i,gap:"0",children:[l?r(er,{size:c,disabled:d,"aria-label":l,children:[e(w.RequiredIndicator,{"aria-label":"required"}),l,t?"":" (optional)"]}):null,n?e(rr,{size:c,disabled:d,"aria-label":n,children:n}):null,i?e(lr,{size:c,children:i}):null,e(nr,{placeholder:o,disabled:d,size:c,onChange:e=>{u(e.target.value),s&&s(e)},value:x,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...h})]})]})},or=H.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: ${({size:e})=>"small"===e?"12px":"16px"};
+  margin-bottom: 16px;
+`,ir=H.div`
+  width: 3px;
+  height: 100%;
+  min-height: ${({size:e,hasHelperText:r,hasErrorMessage:l})=>((e,r,l)=>{const n="small"===e;return r&&l?n?"192px":"208px":r?n?"174px":"186px":l?n?"168px":"180px":n?"169px":"180px"})(e,r,l)};
+  background-color: ${F("error",500)};
+`,tr=H(w.Label)`
+  color: ${({disabled:e})=>F("neutral",e?600:900)};
+  font-size: ${({size:e})=>"small"===e?"14px":"16px"};
+  font-weight: 400;
+  line-height: ${({size:e})=>"small"===e?"20px":"24px"};
+  margin-bottom: 2px;
+
+  .chakra-field__requiredIndicator {
+    color: ${({disabled:e})=>e?F("neutral",600):F("error",500)};
+  }
+`,dr=H(w.HelperText)`
+  color: ${({disabled:e})=>F("neutral",e?500:600)};
+  font-size: ${({size:e})=>"small"===e?"12px":"14px"};
+  font-weight: 400;
+  line-height: ${({size:e})=>"small"===e?"16px":"20px"};
+`,cr=H(w.HelperText)`
+  color: ${F("neutral",600)};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 8px;
+`,pr=H(w.ErrorText)`
+  color: ${F("error",500)};
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-top: 2px;
+`,sr=H(k)`
+  height: 104px;
+  width: 100%;
+  border-radius: 4px;
+  padding: ${({size:e})=>"small"===e?"8px":"12px"};
+  margin-top: 8px;
+  background-color: ${F("neutral",100)};
+  color: ${F("neutral",800)};
+  border: 1px solid ${F("neutral",400)};
+  box-shadow: 0px 1px 2px 0px #0000000d;
+
+  &:focus-visible,
+  &[data-focus-visible] {
+    border: 2px solid ${F("neutral",700)};
+    outline: 2px solid ${F("primary",700)};
+    outline-offset: 2px;
+  }
+
+  &:active {
+    border: 1px solid ${F("primary",600)} !important;
+    outline: none !important;
+    box-shadow: 0px 1px 2px 0px #0000000d;
+  }
+
+  &[data-invalid] {
+    border: 1px solid ${F("error",500)} !important;
+  }
+
+  &:disabled {
+    background-color: ${F("neutral",200)};
+    border: 1px solid ${F("neutral",300)} !important;
+  }
+
+  ${({value:e,defaultValue:r})=>e||r?`\n    border: 1px solid ${F("neutral",700)};\n  `:""}
+`,hr=({label:l,caption:n,placeholder:i,errorMessage:t,required:d,disabled:c,size:p="default",defaultValue:s="",onChange:h,minLength:x,maxLength:u,...g})=>{const[b,m]=a(s),[f,$]=a(!1),[v,C]=a(!1),[y,k]=a("");o((()=>{const{length:e}=s;x&&e<x&&e>0&&($(e<x),C(!1),k(`Enter at least ${x-e} characters`)),u&&e>u&&($(!1),C(e>u),k(`You have ${u-e} characters remaining`))}),[]);return r(or,{size:p,children:[t||f||v?e(ir,{size:p,hasHelperText:!!y,hasErrorMessage:!!t}):null,r(w.Root,{required:d,invalid:!!t||f||v,gap:"0",children:[l?r(tr,{size:p,disabled:c,"aria-label":l,children:[e(w.RequiredIndicator,{"aria-label":"required"}),l,d?"":" (optional)"]}):null,n?e(dr,{size:p,disabled:c,"aria-label":n,children:n}):null,t?e(pr,{children:t}):null,e(sr,{placeholder:i,disabled:c,size:p,onChange:e=>{m(e.target.value);const{length:r}=e.target.value;x&&u?($(r<x),C(r>u),k(`You have ${u-r} characters remaining`)):x?($(r<x),C(!1),k(r<x?`Enter at least ${x-r} characters`:"")):u&&(C(r>u),$(!1),k(`You have ${u-r} characters remaining`)),h&&h(e)},value:b,_placeholder:{color:"var(--chakra-colors-neutral-500)"},...g}),f&&x?r(pr,{style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},children:["You need ",x-b.length," more characters"]}):null,v&&u?r(pr,{style:{marginTop:"8px",fontSize:"12px",lineHeight:"16px"},children:["You have ",b.length-u," characters too many"]}):null,!y||v||f?null:e(cr,{"aria-label":y,children:y})]})]})},xr=H(h)`
+  width: 20px !important;
+  padding: 0 !important;
+  min-width: 20px !important;
+  height: 20px;
+  border-radius: 2px;
+  background-color: transparent;
+
+  svg {
+    width: 15px;
+    height: 15px;
+
+    path {
+      fill: ${F("neutral",800)};
+    }
+  }
+
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      ${F("primary",500)} 20%,
+      transparent
+    );
+  }
+
+  &:active {
+    background-color: color-mix(
+      in srgb,
+      ${F("primary",500)} 40%,
+      transparent
+    );
+  }
+
+  &:focus-visible {
+    outline-color: ${F("primary",700)};
+  }
+
+  &:disabled {
+    background-color: transparent;
+
+    svg {
+      path {
+        fill: ${F("neutral",500)};
+      }
+    }
+  }
+`,ur=({icon:r,disabled:l,...n})=>e(xr,{"aria-label":n["aria-label"],disabled:l,...n,children:r}),gr=H(ur)`
+  width: 20px !important;
+  padding: 0 !important;
+  min-width: 20px !important;
+  height: 20px;
+  border-radius: 2px;
+  background-color: ${F("neutral",300)};
+
+  svg {
+    width: 10px;
+    height: 10px;
+
+    path {
+      fill: ${F("neutral",800)};
+    }
+  }
+
+  &:hover {
+    background-color: ${F("neutral",300)};
+    box-shadow: 0px 1px 2px -1px #0000001a;
+    box-shadow: 0px 1px 3px 0px #0000001a;
+  }
+
+  &:active {
+    background-color: ${F("neutral",400)};
+    box-shadow: 0px 1px 2px -1px #0000001a;
+    box-shadow: 0px 1px 3px 0px #0000001a;
+  }
+
+  &:focus-visible {
+    outline-color: ${F("primary",700)};
+  }
+
+  &:disabled {
+    background-color: ${F("neutral",200)} !important;
+    box-shadow: none;
+
+    svg {
+      path {
+        fill: ${F("neutral",400)};
+      }
+    }
+  }
+`,br=({disabled:r,...l})=>e(gr,{icon:e(S,{}),"aria-label":l["aria-label"]||"Close",disabled:r,...l}),mr=H(z.Root)`
+  height: 60px;
+  padding: 40px 12px;
+`,fr=H(z.Thumb)`
+  height: 20px;
+  width: 20px;
+  background-color: ${F("primary",500)};
+  border: 2px solid ${F("primary",700)};
+  box-shadow: 0px 1px 2px 0px #0000000d;
+
+  &:hover,
+  &[data-hover] {
+    outline: 4px solid
+      color-mix(in srgb, ${F("primary",500)} 20%, transparent);
+  }
+
+  &[data-dragging] {
+    outline: 4px solid
+      color-mix(in srgb, ${F("primary",500)} 40%, transparent);
+
+    div {
+      display: flex;
+    }
+  }
+
+  &:focus-visible,
+  &[data-focus-visible] {
+    box-shadow: none;
+    outline: 2px solid ${F("primary",700)};
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    background-color: ${F("neutral",400)};
+    border: none;
+    box-shadow: none;
+    outline: none;
+    cursor: not-allowed;
+  }
+`,$r=H.div`
+  font-size: 14px;
+  line-height: 20px;
+  color: ${F("neutral",800)};
+  height: 28px;
+  background-color: ${F("neutral",100)};
+  border: 1px solid ${F("neutral",300)};
+  border-radius: 8px;
+  padding: 0 8px;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: -30px;
+`,vr=H(z.Track)`
+  background-color: ${F("neutral",300)};
+  border: none;
+  box-shadow: none;
+`,Cr=H(z.Range)`
+  background-color: ${F("primary",500)};
+  border: 1px solid ${F("primary",700)};
+  border-radius: 8px;
+
+  &:disabled,
+  &[disabled],
+  &[data-disabled],
+  &[aria-disabled='true'] {
+    --chakra-colors-border-emphasized: ${F("neutral",400)};
+    background-color: ${F("neutral",400)};
+    border: none;
+  }
+`,wr=H(z.Marker)`
+  font-size: 12px;
+  line-height: 16px;
+  color: ${F("neutral",800)};
+
+  p {
+    position: relative;
+    top: -40px;
+  }
+
+  &[data-state='under-value'] {
+    .chakra-slider__markerIndicator {
+      background-color: ${({isCentred:e})=>F("neutral",e?500:200)};
+    }
+
+    &[data-disabled] {
+      .chakra-slider__markerIndicator {
+        background-color: ${({isCentred:e})=>F("neutral",e?400:500)};
+      }
+    }
+  }
+
+  &[data-state='over-value'] {
+    .chakra-slider__markerIndicator {
+      background-color: ${F("neutral",500)};
+    }
+
+    &[data-disabled] {
+      .chakra-slider__markerIndicator {
+        background-color: ${F("neutral",400)};
+      }
+    }
+  }
+
+  ${({isMiddleMark:e})=>e?`\n    --ty: -6px !important;\n\n    .chakra-slider__markerIndicator {\n      height: 16px;\n      width: 4px;\n      background-color: ${F("primary",700)} !important;\n    }\n\n    &[data-disabled] {\n      .chakra-slider__markerIndicator {\n        background-color: ${F("neutral",400)} !important;\n      }\n    }\n  `:""};
+`,yr=l=>{const{value:n}=l;return e(L,{each:n,children:(l,n)=>r(fr,{index:n,children:[e($r,{children:l}),e(z.HiddenInput,{})]},n)})},kr=n.forwardRef(((l,n)=>{const{marks:a,isCentred:o}=l;return a?.length?e(z.MarkerGroup,{ref:n,children:a.map(((l,n)=>{const a="number"==typeof l?l:l.value,i="number"==typeof l?void 0:l.label;return r(wr,{value:a,isCentred:o,isMiddleMark:o&&1===n,children:[e(z.MarkerIndicator,{}),e("p",{children:i})]},a)}))}):null})),zr=n.forwardRef(((l,n)=>{const{marks:o,onValueChange:i,isCentred:t,...d}=l,[c,p]=a(l.defaultValue||l.value||[0]);let s=o?.map((e=>"number"==typeof e?{value:e,label:void 0}:e));if(t){const e=l.min||0,r=l.max||100;s=[e,(e+r)/2,r].map((e=>({value:e,label:void 0})))}const h=!!s?.some((e=>e.label));return e(mr,{ref:n,thumbAlignment:"center",onValueChange:e=>{p(e.value),i&&i(e)},origin:t?"center":"start",...d,children:r(z.Control,{"data-has-mark-label":h||void 0,children:[e(vr,{children:e(Cr,{})}),e(yr,{value:c}),e(kr,{marks:s,isCentred:t})]})})})),Lr=H.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: ${({color:e})=>e};
+  border: 1px solid ${F("neutral",400)};
+`,Ir=H.div`
+  width: 20px;
+  height: 8px;
+  border-radius: 2px;
+  background-color: ${({color:e})=>e};
+  border: 1px solid ${F("neutral",400)};
+`,_r=H.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: ${({color:e})=>e};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+`,Hr=H.div`
+  min-height: 36px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 16px;
+`,Mr=H.div`
+  display: flex;
+  gap: 8px;
+`,Vr=H.p`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  color: ${F("neutral",800)};
+`,Fr=H.p`
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  color: ${F("neutral",700)};
+`,Er=H.div`
+  button {
+    height: 25px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    color: ${F("neutral",600)};
+    padding: 0 10px;
+  }
+`,Tr=({type:l,label:a,caption:o,color:i,onActionClick:t,showActionButton:d,pointIcon:c})=>{const[p,s]=n.useState(!0),h="line"===l,x="point"===l;return r(Hr,{children:[r(Mr,{children:[r("div",{children:["raster"===l&&e(Lr,{color:i}),h&&e(Ir,{color:i}),x&&e(_r,{color:i,children:c})]}),r("div",{children:[e(Vr,{"aria-label":a,children:a}),e(Fr,{"aria-label":o,children:o})]})]}),t&&d?e(Er,{children:e(X,{variant:"borderless",label:p?"Hide":"Show",rightIcon:e(p?O:N,{}),"aria-label":"Show or Hide action",onClick:()=>{s(!p),t&&t()}})}):null]})},Rr=H(C.Item)`
+  margin-bottom: 16px;
+  border: 1px solid ${F("neutral",300)};
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px 0px #0000000d;
+`,Zr=H(C.ItemTrigger)`
+  padding: 6px 8px;
+  align-items: center;
+  background-color: ${F("neutral",100)};
+
+  &[aria-expanded='true'] {
+    border-bottom: 1px solid ${F("neutral",300)};
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  svg {
+    height: 10px;
+    width: 10px;
+  }
+`,Br=H.p`
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  color: ${F("neutral",700)};
+`,Dr=H(C.ItemContent)`
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+
+  .layer-parameters-item-child {
+    padding-bottom: 16px;
+    border-bottom: 1px solid ${F("neutral",300)};
+    margin-bottom: 16px;
+
+    &:last-child {
+      padding-bottom: 0px;
+      border-bottom: none;
+      margin-bottom: 0px;
+    }
+  }
+`,Ar=({label:l,children:n,openedByDefault:a})=>e("div",{children:e(C.Root,{defaultValue:a?[l]:[],multiple:!0,children:r(Rr,{value:l,children:[r(Zr,{children:[e(x,{width:"full",display:"flex",flexDirection:"column",alignItems:"flex-start",children:e(Br,{children:l})}),e(C.ItemIndicator,{display:"flex",children:e(j,{color:"var(--chakra-colors-neutral-700)",height:"16px",width:"16px"})})]}),e(Dr,{children:i.map(n,(r=>e("div",{className:"layer-parameters-item-child",children:r})))})]})})}),jr=H.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`,Sr=H.div`
+  height: 20px;
+  width: 100%;
+  margin-bottom: 8px;
+  border: 1px solid ${F("neutral",300)};
+  border-radius: 4px;
+  ${({gradient:e})=>e?`background: ${e};`:""}
+`,Nr=H.div`
+  height: 20px;
+  width: 100%;
+  margin-bottom: 8px;
+  border: 1px solid ${F("neutral",300)};
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+
+  div:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  div:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+`,Or=H.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`,qr=H.p`
+  width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  color: ${F("neutral",800)};
+  text-align: center;
+`,Pr=H.p`
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  color: ${F("neutral",600)};
+  text-align: center;
+`,Gr=e=>{const r=e.map(((r,l)=>`${l/(e.length-1)*100}%`));return`linear-gradient(to right, ${e.map(((e,l)=>`${e} ${r[l]}`)).join(", ")})`},Ur=({colors:l,values:n,subLabels:a,isGradient:o})=>r(jr,{children:[o?e(Sr,{gradient:Gr(l)}):e(Nr,{children:l?.map(((r,l)=>e("div",{style:{backgroundColor:r,width:"100%",height:"100%"}},`${r}-${n?.[l]}`)))}),e(Or,{children:n?.map((r=>e("div",{style:{width:o?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:e(qr,{children:r},r)})))}),a&&a.length?e(Or,{children:a.map((r=>e("div",{style:{width:o?"auto":`calc(100% / ${n.length})`,display:"flex",justifyContent:"center"},children:e(Pr,{style:{width:"100%"},children:r},r)})))}):null]}),Yr=H.div`
+  padding: 12px;
+  padding-bottom: 20px;
+  display: flex;
+  gap: 12px;
+  border-bottom: 1px solid ${F("neutral",300)};
+`,Wr=H.div`
+  display: flex;
+  flex-direction: column;
+
+  svg {
+    path {
+      fill: ${F("neutral",500)} !important;
+    }
+  }
+`,Jr=H.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+`,Kr=H.p`
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  text-align: left;
+  color: ${F("neutral",800)};
+`,Qr=H.p`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: left;
+  color: ${F("neutral",600)};
+`,Xr=H.div`
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    width: 110px;
+  }
+`,el=H(I.Content)`
+  width: 234px;
+  border: 1px solid ${F("neutral",600)};
+  border-radius: 4px;
+`,rl=H(I.Body)`
+  padding: 12px;
+`,ll=H.p`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: left;
+  color: ${F("neutral",900)};
+`,nl=H.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .text-input-container {
+    width: 70px;
+    margin: 0px;
+
+    .chakra-input {
+      padding: 4px;
+    }
+  }
+
+  .chakra-slider__root {
+    padding: 0 12px;
+    height: 30px;
+    margin-top: 18px;
+    width: 100%;
+  }
+`,al=({defaultValue:l,onOpacityChanged:n})=>{const[o,i]=a(l);return r(I.Root,{positioning:{placement:"bottom-end"},children:[e(I.Trigger,{asChild:!0,children:e(X,{label:"Opacity",size:"small",variant:"secondary",leftIcon:e(A,{})})}),e(I.Positioner,{children:e(el,{children:r(rl,{children:[e(ll,{children:"Opacity"}),r(nl,{children:[e(ar,{"aria-label":"Opacity",min:"0",max:"100",value:`${o}%`,onChange:e=>{const r=e.target.value||"0";let l=parseInt(r,10);l=Number.isNaN(l)?0:l,l=l<0?0:l,l=l>100?100:l,i(l),n&&n(l)},className:"opacity-control-text-input"}),e(zr,{min:0,max:100,value:[o],onValueChangeEnd:({value:e})=>{i(e[0]),n&&n(e[0])}})]})]})})})]})},ol=({layerName:l,dataUnit:n,onDrag:a,onUpClick:o,onDownClick:i,onRemoveClick:t,children:d,onInfoClick:c,onOpacityChanged:p})=>r(Yr,{children:[r(Wr,{children:[e(ur,{icon:e(q,{}),"aria-label":"Drag and drop",onClick:a}),r("div",{style:{display:"flex",flexDirection:"column",marginTop:"12px",gap:"12px"},children:[e(ur,{icon:e(j,{rotate:"180"}),"aria-label":"Up",onClick:o}),e(ur,{icon:e(j,{}),"aria-label":"Down",onClick:i})]})]}),r("div",{children:[r(Jr,{children:[r("div",{children:[e(Kr,{children:l}),e(Qr,{children:n})]}),e(X,{label:"Remove",size:"small",variant:"secondary",rightIcon:e(S,{}),onClick:t})]}),d,r(Xr,{children:[e(X,{label:"About data",size:"small",variant:"secondary",leftIcon:e(A,{}),onClick:c}),e(al,{defaultValue:80,onOpacityChanged:p})]})]})]}),il=H.div`
+  width: 290px;
+  box-shadow: 0px 2px 4px -2px #0000001a;
+  box-shadow: 0px 4px 6px -1px #0000001a;
+`,tl=({legendContent:l,analysisContent:n,onTabClick:o})=>{const[t,d]=a("legend-tab"),[c]=a(i.map(l,((e,r)=>({id:r,child:e,sequence:r})))||[]);return r(il,{children:[e(be,{tabs:[{label:"Legend",value:"legend-tab",icon:e(P,{})},{label:"Analysis",value:"analysis-tab",icon:e(G,{})}],onTabClick:e=>{d(e),o&&o(e)}}),"legend-tab"===t?e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:c.map((e=>e.child))}):null,"analysis-tab"===t?e("div",{style:{display:"flex",flexDirection:"column",gap:"10px"},children:n}):null]})};t.createRoot(document.getElementById("root")).render(e(n.StrictMode,{children:e(_,{value:V,children:e((()=>e("div",{className:"App",children:e("h1",{children:"Welcome to WRI OS"})})),{})})}));export{X as Button,ke as Checkbox,br as CloseButton,ur as IconButton,Ke as InlineMessage,Re as LayerGroup,Ze as LayerGroupContainer,we as LayerItem,Se as LayerPanel,Ar as LayerParameters,ol as LegendItem,tl as LegendPanel,oe as NavigationRail,Tr as QualitativeLegend,te as Radio,de as RadioGroup,Ur as ScaleLegend,zr as Slider,U as Switch,be as TabBar,Te as Tag,ar as TextInput,hr as Textarea};
+//# sourceMappingURL=index.js.map