labsense-ui-kit 1.1.11 → 1.1.12

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useId } from 'react';
 import styled, { css, keyframes, styled as styled$1 } from 'styled-components';
 import { useNavigate, NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -9412,7 +9412,7 @@ var SearchBar$1$1$1 = styled.input(_templateObject10$2$1$1 || (_templateObject10
 });
 var _templateObject$c$1$1, _templateObject2$9$1$1;
 var ModalOverlay$1$1 = styled.div(_templateObject$c$1$1 || (_templateObject$c$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
-var ModalContainer$1$1 = styled.div(_templateObject2$9$1$1 || (_templateObject2$9$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-width: ", ";\n"])), colorVariables$1$1.accent.light, function (_ref) {
+var ModalContainer$1$1 = styled.div(_templateObject2$9$1$1 || (_templateObject2$9$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-height: 100vh;\n  max-width: ", ";\n  overflow: auto;\n"])), colorVariables$1$1.accent.light, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return $maxWidth ? $maxWidth : '400px';
 });
@@ -13109,8 +13109,8 @@ var SearchBar$1$1$1$1$1$1$1 = styled.input(_templateObject10$2$1$1$1$1$1$1 || (_
 var _templateObject$c$1$1$1$1$1$1, _templateObject2$9$1$1$1$1$1$1;
 var ModalOverlay$1$1$1$1$1$1 = styled.div(_templateObject$c$1$1$1$1$1$1 || (_templateObject$c$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
 var ModalContainer$1$1$1$1$1$1 = styled.div(_templateObject2$9$1$1$1$1$1$1 || (_templateObject2$9$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-width: ", ";\n"])), colorVariables$1$1$1$1$1$1.accent.light, function (_ref) {
-  var maxWidth = _ref.maxWidth;
-  return maxWidth ? maxWidth : '400px';
+  var $maxWidth = _ref.$maxWidth;
+  return $maxWidth ? $maxWidth : '400px';
 });
 var _templateObject$d$1$1$1$1$1$1, _templateObject2$a$1$1$1$1$1$1;
 var SearchContainer$2$1$1$1$1$1$1 = styled.div(_templateObject$d$1$1$1$1$1$1 || (_templateObject$d$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 5.5px 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref) {
@@ -14054,127 +14054,1443 @@ var SearchBar$2$1$1$1$1$1$1$1 = styled.input(_templateObject2$a$1$1$1$1$1$1$1 ||
   var $placeholderColor = _ref5.$placeholderColor;
   return $placeholderColor || colorVariables$1$1$1$1$1$1$1.text.light;
 });
-var _templateObject$e$1$1$1$1$1$1$1, _templateObject2$b$1$1$1$1$1$1$1, _templateObject3$7$1$1$1$1$1$1$1, _templateObject4$5$1$1$1$1$1$1$1, _templateObject5$5$1$1$1$1$1$1$1, _templateObject6$5$1$1$1$1$1$1$1;
-var Container$3$1$1$1$1$1$1$1 = styled.div(_templateObject$e$1$1$1$1$1$1$1 || (_templateObject$e$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
-  var $padding = _ref.$padding;
-  return $padding;
-});
-var Label = styled.label(_templateObject2$b$1$1$1$1$1$1$1 || (_templateObject2$b$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
-  var $size = _ref2.$size;
-  switch ($size) {
-    case 'small':
-      return "\n          font-size: 12px;\n          line-height: 12px;\n        ";
-    case 'medium':
-      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
-    case 'large':
-      return "\n          font-size: 16px;\n          line-height: 16px;\n        ";
-    default:
-      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+function _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+var colorVariables$1$1$1$1$1$1$1$1 = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#14171A',
+    light: '#FFFFFF'
+  },
+  accent: {
+    light: '#E1E8ED',
+    extraLight: '#F5F8FA',
+    softBlue: '#D4EEFF',
+    extraSoftBlue: '#E4F4FF',
+    boldTransparent: '#5E5E5E80',
+    transparent: '#5E5E5E4D',
+    lightTransparent: '#5E5E5E23'
+  },
+  "default": {
+    primary: '#78B6F0',
+    secondary: '#C2C2C2',
+    tertiary: 'transparent',
+    error: '#F44336',
+    success: '#4CAF50',
+    warning: '#FF9800',
+    info: '#2159F3'
+  },
+  disabled: {
+    primary: '#B9DCF7',
+    secondary: '#DADADA',
+    error: '#FFEBEE',
+    success: '#E8F5E9',
+    warning: '#FFF3E0',
+    info: '#E3F2FD'
+  },
+  hover: {
+    primary: '#4C9EEB',
+    secondary: '#A3A3A3',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#193ED2'
+  },
+  border: {
+    extraBold: '#657786',
+    bold: '#BFBFBF',
+    medium: '#CBCED0',
+    light: '#DCDCDC',
+    extraLight: '#E6E3E3'
+  },
+  text: {
+    dark: '#14171A',
+    medium: '#657786',
+    light: '#98A2AA',
+    white: '#FFFFFF',
+    success: '#1B5E20',
+    error: '#B71C1C',
+    info: '#0D30A1',
+    warning: '#E65100'
+  },
+  badge: {
+    lavender: '#E8DAFF',
+    papayaWhip: '#FFEDD5',
+    water: '#C7E3FF',
+    paleBlue: '#B0F0E4',
+    teaGreen: '#D5F7C2',
+    lightBlue: '#ADD8E6'
   }
+};
+var _templateObject$e$1$1$1$1$1$1$1, _templateObject2$b$1$1$1$1$1$1$1, _templateObject3$7$1$1$1$1$1$1$1;
+var wrapperCss$1$1$1$1$1$1$1$1 = css(_templateObject$e$1$1$1$1$1$1$1 || (_templateObject$e$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  svg {\n    overflow: visible;\n    vector-effect: non-scaling-stroke;\n    line,\n    path,\n    circle,\n    ellipse,\n    foreignObject,\n    polygon,\n    polyline,\n    rect,\n    text,\n    textPath,\n    tspan {\n      vector-effect: non-scaling-stroke;\n    }\n  }\n"])));
+var IconWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$b$1$1$1$1$1$1$1 || (_templateObject2$b$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  ", ";\n"])), function (_ref) {
+  var $clickable = _ref.$clickable;
+  return $clickable ? 'pointer' : 'default';
+}, wrapperCss$1$1$1$1$1$1$1$1);
+var IconWrapperForSVG$1$1$1$1$1$1$1$1 = styled.g(_templateObject3$7$1$1$1$1$1$1$1 || (_templateObject3$7$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  ", ";\n"])), wrapperCss$1$1$1$1$1$1$1$1);
+var _templateObject$1$1$1$1$1$1$1$1$1, _templateObject2$1$1$1$1$1$1$1$1$1;
+var Container$3$1$1$1$1$1$1$1 = styled.div(_templateObject$1$1$1$1$1$1$1$1$1 || (_templateObject$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex: ", ";\n  flex-wrap: ", ";\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";  \n  gap: ", ";\n  font-weight: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  padding: ", ";\n  background: ", ";\n  object-fit:", ";\n  margin: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  position: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  text-align: ", "; \n  color: ", "; \n  overflow: ", ";\n  overflow-y: ", ";\n  z-index: ", "; \n  scrollbar-width: ", ";\n  border: ", "; \n  border-bottom: ", ";\n  border-left: ", ";\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+  var $flex = _ref.$flex;
+  return $flex;
+}, function (_ref2) {
+  var $flexWrap = _ref2.$flexWrap;
+  return $flexWrap;
 }, function (_ref3) {
-  var $titlecolor = _ref3.$titlecolor;
-  switch ($titlecolor) {
-    case 'dark':
-      return colorVariables$1$1$1$1$1$1$1.text.dark;
-    case 'medium':
-      return colorVariables$1$1$1$1$1$1$1.text.medium;
-    case 'light':
-      return colorVariables$1$1$1$1$1$1$1.text.light;
-    case 'white':
-      return colorVariables$1$1$1$1$1$1$1.text.white;
-    case 'warning':
-      return colorVariables$1$1$1$1$1$1$1["default"].warning;
-    case 'info':
-      return colorVariables$1$1$1$1$1$1$1["default"].info;
-    case 'success':
-      return colorVariables$1$1$1$1$1$1$1["default"].success;
-    case 'error':
-      return colorVariables$1$1$1$1$1$1$1["default"].error;
-    default:
-      return $titlecolor;
-  }
-});
-var Input = styled.input(_templateObject3$7$1$1$1$1$1$1$1 || (_templateObject3$7$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref4) {
-  var $disabled = _ref4.$disabled;
-  return $disabled ? 'not-allowed' : 'auto';
+  var $flexDirection = _ref3.$flexDirection;
+  return $flexDirection;
+}, function (_ref4) {
+  var $justifyContent = _ref4.$justifyContent;
+  return $justifyContent;
 }, function (_ref5) {
-  var $disabled = _ref5.$disabled,
-    $background = _ref5.$background;
-  return $disabled ? colorVariables$1$1$1$1$1$1$1.disabled.secondary : $background;
+  var $alignItems = _ref5.$alignItems;
+  return $alignItems;
 }, function (_ref6) {
-  var $color = _ref6.$color;
-  return $color;
+  var $gap = _ref6.$gap;
+  return $gap;
 }, function (_ref7) {
-  var $size = _ref7.$size;
-  switch ($size) {
-    case 'small':
-      return "\n          font-size: 12px;\n          padding: 5px 10px;\n        ";
-    case 'medium':
-      return "\n          font-size: 14px;\n          padding: 9.5px 12px;\n        ";
-    case 'large':
-      return "\n          font-size: 16px;\n          padding: 9px 14px;\n        ";
-    default:
-      return "\n          font-size: 14px;\n          padding: 7px 12px;\n        ";
-  }
+  var $fontWeight = _ref7.$fontWeight;
+  return $fontWeight;
 }, function (_ref8) {
-  var $color = _ref8.$color;
-  switch ($color) {
-    case 'dark':
-      return colorVariables$1$1$1$1$1$1$1.text.dark;
-    case 'medium':
-      return colorVariables$1$1$1$1$1$1$1.text.medium;
-    case 'light':
-      return colorVariables$1$1$1$1$1$1$1.text.light;
-    case 'white':
-      return colorVariables$1$1$1$1$1$1$1.text.white;
-    case 'warning':
-      return colorVariables$1$1$1$1$1$1$1["default"].warning;
-    case 'info':
-      return colorVariables$1$1$1$1$1$1$1["default"].info;
-    case 'success':
-      return colorVariables$1$1$1$1$1$1$1["default"].success;
-    case 'error':
-      return colorVariables$1$1$1$1$1$1$1["default"].error;
-    default:
-      return $color;
-  }
-}, colorVariables$1$1$1$1$1$1$1.text.light);
-var InputWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject4$5$1$1$1$1$1$1$1 || (_templateObject4$5$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject5$5$1$1$1$1$1$1$1 || (_templateObject5$5$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
-  var $disabled = _ref9.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
-});
-var Asterisk$1$1$1$1$1$1$1$1 = styled.span(_templateObject6$5$1$1$1$1$1$1$1 || (_templateObject6$5$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1$1["default"].error);
-var _templateObject$f, _templateObject2$c, _templateObject3$8;
-var Container$4 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
-  var $padding = _ref.$padding;
+  var $height = _ref8.$height;
+  return $height;
+}, function (_ref9) {
+  var $minHeight = _ref9.$minHeight;
+  return $minHeight;
+}, function (_ref10) {
+  var $maxHeight = _ref10.$maxHeight;
+  return $maxHeight;
+}, function (_ref11) {
+  var $width = _ref11.$width;
+  return $width;
+}, function (_ref12) {
+  var $minWidth = _ref12.$minWidth;
+  return $minWidth;
+}, function (_ref13) {
+  var $maxWidth = _ref13.$maxWidth;
+  return $maxWidth;
+}, function (_ref14) {
+  var $padding = _ref14.$padding;
   return $padding;
-});
-var Label$1 = styled.label(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
-  var $size = _ref2.$size;
-  switch ($size) {
-    case 'small':
-      return 'font-size: 12px; line-height: 12px;';
-    case 'medium':
-      return 'font-size: 14px; line-height: 14px;';
-    case 'large':
-      return 'font-size: 16px; line-height: 16px;';
-    default:
-      return 'font-size: 14px; line-height: 14px;';
-  }
-}, function (_ref3) {
-  var $titlecolor = _ref3.$titlecolor;
-  return $titlecolor || colorVariables$1$1$1$1$1$1$1.text.dark;
-});
-var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref4) {
-  var $disabled = _ref4.$disabled;
-  return $disabled ? 'not-allowed' : 'auto';
-}, function (_ref5) {
-  var $disabled = _ref5.$disabled,
-    $background = _ref5.$background;
-  return $disabled ? colorVariables$1$1$1$1$1$1$1.disabled.secondary : $background;
-}, function (_ref6) {
-  var $color = _ref6.$color;
+}, function (_ref15) {
+  var $background = _ref15.$background;
+  return $background;
+}, function (_ref16) {
+  var $objectfit = _ref16.$objectfit;
+  return $objectfit;
+}, function (_ref17) {
+  var $margin = _ref17.$margin;
+  return $margin;
+}, function (_ref18) {
+  var $borderRadius = _ref18.$borderRadius;
+  return $borderRadius;
+}, function (_ref19) {
+  var $cursor = _ref19.$cursor;
+  return $cursor;
+}, function (_ref20) {
+  var $fontSize = _ref20.$fontSize;
+  return $fontSize;
+}, function (_ref21) {
+  var $opacity = _ref21.$opacity;
+  return $opacity;
+}, function (_ref22) {
+  var $pointerEvents = _ref22.$pointerEvents;
+  return $pointerEvents;
+}, function (_ref23) {
+  var $position = _ref23.$position;
+  return $position;
+}, function (_ref24) {
+  var $top = _ref24.$top;
+  return $top;
+}, function (_ref25) {
+  var $bottom = _ref25.$bottom;
+  return $bottom;
+}, function (_ref26) {
+  var $left = _ref26.$left;
+  return $left;
+}, function (_ref27) {
+  var $right = _ref27.$right;
+  return $right;
+}, function (_ref28) {
+  var $textAlign = _ref28.$textAlign;
+  return $textAlign;
+}, function (_ref29) {
+  var $color = _ref29.$color;
+  return $color;
+}, function (_ref30) {
+  var $overflow = _ref30.$overflow;
+  return $overflow || 'visible';
+}, function (_ref31) {
+  var $overflowY = _ref31.$overflowY;
+  return $overflowY;
+}, function (_ref32) {
+  var $zIndex = _ref32.$zIndex;
+  return $zIndex;
+}, function (_ref33) {
+  var $scrollbarWidth = _ref33.$scrollbarWidth;
+  return $scrollbarWidth;
+}, function (_ref34) {
+  var $border = _ref34.$border;
+  return $border;
+}, function (_ref35) {
+  var $borderBottom = _ref35.$borderBottom;
+  return $borderBottom;
+}, function (_ref36) {
+  var $borderLeft = _ref36.$borderLeft;
+  return $borderLeft;
+}, function (_ref37) {
+  var $hoverBackground = _ref37.$hoverBackground;
+  return $hoverBackground;
+}, function (_ref38) {
+  var $hoverColor = _ref38.$hoverColor;
+  return $hoverColor;
+});
+var Span$1$1$1$1$1$1$1$1 = styled.span(_templateObject2$1$1$1$1$1$1$1$1$1 || (_templateObject2$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref39) {
+  var $fontFamily = _ref39.$fontFamily;
+  return $fontFamily ? $fontFamily : 'NotoSans, sans-serif';
+}, function (_ref40) {
+  var $fontWeight = _ref40.$fontWeight;
+  return $fontWeight ? $fontWeight : '500';
+}, function (_ref41) {
+  var $fontSize = _ref41.$fontSize;
+  return $fontSize ? $fontSize : '16px';
+}, function (_ref42) {
+  var $color = _ref42.$color;
+  return $color ? $color : colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref43) {
+  var $lineHeight = _ref43.$lineHeight;
+  return $lineHeight ? $lineHeight : '100%';
+}, function (_ref44) {
+  var $textAlign = _ref44.$textAlign;
+  return $textAlign ? $textAlign : 'center';
+}, function (_ref45) {
+  var $minWidth = _ref45.$minWidth;
+  return $minWidth;
+}, function (_ref46) {
+  var $width = _ref46.$width;
+  return $width;
+}, function (_ref47) {
+  var $overflowWrap = _ref47.$overflowWrap;
+  return $overflowWrap;
+});
+var _templateObject$2$1$1$1$1$1$1$1$1, _templateObject2$2$1$1$1$1$1$1$1$1;
+var TooltipWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject$2$1$1$1$1$1$1$1$1 || (_templateObject$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  svg {\n    cursor: pointer;\n  }  \n"])));
+var TooltipText$1$1$1$1$1$1$1$1 = styled.span(_templateObject2$2$1$1$1$1$1$1$1$1 || (_templateObject2$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  visibility: ", ";\n  opacity: ", ";\n  width: max-content;\n  max-width: 300px;\n  background-color: ", ";\n  color: ", ";\n  text-align: start;\n  border-radius: 8px;\n  padding:8px 16px;\n  transition: opacity 0.2s ease-in-out;\n  font-size: 12px;\n\n  // position: absolute;\n  // left: 0;\n  // bottom: 150%;\n  // white-space: pre-line;\n  // position: fixed;\n  // z-index: 99999;\n  // transition: opacity 0.2s ease-in-out;\n  // font-size: 12px;\n  // pointer-events: auto;\n"])), function (_ref) {
+  var $visible = _ref.$visible;
+  return $visible ? 'visible' : 'hidden';
+}, function (_ref2) {
+  var $visible = _ref2.$visible;
+  return $visible ? 1 : 0;
+}, function (_ref3) {
+  var $bgColor = _ref3.$bgColor;
+  return $bgColor || colorVariables$1$1$1$1$1$1$1$1.brand.light;
+}, colorVariables$1$1$1$1$1$1$1$1.text.medium);
+var _templateObject$3$1$1$1$1$1$1$1$1;
+var BreadCrum$1$1$1$1$1$1$1$1 = styled.span(_templateObject$3$1$1$1$1$1$1$1$1 || (_templateObject$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-weight: 400;\n  font-size: 12px;\n  color: ", ";\n  line-height: 100%;\n  text-align: center;\n  opacity: ", ";\n  \n  &:hover {\n    text-decoration: ", ";\n    cursor: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+  var $color = _ref.$color;
+  return $color ? $color : colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref2) {
+  var $disabled = _ref2.$disabled;
+  return $disabled ? '0.6' : '1';
+}, function (_ref3) {
+  var $hover = _ref3.$hover,
+    $disabled = _ref3.$disabled;
+  return $hover && !$disabled && 'underline';
+}, function (_ref4) {
+  var $hover = _ref4.$hover,
+    $disabled = _ref4.$disabled;
+  return $hover && !$disabled ? 'pointer' : 'default';
+}, function (_ref5) {
+  var $hover = _ref5.$hover,
+    $disabled = _ref5.$disabled;
+  return $hover && !$disabled && colorVariables$1$1$1$1$1$1$1$1["default"].primary;
+});
+var _templateObject$4$1$1$1$1$1$1$1$1;
+var fontFaces$1$1$1$1$1$1$1$1 = css(_templateObject$4$1$1$1$1$1$1$1$1 || (_templateObject$4$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 200;\n    font-style: normal;\n    src: url('./NotoSans-ExtraLight.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 300;\n    font-style: normal;\n    src: url('./NotoSans-Light.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 400;\n    font-style: normal;\n    src: url('./NotoSans-Regular.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 400;\n    font-style: italic;\n    src: url('./NotoSans-italic.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 500;\n    font-style: normal;\n    src: url('./NotoSans-Medium.woff') format('woff');\n    font-display: fallback;\n  }\n\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 600;\n    font-style: normal;\n    src: url('./NotoSans-SemiBold.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 700;\n    font-style: normal;\n    src: url('./NotoSans-Bold.woff') format('woff');\n    font-display: fallback;\n  }\n  @font-face {\n    font-family: 'NotoSans';\n    font-weight: 800;\n    font-style: normal;\n    src: url('./NotoSans-ExtraBold.woff') format('woff');\n    font-display: fallback;\n  }\n"])));
+var GlobalFonts$1$1$1$1$1$1$1$1 = {
+  bold: 'NotoSans, sans-serif',
+  regular: 'NotoSans, sans-serif',
+  light: 'NotoSans, sans-serif'
+};
+var _templateObject$5$1$1$1$1$1$1$1$1, _templateObject2$3$1$1$1$1$1$1$1$1, _templateObject3$1$1$1$1$1$1$1$1$1, _templateObject4$5$1$1$1$1$1$1$1, _templateObject5$5$1$1$1$1$1$1$1, _templateObject6$5$1$1$1$1$1$1$1;
+var spin$1$1$1$1$1$1$1$1 = keyframes(_templateObject$5$1$1$1$1$1$1$1$1 || (_templateObject$5$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$3$1$1$1$1$1$1$1$1 || (_templateObject2$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: ", "px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: fadeIn 0.3s ease-in-out forwards, ", " 1s linear infinite;\n"])), function (_ref) {
+  var $size = _ref.$size;
+  return $size;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size;
+}, function (_ref3) {
+  var $size = _ref3.$size;
+  return $size / 4;
+}, function (_ref4) {
+  var $color = _ref4.$color;
+  return $color;
+}, spin$1$1$1$1$1$1$1$1);
+var LoaderWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject3$1$1$1$1$1$1$1$1$1 || (_templateObject3$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  margin-right: ", ";\n  transition: opacity 0.3s ease-in-out;\n"])), function (_ref5) {
+  var $loaderPosition = _ref5.$loaderPosition;
+  return $loaderPosition === 'right' ? '4px' : '0';
+}, function (_ref6) {
+  var $loaderPosition = _ref6.$loaderPosition;
+  return $loaderPosition === 'left' ? '4px' : '0';
+});
+var Container$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject4$5$1$1$1$1$1$1$1 || (_templateObject4$5$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  svg {\n    cursor: ", ";\n  }\n"])), function (_ref7) {
+  var $iconPosition = _ref7.$iconPosition;
+  return $iconPosition === 'right' ? 'row-reverse' : 'row';
+}, function (_ref8) {
+  var gap = _ref8.gap;
+  return gap || '4px';
+}, function (_ref9) {
+  var cursor = _ref9.cursor;
+  return cursor;
+});
+var StyledButton$1$1$1$1$1$1$1$1 = styled.button(_templateObject5$5$1$1$1$1$1$1$1 || (_templateObject5$5$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: max-content;\n  box-sizing: border-box;\n  border-radius: ", ";\n  outline: none;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  color: ", "; \n"])), function (_ref10) {
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'none' : 'auto';
+}, function (_ref11) {
+  var $disabled = _ref11.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref12) {
+  var $borderRadius = _ref12.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref13) {
+  var $size = _ref13.$size,
+    $padding = _ref13.$padding;
+  return $size === 'small' ? '8px 12.2px' : $size === 'medium' ? '10px 19px' : $size === 'large' ? '12px 24.5px' : $size === 'custom' ? $padding : '10px 16px';
+}, function (_ref14) {
+  var _$borderHover$match;
+  var $variant = _ref14.$variant,
+    $disabled = _ref14.$disabled,
+    $borderHover = _ref14.$borderHover,
+    $borderDefault = _ref14.$borderDefault,
+    $background = _ref14.$background,
+    $color = _ref14.$color,
+    $colorHover = _ref14.$colorHover;
+  switch ($variant) {
+    case 'primary':
+      return "\n          background: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.primary : colorVariables$1$1$1$1$1$1$1$1["default"].primary) + ";\n          color: " + colorVariables$1$1$1$1$1$1$1$1.text.white + ";\n          border: " + ($disabled ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.disabled.primary : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].primary) + ";\n          &:hover {\n            background: " + colorVariables$1$1$1$1$1$1$1$1.hover.primary + ";\n            border: 1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.primary + ";\n          }\n        ";
+    case 'secondary':
+      return "\n          background: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1["default"].secondary) + "; \n          color: " + colorVariables$1$1$1$1$1$1$1$1.text.white + ";\n          border: " + ($disabled ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].secondary) + ";\n          &:hover{\n           background: " + colorVariables$1$1$1$1$1$1$1$1.hover.secondary + ";\n           border: 1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.secondary + ";\n          }\n        ";
+    case 'tertiary':
+      return "\n          background: " + colorVariables$1$1$1$1$1$1$1$1["default"].tertiary + ";\n          color: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.primary : colorVariables$1$1$1$1$1$1$1$1["default"].primary) + ";\n          border: " + ($borderDefault ? "" + $borderDefault : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].tertiary) + ";\n          &:hover {\n            color: " + (!$disabled && $borderHover ? (_$borderHover$match = $borderHover.match(/#\w+/)) === null || _$borderHover$match === void 0 ? void 0 : _$borderHover$match[0] : colorVariables$1$1$1$1$1$1$1$1.hover.primary) + ";\n            border: " + ($borderHover ? $borderHover : "1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.primary) + ";\n          }\n        ";
+    case 'error':
+      return "\n          background: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.error : colorVariables$1$1$1$1$1$1$1$1["default"].error) + "; \n          color: " + colorVariables$1$1$1$1$1$1$1$1.text.white + ";\n          border: " + ($disabled ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.disabled.error : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].error) + ";\n          &:hover{\n           background: " + colorVariables$1$1$1$1$1$1$1$1.hover.error + ";\n           border: 1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.error + ";\n          }\n        ";
+    case 'outline-primary':
+      return "\n          background: " + colorVariables$1$1$1$1$1$1$1$1["default"].tertiary + ";\n          color: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.primary : colorVariables$1$1$1$1$1$1$1$1["default"].primary) + ";\n          border: " + ($disabled ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.disabled.primary : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].primary) + ";\n          &:hover{\n            border: 1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.primary + ";\n            color: " + colorVariables$1$1$1$1$1$1$1$1.text.white + ";\n            background: " + colorVariables$1$1$1$1$1$1$1$1.hover.primary + ";\n          }\n        ";
+    case 'outline-secondary':
+      return "\n            background: " + colorVariables$1$1$1$1$1$1$1$1["default"].tertiary + ";\n            color: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1["default"].secondary) + ";\n            border: " + ($disabled ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].secondary) + ";\n            &:hover{\n              border: 1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.secondary + ";\n              color: " + colorVariables$1$1$1$1$1$1$1$1.text.white + ";\n              background: " + colorVariables$1$1$1$1$1$1$1$1.hover.secondary + ";\n            }\n        ";
+    case 'outline-error':
+      return "\n          background: " + colorVariables$1$1$1$1$1$1$1$1["default"].tertiary + ";\n          color: " + ($disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.error : colorVariables$1$1$1$1$1$1$1$1["default"].error) + ";\n          border: " + ($disabled ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.disabled.error : "1px solid " + colorVariables$1$1$1$1$1$1$1$1["default"].error) + ";\n          &:hover{\n            border: 1px solid " + colorVariables$1$1$1$1$1$1$1$1.hover.error + ";\n            color: " + colorVariables$1$1$1$1$1$1$1$1.text.white + ";\n            background: " + colorVariables$1$1$1$1$1$1$1$1.hover.error + ";\n          }\n        ";
+    case 'custom':
+      return "\n          background: " + $background + ";\n          color: " + $color + ";\n          border: " + ("1px solid " + $borderDefault) + ";\n          &:hover{\n            border: 1px solid " + $borderHover + ";\n            color: " + $colorHover + ";\n            background: " + $borderHover + ";\n          }\n        ";
+    default:
+      return '';
+  }
+}, function (_ref15) {
+  var color = _ref15.color;
+  return color;
+});
+var ButtonText$1$1$1$1$1$1$1$1 = styled.span(_templateObject6$5$1$1$1$1$1$1$1 || (_templateObject6$5$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref16) {
+  var $fontFamily = _ref16.$fontFamily;
+  return $fontFamily ? $fontFamily : GlobalFonts$1$1$1$1$1$1$1$1.bold;
+}, function (_ref17) {
+  var $size = _ref17.$size,
+    $fontSize = _ref17.$fontSize;
+  return $size === 'small' ? '14px' : $size === 'medium' ? '16px' : $size === 'large' ? '18px' : $size === 'custom' ? $fontSize : '16px';
+}, function (_ref18) {
+  var $fontWeight = _ref18.$fontWeight,
+    $size = _ref18.$size;
+  return $size === 'custom' && $fontWeight || '500';
+}, function (_ref19) {
+  var $size = _ref19.$size,
+    $fontSize = _ref19.$fontSize;
+  return $size === 'small' ? '14px' : $size === 'medium' ? '16px' : $size === 'large' ? '18px' : $size === 'custom' ? $fontSize : '16px';
+});
+var _templateObject$6$1$1$1$1$1$1$1$1;
+var InnerContent$1$1$1$1$1$1$1$1 = styled.div(_templateObject$6$1$1$1$1$1$1$1$1 || (_templateObject$6$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  gap: 12px;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  ms-overflow-style: none;\n  white-space: nowrap;\n  padding: ", "; \n  margin: 0 10px;\n"])), function (_ref) {
+  var $isScrollable = _ref.$isScrollable;
+  return $isScrollable ? '0 12px' : '0';
+});
+var _templateObject$7$1$1$1$1$1$1$1$1, _templateObject2$4$1$1$1$1$1$1$1$1, _templateObject3$2$1$1$1$1$1$1$1$1, _templateObject4$1$1$1$1$1$1$1$1$1, _templateObject5$1$1$1$1$1$1$1$1$1, _templateObject6$1$1$1$1$1$1$1$1$1, _templateObject7$3$1$1$1$1$1$1$1, _templateObject8$3$1$1$1$1$1$1$1, _templateObject9$3$1$1$1$1$1$1$1, _templateObject10$3$1$1$1$1$1$1$1, _templateObject11$2$1$1$1$1$1$1$1, _templateObject12$1$1$1$1$1$1$1$1, _templateObject13$1$1$1$1$1$1$1$1, _templateObject14$1$1$1$1$1$1$1$1, _templateObject15$1$1$1$1$1$1$1$1, _templateObject16$1$1$1$1$1$1$1$1, _templateObject17$1$1$1$1$1$1$1$1, _templateObject18$1$1$1$1$1$1$1$1, _templateObject19$1$1$1$1$1$1$1$1, _templateObject20$1$1$1$1$1$1$1$1, _templateObject21$1$1$1$1$1$1$1$1;
+var DatePickerContainer$1$1$1$1$1$1$1$1 = styled.div(_templateObject$7$1$1$1$1$1$1$1$1 || (_templateObject$7$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var CalendarContainer$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$4$1$1$1$1$1$1$1$1 || (_templateObject2$4$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  overflow: auto;\n  display: flex;\n  flex-direction: row;\n  background: rgba(245, 248, 250, .95); \n  position: absolute;\n  border: 1px solid ", ";\n  height: auto;\n  width: auto;\n  border-radius: 10px;\n  z-index: 10;\n  padding: 10px;\n  top: 0px;\n  right: 0px;\n  gap: 16px;\n"])), colorVariables$1$1$1$1$1$1$1$1.border.medium);
+var Calendar$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject3$2$1$1$1$1$1$1$1$1 || (_templateObject3$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1([""])));
+var CalendarTime$1$1$1$1$1$1$1$1 = styled.div(_templateObject4$1$1$1$1$1$1$1$1$1 || (_templateObject4$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  border: 1px solid ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 8px;\n"])), colorVariables$1$1$1$1$1$1$1$1.border.medium);
+var StartDate$1$1$1$1$1$1$1$1 = styled.div(_templateObject5$1$1$1$1$1$1$1$1$1 || (_templateObject5$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding-bottom: 4px;\n"])));
+var SelectedStart$1$1$1$1$1$1$1$1 = styled.div(_templateObject6$1$1$1$1$1$1$1$1$1 || (_templateObject6$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 4px;\n  color: ", ";\n"])), colorVariables$1$1$1$1$1$1$1$1.text.medium);
+var CurrentDate$1$1$1$1$1$1$1$1 = styled.p(_templateObject7$3$1$1$1$1$1$1$1 || (_templateObject7$3$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 12px;\n"])));
+var CurrentTime$1$1$1$1$1$1$1$1 = styled.div(_templateObject8$3$1$1$1$1$1$1$1 || (_templateObject8$3$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  color: ", ";\n"])), colorVariables$1$1$1$1$1$1$1$1.text.medium);
+var Selectedtime$1$1$1$1$1$1$1$1 = styled.div(_templateObject9$3$1$1$1$1$1$1$1 || (_templateObject9$3$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  color: ", ";\n  gap: 8px;\n"])), colorVariables$1$1$1$1$1$1$1$1.text.medium);
+var Line$1$1$1$1$1$1$1$1 = styled.div(_templateObject10$3$1$1$1$1$1$1$1 || (_templateObject10$3$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  padding-top: 10px;\n  padding-bottom: 10px;\n"])));
+var Zones$1$1$1$1$1$1$1$1 = styled.div(_templateObject11$2$1$1$1$1$1$1$1 || (_templateObject11$2$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CalendarHeader$1$1$1$1$1$1$1$1 = styled.div(_templateObject12$1$1$1$1$1$1$1$1 || (_templateObject12$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n"])));
+var CalendarMonthYear$1$1$1$1$1$1$1$1 = styled.span(_templateObject13$1$1$1$1$1$1$1$1 || (_templateObject13$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  justify-content: center;\n  align-items: center;\n"])), colorVariables$1$1$1$1$1$1$1$1.text.medium);
+var CalendarContent$1$1$1$1$1$1$1$1 = styled.div(_templateObject14$1$1$1$1$1$1$1$1 || (_templateObject14$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 5px;\n  padding: 10px;\n"])));
+var Button$1$1$1$1$1$1$1$1 = styled.div(_templateObject15$1$1$1$1$1$1$1$1 || (_templateObject15$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  background:", ";\n  color: ", ";\n  border: none;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n\n  svg {\n    cursor: pointer;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].secondary, colorVariables$1$1$1$1$1$1$1$1.text.white, function (_ref) {
+  var $size = _ref.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size ? $size + "px" : '30px';
+});
+var CalendarDates$1$1$1$1$1$1$1$1 = styled.div(_templateObject16$1$1$1$1$1$1$1$1 || (_templateObject16$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  cursor: ", "; \n  font-size: 12px;\n  opacity: ", "; \n\n  background-color: ", ";\n\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref3) {
+  var $size = _ref3.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref5) {
+  var $isFuture = _ref5.$isFuture,
+    $futureDateTime = _ref5.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
+}, function (_ref6) {
+  var $isFuture = _ref6.$isFuture,
+    $futureDateTime = _ref6.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 0.5 : 1;
+}, function (_ref7) {
+  var $selected = _ref7.$selected,
+    $inRange = _ref7.$inRange;
+  return $selected ? colorVariables$1$1$1$1$1$1$1$1["default"].primary : $inRange ? colorVariables$1$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1$1["default"].tertiary;
+}, function (_ref8) {
+  var $selected = _ref8.$selected,
+    $inRange = _ref8.$inRange;
+  return $selected ? colorVariables$1$1$1$1$1$1$1$1.text.white : $inRange ? colorVariables$1$1$1$1$1$1$1$1.text.white : colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref9) {
+  var $selected = _ref9.$selected,
+    $inRange = _ref9.$inRange,
+    $isFuture = _ref9.$isFuture,
+    $futureDateTime = _ref9.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 'transparent' : $selected ? colorVariables$1$1$1$1$1$1$1$1.disabled.primary : $inRange ? colorVariables$1$1$1$1$1$1$1$1.disabled.primary : colorVariables$1$1$1$1$1$1$1$1.disabled.primary;
+});
+var Year$1$1$1$1$1$1$1$1 = styled.div(_templateObject17$1$1$1$1$1$1$1$1 || (_templateObject17$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 12px;\n"])));
+var Month$1$1$1$1$1$1$1$1 = styled.div(_templateObject18$1$1$1$1$1$1$1$1 || (_templateObject18$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
+var InputWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject19$1$1$1$1$1$1$1$1 || (_templateObject19$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  gap: 24px;\n"])));
+var TimeInputWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject20$1$1$1$1$1$1$1$1 || (_templateObject20$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+var StyledInput$1$1$1$1$1$1$1$1 = styled.input(_templateObject21$1$1$1$1$1$1$1$1 || (_templateObject21$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  outline: none;\n  width: 60px;\n  height: 30px;\n  text-align: center;\n  font-size: 16px;\n  border-radius: 5px;\n  background: white;\n  border: 1px solid ", ";\n  color: ", ";\n"])), colorVariables$1$1$1$1$1$1$1$1.border.extraBold, colorVariables$1$1$1$1$1$1$1$1.text.dark);
+var _templateObject$8$1$1$1$1$1$1$1$1, _templateObject2$5$1$1$1$1$1$1$1$1, _templateObject3$3$1$1$1$1$1$1$1$1, _templateObject4$2$1$1$1$1$1$1$1$1, _templateObject5$2$1$1$1$1$1$1$1$1, _templateObject6$2$1$1$1$1$1$1$1$1;
+var OptionContainer$1$1$1$1$1$1$1$1 = styled.div(_templateObject$8$1$1$1$1$1$1$1$1 || (_templateObject$8$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1([""])));
+var OptionItem$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$5$1$1$1$1$1$1$1$1 || (_templateObject2$5$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  border-bottom: ", ";\n"])), function (_ref) {
+  var $optionBorder = _ref.$optionBorder,
+    $isborder = _ref.$isborder;
+  return $isborder ? $optionBorder || "1px solid " + colorVariables$1$1$1$1$1$1$1$1.border.extraLight : '';
+});
+var OptionLabel$1$1$1$1$1$1$1$1 = styled.label(_templateObject3$3$1$1$1$1$1$1$1$1 || (_templateObject3$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n  color: ", ";\n"])), function (_ref2) {
+  var $optionColor = _ref2.$optionColor;
+  switch ($optionColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $optionColor || colorVariables$1$1$1$1$1$1$1$1.text.medium;
+  }
+});
+var SearchContainer$3$1$1$1$1$1$1$1 = styled.div(_templateObject4$2$1$1$1$1$1$1$1$1 || (_templateObject4$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 8px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref3) {
+  var $background = _ref3.$background;
+  switch ($background) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $background;
+  }
+}, function (_ref4) {
+  var $borderBottom = _ref4.$borderBottom;
+  return $borderBottom || 'none';
+}, function (_ref5) {
+  var $borderRadius = _ref5.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$3$1$1$1$1$1$1$1 = styled.input(_templateObject5$2$1$1$1$1$1$1$1$1 || (_templateObject5$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].tertiary, function (_ref6) {
+  var $inputColor = _ref6.$inputColor;
+  switch ($inputColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref7) {
+  var $placeholderColor = _ref7.$placeholderColor;
+  switch ($placeholderColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var Text$1$1$1$1$1$1$1$1 = styled.span(_templateObject6$2$1$1$1$1$1$1$1$1 || (_templateObject6$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  word-break: break-word;\n"])));
+var _templateObject$9$1$1$1$1$1$1$1$1, _templateObject2$6$1$1$1$1$1$1$1$1, _templateObject3$4$1$1$1$1$1$1$1$1, _templateObject4$3$1$1$1$1$1$1$1$1, _templateObject5$3$1$1$1$1$1$1$1$1, _templateObject6$3$1$1$1$1$1$1$1$1, _templateObject7$1$1$1$1$1$1$1$1$1, _templateObject8$1$1$1$1$1$1$1$1$1, _templateObject9$1$1$1$1$1$1$1$1$1, _templateObject10$1$1$1$1$1$1$1$1$1, _templateObject11$1$1$1$1$1$1$1$1$1;
+var DropdownContainer$2$1$1$1$1$1$1$1 = styled.div(_templateObject$9$1$1$1$1$1$1$1$1 || (_templateObject$9$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: ", ";\n  height: ", ";\n  max-width: 100%;\n  position: relative;\n  max-height: ", ";\n"])), function (_ref) {
+  var $width = _ref.$width;
+  return $width || '100%';
+}, function (_ref2) {
+  var $height = _ref2.$height;
+  return $height || '100%';
+}, function (_ref3) {
+  var $replaceLabel = _ref3.$replaceLabel;
+  return $replaceLabel ? 'calc(100% - 22px)' : '';
+});
+var DropdownButton$2$1$1$1$1$1$1$1 = styled.div(_templateObject2$6$1$1$1$1$1$1$1$1 || (_templateObject2$6$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  overflow: ", ";\n  padding: ", ";\n  gap: 8px;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref4) {
+  var $replaceLabel = _ref4.$replaceLabel;
+  return $replaceLabel ? 'auto' : '';
+}, function (_ref5) {
+  var $size = _ref5.$size;
+  switch ($size) {
+    case 'small':
+      return '9px 12px';
+    case 'large':
+      return '24px 12px';
+    default:
+      return '14px 12px';
+  }
+}, function (_ref6) {
+  var $width = _ref6.$width;
+  return $width ? $width : '100%';
+}, function (_ref7) {
+  var $height = _ref7.$height;
+  return $height || '100%';
+}, function (_ref8) {
+  var $border = _ref8.$border,
+    $isOpen = _ref8.$isOpen;
+  return $isOpen ? "1px solid " + colorVariables$1$1$1$1$1$1$1$1.text.dark : $border || "1px solid " + colorVariables$1$1$1$1$1$1$1$1.border.light;
+}, function (_ref9) {
+  var $borderRadius = _ref9.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref10) {
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref11) {
+  var $background = _ref11.$background,
+    $disabled = _ref11.$disabled;
+  switch ($background) {
+    case 'dark':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : $background;
+  }
+}, function (_ref12) {
+  var $color = _ref12.$color;
+  return $color || colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref13) {
+  var $size = _ref13.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref14) {
+  var $size = _ref14.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+});
+var TitleText$2$1$1$1$1$1$1$1 = styled.div(_templateObject3$4$1$1$1$1$1$1$1$1 || (_templateObject3$4$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: max-content;\n  position: relative;\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
+  var $titleSize = _ref15.$titleSize,
+    $size = _ref15.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref16) {
+  var $titleSize = _ref16.$titleSize,
+    $size = _ref16.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref17) {
+  var $titleColor = _ref17.$titleColor;
+  switch ($titleColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $titleColor;
+  }
+});
+var Container$2$1$1$1$1$1$1$1$1 = styled.div(_templateObject4$3$1$1$1$1$1$1$1$1 || (_templateObject4$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n"])));
+var LabelText$2$1$1$1$1$1$1$1 = styled.div(_templateObject5$3$1$1$1$1$1$1$1$1 || (_templateObject5$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref18) {
+  var $labelStyle = _ref18.$labelStyle;
+  return $labelStyle;
+}, colorVariables$1$1$1$1$1$1$1$1.text.light);
+var DropdownMenu$2$1$1$1$1$1$1$1 = styled.div(_templateObject6$3$1$1$1$1$1$1$1$1 || (_templateObject6$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref19) {
+  var $optionsBorderRadius = _ref19.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
+}, function (_ref20) {
+  var $width = _ref20.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref21) {
+  var $menuBackground = _ref21.$menuBackground;
+  return $menuBackground || colorVariables$1$1$1$1$1$1$1$1.accent.extraLight;
+});
+var SelectedOptionsWrapper$2$1$1$1$1$1$1$1 = styled.div(_templateObject7$1$1$1$1$1$1$1$1$1 || (_templateObject7$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
+var SelectedOptionDiv$2$1$1$1$1$1$1$1 = styled.div(_templateObject8$1$1$1$1$1$1$1$1$1 || (_templateObject8$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref22) {
+  var $selectedOptionBackground = _ref22.$selectedOptionBackground,
+    $disabled = _ref22.$disabled;
+  switch ($selectedOptionBackground) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.warning : colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.info : colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.success : colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.error : colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $selectedOptionBackground || colorVariables$1$1$1$1$1$1$1$1.accent.extraLight;
+  }
+}, function (_ref23) {
+  var $selectedOptionColor = _ref23.$selectedOptionColor;
+  switch ($selectedOptionColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $selectedOptionColor;
+  }
+});
+var RemoveIcon$2$1$1$1$1$1$1$1 = styled.div(_templateObject9$1$1$1$1$1$1$1$1$1 || (_templateObject9$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref24) {
+  var $disabled = _ref24.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref25) {
+  var removeIconBackground = _ref25.removeIconBackground,
+    $type = _ref25.$type;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables$1$1$1$1$1$1$1$1.disabled.primary;
+}, function (_ref26) {
+  var $disabled = _ref26.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TextWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject10$1$1$1$1$1$1$1$1$1 || (_templateObject10$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var Asterisk$1$1$1$1$1$1$1$1 = styled.span(_templateObject11$1$1$1$1$1$1$1$1$1 || (_templateObject11$1$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].error);
+var _templateObject$a$1$1$1$1$1$1$1$1, _templateObject2$7$1$1$1$1$1$1$1$1, _templateObject3$5$1$1$1$1$1$1$1$1;
+var SelectedOptionsWrapper$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject$a$1$1$1$1$1$1$1$1 || (_templateObject$a$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
+var SelectedOptionDiv$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$7$1$1$1$1$1$1$1$1 || (_templateObject2$7$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref) {
+  var $selectedOptionBackground = _ref.$selectedOptionBackground,
+    $type = _ref.$type;
+  return $selectedOptionBackground || $type === 'remove' ? colorVariables$1$1$1$1$1$1$1$1.disabled.error : colorVariables$1$1$1$1$1$1$1$1.accent.softBlue;
+}, function (_ref2) {
+  var $selectedOptionColor = _ref2.$selectedOptionColor,
+    $type = _ref2.$type;
+  return $selectedOptionColor || $type === 'remove' ? colorVariables$1$1$1$1$1$1$1$1["default"].error : colorVariables$1$1$1$1$1$1$1$1.brand.primary;
+});
+var RemoveIcon$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject3$5$1$1$1$1$1$1$1$1 || (_templateObject3$5$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n"])), function (_ref3) {
+  var $removeIconBackground = _ref3.$removeIconBackground,
+    $type = _ref3.$type;
+  return $removeIconBackground || $type === 'remove' ? '#5E5E5E24' : colorVariables$1$1$1$1$1$1$1$1.disabled.primary;
+});
+var _templateObject$b$1$1$1$1$1$1$1$1, _templateObject2$8$1$1$1$1$1$1$1$1, _templateObject3$6$1$1$1$1$1$1$1$1, _templateObject4$4$1$1$1$1$1$1$1$1, _templateObject5$4$1$1$1$1$1$1$1$1, _templateObject6$4$1$1$1$1$1$1$1$1, _templateObject7$2$1$1$1$1$1$1$1$1, _templateObject8$2$1$1$1$1$1$1$1$1, _templateObject9$2$1$1$1$1$1$1$1$1, _templateObject10$2$1$1$1$1$1$1$1$1;
+var TitleText$1$1$1$1$1$1$1$1$1 = styled.label(_templateObject$b$1$1$1$1$1$1$1$1 || (_templateObject$b$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: relative;\n  width: max-content;\n  font-weight: ", ";\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+  var $titleWeight = _ref.$titleWeight;
+  return $titleWeight || 500;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          line-height: 12px;\n          ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          line-height: 16px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  switch ($titlecolor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var DropdownContainer$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$8$1$1$1$1$1$1$1$1 || (_templateObject2$8$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: ", ";\n  max-width: 100%;\n  position: relative;\n  gap: 8px;\n  display: flex;\n"])), function (_ref4) {
+  var $width = _ref4.$width;
+  return $width || '100%';
+});
+var DropdownButton$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject3$6$1$1$1$1$1$1$1$1 || (_templateObject3$6$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: ", ";\n  gap: 6px;\n  padding: ", ";\n  background: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref6) {
+  var $width = _ref6.$width;
+  return $width ? $width : '100%';
+}, function (_ref7) {
+  var $selectHeight = _ref7.$selectHeight;
+  return $selectHeight || 'auto';
+}, function (_ref8) {
+  var $borderRadius = _ref8.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref9) {
+  var $border = _ref9.$border;
+  return $border || "1px solid " + colorVariables$1$1$1$1$1$1$1$1.border.light;
+}, function (_ref10) {
+  var $size = _ref10.$size;
+  switch ($size) {
+    case 'small':
+      return '9px 12px';
+    case 'large':
+      return '24px 12px';
+    default:
+      return '13px 12px';
+  }
+}, function (_ref11) {
+  var $background = _ref11.$background,
+    $disabled = _ref11.$disabled;
+  return $disabled ? colorVariables$1$1$1$1$1$1$1$1.border.light : $background || colorVariables$1$1$1$1$1$1$1$1.accent.extraLight;
+}, function (_ref12) {
+  var $size = _ref12.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref13) {
+  var $size = _ref13.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+});
+var Options$1$1$1$1$1$1$1$1 = styled.div(_templateObject4$4$1$1$1$1$1$1$1$1 || (_templateObject4$4$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  color: ", ";\n  padding: 5px 10px;\n  width: 100%;\n  font-size: ", ";\n  font-weight: ", ";\n  background-color: ", ";\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n\n  }\n\n"])), function (_ref14) {
+  var $optionColor = _ref14.$optionColor,
+    $optionSelected = _ref14.$optionSelected;
+  return $optionSelected ? colorVariables$1$1$1$1$1$1$1$1.text.white : $optionColor || colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref15) {
+  var $optionFontSize = _ref15.$optionFontSize;
+  return $optionFontSize || '14px';
+}, function (_ref16) {
+  var $optionFontWeight = _ref16.$optionFontWeight;
+  return $optionFontWeight || 400;
+}, function (_ref17) {
+  var $optionBackgroundColor = _ref17.$optionBackgroundColor,
+    $optionSelected = _ref17.$optionSelected;
+  return $optionSelected ? colorVariables$1$1$1$1$1$1$1$1["default"].primary : $optionBackgroundColor || colorVariables$1$1$1$1$1$1$1$1["default"].tertiary;
+}, colorVariables$1$1$1$1$1$1$1$1.hover.primary, colorVariables$1$1$1$1$1$1$1$1.text.white);
+var LabelText$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject5$4$1$1$1$1$1$1$1$1 || (_templateObject5$4$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n"])), function (_ref18) {
+  var $size = _ref18.$size;
+  switch ($size) {
+    case 'small':
+      return '14px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref19) {
+  var $size = _ref19.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref20) {
+  var $fontStyle = _ref20.$fontStyle;
+  return $fontStyle || '';
+}, function (_ref21) {
+  var $color = _ref21.$color,
+    $disabled = _ref21.$disabled;
+  return $disabled ? colorVariables$1$1$1$1$1$1$1$1.text.medium : $color || colorVariables$1$1$1$1$1$1$1$1.text.medium;
+});
+var NoOptions$1$1$1$1$1$1$1$1 = styled(Span$1$1$1$1$1$1$1$1)(_templateObject6$4$1$1$1$1$1$1$1$1 || (_templateObject6$4$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 12px;\n  font-size: 14px;\n  font-weight: 400;\n"])));
+var DropdownMenu$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject7$2$1$1$1$1$1$1$1$1 || (_templateObject7$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  height: auto;\n  max-height: 170px;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden; \n  position: absolute;\n  z-index: 1;\n  ", "\n  ", "\n  \n"])), colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref22) {
+  var $optionsBorderRadius = _ref22.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
+}, function (_ref23) {
+  var $width = _ref23.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref24) {
+  var $menuBackground = _ref24.$menuBackground;
+  return $menuBackground || colorVariables$1$1$1$1$1$1$1$1.accent.extraLight;
+}, function (_ref25) {
+  var $top = _ref25.$top;
+  return $top && "top: " + $top + ";";
+}, function (_ref26) {
+  var $bottom = _ref26.$bottom;
+  return $bottom && "bottom: " + $bottom + ";";
+});
+var OptionsWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject8$2$1$1$1$1$1$1$1$1 || (_templateObject8$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  max-height: 150px; \n  overflow-y: auto; \n  width: 100%;\n"])));
+var SearchContainer$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject9$2$1$1$1$1$1$1$1$1 || (_templateObject9$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: 1px solid ", ";\n  border-radius: ", ";\n  padding: 10px 12px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  z-index: 10; \n"])), function (_ref27) {
+  var $background = _ref27.$background;
+  return $background || colorVariables$1$1$1$1$1$1$1$1.accent.extraLight;
+}, function (_ref28) {
+  var $border = _ref28.$border;
+  return $border || 'none';
+}, colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref29) {
+  var $borderRadius = _ref29.$borderRadius;
+  return $borderRadius || '8px 8px 0 0';
+});
+var SearchBar$1$1$1$1$1$1$1$1$1 = styled.input(_templateObject10$2$1$1$1$1$1$1$1$1 || (_templateObject10$2$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: transparent;\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref30) {
+  var $inputColor = _ref30.$inputColor;
+  return $inputColor || colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref31) {
+  var $placeholderColor = _ref31.$placeholderColor;
+  return $placeholderColor || colorVariables$1$1$1$1$1$1$1$1.text.light;
+});
+var _templateObject$c$1$1$1$1$1$1$1$1, _templateObject2$9$1$1$1$1$1$1$1$1;
+var ModalOverlay$1$1$1$1$1$1$1$1 = styled.div(_templateObject$c$1$1$1$1$1$1$1$1 || (_templateObject$c$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: NotoSans, sans-serif;\n  z-index: 9999;\n  backdrop-filter: blur(4px);\n"])));
+var ModalContainer$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$9$1$1$1$1$1$1$1$1 || (_templateObject2$9$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-width: ", ";\n"])), colorVariables$1$1$1$1$1$1$1$1.accent.light, function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return maxWidth ? maxWidth : '400px';
+});
+var _templateObject$d$1$1$1$1$1$1$1$1, _templateObject2$a$1$1$1$1$1$1$1$1;
+var SearchContainer$2$1$1$1$1$1$1$1$1 = styled.div(_templateObject$d$1$1$1$1$1$1$1$1 || (_templateObject$d$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 5.5px 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref) {
+  var $background = _ref.$background;
+  return $background || colorVariables$1$1$1$1$1$1$1$1["default"].tertiary;
+}, function (_ref2) {
+  var $border = _ref2.$border;
+  return $border || 'none';
+}, function (_ref3) {
+  var $borderRadius = _ref3.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$2$1$1$1$1$1$1$1$1 = styled.input(_templateObject2$a$1$1$1$1$1$1$1$1 || (_templateObject2$a$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    position: absolute;\n    top: 1px;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].tertiary, function (_ref4) {
+  var $inputColor = _ref4.$inputColor;
+  return $inputColor || colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref5) {
+  var $placeholderColor = _ref5.$placeholderColor;
+  return $placeholderColor || colorVariables$1$1$1$1$1$1$1$1.text.light;
+});
+var _templateObject$e$1$1$1$1$1$1$1$1, _templateObject2$b$1$1$1$1$1$1$1$1, _templateObject3$7$1$1$1$1$1$1$1$1, _templateObject4$5$1$1$1$1$1$1$1$1, _templateObject5$5$1$1$1$1$1$1$1$1, _templateObject6$5$1$1$1$1$1$1$1$1;
+var Container$3$1$1$1$1$1$1$1$1 = styled.div(_templateObject$e$1$1$1$1$1$1$1$1 || (_templateObject$e$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+  var $padding = _ref.$padding;
+  return $padding;
+});
+var Label = styled.label(_templateObject2$b$1$1$1$1$1$1$1$1 || (_templateObject2$b$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          line-height: 12px;\n        ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          line-height: 16px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  switch ($titlecolor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var Input = styled.input(_templateObject3$7$1$1$1$1$1$1$1$1 || (_templateObject3$7$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : $background;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, function (_ref7) {
+  var $size = _ref7.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          padding: 5px 10px;\n        ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          padding: 9.5px 12px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          padding: 9px 14px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          padding: 7px 12px;\n        ";
+  }
+}, function (_ref8) {
+  var $color = _ref8.$color;
+  switch ($color) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $color;
+  }
+}, colorVariables$1$1$1$1$1$1$1$1.text.light);
+var InputWrapper$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject4$5$1$1$1$1$1$1$1$1 || (_templateObject4$5$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject5$5$1$1$1$1$1$1$1$1 || (_templateObject5$5$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+  var $disabled = _ref9.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var Asterisk$1$1$1$1$1$1$1$1$1 = styled.span(_templateObject6$5$1$1$1$1$1$1$1$1 || (_templateObject6$5$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].error);
+var _templateObject$f, _templateObject2$c, _templateObject3$8;
+var Container$4 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+  var $padding = _ref.$padding;
+  return $padding;
+});
+var Label$1 = styled.label(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return 'font-size: 12px; line-height: 12px;';
+    case 'medium':
+      return 'font-size: 14px; line-height: 14px;';
+    case 'large':
+      return 'font-size: 16px; line-height: 16px;';
+    default:
+      return 'font-size: 14px; line-height: 14px;';
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  return $titlecolor || colorVariables$1$1$1$1$1$1$1$1.text.dark;
+});
+var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : $background;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, function (_ref7) {
+  var $size = _ref7.$size;
+  switch ($size) {
+    case 'small':
+      return 'font-size: 12px; padding: 5px 10px;';
+    case 'medium':
+      return 'font-size: 14px; padding: 9px 12px;';
+    case 'large':
+      return 'font-size: 16px; padding: 9px 14px;';
+    default:
+      return 'font-size: 14px; padding: 7px 12px;';
+  }
+}, function (_ref8) {
+  var $color = _ref8.$color;
+  return $color || colorVariables$1$1$1$1$1$1$1$1.text.dark;
+}, colorVariables$1$1$1$1$1$1$1$1.text.light);
+var _templateObject$g, _templateObject2$d, _templateObject3$9, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3$1$1$1$1$1$1$1$1;
+var OptionContainer$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1$1$1$1.text.white);
+var OptionItem$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+  var $optionSelected = _ref.$optionSelected;
+  return $optionSelected ? colorVariables$1$1$1$1$1$1$1$1.text.white : colorVariables$1$1$1$1$1$1$1$1.text.medium;
+}, function (_ref2) {
+  var $optionSelected = _ref2.$optionSelected;
+  return $optionSelected ? colorVariables$1$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1$1.text.white;
+}, colorVariables$1$1$1$1$1$1$1$1.hover.primary, colorVariables$1$1$1$1$1$1$1$1.text.white);
+var TotalOptionsHeader = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1$1$1$1.text.light);
+var OptionLabel$1$1$1$1$1$1$1$1$1 = styled.label(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$3$1$1$1$1$1$1$1$1 = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+  var $background = _ref3.$background;
+  switch ($background) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $background;
+  }
+}, function (_ref4) {
+  var $borderBottom = _ref4.$borderBottom;
+  return $borderBottom || 'none';
+}, function (_ref5) {
+  var $borderRadius = _ref5.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$3$1$1$1$1$1$1$1$1 = styled.input(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].tertiary, function (_ref6) {
+  var $inputColor = _ref6.$inputColor;
+  switch ($inputColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref7) {
+  var $placeholderColor = _ref7.$placeholderColor;
+  switch ($placeholderColor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var OptionsWrapper$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject7$3$1$1$1$1$1$1$1$1 || (_templateObject7$3$1$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1$1$1$1.text.white);
+var _templateObject$h, _templateObject2$e, _templateObject3$a, _templateObject4$7;
+var spin$1$1$1$1$1$1$1$1$1 = keyframes(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition = function getDotPosition(index, size) {
+  var angle = index * 360 / 8;
+  var radius = size / 2.5;
+  var x = radius * Math.cos(angle * Math.PI / 180);
+  var y = radius * Math.sin(angle * Math.PI / 180);
+  return "translate(" + x + "px, " + y + "px)";
+};
+var SpinnerContainer = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+  var $size = _ref.$size;
+  return $size;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size;
+});
+var Dot = styled.div.attrs(function (_ref3) {
+  var $index = _ref3.$index,
+    $size = _ref3.$size;
+  return {
+    style: {
+      transform: getDotPosition($index, $size)
+    }
+  };
+})(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+  var $dotSize = _ref4.$dotSize;
+  return $dotSize;
+}, function (_ref5) {
+  var $dotSize = _ref5.$dotSize;
+  return $dotSize;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, spin$1$1$1$1$1$1$1$1$1, function (_ref7) {
+  var $speed = _ref7.$speed;
+  return $speed;
+}, function (_ref8) {
+  var $index = _ref8.$index,
+    $speed = _ref8.$speed;
+  return $index * $speed / 8;
+});
+var SpinnerWrapper = styled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$i, _templateObject2$f;
+var spin$2 = keyframes(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$1$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+  var $size = _ref.$size;
+  return $size;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+}, spin$2);
+var _templateObject$j;
+var PageInput = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1$1$1$1.text.dark);
+var _templateObject$k, _templateObject2$g, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$7;
+var SidebarContainer = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+  var $isExpanded = _ref.$isExpanded;
+  return $isExpanded ? '225px' : '68px';
+}, function (_ref2) {
+  var $background = _ref2.$background;
+  return $background ? $background : colorVariables$1$1$1$1$1$1$1$1.accent.softBlue;
+});
+var SidebarItem = styled(NavLink)(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1$1$1$1["default"].primary);
+var ContentWrapper = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$2 = styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+  var $selected = _ref3.$selected;
+  return $selected ? colorVariables$1$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1$1["default"].tertiary;
+});
+var Logo = styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer = styled.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+  var $padding = _ref4.$padding;
+  return $padding;
+}, function (_ref5) {
+  var $fontSize = _ref5.$fontSize;
+  return $fontSize ? $fontSize : '20px';
+}, function (_ref6) {
+  var $fontWeight = _ref6.$fontWeight;
+  return $fontWeight ? $fontWeight : '500';
+}, function (_ref7) {
+  var $color = _ref7.$color;
+  return $color ? $color : colorVariables$1$1$1$1$1$1$1$1["default"].primary;
+}, function (_ref8) {
+  var $isExpanded = _ref8.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref9) {
+  var $isExpanded = _ref9.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+});
+var _templateObject$l, _templateObject2$h, _templateObject3$c, _templateObject4$9;
+var ContainerWrapper = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+  return props.$width || 'auto';
+}, function (_ref) {
+  var $minHeight = _ref.$minHeight;
+  return $minHeight;
+});
+var CellContainer = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+  return props.$align;
+}, function (props) {
+  return props.$width || 'auto';
+}, function (props) {
+  return props.$minWidth;
+}, function (props) {
+  return props.$background || 'inherit';
+}, function (props) {
+  return props.$padding;
+});
+var MainText = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+  return props.$mtc;
+}, function (props) {
+  return props.$mtfs;
+}, function (props) {
+  return props.$mtw;
+});
+var SubText = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+  return props.$stc;
+}, function (props) {
+  return props.$stfs;
+}, function (props) {
+  return props.$stw;
+});
+var _templateObject$m;
+var TableRowContainer = styled$1.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$n, _templateObject2$i, _templateObject3$d, _templateObject4$a, _templateObject5$8;
+var TableContainer = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1$1$1$1.brand.light);
+var TableHeader = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+  return props.$hbcolor || 'transparent';
+}, function (props) {
+  return props.$tcolor || 'white';
+});
+var TableContent = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1$1$1$1.border.extraLight);
+var _templateObject$o, _templateObject2$j, _templateObject3$e, _templateObject4$b, _templateObject5$9;
+var Container$5 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+  var $border = _ref.$border;
+  return $border;
+});
+var FirstContainer = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref2) {
+  var $headerPadding = _ref2.$headerPadding;
+  return $headerPadding ? $headerPadding : '0px';
+});
+var TabContainer = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+  var $disabled = _ref3.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? '0.6' : '1';
+}, colorVariables$1$1$1$1$1$1$1$1.text.medium, function (_ref5) {
+  var $headerHeight = _ref5.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TabItemContainer = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+  var $headerHeight = _ref7.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (props) {
+  return props.$active ? 'block' : 'none';
+}, colorVariables$1$1$1$1$1$1$1$1["default"].primary);
+var DetailsFirstContainer = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+  return props.$active ? colorVariables$1$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1$1.text.medium;
+});
+var _templateObject$p, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8;
+var Container$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+  var $padding = _ref.$padding;
+  return $padding;
+});
+var Label$2 = styled.label(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          line-height: 12px;\n        ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          line-height: 16px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  switch ($titlecolor) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var Input$1 = styled.input(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1$1.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables$1$1$1$1$1$1$1$1.disabled.secondary : $background;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
+  return $disabled ? 'none' : 'auto';
+}, function (_ref8) {
+  var $size = _ref8.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          padding: 5px 10px;\n        ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          padding: 9.5px 12px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          padding: 9px 14px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          padding: 7px 12px;\n        ";
+  }
+}, function (_ref9) {
+  var $color = _ref9.$color;
+  switch ($color) {
+    case 'dark':
+      return colorVariables$1$1$1$1$1$1$1$1.text.dark;
+    case 'medium':
+      return colorVariables$1$1$1$1$1$1$1$1.text.medium;
+    case 'light':
+      return colorVariables$1$1$1$1$1$1$1$1.text.light;
+    case 'white':
+      return colorVariables$1$1$1$1$1$1$1$1.text.white;
+    case 'warning':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].warning;
+    case 'info':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].info;
+    case 'success':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].success;
+    case 'error':
+      return colorVariables$1$1$1$1$1$1$1$1["default"].error;
+    default:
+      return $color;
+  }
+}, colorVariables$1$1$1$1$1$1$1$1.text.light);
+var InputWrapper$2 = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$3 = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref10) {
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var Asterisk$2 = styled.span(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1$1$1["default"].error);
+var _templateObject$q, _templateObject2$l, _templateObject3$g;
+var Container$7 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+  var $padding = _ref.$padding;
+  return $padding;
+});
+var Label$3 = styled.label(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return 'font-size: 12px; line-height: 12px;';
+    case 'medium':
+      return 'font-size: 14px; line-height: 14px;';
+    case 'large':
+      return 'font-size: 16px; line-height: 16px;';
+    default:
+      return 'font-size: 14px; line-height: 14px;';
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  return $titlecolor || colorVariables$1$1$1$1$1$1$1.text.dark;
+});
+var TextAreaComponent$1 = styled.textarea(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables$1$1$1$1$1$1$1.disabled.secondary : $background;
+}, function (_ref6) {
+  var $color = _ref6.$color;
   return $color;
 }, function (_ref7) {
   var $size = _ref7.$size;
@@ -14192,18 +15508,18 @@ var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$
   var $color = _ref8.$color;
   return $color || colorVariables$1$1$1$1$1$1$1.text.dark;
 }, colorVariables$1$1$1$1$1$1$1.text.light);
-var _templateObject$g, _templateObject2$d, _templateObject3$9, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3$1$1$1$1$1$1$1;
-var OptionContainer$1$1$1$1$1$1$1$1 = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1$1$1.text.white);
-var OptionItem$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$r, _templateObject2$m, _templateObject3$h, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$4;
+var OptionContainer$2 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1$1$1.text.white);
+var OptionItem$2 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1$1$1$1.text.white : colorVariables$1$1$1$1$1$1$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1.text.white;
 }, colorVariables$1$1$1$1$1$1$1.hover.primary, colorVariables$1$1$1$1$1$1$1.text.white);
-var TotalOptionsHeader = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1$1$1.text.light);
-var OptionLabel$1$1$1$1$1$1$1$1 = styled.label(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$3$1$1$1$1$1$1$1 = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$1 = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1$1$1.text.light);
+var OptionLabel$2 = styled.label(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$4 = styled.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -14232,7 +15548,7 @@ var SearchContainer$3$1$1$1$1$1$1$1 = styled.div(_templateObject5$6 || (_templat
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$3$1$1$1$1$1$1$1 = styled.input(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1$1$1["default"].tertiary, function (_ref6) {
+var SearchBar$4 = styled.input(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1$1$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -14277,32 +15593,32 @@ var SearchBar$3$1$1$1$1$1$1$1 = styled.input(_templateObject6$6 || (_templateObj
       return $placeholderColor;
   }
 });
-var OptionsWrapper$1$1$1$1$1$1$1$1 = styled.div(_templateObject7$3$1$1$1$1$1$1$1 || (_templateObject7$3$1$1$1$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1$1$1.text.white);
-var _templateObject$h, _templateObject2$e, _templateObject3$a, _templateObject4$7;
-var spin$1$1$1$1$1$1$1$1 = keyframes(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition = function getDotPosition(index, size) {
+var OptionsWrapper$2 = styled.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1$1$1.text.white);
+var _templateObject$s, _templateObject2$n, _templateObject3$i, _templateObject4$e;
+var spin$3 = keyframes(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$1 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$1 = styled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot = styled.div.attrs(function (_ref3) {
+var Dot$1 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition($index, $size)
+      transform: getDotPosition$1($index, $size)
     }
   };
-})(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -14311,7 +15627,7 @@ var Dot = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$1$1$1$1$1$1$1$1, function (_ref7) {
+}, spin$3, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -14319,10 +15635,10 @@ var Dot = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper = styled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$i, _templateObject2$f;
-var spin$2 = keyframes(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$1 = styled.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$t, _templateObject2$o;
+var spin$4 = keyframes(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$2 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -14331,25 +15647,25 @@ var Spinner$1$1$1$1$1$1$1$1 = styled.div(_templateObject2$f || (_templateObject2
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$2);
-var _templateObject$j;
-var PageInput = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1$1$1.text.dark);
-var _templateObject$k, _templateObject2$g, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$7;
-var SidebarContainer = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$4);
+var _templateObject$u;
+var PageInput$1 = styled.input(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1$1$1.text.dark);
+var _templateObject$v, _templateObject2$p, _templateObject3$j, _templateObject4$f, _templateObject5$c, _templateObject6$a;
+var SidebarContainer$1 = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1$1$1$1$1$1$1.accent.softBlue;
 });
-var SidebarItem = styled(NavLink)(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1$1$1["default"].primary);
-var ContentWrapper = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$2 = styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$1 = styled(NavLink)(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1$1$1["default"].primary);
+var ContentWrapper$1 = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$4 = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1["default"].tertiary;
 });
-var Logo = styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer = styled.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$1 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$1 = styled.span(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -14368,14 +15684,14 @@ var TextContainer = styled.span(_templateObject6$7 || (_templateObject6$7 = _tag
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$l, _templateObject2$h, _templateObject3$c, _templateObject4$9;
-var ContainerWrapper = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$w, _templateObject2$q, _templateObject3$k, _templateObject4$g;
+var ContainerWrapper$1 = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$1 = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -14386,42 +15702,42 @@ var CellContainer = styled.div(_templateObject2$h || (_templateObject2$h = _tagg
 }, function (props) {
   return props.$padding;
 });
-var MainText = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$1 = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$1 = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$m;
-var TableRowContainer = styled$1.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$n, _templateObject2$i, _templateObject3$d, _templateObject4$a, _templateObject5$8;
-var TableContainer = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1$1$1.brand.light);
-var TableHeader = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$x;
+var TableRowContainer$1 = styled$1.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$y, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$d;
+var TableContainer$1 = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1$1$1.brand.light);
+var TableHeader$1 = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1$1$1.border.extraLight);
-var _templateObject$o, _templateObject2$j, _templateObject3$e, _templateObject4$b, _templateObject5$9;
-var Container$5 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$1 = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$1 = styled.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$1 = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1$1$1.border.extraLight);
+var _templateObject$z, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$e;
+var Container$8 = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref2) {
+var FirstContainer$1 = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$1 = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -14434,21 +15750,21 @@ var TabContainer = styled.div(_templateObject3$e || (_templateObject3$e = _tagge
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$1 = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1$1$1$1$1$1$1["default"].primary);
-var DetailsFirstContainer = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$1 = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1$1.text.medium;
 });
-var _templateObject$p, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8;
-var Container$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$A, _templateObject2$t, _templateObject3$n, _templateObject4$j, _templateObject5$f, _templateObject6$b;
+var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$2 = styled.label(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$4 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -14483,7 +15799,7 @@ var Label$2 = styled.label(_templateObject2$k || (_templateObject2$k = _taggedTe
       return $titlecolor;
   }
 });
-var Input$1 = styled.input(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref4) {
+var Input$2 = styled.input(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -14531,18 +15847,18 @@ var Input$1 = styled.input(_templateObject3$f || (_templateObject3$f = _taggedTe
       return $color;
   }
 }, colorVariables$1$1$1$1$1$1$1.text.light);
-var InputWrapper$2 = styled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$3 = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref10) {
+var InputWrapper$3 = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$5 = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref10) {
   var $disabled = _ref10.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$2 = styled.span(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1$1["default"].error);
-var _templateObject$q, _templateObject2$l, _templateObject3$g;
-var Container$7 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var Asterisk$3 = styled.span(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1$1["default"].error);
+var _templateObject$B, _templateObject2$u, _templateObject3$o;
+var Container$a = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$3 = styled.label(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$5 = styled.label(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -14558,7 +15874,7 @@ var Label$3 = styled.label(_templateObject2$l || (_templateObject2$l = _taggedTe
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables$1$1$1$1$1$1.text.dark;
 });
-var TextAreaComponent$1 = styled.textarea(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1.border.light, function (_ref4) {
+var TextAreaComponent$2 = styled.textarea(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -14584,18 +15900,18 @@ var TextAreaComponent$1 = styled.textarea(_templateObject3$g || (_templateObject
   var $color = _ref8.$color;
   return $color || colorVariables$1$1$1$1$1$1.text.dark;
 }, colorVariables$1$1$1$1$1$1.text.light);
-var _templateObject$r, _templateObject2$m, _templateObject3$h, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$4;
-var OptionContainer$2 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1$1.text.white);
-var OptionItem$2 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$C, _templateObject2$v, _templateObject3$p, _templateObject4$k, _templateObject5$g, _templateObject6$c, _templateObject7$5;
+var OptionContainer$3 = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1$1.text.white);
+var OptionItem$3 = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1$1$1.text.white : colorVariables$1$1$1$1$1$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1.text.white;
 }, colorVariables$1$1$1$1$1$1.hover.primary, colorVariables$1$1$1$1$1$1.text.white);
-var TotalOptionsHeader$1 = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1$1.text.light);
-var OptionLabel$2 = styled.label(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$4 = styled.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$2 = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1$1.text.light);
+var OptionLabel$3 = styled.label(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$5 = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -14624,7 +15940,7 @@ var SearchContainer$4 = styled.div(_templateObject5$b || (_templateObject5$b = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$4 = styled.input(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1$1["default"].tertiary, function (_ref6) {
+var SearchBar$5 = styled.input(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -14669,32 +15985,32 @@ var SearchBar$4 = styled.input(_templateObject6$9 || (_templateObject6$9 = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$2 = styled.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1$1.text.white);
-var _templateObject$s, _templateObject2$n, _templateObject3$i, _templateObject4$e;
-var spin$3 = keyframes(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$1 = function getDotPosition(index, size) {
+var OptionsWrapper$3 = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1$1.text.white);
+var _templateObject$D, _templateObject2$w, _templateObject3$q, _templateObject4$l;
+var spin$5 = keyframes(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$2 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$1 = styled.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$2 = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$1 = styled.div.attrs(function (_ref3) {
+var Dot$2 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$1($index, $size)
+      transform: getDotPosition$2($index, $size)
     }
   };
-})(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -14703,7 +16019,7 @@ var Dot$1 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$3, function (_ref7) {
+}, spin$5, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -14711,10 +16027,10 @@ var Dot$1 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$1 = styled.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$t, _templateObject2$o;
-var spin$4 = keyframes(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$2 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$2 = styled.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$E, _templateObject2$x;
+var spin$6 = keyframes(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$3 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -14723,25 +16039,25 @@ var Spinner$2 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTe
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$4);
-var _templateObject$u;
-var PageInput$1 = styled.input(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1$1.text.dark);
-var _templateObject$v, _templateObject2$p, _templateObject3$j, _templateObject4$f, _templateObject5$c, _templateObject6$a;
-var SidebarContainer$1 = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$6);
+var _templateObject$F;
+var PageInput$2 = styled.input(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1$1.text.dark);
+var _templateObject$G, _templateObject2$y, _templateObject3$r, _templateObject4$m, _templateObject5$h, _templateObject6$d;
+var SidebarContainer$2 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1$1$1$1$1$1.accent.softBlue;
 });
-var SidebarItem$1 = styled(NavLink)(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1$1["default"].primary);
-var ContentWrapper$1 = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$4 = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$2 = styled(NavLink)(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1$1["default"].primary);
+var ContentWrapper$2 = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$6 = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1["default"].tertiary;
 });
-var Logo$1 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$1 = styled.span(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$2 = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$2 = styled.span(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -14760,14 +16076,14 @@ var TextContainer$1 = styled.span(_templateObject6$a || (_templateObject6$a = _t
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$w, _templateObject2$q, _templateObject3$k, _templateObject4$g;
-var ContainerWrapper$1 = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$H, _templateObject2$z, _templateObject3$s, _templateObject4$n;
+var ContainerWrapper$2 = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$1 = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$2 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -14778,42 +16094,42 @@ var CellContainer$1 = styled.div(_templateObject2$q || (_templateObject2$q = _ta
 }, function (props) {
   return props.$padding;
 });
-var MainText$1 = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$2 = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$1 = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$2 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$x;
-var TableRowContainer$1 = styled$1.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$y, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$d;
-var TableContainer$1 = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1$1.brand.light);
-var TableHeader$1 = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$I;
+var TableRowContainer$2 = styled$1.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$J, _templateObject2$A, _templateObject3$t, _templateObject4$o, _templateObject5$i;
+var TableContainer$2 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1$1.brand.light);
+var TableHeader$2 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$1 = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$1 = styled.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$1 = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1$1.border.extraLight);
-var _templateObject$z, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$e;
-var Container$8 = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$2 = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$2 = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$2 = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1$1.border.extraLight);
+var _templateObject$K, _templateObject2$B, _templateObject3$u, _templateObject4$p, _templateObject5$j;
+var Container$b = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$1 = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1$1.border.light, function (_ref2) {
+var FirstContainer$2 = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$1 = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$2 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -14826,22 +16142,18 @@ var TabContainer$1 = styled.div(_templateObject3$m || (_templateObject3$m = _tag
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$1 = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$2 = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1$1$1$1$1$1["default"].primary);
-var DetailsFirstContainer$1 = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$2 = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose$1$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1$1.text.medium;
 });
-var _templateObject$A, _templateObject2$t, _templateObject3$n, _templateObject4$j, _templateObject5$f, _templateObject6$b;
-var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
-  var $padding = _ref.$padding;
-  return $padding;
-});
-var Label$4 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
-  var $size = _ref2.$size;
+var _templateObject$L, _templateObject2$C, _templateObject3$v, _templateObject4$q, _templateObject5$k;
+var Label$6 = styled.label(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+  var $size = _ref.$size;
   switch ($size) {
     case 'small':
       return "\n          font-size: 12px;\n          line-height: 12px;\n        ";
@@ -14852,8 +16164,8 @@ var Label$4 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTe
     default:
       return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
   }
-}, function (_ref3) {
-  var $titlecolor = _ref3.$titlecolor;
+}, function (_ref2) {
+  var $titlecolor = _ref2.$titlecolor;
   switch ($titlecolor) {
     case 'dark':
       return colorVariables$1$1$1$1$1$1.text.dark;
@@ -14875,21 +16187,21 @@ var Label$4 = styled.label(_templateObject2$t || (_templateObject2$t = _taggedTe
       return $titlecolor;
   }
 });
-var Input$2 = styled.input(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1.border.light, function (_ref4) {
-  var $disabled = _ref4.$disabled;
+var Input$3 = styled.input(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1$1.border.light, function (_ref3) {
+  var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
-}, function (_ref5) {
-  var $disabled = _ref5.$disabled,
-    $background = _ref5.$background;
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled,
+    $background = _ref4.$background;
   return $disabled ? colorVariables$1$1$1$1$1$1.disabled.secondary : $background;
-}, function (_ref6) {
-  var $color = _ref6.$color;
+}, function (_ref5) {
+  var $color = _ref5.$color;
   return $color;
-}, function (_ref7) {
-  var $disabled = _ref7.$disabled;
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled;
   return $disabled ? 'none' : 'auto';
-}, function (_ref8) {
-  var $size = _ref8.$size;
+}, function (_ref7) {
+  var $size = _ref7.$size;
   switch ($size) {
     case 'small':
       return "\n          font-size: 12px;\n          padding: 5px 10px;\n        ";
@@ -14900,8 +16212,8 @@ var Input$2 = styled.input(_templateObject3$n || (_templateObject3$n = _taggedTe
     default:
       return "\n          font-size: 14px;\n          padding: 7px 12px;\n        ";
   }
-}, function (_ref9) {
-  var $color = _ref9.$color;
+}, function (_ref8) {
+  var $color = _ref8.$color;
   switch ($color) {
     case 'dark':
       return colorVariables$1$1$1$1$1$1.text.dark;
@@ -14923,18 +16235,18 @@ var Input$2 = styled.input(_templateObject3$n || (_templateObject3$n = _taggedTe
       return $color;
   }
 }, colorVariables$1$1$1$1$1$1.text.light);
-var InputWrapper$3 = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$5 = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref10) {
-  var $disabled = _ref10.$disabled;
+var InputWrapper$4 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$7 = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+  var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$3 = styled.span(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1["default"].error);
-var _templateObject$B, _templateObject2$u, _templateObject3$o;
-var Container$a = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var Asterisk$4 = styled.span(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1$1["default"].error);
+var _templateObject$M, _templateObject2$D, _templateObject3$w;
+var Container$c = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$5 = styled.label(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$7 = styled.label(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -14950,7 +16262,7 @@ var Label$5 = styled.label(_templateObject2$u || (_templateObject2$u = _taggedTe
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables$1$1$1$1$1.text.dark;
 });
-var TextAreaComponent$2 = styled.textarea(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1.border.light, function (_ref4) {
+var TextAreaComponent$3 = styled.textarea(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -14976,18 +16288,18 @@ var TextAreaComponent$2 = styled.textarea(_templateObject3$o || (_templateObject
   var $color = _ref8.$color;
   return $color || colorVariables$1$1$1$1$1.text.dark;
 }, colorVariables$1$1$1$1$1.text.light);
-var _templateObject$C, _templateObject2$v, _templateObject3$p, _templateObject4$k, _templateObject5$g, _templateObject6$c, _templateObject7$5;
-var OptionContainer$3 = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1.text.white);
-var OptionItem$3 = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$N, _templateObject2$E, _templateObject3$x, _templateObject4$r, _templateObject5$l, _templateObject6$e, _templateObject7$6;
+var OptionContainer$4 = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1$1.text.white);
+var OptionItem$4 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1$1.text.white : colorVariables$1$1$1$1$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1.text.white;
 }, colorVariables$1$1$1$1$1.hover.primary, colorVariables$1$1$1$1$1.text.white);
-var TotalOptionsHeader$2 = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1.text.light);
-var OptionLabel$3 = styled.label(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$5 = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$3 = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1$1.text.white, colorVariables$1$1$1$1$1.text.light, colorVariables$1$1$1$1$1.text.light);
+var OptionLabel$4 = styled.label(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$6 = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -15016,7 +16328,7 @@ var SearchContainer$5 = styled.div(_templateObject5$g || (_templateObject5$g = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$5 = styled.input(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1["default"].tertiary, function (_ref6) {
+var SearchBar$6 = styled.input(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -15061,32 +16373,32 @@ var SearchBar$5 = styled.input(_templateObject6$c || (_templateObject6$c = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$3 = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1.text.white);
-var _templateObject$D, _templateObject2$w, _templateObject3$q, _templateObject4$l;
-var spin$5 = keyframes(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$2 = function getDotPosition(index, size) {
+var OptionsWrapper$4 = styled.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1$1.text.white);
+var _templateObject$O, _templateObject2$F, _templateObject3$y, _templateObject4$s;
+var spin$7 = keyframes(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$3 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$2 = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$3 = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$2 = styled.div.attrs(function (_ref3) {
+var Dot$3 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$2($index, $size)
+      transform: getDotPosition$3($index, $size)
     }
   };
-})(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -15095,7 +16407,7 @@ var Dot$2 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$5, function (_ref7) {
+}, spin$7, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -15103,10 +16415,10 @@ var Dot$2 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$2 = styled.div(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$E, _templateObject2$x;
-var spin$6 = keyframes(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$3 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$3 = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$P, _templateObject2$G;
+var spin$8 = keyframes(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$4 = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -15115,25 +16427,25 @@ var Spinner$3 = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTe
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$6);
-var _templateObject$F;
-var PageInput$2 = styled.input(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1.text.dark);
-var _templateObject$G, _templateObject2$y, _templateObject3$r, _templateObject4$m, _templateObject5$h, _templateObject6$d;
-var SidebarContainer$2 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$8);
+var _templateObject$Q;
+var PageInput$3 = styled.input(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1$1.border.light, colorVariables$1$1$1$1$1.text.dark);
+var _templateObject$R, _templateObject2$H, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$f;
+var SidebarContainer$3 = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1$1$1$1$1.accent.softBlue;
 });
-var SidebarItem$2 = styled(NavLink)(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1["default"].primary);
-var ContentWrapper$2 = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$6 = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$3 = styled(NavLink)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1$1.text.medium, colorVariables$1$1$1$1$1["default"].primary);
+var ContentWrapper$3 = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$8 = styled.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1["default"].tertiary;
 });
-var Logo$2 = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$2 = styled.span(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$3 = styled.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$3 = styled.span(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -15152,14 +16464,14 @@ var TextContainer$2 = styled.span(_templateObject6$d || (_templateObject6$d = _t
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$H, _templateObject2$z, _templateObject3$s, _templateObject4$n;
-var ContainerWrapper$2 = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$S, _templateObject2$I, _templateObject3$A, _templateObject4$u;
+var ContainerWrapper$3 = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$2 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$3 = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -15170,42 +16482,42 @@ var CellContainer$2 = styled.div(_templateObject2$z || (_templateObject2$z = _ta
 }, function (props) {
   return props.$padding;
 });
-var MainText$2 = styled.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$3 = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$2 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$3 = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$I;
-var TableRowContainer$2 = styled$1.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$J, _templateObject2$A, _templateObject3$t, _templateObject4$o, _templateObject5$i;
-var TableContainer$2 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1.brand.light);
-var TableHeader$2 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$T;
+var TableRowContainer$3 = styled$1.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$U, _templateObject2$J, _templateObject3$B, _templateObject4$v, _templateObject5$n;
+var TableContainer$3 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1$1.brand.light);
+var TableHeader$3 = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$2 = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$2 = styled.div(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$2 = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1.border.extraLight);
-var _templateObject$K, _templateObject2$B, _templateObject3$u, _templateObject4$p, _templateObject5$j;
-var Container$b = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$3 = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$3 = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$3 = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1$1.border.extraLight);
+var _templateObject$V, _templateObject2$K, _templateObject3$C, _templateObject4$w, _templateObject5$o;
+var Container$d = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$2 = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1.border.light, function (_ref2) {
+var FirstContainer$3 = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$2 = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$3 = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -15218,17 +16530,17 @@ var TabContainer$2 = styled.div(_templateObject3$u || (_templateObject3$u = _tag
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$2 = styled.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$3 = styled.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1$1$1$1$1["default"].primary);
-var DetailsFirstContainer$2 = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$3 = styled.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose$1$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1$1$1$1$1["default"].primary : colorVariables$1$1$1$1$1.text.medium;
 });
-var _templateObject$L, _templateObject2$C, _templateObject3$v, _templateObject4$q, _templateObject5$k;
-var Label$6 = styled.label(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$W, _templateObject2$L, _templateObject3$D, _templateObject4$x, _templateObject5$p;
+var Label$8 = styled.label(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose$1$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $size = _ref.$size;
   switch ($size) {
     case 'small':
@@ -15263,7 +16575,7 @@ var Label$6 = styled.label(_templateObject$L || (_templateObject$L = _taggedTemp
       return $titlecolor;
   }
 });
-var Input$3 = styled.input(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1.border.light, function (_ref3) {
+var Input$4 = styled.input(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1$1.border.light, function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref4) {
@@ -15311,18 +16623,18 @@ var Input$3 = styled.input(_templateObject2$C || (_templateObject2$C = _taggedTe
       return $color;
   }
 }, colorVariables$1$1$1$1$1.text.light);
-var InputWrapper$4 = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$7 = styled.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+var InputWrapper$5 = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$9 = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
   var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$4 = styled.span(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1["default"].error);
-var _templateObject$M, _templateObject2$D, _templateObject3$w;
-var Container$c = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var Asterisk$5 = styled.span(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1$1["default"].error);
+var _templateObject$X, _templateObject2$M, _templateObject3$E;
+var Container$e = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$7 = styled.label(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$9 = styled.label(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose$1$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -15338,7 +16650,7 @@ var Label$7 = styled.label(_templateObject2$D || (_templateObject2$D = _taggedTe
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables$1$1$1$1.text.dark;
 });
-var TextAreaComponent$3 = styled.textarea(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1.border.light, function (_ref4) {
+var TextAreaComponent$4 = styled.textarea(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -15364,18 +16676,18 @@ var TextAreaComponent$3 = styled.textarea(_templateObject3$w || (_templateObject
   var $color = _ref8.$color;
   return $color || colorVariables$1$1$1$1.text.dark;
 }, colorVariables$1$1$1$1.text.light);
-var _templateObject$N, _templateObject2$E, _templateObject3$x, _templateObject4$r, _templateObject5$l, _templateObject6$e, _templateObject7$6;
-var OptionContainer$4 = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1.text.white);
-var OptionItem$4 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$Y, _templateObject2$N, _templateObject3$F, _templateObject4$y, _templateObject5$q, _templateObject6$g, _templateObject7$7;
+var OptionContainer$5 = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose$1$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1$1.text.white);
+var OptionItem$5 = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1.text.white : colorVariables$1$1$1$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1$1["default"].primary : colorVariables$1$1$1$1.text.white;
 }, colorVariables$1$1$1$1.hover.primary, colorVariables$1$1$1$1.text.white);
-var TotalOptionsHeader$3 = styled.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1.text.white, colorVariables$1$1$1$1.text.light, colorVariables$1$1$1$1.text.light);
-var OptionLabel$4 = styled.label(_templateObject4$r || (_templateObject4$r = _taggedTemplateLiteralLoose$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$6 = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$4 = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1$1.text.white, colorVariables$1$1$1$1.text.light, colorVariables$1$1$1$1.text.light);
+var OptionLabel$5 = styled.label(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose$1$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$7 = styled.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -15404,7 +16716,7 @@ var SearchContainer$6 = styled.div(_templateObject5$l || (_templateObject5$l = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$6 = styled.input(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1["default"].tertiary, function (_ref6) {
+var SearchBar$7 = styled.input(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose$1$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -15449,32 +16761,32 @@ var SearchBar$6 = styled.input(_templateObject6$e || (_templateObject6$e = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$4 = styled.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1.text.white);
-var _templateObject$O, _templateObject2$F, _templateObject3$y, _templateObject4$s;
-var spin$7 = keyframes(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$3 = function getDotPosition(index, size) {
+var OptionsWrapper$5 = styled.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1$1.text.white);
+var _templateObject$Z, _templateObject2$O, _templateObject3$G, _templateObject4$z;
+var spin$9 = keyframes(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose$1$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$4 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$3 = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$4 = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$3 = styled.div.attrs(function (_ref3) {
+var Dot$4 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$3($index, $size)
+      transform: getDotPosition$4($index, $size)
     }
   };
-})(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose$1$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -15483,7 +16795,7 @@ var Dot$3 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$7, function (_ref7) {
+}, spin$9, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -15491,10 +16803,10 @@ var Dot$3 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$3 = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$P, _templateObject2$G;
-var spin$8 = keyframes(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$4 = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$4 = styled.div(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$_, _templateObject2$P;
+var spin$a = keyframes(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose$1$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$5 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -15503,25 +16815,25 @@ var Spinner$4 = styled.div(_templateObject2$G || (_templateObject2$G = _taggedTe
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$8);
-var _templateObject$Q;
-var PageInput$3 = styled.input(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1.border.light, colorVariables$1$1$1$1.text.dark);
-var _templateObject$R, _templateObject2$H, _templateObject3$z, _templateObject4$t, _templateObject5$m, _templateObject6$f;
-var SidebarContainer$3 = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$a);
+var _templateObject$$;
+var PageInput$4 = styled.input(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1$1.accent.extraLight, colorVariables$1$1$1$1.border.light, colorVariables$1$1$1$1.text.dark);
+var _templateObject$10, _templateObject2$Q, _templateObject3$H, _templateObject4$A, _templateObject5$r, _templateObject6$h;
+var SidebarContainer$4 = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1$1$1$1.accent.softBlue;
 });
-var SidebarItem$3 = styled(NavLink)(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1.text.medium, colorVariables$1$1$1$1["default"].primary);
-var ContentWrapper$3 = styled.div(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$8 = styled.div(_templateObject4$t || (_templateObject4$t = _taggedTemplateLiteralLoose$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$4 = styled(NavLink)(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1$1.text.medium, colorVariables$1$1$1$1["default"].primary);
+var ContentWrapper$4 = styled.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$a = styled.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose$1$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1$1$1$1["default"].primary : colorVariables$1$1$1$1["default"].tertiary;
 });
-var Logo$3 = styled.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$3 = styled.span(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$4 = styled.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$4 = styled.span(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -15540,14 +16852,14 @@ var TextContainer$3 = styled.span(_templateObject6$f || (_templateObject6$f = _t
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$S, _templateObject2$I, _templateObject3$A, _templateObject4$u;
-var ContainerWrapper$3 = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$11, _templateObject2$R, _templateObject3$I, _templateObject4$B;
+var ContainerWrapper$4 = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$3 = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$4 = styled.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose$1$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -15558,42 +16870,42 @@ var CellContainer$3 = styled.div(_templateObject2$I || (_templateObject2$I = _ta
 }, function (props) {
   return props.$padding;
 });
-var MainText$3 = styled.div(_templateObject3$A || (_templateObject3$A = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$4 = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$3 = styled.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$4 = styled.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose$1$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$T;
-var TableRowContainer$3 = styled$1.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$U, _templateObject2$J, _templateObject3$B, _templateObject4$v, _templateObject5$n;
-var TableContainer$3 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1.brand.light);
-var TableHeader$3 = styled.div(_templateObject2$J || (_templateObject2$J = _taggedTemplateLiteralLoose$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$12;
+var TableRowContainer$4 = styled$1.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$13, _templateObject2$S, _templateObject3$J, _templateObject4$C, _templateObject5$s;
+var TableContainer$4 = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1$1.brand.light);
+var TableHeader$4 = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose$1$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$3 = styled.div(_templateObject3$B || (_templateObject3$B = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$3 = styled.div(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$3 = styled.div(_templateObject5$n || (_templateObject5$n = _taggedTemplateLiteralLoose$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1.border.extraLight);
-var _templateObject$V, _templateObject2$K, _templateObject3$C, _templateObject4$w, _templateObject5$o;
-var Container$d = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$4 = styled.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$4 = styled.div(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose$1$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$4 = styled.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose$1$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1$1.border.extraLight);
+var _templateObject$14, _templateObject2$T, _templateObject3$K, _templateObject4$D, _templateObject5$t;
+var Container$f = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$3 = styled.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1.border.light, function (_ref2) {
+var FirstContainer$4 = styled.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$3 = styled.div(_templateObject3$C || (_templateObject3$C = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$4 = styled.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose$1$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -15606,17 +16918,17 @@ var TabContainer$3 = styled.div(_templateObject3$C || (_templateObject3$C = _tag
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$3 = styled.div(_templateObject4$w || (_templateObject4$w = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$4 = styled.div(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose$1$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1$1$1$1["default"].primary);
-var DetailsFirstContainer$3 = styled.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$4 = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose$1$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1$1$1$1["default"].primary : colorVariables$1$1$1$1.text.medium;
 });
-var _templateObject$W, _templateObject2$L, _templateObject3$D, _templateObject4$x, _templateObject5$p;
-var Label$8 = styled.label(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$15, _templateObject2$U, _templateObject3$L, _templateObject4$E, _templateObject5$u;
+var Label$a = styled.label(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $size = _ref.$size;
   switch ($size) {
     case 'small':
@@ -15651,7 +16963,7 @@ var Label$8 = styled.label(_templateObject$W || (_templateObject$W = _taggedTemp
       return $titlecolor;
   }
 });
-var Input$4 = styled.input(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1.border.light, function (_ref3) {
+var Input$5 = styled.input(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1$1.border.light, function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref4) {
@@ -15699,18 +17011,18 @@ var Input$4 = styled.input(_templateObject2$L || (_templateObject2$L = _taggedTe
       return $color;
   }
 }, colorVariables$1$1$1$1.text.light);
-var InputWrapper$5 = styled.div(_templateObject3$D || (_templateObject3$D = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$9 = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+var InputWrapper$6 = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$b = styled.div(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
   var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$5 = styled.span(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1["default"].error);
-var _templateObject$X, _templateObject2$M, _templateObject3$E;
-var Container$e = styled.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var Asterisk$6 = styled.span(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1$1["default"].error);
+var _templateObject$16, _templateObject2$V, _templateObject3$M;
+var Container$g = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$9 = styled.label(_templateObject2$M || (_templateObject2$M = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$b = styled.label(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -15726,7 +17038,7 @@ var Label$9 = styled.label(_templateObject2$M || (_templateObject2$M = _taggedTe
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables$1$1$1.text.dark;
 });
-var TextAreaComponent$4 = styled.textarea(_templateObject3$E || (_templateObject3$E = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1.border.light, function (_ref4) {
+var TextAreaComponent$5 = styled.textarea(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -15752,18 +17064,18 @@ var TextAreaComponent$4 = styled.textarea(_templateObject3$E || (_templateObject
   var $color = _ref8.$color;
   return $color || colorVariables$1$1$1.text.dark;
 }, colorVariables$1$1$1.text.light);
-var _templateObject$Y, _templateObject2$N, _templateObject3$F, _templateObject4$y, _templateObject5$q, _templateObject6$g, _templateObject7$7;
-var OptionContainer$5 = styled.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1.text.white);
-var OptionItem$5 = styled.div(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$17, _templateObject2$W, _templateObject3$N, _templateObject4$F, _templateObject5$v, _templateObject6$i, _templateObject7$8;
+var OptionContainer$6 = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose$1$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1$1.text.white);
+var OptionItem$6 = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1.text.white : colorVariables$1$1$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1$1$1["default"].primary : colorVariables$1$1$1.text.white;
 }, colorVariables$1$1$1.hover.primary, colorVariables$1$1$1.text.white);
-var TotalOptionsHeader$4 = styled.div(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1.text.white, colorVariables$1$1$1.text.light, colorVariables$1$1$1.text.light);
-var OptionLabel$5 = styled.label(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$7 = styled.div(_templateObject5$q || (_templateObject5$q = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$5 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1$1.text.white, colorVariables$1$1$1.text.light, colorVariables$1$1$1.text.light);
+var OptionLabel$6 = styled.label(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$8 = styled.div(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -15792,7 +17104,7 @@ var SearchContainer$7 = styled.div(_templateObject5$q || (_templateObject5$q = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$7 = styled.input(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1["default"].tertiary, function (_ref6) {
+var SearchBar$8 = styled.input(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose$1$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -15837,32 +17149,32 @@ var SearchBar$7 = styled.input(_templateObject6$g || (_templateObject6$g = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$5 = styled.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1.text.white);
-var _templateObject$Z, _templateObject2$O, _templateObject3$G, _templateObject4$z;
-var spin$9 = keyframes(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$4 = function getDotPosition(index, size) {
+var OptionsWrapper$6 = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1$1.text.white);
+var _templateObject$18, _templateObject2$X, _templateObject3$O, _templateObject4$G;
+var spin$b = keyframes(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$5 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$4 = styled.div(_templateObject2$O || (_templateObject2$O = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$5 = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$4 = styled.div.attrs(function (_ref3) {
+var Dot$5 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$4($index, $size)
+      transform: getDotPosition$5($index, $size)
     }
   };
-})(_templateObject3$G || (_templateObject3$G = _taggedTemplateLiteralLoose$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose$1$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -15871,7 +17183,7 @@ var Dot$4 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$9, function (_ref7) {
+}, spin$b, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -15879,10 +17191,10 @@ var Dot$4 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$4 = styled.div(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$_, _templateObject2$P;
-var spin$a = keyframes(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteralLoose$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$5 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$5 = styled.div(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose$1$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$19, _templateObject2$Y;
+var spin$c = keyframes(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$6 = styled.div(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose$1$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -15891,25 +17203,25 @@ var Spinner$5 = styled.div(_templateObject2$P || (_templateObject2$P = _taggedTe
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$a);
-var _templateObject$$;
-var PageInput$4 = styled.input(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1.accent.extraLight, colorVariables$1$1$1.border.light, colorVariables$1$1$1.text.dark);
-var _templateObject$10, _templateObject2$Q, _templateObject3$H, _templateObject4$A, _templateObject5$r, _templateObject6$h;
-var SidebarContainer$4 = styled.div(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$c);
+var _templateObject$1a;
+var PageInput$5 = styled.input(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1$1.accent.extraLight, colorVariables$1$1$1.border.light, colorVariables$1$1$1.text.dark);
+var _templateObject$1b, _templateObject2$Z, _templateObject3$P, _templateObject4$H, _templateObject5$w, _templateObject6$j;
+var SidebarContainer$5 = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose$1$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1$1$1.accent.softBlue;
 });
-var SidebarItem$4 = styled(NavLink)(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1.text.medium, colorVariables$1$1$1["default"].primary);
-var ContentWrapper$4 = styled.div(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$a = styled.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$5 = styled(NavLink)(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1$1.text.medium, colorVariables$1$1$1["default"].primary);
+var ContentWrapper$5 = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$c = styled.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose$1$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1$1$1["default"].primary : colorVariables$1$1$1["default"].tertiary;
 });
-var Logo$4 = styled.div(_templateObject5$r || (_templateObject5$r = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$4 = styled.span(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$5 = styled.div(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$5 = styled.span(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -15928,14 +17240,14 @@ var TextContainer$4 = styled.span(_templateObject6$h || (_templateObject6$h = _t
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$11, _templateObject2$R, _templateObject3$I, _templateObject4$B;
-var ContainerWrapper$4 = styled.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$1c, _templateObject2$_, _templateObject3$Q, _templateObject4$I;
+var ContainerWrapper$5 = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose$1$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$4 = styled.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$5 = styled.div(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose$1$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -15946,42 +17258,42 @@ var CellContainer$4 = styled.div(_templateObject2$R || (_templateObject2$R = _ta
 }, function (props) {
   return props.$padding;
 });
-var MainText$4 = styled.div(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$5 = styled.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$4 = styled.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$5 = styled.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$12;
-var TableRowContainer$4 = styled$1.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$13, _templateObject2$S, _templateObject3$J, _templateObject4$C, _templateObject5$s;
-var TableContainer$4 = styled.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1.brand.light);
-var TableHeader$4 = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$1d;
+var TableRowContainer$5 = styled$1.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$1e, _templateObject2$$, _templateObject3$R, _templateObject4$J, _templateObject5$x;
+var TableContainer$5 = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1$1.brand.light);
+var TableHeader$5 = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose$1$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$4 = styled.div(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$4 = styled.div(_templateObject4$C || (_templateObject4$C = _taggedTemplateLiteralLoose$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$4 = styled.div(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1.border.extraLight);
-var _templateObject$14, _templateObject2$T, _templateObject3$K, _templateObject4$D, _templateObject5$t;
-var Container$f = styled.div(_templateObject$14 || (_templateObject$14 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$5 = styled.div(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$5 = styled.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$5 = styled.div(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1$1.border.extraLight);
+var _templateObject$1f, _templateObject2$10, _templateObject3$S, _templateObject4$K, _templateObject5$y;
+var Container$h = styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$4 = styled.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1.border.light, function (_ref2) {
+var FirstContainer$5 = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$4 = styled.div(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$5 = styled.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose$1$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -15994,17 +17306,17 @@ var TabContainer$4 = styled.div(_templateObject3$K || (_templateObject3$K = _tag
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$4 = styled.div(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$5 = styled.div(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1$1$1["default"].primary);
-var DetailsFirstContainer$4 = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$5 = styled.div(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose$1$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1$1$1["default"].primary : colorVariables$1$1$1.text.medium;
 });
-var _templateObject$15, _templateObject2$U, _templateObject3$L, _templateObject4$E, _templateObject5$u;
-var Label$a = styled.label(_templateObject$15 || (_templateObject$15 = _taggedTemplateLiteralLoose$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$1g, _templateObject2$11, _templateObject3$T, _templateObject4$L, _templateObject5$z;
+var Label$c = styled.label(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $size = _ref.$size;
   switch ($size) {
     case 'small':
@@ -16039,7 +17351,7 @@ var Label$a = styled.label(_templateObject$15 || (_templateObject$15 = _taggedTe
       return $titlecolor;
   }
 });
-var Input$5 = styled.input(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1.border.light, function (_ref3) {
+var Input$6 = styled.input(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1$1.border.light, function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref4) {
@@ -16053,16 +17365,17 @@ var Input$5 = styled.input(_templateObject2$U || (_templateObject2$U = _taggedTe
   var $disabled = _ref6.$disabled;
   return $disabled ? 'none' : 'auto';
 }, function (_ref7) {
-  var $size = _ref7.$size;
+  var $size = _ref7.$size,
+    $type = _ref7.$type;
   switch ($size) {
     case 'small':
-      return "\n          font-size: 12px;\n          padding: 5px 10px;\n        ";
+      return "\n          font-size: 12px;\n          padding: " + ($type === 'password' ? '5px 38px 5px 10px' : '5px 10px') + ";\n        ";
     case 'medium':
-      return "\n          font-size: 14px;\n          padding: 9.5px 12px;\n        ";
+      return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '9.5px 38px 9.5px 12px' : '9.5px 12px') + ";\n        ";
     case 'large':
-      return "\n          font-size: 16px;\n          padding: 9px 14px;\n        ";
+      return "\n          font-size: 16px;\n          padding: " + ($type === 'password' ? '9px 38px 9px 14px' : '9px 14px') + ";\n        ";
     default:
-      return "\n          font-size: 14px;\n          padding: 7px 12px;\n        ";
+      return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n        ";
   }
 }, function (_ref8) {
   var $color = _ref8.$color;
@@ -16087,18 +17400,18 @@ var Input$5 = styled.input(_templateObject2$U || (_templateObject2$U = _taggedTe
       return $color;
   }
 }, colorVariables$1$1$1.text.light);
-var InputWrapper$6 = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$b = styled.div(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+var InputWrapper$7 = styled.div(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$d = styled.div(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
   var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$6 = styled.span(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1["default"].error);
-var _templateObject$16, _templateObject2$V, _templateObject3$M;
-var Container$g = styled.div(_templateObject$16 || (_templateObject$16 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var Asterisk$7 = styled.span(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1$1["default"].error);
+var _templateObject$1h, _templateObject2$12, _templateObject3$U;
+var Container$i = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$b = styled.label(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$d = styled.label(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose$1$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -16114,7 +17427,7 @@ var Label$b = styled.label(_templateObject2$V || (_templateObject2$V = _taggedTe
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables$1$1.text.dark;
 });
-var TextAreaComponent$5 = styled.textarea(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1.border.light, function (_ref4) {
+var TextAreaComponent$6 = styled.textarea(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -16140,18 +17453,18 @@ var TextAreaComponent$5 = styled.textarea(_templateObject3$M || (_templateObject
   var $color = _ref8.$color;
   return $color || colorVariables$1$1.text.dark;
 }, colorVariables$1$1.text.light);
-var _templateObject$17, _templateObject2$W, _templateObject3$N, _templateObject4$F, _templateObject5$v, _templateObject6$i, _templateObject7$8;
-var OptionContainer$6 = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1.text.white);
-var OptionItem$6 = styled.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$1i, _templateObject2$13, _templateObject3$V, _templateObject4$M, _templateObject5$A, _templateObject6$k, _templateObject7$9;
+var OptionContainer$7 = styled.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose$1$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1$1.text.white);
+var OptionItem$7 = styled.div(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1$1.text.white : colorVariables$1$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1$1["default"].primary : colorVariables$1$1.text.white;
 }, colorVariables$1$1.hover.primary, colorVariables$1$1.text.white);
-var TotalOptionsHeader$5 = styled.div(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1.text.white, colorVariables$1$1.text.light, colorVariables$1$1.text.light);
-var OptionLabel$6 = styled.label(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$8 = styled.div(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$6 = styled.div(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1$1.text.white, colorVariables$1$1.text.light, colorVariables$1$1.text.light);
+var OptionLabel$7 = styled.label(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose$1$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$9 = styled.div(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -16180,7 +17493,7 @@ var SearchContainer$8 = styled.div(_templateObject5$v || (_templateObject5$v = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$8 = styled.input(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1["default"].tertiary, function (_ref6) {
+var SearchBar$9 = styled.input(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose$1$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -16225,32 +17538,32 @@ var SearchBar$8 = styled.input(_templateObject6$i || (_templateObject6$i = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$6 = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1.text.white);
-var _templateObject$18, _templateObject2$X, _templateObject3$O, _templateObject4$G;
-var spin$b = keyframes(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$5 = function getDotPosition(index, size) {
+var OptionsWrapper$7 = styled.div(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1$1.text.white);
+var _templateObject$1j, _templateObject2$14, _templateObject3$W, _templateObject4$N;
+var spin$d = keyframes(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$6 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$5 = styled.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$6 = styled.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$5 = styled.div.attrs(function (_ref3) {
+var Dot$6 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$5($index, $size)
+      transform: getDotPosition$6($index, $size)
     }
   };
-})(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose$1$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -16259,7 +17572,7 @@ var Dot$5 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$b, function (_ref7) {
+}, spin$d, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -16267,10 +17580,10 @@ var Dot$5 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$5 = styled.div(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$19, _templateObject2$Y;
-var spin$c = keyframes(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$6 = styled.div(_templateObject2$Y || (_templateObject2$Y = _taggedTemplateLiteralLoose$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$6 = styled.div(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose$1$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$1k, _templateObject2$15;
+var spin$e = keyframes(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$7 = styled.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose$1$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -16279,25 +17592,25 @@ var Spinner$6 = styled.div(_templateObject2$Y || (_templateObject2$Y = _taggedTe
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$c);
-var _templateObject$1a;
-var PageInput$5 = styled.input(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1.accent.extraLight, colorVariables$1$1.border.light, colorVariables$1$1.text.dark);
-var _templateObject$1b, _templateObject2$Z, _templateObject3$P, _templateObject4$H, _templateObject5$w, _templateObject6$j;
-var SidebarContainer$5 = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$e);
+var _templateObject$1l;
+var PageInput$6 = styled.input(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1$1.accent.extraLight, colorVariables$1$1.border.light, colorVariables$1$1.text.dark);
+var _templateObject$1m, _templateObject2$16, _templateObject3$X, _templateObject4$O, _templateObject5$B, _templateObject6$l;
+var SidebarContainer$6 = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose$1$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1$1.accent.softBlue;
 });
-var SidebarItem$5 = styled(NavLink)(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1.text.medium, colorVariables$1$1["default"].primary);
-var ContentWrapper$5 = styled.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$c = styled.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$6 = styled(NavLink)(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1$1.text.medium, colorVariables$1$1["default"].primary);
+var ContentWrapper$6 = styled.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$e = styled.div(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose$1$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1$1["default"].primary : colorVariables$1$1["default"].tertiary;
 });
-var Logo$5 = styled.div(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$5 = styled.span(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$6 = styled.div(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$6 = styled.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -16316,14 +17629,14 @@ var TextContainer$5 = styled.span(_templateObject6$j || (_templateObject6$j = _t
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$1c, _templateObject2$_, _templateObject3$Q, _templateObject4$I;
-var ContainerWrapper$5 = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$1n, _templateObject2$17, _templateObject3$Y, _templateObject4$P;
+var ContainerWrapper$6 = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose$1$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$5 = styled.div(_templateObject2$_ || (_templateObject2$_ = _taggedTemplateLiteralLoose$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$6 = styled.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose$1$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -16334,42 +17647,42 @@ var CellContainer$5 = styled.div(_templateObject2$_ || (_templateObject2$_ = _ta
 }, function (props) {
   return props.$padding;
 });
-var MainText$5 = styled.div(_templateObject3$Q || (_templateObject3$Q = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$6 = styled.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$5 = styled.div(_templateObject4$I || (_templateObject4$I = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$6 = styled.div(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$1d;
-var TableRowContainer$5 = styled$1.div(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$1e, _templateObject2$$, _templateObject3$R, _templateObject4$J, _templateObject5$x;
-var TableContainer$5 = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1.brand.light);
-var TableHeader$5 = styled.div(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$1o;
+var TableRowContainer$6 = styled$1.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$1p, _templateObject2$18, _templateObject3$Z, _templateObject4$Q, _templateObject5$C;
+var TableContainer$6 = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1$1.brand.light);
+var TableHeader$6 = styled.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose$1$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$5 = styled.div(_templateObject3$R || (_templateObject3$R = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$5 = styled.div(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$5 = styled.div(_templateObject5$x || (_templateObject5$x = _taggedTemplateLiteralLoose$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1.border.extraLight);
-var _templateObject$1f, _templateObject2$10, _templateObject3$S, _templateObject4$K, _templateObject5$y;
-var Container$h = styled.div(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$6 = styled.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$6 = styled.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$6 = styled.div(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose$1$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1$1.border.extraLight);
+var _templateObject$1q, _templateObject2$19, _templateObject3$_, _templateObject4$R, _templateObject5$D;
+var Container$j = styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$5 = styled.div(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1.border.light, function (_ref2) {
+var FirstContainer$6 = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$5 = styled.div(_templateObject3$S || (_templateObject3$S = _taggedTemplateLiteralLoose$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$6 = styled.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose$1$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -16382,17 +17695,17 @@ var TabContainer$5 = styled.div(_templateObject3$S || (_templateObject3$S = _tag
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$5 = styled.div(_templateObject4$K || (_templateObject4$K = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$6 = styled.div(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1$1["default"].primary);
-var DetailsFirstContainer$5 = styled.div(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$6 = styled.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose$1$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1$1["default"].primary : colorVariables$1$1.text.medium;
 });
-var _templateObject$1g, _templateObject2$11, _templateObject3$T, _templateObject4$L, _templateObject5$z;
-var Label$c = styled.label(_templateObject$1g || (_templateObject$1g = _taggedTemplateLiteralLoose$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$1r, _templateObject2$1a, _templateObject3$$, _templateObject4$S, _templateObject5$E;
+var Label$e = styled.label(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $size = _ref.$size;
   switch ($size) {
     case 'small':
@@ -16427,7 +17740,7 @@ var Label$c = styled.label(_templateObject$1g || (_templateObject$1g = _taggedTe
       return $titlecolor;
   }
 });
-var Input$6 = styled.input(_templateObject2$11 || (_templateObject2$11 = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1.border.light, function (_ref3) {
+var Input$7 = styled.input(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1$1.border.light, function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref4) {
@@ -16476,18 +17789,18 @@ var Input$6 = styled.input(_templateObject2$11 || (_templateObject2$11 = _tagged
       return $color;
   }
 }, colorVariables$1$1.text.light);
-var InputWrapper$7 = styled.div(_templateObject3$T || (_templateObject3$T = _taggedTemplateLiteralLoose$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$d = styled.div(_templateObject4$L || (_templateObject4$L = _taggedTemplateLiteralLoose$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+var InputWrapper$8 = styled.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$f = styled.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
   var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$7 = styled.span(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1["default"].error);
-var _templateObject$1h, _templateObject2$12, _templateObject3$U;
-var Container$i = styled.div(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var Asterisk$8 = styled.span(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1$1["default"].error);
+var _templateObject$1s, _templateObject2$1b, _templateObject3$10;
+var Container$k = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$d = styled.label(_templateObject2$12 || (_templateObject2$12 = _taggedTemplateLiteralLoose$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$f = styled.label(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose$1(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -16503,7 +17816,7 @@ var Label$d = styled.label(_templateObject2$12 || (_templateObject2$12 = _tagged
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables$1.text.dark;
 });
-var TextAreaComponent$6 = styled.textarea(_templateObject3$U || (_templateObject3$U = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1.border.light, function (_ref4) {
+var TextAreaComponent$7 = styled.textarea(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -16529,18 +17842,18 @@ var TextAreaComponent$6 = styled.textarea(_templateObject3$U || (_templateObject
   var $color = _ref8.$color;
   return $color || colorVariables$1.text.dark;
 }, colorVariables$1.text.light);
-var _templateObject$1i, _templateObject2$13, _templateObject3$V, _templateObject4$M, _templateObject5$A, _templateObject6$k, _templateObject7$9;
-var OptionContainer$7 = styled.div(_templateObject$1i || (_templateObject$1i = _taggedTemplateLiteralLoose$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1.text.white);
-var OptionItem$7 = styled.div(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$1t, _templateObject2$1c, _templateObject3$11, _templateObject4$T, _templateObject5$F, _templateObject6$m, _templateObject7$a;
+var OptionContainer$8 = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose$1(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables$1.text.white);
+var OptionItem$8 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables$1.text.white : colorVariables$1.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables$1["default"].primary : colorVariables$1.text.white;
 }, colorVariables$1.hover.primary, colorVariables$1.text.white);
-var TotalOptionsHeader$6 = styled.div(_templateObject3$V || (_templateObject3$V = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1.text.white, colorVariables$1.text.light, colorVariables$1.text.light);
-var OptionLabel$7 = styled.label(_templateObject4$M || (_templateObject4$M = _taggedTemplateLiteralLoose$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$9 = styled.div(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$7 = styled.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables$1.text.white, colorVariables$1.text.light, colorVariables$1.text.light);
+var OptionLabel$8 = styled.label(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose$1(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$a = styled.div(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -16569,7 +17882,7 @@ var SearchContainer$9 = styled.div(_templateObject5$A || (_templateObject5$A = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$9 = styled.input(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1["default"].tertiary, function (_ref6) {
+var SearchBar$a = styled.input(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose$1(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables$1["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -16614,32 +17927,32 @@ var SearchBar$9 = styled.input(_templateObject6$k || (_templateObject6$k = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$7 = styled.div(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1.text.white);
-var _templateObject$1j, _templateObject2$14, _templateObject3$W, _templateObject4$N;
-var spin$d = keyframes(_templateObject$1j || (_templateObject$1j = _taggedTemplateLiteralLoose$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$6 = function getDotPosition(index, size) {
+var OptionsWrapper$8 = styled.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables$1.text.white);
+var _templateObject$1u, _templateObject2$1d, _templateObject3$12, _templateObject4$U;
+var spin$f = keyframes(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$7 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$6 = styled.div(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$7 = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose$1(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$6 = styled.div.attrs(function (_ref3) {
+var Dot$7 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$6($index, $size)
+      transform: getDotPosition$7($index, $size)
     }
   };
-})(_templateObject3$W || (_templateObject3$W = _taggedTemplateLiteralLoose$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose$1(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -16648,7 +17961,7 @@ var Dot$6 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$d, function (_ref7) {
+}, spin$f, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -16656,10 +17969,10 @@ var Dot$6 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$6 = styled.div(_templateObject4$N || (_templateObject4$N = _taggedTemplateLiteralLoose$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var _templateObject$1k, _templateObject2$15;
-var spin$e = keyframes(_templateObject$1k || (_templateObject$1k = _taggedTemplateLiteralLoose$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$7 = styled.div(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var SpinnerWrapper$7 = styled.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose$1(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var _templateObject$1v, _templateObject2$1e;
+var spin$g = keyframes(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$8 = styled.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose$1(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -16668,25 +17981,25 @@ var Spinner$7 = styled.div(_templateObject2$15 || (_templateObject2$15 = _tagged
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$e);
-var _templateObject$1l;
-var PageInput$6 = styled.input(_templateObject$1l || (_templateObject$1l = _taggedTemplateLiteralLoose$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1.accent.extraLight, colorVariables$1.border.light, colorVariables$1.text.dark);
-var _templateObject$1m, _templateObject2$16, _templateObject3$X, _templateObject4$O, _templateObject5$B, _templateObject6$l;
-var SidebarContainer$6 = styled.div(_templateObject$1m || (_templateObject$1m = _taggedTemplateLiteralLoose$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+}, spin$g);
+var _templateObject$1w;
+var PageInput$7 = styled.input(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables$1.accent.extraLight, colorVariables$1.border.light, colorVariables$1.text.dark);
+var _templateObject$1x, _templateObject2$1f, _templateObject3$13, _templateObject4$V, _templateObject5$G, _templateObject6$n;
+var SidebarContainer$7 = styled.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose$1(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables$1.accent.softBlue;
 });
-var SidebarItem$6 = styled(NavLink)(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1.text.medium, colorVariables$1["default"].primary);
-var ContentWrapper$6 = styled.div(_templateObject3$X || (_templateObject3$X = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$e = styled.div(_templateObject4$O || (_templateObject4$O = _taggedTemplateLiteralLoose$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$7 = styled(NavLink)(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables$1.text.medium, colorVariables$1["default"].primary);
+var ContentWrapper$7 = styled.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$g = styled.div(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose$1(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables$1["default"].primary : colorVariables$1["default"].tertiary;
 });
-var Logo$6 = styled.div(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$6 = styled.span(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$7 = styled.div(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$7 = styled.span(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -16705,14 +18018,14 @@ var TextContainer$6 = styled.span(_templateObject6$l || (_templateObject6$l = _t
   var $isExpanded = _ref9.$isExpanded;
   return $isExpanded ? 'visible' : 'hidden';
 });
-var _templateObject$1n, _templateObject2$17, _templateObject3$Y, _templateObject4$P;
-var ContainerWrapper$6 = styled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteralLoose$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$1y, _templateObject2$1g, _templateObject3$14, _templateObject4$W;
+var ContainerWrapper$7 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose$1(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$6 = styled.div(_templateObject2$17 || (_templateObject2$17 = _taggedTemplateLiteralLoose$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$7 = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose$1(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -16723,42 +18036,42 @@ var CellContainer$6 = styled.div(_templateObject2$17 || (_templateObject2$17 = _
 }, function (props) {
   return props.$padding;
 });
-var MainText$6 = styled.div(_templateObject3$Y || (_templateObject3$Y = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$7 = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$6 = styled.div(_templateObject4$P || (_templateObject4$P = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$7 = styled.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose$1(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
 }, function (props) {
   return props.$stw;
 });
-var _templateObject$1o;
-var TableRowContainer$6 = styled$1.div(_templateObject$1o || (_templateObject$1o = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
-var _templateObject$1p, _templateObject2$18, _templateObject3$Z, _templateObject4$Q, _templateObject5$C;
-var TableContainer$6 = styled.div(_templateObject$1p || (_templateObject$1p = _taggedTemplateLiteralLoose$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1.brand.light);
-var TableHeader$6 = styled.div(_templateObject2$18 || (_templateObject2$18 = _taggedTemplateLiteralLoose$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$1z;
+var TableRowContainer$7 = styled$1.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$1A, _templateObject2$1h, _templateObject3$15, _templateObject4$X, _templateObject5$H;
+var TableContainer$7 = styled.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables$1.brand.light);
+var TableHeader$7 = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose$1(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$6 = styled.div(_templateObject3$Z || (_templateObject3$Z = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$6 = styled.div(_templateObject4$Q || (_templateObject4$Q = _taggedTemplateLiteralLoose$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$6 = styled.div(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1.border.extraLight);
-var _templateObject$1q, _templateObject2$19, _templateObject3$_, _templateObject4$R, _templateObject5$D;
-var Container$j = styled.div(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var TableContent$7 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$7 = styled.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$7 = styled.div(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose$1(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables$1.border.extraLight);
+var _templateObject$1B, _templateObject2$1i, _templateObject3$16, _templateObject4$Y, _templateObject5$I;
+var Container$l = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$6 = styled.div(_templateObject2$19 || (_templateObject2$19 = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1.border.light, function (_ref2) {
+var FirstContainer$7 = styled.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables$1.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$6 = styled.div(_templateObject3$_ || (_templateObject3$_ = _taggedTemplateLiteralLoose$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$7 = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose$1(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -16771,18 +18084,18 @@ var TabContainer$6 = styled.div(_templateObject3$_ || (_templateObject3$_ = _tag
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$6 = styled.div(_templateObject4$R || (_templateObject4$R = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$7 = styled.div(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables$1["default"].primary);
-var DetailsFirstContainer$6 = styled.div(_templateObject5$D || (_templateObject5$D = _taggedTemplateLiteralLoose$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$7 = styled.div(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose$1(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables$1["default"].primary : colorVariables$1.text.medium;
 });
 
-var _templateObject$1r, _templateObject2$1a, _templateObject3$$, _templateObject4$S, _templateObject5$E;
-var Label$e = styled.label(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+var _templateObject$1C, _templateObject2$1j, _templateObject3$17, _templateObject4$Z, _templateObject5$J;
+var Label$g = styled.label(_templateObject$1C || (_templateObject$1C = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
   var $size = _ref.$size;
   switch ($size) {
     case 'small':
@@ -16817,7 +18130,7 @@ var Label$e = styled.label(_templateObject$1r || (_templateObject$1r = _taggedTe
       return $titlecolor;
   }
 });
-var Input$7 = styled.input(_templateObject2$1a || (_templateObject2$1a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1.border.light, function (_ref3) {
+var Input$8 = styled.input(_templateObject2$1j || (_templateObject2$1j = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  pointer-events: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables$1.border.light, function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref4) {
@@ -16866,12 +18179,12 @@ var Input$7 = styled.input(_templateObject2$1a || (_templateObject2$1a = _tagged
       return $color;
   }
 }, colorVariables$1.text.light);
-var InputWrapper$8 = styled.div(_templateObject3$$ || (_templateObject3$$ = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
-var IconWrapper$f = styled.div(_templateObject4$S || (_templateObject4$S = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+var InputWrapper$9 = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$h = styled.div(_templateObject4$Z || (_templateObject4$Z = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
   var $disabled = _ref9.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var Asterisk$8 = styled.span(_templateObject5$E || (_templateObject5$E = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1["default"].error);
+var Asterisk$9 = styled.span(_templateObject5$J || (_templateObject5$J = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables$1["default"].error);
 var TextField = function TextField(_ref10) {
   var _ref10$type = _ref10.type,
     type = _ref10$type === void 0 ? 'text' : _ref10$type,
@@ -16926,11 +18239,11 @@ var TextField = function TextField(_ref10) {
     "$padding": padding
   }, (title || titleRightNode) && React.createElement(Container$3, {
     "$gap": titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.gap
-  }, title && React.createElement(Label$e, {
+  }, title && React.createElement(Label$g, {
     "$size": size,
     htmlFor: title,
     "$titlecolor": titlecolor
-  }, title, required && React.createElement(Asterisk$8, null, "*")), titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.node), React.createElement(InputWrapper$8, null, React.createElement(Input$7, {
+  }, title, required && React.createElement(Asterisk$9, null, "*")), titleRightNode === null || titleRightNode === void 0 ? void 0 : titleRightNode.node), React.createElement(InputWrapper$9, null, React.createElement(Input$8, {
     type: inputType || 'text',
     "$type": type,
     name: title,
@@ -16948,7 +18261,7 @@ var TextField = function TextField(_ref10) {
         if (onEnter) onEnter();
       }
     }
-  }), type === 'password' && inputValue && React.createElement(IconWrapper$f, {
+  }), type === 'password' && inputValue && React.createElement(IconWrapper$h, {
     "$disabled": disabled,
     onClick: function onClick() {
       if (!disabled) handleShowPassword();
@@ -16958,7 +18271,7 @@ var TextField = function TextField(_ref10) {
     size: iconsize,
     weight: iconweight,
     color: iconcolor || colorVariables$1["default"].primary
-  })), icon && type !== 'password' && React.createElement(IconWrapper$f, {
+  })), icon && type !== 'password' && React.createElement(IconWrapper$h, {
     onClick: handleToggleDisabled
   }, React.createElement(Icon$1, {
     icon: icon,
@@ -16968,12 +18281,12 @@ var TextField = function TextField(_ref10) {
   }))));
 };
 
-var _templateObject$1s, _templateObject2$1b, _templateObject3$10;
-var Container$k = styled.div(_templateObject$1s || (_templateObject$1s = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+var _templateObject$1D, _templateObject2$1k, _templateObject3$18;
+var Container$m = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
   var $padding = _ref.$padding;
   return $padding;
 });
-var Label$f = styled.label(_templateObject2$1b || (_templateObject2$1b = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+var Label$h = styled.label(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
   var $size = _ref2.$size;
   switch ($size) {
     case 'small':
@@ -16989,7 +18302,7 @@ var Label$f = styled.label(_templateObject2$1b || (_templateObject2$1b = _tagged
   var $titlecolor = _ref3.$titlecolor;
   return $titlecolor || colorVariables.text.dark;
 });
-var TextAreaComponent$7 = styled.textarea(_templateObject3$10 || (_templateObject3$10 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref4) {
+var TextAreaComponent$8 = styled.textarea(_templateObject3$18 || (_templateObject3$18 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref4) {
   var $disabled = _ref4.$disabled;
   return $disabled ? 'not-allowed' : 'auto';
 }, function (_ref5) {
@@ -17040,13 +18353,13 @@ var TextArea = function TextArea(_ref9) {
   useEffect(function () {
     setIsDisabled(disabled);
   }, [disabled]);
-  return React.createElement(Container$k, {
+  return React.createElement(Container$m, {
     "$padding": padding
-  }, title && React.createElement(Label$f, {
+  }, title && React.createElement(Label$h, {
     "$size": size,
     htmlFor: title,
     "$titlecolor": titlecolor
-  }, title, required && React.createElement(Asterisk$8, null, "*")), React.createElement(TextAreaComponent$7, {
+  }, title, required && React.createElement(Asterisk$9, null, "*")), React.createElement(TextAreaComponent$8, {
     name: title,
     id: title,
     value: inputValue,
@@ -17059,18 +18372,18 @@ var TextArea = function TextArea(_ref9) {
   }));
 };
 
-var _templateObject$1t, _templateObject2$1c, _templateObject3$11, _templateObject4$T, _templateObject5$F, _templateObject6$m, _templateObject7$a;
-var OptionContainer$8 = styled.div(_templateObject$1t || (_templateObject$1t = _taggedTemplateLiteralLoose(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables.text.white);
-var OptionItem$8 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+var _templateObject$1E, _templateObject2$1l, _templateObject3$19, _templateObject4$_, _templateObject5$K, _templateObject6$o, _templateObject7$b;
+var OptionContainer$9 = styled.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables.text.white);
+var OptionItem$9 = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
   var $optionSelected = _ref.$optionSelected;
   return $optionSelected ? colorVariables.text.white : colorVariables.text.medium;
 }, function (_ref2) {
   var $optionSelected = _ref2.$optionSelected;
   return $optionSelected ? colorVariables["default"].primary : colorVariables.text.white;
 }, colorVariables.hover.primary, colorVariables.text.white);
-var TotalOptionsHeader$7 = styled.div(_templateObject3$11 || (_templateObject3$11 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables.text.white, colorVariables.text.light, colorVariables.text.light);
-var OptionLabel$8 = styled.label(_templateObject4$T || (_templateObject4$T = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
-var SearchContainer$a = styled.div(_templateObject5$F || (_templateObject5$F = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+var TotalOptionsHeader$8 = styled.div(_templateObject3$19 || (_templateObject3$19 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables.text.white, colorVariables.text.light, colorVariables.text.light);
+var OptionLabel$9 = styled.label(_templateObject4$_ || (_templateObject4$_ = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$b = styled.div(_templateObject5$K || (_templateObject5$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
   var $background = _ref3.$background;
   switch ($background) {
     case 'dark':
@@ -17099,7 +18412,7 @@ var SearchContainer$a = styled.div(_templateObject5$F || (_templateObject5$F = _
   var $borderRadius = _ref5.$borderRadius;
   return $borderRadius || '8px';
 });
-var SearchBar$a = styled.input(_templateObject6$m || (_templateObject6$m = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables["default"].tertiary, function (_ref6) {
+var SearchBar$b = styled.input(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables["default"].tertiary, function (_ref6) {
   var $inputColor = _ref6.$inputColor;
   switch ($inputColor) {
     case 'dark':
@@ -17144,7 +18457,7 @@ var SearchBar$a = styled.input(_templateObject6$m || (_templateObject6$m = _tagg
       return $placeholderColor;
   }
 });
-var OptionsWrapper$8 = styled.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables.text.white);
+var OptionsWrapper$9 = styled.div(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables.text.white);
 var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
   var options = _ref8.options,
     selectedOption = _ref8.selectedOption,
@@ -17193,7 +18506,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
     "$gap": '8px',
     "$width": '100%',
     "$position": 'relative'
-  }, searchBox && React.createElement(SearchContainer$a, {
+  }, searchBox && React.createElement(SearchContainer$b, {
     "$borderBottom": searchBoxBorder,
     "$background": isSearchBarEnabled ? colorVariables.text.white : colorVariables.accent.light,
     "$borderRadius": searchBoxBorderRadius,
@@ -17209,7 +18522,7 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
     onClick: function onClick() {
       return setIsSearchBarEnabled(true);
     }
-  }, React.createElement(SearchBar$a, {
+  }, React.createElement(SearchBar$b, {
     type: 'text',
     placeholder: placeholder,
     value: internalSearchQuery,
@@ -17226,18 +18539,18 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
       setInternalSearchQuery('');
       setSearchQuery('');
     }
-  }), isSearchBarEnabled && React.createElement(OptionContainer$8, null, options.length > 0 ? React.createElement(Container, {
+  }), isSearchBarEnabled && React.createElement(OptionContainer$9, null, options.length > 0 ? React.createElement(Container, {
     "$flexDirection": 'column',
     "$overflow": 'auto'
-  }, React.createElement(TotalOptionsHeader$7, null, React.createElement(Span, {
+  }, React.createElement(TotalOptionsHeader$8, null, React.createElement(Span, {
     "$fontSize": '12px',
     "$fontWeight": '400',
     "$color": colorVariables.text.light
-  }, t('Showing_results') + " (" + filteredArray.length + " of " + (options === null || options === void 0 ? void 0 : options.length) + ")")), React.createElement(OptionsWrapper$8, null, filteredArray.length > 0 ? filteredArray.map(function (option) {
-    return React.createElement(OptionItem$8, {
+  }, t('Showing_results') + " (" + filteredArray.length + " of " + (options === null || options === void 0 ? void 0 : options.length) + ")")), React.createElement(OptionsWrapper$9, null, filteredArray.length > 0 ? filteredArray.map(function (option) {
+    return React.createElement(OptionItem$9, {
       key: option.value,
       "$optionSelected": option.value === selectedOption
-    }, React.createElement(OptionLabel$8, {
+    }, React.createElement(OptionLabel$9, {
       htmlFor: option.value,
       onClick: function onClick() {
         setInternalSearchQuery(option.labelText);
@@ -17259,31 +18572,116 @@ var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
   }, NoOptionsText)))));
 };
 
-var _templateObject$1u, _templateObject2$1d, _templateObject3$12, _templateObject4$U;
-var spin$f = keyframes(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition$7 = function getDotPosition(index, size) {
+var _templateObject$1F, _templateObject2$1m;
+var StyledInput$2 = styled.input(_templateObject$1F || (_templateObject$1F = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  appearance: none;\n  border: ", ";\n  border-radius: 4px;\n  background-color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  transition: all 0.2s ease;\n  font-size: ", "; // for em units\n\n  &:checked::after {\n    content: '';\n    position: absolute;\n    top: ", ";\n    right: ", ";\n    width: ", ";\n    height: ", ";\n    border: solid ", ";\n    border-width: 0 0.2em 0.2em 0;\n    transform: rotate(45deg);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), function (_ref) {
+  var $checkboxSize = _ref.$checkboxSize;
+  return $checkboxSize + "px";
+}, function (_ref2) {
+  var $checkboxSize = _ref2.$checkboxSize;
+  return $checkboxSize + "px";
+}, function (_ref3) {
+  var $checked = _ref3.$checked,
+    $borderSize = _ref3.$borderSize;
+  return $checked ? $borderSize + "px solid " + colorVariables$1["default"].primary : $borderSize + "px solid " + colorVariables$1.border.extraBold;
+}, function (_ref4) {
+  var $checked = _ref4.$checked;
+  return $checked ? colorVariables$1["default"].primary : colorVariables$1.text.white;
+}, function (_ref5) {
+  var $checkboxSize = _ref5.$checkboxSize;
+  return $checkboxSize / 1.4 + "px";
+}, function (_ref6) {
+  var $checkboxSize = _ref6.$checkboxSize;
+  return "calc(100% - " + $checkboxSize / 1.4 + "px)";
+}, function (_ref7) {
+  var $checkboxSize = _ref7.$checkboxSize;
+  return "calc(100% - " + $checkboxSize / 1.8 + "px)";
+}, function (_ref8) {
+  var $checkboxSize = _ref8.$checkboxSize;
+  return $checkboxSize / 5 + "px";
+}, function (_ref9) {
+  var $checkboxSize = _ref9.$checkboxSize;
+  return $checkboxSize / 2.4 + "px";
+}, colorVariables$1.text.white);
+var LabelSpan = styled(Span$1)(_templateObject2$1m || (_templateObject2$1m = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  line-height: 1;\n  user-select: none;\n"])));
+var CheckBox = function CheckBox(_ref10) {
+  var label = _ref10.label,
+    _ref10$labelSide = _ref10.labelSide,
+    labelSide = _ref10$labelSide === void 0 ? 'right' : _ref10$labelSide,
+    _ref10$checkboxSize = _ref10.checkboxSize,
+    checkboxSize = _ref10$checkboxSize === void 0 ? 11 : _ref10$checkboxSize,
+    checked = _ref10.checked,
+    _ref10$gap = _ref10.gap,
+    gap = _ref10$gap === void 0 ? '8px' : _ref10$gap,
+    _onChange = _ref10.onChange,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    _ref10$fontSize = _ref10.fontSize,
+    fontSize = _ref10$fontSize === void 0 ? '14px' : _ref10$fontSize,
+    _ref10$fontWeight = _ref10.fontWeight,
+    fontWeight = _ref10$fontWeight === void 0 ? '500' : _ref10$fontWeight,
+    _ref10$color = _ref10.color,
+    color = _ref10$color === void 0 ? colorVariables$1.text.medium : _ref10$color,
+    _ref10$borderSize = _ref10.borderSize,
+    borderSize = _ref10$borderSize === void 0 ? 1 : _ref10$borderSize;
+  var safeId = useId();
+  return React.createElement(Container$3, {
+    "$gap": gap,
+    "$cursor": disabled ? 'not-allowed' : 'pointer',
+    "$flexDirection": labelSide === 'right' ? 'row' : 'row-reverse',
+    "$alignItems": 'center',
+    "$justifyContent": 'flex-start'
+  }, React.createElement("label", {
+    htmlFor: safeId,
+    style: {
+      height: checkboxSize,
+      display: 'flex'
+    }
+  }, React.createElement(StyledInput$2, {
+    type: 'checkbox',
+    id: safeId,
+    "$checkboxSize": checkboxSize,
+    checked: checked,
+    "$checked": checked,
+    onChange: function onChange(e) {
+      return _onChange(e.target.checked);
+    },
+    disabled: disabled,
+    "$borderSize": borderSize
+  })), label && React.createElement(LabelSpan, {
+    "$fontSize": fontSize,
+    "$color": color,
+    "$fontWeight": fontWeight,
+    onClick: function onClick() {
+      if (!disabled) _onChange(!checked);
+    }
+  }, label));
+};
+
+var _templateObject$1G, _templateObject2$1n, _templateObject3$1a, _templateObject4$$;
+var spin$h = keyframes(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$8 = function getDotPosition(index, size) {
   var angle = index * 360 / 8;
   var radius = size / 2.5;
   var x = radius * Math.cos(angle * Math.PI / 180);
   var y = radius * Math.sin(angle * Math.PI / 180);
   return "translate(" + x + "px, " + y + "px)";
 };
-var SpinnerContainer$7 = styled.div(_templateObject2$1d || (_templateObject2$1d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+var SpinnerContainer$8 = styled.div(_templateObject2$1n || (_templateObject2$1n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
   var $size = _ref2.$size;
   return $size;
 });
-var Dot$7 = styled.div.attrs(function (_ref3) {
+var Dot$8 = styled.div.attrs(function (_ref3) {
   var $index = _ref3.$index,
     $size = _ref3.$size;
   return {
     style: {
-      transform: getDotPosition$7($index, $size)
+      transform: getDotPosition$8($index, $size)
     }
   };
-})(_templateObject3$12 || (_templateObject3$12 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
+})(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
   var $dotSize = _ref4.$dotSize;
   return $dotSize;
 }, function (_ref5) {
@@ -17292,7 +18690,7 @@ var Dot$7 = styled.div.attrs(function (_ref3) {
 }, function (_ref6) {
   var $color = _ref6.$color;
   return $color;
-}, spin$f, function (_ref7) {
+}, spin$h, function (_ref7) {
   var $speed = _ref7.$speed;
   return $speed;
 }, function (_ref8) {
@@ -17300,7 +18698,7 @@ var Dot$7 = styled.div.attrs(function (_ref3) {
     $speed = _ref8.$speed;
   return $index * $speed / 8;
 });
-var SpinnerWrapper$7 = styled.div(_templateObject4$U || (_templateObject4$U = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var SpinnerWrapper$8 = styled.div(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
 var sizeMap = {
   small: {
     size: 32
@@ -17324,13 +18722,13 @@ var CircularLoader = function CircularLoader(_ref9) {
     text = _ref9.text,
     customSize = _ref9.customSize;
   var spinnerSize = customSize != null ? customSize : sizeMap[size].size;
-  return React.createElement(SpinnerWrapper$7, null, React.createElement(SpinnerContainer$7, {
+  return React.createElement(SpinnerWrapper$8, null, React.createElement(SpinnerContainer$8, {
     "$size": spinnerSize,
     "aria-label": "Loading animation"
   }, Array.from({
     length: 8
   }).map(function (_, i) {
-    return React.createElement(Dot$7, {
+    return React.createElement(Dot$8, {
       key: i,
       "$index": i,
       "$size": spinnerSize,
@@ -17341,9 +18739,9 @@ var CircularLoader = function CircularLoader(_ref9) {
   })), text && React.createElement(React.Fragment, null, text));
 };
 
-var _templateObject$1v, _templateObject2$1e;
-var spin$g = keyframes(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner$8 = styled.div(_templateObject2$1e || (_templateObject2$1e = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+var _templateObject$1H, _templateObject2$1o;
+var spin$i = keyframes(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$9 = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
   var $size = _ref.$size;
   return $size;
 }, function (_ref2) {
@@ -17352,7 +18750,7 @@ var Spinner$8 = styled.div(_templateObject2$1e || (_templateObject2$1e = _tagged
 }, function (_ref3) {
   var $color = _ref3.$color;
   return $color;
-}, spin$g);
+}, spin$i);
 var Loader = function Loader(_ref4) {
   var title = _ref4.title,
     _ref4$size = _ref4.size,
@@ -17368,7 +18766,7 @@ var Loader = function Loader(_ref4) {
     "$height": '100%',
     "$flexDirection": 'column',
     "$gap": '12px'
-  }, React.createElement(Container, null, React.createElement(Spinner$8, {
+  }, React.createElement(Container, null, React.createElement(Spinner$9, {
     "$size": size,
     "$color": color
   })), title && React.createElement(Container, {
@@ -17384,8 +18782,8 @@ var Loader = function Loader(_ref4) {
   }, title))));
 };
 
-var _templateObject$1w;
-var PageInput$7 = styled.input(_templateObject$1w || (_templateObject$1w = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables.accent.extraLight, colorVariables.border.light, colorVariables.text.dark);
+var _templateObject$1I;
+var PageInput$8 = styled.input(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables.accent.extraLight, colorVariables.border.light, colorVariables.text.dark);
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
     currentPage = _ref.currentPage,
@@ -17443,7 +18841,7 @@ var Pagination = function Pagination(_ref) {
   }, React.createElement(Container, {
     "$gap": '4px',
     "$alignItems": 'center'
-  }, React.createElement(PageInput$7, {
+  }, React.createElement(PageInput$8, {
     type: 'number',
     value: inputPage,
     onChange: handleInputChange,
@@ -17569,22 +18967,22 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var _templateObject$1x, _templateObject2$1f, _templateObject3$13, _templateObject4$V, _templateObject5$G, _templateObject6$n;
-var SidebarContainer$7 = styled.div(_templateObject$1x || (_templateObject$1x = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+var _templateObject$1J, _templateObject2$1p, _templateObject3$1b, _templateObject4$10, _templateObject5$L, _templateObject6$p;
+var SidebarContainer$8 = styled.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
   var $isExpanded = _ref.$isExpanded;
   return $isExpanded ? '225px' : '68px';
 }, function (_ref2) {
   var $background = _ref2.$background;
   return $background ? $background : colorVariables.accent.softBlue;
 });
-var SidebarItem$7 = styled(NavLink)(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables.text.medium, colorVariables["default"].primary);
-var ContentWrapper$7 = styled.div(_templateObject3$13 || (_templateObject3$13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
-var IconWrapper$g = styled.div(_templateObject4$V || (_templateObject4$V = _taggedTemplateLiteralLoose(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+var SidebarItem$8 = styled(NavLink)(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables.text.medium, colorVariables["default"].primary);
+var ContentWrapper$8 = styled.div(_templateObject3$1b || (_templateObject3$1b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$i = styled.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? colorVariables["default"].primary : colorVariables["default"].tertiary;
 });
-var Logo$7 = styled.div(_templateObject5$G || (_templateObject5$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
-var TextContainer$7 = styled.span(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+var Logo$8 = styled.div(_templateObject5$L || (_templateObject5$L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-width: max-content;\n  height: 32px;\n  align-items: center;\n  justify-content: start;\n  gap: 10px;\n"])));
+var TextContainer$8 = styled.span(_templateObject6$p || (_templateObject6$p = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
   var $padding = _ref4.$padding;
   return $padding;
 }, function (_ref5) {
@@ -17621,7 +19019,7 @@ var Sidebar = function Sidebar(_ref10) {
     return parts.length > 0 ? "/" + parts[0] + "/" : '/';
   };
   var topLevelPath = getTopLevelPathWithSlash(location.pathname) || getTopLevelPath(location.pathname);
-  return React.createElement(SidebarContainer$7, {
+  return React.createElement(SidebarContainer$8, {
     "$background": background,
     "$isExpanded": isExpanded,
     onMouseEnter: function onMouseEnter() {
@@ -17630,24 +19028,24 @@ var Sidebar = function Sidebar(_ref10) {
     onMouseLeave: function onMouseLeave() {
       return setIsExpanded(false);
     }
-  }, logo && React.createElement(Logo$7, null, React.createElement(Icon, {
+  }, logo && React.createElement(Logo$8, null, React.createElement(Icon, {
     icon: logo.icon
-  }), React.createElement(TextContainer$7, {
+  }), React.createElement(TextContainer$8, {
     "$isExpanded": isExpanded,
     "$fontWeight": "700"
-  }, logo.name)), React.createElement(ContentWrapper$7, null, content.map(function (item) {
+  }, logo.name)), React.createElement(ContentWrapper$8, null, content.map(function (item) {
     var isActive = item.url.includes(topLevelPath);
-    return React.createElement(SidebarItem$7, {
+    return React.createElement(SidebarItem$8, {
       to: item.url,
       key: item.id
-    }, React.createElement(IconWrapper$g, {
+    }, React.createElement(IconWrapper$i, {
       "$selected": isActive
     }, React.createElement(Icon, {
       icon: item.icon,
       size: 20,
       weight: item.iconWeight,
       color: isActive ? colorVariables.text.white : colorVariables.text.medium
-    })), React.createElement(TextContainer$7, {
+    })), React.createElement(TextContainer$8, {
       "$isExpanded": isExpanded,
       "$fontSize": "14px",
       "$padding": '0px 10px 0px 0px',
@@ -17656,14 +19054,14 @@ var Sidebar = function Sidebar(_ref10) {
   })), ProfileContent);
 };
 
-var _templateObject$1y, _templateObject2$1g, _templateObject3$14, _templateObject4$W;
-var ContainerWrapper$7 = styled.div(_templateObject$1y || (_templateObject$1y = _taggedTemplateLiteralLoose(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
+var _templateObject$1K, _templateObject2$1q, _templateObject3$1c, _templateObject4$11;
+var ContainerWrapper$8 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n  height: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  min-height: ", ";\n  word-break: break-word;\n"])), function (props) {
   return props.$width || 'auto';
 }, function (_ref) {
   var $minHeight = _ref.$minHeight;
   return $minHeight;
 });
-var CellContainer$7 = styled.div(_templateObject2$1g || (_templateObject2$1g = _taggedTemplateLiteralLoose(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
+var CellContainer$8 = styled.div(_templateObject2$1q || (_templateObject2$1q = _taggedTemplateLiteralLoose(["\n  align-items:", ";\n  justify-content: center;\n  width: ", ";\n  min-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  padding: ", ";\n  gap: 4px;\n  height: 100%\n"])), function (props) {
   return props.$align;
 }, function (props) {
   return props.$width || 'auto';
@@ -17674,14 +19072,14 @@ var CellContainer$7 = styled.div(_templateObject2$1g || (_templateObject2$1g = _
 }, function (props) {
   return props.$padding;
 });
-var MainText$7 = styled.div(_templateObject3$14 || (_templateObject3$14 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$8 = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$mtc;
 }, function (props) {
   return props.$mtfs;
 }, function (props) {
   return props.$mtw;
 });
-var SubText$7 = styled.div(_templateObject4$W || (_templateObject4$W = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$8 = styled.div(_templateObject4$11 || (_templateObject4$11 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
@@ -17710,31 +19108,31 @@ var TableCell = function TableCell(_ref2) {
     CustomFunction = _ref2.CustomFunction,
     padding = _ref2.padding,
     minHeight = _ref2.minHeight;
-  return React.createElement(ContainerWrapper$7, {
+  return React.createElement(ContainerWrapper$8, {
     "$width": width,
     "$minHeight": minHeight
-  }, CustomFunction ? React.createElement(CellContainer$7, {
+  }, CustomFunction ? React.createElement(CellContainer$8, {
     "$align": alignment,
     "$width": width,
     "$minWidth": minWidth
-  }, CustomFunction) : React.createElement(CellContainer$7, {
+  }, CustomFunction) : React.createElement(CellContainer$8, {
     "$align": alignment,
     "$width": width,
     "$minWidth": minWidth,
     "$padding": padding
-  }, React.createElement(MainText$7, {
+  }, React.createElement(MainText$8, {
     "$mtc": maintextcolor,
     "$mtfs": maintextfontsize,
     "$mtw": maintextweight
-  }, maintext), subtext && React.createElement(SubText$7, {
+  }, maintext), subtext && React.createElement(SubText$8, {
     "$stc": subtextcolor,
     "$stfs": subtextfontsize,
     "$stw": subtextweight
   }, subtext)));
 };
 
-var _templateObject$1z;
-var TableRowContainer$7 = styled$1.div(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
+var _templateObject$1L;
+var TableRowContainer$8 = styled$1.div(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  background: inherit;\n  align-items:center;\n  padding: 16px 12px;\n  width: 100%;\n"])));
 var TableRow = function TableRow(_ref) {
   var rowconfig = _ref.rowconfig,
     tableheaderconfig = _ref.tableheaderconfig;
@@ -17743,7 +19141,7 @@ var TableRow = function TableRow(_ref) {
   };
   return React.createElement(Container, null, rowconfig.map(function (data, Index) {
     var _rowconfig$Index;
-    return React.createElement(TableRowContainer$7, {
+    return React.createElement(TableRowContainer$8, {
       key: Index
     }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
       "$padding": '0px 16px 0px 0px',
@@ -17777,16 +19175,16 @@ var TableRow = function TableRow(_ref) {
   }));
 };
 
-var _templateObject$1A, _templateObject2$1h, _templateObject3$15, _templateObject4$X, _templateObject5$H;
-var TableContainer$7 = styled.div(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables.brand.light);
-var TableHeader$7 = styled.div(_templateObject2$1h || (_templateObject2$1h = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+var _templateObject$1M, _templateObject2$1r, _templateObject3$1d, _templateObject4$12, _templateObject5$M;
+var TableContainer$8 = styled.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables.brand.light);
+var TableHeader$8 = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
   return props.$hbcolor || 'transparent';
 }, function (props) {
   return props.$tcolor || 'white';
 });
-var TableContent$7 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$7 = styled.div(_templateObject4$X || (_templateObject4$X = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
-var Divider$7 = styled.div(_templateObject5$H || (_templateObject5$H = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables.border.extraLight);
+var TableContent$8 = styled.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$8 = styled.div(_templateObject4$12 || (_templateObject4$12 = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider$8 = styled.div(_templateObject5$M || (_templateObject5$M = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables.border.extraLight);
 var Table = function Table(_ref) {
   var tableObject = _ref.tableObject,
     _ref$filter = _ref.filter,
@@ -17836,7 +19234,7 @@ var Table = function Table(_ref) {
   useEffect(function () {
     setIsAllSelected(false);
   }, [rowconfig]);
-  return React.createElement(TableContainer$7, null, React.createElement(TableContent$7, null, React.createElement(TableHeader$7, {
+  return React.createElement(TableContainer$8, null, React.createElement(TableContent$8, null, React.createElement(TableHeader$8, {
     "$hbcolor": tableheaderconfig.headercolor,
     "$tcolor": tableheaderconfig.textcolor
   }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
@@ -17866,7 +19264,7 @@ var Table = function Table(_ref) {
     "$alignItems": 'center',
     "$padding": '24px 24px',
     "$justifyContent": 'center'
-  }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData$7, null, Object.entries(roleGroups).map(function (_ref2) {
+  }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData$8, null, Object.entries(roleGroups).map(function (_ref2) {
     var role = _ref2[0],
       rows = _ref2[1];
     return React.createElement(React.Fragment, {
@@ -17896,28 +19294,28 @@ var Table = function Table(_ref) {
       }, React.createElement(TableRow, {
         rowconfig: [row],
         tableheaderconfig: tableheaderconfig
-      }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider$7, null));
+      }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider$8, null));
     }));
-  })) : React.createElement(TableData$7, null, filteredRows.map(function (row, index) {
+  })) : React.createElement(TableData$8, null, filteredRows.map(function (row, index) {
     return React.createElement(React.Fragment, {
       key: index
     }, React.createElement(TableRow, {
       rowconfig: [row],
       tableheaderconfig: tableheaderconfig
-    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider$7, null));
+    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider$8, null));
   }))));
 };
 
-var _templateObject$1B, _templateObject2$1i, _templateObject3$16, _templateObject4$Y, _templateObject5$I;
-var Container$l = styled.div(_templateObject$1B || (_templateObject$1B = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var _templateObject$1N, _templateObject2$1s, _templateObject3$1e, _templateObject4$13, _templateObject5$N;
+var Container$n = styled.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  gap: 24px;\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $border = _ref.$border;
   return $border;
 });
-var FirstContainer$7 = styled.div(_templateObject2$1i || (_templateObject2$1i = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables.border.light, function (_ref2) {
+var FirstContainer$8 = styled.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables.border.light, function (_ref2) {
   var $headerPadding = _ref2.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$7 = styled.div(_templateObject3$16 || (_templateObject3$16 = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
+var TabContainer$8 = styled.div(_templateObject3$1e || (_templateObject3$1e = _taggedTemplateLiteralLoose(["\n  width: auto;\n  display: flex;\n  align-items: center;\n  cursor: ", ";\n  opacity: ", ";\n  gap: 8px;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: ", ";\n  height: ", ";\n\n  svg {\n    cursor: ", ";\n  }\n\n"])), function (_ref3) {
   var $disabled = _ref3.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref4) {
@@ -17930,13 +19328,13 @@ var TabContainer$7 = styled.div(_templateObject3$16 || (_templateObject3$16 = _t
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$7 = styled.div(_templateObject4$Y || (_templateObject4$Y = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
+var TabItemContainer$8 = styled.div(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref7) {
   var $headerHeight = _ref7.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
   return props.$active ? 'block' : 'none';
 }, colorVariables["default"].primary);
-var DetailsFirstContainer$7 = styled.div(_templateObject5$I || (_templateObject5$I = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+var DetailsFirstContainer$8 = styled.div(_templateObject5$N || (_templateObject5$N = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
   return props.$active ? colorVariables["default"].primary : colorVariables.text.medium;
 });
 var Tabs = function Tabs(_ref8) {
@@ -17947,19 +19345,19 @@ var Tabs = function Tabs(_ref8) {
     headerPadding = _ref8.headerPadding,
     activeTab = _ref8.activeTab,
     border = _ref8.border;
-  return React.createElement(Container$l, {
+  return React.createElement(Container$n, {
     "$border": border
-  }, React.createElement(FirstContainer$7, {
+  }, React.createElement(FirstContainer$8, {
     "$headerPadding": headerPadding
   }, tabItems.map(function (tab, index) {
-    return React.createElement(TabContainer$7, {
+    return React.createElement(TabContainer$8, {
       key: index,
       onClick: function onClick() {
         if (!disabled && tab.onClick) tab.onClick();
       },
       "$disabled": disabled,
       "$headerHeight": headerHeight
-    }, React.createElement(TabItemContainer$7, {
+    }, React.createElement(TabItemContainer$8, {
       "$active": activeTab === tab.title,
       "$headerHeight": headerHeight
     }, tab.icon && React.createElement(Icon, {
@@ -17967,11 +19365,11 @@ var Tabs = function Tabs(_ref8) {
       icon: tab.icon,
       size: tab.iconSize,
       weight: tab.iconWeight
-    }), React.createElement(DetailsFirstContainer$7, {
+    }), React.createElement(DetailsFirstContainer$8, {
       "$active": activeTab === tab.title
     }, tab.title)));
   })), tabItems.map(function (tab, index) {
-    return activeTab === tab.title && React.createElement(Container$l, {
+    return activeTab === tab.title && React.createElement(Container$n, {
       key: index
     }, tab.content);
   }));
@@ -18012,5 +19410,5 @@ var InternalTabs = function InternalTabs(_ref) {
   }));
 };
 
-export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, CircularLoader, Container, DatePicker, DropdownMenu$1 as DropdownMenu, Icon, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Options, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tabs, TextArea, TextField, TextFieldWithDropdown, colorVariables, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, darkColorVariables, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCustomModal, useNotification };
+export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, CheckBox, CircularLoader, Container, DatePicker, DropdownMenu$1 as DropdownMenu, Icon, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Options, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tabs, TextArea, TextField, TextFieldWithDropdown, colorVariables, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, darkColorVariables, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCustomModal, useNotification };
 //# sourceMappingURL=index.modern.js.map