labsense-ui-kit 1.2.2 → 1.2.3

package/dist/index.modern.js

@@ -726,6 +726,49 @@ var Disk = function Disk(_ref) {
   }));
 };
 
+var DNS_1 = function DNS_1(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: '0 0 12 12',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("path", {
+    d: 'M4.97333 7.54984V4.45117L7.02667 7.54984V4.45117M7.92325 7.2013C8.11692 7.43376 8.34908 7.54984 8.69792 7.54984H9.16283C9.58867 7.54984 9.9375 7.2013 9.9375 6.77517C9.9375 6.34905 9.58896 6.00051 9.16283 6.00051H8.65912C8.23329 6.00051 7.88446 5.65196 7.88446 5.22584C7.88446 4.79971 8.233 4.45117 8.65912 4.45117H9.12404C9.47258 4.45117 9.70504 4.52846 9.89871 4.79971M2.0625 4.45117V7.54984H2.75958C3.49575 7.54984 4.11554 6.93005 4.11554 6.19417V5.80684C4.11554 5.07096 3.49575 4.45117 2.75987 4.45117H2.0625Z',
+    stroke: color,
+    strokeWidth: '0.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }), React.createElement("path", {
+    d: 'M10.2292 0.603516H1.77084C1.46142 0.603516 1.16467 0.726432 0.94588 0.945224C0.727088 1.16402 0.604172 1.46076 0.604172 1.77018V10.2285C0.604172 10.5379 0.727088 10.8347 0.94588 11.0535C1.16467 11.2723 1.46142 11.3952 1.77084 11.3952H10.2292C10.5386 11.3952 10.8353 11.2723 11.0541 11.0535C11.2729 10.8347 11.3958 10.5379 11.3958 10.2285V1.77018C11.3958 1.46076 11.2729 1.16402 11.0541 0.945224C10.8353 0.726432 10.5386 0.603516 10.2292 0.603516Z',
+    stroke: color,
+    strokeWidth: '0.5',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }));
+};
+
+var DNS_2 = function DNS_2(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: '0 0 8 12',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("path", {
+    d: "M7.5 10.5938H0.5C0.3775 10.5938 0.28125 10.4975 0.28125 10.375V5.125C0.28125 5.0025 0.3775 4.90625 0.5 4.90625H7.5C7.6225 4.90625 7.71875 5.0025 7.71875 5.125V10.375C7.71875 10.4975 7.6225 10.5938 7.5 10.5938ZM0.71875 10.1562H7.28125V5.34375H0.71875V10.1562ZM7.0625 5.34375H5.3125C5.19 5.34375 5.09375 5.2475 5.09375 5.125V3.8125C5.09375 3.52375 4.97563 3.24375 4.77437 3.03812C4.56875 2.8325 4.29313 2.71875 4 2.71875C3.70992 2.71875 3.43172 2.83398 3.2266 3.0391C3.02148 3.24422 2.90625 3.52242 2.90625 3.8125V5.125C2.90625 5.2475 2.81 5.34375 2.6875 5.34375H0.9375C0.815 5.34375 0.71875 5.2475 0.71875 5.125V3.8125C0.71875 2.00125 2.18875 0.53125 4 0.53125C4.875 0.53125 5.70187 0.8725 6.31875 1.49375C6.94 2.115 7.28125 2.9375 7.28125 3.8125V5.125C7.28125 5.2475 7.185 5.34375 7.0625 5.34375ZM5.53125 4.90625H6.84375V3.8125C6.84375 3.05125 6.54625 2.33812 6.0125 1.8C5.74882 1.53506 5.43513 1.32515 5.08965 1.18245C4.74417 1.03975 4.37379 0.967111 4 0.96875C2.43375 0.96875 1.15625 2.24625 1.15625 3.8125V4.90625H2.46875V3.8125C2.46875 2.96813 3.15563 2.28125 4 2.28125C4.41125 2.28125 4.79187 2.43875 5.08062 2.73187C5.365 3.01625 5.53125 3.41 5.53125 3.8125V4.90625ZM2.25 8.84375H1.8125C1.69 8.84375 1.59375 8.7475 1.59375 8.625V6.875C1.59375 6.7525 1.69 6.65625 1.8125 6.65625H2.25C2.61313 6.65625 2.90625 6.94938 2.90625 7.3125V8.1875C2.90625 8.55062 2.61313 8.84375 2.25 8.84375ZM2.03125 8.40625H2.25C2.3725 8.40625 2.46875 8.31 2.46875 8.1875V7.3125C2.46875 7.19 2.3725 7.09375 2.25 7.09375H2.03125V8.40625ZM4.25375 11.25C4.25375 11.1275 4.1575 11.0312 4.035 11.0312H3.965C3.8425 11.0312 3.74625 11.1275 3.74625 11.25C3.74625 11.3725 3.8425 11.4688 3.965 11.4688H4.035C4.1575 11.4688 4.25375 11.3725 4.25375 11.25ZM7.71875 11.25V10.375C7.71875 10.2525 7.6225 10.1562 7.5 10.1562H0.5C0.3775 10.1562 0.28125 10.2525 0.28125 10.375V11.25C0.28125 11.3725 0.3775 11.4688 0.5 11.4688H3.125C3.2475 11.4688 3.34375 11.3725 3.34375 11.25C3.34375 11.1275 3.2475 11.0312 3.125 11.0312H0.71875V10.5938H7.28125V11.0312H4.875C4.7525 11.0312 4.65625 11.1275 4.65625 11.25C4.65625 11.3725 4.7525 11.4688 4.875 11.4688H7.5C7.6225 11.4688 7.71875 11.3725 7.71875 11.25ZM4.49 8.83937C4.59063 8.8175 4.65625 8.73 4.65625 8.625V6.875C4.65625 6.7525 4.56 6.65625 4.4375 6.65625C4.315 6.65625 4.21875 6.7525 4.21875 6.875V7.6975L3.75937 6.77437C3.73811 6.72991 3.70202 6.69424 3.65731 6.67348C3.61261 6.65272 3.56207 6.64818 3.51438 6.66062C3.41375 6.6825 3.34375 6.77 3.34375 6.875V8.625C3.34375 8.7475 3.44 8.84375 3.5625 8.84375C3.685 8.84375 3.78125 8.7475 3.78125 8.625V7.8025L4.24062 8.72563C4.28 8.8 4.35437 8.84813 4.4375 8.84813C4.455 8.84813 4.4725 8.84813 4.49 8.84375V8.83937ZM6.40625 8.1875C6.40625 7.82438 6.11312 7.53125 5.75 7.53125C5.6275 7.53125 5.53125 7.435 5.53125 7.3125C5.53125 7.19 5.6275 7.09375 5.75 7.09375H6.1875C6.31 7.09375 6.40625 6.9975 6.40625 6.875C6.40625 6.7525 6.31 6.65625 6.1875 6.65625H5.75C5.38688 6.65625 5.09375 6.94938 5.09375 7.3125C5.09375 7.67562 5.38688 7.96875 5.75 7.96875C5.8725 7.96875 5.96875 8.065 5.96875 8.1875C5.96875 8.31 5.8725 8.40625 5.75 8.40625H5.3125C5.19 8.40625 5.09375 8.5025 5.09375 8.625C5.09375 8.7475 5.19 8.84375 5.3125 8.84375H5.75C6.11312 8.84375 6.40625 8.55062 6.40625 8.1875Z",
+    fill: color
+  }));
+};
+
 var DocumentBadge = function DocumentBadge(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -3640,6 +3683,8 @@ var IconSVGs = {
   DiagonalArrow: DiagonalArrow,
   Directory: Directory,
   Disk: Disk,
+  DNS_1: DNS_1,
+  DNS_2: DNS_2,
   DocumentBadge: DocumentBadge,
   DownArrow: DownArrow,
   Download: Download,
@@ -8513,132 +8558,3642 @@ var PageInput$1 = styled.input(_templateObject$l$1 || (_templateObject$l$1 = _ta
   var theme = _ref3.theme;
   return theme.text.dark;
 });
-var _templateObject$m$1, _templateObject2$i$1, _templateObject3$c$1, _templateObject4$9$1, _templateObject5$8$1;
-var SidebarContainer = styled.div(_templateObject$m$1 || (_templateObject$m$1 = _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 _taggedTemplateLiteralLoose$1$1(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+var _templateObject$m$1, _templateObject2$i$1;
+var ModalOverlay$1$1 = styled.div(_templateObject$m$1 || (_templateObject$m$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$i$1 || (_templateObject2$i$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: visible;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_1;
 }, function (_ref2) {
-  var $background = _ref2.$background,
-    theme = _ref2.theme;
-  return $background || theme.accent.softBlue;
+  var $maxWidth = _ref2.$maxWidth;
+  return $maxWidth ? $maxWidth : '400px';
 });
-var SidebarLink = styled(NavLink)(_templateObject2$i$1 || (_templateObject2$i$1 = _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  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.text.medium;
+var _templateObject$1$1$1, _templateObject2$1$1$1;
+var Container$4$1 = styled.div(_templateObject$1$1$1 || (_templateObject$1$1$1 = _taggedTemplateLiteralLoose$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  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  border-bottom-right-radius: ", ";\n  border-bottom-left-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-top: ", ";\n  border-bottom: ", ";\n  border-left: ", ";\n  transition: ", ";\n  box-shadow: ", ";\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 $flexDirection = _ref3.$flexDirection;
+  return $flexDirection;
 }, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme["default"].primary;
-});
-var IconWrapper$2$1 = styled.div(_templateObject3$c$1 || (_templateObject3$c$1 = _taggedTemplateLiteralLoose$1(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
-  var $selected = _ref5.$selected,
-    theme = _ref5.theme;
-  return $selected ? theme["default"].primary : theme["default"].tertiary;
-});
-var Logo = styled.div(_templateObject4$9$1 || (_templateObject4$9$1 = _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 = styled.span(_templateObject5$8$1 || (_templateObject5$8$1 = _taggedTemplateLiteralLoose$1(["\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 (_ref6) {
-  var $padding = _ref6.$padding;
-  return $padding;
+  var $justifyContent = _ref4.$justifyContent;
+  return $justifyContent;
+}, function (_ref5) {
+  var $alignItems = _ref5.$alignItems;
+  return $alignItems;
+}, function (_ref6) {
+  var $gap = _ref6.$gap;
+  return $gap;
 }, function (_ref7) {
-  var $fontSize = _ref7.$fontSize;
-  return $fontSize || '20px';
+  var $fontWeight = _ref7.$fontWeight;
+  return $fontWeight;
 }, function (_ref8) {
-  var $fontWeight = _ref8.$fontWeight;
-  return $fontWeight || '500';
+  var $height = _ref8.$height;
+  return $height;
 }, function (_ref9) {
-  var $color = _ref9.$color,
-    theme = _ref9.theme;
-  return $color || theme["default"].primary;
+  var $minHeight = _ref9.$minHeight;
+  return $minHeight;
 }, function (_ref10) {
-  var $isExpanded = _ref10.$isExpanded;
-  return $isExpanded ? 1 : 0;
+  var $maxHeight = _ref10.$maxHeight;
+  return $maxHeight;
 }, function (_ref11) {
-  var $isExpanded = _ref11.$isExpanded;
-  return $isExpanded ? 'visible' : 'hidden';
-});
-var _templateObject$n, _templateObject2$j, _templateObject3$d, _templateObject4$a;
-var ContainerWrapper = styled.div(_templateObject$n || (_templateObject$n = _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 = styled.div(_templateObject2$j || (_templateObject2$j = _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';
-}, function (props) {
-  return props.$minWidth;
-}, function (props) {
-  return props.$background || 'inherit';
-}, function (props) {
-  return props.$padding;
-});
-var MainText = styled.div(_templateObject3$d || (_templateObject3$d = _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 = styled.div(_templateObject4$a || (_templateObject4$a = _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$o;
-var TableRowContainer = styled$1.div(_templateObject$o || (_templateObject$o = _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$p, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$7$1;
-var TableContainer = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.brand.light;
-});
-var TableHeader = styled.div(_templateObject2$k || (_templateObject2$k = _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 (_ref2) {
-  var $hbcolor = _ref2.$hbcolor,
-    theme = _ref2.theme;
-  return $hbcolor || theme["default"].tertiary;
-}, function (_ref3) {
-  var $tcolor = _ref3.$tcolor,
-    theme = _ref3.theme;
-  return $tcolor || theme.text.white;
-});
-var TableContent = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
-  var $isLegends = _ref4.$isLegends;
-  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
-});
-var LegendDivider = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose$1(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.border.extraLight;
-}, function (_ref6) {
-  var $marginRight = _ref6.$marginRight;
-  return $marginRight != null ? $marginRight : '0px';
-});
-var Divider = styled.div(_templateObject6$7$1 || (_templateObject6$7$1 = _taggedTemplateLiteralLoose$1(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.border.extraLight;
-});
-var _templateObject$q, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8;
-var Container$4$1 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
-  var $overflow = _ref.$overflow;
+  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;
+}, 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 $borderTopLeftRadius = _ref19.$borderTopLeftRadius;
+  return $borderTopLeftRadius;
+}, function (_ref20) {
+  var $borderTopRightRadius = _ref20.$borderTopRightRadius;
+  return $borderTopRightRadius;
+}, function (_ref21) {
+  var $borderBottomRightRadius = _ref21.$borderBottomRightRadius;
+  return $borderBottomRightRadius;
+}, function (_ref22) {
+  var $borderBottomLeftRadius = _ref22.$borderBottomLeftRadius;
+  return $borderBottomLeftRadius;
+}, function (_ref23) {
+  var $cursor = _ref23.$cursor;
+  return $cursor;
+}, function (_ref24) {
+  var $fontSize = _ref24.$fontSize;
+  return $fontSize;
+}, function (_ref25) {
+  var $opacity = _ref25.$opacity;
+  return $opacity;
+}, function (_ref26) {
+  var $pointerEvents = _ref26.$pointerEvents;
+  return $pointerEvents;
+}, function (_ref27) {
+  var $position = _ref27.$position;
+  return $position;
+}, function (_ref28) {
+  var $top = _ref28.$top;
+  return $top;
+}, function (_ref29) {
+  var $bottom = _ref29.$bottom;
+  return $bottom;
+}, function (_ref30) {
+  var $left = _ref30.$left;
+  return $left;
+}, function (_ref31) {
+  var $right = _ref31.$right;
+  return $right;
+}, function (_ref32) {
+  var $textAlign = _ref32.$textAlign;
+  return $textAlign;
+}, function (_ref33) {
+  var $color = _ref33.$color;
+  return $color;
+}, function (_ref34) {
+  var $overflow = _ref34.$overflow;
   return $overflow || 'visible';
-}, function (_ref2) {
-  var $gap = _ref2.$gap;
-  return $gap;
-}, function (_ref3) {
-  var $border = _ref3.$border;
+}, function (_ref35) {
+  var $overflowY = _ref35.$overflowY;
+  return $overflowY;
+}, function (_ref36) {
+  var $zIndex = _ref36.$zIndex;
+  return $zIndex;
+}, function (_ref37) {
+  var $scrollbarWidth = _ref37.$scrollbarWidth;
+  return $scrollbarWidth;
+}, function (_ref38) {
+  var $border = _ref38.$border;
   return $border;
+}, function (_ref39) {
+  var $borderTop = _ref39.$borderTop;
+  return $borderTop;
+}, function (_ref40) {
+  var $borderBottom = _ref40.$borderBottom;
+  return $borderBottom;
+}, function (_ref41) {
+  var $borderLeft = _ref41.$borderLeft;
+  return $borderLeft;
+}, function (_ref42) {
+  var $transition = _ref42.$transition;
+  return $transition;
+}, function (_ref43) {
+  var $boxShadow = _ref43.$boxShadow;
+  return $boxShadow;
+}, function (_ref44) {
+  var $hoverBackground = _ref44.$hoverBackground;
+  return $hoverBackground;
+}, function (_ref45) {
+  var $hoverColor = _ref45.$hoverColor;
+  return $hoverColor;
 });
-var FirstContainer = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
-  var $bordeBottom = _ref4.$bordeBottom,
+var Span$1$1 = styled.span(_templateObject2$1$1$1 || (_templateObject2$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref46) {
+  var $fontFamily = _ref46.$fontFamily;
+  return $fontFamily ? $fontFamily : 'NotoSans, sans-serif';
+}, function (_ref47) {
+  var $fontWeight = _ref47.$fontWeight;
+  return $fontWeight ? $fontWeight : '500';
+}, function (_ref48) {
+  var $fontSize = _ref48.$fontSize;
+  return $fontSize ? $fontSize : '16px';
+}, function (_ref49) {
+  var $fontStyle = _ref49.$fontStyle;
+  return $fontStyle ? $fontStyle : 'normal';
+}, function (_ref50) {
+  var $color = _ref50.$color,
+    theme = _ref50.theme;
+  return $color ? $color : theme.text.medium;
+}, function (_ref51) {
+  var $lineHeight = _ref51.$lineHeight;
+  return $lineHeight ? $lineHeight : '100%';
+}, function (_ref52) {
+  var $textAlign = _ref52.$textAlign;
+  return $textAlign ? $textAlign : 'center';
+}, function (_ref53) {
+  var $minWidth = _ref53.$minWidth;
+  return $minWidth;
+}, function (_ref54) {
+  var $width = _ref54.$width;
+  return $width;
+}, function (_ref55) {
+  var $overflowWrap = _ref55.$overflowWrap;
+  return $overflowWrap;
+});
+var light$1$1 = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#14171A',
+    light: '#FFFFFF'
+  },
+  accent: {
+    light_1: '#E1E8ED',
+    light_2: '#F5F8FA',
+    light_3: '#F0F3F5',
+    light_4: '#ECF0F4',
+    light_5: '#F0F0F3',
+    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 dark$1$1 = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#E1E8ED',
+    light: '#1A1A1A'
+  },
+  accent: {
+    light_1: '#2A2E33',
+    light_2: '#1F2327',
+    light_3: '#0F1214',
+    light_4: '#101417',
+    light_5: '#0F0F0C',
+    softBlue: '#2C3E50',
+    extraSoftBlue: '#34495E',
+    boldTransparent: '#D3D3D380',
+    transparent: '#D3D3D34D',
+    lightTransparent: '#D3D3D323'
+  },
+  "default": {
+    primary: '#78B6F0',
+    secondary: '#4F4F4F',
+    tertiary: 'transparent',
+    error: '#EF5350',
+    success: '#66BB6A',
+    warning: '#FFB74D',
+    info: '#42A5F5'
+  },
+  disabled: {
+    primary: '#3B4A58',
+    secondary: '#3E3E3E',
+    error: '#5B1B1B',
+    success: '#1B3C1B',
+    warning: '#5A3C1B',
+    info: '#1A3C5A'
+  },
+  hover: {
+    primary: '#5CA6F0',
+    secondary: '#7A7A7A',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#1976D2'
+  },
+  border: {
+    extraBold: '#8899A6',
+    bold: '#5E5E5E',
+    medium: '#4A4A4A',
+    light: '#3A3A3A',
+    extraLight: '#2B2B2B'
+  },
+  text: {
+    dark: '#FFFFFF',
+    medium: '#AAB8C2',
+    light: '#8899A6',
+    white: '#14171A',
+    success: '#81C784',
+    error: '#E57373',
+    info: '#64B5F6',
+    warning: '#FFB74D'
+  },
+  badge: {
+    lavender: '#7B5FA1',
+    papayaWhip: '#A46A3E',
+    water: '#5CA6F0',
+    paleBlue: '#4BC9BC',
+    teaGreen: '#7FBF7F',
+    lightBlue: '#5DADE2'
+  }
+};
+var getCurrentTheme$1$1 = function getCurrentTheme() {
+  if (typeof document !== 'undefined') {
+    var isDarkClass = document.documentElement.classList.contains('dark');
+    return isDarkClass ? 'dark' : 'light';
+  }
+  return 'light';
+};
+var colorVariables$1$1 = new Proxy({}, {
+  get: function get(_, prop) {
+    var currentThemeName = getCurrentTheme$1$1();
+    var currentTheme = themes$1$1[currentThemeName];
+    return currentTheme[prop];
+  }
+});
+var themes$1$1 = {
+  light: light$1$1,
+  dark: dark$1$1
+};
+var _templateObject$2$1$1, _templateObject2$2$1$1, _templateObject3$c$1;
+var wrapperCss$1$1 = css(_templateObject$2$1$1 || (_templateObject$2$1$1 = _taggedTemplateLiteralLoose$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$2$1 = styled.div(_templateObject2$2$1$1 || (_templateObject2$2$1$1 = _taggedTemplateLiteralLoose$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);
+var IconWrapperForSVG$1$1 = styled.g(_templateObject3$c$1 || (_templateObject3$c$1 = _taggedTemplateLiteralLoose$1$1(["\n  ", ";\n"])), wrapperCss$1$1);
+var _templateObject$3$1$1, _templateObject2$3$1$1;
+var TooltipWrapper$2$1 = styled.div(_templateObject$3$1$1 || (_templateObject$3$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TooltipText$1$1 = styled.span(_templateObject2$3$1$1 || (_templateObject2$3$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  visibility: ", ";\n  opacity: ", ";\n  transition: opacity 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: ", ";\n  font-weight: ", ";\n  max-width: 300px;\n  width: max-content;\n  position: fixed;\n  z-index: 999;\n  pointer-events: none;\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,
+    theme = _ref3.theme;
+  return $bgColor || theme.brand.light;
+}, function (_ref4) {
+  var $color = _ref4.$color,
+    theme = _ref4.theme;
+  return $color != null ? $color : theme.text.medium;
+}, function (_ref5) {
+  var $border = _ref5.$border;
+  return $border != null ? $border : 'none';
+}, function (_ref6) {
+  var $fontSize = _ref6.$fontSize;
+  return $fontSize != null ? $fontSize : '12px';
+}, function (_ref7) {
+  var $fontWeight = _ref7.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '500';
+});
+var _templateObject$4$1$1, _templateObject2$4$1$1, _templateObject3$1$1$1, _templateObject4$9$1, _templateObject5$8$1, _templateObject6$7$1, _templateObject7$5$1, _templateObject8$4$1, _templateObject9$4$1, _templateObject10$4$1, _templateObject11$3$1, _templateObject12$2$1;
+var TooltipContainer$1$1 = styled.div(_templateObject$4$1$1 || (_templateObject$4$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  position: absolute;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s;\n  border-radius: ", ";\n  padding: 6px 8px;\n  border: ", ";\n  min-width: ", ";\n  min-width: ", ";\n  background-color: ", ";\n  gap: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 8px;\n    background-color: ", ";\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n    ", "\n  }\n"])), function (_ref) {
+  var $borderRadius = _ref.$borderRadius;
+  return $borderRadius != null ? $borderRadius : '4px';
+}, function (_ref2) {
+  var $border = _ref2.$border;
+  return $border;
+}, function (_ref3) {
+  var $minWidth = _ref3.$minWidth;
+  return $minWidth != null ? $minWidth : 'auto';
+}, function (_ref4) {
+  var $maxWidth = _ref4.$maxWidth;
+  return $maxWidth != null ? $maxWidth : 'auto';
+}, function (_ref5) {
+  var $background = _ref5.$background,
+    theme = _ref5.theme;
+  return $background != null ? $background : theme.accent.light_1;
+}, function (_ref6) {
+  var $gap = _ref6.$gap;
+  return $gap != null ? $gap : '16px';
+}, function (_ref7) {
+  var $tooltipPosition = _ref7.$tooltipPosition,
+    $iconSize = _ref7.$iconSize,
+    $tooltipTop = _ref7.$tooltipTop;
+  var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
+  var horizontal = $tooltipPosition.endsWith('Left') ? css(_templateObject2$4$1$1 || (_templateObject2$4$1$1 = _taggedTemplateLiteralLoose$1$1(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? css(_templateObject3$1$1$1 || (_templateObject3$1$1$1 = _taggedTemplateLiteralLoose$1$1(["left: 50%; transform: translateX(-50%);"]))) : css(_templateObject4$9$1 || (_templateObject4$9$1 = _taggedTemplateLiteralLoose$1$1(["right: calc(100% + 10px); transform: translateX(99%);"])));
+  return css(_templateObject5$8$1 || (_templateObject5$8$1 = _taggedTemplateLiteralLoose$1$1(["", " ", ";"])), vertical, horizontal);
+}, function (_ref8) {
+  var $background = _ref8.$background,
+    theme = _ref8.theme;
+  return $background != null ? $background : theme.accent.light_1;
+}, function (_ref9) {
+  var $tooltipPosition = _ref9.$tooltipPosition;
+  if ($tooltipPosition.startsWith('top')) {
+    return $tooltipPosition.endsWith('Left') ? css(_templateObject6$7$1 || (_templateObject6$7$1 = _taggedTemplateLiteralLoose$1$1(["top: 100%; right: 10px; transform: rotate(180deg);"]))) : $tooltipPosition.endsWith('Right') ? css(_templateObject7$5$1 || (_templateObject7$5$1 = _taggedTemplateLiteralLoose$1$1(["top: 100%; left: 10px; transform: rotate(180deg);"]))) : css(_templateObject8$4$1 || (_templateObject8$4$1 = _taggedTemplateLiteralLoose$1$1(["top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg);"])));
+  } else {
+    return $tooltipPosition.endsWith('Left') ? css(_templateObject9$4$1 || (_templateObject9$4$1 = _taggedTemplateLiteralLoose$1$1(["bottom: 100%; right: 10px;"]))) : $tooltipPosition.endsWith('Right') ? css(_templateObject10$4$1 || (_templateObject10$4$1 = _taggedTemplateLiteralLoose$1$1(["bottom: 100%; left: 10px;"]))) : css(_templateObject11$3$1 || (_templateObject11$3$1 = _taggedTemplateLiteralLoose$1$1(["bottom: 100%; left: 50%; transform: translateX(-50%);"])));
+  }
+});
+var TooltipWrapper$1$1$1 = styled.div(_templateObject12$2$1 || (_templateObject12$2$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover ", " {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), TooltipContainer$1$1);
+var _templateObject$5$1$1;
+var BreadCrum$1$1 = styled.span(_templateObject$5$1$1 || (_templateObject$5$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref.theme;
+  return $color ? $color : theme.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,
+    theme = _ref5.theme;
+  return $hover && !$disabled && theme["default"].primary;
+});
+var _templateObject$6$1$1;
+var fontFaces$1$1 = css(_templateObject$6$1$1 || (_templateObject$6$1$1 = _taggedTemplateLiteralLoose$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 = {
+  bold: 'NotoSans, sans-serif',
+  regular: 'NotoSans, sans-serif',
+  light: 'NotoSans, sans-serif'
+};
+var _templateObject$7$1$1, _templateObject2$5$1$1, _templateObject3$2$1$1, _templateObject4$1$1$1, _templateObject5$1$1$1, _templateObject6$1$1$1;
+var spin$3$1 = keyframes(_templateObject$7$1$1 || (_templateObject$7$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$2$1 = styled.div(_templateObject2$5$1$1 || (_templateObject2$5$1$1 = _taggedTemplateLiteralLoose$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$3$1);
+var LoaderWrapper$1$1 = styled.div(_templateObject3$2$1$1 || (_templateObject3$2$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject4$1$1$1 || (_templateObject4$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.button(_templateObject5$1$1$1 || (_templateObject5$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: ", ";\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 $buttonWidth = _ref12.$buttonWidth;
+  return $buttonWidth;
+}, function (_ref13) {
+  var $borderRadius = _ref13.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref14) {
+  var $size = _ref14.$size,
+    $padding = _ref14.$padding;
+  return $size === 'small' ? '8px 12.2px' : $size === 'medium' ? '10px 19px' : $size === 'large' ? '12px 24.5px' : $size === 'custom' ? $padding : '10px 16px';
+}, function (_ref15) {
+  var _$borderHover$match;
+  var $variant = _ref15.$variant,
+    $disabled = _ref15.$disabled,
+    $borderHover = _ref15.$borderHover,
+    $borderDefault = _ref15.$borderDefault,
+    $background = _ref15.$background,
+    $color = _ref15.$color,
+    $colorHover = _ref15.$colorHover,
+    theme = _ref15.theme;
+  switch ($variant) {
+    case 'primary':
+      return "\n          background: " + ($disabled ? theme.disabled.primary : theme["default"].primary) + ";\n          color: " + theme.text.white + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.primary : "1px solid " + theme["default"].primary) + ";\n          &:hover {\n            background: " + theme.hover.primary + ";\n            border: 1px solid " + theme.hover.primary + ";\n          }\n        ";
+    case 'secondary':
+      return "\n          background: " + ($disabled ? theme.disabled.secondary : theme["default"].secondary) + "; \n          color: " + theme.text.white + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.secondary : "1px solid " + theme["default"].secondary) + ";\n          &:hover{\n           background: " + theme.hover.secondary + ";\n           border: 1px solid " + theme.hover.secondary + ";\n          }\n        ";
+    case 'tertiary':
+      return "\n          background: " + theme["default"].tertiary + ";\n          color: " + ($disabled ? theme.disabled.primary : theme["default"].primary) + ";\n          border: " + ($borderDefault ? "" + $borderDefault : "1px solid " + theme["default"].tertiary) + ";\n          &:hover {\n            color: " + (!$disabled && $borderHover ? (_$borderHover$match = $borderHover.match(/#\w+/)) === null || _$borderHover$match === void 0 ? void 0 : _$borderHover$match[0] : theme.hover.primary) + ";\n            border: " + ($borderHover ? $borderHover : "1px solid " + theme.hover.primary) + ";\n          }\n        ";
+    case 'error':
+      return "\n          background: " + ($disabled ? theme.disabled.error : theme["default"].error) + "; \n          color: " + theme.text.white + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.error : "1px solid " + theme["default"].error) + ";\n          &:hover{\n           background: " + theme.hover.error + ";\n           border: 1px solid " + theme.hover.error + ";\n          }\n        ";
+    case 'outline-primary':
+      return "\n          background: " + theme["default"].tertiary + ";\n          color: " + ($disabled ? theme.disabled.primary : theme["default"].primary) + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.primary : "1px solid " + theme["default"].primary) + ";\n          &:hover{\n            border: 1px solid " + theme.hover.primary + ";\n            color: " + theme.text.white + ";\n            background: " + theme.hover.primary + ";\n          }\n        ";
+    case 'outline-secondary':
+      return "\n            background: " + theme["default"].tertiary + ";\n            color: " + ($disabled ? theme.disabled.secondary : theme["default"].secondary) + ";\n            border: " + ($disabled ? "1px solid " + theme.disabled.secondary : "1px solid " + theme["default"].secondary) + ";\n            &:hover{\n              border: 1px solid " + theme.hover.secondary + ";\n              color: " + theme.text.white + ";\n              background: " + theme.hover.secondary + ";\n            }\n        ";
+    case 'outline-error':
+      return "\n          background: " + theme["default"].tertiary + ";\n          color: " + ($disabled ? theme.disabled.error : theme["default"].error) + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.error : "1px solid " + theme["default"].error) + ";\n          &:hover{\n            border: 1px solid " + theme.hover.error + ";\n            color: " + theme.text.white + ";\n            background: " + theme.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 (_ref16) {
+  var color = _ref16.color;
+  return color;
+});
+var ButtonText$1$1 = styled.span(_templateObject6$1$1$1 || (_templateObject6$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref17) {
+  var $fontFamily = _ref17.$fontFamily;
+  return $fontFamily ? $fontFamily : GlobalFonts$1$1.bold;
+}, function (_ref18) {
+  var $size = _ref18.$size,
+    $fontSize = _ref18.$fontSize;
+  return $size === 'small' ? '14px' : $size === 'medium' ? '16px' : $size === 'large' ? '18px' : $size === 'custom' ? $fontSize : '16px';
+}, function (_ref19) {
+  var $fontWeight = _ref19.$fontWeight,
+    $size = _ref19.$size;
+  return $size === 'custom' && $fontWeight || '500';
+}, function (_ref20) {
+  var $size = _ref20.$size,
+    $fontSize = _ref20.$fontSize;
+  return $size === 'small' ? '14px' : $size === 'medium' ? '16px' : $size === 'large' ? '18px' : $size === 'custom' ? $fontSize : '16px';
+});
+var _templateObject$8$1$1;
+var InnerContent$1$1 = styled.div(_templateObject$8$1$1 || (_templateObject$8$1$1 = _taggedTemplateLiteralLoose$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$9$1$1, _templateObject2$6$1$1, _templateObject3$3$1$1, _templateObject4$2$1$1, _templateObject5$2$1$1, _templateObject6$2$1$1, _templateObject7$1$1$1, _templateObject8$1$1$1, _templateObject9$1$1$1, _templateObject10$1$1$1, _templateObject11$1$1$1, _templateObject12$1$1$1, _templateObject13$1$1, _templateObject14$1$1, _templateObject15$1$1, _templateObject16$1$1, _templateObject17$1$1, _templateObject18$1$1, _templateObject19$1$1, _templateObject20$1$1, _templateObject21$1$1;
+var DatePickerContainer$1$1 = styled.div(_templateObject$9$1$1 || (_templateObject$9$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var CalendarContainer$1$1 = styled.div(_templateObject2$6$1$1 || (_templateObject2$6$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  overflow: auto;\n  display: flex;\n  flex-direction: row;\n  background: ", ";\n  position: absolute;\n  border: ", ";\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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return "1px solid " + theme.border.medium;
+});
+var Calendar$1$1$1 = styled.div(_templateObject3$3$1$1 || (_templateObject3$3$1$1 = _taggedTemplateLiteralLoose$1$1([""])));
+var CalendarTime$1$1 = styled.div(_templateObject4$2$1$1 || (_templateObject4$2$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  border: ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 8px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return "1px solid " + theme.border.medium;
+});
+var StartDate$1$1 = styled.div(_templateObject5$2$1$1 || (_templateObject5$2$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding-bottom: 4px;\n"])));
+var SelectedStart$1$1 = styled.div(_templateObject6$2$1$1 || (_templateObject6$2$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 4px;\n  color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.text.medium;
+});
+var CurrentDate$1$1 = styled.p(_templateObject7$1$1$1 || (_templateObject7$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 12px;\n"])));
+var CurrentTime$1$1 = styled.div(_templateObject8$1$1$1 || (_templateObject8$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  color: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.text.medium;
+});
+var Selectedtime$1$1 = styled.div(_templateObject9$1$1$1 || (_templateObject9$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  color: ", ";\n  gap: 8px;\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.text.medium;
+});
+var Line$1$1 = styled.div(_templateObject10$1$1$1 || (_templateObject10$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  padding-top: 10px;\n  padding-bottom: 10px;\n"])));
+var Zones$1$1 = styled.div(_templateObject11$1$1$1 || (_templateObject11$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CalendarHeader$1$1 = styled.div(_templateObject12$1$1$1 || (_templateObject12$1$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n"])));
+var CalendarMonthYear$1$1 = styled.span(_templateObject13$1$1 || (_templateObject13$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.text.medium;
+});
+var CalendarContent$1$1 = styled.div(_templateObject14$1$1 || (_templateObject14$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 5px;\n  padding: 10px;\n"])));
+var Button$1$1 = styled.div(_templateObject15$1$1 || (_templateObject15$1$1 = _taggedTemplateLiteralLoose$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"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme["default"].secondary;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.text.white;
+}, function (_ref10) {
+  var $size = _ref10.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref11) {
+  var $size = _ref11.$size;
+  return $size ? $size + "px" : '30px';
+});
+var CalendarDates$1$1 = styled.div(_templateObject16$1$1 || (_templateObject16$1$1 = _taggedTemplateLiteralLoose$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 (_ref12) {
+  var $size = _ref12.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref13) {
+  var $size = _ref13.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref14) {
+  var $isFuture = _ref14.$isFuture,
+    $futureDateTime = _ref14.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
+}, function (_ref15) {
+  var $isFuture = _ref15.$isFuture,
+    $futureDateTime = _ref15.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 0.5 : 1;
+}, function (_ref16) {
+  var $selected = _ref16.$selected,
+    $inRange = _ref16.$inRange,
+    theme = _ref16.theme;
+  return $selected ? theme["default"].primary : $inRange ? theme["default"].primary : theme["default"].tertiary;
+}, function (_ref17) {
+  var $selected = _ref17.$selected,
+    $inRange = _ref17.$inRange,
+    theme = _ref17.theme;
+  return $selected ? theme.text.white : $inRange ? theme.text.white : theme.text.medium;
+}, function (_ref18) {
+  var $selected = _ref18.$selected,
+    $inRange = _ref18.$inRange,
+    $isFuture = _ref18.$isFuture,
+    $futureDateTime = _ref18.$futureDateTime,
+    theme = _ref18.theme;
+  return !$futureDateTime && $isFuture ? 'transparent' : $selected ? theme.disabled.primary : $inRange ? theme.disabled.primary : theme.disabled.primary;
+});
+var Year$1$1 = styled.div(_templateObject17$1$1 || (_templateObject17$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 12px;\n"])));
+var Month$1$1 = styled.div(_templateObject18$1$1 || (_templateObject18$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
+var InputWrapper$2$1 = styled.div(_templateObject19$1$1 || (_templateObject19$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  gap: 24px;\n"])));
+var TimeInputWrapper$1$1 = styled.div(_templateObject20$1$1 || (_templateObject20$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+var StyledInput$1$1 = styled.input(_templateObject21$1$1 || (_templateObject21$1$1 = _taggedTemplateLiteralLoose$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: ", ";\n  border: ", ";\n  color: ", ";\n"])), function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.text.white;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return "1px solid " + theme.border.extraBold;
+}, function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.text.dark;
+});
+var _templateObject$a$1$1, _templateObject2$7$1$1, _templateObject3$4$1$1, _templateObject4$3$1$1, _templateObject5$3$1$1, _templateObject6$3$1$1;
+var OptionContainer$2$1 = styled.div(_templateObject$a$1$1 || (_templateObject$a$1$1 = _taggedTemplateLiteralLoose$1$1([""])));
+var OptionItem$2$1 = styled.div(_templateObject2$7$1$1 || (_templateObject2$7$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  border-bottom: ", ";\n"])), function (_ref) {
+  var $optionBorder = _ref.$optionBorder,
+    $isborder = _ref.$isborder,
+    theme = _ref.theme;
+  return $isborder ? $optionBorder || "1px solid " + theme.border.extraLight : '';
+});
+var OptionLabel$2$1 = styled.label(_templateObject3$4$1$1 || (_templateObject3$4$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref2.theme;
+  switch ($optionColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $optionColor || theme.text.medium;
+  }
+});
+var SearchContainer$4$1 = styled.div(_templateObject4$3$1$1 || (_templateObject4$3$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref3.theme;
+  switch ($background) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["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$4$1 = styled.input(_templateObject5$3$1$1 || (_templateObject5$3$1$1 = _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: 14px;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme["default"].tertiary;
+}, function (_ref7) {
+  var $inputColor = _ref7.$inputColor,
+    theme = _ref7.theme;
+  switch ($inputColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref8) {
+  var $placeholderColor = _ref8.$placeholderColor,
+    theme = _ref8.theme;
+  switch ($placeholderColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var Text$1$1 = styled.span(_templateObject6$3$1$1 || (_templateObject6$3$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  word-break: break-word;\n"])));
+var _templateObject$b$1$1, _templateObject2$8$1$1, _templateObject3$5$1$1, _templateObject4$4$1$1, _templateObject5$4$1$1, _templateObject6$4$1$1, _templateObject7$2$1$1, _templateObject8$2$1$1, _templateObject9$2$1$1, _templateObject10$2$1$1, _templateObject11$2$1$1;
+var DropdownContainer$2$1 = styled.div(_templateObject$b$1$1 || (_templateObject$b$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject2$8$1$1 || (_templateObject2$8$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref8.theme;
+  return $isOpen ? "1px solid " + theme.text.dark : $border || "1px solid " + theme.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,
+    theme = _ref11.theme;
+  switch ($background) {
+    case 'dark':
+      return $disabled ? theme.disabled.secondary : theme.text.dark;
+    case 'medium':
+      return $disabled ? theme.disabled.secondary : theme.text.medium;
+    case 'light':
+      return $disabled ? theme.disabled.secondary : theme.text.light;
+    case 'white':
+      return $disabled ? theme.disabled.secondary : theme.text.white;
+    case 'warning':
+      return $disabled ? theme.disabled.secondary : theme["default"].warning;
+    case 'info':
+      return $disabled ? theme.disabled.secondary : theme["default"].info;
+    case 'success':
+      return $disabled ? theme.disabled.secondary : theme["default"].success;
+    case 'error':
+      return $disabled ? theme.disabled.secondary : theme["default"].error;
+    default:
+      return $disabled ? theme.disabled.secondary : $background;
+  }
+}, function (_ref12) {
+  var $color = _ref12.$color,
+    theme = _ref12.theme;
+  return $color || theme.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 = styled.div(_templateObject3$5$1$1 || (_templateObject3$5$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
+  var $titleWeight = _ref15.$titleWeight;
+  return $titleWeight != null ? $titleWeight : '500';
+}, function (_ref16) {
+  var $titleSize = _ref16.$titleSize,
+    $size = _ref16.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref17) {
+  var $titleSize = _ref17.$titleSize,
+    $size = _ref17.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref18) {
+  var $titleColor = _ref18.$titleColor,
+    theme = _ref18.theme;
+  switch ($titleColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $titleColor;
+  }
+});
+var Container$2$1$1 = styled.div(_templateObject4$4$1$1 || (_templateObject4$4$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n"])));
+var LabelText$2$1 = styled.div(_templateObject5$4$1$1 || (_templateObject5$4$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref19) {
+  var $labelStyle = _ref19.$labelStyle;
+  return $labelStyle;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.text.medium;
+});
+var DropdownMenu$2$1 = styled.div(_templateObject6$4$1$1 || (_templateObject6$4$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\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"])), function (_ref21) {
+  var theme = _ref21.theme;
+  return "1px solid " + theme.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,
+    theme = _ref24.theme;
+  return $menuBackground || theme.accent.light_2;
+});
+var SelectedOptionsWrapper$2$1 = styled.div(_templateObject7$2$1$1 || (_templateObject7$2$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
+var SelectedOptionDiv$2$1 = styled.div(_templateObject8$2$1$1 || (_templateObject8$2$1$1 = _taggedTemplateLiteralLoose$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 (_ref25) {
+  var $selectedOptionBackground = _ref25.$selectedOptionBackground,
+    $disabled = _ref25.$disabled,
+    theme = _ref25.theme;
+  switch ($selectedOptionBackground) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return $disabled ? theme.disabled.warning : theme["default"].warning;
+    case 'info':
+      return $disabled ? theme.disabled.info : theme["default"].info;
+    case 'success':
+      return $disabled ? theme.disabled.success : theme["default"].success;
+    case 'error':
+      return $disabled ? theme.disabled.error : theme["default"].error;
+    default:
+      return $selectedOptionBackground || theme.accent.light_2;
+  }
+}, function (_ref26) {
+  var $selectedOptionColor = _ref26.$selectedOptionColor,
+    theme = _ref26.theme;
+  switch ($selectedOptionColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $selectedOptionColor;
+  }
+});
+var RemoveIcon$2$1 = styled.div(_templateObject9$2$1$1 || (_templateObject9$2$1$1 = _taggedTemplateLiteralLoose$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 (_ref27) {
+  var $disabled = _ref27.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref28) {
+  var removeIconBackground = _ref28.removeIconBackground,
+    $type = _ref28.$type,
+    theme = _ref28.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
+}, function (_ref29) {
+  var $disabled = _ref29.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TextWrapper$1$1 = styled.div(_templateObject10$2$1$1 || (_templateObject10$2$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var Asterisk$2$1 = styled.span(_templateObject11$2$1$1 || (_templateObject11$2$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref30) {
+  var theme = _ref30.theme;
+  return theme["default"].error;
+});
+var _templateObject$c$1$1, _templateObject2$9$1$1, _templateObject3$6$1$1, _templateObject4$5$1$1, _templateObject5$5$1$1, _templateObject6$5$1$1, _templateObject7$3$1$1, _templateObject8$3$1$1, _templateObject9$3$1$1, _templateObject10$3$1$1;
+var TitleText$1$1$1 = styled.label(_templateObject$c$1$1 || (_templateObject$c$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  width: max-content;\n  white-space: nowrap;\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,
+    theme = _ref3.theme;
+  switch ($titlecolor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var DropdownContainer$1$1$1 = styled.div(_templateObject2$9$1$1 || (_templateObject2$9$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject3$6$1$1 || (_templateObject3$6$1$1 = _taggedTemplateLiteralLoose$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  transition: all 0.3s ease;\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,
+    $isOpen = _ref9.$isOpen,
+    theme = _ref9.theme;
+  return $isOpen ? "1px solid " + theme.text.dark : $border || "1px solid " + theme.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,
+    theme = _ref11.theme;
+  return $disabled ? theme.border.light : $background || theme.accent.light_2;
+}, 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 = styled.div(_templateObject4$5$1$1 || (_templateObject4$5$1$1 = _taggedTemplateLiteralLoose$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"])), function (_ref14) {
+  var $optionColor = _ref14.$optionColor,
+    $optionSelected = _ref14.$optionSelected,
+    theme = _ref14.theme;
+  return $optionSelected ? theme.text.white : $optionColor || theme.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,
+    theme = _ref17.theme;
+  return $optionSelected ? theme["default"].primary : $optionBackgroundColor || theme["default"].tertiary;
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.hover.primary;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.text.white;
+});
+var LabelText$1$1$1 = styled.div(_templateObject5$5$1$1 || (_templateObject5$5$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n"])), function (_ref20) {
+  var $size = _ref20.$size;
+  switch ($size) {
+    case 'small':
+      return '14px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref21) {
+  var $size = _ref21.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref22) {
+  var $fontStyle = _ref22.$fontStyle;
+  return $fontStyle || '';
+}, function (_ref23) {
+  var $color = _ref23.$color,
+    $disabled = _ref23.$disabled,
+    theme = _ref23.theme;
+  return $disabled ? theme.text.medium : $color || theme.text.medium;
+});
+var NoOptions$1$1 = styled(Span$1$1)(_templateObject6$5$1$1 || (_templateObject6$5$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject7$3$1$1 || (_templateObject7$3$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\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  z-index: 2;\n"])), function (_ref24) {
+  var theme = _ref24.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref25) {
+  var $optionsBorderRadius = _ref25.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
+}, function (_ref26) {
+  var $width = _ref26.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref27) {
+  var $menuBackground = _ref27.$menuBackground,
+    theme = _ref27.theme;
+  return $menuBackground || theme.accent.light_2;
+}, function (_ref28) {
+  var $top = _ref28.$top;
+  return $top && "top: " + $top + ";";
+}, function (_ref29) {
+  var $bottom = _ref29.$bottom;
+  return $bottom && "bottom: " + $bottom + ";";
+});
+var OptionsWrapper$2$1 = styled.div(_templateObject8$3$1$1 || (_templateObject8$3$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  max-height: 150px; \n  overflow-y: auto;\n  scrollbar-width: thin;\n  width: 100%;\n"])));
+var SearchContainer$1$1$1 = styled.div(_templateObject9$3$1$1 || (_templateObject9$3$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: ", ";\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 (_ref30) {
+  var $background = _ref30.$background,
+    theme = _ref30.theme;
+  return $background || theme.accent.light_2;
+}, function (_ref31) {
+  var $border = _ref31.$border;
+  return $border || 'none';
+}, function (_ref32) {
+  var theme = _ref32.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref33) {
+  var $borderRadius = _ref33.$borderRadius;
+  return $borderRadius || '8px 8px 0 0';
+});
+var SearchBar$1$1$1 = styled.input(_templateObject10$3$1$1 || (_templateObject10$3$1$1 = _taggedTemplateLiteralLoose$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 (_ref34) {
+  var $inputColor = _ref34.$inputColor,
+    theme = _ref34.theme;
+  return $inputColor || theme.text.medium;
+}, function (_ref35) {
+  var $placeholderColor = _ref35.$placeholderColor,
+    theme = _ref35.theme;
+  return $placeholderColor || theme.text.light;
+});
+var _templateObject$d$1$1, _templateObject2$a$1$1, _templateObject3$7$1$1;
+var SelectedOptionsWrapper$1$1$1 = styled.div(_templateObject$d$1$1 || (_templateObject$d$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
+var SelectedOptionDiv$1$1$1 = styled.div(_templateObject2$a$1$1 || (_templateObject2$a$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref.theme;
+  return $selectedOptionBackground || $type === 'remove' ? theme.disabled.error : theme.accent.softBlue;
+}, function (_ref2) {
+  var $selectedOptionColor = _ref2.$selectedOptionColor,
+    $type = _ref2.$type,
+    theme = _ref2.theme;
+  return $selectedOptionColor || $type === 'remove' ? theme["default"].error : theme.brand.primary;
+});
+var RemoveIcon$1$1$1 = styled.div(_templateObject3$7$1$1 || (_templateObject3$7$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref3.theme;
+  return $removeIconBackground || $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
+});
+var _templateObject$e$1$1, _templateObject2$b$1$1;
+var SearchContainer$2$1$1 = styled.div(_templateObject$e$1$1 || (_templateObject$e$1$1 = _taggedTemplateLiteralLoose$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  // cursor: ", ";\n  transition: all 0.3s ease;\n\n &:focus-within {\n    border: ", ";\n  }\n"])), function (_ref) {
+  var $background = _ref.$background,
+    theme = _ref.theme;
+  return $background || theme["default"].tertiary;
+}, function (_ref2) {
+  var $border = _ref2.$border,
+    theme = _ref2.theme;
+  return $border || "1px solid " + theme.border.light;
+}, function (_ref3) {
+  var $borderRadius = _ref3.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return "1px solid " + theme.text.dark;
+});
+var SearchBar$2$1$1 = styled.input(_templateObject2$b$1$1 || (_templateObject2$b$1$1 = _taggedTemplateLiteralLoose$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    line-height: 100%;\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme["default"].tertiary;
+}, function (_ref7) {
+  var $inputColor = _ref7.$inputColor,
+    theme = _ref7.theme;
+  return $inputColor || theme.text.medium;
+}, function (_ref8) {
+  var $placeholderColor = _ref8.$placeholderColor,
+    theme = _ref8.theme;
+  return $placeholderColor || theme.text.light;
+});
+var _templateObject$f$1$1, _templateObject2$c$1$1, _templateObject3$8$1$1, _templateObject4$6$1$1, _templateObject5$6$1$1;
+var Label$2$1 = styled.label(_templateObject$f$1$1 || (_templateObject$f$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: ", ";\n  position: relative;\n  white-space: nowrap;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+  var $fontWeight = _ref.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '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,
+    theme = _ref3.theme;
+  switch ($titlecolor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var Input$1$1 = styled.input(_templateObject2$c$1$1 || (_templateObject2$c$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  border: ", ";\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"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled,
+    $background = _ref6.$background,
+    theme = _ref6.theme;
+  return $disabled ? theme.disabled.secondary : $background;
+}, function (_ref7) {
+  var $color = _ref7.$color;
+  return $color;
+}, function (_ref8) {
+  var $disabled = _ref8.$disabled;
+  return $disabled ? 'none' : 'auto';
+}, function (_ref9) {
+  var $size = _ref9.$size,
+    $type = _ref9.$type;
+  switch ($size) {
+    case 'small':
+      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: " + ($type === 'password' ? '9.5px 38px 9.5px 12px' : '9.5px 12px') + ";\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          padding: " + ($type === 'password' ? '9px 38px 9px 14px' : '9px 14px') + ";\n        ";
+    default:
+      return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n        ";
+  }
+}, function (_ref10) {
+  var $color = _ref10.$color,
+    theme = _ref10.theme;
+  switch ($color) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $color;
+  }
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.text.light;
+});
+var InputWrapper$1$1$1 = styled.div(_templateObject3$8$1$1 || (_templateObject3$8$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$1$1$1 = styled.div(_templateObject4$6$1$1 || (_templateObject4$6$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref12) {
+  var $disabled = _ref12.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var Asterisk$1$1$1 = styled.span(_templateObject5$6$1$1 || (_templateObject5$6$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme["default"].error;
+});
+var _templateObject$g$1$1, _templateObject2$d$1$1, _templateObject3$9$1$1;
+var Container$3$1$1 = styled.div(_templateObject$g$1$1 || (_templateObject$g$1$1 = _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$1$1$1 = styled.label(_templateObject2$d$1$1 || (_templateObject2$d$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  cursor: auto;\n  font-weight: ", ";\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $fontWeight = _ref2.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '500';
+}, function (_ref3) {
+  var $size = _ref3.$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 (_ref4) {
+  var $titlecolor = _ref4.$titlecolor,
+    theme = _ref4.theme;
+  return $titlecolor || theme.text.dark;
+});
+var TextAreaComponent$1$1 = styled.textarea(_templateObject3$9$1$1 || (_templateObject3$9$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  border: ", ";\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"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled,
+    $background = _ref7.$background,
+    theme = _ref7.theme;
+  return $disabled ? theme.disabled.secondary : $background;
+}, function (_ref8) {
+  var $color = _ref8.$color;
+  return $color;
+}, function (_ref9) {
+  var $size = _ref9.$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 (_ref10) {
+  var $color = _ref10.$color,
+    theme = _ref10.theme;
+  return $color || theme.text.dark;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.text.light;
+});
+var _templateObject$h$1$1, _templateObject2$e$1$1, _templateObject3$a$1$1, _templateObject4$7$1$1, _templateObject5$7$1$1, _templateObject6$6$1$1, _templateObject7$4$1$1;
+var OptionContainer$1$1$1 = styled.div(_templateObject$h$1$1 || (_templateObject$h$1$1 = _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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.text.white;
+});
+var OptionItem$1$1$1 = styled.div(_templateObject2$e$1$1 || (_templateObject2$e$1$1 = _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 (_ref2) {
+  var $optionSelected = _ref2.$optionSelected,
+    theme = _ref2.theme;
+  return $optionSelected ? theme.text.white : theme.text.medium;
+}, function (_ref3) {
+  var $optionSelected = _ref3.$optionSelected,
+    theme = _ref3.theme;
+  return $optionSelected ? theme["default"].primary : theme.text.white;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.hover.primary;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.text.white;
+});
+var TotalOptionsHeader$1$1 = styled.div(_templateObject3$a$1$1 || (_templateObject3$a$1$1 = _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: ", ";\n  font-size:12px;\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.text.white;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.text.light;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return "1px solid " + theme.text.light;
+});
+var OptionLabel$1$1$1 = styled.label(_templateObject4$7$1$1 || (_templateObject4$7$1$1 = _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$3$1$1 = styled.div(_templateObject5$7$1$1 || (_templateObject5$7$1$1 = _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 (_ref9) {
+  var $background = _ref9.$background,
+    theme = _ref9.theme;
+  switch ($background) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $background;
+  }
+}, function (_ref10) {
+  var $borderBottom = _ref10.$borderBottom;
+  return $borderBottom || 'none';
+}, function (_ref11) {
+  var $borderRadius = _ref11.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$3$1$1 = styled.input(_templateObject6$6$1$1 || (_templateObject6$6$1$1 = _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\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme["default"].tertiary;
+}, function (_ref13) {
+  var $inputColor = _ref13.$inputColor,
+    theme = _ref13.theme;
+  switch ($inputColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref14) {
+  var $placeholderColor = _ref14.$placeholderColor,
+    theme = _ref14.theme;
+  switch ($placeholderColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var OptionsWrapper$1$1$1 = styled.div(_templateObject7$4$1$1 || (_templateObject7$4$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", ";\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.text.white;
+});
+var _templateObject$i$1$1, _templateObject2$f$1$1;
+var StyledCheckBox$1$1 = styled.input(_templateObject$i$1$1 || (_templateObject$i$1$1 = _taggedTemplateLiteralLoose$1$1(["\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: ", ";\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,
+    theme = _ref3.theme;
+  return $checked ? $borderSize + "px solid " + theme["default"].primary : $borderSize + "px solid " + theme.border.extraBold;
+}, function (_ref4) {
+  var $checked = _ref4.$checked,
+    theme = _ref4.theme;
+  return $checked ? theme["default"].primary : theme.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";
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return "solid " + theme.text.white;
+});
+var LabelSpan$1$1 = styled(Span$1$1)(_templateObject2$f$1$1 || (_templateObject2$f$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  font-weight: 500;\n  line-height: 1;\n  user-select: none;\n"])));
+var _templateObject$j$1$1, _templateObject2$g$1$1, _templateObject3$b$1$1, _templateObject4$8$1$1;
+var spin$1$1$1 = keyframes(_templateObject$j$1$1 || (_templateObject$j$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$1$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$1$1 = styled.div(_templateObject2$g$1$1 || (_templateObject2$g$1$1 = _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$1$1 = styled.div.attrs(function (_ref3) {
+  var $index = _ref3.$index,
+    $size = _ref3.$size;
+  return {
+    style: {
+      transform: getDotPosition$1$1($index, $size)
+    }
+  };
+})(_templateObject3$b$1$1 || (_templateObject3$b$1$1 = _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) {
+  var $dotSize = _ref5.$dotSize;
+  return $dotSize;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, spin$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$1$1 = styled.div(_templateObject4$8$1$1 || (_templateObject4$8$1$1 = _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$k$1$1, _templateObject2$h$1$1;
+var spin$2$1$1 = keyframes(_templateObject$k$1$1 || (_templateObject$k$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$1$1$1 = styled.div(_templateObject2$h$1$1 || (_templateObject2$h$1$1 = _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) {
+  var $size = _ref2.$size;
+  return $size;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+}, spin$2$1$1);
+var _templateObject$l$1$1;
+var PageInput$1$1 = styled.input(_templateObject$l$1$1 || (_templateObject$l$1$1 = _taggedTemplateLiteralLoose$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: ", ";\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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.text.dark;
+});
+function _taggedTemplateLiteralLoose$1$1$1(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+var _templateObject$m$1$1, _templateObject2$i$1$1;
+var ModalOverlay$1$1$1 = styled.div(_templateObject$m$1$1 || (_templateObject$m$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject2$i$1$1 || (_templateObject2$i$1$1 = _taggedTemplateLiteralLoose$1$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: visible;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_1;
+}, function (_ref2) {
+  var $maxWidth = _ref2.$maxWidth;
+  return $maxWidth ? $maxWidth : '400px';
+});
+var _templateObject$1$1$1$1, _templateObject2$1$1$1$1;
+var Container$4$1$1 = styled.div(_templateObject$1$1$1$1 || (_templateObject$1$1$1$1 = _taggedTemplateLiteralLoose$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  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  border-bottom-right-radius: ", ";\n  border-bottom-left-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-top: ", ";\n  border-bottom: ", ";\n  border-left: ", ";\n  transition: ", ";\n  box-shadow: ", ";\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 $flexDirection = _ref3.$flexDirection;
+  return $flexDirection;
+}, function (_ref4) {
+  var $justifyContent = _ref4.$justifyContent;
+  return $justifyContent;
+}, function (_ref5) {
+  var $alignItems = _ref5.$alignItems;
+  return $alignItems;
+}, function (_ref6) {
+  var $gap = _ref6.$gap;
+  return $gap;
+}, function (_ref7) {
+  var $fontWeight = _ref7.$fontWeight;
+  return $fontWeight;
+}, function (_ref8) {
+  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;
+}, 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 $borderTopLeftRadius = _ref19.$borderTopLeftRadius;
+  return $borderTopLeftRadius;
+}, function (_ref20) {
+  var $borderTopRightRadius = _ref20.$borderTopRightRadius;
+  return $borderTopRightRadius;
+}, function (_ref21) {
+  var $borderBottomRightRadius = _ref21.$borderBottomRightRadius;
+  return $borderBottomRightRadius;
+}, function (_ref22) {
+  var $borderBottomLeftRadius = _ref22.$borderBottomLeftRadius;
+  return $borderBottomLeftRadius;
+}, function (_ref23) {
+  var $cursor = _ref23.$cursor;
+  return $cursor;
+}, function (_ref24) {
+  var $fontSize = _ref24.$fontSize;
+  return $fontSize;
+}, function (_ref25) {
+  var $opacity = _ref25.$opacity;
+  return $opacity;
+}, function (_ref26) {
+  var $pointerEvents = _ref26.$pointerEvents;
+  return $pointerEvents;
+}, function (_ref27) {
+  var $position = _ref27.$position;
+  return $position;
+}, function (_ref28) {
+  var $top = _ref28.$top;
+  return $top;
+}, function (_ref29) {
+  var $bottom = _ref29.$bottom;
+  return $bottom;
+}, function (_ref30) {
+  var $left = _ref30.$left;
+  return $left;
+}, function (_ref31) {
+  var $right = _ref31.$right;
+  return $right;
+}, function (_ref32) {
+  var $textAlign = _ref32.$textAlign;
+  return $textAlign;
+}, function (_ref33) {
+  var $color = _ref33.$color;
+  return $color;
+}, function (_ref34) {
+  var $overflow = _ref34.$overflow;
+  return $overflow || 'visible';
+}, function (_ref35) {
+  var $overflowY = _ref35.$overflowY;
+  return $overflowY;
+}, function (_ref36) {
+  var $zIndex = _ref36.$zIndex;
+  return $zIndex;
+}, function (_ref37) {
+  var $scrollbarWidth = _ref37.$scrollbarWidth;
+  return $scrollbarWidth;
+}, function (_ref38) {
+  var $border = _ref38.$border;
+  return $border;
+}, function (_ref39) {
+  var $borderTop = _ref39.$borderTop;
+  return $borderTop;
+}, function (_ref40) {
+  var $borderBottom = _ref40.$borderBottom;
+  return $borderBottom;
+}, function (_ref41) {
+  var $borderLeft = _ref41.$borderLeft;
+  return $borderLeft;
+}, function (_ref42) {
+  var $transition = _ref42.$transition;
+  return $transition;
+}, function (_ref43) {
+  var $boxShadow = _ref43.$boxShadow;
+  return $boxShadow;
+}, function (_ref44) {
+  var $hoverBackground = _ref44.$hoverBackground;
+  return $hoverBackground;
+}, function (_ref45) {
+  var $hoverColor = _ref45.$hoverColor;
+  return $hoverColor;
+});
+var Span$1$1$1 = styled.span(_templateObject2$1$1$1$1 || (_templateObject2$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref46) {
+  var $fontFamily = _ref46.$fontFamily;
+  return $fontFamily ? $fontFamily : 'NotoSans, sans-serif';
+}, function (_ref47) {
+  var $fontWeight = _ref47.$fontWeight;
+  return $fontWeight ? $fontWeight : '500';
+}, function (_ref48) {
+  var $fontSize = _ref48.$fontSize;
+  return $fontSize ? $fontSize : '16px';
+}, function (_ref49) {
+  var $fontStyle = _ref49.$fontStyle;
+  return $fontStyle ? $fontStyle : 'normal';
+}, function (_ref50) {
+  var $color = _ref50.$color,
+    theme = _ref50.theme;
+  return $color ? $color : theme.text.medium;
+}, function (_ref51) {
+  var $lineHeight = _ref51.$lineHeight;
+  return $lineHeight ? $lineHeight : '100%';
+}, function (_ref52) {
+  var $textAlign = _ref52.$textAlign;
+  return $textAlign ? $textAlign : 'center';
+}, function (_ref53) {
+  var $minWidth = _ref53.$minWidth;
+  return $minWidth;
+}, function (_ref54) {
+  var $width = _ref54.$width;
+  return $width;
+}, function (_ref55) {
+  var $overflowWrap = _ref55.$overflowWrap;
+  return $overflowWrap;
+});
+var light$1$1$1 = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#14171A',
+    light: '#FFFFFF'
+  },
+  accent: {
+    light_1: '#E1E8ED',
+    light_2: '#F5F8FA',
+    light_3: '#F0F3F5',
+    light_4: '#ECF0F4',
+    light_5: '#F0F0F3',
+    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 dark$1$1$1 = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#E1E8ED',
+    light: '#1A1A1A'
+  },
+  accent: {
+    light_1: '#2A2E33',
+    light_2: '#1F2327',
+    light_3: '#0F1214',
+    light_4: '#101417',
+    light_5: '#0F0F0C',
+    softBlue: '#2C3E50',
+    extraSoftBlue: '#34495E',
+    boldTransparent: '#D3D3D380',
+    transparent: '#D3D3D34D',
+    lightTransparent: '#D3D3D323'
+  },
+  "default": {
+    primary: '#78B6F0',
+    secondary: '#4F4F4F',
+    tertiary: 'transparent',
+    error: '#EF5350',
+    success: '#66BB6A',
+    warning: '#FFB74D',
+    info: '#42A5F5'
+  },
+  disabled: {
+    primary: '#3B4A58',
+    secondary: '#3E3E3E',
+    error: '#5B1B1B',
+    success: '#1B3C1B',
+    warning: '#5A3C1B',
+    info: '#1A3C5A'
+  },
+  hover: {
+    primary: '#5CA6F0',
+    secondary: '#7A7A7A',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#1976D2'
+  },
+  border: {
+    extraBold: '#8899A6',
+    bold: '#5E5E5E',
+    medium: '#4A4A4A',
+    light: '#3A3A3A',
+    extraLight: '#2B2B2B'
+  },
+  text: {
+    dark: '#FFFFFF',
+    medium: '#AAB8C2',
+    light: '#8899A6',
+    white: '#14171A',
+    success: '#81C784',
+    error: '#E57373',
+    info: '#64B5F6',
+    warning: '#FFB74D'
+  },
+  badge: {
+    lavender: '#7B5FA1',
+    papayaWhip: '#A46A3E',
+    water: '#5CA6F0',
+    paleBlue: '#4BC9BC',
+    teaGreen: '#7FBF7F',
+    lightBlue: '#5DADE2'
+  }
+};
+var getCurrentTheme$1$1$1 = function getCurrentTheme() {
+  if (typeof document !== 'undefined') {
+    var isDarkClass = document.documentElement.classList.contains('dark');
+    return isDarkClass ? 'dark' : 'light';
+  }
+  return 'light';
+};
+var colorVariables$1$1$1 = new Proxy({}, {
+  get: function get(_, prop) {
+    var currentThemeName = getCurrentTheme$1$1$1();
+    var currentTheme = themes$1$1$1[currentThemeName];
+    return currentTheme[prop];
+  }
+});
+var themes$1$1$1 = {
+  light: light$1$1$1,
+  dark: dark$1$1$1
+};
+var _templateObject$2$1$1$1, _templateObject2$2$1$1$1, _templateObject3$c$1$1;
+var wrapperCss$1$1$1 = css(_templateObject$2$1$1$1 || (_templateObject$2$1$1$1 = _taggedTemplateLiteralLoose$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$2$1$1 = styled.div(_templateObject2$2$1$1$1 || (_templateObject2$2$1$1$1 = _taggedTemplateLiteralLoose$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);
+var IconWrapperForSVG$1$1$1 = styled.g(_templateObject3$c$1$1 || (_templateObject3$c$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  ", ";\n"])), wrapperCss$1$1$1);
+var _templateObject$3$1$1$1, _templateObject2$3$1$1$1;
+var TooltipWrapper$2$1$1 = styled.div(_templateObject$3$1$1$1 || (_templateObject$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TooltipText$1$1$1 = styled.span(_templateObject2$3$1$1$1 || (_templateObject2$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  visibility: ", ";\n  opacity: ", ";\n  transition: opacity 0.2s ease-in-out;\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 8px;\n  padding: 8px 16px;\n  font-size: ", ";\n  font-weight: ", ";\n  max-width: 300px;\n  width: max-content;\n  position: fixed;\n  z-index: 999;\n  pointer-events: none;\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,
+    theme = _ref3.theme;
+  return $bgColor || theme.brand.light;
+}, function (_ref4) {
+  var $color = _ref4.$color,
+    theme = _ref4.theme;
+  return $color != null ? $color : theme.text.medium;
+}, function (_ref5) {
+  var $border = _ref5.$border;
+  return $border != null ? $border : 'none';
+}, function (_ref6) {
+  var $fontSize = _ref6.$fontSize;
+  return $fontSize != null ? $fontSize : '12px';
+}, function (_ref7) {
+  var $fontWeight = _ref7.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '500';
+});
+var _templateObject$4$1$1$1, _templateObject2$4$1$1$1, _templateObject3$1$1$1$1, _templateObject4$9$1$1, _templateObject5$8$1$1, _templateObject6$7$1$1, _templateObject7$5$1$1, _templateObject8$4$1$1, _templateObject9$4$1$1, _templateObject10$4$1$1, _templateObject11$3$1$1, _templateObject12$2$1$1;
+var TooltipContainer$1$1$1 = styled.div(_templateObject$4$1$1$1 || (_templateObject$4$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  position: absolute;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s;\n  border-radius: ", ";\n  padding: 6px 8px;\n  border: ", ";\n  min-width: ", ";\n  min-width: ", ";\n  background-color: ", ";\n  gap: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 8px;\n    background-color: ", ";\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n    ", "\n  }\n"])), function (_ref) {
+  var $borderRadius = _ref.$borderRadius;
+  return $borderRadius != null ? $borderRadius : '4px';
+}, function (_ref2) {
+  var $border = _ref2.$border;
+  return $border;
+}, function (_ref3) {
+  var $minWidth = _ref3.$minWidth;
+  return $minWidth != null ? $minWidth : 'auto';
+}, function (_ref4) {
+  var $maxWidth = _ref4.$maxWidth;
+  return $maxWidth != null ? $maxWidth : 'auto';
+}, function (_ref5) {
+  var $background = _ref5.$background,
+    theme = _ref5.theme;
+  return $background != null ? $background : theme.accent.light_1;
+}, function (_ref6) {
+  var $gap = _ref6.$gap;
+  return $gap != null ? $gap : '16px';
+}, function (_ref7) {
+  var $tooltipPosition = _ref7.$tooltipPosition,
+    $iconSize = _ref7.$iconSize,
+    $tooltipTop = _ref7.$tooltipTop;
+  var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
+  var horizontal = $tooltipPosition.endsWith('Left') ? css(_templateObject2$4$1$1$1 || (_templateObject2$4$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? css(_templateObject3$1$1$1$1 || (_templateObject3$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["left: 50%; transform: translateX(-50%);"]))) : css(_templateObject4$9$1$1 || (_templateObject4$9$1$1 = _taggedTemplateLiteralLoose$1$1$1(["right: calc(100% + 10px); transform: translateX(99%);"])));
+  return css(_templateObject5$8$1$1 || (_templateObject5$8$1$1 = _taggedTemplateLiteralLoose$1$1$1(["", " ", ";"])), vertical, horizontal);
+}, function (_ref8) {
+  var $background = _ref8.$background,
+    theme = _ref8.theme;
+  return $background != null ? $background : theme.accent.light_1;
+}, function (_ref9) {
+  var $tooltipPosition = _ref9.$tooltipPosition;
+  if ($tooltipPosition.startsWith('top')) {
+    return $tooltipPosition.endsWith('Left') ? css(_templateObject6$7$1$1 || (_templateObject6$7$1$1 = _taggedTemplateLiteralLoose$1$1$1(["top: 100%; right: 10px; transform: rotate(180deg);"]))) : $tooltipPosition.endsWith('Right') ? css(_templateObject7$5$1$1 || (_templateObject7$5$1$1 = _taggedTemplateLiteralLoose$1$1$1(["top: 100%; left: 10px; transform: rotate(180deg);"]))) : css(_templateObject8$4$1$1 || (_templateObject8$4$1$1 = _taggedTemplateLiteralLoose$1$1$1(["top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg);"])));
+  } else {
+    return $tooltipPosition.endsWith('Left') ? css(_templateObject9$4$1$1 || (_templateObject9$4$1$1 = _taggedTemplateLiteralLoose$1$1$1(["bottom: 100%; right: 10px;"]))) : $tooltipPosition.endsWith('Right') ? css(_templateObject10$4$1$1 || (_templateObject10$4$1$1 = _taggedTemplateLiteralLoose$1$1$1(["bottom: 100%; left: 10px;"]))) : css(_templateObject11$3$1$1 || (_templateObject11$3$1$1 = _taggedTemplateLiteralLoose$1$1$1(["bottom: 100%; left: 50%; transform: translateX(-50%);"])));
+  }
+});
+var TooltipWrapper$1$1$1$1 = styled.div(_templateObject12$2$1$1 || (_templateObject12$2$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover ", " {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), TooltipContainer$1$1$1);
+var _templateObject$5$1$1$1;
+var BreadCrum$1$1$1 = styled.span(_templateObject$5$1$1$1 || (_templateObject$5$1$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref.theme;
+  return $color ? $color : theme.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,
+    theme = _ref5.theme;
+  return $hover && !$disabled && theme["default"].primary;
+});
+var _templateObject$6$1$1$1;
+var fontFaces$1$1$1 = css(_templateObject$6$1$1$1 || (_templateObject$6$1$1$1 = _taggedTemplateLiteralLoose$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 = {
+  bold: 'NotoSans, sans-serif',
+  regular: 'NotoSans, sans-serif',
+  light: 'NotoSans, sans-serif'
+};
+var _templateObject$7$1$1$1, _templateObject2$5$1$1$1, _templateObject3$2$1$1$1, _templateObject4$1$1$1$1, _templateObject5$1$1$1$1, _templateObject6$1$1$1$1;
+var spin$3$1$1 = keyframes(_templateObject$7$1$1$1 || (_templateObject$7$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$2$1$1 = styled.div(_templateObject2$5$1$1$1 || (_templateObject2$5$1$1$1 = _taggedTemplateLiteralLoose$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$3$1$1);
+var LoaderWrapper$1$1$1 = styled.div(_templateObject3$2$1$1$1 || (_templateObject3$2$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject4$1$1$1$1 || (_templateObject4$1$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.button(_templateObject5$1$1$1$1 || (_templateObject5$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: ", ";\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 $buttonWidth = _ref12.$buttonWidth;
+  return $buttonWidth;
+}, function (_ref13) {
+  var $borderRadius = _ref13.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref14) {
+  var $size = _ref14.$size,
+    $padding = _ref14.$padding;
+  return $size === 'small' ? '8px 12.2px' : $size === 'medium' ? '10px 19px' : $size === 'large' ? '12px 24.5px' : $size === 'custom' ? $padding : '10px 16px';
+}, function (_ref15) {
+  var _$borderHover$match;
+  var $variant = _ref15.$variant,
+    $disabled = _ref15.$disabled,
+    $borderHover = _ref15.$borderHover,
+    $borderDefault = _ref15.$borderDefault,
+    $background = _ref15.$background,
+    $color = _ref15.$color,
+    $colorHover = _ref15.$colorHover,
+    theme = _ref15.theme;
+  switch ($variant) {
+    case 'primary':
+      return "\n          background: " + ($disabled ? theme.disabled.primary : theme["default"].primary) + ";\n          color: " + theme.text.white + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.primary : "1px solid " + theme["default"].primary) + ";\n          &:hover {\n            background: " + theme.hover.primary + ";\n            border: 1px solid " + theme.hover.primary + ";\n          }\n        ";
+    case 'secondary':
+      return "\n          background: " + ($disabled ? theme.disabled.secondary : theme["default"].secondary) + "; \n          color: " + theme.text.white + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.secondary : "1px solid " + theme["default"].secondary) + ";\n          &:hover{\n           background: " + theme.hover.secondary + ";\n           border: 1px solid " + theme.hover.secondary + ";\n          }\n        ";
+    case 'tertiary':
+      return "\n          background: " + theme["default"].tertiary + ";\n          color: " + ($disabled ? theme.disabled.primary : theme["default"].primary) + ";\n          border: " + ($borderDefault ? "" + $borderDefault : "1px solid " + theme["default"].tertiary) + ";\n          &:hover {\n            color: " + (!$disabled && $borderHover ? (_$borderHover$match = $borderHover.match(/#\w+/)) === null || _$borderHover$match === void 0 ? void 0 : _$borderHover$match[0] : theme.hover.primary) + ";\n            border: " + ($borderHover ? $borderHover : "1px solid " + theme.hover.primary) + ";\n          }\n        ";
+    case 'error':
+      return "\n          background: " + ($disabled ? theme.disabled.error : theme["default"].error) + "; \n          color: " + theme.text.white + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.error : "1px solid " + theme["default"].error) + ";\n          &:hover{\n           background: " + theme.hover.error + ";\n           border: 1px solid " + theme.hover.error + ";\n          }\n        ";
+    case 'outline-primary':
+      return "\n          background: " + theme["default"].tertiary + ";\n          color: " + ($disabled ? theme.disabled.primary : theme["default"].primary) + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.primary : "1px solid " + theme["default"].primary) + ";\n          &:hover{\n            border: 1px solid " + theme.hover.primary + ";\n            color: " + theme.text.white + ";\n            background: " + theme.hover.primary + ";\n          }\n        ";
+    case 'outline-secondary':
+      return "\n            background: " + theme["default"].tertiary + ";\n            color: " + ($disabled ? theme.disabled.secondary : theme["default"].secondary) + ";\n            border: " + ($disabled ? "1px solid " + theme.disabled.secondary : "1px solid " + theme["default"].secondary) + ";\n            &:hover{\n              border: 1px solid " + theme.hover.secondary + ";\n              color: " + theme.text.white + ";\n              background: " + theme.hover.secondary + ";\n            }\n        ";
+    case 'outline-error':
+      return "\n          background: " + theme["default"].tertiary + ";\n          color: " + ($disabled ? theme.disabled.error : theme["default"].error) + ";\n          border: " + ($disabled ? "1px solid " + theme.disabled.error : "1px solid " + theme["default"].error) + ";\n          &:hover{\n            border: 1px solid " + theme.hover.error + ";\n            color: " + theme.text.white + ";\n            background: " + theme.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 (_ref16) {
+  var color = _ref16.color;
+  return color;
+});
+var ButtonText$1$1$1 = styled.span(_templateObject6$1$1$1$1 || (_templateObject6$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n"])), function (_ref17) {
+  var $fontFamily = _ref17.$fontFamily;
+  return $fontFamily ? $fontFamily : GlobalFonts$1$1$1.bold;
+}, function (_ref18) {
+  var $size = _ref18.$size,
+    $fontSize = _ref18.$fontSize;
+  return $size === 'small' ? '14px' : $size === 'medium' ? '16px' : $size === 'large' ? '18px' : $size === 'custom' ? $fontSize : '16px';
+}, function (_ref19) {
+  var $fontWeight = _ref19.$fontWeight,
+    $size = _ref19.$size;
+  return $size === 'custom' && $fontWeight || '500';
+}, function (_ref20) {
+  var $size = _ref20.$size,
+    $fontSize = _ref20.$fontSize;
+  return $size === 'small' ? '14px' : $size === 'medium' ? '16px' : $size === 'large' ? '18px' : $size === 'custom' ? $fontSize : '16px';
+});
+var _templateObject$8$1$1$1;
+var InnerContent$1$1$1 = styled.div(_templateObject$8$1$1$1 || (_templateObject$8$1$1$1 = _taggedTemplateLiteralLoose$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$9$1$1$1, _templateObject2$6$1$1$1, _templateObject3$3$1$1$1, _templateObject4$2$1$1$1, _templateObject5$2$1$1$1, _templateObject6$2$1$1$1, _templateObject7$1$1$1$1, _templateObject8$1$1$1$1, _templateObject9$1$1$1$1, _templateObject10$1$1$1$1, _templateObject11$1$1$1$1, _templateObject12$1$1$1$1, _templateObject13$1$1$1, _templateObject14$1$1$1, _templateObject15$1$1$1, _templateObject16$1$1$1, _templateObject17$1$1$1, _templateObject18$1$1$1, _templateObject19$1$1$1, _templateObject20$1$1$1, _templateObject21$1$1$1;
+var DatePickerContainer$1$1$1 = styled.div(_templateObject$9$1$1$1 || (_templateObject$9$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var CalendarContainer$1$1$1 = styled.div(_templateObject2$6$1$1$1 || (_templateObject2$6$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  overflow: auto;\n  display: flex;\n  flex-direction: row;\n  background: ", ";\n  position: absolute;\n  border: ", ";\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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return "1px solid " + theme.border.medium;
+});
+var Calendar$1$1$1$1 = styled.div(_templateObject3$3$1$1$1 || (_templateObject3$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1([""])));
+var CalendarTime$1$1$1 = styled.div(_templateObject4$2$1$1$1 || (_templateObject4$2$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  border: ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 8px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return "1px solid " + theme.border.medium;
+});
+var StartDate$1$1$1 = styled.div(_templateObject5$2$1$1$1 || (_templateObject5$2$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding-bottom: 4px;\n"])));
+var SelectedStart$1$1$1 = styled.div(_templateObject6$2$1$1$1 || (_templateObject6$2$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 4px;\n  color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.text.medium;
+});
+var CurrentDate$1$1$1 = styled.p(_templateObject7$1$1$1$1 || (_templateObject7$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 12px;\n"])));
+var CurrentTime$1$1$1 = styled.div(_templateObject8$1$1$1$1 || (_templateObject8$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  color: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.text.medium;
+});
+var Selectedtime$1$1$1 = styled.div(_templateObject9$1$1$1$1 || (_templateObject9$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  color: ", ";\n  gap: 8px;\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.text.medium;
+});
+var Line$1$1$1 = styled.div(_templateObject10$1$1$1$1 || (_templateObject10$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  padding-top: 10px;\n  padding-bottom: 10px;\n"])));
+var Zones$1$1$1 = styled.div(_templateObject11$1$1$1$1 || (_templateObject11$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CalendarHeader$1$1$1 = styled.div(_templateObject12$1$1$1$1 || (_templateObject12$1$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n"])));
+var CalendarMonthYear$1$1$1 = styled.span(_templateObject13$1$1$1 || (_templateObject13$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  justify-content: center;\n  align-items: center;\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.text.medium;
+});
+var CalendarContent$1$1$1 = styled.div(_templateObject14$1$1$1 || (_templateObject14$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject15$1$1$1 || (_templateObject15$1$1$1 = _taggedTemplateLiteralLoose$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"])), function (_ref8) {
+  var theme = _ref8.theme;
+  return theme["default"].secondary;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.text.white;
+}, function (_ref10) {
+  var $size = _ref10.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref11) {
+  var $size = _ref11.$size;
+  return $size ? $size + "px" : '30px';
+});
+var CalendarDates$1$1$1 = styled.div(_templateObject16$1$1$1 || (_templateObject16$1$1$1 = _taggedTemplateLiteralLoose$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 (_ref12) {
+  var $size = _ref12.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref13) {
+  var $size = _ref13.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref14) {
+  var $isFuture = _ref14.$isFuture,
+    $futureDateTime = _ref14.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
+}, function (_ref15) {
+  var $isFuture = _ref15.$isFuture,
+    $futureDateTime = _ref15.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 0.5 : 1;
+}, function (_ref16) {
+  var $selected = _ref16.$selected,
+    $inRange = _ref16.$inRange,
+    theme = _ref16.theme;
+  return $selected ? theme["default"].primary : $inRange ? theme["default"].primary : theme["default"].tertiary;
+}, function (_ref17) {
+  var $selected = _ref17.$selected,
+    $inRange = _ref17.$inRange,
+    theme = _ref17.theme;
+  return $selected ? theme.text.white : $inRange ? theme.text.white : theme.text.medium;
+}, function (_ref18) {
+  var $selected = _ref18.$selected,
+    $inRange = _ref18.$inRange,
+    $isFuture = _ref18.$isFuture,
+    $futureDateTime = _ref18.$futureDateTime,
+    theme = _ref18.theme;
+  return !$futureDateTime && $isFuture ? 'transparent' : $selected ? theme.disabled.primary : $inRange ? theme.disabled.primary : theme.disabled.primary;
+});
+var Year$1$1$1 = styled.div(_templateObject17$1$1$1 || (_templateObject17$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 12px;\n"])));
+var Month$1$1$1 = styled.div(_templateObject18$1$1$1 || (_templateObject18$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
+var InputWrapper$2$1$1 = styled.div(_templateObject19$1$1$1 || (_templateObject19$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  gap: 24px;\n"])));
+var TimeInputWrapper$1$1$1 = styled.div(_templateObject20$1$1$1 || (_templateObject20$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+var StyledInput$1$1$1 = styled.input(_templateObject21$1$1$1 || (_templateObject21$1$1$1 = _taggedTemplateLiteralLoose$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: ", ";\n  border: ", ";\n  color: ", ";\n"])), function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.text.white;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return "1px solid " + theme.border.extraBold;
+}, function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.text.dark;
+});
+var _templateObject$a$1$1$1, _templateObject2$7$1$1$1, _templateObject3$4$1$1$1, _templateObject4$3$1$1$1, _templateObject5$3$1$1$1, _templateObject6$3$1$1$1;
+var OptionContainer$2$1$1 = styled.div(_templateObject$a$1$1$1 || (_templateObject$a$1$1$1 = _taggedTemplateLiteralLoose$1$1$1([""])));
+var OptionItem$2$1$1 = styled.div(_templateObject2$7$1$1$1 || (_templateObject2$7$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  border-bottom: ", ";\n"])), function (_ref) {
+  var $optionBorder = _ref.$optionBorder,
+    $isborder = _ref.$isborder,
+    theme = _ref.theme;
+  return $isborder ? $optionBorder || "1px solid " + theme.border.extraLight : '';
+});
+var OptionLabel$2$1$1 = styled.label(_templateObject3$4$1$1$1 || (_templateObject3$4$1$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref2.theme;
+  switch ($optionColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $optionColor || theme.text.medium;
+  }
+});
+var SearchContainer$4$1$1 = styled.div(_templateObject4$3$1$1$1 || (_templateObject4$3$1$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref3.theme;
+  switch ($background) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["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$4$1$1 = styled.input(_templateObject5$3$1$1$1 || (_templateObject5$3$1$1$1 = _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: 14px;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme["default"].tertiary;
+}, function (_ref7) {
+  var $inputColor = _ref7.$inputColor,
+    theme = _ref7.theme;
+  switch ($inputColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref8) {
+  var $placeholderColor = _ref8.$placeholderColor,
+    theme = _ref8.theme;
+  switch ($placeholderColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var Text$1$1$1 = styled.span(_templateObject6$3$1$1$1 || (_templateObject6$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  word-break: break-word;\n"])));
+var _templateObject$b$1$1$1, _templateObject2$8$1$1$1, _templateObject3$5$1$1$1, _templateObject4$4$1$1$1, _templateObject5$4$1$1$1, _templateObject6$4$1$1$1, _templateObject7$2$1$1$1, _templateObject8$2$1$1$1, _templateObject9$2$1$1$1, _templateObject10$2$1$1$1, _templateObject11$2$1$1$1;
+var DropdownContainer$2$1$1 = styled.div(_templateObject$b$1$1$1 || (_templateObject$b$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject2$8$1$1$1 || (_templateObject2$8$1$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref8.theme;
+  return $isOpen ? "1px solid " + theme.text.dark : $border || "1px solid " + theme.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,
+    theme = _ref11.theme;
+  switch ($background) {
+    case 'dark':
+      return $disabled ? theme.disabled.secondary : theme.text.dark;
+    case 'medium':
+      return $disabled ? theme.disabled.secondary : theme.text.medium;
+    case 'light':
+      return $disabled ? theme.disabled.secondary : theme.text.light;
+    case 'white':
+      return $disabled ? theme.disabled.secondary : theme.text.white;
+    case 'warning':
+      return $disabled ? theme.disabled.secondary : theme["default"].warning;
+    case 'info':
+      return $disabled ? theme.disabled.secondary : theme["default"].info;
+    case 'success':
+      return $disabled ? theme.disabled.secondary : theme["default"].success;
+    case 'error':
+      return $disabled ? theme.disabled.secondary : theme["default"].error;
+    default:
+      return $disabled ? theme.disabled.secondary : $background;
+  }
+}, function (_ref12) {
+  var $color = _ref12.$color,
+    theme = _ref12.theme;
+  return $color || theme.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 = styled.div(_templateObject3$5$1$1$1 || (_templateObject3$5$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
+  var $titleWeight = _ref15.$titleWeight;
+  return $titleWeight != null ? $titleWeight : '500';
+}, function (_ref16) {
+  var $titleSize = _ref16.$titleSize,
+    $size = _ref16.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref17) {
+  var $titleSize = _ref17.$titleSize,
+    $size = _ref17.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref18) {
+  var $titleColor = _ref18.$titleColor,
+    theme = _ref18.theme;
+  switch ($titleColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $titleColor;
+  }
+});
+var Container$2$1$1$1 = styled.div(_templateObject4$4$1$1$1 || (_templateObject4$4$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n"])));
+var LabelText$2$1$1 = styled.div(_templateObject5$4$1$1$1 || (_templateObject5$4$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref19) {
+  var $labelStyle = _ref19.$labelStyle;
+  return $labelStyle;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.text.medium;
+});
+var DropdownMenu$2$1$1 = styled.div(_templateObject6$4$1$1$1 || (_templateObject6$4$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\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"])), function (_ref21) {
+  var theme = _ref21.theme;
+  return "1px solid " + theme.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,
+    theme = _ref24.theme;
+  return $menuBackground || theme.accent.light_2;
+});
+var SelectedOptionsWrapper$2$1$1 = styled.div(_templateObject7$2$1$1$1 || (_templateObject7$2$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
+var SelectedOptionDiv$2$1$1 = styled.div(_templateObject8$2$1$1$1 || (_templateObject8$2$1$1$1 = _taggedTemplateLiteralLoose$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 (_ref25) {
+  var $selectedOptionBackground = _ref25.$selectedOptionBackground,
+    $disabled = _ref25.$disabled,
+    theme = _ref25.theme;
+  switch ($selectedOptionBackground) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return $disabled ? theme.disabled.warning : theme["default"].warning;
+    case 'info':
+      return $disabled ? theme.disabled.info : theme["default"].info;
+    case 'success':
+      return $disabled ? theme.disabled.success : theme["default"].success;
+    case 'error':
+      return $disabled ? theme.disabled.error : theme["default"].error;
+    default:
+      return $selectedOptionBackground || theme.accent.light_2;
+  }
+}, function (_ref26) {
+  var $selectedOptionColor = _ref26.$selectedOptionColor,
+    theme = _ref26.theme;
+  switch ($selectedOptionColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $selectedOptionColor;
+  }
+});
+var RemoveIcon$2$1$1 = styled.div(_templateObject9$2$1$1$1 || (_templateObject9$2$1$1$1 = _taggedTemplateLiteralLoose$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 (_ref27) {
+  var $disabled = _ref27.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref28) {
+  var removeIconBackground = _ref28.removeIconBackground,
+    $type = _ref28.$type,
+    theme = _ref28.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
+}, function (_ref29) {
+  var $disabled = _ref29.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TextWrapper$1$1$1 = styled.div(_templateObject10$2$1$1$1 || (_templateObject10$2$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var Asterisk$2$1$1 = styled.span(_templateObject11$2$1$1$1 || (_templateObject11$2$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref30) {
+  var theme = _ref30.theme;
+  return theme["default"].error;
+});
+var _templateObject$c$1$1$1, _templateObject2$9$1$1$1, _templateObject3$6$1$1$1, _templateObject4$5$1$1$1, _templateObject5$5$1$1$1, _templateObject6$5$1$1$1, _templateObject7$3$1$1$1, _templateObject8$3$1$1$1, _templateObject9$3$1$1$1, _templateObject10$3$1$1$1;
+var TitleText$1$1$1$1 = styled.label(_templateObject$c$1$1$1 || (_templateObject$c$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  width: max-content;\n  white-space: nowrap;\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,
+    theme = _ref3.theme;
+  switch ($titlecolor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var DropdownContainer$1$1$1$1 = styled.div(_templateObject2$9$1$1$1 || (_templateObject2$9$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject3$6$1$1$1 || (_templateObject3$6$1$1$1 = _taggedTemplateLiteralLoose$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  transition: all 0.3s ease;\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,
+    $isOpen = _ref9.$isOpen,
+    theme = _ref9.theme;
+  return $isOpen ? "1px solid " + theme.text.dark : $border || "1px solid " + theme.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,
+    theme = _ref11.theme;
+  return $disabled ? theme.border.light : $background || theme.accent.light_2;
+}, 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 = styled.div(_templateObject4$5$1$1$1 || (_templateObject4$5$1$1$1 = _taggedTemplateLiteralLoose$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"])), function (_ref14) {
+  var $optionColor = _ref14.$optionColor,
+    $optionSelected = _ref14.$optionSelected,
+    theme = _ref14.theme;
+  return $optionSelected ? theme.text.white : $optionColor || theme.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,
+    theme = _ref17.theme;
+  return $optionSelected ? theme["default"].primary : $optionBackgroundColor || theme["default"].tertiary;
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.hover.primary;
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.text.white;
+});
+var LabelText$1$1$1$1 = styled.div(_templateObject5$5$1$1$1 || (_templateObject5$5$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n"])), function (_ref20) {
+  var $size = _ref20.$size;
+  switch ($size) {
+    case 'small':
+      return '14px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref21) {
+  var $size = _ref21.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref22) {
+  var $fontStyle = _ref22.$fontStyle;
+  return $fontStyle || '';
+}, function (_ref23) {
+  var $color = _ref23.$color,
+    $disabled = _ref23.$disabled,
+    theme = _ref23.theme;
+  return $disabled ? theme.text.medium : $color || theme.text.medium;
+});
+var NoOptions$1$1$1 = styled(Span$1$1$1)(_templateObject6$5$1$1$1 || (_templateObject6$5$1$1$1 = _taggedTemplateLiteralLoose$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 = styled.div(_templateObject7$3$1$1$1 || (_templateObject7$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\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  z-index: 2;\n"])), function (_ref24) {
+  var theme = _ref24.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref25) {
+  var $optionsBorderRadius = _ref25.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
+}, function (_ref26) {
+  var $width = _ref26.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref27) {
+  var $menuBackground = _ref27.$menuBackground,
+    theme = _ref27.theme;
+  return $menuBackground || theme.accent.light_2;
+}, function (_ref28) {
+  var $top = _ref28.$top;
+  return $top && "top: " + $top + ";";
+}, function (_ref29) {
+  var $bottom = _ref29.$bottom;
+  return $bottom && "bottom: " + $bottom + ";";
+});
+var OptionsWrapper$2$1$1 = styled.div(_templateObject8$3$1$1$1 || (_templateObject8$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  max-height: 150px; \n  overflow-y: auto;\n  scrollbar-width: thin;\n  width: 100%;\n"])));
+var SearchContainer$1$1$1$1 = styled.div(_templateObject9$3$1$1$1 || (_templateObject9$3$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: ", ";\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 (_ref30) {
+  var $background = _ref30.$background,
+    theme = _ref30.theme;
+  return $background || theme.accent.light_2;
+}, function (_ref31) {
+  var $border = _ref31.$border;
+  return $border || 'none';
+}, function (_ref32) {
+  var theme = _ref32.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref33) {
+  var $borderRadius = _ref33.$borderRadius;
+  return $borderRadius || '8px 8px 0 0';
+});
+var SearchBar$1$1$1$1 = styled.input(_templateObject10$3$1$1$1 || (_templateObject10$3$1$1$1 = _taggedTemplateLiteralLoose$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 (_ref34) {
+  var $inputColor = _ref34.$inputColor,
+    theme = _ref34.theme;
+  return $inputColor || theme.text.medium;
+}, function (_ref35) {
+  var $placeholderColor = _ref35.$placeholderColor,
+    theme = _ref35.theme;
+  return $placeholderColor || theme.text.light;
+});
+var _templateObject$d$1$1$1, _templateObject2$a$1$1$1, _templateObject3$7$1$1$1;
+var SelectedOptionsWrapper$1$1$1$1 = styled.div(_templateObject$d$1$1$1 || (_templateObject$d$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
+var SelectedOptionDiv$1$1$1$1 = styled.div(_templateObject2$a$1$1$1 || (_templateObject2$a$1$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref.theme;
+  return $selectedOptionBackground || $type === 'remove' ? theme.disabled.error : theme.accent.softBlue;
+}, function (_ref2) {
+  var $selectedOptionColor = _ref2.$selectedOptionColor,
+    $type = _ref2.$type,
+    theme = _ref2.theme;
+  return $selectedOptionColor || $type === 'remove' ? theme["default"].error : theme.brand.primary;
+});
+var RemoveIcon$1$1$1$1 = styled.div(_templateObject3$7$1$1$1 || (_templateObject3$7$1$1$1 = _taggedTemplateLiteralLoose$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,
+    theme = _ref3.theme;
+  return $removeIconBackground || $type === 'remove' ? '#5E5E5E24' : theme.disabled.primary;
+});
+var _templateObject$e$1$1$1, _templateObject2$b$1$1$1;
+var SearchContainer$2$1$1$1 = styled.div(_templateObject$e$1$1$1 || (_templateObject$e$1$1$1 = _taggedTemplateLiteralLoose$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  // cursor: ", ";\n  transition: all 0.3s ease;\n\n &:focus-within {\n    border: ", ";\n  }\n"])), function (_ref) {
+  var $background = _ref.$background,
+    theme = _ref.theme;
+  return $background || theme["default"].tertiary;
+}, function (_ref2) {
+  var $border = _ref2.$border,
+    theme = _ref2.theme;
+  return $border || "1px solid " + theme.border.light;
+}, function (_ref3) {
+  var $borderRadius = _ref3.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return "1px solid " + theme.text.dark;
+});
+var SearchBar$2$1$1$1 = styled.input(_templateObject2$b$1$1$1 || (_templateObject2$b$1$1$1 = _taggedTemplateLiteralLoose$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    line-height: 100%;\n  }\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme["default"].tertiary;
+}, function (_ref7) {
+  var $inputColor = _ref7.$inputColor,
+    theme = _ref7.theme;
+  return $inputColor || theme.text.medium;
+}, function (_ref8) {
+  var $placeholderColor = _ref8.$placeholderColor,
+    theme = _ref8.theme;
+  return $placeholderColor || theme.text.light;
+});
+var _templateObject$f$1$1$1, _templateObject2$c$1$1$1, _templateObject3$8$1$1$1, _templateObject4$6$1$1$1, _templateObject5$6$1$1$1;
+var Label$2$1$1 = styled.label(_templateObject$f$1$1$1 || (_templateObject$f$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: auto;\n  width: 100%;\n  font-weight: ", ";\n  position: relative;\n  white-space: nowrap;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+  var $fontWeight = _ref.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '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,
+    theme = _ref3.theme;
+  switch ($titlecolor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var Input$1$1$1 = styled.input(_templateObject2$c$1$1$1 || (_templateObject2$c$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  border: ", ";\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"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled,
+    $background = _ref6.$background,
+    theme = _ref6.theme;
+  return $disabled ? theme.disabled.secondary : $background;
+}, function (_ref7) {
+  var $color = _ref7.$color;
+  return $color;
+}, function (_ref8) {
+  var $disabled = _ref8.$disabled;
+  return $disabled ? 'none' : 'auto';
+}, function (_ref9) {
+  var $size = _ref9.$size,
+    $type = _ref9.$type;
+  switch ($size) {
+    case 'small':
+      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: " + ($type === 'password' ? '9.5px 38px 9.5px 12px' : '9.5px 12px') + ";\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          padding: " + ($type === 'password' ? '9px 38px 9px 14px' : '9px 14px') + ";\n        ";
+    default:
+      return "\n          font-size: 14px;\n          padding: " + ($type === 'password' ? '7px 38px 7px 12px' : '7px 12px') + ";\n        ";
+  }
+}, function (_ref10) {
+  var $color = _ref10.$color,
+    theme = _ref10.theme;
+  switch ($color) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $color;
+  }
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.text.light;
+});
+var InputWrapper$1$1$1$1 = styled.div(_templateObject3$8$1$1$1 || (_templateObject3$8$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$1$1$1$1 = styled.div(_templateObject4$6$1$1$1 || (_templateObject4$6$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref12) {
+  var $disabled = _ref12.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var Asterisk$1$1$1$1 = styled.span(_templateObject5$6$1$1$1 || (_templateObject5$6$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref13) {
+  var theme = _ref13.theme;
+  return theme["default"].error;
+});
+var _templateObject$g$1$1$1, _templateObject2$d$1$1$1, _templateObject3$9$1$1$1;
+var Container$3$1$1$1 = styled.div(_templateObject$g$1$1$1 || (_templateObject$g$1$1$1 = _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$1$1$1$1 = styled.label(_templateObject2$d$1$1$1 || (_templateObject2$d$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  cursor: auto;\n  font-weight: ", ";\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $fontWeight = _ref2.$fontWeight;
+  return $fontWeight != null ? $fontWeight : '500';
+}, function (_ref3) {
+  var $size = _ref3.$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 (_ref4) {
+  var $titlecolor = _ref4.$titlecolor,
+    theme = _ref4.theme;
+  return $titlecolor || theme.text.dark;
+});
+var TextAreaComponent$1$1$1 = styled.textarea(_templateObject3$9$1$1$1 || (_templateObject3$9$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  border: ", ";\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"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled,
+    $background = _ref7.$background,
+    theme = _ref7.theme;
+  return $disabled ? theme.disabled.secondary : $background;
+}, function (_ref8) {
+  var $color = _ref8.$color;
+  return $color;
+}, function (_ref9) {
+  var $size = _ref9.$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 (_ref10) {
+  var $color = _ref10.$color,
+    theme = _ref10.theme;
+  return $color || theme.text.dark;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.text.light;
+});
+var _templateObject$h$1$1$1, _templateObject2$e$1$1$1, _templateObject3$a$1$1$1, _templateObject4$7$1$1$1, _templateObject5$7$1$1$1, _templateObject6$6$1$1$1, _templateObject7$4$1$1$1;
+var OptionContainer$1$1$1$1 = styled.div(_templateObject$h$1$1$1 || (_templateObject$h$1$1$1 = _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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.text.white;
+});
+var OptionItem$1$1$1$1 = styled.div(_templateObject2$e$1$1$1 || (_templateObject2$e$1$1$1 = _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 (_ref2) {
+  var $optionSelected = _ref2.$optionSelected,
+    theme = _ref2.theme;
+  return $optionSelected ? theme.text.white : theme.text.medium;
+}, function (_ref3) {
+  var $optionSelected = _ref3.$optionSelected,
+    theme = _ref3.theme;
+  return $optionSelected ? theme["default"].primary : theme.text.white;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.hover.primary;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.text.white;
+});
+var TotalOptionsHeader$1$1$1 = styled.div(_templateObject3$a$1$1$1 || (_templateObject3$a$1$1$1 = _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: ", ";\n  font-size:12px;\n"])), function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.text.white;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.text.light;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return "1px solid " + theme.text.light;
+});
+var OptionLabel$1$1$1$1 = styled.label(_templateObject4$7$1$1$1 || (_templateObject4$7$1$1$1 = _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$3$1$1$1 = styled.div(_templateObject5$7$1$1$1 || (_templateObject5$7$1$1$1 = _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 (_ref9) {
+  var $background = _ref9.$background,
+    theme = _ref9.theme;
+  switch ($background) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $background;
+  }
+}, function (_ref10) {
+  var $borderBottom = _ref10.$borderBottom;
+  return $borderBottom || 'none';
+}, function (_ref11) {
+  var $borderRadius = _ref11.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$3$1$1$1 = styled.input(_templateObject6$6$1$1$1 || (_templateObject6$6$1$1$1 = _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\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme["default"].tertiary;
+}, function (_ref13) {
+  var $inputColor = _ref13.$inputColor,
+    theme = _ref13.theme;
+  switch ($inputColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref14) {
+  var $placeholderColor = _ref14.$placeholderColor,
+    theme = _ref14.theme;
+  switch ($placeholderColor) {
+    case 'dark':
+      return theme.text.dark;
+    case 'medium':
+      return theme.text.medium;
+    case 'light':
+      return theme.text.light;
+    case 'white':
+      return theme.text.white;
+    case 'warning':
+      return theme["default"].warning;
+    case 'info':
+      return theme["default"].info;
+    case 'success':
+      return theme["default"].success;
+    case 'error':
+      return theme["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var OptionsWrapper$1$1$1$1 = styled.div(_templateObject7$4$1$1$1 || (_templateObject7$4$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", ";\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.text.white;
+});
+var _templateObject$i$1$1$1, _templateObject2$f$1$1$1;
+var StyledCheckBox$1$1$1 = styled.input(_templateObject$i$1$1$1 || (_templateObject$i$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\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: ", ";\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,
+    theme = _ref3.theme;
+  return $checked ? $borderSize + "px solid " + theme["default"].primary : $borderSize + "px solid " + theme.border.extraBold;
+}, function (_ref4) {
+  var $checked = _ref4.$checked,
+    theme = _ref4.theme;
+  return $checked ? theme["default"].primary : theme.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";
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return "solid " + theme.text.white;
+});
+var LabelSpan$1$1$1 = styled(Span$1$1$1)(_templateObject2$f$1$1$1 || (_templateObject2$f$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  font-weight: 500;\n  line-height: 1;\n  user-select: none;\n"])));
+var _templateObject$j$1$1$1, _templateObject2$g$1$1$1, _templateObject3$b$1$1$1, _templateObject4$8$1$1$1;
+var spin$1$1$1$1 = keyframes(_templateObject$j$1$1$1 || (_templateObject$j$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition$1$1$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$1$1$1 = styled.div(_templateObject2$g$1$1$1 || (_templateObject2$g$1$1$1 = _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$1$1$1 = styled.div.attrs(function (_ref3) {
+  var $index = _ref3.$index,
+    $size = _ref3.$size;
+  return {
+    style: {
+      transform: getDotPosition$1$1$1($index, $size)
+    }
+  };
+})(_templateObject3$b$1$1$1 || (_templateObject3$b$1$1$1 = _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) {
+  var $dotSize = _ref5.$dotSize;
+  return $dotSize;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, spin$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$1$1$1 = styled.div(_templateObject4$8$1$1$1 || (_templateObject4$8$1$1$1 = _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$k$1$1$1, _templateObject2$h$1$1$1;
+var spin$2$1$1$1 = keyframes(_templateObject$k$1$1$1 || (_templateObject$k$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$1$1$1$1 = styled.div(_templateObject2$h$1$1$1 || (_templateObject2$h$1$1$1 = _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) {
+  var $size = _ref2.$size;
+  return $size;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+}, spin$2$1$1$1);
+var _templateObject$l$1$1$1;
+var PageInput$1$1$1 = styled.input(_templateObject$l$1$1$1 || (_templateObject$l$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: ", ";\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"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.accent.light_2;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return "1px solid " + theme.border.light;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.text.dark;
+});
+var _templateObject$m$1$1$1, _templateObject2$i$1$1$1, _templateObject3$c$1$1$1, _templateObject4$9$1$1$1, _templateObject5$8$1$1$1;
+var SidebarContainer = styled.div(_templateObject$m$1$1$1 || (_templateObject$m$1$1$1 = _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,
+    theme = _ref2.theme;
+  return $background || theme.accent.softBlue;
+});
+var SidebarLink = styled(NavLink)(_templateObject2$i$1$1$1 || (_templateObject2$i$1$1$1 = _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  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.text.medium;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme["default"].primary;
+});
+var IconWrapper$2$1$1$1 = styled.div(_templateObject3$c$1$1$1 || (_templateObject3$c$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
+  var $selected = _ref5.$selected,
+    theme = _ref5.theme;
+  return $selected ? theme["default"].primary : theme["default"].tertiary;
+});
+var Logo = styled.div(_templateObject4$9$1$1$1 || (_templateObject4$9$1$1$1 = _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 = styled.span(_templateObject5$8$1$1$1 || (_templateObject5$8$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\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 (_ref6) {
+  var $padding = _ref6.$padding;
+  return $padding;
+}, function (_ref7) {
+  var $fontSize = _ref7.$fontSize;
+  return $fontSize || '20px';
+}, function (_ref8) {
+  var $fontWeight = _ref8.$fontWeight;
+  return $fontWeight || '500';
+}, function (_ref9) {
+  var $color = _ref9.$color,
+    theme = _ref9.theme;
+  return $color || theme["default"].primary;
+}, function (_ref10) {
+  var $isExpanded = _ref10.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref11) {
+  var $isExpanded = _ref11.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+});
+var _templateObject$n, _templateObject2$j, _templateObject3$d, _templateObject4$a;
+var ContainerWrapper = styled.div(_templateObject$n || (_templateObject$n = _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 = styled.div(_templateObject2$j || (_templateObject2$j = _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';
+}, function (props) {
+  return props.$minWidth;
+}, function (props) {
+  return props.$background || 'inherit';
+}, function (props) {
+  return props.$padding;
+});
+var MainText = styled.div(_templateObject3$d || (_templateObject3$d = _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 = styled.div(_templateObject4$a || (_templateObject4$a = _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$o;
+var TableRowContainer = styled$1.div(_templateObject$o || (_templateObject$o = _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$p, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$7$1$1$1;
+var TableContainer = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose$1$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.brand.light;
+});
+var TableHeader = styled.div(_templateObject2$k || (_templateObject2$k = _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 (_ref2) {
+  var $hbcolor = _ref2.$hbcolor,
+    theme = _ref2.theme;
+  return $hbcolor || theme["default"].tertiary;
+}, function (_ref3) {
+  var $tcolor = _ref3.$tcolor,
+    theme = _ref3.theme;
+  return $tcolor || theme.text.white;
+});
+var TableContent = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose$1$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
+  var $isLegends = _ref4.$isLegends;
+  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
+});
+var LegendDivider = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose$1$1$1(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.border.extraLight;
+}, function (_ref6) {
+  var $marginRight = _ref6.$marginRight;
+  return $marginRight != null ? $marginRight : '0px';
+});
+var Divider = styled.div(_templateObject6$7$1$1$1 || (_templateObject6$7$1$1$1 = _taggedTemplateLiteralLoose$1$1$1(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.border.extraLight;
+});
+var _templateObject$q, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8;
+var Container$4$1$1$1 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose$1$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+  var $overflow = _ref.$overflow;
+  return $overflow || 'visible';
+}, function (_ref2) {
+  var $gap = _ref2.$gap;
+  return $gap;
+}, function (_ref3) {
+  var $border = _ref3.$border;
+  return $border;
+});
+var FirstContainer = styled.div(_templateObject2$l || (_templateObject2$l = _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: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
+  var $bordeBottom = _ref4.$bordeBottom,
+    theme = _ref4.theme;
+  return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.border.light;
+}, function (_ref5) {
+  var $headerPadding = _ref5.$headerPadding;
+  return $headerPadding ? $headerPadding : '0px';
+});
+var TabContainer = styled.div(_templateObject3$f || (_templateObject3$f = _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 (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
+  return $disabled ? '0.6' : '1';
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.text.medium;
+}, function (_ref9) {
+  var $headerHeight = _ref9.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (_ref10) {
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TabItemContainer = styled.div(_templateObject4$c || (_templateObject4$c = _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    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
+  var $headerHeight = _ref11.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (props) {
+  return props.$active ? 'block' : 'none';
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme["default"].primary;
+});
+var DetailsFirstContainer = styled.div(_templateObject5$a || (_templateObject5$a = _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  white-space: nowrap;\n"])), function (_ref13) {
+  var $active = _ref13.$active,
+    theme = _ref13.theme;
+  return $active ? theme["default"].primary : theme.text.medium;
+});
+var TabItemsWrapper = styled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose$1$1$1(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var _templateObject$r, _templateObject2$m;
+var shimmer = keyframes(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose$1$1(["\n  0% { background-position: 200% 0; }\n  100% { background-position: -100% 0; }\n"])));
+var AnimatedProgress = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose$1$1(["\n  height: 100%;\n  width: ", ";\n  background: ", ";\n  background-size: 300% 100%;\n  // background-repeat: no-repeat;\n  animation: ", " 2s linear infinite;\n  transition: width 0.5s ease-in-out;\n"])), function (_ref) {
+  var width = _ref.width;
+  return width;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, shimmer);
+var _templateObject$s, _templateObject2$n, _templateObject3$g, _templateObject4$d, _templateObject5$b;
+var SidebarContainer$1 = styled.div(_templateObject$s || (_templateObject$s = _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,
+    theme = _ref2.theme;
+  return $background || theme.accent.softBlue;
+});
+var SidebarLink$1 = styled(NavLink)(_templateObject2$n || (_templateObject2$n = _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  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.text.medium;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme["default"].primary;
+});
+var IconWrapper$3 = styled.div(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose$1$1(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
+  var $selected = _ref5.$selected,
+    theme = _ref5.theme;
+  return $selected ? theme["default"].primary : theme["default"].tertiary;
+});
+var Logo$1 = styled.div(_templateObject4$d || (_templateObject4$d = _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$1 = styled.span(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose$1$1(["\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 (_ref6) {
+  var $padding = _ref6.$padding;
+  return $padding;
+}, function (_ref7) {
+  var $fontSize = _ref7.$fontSize;
+  return $fontSize || '20px';
+}, function (_ref8) {
+  var $fontWeight = _ref8.$fontWeight;
+  return $fontWeight || '500';
+}, function (_ref9) {
+  var $color = _ref9.$color,
+    theme = _ref9.theme;
+  return $color || theme["default"].primary;
+}, function (_ref10) {
+  var $isExpanded = _ref10.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref11) {
+  var $isExpanded = _ref11.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+});
+var _templateObject$t, _templateObject2$o, _templateObject3$h, _templateObject4$e;
+var ContainerWrapper$1 = styled.div(_templateObject$t || (_templateObject$t = _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$1 = styled.div(_templateObject2$o || (_templateObject2$o = _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';
+}, function (props) {
+  return props.$minWidth;
+}, function (props) {
+  return props.$background || 'inherit';
+}, function (props) {
+  return props.$padding;
+});
+var MainText$1 = styled.div(_templateObject3$h || (_templateObject3$h = _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$1 = styled.div(_templateObject4$e || (_templateObject4$e = _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$u;
+var TableRowContainer$1 = styled$1.div(_templateObject$u || (_templateObject$u = _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$v, _templateObject2$p, _templateObject3$i, _templateObject4$f, _templateObject5$c, _templateObject6$9;
+var TableContainer$1 = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose$1$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.brand.light;
+});
+var TableHeader$1 = styled.div(_templateObject2$p || (_templateObject2$p = _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 (_ref2) {
+  var $hbcolor = _ref2.$hbcolor,
+    theme = _ref2.theme;
+  return $hbcolor || theme["default"].tertiary;
+}, function (_ref3) {
+  var $tcolor = _ref3.$tcolor,
+    theme = _ref3.theme;
+  return $tcolor || theme.text.white;
+});
+var TableContent$1 = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$1 = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose$1$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
+  var $isLegends = _ref4.$isLegends;
+  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
+});
+var LegendDivider$1 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose$1$1(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.border.extraLight;
+}, function (_ref6) {
+  var $marginRight = _ref6.$marginRight;
+  return $marginRight != null ? $marginRight : '0px';
+});
+var Divider$1 = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose$1$1(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.border.extraLight;
+});
+var _templateObject$w, _templateObject2$q, _templateObject3$j, _templateObject4$g, _templateObject5$d, _templateObject6$a;
+var Container$5 = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose$1$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+  var $overflow = _ref.$overflow;
+  return $overflow || 'visible';
+}, function (_ref2) {
+  var $gap = _ref2.$gap;
+  return $gap;
+}, function (_ref3) {
+  var $border = _ref3.$border;
+  return $border;
+});
+var FirstContainer$1 = styled.div(_templateObject2$q || (_templateObject2$q = _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: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
+  var $bordeBottom = _ref4.$bordeBottom,
+    theme = _ref4.theme;
+  return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.border.light;
+}, function (_ref5) {
+  var $headerPadding = _ref5.$headerPadding;
+  return $headerPadding ? $headerPadding : '0px';
+});
+var TabContainer$1 = styled.div(_templateObject3$j || (_templateObject3$j = _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 (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref7) {
+  var $disabled = _ref7.$disabled;
+  return $disabled ? '0.6' : '1';
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.text.medium;
+}, function (_ref9) {
+  var $headerHeight = _ref9.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (_ref10) {
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TabItemContainer$1 = styled.div(_templateObject4$g || (_templateObject4$g = _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    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
+  var $headerHeight = _ref11.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (props) {
+  return props.$active ? 'block' : 'none';
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme["default"].primary;
+});
+var DetailsFirstContainer$1 = 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  white-space: nowrap;\n"])), function (_ref13) {
+  var $active = _ref13.$active,
+    theme = _ref13.theme;
+  return $active ? theme["default"].primary : theme.text.medium;
+});
+var TabItemsWrapper$1 = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose$1$1(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var _templateObject$x, _templateObject2$r;
+var shimmer$1 = keyframes(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose$1(["\n  0% { background-position: 200% 0; }\n  100% { background-position: -100% 0; }\n"])));
+var AnimatedProgress$1 = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose$1(["\n  height: 100%;\n  width: ", ";\n  background: ", ";\n  background-size: 300% 100%;\n  // background-repeat: no-repeat;\n  animation: ", " 2s linear infinite;\n  transition: width 0.5s ease-in-out;\n"])), function (_ref) {
+  var width = _ref.width;
+  return width;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, shimmer$1);
+var _templateObject$y, _templateObject2$s, _templateObject3$k, _templateObject4$h, _templateObject5$e;
+var SidebarContainer$2 = styled.div(_templateObject$y || (_templateObject$y = _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,
+    theme = _ref2.theme;
+  return $background || theme.accent.softBlue;
+});
+var SidebarLink$2 = styled(NavLink)(_templateObject2$s || (_templateObject2$s = _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  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.text.medium;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme["default"].primary;
+});
+var IconWrapper$4 = styled.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose$1(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
+  var $selected = _ref5.$selected,
+    theme = _ref5.theme;
+  return $selected ? theme["default"].primary : theme["default"].tertiary;
+});
+var Logo$2 = styled.div(_templateObject4$h || (_templateObject4$h = _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$2 = styled.span(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose$1(["\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 (_ref6) {
+  var $padding = _ref6.$padding;
+  return $padding;
+}, function (_ref7) {
+  var $fontSize = _ref7.$fontSize;
+  return $fontSize || '20px';
+}, function (_ref8) {
+  var $fontWeight = _ref8.$fontWeight;
+  return $fontWeight || '500';
+}, function (_ref9) {
+  var $color = _ref9.$color,
+    theme = _ref9.theme;
+  return $color || theme["default"].primary;
+}, function (_ref10) {
+  var $isExpanded = _ref10.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref11) {
+  var $isExpanded = _ref11.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+});
+var _templateObject$z, _templateObject2$t, _templateObject3$l, _templateObject4$i;
+var ContainerWrapper$2 = styled.div(_templateObject$z || (_templateObject$z = _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$2 = styled.div(_templateObject2$t || (_templateObject2$t = _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';
+}, function (props) {
+  return props.$minWidth;
+}, function (props) {
+  return props.$background || 'inherit';
+}, function (props) {
+  return props.$padding;
+});
+var MainText$2 = styled.div(_templateObject3$l || (_templateObject3$l = _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$2 = styled.div(_templateObject4$i || (_templateObject4$i = _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$A;
+var TableRowContainer$2 = styled$1.div(_templateObject$A || (_templateObject$A = _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$B, _templateObject2$u, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$b;
+var TableContainer$2 = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose$1(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.brand.light;
+});
+var TableHeader$2 = styled.div(_templateObject2$u || (_templateObject2$u = _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 (_ref2) {
+  var $hbcolor = _ref2.$hbcolor,
+    theme = _ref2.theme;
+  return $hbcolor || theme["default"].tertiary;
+}, function (_ref3) {
+  var $tcolor = _ref3.$tcolor,
+    theme = _ref3.theme;
+  return $tcolor || theme.text.white;
+});
+var TableContent$2 = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$2 = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose$1(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
+  var $isLegends = _ref4.$isLegends;
+  return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
+});
+var LegendDivider$2 = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose$1(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.border.extraLight;
+}, function (_ref6) {
+  var $marginRight = _ref6.$marginRight;
+  return $marginRight != null ? $marginRight : '0px';
+});
+var Divider$2 = styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose$1(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.border.extraLight;
+});
+var _templateObject$C, _templateObject2$v, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$c;
+var Container$6 = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+  var $overflow = _ref.$overflow;
+  return $overflow || 'visible';
+}, function (_ref2) {
+  var $gap = _ref2.$gap;
+  return $gap;
+}, function (_ref3) {
+  var $border = _ref3.$border;
+  return $border;
+});
+var FirstContainer$2 = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose$1(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
+  var $bordeBottom = _ref4.$bordeBottom,
     theme = _ref4.theme;
   return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.border.light;
 }, function (_ref5) {
   var $headerPadding = _ref5.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer = styled.div(_templateObject3$f || (_templateObject3$f = _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 (_ref6) {
+var TabContainer$2 = styled.div(_templateObject3$n || (_templateObject3$n = _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 (_ref6) {
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref7) {
@@ -8654,7 +12209,7 @@ var TabContainer = styled.div(_templateObject3$f || (_templateObject3$f = _tagge
   var $disabled = _ref10.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer = styled.div(_templateObject4$c || (_templateObject4$c = _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    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
+var TabItemContainer$2 = styled.div(_templateObject4$k || (_templateObject4$k = _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    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
   var $headerHeight = _ref11.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
@@ -8663,22 +12218,22 @@ var TabItemContainer = styled.div(_templateObject4$c || (_templateObject4$c = _t
   var theme = _ref12.theme;
   return theme["default"].primary;
 });
-var DetailsFirstContainer = styled.div(_templateObject5$a || (_templateObject5$a = _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  white-space: nowrap;\n"])), function (_ref13) {
+var DetailsFirstContainer$2 = styled.div(_templateObject5$g || (_templateObject5$g = _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  white-space: nowrap;\n"])), function (_ref13) {
   var $active = _ref13.$active,
     theme = _ref13.theme;
   return $active ? theme["default"].primary : theme.text.medium;
 });
-var TabItemsWrapper = styled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var TabItemsWrapper$2 = styled.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose$1(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
 
-var _templateObject$r, _templateObject2$m;
-var shimmer = keyframes(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  0% { background-position: 200% 0; }\n  100% { background-position: -100% 0; }\n"])));
-var AnimatedProgress = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", ";\n  background: ", ";\n  background-size: 300% 100%;\n  // background-repeat: no-repeat;\n  animation: ", " 2s linear infinite;\n  transition: width 0.5s ease-in-out;\n"])), function (_ref) {
+var _templateObject$D, _templateObject2$w;
+var shimmer$2 = keyframes(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  0% { background-position: 200% 0; }\n  100% { background-position: -100% 0; }\n"])));
+var AnimatedProgress$2 = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", ";\n  background: ", ";\n  background-size: 300% 100%;\n  // background-repeat: no-repeat;\n  animation: ", " 2s linear infinite;\n  transition: width 0.5s ease-in-out;\n"])), function (_ref) {
   var width = _ref.width;
   return width;
 }, function (_ref2) {
   var color = _ref2.color;
   return color;
-}, shimmer);
+}, shimmer$2);
 var ProgressBar = function ProgressBar(_ref3) {
   var threshold = _ref3.threshold,
     totalCapacity = _ref3.totalCapacity,
@@ -8709,7 +12264,7 @@ var ProgressBar = function ProgressBar(_ref3) {
     "$background": trackColor != null ? trackColor : themeColors.accent.softBlue,
     "$overflow": 'hidden',
     "$position": 'relative'
-  }, animate ? React.createElement(AnimatedProgress, {
+  }, animate ? React.createElement(AnimatedProgress$2, {
     width: progress + "%",
     color: progressColor != null ? progressColor : themeColors["default"].primary
   }) : React.createElement(Container$4, {
@@ -8724,8 +12279,8 @@ var ProgressBar = function ProgressBar(_ref3) {
   }));
 };
 
-var _templateObject$s, _templateObject2$n, _templateObject3$g, _templateObject4$d, _templateObject5$b;
-var SidebarContainer$1 = styled.div(_templateObject$s || (_templateObject$s = _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$E, _templateObject2$x, _templateObject3$o, _templateObject4$l, _templateObject5$h;
+var SidebarContainer$3 = styled.div(_templateObject$E || (_templateObject$E = _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) {
@@ -8733,20 +12288,20 @@ var SidebarContainer$1 = styled.div(_templateObject$s || (_templateObject$s = _t
     theme = _ref2.theme;
   return $background || theme.accent.softBlue;
 });
-var SidebarLink$1 = styled(NavLink)(_templateObject2$n || (_templateObject2$n = _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  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
+var SidebarLink$3 = styled(NavLink)(_templateObject2$x || (_templateObject2$x = _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  text-decoration: none;\n  transition: background 0.3s;\n\n  &:hover {\n  background: ", ";\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.text.medium;
 }, function (_ref4) {
   var theme = _ref4.theme;
   return theme["default"].primary;
 });
-var IconWrapper$3 = styled.div(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
+var IconWrapper$5 = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref5) {
   var $selected = _ref5.$selected,
     theme = _ref5.theme;
   return $selected ? theme["default"].primary : theme["default"].tertiary;
 });
-var Logo$1 = styled.div(_templateObject4$d || (_templateObject4$d = _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$1 = styled.span(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\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 (_ref6) {
+var Logo$3 = styled.div(_templateObject4$l || (_templateObject4$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$3 = styled.span(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\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 (_ref6) {
   var $padding = _ref6.$padding;
   return $padding;
 }, function (_ref7) {
@@ -8801,17 +12356,17 @@ var Sidebar = function Sidebar(_ref12) {
       "$gap": '10px'
     }, children.map(function (child) {
       var active = location.pathname.startsWith(child.url || '');
-      return React.createElement(SidebarLink$1, {
+      return React.createElement(SidebarLink$3, {
         to: child.url || '#',
         key: child.id
-      }, React.createElement(IconWrapper$3, {
+      }, React.createElement(IconWrapper$5, {
         "$selected": active
       }, React.createElement(Icon, {
         icon: child.icon,
         size: 18,
         weight: child.iconWeight,
         color: active ? themeColors.text.white : themeColors.text.medium
-      })), React.createElement(TextContainer$1, {
+      })), React.createElement(TextContainer$3, {
         "$isExpanded": isExpanded,
         "$fontSize": '12px',
         "$padding": '0px 10px 0px 0px',
@@ -8819,7 +12374,7 @@ var Sidebar = function Sidebar(_ref12) {
       }, child.label));
     }));
   };
-  return React.createElement(SidebarContainer$1, {
+  return React.createElement(SidebarContainer$3, {
     "$background": background,
     "$isExpanded": isExpanded,
     onMouseEnter: function onMouseEnter() {
@@ -8832,10 +12387,10 @@ var Sidebar = function Sidebar(_ref12) {
     "$flexDirection": 'column',
     "$gap": '28px',
     "$width": '100%'
-  }, logo && React.createElement(Logo$1, null, React.createElement(Icon, {
+  }, logo && React.createElement(Logo$3, null, React.createElement(Icon, {
     icon: logo.icon,
     color: logo.iconColor
-  }), React.createElement(TextContainer$1, {
+  }), React.createElement(TextContainer$3, {
     "$isExpanded": isExpanded,
     "$fontWeight": '700'
   }, logo.name)), React.createElement(Container, {
@@ -8857,14 +12412,14 @@ var Sidebar = function Sidebar(_ref12) {
       onClick: function onClick() {
         return hasChildren && toggleMenu(item.id);
       }
-    }, React.createElement(IconWrapper$3, {
+    }, React.createElement(IconWrapper$5, {
       "$selected": !!active
     }, React.createElement(Icon, {
       icon: item.icon,
       size: 20,
       weight: item.iconWeight,
       color: active ? themeColors.text.white : themeColors.text.medium
-    })), React.createElement(TextContainer$1, {
+    })), React.createElement(TextContainer$3, {
       "$isExpanded": isExpanded,
       "$fontSize": '14px',
       "$padding": '0px 10px 0px 0px',
@@ -8875,7 +12430,7 @@ var Sidebar = function Sidebar(_ref12) {
       color: themeColors.border.extraBold,
       onClick: function onClick() {}
     }));
-    return item.url ? React.createElement(SidebarLink$1, {
+    return item.url ? React.createElement(SidebarLink$3, {
       key: item.id,
       to: item.url
     }, ContentLayout) : React.createElement(Container, {
@@ -8887,14 +12442,14 @@ var Sidebar = function Sidebar(_ref12) {
   }))), ProfileContent);
 };
 
-var _templateObject$t, _templateObject2$o, _templateObject3$h, _templateObject4$e;
-var ContainerWrapper$1 = styled.div(_templateObject$t || (_templateObject$t = _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$F, _templateObject2$y, _templateObject3$p, _templateObject4$m;
+var ContainerWrapper$3 = styled.div(_templateObject$F || (_templateObject$F = _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$1 = styled.div(_templateObject2$o || (_templateObject2$o = _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$3 = styled.div(_templateObject2$y || (_templateObject2$y = _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';
@@ -8905,14 +12460,14 @@ var CellContainer$1 = styled.div(_templateObject2$o || (_templateObject2$o = _ta
 }, function (props) {
   return props.$padding;
 });
-var MainText$1 = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var MainText$3 = styled.div(_templateObject3$p || (_templateObject3$p = _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$1 = styled.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+var SubText$3 = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
   return props.$stc;
 }, function (props) {
   return props.$stfs;
@@ -8941,31 +12496,31 @@ var TableCell = function TableCell(_ref2) {
     CustomFunction = _ref2.CustomFunction,
     padding = _ref2.padding,
     minHeight = _ref2.minHeight;
-  return React.createElement(ContainerWrapper$1, {
+  return React.createElement(ContainerWrapper$3, {
     "$width": width,
     "$minHeight": minHeight
-  }, CustomFunction ? React.createElement(CellContainer$1, {
+  }, CustomFunction ? React.createElement(CellContainer$3, {
     "$align": alignment,
     "$width": width,
     "$minWidth": minWidth
-  }, CustomFunction) : React.createElement(CellContainer$1, {
+  }, CustomFunction) : React.createElement(CellContainer$3, {
     "$align": alignment,
     "$width": width,
     "$minWidth": minWidth,
     "$padding": padding
-  }, React.createElement(MainText$1, {
+  }, React.createElement(MainText$3, {
     "$mtc": maintextcolor,
     "$mtfs": maintextfontsize,
     "$mtw": maintextweight
-  }, maintext), subtext && React.createElement(SubText$1, {
+  }, maintext), subtext && React.createElement(SubText$3, {
     "$stc": subtextcolor,
     "$stfs": subtextfontsize,
     "$stw": subtextweight
   }, subtext)));
 };
 
-var _templateObject$u;
-var TableRowContainer$1 = styled$1.div(_templateObject$u || (_templateObject$u = _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$G;
+var TableRowContainer$3 = styled$1.div(_templateObject$G || (_templateObject$G = _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,
@@ -8978,7 +12533,7 @@ var TableRow = function TableRow(_ref) {
     }
   };
   return React.createElement(Container, null, rowconfig.map(function (data, Index) {
-    return React.createElement(TableRowContainer$1, {
+    return React.createElement(TableRowContainer$3, {
       key: Index
     }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
       "$padding": '0px 16px 0px 0px',
@@ -9015,12 +12570,12 @@ var TableRow = function TableRow(_ref) {
   }));
 };
 
-var _templateObject$v, _templateObject2$p, _templateObject3$i, _templateObject4$f, _templateObject5$c, _templateObject6$9;
-var TableContainer$1 = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$z, _templateObject3$q, _templateObject4$n, _templateObject5$i, _templateObject6$d;
+var TableContainer$3 = styled.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.brand.light;
 });
-var TableHeader$1 = styled.div(_templateObject2$p || (_templateObject2$p = _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 (_ref2) {
+var TableHeader$3 = styled.div(_templateObject2$z || (_templateObject2$z = _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 (_ref2) {
   var $hbcolor = _ref2.$hbcolor,
     theme = _ref2.theme;
   return $hbcolor || theme["default"].tertiary;
@@ -9029,19 +12584,19 @@ var TableHeader$1 = styled.div(_templateObject2$p || (_templateObject2$p = _tagg
     theme = _ref3.theme;
   return $tcolor || theme.text.white;
 });
-var TableContent$1 = styled.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
-var TableData$1 = styled.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
+var TableContent$3 = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData$3 = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: ", ";\n"])), function (_ref4) {
   var $isLegends = _ref4.$isLegends;
   return $isLegends ? 'calc(100% - 56px)' : 'calc(100% - 36px)';
 });
-var LegendDivider$1 = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
+var LegendDivider$3 = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background: ", ";\n  margin-right: ", ";\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.border.extraLight;
 }, function (_ref6) {
   var $marginRight = _ref6.$marginRight;
   return $marginRight != null ? $marginRight : '0px';
 });
-var Divider$1 = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
+var Divider$3 = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.border.extraLight;
 });
@@ -9100,7 +12655,7 @@ var Table = function Table(_ref8) {
     });
     setIsAllSelected(allChecked);
   }, [rowconfig]);
-  return React.createElement(TableContainer$1, null, React.createElement(TableContent$1, null, React.createElement(TableHeader$1, {
+  return React.createElement(TableContainer$3, null, React.createElement(TableContent$3, null, React.createElement(TableHeader$3, {
     "$hbcolor": tableheaderconfig.headercolor,
     "$tcolor": tableheaderconfig.textcolor
   }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
@@ -9140,14 +12695,14 @@ var Table = function Table(_ref8) {
       "$fontWeight": '400',
       "$width": 'max-content',
       "$lineHeight": 'normal'
-    }, currentGroupTitle), React.createElement(LegendDivider$1, null)) : React.createElement(LegendDivider$1, {
+    }, currentGroupTitle), React.createElement(LegendDivider$3, null)) : React.createElement(LegendDivider$3, {
       "$marginRight": currentGroupTitle !== (((_allCols = allCols[index + 1]) === null || _allCols === void 0 ? void 0 : _allCols.groupTitle) || '') ? '8px' : '0px'
     })) : null), React.createElement(TableCell, {
       maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
       width: columndata.width,
       alignment: columndata.alignment
     }));
-  })), React.createElement(Divider$1, null), loading ? React.createElement(Container, {
+  })), React.createElement(Divider$3, null), loading ? React.createElement(Container, {
     "$flexDirection": 'column',
     "$alignItems": 'center',
     "$justifyContent": 'center',
@@ -9159,7 +12714,7 @@ var Table = function Table(_ref8) {
     "$alignItems": 'center',
     "$padding": '24px 24px',
     "$justifyContent": 'center'
-  }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData$1, {
+  }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData$3, {
     "$isLegends": tableheaderconfig.headerdata.some(function (col) {
       return !!col.groupTitle;
     })
@@ -9194,9 +12749,9 @@ var Table = function Table(_ref8) {
         rowconfig: [row],
         tableheaderconfig: tableheaderconfig,
         selectCallback: tableObject.selectCallback
-      }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider$1, null));
+      }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider$3, null));
     }));
-  })) : React.createElement(TableData$1, {
+  })) : React.createElement(TableData$3, {
     "$isLegends": tableheaderconfig.headerdata.some(function (col) {
       return !!col.groupTitle;
     })
@@ -9207,12 +12762,12 @@ var Table = function Table(_ref8) {
       rowconfig: [row],
       tableheaderconfig: tableheaderconfig,
       selectCallback: tableObject.selectCallback
-    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider$1, null));
+    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider$3, null));
   }))));
 };
 
-var _templateObject$w, _templateObject2$q, _templateObject3$j, _templateObject4$g, _templateObject5$d, _templateObject6$a;
-var Container$5 = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
+var _templateObject$I, _templateObject2$A, _templateObject3$r, _templateObject4$o, _templateObject5$j, _templateObject6$e;
+var Container$7 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;   \n  display: flex;\n  flex-direction: column;\n  overflow: ", ";\n  gap: ", ";\n  border: ", ";\n  border-radius: 8px;\n"])), function (_ref) {
   var $overflow = _ref.$overflow;
   return $overflow || 'visible';
 }, function (_ref2) {
@@ -9222,7 +12777,7 @@ var Container$5 = styled.div(_templateObject$w || (_templateObject$w = _taggedTe
   var $border = _ref3.$border;
   return $border;
 });
-var FirstContainer$1 = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
+var FirstContainer$3 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: ", ";\n  padding: ", ";\n  justify-content: space-between;\n  align-items: center;\n  height: max-content;\n"])), function (_ref4) {
   var $bordeBottom = _ref4.$bordeBottom,
     theme = _ref4.theme;
   return $bordeBottom != null ? $bordeBottom : "1px solid " + theme.border.light;
@@ -9230,7 +12785,7 @@ var FirstContainer$1 = styled.div(_templateObject2$q || (_templateObject2$q = _t
   var $headerPadding = _ref5.$headerPadding;
   return $headerPadding ? $headerPadding : '0px';
 });
-var TabContainer$1 = styled.div(_templateObject3$j || (_templateObject3$j = _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 (_ref6) {
+var TabContainer$3 = styled.div(_templateObject3$r || (_templateObject3$r = _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 (_ref6) {
   var $disabled = _ref6.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref7) {
@@ -9246,7 +12801,7 @@ var TabContainer$1 = styled.div(_templateObject3$j || (_templateObject3$j = _tag
   var $disabled = _ref10.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
-var TabItemContainer$1 = styled.div(_templateObject4$g || (_templateObject4$g = _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    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
+var TabItemContainer$3 = styled.div(_templateObject4$o || (_templateObject4$o = _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    min-height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref11) {
   var $headerHeight = _ref11.$headerHeight;
   return $headerHeight ? $headerHeight : '34px';
 }, function (props) {
@@ -9255,12 +12810,12 @@ var TabItemContainer$1 = styled.div(_templateObject4$g || (_templateObject4$g =
   var theme = _ref12.theme;
   return theme["default"].primary;
 });
-var DetailsFirstContainer$1 = styled.div(_templateObject5$d || (_templateObject5$d = _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  white-space: nowrap;\n"])), function (_ref13) {
+var DetailsFirstContainer$3 = styled.div(_templateObject5$j || (_templateObject5$j = _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  white-space: nowrap;\n"])), function (_ref13) {
   var $active = _ref13.$active,
     theme = _ref13.theme;
   return $active ? theme["default"].primary : theme.text.medium;
 });
-var TabItemsWrapper$1 = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
+var TabItemsWrapper$3 = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  // overflow-x: auto;\n  scrollbar-width: thin;\n"])));
 var Tabs = function Tabs(_ref14) {
   var tabItems = _ref14.tabItems,
     _ref14$disabled = _ref14.disabled,
@@ -9275,22 +12830,22 @@ var Tabs = function Tabs(_ref14) {
     bordeBottom = _ref14.bordeBottom,
     tabRightNode = _ref14.tabRightNode;
   var themeColors = useTheme();
-  return React.createElement(Container$5, {
+  return React.createElement(Container$7, {
     "$gap": gap,
     "$border": border,
     "$overflow": overflow
-  }, React.createElement(FirstContainer$1, {
+  }, React.createElement(FirstContainer$3, {
     "$headerPadding": headerPadding,
     "$bordeBottom": bordeBottom
-  }, React.createElement(TabItemsWrapper$1, null, tabItems.map(function (tab, index) {
-    return React.createElement(TabContainer$1, {
+  }, React.createElement(TabItemsWrapper$3, null, tabItems.map(function (tab, index) {
+    return React.createElement(TabContainer$3, {
       key: index,
       onClick: function onClick() {
         if (!disabled && tab.onClick) tab.onClick();
       },
       "$disabled": disabled,
       "$headerHeight": headerHeight
-    }, React.createElement(TabItemContainer$1, {
+    }, React.createElement(TabItemContainer$3, {
       "$active": activeTab === tab.title,
       "$headerHeight": headerHeight
     }, tab.icon && React.createElement(Icon, {
@@ -9298,11 +12853,11 @@ var Tabs = function Tabs(_ref14) {
       icon: tab.icon,
       size: tab.iconSize,
       weight: tab.iconWeight
-    }), React.createElement(DetailsFirstContainer$1, {
+    }), React.createElement(DetailsFirstContainer$3, {
       "$active": activeTab === tab.title
     }, tab.title)));
   })), tabRightNode === null || tabRightNode === void 0 ? void 0 : tabRightNode.node), tabItems.map(function (tab, index) {
-    return activeTab === tab.title && React.createElement(Container$5, {
+    return activeTab === tab.title && React.createElement(Container$7, {
       key: index,
       "$overflow": overflow
     }, tab.content);